@carbon/react 1.67.1 → 1.68.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -304,6 +304,12 @@ const ComboBox = /*#__PURE__*/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?.();
@@ -452,6 +458,12 @@ const ComboBox = /*#__PURE__*/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/es/components/ComposedModal/ModalHeader.js

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

package/es/components/Dropdown/Dropdown.js

@@ -207,7 +207,9 @@ const Dropdown = /*#__PURE__*/React__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.createElement("div", {
     id: helperId,
     className: helperClasses
@@ -282,7 +284,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, getLabelProps()), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
     onFocus: handleFocus,
     onBlur: handleFocus,
-    "aria-label": deprecatedAriaLabel || ariaLabel,
     size: size$1,
     className: className,
     invalid: invalid,

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { FeatureFlags as FeatureFlags$1, createScope } from '@carbon/feature-flags';
+import { createScope, FeatureFlags as FeatureFlags$1 } from '@carbon/feature-flags';
 import PropTypes from 'prop-types';
-import React__default, { createContext, useContext, useState, useRef, useEffect } from 'react';
+import React__default, { useContext, useState, useRef, useEffect, createContext } from 'react';
 import deprecate from '../../prop-types/deprecate.js';
 
 /**

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

@@ -34,6 +34,5 @@ FluidMultiSelectSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
-var FluidMultiSelectSkeleton$1 = FluidMultiSelectSkeleton;
 
-export { FluidMultiSelectSkeleton$1 as default };
+export { FluidMultiSelectSkeleton as default };

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

@@ -30,7 +30,10 @@ const FluidMultiSelect = /*#__PURE__*/React__default.forwardRef(function FluidMu
     value: {
       isFluid: true
     }
-  }, isFilterable ? /*#__PURE__*/React__default.createElement(FilterableMultiSelect, _extends({
+  }, isFilterable ?
+  /*#__PURE__*/
+  // @ts-ignore
+  React__default.createElement(FilterableMultiSelect, _extends({
     ref: ref,
     className: classNames
   }, other)) : /*#__PURE__*/React__default.createElement(MultiSelect, _extends({
@@ -199,6 +202,5 @@ FluidMultiSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
-var FluidMultiSelect$1 = FluidMultiSelect;
 
-export { FluidMultiSelect$1 as default };
+export { FluidMultiSelect as default };

package/es/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';

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

@@ -4,8 +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 { FluidNumberInputProps } from './FluidNumberInput';
-import { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
+import type { FluidNumberInputProps } from './FluidNumberInput';
+import type { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
 export { type FluidNumberInputProps, type FluidNumberInputSkeletonProps };
 export { default, default as FluidNumberInput } from './FluidNumberInput';
 export { default as FluidNumberInputSkeleton } from './FluidNumberInput.Skeleton';

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

@@ -4,8 +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 { FluidSearchProps } from './FluidSearch';
-import { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
+import type { FluidSearchProps } from './FluidSearch';
+import type { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
 export { default, default as FluidSearch } from './FluidSearch';
 export { type FluidSearchProps, type FluidSearchSkeletonProps };
 export { default as FluidSearchSkeleton } from './FluidSearch.Skeleton';

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import FluidSelect from './FluidSelect';
-import FluidSelectSkeletonProps from './FluidSelect.Skeleton';
-import FluidSelectProps from './FluidSelect.Skeleton';
+import type FluidSelectSkeletonProps from './FluidSelect.Skeleton';
+import type FluidSelectProps from './FluidSelect.Skeleton';
 export type { FluidSelectSkeletonProps, FluidSelectProps };
 export default FluidSelect;
 export { FluidSelect };

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import FluidTimePicker from './FluidTimePicker';
-import { FluidTimePickerProps } from './FluidTimePicker';
-import { FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
+import { type FluidTimePickerProps } from './FluidTimePicker';
+import { type FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
 export { default as FluidTimePickerSkeleton } from './FluidTimePicker.Skeleton';
 export type { FluidTimePickerProps, FluidTimePickerSkeletonProps };
 export default FluidTimePicker;

package/es/components/Modal/Modal.js

@@ -264,7 +264,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     id: modalLabelId,
     className: `${prefix}--modal-header__label`
   }, modalLabel), /*#__PURE__*/React__default.createElement(Text, {
-    as: "h3",
+    as: "h2",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
   }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default.createElement(Layer, _extends({

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
-import { ReactNode, FunctionComponent, ReactElement } from 'react';
+import React, { ReactNode, FunctionComponent, ReactElement } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { TranslateWithId } from '../../types/common';
 /**
@@ -16,7 +16,7 @@ import { TranslateWithId } from '../../types/common';
  * ends up just being defined as "string".)
  */
 type TranslationKey = 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection';
-export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, TranslateWithId<TranslationKey> {
+export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, React.RefAttributes<HTMLDivElement>, TranslateWithId<TranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * @deprecated

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

@@ -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,