@carbon/ibm-products 1.13.0 → 1.16.0

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"];
+// @flow
+
+/*
+ * 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 * as React from 'react';
+import PropTypes from 'prop-types';
+import { Column16 } from '@carbon/icons-react';
+import { Button } from 'carbon-components-react';
+import { pkg } from '../../../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var ButtonWrapper = function ButtonWrapper(_ref) {
+  var _onClick = _ref.onClick,
+      setIsModalOpen = _ref.setIsModalOpen,
+      isModalOpen = _ref.isModalOpen,
+      _ref$iconTooltipLabel = _ref.iconTooltipLabel,
+      iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+    renderIcon: Column16,
+    iconDescription: iconTooltipLabel,
+    tooltipPosition: "left",
+    kind: "ghost",
+    hasIconOnly: true,
+    "test-id": "".concat(blockClass, "__customize-columns-trigger"),
+    onClick: function onClick() {
+      setIsModalOpen(!isModalOpen);
+
+      if (typeof _onClick === 'function') {
+        _onClick();
+      }
+    }
+  }));
+};
+
+ButtonWrapper.propTypes = {
+  iconTooltipLabel: PropTypes.string,
+  isModalOpen: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  setIsModalOpen: PropTypes.func.isRequired
+};
+export default ButtonWrapper;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -0,0 +1,140 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+// @flow
+
+/*
+ * 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 * as React from 'react';
+import PropTypes from 'prop-types';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { Checkbox } from 'carbon-components-react';
+import update from 'immutability-helper';
+import { pkg } from '../../../../../settings';
+import DraggableElement from '../../DraggableElement';
+import { isColumnVisible } from './common';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var getNextIndex = function getNextIndex(array, currentIndex, key) {
+  var newIndex = -1;
+
+  if (key === 'ArrowUp') {
+    newIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : array.length - 1;
+  }
+
+  if (key === 'ArrowDown') {
+    newIndex = currentIndex + 1 < array.length ? currentIndex + 1 : 0;
+  }
+
+  return newIndex;
+};
+
+var Columns = function Columns(_ref) {
+  var filterString = _ref.filterString,
+      columns = _ref.columns,
+      setColumnsObject = _ref.setColumnsObject,
+      onSelectColumn = _ref.onSelectColumn,
+      _ref$instructionsLabe = _ref.instructionsLabel,
+      instructionsLabel = _ref$instructionsLabe === void 0 ? 'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.' : _ref$instructionsLabe,
+      _ref$disabledInstruct = _ref.disabledInstructionsLabel,
+      disabledInstructionsLabel = _ref$disabledInstruct === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$disabledInstruct;
+
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      ariaRegionText = _React$useState2[0],
+      setAriaRegionText = _React$useState2[1];
+
+  var _React$useState3 = React.useState(-1),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      focusIndex = _React$useState4[0],
+      setFocusIndex = _React$useState4[1];
+
+  var moveElement = React.useCallback(function (dragIndex, hoverIndex) {
+    var dragCard = columns[dragIndex];
+    setColumnsObject(update(columns, {
+      $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
+    }));
+  }, [columns, setColumnsObject]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__customize-columns-column-list")
+  }, /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, /*#__PURE__*/React.createElement("ol", {
+    className: "".concat(blockClass, "__customize-columns-column-list--focus"),
+    role: "listbox",
+    "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
+    onKeyDown: function onKeyDown(e) {
+      var nextIndex = getNextIndex(columns, focusIndex, e.key);
+
+      if (nextIndex >= 0) {
+        setFocusIndex(nextIndex);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    tabIndex: 0,
+    onFocus: function onFocus(e) {
+      if (e.target === e.currentTarget) {
+        setFocusIndex(0);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-live": "assertive",
+    className: "".concat(blockClass, "__shared-ui--assistive-text")
+  }, ariaRegionText), /*#__PURE__*/React.createElement("span", {
+    id: "".concat(blockClass, "__customize-columns--instructions"),
+    className: "".concat(blockClass, "__shared-ui--assistive-text")
+  }, filterString.length === 0 ? instructionsLabel : disabledInstructionsLabel), columns.filter(function (colDef) {
+    return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
+  }).map(function (colDef, i) {
+    return /*#__PURE__*/React.createElement(DraggableElement, {
+      key: colDef.id,
+      index: i,
+      listData: columns,
+      setListData: setColumnsObject,
+      id: "dnd-datagrid-columns-".concat(colDef.id),
+      type: "column-customization",
+      disabled: filterString.length > 0,
+      ariaLabel: colDef.Header.props.title,
+      onGrab: setAriaRegionText,
+      isFocused: focusIndex === i,
+      moveElement: moveElement,
+      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
+        if (isGrabbed) {
+          var nextIndex = getNextIndex(columns, currentIndex, e.key);
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (nextIndex >= 0) {
+            setFocusIndex(nextIndex);
+            moveElement(currentIndex, nextIndex);
+            e.target.scrollIntoView({
+              block: 'center'
+            });
+          }
+        }
+      }
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox"),
+      checked: isColumnVisible(colDef),
+      onChange: onSelectColumn.bind(null, colDef),
+      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      labelText: colDef.Header.props.title,
+      title: colDef.Header.props.title
+    }));
+  }))));
+};
+
+Columns.propTypes = {
+  columns: PropTypes.array.isRequired,
+  disabledInstructionsLabel: PropTypes.string,
+  filterString: PropTypes.string.isRequired,
+  instructionsLabel: PropTypes.string,
+  onSelectColumn: PropTypes.func.isRequired,
+  setColumnsObject: PropTypes.func.isRequired
+};
+export default Columns;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js

