@carbon/ibm-products 2.3.2 → 2.4.0

package/lib/components/Datagrid/Datagrid.docs-page.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
+var stories = _interopRequireWildcard(require("./Datagrid.stories"));
+var _datagridActionsExample = _interopRequireDefault(require("./storybook-assets/datagrid-actions-example.png"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      title: 'Getting started',
+      description: "You can use the `Datagrid` component to create various kinds of Carbon data tables. Simply import the `Datagrid` along with any accompanying hooks (listed below) depending on what extensions you'd like to be included.",
+      source: {
+        code: "import {\n  Datagrid,\n  useDatagrid,\n  useInfiniteScroll,\n  useNestedRows,\n  useSelectRows,\n  useExpandedRow,\n  useOnRowClick,\n  useSortableColumns,\n  useRowIsMouseOver,\n  useColumnRightAlign,\n  useDisableSelectRows,\n  useStickyColumn,\n  useActionsColumn,\n  useCustomizeColumns,\n  useSelectAllWithToggle,\n  useColumnCenterAlign,\n  useColumnOrder,\n  useEditableCell,\n  useFiltering,\n  useFilterContext\n} from '@carbon/ibm-products';"
+      }
+    }, {
+      title: 'Basic',
+      description: "Here is a basic usage example. The following component will render the datagrid seen below, with pagination and some toolbar actions. One of the key pieces to building the `Datagrid` is the `useDatagrid` hook, this will give you all of the state/props required to render a `Datagrid`."
+    }, {
+      subTitle: 'Multi line wrap',
+      description: 'This setting enables the table cell text wrap to two lines. This can be turned on for only one column in the datagrid or for every column.',
+      source: {
+        language: 'jsx',
+        code: "\n          import { Datagrid, useDatagrid } from '@carbon/ibm-products';\n\nconst App = () => {\n  const columns = React.useMemo(() => defaultHeader, []); // These are the columns that will be used by the datagrid\n  const [data] = useState(makeData(10)); // This is the data that will be rendered by the datagrid\n\n  const columns = React.useMemo(\n    () => [\n      ...defaultHeader,\n      {\n        Header: 'Someone 11',\n        accessor: 'someone11',\n        multiLineWrap: true, //If `multiLineWrap` is required only for specific columns\n      },\n    ],\n    []\n  );\n\n  const datagridState = useDatagrid({\n    columns,\n    data,\n    multiLineWrapAll: true, // If `multiLineWrap` is required for all columns in data grid\n  });\n\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+      }
+    }, {
+      story: stories.BasicUsage
+    }, {
+      title: 'Column structure',
+      description: "The columns that are passed to the `useDatagrid` hook will have the following structure:",
+      source: {
+        language: 'jsx',
+        code: "\n          const columns = [\n    {\n      Header: 'First Name',\n      accessor: 'firstName',\n    },\n    {\n      Header: 'Last Name',\n      accessor: 'lastName',\n    },\n];"
+      }
+    }, {
+      description: "To change the default/initial width of a column, add a `width` property to the column.",
+      source: {
+        language: 'jsx',
+        code: "\n          const columns = [\n  {\n    Header: 'First Name',\n    accessor: 'firstName',\n    width: 120,\n  },\n  {\n    Header: 'Last Name',\n    accessor: 'lastName',\n    width: 180,\n  },\n];\n          "
+      }
+    }, {
+      description: 'If needed, it is also possible to wrap each cell in a containing element. See below:',
+      source: {
+        language: 'jsx',
+        code: "\n          const columns = [\n  {\n    Header: 'First Name',\n    accessor: 'firstName',\n  },\n  {\n    Header: 'Last Name',\n    accessor: 'lastName',\n    Cell: ({ cell: { value } }) => (\n      <span className=\"custom-cell-wrapper\">{value}</span>\n    ),\n  },\n];\n          "
+      }
+    }, {
+      title: 'Rendering the table toolbar',
+      image: /*#__PURE__*/_react.default.createElement("img", {
+        src: _datagridActionsExample.default,
+        alt: "Datagrid highlighting toolbar area"
+      }),
+      description: "In some of the examples you will see a component named `DatagridActions` passed to the `useDatagrid` hook. This component will render the table toolbar and is something that you will need to create on your own and then provide it to the `useDatagrid` hook. You can reference the `DatagridActions` that we have [created for our stories](https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Datagrid/utils/DatagridActions.js) when building your own."
+    }, {
+      title: 'Empty',
+      story: stories.EmptyState,
+      description: "The `Datagrid` supports empty states, when the data prop passed to the `useDatagrid` hook is an empty array.\n        ",
+      source: {
+        language: 'jsx',
+        code: "\nimport { Datagrid, useDatagrid } from '@carbon/ibm-products';\n\nconst App = () => {\n  const columns = React.useMemo(() => defaultHeader, []); // These are the columns that will be used by the datagrid\n  const [data] = useState([]); // This is the data that will be rendered by the datagrid\n\n  const datagridState = useDatagrid({\n    columns,\n    data,\n    emptyStateTitle: 'Empty state title',\n    emptyStateDescription: 'Description explaining why table is empty',\n    emptyStateSize: 'lg', // See empty state size options from the EmptyState component\n  });\n\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+      }
+    }, {
+      title: 'Auto size column to fit content',
+      description: "The `getAutoSizedColumnWidth` utility function can be used to auto size columns based on it's content. The width will be set to that of the largest cell in the column or the column header, whichever is greater. If this is not used, the width will be set to the default column width (150px) or the value passed to the `width` property in the column definition. See example below:",
+      source: {
+        code: "\nimport { Datagrid, useDatagrid, getAutoSizedColumnWidth } from '@carbon/ibm-products';\n\n...\n\nconst myColumns = [\n  {\n    Header: 'Column 1',\n    accessor: 'column_1',\n    width: getAutoSizedColumnWidth(rows, 'column_1', 'Column 1'),\n  }\n]\n\n...\n          "
+      }
+    }, {
+      title: 'Disabling select rows',
+      description: "\n        Disabling select rows allows you to choose which rows will be disabled in the table.\n\n- Include the `useDisableSelectRows` hook in the `endPlugins` property of `useDatagrid`.\n- Add the `shouldDisableSelectRow` to the `useDatagrid` hook, this will be a function that returns the row indexes that will be disabled.\n        ",
+      source: {
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    DatagridActions,\n    DatagridBatchActions,\n    endPlugins: [useDisableSelectRows],\n    shouldDisableSelectRow: (row) => row.id % 2 === 0,\n    disableSelectAll: true,\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+      }
+    }, {
+      title: 'Infinite scroll',
+      description: "Infinite scroll is supported via the `useInfiniteScroll` hook. This hook will allow you to fetch more data to display to the user after a certain scroll threshold. The `useInfiniteScroll` hook can also be used to support virtualized data, this is required when working with large amounts of data, only rendering the rows that need to be visible in the component at a point in time."
+    }, {
+      description: "Infinite scroll:\n- Include `useInfiniteScroll` hook\n- Add `fetchMoreData` property to `useDatagrid`, this will be a function that is called when the scroll threshold is met. Optionally change the height of the grid with the `virtualHeight` property.",
+      source: {
+        code: "\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    isFetching,\n    fetchMoreData: fetchData,\n    virtualHeight: 540,\n    emptyStateTitle: 'Empty state title',\n    emptyStateDescription: 'Description explaining why the table is empty',\n  },\n  useInfiniteScroll\n);"
+      }
+    }, {
+      description: "Virtualized data:\n- Include `useInfiniteScroll` hook\n- The Datagrid will know to use virtualized data just by providing the `useInfiniteScroll` hook\n        ",
+      source: {
+        code: "\nconst [data] = useState(makeData(10000));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n  },\n  useInfiniteScroll\n);\n          "
+      }
+    }, {
+      title: 'Detect row hover',
+      description: "There may be cases when you want to detect if a user is hovering on a particular row. In this case, use the `useRowIsMouseOver` hook.\n- Include the `useRowIsMouseOver` hook\n- When hover is detected on a row, a property called `isMouseOver` is changed from `false` to `true` within that row.\n        "
+    }, {
+      title: 'Select items across all pages',
+      description: "By default, selecting all items with paginated rows will result in just the current page rows being selected. Incorporating the `useSelectAllWithToggle` hook will provide the option to select all rows across all pages.\n- Include `useSelectAllWithToggle` and `useSelectRows` hook\n- Add the `selectAllToggle` property to the `useDatagrid` hook\n- Optionally pass in labels to ensure proper translation\n- Optionally pass in `onSelectAllRoss`, function that will be called via the select all rows checkbox `onChange`\n        ",
+      source: {
+        code: "\nconst [data] = useState(makeData(100));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst [areAllSelected, setAreAllSelected] = useState(false);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    initialState: {\n      pageSize: 10,\n      pageSizes: [5, 10, 25, 50],\n    },\n    selectAllToggle: {\n      labels: {\n        allRows: 'Select all',\n        allPageRows: 'Select all on page',\n      },\n      onSelectAllRows: setAreAllSelected,\n    },\n    DatagridPagination,\n    DatagridActions,\n    DatagridBatchActions,\n  },\n  useSelectRows,\n  useSelectAllWithToggle\n);\n\nreturn (\n  <Datagrid datagridState={datagridState} />\n);\n          "
+      }
+    }, {
+      title: 'Selecting rows',
+      description: "When building a Datagrid that requires selectable rows, use the `useSelectRows` hook.\n- Include `useSelectRows` hook\n- Add `onRowSelect` to the `useDatagrid` hook, this is a callback function called when on a row's selection checkbox onChange, and sends back the row object and the event\n        ",
+      source: {
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    onRowSelect: (row, event) => console.log(row, event),\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+      }
+    }, {
+      description: "The select all checkbox can be optionally hidden by settings the `hideSelectAll` property to `true` in the `useDatagrid` hook.",
+      source: {
+        code: "\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    onRowSelect: (row, event) => console.log(row, event),\n    hideSelectAll: true,\n  },\n  useSelectRows\n);\n          "
+      }
+    }, {
+      description: "Datagrid also provides the option to use radio selection in cases where only one row should be selected at a time. Additionally, you can have preselected row/rows, see example below.",
+      source: {
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    radio: true,\n    onRadioSelect: (row) => console.log(`Row clicked`),\n    initialState: {\n      selectedRowIds: {\n        3: true,\n      },\n    },\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+      }
+    }, {
+      title: 'Sortable columns',
+      description: "To add sortable columns to your Datagrid, simply add the `useSortableColumns` hook. This will allow each column header to be clickable and sort each column in either ascending or descending order.\n- Include `useSortableColumns` hook\n        ",
+      source: {
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n  },\n  useSortableColumns\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+      }
+    }, {
+      title: 'Sticky column',
+      description: "Sticky columns can be useful when you have many columns that create a horizontal scroll and you have important data in the first or last column that you always want to be visible.\n- Include the `useStickyColumn` hook\n- Sticky columns can _only_ be applied to the first and the last columns in the Datagrid. To have the first column stick, add `sticky: 'left'` to the first column definition. To have the last column stick, add `sticky: 'right'` to the last column definition.\n        ",
+      source: {
+        code: "\nconst columns = [\n  {\n    Header: 'First column',\n    accessor: 'first_column',\n    sticky: 'left',\n  },\n  {\n    ...\n  },\n  {\n    ...\n  }\n];\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n  },\n  useStickyColumn\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+      }
+    }]
+  });
+};
+exports.DocsPage = DocsPage;

