@carbon/ibm-products 2.43.2-canary.104 → 2.43.2-canary.108

package/es/components/ActionBar/ActionBar.d.ts

@@ -1,5 +1,61 @@
+import React, { PropsWithChildren } from 'react';
+import { ButtonProps } from '@carbon/type';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+interface Action extends ButtonProps {
+    id?: string;
+    key: string;
+    iconDescription: string;
+    label: string;
+    onClick?: () => void;
+    renderIcon: CarbonIconType;
+}
+interface ActionBarProps extends PropsWithChildren {
+    /**
+     * Specifies the action bar items. Each item is specified as an object
+     * with required fields: key for array rendering, renderIcon, iconDescription and
+     * label to provide the icon to display,
+     * and optional 'onClick' to receive notifications when the button is clicked.
+     * Additional fields in the object will be passed to the
+     * Button component, and these can include 'disabled', 'ref', 'className',
+     * and any other Button props.
+     *
+     * Note that the Button props 'kind', 'size',
+     * 'tooltipPosition', 'tooltipAlignment' and 'type' are ignored, as these
+     * cannot be used for an action bar item.
+     *
+     * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions?: readonly Action[];
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * maxVisible : Maximum action bar items visible before going into the overflow menu
+     */
+    maxVisible?: number;
+    /**
+     * class name applied to the overflow options
+     */
+    menuOptionsClass?: string;
+    /**
+     * onItemCountChange - event reporting maxWidth
+     */
+    onWidthChange?: (sizes: {
+        minWidth: number;
+        maxWidth: number;
+    }) => void;
+    /**
+     * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
+     */
+    overflowAriaLabel: string;
+    /**
+     * align tags to right of available space
+     */
+    rightAlign?: boolean;
+}
 /**
  * The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
  */
-export let ActionBar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/ActionBar/ActionBar.js

