@itwin/itwinui-react 3.17.4 → 3.18.0

package/esm/core/Tabs/Tabs.d.ts

@@ -52,12 +52,21 @@ type TabsWrapperOwnProps = {
      */
     defaultChecked?: never;
 } & TabsOrientationProps;
+type TabsWrapperPresentationOwnProps = {
+    orientation?: 'horizontal' | 'vertical';
+};
 type TabListOwnProps = {
     /**
      * Tab items.
      */
     children: React.ReactNode[];
 };
+type TabListPresentationOwnProps = {
+    type?: 'default' | 'borderless' | 'pill';
+    color?: 'blue' | 'green';
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'default' | 'large';
+};
 type TabOwnProps = {
     /**
      * Value used to associate the tab with a given panel.
@@ -293,3 +302,31 @@ export declare const Tabs: PolymorphicForwardRefComponent<"div", TabsLegacyProps
      */
     Panel: PolymorphicForwardRefComponent<"div", TabsPanelOwnProps>;
 };
+/**
+ * Presentational version of `Tabs`. It renders purely static elements, without any associated behaviors.
+ */
+export declare const unstable_TabsPresentation: {
+    Wrapper: PolymorphicForwardRefComponent<"div", TabsWrapperPresentationOwnProps>;
+    /**
+     * This could be used with `role="list"` or `role="tablist"`.
+     */
+    TabList: PolymorphicForwardRefComponent<"div", TabListPresentationOwnProps>;
+    /**
+     * This renders a button without any role by default. The rendered element can be changed using the `as` prop
+     * (e.g. `as="a"` or `as="div"`)
+     *
+     * When _not_ using `role="tab"`, the selected state can be set using `aria-current="true"` (or `aria-current="page"`).
+     *
+     * When using `role="tab"`, the selected state can be set using `aria-selected="true"`.
+     *
+     * Example:
+     * ```jsx
+     * <TabsPresentation.Tab
+     *   as="a"
+     *   href=""
+     *   aria-current="true"
+     * />
+     * ```
+     */
+    Tab: PolymorphicForwardRefComponent<"button", {}>;
+};

package/esm/core/Tabs/Tabs.js