package/lib/components/Datagrid/Extensions/ColumnAlignment/ColumnAlignment.docs-page.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      description: "The default column alignment in the `Datagrid` is left, however there is support for center and right aligned as well. See [design guidance](https://pages.github.ibm.com/cdai-design/pal/components/data-table/column-alignment/usage) for details around when to change default column alignment.\n\nTo utilize center or right aligned columns refer to the steps below:\n\n  - Include `useColumnCenterAlign` or `useColumnRightAlign` hook/s.\n  - Add `rightAlignedColumn` or `centerAlignedColumn` to the column object in which you which to change the default column alignment.\n        ",
+      source: {
+        language: 'jsx',
+        code: "\nimport {\n  Datagrid,\n  useDatagrid,\n  useColumnCenterAlign,\n  useColumnRightAlign,\n} from '@carbon/ibm-products';\n\nconst defaultColumns = [\n  ...defaultCols,\n  {\n    Header: 'Bonus',\n    accessor: 'bonus',\n    width: 120,\n    rightAlignedColumn: true,\n  },\n  {\n    Header: 'Status',\n    accessor: 'status_icon',\n    width: 100,\n    centerAlignedColumn: true,\n  },\n];\n\nconst App = () => {\n  const columns = React.useMemo(() => [...defaultHeader], []);\n  const [data] = useState(makeData(10));\n\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      initialState: {\n        pageSize: 10,\n        pageSizes: [5, 10, 25, 50],\n      },\n      DatagridActions,\n      DatagridPagination,\n    },\n    useColumnCenterAlign,\n    useColumnRightAlign\n  );\n\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+      }
+    }]
+  });
+};
+exports.DocsPage = DocsPage;

