@itwin/itwinui-react 3.17.4 → 3.18.0

package/esm/core/Carousel/CarouselSlider.js

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

package/esm/core/Checkbox/Checkbox.js

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

package/esm/core/ColorPicker/ColorBuilder.js

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

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

package/esm/core/ColorPicker/ColorPalette.js

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

package/esm/core/ColorPicker/ColorPicker.js

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

package/esm/core/ColorPicker/ColorSwatch.js

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

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

package/esm/core/ComboBox/ComboBoxEndIcon.js

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

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

package/esm/core/ComboBox/ComboBoxInputContainer.js

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

package/esm/core/ComboBox/ComboBoxMenu.js

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

package/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,3 +77,5 @@ export const ComboBoxMenuItem = React.memo(
     );
   }),
 );
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/esm/core/ComboBox/ComboBoxMultipleContainer.js

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

package/esm/core/ComboBox/helpers.js

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

package/esm/core/DatePicker/DatePicker.js

@@ -138,6 +138,13 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = 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;
@@ -243,7 +250,7 @@ export 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());
@@ -287,7 +294,7 @@ export 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();
@@ -562,3 +569,5 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  DatePicker.displayName = 'DatePicker';

package/esm/core/Dialog/Dialog.js

@@ -6,7 +6,12 @@ import { DialogBackdrop } from './DialogBackdrop.js';
 import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
-import { useMergedRefs, Box, Portal } from '../../utils/index.js';
+import {
+  useMergedRefs,
+  Box,
+  Portal,
+  PortalContainerContext,
+} from '../../utils/index.js';
 let DialogComponent = React.forwardRef((props, ref) => {
   let {
     trapFocus = false,
@@ -26,7 +31,8 @@ let DialogComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   let dialogRootRef = React.useRef(null);
-  let mergedRefs = useMergedRefs(ref, dialogRootRef);
+  let [dialogElement, setDialogElement] = React.useState(null);
+  let mergedRefs = useMergedRefs(ref, dialogRootRef, setDialogElement);
   return isOpen
     ? React.createElement(
         DialogContext.Provider,
@@ -51,16 +57,24 @@ let DialogComponent = React.forwardRef((props, ref) => {
           {
             portal: portal,
           },
-          React.createElement(Box, {
-            className: cx('iui-dialog-wrapper', className),
-            'data-iui-relative': 'container' === relativeTo,
-            ref: mergedRefs,
-            ...rest,
-          }),
+          React.createElement(
+            PortalContainerContext.Provider,
+            {
+              value: dialogElement,
+            },
+            React.createElement(Box, {
+              className: cx('iui-dialog-wrapper', className),
+              'data-iui-relative': 'container' === relativeTo,
+              ref: mergedRefs,
+              ...rest,
+            }),
+          ),
         ),
       )
     : null;
 });
+if ('development' === process.env.NODE_ENV)
+  DialogComponent.displayName = 'Dialog';
 export const Dialog = Object.assign(DialogComponent, {
   Backdrop: DialogBackdrop,
   Main: DialogMain,

package/esm/core/Dialog/DialogBackdrop.js

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

package/esm/core/Dialog/DialogButtonBar.js

@@ -1,2 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
 export const DialogButtonBar = polymorphic.div('iui-dialog-button-bar');
+if ('development' === process.env.NODE_ENV)
+  DialogButtonBar.displayName = 'Dialog.ButtonBar';

package/esm/core/Dialog/DialogContent.js

@@ -1,2 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
 export const DialogContent = polymorphic.div('iui-dialog-content');
+if ('development' === process.env.NODE_ENV)
+  DialogContent.displayName = 'Dialog.Content';

package/esm/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/esm/core/Dialog/DialogMain.js

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

package/esm/core/Dialog/DialogTitleBar.js

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

package/esm/core/Dialog/DialogTitleBarTitle.js

@@ -1,2 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
 export const DialogTitleBarTitle = polymorphic.div('iui-dialog-title');
+if ('development' === process.env.NODE_ENV)
+  DialogTitleBarTitle.displayName = 'Dialog.TitleBar.Title';

package/esm/core/Divider/Divider.js

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

package/esm/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.

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -12,6 +12,8 @@ export const DropdownMenu = React.forwardRef((props, forwardedRef) =>
     }),
   ),
 );
+if ('development' === process.env.NODE_ENV)
+  DropdownMenu.displayName = 'DropdownMenu';
 let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
   let {
     menuItems,
@@ -23,6 +25,7 @@ let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
     onVisibleChange,
     portal = true,
     middleware,
+    closeOnItemClick = false,
     ...rest
   } = props;
   let [visible, setVisible] = useControlledState(
@@ -44,34 +47,40 @@ let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
     [close],
   );
   return React.createElement(
-    DropdownMenuContext.Provider,
+    DropdownMenuCloseOnClickContext.Provider,
     {
-      value: dropdownMenuContextValue,
+      value: closeOnItemClick,
     },
     React.createElement(
-      Menu,
+      DropdownMenuContext.Provider,
       {
-        trigger: children,
-        onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
-          if (e.defaultPrevented) return;
-          if ('Tab' === e.key) setVisible(false);
-        }),
-        role: role,
-        ref: forwardedRef,
-        portal: portal,
-        popoverProps: React.useMemo(
-          () => ({
-            placement,
-            matchWidth,
-            visible,
-            onVisibleChange: setVisible,
-            middleware,
-          }),
-          [matchWidth, middleware, placement, setVisible, visible],
-        ),
-        ...rest,
+        value: dropdownMenuContextValue,
       },
-      menuContent,
+      React.createElement(
+        Menu,
+        {
+          trigger: children,
+          onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+            if (e.defaultPrevented) return;
+            if ('Tab' === e.key) setVisible(false);
+          }),
+          role: role,
+          ref: forwardedRef,
+          portal: portal,
+          popoverProps: React.useMemo(
+            () => ({
+              placement,
+              matchWidth,
+              visible,
+              onVisibleChange: setVisible,
+              middleware,
+            }),
+            [matchWidth, middleware, placement, setVisible, visible],
+          ),
+          ...rest,
+        },
+        menuContent,
+      ),
     ),
   );
 });

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -36,15 +36,18 @@ type ExpandableBlockOwnProps = {
      */
     disabled?: boolean;
 };
+export declare const ExpandableBlockWrapper: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps>;
 type ExpandableBlockTriggerOwnProps = {
     label?: React.ReactNode;
     caption?: React.ReactNode;
     expandIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
 };
+export declare const ExpandableBlockTrigger: PolymorphicForwardRefComponent<"div", ExpandableBlockTriggerOwnProps>;
 type ExpandableBlockContentOwnProps = {
     innerProps?: React.ComponentPropsWithoutRef<'div'>;
 };
+export declare const ExpandableBlockContent: PolymorphicForwardRefComponent<"div", ExpandableBlockContentOwnProps>;
 /**
  * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.
  * @example