@itwin/itwinui-react 3.17.3 → 3.18.0

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

@@ -59,8 +59,12 @@ let VirtualizedComboBoxMenu = (props) => {
     [filteredOptions, getMenuItem, children, virtualizer.measureElement],
   );
   return React.createElement(
-    React.Fragment,
-    null,
+    'div',
+    {
+      style: {
+        display: 'contents',
+      },
+    },
     React.createElement(
       ShadowRoot,
       {
@@ -127,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';

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

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

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

@@ -138,7 +138,7 @@ 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(
@@ -250,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());
@@ -294,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();
@@ -569,4 +569,5 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-DatePicker.displayName = 'DatePicker';
+if ('development' === process.env.NODE_ENV)
+  DatePicker.displayName = 'DatePicker';

package/DEV-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,17 +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;
 });
-DialogComponent.displayName = 'Dialog';
+if ('development' === process.env.NODE_ENV)
+  DialogComponent.displayName = 'Dialog';
 export const Dialog = Object.assign(DialogComponent, {
   Backdrop: DialogBackdrop,
   Main: DialogMain,

package/DEV-esm/core/Dialog/DialogBackdrop.js

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

package/DEV-esm/core/Dialog/DialogButtonBar.js

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

package/DEV-esm/core/Dialog/DialogContent.js

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

package/DEV-esm/core/Dialog/DialogMain.js

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

package/DEV-esm/core/Dialog/DialogTitleBar.js

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

package/DEV-esm/core/Dialog/DialogTitleBarTitle.js

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

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

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

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

@@ -12,7 +12,8 @@ export const DropdownMenu = React.forwardRef((props, forwardedRef) =>
     }),
   ),
 );
-DropdownMenu.displayName = 'DropdownMenu';
+if ('development' === process.env.NODE_ENV)
+  DropdownMenu.displayName = 'DropdownMenu';
 let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
   let {
     menuItems,
@@ -24,6 +25,7 @@ let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
     onVisibleChange,
     portal = true,
     middleware,
+    closeOnItemClick = false,
     ...rest
   } = props;
   let [visible, setVisible] = useControlledState(
@@ -45,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/DEV-esm/core/ExpandableBlock/ExpandableBlock.js

@@ -13,7 +13,8 @@ import {
 import { Icon } from '../Icon/Icon.js';
 import { LinkBox } from '../LinkAction/LinkAction.js';
 let ExpandableBlockContext = React.createContext(void 0);
-ExpandableBlockContext.displayName = 'ExpandableBlockContext';
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 let ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
   let { children, title, caption, endIcon, ...rest } = props;
   return React.createElement(
@@ -30,86 +31,93 @@ let ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
     React.createElement(ExpandableBlock.Content, null, children),
   );
 });