@@ -0,0 +1,157 @@
+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.
+ */
+// @flow
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'carbon-components-react';
+import { isColumnVisible } from './common';
+import Columns from './Columns';
+import Actions from './Actions';
+import { pkg } from '../../../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
+  var isOpen = _ref.isOpen,
+      setIsModalOpen = _ref.setIsModalOpen,
+      onSaveColumnPrefs = _ref.onSaveColumnPrefs,
+      columnDefinitions = _ref.columnDefinitions,
+      originalColumnDefinitions = _ref.originalColumnDefinitions,
+      _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
+      customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize display' : _ref$customizeModalHe,
+      _ref$primaryButtonTex = _ref.primaryButtonTextLabel,
+      primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
+      _ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
+      secondaryButtonTextLabel = _ref$secondaryButtonT === void 0 ? 'Cancel' : _ref$secondaryButtonT,
+      _ref$instructionsLabe = _ref.instructionsLabel,
+      instructionsLabel = _ref$instructionsLabe === void 0 ? 'Deselect columns to hide them. Click and drag the white box to reorder the columns. These specifications will be saved and persist if you leave and return to the data table.' : _ref$instructionsLabe;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchText = _useState2[0],
+      setSearchText = _useState2[1];
+
+  var _useState3 = useState(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
+  .filter(function (colDef) {
+    return !!colDef.Header.props;
+  }) // only sort the hidden column to the end when modal reopen
+  .sort(function (defA, defB) {
+    var isVisibleA = isColumnVisible(defA);
+    var isVisibleB = isColumnVisible(defB);
+
+    if (isVisibleA && !isVisibleB) {
+      return -1;
+    }
+
+    if (!isVisibleA && isVisibleB) {
+      return 1;
+    }
+
+    return 0;
+  })),
+      _useState4 = _slicedToArray(_useState3, 2),
+      columnObjects = _useState4[0],
+      _setColumnsObject = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isDirty = _useState6[0],
+      setIsDirty = _useState6[1];
+
+  var onRequestClose = function onRequestClose() {
+    setIsModalOpen(false);
+  };
+
+  var onRequestSubmit = function onRequestSubmit() {
+    setIsModalOpen(false);
+    var updatedColumns = columnObjects.map(function (colDef) {
+      return {
+        id: colDef.id,
+        isVisible: colDef.isVisible
+      };
+    });
+    onSaveColumnPrefs(updatedColumns);
+  };
+
+  var onCheckboxCheck = function onCheckboxCheck(col, value) {
+    var changedDefinitions = columnObjects.map(function (definition) {
+      if (definition.id === col.id) {
+        return _objectSpread(_objectSpread({}, definition), {}, {
+          isVisible: value
+        });
+      }
+
+      return definition;
+    });
+
+    _setColumnsObject(changedDefinitions);
+
+    setDirty();
+  };
+
+  var setDirty = function setDirty() {
+    if (!isDirty) {
+      setIsDirty(true);
+    }
+  };
+
+  var string = searchText.trim().toLowerCase();
+  return /*#__PURE__*/React.createElement(Modal, {
+    className: "".concat(blockClass, "__customize-columns-modal"),
+    open: isOpen,
+    modalHeading: customizeModalHeadingLabel,
+    primaryButtonText: primaryButtonTextLabel,
+    secondaryButtonText: secondaryButtonTextLabel,
+    selectorPrimaryFocus: ".".concat(blockClass, "__customize-columns-column-list--focus"),
+    primaryButtonDisabled: !isDirty,
+    onRequestClose: onRequestClose,
+    onRequestSubmit: onRequestSubmit,
+    size: "sm",
+    hasForm: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__customize-columns-instructions")
+  }, instructionsLabel), /*#__PURE__*/React.createElement(Actions, {
+    columns: columnObjects,
+    originalColumnDefinitions: originalColumnDefinitions,
+    searchText: searchText,
+    setColumnsObject: function setColumnsObject(cols) {
+      _setColumnsObject(cols);
+
+      setDirty();
+    },
+    setSearchText: setSearchText
+  }), isOpen && /*#__PURE__*/React.createElement(Columns, {
+    columns: columnObjects,
+    filterString: string,
+    onSelectColumn: onCheckboxCheck,
+    setColumnsObject: function setColumnsObject(cols) {
+      _setColumnsObject(cols);
+
+      setDirty();
+    }
+  }));
+};
+
+CustomizeColumnsModal.propTypes = {
+  columnDefinitions: PropTypes.array.isRequired,
+  customizeModalHeadingLabel: PropTypes.string,
+  instructionsLabel: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  onSaveColumnPrefs: PropTypes.func.isRequired,
+  originalColumnDefinitions: PropTypes.array.isRequired,
+  primaryButtonTextLabel: PropTypes.string,
+  secondaryButtonTextLabel: PropTypes.string,
+  setIsModalOpen: PropTypes.func.isRequired
+};
+export default CustomizeColumnsModal;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen"];
+// @flow
+
+/*
+ * 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 * as React from 'react';
+import PropTypes from 'prop-types';
+import CustomizeColumnsModal from './CustomizeColumnsModal';
+
+var ModalWrapper = function ModalWrapper(_ref) {
+  var instance = _ref.instance;
+
+  var _instance$customizeCo = instance.customizeColumnsProps,
+      _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
+      isModalOpen = _instance$customizeCo.isModalOpen,
+      setIsModalOpen = _instance$customizeCo.setIsModalOpen,
+      rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
+
+  if (isModalOpen) {
+    return /*#__PURE__*/React.createElement(CustomizeColumnsModal, _extends({}, rest, {
+      isOpen: isModalOpen,
+      setIsModalOpen: setIsModalOpen,
+      columnDefinitions: instance.allColumns,
+      originalColumnDefinitions: instance.columns,
+      onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
+        var hiddenIds = updatedColDefs.filter(function (colDef) {
+          return !colDef.isVisible;
+        }).map(function (colDef) {
+          return colDef.id;
+        });
+        instance.setHiddenColumns(hiddenIds);
+
+        if (typeof instance.setColumnOrder === 'function') {
+          instance.setColumnOrder(updatedColDefs.map(function (colDef) {
+            return colDef.id;
+          }));
+        } else {
+          // eslint-disable-next-line no-console
+          console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
+        }
+
+        if (typeof _onSaveColumnPrefs === 'function') {
+          _onSaveColumnPrefs(updatedColDefs);
+        }
+      }
+    }));
+  }
+
+  return null;
+};
+
+ModalWrapper.propTypes = {
+  instance: PropTypes.object.isRequired
+};
+export default ModalWrapper;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js

