@carbon/ibm-products 1.2.5 → 1.6.0

package/lib/global/js/hooks/useRetrieveStepData.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRetrieveStepData = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = require("react");
+
+/**
+ * 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.
+ */
+
+/**
+ * This useEffect makes sure that every CreateTearsheetStep/CreateFullPageStep reports back it's
+ * title, secondaryLabel, introStep, and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
+ * @param {object} useResetCreateComponent
+ * @param {object} useResetCreateComponent.stepsContext
+ * @param {number} useResetCreateComponent.stepNumber
+ * @param {boolean} useResetCreateComponent.introStep
+ * @param {boolean} useResetCreateComponent.shouldIncludeStep
+ * @param {string} useResetCreateComponent.secondaryLabel
+ * @param {string} useResetCreateComponent.title
+ */
+var useRetrieveStepData = function useRetrieveStepData(_ref) {
+  var stepsContext = _ref.stepsContext,
+      stepNumber = _ref.stepNumber,
+      introStep = _ref.introStep,
+      shouldIncludeStep = _ref.shouldIncludeStep,
+      secondaryLabel = _ref.secondaryLabel,
+      title = _ref.title;
+  (0, _react.useEffect)(function () {
+    if (stepsContext) {
+      stepsContext.setStepData(function (prev) {
+        var stepItem = {
+          title: title,
+          secondaryLabel: secondaryLabel,
+          introStep: introStep,
+          shouldIncludeStep: shouldIncludeStep
+        };
+        var previousItem = prev[stepNumber - 1];
+
+        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep) {
+          var clone = (0, _toConsumableArray2.default)(prev);
+          clone[stepNumber - 1] = stepItem;
+          return clone;
+        }
+
+        return prev;
+      });
+    }
+  }, [shouldIncludeStep, title, secondaryLabel, introStep, stepsContext, stepNumber]);
+};
+
+exports.useRetrieveStepData = useRetrieveStepData;

package/lib/global/js/hooks/useValidCreateStepCount.js

@@ -16,18 +16,15 @@ var _react = require("react");
 
 /**
  * Logs a warning to console if an invalid number of steps are used with the given CreateComponent
- * @param {Function} getCreateComponentSteps
+ * @param {number} stepCount
  * @param {string} componentName
  */
-var useValidCreateStepCount = function useValidCreateStepCount(getCreateComponentSteps, componentName) {
+var useValidCreateStepCount = function useValidCreateStepCount(stepCount, componentName) {
   (0, _react.useEffect)(function () {
-    var createSteps = getCreateComponentSteps();
-    var total = createSteps.length;
-
-    if (total === 1) {
+    if (stepCount === 1) {
       console.warn("".concat(componentName, ": ").concat(componentName, "s with one step are not permitted. If you require only one step, please use either the CreateTearsheetNarrow, CreateSidePanel, or CreateModal components."));
     }
-  }, [getCreateComponentSteps, componentName]);
+  }, [stepCount, componentName]);
 };
 
 exports.useValidCreateStepCount = useValidCreateStepCount;

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

