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

package/es/components/Carousel/Carousel.d.ts

@@ -1,3 +1,47 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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, { ReactNode } from 'react';
+interface CarouselProps {
+    /**
+     * Provide the contents of the Carousel.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Disables the ability of the Carousel to scroll
+     * use a keyboard's left and right arrow keys.
+     */
+    disableArrowScroll?: boolean;
+    /**
+     * Enables the edges of the component to have faded styling.
+     *
+     * Pass a single string (`$color`) to specify the same color for left and right.
+     *
+     * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
+     */
+    fadedEdgeColor?: string | {
+        left: string;
+        right: string;
+    };
+    /**
+     * An optional callback function that returns `true`
+     * when the carousel has enough content to be scrollable,
+     * and `false` when there is not enough content.
+     */
+    onChangeIsScrollable?: (isScrollable: boolean) => void;
+    /**
+     * An optional callback function that returns the scroll position as
+     * a value between 0 and 1.
+     */
+    onScroll?: (scrollPercent: number) => void;
+}
 /**
  * The Carousel acts as a scaffold for other Novice to Pro content.
  *
@@ -14,5 +58,5 @@
  * 2. From the right-aligned position, when scrolling left,
  *      the left-most item should again be left-aligned.
  */
-export const Carousel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+export { Carousel };

package/es/components/Carousel/Carousel.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useCallback, useEffect, useImperativeHandle } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import { CarouselItem } from './CarouselItem.js';
@@ -14,7 +14,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
 var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--carousel");
 var componentName = 'Carousel';
@@ -53,29 +52,31 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$onScroll = _ref.onScroll,
     onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var carouselRef = useRef();
-  var scrollRef = useRef();
+  var carouselRef = useRef(null);
+  var scrollRef = useRef(null);
   // Array of refs used to reference this component's children DOM elements
   var childElementsRef = useRef(Array(React__default.Children.count(children)).fill(useRef(null)));
