@carbon/ibm-products 2.0.0-rc.34 → 2.0.0-rc.38

package/lib/components/Datagrid/useStickyColumn.js

@@ -0,0 +1,188 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+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; } /*
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Licensed Materials - Property of IBM
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 5724-Q36
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * (c) Copyright IBM Corp. 2021
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * US Government Users Restricted Rights - Use, duplication or disclosure
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * restricted by GSA ADP Schedule Contract with IBM Corp.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
+var leftStickyStyleClassPrefix = "".concat(blockClass, "__left-sticky-column");
+var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
+var useStickyColumn = function useStickyColumn(hooks) {
+  var tableBodyRef = (0, _react.useRef)();
+  var stickyHeaderCellRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(window.innerWidth),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    function updateSize() {
+      setWindowSize(window.innerWidth);
+    }
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
+  hooks.getCellProps.push(changeProps.bind(null, 'cell', null, windowSize));
+  hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef, windowSize));
+  hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
+  hooks.getHeaderGroupProps.push(function (props) {
+    return [props, {
+      style: _objectSpread(_objectSpread({}, props.style), {}, {
+        minWidth: 'unset' // unset the min-width calculated by sum of all column min-width
+      })
+    }];
+  });
+
+  var useEventListener = function useEventListener(instance) {
+    (0, _react.useEffect)(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+      if (hasVertScroll(tableBodyElement) && headerCellElement) {
+        headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
+      }
+      var boundListener = (0, _debounce.default)(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
+      window.addEventListener('resize', boundListener);
+      return function () {
+        window.removeEventListener('resize', boundListener);
+      };
+    }, [instance.rows, instance.isFetching]);
+    (0, _react.useEffect)(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+      var listener = function listener(evt) {
+        toggleStickyShadow(evt.target, headerCellElement);
+      };
+      toggleStickyShadow(tableBodyElement, headerCellElement);
+      if (tableBodyElement) {
+        tableBodyElement.addEventListener('scroll', listener);
+      }
+      return function () {
+        if (tableBodyElement) {
+          tableBodyElement.removeEventListener('scroll', listener);
+        }
+      };
+    }, [instance.rows, instance.isFetching]);
+  };
+  var useCheckScroll = function useCheckScroll(instance) {
+    var tableBodyElement = tableBodyRef.current;
+    var headerCellElement = stickyHeaderCellRef.current;
+    (0, _react.useEffect)(function () {
+      onBodyResize(tableBodyElement, headerCellElement);
+    }, [instance.rows, headerCellElement, tableBodyElement]);
+  };
+  hooks.useInstance.push(useEventListener);
+  hooks.useInstance.push(useCheckScroll);
+  hooks.useInstance.push(function (instance) {
+    Object.assign(instance, {
+      withStickyColumn: true
+    });
+  });
+  hooks.useInstance.push(function (instance) {
+    // sticky column is defined by consumer
+    // it will always comes after the spacer which is defined by useFlexResize
+    // swap them here to use the spacer to push
+    // sticky column to the right when there are few
+    // columns defined
+    var newColumns = instance.visibleColumns;
+    var spacerIdx = newColumns.findIndex(function (col) {
+      return col.id === 'spacer';
+    });
+    var stickyIdx = newColumns.findIndex(function (col) {
+      return col.sticky === 'right';
+    });
+    if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
+      var temp = newColumns[spacerIdx];
+      newColumns[spacerIdx] = newColumns[stickyIdx];
+      newColumns[stickyIdx] = temp;
+    }
+    var newHeaders = instance.headers;
+    spacerIdx = newHeaders.findIndex(function (col) {
+      return col.id === 'spacer';
+    });
+    stickyIdx = newHeaders.findIndex(function (col) {
+      return col.sticky === 'right';
+    });
+    if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
+      var _temp = newHeaders[spacerIdx];
+      newHeaders[spacerIdx] = newHeaders[stickyIdx];
+      newHeaders[spacerIdx].canResize = false;
+      newHeaders[spacerIdx].disableResizing = true;
+      delete newHeaders[spacerIdx].getResizerProps;
+      newHeaders[stickyIdx] = _temp;
+    }
+  });
+};
+var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
+  return [props, {
+    ref: tableBodyRef
+  }];
+};
+var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
+  var column = data.column || data.cell.column;
+  if (column.sticky === 'right') {
+    var _cx;
+    return [props, _objectSpread({
+      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), false), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
+    }, headerCellRef && {
+      ref: headerCellRef
+    })];
+  }
+  if (column.sticky === 'left') {
+    var _data$instance, _cx2;
+    return [props, _objectSpread({
+      className: (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671), _cx2))
+    }, headerCellRef && {
+      ref: headerCellRef
+    })];
+  }
+  return [props];
+};
+var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
+  if (headerCellEle) {
+    if (hasVertScroll(tableBodyEle)) {
+      headerCellEle.classList.add(OFFSET_SCROLL_CLASS);
+    } else {
+      headerCellEle.classList.remove(OFFSET_SCROLL_CLASS);
+    }
+    toggleStickyShadow(tableBodyEle, headerCellEle);
+  }
+};
+var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
+  if (tableBodyEle && headerCellEle) {
+    var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
+    if (isScrolledToRight) {
+      headerCellEle.classList.add("".concat(blockClass, "__sticky-noShadow"));
+      tableBodyEle.classList.add("".concat(blockClass, "__sticky-column-noShadow"));
+    } else {
+      headerCellEle.classList.remove("".concat(blockClass, "__sticky-noShadow"));
+      tableBodyEle.classList.remove("".concat(blockClass, "__sticky-column-noShadow"));
+    }
+  }
+};
+var hasVertScroll = function hasVertScroll(element) {
+  if (!element) {
+    return false;
+  }
+  var scrollHeight = element.scrollHeight,
+    clientHeight = element.clientHeight;
+  return scrollHeight > clientHeight;
+};
+var _default = useStickyColumn;
+exports.default = _default;

package/lib/components/Datagrid/utils/DatagridActions.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatagridActions = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@carbon/react");
+var _icons = require("@carbon/react/icons");
+var _addonActions = require("@storybook/addon-actions");
+var _settings = require("../../../settings");
+var _ButtonMenu = require("../../ButtonMenu");
+var _Filtering = require("../Datagrid/addons/Filtering");
+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; }
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var DatagridActions = function DatagridActions(datagridState) {
+  var _useContext = (0, _react.useContext)(_Filtering.FilterContext),
+    setPanelOpen = _useContext.setPanelOpen;
+  var selectedFlatRows = datagridState.selectedFlatRows,
+    setGlobalFilter = datagridState.setGlobalFilter,
+    CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
+    RowSizeDropdown = datagridState.RowSizeDropdown,
+    rowSizeDropdownProps = datagridState.rowSizeDropdownProps,
+    useDenseHeader = datagridState.useDenseHeader,
+    filterProps = datagridState.filterProps,
+    getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
+    FilterFlyout = datagridState.FilterFlyout,
+    data = datagridState.data;
+  var downloadCsv = function downloadCsv() {
+    alert('Downloading...');
+  };
+  var refreshColumns = function refreshColumns() {
+    alert('refreshing...');
+  };
+  var searchForAColumn = 'Search';
+  var isNothingSelected = selectedFlatRows.length === 0;
+  var style = {
+    'button:nthChild(1) > span:nthChild(1)': {
+      bottom: '-37px'
+    }
+  };
+  var renderFilterFlyout = function renderFilterFlyout() {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react.default.createElement(FilterFlyout, getFilterFlyoutProps());
+  };
+  var renderFilterPanelButton = function renderFilterPanelButton() {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+      kind: "ghost",
+      hasIconOnly: true,
+      tooltipPosition: "bottom",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
+          size: 16
+        }, props));
+      },
+      iconDescription: filterProps.panelIconDescription,
+      className: "".concat(blockClass, "-filter-panel-open-button"),
+      onClick: function onClick() {
+        return setPanelOpen(function (open) {
+          return !open;
+        });
+      },
+      disabled: data.length === 0,
+      tooltipAlignment: "start"
+    });
+  };
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    modalOpen = _useState2[0],
+    setModalOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(window.innerWidth),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    size = _useState4[0],
+    setSize = _useState4[1];
+  (0, _react.useLayoutEffect)(function () {
+    function updateSize() {
+      setSize(window.innerWidth);
+    }
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
+  var mobileToolbar = size < 672 ? true : false;
+  var items = ['Option 1', 'Option 2', 'Option 3'];
+  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, {
+    size: "sm"
+  }, !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _icons.Download,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), renderFilterFlyout(), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+    style: style,
+    className: "".concat(blockClass, "__toolbar-divider")
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    renderIcon: _icons.Add,
+    iconDescription: 'Action'
+  }, "Ghost button"))) : /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    "aria-label": "Tools",
+    size: "md",
+    flipped: true
+  }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Filter",
+    hasDivider: true,
+    requireTitle: true,
+    onClick: function onClick() {
+      return setModalOpen(true);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Export",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Settings",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Import items",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Create",
+    hasDivider: true,
+    requireTitle: true
+  }))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _icons.Restart,
+    iconDescription: 'Refresh',
+    onClick: refreshColumns
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _icons.Download,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
+    label: "Primary button",
+    renderIcon: _icons.ChevronDown,
+    menuOptionsClass: "".concat(blockClass, "__toolbar-options")
+  }, /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+    itemText: "Option 1",
+    onClick: (0, _addonActions.action)("Click on ButtonMenu Option 1")
+  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+    itemText: "Option 2",
+    onClick: (0, _addonActions.action)("Click on ButtonMenu Option 2")
+  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+    itemText: "Option 3",
+    onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
+  }))) : /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    "aria-label": "Tools",
+    size: "lg",
+    flipped: true,
+    renderIcon: _icons.ChevronDown,
+    className: "".concat(blockClass, "__toolbar-menu__trigger"),
+    menuOptionsClass: "".concat(blockClass, "__toolbar-options")
+  }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Filter",
+    hasDivider: true,
+    requireTitle: true,
+    onClick: function onClick() {
+      return setModalOpen(true);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Export",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Settings",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Import items",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Create",
+    hasDivider: true,
+    requireTitle: true
+  })), modalOpen && /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, {
+    size: "lg",
+    open: modalOpen && modalOpen,
+    onClose: function onClose() {
+      return setModalOpen(false);
+    },
+    className: "".concat(blockClass, "__mobile-toolbar-modal")
+  }, /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, null, /*#__PURE__*/_react.default.createElement("h4", null, "Filters")), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter1"
+  }), /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter2"
+  }), /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter3"
+  })), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
+    primaryButtonText: "Apply",
+    secondaryButtonText: "Cancel"
+  }))));
+};
+exports.DatagridActions = DatagridActions;

