@carbon/ibm-products 1.20.2 → 1.22.0

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

@@ -1,92 +1,92 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import React, { useState, useEffect } from 'react';
-import { Datagrid, useActionsColumn, useDatagrid, useStickyColumn } from '..';
-import { defaultHeader, makeData, Wrapper } from './common';
-
-var StickyActionsColumn = function StickyActionsColumn() {
-  var columns = React.useMemo(function () {
-    return [].concat(_toConsumableArray(defaultHeader), [{
-      Header: '',
-      accessor: 'actions',
-      sticky: 'right',
-      width: 60,
-      isAction: true
-    }]);
-  }, []);
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      data = _useState2[0],
-      setData = _useState2[1];
-
-  var _useState3 = useState('click action menu'),
-      _useState4 = _slicedToArray(_useState3, 2),
-      msg = _useState4[0],
-      setMsg = _useState4[1];
-
-  var onActionClick = function onActionClick(actionId, row) {
-    var original = row.original;
-    setMsg("Clicked [".concat(actionId, "] on row: <").concat(original.firstName, " ").concat(original.lastName, ">"));
-  };
-
-  var _useState5 = useState(true),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isFetching = _useState6[0],
-      setIsFetching = _useState6[1];
-
-  useEffect(function () {
-    var fetchData = function fetchData() {
-      return new Promise(function (resolve) {
-        setIsFetching(true);
-        setTimeout(function () {
-          setData(data.concat(makeData(30, 5, 2)));
-          resolve();
-        }, 1000);
-      }).then(function () {
-        return setIsFetching(false);
-      });
-    };
-
-    fetchData();
-  }, [data]);
-  var datagridState = useDatagrid({
-    columns: columns,
-    data: data,
-    isFetching: isFetching,
-    rowActions: [{
-      id: 'edit',
-      itemText: 'Edit',
-      onClick: onActionClick
-    }, {
-      id: 'vote',
-      itemText: 'Vote',
-      onClick: onActionClick,
-      shouldHideMenuItem: function shouldHideMenuItem(row) {
-        return row.original.age <= 18;
-      }
-    }, {
-      id: 'retire',
-      itemText: 'Retire',
-      onClick: onActionClick,
-      disabled: false,
-      shouldDisableMenuItem: function shouldDisableMenuItem(row) {
-        return row.original.age <= 60;
-      }
-    }, {
-      id: 'delete',
-      itemText: 'Delete',
-      hasDivider: true,
-      isDelete: true,
-      onClick: onActionClick
-    }]
-  }, useStickyColumn, useActionsColumn);
-  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement("h3", null, msg), /*#__PURE__*/React.createElement(Datagrid, datagridState), /*#__PURE__*/React.createElement("p", null, "More details documentation check the Notes section below"));
-};
-
-StickyActionsColumn.story = {
-  parameters: {
-    notes: "\n    Sticky column and actions column can be used at the same time like the demo above. Following is the doc for each of them.\n\n    # Sticky column\n    This will make the column mark with `sticky: \"right\"` to be sticky on the right.\n\n    ## Incompatible with following plugins:\n    - `useInfiniteScroll`\n\n    ## Sample usage:\n    \n    1. include the `useStickyColumn` hook\n    2. add `sticky=\"right\"` to the column object\n\n    ```js\n    const columns = [\n      ... // other columns\n      {\n        Header: \"\",\n        accessor: \"actions\",\n        sticky: \"right\",\n        width: 60,\n      },\n    ]\n    const datagridState = useDatagrid(\n      {\n        columns,\n        data,\n      },\n      useStickyColumn\n    );\n    ```\n    ```html\n    <Datagrid {...datagridState} />\n    ```\n\n    # Actions column\n    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\n\n    ## Sample usage:\n    1. include `useActionsColumn` hook\n    2. add `isAction = true` to the column object in which you which to add the overflow menu actions\n    3. add `rowActions = []` array to the props\n      - `rowActions[].id` for callback to identify the action is called\n      - `rowActions[].onClick(actionId: string, row: Row, event: ClickEvent)` callback on menuitem clicked. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n      - `rowActions[].shouldHideMenuItem(row: Row)` callback to hide this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n      - `rowActions[].shouldDisableMenuItem(row: Row)` callback to disable this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n        - This will override `rowActions[].disabled` (from Carbon) because `shouldDisableMenuItem` is more specific to the row.\n      - each action object can take all the props from `OverflowMenuItem` props, see [carbon docs](https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default#overflowmenu)\n\n    ```js\n    const columns = [\n      ... // other columns\n      {\n        Header: \"\",\n        accessor: \"actions\",\n        isAction: true,\n      },\n    ]\n    const onActionClick = (actionId, row, event) => {};\n    const datagridState = useDatagrid(\n      {\n        columns,\n        data,\n        rowActions: [\n          {\n            id: 'edit',\n            itemText: 'Edit',\n            onClick: onActionClick\n          },\n          {\n            id: 'hidden',\n            itemText: 'Hidden item',\n            onClick: onActionClick,\n            shouldHideMenuItem: () => true,\n          },\n          {\n            id: 'delete',\n            itemText: 'Delete',\n            hasDivider: true,\n            isDelete: true,\n            onClick: onActionClick\n          },\n        ]\n      },\n      useActionsColumn,\n    );\n    ```\n    ```html\n    <Datagrid {...datagridState} />\n    ```\n    "
-  }
-};
-export default StickyActionsColumn;
+// 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;