-  var leftFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left) || fadedEdgeColor;
-  var rightFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right) || fadedEdgeColor;
+  var leftFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
+  var rightFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
 
   // Trigger callbacks to report state of the carousel
   var handleOnScroll = useCallback(function () {
+    var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
+    if (!scrollRef.current) {
+      return;
+    }
+
     // viewport's width
-    var clientWidth = scrollRef.current.clientWidth;
+    var clientWidth = (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.clientWidth;
     // scroll position
-    var scrollLeft = parseInt(scrollRef.current.scrollLeft, 10);
+    var scrollLeft = parseInt("".concat((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollLeft), 10);
     // scrollable width
-    var scrollWidth = scrollRef.current.scrollWidth;
+    var scrollWidth = (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth;
 
     // The maximum scrollLeft achievable is the scrollable width - the viewport width.
     var scrollLeftMax = scrollWidth - clientWidth;
     // if isNaN(scrollLeft / scrollLeftMax), then set to zero
     var scrollPercent = parseFloat((scrollLeft / scrollLeftMax).toFixed(2)) || 0;
-    if (!scrollRef.current) {
-      return;
-    }
 
     // Callback 1: Does the carousel have enough content to enable scrolling?
     onChangeIsScrollable(scrollWidth > clientWidth);
@@ -95,7 +96,8 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   // Get all elements that are visible in the container.
   var getElementsInView = useCallback(function () {
-    var containerRect = scrollRef.current.getBoundingClientRect();
+    var _scrollRef$current4;
+    var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.getBoundingClientRect();
     var inViewElements = childElementsRef.current.filter(function (el) {
       return getElementInView(containerRect, el.getBoundingClientRect());
     });
@@ -104,8 +106,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   // Return container's and children's rect data
   var getContainerAndChildRectData = useCallback(function () {
+    var _scrollRef$current5;
     // Get the rect of the container
-    var containerRect = scrollRef.current.getBoundingClientRect();
+    var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.getBoundingClientRect();
     // Get all child elements that are in view of the container, and return their bounding rects.
     var elementRectsInView = getElementsInView().map(function (el) {
       return el.getBoundingClientRect();
@@ -123,27 +126,37 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     };
   }, [getElementsInView]);
   var handleScrollNext = useCallback(function () {
+    if (!scrollRef.current) {
+      return;
+    }
     var _getContainerAndChild = getContainerAndChildRectData(),
       containerRect = _getContainerAndChild.containerRect,
       visibleWidth = _getContainerAndChild.visibleWidth;
     // Set the scrollValue to the visibleWidth, but if the visibleWidth value is 0, set it to the container's width
-    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect.width;
+    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect === null || containerRect === void 0 ? void 0 : containerRect.width;
     // Increment the scrollLeft of the container
     scrollRef.current.scrollLeft += scrollValue;
   }, [getContainerAndChildRectData]);
   var handleScrollPrev = useCallback(function () {
+    var _containerRect$width, _containerRect$left;
+    if (!scrollRef.current) {
+      return;
+    }
     var _getContainerAndChild2 = getContainerAndChildRectData(),
       containerRect = _getContainerAndChild2.containerRect,
       elementRectsInView = _getContainerAndChild2.elementRectsInView,
       visibleWidth = _getContainerAndChild2.visibleWidth;
     // Set the scrollValue to the visibleWidth minus the first child's left value,
     // but if the visibleWidth value is 0, set it to the container's width plus the container's left value
-    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : containerRect.width + containerRect.left;
+    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : ((_containerRect$width = containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) !== null && _containerRect$width !== void 0 ? _containerRect$width : 0) + ((_containerRect$left = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _containerRect$left !== void 0 ? _containerRect$left : 0);
 
     // Decrement the scrollLeft of the container
     scrollRef.current.scrollLeft -= scrollValue;
   }, [getContainerAndChildRectData]);
   var handleScrollReset = useCallback(function () {
+    if (!scrollRef.current) {
+      return;
+    }
     // This doesn't trigger "scrollend"...
     scrollRef.current.scrollLeft = 0;
     // ...so trigger a callback manually.
@@ -170,6 +183,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // On window.resize, reset carousel to zero.
   useEffect(function () {
     var handleWindowResize = function handleWindowResize() {
+      if (!scrollRef.current) {
+        return;
+      }
       scrollRef.current.scrollLeft = 0;
       handleOnScroll();
     };
@@ -185,9 +201,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       handleOnScroll();
     };
     var scrollDiv = scrollRef.current;
-    scrollDiv.addEventListener('scrollend', handleScrollend);
+    scrollDiv === null || scrollDiv === void 0 || scrollDiv.addEventListener('scrollend', handleScrollend);
     return function () {
-      return scrollDiv.removeEventListener('scrollend', handleScrollend);
+      return scrollDiv === null || scrollDiv === void 0 ? void 0 : scrollDiv.removeEventListener('scrollend', handleScrollend);
     };
   }, [handleOnScroll]);
 
@@ -207,9 +223,7 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         passive: false
       });
       return function () {
-        scrollDiv.removeEventListener('wheel', handleWheel, {
-          passive: false
-        });
+        scrollDiv.removeEventListener('wheel', handleWheel);
       };
     }
   }, []);
@@ -305,6 +319,7 @@ Carousel.propTypes = {
    *
    * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
    */
+  /**@ts-ignore*/
   fadedEdgeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     left: PropTypes.string,
     right: PropTypes.string

package/es/components/Carousel/CarouselItem.d.ts

@@ -1,5 +1,22 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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, { ReactNode } from 'react';
+interface CarouselItemProps {
+    /**
+     * Provide the contents of the CarouselItem.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
 /**
  * TODO: A description of the component.
  */
-export const CarouselItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
+export { CarouselItem };

package/es/components/Carousel/CarouselItem.js

@@ -13,7 +13,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
 var _excluded = ["children", "className"];
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 

package/es/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/es/components/UserProfileImage/UserProfileImage.js

@@ -17,7 +17,6 @@ import { usePrefix, Tooltip } from '@carbon/react';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
 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(pkg.prefix, "--user-profile-image");
 var componentName = 'UserProfileImage';
@@ -84,12 +83,13 @@ var UserProfileImage = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     }
   };
   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) {
@@ -149,10 +149,12 @@ UserProfileImage.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 (_ref2) {
     var image = _ref2.image;
     return !!image;

package/lib/components/Carousel/Carousel.d.ts

@@ -1,3 +1,47 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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, { ReactNode } from 'react';
+interface CarouselProps {
+    /**
+     * Provide the contents of the Carousel.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Disables the ability of the Carousel to scroll
+     * use a keyboard's left and right arrow keys.
+     */
+    disableArrowScroll?: boolean;
+    /**
+     * Enables the edges of the component to have faded styling.
+     *
+     * Pass a single string (`$color`) to specify the same color for left and right.
+     *
+     * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
+     */
+    fadedEdgeColor?: string | {
+        left: string;
+        right: string;
+    };
+    /**
+     * An optional callback function that returns `true`
+     * when the carousel has enough content to be scrollable,
+     * and `false` when there is not enough content.
+     */
+    onChangeIsScrollable?: (isScrollable: boolean) => void;
+    /**
+     * An optional callback function that returns the scroll position as
+     * a value between 0 and 1.
+     */
+    onScroll?: (scrollPercent: number) => void;
+}
 /**
  * The Carousel acts as a scaffold for other Novice to Pro content.
  *
@@ -14,5 +58,5 @@
  * 2. From the right-aligned position, when scrolling left,
  *      the left-most item should again be left-aligned.
  */
-export const Carousel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+export { Carousel };

package/lib/components/Carousel/Carousel.js

@@ -23,7 +23,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--carousel");
 var componentName = 'Carousel';
@@ -62,29 +61,31 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     _ref$onScroll = _ref.onScroll,
     onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var carouselRef = React.useRef();
-  var scrollRef = React.useRef();
+  var carouselRef = React.useRef(null);
+  var scrollRef = React.useRef(null);
   // Array of refs used to reference this component's children DOM elements
   var childElementsRef = React.useRef(Array(React__default["default"].Children.count(children)).fill(React.useRef(null)));
-  var leftFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left) || fadedEdgeColor;
-  var rightFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right) || fadedEdgeColor;
+  var leftFadedEdgeColor = _rollupPluginBabelHelpers["typeof"](fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
+  var rightFadedEdgeColor = _rollupPluginBabelHelpers["typeof"](fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
 
   // Trigger callbacks to report state of the carousel
   var handleOnScroll = React.useCallback(function () {
+    var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
+    if (!scrollRef.current) {
+      return;
+    }
+
     // viewport's width
-    var clientWidth = scrollRef.current.clientWidth;
+    var clientWidth = (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.clientWidth;
     // scroll position
-    var scrollLeft = parseInt(scrollRef.current.scrollLeft, 10);
+    var scrollLeft = parseInt("".concat((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollLeft), 10);
     // scrollable width
-    var scrollWidth = scrollRef.current.scrollWidth;
+    var scrollWidth = (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth;
 
     // The maximum scrollLeft achievable is the scrollable width - the viewport width.
     var scrollLeftMax = scrollWidth - clientWidth;
     // if isNaN(scrollLeft / scrollLeftMax), then set to zero
     var scrollPercent = parseFloat((scrollLeft / scrollLeftMax).toFixed(2)) || 0;
-    if (!scrollRef.current) {
-      return;
-    }
 
     // Callback 1: Does the carousel have enough content to enable scrolling?
     onChangeIsScrollable(scrollWidth > clientWidth);
@@ -104,7 +105,8 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
 
   // Get all elements that are visible in the container.
   var getElementsInView = React.useCallback(function () {
-    var containerRect = scrollRef.current.getBoundingClientRect();
+    var _scrollRef$current4;
+    var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.getBoundingClientRect();
     var inViewElements = childElementsRef.current.filter(function (el) {
       return getElementInView(containerRect, el.getBoundingClientRect());
     });
@@ -113,8 +115,9 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
 
   // Return container's and children's rect data
   var getContainerAndChildRectData = React.useCallback(function () {
+    var _scrollRef$current5;
     // Get the rect of the container
-    var containerRect = scrollRef.current.getBoundingClientRect();
+    var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.getBoundingClientRect();
     // Get all child elements that are in view of the container, and return their bounding rects.
     var elementRectsInView = getElementsInView().map(function (el) {
       return el.getBoundingClientRect();
@@ -132,27 +135,37 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     };
   }, [getElementsInView]);
   var handleScrollNext = React.useCallback(function () {
+    if (!scrollRef.current) {
+      return;
+    }
     var _getContainerAndChild = getContainerAndChildRectData(),
       containerRect = _getContainerAndChild.containerRect,
       visibleWidth = _getContainerAndChild.visibleWidth;
     // Set the scrollValue to the visibleWidth, but if the visibleWidth value is 0, set it to the container's width
-    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect.width;
+    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect === null || containerRect === void 0 ? void 0 : containerRect.width;
     // Increment the scrollLeft of the container
     scrollRef.current.scrollLeft += scrollValue;
   }, [getContainerAndChildRectData]);
   var handleScrollPrev = React.useCallback(function () {
+    var _containerRect$width, _containerRect$left;
+    if (!scrollRef.current) {
+      return;
+    }
     var _getContainerAndChild2 = getContainerAndChildRectData(),
       containerRect = _getContainerAndChild2.containerRect,
       elementRectsInView = _getContainerAndChild2.elementRectsInView,
       visibleWidth = _getContainerAndChild2.visibleWidth;
     // Set the scrollValue to the visibleWidth minus the first child's left value,
     // but if the visibleWidth value is 0, set it to the container's width plus the container's left value
-    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : containerRect.width + containerRect.left;
+    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : ((_containerRect$width = containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) !== null && _containerRect$width !== void 0 ? _containerRect$width : 0) + ((_containerRect$left = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _containerRect$left !== void 0 ? _containerRect$left : 0);
 
     // Decrement the scrollLeft of the container
     scrollRef.current.scrollLeft -= scrollValue;
   }, [getContainerAndChildRectData]);
   var handleScrollReset = React.useCallback(function () {
+    if (!scrollRef.current) {
+      return;
+    }
     // This doesn't trigger "scrollend"...
     scrollRef.current.scrollLeft = 0;
     // ...so trigger a callback manually.
@@ -179,6 +192,9 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   // On window.resize, reset carousel to zero.
   React.useEffect(function () {
     var handleWindowResize = function handleWindowResize() {
+      if (!scrollRef.current) {
+        return;
+      }
       scrollRef.current.scrollLeft = 0;
       handleOnScroll();
     };
@@ -194,9 +210,9 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       handleOnScroll();
     };
     var scrollDiv = scrollRef.current;
-    scrollDiv.addEventListener('scrollend', handleScrollend);
+    scrollDiv === null || scrollDiv === void 0 || scrollDiv.addEventListener('scrollend', handleScrollend);
     return function () {
-      return scrollDiv.removeEventListener('scrollend', handleScrollend);
+      return scrollDiv === null || scrollDiv === void 0 ? void 0 : scrollDiv.removeEventListener('scrollend', handleScrollend);
     };
   }, [handleOnScroll]);
 
@@ -216,9 +232,7 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
         passive: false
       });
       return function () {
-        scrollDiv.removeEventListener('wheel', handleWheel, {
-          passive: false
-        });
+        scrollDiv.removeEventListener('wheel', handleWheel);
       };
     }
   }, []);
@@ -314,6 +328,7 @@ Carousel.propTypes = {
    *
    * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
    */
+  /**@ts-ignore*/
   fadedEdgeColor: index["default"].oneOfType([index["default"].string, index["default"].shape({
     left: index["default"].string,
     right: index["default"].string

package/lib/components/Carousel/CarouselItem.d.ts

@@ -1,5 +1,22 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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, { ReactNode } from 'react';
+interface CarouselItemProps {
+    /**
+     * Provide the contents of the CarouselItem.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
 /**
  * TODO: A description of the component.
  */
-export const CarouselItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
+export { CarouselItem };

package/lib/components/Carousel/CarouselItem.js

@@ -22,7 +22,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className"];
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 

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.36.0-alpha.27+3b4e0fa75",
+  "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",
@@ -114,5 +114,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "3b4e0fa7593382128900e68051863dbc949a319b"
+  "gitHead": "b1783b0aa7a0fbfbc120c3b47ecfb6855983a37d"
 }

package/telemetry.yml

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