@carbon/react 1.67.0 → 1.68.0-rc.0

package/es/components/Notification/Notification.js

@@ -21,6 +21,7 @@ import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { warning } from '../../internal/warning.js';
 import { Text } from '../Text/Text.js';
 import { match, matches } from '../../internal/keyboard/match.js';
 import { Tab, Escape } from '../../internal/keyboard/keys.js';
@@ -641,10 +642,9 @@ ActionableNotification.propTypes = {
    */
   closeOnEscape: PropTypes.bool,
   /**
-   * Deprecated, please use StaticNotification once it's available. Issue #15532
    * Specify if focus should be moved to the component when the notification contains actions
    */
-  hasFocus: deprecate(PropTypes.bool),
+  hasFocus: deprecate(PropTypes.bool, 'hasFocus is deprecated. To conform to accessibility requirements hasFocus ' + 'should always be `true` for ActionableNotification. If you were ' + 'setting this prop to `false`, consider using the Callout component instead.'),
   /**
    * Specify the close button should be disabled, or not
    */
@@ -693,11 +693,11 @@ ActionableNotification.propTypes = {
 };
 
 /**
- * StaticNotification
+ * Callout
  * ==================
  */
 
-function StaticNotification(_ref8) {
+function Callout(_ref8) {
   let {
     actionButtonLabel,
     children,
@@ -747,7 +747,7 @@ function StaticNotification(_ref8) {
     inline: true
   }, actionButtonLabel)));
 }
