@carbon/react 1.82.1 → 1.83.0

package/es/components/Menu/MenuItem.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef, useState, useContext, useRef, useEffect } from 'react';
+import React, { forwardRef, useState, useContext, useRef, useEffect } from 'react';
 import { useFloating, autoUpdate, offset, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
 import { Checkmark, CaretLeft, CaretRight } from '@carbon/icons-react';
 import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
@@ -18,8 +18,9 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
-import '../Text/index.js';
+import '../LayoutDirection/LayoutDirection.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
+import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
 var _Checkmark, _CaretLeft, _CaretRight;
@@ -158,11 +159,11 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
       }
     });
   }, [floatingStyles, refs.floating]);
-  return /*#__PURE__*/React__default.createElement(FloatingFocusManager, {
+  return /*#__PURE__*/React.createElement(FloatingFocusManager, {
     context: floatingContext,
     order: ['reference', 'floating'],
     modal: false
-  }, /*#__PURE__*/React__default.createElement("li", _extends({
+  }, /*#__PURE__*/React.createElement("li", _extends({
     role: "menuitem"
   }, rest, {
     ref: ref,
@@ -174,19 +175,19 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp
-  }, getReferenceProps()), /*#__PURE__*/React__default.createElement("div", {
+  }, getReferenceProps()), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--menu-item__selection-icon`
-  }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React__default.createElement(Checkmark, null)))), /*#__PURE__*/React__default.createElement("div", {
+  }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React.createElement(Checkmark, null)))), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--menu-item__icon`
-  }, IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
+  }, IconElement && /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(Text, {
     as: "div",
     className: `${prefix}--menu-item__label`,
     title: label
-  }, label), shortcut && !hasChildren && /*#__PURE__*/React__default.createElement("div", {
+  }, label), shortcut && !hasChildren && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
-  }, shortcut), hasChildren && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }, shortcut), hasChildren && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
-  }, rtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, _extends({
+  }, rtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React.createElement(CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React.createElement(CaretRight, null))), /*#__PURE__*/React.createElement(Menu, _extends({
     label: label,
     open: submenuOpen,
     onClose: () => {
@@ -261,7 +262,7 @@ const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable(_
     }
   }, [context.state.hasSelectableItems, context]);
   const classNames = cx(className, `${prefix}--menu-item-selectable--selected`);
-  return /*#__PURE__*/React__default.createElement(MenuItem, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(MenuItem, _extends({}, rest, {
     ref: forwardRef,
     label: label,
     className: classNames,
@@ -304,11 +305,11 @@ const MenuItemGroup = /*#__PURE__*/forwardRef(function MenuItemGroup(_ref3, forw
   } = _ref3;
   const prefix = usePrefix();
   const classNames = cx(className, `${prefix}--menu-item-group`);
-  return /*#__PURE__*/React__default.createElement("li", {
+  return /*#__PURE__*/React.createElement("li", {
     className: classNames,
     role: "none",
     ref: forwardRef
-  }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
     role: "group",
     "aria-label": label
   }), children));
@@ -358,14 +359,14 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
     }
   }, [context.state.hasSelectableItems, context]);
   const classNames = cx(className, `${prefix}--menu-item-radio-group`);
-  return /*#__PURE__*/React__default.createElement("li", {
+  return /*#__PURE__*/React.createElement("li", {
     className: classNames,
     role: "none",
     ref: forwardRef
-  }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
     role: "group",
     "aria-label": label
-  }), items.map((item, i) => /*#__PURE__*/React__default.createElement(MenuItem, {
+  }), items.map((item, i) => /*#__PURE__*/React.createElement(MenuItem, {
     key: i,
     label: itemToString(item),
     role: "menuitemradio",
@@ -415,7 +416,7 @@ const MenuItemDivider = /*#__PURE__*/forwardRef(function MenuItemDivider(_ref5,
   } = _ref5;
   const prefix = usePrefix();
   const classNames = cx(className, `${prefix}--menu-item-divider`);
-  return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("li", _extends({}, rest, {
     className: classNames,
     role: "separator",
     ref: forwardRef

package/es/components/MenuButton/index.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useRef, useLayoutEffect } from 'react';
+import React, { forwardRef, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ChevronDown } from '@carbon/icons-react';
@@ -114,11 +114,11 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     [`${prefix}--menu-button__trigger--open`]: open
   });
   const menuClasses = cx(`${prefix}--menu-button__${menuAlignment}`);
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref,
     "aria-owns": open ? id : undefined,
     className: containerClasses
-  }), /*#__PURE__*/React__default.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Button, {
     ref: refs.setReference,
     className: triggerClasses,
     size: size$1,
@@ -131,7 +131,7 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     onClick: handleClick,
     onMouseDown: handleMousedown,
     "aria-controls": open ? id : undefined
-  }, label), /*#__PURE__*/React__default.createElement(Menu, {
+  }, label), /*#__PURE__*/React.createElement(Menu, {
     containerRef: triggerRef,
     menuAlignment: menuAlignment,
     className: menuClasses,

package/es/components/Modal/Modal.d.ts

@@ -4,8 +4,7 @@
  * 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 ReactNode, type Ref } from 'react';
-import { ReactAttr } from '../../types/common';
+import React, { type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
 export type ModalSize = (typeof ModalSizes)[number];
@@ -13,7 +12,7 @@ export interface ModalSecondaryButton {
     buttonText?: string | ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
-export interface ModalProps extends ReactAttr<HTMLDivElement> {
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify whether the Modal is displaying an alert, error or warning
      * Should go hand in hand with the danger prop.
@@ -32,7 +31,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      */
     className?: string;
     /**
-     * Specify an label for the close button of the modal; defaults to close
+     * Specify label for the close button of the modal; defaults to close
      */
     closeButtonLabel?: string;
     /**

package/es/components/Modal/Modal.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { toggleClass } from '../../tools/toggleClass.js';
@@ -21,6 +21,7 @@ import { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu, wrapFocus } f
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { usePreviousValue } from '../../internal/usePreviousValue.js';
 import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { IconButton } from '../IconButton/index.js';
@@ -35,7 +36,7 @@ import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/deb
 import { Text } from '../Text/Text.js';
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
-const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
+const Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
   let {
     'aria-label': ariaLabelProp,
     children,
@@ -79,6 +80,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const startTrap = useRef(null);
   const endTrap = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
+  const prevOpen = usePreviousValue(open);
   const modalInstanceId = `modal-${useId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -201,14 +203,14 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     }
   }, [open, prefix, enableDialogElement]);
   useEffect(() => {
-    if (!enableDialogElement && !open && launcherButtonRef) {
+    if (!enableDialogElement && prevOpen && !open && launcherButtonRef) {
       setTimeout(() => {
         if ('current' in launcherButtonRef) {
           launcherButtonRef.current?.focus();
         }
       });
     }
-  }, [open, launcherButtonRef, enableDialogElement]);
+  }, [open, prevOpen, launcherButtonRef, enableDialogElement]);
   useEffect(() => {
     if (!enableDialogElement) {
       const initialFocus = focusContainerElement => {
@@ -248,22 +250,22 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   }, []);
 
   // AILabel always size `sm`
-  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
   if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
+    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
       size: 'sm'
     });
   }
-  const modalButton = /*#__PURE__*/React__default.createElement("div", {
+  const modalButton = /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconButton, {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
     "aria-label": closeButtonLabel,
     align: "left",
     ref: button
-  }, /*#__PURE__*/React__default.createElement(Close, {
+  }, /*#__PURE__*/React.createElement(Close, {
     size: 20,
     "aria-hidden": "true",
     tabIndex: "-1",
@@ -273,7 +275,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   // alertdialog is the only permitted aria role for a native dialog element
   // https://www.w3.org/TR/html-aria/#docconformance:~:text=Role%3A-,alertdialog,-.%20(dialog%20is
   const isAlertDialog = alert && !passiveModal;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React__default.createElement(unstable__Dialog, {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(unstable__Dialog, {
     open: open,
     modal: true,
     ref: innerModal,
@@ -281,37 +283,37 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     "aria-describedby": isAlertDialog ? modalBodyId : '',
     className: containerClasses,
     "aria-label": ariaLabel
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal-header`
-  }, modalLabel && /*#__PURE__*/React__default.createElement(Text, {
+  }, modalLabel && /*#__PURE__*/React.createElement(Text, {
     as: "h2",
     id: modalLabelId,
     className: `${prefix}--modal-header__label`
-  }, modalLabel), /*#__PURE__*/React__default.createElement(Text, {
+  }, modalLabel), /*#__PURE__*/React.createElement(Text, {
     as: "h2",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), decorator ? /*#__PURE__*/React__default.createElement("div", {
+  }, modalHeading), decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement("div", {
+  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconButton, {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
     "aria-label": closeButtonLabel,
     align: "left",
     ref: button
-  }, /*#__PURE__*/React__default.createElement(Close, {
+  }, /*#__PURE__*/React.createElement(Close, {
     size: 20,
     "aria-hidden": "true",
     tabIndex: "-1",
     className: `${modalCloseButtonClass}__icon`
-  })))), /*#__PURE__*/React__default.createElement(Layer, _extends({
+  })))), /*#__PURE__*/React.createElement(Layer, _extends({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
-  }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
+  }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React.createElement(ButtonSet, {
     className: footerClasses,
     "aria-busy": loadingActive
   }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref3, i) => {
@@ -319,34 +321,34 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       buttonText,
       onClick: onButtonClick
     } = _ref3;
-    return /*#__PURE__*/React__default.createElement(Button, {
+    return /*#__PURE__*/React.createElement(Button, {
       key: `${buttonText}-${i}`,
       kind: "secondary",
       onClick: onButtonClick
     }, buttonText);
-  }) : secondaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
+  }) : secondaryButtonText && /*#__PURE__*/React.createElement(Button, {
     disabled: loadingActive,
     kind: "secondary",
     onClick: onSecondaryButtonClick,
     ref: secondaryButton
-  }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
+  }, secondaryButtonText), /*#__PURE__*/React.createElement(Button, {
     className: primaryButtonClass,
     kind: danger ? 'danger' : 'primary',
     disabled: loadingActive || primaryButtonDisabled,
     onClick: onRequestSubmit,
     ref: button
-  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React__default.createElement(InlineLoading, {
+  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React.createElement(InlineLoading, {
     status: loadingStatus,
     description: loadingDescription,
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
     ref: startTrap,
     tabIndex: 0,
     role: "link",
     className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", _extends({
+  }, "Focus sentinel"), /*#__PURE__*/React.createElement("div", _extends({
     ref: innerModal,
     role: "dialog"
   }, alertDialogProps, {
@@ -354,23 +356,23 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     "aria-label": ariaLabel,
     "aria-modal": "true",
     tabIndex: -1
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal-header`
-  }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default.createElement(Text, {
+  }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React.createElement(Text, {
     as: "h2",
     id: modalLabelId,
     className: `${prefix}--modal-header__label`
-  }, modalLabel), /*#__PURE__*/React__default.createElement(Text, {
+  }, modalLabel), /*#__PURE__*/React.createElement(Text, {
     as: "h2",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+  }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default.createElement(Layer, _extends({
+  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React.createElement(Layer, _extends({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
-  }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
+  }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React.createElement(ButtonSet, {
     className: footerClasses,
     "aria-busy": loadingActive
   }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref4, i) => {
@@ -378,35 +380,35 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       buttonText,
       onClick: onButtonClick
     } = _ref4;
-    return /*#__PURE__*/React__default.createElement(Button, {
+    return /*#__PURE__*/React.createElement(Button, {
       key: `${buttonText}-${i}`,
       kind: "secondary",
       onClick: onButtonClick
     }, buttonText);
-  }) : secondaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
+  }) : secondaryButtonText && /*#__PURE__*/React.createElement(Button, {
     disabled: loadingActive,
     kind: "secondary",
     onClick: onSecondaryButtonClick,
     ref: secondaryButton
-  }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
+  }, secondaryButtonText), /*#__PURE__*/React.createElement(Button, {
     className: primaryButtonClass,
     kind: danger ? 'danger' : 'primary',
     disabled: loadingActive || primaryButtonDisabled,
     onClick: onRequestSubmit,
     ref: button
-  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React__default.createElement(InlineLoading, {
+  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React.createElement(InlineLoading, {
     status: loadingStatus,
     description: loadingDescription,
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))), !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
+  })))), !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"));
-  return /*#__PURE__*/React__default.createElement(Layer, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Layer, _extends({}, rest, {
     level: 0,
     onKeyDown: handleKeyDown,
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
@@ -435,7 +437,7 @@ Modal.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Specify an label for the close button of the modal; defaults to close
+   * Specify label for the close button of the modal; defaults to close
    */
   closeButtonLabel: PropTypes.string,
   /**

package/es/components/ModalWrapper/ModalWrapper.js

@@ -7,7 +7,7 @@
 
 import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import Modal from '../Modal/Modal.js';
 import Button, { ButtonKinds } from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
@@ -18,11 +18,11 @@ import { match } from '../../internal/keyboard/match.js';
 
 let didWarnAboutDeprecation = false;
 process.env.NODE_ENV !== 'production';
-class ModalWrapper extends React__default.Component {
+class ModalWrapper extends React.Component {
   constructor() {
     super(...arguments);
-    _defineProperty(this, "triggerButton", /*#__PURE__*/React__default.createRef());
-    _defineProperty(this, "modal", /*#__PURE__*/React__default.createRef());
+    _defineProperty(this, "triggerButton", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "modal", /*#__PURE__*/React.createRef());
     _defineProperty(this, "state", {
       isOpen: false
     });
@@ -85,7 +85,7 @@ class ModalWrapper extends React__default.Component {
       onRequestClose: this.handleClose,
       onRequestSubmit: this.handleOnRequestSubmit
     };
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       role: "presentation",
       onKeyDown: evt => {
         if (match(evt, Escape)) {
@@ -93,7 +93,7 @@ class ModalWrapper extends React__default.Component {
           onKeyDown(evt);
         }
       }
-    }, /*#__PURE__*/React__default.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button, {
       className: buttonTriggerClassName,
       disabled: disabled,
       kind: triggerButtonKind,
@@ -101,7 +101,7 @@ class ModalWrapper extends React__default.Component {
       iconDescription: triggerButtonIconDescription,
       onClick: this.handleOpen,
       ref: this.triggerButton
-    }, buttonTriggerText), /*#__PURE__*/React__default.createElement(Modal, _extends({
+    }, buttonTriggerText), /*#__PURE__*/React.createElement(Modal, _extends({
       ref: this.modal,
       primaryButtonText: primaryButtonText,
       secondaryButtonText: secondaryButtonText

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef, useContext, useRef, useState, useLayoutEffect, useMemo, useEffect } from 'react';
+import React, { forwardRef, useContext, useRef, useState, useLayoutEffect, useMemo, useEffect } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
@@ -217,7 +217,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     [`${prefix}--text-input--empty`]: !inputValue,
     [`${prefix}--text-input--light`]: light
   });
-  const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText) : null;
@@ -425,9 +425,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   }
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
   if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
+    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -543,18 +543,14 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       }
     }
   } : {};
-  const clearSelectionContent = controlledSelectedItems.length > 0 ? /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, " ", controlledSelectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, ": 0");
-  return /*#__PURE__*/React__default.createElement("div", {
+  const clearSelectionContent = controlledSelectedItems.length > 0 ? `${clearSelectionDescription} ${controlledSelectedItems.length}. ${clearSelectionText}.` : `${clearSelectionDescription} 0.`;
+  return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
-  }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
+  }, titleText ? /*#__PURE__*/React.createElement("label", _extends({
     className: titleClasses
-  }, labelProps), titleText, /*#__PURE__*/React__default.createElement("span", {
+  }, labelProps), titleText, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--visually-hidden`
-  }, clearSelectionContent)) : null, /*#__PURE__*/React__default.createElement(ListBox, {
+  }, clearSelectionContent)) : null, /*#__PURE__*/React.createElement(ListBox, {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
     className: className,
@@ -568,10 +564,10 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     warnText: warnText,
     isOpen: !readOnly && isOpen,
     size: size$1
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__field`,
     ref: autoAlign ? refs.setReference : null
-  }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
+  }, controlledSelectedItems.length > 0 && /*#__PURE__*/React.createElement(ListBoxSelection, {
     readOnly: readOnly,
     clearSelection: () => {
       clearSelection();
@@ -582,17 +578,17 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     selectionCount: controlledSelectedItems.length,
     translateWithId: translateWithId,
     disabled: disabled
-  }), /*#__PURE__*/React__default.createElement("input", _extends({
+  }), /*#__PURE__*/React.createElement("input", _extends({
     className: inputClasses
   }, inputProps, {
     ref: mergedRef
   }, readOnlyEventHandlers, {
     readOnly: readOnly
-  })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+  })), invalid && /*#__PURE__*/React.createElement(WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
-  }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+  }), showWarning && /*#__PURE__*/React.createElement(WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
-  }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
+  }), inputValue && /*#__PURE__*/React.createElement(ListBoxSelection, {
     clearSelection: clearInputValue,
     disabled: disabled,
     translateWithId: translateWithId,
@@ -605,12 +601,12 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       // ListBoxSelection
       event.stopPropagation();
     }
-  }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
+  }), /*#__PURE__*/React.createElement(ListBoxTrigger, _extends({}, buttonProps, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+  }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
+  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
     const isChecked = controlledSelectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const itemProps = getItemProps({
       item,
@@ -628,21 +624,21 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       // eslint-disable-line @typescript-eslint/no-unused-vars
       ...modifiedItemProps
     } = itemProps;
-    return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
+    return /*#__PURE__*/React.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
       "aria-label": itemText,
       isActive: isChecked,
       isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: disabled
-    }, modifiedItemProps), /*#__PURE__*/React__default.createElement("div", {
+    }, modifiedItemProps), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--checkbox-wrapper`
-    }, /*#__PURE__*/React__default.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       title: useTitleInItem ? itemText : undefined,
       className: `${prefix}--checkbox-label`,
       "data-contained-checkbox-state": isChecked,
       id: `${itemProps.id}-item`
-    }, ItemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
+    }, ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
       key: itemProps.id
     }, item)) : itemText)));
   }) : null)), !inline && !invalid && !warn ? helper : null);