@carbon/ibm-products 2.23.0 → 2.25.0

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "InlineEditButton", {
-  enumerable: true,
-  get: function get() {
-    return _InlineEditButton.InlineEditButton;
-  }
-});
-var _InlineEditButton = require("./InlineEditButton");

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "InlineEditCell", {
-  enumerable: true,
-  get: function get() {
-    return _InlineEditCell.InlineEditCell;
-  }
-});
-var _InlineEditCell = require("./InlineEditCell");

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "InlineEditContext", {
-  enumerable: true,
-  get: function get() {
-    return _InlineEditContext.InlineEditContext;
-  }
-});
-Object.defineProperty(exports, "InlineEditProvider", {
-  enumerable: true,
-  get: function get() {
-    return _InlineEditContext.InlineEditProvider;
-  }
-});
-var _InlineEditContext = require("./InlineEditContext");

package/lib/components/Datagrid/Datagrid/addons/RowSize/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "RowSizeDropdown", {
-  enumerable: true,
-  get: function get() {
-    return _RowSizeDropdown.default;
-  }
-});
-var _RowSizeDropdown = _interopRequireDefault(require("./RowSizeDropdown"));

package/lib/components/Datagrid/Datagrid/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Datagrid", {
-  enumerable: true,
-  get: function get() {
-    return _Datagrid.Datagrid;
-  }
-});
-var _Datagrid = require("./Datagrid");

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

@@ -1,145 +0,0 @@
-"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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var DocsPage = exports.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          "
-      }
-    }, {
-      description: "There is also an optional resize callback when resizing columns, allowing you to save the widths of columns that have been resized. The resize callback returns the column that was just resized and it's width, in addition to all of the columns that have been resized and their widths.",
-      source: {
-        language: 'jsx',
-        code: "\nuseDatagrid({\n  columns,\n  data,\n  onColResizeEnd: (currentColumn, allColumns) =>\n      console.log(currentColumn, allColumns),\n  resizerAriaLabel: 'Resize column',\n});\n          "
-      }
-    }, {
-      description: 'Disabling the resizable columns is possible by specifying `disableResizing: true` within the `useDatagrid` hook. To pass in your own translated label for the column resizer, add the `resizerAriaLabel` property',
-      source: {
-        language: 'jsx',
-        code: "\nuseDatagrid({\n  columns,\n  data,\n  disableResizing: true,\n  resizerAriaLabel: 'Resize column',\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    loadMoreThreshold: 200,\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    batchActionMenuButtonLabel: 'More',\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    ascendingSortableLabelText: 'none',\n    descendingSortableLabelText: 'ascending',\n    defaultSortableLabelText: 'descending',\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          "
-      }
-    }]
-  });
-};

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

@@ -1,20 +0,0 @@
-"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 = exports.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          "
-      }
-    }]
-  });
-};

package/lib/components/Datagrid/Datagrid.stories/CustomizeColumnStory.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.story = void 0;
-var notes = "\n  # Customizing columns\n  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\n  ## Documentation:\n\n  - (required) Add following plugins to `useDatagrid` hook\n    - `useCustomizeColumns`\n    - `useColumnOrder`\n  - (required) Implement `options.DatagridActions` component\n    - this component will have props: `datagridState`\n    - render `datagridState.CustomizeColumnsButton` component wherever makes sense.\n    - `CustomizeColumnsButton` props can be overridden. Available props: [carbon-components-react doc](https://react.carbondesignsystem.com/?path=/docs/components-button--default)\n  - (optional) Preserve and apply the user preference\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      - It's a callback function when 'Save' button clicked on the modal. It allows consumer to preserve the updated column preference. This output can also be used to compute the `hiddenColumns` and `columnOrder`\n  - (optional) Reset to default\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\n  code snippet:\n\n  ```js\n  const columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(10));\n  const DatagridActions = (datagridState) => (\n    <TableToolbarContent>\n      <TableToolbarSearch ... />\n      <Button ... />\n      <datagridState.CustomizeColumnsButton />\n    </TableToolbarContent>\n  )\n  const 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\n  return (\n    <Wrapper>\n      <IntlProvider locale=\"en\">\n        <Datagrid {...datagridState} />\n        <div>\n          Hidden column ids: \n          <pre>{JSON.stringify(datagridState.state.hiddenColumns, null, 2)}</pre>\n        </div>\n      </IntlProvider>\n    </Wrapper>\n  );\n  ```\n";
-var story = exports.story = {
-  parameters: {
-    notes: notes
-  }
-};

