@carbon/react 1.65.0 → 1.66.0-rc.0

package/es/components/ChatButton/ChatButton.Skeleton.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 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 PropTypes from 'prop-types';
+export interface ChatButtonSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes:
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const ChatButtonSkeleton: {
+    ({ className, size, ...rest }: ChatButtonSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes:
+         */
+        size: PropTypes.Requireable<string>;
+    };
+};
+export default ChatButtonSkeleton;

package/es/components/ChatButton/ChatButton.Skeleton.js

@@ -35,6 +35,5 @@ ChatButtonSkeleton.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg'])
 };
-var ChatButtonSkeleton$1 = ChatButtonSkeleton;
 
-export { ChatButtonSkeleton$1 as default };
+export { ChatButtonSkeleton as default };

package/es/components/ChatButton/ChatButton.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 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, { type ComponentType, type FunctionComponent } from 'react';
+export type ChatButtonKind = 'primary' | 'secondary' | 'danger' | 'ghost' | 'tertiary';
+export type ChatButtonSize = 'sm' | 'md' | 'lg';
+export interface ChatButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Provide the contents of your Select
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the node containing the label and the select box
+     */
+    className?: string;
+    /**
+     * Specify whether the `ChatButton` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the `ChatButton` should be rendered as a quick action button
+     */
+    isQuickAction?: boolean;
+    /**
+     * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input
+     */
+    isSelected?: boolean;
+    /**
+     * Specify the kind of `ChatButton` you want to create
+     */
+    kind?: ChatButtonKind;
+    /**
+     * Optional prop to specify an icon to be rendered.
+     * Can be a React component class
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * Specify the size of the `ChatButton`, from the following list of sizes:
+     */
+    size?: ChatButtonSize;
+}
+declare const ChatButton: React.ForwardRefExoticComponent<ChatButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ChatButton;

package/es/components/ChatButton/ChatButton.js

@@ -6,8 +6,8 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
 import React__default from 'react';
+import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
@@ -78,12 +78,12 @@ ChatButton.propTypes = {
    * Optional prop to specify an icon to be rendered.
    * Can be a React component class
    */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Specify the size of the `ChatButton`, from the following list of sizes:
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg'])
 };
-var ChatButton$1 = ChatButton;
 
-export { ChatButton$1 as default };
+export { ChatButton as default };

package/es/components/ChatButton/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 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 ChatButton from './ChatButton';
+import { type ChatButtonProps } from './ChatButton';
+import { type ChatButtonSkeletonProps } from './ChatButton.Skeleton';
+export default ChatButton;
+export { ChatButton, type ChatButtonProps, type ChatButtonSkeletonProps };
+export { default as ChatButtonSkeleton } from './ChatButton.Skeleton';

package/es/components/Checkbox/index.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 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 Checkbox from './Checkbox.js';
+export { default as Checkbox, default } from './Checkbox.js';
+export { default as CheckboxSkeleton } from './Checkbox.Skeleton.js';

package/es/components/ComboBox/ComboBox.js

@@ -13,6 +13,8 @@ import React__default, { forwardRef, useEffect, useContext, useRef, useState, us
 import '../Text/index.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import ListBox from '../ListBox/index.js';
+import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
+import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -20,10 +22,9 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useFloating, flip, autoUpdate } from '@floating-ui/react';
+import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
-import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
-import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Space, Enter, Escape, Home, End } from '../../internal/keyboard/keys.js';
 
@@ -128,19 +129,24 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const {
     refs,
-    floatingStyles
+    floatingStyles,
+    middlewareData
   } = useFloating(autoAlign ? {
     placement: direction,
     strategy: 'fixed',
-    middleware: [flip()],
+    middleware: [flip(), hide()],
     whileElementsMounted: autoUpdate
   } : {});
   const parentWidth = refs?.reference?.current?.clientWidth;
   useEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach(style => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+      };
