@carbon/ibm-products 1.13.0 → 1.14.0

package/lib/components/Datagrid/useSortableColumns.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _iconsReact = require("@carbon/icons-react");
+
+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 ordering = {
+  ASC: 'ASC',
+  DESC: 'DESC',
+  NONE: 'NONE'
+};
+
+var useSortableColumns = function useSortableColumns(hooks) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
+    var instance = _ref.instance;
+    var onSort = instance.onSort;
+
+    var onSortClick = function onSortClick(column) {
+      var key = column.id;
+      var sortDesc = column.isSortedDesc;
+
+      var _getNewSortOrder = getNewSortOrder(sortDesc),
+          newSortDesc = _getNewSortOrder.newSortDesc,
+          newOrder = _getNewSortOrder.newOrder;
+
+      if (onSort) {
+        onSort(key, newOrder);
+      }
+
+      instance.toggleSortBy(key, newSortDesc, false);
+    };
+
+    var sortableColumns = visibleColumns.map(function (column) {
+      var icon = function icon(col) {
+        if (col.isSorted) {
+          switch (col.isSortedDesc) {
+            case false:
+              return _iconsReact.ArrowUp16;
+
+            case true:
+              return _iconsReact.ArrowDown16;
+
+            default:
+              return _iconsReact.Arrows16;
+          }
+        }
+
+        return _iconsReact.Arrows16;
+      };
+
+      var Header = function Header(headerProp) {
+        return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+          onClick: function onClick() {
+            return onSortClick(headerProp.column);
+          },
+          kind: "ghost",
+          renderIcon: icon(headerProp.column)
+        }, column.Header);
+      };
+
+      return _objectSpread(_objectSpread({}, column), {}, {
+        Header: Header
+      });
+    });
+    return (0, _toConsumableArray2.default)(sortableColumns);
+  };
+
+  var sortInstanceProps = function sortInstanceProps(instance) {
+    var onSort = instance.onSort;
+    Object.assign(instance, {
+      manualSortBy: !!onSort,
+      isTableSortable: true
+    });
+  };
+
+  var getNewSortOrder = function getNewSortOrder(sortOrder) {
+    var order = {
+      newSortDesc: undefined,
+      newOrder: ordering.NONE
+    };
+
+    if (sortOrder === false) {
+      order.newOrder = ordering.DESC;
+      order.newSortDesc = true;
+    }
+
+    if (sortOrder === undefined) {
+      order.newOrder = ordering.ASC;
+      order.newSortDesc = false;
+    }
+
+    return order;
+  };
+
+  hooks.visibleColumns.push(sortableVisibleColumns);
+  hooks.useInstance.push(sortInstanceProps);
+};
+
+var _default = useSortableColumns;
+exports.default = _default;

package/lib/components/Datagrid/useStickyColumn.js

