@itwin/itwinui-react 3.17.4 → 3.18.0

package/esm/core/TransferList/TransferList.js

@@ -13,6 +13,8 @@ import { ListItem } from '../List/ListItem.js';
 import { Label } from '../Label/Label.js';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 let TransferListComponent = polymorphic.div('iui-transfer-list-wrapper');
+if ('development' === process.env.NODE_ENV)
+  TransferListComponent.displayName = 'TransferList';
 let TransferListListboxWrapper = React.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   let uid = useId();
@@ -37,6 +39,8 @@ let TransferListListboxWrapper = React.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
 let TransferListListbox = React.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   let { labelId } = useSafeContext(TransferListContext);
@@ -51,10 +55,7 @@ let 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;
@@ -91,6 +92,8 @@ let TransferListListbox = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TransferListListbox.displayName = 'TransferList.Listbox';
 let TransferListItem = React.forwardRef((props, ref) => {
   let {
     actionable = true,
@@ -131,6 +134,8 @@ let TransferListItem = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TransferListItem.displayName = 'TransferList.Item';
 let TransferListListboxLabel = React.forwardRef((props, ref) => {
   let { children, id, ...rest } = props;
   let { labelId, setLabelId } = useSafeContext(TransferListContext);
@@ -148,6 +153,8 @@ let TransferListListboxLabel = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
 let TransferListToolbar = React.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   return React.createElement(
@@ -162,6 +169,8 @@ let TransferListToolbar = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  TransferListToolbar.displayName = 'TransferList.Toolbar';
 export const TransferList = Object.assign(TransferListComponent, {
   ListboxWrapper: TransferListListboxWrapper,
   Listbox: TransferListListbox,
@@ -170,3 +179,5 @@ export const TransferList = Object.assign(TransferListComponent, {
   Toolbar: TransferListToolbar,
 });
 export const TransferListContext = React.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  TransferListContext.displayName = 'TransferListContext';

package/esm/core/Tree/Tree.js

@@ -183,6 +183,7 @@ export const Tree = (props) => {
         ),
   );
 };
+if ('development' === process.env.NODE_ENV) Tree.displayName = 'Tree';
 let TreeElement = polymorphic.div('iui-tree', {
   role: 'tree',
   tabIndex: 0,

package/esm/core/Tree/TreeNode.js

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

package/esm/core/Tree/TreeNodeExpander.js

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

package/esm/core/Typography/Anchor.js

@@ -26,3 +26,4 @@ export const Anchor = React.forwardRef((props, forwardedRef) => {
       React.createElement(VisuallyHidden, null, ' (opens in new tab)'),
   );
 });
+if ('development' === process.env.NODE_ENV) Anchor.displayName = 'Anchor';

package/esm/core/Typography/Blockquote.js

@@ -15,3 +15,5 @@ export const Blockquote = React.forwardRef((props, ref) => {
     footer && React.createElement('footer', null, footer),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  Blockquote.displayName = 'Blockquote';

package/esm/core/Typography/Code.js

@@ -1,2 +1,3 @@
 import { polymorphic } from '../../utils/index.js';
 export const Code = polymorphic.code('iui-code');
+if ('development' === process.env.NODE_ENV) Code.displayName = 'Code';

package/esm/core/Typography/Kbd.js

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

package/esm/core/Typography/Text.js

@@ -29,4 +29,5 @@ export const Text = React.forwardRef((props, ref) => {
     }),
   );
 });
+if ('development' === process.env.NODE_ENV) Text.displayName = 'Text';
 export const TextContext = React.createContext(false);

package/esm/core/VisuallyHidden/VisuallyHidden.js

@@ -36,6 +36,8 @@ export const VisuallyHidden = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  VisuallyHidden.displayName = 'VisuallyHidden';
 let css = `
   :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
     clip-path: inset(50%) !important;

package/esm/index.d.ts

@@ -39,7 +39,7 @@ export { HeaderLogo } from './core/Header/HeaderLogo.js';
 export { List } from './core/List/List.js';
 export { ListItem } from './core/List/ListItem.js';
 export { TransferList } from './core/TransferList/TransferList.js';
-export { Tabs, Tab } from './core/Tabs/Tabs.js';
+export { Tabs, Tab, unstable_TabsPresentation } from './core/Tabs/Tabs.js';
 export { InformationPanel } from './core/InformationPanel/InformationPanel.js';
 export { InformationPanelWrapper } from './core/InformationPanel/InformationPanelWrapper.js';
 export { InformationPanelHeader } from './core/InformationPanel/InformationPanelHeader.js';

package/esm/index.js

@@ -41,7 +41,7 @@ export { HeaderLogo } from './core/Header/HeaderLogo.js';
 export { List } from './core/List/List.js';
 export { ListItem } from './core/List/ListItem.js';
 export { TransferList } from './core/TransferList/TransferList.js';
-export { Tabs, Tab } from './core/Tabs/Tabs.js';
+export { Tabs, Tab, unstable_TabsPresentation } from './core/Tabs/Tabs.js';
 export { InformationPanel } from './core/InformationPanel/InformationPanel.js';
 export { InformationPanelWrapper } from './core/InformationPanel/InformationPanelWrapper.js';
 export { InformationPanelHeader } from './core/InformationPanel/InformationPanelHeader.js';

package/esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.17.4';
+const t = '3.18.0';
 const u = new Proxy(
   {},
   {

package/esm/utils/components/AutoclearingHiddenLiveRegion.d.ts

@@ -7,6 +7,6 @@ import * as React from 'react';
  *
  * @private
  */
-export declare const AutoclearingHiddenLiveRegion: ({ text }: {
-    text?: string | undefined;
+export declare const AutoclearingHiddenLiveRegion: ({ text, ...props }: React.ComponentProps<"div"> & {
+    text: string;
 }) => React.JSX.Element;

package/esm/utils/components/AutoclearingHiddenLiveRegion.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
 import { getWindow } from '../functions/index.js';
-export const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
+export const AutoclearingHiddenLiveRegion = ({ text, ...props }) => {
   let [maybeText, setMaybeText] = React.useState(text);
   React.useEffect(() => {
     setMaybeText(text);
@@ -14,6 +14,7 @@ export const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
       as: 'div',
       'aria-live': 'polite',
       'aria-atomic': 'true',
+      ...props,
     },
     maybeText,
   );

package/esm/utils/components/ButtonBase.js

@@ -32,3 +32,5 @@ export const ButtonBase = React.forwardRef((props, forwardedRef) => {
     onPointerUp: handleIfEnabled(props.onPointerUp),
   });
 });
+if ('development' === process.env.NODE_ENV)
+  ButtonBase.displayName = 'ButtonBase';

package/esm/utils/components/InputWithIcon.js

@@ -1,2 +1,4 @@
 import { polymorphic } from '../functions/polymorphic.js';
 export const InputWithIcon = polymorphic.div('iui-input-with-icon');
+if ('development' === process.env.NODE_ENV)
+  InputWithIcon.displayName = 'InputWithIcon';

package/esm/utils/components/LineClamp.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import cx from 'classnames';
 import { Box } from './Box.js';
 import { ShadowRoot } from './ShadowRoot.js';
 export const LineClamp = React.forwardRef((props, forwardedRef) => {
@@ -8,6 +9,7 @@ export const LineClamp = React.forwardRef((props, forwardedRef) => {
     {
       ref: forwardedRef,
       ...rest,
+      className: cx('iui-line-clamp', props.className),
       style: {
         '--_iui-line-clamp': lines,
         ...props.style,
@@ -17,6 +19,7 @@ export const LineClamp = React.forwardRef((props, forwardedRef) => {
       ShadowRoot,
       {
         css: css,
+        flush: false,
       },
       React.createElement('slot', null),
     ),

package/esm/utils/components/MiddleTextTruncation.js

@@ -38,6 +38,8 @@ export const MiddleTextTruncation = React.forwardRef((props, forwardedRef) => {
     }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  MiddleTextTruncation.displayName = 'MiddleTextTruncation';
 let MiddleTextTruncationContent = (props) => {
   let { text, endCharsCount = 6, textRenderer } = props;
   let { visibleCount } = OverflowContainer.useContext();

package/esm/utils/components/OverflowContainer.js

@@ -60,6 +60,8 @@ export const OverflowContainer = Object.assign(OverflowContainerComponent, {
   useContext: useOverflowContainerContext,
 });
 let OverflowContainerContext = React.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  OverflowContainerContext.displayName = 'OverflowContainerContext';
 let useOverflow = (itemsCount, orientation = 'horizontal') => {
   let [guessState, dispatch] = React.useReducer(
     overflowGuessReducer,
@@ -88,18 +90,14 @@ let useOverflow = (itemsCount, orientation = 'horizontal') => {
           (1 === visibleCount && isOverflowing) ||
           (visibleCount === itemsCount && !isOverflowing) ||
           (maxGuess - minGuess === 1 && visibleCount === minGuess)
-        ) {
-          dispatch({
+        )
+          return void dispatch({
             type: 'stabilize',
           });
-          return;
-        }
-        if (maxGuess === visibleCount && !isOverflowing) {
-          dispatch({
+        if (maxGuess === visibleCount && !isOverflowing)
+          return void dispatch({
             type: 'shiftGuessRangeForward',
           });
-          return;
-        }
         isOverflowing
           ? dispatch({
               type: 'decreaseMaxGuess',

package/esm/utils/components/Portal.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-export declare const portalContainerAtom: import("jotai").PrimitiveAtom<HTMLElement | null> & {
-    init: HTMLElement | null;
-};
+export declare const PortalContainerContext: React.Context<HTMLElement | null>;
 export type PortalProps = {
     /**
      * Where should the element be portaled to?
@@ -23,8 +21,8 @@ export type PortalProps = {
 /**
  * Helper component that portals children according to the following conditions:
  *   - renders null on server
- *   - if `portal` is set to true, renders into nearest ThemeProvider's portalContainer
- *   - if `portal` is set to false, renders as-is without portal
+ *   - if `portal` is set to true, renders into the element provided by PortalContainerContext.
+ *   - if `portal` is set to false, renders as-is without portal.
  *   - otherwise renders into `portal.to` (can be an element or a function)
  *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
  *     - E.g. `portal={{ to: () => document.querySelector('.may-not-exist') }}`.

package/esm/utils/components/Portal.js

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { useIsClient } from '../hooks/useIsClient.js';
-import { atom } from 'jotai';
-import { useScopedAtom } from '../providers/ScopeProvider.js';
-export const portalContainerAtom = atom(null);
+export const PortalContainerContext = React.createContext(null);
 export const Portal = (props) => {
   let { portal = true, children } = props;
   let isClient = useIsClient();
@@ -12,7 +10,7 @@ export const Portal = (props) => {
   return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
 };
 export const usePortalTo = (portal) => {
-  let [portalContainer] = useScopedAtom(portalContainerAtom);
+  let portalContainer = React.useContext(PortalContainerContext);
   if ('boolean' == typeof portal) return portal ? portalContainer : null;
   let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
   return portalTo ?? portalContainer;

package/esm/utils/components/ShadowRoot.d.ts

@@ -2,12 +2,21 @@ import * as React from 'react';
 type ShadowRootProps = {
     children: React.ReactNode;
     css?: string;
+    /**
+     * Control whether the children are portaled synchronously into the shadow-root (by using
+     * `flushSync` inside `queueMicrotask`).
+     *
+     * NOTE: This can block the main thread if too many ShadowRoots are rendered at the same time.
+     *
+     * @default true
+     */
+    flush?: boolean;
 };
 /**
  * Wrapper around `<template>` element that attaches shadow root to its parent
- * and moves its children into the shadow root.
+ * and portals its children into the shadow root.
  *
  * @private
  */
-export declare const ShadowRoot: ({ children, css }: ShadowRootProps) => React.JSX.Element | null;
+export declare const ShadowRoot: ({ children, css, flush, }: ShadowRootProps) => React.JSX.Element | null;
 export {};

package/esm/utils/components/ShadowRoot.js

@@ -7,7 +7,7 @@ let supportsDSD =
   isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
 let supportsAdoptedStylesheets =
   isBrowser && 'adoptedStyleSheets' in Document.prototype;
-export const ShadowRoot = ({ children, css }) => {
+export const ShadowRoot = ({ children, css, flush = true }) => {
   let isHydrating = 'hydrating' === useHydration();
   if (!isBrowser)
     return React.createElement(
@@ -23,14 +23,16 @@ export const ShadowRoot = ({ children, css }) => {
     ClientShadowRoot,
     {
       css: css,
+      flush: flush,
     },
     children,
   );
 };
-let ClientShadowRoot = ({ children, css }) => {
+let ClientShadowRoot = ({ children, css, flush = true }) => {
   let templateRef = React.useRef(null);
   let shadowRoot = useShadowRoot(templateRef, {
     css,
+    flush,
   });
   let fallbackCss =
     !supportsAdoptedStylesheets && css
@@ -45,7 +47,7 @@ let ClientShadowRoot = ({ children, css }) => {
         ref: templateRef,
       });
 };
-function useShadowRoot(templateRef, { css = '' }) {
+function useShadowRoot(templateRef, { css = '', flush = true }) {
   let [shadowRoot, setShadowRoot] = React.useState(null);
   let styleSheet = React.useRef(void 0);
   let latestCss = useLatestRef(css);
@@ -75,13 +77,13 @@ function useShadowRoot(templateRef, { css = '' }) {
           mode: 'open',
         });
       createStyleSheet(shadow);
-      ReactDOM.flushSync(() => setShadowRoot(shadow));
+      if (flush) ReactDOM.flushSync(() => setShadowRoot(shadow));
+      else setShadowRoot(shadow);
     };
-    queueMicrotask(() => {
-      setupOrReuseShadowRoot();
-    });
+    if (flush) queueMicrotask(() => setupOrReuseShadowRoot());
+    else setupOrReuseShadowRoot();
     return () => void setShadowRoot(null);
-  }, [templateRef, createStyleSheet, latestShadowRoot]);
+  }, [templateRef, createStyleSheet, latestShadowRoot, flush]);
   useLayoutEffect(() => {
     if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
   }, [css]);

package/esm/utils/functions/polymorphic.js

@@ -26,6 +26,8 @@ let _base = (defaultElement) => (className, attrs) => {
       ...props,
     });
   });
+  if ('development' === process.env.NODE_ENV)
+    Comp.displayName = getDisplayNameFromClass(className);
   return Comp;
 };
 export const polymorphic = new Proxy(

package/esm/utils/hooks/useGlobals.js

@@ -12,8 +12,35 @@ export const useGlobals = () => {
   return themeContext;
 };
 export const useThemeProviderWarning = (themeContext) => {
-  React.useEffect(() => {}, [themeContext]);
+  React.useEffect(() => {
+    if (
+      'development' === process.env.NODE_ENV &&
+      !isUnitTest &&
+      !didLogWarning.themeProvider &&
+      !themeContext
+    ) {
+      console.error(
+        'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
+      );
+      didLogWarning.themeProvider = true;
+    }
+  }, [themeContext]);
 };
 let useRootFontSizeWarning = () => {
-  React.useEffect(() => {}, []);
+  React.useEffect(() => {
+    if (
+      'development' === process.env.NODE_ENV &&
+      !isUnitTest &&
+      !didLogWarning.fontSize
+    ) {
+      let rootFontSize = parseInt(
+        getComputedStyle(document.documentElement).fontSize,
+      );
+      if (rootFontSize < 16)
+        console.error(
+          'Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size',
+        );
+      didLogWarning.fontSize = true;
+    }
+  }, []);
 };

package/esm/utils/hooks/useWarningLogger.js

@@ -3,4 +3,32 @@ import { isUnitTest } from '../functions/dev.js';
 import { getWindow } from '../functions/dom.js';
 let _React = React;
 let ReactInternals = _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-export const useWarningLogger = () => () => {};
+export const useWarningLogger =
+  'development' !== process.env.NODE_ENV || isUnitTest
+    ? () => () => {}
+    : function () {
+        let loggedRef = React.useRef(false);
+        let timeoutRef = React.useRef(void 0);
+        let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
+        let componentName = stack?.trim().split('\n')[1]?.trim();
+        let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
+        let logWarning = React.useCallback(
+          (message) => {
+            timeoutRef.current = getWindow()?.setTimeout(() => {
+              if (!loggedRef.current) {
+                console.error(prefix, message);
+                loggedRef.current = true;
+              }
+            });
+          },
+          [prefix],
+        );
+        React.useEffect(
+          () => () => {
+            if (timeoutRef.current)
+              getWindow()?.clearTimeout(timeoutRef.current);
+          },
+          [],
+        );
+        return logWarning;
+      };

package/esm/utils/providers/index.d.ts

@@ -1,2 +1 @@
 export * from './HydrationProvider.js';
-export * from './ScopeProvider.js';

package/esm/utils/providers/index.js

@@ -1,2 +1 @@
 export * from './HydrationProvider.js';
-export * from './ScopeProvider.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.17.4",
+  "version": "3.18.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -79,33 +79,32 @@
     "ux"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.27.4",
+    "@floating-ui/react": "^0.27.6",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "@swc/helpers": "^0.5.15",
-    "@tanstack/react-virtual": "^3.13.0",
+    "@tanstack/react-virtual": "^3.13.6",
     "classnames": "^2.5.1",
-    "jotai": "^2.8.0",
     "react-table": "^7.8.0"
   },
   "devDependencies": {
     "@swc/cli": "^0.6.0",
-    "@swc/core": "^1.10.15",
+    "@swc/core": "^1.11.18",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "16.2.0",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@vitest/coverage-v8": "^1.6.1",
+    "@vitest/coverage-v8": "^2.1.9",
     "eslint": "^8",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-require-extensions": "^0.1.3",
-    "jsdom": "^24.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "jsdom": "^26.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "typescript": "5",
-    "vite": "~5.4.15",
-    "vitest": "^1.6.1"
+    "vite": "~6.2.5",
+    "vitest": "^2.1.9"
   },
   "peerDependencies": {
     "react": ">=17.0.0",