@itwin/itwinui-react 3.17.3 → 3.18.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # Changelog
 
+## 3.18.0
+
+### Minor Changes
+
+- [#2498](https://github.com/iTwin/iTwinUI/pull/2498): **ComboBox, Select**: Added the ability to deselect options in the closed state when using `multiple` selection mode. The tags will now each have a deselect ("❌") button.
+  - [#2346](https://github.com/iTwin/iTwinUI/pull/2346): `<Select multiple>` now renders the tag container outside the select-button. While this shouldn't make a noticeable difference in most cases, it might affect the use of `selectedItemRenderer`.
+- [#2487](https://github.com/iTwin/iTwinUI/pull/2487): `Table`'s accessibility tree structure has been fixed. This required moving the `role="table"` attribute from the outermost element to a new element inside the Table's shadow DOM. Elements that are not allowed within `role="table"` (e.g. paginator, loading indicator, empty state) will now remain outside `role="table"`, thus resulting in a valid accessibility tree.
+
+  A new `tableProps` prop has been added, which allows passing props to the inner `role="table"` element.
+
+  **NOTE**: For backwards compatibility, ARIA attributes passed directly to `<Table>` will now be automatically propagated to the inner `role="table"` element by default. However, when `tableProps` or `role` is also passed, the ARIA attributes passed directly to `<Table>` will remain on the outermost element to keep the behavior more predictable.
+
+- [#2487](https://github.com/iTwin/iTwinUI/pull/2487): Added a `caption` prop to `Table` that serves as the table caption. Although optional for backward compatibility, it is **recommended** to use it for accessibility purposes.
+
+- **Nested popovers**:
+
+  - [#2490](https://github.com/iTwin/iTwinUI/pull/2490): `Dialog`, `Modal` and `Popover` will now correctly handle portaling of nested floating elements.
+  - [#2490](https://github.com/iTwin/iTwinUI/pull/2490): Fixed an issue in `toaster` where toasts was portaling into a new container when used inside `<Popover>`. With this change, the global toaster container will be correctly reused.
+  - [#2491](https://github.com/iTwin/iTwinUI/pull/2491): Fixed an issue where `Dialog` nested inside `Popover` was not appearing correctly.
+  - [#2491](https://github.com/iTwin/iTwinUI/pull/2491): Adjusted the `z-index` value of `Popover` and other floating elements to match `Dialog`.
+
+- **Markup changes**:
+  - [#2480](https://github.com/iTwin/iTwinUI/pull/2480): `<MenuExtraContent>` now renders a `<div>` instead of `<li>` to prevent invalid markup.
+  - [#2481](https://github.com/iTwin/iTwinUI/pull/2481): `<SideNavigation>` now renders a `<nav>` as the topmost element. This creates a [navigation landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html) for assistive technology.
+
+- [#2482](https://github.com/iTwin/iTwinUI/pull/2482): Added a new `closeItemOnClick` prop to `<DropdownMenu>`. When set to `true`, the menu will automatically close when any menu-item is clicked, without having to explicitly call `close()`.
+- [#2506](https://github.com/iTwin/iTwinUI/pull/2506): Added a new `positionReference` prop to `DropdownMenu`. This prop changes the position of the dropdown menu, which may be useful for building context menus.
+
+- [#2493](https://github.com/iTwin/iTwinUI/pull/2493): Added a new `unstable_TabsPresentation` component. This can be used in cases where the [ARIA Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) is not desirable. Includes the following subcomponents: `Wrapper`, `TabList`, and `Tab`.
+
+- [#2499](https://github.com/iTwin/iTwinUI/pull/2499): Passing the `name` prop to `<Tile.Name>` now internally wraps the name with `<Tile.NameLabel>` to make the behavior consistent with the composition API.
+
+  <details>
+    <summary>Code</summary>
+
+  The following two examples are now equivalent:
+
+  ```tsx
+  <Tile.Name name='My Tile' />
+  ```
+
+  ```tsx
+  <Tile.Name>
+    <Tile.NameLabel>My Tile</Tile.NameLabel>
+  </Tile.Name>
+  ```
+
+  </details>
+
+- **Dependencies**:
+  - [#2485](https://github.com/iTwin/iTwinUI/pull/2485): Removed dependency on `jotai`.
+  - [#2496](https://github.com/iTwin/iTwinUI/pull/2496): Bumped the minimum required versions of `@floating-ui/react` and `@tanstack/react-virtual`.
+
+### Patch Changes
+
+- [#2497](https://github.com/iTwin/iTwinUI/pull/2497): Fixed a `Tile` bug where `Badge` is not visible within `Tile.ThumbnailArea`.
+- [#2503](https://github.com/iTwin/iTwinUI/pull/2503): Updated `--iui-color-background-backdrop` [theme bridge](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-v5-theme-bridge) mapping to match latest designs.
+- **Table**:
+  - [#2462](https://github.com/iTwin/iTwinUI/pull/2462): Fixed a "Maximum update depth exceeded" error in `Table`.
+  - [#2505](https://github.com/iTwin/iTwinUI/pull/2505): Fixed an issue in `Table` where `onSelect` was being incorrectly called when selecting text inside cells.
+  - [#2505](https://github.com/iTwin/iTwinUI/pull/2505): Increased the hit target size of checkboxes and text inside cells to prevent accidental row clicks when clicking the checkbox or selecting the text.
+  - [#2487](https://github.com/iTwin/iTwinUI/pull/2487): Add missing labels to row checkboxes and to the select all checkbox.
+  - [#2487](https://github.com/iTwin/iTwinUI/pull/2487): Removed invalid and unsupported ARIA attributes from `Table` and its internal elements. Notably, `aria-multiselectable` and `role="rowgroup"` were removed.
+
+## 3.17.4
+
+### Patch Changes
+
+- [#2473](https://github.com/iTwin/iTwinUI/pull/2473): Fixed scrolling on touch devices when using the `enableVirtualization` prop in `Tree` and `ComboBox`.
+- [#2466](https://github.com/iTwin/iTwinUI/pull/2466): Fix `Tab`'s stripe positioning when `Tabs.TabList` overflows.
+- [#2469](https://github.com/iTwin/iTwinUI/pull/2469): Fixed `Tabs` bug where orientation related styles of nested tabs were sometimes incorrect.
+
 ## 3.17.3
 
 ### Patch Changes

package/DEV-cjs/core/Alert/Alert.js

@@ -53,7 +53,8 @@ const AlertComponent = _react.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
-AlertComponent.displayName = 'Alert';
+if ('development' === process.env.NODE_ENV)
+  AlertComponent.displayName = 'Alert';
 const AlertWrapper = _react.forwardRef((props, ref) => {
   let {
     children,
@@ -82,7 +83,8 @@ const AlertWrapper = _react.forwardRef((props, ref) => {
     ),
   );
 });
-AlertWrapper.displayName = 'Alert.Wrapper';
+if ('development' === process.env.NODE_ENV)
+  AlertWrapper.displayName = 'Alert.Wrapper';
 const AlertIcon = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   let { type } = (0, _index.useSafeContext)(AlertContext);
@@ -97,9 +99,11 @@ const AlertIcon = _react.forwardRef((props, ref) => {
     children ?? _react.createElement(StatusIcon, null),
   );
 });
-AlertIcon.displayName = 'Alert.Icon';
+if ('development' === process.env.NODE_ENV)
+  AlertIcon.displayName = 'Alert.Icon';
 const AlertMessage = _index.polymorphic.span('iui-alert-message');
-AlertMessage.displayName = 'Alert.Message';
+if ('development' === process.env.NODE_ENV)
+  AlertMessage.displayName = 'Alert.Message';
 const AlertAction = _react.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   let { type } = (0, _index.useSafeContext)(AlertContext);
@@ -120,7 +124,8 @@ const AlertAction = _react.forwardRef((props, ref) => {
     children,
   );
 });
-AlertAction.displayName = 'Alert.Action';
+if ('development' === process.env.NODE_ENV)
+  AlertAction.displayName = 'Alert.Action';
 const AlertCloseButton = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   return _react.createElement(
@@ -135,7 +140,8 @@ const AlertCloseButton = _react.forwardRef((props, ref) => {
     children ?? _react.createElement(_index.SvgCloseSmall, null),
   );
 });
-AlertCloseButton.displayName = 'Alert.CloseButton';
+if ('development' === process.env.NODE_ENV)
+  AlertCloseButton.displayName = 'Alert.CloseButton';
 const Alert = Object.assign(AlertComponent, {
   Wrapper: AlertWrapper,
   Icon: AlertIcon,

package/DEV-cjs/core/Avatar/Avatar.js

@@ -80,4 +80,4 @@ const Avatar = _react.forwardRef((props, ref) => {
       : null,
   );
 });
-Avatar.displayName = 'Avatar';
+if ('development' === process.env.NODE_ENV) Avatar.displayName = 'Avatar';

package/DEV-cjs/core/AvatarGroup/AvatarGroup.js

@@ -74,4 +74,5 @@ const AvatarGroup = _react.forwardRef((props, ref) => {
       ),
   );
 });
-AvatarGroup.displayName = 'AvatarGroup';
+if ('development' === process.env.NODE_ENV)
+  AvatarGroup.displayName = 'AvatarGroup';

package/DEV-cjs/core/Backdrop/Backdrop.js

@@ -29,4 +29,4 @@ const Backdrop = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
-Backdrop.displayName = 'Backdrop';
+if ('development' === process.env.NODE_ENV) Backdrop.displayName = 'Backdrop';

package/DEV-cjs/core/Badge/Badge.js

@@ -54,4 +54,4 @@ const Badge = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-Badge.displayName = 'Badge';
+if ('development' === process.env.NODE_ENV) Badge.displayName = 'Badge';

package/DEV-cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -58,7 +58,8 @@ const BreadcrumbsComponent = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-BreadcrumbsComponent.displayName = 'Breadcrumbs';
+if ('development' === process.env.NODE_ENV)
+  BreadcrumbsComponent.displayName = 'Breadcrumbs';
 const BreadcrumbContent = (props) => {
   let { children: items, currentIndex, overflowButton, separator } = props;
   let { visibleCount } = _index.OverflowContainer.useContext();
@@ -136,9 +137,10 @@ const ListItem = ({ item, isActive }) => {
     children?.type === 'a' ||
     children?.type === _Button.Button
   ) {
-    logWarning(
-      'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
-    );
+    if ('development' === process.env.NODE_ENV)
+      logWarning(
+        'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
+      );
     children = _react.createElement(BreadcrumbsItem, children.props);
   }
   return _react.createElement(
@@ -191,7 +193,8 @@ const BreadcrumbsItem = _react.forwardRef((props, forwardedRef) => {
     ...commonProps,
   });
 });
-BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+if ('development' === process.env.NODE_ENV)
+  BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
   Item: BreadcrumbsItem,
 });

package/DEV-cjs/core/ButtonGroup/ButtonGroup.js

@@ -27,7 +27,8 @@ const _index = require('../../utils/index.js');
 const _react1 = require('@floating-ui/react');
 const _Tooltip = require('../Tooltip/Tooltip.js');
 const ButtonGroupContext = _react.createContext(void 0);
-ButtonGroupContext.displayName = 'ButtonGroupContext';
+if ('development' === process.env.NODE_ENV)
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
 const ButtonGroup = _react.forwardRef((props, forwardedRef) => {
   let {
     children: childrenProp,
@@ -88,7 +89,8 @@ const ButtonGroup = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ButtonGroup.displayName = 'ButtonGroup';
+if ('development' === process.env.NODE_ENV)
+  ButtonGroup.displayName = 'ButtonGroup';
 const BaseGroup = _react.forwardRef((props, forwardedRef) => {
   let { orientation, className, ...rest } = props;
   return _react.createElement(_index.Box, {

package/DEV-cjs/core/Buttons/Button.js

@@ -99,4 +99,4 @@ const Button = _react.forwardRef((props, ref) => {
       }),
   );
 });
-Button.displayName = 'Button';
+if ('development' === process.env.NODE_ENV) Button.displayName = 'Button';

package/DEV-cjs/core/Buttons/DropdownButton.js

@@ -60,4 +60,5 @@ const DropdownButton = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-DropdownButton.displayName = 'DropdownButton';
+if ('development' === process.env.NODE_ENV)
+  DropdownButton.displayName = 'DropdownButton';

package/DEV-cjs/core/Buttons/IconButton.js

@@ -37,7 +37,12 @@ const IconButton = _react.forwardRef((props, ref) => {
   );
   let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
   let logWarning = (0, _index.useWarningLogger)();
-  if (!label && !props['aria-label'] && !props['aria-labelledby'])
+  if (
+    'development' === process.env.NODE_ENV &&
+    !label &&
+    !props['aria-label'] &&
+    !props['aria-labelledby']
+  )
     logWarning('IconButton is missing the `label` prop.');
   let button = _react.createElement(
     _index.ButtonBase,
@@ -81,4 +86,5 @@ const IconButton = _react.forwardRef((props, ref) => {
       )
     : button;
 });
-IconButton.displayName = 'IconButton';
+if ('development' === process.env.NODE_ENV)
+  IconButton.displayName = 'IconButton';

package/DEV-cjs/core/Buttons/IdeasButton.js

@@ -33,4 +33,5 @@ const IdeasButton = _react.forwardRef((props, ref) => {
     feedbackLabel,
   );
 });
-IdeasButton.displayName = 'IdeasButton';
+if ('development' === process.env.NODE_ENV)
+  IdeasButton.displayName = 'IdeasButton';

package/DEV-cjs/core/Buttons/SplitButton.js

@@ -111,4 +111,5 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-SplitButton.displayName = 'SplitButton';
+if ('development' === process.env.NODE_ENV)
+  SplitButton.displayName = 'SplitButton';

package/DEV-cjs/core/Carousel/Carousel.js

@@ -76,7 +76,8 @@ const CarouselComponent = _react.forwardRef((props, ref) => {
     ),
   );
 });
-CarouselComponent.displayName = 'Carousel';
+if ('development' === process.env.NODE_ENV)
+  CarouselComponent.displayName = 'Carousel';
 const Carousel = Object.assign(CarouselComponent, {
   Slider: _CarouselSlider.CarouselSlider,
   Slide: _CarouselSlide.CarouselSlide,

package/DEV-cjs/core/Carousel/CarouselContext.js

@@ -11,4 +11,5 @@ Object.defineProperty(exports, 'CarouselContext', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const CarouselContext = _react.createContext(void 0);
-CarouselContext.displayName = 'CarouselContext';
+if ('development' === process.env.NODE_ENV)
+  CarouselContext.displayName = 'CarouselContext';

package/DEV-cjs/core/Carousel/CarouselDot.js

@@ -34,4 +34,5 @@ const CarouselDot = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
-CarouselDot.displayName = 'Carousel.Dot';
+if ('development' === process.env.NODE_ENV)
+  CarouselDot.displayName = 'Carousel.Dot';

package/DEV-cjs/core/Carousel/CarouselDotsList.js

@@ -163,4 +163,5 @@ const CarouselDotsList = _react.forwardRef((props, ref) => {
     ),
   );
 });
-CarouselDotsList.displayName = 'Carousel.DotsList';
+if ('development' === process.env.NODE_ENV)
+  CarouselDotsList.displayName = 'Carousel.DotsList';

package/DEV-cjs/core/Carousel/CarouselNavigation.js

@@ -49,7 +49,8 @@ const CarouselNavigationComponent = _react.forwardRef((props, ref) => {
       ),
   );
 });
-CarouselNavigationComponent.displayName = 'Carousel.Navigation';
+if ('development' === process.env.NODE_ENV)
+  CarouselNavigationComponent.displayName = 'Carousel.Navigation';
 const PreviousButton = _react.forwardRef((props, ref) => {
   let context = _react.useContext(_CarouselContext.CarouselContext);
   if (!context)
@@ -76,7 +77,8 @@ const PreviousButton = _react.forwardRef((props, ref) => {
     _react.createElement(_index.SvgChevronLeft, null),
   );
 });
-PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
+if ('development' === process.env.NODE_ENV)
+  PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
 const NextButton = _react.forwardRef((props, ref) => {
   let context = _react.useContext(_CarouselContext.CarouselContext);
   if (!context)
@@ -103,7 +105,8 @@ const NextButton = _react.forwardRef((props, ref) => {
     _react.createElement(_index.SvgChevronRight, null),
   );
 });
-NextButton.displayName = 'Carousel.Navigation.NextButton';
+if ('development' === process.env.NODE_ENV)
+  NextButton.displayName = 'Carousel.Navigation.NextButton';
 const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
   PreviousButton,
   NextButton,

package/DEV-cjs/core/Carousel/CarouselSlide.js

@@ -54,4 +54,5 @@ const CarouselSlide = _react.forwardRef((props, ref) => {
     children,
   );
 });
-CarouselSlide.displayName = 'Carousel.Slide';
+if ('development' === process.env.NODE_ENV)
+  CarouselSlide.displayName = 'Carousel.Slide';

package/DEV-cjs/core/Carousel/CarouselSlider.js

@@ -71,4 +71,5 @@ const CarouselSlider = _react.forwardRef((props, ref) => {
     items,
   );
 });
-CarouselSlider.displayName = 'Carousel.Slider';
+if ('development' === process.env.NODE_ENV)
+  CarouselSlider.displayName = 'Carousel.Slider';

package/DEV-cjs/core/Checkbox/Checkbox.js

@@ -98,4 +98,4 @@ const Checkbox = _react.forwardRef((props, ref) => {
       )
     : checkbox;
 });
-Checkbox.displayName = 'Checkbox';
+if ('development' === process.env.NODE_ENV) Checkbox.displayName = 'Checkbox';

package/DEV-cjs/core/ColorPicker/ColorBuilder.js

@@ -343,4 +343,5 @@ const ColorBuilder = _react.forwardRef((props, ref) => {
       }),
   );
 });
-ColorBuilder.displayName = 'ColorBuilder';
+if ('development' === process.env.NODE_ENV)
+  ColorBuilder.displayName = 'ColorBuilder';

package/DEV-cjs/core/ColorPicker/ColorInputPanel.js

@@ -82,7 +82,7 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     );
   let handleColorInputChange = () => {
     let color;
-    if ('hex' === currentFormat)
+    if ('hex' === currentFormat) {
       try {
         let value = input[0].replace(/ /g, '').toLowerCase();
         color = _index.ColorValue.create(value);
@@ -92,6 +92,7 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
         setValidHexInput(false);
         return;
       }
+    }
     if ('hsl' === currentFormat) {
       let [h, s, l, a] = input.map(Number);
       if (
@@ -443,4 +444,5 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     ),
   );
 });
-ColorInputPanel.displayName = 'ColorInputPanel';
+if ('development' === process.env.NODE_ENV)
+  ColorInputPanel.displayName = 'ColorInputPanel';

package/DEV-cjs/core/ColorPicker/ColorPalette.js

@@ -80,4 +80,5 @@ const ColorPalette = _react.forwardRef((props, ref) => {
     ),
   );
 });
-ColorPalette.displayName = 'ColorPalette';
+if ('development' === process.env.NODE_ENV)
+  ColorPalette.displayName = 'ColorPalette';

package/DEV-cjs/core/ColorPicker/ColorPicker.js

@@ -97,4 +97,5 @@ const ColorPicker = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ColorPicker.displayName = 'ColorPicker';
+if ('development' === process.env.NODE_ENV)
+  ColorPicker.displayName = 'ColorPicker';

package/DEV-cjs/core/ColorPicker/ColorSwatch.js

@@ -54,4 +54,5 @@ const ColorSwatch = _react.forwardRef((props, ref) => {
       ),
   );
 });
-ColorSwatch.displayName = 'ColorSwatch';
+if ('development' === process.env.NODE_ENV)
+  ColorSwatch.displayName = 'ColorSwatch';

package/DEV-cjs/core/ComboBox/ComboBox.js

@@ -71,7 +71,9 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
   let getSelectedIndexes = _react.useCallback(
     (value) => {
       if (void 0 === value) return;
-      if (isMultipleEnabled(value, multiple)) {
+      if (!isMultipleEnabled(value, multiple))
+        return options.findIndex((option) => option.value === value);
+      {
         let indexArray = [];
         value?.forEach((value) => {
           let indexToAdd = options.findIndex(
@@ -81,7 +83,6 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
         });
         return indexArray;
       }
-      return options.findIndex((option) => option.value === value);
     },
     [multiple, options],
   );
@@ -199,7 +200,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
     },
     [multiple, onChangeProp, optionsRef],
   );
-  let onClickHandler = _react.useCallback(
+  let handleOptionSelection = _react.useCallback(
     (__originalIndex) => {
       inputRef.current?.focus({
         preventScroll: true,
@@ -260,7 +261,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
       return customItem
         ? _react.cloneElement(customItem, {
             onClick: (e) => {
-              onClickHandler(__originalIndex);
+              handleOptionSelection(__originalIndex);
               customItem.props.onClick?.(e);
             },
             focused: focusedIndex === __originalIndex,
@@ -282,7 +283,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
               ...restOptions,
               isSelected: isMenuItemSelected(__originalIndex),
               onClick: () => {
-                onClickHandler(__originalIndex);
+                handleOptionSelection(__originalIndex);
               },
               index: __originalIndex,
               'data-iui-filtered-index': filteredIndex,
@@ -296,7 +297,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
       id,
       isMenuItemSelected,
       itemRenderer,
-      onClickHandler,
+      handleOptionSelection,
       optionsExtraInfo,
     ],
   );
@@ -340,29 +341,47 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
   return _react.createElement(
     _helpers.ComboBoxRefsContext.Provider,
     {
-      value: {
-        inputRef,
-        menuRef,
-        optionsExtraInfo,
-      },
+      value: _react.useMemo(
+        () => ({
+          inputRef,
+          menuRef,
+          optionsExtraInfo,
+        }),
+        [optionsExtraInfo],
+      ),
     },
     _react.createElement(
       _helpers.ComboBoxStateContext.Provider,
       {
-        value: {
-          id,
-          isOpen,
-          focusedIndex,
-          setFocusedIndex,
-          onClickHandler,
-          enableVirtualization,
-          filteredOptions,
-          getMenuItem,
-          multiple,
-          popover,
-          show,
-          hide,
-        },
+        value: _react.useMemo(
+          () => ({
+            id,
+            isOpen,
+            focusedIndex,
+            setFocusedIndex,
+            onClickHandler: handleOptionSelection,
+            enableVirtualization,
+            filteredOptions,
+            getMenuItem,
+            multiple,
+            popover,
+            show,
+            hide,
+          }),
+          [
+            enableVirtualization,
+            filteredOptions,
+            focusedIndex,
+            getMenuItem,
+            handleOptionSelection,
+            hide,
+            id,
+            isOpen,
+            multiple,
+            popover,
+            show,
+          ],
+        ),
       },
       _react.createElement(
         _ComboBoxInputContainer.ComboBoxInputContainer,
@@ -371,27 +390,35 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
           disabled: inputProps?.disabled,
           ...rest,
         },
-        _react.createElement(
-          _react.Fragment,
-          null,
-          _react.createElement(_ComboBoxInput.ComboBoxInput, {
-            value: inputValue,
-            disabled: inputProps?.disabled,
-            ...inputProps,
-            onChange: handleOnInput,
-            selectTags: isMultipleEnabled(selectedIndexes, multiple)
-              ? selectedIndexes
-                  ?.map((index) => {
-                    let item = options[index];
-                    return _react.createElement(_SelectTag.SelectTag, {
-                      key: item.label,
-                      label: item.label,
-                    });
-                  })
-                  .filter(Boolean)
-              : void 0,
-          }),
-        ),
+        _react.createElement(_ComboBoxInput.ComboBoxInput, {
+          value: inputValue,
+          disabled: inputProps?.disabled,
+          ...inputProps,
+          onChange: handleOnInput,
+          'aria-describedby': [
+            multiple ? `${id}-selected-live` : void 0,
+            inputProps?.['aria-describedby'],
+          ]
+            .filter(Boolean)
+            .join(' '),
+          selectTags: isMultipleEnabled(selectedIndexes, multiple)
+            ? selectedIndexes
+                ?.map((index) => {
+                  let option = options[index];
+                  let optionId = getOptionId(option, id);
+                  let { __originalIndex } = optionsExtraInfo[optionId];
+                  return _react.createElement(_SelectTag.SelectTag, {
+                    key: option.label,
+                    label: option.label,
+                    onRemove: () => {
+                      handleOptionSelection(__originalIndex);
+                      hide();
+                    },
+                  });
+                })
+                .filter(Boolean)
+            : void 0,
+        }),
         _react.createElement(_ComboBoxEndIcon.ComboBoxEndIcon, {
           ...endIconProps,
           disabled: inputProps?.disabled,
@@ -400,6 +427,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
         multiple
           ? _react.createElement(_index.AutoclearingHiddenLiveRegion, {
               text: liveRegionSelection,
+              id: `${id}-selected-live`,
             })
           : null,
       ),
@@ -416,4 +444,4 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ComboBox.displayName = 'ComboBox';
+if ('development' === process.env.NODE_ENV) ComboBox.displayName = 'ComboBox';

package/DEV-cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -39,4 +39,5 @@ const ComboBoxEndIcon = _react.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/DEV-cjs/core/ComboBox/ComboBoxInput.js

@@ -165,7 +165,6 @@ const ComboBoxInput = _react.forwardRef((props, forwardedRef) => {
         }),
         ...style,
       },
-      'aria-describedby': multiple ? `${id}-selected-live` : void 0,
       size: size,
       ...popover.getReferenceProps({
         ...rest,
@@ -186,10 +185,10 @@ const ComboBoxInput = _react.forwardRef((props, forwardedRef) => {
           {
             ref: tagContainerWidthRef,
             selectedItems: selectTags,
-            id: `${id}-selected-live`,
           },
         )
       : null,
   );
 });
-ComboBoxInput.displayName = 'ComboBoxInput';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxInput.displayName = 'ComboBoxInput';

package/DEV-cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -41,4 +41,5 @@ const ComboBoxInputContainer = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(_index.InputWithIcon, null, children),
   );
 });
-ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';