@@ -0,0 +1,190 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../settings");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
+var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
+
+var useStickyColumn = function useStickyColumn(hooks) {
+  var tableBodyRef = (0, _react.useRef)();
+  var stickyHeaderCellRef = (0, _react.useRef)();
+  hooks.getCellProps.push(changeProps.bind(null, 'cell', null));
+  hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef));
+  hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
+  hooks.getHeaderGroupProps.push(function (props) {
+    return [props, {
+      style: _objectSpread(_objectSpread({}, props.style), {}, {
+        minWidth: 'unset' // unset the min-width calculated by sum of all column min-width
+
+      })
+    }];
+  });
+
+  var useEventListener = function useEventListener(instance) {
+    (0, _react.useEffect)(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+
+      if (hasVertScroll(tableBodyElement) && headerCellElement) {
+        headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
+      }
+
+      var boundListener = (0, _debounce.default)(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
+      window.addEventListener('resize', boundListener);
+      return function () {
+        window.removeEventListener('resize', boundListener);
+      };
+    }, [instance.rows, instance.isFetching]);
+    (0, _react.useEffect)(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+
+      var listener = function listener(evt) {
+        toggleStickyShadow(evt.target, headerCellElement);
+      };
+
+      toggleStickyShadow(tableBodyElement, headerCellElement);
+
+      if (tableBodyElement) {
+        tableBodyElement.addEventListener('scroll', listener);
+      }
+
+      return function () {
+        if (tableBodyElement) {
+          tableBodyElement.removeEventListener('scroll', listener);
+        }
+      };
+    }, [instance.rows, instance.isFetching]);
+  };
+
+  var useCheckScroll = function useCheckScroll(instance) {
+    var tableBodyElement = tableBodyRef.current;
+    var headerCellElement = stickyHeaderCellRef.current;
+    (0, _react.useEffect)(function () {
+      onBodyResize(tableBodyElement, headerCellElement);
+    }, [instance.rows, headerCellElement, tableBodyElement]);
+  };
+
+  hooks.useInstance.push(useEventListener);
+  hooks.useInstance.push(useCheckScroll);
+  hooks.useInstance.push(function (instance) {
+    Object.assign(instance, {
+      withStickyColumn: true
+    });
+  });
+  hooks.useInstance.push(function (instance) {
+    // sticky column is defined by consumer
+    // it will always comes after the spacer which is defined by useFlexResize
+    // swap them here to use the spacer to push
+    // sticky column to the right when there are few
+    // columns defined
+    var newColumns = instance.visibleColumns;
+    var spacerIdx = newColumns.findIndex(function (col) {
+      return col.id === 'spacer';
+    });
+    var stickyIdx = newColumns.findIndex(function (col) {
+      return col.sticky === 'right';
+    });
+
+    if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
+      var temp = newColumns[spacerIdx];
+      newColumns[spacerIdx] = newColumns[stickyIdx];
+      newColumns[stickyIdx] = temp;
+    }
+
+    var newHeaders = instance.headers;
+    spacerIdx = newHeaders.findIndex(function (col) {
+      return col.id === 'spacer';
+    });
+    stickyIdx = newHeaders.findIndex(function (col) {
+      return col.sticky === 'right';
+    });
+
+    if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
+      var _temp = newHeaders[spacerIdx];
+      newHeaders[spacerIdx] = newHeaders[stickyIdx];
+      newHeaders[stickyIdx] = _temp;
+    }
+  });
+};
+
+var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
+  return [props, {
+    ref: tableBodyRef
+  }];
+};
+
+var changeProps = function changeProps(elementName, headerCellRef, props, data) {
+  var column = data.column || data.cell.column;
+
+  if (column.sticky === 'right') {
+    var _cx;
+
+    return [props, _objectSpread({
+      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), false), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
+    }, headerCellRef && {
+      ref: headerCellRef
+    })];
+  }
+
+  return [props];
+};
+
+var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
+  if (headerCellEle) {
+    if (hasVertScroll(tableBodyEle)) {
+      headerCellEle.classList.add(OFFSET_SCROLL_CLASS);
+    } else {
+      headerCellEle.classList.remove(OFFSET_SCROLL_CLASS);
+    }
+
+    toggleStickyShadow(tableBodyEle, headerCellEle);
+  }
+};
+
+var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
+  if (tableBodyEle && headerCellEle) {
+    var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
+
+    if (isScrolledToRight) {
+      headerCellEle.classList.add("".concat(blockClass, "__sticky-noShadow"));
+      tableBodyEle.classList.add("".concat(blockClass, "__sticky-column-noShadow"));
+    } else {
+      headerCellEle.classList.remove("".concat(blockClass, "__sticky-noShadow"));
+      tableBodyEle.classList.remove("".concat(blockClass, "__sticky-column-noShadow"));
+    }
+  }
+};
+
+var hasVertScroll = function hasVertScroll(element) {
+  if (!element) {
+    return false;
+  }
+
+  var scrollHeight = element.scrollHeight,
+      clientHeight = element.clientHeight;
+  return scrollHeight > clientHeight;
+};
+
+var _default = useStickyColumn;
+exports.default = _default;

package/lib/components/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "DataSpreadsheet", {
     return _DataSpreadsheet.DataSpreadsheet;
   }
 });