package/lib/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.docs-page.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      title: 'Customizing columns',
+      description: "Customizing columns allows user to reorder and hide certain columns of the datagrid. Consuming component can use the provided callback to save/update according to their persistent strategy.\n- Include `useCustomizeColumns` and `useColumnOrder` hooks (required)\n  - `useColumnOrder` comes from `react-table` but is exported by `@carbon/ibm-products` to be used alongside `useCustomizeColumns`.\n- Implement `options.DatagridActions` component\n  - this component will have props: `datagridState`\n  - render `datagridState.CustomizeColumnsButton` component wherever makes sense.\n- Options available to set:\n  - `options.initialState.hiddenColumns: Array<ColumnId: String>`\n    - Array of column ids that will be hidden after initial render\n    - [react-table doc](https://react-table.tanstack.com/docs/api/useTable#table-options)\n  - `options.initialState.columnOrder: Array<ColumnId: String>`\n    - Order of the columns. Any column ids not in this array will be ordered by their position in the `options.columns`\n    - [react-table doc](https://react-table.tanstack.com/docs/api/useColumnOrder#table-options)\n  - `options.customizeColumnsProps.onSaveColumnPrefs`\n    - type: `Function(Columns: Array<{ColumnId: String, isVisible: Boolean}>) => void`\n    - Callback function when 'Save' button clicked on the narrow tearsheet. It allows consumer to preserve the updated column preference. This output can also be used to compute the `hiddenColumns` and `columnOrder`\n  - Reset to default (optional)\n    - There is a reset to default button on the modal. It will use the `options.columns` as the default. If there are columns should be hidden by default, denote them with property: `isVisible: false` (undefined will be treated as `true`).\n        ",
+      source: {
+        code: "\nconst columns = React.useMemo(() => defaultHeader, []);\nconst [data] = useState(makeData(10));\nconst DatagridActions = (datagridState) => (\n  <TableToolbarContent>\n    <TableToolbarSearch ... />\n    <Button ... />\n    <datagridState.CustomizeColumnsButton />\n  </TableToolbarContent>\n)\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    initialState: {\n      hiddenColumns: ['age'],\n      columnOrder: [],\n    },\n    customizeColumnsProps: {\n      onSaveColumnPrefs: (newColDefs) => {\n        console.log(newColDefs);\n      },\n    },\n    DatagridActions,\n  },\n  useCustomizeColumns,\n  useColumnOrder,\n);\n\nreturn (\n  <Datagrid datagridState={datagridState} />\n);\n          "
+      }
+    }]
+  });
+};
+exports.DocsPage = DocsPage;

