refactor(flat-table): move context into an internal directory

Moves `FlatTableContext` into an `__internal__` directory and updates imports where neccessary. The context is not intended for public use and should improve tree-shaking in Carbon. BREAKING CHANGE: The context is no longer exposed as part of the public interface of `FlatTable`
Sage · Jun 27, 2024 · 442d414 · 442d414
1 parent 88bf483
commit 442d414
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 30 deletions.
diff --git a/src/components/flat-table/__internal__/flat-table.context.ts b/src/components/flat-table/__internal__/flat-table.context.ts
@@ -0,0 +1,11 @@
+import React from "react";
+import { FlatTableProps } from "../flat-table.component";
+
+export interface FlatTableContextProps
+  extends Pick<FlatTableProps, "colorTheme" | "size"> {
+  getTabStopElementId: () => string;
+}
+
+export default React.createContext<FlatTableContextProps>({
+  getTabStopElementId: () => "",
+});
diff --git a/src/components/flat-table/__internal__/use-table-cell.ts b/src/components/flat-table/__internal__/use-table-cell.ts
@@ -1,9 +1,9 @@
 import { useContext, useEffect, useState } from "react";
 import FlatTableRowContext from "../flat-table-row/__internal__/flat-table-row-context";
-import { FlatTableThemeContext } from "../flat-table.component";
+import FlatTableContext from "./flat-table.context";
 
 export default (id: string) => {
-  const { getTabStopElementId } = useContext(FlatTableThemeContext);
+  const { getTabStopElementId } = useContext(FlatTableContext);
   const [tabIndex, setTabIndex] = useState(-1);
   const {
     expandable,

diff --git a/src/components/flat-table/flat-table-header/flat-table-header.component.tsx b/src/components/flat-table/flat-table-header/flat-table-header.component.tsx
@@ -3,7 +3,7 @@ import { PaddingProps } from "styled-system";
 import { TableBorderSize, TableCellAlign } from "..";
 
 import StyledFlatTableHeader from "./flat-table-header.style";
-import { FlatTableThemeContext } from "../flat-table.component";
+import FlatTableContext from "../__internal__/flat-table.context";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useTableCell from "../__internal__/use-table-cell";
 
@@ -41,7 +41,7 @@ export const FlatTableHeader = ({
 }: FlatTableHeaderProps) => {
   const ref = useRef<HTMLTableCellElement>(null);
   const internalId = useRef(id || guid());
-  const { colorTheme } = useContext(FlatTableThemeContext);
+  const { colorTheme } = useContext(FlatTableContext);
   const { leftPosition, rightPosition, makeCellSticky } = useTableCell(
     internalId.current
   );

diff --git a/src/components/flat-table/flat-table-header/flat-table-header.spec.tsx b/src/components/flat-table/flat-table-header/flat-table-header.spec.tsx
@@ -5,8 +5,9 @@ import FlatTableHeader, {
 } from "./flat-table-header.component";
 import StyledFlatTableHeader from "./flat-table-header.style";
 import { assertStyleMatch } from "../../../__spec_helper__/__internal__/test-utils";
-import { FlatTableThemeContext, FlatTableProps } from "../flat-table.component";
+import { FlatTableProps } from "../flat-table.component";
 import getAlternativeBackgroundColor from "./flat-table-header-utils";
+import FlatTableContext from "../__internal__/flat-table.context";
 
 describe("FlatTableHeader", () => {
   it("renders with proper width style rule when width prop is passed", () => {
@@ -62,7 +63,7 @@ describe("FlatTableHeader", () => {
       'overrides the header "background-color" with correspond color for %s themeColor"',
       (colorTheme) => {
         const wrapper = mount(
-          <FlatTableThemeContext.Provider
+          <FlatTableContext.Provider
             value={{ colorTheme, getTabStopElementId: () => "" }}
           >
             <table>
@@ -72,7 +73,7 @@ describe("FlatTableHeader", () => {
                 </tr>
               </thead>
             </table>
-          </FlatTableThemeContext.Provider>
+          </FlatTableContext.Provider>
         );
 
         assertStyleMatch(

diff --git a/src/components/flat-table/flat-table-row/flat-table-row.component.tsx b/src/components/flat-table/flat-table-row/flat-table-row.component.tsx
@@ -16,7 +16,7 @@ import FlatTableRowHeader from "../flat-table-row-header";
 import FlatTableRowDraggable, {
   FlatTableRowDraggableProps,
 } from "./__internal__/flat-table-row-draggable.component";
-import { FlatTableThemeContext } from "../flat-table.component";
+import FlatTableContext from "../__internal__/flat-table.context";
 import guid from "../../../__internal__/utils/helpers/guid";
 import FlatTableRowContext from "./__internal__/flat-table-row-context";
 import SubRowProvider, { SubRowContext } from "./__internal__/sub-row-provider";
@@ -189,7 +189,7 @@ export const FlatTableRow = React.forwardRef<
     );
 
     const { colorTheme, size, getTabStopElementId } = useContext(
-      FlatTableThemeContext
+      FlatTableContext
     );
     const { isInSidebar } = useContext(DrawerSidebarContext);
     const { stickyOffsets } = useContext(FlatTableHeadContext);

diff --git a/src/components/flat-table/flat-table-row/flat-table-row.spec.tsx b/src/components/flat-table/flat-table-row/flat-table-row.spec.tsx
@@ -16,7 +16,7 @@ import StyledIcon from "../../icon/icon.style";
 import FlatTableRowHeader from "../flat-table-row-header/flat-table-row-header.component";
 import FlatTableHeader from "../flat-table-header/flat-table-header.component";
 import { FlatTableBodyDraggable } from "..";
-import { FlatTableThemeContext } from "../flat-table.component";
+import FlatTableContext from "../__internal__/flat-table.context";
 import Box from "../../box";
 import * as browserTypeCheck from "../../../__internal__/utils/helpers/browser-type-check";
 
@@ -1353,7 +1353,7 @@ describe("FlatTableRow", () => {
     describe("when the size of the table is 'compact'", () => {
       it("should add the correct padding to child row cells", () => {
         const wrapper = mount(
-          <FlatTableThemeContext.Provider
+          <FlatTableContext.Provider
             value={{ size: "compact", getTabStopElementId: () => "" }}
           >
             <table>
@@ -1364,7 +1364,7 @@ describe("FlatTableRow", () => {
                 </FlatTableRow>
               </tbody>
             </table>
-          </FlatTableThemeContext.Provider>
+          </FlatTableContext.Provider>
         );
 
         assertStyleMatch(

diff --git a/src/components/flat-table/flat-table.component.tsx b/src/components/flat-table/flat-table.component.tsx
@@ -9,6 +9,7 @@ import {
 } from "./flat-table.style";
 import DrawerSidebarContext from "../drawer/__internal__/drawer-sidebar.context";
 import Events from "../../__internal__/utils/helpers/events/events";
+import FlatTableContext from "./__internal__/flat-table.context";
 
 export interface FlatTableProps extends MarginProps {
   /** The HTML id of the element that contains a description of this table. */
@@ -41,15 +42,6 @@ export interface FlatTableProps extends MarginProps {
   width?: string;
 }
 
-export interface FlatTableThemeContextProps
-  extends Pick<FlatTableProps, "colorTheme" | "size"> {
-  getTabStopElementId: () => string;
-}
-
-export const FlatTableThemeContext = React.createContext<FlatTableThemeContextProps>(
-  { getTabStopElementId: () => "" }
-);
-
 const FOCUSABLE_ROW_AND_CELL_QUERY =
   "tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]";
 
@@ -268,15 +260,15 @@ export const FlatTable = ({
           {...tableStylingProps}
         >
           {caption ? <caption>{caption}</caption> : null}
-          <FlatTableThemeContext.Provider
+          <FlatTableContext.Provider
             value={{
               colorTheme,
               size,
               getTabStopElementId,
             }}
           >
             {children}
-          </FlatTableThemeContext.Provider>
+          </FlatTableContext.Provider>
         </StyledFlatTable>
       </StyledTableContainer>
       {footer && (

diff --git a/src/components/flat-table/sort/sort.component.tsx b/src/components/flat-table/sort/sort.component.tsx
@@ -4,7 +4,7 @@ import Typography from "../../typography";
 import { StyledSort, StyledSpaceHolder, StyledSortIcon } from "./sort.style";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useLocale from "../../../hooks/__internal__/useLocale";
-import { FlatTableThemeContext } from "../flat-table.component";
+import FlatTableContext from "../__internal__/flat-table.context";
 
 export interface SortProps {
   /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
@@ -35,7 +35,7 @@ export const Sort = ({
     return null;
   };
 
-  const { colorTheme } = useContext(FlatTableThemeContext);
+  const { colorTheme } = useContext(FlatTableContext);
 
   return (
     <>

diff --git a/src/components/flat-table/sort/sort.spec.tsx b/src/components/flat-table/sort/sort.spec.tsx
@@ -6,7 +6,8 @@ import Icon from "../../icon";
 import StyledIcon from "../../icon/icon.style";
 import Typography from "../../typography";
 import { StyledSort, StyledSpaceHolder } from "./sort.style";
-import { FlatTableThemeContext, FlatTableProps } from "../flat-table.component";
+import { FlatTableProps } from "../flat-table.component";
+import FlatTableContext from "../__internal__/flat-table.context";
 
 function renderSort(props: SortProps = {}) {
   return mount(<Sort {...props}>Name</Sort>);
@@ -128,11 +129,11 @@ describe("Sort", () => {
 
   it("should render Icon with correct colour when colorTheme is dark", () => {
     wrapper = mount(
-      <FlatTableThemeContext.Provider
+      <FlatTableContext.Provider
         value={{ colorTheme: "dark", getTabStopElementId: () => "" }}
       >
         <Sort sortType="ascending">Name</Sort>
-      </FlatTableThemeContext.Provider>
+      </FlatTableContext.Provider>
     );
 
     assertStyleMatch(
@@ -151,11 +152,11 @@ describe("Sort", () => {
     "should render Icon with correct colour when colorTheme is %s",
     (color) => {
       wrapper = mount(
-        <FlatTableThemeContext.Provider
+        <FlatTableContext.Provider
           value={{ colorTheme: color, getTabStopElementId: () => "" }}
         >
           <Sort sortType="ascending">Name</Sort>
-        </FlatTableThemeContext.Provider>
+        </FlatTableContext.Provider>
       );
 
       assertStyleMatch(