+Object.defineProperty(exports, "Datagrid", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.Datagrid;
+  }
+});
 Object.defineProperty(exports, "EditSidePanel", {
   enumerable: true,
   get: function get() {
@@ -356,4 +362,6 @@ var _OptionsTile = require("./OptionsTile");
 
 var _InlineEdit = require("./InlineEdit");
 
-var _DataSpreadsheet = require("./DataSpreadsheet");
+var _DataSpreadsheet = require("./DataSpreadsheet");
+
+var _Datagrid = require("./Datagrid");

package/lib/global/js/package-settings.js

@@ -67,7 +67,8 @@ var defaults = {
     EditSidePanel: false,
     CancelableTextEdit: false,
     InlineEdit: false,
-    DataSpreadsheet: false
+    DataSpreadsheet: false,
+    Datagrid: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -61,6 +61,7 @@
     "glob": "^7.2.0",
     "jest": "^27.5.1",
     "jest-config-ibm-cloud-cognitive": "^0.23.14",
+    "namor": "^1.1.2",
     "npm-check-updates": "^12.5.4",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
@@ -70,6 +71,9 @@
   "dependencies": {
     "@babel/runtime": "^7.17.8",
     "@carbon/telemetry": "^0.1.0",
+    "immutability-helper": "^3.1.1",
+    "react-dnd": "^15.1.2",
+    "react-dnd-html5-backend": "^15.1.3",
     "react-resize-detector": "^7.0.0",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6"
@@ -88,5 +92,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "553ac70187737c4946fc4ffd98fdfcafcc258ab2"
+  "gitHead": "2d85df61f66068c1c23e29a498eb84b94b334d90"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -204,6 +204,43 @@
     }
   }
 
+  .#{$block-class}__global-filter {
+    position: absolute;
+    z-index: 6000;
+    right: 0;
+    width: 100%;
+    max-width: 40rem;
+    background: $ui-01;
+    transform: translate(0, 100%);
+
+    &-search {
+      position: relative;
+      display: flex;
+      align-items: flex-end;
+    }
+
+    &-content {
+      padding: $spacing-05;
+    }
+
+    &-opts {
+      display: grid;
+      grid-gap: $spacing-05 2rem;
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .#{$block-class}__global-filter-button-set
+    button.#{$block-class}__global-filter-button {
+    max-width: none;
+    flex: 1;
+  }
+
+  button.#{$block-class}__global-filter-toggle {
+    border-bottom-color: $ui-04;
+    background: $field-01;
+  }
+
   // overrides
 
   .#{$block-class}__tag-container .#{$carbon-prefix}--tag {

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -40,7 +40,7 @@
     }
 
     .#{$block-class}__tr {
-      :last-child {
+      :last-child .#{$block-class}__body--td {
         .#{$block-class}__td {
           border-bottom: 0;
         }
@@ -51,19 +51,23 @@
     .#{$block-class}__td {
       @include carbon--type-style('body-short-01');
 
+      width: 100%;
+      height: 100%;
       padding: 0 $spacing-03;
       border: 0;
       margin: 0;
       color: $text-01;
     }
-    .#{$block-class}__th:last-child,
-    .#{$block-class}__td:last-child {
+
+    [role="'columnheader'"]:last-child,
+    [role="'gridcell'"]:last-child {
       border-right: 1px solid $text-03;
     }
     .#{$block-class}__th,
     .#{$block-class}__td-th.#{$block-class}__td {
       @include set-header-borders();
 
+      height: 100%;
       background-color: $header-cell-background;
       cursor: pointer;
 
@@ -72,6 +76,9 @@
         background-color: $hover-selected-ui;
       }
     }
+    .#{$block-class}__th--select-all {
+      min-width: calc(#{$spacing-10} - #{$spacing-02});
+    }
     .#{$block-class}__td-th.#{$block-class}__td {
       @include carbon--font-weight('semibold');
 
@@ -104,6 +111,7 @@
       overflow: hidden;
       /* stylelint-disable-next-line carbon/layout-token-use */
       padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
+      margin: 0;
       background-color: $body-cell-background;
       resize: none;
       &.#{$carbon-prefix}--text-area {
