@carbon/ibm-products 2.12.1 → 2.13.0

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js

@@ -17,7 +17,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        * LICENSE file in the root directory of this source tree.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var handleGridKeyPress = function handleGridKeyPress(_ref) {
+var handleGridKeyPress = exports.handleGridKeyPress = function handleGridKeyPress(_ref) {
   var event = _ref.event,
     dispatch = _ref.dispatch,
     state = _ref.state,
@@ -230,5 +230,4 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
         }
     }
   }
-};
-exports.handleGridKeyPress = handleGridKeyPress;
+};

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js

@@ -15,7 +15,7 @@ var _getFocusableElements = require("../../../../../global/js/utils/getFocusable
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var handleMultipleKeys = function handleMultipleKeys(_ref) {
+var handleMultipleKeys = exports.handleMultipleKeys = function handleMultipleKeys(_ref) {
   var usingMac = _ref.usingMac,
     keysPressedList = _ref.keysPressedList,
     dispatch = _ref.dispatch,
@@ -83,5 +83,4 @@ var handleMultipleKeys = function handleMultipleKeys(_ref) {
       (_datagridFocusableEle = datagridFocusableElements[indexOfTable]) === null || _datagridFocusableEle === void 0 || _datagridFocusableEle.focus();
     }
   }
-};
-exports.handleMultipleKeys = handleMultipleKeys;
+};

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 _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 = ["align", "legendText"];
@@ -22,16 +24,17 @@ var _excluded = ["align", "legendText"];
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-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; }
+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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid__row-size");
 var RowSizeDropdown = function RowSizeDropdown(_ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'bottom-right' : _ref$align,
     _ref$legendText = _ref.legendText,
-    legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
+    legendText = _ref$legendText === void 0 ? 'Row settings' : _ref$legendText,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _React$useState = React.useState(false),
+  var radioGroupRef = (0, _react.useRef)();
+  var _React$useState = _react.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isOpen = _React$useState2[0],
     setIsOpen = _React$useState2[1];
@@ -48,10 +51,19 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
       onCloseHandler();
     }
   };
+  (0, _react.useEffect)(function () {
+    if (isOpen) {
+      var radioGroupParentElement = radioGroupRef === null || radioGroupRef === void 0 ? void 0 : radioGroupRef.current;
+      var checkedRadioChild = radioGroupParentElement === null || radioGroupParentElement === void 0 ? void 0 : radioGroupParentElement.querySelector(".".concat(_settings.carbon.prefix, "--radio-button:checked"));
+      checkedRadioChild === null || checkedRadioChild === void 0 || checkedRadioChild.focus();
+    }
+  }, [isOpen]);
   var onClickHandler = function onClickHandler() {
-    setIsOpen(!isOpen);
+    setIsOpen(function (prev) {
+      return !prev;
+    });
   };
-  return /*#__PURE__*/React.createElement(_react2.Popover, {
+  return /*#__PURE__*/_react.default.createElement(_react2.Popover, {
     tabIndex: -1,
     isTabTip: true,
     align: "bottom-right",
@@ -60,15 +72,17 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     className: "".concat(blockClass, "-options-container"),
     onKeyDown: onKeyHandler,
     onBlur: onBlurHandler
-  }, /*#__PURE__*/React.createElement(_react2.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
     align: align,
     kind: "ghost",
     onClick: onClickHandler,
     label: legendText,
-    className: "".concat(blockClass, "-button")
-  }, /*#__PURE__*/React.createElement(_icons.Settings, {
+    className: (0, _classnames.default)("".concat(blockClass, "-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-settings-trigger--open"), isOpen))
+  }, /*#__PURE__*/_react.default.createElement(_icons.Settings, {
     size: 16
-  })), /*#__PURE__*/React.createElement(_react2.PopoverContent, null, /*#__PURE__*/React.createElement(_react2.Layer, null, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
+  })), /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, null, /*#__PURE__*/_react.default.createElement(_react2.Layer, null, /*#__PURE__*/_react.default.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({
+    ref: radioGroupRef
+  }, props, {
     legendText: legendText
   })))));
 };