@@ -0,0 +1,13 @@
+// @flow
+
+/*
+ * 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 isBoolean from 'lodash/isBoolean';
+export var isColumnVisible = function isColumnVisible(colDef) {
+  return isBoolean(colDef.isVisible) ? colDef.isVisible : true;
+};

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+export { default as CustomizeColumnsModalWrapper } from './ModalWrapper';
+export { default as ToggleButtonWrapper } from './ButtonWrapper';

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

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["buttonLabel"];
+// @flow
+
+/*
+ * 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 * as React from 'react';
+import PropTypes from 'prop-types';
+import { Settings16 } from '@carbon/icons-react';
+import { Button } from 'carbon-components-react';
+import cx from 'classnames';
+import RowSizeRadioGroup from './RowSizeRadioGroup';
+import { pkg } from '../../../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var RowSizeDropdown = function RowSizeDropdown(_ref) {
+  var _ref$buttonLabel = _ref.buttonLabel,
+      buttonLabel = _ref$buttonLabel === void 0 ? 'Row height' : _ref$buttonLabel,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var buttonRef = React.useRef({});
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    hasIconOnly: true,
+    ref: buttonRef,
+    kind: "ghost",
+    tooltipPosition: "left",
+    renderIcon: Settings16,
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    },
+    iconDescription: buttonLabel,
+    className: cx(_defineProperty({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+  }), isOpen && /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {
+    buttonRef: buttonRef,
+    hideRadioGroup: function hideRadioGroup() {
+      setIsOpen(false);
+    }
+  })));
+};
+
+RowSizeDropdown.propTypes = {
+  buttonLabel: PropTypes.string,
+  datagridName: PropTypes.string.isRequired,
+  light: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  selectedOption: PropTypes.string.isRequired
+};
+export default RowSizeDropdown;

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

@@ -0,0 +1,139 @@
+/* eslint-disable react/default-props-match-prop-types */
+// @flow
+
+/*
+ * 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 React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { RadioButtonGroup, RadioButton } from 'carbon-components-react';
+import isArray from 'lodash/isArray';
+import { pkg } from '../../../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
+  var rowSizes = _ref.rowSizes,
+      selectedOption = _ref.selectedOption,
+      datagridName = _ref.datagridName,
+      buttonRef = _ref.buttonRef,
+      onChange = _ref.onChange,
+      hideRadioGroup = _ref.hideRadioGroup,
+      _ref$legendText = _ref.legendText,
+      legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
+      _ref$rowSizeLabels = _ref.rowSizeLabels,
+      rowSizeLabels = _ref$rowSizeLabels === void 0 ? {
+    xl: 'Extra large',
+    lg: 'Large (default)',
+    md: 'Medium',
+    sm: 'Small',
+    xs: 'Extra small'
+  } : _ref$rowSizeLabels;
+
+  var _getDropdownPosition = getDropdownPosition(buttonRef.current),
+      top = _getDropdownPosition.top,
+      right = _getDropdownPosition.right;
+
+  useEffect(function () {
+    window.addEventListener('click', hideRadioGroup);
+    return function () {
+      window.removeEventListener('click', hideRadioGroup);
+    };
+  }, [hideRadioGroup]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__row-size-dropdown"),
+    style: {
+      top: top,
+      right: right
+    },
+    role: "presentation",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(RadioButtonGroup, {
+    legendText: legendText,
+    name: "row-height-group",
+    orientation: "vertical",
+    defaultSelected: getBackwardCompatibleRowSize(selectedOption),
+    onChange: onChange
+  }, rowSizes && isArray(rowSizes) && rowSizes.map(function (option) {
+    var labelText;
+
+    try {
+      labelText = option.labelText || rowSizeLabels[option.value];
+    } catch (e) {
+      labelText = option.value;
+    }
+
+    return /*#__PURE__*/React.createElement(RadioButton, {
+      key: option.value,
+      labelText: labelText,
+      value: option.value,
+      id: "".concat(datagridName || 'datagrid', "--row-density--").concat(option.value)
+    });
+  })));
+};
+
+var getBackwardCompatibleRowSize = function getBackwardCompatibleRowSize(rowSize) {
+  // TODO: deprecate this function in next major release (v8) on carbon-components-react
+  var rowSizeMap = {
+    tall: 'xl',
+    normal: 'lg',
+    short: 'sm',
+    compact: 'xs' // md is a new value
+
+  };
+  return rowSizeMap[rowSize] || rowSize;
+};
+
+var getDropdownPosition = function getDropdownPosition(buttonEle) {
+  var parent = buttonEle.parentElement;
+
+  if (parent instanceof HTMLElement) {
+    var top = buttonEle.offsetTop + buttonEle.offsetHeight;
+    var right = parent.offsetWidth - parent.offsetLeft - (buttonEle.offsetLeft + buttonEle.offsetWidth);
+    return {
+      top: top,
+      right: right
+    };
+  }
+
+  return {
+    top: 0,
+    right: 0
+  };
+};
+
+RowSizeRadioGroup.defaultProps = {
+  rowSizes: [{
+    value: 'xl' // 64
+
+  }, {
+    value: 'lg' // 48
+
+  }, {
+    value: 'md' // 40
+
+  }, {
+    value: 'sm' // 32
+
+  }, {
+    value: 'xs' // 24
+
+  }],
+  selectedOption: 'lg'
+};
+RowSizeRadioGroup.propTypes = {
+  buttonRef: PropTypes.any.isRequired,
+  datagridName: PropTypes.string.isRequired,
+  hideRadioGroup: PropTypes.func.isRequired,
+  legendText: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  rowSizeLabels: PropTypes.object,
+  rowSizes: PropTypes.array.isRequired,
+  selectedOption: PropTypes.string.isRequired
+};
+export default RowSizeRadioGroup;

