@carbon/ibm-products 2.0.0 → 2.1.0

package/es/components/Datagrid/useStickyColumn.js

@@ -0,0 +1,182 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+
+import { useEffect, useRef, useLayoutEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+var blockClass = "".concat(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 = useRef();
+  var stickyHeaderCellRef = useRef();
+  var _useState = useState(window.innerWidth),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  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) {
+    useEffect(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+      if (hasVertScroll(tableBodyElement) && headerCellElement) {
+        headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
+      }
+      var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
+      window.addEventListener('resize', boundListener);
+      return function () {
+        window.removeEventListener('resize', boundListener);
+      };
+    }, [instance.rows, instance.isFetching]);
+    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;
+    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: cx((_cx = {}, _defineProperty(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), false), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
+    }, headerCellRef && {
+      ref: headerCellRef
+    })];
+  }
+  if (column.sticky === 'left') {
+    var _data$instance, _cx2;
+    return [props, _objectSpread({
+      className: cx((_cx2 = {}, _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), _defineProperty(_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;
+};
+export default useStickyColumn;

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

@@ -0,0 +1,239 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * 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.
+ */
+
+import React, { useLayoutEffect, useState, useContext } from 'react';
+import { TableToolbarContent, TableToolbarSearch, Button, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
+import { Download, Add, Restart, ChevronDown, Filter } from '@carbon/react/icons';
+import { action } from '@storybook/addon-actions';
+import { pkg } from '../../../settings';
+import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
+import { FilterContext } from '../Datagrid/addons/Filtering';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var DatagridActions = function DatagridActions(datagridState) {
+  var _useContext = useContext(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.createElement(FilterFlyout, getFilterFlyoutProps());
+  };
+  var renderFilterPanelButton = function renderFilterPanelButton() {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      hasIconOnly: true,
+      tooltipPosition: "bottom",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/React.createElement(Filter, _extends({
+          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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalOpen = _useState2[0],
+    setModalOpen = _useState2[1];
+  var _useState3 = useState(window.innerWidth),
+    _useState4 = _slicedToArray(_useState3, 2),
+    size = _useState4[0],
+    setSize = _useState4[1];
+  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.createElement(TableToolbarContent, {
+    size: "sm"
+  }, !mobileToolbar ? /*#__PURE__*/React.createElement(React.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Download,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), renderFilterFlyout(), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: "".concat(blockClass, "__toolbar-divider")
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    renderIcon: Add,
+    iconDescription: 'Action'
+  }, "Ghost button"))) : /*#__PURE__*/React.createElement(OverflowMenu, {
+    "aria-label": "Tools",
+    size: "md",
+    flipped: true
+  }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Filter",
+    hasDivider: true,
+    requireTitle: true,
+    onClick: function onClick() {
+      return setModalOpen(true);
+    }
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Export",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Settings",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Import items",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Create",
+    hasDivider: true,
+    requireTitle: true
+  }))) : !mobileToolbar ? /*#__PURE__*/React.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement(TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), renderFilterFlyout(), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Restart,
+    iconDescription: 'Refresh',
+    onClick: refreshColumns
+  })), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Download,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement(ButtonMenu, {
+    label: "Primary button",
+    renderIcon: ChevronDown,
+    menuOptionsClass: "".concat(blockClass, "__toolbar-options")
+  }, /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 1",
+    onClick: action("Click on ButtonMenu Option 1")
+  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 2",
+    onClick: action("Click on ButtonMenu Option 2")
+  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 3",
+    onClick: action("Click on ButtonMenu Option 3")
+  }))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/React.createElement(TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), renderFilterFlyout(), /*#__PURE__*/React.createElement(OverflowMenu, {
+    "aria-label": "Tools",
+    size: "lg",
+    flipped: true,
+    renderIcon: ChevronDown,
+    className: "".concat(blockClass, "__toolbar-menu__trigger"),
+    menuOptionsClass: "".concat(blockClass, "__toolbar-options")
+  }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Filter",
+    hasDivider: true,
+    requireTitle: true,
+    onClick: function onClick() {
+      return setModalOpen(true);
+    }
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Export",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Settings",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Import items",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Create",
+    hasDivider: true,
+    requireTitle: true
+  })), modalOpen && /*#__PURE__*/React.createElement(ComposedModal, {
+    size: "lg",
+    open: modalOpen && modalOpen,
+    onClose: function onClose() {
+      return setModalOpen(false);
+    },
+    className: "".concat(blockClass, "__mobile-toolbar-modal")
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement("h4", null, "Filters")), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter1"
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter2"
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter3"
+  })), /*#__PURE__*/React.createElement(ModalFooter, {
+    primaryButtonText: "Apply",
+    secondaryButtonText: "Cancel"
+  }))));
+};

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

@@ -0,0 +1,32 @@
+/* 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.
+ */
+
+import React from 'react';
+import { Pagination } from '@carbon/react';
+export 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.createElement(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
+  });
+};

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

@@ -0,0 +1,21 @@
+/* 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.
+ */
+
+import React from 'react';
+export var Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100vh',
+      width: '100%',
+      padding: '1rem',
+      margin: '0',
+      zIndex: '0'
+    }
+  }, children);
+};

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

@@ -0,0 +1,95 @@
+/**
+ * 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.
+ */
+
+export 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'
+  }
+};

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

@@ -0,0 +1,27 @@
+import _toConsumableArray from "@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
+ */
+
+export var getAutoSizedColumnWidth = function getAutoSizedColumnWidth(rows, accessor, headerText) {
+  var maxWidth = 400;
+  var minWidth = 58;
+  var letterSpacing = 10;
+  var cellLength = Math.max.apply(Math, _toConsumableArray(rows.map(function (row) {
+    return ("".concat(row[accessor]) || '').length;
+  })).concat([headerText.length]));
+  if (cellLength <= 3) {
+    return minWidth;
+  }
+  return Math.min(maxWidth, cellLength * letterSpacing + 16);
+};