@@ -56,6 +56,8 @@ var defaults = {
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
     // other public components not yet reviewed and released:
+    MultiAddSelect: false,
+    SingleAddSelect: false,
     LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,
@@ -63,7 +65,9 @@ var defaults = {
     ToolbarGroup: false,
     WebTerminal: false,
     EditSidePanel: false,
-    OptionsTile: false
+    OptionsTile: false,
+    CancelableTextEdit: false,
+    InlineEdit: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/lib/global/js/utils/lastIndexInArray.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lastIndexInArray = void 0;
+
+/**
+ * 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.
+ */
+
+/**
+ * This utility will return the index of the last instance of an
+ * item in the given array of objects whose key is equal to the value
+ * parameter. If there are no matches, -1 is returned as similar to findIndex
+ * @param {Array<Object.*>} array
+ * @param {string} key
+ * @param {string|boolean|number} value
+ */
+var lastIndexInArray = function lastIndexInArray(array, key, value) {
+  for (var i = array.length - 1; i >= 0; i--) {
+    var _array$i;
+
+    if (((_array$i = array[i]) === null || _array$i === void 0 ? void 0 : _array$i[key]) === value) {
+      return i + 1;
+    }
+  }
+
+  return -1;
+};
+
+exports.lastIndexInArray = lastIndexInArray;

package/lib/settings.js

@@ -9,8 +9,6 @@ exports.pkg = exports.carbon = void 0;
 
 var _Canary = require("./components/_Canary");
 
-var _featureFlags = _interopRequireDefault(require("./generated/feature-flags/feature-flags"));
-
 var _packageSettings = _interopRequireDefault(require("./global/js/package-settings"));
 
 var _carbonComponents = require("carbon-components");
@@ -28,10 +26,6 @@ var carbon = {
     _carbonComponents.settings.prefix = val;
   },
 
-  get flags() {
-    return _featureFlags.default;
-  },
-
   get themes() {
     return _themes.themes;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.2.5",
+  "version": "1.6.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,13 +46,13 @@
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
     "postinstall": "carbon-telemetry collect --install",
     "test": "jest --colors",
-    "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency) or chalk (until we can load it as ESM)",
-    "upgrade-dependencies": "npm-check-updates -u --color --reject '/(carbon|^react$|^react-dom$|^chalk$)/'"
+    "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
+    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.7",
-    "@babel/core": "^7.16.7",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.3",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.6",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -60,31 +60,31 @@
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
     "jest": "^27.4.7",
-    "jest-config-ibm-cloud-cognitive": "^0.23.4",
-    "npm-check-updates": "^12.1.0",
+    "jest-config-ibm-cloud-cognitive": "^0.23.7",
+    "npm-check-updates": "^12.2.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.46.0",
+    "sass": "^1.49.7",
     "yargs": "^17.3.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
+    "@babel/runtime": "^7.17.0",
     "@carbon/telemetry": "^0.0.0-alpha.6",
     "react-resize-detector": "^7.0.0"
   },
   "peerDependencies": {
-    "@carbon/colors": "^10.34.0",
-    "@carbon/icons-react": "^10.42.0",
+    "@carbon/colors": "^10.35.0",
+    "@carbon/icons-react": "^10.45.0",
     "@carbon/import-once": "^10.5.0",
-    "@carbon/layout": "^10.34.0",
-    "@carbon/motion": "^10.26.0",
-    "@carbon/themes": "^10.46.0",
-    "@carbon/type": "^10.38.0",
-    "carbon-components": "^10.47.1",
-    "carbon-components-react": "^7.47.2",
+    "@carbon/layout": "^10.35.0",
+    "@carbon/motion": "^10.27.0",
+    "@carbon/themes": "^10.50.0",
+    "@carbon/type": "^10.40.0",
+    "carbon-components": "^10.52.0",
+    "carbon-components-react": "^7.52.0",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "f32985ca05fe906558bb5b330c306b7f0f6d0ef4"
+  "gitHead": "3e87aeeb51d41503263511831b8db5f08437d754"
 }

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

@@ -0,0 +1,108 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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 'carbon-components/scss/components/structured-list/structured-list';
+
+@mixin add-select {
+  $block-class: #{$pkg-prefix}--add-select;
+  $tearsheet-class: #{$pkg-prefix}--tearsheet;
+
+  .#{$block-class}__header {
+    padding: $spacing-05;
+    padding-bottom: 0;
+    border-top: 1px solid $ui-03;
+  }
+
+  .#{$block-class}__body {
+    padding: $spacing-05;
+  }
+
+  .#{$block-class}__items-label {
+    margin-right: $spacing-03;
+
+    &-container {
+      display: flex;
+      align-items: center;
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-03;
+    }
+  }
+
+  .#{$block-class}__selections {
+    border-top: 1px solid $ui-03;
+
+    &-wrapper {
+      display: block;
+    }
+
+    &-cell-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  // multi select specific
+
+  .#{$block-class}__influencer-header {
+    display: flex;
+    padding: $spacing-06 $spacing-05 $spacing-03 $spacing-05;
+    border-bottom: 1px solid $ui-03;
+
+    .#{$block-class}__influencer-title {
+      @include carbon--type-style('productive-heading-02');
+    }
+  }
+
+  .#{$block-class}__influencer-title {
+    margin-right: $spacing-03;
+  }
+
+  .#{$block-class}__influencer-body {
+    padding: $spacing-05;
+  }
+
+  // overrides
+
+  // the influencer sidebar needs to be even with the buttons
+  .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__influencer {
+    max-width: 29rem;
+    flex: 0 0 50%;
+  }
+
+  .#{$block-class} .#{$block-class}__items-label {
+    @include carbon--type-style('productive-heading-01');
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--modal-container--sm
+    .bx--modal-content
+    p {
+    padding-right: 0;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--structured-list-td {
+    padding-bottom: $spacing-05;
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--radio-button-wrapper
+    .#{$carbon-prefix}--radio-button__label {
+    justify-content: left;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {
+    cursor: pointer;
+  }
+}
+
+@include exports('add-select') {
+  @include add-select;
+}

package/scss/components/AddSelect/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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
+
+@import './add-select';

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

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -32,11 +32,8 @@
     }
 
     .#{$block-class}__breadcrumb-container.#{$block-class}__breadcrumb-container-with-items {