@@ -143,6 +151,8 @@
       /* stylelint-disable-next-line carbon/layout-token-use */
       padding-right: calc(#{$spacing-03} - 1px);
       padding-bottom: $spacing-01;
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding-left: calc(#{$spacing-03} - #{$spacing-01});
       border: $spacing-01 solid $interactive-01;
       background-color: $body-cell-background;
       color: $text-01;

package/scss/components/Datagrid/_datagrid.scss

@@ -0,0 +1,66 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+@import './styles/datagrid';
+@import './styles/useNestedRows';
+//@import './styles/useNestedTable';
+@import './styles/useSortableColumns';
+@import './styles/useColumnRightAlign';
+@import './styles/useStickyColumn';
+@import './styles/useActionsColumn';
+@import './styles/addons/CustomizeColumnsModal';
+@import './styles/addons/RowSizeDropdown';
+@import './styles/useSelectAllToggle';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// Datagrid uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by Datagrid
+
+// Datagrid uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by Datagrid
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin datagrid {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--datagrid;
+
+  .#{$block-class}__datagridWrap {
+    display: block;
+    width: 100%;
+    :global(.#{$carbon-prefix}--checkbox) {
+      display: none;
+    }
+  }
+
+  .#{$block-class}__datagridWrap-simple {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+
+    /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+    :global {
+      .#{$carbon-prefix}--pagination {
+        // newer version of carbon pagination has scroll which doesn't make any sense, removing it
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        overflow-x: unset;
+      }
+    }
+  }
+}
+
+@include exports('datagrid') {
+  @include datagrid;
+}

package/scss/components/Datagrid/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import './datagrid';

package/scss/components/Datagrid/_storybook-styles.scss

@@ -0,0 +1,26 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../../global/styles/project-settings';
+
+// TODO: add any additional styles used by Datagrid.stories.js
+// helper class for the nested table
+
+$block-class: #{$pkg-prefix}--datagrid;
+
+.sb-show-main.sb-main-centered #root {
+  width: 100%;
+  padding: 0;
+}
+
+.carbon-nested-table {
+  border-bottom: 1px solid $ui-03;
+
+  .#{$block-class}__virtual-scrollbar > div > div:last-child td {
+    border-bottom: none;
+  }
+}

package/scss/components/Datagrid/styles/_variables.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+@import '../../../global/styles/project-settings';
+
+$block-class: #{$pkg-prefix}--datagrid;

package/scss/components/Datagrid/styles/addons/CustomizeColumnsModal.scss

@@ -0,0 +1,48 @@
+/*
+* 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 '../variables';
+
+.#{$block-class}__customize-columns-modal {
+  .#{$carbon-prefix}--modal-content {
+    position: inherit;
+    display: flex;
+    flex-flow: column;
+    /* stylelint-disable-next-line declaration-no-important */
+    padding-top: 0 !important;
+  }
+}
+
+.#{$block-class}__customize-columns-checkbox {
+  display: flex;
+  justify-content: center;
+  /* stylelint-disable-next-line declaration-no-important */
+  margin-bottom: 0 !important; // reset the bottom provided by carbon
+}
+
+.#{$block-class}__customize-columns-modal--actions {
+  display: flex;
+  flex-flow: row;
+  margin-bottom: $spacing-06;
+}
+
+.#{$block-class}__customize-columns-modal--actions > button {
+  margin-left: $spacing-05;
+}
+
+.#{$block-class}__customize-columns-instructions {
+  margin-bottom: $spacing-06;
+  @include carbon--type-style('body-long-01');
+
+  color: $text-01;
+}
+
+.#{$block-class}__customize-columns-column-list {
+  position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
+  overflow: auto;
+}

package/scss/components/Datagrid/styles/addons/RowSizeDropdown.scss

@@ -0,0 +1,23 @@
+/*
+* 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 '../variables';
+
+.#{$block-class}__row-size-dropdown {
+  position: absolute;
+  padding: $spacing-05;
+  background-color: $ui-background;
+
+  box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
+}
+
+.#{$block-class}__row-size-button--open {
+  background-color: $ui-background;
+
+  box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
+}