@carbon/ibm-products 2.0.0-rc.10 → 2.0.0-rc.12

package/lib/global/js/hooks/useCreateComponentFocus.js

@@ -1,13 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCreateComponentFocus = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = require("react");
 
-var _getFocusableElements = require("../utils/getFocusableElements");
+var _wait = _interopRequireDefault(require("../utils/wait"));
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -20,25 +26,50 @@ var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
   var previousState = _ref.previousState,
       currentStep = _ref.currentStep,
       blockClass = _ref.blockClass,
-      onMount = _ref.onMount;
+      onMount = _ref.onMount,
+      firstFocusElement = _ref.firstFocusElement;
   (0, _react.useEffect)(function () {
     if (typeof onMount === 'function') {
       onMount();
     }
   }, [onMount]);
   (0, _react.useEffect)(function () {
+    // because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
+    var awaitFocus = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(elm) {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return (0, _wait.default)(10);
+
+              case 2:
+                elm.focus();
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function awaitFocus(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
-      var visibleStepInnerContent = document.querySelector(".".concat(blockClass, "__step.").concat(blockClass, "__step__step--visible-step"));
-      var focusableStepElements = visibleStepInnerContent ? (0, _getFocusableElements.getFocusableElements)(visibleStepInnerContent) : [];
-
-      if (focusableStepElements && focusableStepElements.length) {
-        focusableStepElements[0].focus();
-      } else {
-        var nextButton = document.querySelector(".".concat(blockClass, "__create-button"));
-        nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
+      if (firstFocusElement) {
+        var elm = document.querySelector(firstFocusElement);
+
+        if (elm) {
+          awaitFocus(elm);
+        }
       }
     }
-  }, [currentStep, previousState, blockClass, onMount]);
+  }, [currentStep, previousState, blockClass, onMount, firstFocusElement]);
 };
 
 exports.useCreateComponentFocus = useCreateComponentFocus;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.10",
+  "version": "2.0.0-rc.12",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "f366a6fd9163f004b89aec79e0486f31a4b9a8d2"
+  "gitHead": "feb17ff087be1ed1174b0e0cfa44dd1f991e2881"
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -48,7 +48,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 
 .#{$block-class}__datagridWrap-simple {
   display: flex;
-  overflow: hidden;
   width: 100%;
   height: 100%;
   flex-direction: column;

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

@@ -102,3 +102,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   .#{c4p-settings.$carbon-prefix}--dropdown__wrapper {
   margin-bottom: $spacing-07;
 }
+
+.storybook-#{$block-class}__validation-code-snippet {
+  @include type.font-family($name: mono);
+  @include type.type-style('code-01');
+
+  display: inline-block;
+  padding: 0 $spacing-03;
+  border: 2px solid transparent;
+  margin-right: $spacing-03;
+  background-color: $field-01;
+  border-radius: $spacing-02;
+}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -485,6 +485,7 @@
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
   position: absolute;
+  top: 0;
   left: 0;
   width: $spacing-02;
   height: 100%;
@@ -541,6 +542,28 @@
   justify-content: center;
 }
 
+.#{$block-class}__customize-columns-checkbox-wrapper.#{c4p-settings.$carbon-prefix}--form-item {
+  flex: 0 0 auto;
+  margin-right: $spacing-03;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
+  width: 10px;
+  height: 7px;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-track {
+  background: $layer;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+}
+
+.#{$block-class}__virtualScrollContainer {
+  width: 100%;
+}
+
 .#{c4p-settings.$carbon-prefix}--body--with-modal-open
   .#{$block-class}__grid-container {
   overflow: hidden;

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -1,10 +1,10 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2022
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// 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.
+//
+
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use './variables';
@@ -20,7 +20,7 @@
   pointer-events: none;
 }
 
-svg.#{variables.$block-class}__draggable-handleStyle.disable {
+.#{variables.$block-class}__draggable-handleStyle.disabled svg {
   fill: $icon-disabled;
 }
 
@@ -56,6 +56,7 @@ svg.#{variables.$block-class}__draggable-handleStyle.disable {
 .#{variables.$block-class}__draggable-handleHolder-droppable {
   display: flex;
   width: 100%;
+  align-items: center;
 }
 
 .#{variables.$block-class}__draggable-handleHolder-grabbed {