@@ -80,5 +94,4 @@ RowSizeDropdown.propTypes = {
   onChange: _propTypes.default.func.isRequired,
   selectedOption: _propTypes.default.string
 };
-var _default = RowSizeDropdown;
-exports.default = _default;
+var _default = exports.default = RowSizeDropdown;

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

@@ -1,15 +1,18 @@
 "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 = _interopRequireDefault(require("react"));
+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");
+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; }
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -18,7 +21,7 @@ var _settings = require("../../../../../settings");
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid__row-size");
-var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
+var RowSizeRadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var rowSizes = _ref.rowSizes,
     selectedOption = _ref.selectedOption,
     datagridName = _ref.datagridName,
@@ -34,7 +37,8 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
     } : _ref$rowSizeLabels;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-dropdown"),
-    role: "presentation"
+    role: "presentation",
+    ref: ref
   }, /*#__PURE__*/_react.default.createElement(_react2.RadioButtonGroup, {
     legendText: legendText,
     name: "row-height-group",
@@ -56,7 +60,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       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 = {
@@ -92,5 +96,4 @@ RowSizeRadioGroup.propTypes = {
   rowSizes: _propTypes.default.array.isRequired,
   selectedOption: _propTypes.default.string.isRequired
 };
-var _default = RowSizeRadioGroup;
-exports.default = _default;
+var _default = exports.default = RowSizeRadioGroup;

package/lib/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -20,7 +20,7 @@ var COLUMN_RESIZE_START = 'columnStartResizing';
 var COLUMN_RESIZING = 'columnResizing';
 var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
-var handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
+var handleColumnResizeStartEvent = exports.handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
   dispatch({
     type: COLUMN_RESIZE_START,
     payload: {
@@ -28,8 +28,7 @@ var handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatc
     }
   });
 };
-exports.handleColumnResizeStartEvent = handleColumnResizeStartEvent;
-var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
+var handleColumnResizeEndEvent = exports.handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
   dispatch({
     type: COLUMN_RESIZE_END,
     payload: {
@@ -38,8 +37,7 @@ var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, o
     }
   });
 };
-exports.handleColumnResizeEndEvent = handleColumnResizeEndEvent;
-var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, header, newWidth, isKeyEvent) {
+var handleColumnResizingEvent = exports.handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, header, newWidth, isKeyEvent) {
   if (isKeyEvent) {
     dispatch({
       type: COLUMN_RESIZE_START,
@@ -59,8 +57,7 @@ var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, hea
     }
   });
 };
-exports.handleColumnResizingEvent = handleColumnResizingEvent;
-var stateReducer = function stateReducer(newState, action) {
+var stateReducer = exports.stateReducer = function stateReducer(newState, action) {
   switch (action.type) {
     case INIT:
       {
@@ -118,5 +115,4 @@ var stateReducer = function stateReducer(newState, action) {
         });
       }
   }
-};
-exports.stateReducer = stateReducer;
+};

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

@@ -10,9 +10,9 @@ 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() {
+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',
@@ -136,5 +136,4 @@ var DocsPage = function DocsPage() {
       }
     }]
   });
-};
-exports.DocsPage = DocsPage;
+};

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

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 = {
+var story = exports.story = {
   parameters: {
     notes: notes
   }
-};
-exports.story = story;
+};

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

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 = {
+var story = exports.story = {
   parameters: {
     notes: notes
   }
-};
-exports.story = story;
+};

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

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 = {
+var story = exports.story = {
   parameters: {
     notes: notes
   }
-};
-exports.story = story;
+};

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

@@ -116,7 +116,7 @@ var newPerson = function newPerson() {
 };
 
 // eslint-disable-next-line react/prop-types
-var Wrapper = function Wrapper(_ref) {
+var Wrapper = exports.Wrapper = function Wrapper(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -128,8 +128,7 @@ var Wrapper = function Wrapper(_ref) {
     }
   }, children);
 };