package/lib/components/Datagrid/Extensions/EditableCell/EditableCell.docs-page.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
+var _EditableCell = require("./EditableCell.stories");
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      description: "The `Datagrid` supports inline editing when used with the `useEditableCell` hook (previously named `useInlineEdit` in v1) and columns are provided the required configuration. The four data types supported are strings, numbers, dates, and\n        selection (dropdown)."
+    }, {
+      description: "Below are example column configurations for the supported inline edit data types:\n        \nDefault/string:\n        ",
+      source: {
+        language: 'json',
+        code: "\n  {\n    Header: 'First Name',\n    accessor: 'firstName',\n    inlineEdit: {\n      type: 'text',\n      // required for including validation, this is used to set the invalid prop internally\n      validator: (n) => n.length >= 40,\n      // These props are passed to the Carbon component used for inline editing, in this case the TextInput\n      inputProps: {\n        invalidText: 'Invalid text, character count must be less than 40',\n      },\n    },\n  }\n          "
+      }
+    }, {
+      description: 'Number',
+      source: {
+        language: 'json',
+        code: "\n{\n  Header: 'Age',\n  accessor: 'age',\n  width: 120,\n  inlineEdit: {\n    // required for including validation, this is used to set the invalid prop internally\n    validator: (n) => n && n < 18,\n    type: 'number',\n    // These props are passed to the Carbon component used for inline editing, in this case NumberInput\n    inputProps: {\n      invalidText: 'Invalid number, must be 18 or greater',\n    },\n  },\n},\n          "
+      }
+    }, {
+      description: 'Date',
+      source: {
+        language: 'json',
+        code: "\n{\n  Header: 'Active since',\n  accessor: 'activeSince',\n  inlineEdit: {\n    type: 'date',\n    inputProps: {\n      // optionally pass props here to be passed through to Carbon's DatePicker component\n      onChange: (newDateObj, cell) => {\n        console.log(newDateObj, cell);\n      },\n      labelText: 'Change active since date',\n      // optionally pass props here to be passed through to Carbon's DatePickerInput component\n      datePickerInputProps: {\n        labelText: 'Change active since date',\n      },\n    },\n  },\n},\n          "
+      }
+    }, {
+      description: 'Selection',
+      source: {
+        language: 'json',
+        code: "\n{\n  Header: 'Chart type',\n  accessor: 'chartType',\n  inlineEdit: {\n    type: 'selection',\n    inputProps: {\n      // These props are passed to the Carbon component used for inline editing\n      items: [\n        {\n          id: 'option-0',\n          icon: ChartColumnFloating16,\n          text: 'Column Chart',\n        },\n        {\n          id: 'option-1',\n          icon: ChartBubble16,\n          text: 'Bubble Chart',\n        },\n        {\n          id: 'option-2',\n          icon: ChartVennDiagram16,\n          text: 'Venn Diagram',\n        },\n      ],\n      onChange: (item) => {\n        console.log(item);\n      },\n    },\n  },\n},\n          "
+      }
+    }, {
+      description: "Using the column structure outlined above, along with the use of the `useEditableCell` hook (previously named `useInlineEdit` in v1), the `Datagrid` will support inline editing. See example below:",
+      source: {
+        code: "\nimport { Datagrid, useDatagrid, useEditableCell } from '@carbon/ibm-products';\nconst App = () => {\n  const [data, setData] = useState(makeData(10));\n  const columns = React.useMemo(() => getInlineEditColumns(), []); // These columns follow the inline edit column configuration detailed above\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      onDataUpdate: setData,\n    },\n    useEditableCell\n  );\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+      },
+      story: _EditableCell.EditableCellUsageStory
+    }, {
+      title: 'Using deprecated useInlineEdit hook',
+      description: "At this time, it is possible to still use the deprecated `useInlineEdit` hook but requires setting a feature flag. See example below:",
+      source: {
+        code: "\nimport {\n  Datagrid,\n  useDatagrid,\n  useInlineEdit,\n  pkg,\n} from '@carbon/ibm-products';\n\nconst MyInlineEditDatagrid = () => {\n  pkg.feature['Datagrid.useInlineEdit'] = true;\n  const [data, setData] = useState(gridData);\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      onDataUpdate: setData,\n    },\n    useInlineEdit\n  );\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+      },
+      story: _EditableCell.InlineEditUsageStory
+    }]
+  });
+};
+exports.DocsPage = DocsPage;

