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

package/esm/core/Stepper/StepperStep.js

@@ -17,6 +17,10 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
     description,
     className,
     style,
+    stepProps,
+    trackContentProps,
+    circleProps,
+    nameProps,
     ...rest
   } = props;
   const isPast = currentStepNumber > index;
@@ -42,17 +46,17 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
     Box,
     {
       as: 'li',
+      ...stepProps,
       className: cx(
         'iui-stepper-step',
-        {
-          'iui-current': isActive,
-          'iui-clickable': isClickable,
-        },
+        { 'iui-current': isActive, 'iui-clickable': isClickable },
         className,
+        stepProps?.className,
       ),
       style: {
-        width: type === 'default' ? `${100 / totalSteps}%` : undefined,
+        inlineSize: type === 'default' ? `${100 / totalSteps}%` : undefined,
         ...style,
+        ...stepProps?.style,
       },
       onClick: onCompletedClick,
       onKeyDown: onKeyDown,
@@ -63,17 +67,32 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
     },
     React.createElement(
       Box,
-      { className: 'iui-stepper-track-content' },
+      {
+        as: 'div',
+        ...trackContentProps,
+        className: cx(
+          'iui-stepper-track-content',
+          trackContentProps?.className,
+        ),
+      },
       React.createElement(
         Box,
-        { as: 'span', className: 'iui-stepper-circle' },
+        {
+          as: 'span',
+          ...circleProps,
+          className: cx('iui-stepper-circle', circleProps?.className),
+        },
         index + 1,
       ),
     ),
     type === 'default' &&
       React.createElement(
         Box,
-        { as: 'span', className: 'iui-stepper-step-name' },
+        {
+          as: 'span',
+          ...nameProps,
+          className: cx('iui-stepper-step-name', nameProps?.className),
+        },
         title,
       ),
   );

package/esm/core/Stepper/WorkflowDiagram.d.ts

@@ -1,5 +1,15 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { StepperProps } from './Stepper.js';
-type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
+type WorkflowDiagramProps = Pick<StepperProps, 'steps'> & {
+    /**
+     *  Allows props to be passed for diagram.
+     */
+    contentProps?: (index: number) => React.ComponentProps<'span'>;
+    /**
+     *  Allows props to be passed for diagram wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'div'>;
+};
 export declare const WorkflowDiagram: PolymorphicForwardRefComponent<"ol", WorkflowDiagramProps>;
 export default WorkflowDiagram;

package/esm/core/Stepper/WorkflowDiagram.js

@@ -3,25 +3,28 @@
  * 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 '../utils/index.js';
 import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
 export const WorkflowDiagram = React.forwardRef(
   // TODO: Remove this ref cast. ref and rest props should be applied on the same element
   (props, ref) => {
-    const { steps, ...rest } = props;
+    const { steps, className, contentProps, wrapperProps, ...rest } = props;
     return React.createElement(
       Box,
-      { ref: ref },
+      { as: 'div', ...wrapperProps, ref: ref },
       React.createElement(
         Box,
-        { as: 'ol', className: 'iui-workflow-diagram', ...rest },
-        steps.map((s, index) =>
-          React.createElement(WorkflowDiagramStep, {
+        { as: 'ol', className: cx('iui-workflow-diagram', className), ...rest },
+        steps.map((s, index) => {
+          const thisContentProps = contentProps?.(index);
+          return React.createElement(WorkflowDiagramStep, {
+            contentProps: thisContentProps,
             key: index,
             title: s.name,
             description: s.description,
-          }),
-        ),
+          });
+        }),
       ),
     );
   },

package/esm/core/Stepper/WorkflowDiagramStep.d.ts

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { type CommonProps } from '../utils/index.js';
 import type { StepperStepProps } from './StepperStep.js';
-export type WorkflowDiagramStepProps = Pick<StepperStepProps, 'title' | 'description'> & Omit<CommonProps, 'title'>;
+export type WorkflowDiagramStepProps = {
+    /**
+     *  Allows props to be passed for diagram content.
+     */
+    contentProps?: React.ComponentProps<'span'>;
+} & Pick<StepperStepProps, 'title' | 'description'> & Omit<CommonProps, 'title'>;
 export declare const WorkflowDiagramStep: (props: WorkflowDiagramStepProps) => React.JSX.Element;

