@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.31

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

@@ -1,84 +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.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _icons = require("@carbon/react/icons");
-
-var _react2 = require("@carbon/react");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _RowSizeRadioGroup = _interopRequireDefault(require("./RowSizeRadioGroup"));
-
-var _settings = require("../../../../../settings");
-
-var _excluded = ["legendText"];
-
-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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-
-var RowSizeDropdown = function RowSizeDropdown(_ref) {
-  var _ref$legendText = _ref.legendText,
-      legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
-  return /*#__PURE__*/React.createElement(_react2.Popover, {
-    align: "bottom-right",
-    caret: false,
-    dropShadow: false,
-    open: isOpen,
-    className: "".concat(blockClass, "__row-height-settings-popover")
-  }, /*#__PURE__*/React.createElement(_react2.IconButton, {
-    kind: "ghost",
-    align: "left",
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    },
-    label: legendText,
-    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
-  }, /*#__PURE__*/React.createElement(_icons.Settings, {
-    size: 16
-  })), /*#__PURE__*/React.createElement(_react2.PopoverContent, null, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
-    legendText: legendText,
-    hideRadioGroup: function hideRadioGroup() {
-      setIsOpen(false);
-    }
-  }))));
-};
-
-RowSizeDropdown.propTypes = {
-  datagridName: _propTypes.default.string,
-  legendText: _propTypes.default.string,
-  light: _propTypes.default.bool,
-  onChange: _propTypes.default.func.isRequired,
-  selectedOption: _propTypes.default.string
-};
-var _default = RowSizeDropdown;
-exports.default = _default;

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

@@ -1,135 +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.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react2 = require("@carbon/react");
-
-var _isArray = _interopRequireDefault(require("lodash/isArray"));
-
-var _settings = require("../../../../../settings");
-
-var _hooks = require("../../../../../global/js/hooks");
-
-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; }
-
-/* eslint-disable react/default-props-match-prop-types */
-// @flow
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-
-var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
-  var rowSizes = _ref.rowSizes,
-      selectedOption = _ref.selectedOption,
-      datagridName = _ref.datagridName,
-      onChange = _ref.onChange,
-      hideRadioGroup = _ref.hideRadioGroup,
-      legendText = _ref.legendText,
-      _ref$rowSizeLabels = _ref.rowSizeLabels,
-      rowSizeLabels = _ref$rowSizeLabels === void 0 ? {
-    xl: 'Extra large',
-    lg: 'Large (default)',
-    md: 'Medium',
-    sm: 'Small',
-    xs: 'Extra small'
-  } : _ref$rowSizeLabels;
-  var popoverContentRef = (0, _react.useRef)();
-  (0, _hooks.useClickOutside)(popoverContentRef, function (target) {
-    if (target.closest(".".concat(blockClass, "__row-size-button"))) {
-      return;
-    }
-
-    hideRadioGroup();
-  });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: popoverContentRef,
-    className: "".concat(blockClass, "__row-size-dropdown"),
-    role: "presentation",
-    onClick: function onClick(e) {
-      e.stopPropagation();
-    }
-  }, /*#__PURE__*/_react.default.createElement(_react2.RadioButtonGroup, {
-    legendText: legendText,
-    name: "row-height-group",
-    orientation: "vertical",
-    defaultSelected: getBackwardCompatibleRowSize(selectedOption),
-    onChange: onChange
-  }, rowSizes && (0, _isArray.default)(rowSizes) && rowSizes.map(function (option) {
-    var labelText;
-
-    try {
-      labelText = option.labelText || rowSizeLabels[option.value];
-    } catch (e) {
-      labelText = option.value;
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
-      key: option.value,
-      labelText: labelText,
-      value: option.value,
-      id: "".concat(datagridName || 'datagrid', "--row-density--").concat(option.value)
-    });
-  })));
-};
-
-var getBackwardCompatibleRowSize = function getBackwardCompatibleRowSize(rowSize) {
-  // TODO: deprecate this function in next major release (v8) on carbon-components-react
-  var rowSizeMap = {
-    tall: 'xl',
-    normal: 'lg',
-    short: 'sm',
-    compact: 'xs' // md is a new value
-
-  };
-  return rowSizeMap[rowSize] || rowSize;
-};
-
-RowSizeRadioGroup.defaultProps = {
-  rowSizes: [{
-    value: 'xl' // 64
-
-  }, {
-    value: 'lg' // 48
-
-  }, {
-    value: 'md' // 40
-
-  }, {
-    value: 'sm' // 32
-
-  }, {
-    value: 'xs' // 24
-
-  }],
-  selectedOption: 'lg'
-};
-RowSizeRadioGroup.propTypes = {
-  datagridName: _propTypes.default.string,
-  hideRadioGroup: _propTypes.default.func.isRequired,
-  legendText: _propTypes.default.string,
-  onChange: _propTypes.default.func.isRequired,
-  rowSizeLabels: _propTypes.default.object,
-  rowSizes: _propTypes.default.array.isRequired,
-  selectedOption: _propTypes.default.string.isRequired
-};
-var _default = RowSizeRadioGroup;
-exports.default = _default;

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

@@ -1,15 +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,13 +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.stories/CustomizeColumnStory.js

@@ -1,13 +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 = {
-  parameters: {
-    notes: notes
-  }
-};
-exports.story = story;

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

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.story = void 0;
-var notes = "\n# Access left side panel in data grid\nAllow users to access left panel in datagrid.\n\n## Documentation:\n\n- (required) Implement `options.leftPanel` which has the following props\n  - `options.leftPanel.isOpen` value is toggled by the Button onClick from DatagridActions\n  - render `options.leftPanel.panelContent` inside the panel container of data grid when isOpen is true\n\ncode snippet:\n\n```js\nconst columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(10));\n  const [isPanelOpen, setIsPanelOpen] = useState(false);\n  const DatagridActions = (datagridState) => (\n    <TableToolbarContent>\n      <Button onClick={() => { setIsPanelOpen(!isPanelOpen); }}>Click to toggle left panel</Button>\n      <TableToolbarSearch ... />\n      <Button ... />\n      <datagridState.CustomizeColumnsButton />\n    </TableToolbarContent>\n  )\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      leftPanel: {\n        isOpen: isPanelOpen,\n        panelContent: <div>Panel content will go here along with any button interactions</div>,\n      },\n      initialState: {\n        hiddenColumns: ['age'],\n        columnOrder: [],\n      },\n      customizeColumnsProps: {\n        onSaveColumnPrefs: (newColDefs) => {\n          console.log(newColDefs);\n        },\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 = {
-  parameters: {
-    notes: notes
-  }
-};
-exports.story = story;

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

@@ -1,13 +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 = {
-  parameters: {
-    notes: notes
-  }
-};
-exports.story = story;

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

@@ -1,13 +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 = {
-  parameters: {
-    notes: notes
-  }
-};
-exports.story = story;

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

@@ -1,93 +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 which 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,215 +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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 = 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);
-};
-
-exports.Wrapper = Wrapper;
-
-var 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();
-};
-
-exports.makeData = makeData;
-var 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'
-}];
-exports.defaultHeader = defaultHeader;

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

@@ -1,47 +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, "LeftPanelStory", {
-  enumerable: true,
-  get: function get() {
-    return _LeftPanelStory.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 _LeftPanelStory = require("./LeftPanelStory");
-
-var _SelectAllWithToggleStory = require("./SelectAllWithToggleStory");