@itwin/itwinui-react 3.3.4 → 3.4.1

package/esm/core/Tooltip/Tooltip.d.ts

@@ -91,4 +91,4 @@ export declare const Tooltip: PolymorphicForwardRefComponent<"div", {
      */
     children?: React.ReactNode;
 } & PortalProps & TooltipOptions>;
-export default Tooltip;
+export {};

package/esm/core/Tooltip/Tooltip.js

@@ -116,4 +116,3 @@ export const Tooltip = React.forwardRef((props, forwardedRef) => {
         React.createElement(Portal, { portal: portal },
             React.createElement(Box, { className: cx('iui-tooltip', className), ref: useMergedRefs(tooltip.refs.setFloating, forwardedRef), style: { ...tooltip.floatingStyles, ...style }, ...tooltip.floatingProps }, content))));
 });
-export default Tooltip;

package/esm/core/TransferList/TransferList.d.ts

@@ -66,4 +66,4 @@ export declare const TransferListContext: React.Context<{
      */
     setLabelId: (labelId: string) => void;
 } | undefined>;
-export default TransferList;
+export {};

package/esm/core/TransferList/TransferList.js

@@ -140,4 +140,3 @@ export const TransferList = Object.assign(TransferListComponent, {
     Toolbar: TransferListToolbar,
 });
 export const TransferListContext = React.createContext(undefined);
-export default TransferList;

package/esm/core/Tree/Tree.d.ts

@@ -134,4 +134,3 @@ export type TreeProps<T> = {
   />
  */
 export declare const Tree: <T>(props: TreeProps<T>) => React.JSX.Element;
-export default Tree;

package/esm/core/Tree/Tree.js

@@ -190,4 +190,3 @@ const VirtualizedTree = React.forwardRef(({ flatNodesList, itemRenderer, scrollT
         style: { ...style, ...outerProps.style } },
         React.createElement(TreeElement, { ...innerProps, ...rest, ref: mergeRefs(ref, innerProps.ref) }, visibleChildren)));
 });
-export default Tree;

package/esm/core/Tree/TreeNode.d.ts

@@ -83,4 +83,4 @@ type TreeNodeProps = {
   />
  */
 export declare const TreeNode: (props: TreeNodeProps) => React.JSX.Element;
-export default TreeNode;
+export {};

package/esm/core/Tree/TreeNode.js

@@ -126,4 +126,3 @@ export const TreeNode = (props) => {
                 children)),
         hasSubNodes && (React.createElement(Box, { as: 'ul', className: 'iui-sub-tree', role: 'group', "aria-owns": subNodeIds.join(' ') }))));
 };
-export default TreeNode;

package/esm/core/Tree/TreeNodeExpander.d.ts

@@ -4,4 +4,4 @@ type TreeNodeExpanderProps = {
     isExpanded?: boolean;
 } & IconButtonProps;
 export declare const TreeNodeExpander: PolymorphicForwardRefComponent<"button", TreeNodeExpanderProps>;
-export default TreeNodeExpander;
+export {};

package/esm/core/Tree/TreeNodeExpander.js

@@ -16,4 +16,3 @@ export const TreeNodeExpander = React.forwardRef((props, ref) => {
                 'iui-tree-node-content-expander-icon-expanded': isExpanded,
             }) })));
 });
-export default TreeNodeExpander;

package/esm/core/Typography/Anchor.d.ts

@@ -13,4 +13,3 @@
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
 export declare const Anchor: import("../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
-export default Anchor;

package/esm/core/Typography/Anchor.js

@@ -18,4 +18,3 @@ import { polymorphic } from '../utils/index.js';
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
 export const Anchor = polymorphic.a('iui-anchor');
-export default Anchor;

package/esm/core/Typography/Blockquote.d.ts

@@ -15,4 +15,4 @@ type BlockquoteProps = {
  * </Blockquote>
  */
 export declare const Blockquote: PolymorphicForwardRefComponent<"blockquote", BlockquoteProps>;
-export default Blockquote;
+export {};

package/esm/core/Typography/Blockquote.js

@@ -19,4 +19,3 @@ export const Blockquote = React.forwardRef((props, ref) => {
         children,
         footer && React.createElement("footer", null, footer)));
 });
