@itwin/itwinui-react 3.17.4 → 3.18.0

package/DEV-cjs/utils/hooks/useWarningLogger.js

@@ -15,31 +15,32 @@ const _dom = require('../functions/dom.js');
 const _React = _react;
 const ReactInternals =
   _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-const useWarningLogger = _dev.isUnitTest
-  ? () => () => {}
-  : function () {
-      let loggedRef = _react.useRef(false);
-      let timeoutRef = _react.useRef(void 0);
-      let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
-      let componentName = stack?.trim().split('\n')[1]?.trim();
-      let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
-      let logWarning = _react.useCallback(
-        (message) => {
-          timeoutRef.current = (0, _dom.getWindow)()?.setTimeout(() => {
-            if (!loggedRef.current) {
-              console.error(prefix, message);
-              loggedRef.current = true;
-            }
-          });
-        },
-        [prefix],
-      );
-      _react.useEffect(
-        () => () => {
-          if (timeoutRef.current)
-            (0, _dom.getWindow)()?.clearTimeout(timeoutRef.current);
-        },
-        [],
-      );
-      return logWarning;
-    };
+const useWarningLogger =
+  'development' !== process.env.NODE_ENV || _dev.isUnitTest
+    ? () => () => {}
+    : function () {
+        let loggedRef = _react.useRef(false);
+        let timeoutRef = _react.useRef(void 0);
+        let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
+        let componentName = stack?.trim().split('\n')[1]?.trim();
+        let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
+        let logWarning = _react.useCallback(
+          (message) => {
+            timeoutRef.current = (0, _dom.getWindow)()?.setTimeout(() => {
+              if (!loggedRef.current) {
+                console.error(prefix, message);
+                loggedRef.current = true;
+              }
+            });
+          },
+          [prefix],
+        );
+        _react.useEffect(
+          () => () => {
+            if (timeoutRef.current)
+              (0, _dom.getWindow)()?.clearTimeout(timeoutRef.current);
+          },
+          [],
+        );
+        return logWarning;
+      };

package/DEV-cjs/utils/providers/index.js

@@ -4,4 +4,3 @@ Object.defineProperty(exports, '__esModule', {
 });
 const _export_star = require('@swc/helpers/_/_export_star');
 _export_star._(require('./HydrationProvider.js'), exports);
-_export_star._(require('./ScopeProvider.js'), exports);

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

@@ -45,7 +45,8 @@ let AlertComponent = React.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
-AlertComponent.displayName = 'Alert';
+if ('development' === process.env.NODE_ENV)
+  AlertComponent.displayName = 'Alert';
 let AlertWrapper = React.forwardRef((props, ref) => {
   let {
     children,
@@ -74,7 +75,8 @@ let AlertWrapper = React.forwardRef((props, ref) => {
     ),
   );
 });
-AlertWrapper.displayName = 'Alert.Wrapper';
+if ('development' === process.env.NODE_ENV)
+  AlertWrapper.displayName = 'Alert.Wrapper';
 let AlertIcon = React.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   let { type } = useSafeContext(AlertContext);
@@ -89,9 +91,11 @@ let AlertIcon = React.forwardRef((props, ref) => {
     children ?? React.createElement(StatusIcon, null),
   );
 });
-AlertIcon.displayName = 'Alert.Icon';
+if ('development' === process.env.NODE_ENV)
+  AlertIcon.displayName = 'Alert.Icon';
 let AlertMessage = polymorphic.span('iui-alert-message');
-AlertMessage.displayName = 'Alert.Message';
+if ('development' === process.env.NODE_ENV)
+  AlertMessage.displayName = 'Alert.Message';
 let AlertAction = React.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   let { type } = useSafeContext(AlertContext);
@@ -108,7 +112,8 @@ let AlertAction = React.forwardRef((props, ref) => {
     children,
   );
 });
-AlertAction.displayName = 'Alert.Action';
+if ('development' === process.env.NODE_ENV)
+  AlertAction.displayName = 'Alert.Action';
 let AlertCloseButton = React.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   return React.createElement(
@@ -123,7 +128,8 @@ let AlertCloseButton = React.forwardRef((props, ref) => {
     children ?? React.createElement(SvgCloseSmall, null),
   );
 });