-exports.Wrapper = Wrapper;
-var makeData = function makeData() {
+var makeData = exports.makeData = function makeData() {
   for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
     lens[_key] = arguments[_key];
   }
@@ -144,8 +143,7 @@ var makeData = function makeData() {
   };
   return makeDataLevel();
 };
-exports.makeData = makeData;
-var defaultHeader = [{
+var defaultHeader = exports.defaultHeader = [{
   Header: 'Row Index',
   accessor: function accessor(row, i) {
     return i;
@@ -196,5 +194,4 @@ var defaultHeader = [{
 }, {
   Header: 'Someone 10',
   accessor: 'someone10'
-}];
-exports.defaultHeader = defaultHeader;
+}];

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DocsPage = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
-var DocsPage = function DocsPage() {
+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        ",
@@ -17,5 +17,4 @@ var DocsPage = function DocsPage() {
       }
     }]
   });
-};
-exports.DocsPage = DocsPage;
+};

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DocsPage = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
-var DocsPage = function DocsPage() {
+var DocsPage = exports.DocsPage = function DocsPage() {
   return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
     blocks: [{
       title: 'Customizing columns',
@@ -17,5 +17,4 @@ var DocsPage = function DocsPage() {
       }
     }]
   });
-};
-exports.DocsPage = DocsPage;
+};

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

@@ -8,7 +8,7 @@ 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() {
+var DocsPage = exports.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)."
@@ -51,5 +51,4 @@ var DocsPage = function DocsPage() {
       story: _EditableCell.InlineEditUsageStory
     }]
   });
-};
-exports.DocsPage = DocsPage;
+};

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DocsPage = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
-var DocsPage = function DocsPage() {
+var DocsPage = exports.DocsPage = function DocsPage() {
   return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
     blocks: [{
       description: "The `Datagrid` supports expandable rows with the use of the `useExpandedRow` hook.",
@@ -17,5 +17,4 @@ var DocsPage = function DocsPage() {
       }
     }]
   });
-};
-exports.DocsPage = DocsPage;
+};

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DocsPage = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
-var DocsPage = function DocsPage() {
+var DocsPage = exports.DocsPage = function DocsPage() {
   return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
     blocks: [{
       title: 'Filtering',
@@ -61,5 +61,4 @@ var DocsPage = function DocsPage() {
       }
     }]
   });
-};
-exports.DocsPage = DocsPage;
+};

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DocsPage = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
-var DocsPage = function DocsPage() {
+var DocsPage = exports.DocsPage = function DocsPage() {
   return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
     blocks: [{
       title: 'Actions column',
@@ -17,5 +17,4 @@ var DocsPage = function DocsPage() {
       }
     }]
   });
-};
-exports.DocsPage = DocsPage;
+};

package/lib/components/Datagrid/common-column-ids.js

@@ -12,5 +12,4 @@ exports.selectionColumnId = void 0;
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 
-var selectionColumnId = 'datagridSelection';
-exports.selectionColumnId = selectionColumnId;
+var selectionColumnId = exports.selectionColumnId = 'datagridSelection';

package/lib/components/Datagrid/useActionsColumn.js

@@ -21,8 +21,8 @@ var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuIt
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-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; }
+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; }
 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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -152,5 +152,4 @@ var useActionsColumn = function useActionsColumn(hooks) {
   hooks.useInstance.push(useStickyHeaderWidth);
   hooks.useInstance.push(useAttachActionsOnInstance);
 };
-var _default = useActionsColumn;
-exports.default = _default;
+var _default = exports.default = useActionsColumn;

package/lib/components/Datagrid/useColumnCenterAlign.js

@@ -47,5 +47,4 @@ var useColumnCenterAlign = function useColumnCenterAlign(hooks) {
   };
   hooks.visibleColumns.push(centerAlignedColumns);
 };
-var _default = useColumnCenterAlign;
-exports.default = _default;
+var _default = exports.default = useColumnCenterAlign;

package/lib/components/Datagrid/useColumnOrder.js

@@ -11,5 +11,4 @@ var _reactTable = require("react-table");
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var _default = _reactTable.useColumnOrder;
-exports.default = _default;
+var _default = exports.default = _reactTable.useColumnOrder;