package/lib/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      description: "The `Datagrid` supports expandable rows with the use of the `useExpandedRow` hook.",
+      source: {
+        language: 'jsx',
+        code: "\nimport { Datagrid, useDatagrid, useExpandedRow } from '@carbon/ibm-products';\n\nconst App = () => {\n  const columns = React.useMemo(() => defaultHeader, []); // These are the columns that will be used by the datagrid\n  const [data] = useState(makeData(10)); // This is the data that will be rendered by the datagrid\n\n  const expansionRenderer = ({ row }) => {\n    return <div>Content for row index: {row.id}</div>;\n  };\n\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      ExpandedRowContentComponent: expansionRenderer,\n    },\n    useExpandedRow\n  );\n\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+      }
+    }]
+  });
+};
+exports.DocsPage = DocsPage;

package/lib/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      title: 'Filtering',
+      description: "Table filtering allows a user to add or remove data items from a data table by selecting or clearing predefined attributes. Filters can help a user find something they're looking for, view available options within a certain set of criteria, and decide between many options. These guidelines are an extension of [Carbon's filter documentation](https://carbondesignsystem.com/patterns/filtering/).\n        "
+    }, {
+      description: "Filtering results in a table is a different type of action from searching. While both actions can help the user narrow results down, searching is meant to help the user find a specific result, whereas filtering allows users to trim results according to its attributes."
+    }, {
+      description: "Applied filters can affect both the data that is visible in the table and also data that might not be displayed in the columns available in the table. Filter options can be displayed in many form components, including dropdowns, text inputs, checkboxes, radio buttons, and date range pickers."
+    }, {
+      description: "[Check out the Guidance here.](https://pages.github.ibm.com/cdai-design/pal/components/data-table/filters/)"
+    }, {
+      subTitle: 'Preparing your column headers'
+    }, {
+      description: 'To utilize filtering, you have to add some extra properties into your headers that are going to be filtered.'
+    }, {
+      description: "Two things you need to do is:\n- Specify a `filter` to use (unless it's text match which is default)\n- (Optional) Render the component with the `Cell` property to display the right information. Use this if the data you send into the table isn't how you want to display it, for example like Dates. See the example for `passwordStrength` below.\n        "
+    }, {
+      description: "For example; here we are specifying that the `joined` header column should be filtered using a `filter: 'date'`, and render the cell using it's value and converting it to string. (Since the value of joined is a date object, react isn't going to allow you to render it as jsx so we have to convert it to string)",
+      source: {
+        code: "\n{\n  Header: 'Joined',\n  accessor: 'joined',\n  filter: 'date',\n  Cell: ({ cell: { value } }) => <span>{value.toLocaleDateString()}</span>,\n},\n          "
+      }
+    }, {
+      description: "The different types of filters are:\n- text (default)\n- date\n- number\n- checkbox\n- radio\n- dropdown\n        ",
+      source: {
+        code: "\nconst columns = [\n  {\n    Header: 'Row Index',\n    accessor: (row, i) => i,\n    sticky: 'left',\n    id: 'rowIndex', // id is required when accessor is a function.\n  },\n  {\n    Header: 'First Name',\n    accessor: 'firstName',\n  },\n  {\n    Header: 'Last Name',\n    accessor: 'lastName',\n  },\n  {\n    Header: 'Age',\n    accessor: 'age',\n    width: 50,\n  },\n  {\n    Header: 'Visits',\n    accessor: 'visits',\n    filter: 'number',\n    width: 60,\n  },\n  {\n    Header: 'Status',\n    accessor: 'status',\n    filter: 'dropdown',\n  },\n  // Shows the date filter example\n  {\n    Header: 'Joined',\n    accessor: 'joined',\n    filter: 'date',\n    Cell: ({ cell: { value } }) => <span>{value.toLocaleDateString()}</span>,\n  },\n  // Shows the checkbox filter example\n  {\n    Header: 'Password strength',\n    accessor: 'passwordStrength',\n    filter: 'checkbox',\n    Cell: ({ cell: { value } }) => {\n      const iconProps = {\n        size: 'sm',\n        theme: 'light',\n        kind: value,\n        iconDescription: value,\n      };\n\n      return (\n        <span\n          style={{\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          <StatusIcon {...iconProps} />\n          {iconProps.iconDescription}\n        </span>\n      );\n    },\n  },\n  // Shows the checkbox filter example\n  {\n    Header: 'Role',\n    accessor: 'role',\n    filter: 'radio',\n  },\n];\n          "
+      }
+    }, {
+      subTitle: 'Store you data into state, this can also come from an API',
+      source: {
+        code: "\nconst [data] = useState([\n  {\n    activeSince: new Date('09/26/81'),\n    age: 41,\n    firstName: 'Joel',\n    lastName: 'Miller',\n    passwordStrength: 'normal',\n    role: 'developer',\n    visits: '81',\n  },\n  {\n    activeSince: new Date('08/30/97'),\n    age: 19,\n    firstName: 'Ellie',\n    lastName: 'N/A',\n    passwordStrength: 'critical',\n    role: 'designer',\n    visits: '7',\n  },\n  {\n    activeSince: new Date('01/26/03'),\n    age: 39,\n    firstName: 'Tommy',\n    lastName: 'Miller',\n    passwordStrength: 'minor-warning',\n    role: 'researcher',\n    visits: '25',\n  },\n]);\n          "
+      }
+    }, {
+      subTitle: 'Create your filters for flyout variant',
+      description: "To add filters to the flyout, you have to pass in an array of filters. These filters will be converted to it's respective component. Each filters has 3 important props, `type`, `column`, `props`.\n- `type`: the type of filter (this should be the same `filter` property in the headers)\n- `column`: the column that it should be filtered on\n- `props`: the props for the components needed to render the filter.\n\nPlease refer to all the available filters that you can use below.\n        ",
+      source: {
+        code: "\nconst filters = [\n  {\n    type: 'date',\n    column: 'joined',\n    props: {\n      DatePicker: {\n        datePickerType: 'range',\n        // Add any other Carbon DatePicker props here\n      },\n      DatePickerInput: {\n        start: {\n          id: 'date-picker-input-id-start',\n          placeholder: 'mm/dd/yyyy',\n          labelText: 'Joined start date',\n          // Add any other Carbon DatePickerInput props here\n        },\n        end: {\n          id: 'date-picker-input-id-end',\n          placeholder: 'mm/dd/yyyy',\n          labelText: 'Joined end date',\n          // Add any other Carbon DatePickerInput props here\n        },\n      },\n    },\n  },\n  {\n    type: 'number',\n    column: 'visits',\n    props: {\n      NumberInput: {\n        min: 0,\n        id: 'visits-number-input',\n        invalidText: 'A valid value is required',\n        label: 'Visits',\n        placeholder: 'Type a number amount of visits',\n        // Add any other Carbon NumberInput props here\n      },\n    },\n  },\n  {\n    type: 'checkbox',\n    column: 'passwordStrength',\n    props: {\n      FormGroup: {\n        legendText: 'Password strength',\n        // Add any other Carbon FormGroup props here\n      },\n      Checkbox: [\n        {\n          id: 'normal',\n          labelText: 'Normal',\n          value: 'normal',\n          // Add any other Carbon Checkbox props here\n        },\n        {\n          id: 'minor-warning',\n          labelText: 'Minor warning',\n          value: 'minor-warning',\n          // Add any other Carbon Checkbox props here\n        },\n        {\n          id: 'critical',\n          labelText: 'Critical',\n          value: 'critical',\n          // Add any other Carbon Checkbox props here\n        },\n      ],\n    },\n  },\n  {\n    type: 'radio',\n    column: 'role',\n    props: {\n      FormGroup: {\n        legendText: 'Role',\n        // Add any other Carbon FormGroup props here\n      },\n      RadioButtonGroup: {\n        orientation: 'vertical',\n        legend: 'Role legend',\n        name: 'role-radio-button-group',\n        // Add any other Carbon RadioButtonGroup props here\n      },\n      RadioButton: [\n        {\n          id: 'developer',\n          labelText: 'Developer',\n          value: 'developer',\n          // Add any other Carbon RadioButton props here\n        },\n        {\n          id: 'designer',\n          labelText: 'Designer',\n          value: 'designer',\n          // Add any other Carbon RadioButton props here\n        },\n        {\n          id: 'researcher',\n          labelText: 'Researcher',\n          value: 'researcher',\n          // Add any other Carbon RadioButton props here\n        },\n      ],\n    },\n  },\n  {\n    type: 'dropdown',\n    column: 'status',\n    props: {\n      Dropdown: {\n        id: 'marital-status-dropdown',\n        ariaLabel: 'Marital status dropdown',\n        items: ['relationship', 'complicated', 'single'],\n        label: 'Marital status',\n        titleText: 'Marital status',\n        // Add any other Carbon Dropdown props here\n      },\n    },\n  },\n];\n          "
+      }
+    }, {
+      subTitle: 'Create your filters for panel variant',
+      description: 'Filter panel coming soon.'
+    }, {
+      subTitle: 'Putting it all together',
+      source: {
+        code: "\nimport { Datagrid, useDatagrid, useFiltering } from '@carbon/ibm-products';\n\nconst App = () => {\n  const columns = [...];\n  const [data] = useState([...]);\n  const filters = [...];\n\n\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      filterProps: {\n        variation: 'flyout', // default\n        updateMethod: 'batch', // default\n        primaryActionLabel: 'Apply', // default\n        secondaryActionLabel: 'Cancel', // default\n        flyoutIconDescription: 'Open filters', // default\n        shouldClickOutsideToClose: false, // default\n        filters,\n      },\n      DatagridActions,\n      batchActions: true,\n      toolbarBatchActions: getBatchActions(),\n    },\n    useFiltering\n  );\n\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+      }
+    }, {
+      subTitle: "`filterProps` types",
+      source: {
+        language: 'json',
+        code: "\nfilterProps: {\n  /** The variation of filtering */\n  variation: 'flyout'|'panel',\n  /** The update method in which to filter, instant automatically\n      applies the filters, batch the user has to click apply */\n  updateMethod: 'batch'|'instant',\n  /** Text for primary action button, default is 'Apply' */\n  primaryActionLabel: string,\n  /** Text for secondary action button, default is 'Cancel' */\n  secondaryActionLabel: string,\n  /** Text for flyout icon description */\n  flyoutIconDescription: string,\n  /** Array of objects to render filters in flyout */\n  filters: object[]\n}\n          "
+      }
+    }]
+  });
+};
+exports.DocsPage = DocsPage;

