@itwin/itwinui-react 3.17.3 → 3.18.0

package/cjs/core/Buttons/IconButton.js

@@ -37,6 +37,13 @@ const IconButton = _react.forwardRef((props, ref) => {
   );
   let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
   let logWarning = (0, _index.useWarningLogger)();
+  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,
     {
@@ -79,3 +86,5 @@ const IconButton = _react.forwardRef((props, ref) => {
       )
     : button;
 });
+if ('development' === process.env.NODE_ENV)
+  IconButton.displayName = 'IconButton';

package/cjs/core/Buttons/IdeasButton.js

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

package/cjs/core/Buttons/SplitButton.js

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

package/cjs/core/Carousel/Carousel.js

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

package/cjs/core/Carousel/CarouselContext.js

@@ -11,3 +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);
+if ('development' === process.env.NODE_ENV)
+  CarouselContext.displayName = 'CarouselContext';

package/cjs/core/Carousel/CarouselDot.js

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

package/cjs/core/Carousel/CarouselDotsList.js

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

package/cjs/core/Carousel/CarouselNavigation.js

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

package/cjs/core/Carousel/CarouselSlide.js

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

package/cjs/core/Carousel/CarouselSlider.js

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

package/cjs/core/Checkbox/Checkbox.js

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

package/cjs/core/ColorPicker/ColorBuilder.js

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

package/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,3 +444,5 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ColorInputPanel.displayName = 'ColorInputPanel';

package/cjs/core/ColorPicker/ColorPalette.js

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

package/cjs/core/ColorPicker/ColorPicker.js

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

package/cjs/core/ColorPicker/ColorSwatch.js

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

package/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,3 +444,4 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV) ComboBox.displayName = 'ComboBox';

package/cjs/core/ComboBox/ComboBoxEndIcon.js

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

