@itwin/itwinui-react 3.17.3 → 3.18.0

package/cjs/core/Tabs/Tabs.js

@@ -16,6 +16,9 @@ _export(exports, {
   Tabs: function () {
     return Tabs;
   },
+  unstable_TabsPresentation: function () {
+    return unstable_TabsPresentation;
+  },
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
@@ -27,7 +30,6 @@ const _index = require('../../utils/index.js');
 const _Icon = require('../Icon/Icon.js');
 const TabsWrapper = _react.forwardRef((props, ref) => {
   let {
-    className,
     children,
     orientation = 'horizontal',
     type = 'default',
@@ -47,14 +49,10 @@ const TabsWrapper = _react.forwardRef((props, ref) => {
   let [hasSublabel, setHasSublabel] = _react.useState(false);
   let idPrefix = (0, _index.useId)();
   return _react.createElement(
-    _index.Box,
+    TabsWrapperPresentation,
     {
-      className: (0, _classnames.default)(
-        'iui-tabs-wrapper',
-        `iui-${orientation}`,
-        className,
-      ),
       ...rest,
+      orientation: orientation,
       style: {
         ...stripeProperties,
         ...props?.style,
@@ -81,9 +79,25 @@ const TabsWrapper = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TabsWrapper.displayName = 'Tabs.Wrapper';
+const TabsWrapperPresentation = _react.forwardRef((props, forwardedRef) => {
+  let { orientation = 'horizontal', ...rest } = props;
+  return _react.createElement(_index.Box, {
+    ...rest,
+    className: (0, _classnames.default)(
+      'iui-tabs-wrapper',
+      `iui-${orientation}`,
+      props.className,
+    ),
+    ref: forwardedRef,
+  });
+});
 const TabList = _react.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
-  let { type, hasSublabel, color } = (0, _index.useSafeContext)(TabsContext);
+  let { type, hasSublabel, color, orientation } = (0, _index.useSafeContext)(
+    TabsContext,
+  );
   let isClient = (0, _index.useIsClient)();
   let tablistRef = _react.useRef(null);
   let [tablistSizeRef, tabsWidth] = (0, _index.useContainerWidth)(
@@ -96,22 +110,22 @@ const TabList = _react.forwardRef((props, ref) => {
     useScrollbarGutter(),
   );
   return _react.createElement(
-    _index.Box,
+    TabListPresentation,
     {
       className: (0, _classnames.default)(
-        'iui-tabs',
-        `iui-${type}`,
         {
-          'iui-green': 'green' === color,
           'iui-animated': 'default' !== type && isClient,
-          'iui-not-animated': 'default' !== type && !isClient,
-          'iui-large': hasSublabel,
         },
         className,
       ),
+      'data-iui-orientation': orientation,
       role: 'tablist',
       ref: refs,
       ...rest,
+      type: type,
+      color: color,
+      size: hasSublabel ? 'large' : void 0,
+      orientation: orientation,
     },
     _react.createElement(
       TabListContext.Provider,
@@ -125,8 +139,33 @@ const TabList = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TabList.displayName = 'Tabs.TabList';
+const TabListPresentation = _react.forwardRef((props, forwardedRef) => {
+  let {
+    type = 'default',
+    color,
+    size,
+    orientation = 'horizontal',
+    ...rest
+  } = props;
+  return _react.createElement(_index.Box, {
+    ...rest,
+    className: (0, _classnames.default)(
+      'iui-tabs',
+      `iui-${type}`,
+      {
+        'iui-green': 'green' === color,
+        'iui-large': 'large' === size,
+      },
+      props.className,
+    ),
+    'data-iui-orientation': orientation,
+    ref: forwardedRef,
+  });
+});
 const Tab = _react.forwardRef((props, forwardedRef) => {
-  let { className, children, value, label, ...rest } = props;
+  let { children, value, label, ...rest } = props;
   let {
     orientation,
     activeValue,
@@ -154,10 +193,12 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
     let updateStripe = () => {
       let currentTabRect = tabRef.current?.getBoundingClientRect();
       let tabslistRect = tablistRef.current?.getBoundingClientRect();
+      let currentTabLeftIncludingScroll =
+        (currentTabRect?.x ?? 0) + (tablistRef.current?.scrollLeft ?? 0);
       let tabsStripePosition =
         null != currentTabRect && null != tabslistRect
           ? {
-              horizontal: currentTabRect.x - tabslistRect.x,
+              horizontal: currentTabLeftIncludingScroll - tabslistRect.x,
               vertical: currentTabRect.y - tabslistRect.y,
             }
           : {
@@ -227,9 +268,9 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
     [activeValue, setActiveValue, value],
   );
   return _react.createElement(
-    _index.ButtonBase,
+    TabPresentation,
     {
-      className: (0, _classnames.default)('iui-tab', className),
+      as: _index.ButtonBase,
       role: 'tab',
       tabIndex: isActive ? 0 : -1,
       'aria-selected': isActive,
@@ -253,6 +294,15 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
     label ? _react.createElement(Tabs.TabLabel, null, label) : children,
   );
 });
+if ('development' === process.env.NODE_ENV) Tab.displayName = 'Tabs.Tab';
+const TabPresentation = _react.forwardRef((props, forwardedRef) =>
+  _react.createElement(_index.Box, {
+    as: 'button',
+    ...props,
+    className: (0, _classnames.default)('iui-tab', props.className),
+    ref: forwardedRef,
+  }),
+);
 const TabIcon = _react.forwardRef((props, ref) =>
   _react.createElement(_Icon.Icon, {
     ...props,
@@ -260,7 +310,11 @@ const TabIcon = _react.forwardRef((props, ref) =>
     ref: ref,
   }),
 );
+if ('development' === process.env.NODE_ENV)
+  TabIcon.displayName = 'Tabs.TabIcon';
 const TabLabel = _index.polymorphic.span('iui-tab-label');
+if ('development' === process.env.NODE_ENV)
+  TabLabel.displayName = 'Tabs.TabLabel';
 const TabDescription = _react.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   let { hasSublabel, setHasSublabel } = (0, _index.useSafeContext)(TabsContext);
@@ -278,6 +332,8 @@ const TabDescription = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TabDescription.displayName = 'Tabs.TabDescription';
 const TabsActions = _react.forwardRef((props, ref) => {
   let { wrapperProps, className, children, ...rest } = props;
   return _react.createElement(
@@ -300,6 +356,8 @@ const TabsActions = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TabsActions.displayName = 'Tabs.Actions';
 const TabsPanel = _react.forwardRef((props, ref) => {
   let { value, className, children, ...rest } = props;
   let { activeValue, idPrefix } = (0, _index.useSafeContext)(TabsContext);
@@ -317,6 +375,8 @@ const TabsPanel = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TabsPanel.displayName = 'Tabs.Panel';
 const LegacyTabsComponent = _react.forwardRef((props, forwardedRef) => {
   let actions;
   if ('pill' !== props.type && props.actions) {
@@ -384,6 +444,8 @@ const LegacyTabsComponent = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  LegacyTabsComponent.displayName = 'Tabs';
 const LegacyTab = _react.forwardRef((props, forwardedRef) => {
   let { label, sublabel, startIcon, children, value, ...rest } = props;
   return _react.createElement(
@@ -413,8 +475,17 @@ const Tabs = Object.assign(LegacyTabsComponent, {
   Actions: TabsActions,
   Panel: TabsPanel,
 });
+const unstable_TabsPresentation = {
+  Wrapper: TabsWrapperPresentation,
+  TabList: TabListPresentation,
+  Tab: TabPresentation,
+};
 const TabsContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  TabsContext.displayName = 'TabsContext';
 const TabListContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  TabListContext.displayName = 'TabListContext';
 const useScrollbarGutter = () =>
   _react.useCallback((element) => {
     if (element) {

package/cjs/core/Tag/Tag.js

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

package/cjs/core/Tag/TagContainer.js

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

package/cjs/core/Textarea/Textarea.js

@@ -19,3 +19,4 @@ const Textarea = _react.forwardRef((props, forwardedRef) =>
     ...props,
   }),
 );
+if ('development' === process.env.NODE_ENV) Textarea.displayName = 'Textarea';

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -20,10 +20,9 @@ const _classnames = /*#__PURE__*/ _interop_require_default._(
 const _index = require('../../utils/index.js');
 const _ThemeContext = require('./ThemeContext.js');
 const _Toaster = require('../Toast/Toaster.js');
-const _jotai = require('jotai');
 const _meta = require('../../utils/meta.js');
 const versionWithoutDots = _meta.meta.version.replace(/\./g, '');
-const ownerDocumentAtom = (0, _jotai.atom)(void 0);
+const OwnerDocumentContext = _react.createContext(void 0);
 const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
   var _themeOptions, _themeOptions1, _future;
   let {
@@ -46,8 +45,8 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
       'inherit' === themeProp ? parent.highContrast : void 0);
   (_future = future).themeBridge ??
     (_future.themeBridge = parent.context?.future?.themeBridge);
-  let [portalContainerFromParent] = (0, _index.useScopedAtom)(
-    _index.portalContainerAtom,
+  let portalContainerFromParent = _react.useContext(
+    _index.PortalContainerContext,
   );
   let contextValue = _react.useMemo(
     () => ({
@@ -57,9 +56,14 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     }),
     [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
   );
+  let [portalContainer, setPortalContainer] = _react.useState(
+    portalContainerProp || null,
+  );
   return _react.createElement(
-    _index.ScopeProvider,
-    null,
+    _index.PortalContainerContext.Provider,
+    {
+      value: portalContainer,
+    },
     _react.createElement(
       _index.HydrationProvider,
       null,
@@ -98,6 +102,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
               future: future,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
+              setPortalContainer: setPortalContainer,
               isInheritingTheme: 'inherit' === themeProp,
             }),
           ),
@@ -106,10 +111,10 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ThemeProvider.displayName = 'ThemeProvider';
 const MainRoot = _react.forwardRef((props, forwardedRef) => {
-  let [ownerDocument, setOwnerDocument] = (0, _index.useScopedAtom)(
-    ownerDocumentAtom,
-  );
+  let [ownerDocument, setOwnerDocument] = _react.useState(void 0);
   let findOwnerDocumentFromRef = _react.useCallback(
     (el) => {
       if (el && el.ownerDocument !== ownerDocument)
@@ -117,10 +122,16 @@ const MainRoot = _react.forwardRef((props, forwardedRef) => {
     },
     [ownerDocument, setOwnerDocument],
   );
-  return _react.createElement(Root, {
-    ...props,
-    ref: (0, _index.useMergedRefs)(findOwnerDocumentFromRef, forwardedRef),
-  });
+  return _react.createElement(
+    OwnerDocumentContext.Provider,
+    {
+      value: ownerDocument,
+    },
+    _react.createElement(Root, {
+      ...props,
+      ref: (0, _index.useMergedRefs)(findOwnerDocumentFromRef, forwardedRef),
+    }),
+  );
 });
 const Root = _react.forwardRef((props, forwardedRef) => {
   let { theme, children, themeOptions, className, future, ...rest } = props;
@@ -190,15 +201,13 @@ const PortalContainer = _react.memo(
   ({
     portalContainerProp,
     portalContainerFromParent,
+    setPortalContainer,
     isInheritingTheme,
     theme,
     themeOptions,
     future,
   }) => {
-    let [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
-    let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
-      _index.portalContainerAtom,
-    );
+    let ownerDocument = _react.useContext(OwnerDocumentContext);
     let shouldSetupPortalContainer =
       !portalContainerProp &&
       (!isInheritingTheme ||
@@ -209,9 +218,13 @@ const PortalContainer = _react.memo(
     _react.useEffect(() => {
       if (shouldSetupPortalContainer) return;
       let portalTarget = portalContainerProp || portalContainerFromParent;
-      if (portalTarget && portalTarget !== portalContainer)
-        setPortalContainer(portalTarget);
-    });
+      if (portalTarget) setPortalContainer(portalTarget);
+    }, [
+      portalContainerProp,
+      portalContainerFromParent,
+      shouldSetupPortalContainer,
+      setPortalContainer,
+    ]);
     let isHydrated = 'hydrated' === (0, _index.useHydration)();
     if (!isHydrated) return null;
     if (shouldSetupPortalContainer && ownerDocument)
@@ -280,7 +293,30 @@ const useIuiDebugRef = () => {
     (_globalThis.__iui = {
       versions: new Set(),
     });
-  var version, version1;
+  if ('development' === process.env.NODE_ENV && !_index.isUnitTest)
+    _globalThis1.__iui.versions.add = (version) => {
+      Set.prototype.add.call(_globalThis1.__iui.versions, version);
+      if (_globalThis1.__iui.versions.size > 1) {
+        _globalThis1.__iui._shouldWarn = true;
+        if (_globalThis1.__iui._warnTimeout)
+          clearTimeout(_globalThis1.__iui._warnTimeout);
+        _globalThis1.__iui._warnTimeout = setTimeout(() => {
+          if (_globalThis1.__iui._shouldWarn) {
+            console.warn(
+              "Multiple versions of iTwinUI were detected on this page. This can lead to unexpected behavior and duplicated code in the bundle. Make sure you're using a single iTwinUI instance across your app. https://github.com/iTwin/iTwinUI/wiki/Version-conflicts",
+            );
+            console.groupCollapsed('iTwinUI versions detected:');
+            let versionsTable = [];
+            _globalThis1.__iui.versions.forEach((version) => {
+              versionsTable.push(JSON.parse(version));
+            });
+            console.table(versionsTable);
+            console.groupEnd();
+            _globalThis1.__iui._shouldWarn = false;
+          }
+        }, 3000);
+      }
+    };
   _globalThis1.__iui.versions.add(JSON.stringify(_meta.meta));
 };
 const useInertPolyfill = () => {

package/cjs/core/Tile/Tile.js

@@ -20,6 +20,8 @@ const _IconButton = require('../Buttons/IconButton.js');
 const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
 const _LinkAction = require('../LinkAction/LinkAction.js');
 const TileContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  TileContext.displayName = 'TileContext';
 const TileWrapper = _react.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -66,6 +68,8 @@ const TileWrapper = _react.forwardRef((props, forwardedRef) => {
     }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileWrapper.displayName = 'Tile.Wrapper';
 const TileAction = _react.forwardRef((props, forwardedRef) => {
   let { onClick, children, href, ...rest } = props;
   let { setActionable, isDisabled } = (0, _index.useSafeContext)(TileContext);
@@ -85,7 +89,11 @@ const TileAction = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileAction.displayName = 'Tile.Action';
 const TileThumbnailArea = _index.polymorphic.div('iui-tile-thumbnail');
+if ('development' === process.env.NODE_ENV)
+  TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
 const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
   let { className, url, children, ...rest } = props;
   if (url)
@@ -110,12 +118,18 @@ const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
 const TileQuickAction = _index.polymorphic.div(
   'iui-tile-thumbnail-quick-action',
 );
+if ('development' === process.env.NODE_ENV)
+  TileQuickAction.displayName = 'Tile.QuickAction';
 const TileTypeIndicator = _index.polymorphic.div(
   'iui-tile-thumbnail-type-indicator',
 );
+if ('development' === process.env.NODE_ENV)
+  TileTypeIndicator.displayName = 'Tile.TypeIndicator';
 const TileIconButton = _react.forwardRef((props, forwardedRef) => {
   let { className, children, ...rest } = props;
   return _react.createElement(
@@ -133,9 +147,13 @@ const TileIconButton = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileIconButton.displayName = 'Tile.IconButton';
 const TileBadgeContainer = _index.polymorphic.div(
   'iui-tile-thumbnail-badge-container',
 );
+if ('development' === process.env.NODE_ENV)
+  TileBadgeContainer.displayName = 'Tile.BadgeContainer';
 const TileName = _react.forwardRef((props, forwardedRef) => {
   let { className, children, name, ...rest } = props;
   return _react.createElement(
@@ -145,9 +163,11 @@ const TileName = _react.forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       ...rest,
     },
-    children ?? name,
+    children ?? _react.createElement(Tile.NameLabel, null, name),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileBadgeContainer.displayName = 'Tile.Name';
 const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
   let { children, className, ...rest } = props;
   let { status, isLoading, isSelected, isNew } = (0, _index.useSafeContext)(
@@ -188,52 +208,61 @@ const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
       )
     : null;
 });
+if ('development' === process.env.NODE_ENV)
+  TileNameIcon.displayName = 'Tile.NameIcon';
 const TileNameLabel = _index.polymorphic.span('iui-tile-name-label');
+if ('development' === process.env.NODE_ENV)
+  TileNameLabel.displayName = 'Tile.NameLabel';
 const TileContentArea = _index.polymorphic.div('iui-tile-content');
+if ('development' === process.env.NODE_ENV)
+  TileContentArea.displayName = 'Tile.ContentArea';
 const TileDescription = _index.polymorphic.div('iui-tile-description');
+if ('development' === process.env.NODE_ENV)
+  TileDescription.displayName = 'Tile.Description';
 const TileMetadata = _index.polymorphic.div('iui-tile-metadata');
+if ('development' === process.env.NODE_ENV)
+  TileMetadata.displayName = 'Tile.Metadata';
 const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
   let { className, children = [], buttonProps, ...rest } = props;
   let [isMenuVisible, setIsMenuVisible] = _react.useState(false);
   return _react.createElement(
-    _DropdownMenu.DropdownMenuCloseOnClickContext.Provider,
+    _index.Box,
     {
-      value: true,
+      className: (0, _classnames.default)(
+        'iui-tile-more-options',
+        {
+          'iui-visible': isMenuVisible,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
     },
     _react.createElement(
-      _index.Box,
+      _DropdownMenu.DropdownMenu,
       {
-        className: (0, _classnames.default)(
-          'iui-tile-more-options',
-          {
-            'iui-visible': isMenuVisible,
-          },
-          className,
-        ),
-        ref: forwardedRef,
-        ...rest,
+        onVisibleChange: setIsMenuVisible,
+        menuItems: children,
+        closeOnItemClick: true,
       },
       _react.createElement(
-        _DropdownMenu.DropdownMenu,
+        _IconButton.IconButton,
         {
-          onVisibleChange: setIsMenuVisible,
-          menuItems: children,
+          styleType: 'borderless',
+          size: 'small',
+          'aria-label': 'More options',
+          ...buttonProps,
         },
-        _react.createElement(
-          _IconButton.IconButton,
-          {
-            styleType: 'borderless',
-            size: 'small',
-            'aria-label': 'More options',
-            ...buttonProps,
-          },
-          _react.createElement(_index.SvgMore, null),
-        ),
+        _react.createElement(_index.SvgMore, null),
       ),
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileMoreOptions.displayName = 'Tile.MoreOptions';
 const TileButtons = _index.polymorphic.div('iui-tile-buttons');
+if ('development' === process.env.NODE_ENV)
+  TileButtons.displayName = 'Tile.Buttons';
 const TileComponent = _react.forwardRef((props, forwardedRef) => {
   let {
     name,
@@ -310,6 +339,7 @@ const TileComponent = _react.forwardRef((props, forwardedRef) => {
     buttons && _react.createElement(TileButtons, null, buttons),
   );
 });
+if ('development' === process.env.NODE_ENV) TileComponent.displayName = 'Tile';
 const Tile = Object.assign(TileComponent, {
   Wrapper: TileWrapper,
   ThumbnailArea: TileThumbnailArea,

package/cjs/core/TimePicker/TimePicker.js

@@ -377,6 +377,8 @@ const TimePicker = _react.forwardRef((props, forwardedRef) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TimePicker.displayName = 'TimePicker';
 const TimePickerColumn = (props) => {
   let {
     data,

package/cjs/core/Toast/Toaster.js

@@ -161,7 +161,11 @@ const toastReducer = (state, action) => {
   return state;
 };
 const ToasterStateContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  ToasterStateContext.displayName = 'ToasterStateContext';
 const ToasterDispatchContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  ToasterDispatchContext.displayName = 'ToasterDispatchContext';
 const nextId = (() => {
   let count = 0;
   return () => ++count;

package/cjs/core/ToggleSwitch/ToggleSwitch.js

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

package/cjs/core/Tooltip/Tooltip.js

@@ -240,3 +240,4 @@ const Tooltip = _react.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV) Tooltip.displayName = 'Tooltip';

package/cjs/core/TransferList/TransferList.js

@@ -31,6 +31,8 @@ const _ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
 const TransferListComponent = _index.polymorphic.div(
   'iui-transfer-list-wrapper',
 );
+if ('development' === process.env.NODE_ENV)
+  TransferListComponent.displayName = 'TransferList';
 const TransferListListboxWrapper = _react.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   let uid = (0, _index.useId)();
@@ -58,6 +60,8 @@ const TransferListListboxWrapper = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
 const TransferListListbox = _react.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   let { labelId } = (0, _index.useSafeContext)(TransferListContext);
@@ -72,10 +76,7 @@ const TransferListListbox = _react.forwardRef((props, ref) => {
   }, []);
   _react.useEffect(() => {
     let items = getFocusableNodes();
-    if (null != focusedIndex) {
-      items?.[focusedIndex]?.focus();
-      return;
-    }
+    if (null != focusedIndex) return void items?.[focusedIndex]?.focus();
   }, [focusedIndex, getFocusableNodes]);
   let onKeyDown = (event) => {
     if (event.altKey) return;
@@ -115,6 +116,8 @@ const TransferListListbox = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TransferListListbox.displayName = 'TransferList.Listbox';
 const TransferListItem = _react.forwardRef((props, ref) => {
   let {
     actionable = true,
@@ -155,6 +158,8 @@ const TransferListItem = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TransferListItem.displayName = 'TransferList.Item';
 const TransferListListboxLabel = _react.forwardRef((props, ref) => {
   let { children, id, ...rest } = props;
   let { labelId, setLabelId } = (0, _index.useSafeContext)(TransferListContext);
@@ -172,6 +177,8 @@ const TransferListListboxLabel = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
 const TransferListToolbar = _react.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   return _react.createElement(
@@ -189,6 +196,8 @@ const TransferListToolbar = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TransferListToolbar.displayName = 'TransferList.Toolbar';
 const TransferList = Object.assign(TransferListComponent, {
   ListboxWrapper: TransferListListboxWrapper,
   Listbox: TransferListListbox,
@@ -197,3 +206,5 @@ const TransferList = Object.assign(TransferListComponent, {
   Toolbar: TransferListToolbar,
 });
 const TransferListContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  TransferListContext.displayName = 'TransferListContext';