@carbon/ibm-products 1.12.0 → 1.15.0

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

@@ -0,0 +1,173 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _common = require("./common");
+
+var _Columns = _interopRequireDefault(require("./Columns"));
+
+var _Actions = _interopRequireDefault(require("./Actions"));
+
+var _settings = require("../../../../../settings");
+
+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; }
+
+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 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 = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      searchText = _useState2[0],
+      setSearchText = _useState2[1];
+
+  var _useState3 = (0, _react.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 = (0, _common.isColumnVisible)(defA);
+    var isVisibleB = (0, _common.isColumnVisible)(defB);
+
+    if (isVisibleA && !isVisibleB) {
+      return -1;
+    }
+
+    if (!isVisibleA && isVisibleB) {
+      return 1;
+    }
+
+    return 0;
+  })),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      columnObjects = _useState4[0],
+      _setColumnsObject = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_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.default.createElement(_carbonComponentsReact.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.default.createElement("div", {
+    className: "".concat(blockClass, "__customize-columns-instructions")
+  }, instructionsLabel), /*#__PURE__*/_react.default.createElement(_Actions.default, {
+    columns: columnObjects,
+    originalColumnDefinitions: originalColumnDefinitions,
+    searchText: searchText,
+    setColumnsObject: function setColumnsObject(cols) {
+      _setColumnsObject(cols);
+
+      setDirty();
+    },
+    setSearchText: setSearchText
+  }), isOpen && /*#__PURE__*/_react.default.createElement(_Columns.default, {
+    columns: columnObjects,
+    filterString: string,
+    onSelectColumn: onCheckboxCheck,
+    setColumnsObject: function setColumnsObject(cols) {
+      _setColumnsObject(cols);
+
+      setDirty();
+    }
+  }));
+};
+
+CustomizeColumnsModal.propTypes = {
+  columnDefinitions: _propTypes.default.array.isRequired,
+  customizeModalHeadingLabel: _propTypes.default.string,
+  instructionsLabel: _propTypes.default.string,
+  isOpen: _propTypes.default.bool.isRequired,
+  onSaveColumnPrefs: _propTypes.default.func.isRequired,
+  originalColumnDefinitions: _propTypes.default.array.isRequired,
+  primaryButtonTextLabel: _propTypes.default.string,
+  secondaryButtonTextLabel: _propTypes.default.string,
+  setIsModalOpen: _propTypes.default.func.isRequired
+};
+var _default = CustomizeColumnsModal;
+exports.default = _default;

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

@@ -0,0 +1,73 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _CustomizeColumnsModal = _interopRequireDefault(require("./CustomizeColumnsModal"));
+
+var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen"];
+
+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 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 = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
+
+  if (isModalOpen) {
+    return /*#__PURE__*/React.createElement(_CustomizeColumnsModal.default, (0, _extends2.default)({}, 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.default.object.isRequired
+};
+var _default = ModalWrapper;
+exports.default = _default;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isColumnVisible = void 0;
+
+var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
+
+// @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.
+ */
+var isColumnVisible = function isColumnVisible(colDef) {
+  return (0, _isBoolean.default)(colDef.isVisible) ? colDef.isVisible : true;
+};
+
+exports.isColumnVisible = isColumnVisible;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CustomizeColumnsModalWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _ModalWrapper.default;
+  }
+});
+Object.defineProperty(exports, "ToggleButtonWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _ButtonWrapper.default;
+  }
+});
+
+var _ModalWrapper = _interopRequireDefault(require("./ModalWrapper"));
+
+var _ButtonWrapper = _interopRequireDefault(require("./ButtonWrapper"));

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

