@carbon/ibm-products 2.20.0 → 2.22.0

package/lib/components/Tearsheet/Tearsheet.js

@@ -115,6 +115,11 @@ Tearsheet.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: _react2.Button.propTypes.onClick
   })))]),
+  /**
+   * The aria-label for the tearsheet, which is optional.
+   * if it is not passed, the title will be used as the aria-label.
+   */
+  ariaLabel: _propTypes.default.string,
   /**
    * An optional class or classes to be added to the outermost element.
    */

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -103,6 +103,11 @@ TearsheetNarrow.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: _react2.Button.propTypes.onClick
   })))]),
+  /**
+   * The aria-label for the tearsheet, which is optional.
+   * if it is not passed, the title will be used as the aria-label.
+   */
+  ariaLabel: _propTypes.default.string,
   /**
    * An optional class or classes to be added to the outermost element.
    */

package/lib/components/Tearsheet/TearsheetShell.js

@@ -21,7 +21,7 @@ var _react2 = require("@carbon/react");
 var _ActionSet = require("../ActionSet");
 var _Wrap = require("../../global/js/utils/Wrap");
 var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
-var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
 /**
  * Copyright IBM Corp. 2020, 2023
  *
@@ -71,6 +71,7 @@ var tearsheetHasCloseIcon = exports.tearsheetHasCloseIcon = function tearsheetHa
  * */
 var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
+    ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
     closeIconDescription = _ref.closeIconDescription,
@@ -185,7 +186,6 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
     }
   }
   if (position <= depth) {
-    var _cx, _ref2, _cx3, _cx5, _cx6;
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
@@ -194,11 +194,11 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
     // Include an ActionSet if and only if one or more actions is given.
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
-      "aria-label": (0, _getNodeTextContent.getNodeTextContent)(title),
-      className: (0, _classnames.default)(bc, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      "aria-label": ariaLabel || (0, _getNodeTextContent.getNodeTextContent)(title),
+      className: (0, _classnames.default)(bc, className, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), (0, _defineProperty2.default)(_cx, "".concat(bc, "--wide"), wide), (0, _defineProperty2.default)(_cx, "".concat(bc, "--narrow"), !wide), _cx)),
-      style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), (0, _defineProperty2.default)(_ref2, "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width), _ref2),
+      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide)),
+      style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width),
       containerClassName: (0, _classnames.default)("".concat(bc, "__container"), (0, _defineProperty2.default)({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
       onClose: onClose,
       open: open,
@@ -209,7 +209,7 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
       selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
       size: "sm"
     }), includeHeader && /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
-      className: (0, _classnames.default)("".concat(bc, "__header"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), (0, _defineProperty2.default)(_cx3, "".concat(bc, "__header--with-nav"), navigation), _cx3)),
+      className: (0, _classnames.default)("".concat(bc, "__header"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
       closeClassName: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
       closeModal: onClose,
       iconDescription: closeIconDescription
@@ -234,7 +234,7 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
       element: _react2.ModalBody,
       className: "".concat(bc, "__body")
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: (0, _classnames.default)((_cx5 = {}, (0, _defineProperty2.default)(_cx5, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx5, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx5)),
+      className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition === 'right'
     }, influencer), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__right")
@@ -245,7 +245,7 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
       className: "".concat(bc, "__content"),
       alwaysRender: influencer && influencerPosition === 'right'
     }, children), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: (0, _classnames.default)((_cx6 = {}, (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
+      className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition !== 'right'
     }, influencer)), includeActions && /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__button-container")

package/lib/components/WebTerminal/WebTerminal.js

