@carbon/ibm-products 2.35.0 → 2.36.0

package/es/components/NonLinearReading/NonLinearReading.js

@@ -20,12 +20,6 @@ var _excluded = ["children", "className", "definition", "theme"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--non-linear-reading");
 var componentName = 'NonLinearReading';
-
-// Default values for props
-var defaults = {
-  theme: 'light'
-};
-
 /**
  * Use non-linear reading when space is limited to share a
  * brief, at-a-glance, summary of a concept that may require
@@ -36,7 +30,7 @@ var NonLinearReading = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     className = _ref.className,
     definition = _ref.definition,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    theme = _ref$theme === void 0 ? 'light' : _ref$theme,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -73,6 +67,7 @@ NonLinearReading.propTypes = {
   /**
    * The keyword of the component appears as a pill.
    */
+
   children: PropTypes.node.isRequired,
   /**
    * Provide an optional class to be applied to the containing node.

package/es/components/SearchBar/SearchBar.d.ts

@@ -1,5 +1,53 @@
 /**
- * Search bar with input field and search button
+ * 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.
  */
-export let SearchBar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
+type Scopes = string[] | object[];
+interface SearchBarProps extends PropsWithChildren {
+    /** @type {string} Optional additional class name. */
+    className?: string;
+    /** @type {string} The label text for the search text input. */
+    clearButtonLabelText: string;
+    /**
+     * Whether or not the scopes MultiSelect label is visually hidden.
+     */
+    hideScopesLabel?: boolean;
+    /** @type {string} The label text for the search text input. */
+    labelText?: string;
+    /** @type {Function} Function handler for when the user changes their query search. */
+    onChange?: (event: any) => void;
+    /** @type {Function} Function handler for when the user submits a search. */
+    onSubmit?: (event: any) => void;
+    /** @type {string} Placeholder text to be displayed in the search input. */
+    placeHolderText: string;
+    /** @type {Function} Function to get the text for each scope to display in dropdown. */
+    scopeToString?: () => void;
+    /** @type {Array<any>} Array of allowed search scopes. */
+    scopes?: Scopes;
+    /** @type {string} The name text for the search scope type. */
+    scopesTypeLabel?: typeof conditionalScopePropValidator;
+    /** @type {Array<any> Array of initially selected search scopes. */
+    selectedScopes?: Scopes;
+    /**
+     * Optional custom sorting algorithm for an array of scope items.
+     * By default, scope items are sorted in ascending alphabetical order,
+     * with "selected" items moved to the start of the scope items array.
+     */
+    sortItems?: () => void;
+    /** @type {string} The label text for the search submit button. */
+    submitLabel: string;
+    /**
+     * Provide accessible label text for the scopes MultiSelect.
+     */
+    titleText?: string;
+    /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
+    translateWithId?: () => void;
+    /** @type {string} Search query value. */
+    value?: string;
+}
+export declare let SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLFormElement>>;
+declare const conditionalScopePropValidator: (props: any, propName: any, componentName: any, ...rest: any[]) => Error | null;
+export {};

package/es/components/SearchBar/SearchBar.js

@@ -29,10 +29,6 @@ var defaults = {
   selectedScopes: [],
   hideScopesLabel: true
 };
-
-/**
- * Search bar with input field and search button
- */
 var SearchBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     clearButtonLabelText = _ref.clearButtonLabelText,
@@ -45,11 +41,11 @@ var SearchBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     onSubmit = _ref$onSubmit === void 0 ? defaults.onSubmit : _ref$onSubmit,
     placeHolderText = _ref.placeHolderText,
     _ref$scopes = _ref.scopes,
-    scopes = _ref$scopes === void 0 ? defaults.scopes : _ref$scopes,
+    scopes = _ref$scopes === void 0 ? [] : _ref$scopes,
     scopesTypeLabel = _ref.scopesTypeLabel,
     scopeToString = _ref.scopeToString,
     _ref$selectedScopes = _ref.selectedScopes,
-    selectedScopes = _ref$selectedScopes === void 0 ? defaults.selectedScopes : _ref$selectedScopes,
+    selectedScopes = _ref$selectedScopes === void 0 ? [] : _ref$selectedScopes,
     sortItems = _ref.sortItems,
     submitLabel = _ref.submitLabel,
     translateWithId = _ref.translateWithId,
@@ -162,6 +158,7 @@ var conditionalScopePropValidator = function conditionalScopePropValidator(props
   if (props.scopes && props.scopes.length > 0 && !props[propName]) {
     return new Error("Required `".concat(propName, "` when `scopes` prop type is supplied to `").concat(componentName, "`. Validation failed."));
   }
+  /**@ts-ignore */
   for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
     rest[_key - 3] = arguments[_key];
   }
@@ -191,11 +188,13 @@ SearchBar.propTypes = {
   /** @type {Function} Function to get the text for each scope to display in dropdown. */
   scopeToString: PropTypes.func,
   /** @type {Array<any>} Array of allowed search scopes. */
+  /**@ts-ignore */
   scopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   /** @type {string} The name text for the search scope type. */
   // eslint-disable-next-line react/require-default-props
   scopesTypeLabel: conditionalScopePropValidator,
   /** @type {Array<any> Array of initially selected search scopes. */
+  /**@ts-ignore */
   selectedScopes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   /**
    * Optional custom sorting algorithm for an array of scope items.

package/es/components/SidePanel/SidePanel.js

@@ -24,7 +24,7 @@ import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useFocus } from '../../global/js/hooks/useFocus.js';
 
 var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
-  _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
+  _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 var blockClass = "".concat(pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
 // `any` is a work around until ActionSet is migrated to TS
@@ -387,7 +387,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }, actionToolbarButtons.map(function (_ref4) {
       var label = _ref4.label,
         kind = _ref4.kind,
+        _ref4$hasIconOnly = _ref4.hasIconOnly,
+        hasIconOnly = _ref4$hasIconOnly === void 0 ? false : _ref4$hasIconOnly,
         icon = _ref4.icon,
+        renderIcon = _ref4.renderIcon,
         tooltipPosition = _ref4.tooltipPosition,
         tooltipAlignment = _ref4.tooltipAlignment,
         leading = _ref4.leading,
@@ -399,11 +402,13 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         key: label,
         kind: kind || 'ghost',
         size: "sm",
-        renderIcon: icon,
-        iconDescription: label,
+        renderIcon: renderIcon || icon,
+        iconDescription: label
+      }, hasIconOnly && {
         tooltipPosition: tooltipPosition || 'bottom',
-        tooltipAlignment: tooltipAlignment || 'start',
-        hasIconOnly: !leading,
+        tooltipAlignment: tooltipAlignment || 'start'
+      }, {
+        hasIconOnly: hasIconOnly,
         disabled: disabled,
         className: cx(["".concat(blockClass, "__action-toolbar-button"), className, _defineProperty({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
         onClick: onClick

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

@@ -28,7 +28,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
@@ -84,13 +83,15 @@ var TruncatedList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   // list is both collapsed and expanded.
   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/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. */