@itwin/itwinui-react 3.0.0-dev.5 → 3.0.0-dev.7

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -3,14 +3,23 @@
  * 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';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, Box } from '../utils/index.js';
+import {
+  useMediaQuery,
+  useMergedRefs,
+  Box,
+  useIsomorphicLayoutEffect,
+  useUncontrolledState,
+} from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 /**
- * This component provides global styles and applies theme to the entire tree
- * that it is wrapping around. The `theme` prop is optional and defaults to the
- * light theme.
+ * This component provides global state and applies theme to the entire tree
+ * that it is wrapping around.
+ *
+ * The `theme` prop defaults to "inherit", which looks upwards for closest ThemeProvider
+ * and falls back to "light" theme if one is not found.
  *
  * If you want to theme the entire app, you should use this component at the root. You can also
  * use this component to apply a different theme to only a part of the tree.
@@ -33,18 +42,23 @@ import { ToastProvider, Toaster } from '../Toast/Toaster.js';
  *  <App />
  * </ThemeProvider>
  */
-export const ThemeProvider = React.forwardRef((props, ref) => {
-  const { theme: themeProp, children, themeOptions, ...rest } = props;
-  const portalContainerRef = React.useRef(null);
-  const parentContext = React.useContext(ThemeContext);
-  const theme =
-    themeProp === 'inherit' ? parentContext?.theme ?? 'light' : themeProp;
-  const shouldApplyBackground =
-    themeOptions?.applyBackground ??
-    (themeProp === 'inherit' ? false : !parentContext);
+export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
+  const {
+    theme: themeProp = 'inherit',
+    children,
+    themeOptions,
+    portalContainer: portalContainerProp,
+    ...rest
+  } = props;
+  const [portalContainer, setPortalContainer] = useUncontrolledState(
+    portalContainerProp || null,
+  );
+  const [parentTheme, rootRef] = useParentTheme();
+  const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
+  const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
   const contextValue = React.useMemo(
-    () => ({ theme, themeOptions, portalContainerRef }),
-    [theme, themeOptions],
+    () => ({ theme, themeOptions, portalContainer }),
+    [theme, themeOptions, portalContainer],
   );
   return React.createElement(
     ThemeContext.Provider,
@@ -55,23 +69,29 @@ export const ThemeProvider = React.forwardRef((props, ref) => {
         theme: theme,
         shouldApplyBackground: shouldApplyBackground,
         themeOptions: themeOptions,
-        ref: ref,
+        ref: useMergedRefs(forwardedRef, rootRef),
         ...rest,
       },
       React.createElement(
         ToastProvider,
         null,
         children,
-        React.createElement(
-          'div',
-          { ref: portalContainerRef },
-          React.createElement(Toaster, null),
-        ),
+        portalContainerProp
+          ? ReactDOM.createPortal(
+              React.createElement(Toaster, null),
+              portalContainerProp,
+            )
+          : React.createElement(
+              'div',
+              { ref: setPortalContainer },
+              React.createElement(Toaster, null),
+            ),
       ),
     ),
   );
 });
 export default ThemeProvider;
+// ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {
   const {
     theme,
@@ -81,8 +101,6 @@ const Root = React.forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
-  const ref = React.useRef(null);
-  const mergedRefs = useMergedRefs(ref, forwardedRef);
   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
   const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
   const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
@@ -97,9 +115,31 @@ const Root = React.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      ref: mergedRefs,
+      ref: forwardedRef,
       ...rest,
     },
     children,
   );
 });
+// ----------------------------------------------------------------------------
+/**
+ * Returns theme from either parent context or by reading the closest
+ * data-iui-theme attribute if context is not found.
+ */
+const useParentTheme = () => {
+  const parentContext = React.useContext(ThemeContext);
+  const rootRef = React.useRef(null);
+  const [parentThemeState, setParentTheme] = React.useState(
+    parentContext?.theme,
+  );
+  useIsomorphicLayoutEffect(() => {
+    setParentTheme(
+      (old) =>
+        old ||
+        rootRef.current?.parentElement
+          ?.closest('[data-iui-theme]')
+          ?.getAttribute('data-iui-theme'),
+    );
+  }, []);
+  return [parentContext?.theme ?? parentThemeState, rootRef];
+};

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