package/lib/components/Datagrid/utils/DatagridPagination.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatagridPagination = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@carbon/react");
+/* eslint-disable react/prop-types */
+/**
+ * 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.
+ */
+
+var DatagridPagination = function DatagridPagination(_ref) {
+  var state = _ref.state,
+    setPageSize = _ref.setPageSize,
+    gotoPage = _ref.gotoPage,
+    rows = _ref.rows;
+  var updatePagination = function updatePagination(_ref2) {
+    var page = _ref2.page,
+      pageSize = _ref2.pageSize;
+    console.log(state);
+    setPageSize(pageSize);
+    gotoPage(page - 1); // Carbon is non-zero-based
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react2.Pagination, {
+    page: state.pageIndex + 1 // react-table is zero-based
+    ,
+    pageSize: state.pageSize,
+    pageSizes: state.pageSizes || [10, 20, 30, 40, 50],
+    totalItems: rows.length,
+    onChange: updatePagination
+  });
+};
+exports.DatagridPagination = DatagridPagination;

package/lib/components/Datagrid/utils/Wrapper.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+/* eslint-disable react/prop-types */
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+var Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100vh',
+      width: '100%',
+      padding: '1rem',
+      margin: '0',
+      zIndex: '0'
+    }
+  }, children);
+};
+exports.Wrapper = Wrapper;