+      Object.keys(updatedFloatingStyles).forEach(style => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
       if (parentWidth && refs.floating.current) {
@@ -533,7 +539,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     onClearSelection: handleSelectionClear,
     selectionCount: 0
   }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
-    // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
   }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {

package/es/components/ComboButton/index.js

@@ -20,6 +20,7 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
 import mergeRefs from '../../tools/mergeRefs.js';
+import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
 
 var _ChevronDown;
 const defaultTranslations = {
@@ -51,7 +52,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
   const containerRef = useRef(null);
   const middlewares = [flip({
     crossAxis: false
-  })];
+  }), hide()];
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(size({
       apply(_ref2) {
@@ -89,9 +90,13 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     handleClose
   } = useAttachedMenu(containerRef);
   useLayoutEffect(() => {
-    Object.keys(floatingStyles).forEach(style => {
+    const updatedFloatingStyles = {
+      ...floatingStyles,
+      visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+    };
+    Object.keys(updatedFloatingStyles).forEach(style => {
       if (refs.floating.current) {
-        refs.floating.current.style[style] = floatingStyles[style];
+        refs.floating.current.style[style] = updatedFloatingStyles[style];
       }
     });
   }, [floatingStyles, refs.floating, middlewareData, placement, open]);

package/es/components/ComposedModal/index.d.ts

@@ -4,6 +4,8 @@
  * 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 ComposedModal from './ComposedModal';
 export { default as ComposedModal, type ComposedModalProps, ModalBody, type ModalBodyProps, } from './ComposedModal';
 export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
 export { ModalFooter, type ModalFooterProps } from './ModalFooter';
+export default ComposedModal;

package/es/components/DataTable/TableSlugRow.d.ts

@@ -18,6 +18,7 @@ export interface TableSlugRowProps {
 }
 declare const TableSlugRow: {
     ({ className, slug }: TableSlugRowProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
     propTypes: {
         /**
          * The CSS class names of the cell that wraps the underlying input control

package/es/components/DataTable/TableSlugRow.js

@@ -35,6 +35,7 @@ const TableSlugRow = _ref => {
     className: TableSlugRowClasses
   }, normalizedSlug);
 };
+TableSlugRow.displayName = 'TableSlugRow';
 TableSlugRow.propTypes = {
   /**
    * The CSS class names of the cell that wraps the underlying input control

package/es/components/Grid/Column.js

@@ -245,11 +245,11 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
         start,
         end
       } = breakpoint;
-      if (typeof offset === 'number' && offset > 0) {
-        classNames.push(`${prefix}--${name}:col-start-${offset + 1}`);
+      if (typeof offset === 'number') {
+        classNames.push(`${prefix}--${name}:col-start-${offset > 0 ? offset + 1 : 'auto'}`);
       }
       if (typeof start === 'number') {
-        classNames.push(`${prefix}--${name}:col-start-${start}`);
+        classNames.push(`${prefix}--${name}:col-start-${start ? start : 'auto'}`);
       }
       if (typeof end === 'number') {
         classNames.push(`${prefix}--${name}:col-end-${end}`);

package/es/components/ListBox/ListBoxMenuItem.d.ts

@@ -4,9 +4,14 @@
  * 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, { ForwardedRef } from 'react';
+import React, { ForwardedRef, ReactNode } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
+    /**
+     * Specify any children nodes that should be rendered inside of the ListBox
+     * Menu Item
+     */
+    children?: ReactNode;
     /**
      * Specify whether the current menu item is "active".
      */
@@ -19,6 +24,10 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
      * Specify whether the item should be disabled
      */
     disabled?: boolean;
+    /**
+     * Provide an optional tooltip for the ListBoxMenuItem
+     */
+    title?: string;
 }
 export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
     menuItemOptionRef?: React.Ref<HTMLDivElement>;

package/es/components/ListBox/next/ListBoxSelection.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
+/**
+ * `ListBoxSelection` is used to provide controls for clearing a selection, in
+ * addition to conditionally rendering a badge if the control has more than one
+ * selection.
+ */
+export declare const translationIds: {
+    readonly 'clear.all': "clear.all";
+    readonly 'clear.selection': "clear.selection";
+};
+export type TranslationKey = keyof typeof translationIds;
+export interface ListBoxSelectionProps {
+    /**
+     * Specify a function to be invoked when a user interacts with the clear
+     * selection element.
+     */
+    clearSelection: (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Specify an optional `selectionCount` value that will be used to determine
+     * whether the selection should display a badge or a single clear icon.
+     */
+    selectionCount?: number;
+    /**
+     * i18n hook used to provide the appropriate description for the given menu
+     * icon. This function takes in an id defined in `translationIds` and should
+     * return a string message for that given message id.
+     */
+    translateWithId?: (id: TranslationKey) => string;
+    /**
+     * Specify whether or not the clear selection element should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify an optional `onClearSelection` handler that is called when the underlying
+     * element is cleared
+     */
+    onClearSelection?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Specify an optional `onClick` handler that is called when the underlying
+     * clear selection element is clicked
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify an optional `onKeyDown` handler that is called when the underlying
+     * clear selection element fires a keydown event
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * Specify an optional `onMouseUp` handler that is called when the underlying
+     * clear selection element fires a mouseup event
+     */
+    onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ListBoxSelection {
+    var propTypes: {
+        /**
+         * Specify a function to be invoked when a user interacts with the clear
+         * selection element.
+         */
+        clearSelection: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Specify whether or not the clear selection element should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify an optional `onClearSelection` handler that is called when the underlying
+         * element is cleared
+         */
+        onClearSelection: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onClick` handler that is called when the underlying
+         * clear selection element is clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onClick` handler that is called when the underlying
+         * clear selection element is clicked
+         */
+        onMouseUp: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onKeyDown` handler that is called when the underlying
+         * clear selection element fires a keydown event
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `selectionCount` value that will be used to determine
+         * whether the selection should display a badge or a single clear icon.
+         */
+        selectionCount: PropTypes.Requireable<number>;
+        /**
+         * i18n hook used to provide the appropriate description for the given menu
+         * icon. This function takes in an id defined in `translationIds` and should
+         * return a string message for that given message id.
+         */
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default ListBoxSelection;

package/es/components/ListBox/next/ListBoxSelection.js

@@ -13,22 +13,13 @@ import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
 var _Close, _Close2;
-
-/**
- * `ListBoxSelection` is used to provide controls for clearing a selection, in
- * addition to conditionally rendering a badge if the control has more than one
- * selection.
- */
-
-const translationIds = {
-  'clear.all': 'clear.all',
-  'clear.selection': 'clear.selection'
-};
 const defaultTranslations = {
-  [translationIds['clear.all']]: 'Clear all selected items',
-  [translationIds['clear.selection']]: 'Clear selected item'
+  'clear.all': 'Clear all selected items',
+  'clear.selection': 'Clear selected item'
 };
-const defaultTranslateWithId = id => defaultTranslations[id];
+function defaultTranslateWithId(id) {
+  return defaultTranslations[id];
+}
 function ListBoxSelection(_ref) {
   let {
     clearSelection,
@@ -62,7 +53,7 @@ function ListBoxSelection(_ref) {
       className: tagClasses
     }, /*#__PURE__*/React__default.createElement("span", {
       className: `${prefix}--tag__label`,
-      title: selectionCount
+      title: selectionCount?.toString()
     }, selectionCount), /*#__PURE__*/React__default.createElement("button", {
       "aria-label": description,
       className: `${prefix}--tag__close-icon`,
@@ -103,6 +94,11 @@ ListBoxSelection.propTypes = {
    * clear selection element is clicked
    */
   onClick: PropTypes.func,
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * clear selection element is clicked
+   */
+  onMouseUp: PropTypes.func,
   /**
    * Specify an optional `onKeyDown` handler that is called when the underlying
    * clear selection element fires a keydown event
@@ -121,4 +117,4 @@ ListBoxSelection.propTypes = {
   translateWithId: PropTypes.func
 };
 
-export { ListBoxSelection as default, translationIds };
+export { ListBoxSelection as default };

package/es/components/ListBox/next/ListBoxTrigger.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2016, 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';
+export declare const translationIds: {
+    readonly 'close.menu': "close.menu";
+    readonly 'open.menu': "open.menu";
+};
+export type TranslationKey = keyof typeof translationIds;
+export interface ListBoxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify whether the menu is currently open, which will influence the
+     * direction of the menu icon
+     */
+    isOpen: boolean;
+    /**
+     * i18n hook used to provide the appropriate description for the given menu
+     * icon. This function takes in an id defined in `translationIds` and should
+     * return a string message for that given message id.
+     */
+    translateWithId?: (id: TranslationKey) => string;
+}
+/**
+ * `ListBoxTrigger` is used to orient the icon up or down depending on the
+ * state of the menu for a given `ListBox`
+ */
+declare const ListBoxTrigger: React.ForwardRefExoticComponent<ListBoxTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default ListBoxTrigger;

package/es/components/ListBox/next/ListBoxTrigger.js

@@ -22,7 +22,6 @@ const defaultTranslations = {
   [translationIds['open.menu']]: 'Open'
 };
 const defaultTranslateWithId = id => defaultTranslations[id];
-
 /**
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
@@ -45,7 +44,7 @@ const ListBoxTrigger = /*#__PURE__*/React__default.forwardRef(function ListBoxTr
     title: description,
     className: className,
     type: "button",
-    tabIndex: "-1",
+    tabIndex: -1,
     ref: ref
   }), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null)));
 });
@@ -62,6 +61,5 @@ ListBoxTrigger.propTypes = {
    */
   translateWithId: PropTypes.func
 };
-var ListBoxTrigger$1 = ListBoxTrigger;
 
-export { ListBoxTrigger$1 as default, translationIds };
+export { ListBoxTrigger as default, translationIds };

package/es/components/ListBox/next/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 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 { default as ListBoxSelection, type ListBoxSelectionProps, } from './ListBoxSelection';
+export { default as ListBoxTrigger, type ListBoxTriggerProps, } from './ListBoxTrigger';

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -15,6 +15,8 @@ import React__default, { useContext, useState, useLayoutEffect, useRef, useMemo,
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
+import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
+import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { defaultItemToString } from './tools/itemToString.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -25,9 +27,8 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useSelection } from '../../internal/Selection.js';
 import { useFloating, flip, size, autoUpdate } from '@floating-ui/react';
+import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
 import { match } from '../../internal/keyboard/match.js';
-import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
-import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Escape, Space, Enter, Delete, Tab, Home, End } from '../../internal/keyboard/keys.js';
 
@@ -144,14 +145,18 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
           width: `${rects.reference.width}px`
         });
       }
-    })],
+    }), hide()],
     whileElementsMounted: autoUpdate
   } : {});
   useLayoutEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach(style => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+      };
+      Object.keys(updatedFloatingStyles).forEach(style => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
     }
@@ -532,10 +537,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__field`,
     ref: autoAlign ? refs.setReference : null
-  }, controlledSelectedItems.length > 0 &&
-  /*#__PURE__*/
-  // @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
-  React__default.createElement(ListBoxSelection, {
+  }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
     clearSelection: () => {
       clearSelection();
       if (textInput.current) {
@@ -553,10 +555,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
-  }), inputValue &&
-  /*#__PURE__*/
-  // @ts-expect-error: It is expecting two non-required prop called: "onClearSelection" & "selectionCount"
-  React__default.createElement(ListBoxSelection, {
+  }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
     clearSelection: clearInputValue,
     disabled: disabled,
     translateWithId: translateWithId,
@@ -569,7 +568,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       event.stopPropagation();
     }
   }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
-    // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
   }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {