@itwin/itwinui-react 3.17.0-dev.2 → 3.17.1

package/esm/core/Tabs/Tabs.js

@@ -121,7 +121,7 @@ let Tab = React.forwardRef((props, forwardedRef) => {
     focusActivationMode,
   } = useSafeContext(TabsContext);
   let { tabsWidth, tablistRef } = useSafeContext(TabListContext);
-  let tabRef = React.useRef();
+  let tabRef = React.useRef(void 0);
   let isActive = activeValue === value;
   let isActiveRef = useLatestRef(isActive);
   useLayoutEffect(() => {
@@ -288,7 +288,7 @@ let TabsPanel = React.forwardRef((props, ref) => {
       className: cx('iui-tabs-content', className),
       'aria-labelledby': `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
       role: 'tabpanel',
-      hidden: activeValue !== value || void 0,
+      hidden: activeValue !== value ? true : void 0,
       ref: ref,
       ...rest,
       id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -30,8 +30,11 @@ type RootProps = {
      *
      * The 'inherit' option is intended to be used by packages, to enable incremental adoption
      * of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
-     * if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`,
-     * `portalContainer`, and `future.themeBridge` (if possible).
+     * if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`
+     * and `portalContainer` (if possible).
+     *
+     * `future.themeBridge` will be inherited regardless of `theme` value. To disable it, explicitly set
+     * `future.themeBridge` to false.
      *
      * @default 'inherit'
      */

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -131,7 +131,7 @@ let Root = React.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      'data-iui-bridge': !!future?.themeBridge || void 0,
+      'data-iui-bridge': future?.themeBridge ? true : void 0,
       ref: forwardedRef,
       ...rest,
     },

package/esm/core/Tile/Tile.d.ts

@@ -247,9 +247,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
     /**
      * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
      */
-    IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;

package/esm/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -25,7 +25,7 @@ type ToggleSwitchProps = {
      *
      * Will override the default checkmark icon.
      */
-    icon?: JSX.Element | null;
+    icon?: React.JSX.Element | null;
 } | {
     size: 'small';
     icon?: never;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import type { Placement } from '@floating-ui/react';
+import type { FloatingDelayGroup, Placement } from '@floating-ui/react';
 import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
+export declare const defaultTooltipDelay: React.ComponentPropsWithoutRef<typeof FloatingDelayGroup>['delay'];
 type TooltipOptions = {
     /**
      * Placement of the Tooltip

package/esm/core/Tooltip/Tooltip.js

@@ -25,6 +25,10 @@ import {
   useId,
   useMergedRefs,
 } from '../../utils/index.js';
+export const defaultTooltipDelay = {
+  open: 100,
+  close: 200,
+};
 let useTooltip = (options = {}) => {
   let uniqueId = useId();
   let {
@@ -118,13 +122,7 @@ let useTooltip = (options = {}) => {
   });
   let interactions = useInteractions([
     useHover(floating.context, {
-      delay:
-        0 !== delay
-          ? delay
-          : {
-              open: 50,
-              close: 250,
-            },
+      delay: 0 !== delay ? delay : defaultTooltipDelay,
       handleClose: safePolygon({
         buffer: -1 / 0,
       }),

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

@@ -38,9 +38,7 @@ export declare const TransferList: PolymorphicForwardRefComponent<"div", {}> & {
     /**
      * 	TransferList listbox subcomponent
      */
-    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }, "as"> & {
+    Listbox: PolymorphicForwardRefComponent<"ul", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as"> & {
         as?: "div" | undefined;
     }>;
     /**

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

@@ -53,7 +53,7 @@ export type TreeProps<T> = {
      *   />
      * ), [onNodeExpanded])
      */
-    nodeRenderer: (props: NodeRenderProps<T>) => JSX.Element;
+    nodeRenderer: (props: NodeRenderProps<T>) => React.JSX.Element;
     /**
      * Array of custom data used for `TreeNodes` inside `Tree`.
      */

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

@@ -37,7 +37,7 @@ type TreeNodeProps = {
     /**
      * Icon shown before label and sublabel content.
      */
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     /**
      * Props for TreeNode Icon
      */

package/esm/core/VisuallyHidden/VisuallyHidden.js

@@ -29,7 +29,7 @@ export const VisuallyHidden = React.forwardRef((props, ref) => {
     {
       as: asProp,
       className: cx('iui-visually-hidden', className),
-      'data-iui-unhide-on-focus': !!unhideOnFocus || void 0,
+      'data-iui-unhide-on-focus': unhideOnFocus ? true : void 0,
       ref: ref,
       ...rest,
     },

package/esm/react-table/react-table.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent, ComponentType, CSSProperties, DependencyList, EffectCallback, MouseEvent, ReactElement, ReactFragment, ReactNode } from 'react';
+import type { ChangeEvent, ComponentType, CSSProperties, DependencyList, EffectCallback, MouseEvent, ReactElement, ReactNode } from 'react';
 /**
  * This allows custom strings and keeps intellisense for string unions.
  * See https://github.com/Microsoft/TypeScript/issues/29729
@@ -732,7 +732,7 @@ export declare const defaultColumn: Partial<Column> & Record<string, any>;
 export type StringKey<D> = Extract<keyof D, string>;
 export type IdType<D> = StringKey<D> | string;
 export type CellValue<V = any> = V;
-export type Renderer<Props> = ComponentType<Props> | ReactElement | string | number | ReactFragment;
+export type Renderer<Props> = ComponentType<Props> | ReactElement<any> | string | number | Iterable<ReactNode>;
 export interface PluginHook<D extends Record<string, unknown>> {
     (hooks: Hooks<D>): void;
     pluginName?: string | undefined;
@@ -749,5 +749,5 @@ export declare function useGetLatest<T>(obj: T): () => T;
 export declare function safeUseLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
 export declare function useMountedLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
 export declare function useAsyncDebounce<F extends (...args: any[]) => any>(defaultFn: F, defaultWait?: number): F;
-export declare function makeRenderer(instance: TableInstance, column: ColumnInstance, meta?: any): ReactElement;
+export declare function makeRenderer(instance: TableInstance, column: ColumnInstance, meta?: any): ReactElement<any>;
 export {};

package/esm/react-table/react-table.types-test.js

@@ -584,7 +584,7 @@ import {
     [pageSizeList],
   );
   let [globalFilter, setGlobalFilter] = React.useState('');
-  let tableInstance = React.useRef();
+  let tableInstance = React.useRef(void 0);
   let [hoveredRowIndex, setHoveredRowIndex] = React.useState(0);
   let [rowRefMap, setRowRefMap] = React.useState({});
   return React.createElement(

package/esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.17.0-dev.2';
+const t = '3.17.1';
 const u = new Proxy(
   {},
   {

package/esm/utils/components/ButtonBase.js

@@ -7,6 +7,7 @@ export const ButtonBase = React.forwardRef((props, forwardedRef) => {
     as: asProp = 'button',
     disabled: disabledProp,
     htmlDisabled,
+    type: typeProp = 'button' === asProp ? 'button' : void 0,
     ...rest
   } = props;
   let isClient = useIsClient();
@@ -16,13 +17,14 @@ export const ButtonBase = React.forwardRef((props, forwardedRef) => {
     if (disabledProp) return;
     handler?.(e);
   };
+  let type = 'button' === asProp && disabledProp ? 'button' : typeProp;
   return React.createElement(Box, {
     as: asProp,
-    type: 'button' === asProp ? 'button' : void 0,
+    type: type,
     ref: forwardedRef,
     'aria-disabled': ariaDisabled ? 'true' : void 0,
     'data-iui-disabled': disabledProp ? 'true' : void 0,
-    disabled: !!(htmlDisabled ?? (!isClient && disabledProp)) || void 0,
+    disabled: htmlDisabled ?? (!isClient && disabledProp) ? true : void 0,
     ...rest,
     className: cx('iui-button-base', props.className),
     onClick: handleIfEnabled(props.onClick),

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

@@ -3,7 +3,7 @@ export type FocusTrapProps = {
     /**
      * A single child element to trap focus in.
      */
-    children: JSX.Element;
+    children: React.JSX.Element;
 };
 /**
  * Trap focus within child container.

package/esm/utils/components/FocusTrap.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { getTabbableElements } from '../functions/focusable.js';
-import { mergeRefs } from '../hooks/useMergedRefs.js';
+import { cloneElementWithRef } from '../functions/react.js';
 export const FocusTrap = (props) => {
   let { children } = props;
-  let childRef = React.useRef();
+  let childRef = React.useRef(void 0);
   let getFirstLastFocusables = () => {
     let elements = getTabbableElements(childRef.current);
     let firstElement = elements[0];
@@ -28,9 +28,9 @@ export const FocusTrap = (props) => {
       onFocus: onFirstFocus,
       'aria-hidden': true,
     }),
-    React.cloneElement(children, {
-      ref: mergeRefs(children.ref, childRef),
-    }),
+    cloneElementWithRef(children, () => ({
+      ref: childRef,
+    })),
     React.createElement('div', {
       tabIndex: 0,
       onFocus: onLastFocus,

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

@@ -6,7 +6,7 @@ export type InputContainerProps = {
     required?: boolean;
     status?: 'positive' | 'warning' | 'negative';
     message?: React.ReactNode;
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     isLabelInline?: boolean;
     statusMessage?: React.ReactNode;
     inputId?: string;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare const portalContainerAtom: import("jotai").PrimitiveAtom<HTMLElement | undefined> & {
-    init: HTMLElement | undefined;
+export declare const portalContainerAtom: import("jotai").PrimitiveAtom<HTMLElement | null> & {
+    init: HTMLElement | null;
 };
 export type PortalProps = {
     /**
@@ -32,4 +32,4 @@ export type PortalProps = {
  * @private
  */
 export declare const Portal: (props: React.PropsWithChildren<PortalProps>) => React.ReactNode;
-export declare const usePortalTo: (portal: NonNullable<PortalProps["portal"]>) => HTMLElement | null | undefined;
+export declare const usePortalTo: (portal: NonNullable<PortalProps["portal"]>) => HTMLElement | null;

package/esm/utils/components/Portal.js

@@ -3,7 +3,7 @@ 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(void 0);
+export const portalContainerAtom = atom(null);
 export const Portal = (props) => {
   let { portal = true, children } = props;
   let isClient = useIsClient();

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

@@ -3,12 +3,12 @@ export type ResizerProps = {
     /**
      * Ref of the element that is being resized.
      */
-    elementRef: React.RefObject<HTMLElement>;
+    elementRef: React.RefObject<HTMLElement | null>;
     /**
      * Ref of the container element in order to avoid resizing past container boundaries.
      * If not passed, viewport will be used.
      */
-    containerRef?: React.RefObject<HTMLElement>;
+    containerRef?: React.RefObject<HTMLElement | null>;
     /**
      * Callback that is being called on resize start.
      * Useful to set state, style, or other properties when resizing is started.

package/esm/utils/components/ShadowRoot.js

@@ -47,7 +47,7 @@ let ClientShadowRoot = ({ children, css }) => {
 };
 function useShadowRoot(templateRef, { css = '' }) {
   let [shadowRoot, setShadowRoot] = React.useState(null);
-  let styleSheet = React.useRef();
+  let styleSheet = React.useRef(void 0);
   let latestCss = useLatestRef(css);
   let latestShadowRoot = useLatestRef(shadowRoot);
   let createStyleSheet = React.useCallback(

package/esm/utils/functions/focusable.d.ts

@@ -26,6 +26,6 @@ export declare const getFocusableElements: (container: HTMLElement | undefined |
 export declare function useFocusableElements(root: HTMLElement | null, extraOptions?: {
     filter?: (elements: HTMLElement[]) => HTMLElement[];
 }): {
-    focusableElementsRef: React.MutableRefObject<HTMLElement[]>;
+    focusableElementsRef: React.RefObject<HTMLElement[]>;
     focusableElements: HTMLElement[];
 };

package/esm/utils/functions/polymorphic.d.ts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../props.js';
-declare const _base: <As extends keyof JSX.IntrinsicElements = "div">(defaultElement: As) => (className: string, attrs?: JSX.IntrinsicElements[As]) => PolymorphicForwardRefComponent<As, {}>;
+declare const _base: <As extends keyof React.JSX.IntrinsicElements = "div">(defaultElement: As) => (className: string, attrs?: React.JSX.IntrinsicElements[As]) => PolymorphicForwardRefComponent<As, {}>;
 /**
  * Utility to create a type-safe polymorphic component with a simple class.
  *
@@ -17,5 +18,5 @@ declare const _base: <As extends keyof JSX.IntrinsicElements = "div">(defaultEle
  *
  * @private
  */
-export declare const polymorphic: { [key in keyof JSX.IntrinsicElements]: ReturnType<typeof _base<key>>; };
+export declare const polymorphic: { [key in keyof React.JSX.IntrinsicElements]: ReturnType<typeof _base<key>>; };
 export {};

package/esm/utils/functions/react.d.ts

@@ -5,4 +5,4 @@ import * as React from 'react';
  *
  * @private
  */
-export declare const cloneElementWithRef: (children: React.ReactNode, getProps: (children: JSX.Element) => Record<string, unknown>) => string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;
+export declare const cloneElementWithRef: (children: React.ReactNode, getProps: (children: React.JSX.Element) => Record<string, unknown>) => string | number | bigint | true | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;

package/esm/utils/functions/react.js

@@ -3,12 +3,10 @@ import { mergeRefs } from '../hooks/useMergedRefs.js';
 export const cloneElementWithRef = (children, getProps) => {
   if (!children) return null;
   if (!React.isValidElement(children)) return children;
+  let childrenRef = children.props?.ref || children?.ref;
   let props = getProps(children);
   let ref = mergeRefs(
-    ...[
-      'ref' in children ? children.ref : null,
-      'ref' in props ? props.ref : null,
-    ].filter(Boolean),
+    ...[childrenRef, 'ref' in props ? props.ref : null].filter(Boolean),
   );
   return React.cloneElement(children, {
     ...props,

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

@@ -7,7 +7,7 @@ import * as React from 'react';
  * `onPointerDown` - handler that is called when pointer is down and handles all the dragging logic.
  * `transform` - current transform of the element, it is used to preserve drag position when element visibility is being toggled.
  */
-export declare const useDragAndDrop: (elementRef: React.RefObject<HTMLElement>, containerRef?: React.RefObject<HTMLElement>, enabled?: boolean) => {
+export declare const useDragAndDrop: (elementRef: React.RefObject<HTMLElement | null>, containerRef?: React.RefObject<HTMLElement | null>, enabled?: boolean) => {
     onPointerDown: (e: React.PointerEvent<HTMLElement>) => void;
     transform: string;
 };

package/esm/utils/hooks/useDragAndDrop.js

@@ -17,8 +17,8 @@ let getContainerRect = (containerRef) => {
 export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
   let grabOffsetX = React.useRef(0);
   let grabOffsetY = React.useRef(0);
-  let translateX = React.useRef();
-  let translateY = React.useRef();
+  let translateX = React.useRef(void 0);
+  let translateY = React.useRef(void 0);
   let containerRectRef = React.useRef(getContainerRect(containerRef));
   let adjustTransform = React.useCallback(() => {
     if (!elementRef.current || !enabled) return;

package/esm/utils/hooks/useEventListener.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export const useEventListener = (eventName, handler, element) => {
-  let savedHandler = React.useRef();
+  let savedHandler = React.useRef(void 0);
   React.useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);

package/esm/utils/hooks/useLatestRef.d.ts

@@ -6,4 +6,4 @@ import * as React from 'react';
  * const { value } = props;
  * const valueRef = useLatestRef(value);
  */
-export declare const useLatestRef: <T>(value: T) => React.MutableRefObject<T>;
+export declare const useLatestRef: <T>(value: T) => React.RefObject<T>;

package/esm/utils/hooks/useMergedRefs.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 /**
  * Function that merges the provided refs into one.
  */
-export declare const mergeRefs: <T>(...refs: Array<React.Ref<T> | React.LegacyRef<T> | undefined | null>) => (instance: T | null) => void;
+export declare const mergeRefs: <T>(...refs: Array<React.Ref<T> | React.Ref<T> | undefined | null>) => (instance: T | null) => void;
 /**
  * Returns a ref callback that merges the provided refs using `mergeRefs`.
  */
-export declare const useMergedRefs: <T>(...refs: ReadonlyArray<React.Ref<T> | React.LegacyRef<T> | undefined | null>) => (instance: T | null) => void;
+export declare const useMergedRefs: <T>(...refs: ReadonlyArray<React.Ref<T> | React.Ref<T> | undefined | null>) => (instance: T | null) => void;

package/esm/utils/hooks/useResizeObserver.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getWindow } from '../functions/dom.js';
 export const useResizeObserver = (onResize) => {
-  let resizeObserver = React.useRef();
+  let resizeObserver = React.useRef(void 0);
   let elementRef = React.useCallback(
     (element) => {
       if (!getWindow()?.ResizeObserver) return;

package/esm/utils/props.d.ts

@@ -15,14 +15,14 @@ export type CommonProps = {
  *   // ...
  * }) as PolymorphicForwardRefComponent<'button', ButtonOwnProps>;
  */
-export interface PolymorphicForwardRefComponent<DefaultAs, OwnProps = {}> extends React.ForwardRefExoticComponent<Merge<DefaultAs extends React.ElementType ? React.ComponentPropsWithRef<DefaultAs> : never, OwnProps & {
+export interface PolymorphicForwardRefComponent<DefaultAs, OwnProps = {}> extends React.ForwardRefExoticComponent<Merge<DefaultAs extends React.ElementType<any> ? React.ComponentPropsWithRef<DefaultAs> : never, OwnProps & {
     as?: DefaultAs;
 }>> {
-    <As = DefaultAs>(props: As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
+    <As = DefaultAs>(props: As extends keyof React.JSX.IntrinsicElements ? Merge<React.JSX.IntrinsicElements[As], OwnProps & {
         as: As;
     }> : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
         as: As;
-    }> : never): React.ReactElement | null;
+    }> : never): React.ReactElement<any> | null;
 }
 type Merge<P1, P2> = Omit<P1, keyof P2> & P2;
 export {};

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

@@ -18,9 +18,9 @@ export declare const ScopeProvider: ({ children }: {
  *
  * @private
  */
-export declare const useScopedAtom: <T>(atom: Atom<T>) => readonly [Awaited<T>, (...args: unknown[]) => unknown];
+export declare const useScopedAtom: <T>(atom: Atom<T>) => readonly [Awaited<T>, (...args: T[]) => void];
 /**
  * Wrapper over `useSetAtom` that uses the store from the nearest `ScopeProvider`.
  * @private
  */
-export declare const useScopedSetAtom: <T>(atom: WritableAtom<T, unknown[], unknown>) => (...args: unknown[]) => unknown;
+export declare const useScopedSetAtom: <T>(atom: WritableAtom<T, T[], void>) => (...args: T[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.17.0-dev.2",
+  "version": "3.17.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -78,62 +78,38 @@
     "ui",
     "ux"
   ],
-  "scripts": {
-    "build": "pnpm clean:build && pnpm build:js && pnpm build:styles && pnpm build:types && pnpm build:post",
-    "build:js": "node ./scripts/build.mjs",
-    "build:types": "tsc -p tsconfig.build.json --outDir esm && tsc -p tsconfig.build.json --outDir cjs",
-    "build:styles": "vite build src/styles.js",
-    "build:post": "node ./scripts/postBuild.mjs",
-    "clean:build": "rimraf esm && rimraf cjs && rimraf DEV-esm && rimraf DEV-cjs && rimraf styles.css",
-    "clean:coverage": "rimraf coverage",
-    "clean": "rimraf .turbo && pnpm clean:coverage && pnpm clean:build && rimraf node_modules",
-    "test": "pnpm test:types && pnpm test:unit",
-    "test:unit": "vitest run",
-    "test:unit:watch": "pnpm test:unit --watch",
-    "test:types": "tsc -p tsconfig.test.json --noEmit",
-    "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
-    "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
-    "lint:fix": "pnpm lint --fix && node ../../scripts/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
-    "dev": "pnpm clean:build && concurrently \"pnpm dev:esm\" \"pnpm dev:dev-esm\" \"pnpm dev:cjs\" \"pnpm dev:dev-cjs\" \"pnpm dev:styles\" \"pnpm dev:types\"",
-    "dev:esm": "swc src -d esm --env-name='production' --watch --strip-leading-paths",
-    "dev:dev-esm": "swc src -d DEV-esm --env-name='development' --watch --strip-leading-paths",
-    "dev:cjs": "swc src -d cjs --env-name='production' --watch --strip-leading-paths -C module.type=commonjs",
-    "dev:dev-cjs": "swc src -d DEV-cjs --env-name='development' --watch --strip-leading-paths -C module.type=commonjs",
-    "dev:types": "concurrently \"tsc -p tsconfig.build.json --outDir esm --watch --preserveWatchOutput\" \"tsc -p tsconfig.build.json --outDir cjs --watch --preserveWatchOutput\"",
-    "dev:styles": "pnpm build:styles --watch"
-  },
   "dependencies": {
-    "@floating-ui/react": "^0.26.23",
+    "@floating-ui/react": "^0.27.4",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
-    "@swc/helpers": "^0.5.11",
-    "@tanstack/react-virtual": "^3.8.2",
-    "classnames": "^2.3.2",
+    "@swc/helpers": "^0.5.15",
+    "@tanstack/react-virtual": "^3.13.0",
+    "classnames": "^2.5.1",
     "jotai": "^2.8.0",
     "react-table": "^7.8.0"
   },
   "devDependencies": {
-    "@swc/cli": "^0.5.1",
-    "@swc/core": "^1.5.28",
-    "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^14.5.1",
+    "@swc/cli": "^0.6.0",
+    "@swc/core": "^1.10.15",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@vitest/coverage-v8": "^1.2.1",
+    "@vitest/coverage-v8": "^1.6.1",
     "eslint": "^8",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-require-extensions": "^0.1.3",
     "jsdom": "^24.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "typescript": "5",
     "vite": "~5.4.14",
-    "vitest": "^1.2.1"
+    "vitest": "^1.6.1"
   },
   "peerDependencies": {
-    "react": ">=17.0.0 <19.0.0",
-    "react-dom": ">=17.0.0 <19.0.0"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
   "lint-staged": {
     "*.{tsx,ts,jsx,js}": [
@@ -145,5 +121,29 @@
   "prettier": "configs/prettier-config",
   "sideEffects": [
     "styles.css"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "pnpm clean:build && pnpm build:js && pnpm build:styles && pnpm build:types && pnpm build:post",
+    "build:js": "node ./scripts/build.mjs",
+    "build:types": "tsc -p tsconfig.build.json --outDir esm && tsc -p tsconfig.build.json --outDir cjs",
+    "build:styles": "vite build src/styles.js",
+    "build:post": "node ./scripts/postBuild.mjs",
+    "clean:build": "rimraf esm && rimraf cjs && rimraf DEV-esm && rimraf DEV-cjs && rimraf styles.css",
+    "clean:coverage": "rimraf coverage",
+    "clean": "rimraf .turbo && pnpm clean:coverage && pnpm clean:build && rimraf node_modules",
+    "test": "pnpm test:types && pnpm test:unit",
+    "test:unit": "vitest run",
+    "test:unit:watch": "pnpm test:unit --watch",
+    "test:types": "tsc -p tsconfig.test.json --noEmit",
+    "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
+    "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
+    "lint:fix": "pnpm lint --fix && node ../../scripts/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
+    "dev": "pnpm clean:build && concurrently \"pnpm dev:esm\" \"pnpm dev:dev-esm\" \"pnpm dev:cjs\" \"pnpm dev:dev-cjs\" \"pnpm dev:styles\" \"pnpm dev:types\"",
+    "dev:esm": "swc src -d esm --env-name='production' --watch --strip-leading-paths",
+    "dev:dev-esm": "swc src -d DEV-esm --env-name='development' --watch --strip-leading-paths",
+    "dev:cjs": "swc src -d cjs --env-name='production' --watch --strip-leading-paths -C module.type=commonjs",
+    "dev:dev-cjs": "swc src -d DEV-cjs --env-name='development' --watch --strip-leading-paths -C module.type=commonjs",
+    "dev:types": "concurrently \"tsc -p tsconfig.build.json --outDir esm --watch --preserveWatchOutput\" \"tsc -p tsconfig.build.json --outDir cjs --watch --preserveWatchOutput\"",
+    "dev:styles": "pnpm build:styles --watch"
+  }
+}