@@ -17,7 +17,6 @@ import {
 import { Icon } from '../Icon/Icon.js';
 let TabsWrapper = React.forwardRef((props, ref) => {
   let {
-    className,
     children,
     orientation = 'horizontal',
     type = 'default',
@@ -37,10 +36,10 @@ let TabsWrapper = React.forwardRef((props, ref) => {
   let [hasSublabel, setHasSublabel] = React.useState(false);
   let idPrefix = useId();
   return React.createElement(
-    Box,
+    TabsWrapperPresentation,
     {
-      className: cx('iui-tabs-wrapper', `iui-${orientation}`, className),
       ...rest,
+      orientation: orientation,
       style: {
         ...stripeProperties,
         ...props?.style,
@@ -67,6 +66,16 @@ let TabsWrapper = React.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TabsWrapper.displayName = 'Tabs.Wrapper';
+let TabsWrapperPresentation = React.forwardRef((props, forwardedRef) => {
+  let { orientation = 'horizontal', ...rest } = props;
+  return React.createElement(Box, {
+    ...rest,
+    className: cx('iui-tabs-wrapper', `iui-${orientation}`, props.className),
+    ref: forwardedRef,
+  });
+});
 let TabList = React.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   let { type, hasSublabel, color, orientation } = useSafeContext(TabsContext);
@@ -80,16 +89,11 @@ let TabList = React.forwardRef((props, ref) => {
     useScrollbarGutter(),
   );
   return React.createElement(
-    Box,
+    TabListPresentation,
     {
       className: cx(
-        'iui-tabs',
-        `iui-${type}`,
         {
-          'iui-green': 'green' === color,
           'iui-animated': 'default' !== type && isClient,
-          'iui-not-animated': 'default' !== type && !isClient,
-          'iui-large': hasSublabel,
         },
         className,
       ),
@@ -97,6 +101,10 @@ let TabList = React.forwardRef((props, ref) => {
       role: 'tablist',
       ref: refs,
       ...rest,
+      type: type,
+      color: color,
+      size: hasSublabel ? 'large' : void 0,
+      orientation: orientation,
     },
     React.createElement(
       TabListContext.Provider,
@@ -110,8 +118,33 @@ let TabList = React.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TabList.displayName = 'Tabs.TabList';
+let TabListPresentation = React.forwardRef((props, forwardedRef) => {
+  let {
+    type = 'default',
+    color,
+    size,
+    orientation = 'horizontal',
+    ...rest
+  } = props;
+  return React.createElement(Box, {
+    ...rest,
+    className: cx(
+      'iui-tabs',
+      `iui-${type}`,
+      {
+        'iui-green': 'green' === color,
+        'iui-large': 'large' === size,
+      },
+      props.className,
+    ),
+    'data-iui-orientation': orientation,
+    ref: forwardedRef,
+  });
+});
 let Tab = React.forwardRef((props, forwardedRef) => {
-  let { className, children, value, label, ...rest } = props;
+  let { children, value, label, ...rest } = props;
   let {
     orientation,
     activeValue,
@@ -214,9 +247,9 @@ let Tab = React.forwardRef((props, forwardedRef) => {
     [activeValue, setActiveValue, value],
   );
   return React.createElement(
-    ButtonBase,
+    TabPresentation,
     {
-      className: cx('iui-tab', className),
+      as: ButtonBase,
       role: 'tab',
       tabIndex: isActive ? 0 : -1,
       'aria-selected': isActive,
@@ -238,6 +271,15 @@ let Tab = React.forwardRef((props, forwardedRef) => {
     label ? React.createElement(Tabs.TabLabel, null, label) : children,
   );
 });
+if ('development' === process.env.NODE_ENV) Tab.displayName = 'Tabs.Tab';
+let TabPresentation = React.forwardRef((props, forwardedRef) =>
+  React.createElement(Box, {
+    as: 'button',
+    ...props,
+    className: cx('iui-tab', props.className),
+    ref: forwardedRef,
+  }),
+);
 let TabIcon = React.forwardRef((props, ref) =>
   React.createElement(Icon, {
     ...props,
@@ -245,7 +287,11 @@ let TabIcon = React.forwardRef((props, ref) =>
     ref: ref,
   }),
 );
+if ('development' === process.env.NODE_ENV)
+  TabIcon.displayName = 'Tabs.TabIcon';
 let TabLabel = polymorphic.span('iui-tab-label');
+if ('development' === process.env.NODE_ENV)
+  TabLabel.displayName = 'Tabs.TabLabel';
 let TabDescription = React.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   let { hasSublabel, setHasSublabel } = useSafeContext(TabsContext);
@@ -263,6 +309,8 @@ let TabDescription = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TabDescription.displayName = 'Tabs.TabDescription';
 let TabsActions = React.forwardRef((props, ref) => {
   let { wrapperProps, className, children, ...rest } = props;
   return React.createElement(
@@ -282,6 +330,8 @@ let TabsActions = React.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TabsActions.displayName = 'Tabs.Actions';
 let TabsPanel = React.forwardRef((props, ref) => {
   let { value, className, children, ...rest } = props;
   let { activeValue, idPrefix } = useSafeContext(TabsContext);
@@ -299,6 +349,8 @@ let TabsPanel = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TabsPanel.displayName = 'Tabs.Panel';
 let LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
   let actions;
   if ('pill' !== props.type && props.actions) {
@@ -366,6 +418,8 @@ let LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  LegacyTabsComponent.displayName = 'Tabs';
 let LegacyTab = React.forwardRef((props, forwardedRef) => {
   let { label, sublabel, startIcon, children, value, ...rest } = props;
   return React.createElement(
@@ -395,8 +449,17 @@ export const Tabs = Object.assign(LegacyTabsComponent, {
   Actions: TabsActions,
   Panel: TabsPanel,
 });
+export const unstable_TabsPresentation = {
+  Wrapper: TabsWrapperPresentation,
+  TabList: TabListPresentation,
+  Tab: TabPresentation,
+};
 let TabsContext = React.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  TabsContext.displayName = 'TabsContext';
 let TabListContext = React.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  TabListContext.displayName = 'TabListContext';
 let useScrollbarGutter = () =>
   React.useCallback((element) => {
     if (element) {

package/esm/core/Tag/Tag.js

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

package/esm/core/Tag/TagContainer.js

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

package/esm/core/Textarea/Textarea.js

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

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -11,17 +11,14 @@ import {
   isUnitTest,
   HydrationProvider,
   useHydration,
-  ScopeProvider,
-  portalContainerAtom,
-  useScopedAtom,
+  PortalContainerContext,
   useId,
 } from '../../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
-import { atom } from 'jotai';
 import { meta } from '../../utils/meta.js';
 let versionWithoutDots = meta.version.replace(/\./g, '');
-let ownerDocumentAtom = atom(void 0);
+let OwnerDocumentContext = React.createContext(void 0);
 export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
   var _themeOptions, _themeOptions1, _future;
   let {
@@ -44,7 +41,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
       'inherit' === themeProp ? parent.highContrast : void 0);
   (_future = future).themeBridge ??
     (_future.themeBridge = parent.context?.future?.themeBridge);
-  let [portalContainerFromParent] = useScopedAtom(portalContainerAtom);
+  let portalContainerFromParent = React.useContext(PortalContainerContext);
   let contextValue = React.useMemo(
     () => ({
       theme,
@@ -53,9 +50,14 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     }),
     [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
   );
+  let [portalContainer, setPortalContainer] = React.useState(
+    portalContainerProp || null,
+  );
   return React.createElement(
-    ScopeProvider,
-    null,
+    PortalContainerContext.Provider,
+    {
+      value: portalContainer,
+    },
     React.createElement(
       HydrationProvider,
       null,
@@ -90,6 +92,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
               future: future,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
+              setPortalContainer: setPortalContainer,
               isInheritingTheme: 'inherit' === themeProp,
             }),
           ),
@@ -98,8 +101,10 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ThemeProvider.displayName = 'ThemeProvider';
 let MainRoot = React.forwardRef((props, forwardedRef) => {
-  let [ownerDocument, setOwnerDocument] = useScopedAtom(ownerDocumentAtom);
+  let [ownerDocument, setOwnerDocument] = React.useState(void 0);
   let findOwnerDocumentFromRef = React.useCallback(
     (el) => {
       if (el && el.ownerDocument !== ownerDocument)
@@ -107,10 +112,16 @@ let MainRoot = React.forwardRef((props, forwardedRef) => {
     },
     [ownerDocument, setOwnerDocument],
   );
-  return React.createElement(Root, {
-    ...props,
-    ref: useMergedRefs(findOwnerDocumentFromRef, forwardedRef),
-  });
+  return React.createElement(
+    OwnerDocumentContext.Provider,
+    {
+      value: ownerDocument,
+    },
+    React.createElement(Root, {
+      ...props,
+      ref: useMergedRefs(findOwnerDocumentFromRef, forwardedRef),
+    }),
+  );
 });
 let Root = React.forwardRef((props, forwardedRef) => {
   let { theme, children, themeOptions, className, future, ...rest } = props;
@@ -176,14 +187,13 @@ let PortalContainer = React.memo(
   ({
     portalContainerProp,
     portalContainerFromParent,
+    setPortalContainer,
     isInheritingTheme,
     theme,
     themeOptions,
     future,
   }) => {
-    let [ownerDocument] = useScopedAtom(ownerDocumentAtom);
-    let [portalContainer, setPortalContainer] =
-      useScopedAtom(portalContainerAtom);
+    let ownerDocument = React.useContext(OwnerDocumentContext);
     let shouldSetupPortalContainer =
       !portalContainerProp &&
       (!isInheritingTheme ||
@@ -194,9 +204,13 @@ let 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' === useHydration();
     if (!isHydrated) return null;
     if (shouldSetupPortalContainer && ownerDocument)
@@ -261,7 +275,30 @@ let useIuiDebugRef = () => {
     (_globalThis.__iui = {
       versions: new Set(),
     });
-  var version, version1;
+  if ('development' === process.env.NODE_ENV && !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));
 };
 let useInertPolyfill = () => {

package/esm/core/Tile/Tile.js

@@ -10,14 +10,13 @@ import {
   polymorphic,
   Box,
 } from '../../utils/index.js';
-import {
-  DropdownMenu,
-  DropdownMenuCloseOnClickContext,
-} from '../DropdownMenu/DropdownMenu.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { LinkAction } from '../LinkAction/LinkAction.js';
 let TileContext = React.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  TileContext.displayName = 'TileContext';
 let TileWrapper = React.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -64,6 +63,8 @@ let TileWrapper = React.forwardRef((props, forwardedRef) => {
     }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileWrapper.displayName = 'Tile.Wrapper';
 let TileAction = React.forwardRef((props, forwardedRef) => {
   let { onClick, children, href, ...rest } = props;
   let { setActionable, isDisabled } = useSafeContext(TileContext);
@@ -83,7 +84,11 @@ let TileAction = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileAction.displayName = 'Tile.Action';
 let TileThumbnailArea = polymorphic.div('iui-tile-thumbnail');
+if ('development' === process.env.NODE_ENV)
+  TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
 let TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
   let { className, url, children, ...rest } = props;
   if (url)
@@ -105,8 +110,14 @@ let TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
 let TileQuickAction = polymorphic.div('iui-tile-thumbnail-quick-action');
+if ('development' === process.env.NODE_ENV)
+  TileQuickAction.displayName = 'Tile.QuickAction';
 let TileTypeIndicator = polymorphic.div('iui-tile-thumbnail-type-indicator');
+if ('development' === process.env.NODE_ENV)
+  TileTypeIndicator.displayName = 'Tile.TypeIndicator';
 let TileIconButton = React.forwardRef((props, forwardedRef) => {
   let { className, children, ...rest } = props;
   return React.createElement(
@@ -121,7 +132,11 @@ let TileIconButton = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileIconButton.displayName = 'Tile.IconButton';
 let TileBadgeContainer = polymorphic.div('iui-tile-thumbnail-badge-container');
+if ('development' === process.env.NODE_ENV)
+  TileBadgeContainer.displayName = 'Tile.BadgeContainer';
 let TileName = React.forwardRef((props, forwardedRef) => {
   let { className, children, name, ...rest } = props;
   return React.createElement(
@@ -131,9 +146,11 @@ let 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';
 let TileNameIcon = React.forwardRef((props, forwardedRef) => {
   let { children, className, ...rest } = props;
   let { status, isLoading, isSelected, isNew } = useSafeContext(TileContext);
@@ -169,52 +186,61 @@ let TileNameIcon = React.forwardRef((props, forwardedRef) => {
       )
     : null;
 });
+if ('development' === process.env.NODE_ENV)
+  TileNameIcon.displayName = 'Tile.NameIcon';
 let TileNameLabel = polymorphic.span('iui-tile-name-label');
+if ('development' === process.env.NODE_ENV)
+  TileNameLabel.displayName = 'Tile.NameLabel';
 let TileContentArea = polymorphic.div('iui-tile-content');
+if ('development' === process.env.NODE_ENV)
+  TileContentArea.displayName = 'Tile.ContentArea';
 let TileDescription = polymorphic.div('iui-tile-description');
+if ('development' === process.env.NODE_ENV)
+  TileDescription.displayName = 'Tile.Description';
 let TileMetadata = polymorphic.div('iui-tile-metadata');
+if ('development' === process.env.NODE_ENV)
+  TileMetadata.displayName = 'Tile.Metadata';
 let TileMoreOptions = React.forwardRef((props, forwardedRef) => {
   let { className, children = [], buttonProps, ...rest } = props;
   let [isMenuVisible, setIsMenuVisible] = React.useState(false);
   return React.createElement(
-    DropdownMenuCloseOnClickContext.Provider,
+    Box,
     {
-      value: true,
+      className: cx(
+        'iui-tile-more-options',
+        {
+          'iui-visible': isMenuVisible,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
     },
     React.createElement(
-      Box,
+      DropdownMenu,
       {
-        className: cx(
-          'iui-tile-more-options',
-          {
-            'iui-visible': isMenuVisible,
-          },
-          className,
-        ),
-        ref: forwardedRef,
-        ...rest,
+        onVisibleChange: setIsMenuVisible,
+        menuItems: children,
+        closeOnItemClick: true,
       },
       React.createElement(
-        DropdownMenu,
+        IconButton,
         {
-          onVisibleChange: setIsMenuVisible,
-          menuItems: children,
+          styleType: 'borderless',
+          size: 'small',
+          'aria-label': 'More options',
+          ...buttonProps,
         },
-        React.createElement(
-          IconButton,
-          {
-            styleType: 'borderless',
-            size: 'small',
-            'aria-label': 'More options',
-            ...buttonProps,
-          },
-          React.createElement(SvgMore, null),
-        ),
+        React.createElement(SvgMore, null),
       ),
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TileMoreOptions.displayName = 'Tile.MoreOptions';
 let TileButtons = polymorphic.div('iui-tile-buttons');
+if ('development' === process.env.NODE_ENV)
+  TileButtons.displayName = 'Tile.Buttons';
 let TileComponent = React.forwardRef((props, forwardedRef) => {
   let {
     name,
@@ -291,6 +317,7 @@ let TileComponent = React.forwardRef((props, forwardedRef) => {
     buttons && React.createElement(TileButtons, null, buttons),
   );
 });
+if ('development' === process.env.NODE_ENV) TileComponent.displayName = 'Tile';
 export const Tile = Object.assign(TileComponent, {
   Wrapper: TileWrapper,
   ThumbnailArea: TileThumbnailArea,

package/esm/core/TimePicker/TimePicker.js

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

package/esm/core/Toast/Toaster.js

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

package/esm/core/ToggleSwitch/ToggleSwitch.js

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

package/esm/core/Tooltip/Tooltip.js

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