-export default Blockquote;

package/esm/core/Typography/Code.d.ts

@@ -4,4 +4,3 @@
  * <p>Some <Code>inline code</Code> in a paragraph</p>
  */
 export declare const Code: import("../utils/props.js").PolymorphicForwardRefComponent<"code", {}>;
-export default Code;

package/esm/core/Typography/Code.js

@@ -9,4 +9,3 @@ import { polymorphic } from '../utils/index.js';
  * <p>Some <Code>inline code</Code> in a paragraph</p>
  */
 export const Code = polymorphic.code('iui-code');
-export default Code;

package/esm/core/Typography/Kbd.d.ts

@@ -30,4 +30,4 @@ type KbdProps = {
  * <Kbd title='Enter'>{KbdKeys.Enter}</Kbd>
  */
 export declare const Kbd: PolymorphicForwardRefComponent<"kbd", KbdProps>;
-export default Kbd;
+export {};

package/esm/core/Typography/Kbd.js

@@ -33,4 +33,3 @@ export const Kbd = React.forwardRef((props, forwardedRef) => {
     const { className, children, ...rest } = props;
     return (React.createElement(Box, { as: 'kbd', className: cx('iui-keyboard', className), ref: forwardedRef, ...rest }, children));
 });
-export default Kbd;

package/esm/core/Typography/Text.d.ts

@@ -37,4 +37,4 @@ type TextProps = {
  * <Text isSkeleton>Skeleton text</Text>
  */
 export declare const Text: PolymorphicForwardRefComponent<"div", TextProps>;
-export default Text;
+export {};

package/esm/core/Typography/Text.js

@@ -26,4 +26,3 @@ export const Text = React.forwardRef((props, ref) => {
             'iui-skeleton': isSkeleton,
         }, className), ref: ref, ...rest }));
 });
-export default Text;

package/esm/core/VisuallyHidden/VisuallyHidden.d.ts

@@ -19,4 +19,4 @@ type VisuallyHiddenOwnProps = {
  * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 export declare const VisuallyHidden: PolymorphicForwardRefComponent<"span", VisuallyHiddenOwnProps>;
-export default VisuallyHidden;
+export {};

package/esm/core/VisuallyHidden/VisuallyHidden.js

@@ -19,4 +19,3 @@ export const VisuallyHidden = React.forwardRef((props, ref) => {
     const { className, unhideOnFocus = true, ...rest } = props;
     return (React.createElement(Box, { as: 'span', className: cx('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }));
 });
-export default VisuallyHidden;

package/esm/core/utils/components/FocusTrap.d.ts

@@ -10,4 +10,3 @@ export type FocusTrapProps = {
  * Used for modals and dialogs.
  */
 export declare const FocusTrap: (props: FocusTrapProps) => React.JSX.Element;
-export default FocusTrap;

package/esm/core/utils/components/FocusTrap.js

@@ -43,4 +43,3 @@ export const FocusTrap = (props) => {
         }),
         React.createElement("div", { tabIndex: 0, onFocus: onLastFocus, "aria-hidden": true })));
 };
-export default FocusTrap;

package/esm/core/utils/components/MiddleTextTruncation.d.ts

@@ -32,4 +32,3 @@ export type MiddleTextTruncationProps = {
  * />
  */
 export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => React.JSX.Element;
-export default MiddleTextTruncation;

package/esm/core/utils/components/MiddleTextTruncation.js

@@ -40,4 +40,3 @@ export const MiddleTextTruncation = (props) => {
             ...style,
         }, ref: ref, ...rest }, textRenderer?.(truncatedText, text) ?? truncatedText));
 };
-export default MiddleTextTruncation;

package/esm/core/utils/components/Resizer.d.ts