package/es/components/Datagrid/Datagrid/addons/RowSize/index.js

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+export { default as RowSizeDropdown } from './RowSizeDropdown';

package/es/components/Datagrid/Datagrid/index.js

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+export { default } from './Datagrid';

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

@@ -0,0 +1,6 @@
+var notes = "\n  # Customizing columns\n  Customizing columns allows user to reorder and hide certain columns of the datagrid. Consuming component can use the provided callback to save/update according to their persistent strategy.\n\n  ## Documentation:\n\n  - (required) Add following plugins to `useDatagrid` hook\n    - `useCustomizeColumns`\n    - `useColumnOrder`\n  - (required) Implement `options.DatagridActions` component\n    - this component will have props: `datagridState`\n    - render `datagridState.CustomizeColumnsButton` component wherever makes sense.\n    - `CustomizeColumnsButton` props can be overridden. Available props: [carbon-components-react doc](https://react.carbondesignsystem.com/?path=/docs/components-button--default)\n  - (optional) Preserve and apply the user preference\n    - `options.initialState.hiddenColumns: Array<ColumnId: String>`\n      - Array of column ids that will be hidden after initial render\n      - [react-table doc](https://react-table.tanstack.com/docs/api/useTable#table-options)\n    - `options.initialState.columnOrder: Array<ColumnId: String>`\n      - Order of the columns. Any column ids not in this array will be ordered by their position in the `options.columns`\n      - [react-table doc](https://react-table.tanstack.com/docs/api/useColumnOrder#table-options)\n    - `options.customizeColumnsProps.onSaveColumnPrefs`\n      - type: `Function(Columns: Array<{ColumnId: String, isVisible: Boolean}>) => void`\n      - It's a callback function when 'Save' button clicked on the modal. It allows consumer to preserve the updated column preference. This output can also be used to compute the `hiddenColumns` and `columnOrder`\n  - (optional) Reset to default\n    - There is a reset to default button on the modal. It will use the `options.columns` as the default. If there are columns should be hidden by default, denote them with property: `isVisible: false` (undefined will be treated as `true`)\n\n  code snippet:\n\n  ```js\n  const columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(10));\n  const DatagridActions = (datagridState) => (\n    <TableToolbarContent>\n      <TableToolbarSearch ... />\n      <Button ... />\n      <datagridState.CustomizeColumnsButton />\n    </TableToolbarContent>\n  )\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      initialState: {\n        hiddenColumns: ['age'],\n        columnOrder: [],\n      },\n      customizeColumnsProps: {\n        onSaveColumnPrefs: (newColDefs) => {\n          console.log(newColDefs);\n        },\n      },\n      DatagridActions,\n    },\n    useCustomizeColumns,\n    useColumnOrder,\n  );\n\n  return (\n    <Wrapper>\n      <IntlProvider locale=\"en\">\n        <Datagrid {...datagridState} />\n        <div>\n          Hidden column ids: \n          <pre>{JSON.stringify(datagridState.state.hiddenColumns, null, 2)}</pre>\n        </div>\n      </IntlProvider>\n    </Wrapper>\n  );\n  ```\n";
+export var story = {
+  parameters: {
+    notes: notes
+  }
+};

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