@@ -125,10 +125,11 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileOwnProps> &
      */
     IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "styleType" | "isActive"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }, "ref">>;
     /**

package/esm/core/Toast/Toast.js

@@ -11,6 +11,7 @@ import {
   SvgCloseSmall,
   Box,
   useSafeContext,
+  ButtonBase,
 } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
 import { ToasterStateContext } from './Toaster.js';
@@ -46,9 +47,9 @@ export const Toast = (props) => {
   const [margin, setMargin] = React.useState(0);
   const marginStyle = () => {
     if (placementPosition === 'top') {
-      return { marginBottom: margin };
+      return { marginBlockEnd: margin };
     }
-    return { marginTop: margin };
+    return { marginBlockStart: margin };
   };
   React.useEffect(() => {
     if (type === 'temporary') {
@@ -185,13 +186,8 @@ export const ToastPresentation = (props) => {
     React.createElement(Box, { className: 'iui-message' }, content),
     link &&
       React.createElement(
-        Box,
-        {
-          as: 'button',
-          className: 'iui-toast-anchor',
-          ...link,
-          title: undefined,
-        },
+        ButtonBase,
+        { className: 'iui-toast-anchor', ...link, title: undefined },
         link.title,
       ),
     (type === 'persisting' || hasCloseButton) &&

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

@@ -55,7 +55,7 @@ type TooltipOwnProps = {
     children?: React.ReactNode;
     /**
      * Element to portal tooltip to.
-     * Portals to ThemeProvider portalContainerRef by default.
+     * Portals to ThemeProvider portalContainer by default.
      * @default true;
      */
     portal?: boolean | {

package/esm/core/Tooltip/Tooltip.js

@@ -135,7 +135,7 @@ export const Tooltip = React.forwardRef((props, forwardRef) => {
     typeof portal !== 'boolean'
       ? portal.to
       : portal
-      ? context?.portalContainerRef?.current ?? getDocument()?.body
+      ? context?.portalContainer || getDocument()?.body
       : null;
   const contentBox = React.createElement(
     Box,

package/esm/core/Tree/TreeNode.js

@@ -221,7 +221,7 @@ export const TreeNode = (props) => {
         as: 'ul',
         className: 'iui-sub-tree',
         role: 'group',
-        'aria-owns': subNodeIds.join(','),
+        'aria-owns': subNodeIds.join(' '),
       }),
   );
 };

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

@@ -0,0 +1,14 @@
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export declare const ButtonBase: PolymorphicForwardRefComponent<"button", ButtonBaseProps>;
+type ButtonBaseProps = {
+    /**
+     * Custom `disabled` prop that keeps the button focusable, prevents
+     * clicks, applied disabled styling, and adds `aria-disabled`.
+     */
+    disabled?: boolean;
+    /**
+     * Built-in html `disabled` attribute
+     */
+    htmlDisabled?: boolean;
+};
+export {};

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

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 cx from 'classnames';
+import { Box } from './Box.js';
+import { useIsClient } from '../hooks/useIsClient.js';
+export const ButtonBase = React.forwardRef((props, forwardedRef) => {
+  const {
+    as: asProp = 'button',
+    disabled: disabledProp,
+    htmlDisabled,
+    ...rest
+  } = props;
+  const isClient = useIsClient();
+  const ariaDisabled =
+    disabledProp &&
+    !htmlDisabled && // htmlDisabled prop takes preference
+    isClient && // progressively enhance after first render
+    asProp === 'button'; // ignore if not button, e.g. links
+  const handleIfEnabled = (handler) => (e) => {
+    if (disabledProp) {
+      return;
+    }
+    handler?.(e);
+  };
+  return React.createElement(Box, {
+    as: asProp,
+    type: asProp === 'button' ? 'button' : undefined,
+    ref: forwardedRef,
+    'aria-disabled': ariaDisabled ? 'true' : undefined,
+    'data-iui-disabled': disabledProp ? 'true' : undefined,
+    disabled: htmlDisabled ?? (!isClient && disabledProp) ? true : undefined,
+    ...rest,
+    className: cx('iui-button-base', props.className),
+    onClick: handleIfEnabled(props.onClick),
+    onPointerDown: handleIfEnabled(props.onPointerDown),
+    onPointerUp: handleIfEnabled(props.onPointerUp),
+  });
+});
+ButtonBase.displayName = 'ButtonBase';

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

@@ -36,8 +36,7 @@ export const Popover = React.forwardRef((props, ref) => {
   const computedProps = {
     allowHTML: true,
     animation: false,
-    appendTo: (el) =>
-      themeInfo?.portalContainerRef?.current || el.ownerDocument.body,
+    appendTo: (el) => themeInfo?.portalContainer || el.ownerDocument.body,
     arrow: false,
     duration: 0,
     interactive: true,
@@ -62,7 +61,10 @@ export const Popover = React.forwardRef((props, ref) => {
       ...props.popperOptions,
       modifiers: [
         { name: 'flip' },
-        { name: 'preventOverflow', options: { padding: 0 } },
+        {
+          name: 'preventOverflow',
+          options: { padding: 0 },
+        },
         ...(props.popperOptions?.modifiers || []),
       ],
     },

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

@@ -34,7 +34,10 @@ export const Resizer = (props) => {
     let height = `${initialHeight}px`;
     let translateX = initialTranslateX;
     let translateY = initialTranslateY;
-    const minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+    let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+    if (Number.isNaN(minWidth)) {
+      minWidth = 380;
+    }
     const minHeight = parseFloat(
       getComputedStyle(elementRef.current).minHeight,
     );
@@ -102,6 +105,8 @@ export const Resizer = (props) => {
         }
         case 'right': {
           width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+          height = elementRef.current.style.height = `${initialHeight}px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
         }
         case 'bottom-right': {
@@ -109,12 +114,14 @@ export const Resizer = (props) => {
           height = elementRef.current.style.height = `${
             initialHeight - diffY
           }px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
         }
         case 'bottom': {
           height = elementRef.current.style.height = `${
             initialHeight - diffY
           }px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
         }
         case 'bottom-left': {
@@ -135,6 +142,7 @@ export const Resizer = (props) => {
             break;
           }
           width = elementRef.current.style.width = `${newWidth}px`;
+          height = elementRef.current.style.height = `${initialHeight}px`;
           translateX = initialTranslateX - diffX;
           elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
           break;
@@ -169,8 +177,8 @@ export const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        top: -4,
-        left: -4,
+        top: 0,
+        left: 0,
         width: 12,
         height: 12,
         cursor: 'nw-resize',
@@ -181,7 +189,7 @@ export const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        top: -4,
+        top: 0,
         left: 8,
         right: 8,
         height: 8,
@@ -193,8 +201,8 @@ export const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        top: -4,
-        right: -4,
+        top: 0,
+        right: 0,
         width: 12,
         height: 12,
         cursor: 'ne-resize',
@@ -206,7 +214,7 @@ export const Resizer = (props) => {
       style: {
         position: 'absolute',
         top: 8,
-        right: -4,
+        right: 0,
         bottom: 8,
         width: 8,
         cursor: 'e-resize',
@@ -217,8 +225,8 @@ export const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        bottom: -4,
-        right: -4,
+        bottom: 0,
+        right: 0,
         width: 12,
         height: 12,
         cursor: 'se-resize',
@@ -229,7 +237,7 @@ export const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        bottom: -4,
+        bottom: 0,
         left: 8,
         right: 8,
         height: 8,
@@ -241,8 +249,8 @@ export const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        bottom: -4,
-        left: -4,
+        bottom: 0,
+        left: 0,
         width: 12,
         height: 12,
         cursor: 'sw-resize',
@@ -254,7 +262,7 @@ export const Resizer = (props) => {
       style: {
         position: 'absolute',
         top: 8,
-        left: -4,
+        left: 0,
         bottom: 8,
         width: 8,
         cursor: 'w-resize',

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

@@ -36,8 +36,8 @@ const getElementHeightWithMargins = (element) => {
     return undefined;
   }
   const margin =
-    parseFloat(getElementStyle(element, 'margin-top')) +
-    parseFloat(getElementStyle(element, 'margin-bottom'));
+    parseFloat(getElementStyle(element, 'margin-block-start')) +
+    parseFloat(getElementStyle(element, 'margin-block-end'));
   return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
 };
 const getNumberOfNodesInHeight = (childHeight, totalHeight) => {
@@ -344,13 +344,13 @@ export const useVirtualization = (props) => {
   return {
     outerProps: {
       style: {
-        minHeight:
+        minBlockSize:
           itemsLength > 1
             ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
               childHeight.current.first +
               childHeight.current.last
             : childHeight.current.middle,
-        minWidth: '100%',
+        minInlineSize: '100%',
         ...style,
       },
       ...rest,

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

@@ -13,3 +13,4 @@ export * from './Divider.js';
 export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
+export * from './ButtonBase.js';

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

@@ -17,3 +17,4 @@ export * from './Divider.js';
 export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
+export * from './ButtonBase.js';

package/esm/core/utils/functions/colors.d.ts

@@ -17,4 +17,4 @@ export declare const isSoftBackground: (value: string) => value is "skyblue" | "
  * Generate color from user name or email.
  * Recommended to use for `backgroundColor` in `Avatar` component.
  */
-export declare const getUserColor: (emailOrName: string) => string;
+export declare const getUserColor: (emailOrName: string) => "var(--iui-color-background-skyblue)" | "var(--iui-color-background-celery)" | "var(--iui-color-background-froly)" | "var(--iui-color-background-steelblue)" | "var(--iui-color-background-sunglow)" | "var(--iui-color-background-seabuckthorn)" | "var(--iui-color-background-montecarlo)" | "var(--iui-color-background-poloblue)" | "var(--iui-color-background-bouquet)" | "var(--iui-color-background-ash)" | "var(--iui-color-background-oak)";

package/esm/core/utils/functions/colors.js

@@ -19,19 +19,7 @@ export const SoftBackgrounds = {
 export const isSoftBackground = (value) => {
   return Object.keys(SoftBackgrounds).includes(value);
 };
-const USER_COLORS = [
-  '#6AB9EC',
-  '#B1C854',
-  '#F7706C',
-  '#4585A5',
-  '#FFC335',
-  '#F7963E',
-  '#73C7C1',
-  '#85A9CF',
-  '#A3779F',
-  '#C8C2B4',
-  '#A47854',
-];
+const USER_COLORS = Object.values(SoftBackgrounds);
 /**
  * Generate color from user name or email.
  * Recommended to use for `backgroundColor` in `Avatar` component.

package/esm/core/utils/functions/import.js

@@ -10,4 +10,5 @@
 export const dynamicImport =
   typeof jest === undefined
     ? new Function('specifier', 'return import(specifier)')
-    : (specifier) => import(specifier);
+    : (specifier) =>
+        import(/* webpackIgnore: true */ /* @vite-ignore */ specifier);

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

@@ -11,3 +11,4 @@ export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
 export * from './useIsClient.js';
 export * from './useId.js';
+export * from './useUncontrolledState.js';

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

@@ -15,3 +15,4 @@ export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
 export * from './useIsClient.js';
 export * from './useId.js';
+export * from './useUncontrolledState.js';

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

@@ -9,7 +9,7 @@ import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
 export declare const useGlobals: () => {
     theme?: import("../../index.js").ThemeType | undefined;
     themeOptions?: import("../../ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
-    portalContainerRef?: React.RefObject<HTMLElement> | undefined;
+    portalContainer?: HTMLElement | null | undefined;
 } | undefined;
 /** Shows console error if ThemeProvider is not used */
 export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * uncontrolled state (which often comes from a prop).
+ */
+export declare const useUncontrolledState: <T>(uncontrolledState: T) => readonly [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>];

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

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * 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';
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * uncontrolled state (which often comes from a prop).
+ */
+export const useUncontrolledState = (uncontrolledState) => {
+  const [controlledState, setControlledState] = React.useState();
+  return [uncontrolledState ?? controlledState, setControlledState];
+};

package/esm/styles.js

@@ -10,13 +10,6 @@ const styles = {
   'iui-anchor': '_iui3-anchor',
   'iui-anchor-external': '_iui3-anchor-external',
   'iui-avatar': '_iui3-avatar',
-  'iui-stroke': '_iui3-stroke',
-  'iui-initials': '_iui3-initials',
-  'iui-status': '_iui3-status',
-  'iui-online': '_iui3-online',
-  'iui-away': '_iui3-away',
-  'iui-busy': '_iui3-busy',
-  'iui-offline': '_iui3-offline',
   'iui-avatar-count': '_iui3-avatar-count',
   'iui-small': '_iui3-small',
   'iui-large': '_iui3-large',
@@ -107,6 +100,7 @@ const styles = {
   'iui-calendar-day-range-today': '_iui3-calendar-day-range-today',
   'iui-dialog-wrapper': '_iui3-dialog-wrapper',
   'iui-dialog': '_iui3-dialog',
+  'iui-dialog-content': '_iui3-dialog-content',
   'iui-dialog-visible': '_iui3-dialog-visible',
   'iui-dialog-default': '_iui3-dialog-default',
   'iui-dialog-full-page': '_iui3-dialog-full-page',
@@ -116,7 +110,6 @@ const styles = {
   'iui-dialog-title': '_iui3-dialog-title',
   'iui-dialog-title-bar': '_iui3-dialog-title-bar',
   'iui-dialog-title-bar-filled': '_iui3-dialog-title-bar-filled',
-  'iui-dialog-content': '_iui3-dialog-content',
   'iui-dialog-button-bar': '_iui3-dialog-button-bar',
   'iui-expandable-block': '_iui3-expandable-block',
   'iui-expandable-header': '_iui3-expandable-header',
@@ -242,13 +235,12 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-u4ca3ko': '_iui3-u4ca3ko',
+  'iui-u8bwhh6': '_iui3-u8bwhh6',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-u4ca3lg': '_iui3-u4ca3lg',
+  'iui-u8bwhhv': '_iui3-u8bwhhv',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
-  'iui-radio-tile-content': '_iui3-radio-tile-content',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
   'iui-radio-tile-container': '_iui3-radio-tile-container',
   'iui-radio-tile-input': '_iui3-radio-tile-input',
@@ -438,6 +430,7 @@ const styles = {
   'iui-tree-node-content-label': '_iui3-tree-node-content-label',
   'iui-tree-node-content-title': '_iui3-tree-node-content-title',
   'iui-tree-node-content-caption': '_iui3-tree-node-content-caption',
+  'iui-button-base': '_iui3-button-base',
   'iui-svg-icon': '_iui3-svg-icon',
   'iui-notification-marker': '_iui3-notification-marker',
   pulse,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.0.0-dev.5",
+  "version": "3.0.0-dev.7",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -83,7 +83,7 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.0.0-dev.5",
+    "@itwin/itwinui-css": "^2.0.0-dev.7",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "@itwin/itwinui-variables": "3.0.0-dev.1",
     "@swc/cli": "^0.1.62",