-      display: none;
+      display: inline-flex; // needed to register a width
       width: 100%;
-      @include carbon--breakpoint(md) {
-        display: inline-flex; // needed to register a width
-      }
     }
 
     .#{$block-class}__breadcrumb-container .#{$carbon-prefix}--breadcrumb {
@@ -50,12 +47,28 @@
       @include measuring-container;
     }
 
+    .#{$block-class}__breadcrumb-back {
+      display: none;
+    }
+
+    @include carbon--breakpoint-down(md) {
+      .#{$carbon-prefix}--breadcrumb-item {
+        display: none;
+      }
+
+      .#{$block-class}__breadcrumb-back,
+      .#{$carbon-prefix}--breadcrumb-item:last-child {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+    }
+
     .#{$carbon-prefix}--breadcrumb-item:last-child {
-      display: inline;
+      display: inline-flex; // flex instead of block due to spacing
     }
 
     .#{$block-class}__displayed-breadcrumb:last-child {
-      display: inline;
+      display: inline-flex; // flex instead of block due to spacing
       overflow: hidden;
     }
 
@@ -69,15 +82,6 @@
     .#{$carbon-prefix}--link {
       max-height: 18px; // to match breadcrumb - overflow button is 20 by default
     }
-
-    .#{$block-class}__breadcrumb-back-button.#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
-      display: inline-flex;
-      margin-top: calc(-1 * #{$spacing-04});
-
-      @include carbon--breakpoint(md) {
-        display: none;
-      }
-    }
   }
 }
 

package/scss/components/BreadcrumbWithOverflow/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './breadcrumb-with-overflow.scss';
+@import './breadcrumb-with-overflow';

package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss

