refactor(DataGrid): implement types for DataGrid component (#5257)

* refactor(DataGrid): implement types for DataGrid component * refactor(DataGridContent): implement types for DataGridContent file * refactor(filterSummary): implement types * refactor(datagridContent): implement types * refactor(datagridHead): implement types * refactor(datagridBody): implement types * refactor(datagridEmptyBody): implement types * fix(datagridEmptyBody): empty state props * refactor(DatagridVirtualBody): implement types * refactor(datagridRefBody): implement types * refactor(DatagridSimpleBody): implement types * refactor(DatagridExpandedRow): implement types * refactor(DatagridHeaderRow): implement types * refactor(DatagridSlug): implement types * refactor(DatagridRow): implement types * refactor(DatagridSelectAll): implement types * refactor(DatagridSelectAllWithToggle): implement types * refactor(DatagridToolbar): implement types * refactor(DraggableEleemt): implement types * refactor(dataGrid): import carbon component props * refactor(DataGrid): reuse react-table types * refactor(DatagridHeaderRow): assign key value separately * refactor: change types according to react-table types * fix(datagrid): remove emptyState props * refactor: revert empty state props * refactor(datagrid): move index file to .ts * refactor: update type for state in all files * refactor: change row typw * chore: test issue * chore: revert test code * chore: remove condition * chore: remove condition * chore: revert condition * chore: state destructure * chore: test deployment issue 1 * chore: test deployment issue 1 * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * refactor: test deploy error * fix(DataGrid): resolve error in deployment * fix(DataGrid): resolve error on deployed version * chore(Datagrid): resolve PR comments * chore: dummy commit to rerun jobs * chore: remove unwanted line * refactor: change react-table types version * refactor: change react-table types version * chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version * chore: dummy commit to rerun jobs chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version * chore: dummy commit to rerun jobs chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: dummy commit to rerun jobs chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version * chore(release): publish [skip ci] - @carbon/ibm-cloud-cognitive-core@2.18.3 - @carbon/ibm-products@2.41.0 - @carbon/ibm-products-styles@2.38.0 * chore(Datagrid): resolve PR comments * fix(CreateTearsheet): add focus trap behavior (#5329) * test(ExpressiveCard): add @AVT test for default state (#5393) * test(Toolbar): add default state AVT test (#5395) * fix(Coachmark): ssr issues with `instanceOf(HTMLElement)` (#5391) * fix(Coachmark): ssr issues with htmlelement * chore: remove unnecessary export * Add .whitesource configuration file (#5323) Co-authored-by: ibm-mend-app[bot] <142626574+ibm-mend-app[bot]@users.noreply.github.com> Co-authored-by: Jeff Chew <jeff.chew@gmail.com> * refactor(TagOverflowModal): add Typescript types to TagOverflowModal (#5311) * fix(Datagrid): add disable cell support (#5385) * test(ProductiveCard): add default state AVT test (#5394) * feat(FeatureFlags): add new mechanism for feature flagging using `@carbon/feature-flags` (#5204) * feat(FeatureFlags): add feature flag support using carbon package * chore: import feature flags and update lock * chore: remove console log * feat: use new feature flag system and add mdx docs * chore: add annotation component to example story * fix: remove utility hook from portal target hook * chore: rename feature-flags file * chore: remove console log * chore: add feature flag component to editable cell stories * fix: import feature flags file * fix: import feature flags in jest setup * fix: update tests * chore: remove old generated feature flags * chore: import feature flags * fix: add feature flags file as side effect * chore: add test file * chore(feature-flags): rename to match carbon naming patterns chore: dummy commit to rerun jobs chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: dummy commit to rerun jobs chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: dummy commit to rerun jobs chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: dummy commit to rerun jobs chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version chore: remove unwanted line refactor: change react-table types version refactor: change react-table types version * chore: resolve merge conflict * refactor: resolve minor issues * test: resolve test issue --------- Co-authored-by: github-merge-queue <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Matt Gallo <mdgallo@us.ibm.com> Co-authored-by: andrew <emyarod@users.noreply.github.com> Co-authored-by: Ignacio Becerra <i1becerr@ucsd.edu> Co-authored-by: ibm-mend-app[bot] <142626574+ibm-mend-app[bot]@users.noreply.github.com> Co-authored-by: Jeff Chew <jeff.chew@gmail.com> Co-authored-by: Anamika T S <47971732+anamikaanu96@users.noreply.github.com> Co-authored-by: Austin <aj_viens_deruisseau@yahoo.com>
carbon-design-system · Jun 6, 2024 · de9c862 · de9c862
1 parent 596cbc0
commit de9c862
Show file tree

Hide file tree

Showing 29 changed files with 720 additions and 246 deletions.
diff --git a/packages/ibm-products/package.json b/packages/ibm-products/package.json
@@ -71,6 +71,7 @@
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-preset-ibm-cloud-cognitive": "^0.14.40",
     "chalk": "^4.1.2",

diff --git a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheet.tsx b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheet.tsx
@@ -16,7 +16,14 @@ import React, {
   MutableRefObject,
   LegacyRef,
 } from 'react';
-import { useBlockLayout, useTable, useColumnOrder } from 'react-table';
+import {
+  useBlockLayout,
+  useTable,
+  useColumnOrder,
+  Column,
+  UseColumnOrderInstanceProps,
+  TableInstance,
+} from 'react-table';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
@@ -48,7 +55,7 @@ import { removeCellSelections } from './utils/removeCellSelections';
 import { selectAllCells } from './utils/selectAllCells';
 import { handleEditSubmit } from './utils/handleEditSubmit';
 import { handleKeyPress } from './utils/commonEventHandlers';
-import { ActiveCellCoordinates, Column, PrevState, Size, Theme } from './types';
+import { ActiveCellCoordinates, PrevState, Size, Theme } from './types';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--data-spreadsheet`;
@@ -79,7 +86,7 @@ interface DataSpreadsheetProps {
   /**
    * The data that will build the column headers
    */
-  columns?: readonly Column[];
+  columns?: readonly Column<object>[];
 
   /**
    * The spreadsheet data that will be rendered in the body of the spreadsheet component
@@ -186,7 +193,7 @@ export let DataSpreadsheet = React.forwardRef(
       }) || {};
     const cellSizeValue = getCellSize(cellSize);
     const cellEditorRef = useRef<HTMLTextAreaElement>();
-    const [activeCellContent, setActiveCellContent] = useState(null);
+    const [activeCellContent, setActiveCellContent] = useState<any>();
     const activeCellRef = useRef<HTMLDivElement | HTMLButtonElement>();
     const cellEditorRulerRef = useRef<HTMLPreElement>();
     const defaultColumn = useMemo(
@@ -221,7 +228,7 @@ export let DataSpreadsheet = React.forwardRef(
       },
       useBlockLayout,
       useColumnOrder
-    );
+    ) as UseColumnOrderInstanceProps<any> & TableInstance;
 
     // Update the spreadsheet data after editing a cell
     const updateData = useCallback(
@@ -268,7 +275,8 @@ export let DataSpreadsheet = React.forwardRef(
           prevCoords?.column !== activeCellCoordinates?.column) &&
         isEditing
       ) {
-        const cellProps = rows[prevCoords?.row].cells[prevCoords?.column];
+        const cellProps =
+          rows[Number(prevCoords?.row)].cells[Number(prevCoords?.column)];
         removeCellEditor();
         updateData(prevCoords?.row, cellProps.column.id, undefined);
         if (cellEditorRulerRef?.current) {
@@ -803,7 +811,7 @@ export let DataSpreadsheet = React.forwardRef(
             [`${blockClass}__${theme}`]: theme === 'dark',
           }
         )}
-        ref={spreadsheetRef}
+        ref={spreadsheetRef as MutableRefObject<HTMLDivElement>}
         role="grid"
         tabIndex={0}
         aria-rowcount={rows?.length || 0}

diff --git a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx
@@ -38,7 +38,13 @@ import {
   handleRowHeaderClick,
 } from './utils/commonEventHandlers';
 import { prepareProps } from '../../global/js/utils/props-helper';
-import { ActiveCellCoordinates, Column, PrevState } from './types';
+import { ActiveCellCoordinates, PrevState, SpreadsheetColumn } from './types';
+import {
+  Column,
+  IdType,
+  TableBodyPropGetter,
+  TableBodyProps,
+} from 'react-table';
 
 const blockClass = `${pkg.prefix}--data-spreadsheet`;
 
@@ -60,7 +66,7 @@ interface DataSpreadsheetBodyProps {
   /**
    * All of the spreadsheet columns
    */
-  columns?: readonly Column[];
+  columns?: readonly Column<object>[];
 
   /**
    * This represents the id of the current cell selection area
@@ -70,7 +76,7 @@ interface DataSpreadsheetBodyProps {
   /**
    * Default spreadsheet sizing values
    */
-  defaultColumn?: Column;
+  defaultColumn?: SpreadsheetColumn;
 
   /**
    * Sets the number of empty rows to be created when there is no data provided
@@ -80,7 +86,7 @@ interface DataSpreadsheetBodyProps {
   /**
    * Function to set table body prop values
    */
-  getTableBodyProps?: () => { data };
+  getTableBodyProps: (propGetter?: TableBodyPropGetter<any>) => TableBodyProps;
 
   /**
    * Headers provided from useTable hook
@@ -152,7 +158,11 @@ interface DataSpreadsheetBodyProps {
   /**
    * Setter fn for column ordering, provided from react-table
    */
-  setColumnOrder?: () => void;
+  setColumnOrder?: (
+    updater:
+      | ((columnOrder: Array<IdType<any>>) => Array<IdType<any>>)
+      | Array<IdType<any>>
+  ) => void;
 
   /**
    * Setter fn for containerHasFocus state value
@@ -193,7 +203,7 @@ interface DataSpreadsheetBodyProps {
   /**
    * Prop from react-table used to reorder columns
    */
-  visibleColumns?: [];
+  visibleColumns?: Column<object>[];
 }
 
 export const DataSpreadsheetBody = forwardRef(
@@ -797,6 +807,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Function to set table body prop values
    */
+  /**@ts-ignore */
   getTableBodyProps: PropTypes.func,
 
   /**

diff --git a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetHeader.tsx b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetHeader.tsx
@@ -29,11 +29,12 @@ import { checkForHoldingKey } from './utils/checkForHoldingKey';
 import { prepareProps } from '../../global/js/utils/props-helper';
 import {
   ActiveCellCoordinates,
-  Column,
   ItemType,
   PrevState,
   Size,
+  SpreadsheetColumn,
 } from './types';
+import { Column } from 'react-table';
 
 const blockClass = `${pkg.prefix}--data-spreadsheet`;
 
@@ -61,7 +62,7 @@ interface DataSpreadsheetHeaderProps {
   /**
    * Default spreadsheet sizing values
    */
-  defaultColumn?: Column;
+  defaultColumn?: SpreadsheetColumn;
 
   /**
    * Whether or not a click/hold is active on a header cell
@@ -134,7 +135,7 @@ interface DataSpreadsheetHeaderProps {
   /**
    * Array of visible columns provided by react-table useTable hook
    */
-  visibleColumns?: [];
+  visibleColumns?: Column<object>[];
 }
 
 export const DataSpreadsheetHeader = forwardRef(

diff --git a/packages/ibm-products/src/components/DataSpreadsheet/types/index.ts b/packages/ibm-products/src/components/DataSpreadsheet/types/index.ts
@@ -1,9 +1,7 @@
 export type Size = 'xs' | 'sm' | 'md' | 'lg';
 export type Theme = 'light' | 'dark';
-export interface Column {
-  Header?: string;
-  accessor?: string | (() => void);
-  Cell?: () => void; // optional cell formatter
+
+export interface SpreadsheetColumn {
   rowHeight?: number;
   rowHeaderWidth?: number;
   width?: number;

diff --git a/.../components/Datagrid/Datagrid/Datagrid.js → ...components/Datagrid/Datagrid/Datagrid.tsx b/.../components/Datagrid/Datagrid/Datagrid.js → ...components/Datagrid/Datagrid/Datagrid.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { ForwardedRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
@@ -15,20 +15,40 @@ import pconsole from '../../../global/js/utils/pconsole';
 import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext';
 import { DatagridContent } from './DatagridContent';
 import { FilterProvider } from './addons/Filtering/FilterProvider';
+import { DataGridState, DatagridRow } from '../types';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 const componentName = 'Datagrid';
 
+export interface DatagridProps {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   * 'aria-label' of the TableToolbar component.
+   */
+  ariaToolbarLabel?: string;
+  /**
+   * The data grid state, much of it being supplied by the useDatagrid hook
+   */
+  datagridState: DataGridState;
+  /**
+   * Table title
+   */
+  title?: string;
+}
+
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
  */
 export let Datagrid = React.forwardRef(
-  ({ datagridState, title, ariaToolbarLabel, ...rest }, ref) => {
+  (
+    { datagridState, title, ariaToolbarLabel, ...rest }: DatagridProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
     if (!datagridState) {
       pconsole.warn(
         'Datagrid was not passed datagridState which is required to render this component.'
       );
-      return null;
+      return;
     }
 
     const {
@@ -38,11 +58,11 @@ export let Datagrid = React.forwardRef(
       tableId,
       filterProps,
       className,
-      state: { filters },
+      state,
     } = datagridState;
 
-    const rows =
-      (DatagridPagination && datagridState.page) || datagridState.rows;
+    const rows = ((DatagridPagination && datagridState.page) ||
+      datagridState.rows) as DatagridRow[];
 
     const props = {
       title,
@@ -51,7 +71,7 @@ export let Datagrid = React.forwardRef(
     };
 
     return (
-      <FilterProvider filters={filters} filterProps={filterProps}>
+      <FilterProvider filters={state?.filters} filterProps={filterProps}>
         <InlineEditProvider>
           <div
             {...rest}
@@ -101,6 +121,7 @@ Datagrid.propTypes = {
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
+  /**@ts-ignore */
   datagridState: PropTypes.object.isRequired,
   /**
    * Table title

diff --git a/...ponents/Datagrid/Datagrid/DatagridBody.js → ...onents/Datagrid/Datagrid/DatagridBody.tsx b/...ponents/Datagrid/Datagrid/DatagridBody.js → ...onents/Datagrid/Datagrid/DatagridBody.tsx
@@ -10,8 +10,9 @@ import DatagridEmptyBody from './DatagridEmptyBody';
 import DatagridVirtualBody from './DatagridVirtualBody';
 import DatagridSimpleBody from './DatagridSimpleBody';
 import DatagridRefBody from './DatagridRefBody';
+import { DataGridState } from '../types';
 
-const DatagridBody = (datagridState) => {
+const DatagridBody = (datagridState: DataGridState) => {
   const {
     isFetching,
     rows = [],