package/scss/components/Datagrid/styles/_index.scss

@@ -1,10 +1,9 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020, 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// 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.
+//
 @use './datagrid';
 @use './useNestedRows';
 @use './useNestedTable';
@@ -13,8 +12,9 @@
 @use './useColumnCenterAlign';
 @use './useStickyColumn';
 @use './useActionsColumn';
-@use './addons/CustomizeColumnsModal';
+@use './addons/CustomizeColumnsTearsheet';
 @use './addons/RowSizeDropdown';
+@use './addons/FilterFlyout';
 @use './useSelectAllToggle';
 @use './useExpandedRow';
 @use './draggableElement';

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

@@ -0,0 +1,65 @@
+//
+// 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.
+//
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/type/scss/font-family';
+@use '@carbon/layout' as *;
+
+@use '../../../../global/styles/project-settings' as c4p-settings;
+@use '../variables';
+
+.#{variables.$block-class}__customize-columns-tearsheet {
+  .#{c4p-settings.$pkg-prefix}--tearsheet__content {
+    display: flex;
+    flex-flow: column;
+  }
+}
+
+.#{variables.$block-class}__customize-columns-tearsheet--actions
+  input[role='searchbox'] {
+  height: $spacing-09;
+  padding-left: $spacing-09;
+  border-bottom: 1px solid $background-active;
+}
+
+.#{variables.$block-class}__customize-columns-checkbox-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-left: $spacing-03;
+  margin-bottom: 0;
+}
+
+.#{variables.$block-class}__customize-columns-column-list {
+  position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
+  overflow: auto;
+}
+
+.#{variables.$block-class}__customize-columns-select-all,
+.#{variables.$block-class}__customize-columns-select-all--selected {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  display: flex;
+  height: $spacing-09;
+  padding-left: $spacing-08;
+  border-bottom: 1px solid $layer-active;
+  background-color: $layer;
+
+  .#{c4p-settings.$carbon-prefix}--checkbox-label-text {
+    @include font-family.font-weight('semibold');
+  }
+}
+
+.#{variables.$block-class}__customize-columns-select-all:hover {
+  background-color: $layer-hover;
+}
+
+.#{variables.$block-class}__customize-columns-select-all--selected {
+  background-color: $layer-selected;
+}

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

@@ -0,0 +1,87 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2022
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+// stylelint-disable carbon/layout-token-use
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/layout' as *;
+
+@use '../../../../global/styles/project-settings' as c4p-settings;
+@use '../variables';
+
+$action-set-height: rem(64px);
+
+.#{variables.$block-class}-filter-flyout__container {
+  position: relative;
+}
+
+.#{variables.$block-class}-filter-flyout {
+  position: absolute;
+  top: $spacing-09;
+  right: 0;
+  display: none;
+  width: rem(642px);
+  background-color: $layer-02;
+  box-shadow: 0 1px rem(8px) 0 rgba(0, 0, 0, 0.25);
+}
+
+.#{variables.$block-class}-filter-flyout--open {
+  display: grid;
+}
+
+.#{variables.$block-class}-filter-flyout--batch {
+  min-height: rem(346px);
+  grid-template-rows: 1fr rem(48px);
+}
+
+.#{variables.$block-class}-filter-flyout--instant {
+  min-height: rem(282px);
+  grid-template-rows: 1fr;
+}
+
+.#{variables.$block-class}-filter-flyout__inner-container {
+  padding: $spacing-05 $spacing-05 $spacing-09 $spacing-05;
+}
+
+.#{variables.$block-class}-filter-flyout__inner-container::before {
+  position: absolute;
+  top: rem(-7px);
+  right: 1px;
+  display: block;
+  width: rem(46px);
+  height: rem(15px);
+  background-color: $layer-02;
+  content: '';
+}
+
+.#{variables.$block-class}-filter-flyout__title {
+  display: block;
+  @include type-style('heading-compact-01');
+
+  margin-bottom: $spacing-06;
+}
+
+.#{variables.$block-class}-filter-flyout__filters {
+  display: grid;
+  gap: rem(16px) rem(32px);
+  grid-template-columns: 1fr 1fr;
+}
+
+// Carbon overrides
+.#{variables.$block-class}-filter-flyout__trigger--open.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--icon-only {
+  position: relative;
+  background-color: $layer-02;
+  box-shadow: 0 1px rem(8px) 0 rgba(0, 0, 0, 0.25);
+}
+
+.#{variables.$block-class}-filter-flyout
+  .#{c4p-settings.$carbon-prefix}--fieldset {
+  margin-bottom: 0;
+}