package/lib/components/Datagrid/Datagrid.stories/RowSizeDropdownStory.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.story = void 0;
-var notes = "\n# Changing row size (height/density)\nAllow users to adjust the data density on datagrid.\n\n## Documentation:\n\n- (optional) Define initial row size by `datagridOptions.rowSize`.\n  - Default value is `md`.\n  - Supported values are `xl`, `lg`, `md`, `sm`, `xs` same as size prop on carbon component react `DataTable`.\n- (optional) Provide list of allowed sizes use `datagridOptions.rowSizes`\n  - Default list is\n    ```\n      [{ value: 'lg'}, { value: 'md'}, {value: 'sm'}, {value: 'xs'}]\n    ```\n  - Provide `labelText` in each option if not satisfied with the default labels.\n- (optional) Use `RowSizeDropdown` component to change row size:\n  - (required) Implement `datagridOptions.DatagridActions` component\n    - The component will have props: `datagridState`\n    - Render `datagridState.RowSizeDropdown` component in `datagridOptions.DatagridActions`.\n      - Pass `datagridState.rowSizeDropdownProps` as props\n      - No extra logic is needed.\n  - (optional) Preserve row size, use `datagridOptions.onRowSizeChange`\n    - type: `Function(rowSize: String) => void`\n    - It's a callback function when different row size option is selected on the dropdown.\n- (optional) Use other component to change row size:\n  - Wire the variable controlled by the component with `datagridOptions.rowSize = variable`\n- (optional) Render different content in the cell on different `rowSize`\n  - `Cell` renderer of each column will receive `datagridState` which will contain `rowSize`. Render different content based on this value.\n\ncode snippet:\n\n```js\nconst columns = React.useMemo(() => [ ...defaultHeader.slice(0, 3),\n  {\n    Header: 'Different cell content',\n    id: 'rowSizeDemo-cell',\n    disableSortBy: true,\n    Cell: ({ rowSize }) => rowSize,\n  }\n], []);\nconst [data] = useState(makeData(10));\nconst DatagridActions = (datagridState) => (\n  <TableToolbarContent>\n    <TableToolbarSearch ... />\n    <Button ... />\n    <datagridState.RowSizeDropdown {...datagridState.rowSizeDropdownProps} />\n  </TableToolbarContent>\n)\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    rowSize: 'xs',\n    rowSizes: [\n      {\n        value: 'lg',\n        labelText: 'Super tall row',\n      },\n      {\n        value: 'md',\n      },\n      {\n        value: 'xs',\n        labelText: 'Teeny tiny row',\n      },\n    ],\n    onRowSizeChange: (rowSize) => {\n      console.log(rowSize);\n    },\n    DatagridActions,\n  },\n);\n\nreturn (\n  <Wrapper>\n    <IntlProvider locale=\"en\">\n      <Datagrid {...datagridState} />\n    </IntlProvider>\n  </Wrapper>\n);\n```\n";
-var story = exports.story = {
-  parameters: {
-    notes: notes
-  }
-};

package/lib/components/Datagrid/Datagrid.stories/SelectAllWithToggleStory.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.story = void 0;
-var notes = "\n# Select all toggle\nUse this feature will allow user to toggle the select all checkbox behavior between selecting all rows **on current page** vs **across all pages**\n<br/>\nIt's using [react-table API](https://react-table.tanstack.com/docs/api/useRowSelect#instance-properties) to select all rows.\n\n## Terminology\n- Pagination\n  - **UI side pagination**: all rows are loaded to browser, but only display subset of them.\n  - **Server side pagination**: subset of rows are loaded to browser, going to another page requires another network call\n- Selection mode\n  - **all rows**: selects all rows across pages.\n  - **all page rows**: selects all rows on the current page.\n\n## Compatibility with other plugin hooks and options\n- It has to be used with `useSelectRows` hook.\n- Select all toggle will not be enabled if `options.DatagridPagination` is not defined (select all is the same without pagination)\n- Compatible with `options.DatagridBatchActions`\n- Obviously it will not work when select-all is hidden by `options.hideSelectAll`.\n- Not compatible with `useInfiniteScroll`. Pull request welcome!\n\n## Sample usage:\n- (required) `useSelectRows` - enable row selections with select all on header\n- (required) `useSelectAllToggle` - enable select all toggle.\n- (optional) config the label on toggle menu:\n  - (optional) `options.selectAllToggle.labels.allRows` for label that selects all rows across all pages\n  - (optional) `options.selectAllToggle.labels.allPageRows` for label that selects all rows on current page\n- (optional) `options.selectAllToggle.onSelectAllRows`\n  - type: `Function(areAllRowsSelected: Boolean) => void`\n  - callback when `instance.isAllRowsSelected` value changes. Check out doc: [instance property](https://react-table.tanstack.com/docs/api/useRowSelect#instance-properties)\n    - `true`: when selection mode is **all rows** and user selects all via toggle dropdown 'Select all' or toggle 'on' on the select all checkbox.\n  - useful when grid is server side paginated (only a subset of rows are loaded in UI)\n\n```js\nconst columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(100));\n  const 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 randomly generated rows\",\n        },\n        onSelectAllRows: (areAllSelected) => console.log('are all selected: ', areAllSelected),\n      },\n      DatagridPagination,\n      DatagridActions,\n      DatagridBatchActions,\n    },\n    useSelectRows,\n    useSelectAllToggle,\n  );\n\n  return (\n    <Wrapper>\n      <Datagrid {...datagridState} />\n    </Wrapper>\n);\n```\n\n";
-var story = exports.story = {
-  parameters: {
-    notes: notes
-  }
-};

