@carbon/ibm-products 2.35.0 → 2.36.0

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/lib/components/UserProfileImage/UserProfileImage.d.ts

@@ -1,5 +1,69 @@
 /**
- * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-export let UserProfileImage: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/// <reference path="../../../src/custom-typings/index.d.ts" />
 import React from 'react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+import '../../global/js/utils/props-helper';
+import { IconButton } from '@carbon/react';
+type imageProps = {
+    /**
+     * When passing the image prop, supply a full path to the image to be displayed.
+     */
+    image: string;
+    /**
+     * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+     */
+    imageDescription: string;
+} | {
+    image?: never;
+    imageDescription?: never;
+};
+type UserProfileImageBaseProps = {
+    /**
+     * The background color passed should match one of the background colors in the library documentation:
+     * https://pages.github.ibm.com/cdai-design/pal/patterns/user-profile-images/
+     */
+    backgroundColor?: string;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide a custom icon to use if you need to use an icon other than the included ones
+     */
+    icon?: () => CarbonIconType | null;
+    /**
+     * When passing the initials prop, either send the initials to be used or the user's display name. The first two capital letters of the display name will be used as the initials.
+     */
+    initials?: string;
+    /**
+     * When passing the kind prop, use either "user" or "group". The values match up to the Carbon Library icons.
+     */
+    kind?: 'user' | 'group';
+    /**
+     * Set the size of the avatar circle
+     */
+    size: 'xl' | 'lg' | 'md';
+    /**
+     * Set theme in which the component will be rendered
+     */
+    theme: 'light' | 'dark';
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    tooltipAlignment?: React.ComponentProps<typeof IconButton>['align'];
+    /**
+     * Pass in the display name to have it shown on hover
+     */
+    tooltipText?: string;
+};
+type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
+/**
+ * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
+ */
+export declare let UserProfileImage: React.ForwardRefExoticComponent<UserProfileImageProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -26,7 +26,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--user-profile-image");
 var componentName = 'UserProfileImage';
@@ -93,12 +92,13 @@ exports.UserProfileImage = /*#__PURE__*/React__default["default"].forwardRef(fun
     }
   };
   var formatInitials = function formatInitials() {
-    if (initials.length === 2) {
+    var _match;
+    if (initials && initials.length === 2) {
       return initials;
     }
     // RegEx takes in the display name and returns the first and last initials. Thomas Watson and Thomas J. Watson
     // both return JW.
-    return initials.match(/(^\S\S?|\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase();
+    return ((_match = (initials || '').match(/(^\S\S?|\b\S)?/g)) === null || _match === void 0 || (_match = _match.join('').match(/(^\S|\S$)?/g)) === null || _match === void 0 ? void 0 : _match.join('').toUpperCase()) || '';
   };
   var getFillItem = function getFillItem() {
     if (image) {
@@ -158,10 +158,12 @@ exports.UserProfileImage.propTypes = {
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
    */
+  /**@ts-ignore */
   image: index["default"].string,
   /**
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
+  /**@ts-ignore */
   imageDescription: index["default"].string.isRequired.if(function (_ref2) {
     var image = _ref2.image;
     return !!image;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.35.0",
+  "version": "2.36.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -76,7 +76,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.1.5",
+    "jest-config-ibm-cloud-cognitive": "^1.1.6",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -90,13 +90,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.33.0",
+    "@carbon/ibm-products-styles": "^2.34.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@ibm/telemetry-js": "^1.2.0",
+    "@ibm/telemetry-js": "^1.5.0",
     "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
@@ -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": "b1783b0aa7a0fbfbc120c3b47ecfb6855983a37d"
 }

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);
   }
 }

package/telemetry.yml

@@ -788,3 +788,6 @@ collect:
         - 'light-magenta'
         - 'light-purple'
         - 'light-teal'
+  js:
+    functions: {}
+    tokens: null