package/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,9 +185,10 @@ const ComboBoxInput = _react.forwardRef((props, forwardedRef) => {
           {
             ref: tagContainerWidthRef,
             selectedItems: selectTags,
-            id: `${id}-selected-live`,
           },
         )
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ComboBoxInput.displayName = 'ComboBoxInput';

package/cjs/core/ComboBox/ComboBoxInputContainer.js

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

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -65,8 +65,12 @@ const VirtualizedComboBoxMenu = (props) => {
     [filteredOptions, getMenuItem, children, virtualizer.measureElement],
   );
   return _react.createElement(
-    _react.Fragment,
-    null,
+    'div',
+    {
+      style: {
+        display: 'contents',
+      },
+    },
     _react.createElement(
       _index.ShadowRoot,
       {
@@ -138,3 +142,5 @@ const ComboBoxMenu = _react.forwardRef((props, forwardedRef) => {
     )
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMenu.displayName = 'ComboBoxMenu';

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -22,7 +22,7 @@ const ComboBoxMenuItem = _react.memo(
       value,
       onClick,
       sublabel,
-      size = sublabel ? 'large' : 'default',
+      size = !!sublabel ? 'large' : 'default',
       startIcon,
       endIcon,
       role = 'option',
@@ -86,3 +86,5 @@ const ComboBoxMenuItem = _react.memo(
     );
   }),
 );
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/cjs/core/ComboBox/ComboBoxMultipleContainer.js

@@ -19,3 +19,5 @@ const ComboBoxMultipleContainer = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';

package/cjs/core/ComboBox/helpers.js

@@ -20,4 +20,8 @@ _export(exports, {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const ComboBoxRefsContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
 const ComboBoxStateContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  ComboBoxStateContext.displayName = 'ComboBoxStateContext';

package/cjs/core/DatePicker/DatePicker.js

@@ -151,6 +151,13 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = (0, _index.useWarningLogger)();
+  if ('development' === process.env.NODE_ENV) {
+    let onlyOneRangePropPassed = (startDate ? 1 : 0) + (endDate ? 1 : 0) === 1;
+    if (enableRangeSelect && onlyOneRangePropPassed)
+      logWarning(
+        '`DatePicker` with `enableRangeSelect` needs *both* `startDate` and `endDate` to either be `Date` or `undefined`. Passing `Date` to just one of them is not allowed.',
+      );
+  }
   let monthNames = localizedNames?.months ?? defaultMonths;
   let shortDays = localizedNames?.shortDays ?? defaultShortDays;
   let longDays = localizedNames?.days ?? defaultLongDays;
@@ -258,7 +265,7 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
     setFocusedDay(getNewFocusedDate(newYear, newMonth));
   };
   let onDayClick = (day) => {
-    if (enableRangeSelect) {
+    if (enableRangeSelect)
       if (isSelectingStartDate) {
         if (day.getMonth() !== selectedStartDay?.getMonth())
           setMonthAndYear(day.getMonth(), day.getFullYear());
@@ -302,7 +309,7 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
           setIsSelectingStartDate(true);
         }
       }
-    } else {
+    else {
       if (day.getMonth() !== selectedDay?.getMonth())
         setMonthAndYear(day.getMonth(), day.getFullYear());
       let currentDate = selectedDay ?? new Date();
@@ -595,3 +602,5 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  DatePicker.displayName = 'DatePicker';

package/cjs/core/Dialog/Dialog.js

@@ -40,7 +40,12 @@ const DialogComponent = _react.forwardRef((props, ref) => {
     ...rest
   } = props;
   let dialogRootRef = _react.useRef(null);
-  let mergedRefs = (0, _index.useMergedRefs)(ref, dialogRootRef);
+  let [dialogElement, setDialogElement] = _react.useState(null);
+  let mergedRefs = (0, _index.useMergedRefs)(
+    ref,
+    dialogRootRef,
+    setDialogElement,
+  );
   return isOpen
     ? _react.createElement(
         _DialogContext.DialogContext.Provider,
@@ -65,19 +70,27 @@ const DialogComponent = _react.forwardRef((props, ref) => {
           {
             portal: portal,
           },
-          _react.createElement(_index.Box, {
-            className: (0, _classnames.default)(
-              'iui-dialog-wrapper',
-              className,
-            ),
-            'data-iui-relative': 'container' === relativeTo,
-            ref: mergedRefs,
-            ...rest,
-          }),
+          _react.createElement(
+            _index.PortalContainerContext.Provider,
+            {
+              value: dialogElement,
+            },
+            _react.createElement(_index.Box, {
+              className: (0, _classnames.default)(
+                'iui-dialog-wrapper',
+                className,
+              ),
+              'data-iui-relative': 'container' === relativeTo,
+              ref: mergedRefs,
+              ...rest,
+            }),
+          ),
         ),
       )
     : null;
 });
+if ('development' === process.env.NODE_ENV)
+  DialogComponent.displayName = 'Dialog';
 const Dialog = Object.assign(DialogComponent, {
   Backdrop: _DialogBackdrop.DialogBackdrop,
   Main: _DialogMain.DialogMain,

package/cjs/core/Dialog/DialogBackdrop.js

@@ -60,3 +60,5 @@ const DialogBackdrop = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  DialogBackdrop.displayName = 'Dialog.Backdrop';

package/cjs/core/Dialog/DialogButtonBar.js

@@ -10,3 +10,5 @@ Object.defineProperty(exports, 'DialogButtonBar', {
 });
 const _index = require('../../utils/index.js');
 const DialogButtonBar = _index.polymorphic.div('iui-dialog-button-bar');
+if ('development' === process.env.NODE_ENV)
+  DialogButtonBar.displayName = 'Dialog.ButtonBar';

package/cjs/core/Dialog/DialogContent.js

@@ -10,3 +10,5 @@ Object.defineProperty(exports, 'DialogContent', {
 });
 const _index = require('../../utils/index.js');
 const DialogContent = _index.polymorphic.div('iui-dialog-content');
+if ('development' === process.env.NODE_ENV)
+  DialogContent.displayName = 'Dialog.Content';

package/cjs/core/Dialog/DialogContext.d.ts

@@ -71,7 +71,7 @@ export type DialogContextProps = {
      */
     relativeTo?: 'container' | 'viewport';
     /**
-     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     * If true, the dialog will be portaled to the end of `<body>` or to the nearest popover.
      * Recommended to set to true when for modal dialogs that use `relativeTo='viewport'`.
      *
      * Can be set to an object with a `to` property to portal into a specific element.

package/cjs/core/Dialog/DialogMain.js

@@ -190,3 +190,5 @@ const DialogMain = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  DialogMain.displayName = 'Dialog.Main';

package/cjs/core/Dialog/DialogTitleBar.js

@@ -84,3 +84,5 @@ const DialogTitleBar = Object.assign(
     Title: _DialogTitleBarTitle.DialogTitleBarTitle,
   },
 );
+if ('development' === process.env.NODE_ENV)
+  DialogTitleBar.displayName = 'Dialog.TitleBar';

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -10,3 +10,5 @@ Object.defineProperty(exports, 'DialogTitleBarTitle', {
 });
 const _index = require('../../utils/index.js');
 const DialogTitleBarTitle = _index.polymorphic.div('iui-dialog-title');
+if ('development' === process.env.NODE_ENV)
+  DialogTitleBarTitle.displayName = 'Dialog.TitleBar.Title';

package/cjs/core/Divider/Divider.js

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

package/cjs/core/DropdownMenu/DropdownMenu.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
+import { Menu } from '../Menu/Menu.js';
 import { usePopover } from '../Popover/Popover.js';
 export type DropdownMenuProps = {
     /**
@@ -27,7 +28,12 @@ export type DropdownMenuProps = {
     middleware?: {
         hide?: boolean;
     };
-} & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & Pick<PortalProps, 'portal'>;
+    /**
+     * If `true`, closes the `DropdownMenu` when any descendant `MenuItem` is clicked.
+     * @default false
+     */
+    closeOnItemClick?: boolean;
+} & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & Pick<React.ComponentProps<typeof Menu>, 'positionReference'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.
  * Built on top of the {@link Popover} component.