@carbon/ibm-products 2.14.0 → 2.15.0

package/lib/components/EditTearsheet/EditTearsheet.js

@@ -16,7 +16,7 @@ var _react2 = require("@carbon/react");
 var _settings = require("../../settings");
 var _devtools = require("../../global/js/utils/devtools");
 var _TearsheetShell = require("../Tearsheet/TearsheetShell");
-var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onHandleModalClick", "onFormChange", "sideNavAriaLabel"];
+var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onRequestSubmit", "onFormChange", "sideNavAriaLabel"];
 /**
  * Copyright IBM Corp. 2022, 2023
  *
@@ -61,7 +61,7 @@ var EditTearsheet = exports.EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(
     title = _ref.title,
     _ref$verticalPosition = _ref.verticalPosition,
     verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
-    onHandleModalClick = _ref.onHandleModalClick,
+    onRequestSubmit = _ref.onRequestSubmit,
     onFormChange = _ref.onFormChange,
     _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
     sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
@@ -101,13 +101,15 @@ var EditTearsheet = exports.EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(
   }
   return /*#__PURE__*/_react.default.createElement(_TearsheetShell.TearsheetShell, (0, _extends2.default)({}, rest, (0, _devtools.getDevtoolsProps)(componentName), {
     actions: [{
+      key: 'edit-action-button-submit',
       label: submitButtonText,
-      onClick: onHandleModalClick,
+      onClick: onRequestSubmit,
       kind: 'primary'
     }, {
+      key: 'edit-action-button-cancel',
       label: cancelButtonText,
-      onClick: onHandleModalClick,
-      kind: 'secondary'
+      onClick: onClose,
+      kind: 'ghost'
     }],
     className: (0, _classnames.default)(blockClass, className),
     description: description,
@@ -187,9 +189,9 @@ EditTearsheet.propTypes = {
    */
   onFormChange: _propTypes.default.func,
   /**
-   * Specifies whether the tearsheet is currently open.
+   * Specify a handler for submitting the tearsheet.
    */
-  onHandleModalClick: _propTypes.default.func,
+  onRequestSubmit: _propTypes.default.func.isRequired,
   /**
    * Specifies whether the tearsheet is currently open.
    */

package/lib/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js

@@ -80,14 +80,21 @@ var MultiFormEditTearsheet = exports.MultiFormEditTearsheet = function MultiForm
     setIsInvalid(false);
     setOpen(false);
   };
-  var handleModalClick = function handleModalClick() {
-    setOpen(!open);
+  var onClose = function onClose() {
+    clearCreateData();
+    (0, _addonActions.action)('onClose')();
+  };
+  var onSubmit = function onSubmit() {
+    setOpen(false);
+    (0, _addonActions.action)('onSubmit')();
   };
   var handleFormChange = function handleFormChange() {
     (0, _addonActions.action)('handleFormChange')();
   };
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    onClick: handleModalClick
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
   }, open ? 'Close EditTearsheet' : 'Open EditTearsheet'), /*#__PURE__*/_react.default.createElement(_EditTearsheet.EditTearsheet, {
     influencerWidth: influencerWidth,
     label: label,
@@ -97,8 +104,8 @@ var MultiFormEditTearsheet = exports.MultiFormEditTearsheet = function MultiForm
     description: description,
     title: title,
     open: open,
-    onHandleModalClick: handleModalClick,
-    onClose: clearCreateData,
+    onRequestSubmit: onSubmit,
+    onClose: onClose,
     onFormChange: handleFormChange
   }, /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
     title: "Topic name",

package/lib/global/js/hooks/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "useNearestScroll", {
     return _useWindowScroll.useNearestScroll;
   }
 });
+Object.defineProperty(exports, "usePrefix", {
+  enumerable: true,
+  get: function get() {
+    return _usePrefix.usePrefix;
+  }
+});
 Object.defineProperty(exports, "usePreviousValue", {
   enumerable: true,
   get: function get() {
@@ -85,4 +91,5 @@ var _usePreviousValue = require("./usePreviousValue");
 var _useResetCreateComponent = require("./useResetCreateComponent");
 var _useRetrieveStepData = require("./useRetrieveStepData");
 var _useValidCreateStepCount = require("./useValidCreateStepCount");
-var _useControllableState = require("./useControllableState");
+var _useControllableState = require("./useControllableState");
+var _usePrefix = require("./usePrefix");

package/lib/global/js/hooks/usePrefix.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePrefix = void 0;
+var _packageSettings = _interopRequireDefault(require("../package-settings"));
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var usePrefix = exports.usePrefix = function usePrefix() {
+  return _packageSettings.default.prefix;
+};

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

@@ -16,11 +16,12 @@ var _react = require("react");
 
 /**
  * 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.
+ * title, secondaryLabel, introStep, invalid 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.invalid
  * @param {boolean} useResetCreateComponent.shouldIncludeStep
  * @param {string} useResetCreateComponent.secondaryLabel
  * @param {string} useResetCreateComponent.title
@@ -29,6 +30,7 @@ var useRetrieveStepData = exports.useRetrieveStepData = function useRetrieveStep
   var stepsContext = _ref.stepsContext,
     stepNumber = _ref.stepNumber,
     introStep = _ref.introStep,
+    invalid = _ref.invalid,
     shouldIncludeStep = _ref.shouldIncludeStep,
     secondaryLabel = _ref.secondaryLabel,
     title = _ref.title;
@@ -39,10 +41,11 @@ var useRetrieveStepData = exports.useRetrieveStepData = function useRetrieveStep
           title: title,
           secondaryLabel: secondaryLabel,
           introStep: introStep,
+          invalid: invalid,
           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) {
+        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 || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.invalid) !== stepItem.invalid) {
           var clone = (0, _toConsumableArray2.default)(prev);
           clone[stepNumber - 1] = stepItem;
           return clone;
@@ -50,5 +53,5 @@ var useRetrieveStepData = exports.useRetrieveStepData = function useRetrieveStep
         return prev;
       });
     }
-  }, [shouldIncludeStep, title, secondaryLabel, introStep, stepsContext, stepNumber]);
+  }, [shouldIncludeStep, title, secondaryLabel, introStep, invalid, stepsContext, stepNumber]);
 };

package/lib/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  pkg: true
+  pkg: true,
+  usePrefix: true
 };
 Object.defineProperty(exports, "pkg", {
   enumerable: true,
@@ -12,7 +13,14 @@ Object.defineProperty(exports, "pkg", {
     return _settings.pkg;
   }
 });
+Object.defineProperty(exports, "usePrefix", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.usePrefix;
+  }
+});
 var _settings = require("./settings");
+var _hooks = require("./global/js/hooks");
 var _components = require("./components");
 Object.keys(_components).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -87,14 +87,14 @@
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.20.0",
-    "@carbon/layout": "^11.19.0",
-    "@carbon/motion": "^11.15.0",
-    "@carbon/react": "^1.40.0",
-    "@carbon/themes": "^11.25.0",
-    "@carbon/type": "^11.24.0",
+    "@carbon/grid": "^11.21.1",
+    "@carbon/layout": "^11.20.1",
+    "@carbon/motion": "^11.16.1",
+    "@carbon/react": "^1.41.1",
+    "@carbon/themes": "^11.26.1",
+    "@carbon/type": "^11.25.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "8d8e1b6bbc737baf63f059b1ed6929958560ba64"
+  "gitHead": "71e9863315eb75b25df98cf9989f7bca88a10718"
 }

package/scss/components/Checklist/_checklist.scss

@@ -25,10 +25,10 @@
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 
-// .#{$block-class} {
 .#{$block-class}__header {
   display: flex;
   padding: $spacing-05;
+  border-bottom: 1px solid $border-subtle-01;
   background-color: $layer-01;
   gap: $spacing-03;
 }
@@ -78,8 +78,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 }
 
 // TOGGLE
-// The <iconbutton> itself (class="...__toggle") is embedded inside two more tags,
-// which do not accept any classnames passed via the <iconbutton>.
+// The <IconButton> itself (class="...__toggle") is embedded inside two more tags,
+// which do not accept any class names passed via the <IconButton>.
 // So, we have to refer to it via it's "tooltip" wrapper element. :/
 .#{$block-class}__header .#{c4p-settings.$carbon-prefix}--tooltip {
   height: 2rem;
@@ -107,6 +107,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 // Override Primary button styling to appear more like a link.
 // "Unset" some settings to allow an inner div to enable multiple lines and an ellipsis if req'd.
 .#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary {
+  @include type-style('body-short-01');
+
   max-width: none;
   min-height: auto;
   // override bx--btn to allow two-line ellipsis
@@ -117,8 +119,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   background-color: transparent;
   color: $link-primary;
 }
-// The CSS for the Carbon button's label
-// is incompatible with two-line ellipsis,
+// The CSS for the Carbon button's label is incompatible with two-line ellipsis,
 // but a div inside a Carbon button works.
 .#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary div {
   @include ellipsis-2-lines();
@@ -136,11 +137,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   text-decoration: underline;
 }
 
-.#{$block-class}__button--error {
-  /* stylelint-disable-next-line declaration-no-important */
-  color: $text-error !important;
-}
-
 // container for animated content
 .#{$block-class}__content-outer {
   overflow: hidden;
@@ -167,6 +163,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   padding: $spacing-05;
   border-top: 1px solid $border-subtle-01;
 }
+.#{$block-class}__list-group:first-of-type {
+  border-top: none;
+}
 
 .#{$block-class}__list-title {
   @include type-style('body-short-01');
@@ -185,9 +184,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 }
 
 .#{$block-class}__icon {
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  /* stylelint-disable-next-line */
   margin: to-rem(1px) $spacing-03 0 0;