package/es/components/Datagrid/index.js

@@ -19,4 +19,5 @@ export { default as useDisableSelectRows } from './useDisableSelectRows';
 export { default as useStickyColumn } from './useStickyColumn';
 export { default as useActionsColumn } from './useActionsColumn';
 export { default as useCustomizeColumns } from './useCustomizeColumns';
-export { default as useSelectAllWithToggle } from './useSelectAllToggle';
+export { default as useSelectAllWithToggle } from './useSelectAllToggle';
+export { default as useColumnCenterAlign } from './useColumnCenterAlign';

package/es/components/Datagrid/useColumnCenterAlign.js

@@ -0,0 +1,52 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import React from 'react';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var useColumnCenterAlign = function useColumnCenterAlign(hooks) {
+  var centerAlignRenderer = function centerAlignRenderer(tableProps, column) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx("".concat(blockClass, "__center-align-cell-renderer"), {
+        sortDisabled: !tableProps.isTableSortable || tableProps.column.disableSortBy === true
+      })
+    }, column.Cell(tableProps));
+  };
+
+  var centerAlignHeader = function centerAlignHeader(headerProp, column) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__center-align-header")
+    }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
+  };
+
+  var centerAlignedColumns = function centerAlignedColumns(columns) {
+    var columnsWithDefaultCells = columns.map(function (column) {
+      return _objectSpread(_objectSpread({}, column), {}, {
+        Cell: column.centerAlignedColumn ? function (tableProp) {
+          return centerAlignRenderer(tableProp, column);
+        } : column.Cell,
+        Header: column.centerAlignedColumn ? function (headerProp) {
+          return centerAlignHeader(headerProp, column);
+        } : column.Header
+      });
+    });
+    return _toConsumableArray(columnsWithDefaultCells);
+  };
+
+  hooks.visibleColumns.push(centerAlignedColumns);
+};
+
+export default useColumnCenterAlign;

package/es/components/Datagrid/utils/makeData.js

@@ -0,0 +1,155 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import namor from 'namor';
+export 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();
+};
+export 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.generate({
+      words: 1,
+      numbers: 0
+    }),
+    lastName: namor.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.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone2: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone3: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone4: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone5: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone6: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone7: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone8: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone9: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone10: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone11: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone12: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone13: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone14: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone15: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone16: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone17: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone18: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone19: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone20: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single'
+  };
+};
+
+export var newPersonWithTwoLines = function newPersonWithTwoLines() {
+  return {
+    firstName: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, namor.generate({
+      words: 1,
+      numbers: 0
+    })), /*#__PURE__*/React.createElement("div", null, namor.generate({
+      words: 1,
+      numbers: 0
+    }))),
+    lastName: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    age: Math.floor(Math.random() * 30)
+  };
+};

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

