ref: pass callbacks into provider and remove from props

packages/design-system/src/components/cookieTable/index.tsx

@@ -25,12 +25,14 @@ import React, {
   useReducer,
 } from 'react';
 import { CookieTableData, getCookieKey } from '@ps-analysis-tool/common';
+import { saveAs } from 'file-saver';
 
 /**
  * Internal dependencies.
  */
 import { Table, TableColumn, TableData, TableFilter, TableRow } from '../table';
 import { TableProvider } from '../table/useTable';
+import { generateCookieTableCSV } from '../table/utils';
 
 interface CookieTableProps {
   data: TableData[];
@@ -39,8 +41,6 @@ interface CookieTableProps {
   tableSearchKeys?: string[];
   tablePersistentSettingsKey?: string;
   selectedFrame: string | null;
-  showTopBar?: boolean;
-  hideExport?: boolean;
   selectedFrameCookie: {
     [frame: string]: CookieTableData | null;
   } | null;
@@ -68,8 +68,6 @@ const CookieTable = forwardRef<
     tableSearchKeys,
     tablePersistentSettingsKey,
     data: cookies,
-    showTopBar,
-    hideExport = false,
     selectedFrame,
     selectedFrameCookie,
     setSelectedFrameCookie,
@@ -100,6 +98,30 @@ const CookieTable = forwardRef<
     [selectedFrame, setSelectedFrameCookie]
   );
 
+  const onRowContextMenuHandler = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>, row: TableRow) => {
+      onRowContextMenu?.(e, row);
+      onRowClick(row?.originalData);
+    },
+    [onRowClick, onRowContextMenu]
+  );
+
+  const exportCookies = useCallback((rows: TableRow[]) => {
+    const _cookies = rows.map(({ originalData }) => originalData);
+    if (_cookies.length > 0 && 'parsedCookie' in _cookies[0]) {
+      const csvTextBlob = generateCookieTableCSV(_cookies as CookieTableData[]);
+      saveAs(csvTextBlob, 'Cookies Report.csv');
+    }
+  }, []);
+
+  const getRowObjectKey = useCallback(
+    (row: TableRow) =>
+      getCookieKey(
+        (row?.originalData as CookieTableData).parsedCookie
+      ) as string,
+    []
+  );
+
   useImperativeHandle(
     ref,
     () => {
@@ -132,29 +154,18 @@ const CookieTable = forwardRef<
         tableFilterData={tableFilters}
         tableSearchKeys={tableSearchKeys}
         tablePersistentSettingsKey={tablePersistentSettingsKey}
+        onRowClick={onRowClick}
+        onRowContextMenu={onRowContextMenuHandler}
+        getRowObjectKey={getRowObjectKey}
+        exportTableData={exportCookies}
       >
         <Table
-          showTopBar={showTopBar}
           selectedKey={
             selectedKey === null
               ? null
               : getCookieKey(selectedKey?.parsedCookie)
           }
-          hideExport={hideExport}
-          getRowObjectKey={(row: TableRow) =>
-            getCookieKey(
-              (row?.originalData as CookieTableData).parsedCookie
-            ) as string
-          }
-          onRowClick={onRowClick}
           extraInterfaceToTopBar={extraInterfaceToTopBar}
-          onRowContextMenu={(
-            e: React.MouseEvent<HTMLDivElement>,
-            row: TableRow
-          ) => {
-            onRowContextMenu?.(e, row);
-            onRowClick(row?.originalData);
-          }}
         />
       </TableProvider>
     </div>

packages/design-system/src/components/table/components/index.tsx

@@ -19,49 +19,36 @@
  */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Resizable } from 're-resizable';
-import { saveAs } from 'file-saver';
-import { CookieTableData } from '@ps-analysis-tool/common';
 
 /**
  * Internal dependencies.
  */
 import TableHeader from './tableHeader';
 import TableBody from './tableBody';
 import ColumnMenu from './columnMenu';
-import { TableData, TableRow, useTable } from '../useTable';
+import { useTable } from '../useTable';
 import TableTopBar from './tableTopBar';
 import ChipsBar from './filtersSidebar/chips';
 import FiltersSidebar from './filtersSidebar';
-import { generateCookieTableCSV } from '../utils';
 
 interface TableProps {
   selectedKey: string | undefined | null;
-  getRowObjectKey: (row: TableRow) => string;
-  onRowClick: (row: TableData | null) => void;
-  onRowContextMenu?: (
-    e: React.MouseEvent<HTMLDivElement>,
-    row: TableRow
-  ) => void;
-  showTopBar?: boolean;
   hideFiltering?: boolean;
-  hideExport?: boolean;
   extraInterfaceToTopBar?: React.ReactNode;
 }
 
 const Table = ({
   selectedKey,
-  getRowObjectKey,
-  onRowClick,
-  onRowContextMenu = () => undefined,
-  showTopBar = false,
   hideFiltering = false,
-  hideExport = false,
   extraInterfaceToTopBar,
 }: TableProps) => {
-  const { rows, tableContainerRef } = useTable(({ state }) => ({
-    rows: state.rows,
-    tableContainerRef: state.tableContainerRef,
-  }));
+  const { rows, tableContainerRef, exportTableData } = useTable(
+    ({ state, actions }) => ({
+      rows: state.rows,
+      tableContainerRef: state.tableContainerRef,
+      exportTableData: actions.exportTableData,
+    })
+  );
 
   const [showColumnsMenu, setShowColumnsMenu] = useState(false);
   const [showFilterSidebar, setShowFilterSidebar] = useState(false);
@@ -104,27 +91,19 @@ const Table = ({
     [showColumnsMenu]
   );
 
-  const exportCookies = useCallback(() => {
-    const cookies = rows.map(({ originalData }) => originalData);
-    if (cookies.length > 0 && 'parsedCookie' in cookies[0]) {
-      const csvTextBlob = generateCookieTableCSV(cookies as CookieTableData[]);
-      saveAs(csvTextBlob, 'Cookies Report.csv');
-    }
-  }, [rows]);
-
   return (
     <div className="w-full h-full flex flex-col">
-      {showTopBar && (
-        <TableTopBar
-          showFilterSidebar={showFilterSidebar}
-          hideFiltering={hideFiltering}
-          setShowFilterSidebar={setShowFilterSidebar}
-          cookiesCount={rows.length}
-          disableExport={rows.length === 0}
-          extraInterface={extraInterfaceToTopBar}
-          exportCookies={hideExport ? undefined : exportCookies}
-        />
-      )}
+      <TableTopBar
+        showFilterSidebar={showFilterSidebar}
+        hideFiltering={hideFiltering}
+        setShowFilterSidebar={setShowFilterSidebar}
+        cookiesCount={rows.length}
+        disableExport={rows.length === 0}
+        extraInterface={extraInterfaceToTopBar}
+        exportTableData={
+          exportTableData ? () => exportTableData(rows) : undefined
+        }
+      />
       <ChipsBar />
       <div className="w-full flex-1 overflow-hidden h-full flex divide-x divide-american-silver dark:divide-quartz">
         {showFilterSidebar && (
@@ -157,12 +136,9 @@ const Table = ({
               setIsRowFocused={setIsRowFocused}
             />
             <TableBody
-              getRowObjectKey={getRowObjectKey}
               isRowFocused={isRowFocused}
               setIsRowFocused={setIsRowFocused}
               selectedKey={selectedKey}
-              onRowClick={onRowClick}
-              onRowContextMenu={onRowContextMenu}
             />
           </div>
         </div>

packages/design-system/src/components/table/components/tableBody/bodyRow.tsx

@@ -36,7 +36,7 @@ interface BodyRowProps {
   getRowObjectKey: (row: TableRow) => string;
   onRowClick: (e: React.MouseEvent<HTMLDivElement>) => void;
   onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>, index: number) => void;
-  onRowContextMenu?: (
+  onRowContextMenu: (
     e: React.MouseEvent<HTMLDivElement>,
     row: TableRow
   ) => void;
@@ -52,7 +52,7 @@ const BodyRow = ({
   isRowFocused,
   onRowClick,
   onKeyDown,
-  onRowContextMenu = () => undefined,
+  onRowContextMenu,
 }: BodyRowProps) => {
   const cookieKey = getRowObjectKey(row);
   const isBlocked =

packages/design-system/src/components/table/components/tableBody/index.tsx

@@ -24,35 +24,27 @@ import classNames from 'classnames';
  * Internal dependencies.
  */
 import BodyRow from './bodyRow';
-import { useTable, type TableData, type TableRow } from '../../useTable';
+import { useTable } from '../../useTable';
 
 interface TableBodyProps {
-  getRowObjectKey: (row: TableRow) => string;
   isRowFocused: boolean;
   setIsRowFocused: (state: boolean) => void;
   selectedKey: string | undefined | null;
-  onRowClick: (
-    key: TableData | null,
-    e?: React.MouseEvent<HTMLDivElement>
-  ) => void;
-  onRowContextMenu?: (
-    e: React.MouseEvent<HTMLDivElement>,
-    row: TableRow
-  ) => void;
 }
 
 const TableBody = ({
-  getRowObjectKey,
   isRowFocused,
   setIsRowFocused,
   selectedKey,
-  onRowClick,
-  onRowContextMenu = () => undefined,
 }: TableBodyProps) => {
-  const { rows, columns } = useTable(({ state }) => ({
-    rows: state.rows,
-    columns: state.columns,
-  }));
+  const { rows, columns, onRowClick, onRowContextMenu, getRowObjectKey } =
+    useTable(({ state, actions }) => ({
+      rows: state.rows,
+      columns: state.columns,
+      onRowClick: actions.onRowClick,
+      onRowContextMenu: actions.onRowContextMenu,
+      getRowObjectKey: actions.getRowObjectKey,
+    }));
 
   const tableBodyRef = useRef(null);
 
@@ -148,8 +140,8 @@ const TableBody = ({
           selectedKey={selectedKey}
           getRowObjectKey={getRowObjectKey}
           isRowFocused={isRowFocused}
-          onRowClick={(e: React.MouseEvent<HTMLDivElement>) => {
-            onRowClick(row?.originalData, e);
+          onRowClick={() => {
+            onRowClick(row?.originalData);
             setIsRowFocused(true);
           }}
           onKeyDown={handleKeyDown}

packages/design-system/src/components/table/components/tableTopBar/index.tsx

@@ -34,7 +34,7 @@ interface TableTopBarProps {
   disableFiltering?: boolean;
   disableExport?: boolean;
   extraInterface?: React.ReactNode;
-  exportCookies?: () => void;
+  exportTableData?: () => void;
 }
 
 const TableTopBar = ({
@@ -45,7 +45,7 @@ const TableTopBar = ({
   disableFiltering = false,
   disableExport = false,
   extraInterface = null,
-  exportCookies,
+  exportTableData,
 }: TableTopBarProps) => {
   const { searchValue, setSearchValue } = useTable(({ state, actions }) => ({
     searchValue: state.searchValue,
@@ -90,11 +90,11 @@ const TableTopBar = ({
 
       <div className="flex gap-3">
         {extraInterface}
-        {exportCookies && (
+        {exportTableData && (
           <ExportButton
-            title={'Export Cookies Table'}
+            title="Export Table Data"
             disabled={disableExport}
-            onClick={exportCookies}
+            onClick={exportTableData}
           />
         )}
       </div>

packages/design-system/src/components/table/useTable/index.tsx

@@ -96,6 +96,13 @@ interface useTableProps {
   tableFilterData?: TableFilter;
   tableSearchKeys?: string[];
   tablePersistentSettingsKey?: string;
+  onRowClick: (row: TableData | null) => void;
+  onRowContextMenu: (
+    e: React.MouseEvent<HTMLDivElement>,
+    row: TableRow
+  ) => void;
+  getRowObjectKey: (row: TableRow) => string;
+  exportTableData?: (rows: TableRow[]) => void;
 }
 
 export interface TableStoreContext {
@@ -126,6 +133,10 @@ export interface TableStoreContext {
     resetFilters: TableFilteringOutput['resetFilters'];
     isSelectAllFilterSelected: TableFilteringOutput['isSelectAllFilterSelected'];
     setSearchValue: TableSearchOutput['setSearchValue'];
+    onRowClick: useTableProps['onRowClick'];
+    onRowContextMenu: useTableProps['onRowContextMenu'];
+    getRowObjectKey: useTableProps['getRowObjectKey'];
+    exportTableData?: useTableProps['exportTableData'];
   };
 }
 
@@ -157,6 +168,9 @@ const initialState: TableStoreContext = {
     resetFilters: noop,
     isSelectAllFilterSelected: () => false,
     setSearchValue: noop,
+    onRowClick: noop,
+    onRowContextMenu: noop,
+    getRowObjectKey: () => '',
   },
 };
 
@@ -168,6 +182,10 @@ export const TableProvider = ({
   tableFilterData,
   tableSearchKeys,
   tablePersistentSettingsKey,
+  onRowClick,
+  onRowContextMenu,
+  getRowObjectKey,
+  exportTableData,
   children,
 }: PropsWithChildren<useTableProps>) => {
   const commonKey = useMemo(() => {
@@ -278,6 +296,10 @@ export const TableProvider = ({
           resetFilters,
           isSelectAllFilterSelected,
           setSearchValue,
+          onRowClick,
+          onRowContextMenu,
+          getRowObjectKey,
+          exportTableData,
         },
       }}
     >