-AlertCloseButton.displayName = 'Alert.CloseButton';
+if ('development' === process.env.NODE_ENV)
+  AlertCloseButton.displayName = 'Alert.CloseButton';
 export const Alert = Object.assign(AlertComponent, {
   Wrapper: AlertWrapper,
   Icon: AlertIcon,

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

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

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

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

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

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

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

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

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

@@ -49,7 +49,8 @@ let BreadcrumbsComponent = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-BreadcrumbsComponent.displayName = 'Breadcrumbs';
+if ('development' === process.env.NODE_ENV)
+  BreadcrumbsComponent.displayName = 'Breadcrumbs';
 let BreadcrumbContent = (props) => {
   let { children: items, currentIndex, overflowButton, separator } = props;
   let { visibleCount } = OverflowContainer.useContext();
@@ -127,9 +128,10 @@ let ListItem = ({ item, isActive }) => {
     children?.type === 'a' ||
     children?.type === 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(
@@ -176,7 +178,8 @@ let BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
     ...commonProps,
   });
 });
-BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+if ('development' === process.env.NODE_ENV)
+  BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 export const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
   Item: BreadcrumbsItem,
 });

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

@@ -8,7 +8,8 @@ import {
 } from '@floating-ui/react';
 import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 export const ButtonGroupContext = React.createContext(void 0);
-ButtonGroupContext.displayName = 'ButtonGroupContext';
+if ('development' === process.env.NODE_ENV)
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
 export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
   let {
     children: childrenProp,
@@ -69,7 +70,8 @@ export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ButtonGroup.displayName = 'ButtonGroup';
+if ('development' === process.env.NODE_ENV)
+  ButtonGroup.displayName = 'ButtonGroup';
 let BaseGroup = React.forwardRef((props, forwardedRef) => {
   let { orientation, className, ...rest } = props;
   return React.createElement(Box, {

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

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

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

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

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

@@ -21,7 +21,12 @@ export const IconButton = React.forwardRef((props, ref) => {
   let buttonGroupOrientation = React.useContext(ButtonGroupContext);
   let hasPopoverOpen = React.useContext(PopoverOpenContext);
   let logWarning = 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(
     ButtonBase,
@@ -60,4 +65,5 @@ export const IconButton = React.forwardRef((props, ref) => {
       )
     : button;
 });
-IconButton.displayName = 'IconButton';
+if ('development' === process.env.NODE_ENV)
+  IconButton.displayName = 'IconButton';

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

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

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

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

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

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

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

@@ -1,3 +1,4 @@
 import * as React from 'react';
 export const CarouselContext = React.createContext(void 0);
-CarouselContext.displayName = 'CarouselContext';
+if ('development' === process.env.NODE_ENV)
+  CarouselContext.displayName = 'CarouselContext';

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

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

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

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

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

@@ -35,7 +35,8 @@ let CarouselNavigationComponent = React.forwardRef((props, ref) => {
       ),
   );
 });
-CarouselNavigationComponent.displayName = 'Carousel.Navigation';
+if ('development' === process.env.NODE_ENV)
+  CarouselNavigationComponent.displayName = 'Carousel.Navigation';
 let PreviousButton = React.forwardRef((props, ref) => {
   let context = React.useContext(CarouselContext);
   if (!context)
@@ -62,7 +63,8 @@ let PreviousButton = React.forwardRef((props, ref) => {
     React.createElement(SvgChevronLeft, null),
   );
 });
-PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
+if ('development' === process.env.NODE_ENV)
+  PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
 let NextButton = React.forwardRef((props, ref) => {
   let context = React.useContext(CarouselContext);
   if (!context)
@@ -89,7 +91,8 @@ let NextButton = React.forwardRef((props, ref) => {
     React.createElement(SvgChevronRight, null),
   );
 });
-NextButton.displayName = 'Carousel.Navigation.NextButton';
+if ('development' === process.env.NODE_ENV)
+  NextButton.displayName = 'Carousel.Navigation.NextButton';
 export const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
   PreviousButton,
   NextButton,

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

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

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

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

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

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

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

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

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

@@ -75,7 +75,7 @@ export 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 = ColorValue.create(value);
@@ -85,6 +85,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         setValidHexInput(false);
         return;
       }
+    }
     if ('hsl' === currentFormat) {
       let [h, s, l, a] = input.map(Number);
       if (
@@ -430,4 +431,5 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
     ),
   );
 });
-ColorInputPanel.displayName = 'ColorInputPanel';
+if ('development' === process.env.NODE_ENV)
+  ColorInputPanel.displayName = 'ColorInputPanel';

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

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

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

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

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

@@ -34,4 +34,5 @@ export const ColorSwatch = React.forwardRef((props, ref) => {
       React.createElement(VisuallyHidden, null, colorString.toUpperCase()),
   );
 });
-ColorSwatch.displayName = 'ColorSwatch';
+if ('development' === process.env.NODE_ENV)
+  ColorSwatch.displayName = 'ColorSwatch';

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

@@ -67,7 +67,9 @@ export 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(
@@ -77,7 +79,6 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
         });
         return indexArray;
       }