@@ -0,0 +1,6 @@
+var notes = "\n# Access left side panel in data grid\nAllow users to access left panel in datagrid.\n\n## Documentation:\n\n- (required) Implement `options.leftPanel` which has the following props\n  - `options.leftPanel.isOpen` value is toggled by the Button onClick from DatagridActions\n  - render `options.leftPanel.panelContent` inside the panel container of data grid when isOpen is true\n\ncode snippet:\n\n```js\nconst columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(10));\n  const [isPanelOpen, setIsPanelOpen] = useState(false);\n  const DatagridActions = (datagridState) => (\n    <TableToolbarContent>\n      <Button onClick={() => { setIsPanelOpen(!isPanelOpen); }}>Click to toggle left panel</Button>\n      <TableToolbarSearch ... />\n      <Button ... />\n      <datagridState.CustomizeColumnsButton />\n    </TableToolbarContent>\n  )\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      leftPanel: {\n        isOpen: isPanelOpen,\n        panelContent: <div>Panel content will go here along with any button interactions</div>,\n      },\n      initialState: {\n        hiddenColumns: ['age'],\n        columnOrder: [],\n      },\n      customizeColumnsProps: {\n        onSaveColumnPrefs: (newColDefs) => {\n          console.log(newColDefs);\n        },\n      },\n      DatagridActions,\n    },\n  );\n\nreturn (\n  <Wrapper>\n    <IntlProvider locale=\"en\">\n      <Datagrid {...datagridState} />\n    </IntlProvider>\n  </Wrapper>\n);\n```\n";
+export var story = {
+  parameters: {
+    notes: notes
+  }
+};