@carbon/ibm-products 2.35.0 → 2.36.0-alpha.27

package/lib/components/TruncatedList/TruncatedList.d.ts

@@ -1,7 +1,52 @@
+/**
+ * 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 React, { PropsWithChildren, ReactNode } from 'react';
+interface TruncatedListProps extends PropsWithChildren {
+    as?: React.ElementType | string;
+    /**
+     * Optional class name for expand/collapse button.
+     */
+    buttonClassName?: string;
+    /**
+     * The contents of the TruncatedList.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Number of items to render and display when the list is truncated and collapsed.
+     * Scrolling is not enabled when collapsed. The smallest number is 1.
+     */
+    collapsedItemsLimit?: number;
+    /**
+     * Maximum number of items to show when the list is expanded. All
+     * items are rendered when the list is expanded. Scrolling is enabled
+     * if there are more items to display than this number.
+     */
+    expandedItemsLimit?: number;
+    /**
+     * Optional callback reports the collapsed state of the list.
+     */
+    onClick?: (value: any) => void;
+    /**
+     * Text label for when the list is expanded.
+     */
+    viewLessLabel?: string;
+    /**
+     * Callback function for building the label when the list is collapsed.
+     */
+    viewMoreLabel?: (value: any) => void;
+}
 /**
  * The `TruncatedList` allows consumers to control how many items are
  * revealed to the user while giving the user the ability to expand
  * and see the entire list.
  */
-export let TruncatedList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let TruncatedList: React.ForwardRefExoticComponent<TruncatedListProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/TruncatedList/TruncatedList.js

@@ -37,7 +37,6 @@ var defaults = {
     return "View more (".concat(value, ")");
   }
 };
-
 /**
  * The `TruncatedList` allows consumers to control how many items are
  * revealed to the user while giving the user the ability to expand
@@ -93,13 +92,15 @@ exports.TruncatedList = /*#__PURE__*/React__default["default"].forwardRef(functi
   // list is both collapsed and expanded.
   React.useEffect(function () {
     if (listRef && childrenArray.length > 0) {
+      var _listRef$current;
       var numItemsToShow = isCollapsed ? minItems : maxItems;
-      var items = listRef.current.childNodes;
+      var items = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.childNodes;
       var _listHeight = 0;
       for (var index = 0; index < numItemsToShow; index++) {
-        if (items[index]) {
+        if (items && items[index]) {
           var _window;
-          var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(items[index])) === null || _window === void 0 ? void 0 : _window.height) || 16;
+          var itemElement = items[index];
+          var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(itemElement)) === null || _window === void 0 ? void 0 : _window.height) || '16';
           _listHeight += parseInt(height);
         }
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.35.0",
+  "version": "2.36.0-alpha.27+3b4e0fa75",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -108,11 +108,11 @@
     "@carbon/grid": "^11.22.0",
     "@carbon/layout": "^11.21.0",
     "@carbon/motion": "^11.17.0",
-    "@carbon/react": "^1.53.0",
-    "@carbon/themes": "^11.33.0",
+    "@carbon/react": "^1.55.0",
+    "@carbon/themes": "^11.34.0",
     "@carbon/type": "^11.26.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "7a5a7cdd83c39a7f0b5c1e5baf647ebe70ab2983"
+  "gitHead": "3b4e0fa7593382128900e68051863dbc949a319b"
 }

package/scss/components/Datagrid/styles/_useSortableColumns.scss

@@ -76,4 +76,6 @@
     opacity: 1;
     visibility: visible;
   }
+
+  background-color: $layer-selected-hover-01;
 }

package/scss/components/FullPageError/_full-page-error.scss

@@ -24,7 +24,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
 .#{$block-class} {
   height: inherit;
 }
-.#{$block-class}__error-container {
+.#{$block-class}__container {
   height: 100%;
   margin: 0 $spacing-06;
 
@@ -32,19 +32,19 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
     margin: 0 $spacing-03;
   }
 }
-.#{$block-class}__error-grid {
+.#{$block-class}__grid {
   height: 100%;
   padding-top: $spacing-07;
   padding-bottom: $spacing-07;
 }
-.#{$block-class}__error-column {
+.#{$block-class}__column {
   padding: 0;
   @include breakpoint(lg) {
     padding: 0 $spacing-07 0 0;
   }
 }
 
-.#{$block-class}__error-svg-container {
+.#{$block-class}__svg-container {
   display: flex;
   height: 100%;
   padding: $spacing-03 $spacing-03 $spacing-11 $spacing-03;
@@ -53,16 +53,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
   }
 }
 
-.#{$block-class}__error-label,
-.#{$block-class}__error-title {
+.#{$block-class}__label,
+.#{$block-class}__title {
   @include type-style('fluid-heading-05', true);
 }
 
-.#{$block-class}__error-label {
+.#{$block-class}__label {
   display: block;
   color: $text-error;
 }
-.#{$block-class}__error-title {
+.#{$block-class}__title {
   margin-bottom: $spacing-09;
 }
 
@@ -73,12 +73,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
 }
 
 // safari rendering fix
-.#{$block-class}__error-svg-container svg.#{$block-class}__error-svg {
+.#{$block-class}__svg-container svg.#{$block-class}__svg {
   width: 100%;
 }
 
 // svg theme styles
-.#{$block-class}__error-svg-container svg.#{$block-class}__error-svg path {
+.#{$block-class}__svg-container svg.#{$block-class}__svg path {
   fill: $background;
   stroke: $border-inverse;
 }

package/scss/components/UserAvatar/_user-avatar.scss

@@ -65,7 +65,6 @@ $sizes: (
 }
 
 @mixin photo-styling {
-  position: fixed;
   border-radius: 100%;
   object-fit: fill;
 }
@@ -78,14 +77,18 @@ $sizes: (
 @mixin setLightBg($order, $color) {
   :root .#{$block-class}--#{$order},
   .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--white .#{$block-class}--#{$order} {
+  .#{$carbon-prefix}--white .#{$block-class}--#{$order},
+  [storybook-carbon-theme='g10'] .#{$block-class}--#{$order},
+  [storybook-carbon-theme='white'] .#{$block-class}--#{$order} {
     @include setBgColor($color);
   }
 }
 
 @mixin setDarkBg($order, $color) {
   .#{$carbon-prefix}--g90 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order} {
+  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order},
+  [storybook-carbon-theme='g90'] .#{$block-class}--#{$order},
+  [storybook-carbon-theme='g100'] .#{$block-class}--#{$order} {
     @include setBgColor($color);
   }
 }