@@ -23,6 +23,8 @@ export type ResizerProps = {
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.
+ *
+ * Ideally should be used within a shadow root.
  * @private
  * @example
  * const ref = React.useRef<HTMLDivElement>(null);
@@ -33,4 +35,3 @@ export type ResizerProps = {
  * );
  */
 export declare const Resizer: (props: ResizerProps) => React.JSX.Element;
-export default Resizer;

package/esm/core/utils/components/Resizer.js

@@ -7,6 +7,8 @@ import { getBoundedValue, getTranslateValuesFromElement, } from '../functions/in
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.
+ *
+ * Ideally should be used within a shadow root.
  * @private
  * @example
  * const ref = React.useRef<HTMLDivElement>(null);
@@ -17,6 +19,16 @@ import { getBoundedValue, getTranslateValuesFromElement, } from '../functions/in
  * );
  */
 export const Resizer = (props) => {
+    return (React.createElement("div", { style: {
+            position: 'absolute',
+            inset: -6,
+            display: 'grid',
+            pointerEvents: 'none',
+        } },
+        React.createElement(ResizerStyles, null),
+        React.createElement(Resizers, { ...props })));
+};
+const Resizers = (props) => {
     const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
     const isResizing = React.useRef(false);
     const onResizePointerDown = (event) => {
@@ -147,69 +159,46 @@ export const Resizer = (props) => {
         }, { once: true });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: 12,
-                height: 12,
-                cursor: 'nw-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 0,
-                left: 8,
-                right: 8,
-                height: 8,
-                cursor: 'n-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                width: 12,
-                height: 12,
-                cursor: 'ne-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 8,
-                right: 0,
-                bottom: 8,
-                width: 8,
-                cursor: 'e-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: 0,
-                right: 0,
-                width: 12,
-                height: 12,
-                cursor: 'se-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: 0,
-                left: 8,
-                right: 8,
-                height: 8,
-                cursor: 's-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: 0,
-                left: 0,
-                width: 12,
-                height: 12,
-                cursor: 'sw-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 8,
-                left: 0,
-                bottom: 8,
-                width: 8,
-                cursor: 'w-resize',
-            } })));
+        React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: { cursor: 'nw-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: { cursor: 'n-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: { cursor: 'ne-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: { cursor: 'e-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: { cursor: 'se-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: { cursor: 's-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: { cursor: 'sw-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: { cursor: 'w-resize' } })));
 };
-export default Resizer;
+// ----------------------------------------------------------------------------
+const ResizerStyles = React.memo(() => React.createElement("style", null, resizerStyles));
+const resizerStyles = /* css */ `
+[data-iui-resizer] {
+  pointer-events: auto;
+  grid-area: 1 / 1 / -1 / -1;
+  width: 12px;
+  height: 12px;
+  z-index: 1;
+}
+[data-iui-resizer='top'],
+[data-iui-resizer='bottom'] {
+  height: 8px;
+  width: auto;
+  z-index: 0;
+}
+[data-iui-resizer='left'],
+[data-iui-resizer='right'] {
+  height: auto;
+  width: 8px;
+  z-index: 0;
+}
+[data-iui-resizer^='top'] {
+  align-self: start;
+}
+[data-iui-resizer^='bottom'] {
+  align-self: end;
+}
+[data-iui-resizer$='left'] {
+  justify-self: start;
+}
+[data-iui-resizer$='right'] {
+  justify-self: end;
+}`;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * Wrapper around `<template>` element that attaches shadow root to its parent
+ * and moves its children into the shadow root.
+ *
+ * @private
+ */
+export declare const ShadowRoot: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element | null;

package/esm/core/utils/components/ShadowRoot.js

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+const isBrowser = typeof document !== 'undefined';
+const supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
+/**
+ * Wrapper around `<template>` element that attaches shadow root to its parent
+ * and moves its children into the shadow root.
+ *
+ * @private
+ */
+export const ShadowRoot = ({ children }) => {
+    const [shadowRoot, setShadowRoot] = React.useState();
+    const isFirstRender = useIsFirstRender();
+    const attachShadowRef = React.useCallback((template) => {
+        const parent = template?.parentElement;
+        if (!template || !parent) {
+            return;
+        }
+        queueMicrotask(() => ReactDOM.flushSync(() => setShadowRoot(parent.shadowRoot || parent.attachShadow({ mode: 'open' }))));
+    }, []);
+    if (!isBrowser) {
+        return React.createElement("template", { shadowrootmode: 'open' }, children);
+    }
+    // In browsers that support DSD, the template will be automatically removed as soon as it's parsed.
+    // To pass hydration, the first client render needs to emulate this browser behavior and return null.
+    if (supportsDSD && isFirstRender) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, shadowRoot ? (ReactDOM.createPortal(children, shadowRoot)) : (React.createElement("template", { ref: attachShadowRef }))));
+};
+// ----------------------------------------------------------------------------
+function useIsFirstRender() {
+    const [isFirstRender, setIsFirstRender] = React.useState(true);
+    React.useEffect(() => setIsFirstRender(false), []);
+    return isFirstRender;
+}

package/esm/core/utils/components/VirtualScroll.d.ts

@@ -73,4 +73,3 @@ export declare const useVirtualization: (props: VirtualScrollProps) => {
     };
     visibleChildren: JSX.Element[];
 };