@@ -50,7 +50,6 @@ var defaults = {
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
 var WebTerminal = exports.WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref3;
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     children = _ref.children,
@@ -114,7 +113,7 @@ var WebTerminal = exports.WebTerminal = /*#__PURE__*/_react.default.forwardRef(f
   };
   return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, _objectSpread(_objectSpread({}, rest), (0, _devtools.getDevtoolsProps)(componentName)), {
     ref: ref,
-    className: (0, _classnames.default)([blockClass, className, (_ref3 = {}, (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--closed"), !open), _ref3)]),
+    className: (0, _classnames.default)([blockClass, className, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
       animation: !prefersReducedMotion && webTerminalAnimationName
     },

package/lib/components/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "Datagrid", {
     return _Datagrid.Datagrid;
   }
 });
+Object.defineProperty(exports, "DelimitedList", {
+  enumerable: true,
+  get: function get() {
+    return _DelimitedList.DelimitedList;
+  }
+});
 Object.defineProperty(exports, "EditFullPage", {
   enumerable: true,
   get: function get() {
@@ -553,4 +559,5 @@ var _EditUpdateCards = require("./EditUpdateCards");
 var _Checklist = require("./Checklist");
 var _Guidebanner = require("./Guidebanner");
 var _InlineTip = require("./InlineTip");
-var _NonLinearReading = require("./NonLinearReading");
+var _NonLinearReading = require("./NonLinearReading");
+var _DelimitedList = require("./DelimitedList");

package/lib/global/js/hooks/useResizeObserver.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResizeObserver = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 /**
@@ -15,6 +16,7 @@ var _react = require("react");
  */
 
 var useResizeObserver = exports.useResizeObserver = function useResizeObserver(ref, callback) {
+  var deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var _useState = (0, _react.useState)(-1),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     width = _useState2[0],
@@ -46,7 +48,8 @@ var useResizeObserver = exports.useResizeObserver = function useResizeObserver(r
       return;
     }
     getInitialSize();
-  }, [width, height, ref]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [width, height, ref].concat((0, _toConsumableArray2.default)(deps)));
   (0, _react.useLayoutEffect)(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;
@@ -76,7 +79,7 @@ var useResizeObserver = exports.useResizeObserver = function useResizeObserver(r
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current]);
+  }, [ref].concat((0, _toConsumableArray2.default)(deps)));
   return {
     width: width,
     height: height

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

@@ -74,6 +74,7 @@ var defaults = {
     EditTearsheetNarrow: false,
     EditFullPage: false,
     EditUpdateCards: false,
+    DelimitedList: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.20.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,7 +24,8 @@
     "es",
     "lib",
     "scss",
-    "flags.js"
+    "flags.js",
+    "telemetry.yml"
   ],
   "keywords": [
     "carbon",
@@ -48,7 +49,7 @@
     "ci-check": "node scripts/import",
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
-    "postinstall": "carbon-telemetry collect --install",
+    "postinstall": "ibmtelemetry --config=telemetry.yml",
     "test": "jest --colors",
     "//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$|^namor)/'"
@@ -75,11 +76,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
-    "@carbon/ibm-products-styles": "^2.20.0",
-    "@carbon/telemetry": "^0.1.0",
+    "@carbon/ibm-products-styles": "^2.21.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
+    "@ibm/telemetry-js": "^1.2.0",
     "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
@@ -91,11 +92,11 @@
     "@carbon/grid": "^11.21.1",
     "@carbon/layout": "^11.20.1",
     "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.46.1",
-    "@carbon/themes": "^11.28.0",
+    "@carbon/react": "^1.48.1",
+    "@carbon/themes": "^11.29.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": "d97c3273a61bd1ee38cc29be2b7dd82609fd1c2b"
+  "gitHead": "cc3061b3debb02bbbe32a8981d1ff39e9bca0f4a"
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -80,3 +80,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   ) {
   min-width: auto;
 }
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--pagination {
+  background-color: $layer-02;
+}

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

@@ -45,6 +45,7 @@
         position: sticky;
         z-index: 1;
         left: 0;
+        background-color: $layer-01;
       }
     }
 
@@ -68,6 +69,7 @@
       &.#{$block-class}__checkbox-cell-sticky-left {
         position: sticky;
         left: 0;
+        background-color: $layer-01;
       }
     }
 
@@ -183,6 +185,12 @@
     overflow-x: auto;
   }
 
+  .#{$block-class}-filter-panel
+    + .#{$block-class}__table-container-inner
+    .#{c4p-settings.$carbon-prefix}--data-table-content {
+    height: fit-content;
+  }
+
   table.#{$block-class}__table-simple {
     display: flex;
     overflow: auto;
@@ -346,7 +354,7 @@
 }
 
 .#{$block-class}__resizableColumn:hover {
-  background-color: $background-selected-hover;
+  background-color: $layer-selected-hover;
 
   .#{$block-class}__resizer {
     border-right: $spacing-01 solid $border-strong-01;

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -17,6 +17,7 @@
   display: flex;
   align-items: center;
   border-left: 1px solid $layer-active-02;
+  background-color: $layer-01;
 }
 
 .#{variables.$block-class}__right-sticky-column-header {
@@ -32,6 +33,7 @@
   display: flex;
   align-items: center;
   border-right: 1px solid $layer-active-02;
+  background-color: $layer-01;
 }
 
 .#{variables.$block-class}__left-sticky-column-header {

package/scss/components/DelimitedList/_carbon-imports.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 any Carbon component styles used from DelimitedList in this file.
+// DelimitedList uses the following Carbon components:

package/scss/components/DelimitedList/_delimited-list.scss

@@ -0,0 +1,27 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// DelimitedList uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by DelimitedList
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--delimited-list;
+
+.#{$block-class}-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/scss/components/DelimitedList/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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-imports';
+@use './delimited-list';

package/scss/components/DelimitedList/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './delimited-list';

package/scss/components/Saving/_saving.scss

@@ -32,3 +32,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--saving;
 .#{$block-class}__buttons {
   display: flex;
 }
+
+.#{$block-class}__buttons
+  .#{c4p-settings.$carbon-prefix}--btn
+  .#{c4p-settings.$carbon-prefix}--inline-loading {
+  min-block-size: auto;
+}

package/scss/components/SidePanel/_side-panel-variables.scss

@@ -5,10 +5,14 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+/* One or two values
+  * - width (first value)
+  * - min-width (optional second value)
+*/
 $side-panel-sizes: (
   xs: 16rem,
   sm: 20rem,
   md: 30rem,
   lg: 40rem,
-  2xl: 75%,
+  2xl: 40rem 75%,
 );