@carbon/ibm-products 1.11.2 → 1.14.0

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

@@ -0,0 +1,112 @@
+"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;

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

@@ -0,0 +1,215 @@
+"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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CustomizeColumnStory", {
+  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");

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectionColumnId = void 0;
+
+/*
+ * 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 selectionColumnId = 'datagridSelection';
+exports.selectionColumnId = selectionColumnId;

package/lib/components/Datagrid/index.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Datagrid", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.default;
+  }
+});
+Object.defineProperty(exports, "useActionsColumn", {
+  enumerable: true,
+  get: function get() {
+    return _useActionsColumn.default;
+  }
+});
+Object.defineProperty(exports, "useColumnRightAlign", {
+  enumerable: true,
+  get: function get() {
+    return _useColumnRightAlign.default;
+  }
+});
+Object.defineProperty(exports, "useCustomizeColumns", {
+  enumerable: true,
+  get: function get() {
+    return _useCustomizeColumns.default;
+  }
+});
+Object.defineProperty(exports, "useDatagrid", {
+  enumerable: true,
+  get: function get() {
+    return _useDatagrid.default;
+  }
+});
+Object.defineProperty(exports, "useDisableSelectRows", {
+  enumerable: true,
+  get: function get() {
+    return _useDisableSelectRows.default;
+  }
+});
+Object.defineProperty(exports, "useExpandedRow", {
+  enumerable: true,
+  get: function get() {
+    return _useExpandedRow.default;
+  }
+});
+Object.defineProperty(exports, "useInfiniteScroll", {
+  enumerable: true,
+  get: function get() {
+    return _useInfiniteScroll.default;
+  }
+});
+Object.defineProperty(exports, "useNestedRows", {
+  enumerable: true,
+  get: function get() {
+    return _useNestedRows.default;
+  }
+});
+Object.defineProperty(exports, "useOnRowClick", {
+  enumerable: true,
+  get: function get() {
+    return _useOnRowClick.default;
+  }
+});
+Object.defineProperty(exports, "useRowIsMouseOver", {
+  enumerable: true,
+  get: function get() {
+    return _useRowIsMouseOver.default;
+  }
+});
+Object.defineProperty(exports, "useSelectAllWithToggle", {
+  enumerable: true,
+  get: function get() {
+    return _useSelectAllToggle.default;
+  }
+});
+Object.defineProperty(exports, "useSelectRows", {
+  enumerable: true,
+  get: function get() {
+    return _useSelectRows.default;
+  }
+});
+Object.defineProperty(exports, "useSortableColumns", {
+  enumerable: true,
+  get: function get() {
+    return _useSortableColumns.default;
+  }
+});
+Object.defineProperty(exports, "useStickyColumn", {
+  enumerable: true,
+  get: function get() {
+    return _useStickyColumn.default;
+  }
+});
+
+var _Datagrid = _interopRequireDefault(require("./Datagrid"));
+
+var _useDatagrid = _interopRequireDefault(require("./useDatagrid"));
+
+var _useInfiniteScroll = _interopRequireDefault(require("./useInfiniteScroll"));
+
+var _useNestedRows = _interopRequireDefault(require("./useNestedRows"));
+
+var _useSelectRows = _interopRequireDefault(require("./useSelectRows"));
+
+var _useExpandedRow = _interopRequireDefault(require("./useExpandedRow"));
+
+var _useOnRowClick = _interopRequireDefault(require("./useOnRowClick"));
+
+var _useSortableColumns = _interopRequireDefault(require("./useSortableColumns"));
+
+var _useRowIsMouseOver = _interopRequireDefault(require("./useRowIsMouseOver"));
+
+var _useColumnRightAlign = _interopRequireDefault(require("./useColumnRightAlign"));
+
+var _useDisableSelectRows = _interopRequireDefault(require("./useDisableSelectRows"));
+
+var _useStickyColumn = _interopRequireDefault(require("./useStickyColumn"));
+
+var _useActionsColumn = _interopRequireDefault(require("./useActionsColumn"));
+
+var _useCustomizeColumns = _interopRequireDefault(require("./useCustomizeColumns"));
+
+var _useSelectAllToggle = _interopRequireDefault(require("./useSelectAllToggle"));

package/lib/components/Datagrid/useActionsColumn.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _settings = require("../../settings");
+
+var _excluded = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var useActionsColumn = function useActionsColumn(hooks) {
+  var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
+    var rowActions = instance.rowActions,
+        isFetching = instance.isFetching;
+
+    if (rowActions && Array.isArray(rowActions)) {
+      var addActionsMenu = function addActionsMenu(props, cellData) {
+        var cell = cellData.cell;
+        var row = cell.row,
+            column = cell.column;
+
+        if (column.isAction) {
+          var _cx;
+
+          return [props, {
+            children: /*#__PURE__*/_react.default.createElement("div", {
+              className: "".concat(blockClass, "__actions-column-content")
+            }, isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.IconSkeleton, {
+              className: "".concat(blockClass, "__actions-column-loading")
+            }), !isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+              size: "sm",
+              light: true,
+              flipped: true,
+              onClick: function onClick(e) {
+                return e.stopPropagation();
+              }
+            }, rowActions.map(function (action) {
+              var id = action.id,
+                  _onClick = action.onClick,
+                  shouldHideMenuItem = action.shouldHideMenuItem,
+                  shouldDisableMenuItem = action.shouldDisableMenuItem,
+                  disabled = action.disabled,
+                  rest = (0, _objectWithoutProperties2.default)(action, _excluded);
+              var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row); // shouldDisableMenuItem will override disabled because it's more specific
+              // if shouldDisableMenuItem doesn't exists, fall back to disabled
+
+              var isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
+
+              if (hidden) {
+                return null;
+              }
+
+              return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, (0, _extends2.default)({}, rest, {
+                disabled: isDisabledByRow,
+                onClick: function onClick(e) {
+                  e.stopPropagation();
+
+                  _onClick(id, row, e);
+                },
+                key: id
+              }));
+            }))),
+            className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__cell"), true), _cx))
+          }];
+        }
+
+        return [props];
+      };
+
+      hooks.getCellProps.push(addActionsMenu);
+    }
+  };
+
+  hooks.useInstance.push(useAttachActionsOnInstance);
+};
+
+var _default = useActionsColumn;
+exports.default = _default;

package/lib/components/Datagrid/useColumnRightAlign.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../settings");
+
+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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var useColumnRightAlign = function useColumnRightAlign(hooks) {
+  var RightAlignRenderer = function RightAlignRenderer(tableProps, column) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(blockClass, "__right-align-cell-renderer"), {
+        sortDisabled: !tableProps.isTableSortable || tableProps.column.disableSortBy === true
+      })
+    }, column.Cell(tableProps));
+  };
+
+  var RightAlignHeader = function RightAlignHeader(headerProp, column) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__right-align-header")
+    }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
+  };
+
+  var rightAlignedColumns = function rightAlignedColumns(columns) {
+    var columnsWithDefaultCells = columns.map(function (column) {
+      return _objectSpread(_objectSpread({}, column), {}, {
+        Cell: column.rightAlignedColumn ? function (tableProp) {
+          return RightAlignRenderer(tableProp, column);
+        } : column.Cell,
+        Header: column.rightAlignedColumn ? function (headerProp) {
+          return RightAlignHeader(headerProp, column);
+        } : column.Header
+      });
+    });
+    return (0, _toConsumableArray2.default)(columnsWithDefaultCells);
+  };
+
+  hooks.visibleColumns.push(rightAlignedColumns);
+};
+
+var _default = useColumnRightAlign;
+exports.default = _default;