package/lib/components/Datagrid/useColumnRightAlign.js

@@ -47,5 +47,4 @@ var useColumnRightAlign = function useColumnRightAlign(hooks) {
   };
   hooks.visibleColumns.push(rightAlignedColumns);
 };
-var _default = useColumnRightAlign;
-exports.default = _default;
+var _default = exports.default = useColumnRightAlign;

package/lib/components/Datagrid/useCustomizeColumns.js

@@ -12,8 +12,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var React = _interopRequireWildcard(require("react"));
 var _settings = require("../../settings");
 var _CustomizeColumns = require("./Datagrid/addons/CustomizeColumns");
-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; }
+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; }
 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; } /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        * Copyright IBM Corp. 2021, 2023
@@ -49,5 +49,4 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
     });
   });
 };
-var _default = useCustomizeColumns;
-exports.default = _default;
+var _default = exports.default = useCustomizeColumns;

package/lib/components/Datagrid/useDatagrid.js

@@ -43,5 +43,4 @@ var useDatagrid = function useDatagrid(params) {
   })].concat(defaultPlugins, plugins, defaultEndPlugins, (0, _toConsumableArray2.default)(clientEndPlugins)));
   return tableState;
 };
-var _default = useDatagrid;
-exports.default = _default;
+var _default = exports.default = useDatagrid;

package/lib/components/Datagrid/useDefaultStringRenderer.js

@@ -46,5 +46,4 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
   };
   hooks.visibleColumns.push(visibleColumns);
 };
-var _default = useDefaultStringRenderer;
-exports.default = _default;
+var _default = exports.default = useDefaultStringRenderer;

package/lib/components/Datagrid/useDisableSelectRows.js

@@ -83,5 +83,4 @@ var updatePageSelectAll = function updatePageSelectAll(hooks) {
   };
   hooks.getToggleAllPageRowsSelectedProps.push(getToggleAllPageRowsSelectedProps);
 };
-var _default = useDisableSelectRows;
-exports.default = _default;
+var _default = exports.default = useDisableSelectRows;

package/lib/components/Datagrid/useEditableCell.js

@@ -16,5 +16,4 @@ var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
 var useEditableCell = function useEditableCell(hooks) {
   (0, _useInlineEdit.default)(hooks, 'usingEditableCell');
 };
-var _default = useEditableCell;
-exports.default = _default;
+var _default = exports.default = useEditableCell;

package/lib/components/Datagrid/useExpandedRow.js

@@ -48,5 +48,4 @@ var useExpandedRow = function useExpandedRow(hooks) {
   };
   hooks.useInstance.push(useInstance);
 };
-var _default = useExpandedRow;
-exports.default = _default;
+var _default = exports.default = useExpandedRow;

package/lib/components/Datagrid/useFiltering.js

@@ -100,5 +100,4 @@ var useFiltering = function useFiltering(hooks) {
     });
   });
 };
-var _default = useFiltering;
-exports.default = _default;
+var _default = exports.default = useFiltering;

package/lib/components/Datagrid/useFlexResize.js

@@ -48,5 +48,4 @@ var useFlexResize = function useFlexResize(hooks) {
     return changeProps(props, data);
   });
 };
-var _default = useFlexResize;
-exports.default = _default;
+var _default = exports.default = useFlexResize;

package/lib/components/Datagrid/useFloatingScroll.js

@@ -80,5 +80,4 @@ var useFloatingScroll = function useFloatingScroll(hooks) {
   hooks.useInstance.push(useAddScrollListener);
   hooks.useInstance.push(useInstance);
 };
-var _default = useFloatingScroll;
-exports.default = _default;
+var _default = exports.default = useFloatingScroll;

package/lib/components/Datagrid/useInfiniteScroll.js

@@ -57,5 +57,4 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
   };
   hooks.useInstance.push(useInstance);
 };
-var _default = useInfiniteScroll;
-exports.default = _default;
+var _default = exports.default = useInfiniteScroll;