package/lib/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.docs-page.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsPage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      title: 'Actions column',
+      description: "This will add row actions (if more than two actions are provided an OverflowMenu component will be used) to the cells on the column marked with `isAction: true`. Each action button callback will include the actionId and the row object.\n- Include useActionsColumn hook\n- Add `isAction = true` to the column object in which you which to add the overflow menu actions\n- Add `rowActions = []` array to the props\n  - `rowActions[].id` for callback to identify the action is called\n  - `rowActions[].onClick(actionId: string, row: Row, event: ClickEvent)` callback on menuitem clicked. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n  - `rowActions[].shouldHideMenuItem(row: Row)` callback to hide this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n  - `rowActions[].shouldDisableMenuItem(row: Row)` callback to disable this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n    - This will override `rowActions[].disabled` (from Carbon) because `shouldDisableMenuItem` is more specific to the row.\n  - each action object can take all the props from OverflowMenuItem props, see [carbon docs](https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default#overflowmenu)\n        ",
+      source: {
+        code: "\nconst columns = [\n  // other columns\n  {\n    Header: '',\n    accessor: 'actions',\n    isAction: true,\n  },\n];\nconst onActionClick = (actionId, row, event) => {};\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    rowActions: [\n      {\n        id: 'edit',\n        itemText: 'Edit',\n        onClick: onActionClick,\n      },\n      {\n        id: 'hidden',\n        itemText: 'Hidden item',\n        onClick: onActionClick,\n        shouldHideMenuItem: () => true,\n      },\n      {\n        id: 'delete',\n        itemText: 'Delete',\n        hasDivider: true,\n        isDelete: true,\n        onClick: onActionClick,\n      },\n    ],\n  },\n  useActionsColumn\n);\n\nreturn <Datagrid datagridState={datagridState} />;"
+      }
+    }]
+  });
+};
+exports.DocsPage = DocsPage;