-ExpandableBlockComponent.displayName = 'ExpandableBlock';
-let ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
-  let {
-    children,
-    className,
-    onToggle,
-    style,
-    isExpanded,
-    status,
-    size = 'default',
-    styleType = 'default',
-    disabled = false,
-    ...rest
-  } = props;
-  let [expandedState, setExpanded] = React.useState(isExpanded ?? false);
-  let expanded = isExpanded ?? expandedState;
-  let [descriptionId, setDescriptionId] = React.useState(void 0);
-  return React.createElement(
-    ExpandableBlockContext.Provider,
-    {
-      value: {
-        status,
-        isExpanded: expanded,
-        onToggle,
-        size,
-        styleType,
-        disabled,
-        setExpanded,
-        children,
-        descriptionId,
-        setDescriptionId,
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockComponent.displayName = 'ExpandableBlock';
+export const ExpandableBlockWrapper = React.forwardRef(
+  (props, forwardedRef) => {
+    let {
+      children,
+      className,
+      onToggle,
+      style,
+      isExpanded,
+      status,
+      size = 'default',
+      styleType = 'default',
+      disabled = false,
+      ...rest
+    } = props;
+    let [expandedState, setExpanded] = React.useState(isExpanded ?? false);
+    let expanded = isExpanded ?? expandedState;
+    let [descriptionId, setDescriptionId] = React.useState(void 0);
+    return React.createElement(
+      ExpandableBlockContext.Provider,
+      {
+        value: {
+          status,
+          isExpanded: expanded,
+          onToggle,
+          size,
+          styleType,
+          disabled,
+          setExpanded,
+          children,
+          descriptionId,
+          setDescriptionId,
+        },
       },
-    },
-    React.createElement(
-      Box,
+      React.createElement(
+        Box,
+        {
+          className: cx('iui-expandable-block', className),
+          'data-iui-expanded': expanded,
+          'data-iui-size': size,
+          'data-iui-variant': 'default' !== styleType ? styleType : void 0,
+          style: style,
+          ref: forwardedRef,
+          ...rest,
+        },
+        children,
+      ),
+    );
+  },
+);
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
+export const ExpandableBlockTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    let { className, children, label, caption, expandIcon, endIcon, ...rest } =
+      props;
+    let { disabled, status } = useSafeContext(ExpandableBlockContext);
+    return React.createElement(
+      LinkBox,
       {
-        className: cx('iui-expandable-block', className),
-        'data-iui-expanded': expanded,
-        'data-iui-size': size,
-        'data-iui-variant': 'default' !== styleType ? styleType : void 0,
-        style: style,
+        className: cx('iui-expandable-header', className),
+        'data-iui-disabled': disabled ? 'true' : void 0,
         ref: forwardedRef,
         ...rest,
       },
-      children,
-    ),
-  );
-});
-ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
-let ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
-  let { className, children, label, caption, expandIcon, endIcon, ...rest } =
-    props;
-  let { disabled, status } = useSafeContext(ExpandableBlockContext);
-  return React.createElement(
-    LinkBox,
-    {
-      className: cx('iui-expandable-header', className),
-      'data-iui-disabled': disabled ? 'true' : void 0,
-      ref: forwardedRef,
-      ...rest,
-    },
-    children ??
-      React.createElement(
-        React.Fragment,
-        null,
-        expandIcon ?? React.createElement(ExpandableBlock.ExpandIcon, null),
+      children ??
         React.createElement(
-          ExpandableBlock.LabelArea,
+          React.Fragment,
           null,
-          React.createElement(ExpandableBlock.Title, null, label),
-          caption &&
-            React.createElement(ExpandableBlock.Caption, null, caption),
+          expandIcon ?? React.createElement(ExpandableBlock.ExpandIcon, null),
+          React.createElement(
+            ExpandableBlock.LabelArea,
+            null,
+            React.createElement(ExpandableBlock.Title, null, label),
+            caption &&
+              React.createElement(ExpandableBlock.Caption, null, caption),
+          ),
+          endIcon || status
+            ? React.createElement(ExpandableBlock.EndIcon, null, endIcon)
+            : null,
         ),
-        endIcon || status
-          ? React.createElement(ExpandableBlock.EndIcon, null, endIcon)
-          : null,
-      ),
-  );
-});
-ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
+    );
+  },
+);
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
 let ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
   let { className, children, ...rest } = props;
   return React.createElement(
@@ -125,9 +133,11 @@ let ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
 let ExpandableBlockLabelArea = polymorphic.span('iui-expandable-block-label');
-ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
 let ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
   let { className, children, onClick: onClickProp, ...rest } = props;
   let { isExpanded, setExpanded, disabled, onToggle, descriptionId } =
@@ -150,7 +160,8 @@ let ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
 let ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
   let fallbackId = useId();
   let { setDescriptionId } = useSafeContext(ExpandableBlockContext);
@@ -165,7 +176,8 @@ let ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
     className: cx('iui-expandable-block-caption', props?.className),
   });
 });
-ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
 let ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
   let { children, ...rest } = props;
   let { status } = useSafeContext(ExpandableBlockContext);
@@ -180,20 +192,24 @@ let ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
     icon,
   );
 });
-ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
-let ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
-  let { className, children, innerProps, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-expandable-content', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(Box, innerProps, children),
-  );
-});
-ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
+export const ExpandableBlockContent = React.forwardRef(
+  (props, forwardedRef) => {
+    let { className, children, innerProps, ...rest } = props;
+    return React.createElement(
+      Box,
+      {
+        className: cx('iui-expandable-content', className),
+        ref: forwardedRef,
+        ...rest,
+      },
+      React.createElement(Box, innerProps, children),
+    );
+  },
+);
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
   Wrapper: ExpandableBlockWrapper,
   Trigger: ExpandableBlockTrigger,

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

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

package/DEV-esm/core/FileUpload/FileEmptyCard.js

@@ -5,9 +5,11 @@ import { FileUploadCard } from './FileUploadCard.js';
 let FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
   children: React.createElement(SvgUpload, null),
 });
-FileEmptyCardIcon.displayName = 'FileEmptyCard.Icon';
+if ('development' === process.env.NODE_ENV)
+  FileEmptyCardIcon.displayName = 'FileEmptyCard.Icon';
 let FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
-FileEmptyCardText.displayName = 'FileEmptyCard.Text';
+if ('development' === process.env.NODE_ENV)
+  FileEmptyCardText.displayName = 'FileEmptyCard.Text';
 let FileEmptyCardComponent = React.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   return React.createElement(
@@ -31,7 +33,8 @@ let FileEmptyCardComponent = React.forwardRef((props, ref) => {
       ),
   );
 });
-FileEmptyCardComponent.displayName = 'FileEmptyCard';
+if ('development' === process.env.NODE_ENV)
+  FileEmptyCardComponent.displayName = 'FileEmptyCard';
 export const FileEmptyCard = Object.assign(FileEmptyCardComponent, {
   Icon: FileEmptyCardIcon,
   Text: FileEmptyCardText,

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

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