-  color: $link-primary;
+  color: $icon-primary;
+}
+
+.#{$block-class}__icon--checked,
+.#{$block-class}__icon--indeterminate {
+  color: $interactive;
 }
 
 .#{$block-class}__icon--error {
@@ -203,9 +207,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   @include ellipsis-2-lines();
 }
 
-.#{$block-class}__label--checked,
-.#{$block-class}__label--disabled,
-.#{$block-class}__label--error {
+.#{$block-class}__label--disabled {
   color: $text-disabled;
 }
 
@@ -213,5 +215,5 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   @include ellipsis-2-lines();
 
   padding: $spacing-03 $spacing-05;
-  border-top: 1px solid $border-subtle;
+  border-top: 1px solid $border-subtle-01;
 }

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

@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/tooltip';
 
 @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
@@ -141,3 +142,16 @@ div[data-story-title*='#{$story-anchor}']
   overflow: auto;
   width: 100%;
 }
+
+.sb--tooltip-trigger {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+}

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -252,7 +252,7 @@ $row-heights: (
 // containers, using default border caused grid area width to be changed and
 // outlines were not present be
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active::before {
+  .#{variables.$block-class}__grid-container-active::before {
   position: absolute;
   z-index: 2;
   bottom: 0;
@@ -266,7 +266,7 @@ $row-heights: (
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active::after {
+  .#{variables.$block-class}__grid-container-active::after {
   position: absolute;
   z-index: 2;
   right: 0;
@@ -280,7 +280,7 @@ $row-heights: (
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active
+  .#{variables.$block-class}__grid-container-active
   .#{c4p-settings.$carbon-prefix}--data-table-content::before {
   position: absolute;
   z-index: 2;
@@ -293,16 +293,16 @@ $row-heights: (
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::before,
+  .#{variables.$block-class}__grid-container-active.#{variables.$block-class}__grid-container-active--without-toolbar::before,
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::after {
+  .#{variables.$block-class}__grid-container-active.#{variables.$block-class}__grid-container-active--without-toolbar::after {
   height: calc(
     100% - 2px - var(--#{variables.$block-class}--grid-header-height)
   );
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active
+  .#{variables.$block-class}__grid-container-active
   .#{variables.$block-class}__table-container {
   outline: 2px solid $link-inverse;
   outline-offset: -2px;