@@ -0,0 +1,80 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _RowSizeRadioGroup = _interopRequireDefault(require("./RowSizeRadioGroup"));
+
+var _settings = require("../../../../../settings");
+
+var _excluded = ["buttonLabel"];
+
+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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var RowSizeDropdown = function RowSizeDropdown(_ref) {
+  var _ref$buttonLabel = _ref.buttonLabel,
+      buttonLabel = _ref$buttonLabel === void 0 ? 'Row height' : _ref$buttonLabel,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var buttonRef = React.useRef({});
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_carbonComponentsReact.Button, {
+    hasIconOnly: true,
+    ref: buttonRef,
+    kind: "ghost",
+    tooltipPosition: "left",
+    renderIcon: _iconsReact.Settings16,
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    },
+    iconDescription: buttonLabel,
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+  }), isOpen && /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
+    buttonRef: buttonRef,
+    hideRadioGroup: function hideRadioGroup() {
+      setIsOpen(false);
+    }
+  })));
+};
+
+RowSizeDropdown.propTypes = {
+  buttonLabel: _propTypes.default.string,
+  datagridName: _propTypes.default.string.isRequired,
+  light: _propTypes.default.bool.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  selectedOption: _propTypes.default.string.isRequired
+};
+var _default = RowSizeDropdown;
+exports.default = _default;

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