package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js

@@ -1,103 +0,0 @@
-// import React, { useState, useEffect } from 'react';
-// import { Datagrid, useActionsColumn, useDatagrid, useStickyColumn } from '..';
-// import { defaultHeader, makeData, Wrapper } from './common';
-
-// StickyActionsColumn.story = {
-//   parameters: {
-//     notes: `
-//     Sticky column and actions column can be used at the same time like the demo above. Following is the doc for each of them.
-
-//     # Sticky column
-//     This will make the column mark with \`sticky: "right"\` to be sticky on the right.
-
-//     ## Incompatible with following plugins:
-//     - \`useInfiniteScroll\`
-
-//     ## Sample usage:
-
-//     1. include the \`useStickyColumn\` hook
-//     2. add \`sticky="right"\` to the column object
-
-//     \`\`\`js
-//     const columns = [
-//       ... // other columns
-//       {
-//         Header: "",
-//         accessor: "actions",
-//         sticky: "right",
-//         width: 60,
-//       },
-//     ]
-//     const datagridState = useDatagrid(
-//       {
-//         columns,
-//         data,
-//       },
-//       useStickyColumn
-//     );
-//     \`\`\`
-//     \`\`\`html
-//     <Datagrid {...datagridState} />
-//     \`\`\`
-
-//     # Actions column
-//     This will add OverflowMenu component to the cells on the column mark with \`isAction: true\`. Each action button callback will include the actionId and row object
-
-//     ## Sample usage:
-//     1. include \`useActionsColumn\` hook
-//     2. add \`isAction = true\` to the column object in which you wish to add the overflow menu actions
-//     3. add \`rowActions = []\` array to the props
-//       - \`rowActions[].id\` for callback to identify the action is called
-//       - \`rowActions[].onClick(actionId: string, row: Row, event: ClickEvent)\` callback on menuitem clicked. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)
-//       - \`rowActions[].shouldHideMenuItem(row: Row)\` callback to hide this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)
-//       - \`rowActions[].shouldDisableMenuItem(row: Row)\` callback to disable this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)
-//         - This will override \`rowActions[].disabled\` (from Carbon) because \`shouldDisableMenuItem\` is more specific to the row.
-//       - each action object can take all the props from \`OverflowMenuItem\` props, see [carbon docs](https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default#overflowmenu)
-
-//     \`\`\`js
-//     const columns = [
-//       ... // other columns
-//       {
-//         Header: "",
-//         accessor: "actions",
-//         isAction: true,
-//       },
-//     ]
-//     const onActionClick = (actionId, row, event) => {};
-//     const datagridState = useDatagrid(
-//       {
-//         columns,
-//         data,
-//         rowActions: [
-//           {
-//             id: 'edit',
-//             itemText: 'Edit',
-//             onClick: onActionClick
-//           },
-//           {
-//             id: 'hidden',
-//             itemText: 'Hidden item',
-//             onClick: onActionClick,
-//             shouldHideMenuItem: () => true,
-//           },
-//           {
-//             id: 'delete',
-//             itemText: 'Delete',
-//             hasDivider: true,
-//             isDelete: true,
-//             onClick: onActionClick
-//           },
-//         ]
-//       },
-//       useActionsColumn,
-//     );
-//     \`\`\`
-//     \`\`\`html
-//     <Datagrid {...datagridState} />
-//     \`\`\`
-//     `,
-//   },
-// };
-
-// export default StickyActionsColumn;
-"use strict";

