@itwin/itwinui-react 3.17.4 → 3.18.0

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,
@@ -376,13 +395,25 @@ 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.SelectTag, {
-                    key: item.label,
-                    label: item.label,
+                    key: option.label,
+                    label: option.label,
+                    onRemove: () => {
+                      handleOptionSelection(__originalIndex);
+                      hide();
+                    },
                   });
                 })
                 .filter(Boolean)
@@ -396,6 +427,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
         multiple
           ? _react.createElement(_index.AutoclearingHiddenLiveRegion, {
               text: liveRegionSelection,
+              id: `${id}-selected-live`,
             })
           : null,
       ),
@@ -412,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

@@ -142,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.

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -35,6 +35,8 @@ const DropdownMenu = _react.forwardRef((props, forwardedRef) =>
     }),
   ),
 );
+if ('development' === process.env.NODE_ENV)
+  DropdownMenu.displayName = 'DropdownMenu';
 const DropdownMenuContent = _react.forwardRef((props, forwardedRef) => {
   let {
     menuItems,
@@ -46,6 +48,7 @@ const DropdownMenuContent = _react.forwardRef((props, forwardedRef) => {
     onVisibleChange,
     portal = true,
     middleware,
+    closeOnItemClick = false,
     ...rest
   } = props;
   let [visible, setVisible] = (0, _index.useControlledState)(
@@ -67,34 +70,40 @@ const DropdownMenuContent = _react.forwardRef((props, forwardedRef) => {
     [close],
   );
   return _react.createElement(
-    DropdownMenuContext.Provider,
+    DropdownMenuCloseOnClickContext.Provider,
     {
-      value: dropdownMenuContextValue,
+      value: closeOnItemClick,
     },
     _react.createElement(
-      _Menu.Menu,
+      DropdownMenuContext.Provider,
       {
-        trigger: children,
-        onKeyDown: (0, _index.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.Menu,
+        {
+          trigger: children,
+          onKeyDown: (0, _index.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/cjs/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

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -2,11 +2,26 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-Object.defineProperty(exports, 'ExpandableBlock', {
-  enumerable: true,
-  get: function () {
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  ExpandableBlock: function () {
     return ExpandableBlock;
   },
+  ExpandableBlockContent: function () {
+    return ExpandableBlockContent;
+  },
+  ExpandableBlockTrigger: function () {
+    return ExpandableBlockTrigger;
+  },
+  ExpandableBlockWrapper: function () {
+    return ExpandableBlockWrapper;
+  },
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
@@ -18,6 +33,8 @@ const _index = require('../../utils/index.js');
 const _Icon = require('../Icon/Icon.js');
 const _LinkAction = require('../LinkAction/LinkAction.js');
 const ExpandableBlockContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = _react.forwardRef((props, forwardedRef) => {
   let { children, title, caption, endIcon, ...rest } = props;
   return _react.createElement(
@@ -34,6 +51,8 @@ const ExpandableBlockComponent = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(ExpandableBlock.Content, null, children),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockComponent.displayName = 'ExpandableBlock';
 const ExpandableBlockWrapper = _react.forwardRef((props, forwardedRef) => {
   let {
     children,
@@ -81,6 +100,8 @@ const ExpandableBlockWrapper = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
 const ExpandableBlockTrigger = _react.forwardRef((props, forwardedRef) => {
   let { className, children, label, caption, expandIcon, endIcon, ...rest } =
     props;
@@ -111,6 +132,8 @@ const ExpandableBlockTrigger = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
 const ExpandableBlockExpandIcon = _react.forwardRef((props, forwardedRef) => {
   let { className, children, ...rest } = props;
   return _react.createElement(
@@ -129,9 +152,13 @@ const ExpandableBlockExpandIcon = _react.forwardRef((props, forwardedRef) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
 const ExpandableBlockLabelArea = _index.polymorphic.span(
   'iui-expandable-block-label',
 );
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
 const ExpandableBlockTitle = _react.forwardRef((props, forwardedRef) => {
   let { className, children, onClick: onClickProp, ...rest } = props;
   let { isExpanded, setExpanded, disabled, onToggle, descriptionId } = (0,
@@ -158,6 +185,8 @@ const ExpandableBlockTitle = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
 const ExpandableBlockCaption = _react.forwardRef((props, forwardedRef) => {
   let fallbackId = (0, _index.useId)();
   let { setDescriptionId } = (0, _index.useSafeContext)(ExpandableBlockContext);
@@ -175,6 +204,8 @@ const ExpandableBlockCaption = _react.forwardRef((props, forwardedRef) => {
     ),
   });
 });
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
 const ExpandableBlockEndIcon = _react.forwardRef((props, forwardedRef) => {
   let { children, ...rest } = props;
   let { status } = (0, _index.useSafeContext)(ExpandableBlockContext);
@@ -189,6 +220,8 @@ const ExpandableBlockEndIcon = _react.forwardRef((props, forwardedRef) => {
     icon,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
 const ExpandableBlockContent = _react.forwardRef((props, forwardedRef) => {
   let { className, children, innerProps, ...rest } = props;
   return _react.createElement(
@@ -201,6 +234,8 @@ const ExpandableBlockContent = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(_index.Box, innerProps, children),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
   Wrapper: ExpandableBlockWrapper,
   Trigger: ExpandableBlockTrigger,

package/cjs/core/Fieldset/Fieldset.js

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

package/cjs/core/FileUpload/FileEmptyCard.js

@@ -19,7 +19,11 @@ const _FileUploadCard = require('./FileUploadCard.js');
 const FileEmptyCardIcon = _index.polymorphic.span('iui-file-card-empty-icon', {
   children: _react.createElement(_index.SvgUpload, null),
 });
+if ('development' === process.env.NODE_ENV)
+  FileEmptyCardIcon.displayName = 'FileEmptyCard.Icon';
 const FileEmptyCardText = _index.polymorphic.span('iui-file-card-empty-action');
+if ('development' === process.env.NODE_ENV)
+  FileEmptyCardText.displayName = 'FileEmptyCard.Text';
 const FileEmptyCardComponent = _react.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   return _react.createElement(
@@ -47,6 +51,8 @@ const FileEmptyCardComponent = _react.forwardRef((props, ref) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  FileEmptyCardComponent.displayName = 'FileEmptyCard';
 const FileEmptyCard = Object.assign(FileEmptyCardComponent, {
   Icon: FileEmptyCardIcon,
   Text: FileEmptyCardText,