@@ -0,0 +1,160 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
+
+var _settings = require("../../../../../settings");
+
+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; }
+
+/* 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.
+ */
+var blockClass = "".concat(_settings.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;
+
+  (0, _react.useEffect)(function () {
+    window.addEventListener('click', hideRadioGroup);
+    return function () {
+      window.removeEventListener('click', hideRadioGroup);
+    };
+  }, [hideRadioGroup]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__row-size-dropdown"),
+    style: {
+      top: top,
+      right: right
+    },
+    role: "presentation",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, {
+    legendText: legendText,
+    name: "row-height-group",
+    orientation: "vertical",
+    defaultSelected: getBackwardCompatibleRowSize(selectedOption),
+    onChange: onChange
+  }, rowSizes && (0, _isArray.default)(rowSizes) && rowSizes.map(function (option) {
+    var labelText;
+
+    try {
+      labelText = option.labelText || rowSizeLabels[option.value];
+    } catch (e) {
+      labelText = option.value;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.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.default.any.isRequired,
+  datagridName: _propTypes.default.string.isRequired,
+  hideRadioGroup: _propTypes.default.func.isRequired,
+  legendText: _propTypes.default.string,
+  onChange: _propTypes.default.func.isRequired,
+  rowSizeLabels: _propTypes.default.object,
+  rowSizes: _propTypes.default.array.isRequired,
+  selectedOption: _propTypes.default.string.isRequired
+};
+var _default = RowSizeRadioGroup;
+exports.default = _default;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RowSizeDropdown", {
+  enumerable: true,
+  get: function get() {
+    return _RowSizeDropdown.default;
+  }
+});
+
+var _RowSizeDropdown = _interopRequireDefault(require("./RowSizeDropdown"));

package/lib/components/Datagrid/Datagrid/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.default;
+  }
+});
+
+var _Datagrid = _interopRequireDefault(require("./Datagrid"));

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.story = void 0;
+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";
+var story = {
+  parameters: {
+    notes: notes
+  }
+};
+exports.story = story;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.story = void 0;
+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";
+var story = {
+  parameters: {
+    notes: notes
+  }
+};
+exports.story = story;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.story = void 0;
+var notes = "\n# Changing row size (height/density)\nAllow users to adjust the data density on datagrid.\n\n## Documentation:\n\n- (optional) Define initial row size by `datagridOptions.rowSize`.\n  - Default value is `md`.\n  - Supported values are `xl`, `lg`, `md`, `sm`, `xs` same as size prop on carbon component react `DataTable`.\n- (optional) Provide list of allowed sizes use `datagridOptions.rowSizes`\n  - Default list is\n    ```\n      [{ value: 'lg'}, { value: 'md'}, {value: 'sm'}, {value: 'xs'}]\n    ```\n  - Provide `labelText` in each option if not satisfied with the default labels.\n- (optional) Use `RowSizeDropdown` component to change row size:\n  - (required) Implement `datagridOptions.DatagridActions` component\n    - The component will have props: `datagridState`\n    - Render `datagridState.RowSizeDropdown` component in `datagridOptions.DatagridActions`.\n      - Pass `datagridState.rowSizeDropdownProps` as props\n      - No extra logic is needed.\n  - (optional) Preserve row size, use `datagridOptions.onRowSizeChange`\n    - type: `Function(rowSize: String) => void`\n    - It's a callback function when different row size option is selected on the dropdown.\n- (optional) Use other component to change row size:\n  - Wire the variable controlled by the component with `datagridOptions.rowSize = variable`\n- (optional) Render different content in the cell on different `rowSize`\n  - `Cell` renderer of each column will receive `datagridState` which will contain `rowSize`. Render different content based on this value.\n\ncode snippet:\n\n```js\nconst columns = React.useMemo(() => [ ...defaultHeader.slice(0, 3),\n  {\n    Header: 'Different cell content',\n    id: 'rowSizeDemo-cell',\n    disableSortBy: true,\n    Cell: ({ rowSize }) => rowSize,\n  }\n], []);\nconst [data] = useState(makeData(10));\nconst DatagridActions = (datagridState) => (\n  <TableToolbarContent>\n    <TableToolbarSearch ... />\n    <Button ... />\n    <datagridState.RowSizeDropdown {...datagridState.rowSizeDropdownProps} />\n  </TableToolbarContent>\n)\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    rowSize: 'xs',\n    rowSizes: [\n      {\n        value: 'lg',\n        labelText: 'Super tall row',\n      },\n      {\n        value: 'md',\n      },\n      {\n        value: 'xs',\n        labelText: 'Teeny tiny row',\n      },\n    ],\n    onRowSizeChange: (rowSize) => {\n      console.log(rowSize);\n    },\n    DatagridActions,\n  },\n);\n\nreturn (\n  <Wrapper>\n    <IntlProvider locale=\"en\">\n      <Datagrid {...datagridState} />\n    </IntlProvider>\n  </Wrapper>\n);\n```\n";
+var story = {
+  parameters: {
+    notes: notes
+  }
+};
+exports.story = story;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.story = void 0;
+var notes = "\n# Select all toggle\nUse this feature will allow user to toggle the select all checkbox behavior between selecting all rows **on current page** vs **across all pages**\n<br/>\nIt's using [react-table API](https://react-table.tanstack.com/docs/api/useRowSelect#instance-properties) to select all rows.\n\n## Terminology\n- Pagination\n  - **UI side pagination**: all rows are loaded to browser, but only display subset of them.\n  - **Server side pagination**: subset of rows are loaded to browser, going to another page requires another network call\n- Selection mode\n  - **all rows**: selects all rows across pages.\n  - **all page rows**: selects all rows on the current page.\n\n## Compatibility with other plugin hooks and options\n- It has to be used with `useSelectRows` hook.\n- Select all toggle will not be enabled if `options.DatagridPagination` is not defined (select all is the same without pagination)\n- Compatible with `options.DatagridBatchActions`\n- Obviously it will not work when select-all is hidden by `options.hideSelectAll`.\n- Not compatible with `useInfiniteScroll`. Pull request welcome!\n\n## Sample usage:\n- (required) `useSelectRows` - enable row selections with select all on header\n- (required) `useSelectAllToggle` - enable select all toggle.\n- (optional) config the label on toggle menu:\n  - (optional) `options.selectAllToggle.labels.allRows` for label that selects all rows across all pages\n  - (optional) `options.selectAllToggle.labels.allPageRows` for label that selects all rows on current page\n- (optional) `options.selectAllToggle.onSelectAllRows`\n  - type: `Function(areAllRowsSelected: Boolean) => void`\n  - callback when `instance.isAllRowsSelected` value changes. Check out doc: [instance property](https://react-table.tanstack.com/docs/api/useRowSelect#instance-properties)\n    - `true`: when selection mode is **all rows** and user selects all via toggle dropdown 'Select all' or toggle 'on' on the select all checkbox.\n  - useful when grid is server side paginated (only a subset of rows are loaded in UI)\n\n```js\nconst columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(100));\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      initialState: {\n        pageSize: 10,\n        pageSizes: [5,10,25,50]\n      },\n      selectAllToggle: {\n        labels: {\n          allRows: \"Select all randomly generated rows\",\n        },\n        onSelectAllRows: (areAllSelected) => console.log('are all selected: ', areAllSelected),\n      },\n      DatagridPagination,\n      DatagridActions,\n      DatagridBatchActions,\n    },\n    useSelectRows,\n    useSelectAllToggle,\n  );\n\n  return (\n    <Wrapper>\n      <Datagrid {...datagridState} />\n    </Wrapper>\n);\n```\n\n";
+var story = {
+  parameters: {
+    notes: notes
+  }
+};
+exports.story = story;