-export default VirtualScroll;

package/esm/core/utils/components/VirtualScroll.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { mergeRefs, useResizeObserver, useIsomorphicLayoutEffect, } from '../hooks/index.js';
+import { mergeRefs, useResizeObserver, useLayoutEffect, } from '../hooks/index.js';
 const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates ?? ((cb) => void cb());
 const getScrollableParent = (element, ownerDocument = document) => {
     if (!element || element === ownerDocument.body) {
@@ -146,17 +146,17 @@ export const useVirtualization = (props) => {
     const [resizeRef, resizeObserver] = useResizeObserver(onResize);
     // Find scrollable parent
     // Needed only on init
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         const scrollableParent = getScrollableParent(parentRef.current, parentRef.current?.ownerDocument);
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
     // Stop watching resize, when virtual scroll is unmounted
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         return () => resizeObserver?.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
-    useIsomorphicLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
+    useLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
     const updateVirtualScroll = React.useCallback(() => {
         const scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {
@@ -189,7 +189,7 @@ export const useVirtualization = (props) => {
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         removeScrollListener();
         onScrollRef.current = onScroll;
         if (!scrollContainer.current ||
@@ -201,7 +201,7 @@ export const useVirtualization = (props) => {
         }
         return removeScrollListener;
     }, [onScroll, removeScrollListener]);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!isMounted) {
             return;
         }
@@ -256,8 +256,8 @@ export const useVirtualization = (props) => {
                 });
             }
         }
-    }, [scrollToIndex, isMounted]);
-    useIsomorphicLayoutEffect(() => {
+    }, [scrollToIndex, isMounted, itemsLength]);
+    useLayoutEffect(() => {
         if (!scrollContainerHeight) {
             return;
         }
@@ -283,4 +283,3 @@ export const useVirtualization = (props) => {
         visibleChildren,
     };
 };
-export default VirtualScroll;

package/esm/core/utils/components/WithCSSTransition.d.ts

@@ -4,4 +4,3 @@ export declare const WithCSSTransition: (props: Partial<React.ComponentPropsWith
     children: JSX.Element;
     dimension?: 'height' | 'width';
 }) => React.JSX.Element;
-export default WithCSSTransition;

package/esm/core/utils/components/WithCSSTransition.js

@@ -35,4 +35,3 @@ export const WithCSSTransition = (props) => {
         },
     })) : (React.createElement(React.Fragment, null))));
 };
-export default WithCSSTransition;

package/esm/core/utils/components/index.d.ts

@@ -10,3 +10,4 @@ export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
+export * from './ShadowRoot.js';

package/esm/core/utils/components/index.js

@@ -14,3 +14,4 @@ export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
+export * from './ShadowRoot.js';

package/esm/core/utils/hooks/useContainerWidth.d.ts

@@ -14,4 +14,3 @@
  * return <div ref={ref}>...</div>;
  */
 export declare const useContainerWidth: <T extends HTMLElement>(watchResizes?: boolean) => readonly [(instance: HTMLElement | null | undefined) => void, number];