@@ -0,0 +1,212 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// 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';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// CancelableTextEdit uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by CancelableTextEdit
+
+// CancelableTextEdit uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by CancelableTextEdit
+
+@mixin button-states($block-class) {
+  .#{$block-class}__revert,
+  .#{$block-class}__save {
+    border: 1px solid transparent;
+
+    // input does not have focus
+    &:hover {
+      border-color: $hover-field;
+      border-bottom-color: transparent;
+      background-clip: content-box;
+      box-shadow: initial;
+      outline: initial;
+    }
+
+    &:focus:active,
+    &:focus {
+      // border focus input does NOT have focus
+      border-color: $focus;
+      box-shadow: inset 0 0 0 1px $focus;
+      outline: initial;
+    }
+
+    &:focus:active:hover {
+      box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $field-01;
+    }
+
+    &::before {
+      background-color: transparent;
+    }
+
+    &[disabled] {
+      border-color: transparent;
+    }
+  }
+
+  // invalid affects hover state
+  &.#{$block-class}--invalid {
+    // invalid does not have focus
+    .#{$block-class}__save:hover,
+    .#{$block-class}__revert:hover {
+      border: 1px solid transparent;
+      box-shadow: inset 0 1px 0 $support-01, inset 0 -1px 0 $support-01;
+    }
+
+    .#{$block-class}__save:hover {
+      // invalid does  not have focus
+      box-shadow: inset 0 1px 0 $support-01, inset 0 -1px 0 $support-01,
+        inset -1px 0 0 $support-01;
+    }
+  }
+
+  // after other button states handle focus within input
+  .#{$carbon-prefix}--text-input-wrapper:focus-within
+    ~ .#{$block-class}__buttons {
+    .#{$block-class}__revert,
+    .#{$block-class}__save {
+      border: 1px solid transparent;
+      box-shadow: inset 0 1px 0 $focus, inset 0 -1px 0 $focus;
+      // transition-property: initial; // turn off seems to cause a bit of a visual glitch
+    }
+
+    // button hover state
+    .#{$block-class}__revert:hover,
+    .#{$block-class}__save:hover {
+      background-clip: content-box;
+    }
+
+    .#{$block-class}__save {
+      // border hover input has focus or is in error
+      box-shadow: inset 0 1px 0 $focus, inset 0 -1px 0 $focus,
+        inset -1px 0 0 $focus;
+    }
+  }
+}
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin cancelable-text-edit {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--cancelable-text-edit;
+
+  .#{$block-class} {
+    --size: #{$spacing-08};
+    --icon-size: #{$spacing-05};
+  }
+
+  .#{$block-class}--sm {
+    --size: #{$spacing-07};
+    --icon-size: #{$spacing-05};
+  }
+
+  .#{$block-class}--lg {
+    --size: #{$spacing-09};
+    --icon-size: #{$spacing-05};
+  }
+
+  // high specificity to override some icon button styles to work like the Carbon search clear button
+  // but at sizes of text input
+  .#{$block-class}.#{$block-class}.#{$block-class} {
+    .#{$block-class}__main {
+      position: relative;
+      display: inline-flex;
+      width: 100%;
+      min-height: var(--size);
+      vertical-align: top;
+    }
+
+    .#{$block-class}__input {
+      height: var(--size);
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(2 * var(--size));
+    }
+
+    .#{$block-class}__buttons {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .#{$block-class}__buttons-inner {
+      display: flex;
+    }
+
+    @include button-states($block-class);
+
+    .#{$block-class}__revert,
+    .#{$block-class}__save {
+      display: flex;
+      width: var(--size);
+      height: var(--size);
+      min-height: var(--size);
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+
+      svg {
+        width: var(--icon-size);
+        height: var(--icon-size);
+        // margin: calc(var(--size) / 4);
+      }
+    }
+
+    // > only wish to affect version added for inline
+    &.#{$block-class}--invalid .#{$carbon-prefix}--form-requirement,
+    &.#{$block-class}--warn .#{$carbon-prefix}--form-requirement {
+      display: block;
+      max-height: initial;
+    }
+
+    &.#{$block-class}--invalid.#{$block-class}--inline
+      .#{$carbon-prefix}--form-requirement,
+    &.#{$block-class}--warn.#{$block-class}--inline
+      .#{$carbon-prefix}--form-requirement {
+      // stylelint-disable-next-line carbon/layout-token-use
+      margin-left: calc(20% + 1.25rem); // needs to match inline input layout
+    }
+
+    // > only wish to affect version added for inline
+    &.#{$block-class}--invalid .#{$carbon-prefix}--form-requirement {
+      display: block;
+      overflow: visible;
+      // max-height: 12.5rem;
+      // font-weight: 400;
+      color: $text-error;
+    }
+
+    .#{$carbon-prefix}--text-input {
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(
+        2 * var(--size)
+      ); // to take account of save and revert
+    }
+
+    .#{$carbon-prefix}--text-input--invalid {
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(
+        3 * var(--size)
+      ); // to take account of save and revert
+    }
+
+    .#{$carbon-prefix}--text-input__invalid-icon {
+      margin-right: $spacing-11;
+    }
+  }
+}
+
+@include exports('cancelable-text-edit') {
+  @include cancelable-text-edit;
+}

package/{es/components/CreateFullPage/constants.js → scss/components/CancelableTextEdit/_index.scss}

@@ -4,5 +4,5 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-export var CREATE_FULL_PAGE_STEP = 'CreateFullPageStep';
-export var CREATE_FULL_PAGE_SECTION = 'CreateFullPageSection';
+
+@import './cancelable-text-edit';

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

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// 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 './index';
+
+// TODO: add any additional styles used by CancelableTextEdit.stories.js
+
+// Uncomment next line (which must appear last) to test in storybook
+// that the SCSS styles for this component are sufficiently specific
+// to override Carbon whichever order the styles get loaded in.
+//@import 'carbon-components/css/carbon-components.min';