package/lib/components/Datagrid/Datagrid.stories/common.js

@@ -1,197 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.makeData = exports.defaultHeader = exports.Wrapper = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _namor = _interopRequireDefault(require("namor"));
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var range = function range(len) {
-  var arr = [];
-  for (var i = 0; i < len; i++) {
-    arr.push(i);
-  }
-  return arr;
-};
-var newPerson = function newPerson() {
-  var statusChance = Math.random();
-  return {
-    firstName: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    lastName: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    age: Math.floor(Math.random() * 30),
-    visits: Math.floor(Math.random() * 100),
-    progress: Math.floor(Math.random() * 100),
-    someone1: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone2: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone3: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone4: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone5: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone6: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone7: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone8: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone9: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone10: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone11: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone12: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone13: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone14: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone15: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone16: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone17: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone18: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone19: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    someone20: _namor.default.generate({
-      words: 1,
-      numbers: 0
-    }),
-    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single'
-  };
-};
-
-// eslint-disable-next-line react/prop-types
-var Wrapper = exports.Wrapper = function Wrapper(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: '490px',
-      width: '100%',
-      padding: '16px',
-      margin: '0',
-      zIndex: '0'
-    }
-  }, children);
-};
-var makeData = exports.makeData = function makeData() {
-  for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
-    lens[_key] = arguments[_key];
-  }
-  var makeDataLevel = function makeDataLevel() {
-    var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    var len = lens[depth];
-    return range(len).map(function () {
-      return _objectSpread(_objectSpread({}, newPerson()), {}, {
-        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
-      });
-    });
-  };
-  return makeDataLevel();
-};
-var defaultHeader = exports.defaultHeader = [{
-  Header: 'Row Index',
-  accessor: function accessor(row, i) {
-    return i;
-  },
-  sticky: 'left'
-}, {
-  Header: 'First Name',
-  accessor: 'firstName',
-  sticky: 'left'
-}, {
-  Header: 'Last Name',
-  accessor: 'lastName'
-}, {
-  Header: 'Age',
-  accessor: 'age',
-  width: 50
-}, {
-  Header: 'Visits',
-  accessor: 'visits',
-  width: 60
-}, {
-  Header: 'Someone 1',
-  accessor: 'someone1'
-}, {
-  Header: 'Someone 2',
-  accessor: 'someone2'
-}, {
-  Header: 'Someone 3',
-  accessor: 'someone3'
-}, {
-  Header: 'Someone 4',
-  accessor: 'someone4'
-}, {
-  Header: 'Someone 5',
-  accessor: 'someone5'
-}, {
-  Header: 'Someone 6',
-  accessor: 'someone6'
-}, {
-  Header: 'Someone 7',
-  accessor: 'someone7'
-}, {
-  Header: 'Someone 8',
-  accessor: 'someone8'
-}, {
-  Header: 'Someone 9',
-  accessor: 'someone9'
-}, {
-  Header: 'Someone 10',
-  accessor: 'someone10'
-}];

package/lib/components/Datagrid/Datagrid.stories/index.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CustomizeColumnStoryNotes", {
-  enumerable: true,
-  get: function get() {
-    return _CustomizeColumnStory.story;
-  }
-});
-Object.defineProperty(exports, "RowSizeDropdownStory", {
-  enumerable: true,
-  get: function get() {
-    return _RowSizeDropdownStory.story;
-  }
-});
-Object.defineProperty(exports, "SelectAllWithToggle", {
-  enumerable: true,
-  get: function get() {
-    return _SelectAllWithToggleStory.story;
-  }
-});
-Object.defineProperty(exports, "StickyActionsColumn", {
-  enumerable: true,
-  get: function get() {
-    return _StickyActionsColumnStory.default;
-  }
-});
-var _CustomizeColumnStory = require("./CustomizeColumnStory");
-var _StickyActionsColumnStory = _interopRequireDefault(require("./StickyActionsColumnStory"));
-var _RowSizeDropdownStory = require("./RowSizeDropdownStory");
-var _SelectAllWithToggleStory = require("./SelectAllWithToggleStory");