package/esm/core/Stepper/WorkflowDiagramStep.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { Tooltip } from '../Tooltip/index.js';
 import { Box } from '../utils/index.js';
 export const WorkflowDiagramStep = (props) => {
-  const { title, description, className, style, ...rest } = props;
+  const { title, description, className, style, contentProps, ...rest } = props;
   const stepShape = React.createElement(
     Box,
     {
@@ -18,7 +18,11 @@ export const WorkflowDiagramStep = (props) => {
     },
     React.createElement(
       Box,
-      { as: 'span', className: 'iui-workflow-diagram-content' },
+      {
+        as: 'span',
+        ...contentProps,
+        className: cx('iui-workflow-diagram-content', contentProps?.className),
+      },
       title,
     ),
   );

package/esm/core/Table/SubRowExpander.js

@@ -16,7 +16,7 @@ export const SubRowExpander = (props) => {
           IconButton,
           {
             style: {
-              marginRight:
+              marginInlineEnd:
                 density === 'default' || density === undefined ? 8 : 4,
             },
             className: 'iui-table-row-expander',

package/esm/core/Table/Table.js

@@ -798,7 +798,6 @@ export const Table = (props) => {
               React.createElement(ProgressRadial, {
                 indeterminate: true,
                 size: 'small',
-                style: { float: 'none', marginLeft: 0 },
               }),
             ),
           ),

package/esm/core/Table/TableCell.js

@@ -39,7 +39,7 @@ export const TableCell = (props) => {
     }
     const multiplier = 26 + expanderMargin; // 26 = expander width
     return {
-      paddingLeft: cellPadding + dynamicMargin * multiplier,
+      paddingInlineStart: cellPadding + dynamicMargin * multiplier,
     };
   };
   const cellElementProps = cell.getCellProps({

package/esm/core/Table/TablePaginator.js

@@ -15,6 +15,7 @@ import {
   SvgChevronLeft,
   SvgChevronRight,
   Box,
+  ButtonBase,
 } from '../utils/index.js';
 const defaultLocalization = {
   pageSizeLabel: (size) => `${size} per page`,
@@ -86,11 +87,9 @@ export const TablePaginator = (props) => {
   const pageButton = React.useCallback(
     (index, tabIndex = index === focusedIndex ? 0 : -1) =>
       React.createElement(
-        Box,
+        ButtonBase,
         {
-          as: 'button',
           key: index,
-          type: 'button',
           className: cx('iui-table-paginator-page-button', {
             'iui-table-paginator-page-button-small': buttonSize === 'small',
           }),

package/esm/core/Tabs/Tab.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../utils/index.js';
+import { Box, ButtonBase } from '../utils/index.js';
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
@@ -24,9 +24,8 @@ export const Tab = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   return React.createElement(
-    Box,
+    ButtonBase,
     {
-      as: 'button',
       className: cx('iui-tab', { 'iui-active': active }, className),
       role: 'tab',
       tabIndex: -1,

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

@@ -3,5 +3,5 @@ import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType | undefined;
     themeOptions?: ThemeOptions | undefined;
-    portalContainerRef?: React.RefObject<HTMLElement> | undefined;
+    portalContainer?: HTMLElement | null | undefined;
 } | undefined>;

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

@@ -44,11 +44,31 @@ type RootProps = {
 type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
     themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
+    /**
+     * The element used as the portal for floating elements (Tooltip, Toast, DropdownMenu, Dialog, etc).
+     *
+     * Defaults to a `<div>` rendered at the end of the ThemeProvider.
+     *
+     * When passing an element, it is recommended to use state.
+     *
+     * @example
+     * const [myPortal, setMyPortal] = React.useState(null);
+     *
+     * <div ref={setMyPortal} />
+     * <ThemeProvider
+     *   portalContainer={myPortal}
+     * >
+     *   ...
+     * </ThemeProvider>
+     */
+    portalContainer?: HTMLElement;
 };
 /**
- * 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.

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/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/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';