@carbon/ibm-products 2.21.0 → 2.22.0

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.21.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.1",
-    "@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.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": "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/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%,
 );