-export default useContainerWidth;

package/esm/core/utils/hooks/useContainerWidth.js

@@ -36,4 +36,3 @@ export const useContainerWidth = (watchResizes = true) => {
     const refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
     return [refs, contentWidth];
 };
-export default useContainerWidth;

package/esm/core/utils/hooks/useDragAndDrop.d.ts

@@ -11,4 +11,3 @@ export declare const useDragAndDrop: (elementRef: React.RefObject<HTMLElement>,
     onPointerDown: (e: React.PointerEvent<HTMLElement>) => void;
     transform: string;
 };
-export default useDragAndDrop;

package/esm/core/utils/hooks/useDragAndDrop.js

@@ -98,4 +98,3 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
     }, [elementRef, enabled]);
     return { onPointerDown, transform };
 };
-export default useDragAndDrop;

package/esm/core/utils/hooks/useIsomorphicLayoutEffect.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *
+ * Exported as `useLayoutEffect` so that the react hooks linter correctly identifies the necessary dependencies.
+ *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export { useIsomorphicLayoutEffect as useLayoutEffect };

package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js

@@ -6,6 +6,9 @@ import * as React from 'react';
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *
+ * Exported as `useLayoutEffect` so that the react hooks linter correctly identifies the necessary dependencies.
+ *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export { useIsomorphicLayoutEffect as useLayoutEffect };

package/esm/core/utils/hooks/useMediaQuery.d.ts

@@ -1,2 +1 @@
 export declare const useMediaQuery: (queryString: string) => boolean;
-export default useMediaQuery;

package/esm/core/utils/hooks/useMediaQuery.js

@@ -4,10 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { getWindow } from '../functions/index.js';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
 export const useMediaQuery = (queryString) => {
     const [matches, setMatches] = React.useState();
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         const mediaQueryList = getWindow()?.matchMedia?.(queryString);
         const handleChange = ({ matches }) => setMatches(matches);
         if (mediaQueryList != undefined) {
@@ -32,4 +32,3 @@ export const useMediaQuery = (queryString) => {
     }, [queryString]);
     return !!matches;
 };
-export default useMediaQuery;

package/esm/core/utils/hooks/useOverflow.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { useMergedRefs } from './useMergedRefs.js';
 import { useResizeObserver } from './useResizeObserver.js';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
 const STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items
@@ -38,7 +38,7 @@ export const useOverflow = (items, disabled = false, orientation = 'horizontal')
     const updateContainerSize = React.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
     const [resizeRef, observer] = useResizeObserver(updateContainerSize);
     const resizeObserverRef = React.useRef(observer);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (disabled) {
             setVisibleCount(items.length);
         }
@@ -48,7 +48,7 @@ export const useOverflow = (items, disabled = false, orientation = 'horizontal')
         }
     }, [containerSize, disabled, items]);
     const mergedRefs = useMergedRefs(containerRef, resizeRef);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!containerRef.current || disabled) {
             resizeObserverRef.current?.disconnect();
             return;
@@ -77,7 +77,7 @@ export const useOverflow = (items, disabled = false, orientation = 'horizontal')
         }
         needsFullRerender.current = false;
     }, [containerSize, visibleCount, disabled, items.length, orientation]);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         previousContainerSize.current = containerSize;
     }, [containerSize]);
     return [mergedRefs, visibleCount];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.3.4",
+  "version": "3.4.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -86,22 +86,19 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.2.2",
+    "@itwin/itwinui-css": "^2.3.1",
     "@itwin/itwinui-variables": "3.0.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.68",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/node": "^18.0.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/node": "*",
+    "@types/react": "*",
+    "@types/react-dom": "*",
     "@types/react-transition-group": "^4.4.10",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
     "@vitest/coverage-v8": "^1.2.1",
-    "concurrently": "^5.3.0",
-    "eslint": "^8.43.0",
+    "eslint": "^8",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-require-extensions": "^0.1.3",
     "react": "^18.0.0",