-StaticNotification.propTypes = {
+Callout.propTypes = {
   /**
    * Pass in the action button label that will be rendered within the ActionableNotification.
    */
@@ -765,7 +765,7 @@ StaticNotification.propTypes = {
    */
   kind: PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
   /**
-   * Specify whether you are using the low contrast variant of the StaticNotification.
+   * Specify whether you are using the low contrast variant of the Callout.
    */
   lowContrast: PropTypes.bool,
   /**
@@ -790,4 +790,23 @@ StaticNotification.propTypes = {
   titleId: PropTypes.string
 };
 
-export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, StaticNotification, ToastNotification };
+// In renaming StaticNotification to Callout, the legacy StaticNotification
+// export and it's types should remain usable until Callout is moved to stable.
+// The StaticNotification component below forwards props to Callout and inherits
+// CalloutProps to ensure consumer usage is not impacted, while providing them
+// a deprecation warning.
+// TODO: remove this when Callout moves to stable OR in v12, whichever is first
+/**
+ * @deprecated Use `CalloutProps` instead.
+ */
+
+let didWarnAboutDeprecation = false;
+const StaticNotification = props => {
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`StaticNotification` has been renamed to `Callout`.' + 'Run the following codemod to automatically update usages in your' + 'project: `npx @carbon/upgrade migrate refactor-to-callout --write`') : void 0;
+    didWarnAboutDeprecation = true;
+  }
+  return /*#__PURE__*/React__default.createElement(Callout, props);
+};
+
+export { ActionableNotification, Callout, InlineNotification, NotificationActionButton, NotificationButton, StaticNotification, ToastNotification };

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

@@ -4,4 +4,4 @@
  * 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 { NotificationActionButton, type NotificationActionButtonProps, NotificationButton, type NotificationButtonProps, ToastNotification, type ToastNotificationProps, InlineNotification, type InlineNotificationProps, ActionableNotification, type ActionableNotificationProps, StaticNotification, type StaticNotificationProps, } from './Notification';
+export { NotificationActionButton, type NotificationActionButtonProps, NotificationButton, type NotificationButtonProps, ToastNotification, type ToastNotificationProps, InlineNotification, type InlineNotificationProps, ActionableNotification, type ActionableNotificationProps, StaticNotification, type StaticNotificationProps, Callout, type CalloutProps, } from './Notification';

package/es/components/Popover/index.js

@@ -206,7 +206,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
      */
     const isTriggerElement = item?.type === 'button';
     const isTriggerComponent = autoAlign && displayName && ['ToggletipButton'].includes(displayName);
-    const isAllowedTriggerComponent = autoAlign && displayName && !['ToggletipContent', 'PopoverContent'].includes(displayName);
+    const isAllowedTriggerComponent = autoAlign && !['ToggletipContent', 'PopoverContent'].includes(displayName);
     if ( /*#__PURE__*/React__default.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
       const className = item?.props?.className;
       const ref = (item?.props).ref;

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

@@ -99,20 +99,8 @@ interface ToggletipContentProps {
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-export declare function ToggletipContent({ children, className: customClassName, }: ToggletipContentProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ToggletipContent {
-    var propTypes: {
-        /**
-         * Custom children to be rendered as the content of the label
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom class name to be added to the outermost node in the
-         * component
-         */
-        className: PropTypes.Requireable<string>;
-    };
-}
+declare const ToggletipContent: React.ForwardRefExoticComponent<ToggletipContentProps & React.RefAttributes<HTMLDivElement>>;
+export { ToggletipContent };
 interface ToggleTipActionsProps {
     children?: ReactNode;
     className?: string | undefined;
@@ -135,4 +123,3 @@ export declare namespace ToggletipActions {
         className: PropTypes.Requireable<string>;
     };
 }
-export {};

package/es/components/Toggletip/index.js

@@ -245,7 +245,7 @@ ToggletipButton.displayName = 'ToggletipButton';
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-function ToggletipContent(_ref4) {
+const ToggletipContent = /*#__PURE__*/React__default.forwardRef(function ToggletipContent(_ref4, ref) {
   let {
     children,
     className: customClassName
@@ -254,10 +254,12 @@ function ToggletipContent(_ref4) {
   const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement(PopoverContent, _extends({
     className: customClassName
-  }, toggletip?.contentProps), /*#__PURE__*/React__default.createElement("div", {
+  }, toggletip?.contentProps, {
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--toggletip-content`
   }, children));
-}
+});
 ToggletipContent.propTypes = {
   /**
    * Custom children to be rendered as the content of the label
@@ -269,6 +271,7 @@ ToggletipContent.propTypes = {
    */
   className: PropTypes.string
 };
+ToggletipContent.displayName = 'ToggletipContent';
 /**
  * `ToggletipActions` is a container for one or two actions present at the base
  * of a toggletip. It is used for layout of these items.

package/es/components/Tooltip/DefinitionTooltip.js

@@ -60,8 +60,10 @@ const DefinitionTooltip = _ref => {
     onBlur: () => {
       setOpen(false);
     },
-    onClick: () => {
-      setOpen(!isOpen);
+    onMouseDown: event => {
+      // We use onMouseDown rather than onClick to make sure this triggers
+      // before onFocus.
+      if (event.button === 0) setOpen(!isOpen);
     },
     onKeyDown: onKeyDown,
     type: "button"

package/es/index.js

@@ -71,7 +71,7 @@ export { MenuButton } from './components/MenuButton/index.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
 import './components/MultiSelect/index.js';
-export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, StaticNotification, ToastNotification } from './components/Notification/Notification.js';
+export { ActionableNotification, Callout, InlineNotification, NotificationActionButton, NotificationButton, StaticNotification, ToastNotification } from './components/Notification/Notification.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
 export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
@@ -159,6 +159,8 @@ export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem
 export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
 export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
+export { default as unstable__FluidMultiSelect } from './components/FluidMultiSelect/FluidMultiSelect.js';
+export { default as unstable__FluidMultiSelectSkeleton } from './components/FluidMultiSelect/FluidMultiSelect.Skeleton.js';
 export { default as unstable__FluidSelect } from './components/FluidSelect/FluidSelect.js';
 export { default as unstable__FluidSelectSkeleton } from './components/FluidSelect/FluidSelect.Skeleton.js';
 export { default as unstable__FluidSearch } from './components/FluidSearch/FluidSearch.js';
@@ -205,8 +207,6 @@ export { default as unstable__FluidDatePicker } from './components/FluidDatePick
 export { default as unstable__FluidDatePickerInput } from './components/FluidDatePickerInput/FluidDatePickerInput.js';
 export { default as unstable__FluidDropdown } from './components/FluidDropdown/FluidDropdown.js';
 export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.Skeleton.js';
-export { default as unstable__FluidMultiSelect } from './components/FluidMultiSelect/FluidMultiSelect.js';
-export { default as unstable__FluidMultiSelectSkeleton } from './components/FluidMultiSelect/FluidMultiSelect.Skeleton.js';
 export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
 export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
 export { Text as unstable_Text } from './components/Text/Text.js';

package/lib/components/ComboBox/ComboBox.js

@@ -314,6 +314,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (onToggleClick) {
       onToggleClick(event);
     }
+    if (readOnly) {
+      // Prevent the list from opening if readOnly is true
+      event.preventDownshiftDefault = true;
+      event?.persist?.();
+      return;
+    }
     if (event.target === textInput.current && isOpen) {
       event.preventDownshiftDefault = true;
       event?.persist?.();
@@ -462,6 +468,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       if (evt.key !== 'Tab') {
         evt.preventDefault();
       }
+    },
+    onClick: evt => {
+      // Prevent the default behavior which would open the list
+      evt.preventDefault();
+      // Focus on the element as per readonly input behavior
+      evt.currentTarget.focus();
     }
   } : {};
 

package/lib/components/ComposedModal/ModalHeader.js

@@ -54,7 +54,7 @@ const ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function M
     ref: ref
   }), label && /*#__PURE__*/React__default["default"].createElement("h2", {
     className: labelClass
-  }, label), title && /*#__PURE__*/React__default["default"].createElement("h3", {
+  }, label), title && /*#__PURE__*/React__default["default"].createElement("h2", {
     className: titleClass
   }, title), children, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal-close-button`

package/lib/components/Dropdown/Dropdown.js

@@ -217,7 +217,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
-  const toggleButtonProps = getToggleButtonProps();
+  const toggleButtonProps = getToggleButtonProps({
+    'aria-label': ariaLabel || deprecatedAriaLabel
+  });
   const helper = helperText && !isFluid ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,
     className: helperClasses
@@ -292,7 +294,6 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
-    "aria-label": deprecatedAriaLabel || ariaLabel,
     size: size,
     className: className,
     invalid: invalid,

package/lib/components/FeatureFlags/index.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright IBM Corp. 2015, 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 PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
+interface FeatureFlagsProps {
+    children?: ReactNode;
+    flags?: Record<string, boolean>;
+    enableV12TileDefaultIcons?: boolean;
+    enableV12TileRadioIcons?: boolean;
+    enableV12Overflowmenu?: boolean;
+    enableTreeviewControllable?: boolean;
+    enableExperimentalFocusWrapWithoutSentinels?: boolean;
+}
+/**
+ * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
+ * or disable feature flags in a given React tree
+ */
+declare const FeatureFlagContext: React.Context<any>;
+/**
+ * Supports an object of feature flag values with the `flags` prop, merging them
+ * along with the current `FeatureFlagContext` to provide consumers to check if
+ * a feature flag is enabled or disabled in a given React tree
+ */
+declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, }: FeatureFlagsProps): JSX.Element;
+declare namespace FeatureFlags {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide the feature flags to enabled or disabled in the current Rea,ct tree
+         */
+        flags: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        enableV12TileDefaultIcons: PropTypes.Requireable<boolean>;
+        enableV12TileRadioIcons: PropTypes.Requireable<boolean>;
+        enableV12Overflowmenu: PropTypes.Requireable<boolean>;
+        enableTreeviewControllable: PropTypes.Requireable<boolean>;
+        enableExperimentalFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
+    };
+}
+/**
+ * Access whether a given flag is enabled or disabled in a given
+ * FeatureFlagContext
+ *
+ * @returns {boolean}
+ */
+declare function useFeatureFlag(flag: any): any;
+/**
+ * Access all feature flag information for the given FeatureFlagContext
+ *
+ * @returns {FeatureFlagScope}
+ */
+declare function useFeatureFlags(): any;
+export { FeatureFlags, FeatureFlagContext, useFeatureFlags, useFeatureFlag };

package/lib/components/FluidMultiSelect/FluidFilterableMultiSelect.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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, { FunctionComponent } from 'react';
+import { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
+import { FilterableMultiSelectProps } from '../MultiSelect/FilterableMultiSelect';
+interface OnChangeData<ItemType> {
+    selectedItems: ItemType[] | null;
+}
+export interface FluidFilterableMultiSelectProps<ItemType> extends FilterableMultiSelectProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes total items selected
+     */
+    clearSelectionDescription?: string;
+    /**
+     * Specify the text that should be read for screen readers to clear selection.
+     */
+    clearSelectionText?: string;
+    /**
+     * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
+     */
+    downshiftProps?: Partial<UseMultipleSelectionProps<ItemType>>;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems?: ItemType[];
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify if the `FluidMultiSelect` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: FunctionComponent<ItemType>;
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list. Consider
+     * declaring function with `useCallback` to prevent unnecessary re-renders.
+     */
+    itemToString?(item: ItemType): string;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: NonNullable<React.ReactNode>;
+    /**
+     * Specify the locale of the control. Used for the default `compareItems`
+     * used for sorting the list of items in the control.
+     */
+    locale?: string;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occurring.
+     */
+    onChange?(data: OnChangeData<ItemType>): void;
+    /**
+     * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+     * the currently typed input.
+     */
+    onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
+    /**
+     * `onMenuChange` is a utility for this controlled component to communicate to a
+     * consuming component that the menu was open(`true`)/closed(`false`).
+     */
+    onMenuChange?(open: boolean): void;
+    /**
+     * Whether or not the Multiselect is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * For full control of the selected items
+     */
+    selectedItems?: ItemType[];
+    /**
+     * Specify feedback (mode) of the selection.
+     * `top`: selected item jumps to top
+     * `fixed`: selected item stays at it's position
+     * `top-after-reopen`: selected item jump to top after reopen dropdown
+     */
+    selectionFeedback?: 'top' | 'fixed' | 'top-after-reopen';
+    /**
+     * Provide the title text that will be read by a screen reader when
+     * visiting this control
+     */
+    titleText?: React.ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify title to show title on hover
+     */
+    useTitleInItem?: boolean;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidMultiSelect: React.ForwardRefExoticComponent<Omit<FluidFilterableMultiSelectProps<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default FluidMultiSelect;

package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 React from 'react';
+export interface FluidMultiSelectSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare const FluidMultiSelectSkeleton: React.FC<FluidMultiSelectSkeletonProps>;
+export default FluidMultiSelectSkeleton;

package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -44,6 +44,5 @@ FluidMultiSelectSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var FluidMultiSelectSkeleton$1 = FluidMultiSelectSkeleton;
 
-exports["default"] = FluidMultiSelectSkeleton$1;
+exports["default"] = FluidMultiSelectSkeleton;

package/lib/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -0,0 +1,149 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 { UseSelectProps } from 'downshift';
+import { MultiSelectProps } from '../MultiSelect/MultiSelect';
+interface OnChangeData<ItemType> {
+    selectedItems: ItemType[] | null;
+}
+export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes total items selected
+     */
+    clearSelectionDescription?: string;
+    /**
+     * Specify the text that should be read for screen readers to clear selection.
+     */
+    clearSelectionText?: string;
+    /**
+     * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
+     */
+    downshiftProps?: Partial<UseSelectProps<ItemType>>;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems?: ItemType[];
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify if the `FluidMultiSelect` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Specify if the `FluidMultiSelect` should render the `filterable` variant of `FluidMultiSelect`
+     * @deprecated This prop is deprecated in favor of new component called FluidFilterableMultiSelect and will be removed in the next major release
+     */
+    isFilterable?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: React.JSXElementConstructor<ItemType>;
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list. Consider
+     * declaring function with `useCallback` to prevent unnecessary re-renders.
+     */
+    itemToString?(item: ItemType): string;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: NonNullable<React.ReactNode>;
+    /**
+     * Specify the locale of the control. Used for the default `compareItems`
+     * used for sorting the list of items in the control.
+     */
+    locale?: string;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occurring.
+     */
+    onChange?(data: OnChangeData<ItemType>): void;
+    /**
+     * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+     * the currently typed input.
+     */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * `onMenuChange` is a utility for this controlled component to communicate to a
+     * consuming component that the menu was open(`true`)/closed(`false`).
+     */
+    onMenuChange?(open: boolean): void;
+    /**
+     * Whether or not the Multiselect is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * For full control of the selected items
+     */
+    selectedItems?: ItemType[];
+    /**
+     * Specify feedback (mode) of the selection.
+     * `top`: selected item jumps to top
+     * `fixed`: selected item stays at it's position
+     * `top-after-reopen`: selected item jump to top after reopen dropdown
+     */
+    selectionFeedback?: 'top' | 'fixed' | 'top-after-reopen';
+    /**
+     * Provide the title text that will be read by a screen reader when
+     * visiting this control
+     */
+    titleText?: React.ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify title to show title on hover
+     */
+    useTitleInItem?: boolean;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidMultiSelect: React.ForwardRefExoticComponent<FluidMultiSelectProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
+export default FluidMultiSelect;

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -40,7 +40,10 @@ const FluidMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(funct
     value: {
       isFluid: true
     }
-  }, isFilterable ? /*#__PURE__*/React__default["default"].createElement(FilterableMultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
+  }, isFilterable ?
+  /*#__PURE__*/
+  // @ts-ignore
+  React__default["default"].createElement(FilterableMultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     className: classNames
   }, other)) : /*#__PURE__*/React__default["default"].createElement(MultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
@@ -209,6 +212,5 @@ FluidMultiSelect.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var FluidMultiSelect$1 = FluidMultiSelect;
 
-exports["default"] = FluidMultiSelect$1;
+exports["default"] = FluidMultiSelect;

package/lib/components/FluidMultiSelect/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 FluidMultiSelect from './FluidMultiSelect';
+import type { FluidMultiSelectProps } from './FluidMultiSelect';
+import type { FluidMultiSelectSkeletonProps } from './FluidMultiSelect.Skeleton';
+export type { FluidMultiSelectProps, FluidMultiSelectSkeletonProps };
+export default FluidMultiSelect;
+export { FluidMultiSelect };
+export { default as FluidMultiSelectSkeleton } from './FluidMultiSelect.Skeleton';