package/lib/components/Datagrid/utils/getArgTypes.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARG_TYPES = void 0;
+/**
+ * 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.
+ */
+
+var ARG_TYPES = {
+  gridTitle: {
+    name: 'gridTitle',
+    control: 'text',
+    description: 'This sets the title text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  gridDescription: {
+    name: 'gridDescription',
+    control: 'text',
+    description: 'This sets the description text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateTitle: {
+    name: 'emptyStateTitle',
+    control: 'text',
+    description: 'This sets the empty state title text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateDescription: {
+    name: 'emptyStateDescription',
+    control: 'text',
+    description: 'This sets the empty state description text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateSize: {
+    control: 'select',
+    options: ['sm', 'lg']
+  },
+  useDenseHeader: {
+    control: {
+      type: 'radio'
+    },
+    options: [true, false],
+    description: 'This sets the dense header option for the Datagrid component. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowSize: {
+    control: 'select',
+    options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    description: 'This sets the height for each row of the Datagrid component. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowSizes: {
+    control: 'object',
+    description: 'This array of objects specifies the different row size options that will render from the settings icon in the table actions. _This value is set/passed inside of the `datagridState` object._'
+  },
+  onRowSizeChange: {
+    description: 'Callback function that is called on row size changes. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowActions: {
+    control: 'object',
+    description: 'This array of objects renders the action buttons for each row in the Datagrid. _This value is set/passed inside of the `datagridState` object._',
+    action: 'Row action onClick'
+  },
+  batchActions: {
+    control: {
+      type: 'radio'
+    },
+    options: [true, false],
+    description: 'This will allow the Datagrid component to use batch actions. _This value is set/passed inside of the `datagridState` object._'
+  },
+  expandedContentHeight: {
+    control: {
+      type: 'number'
+    },
+    description: 'This value controls the height of the expanded content area. _This value is set/passed inside of the `datagridState` object._'
+  },
+  customizeColumnsProps: {
+    control: 'object',
+    description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
+  },
+  filterProps: {
+    name: 'Filter props',
+    control: 'object',
+    description: 'This is an object for all the props passed into the filter flyout and filter panel'
+  }
+};
+exports.ARG_TYPES = ARG_TYPES;

package/lib/components/Datagrid/utils/getAutoSizedColumnWidth.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAutoSizedColumnWidth = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Calculates the auto sized width of a column
+ * @param {Array<object>} rows - The datagrid rows
+ * @param {string} accessor - The accessor for the column
+ * @param {string} headerText - The header text for the column
+ */
+
+var getAutoSizedColumnWidth = function getAutoSizedColumnWidth(rows, accessor, headerText) {
+  var maxWidth = 400;
+  var minWidth = 58;
+  var letterSpacing = 10;
+  var cellLength = Math.max.apply(Math, (0, _toConsumableArray2.default)(rows.map(function (row) {
+    return ("".concat(row[accessor]) || '').length;
+  })).concat([headerText.length]));
+  if (cellLength <= 3) {
+    return minWidth;
+  }
+  return Math.min(maxWidth, cellLength * letterSpacing + 16);
+};
+exports.getAutoSizedColumnWidth = getAutoSizedColumnWidth;