@carbon/ibm-products 2.21.0 → 2.23.0

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.current].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.current].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.21.0",
+  "version": "2.23.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.1",
-    "@carbon/telemetry": "^0.1.0",
+    "@carbon/ibm-products-styles": "^2.22.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.47.0",
-    "@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": "752821d664db5561979e60b06ad4d70ab644a250"
+  "gitHead": "53994e2a9217f53da099f5599541618fbfbc7790"
 }

package/scss/components/CreateSidePanel/_create-side-panel.scss

@@ -24,25 +24,6 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
   padding-right: calc(20% - #{$spacing-05});
 }
 
-@each $size, $value in side-panel-vars.$side-panel-sizes {
-  .#{$create-side-panel-block-class}.#{$side-panel-block-class}__container--#{$size}
-    .#{$side-panel-block-class}__title-text {
-    width: calc(#{$value} - #{$spacing-05});
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
-    margin-bottom: $spacing-02;
-  }
-  .#{$create-side-panel-block-class}.#{$side-panel-block-class}__container--#{$size}
-    .#{$side-panel-block-class}__subtitle-text {
-    width: calc(#{$value} - #{$spacing-05});
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
-    padding-bottom: $spacing-05;
-    border-bottom: 1px solid $layer-accent-01;
-    color: $text-secondary;
-  }
-}
-
 .#{c4p-settings.$carbon-prefix}--form.#{$create-side-panel-block-class}__form {
   padding-top: $spacing-05;
 }
@@ -70,24 +51,6 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
   display: none;
 }
 
-.#{$create-side-panel-block-class}__title {
-  @include type.type-style('heading-03');
-
-  margin-bottom: $spacing-02;
-}
-
-.#{$create-side-panel-block-class}__subtitle {
-  @include type.type-style('body-compact-01');
-
-  margin-bottom: $spacing-03;
+.#{$create-side-panel-block-class} .#{$side-panel-block-class}__subtitle-text {
   color: $text-secondary;
 }
-.#{$side-panel-block-class}
-  .#{$create-side-panel-block-class}__actions-container {
-  position: absolute;
-  z-index: 4;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  margin-bottom: 0;
-}

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

@@ -6,6 +6,7 @@
 //
 
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/react/scss/components/button/tokens' as *;
@@ -45,6 +46,7 @@
         position: sticky;
         z-index: 1;
         left: 0;
+        background-color: $layer-01;
       }
     }
 
@@ -68,6 +70,7 @@
       &.#{$block-class}__checkbox-cell-sticky-left {
         position: sticky;
         left: 0;
+        background-color: $layer-01;
       }
     }
 
@@ -155,6 +158,16 @@
   background-color: $background;
 }
 
+.#{$block-class} th.#{$block-class}__with-slug {
+  @include ai-gradient('top', 100%);
+}
+
+.#{$block-class}
+  th.#{$block-class}__with-slug
+  .#{c4p-settings.$carbon-prefix}--slug {
+  margin-left: $spacing-03;
+}
+
 .#{$block-class}__grid-container {
   display: block;
   width: 100%;
@@ -183,6 +196,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;
@@ -235,6 +254,10 @@
     white-space: initial;
   }
 
+  .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug {
+    width: fit-content;
+  }
+
   .#{$block-class}__expanded-row {
     display: flex;
     overflow: hidden;
@@ -346,7 +369,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/EditSidePanel/_edit-side-panel.scss

@@ -45,22 +45,4 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
     .#{c4p-settings.$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
     display: none;
   }
-
-  .#{$side-panel-block-class} .#{$block-class}__actions-container {
-    position: absolute;
-    z-index: 4;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    margin-bottom: 0;
-  }
-
-  .#{$block-class}__actions-container {
-    position: absolute;
-    z-index: 4;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    margin-bottom: 0;
-  }
 }

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

@@ -8,6 +8,7 @@
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
 
 $block-class: #{$pkg-prefix}--filter-summary;
 
@@ -16,13 +17,33 @@ $block-class: #{$pkg-prefix}--filter-summary;
   width: 100%;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   height: to-rem(48px);
-  align-items: center;
+  align-items: start;
   padding: $spacing-03;
   border-top: 1px solid $border-subtle-01;
   background: $layer-01;
+  &.#{$block-class}__expanded {
+    height: fit-content;
+  }
 }
 
 .#{$block-class}
   .#{$pkg-prefix}--tag-set.#{$pkg-prefix}--tag-set.#{$block-class}__clear-button-inline {
   width: auto;
 }
+
+.#{$block-class}__view-all--wrapper {
+  position: absolute;
+  top: $spacing-03;
+  right: 0;
+}
+
+.#{$block-class}__expanded
+  .#{$block-class}__clear-all-button.#{$carbon-prefix}--btn {
+  margin-right: $spacing-07;
+}
+
+.#{$block-class}__view-all--wrapper
+  .#{$block-class}__view-all--chevron-multiline {
+  transform: rotate(180deg);
+  transition: transform $duration-fast-01 motion(standard);
+}

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%,
 );