package/scss/components/FilterSummary/_filter-summary.scss

@@ -0,0 +1,20 @@
+//
+// Copyright IBM Corp. 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.
+//
+@use '../../global/styles/project-settings' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+$block-class: #{$pkg-prefix}--filter-summary;
+
+.#{$block-class} {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: $spacing-03;
+  border-top: 1px solid $border-subtle-01;
+  background: $layer-01;
+}

package/scss/components/FilterSummary/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+// An index file is most useful when you have multiple components
+
+@use './filter-summary';

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

@@ -0,0 +1,14 @@
+//
+// 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.
+//
+#root {
+  width: 100%;
+}
+
+.preview-position-fix {
+  max-width: 700px;
+  margin: 0 auto;
+}

package/scss/components/Tearsheet/_tearsheet.scss

@@ -202,6 +202,8 @@ $motion-duration: $duration-moderate-02;
     @include breakpoint-up('md') {
       max-width: 60%;
     }
+
+    word-break: break-all;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {

package/scss/components/_index.scss

@@ -23,6 +23,7 @@
 @use './EmptyStates';
 @use './ExportModal';
 @use './ExpressiveCard';
+@use './FilterSummary/index';
 @use './HTTPErrors';
 @use './ImportModal';
 @use './ModifiedTabs';

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

@@ -1,63 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen", "labels"];
-// @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,
-      labels = _instance$customizeCo.labels,
-      rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
-
-  if (isModalOpen) {
-    return /*#__PURE__*/React.createElement(CustomizeColumnsModal, _extends({}, rest, labels, {
-      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/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss

@@ -1,93 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021, 2022
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '../../../../global/styles/project-settings' as c4p-settings;
-@use '../variables';
-
-.#{variables.$block-class}__customize-columns-modal {
-  .#{c4p-settings.$carbon-prefix}--modal-content {
-    position: inherit;
-    display: flex;
-    flex-flow: column;
-    padding: 0;
-    margin: 0;
-  }
-}
-
-.#{variables.$block-class}__customize-columns-checkbox-wrapper {
-  margin-bottom: 0;
-}
-.#{variables.$block-class}__customize-columns-checkbox-wrapper {
-  display: flex;
-  justify-content: center;
-}
-
-.#{variables.$block-class}__customize-columns-modal--actions {
-  display: flex;
-  height: $spacing-09;
-  flex-flow: row;
-  background-color: $field-02;
-}
-
-.#{variables.$block-class}__customize-columns-modal--actions
-  input[role='searchbox'] {
-  height: $spacing-09;
-  padding-left: $spacing-08;
-  border-bottom: none;
-}
-
-.#{variables.$block-class}__customize-columns-modal--actions > button {
-  margin-left: $spacing-05;
-}
-
-.#{variables.$block-class}__customize-columns-instructions {
-  padding-left: $spacing-05;
-  margin-bottom: $spacing-06;
-
-  @include type.type-style('body-long-01');
-
-  color: $text-primary;
-}
-
-.#{variables.$block-class}__customize-columns-column-list {
-  position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
-  overflow: auto;
-}
-
-.#{variables.$block-class}__customize-columns-select-all {
-  display: flex;
-  height: $spacing-09;
-  align-items: center;
-  padding-left: $spacing-08;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer-01;
-}
-.#{variables.$block-class}__customize-columns-select-all:hover {
-  background-color: $layer-hover-01;
-}
-.#{variables.$block-class}__customize-columns-select-all-selected {
-  display: flex;
-  height: $spacing-09;
-  align-items: center;
-  padding-left: $spacing-08;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer-selected-01;
-}
-
-.#{variables.$block-class}__customize-columns-select-all-selected:hover {
-  background-color: $background-selected-hover;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__customize-columns-modal
-  .#{c4p-settings.$carbon-prefix}--modal-content {
-  margin-bottom: 0;
-}