package/lib/components/Datagrid/utils/DatagridActions.js

@@ -134,7 +134,7 @@ var DatagridActions = function DatagridActions(datagridState) {
     hasDivider: true,
     requireTitle: true
   }))) : !mobileToolbar ? /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement(_react.TableToolbarSearch, {
-    size: "xl",
+    size: "lg",
     id: "columnSearch",
     persistent: true,
     placeHolderText: searchForAColumn,

package/lib/components/Datagrid/utils/getArgTypes.js

@@ -52,6 +52,10 @@ var ARG_TYPES = {
     control: 'select',
     options: ['sm', 'lg']
   },
+  isFetching: {
+    control: 'radio',
+    options: [true, false]
+  },
   useDenseHeader: {
     control: {
       type: 'radio'

package/lib/components/FilterSummary/FilterSummary.js

@@ -27,13 +27,16 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
     _ref$clearFilters = _ref.clearFilters,
     clearFilters = _ref$clearFilters === void 0 ? function () {} : _ref$clearFilters,
     _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? [] : _ref$filters;
+    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    _ref$renderLabel = _ref.renderLabel,
+    renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel;
   var tagFilters = filters.map(function (_ref2) {
+    var _renderLabel;
     var key = _ref2.key,
       value = _ref2.value;
     return {
       type: 'gray',
-      label: "".concat(key, ": ").concat(value)
+      label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
     };
   });
   return /*#__PURE__*/_react2.default.createElement("div", {
@@ -57,7 +60,8 @@ FilterSummary.propTypes = {
   className: _propTypes.default.string,
   clearFilters: _propTypes.default.func.isRequired,
   clearFiltersText: _propTypes.default.string,
-  filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
+  filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  renderLabel: _propTypes.default.func
 };
 var _default = FilterSummary;
 exports.default = _default;

package/lib/components/OptionsTile/OptionsTile.js

@@ -233,7 +233,14 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   })), isExpandable ? /*#__PURE__*/_react.default.createElement("details", {
     open: isOpen,
     ref: detailsRef
-  }, /*#__PURE__*/_react.default.createElement("summary", {
+  },
+  /*#__PURE__*/
+  /* summary should not be considered non-interactive
+   * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/656
+   * https://github.com/A11yance/axobject-query/issues/319
+   */
+  /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+  _react.default.createElement("summary", {
     className: "".concat(blockClass, "__header"),
     onClick: toggle
   }, /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {

package/lib/global/js/utils/StoryDocsPage.js

@@ -30,7 +30,7 @@ var CustomBlocks = function CustomBlocks(_ref) {
       key: "block-index--".concat(index)
     }, block.title && /*#__PURE__*/_react.default.createElement("h3", {
       id: (0, _changeCase.paramCase)(block.title)
-    }, block.title), block.subTitle && /*#__PURE__*/_react.default.createElement("h4", null, block.subTitle), block.description && typeof block.description === 'string' ? /*#__PURE__*/_react.default.createElement(_blocks.Description, null, block.description) : block.description, block.story && /*#__PURE__*/_react.default.createElement(_blocks.Canvas, {
+    }, block.title), block.subTitle && /*#__PURE__*/_react.default.createElement("h4", null, block.subTitle), block.image, block.description && typeof block.description === 'string' ? /*#__PURE__*/_react.default.createElement(_blocks.Description, null, block.description) : block.description, block.story && /*#__PURE__*/_react.default.createElement(_blocks.Canvas, {
       of: block.story
     }), block.source && /*#__PURE__*/_react.default.createElement(_blocks.Source, source));
   });
@@ -201,6 +201,10 @@ StoryDocsPage.propTypes = {
      * Optional description, strings treated as markdown.
      */
     description: _propTypes.default.node,
+    /**
+     * Optional block image
+     */
+    image: _propTypes.default.node,
     /**
      * Story imported from story file
      */
@@ -210,7 +214,7 @@ StoryDocsPage.propTypes = {
      * default language `jsx`
      */
     source: _propTypes.default.shape({
-      language: _propTypes.default.oneOf('javascript', 'css', 'jsx'),
+      language: _propTypes.default.oneOf('javascript', 'css', 'jsx', 'json'),
       code: _propTypes.default.string
     })
   })),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -54,27 +54,27 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.21.5",
-    "@babel/core": "^7.22.1",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.36",
+    "@babel/cli": "^7.22.5",
+    "@babel/core": "^7.22.5",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.37",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^11.1.1",
-    "glob": "^10.2.6",
+    "glob": "^10.3.1",
     "jest": "^29.5.0",
-    "jest-config-ibm-cloud-cognitive": "^0.24.23",
+    "jest-config-ibm-cloud-cognitive": "^0.24.24",
     "jest-environment-jsdom": "^29.5.0",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.10.12",
+    "npm-check-updates": "^16.10.13",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.1",
-    "sass": "^1.62.1",
+    "sass": "^1.63.6",
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.3",
+    "@babel/runtime": "^7.22.5",
     "@carbon/telemetry": "^0.1.0",
     "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
@@ -85,14 +85,14 @@
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.15.0",
-    "@carbon/layout": "^11.15.0",
-    "@carbon/motion": "^11.12.0",
-    "@carbon/react": "^1.31.3",
-    "@carbon/themes": "^11.20.0",
-    "@carbon/type": "^11.19.0",
+    "@carbon/grid": "^11.16.1",
+    "@carbon/layout": "^11.16.1",
+    "@carbon/motion": "^11.13.1",
+    "@carbon/react": "^1.33.2",
+    "@carbon/themes": "^11.21.1",
+    "@carbon/type": "^11.20.1",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "d10acc630bdeb946d794ea2430d5df1ebf650c14"
+  "gitHead": "ce43460f28f908aeb8ec4bfb2c501dd457d11a58"
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -7,6 +7,7 @@
 
 // Standard imports.
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 
@@ -33,19 +34,25 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   :global(.#{c4p-settings.$carbon-prefix}--checkbox) {
     display: none;
   }
+}
 
-  .#{c4p-settings.$carbon-prefix}--overflow-menu-options
-    > .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
-    left: $spacing-01;
-    width: 112px;
-  }
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--datagrid__row-size-options-container
+  .#{c4p-settings.$carbon-prefix}--popover-container
+  .#{c4p-settings.$carbon-prefix}--btn--icon-only {
+  display: flex;
+  width: $spacing-09;
+  height: $spacing-09;
+  align-items: center;
+  justify-content: center;
+  padding-top: 0;
 }
 
-.#{$block-class}__datagridWrap
-  .#{c4p-settings.$carbon-prefix}--overflow-menu-options
-  > .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
-  left: $spacing-01;
-  width: 112px;
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--datagrid__row-size-options-container
+  .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
+  padding: $spacing-05;
+  background-color: $layer;
 }
 
 .#{$block-class}__datagridWrap-simple {

package/scss/components/FilterSummary/_storybook-styles.scss

@@ -4,6 +4,8 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+@use '../../global/styles/display-box' as *;
+
 #root {
   width: 100%;
 }