@carbon/ibm-products 1.13.0 → 1.14.0

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
+  }
+};

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

@@ -0,0 +1,6 @@
+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";
+export var story = {
+  parameters: {
+    notes: notes
+  }
+};

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

@@ -0,0 +1,6 @@
+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";
+export var story = {
+  parameters: {
+    notes: notes
+  }
+};