@@ -1,112 +1,93 @@
-"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _ = require("..");
-
-var _common = require("./common");
-
-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 StickyActionsColumn = function StickyActionsColumn() {
-  var columns = _react.default.useMemo(function () {
-    return [].concat((0, _toConsumableArray2.default)(_common.defaultHeader), [{
-      Header: '',
-      accessor: 'actions',
-      sticky: 'right',
-      width: 60,
-      isAction: true
-    }]);
-  }, []);
-
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      data = _useState2[0],
-      setData = _useState2[1];
-
-  var _useState3 = (0, _react.useState)('click action menu'),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      msg = _useState4[0],
-      setMsg = _useState4[1];
-
-  var onActionClick = function onActionClick(actionId, row) {
-    var original = row.original;
-    setMsg("Clicked [".concat(actionId, "] on row: <").concat(original.firstName, " ").concat(original.lastName, ">"));
-  };
-
-  var _useState5 = (0, _react.useState)(true),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isFetching = _useState6[0],
-      setIsFetching = _useState6[1];
-
-  (0, _react.useEffect)(function () {
-    var fetchData = function fetchData() {
-      return new Promise(function (resolve) {
-        setIsFetching(true);
-        setTimeout(function () {
-          setData(data.concat((0, _common.makeData)(30, 5, 2)));
-          resolve();
-        }, 1000);
-      }).then(function () {
-        return setIsFetching(false);
-      });
-    };
-
-    fetchData();
-  }, [data]);
-  var datagridState = (0, _.useDatagrid)({
-    columns: columns,
-    data: data,
-    isFetching: isFetching,
-    rowActions: [{
-      id: 'edit',
-      itemText: 'Edit',
-      onClick: onActionClick
-    }, {
-      id: 'vote',
-      itemText: 'Vote',
-      onClick: onActionClick,
-      shouldHideMenuItem: function shouldHideMenuItem(row) {
-        return row.original.age <= 18;
-      }
-    }, {
-      id: 'retire',
-      itemText: 'Retire',
-      onClick: onActionClick,
-      disabled: false,
-      shouldDisableMenuItem: function shouldDisableMenuItem(row) {
-        return row.original.age <= 60;
-      }
-    }, {
-      id: 'delete',
-      itemText: 'Delete',
-      hasDivider: true,
-      isDelete: true,
-      onClick: onActionClick
-    }]
-  }, _.useStickyColumn, _.useActionsColumn);
-  return /*#__PURE__*/_react.default.createElement(_common.Wrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, msg), /*#__PURE__*/_react.default.createElement(_.Datagrid, datagridState), /*#__PURE__*/_react.default.createElement("p", null, "More details documentation check the Notes section below"));
-};
-
-StickyActionsColumn.story = {
-  parameters: {
-    notes: "\n    Sticky column and actions column can be used at the same time like the demo above. Following is the doc for each of them.\n\n    # Sticky column\n    This will make the column mark with `sticky: \"right\"` to be sticky on the right.\n\n    ## Incompatible with following plugins:\n    - `useInfiniteScroll`\n\n    ## Sample usage:\n    \n    1. include the `useStickyColumn` hook\n    2. add `sticky=\"right\"` to the column object\n\n    ```js\n    const columns = [\n      ... // other columns\n      {\n        Header: \"\",\n        accessor: \"actions\",\n        sticky: \"right\",\n        width: 60,\n      },\n    ]\n    const datagridState = useDatagrid(\n      {\n        columns,\n        data,\n      },\n      useStickyColumn\n    );\n    ```\n    ```html\n    <Datagrid {...datagridState} />\n    ```\n\n    # Actions column\n    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\n\n    ## Sample usage:\n    1. include `useActionsColumn` hook\n    2. add `isAction = true` to the column object in which you which to add the overflow menu actions\n    3. add `rowActions = []` array to the props\n      - `rowActions[].id` for callback to identify the action is called\n      - `rowActions[].onClick(actionId: string, row: Row, event: ClickEvent)` callback on menuitem clicked. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n      - `rowActions[].shouldHideMenuItem(row: Row)` callback to hide this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n      - `rowActions[].shouldDisableMenuItem(row: Row)` callback to disable this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n        - This will override `rowActions[].disabled` (from Carbon) because `shouldDisableMenuItem` is more specific to the row.\n      - each action object can take all the props from `OverflowMenuItem` props, see [carbon docs](https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default#overflowmenu)\n\n    ```js\n    const columns = [\n      ... // other columns\n      {\n        Header: \"\",\n        accessor: \"actions\",\n        isAction: true,\n      },\n    ]\n    const onActionClick = (actionId, row, event) => {};\n    const datagridState = useDatagrid(\n      {\n        columns,\n        data,\n        rowActions: [\n          {\n            id: 'edit',\n            itemText: 'Edit',\n            onClick: onActionClick\n          },\n          {\n            id: 'hidden',\n            itemText: 'Hidden item',\n            onClick: onActionClick,\n            shouldHideMenuItem: () => true,\n          },\n          {\n            id: 'delete',\n            itemText: 'Delete',\n            hasDivider: true,\n            isDelete: true,\n            onClick: onActionClick\n          },\n        ]\n      },\n      useActionsColumn,\n    );\n    ```\n    ```html\n    <Datagrid {...datagridState} />\n    ```\n    "
-  }
-};
-var _default = StickyActionsColumn;
-exports.default = _default;
+// 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/index.js

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "useActionsColumn", {
     return _useActionsColumn.default;
   }
 });
+Object.defineProperty(exports, "useColumnCenterAlign", {
+  enumerable: true,
+  get: function get() {
+    return _useColumnCenterAlign.default;
+  }
+});
 Object.defineProperty(exports, "useColumnRightAlign", {
   enumerable: true,
   get: function get() {
@@ -124,4 +130,6 @@ var _useActionsColumn = _interopRequireDefault(require("./useActionsColumn"));
 
 var _useCustomizeColumns = _interopRequireDefault(require("./useCustomizeColumns"));
 
-var _useSelectAllToggle = _interopRequireDefault(require("./useSelectAllToggle"));
+var _useSelectAllToggle = _interopRequireDefault(require("./useSelectAllToggle"));
+
+var _useColumnCenterAlign = _interopRequireDefault(require("./useColumnCenterAlign"));