-      return options.findIndex((option) => option.value === value);
     },
     [multiple, options],
   );
@@ -195,7 +196,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
     },
     [multiple, onChangeProp, optionsRef],
   );
-  let onClickHandler = React.useCallback(
+  let handleOptionSelection = React.useCallback(
     (__originalIndex) => {
       inputRef.current?.focus({
         preventScroll: true,
@@ -256,7 +257,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
       return customItem
         ? React.cloneElement(customItem, {
             onClick: (e) => {
-              onClickHandler(__originalIndex);
+              handleOptionSelection(__originalIndex);
               customItem.props.onClick?.(e);
             },
             focused: focusedIndex === __originalIndex,
@@ -278,7 +279,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
               ...restOptions,
               isSelected: isMenuItemSelected(__originalIndex),
               onClick: () => {
-                onClickHandler(__originalIndex);
+                handleOptionSelection(__originalIndex);
               },
               index: __originalIndex,
               'data-iui-filtered-index': filteredIndex,
@@ -292,7 +293,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
       id,
       isMenuItemSelected,
       itemRenderer,
-      onClickHandler,
+      handleOptionSelection,
       optionsExtraInfo,
     ],
   );
@@ -336,29 +337,47 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     ComboBoxRefsContext.Provider,
     {
-      value: {
-        inputRef,
-        menuRef,
-        optionsExtraInfo,
-      },
+      value: React.useMemo(
+        () => ({
+          inputRef,
+          menuRef,
+          optionsExtraInfo,
+        }),
+        [optionsExtraInfo],
+      ),
     },
     React.createElement(
       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,
@@ -372,13 +391,25 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
           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 item = options[index];
+                  let option = options[index];
+                  let optionId = getOptionId(option, id);
+                  let { __originalIndex } = optionsExtraInfo[optionId];
                   return React.createElement(SelectTag, {
-                    key: item.label,
-                    label: item.label,
+                    key: option.label,
+                    label: option.label,
+                    onRemove: () => {
+                      handleOptionSelection(__originalIndex);
+                      hide();
+                    },
                   });
                 })
                 .filter(Boolean)
@@ -392,6 +423,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
         multiple
           ? React.createElement(AutoclearingHiddenLiveRegion, {
               text: liveRegionSelection,
+              id: `${id}-selected-live`,
             })
           : null,
       ),
@@ -408,4 +440,4 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ComboBox.displayName = 'ComboBox';
+if ('development' === process.env.NODE_ENV) ComboBox.displayName = 'ComboBox';

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

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

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

@@ -154,7 +154,6 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         }),
         ...style,
       },
-      'aria-describedby': multiple ? `${id}-selected-live` : void 0,
       size: size,
       ...popover.getReferenceProps({
         ...rest,
@@ -170,9 +169,9 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       ? React.createElement(ComboBoxMultipleContainer, {
           ref: tagContainerWidthRef,
           selectedItems: selectTags,
-          id: `${id}-selected-live`,
         })
       : null,
   );
 });
-ComboBoxInput.displayName = 'ComboBoxInput';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxInput.displayName = 'ComboBoxInput';

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

@@ -36,4 +36,5 @@ export const ComboBoxInputContainer = React.forwardRef(
     );
   },
 );
-ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/DEV-esm/core/ComboBox/ComboBoxMenu.js

@@ -131,4 +131,5 @@ export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
     )
   );
 });
-ComboBoxMenu.displayName = 'ComboBoxMenu';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMenu.displayName = 'ComboBoxMenu';

package/DEV-esm/core/ComboBox/ComboBoxMenuItem.js

@@ -15,7 +15,7 @@ export const ComboBoxMenuItem = React.memo(
       value,
       onClick,
       sublabel,
-      size = sublabel ? 'large' : 'default',
+      size = !!sublabel ? 'large' : 'default',
       startIcon,
       endIcon,
       role = 'option',
@@ -77,4 +77,5 @@ export const ComboBoxMenuItem = React.memo(
     );
   }),
 );
-ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/DEV-esm/core/ComboBox/ComboBoxMultipleContainer.js

@@ -8,4 +8,5 @@ export const ComboBoxMultipleContainer = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';