@@ -20,7 +20,6 @@ import { ActionBarOverflowItems } from './ActionBarOverflowItems.js';
 var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "rightAlign"],
   _excluded2 = ["key", "id"],
   _excluded3 = ["key"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--action-bar");
 var componentName = 'ActionBar';
@@ -29,7 +28,6 @@ var componentName = 'ActionBar';
 var defaults = {
   actions: Object.freeze([])
 };
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -53,7 +51,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     displayedItems = _useState4[0],
     setDisplayedItems = _useState4[1];
-  var _useState5 = useState([]),
+  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
     hiddenSizingItems = _useState6[0],
     setHiddenSizingItems = _useState6[1];
@@ -61,7 +59,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var refDisplayedItems = useRef(null);
   var sizingRef = useRef(null);
   var sizes = useRef({});
-  var backupRef = useRef();
+  var backupRef = useRef(null);
   var localRef = ref || backupRef;
 
   // create hidden sizing items
@@ -121,24 +119,25 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var checkFullyVisibleItems = function checkFullyVisibleItems() {
     /* istanbul ignore if */
     if (sizingRef.current) {
+      var _refDisplayedItems$cu;
       var sizingItems = Array.from(sizingRef.current.querySelectorAll(".".concat(blockClass, "__hidden-sizing-item")));
 
       // first item is always the overflow even if nothing else is rendered
       var overflowItem = sizingItems.shift();
 
       // determine how many will fit
-      var spaceAvailable = refDisplayedItems.current.offsetWidth;
+      var spaceAvailable = (_refDisplayedItems$cu = refDisplayedItems.current) === null || _refDisplayedItems$cu === void 0 ? void 0 : _refDisplayedItems$cu.offsetWidth;
       var willFit = 0;
       var maxVisibleWidth = 0;
       var fitLimit = maxVisible ? Math.min(maxVisible, sizingItems.length) : sizingItems.length;
 
       // loop checking the space available
       for (var i = 0; i < fitLimit; i++) {
-        var newSpaceAvailable = spaceAvailable - sizingItems[i].offsetWidth;
+        var newSpaceAvailable = spaceAvailable && spaceAvailable - sizingItems[i].offsetWidth;
 
         // update maxVisibleWidth for later use by onWidthChange
         maxVisibleWidth += sizingItems[i].offsetWidth;
-        if (newSpaceAvailable >= 0) {
+        if (newSpaceAvailable && newSpaceAvailable >= 0) {
           spaceAvailable = newSpaceAvailable;
           willFit += 1;
         }
@@ -148,7 +147,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       var overflowWidth = overflowItem.offsetWidth;
       if (willFit < sizingItems.length) {
         // Check space for overflow
-        while (willFit > 0 && spaceAvailable < overflowWidth) {
+        while (willFit > 0 && spaceAvailable && spaceAvailable < overflowWidth) {
           willFit -= 1;
 
           // Highly unlikely that any action bar item is narrower than the overflow item
@@ -161,7 +160,10 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         sizes.current.minWidth = overflowWidth;
         sizes.current.maxWidth = maxVisibleWidth;
         // emit onWidthChange
-        onWidthChange(_objectSpread2({}, sizes.current));
+        onWidthChange({
+          minWidth: overflowWidth,
+          maxWidth: maxVisibleWidth
+        });
       }
       if (willFit < 1) {
         setDisplayCount(0);
@@ -212,14 +214,17 @@ ActionBar.propTypes = {
    *
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
+  /**@ts-ignore */
   actions: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Button.propTypes, [
   // props not desired from Button.propTypes
   'kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
+    id: PropTypes.string,
     // Additional props
     key: PropTypes.string.isRequired,
     // Redefine as form different  to Button and a key prop used by ActionBarItems
     iconDescription: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
+    /**@ts-ignore */
     renderIcon: Button.propTypes.renderIcon.isRequired,
     // We duplicate onClick here to improve DocGen in Storybook
     onClick: PropTypes.func

package/es/components/ActionBar/ActionBarItem.d.ts

@@ -1,5 +1,39 @@
+import React, { PropsWithChildren } from 'react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+interface ActionBarItemProps extends PropsWithChildren {
+    /**
+     * Specify an optional className to be added to your Button
+     *
+     * (inherited from Carbon Button)
+     */
+    className?: string;
+    /**
+     * If specifying the `renderIcon` prop, provide a description for that icon that can
+     * be read by screen readers
+     *
+     * (inherited from Carbon Button)
+     */
+    label?: string;
+    /**
+     * Optional click handler
+     *
+     * (inherited from Carbon Button)
+     */
+    onClick?: () => void;
+    /**
+     * Optional prop to allow overriding the icon rendering.
+     * Can be a React component class
+     *
+     * (inherited from Carbon Button)
+     */
+    renderIcon?: CarbonIconType;
+    /**
+     * Optional tab index
+     */
+    tabIndex?: number;
+}
 /**
  * The ActionBarItem is used in the page header to populate the action bar
  */
-export let ActionBarItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let ActionBarItem: React.ForwardRefExoticComponent<ActionBarItemProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/ActionBar/ActionBarItem.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
@@ -13,11 +13,9 @@ import { pkg } from '../../settings.js';
 import { IconButton } from '@carbon/react';
 
 var _excluded = ["label", "className", "renderIcon"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'ActionBarItem';
 var blockClass = "".concat(pkg.prefix, "--action-bar-item");
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -85,7 +83,12 @@ ActionBarItem.propTypes = _objectSpread2(_objectSpread2({}, propTypes), {}, {
    *
    * (inherited from Carbon Button)
    */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  /**@ts-ignore */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Optional tab index
+   */
+  tabIndex: PropTypes.number
 });
 
 export { ActionBarItem };

package/es/components/ActionBar/ActionBarOverflowItems.d.ts

@@ -1,18 +1,57 @@
-export function ActionBarOverflowItems({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: {
-    className: any;
-    menuOptionsClass: any;
-    overflowItems: any;
-    overflowAriaLabel: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace ActionBarOverflowItems {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let menuOptionsClass: PropTypes.Requireable<string>;
-        let overflowAriaLabel: PropTypes.Requireable<string>;
-        let overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
-    }
-}
-declare const componentName: "ActionBar";
+import { PropsWithChildren, ReactElement } from 'react';
 import PropTypes from 'prop-types';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+type OverflowItem = {
+    label: string;
+    onClick: () => void;
+    renderIcon: CarbonIconType;
+};
+interface ActionBarOverflowItemProps extends PropsWithChildren {
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * class name applied to the overflow options
+     */
+    menuOptionsClass?: string;
+    /**
+     * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
+     */
+    overflowAriaLabel?: string;
+    /**
+     * overflowItems: items to bre shown in the ActionBar overflow menu
+     */
+    overflowItems?: ReactElement<OverflowItem>[];
+    /**
+     * Optional tab index
+     */
+    tabIndex?: number;
+}
+export declare const ActionBarOverflowItems: {
+    ({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * className
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * class name applied to the overflow options
+         */
+        menuOptionsClass: PropTypes.Requireable<string>;
+        /**
+         * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
+         */
+        overflowAriaLabel: PropTypes.Requireable<string>;
+        /**
+         * overflowItems: items to bre shown in the ActionBar overflow menu
+         */
+        overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
+        /**
+         * Optional tab index
+         */
+        tabIndex: PropTypes.Requireable<number>;
+    };
+};
 export {};

package/es/components/ActionBar/ActionBarOverflowItems.js

@@ -33,17 +33,17 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
     // This uses a copy of a menu item option
     // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
     // div equivalent below is based on Carbon 10.25.0
-    var ItemIcon = item.props.renderIcon;
+    var ItemIcon = item === null || item === void 0 ? void 0 : item.props.renderIcon;
     return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
       className: "".concat(blockClass, "__item"),
-      onClick: item.props.onClick,
+      onClick: item === null || item === void 0 ? void 0 : item.props.onClick,
       itemText: /*#__PURE__*/React__default.createElement("div", {
         className: "".concat(blockClass, "__item-content"),
         "aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")
       }, /*#__PURE__*/React__default.createElement("span", {
         className: "".concat(blockClass, "__item-label"),
         id: "".concat(internalId.current, "-").concat(index, "--item-label")
-      }, item.props.label), typeof item.props.renderIcon === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item.props.renderIcon)
+      }, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
     });
   }));
 };
@@ -65,7 +65,11 @@ ActionBarOverflowItems.propTypes = {
   /**
    * overflowItems: items to bre shown in the ActionBar overflow menu
    */
-  overflowItems: PropTypes.arrayOf(PropTypes.element)
+  overflowItems: PropTypes.arrayOf(PropTypes.element),
+  /**
+   * Optional tab index
+   */
+  tabIndex: PropTypes.number
 };
 
 export { ActionBarOverflowItems };

package/es/components/UserAvatar/UserAvatar.d.ts

@@ -1,2 +1,60 @@
-export let UserAvatar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * 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 from 'react';
+import '../../global/js/utils/props-helper';
+/**
+ * TODO: A description of the component.
+ */
+type BackgroundColor = 'order-1-cyan' | 'order-2-gray' | 'order-3-green' | 'order-4-magenta' | 'order-5-purple' | 'order-6-teal' | 'order-7-cyan' | 'order-8-gray' | 'order-9-green' | 'order-10-magenta' | 'order-11-purple' | 'order-12-teal';
+type Size = 'xl' | 'lg' | 'md' | 'sm';
+type TooltipAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+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 UserAvatarBaseProps = {
+    /**
+     * Provide the background color need to be set for UserAvatar.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
+     */
+    name?: string;
+    /**
+     * Provide a custom icon to use if you need to use an icon other than the default one
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Set the size of the avatar circle
+     */
+    size?: Size;
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    tooltipAlignment?: TooltipAlignment;
+    /**
+     * Pass in the display name to have it shown on hover
+     */
+    tooltipText?: string;
+};
+type UserAvatarProps = UserAvatarBaseProps & ImageProps;
+export declare let UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/UserAvatar/UserAvatar.js

@@ -26,42 +26,23 @@ var componentName = 'UserAvatar';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
-// Default values for props
-// const defaults = {
-//   /* TODO: add defaults for relevant props if needed */
-// };
-
 /**
  * TODO: A description of the component.
  */
 
-var defaults = {
-  size: 'md',
-  tooltipAlignment: 'bottom',
-  backgroundColor: 'order-1-cyan'
-};
 var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'order-1-cyan' : _ref$backgroundColor,
     className = _ref.className,
     image = _ref.image,
     imageDescription = _ref.imageDescription,
     name = _ref.name,
     RenderIcon = _ref.renderIcon,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
     tooltipText = _ref.tooltipText,
     _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
+    tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
     rest = _objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = usePrefix();
   var iconSize = {
@@ -72,7 +53,7 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   };
   var formatInitials = function formatInitials() {
     var _ref2;
-    var parts = name.split(' ');
+    var parts = (name === null || name === void 0 ? void 0 : name.split(' ')) || [];
     var firstChar = parts[0].charAt(0).toUpperCase();
     var secondChar = parts[0].charAt(1).toUpperCase();
     if (parts.length === 1) {
@@ -152,10 +133,12 @@ UserAvatar.propTypes = {
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
    */
+  /**@ts-ignore */
   image: PropTypes.string,
   /**
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
+  /**@ts-ignore */
   imageDescription: PropTypes.string.isRequired.if(function (_ref3) {
     var image = _ref3.image;
     return !!image;
@@ -167,6 +150,7 @@ UserAvatar.propTypes = {
   /**
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
+  /**@ts-ignore */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Set the size of the avatar circle

package/lib/components/ActionBar/ActionBar.d.ts

@@ -1,5 +1,61 @@
+import React, { PropsWithChildren } from 'react';
+import { ButtonProps } from '@carbon/type';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+interface Action extends ButtonProps {
+    id?: string;
+    key: string;
+    iconDescription: string;
+    label: string;
+    onClick?: () => void;
+    renderIcon: CarbonIconType;
+}
+interface ActionBarProps extends PropsWithChildren {
+    /**
+     * Specifies the action bar items. Each item is specified as an object
+     * with required fields: key for array rendering, renderIcon, iconDescription and
+     * label to provide the icon to display,
+     * and optional 'onClick' to receive notifications when the button is clicked.
+     * Additional fields in the object will be passed to the
+     * Button component, and these can include 'disabled', 'ref', 'className',
+     * and any other Button props.
+     *
+     * Note that the Button props 'kind', 'size',
+     * 'tooltipPosition', 'tooltipAlignment' and 'type' are ignored, as these
+     * cannot be used for an action bar item.
+     *
+     * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions?: readonly Action[];
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * maxVisible : Maximum action bar items visible before going into the overflow menu
+     */
+    maxVisible?: number;
+    /**
+     * class name applied to the overflow options
+     */
+    menuOptionsClass?: string;
+    /**
+     * onItemCountChange - event reporting maxWidth
+     */
+    onWidthChange?: (sizes: {
+        minWidth: number;
+        maxWidth: number;
+    }) => void;
+    /**
+     * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
+     */
+    overflowAriaLabel: string;
+    /**
+     * align tags to right of available space
+     */
+    rightAlign?: boolean;
+}
 /**
  * The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
  */
-export let ActionBar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/ActionBar/ActionBar.js

@@ -29,7 +29,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "rightAlign"],
   _excluded2 = ["key", "id"],
   _excluded3 = ["key"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--action-bar");
 var componentName = 'ActionBar';
@@ -38,7 +37,6 @@ var componentName = 'ActionBar';
 var defaults = {
   actions: Object.freeze([])
 };
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -62,7 +60,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     displayedItems = _useState4[0],
     setDisplayedItems = _useState4[1];
-  var _useState5 = React.useState([]),
+  var _useState5 = React.useState(null),
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
     hiddenSizingItems = _useState6[0],
     setHiddenSizingItems = _useState6[1];
@@ -70,7 +68,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
   var refDisplayedItems = React.useRef(null);
   var sizingRef = React.useRef(null);
   var sizes = React.useRef({});
-  var backupRef = React.useRef();
+  var backupRef = React.useRef(null);
   var localRef = ref || backupRef;
 
   // create hidden sizing items
@@ -130,24 +128,25 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
   var checkFullyVisibleItems = function checkFullyVisibleItems() {
     /* istanbul ignore if */
     if (sizingRef.current) {
+      var _refDisplayedItems$cu;
       var sizingItems = Array.from(sizingRef.current.querySelectorAll(".".concat(blockClass, "__hidden-sizing-item")));
 
       // first item is always the overflow even if nothing else is rendered
       var overflowItem = sizingItems.shift();
 
       // determine how many will fit
-      var spaceAvailable = refDisplayedItems.current.offsetWidth;
+      var spaceAvailable = (_refDisplayedItems$cu = refDisplayedItems.current) === null || _refDisplayedItems$cu === void 0 ? void 0 : _refDisplayedItems$cu.offsetWidth;
       var willFit = 0;
       var maxVisibleWidth = 0;
       var fitLimit = maxVisible ? Math.min(maxVisible, sizingItems.length) : sizingItems.length;
 
       // loop checking the space available
       for (var i = 0; i < fitLimit; i++) {
-        var newSpaceAvailable = spaceAvailable - sizingItems[i].offsetWidth;
+        var newSpaceAvailable = spaceAvailable && spaceAvailable - sizingItems[i].offsetWidth;
 
         // update maxVisibleWidth for later use by onWidthChange
         maxVisibleWidth += sizingItems[i].offsetWidth;
-        if (newSpaceAvailable >= 0) {
+        if (newSpaceAvailable && newSpaceAvailable >= 0) {
           spaceAvailable = newSpaceAvailable;
           willFit += 1;
         }
@@ -157,7 +156,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
       var overflowWidth = overflowItem.offsetWidth;
       if (willFit < sizingItems.length) {
         // Check space for overflow
-        while (willFit > 0 && spaceAvailable < overflowWidth) {
+        while (willFit > 0 && spaceAvailable && spaceAvailable < overflowWidth) {
           willFit -= 1;
 
           // Highly unlikely that any action bar item is narrower than the overflow item
@@ -170,7 +169,10 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
         sizes.current.minWidth = overflowWidth;
         sizes.current.maxWidth = maxVisibleWidth;
         // emit onWidthChange
-        onWidthChange(_rollupPluginBabelHelpers.objectSpread2({}, sizes.current));
+        onWidthChange({
+          minWidth: overflowWidth,
+          maxWidth: maxVisibleWidth
+        });
       }
       if (willFit < 1) {
         setDisplayCount(0);
@@ -221,14 +223,17 @@ exports.ActionBar.propTypes = {
    *
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
+  /**@ts-ignore */
   actions: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Button.propTypes, [
   // props not desired from Button.propTypes
   'kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
+    id: index["default"].string,
     // Additional props
     key: index["default"].string.isRequired,
     // Redefine as form different  to Button and a key prop used by ActionBarItems
     iconDescription: index["default"].string.isRequired,
     label: index["default"].string.isRequired,
+    /**@ts-ignore */
     renderIcon: react.Button.propTypes.renderIcon.isRequired,
     // We duplicate onClick here to improve DocGen in Storybook
     onClick: index["default"].func

package/lib/components/ActionBar/ActionBarItem.d.ts

@@ -1,5 +1,39 @@
+import React, { PropsWithChildren } from 'react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+interface ActionBarItemProps extends PropsWithChildren {
+    /**
+     * Specify an optional className to be added to your Button
+     *
+     * (inherited from Carbon Button)
+     */
+    className?: string;
+    /**
+     * If specifying the `renderIcon` prop, provide a description for that icon that can
+     * be read by screen readers
+     *
+     * (inherited from Carbon Button)
+     */
+    label?: string;
+    /**
+     * Optional click handler
+     *
+     * (inherited from Carbon Button)
+     */
+    onClick?: () => void;
+    /**
+     * Optional prop to allow overriding the icon rendering.
+     * Can be a React component class
+     *
+     * (inherited from Carbon Button)
+     */
+    renderIcon?: CarbonIconType;
+    /**
+     * Optional tab index
+     */
+    tabIndex?: number;
+}
 /**
  * The ActionBarItem is used in the page header to populate the action bar
  */
-export let ActionBarItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let ActionBarItem: React.ForwardRefExoticComponent<ActionBarItemProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/ActionBar/ActionBarItem.js

@@ -22,11 +22,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["label", "className", "renderIcon"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'ActionBarItem';
 var blockClass = "".concat(settings.pkg.prefix, "--action-bar-item");
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -94,5 +92,10 @@ exports.ActionBarItem.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollu
    *
    * (inherited from Carbon Button)
    */
-  renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object])
+  /**@ts-ignore */
+  renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  /**
+   * Optional tab index
+   */
+  tabIndex: index["default"].number
 });

package/lib/components/ActionBar/ActionBarOverflowItems.d.ts

@@ -1,18 +1,57 @@
-export function ActionBarOverflowItems({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: {
-    className: any;
-    menuOptionsClass: any;
-    overflowItems: any;
-    overflowAriaLabel: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace ActionBarOverflowItems {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let menuOptionsClass: PropTypes.Requireable<string>;
-        let overflowAriaLabel: PropTypes.Requireable<string>;
-        let overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
-    }
-}
-declare const componentName: "ActionBar";
+import { PropsWithChildren, ReactElement } from 'react';
 import PropTypes from 'prop-types';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+type OverflowItem = {
+    label: string;
+    onClick: () => void;
+    renderIcon: CarbonIconType;
+};
+interface ActionBarOverflowItemProps extends PropsWithChildren {
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * class name applied to the overflow options
+     */
+    menuOptionsClass?: string;
+    /**
+     * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
+     */
+    overflowAriaLabel?: string;
+    /**
+     * overflowItems: items to bre shown in the ActionBar overflow menu
+     */
+    overflowItems?: ReactElement<OverflowItem>[];
+    /**
+     * Optional tab index
+     */
+    tabIndex?: number;
+}
+export declare const ActionBarOverflowItems: {
+    ({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * className
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * class name applied to the overflow options
+         */
+        menuOptionsClass: PropTypes.Requireable<string>;
+        /**
+         * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
+         */
+        overflowAriaLabel: PropTypes.Requireable<string>;
+        /**
+         * overflowItems: items to bre shown in the ActionBar overflow menu
+         */
+        overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
+        /**
+         * Optional tab index
+         */
+        tabIndex: PropTypes.Requireable<number>;
+    };
+};
 export {};

package/lib/components/ActionBar/ActionBarOverflowItems.js

@@ -42,17 +42,17 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
     // This uses a copy of a menu item option
     // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
     // div equivalent below is based on Carbon 10.25.0
-    var ItemIcon = item.props.renderIcon;
+    var ItemIcon = item === null || item === void 0 ? void 0 : item.props.renderIcon;
     return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenuItem, {
       className: "".concat(blockClass, "__item"),
-      onClick: item.props.onClick,
+      onClick: item === null || item === void 0 ? void 0 : item.props.onClick,
       itemText: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "".concat(blockClass, "__item-content"),
         "aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")
       }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "".concat(blockClass, "__item-label"),
         id: "".concat(internalId.current, "-").concat(index, "--item-label")
-      }, item.props.label), typeof item.props.renderIcon === 'function' ? /*#__PURE__*/React__default["default"].createElement(ItemIcon, null) : item.props.renderIcon)
+      }, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default["default"].createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
     });
   }));
 };
@@ -74,7 +74,11 @@ ActionBarOverflowItems.propTypes = {
   /**
    * overflowItems: items to bre shown in the ActionBar overflow menu
    */
-  overflowItems: index["default"].arrayOf(index["default"].element)
+  overflowItems: index["default"].arrayOf(index["default"].element),
+  /**
+   * Optional tab index
+   */
+  tabIndex: index["default"].number
 };
 
 exports.ActionBarOverflowItems = ActionBarOverflowItems;

package/lib/components/UserAvatar/UserAvatar.d.ts

@@ -1,2 +1,60 @@
-export let UserAvatar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * 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 from 'react';
+import '../../global/js/utils/props-helper';
+/**
+ * TODO: A description of the component.
+ */
+type BackgroundColor = 'order-1-cyan' | 'order-2-gray' | 'order-3-green' | 'order-4-magenta' | 'order-5-purple' | 'order-6-teal' | 'order-7-cyan' | 'order-8-gray' | 'order-9-green' | 'order-10-magenta' | 'order-11-purple' | 'order-12-teal';
+type Size = 'xl' | 'lg' | 'md' | 'sm';
+type TooltipAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+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 UserAvatarBaseProps = {
+    /**
+     * Provide the background color need to be set for UserAvatar.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
+     */
+    name?: string;
+    /**
+     * Provide a custom icon to use if you need to use an icon other than the default one
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Set the size of the avatar circle
+     */
+    size?: Size;
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    tooltipAlignment?: TooltipAlignment;
+    /**
+     * Pass in the display name to have it shown on hover
+     */
+    tooltipText?: string;
+};
+type UserAvatarProps = UserAvatarBaseProps & ImageProps;
+export declare let UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/UserAvatar/UserAvatar.js

@@ -35,42 +35,23 @@ var componentName = 'UserAvatar';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
-// Default values for props
-// const defaults = {
-//   /* TODO: add defaults for relevant props if needed */
-// };
-
 /**
  * TODO: A description of the component.
  */
 
-var defaults = {
-  size: 'md',
-  tooltipAlignment: 'bottom',
-  backgroundColor: 'order-1-cyan'
-};
 exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'order-1-cyan' : _ref$backgroundColor,
     className = _ref.className,
     image = _ref.image,
     imageDescription = _ref.imageDescription,
     name = _ref.name,
     RenderIcon = _ref.renderIcon,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
     tooltipText = _ref.tooltipText,
     _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
+    tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = react.usePrefix();
   var iconSize = {
@@ -81,7 +62,7 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
   };
   var formatInitials = function formatInitials() {
     var _ref2;
-    var parts = name.split(' ');
+    var parts = (name === null || name === void 0 ? void 0 : name.split(' ')) || [];
     var firstChar = parts[0].charAt(0).toUpperCase();
     var secondChar = parts[0].charAt(1).toUpperCase();
     if (parts.length === 1) {
@@ -161,10 +142,12 @@ exports.UserAvatar.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 (_ref3) {
     var image = _ref3.image;
     return !!image;
@@ -176,6 +159,7 @@ exports.UserAvatar.propTypes = {
   /**
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
+  /**@ts-ignore */
   renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   /**
    * Set the size of the avatar circle

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.104+5c1e5682a",
+  "version": "2.43.2-canary.108+81d820dc5",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.39.1-canary.114+5c1e5682a",
+    "@carbon/ibm-products-styles": "^2.42.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "5c1e5682a1d849f809f252555001adadef3c2800"
+  "gitHead": "81d820dc51a3b2f5a1481392e6af025362f65edd"
 }