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

package/cjs/core/Stepper/StepperStep.js

@@ -21,6 +21,10 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     description,
     className,
     style,
+    stepProps,
+    trackContentProps,
+    circleProps,
+    nameProps,
     ...rest
   } = props;
   const isPast = currentStepNumber > index;
@@ -46,17 +50,17 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     index_js_2.Box,
     {
       as: 'li',
+      ...stepProps,
       className: (0, classnames_1.default)(
         '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,
@@ -67,17 +71,38 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     },
     React.createElement(
       index_js_2.Box,
-      { className: 'iui-stepper-track-content' },
+      {
+        as: 'div',
+        ...trackContentProps,
+        className: (0, classnames_1.default)(
+          'iui-stepper-track-content',
+          trackContentProps?.className,
+        ),
+      },
       React.createElement(
         index_js_2.Box,
-        { as: 'span', className: 'iui-stepper-circle' },
+        {
+          as: 'span',
+          ...circleProps,
+          className: (0, classnames_1.default)(
+            'iui-stepper-circle',
+            circleProps?.className,
+          ),
+        },
         index + 1,
       ),
     ),
     type === 'default' &&
       React.createElement(
         index_js_2.Box,
-        { as: 'span', className: 'iui-stepper-step-name' },
+        {
+          as: 'span',
+          ...nameProps,
+          className: (0, classnames_1.default)(
+            'iui-stepper-step-name',
+            nameProps?.className,
+          ),
+        },
         title,
       ),
   );

package/cjs/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/cjs/core/Stepper/WorkflowDiagram.js

@@ -7,25 +7,38 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
 const WorkflowDiagramStep_js_1 = require('./WorkflowDiagramStep.js');
 exports.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(
       index_js_1.Box,
-      { ref: ref },
+      { as: 'div', ...wrapperProps, ref: ref },
       React.createElement(
         index_js_1.Box,
-        { as: 'ol', className: 'iui-workflow-diagram', ...rest },
-        steps.map((s, index) =>
-          React.createElement(WorkflowDiagramStep_js_1.WorkflowDiagramStep, {
-            key: index,
-            title: s.name,
-            description: s.description,
-          }),
-        ),
+        {
+          as: 'ol',
+          className: (0, classnames_1.default)(
+            'iui-workflow-diagram',
+            className,
+          ),
+          ...rest,
+        },
+        steps.map((s, index) => {
+          const thisContentProps = contentProps?.(index);
+          return React.createElement(
+            WorkflowDiagramStep_js_1.WorkflowDiagramStep,
+            {
+              contentProps: thisContentProps,
+              key: index,
+              title: s.name,
+              description: s.description,
+            },
+          );
+        }),
       ),
     );
   },

package/cjs/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/cjs/core/Stepper/WorkflowDiagramStep.js

@@ -11,7 +11,7 @@ const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../Tooltip/index.js');
 const index_js_2 = require('../utils/index.js');
 const WorkflowDiagramStep = (props) => {
-  const { title, description, className, style, ...rest } = props;
+  const { title, description, className, style, contentProps, ...rest } = props;
   const stepShape = React.createElement(
     index_js_2.Box,
     {
@@ -25,7 +25,14 @@ const WorkflowDiagramStep = (props) => {
     },
     React.createElement(
       index_js_2.Box,
-      { as: 'span', className: 'iui-workflow-diagram-content' },
+      {
+        as: 'span',
+        ...contentProps,
+        className: (0, classnames_1.default)(
+          'iui-workflow-diagram-content',
+          contentProps?.className,
+        ),
+      },
       title,
     ),
   );

package/cjs/core/Table/SubRowExpander.js

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

package/cjs/core/Table/Table.js

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

package/cjs/core/Table/TableCell.js

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

package/cjs/core/Table/TablePaginator.js

@@ -82,11 +82,9 @@ const TablePaginator = (props) => {
   const pageButton = React.useCallback(
     (index, tabIndex = index === focusedIndex ? 0 : -1) =>
       React.createElement(
-        index_js_4.Box,
+        index_js_4.ButtonBase,
         {
-          as: 'button',
           key: index,
-          type: 'button',
           className: (0, classnames_1.default)(
             'iui-table-paginator-page-button',
             {

package/cjs/core/Tabs/Tab.js

@@ -28,9 +28,8 @@ exports.Tab = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   return React.createElement(
-    index_js_1.Box,
+    index_js_1.ButtonBase,
     {
-      as: 'button',
       className: (0, classnames_1.default)(
         'iui-tab',
         { 'iui-active': active },

package/cjs/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/cjs/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/cjs/core/ThemeProvider/ThemeProvider.js

@@ -7,14 +7,17 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
+const ReactDOM = tslib_1.__importStar(require('react-dom'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
 const ThemeContext_js_1 = require('./ThemeContext.js');
 const Toaster_js_1 = require('../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.
@@ -37,18 +40,22 @@ const Toaster_js_1 = require('../Toast/Toaster.js');
  *  <App />
  * </ThemeProvider>
  */
-exports.ThemeProvider = React.forwardRef((props, ref) => {
-  const { theme: themeProp, children, themeOptions, ...rest } = props;
-  const portalContainerRef = React.useRef(null);
-  const parentContext = React.useContext(ThemeContext_js_1.ThemeContext);
-  const theme =
-    themeProp === 'inherit' ? parentContext?.theme ?? 'light' : themeProp;
-  const shouldApplyBackground =
-    themeOptions?.applyBackground ??
-    (themeProp === 'inherit' ? false : !parentContext);
+exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
+  const {
+    theme: themeProp = 'inherit',
+    children,
+    themeOptions,
+    portalContainer: portalContainerProp,
+    ...rest
+  } = props;
+  const [portalContainer, setPortalContainer] = (0,
+  index_js_1.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_js_1.ThemeContext.Provider,
@@ -59,23 +66,29 @@ exports.ThemeProvider = React.forwardRef((props, ref) => {
         theme: theme,
         shouldApplyBackground: shouldApplyBackground,
         themeOptions: themeOptions,
-        ref: ref,
+        ref: (0, index_js_1.useMergedRefs)(forwardedRef, rootRef),
         ...rest,
       },
       React.createElement(
         Toaster_js_1.ToastProvider,
         null,
         children,
-        React.createElement(
-          'div',
-          { ref: portalContainerRef },
-          React.createElement(Toaster_js_1.Toaster, null),
-        ),
+        portalContainerProp
+          ? ReactDOM.createPortal(
+              React.createElement(Toaster_js_1.Toaster, null),
+              portalContainerProp,
+            )
+          : React.createElement(
+              'div',
+              { ref: setPortalContainer },
+              React.createElement(Toaster_js_1.Toaster, null),
+            ),
       ),
     ),
   );
 });
 exports.default = exports.ThemeProvider;
+// ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {
   const {
     theme,
@@ -85,8 +98,6 @@ const Root = React.forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
-  const ref = React.useRef(null);
-  const mergedRefs = (0, index_js_1.useMergedRefs)(ref, forwardedRef);
   const prefersDark = (0, index_js_1.useMediaQuery)(
     '(prefers-color-scheme: dark)',
   );
@@ -105,9 +116,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_js_1.ThemeContext);
+  const rootRef = React.useRef(null);
+  const [parentThemeState, setParentTheme] = React.useState(
+    parentContext?.theme,
+  );
+  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    setParentTheme(
+      (old) =>
+        old ||
+        rootRef.current?.parentElement
+          ?.closest('[data-iui-theme]')
+          ?.getAttribute('data-iui-theme'),
+    );
+  }, []);
+  return [parentContext?.theme ?? parentThemeState, rootRef];
+};

package/cjs/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/cjs/core/Toast/Toast.js

@@ -48,9 +48,9 @@ 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') {
@@ -194,13 +194,8 @@ const ToastPresentation = (props) => {
     React.createElement(index_js_1.Box, { className: 'iui-message' }, content),
     link &&
       React.createElement(
-        index_js_1.Box,
-        {
-          as: 'button',
-          className: 'iui-toast-anchor',
-          ...link,
-          title: undefined,
-        },
+        index_js_1.ButtonBase,
+        { className: 'iui-toast-anchor', ...link, title: undefined },
         link.title,
       ),
     (type === 'persisting' || hasCloseButton) &&

package/cjs/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/cjs/core/Tooltip/Tooltip.js

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

package/cjs/core/Tree/TreeNode.js

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

package/cjs/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/cjs/core/utils/components/ButtonBase.js

@@ -0,0 +1,46 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.ButtonBase = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const Box_js_1 = require('./Box.js');
+const useIsClient_js_1 = require('../hooks/useIsClient.js');
+exports.ButtonBase = React.forwardRef((props, forwardedRef) => {
+  const {
+    as: asProp = 'button',
+    disabled: disabledProp,
+    htmlDisabled,
+    ...rest
+  } = props;
+  const isClient = (0, useIsClient_js_1.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_js_1.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: (0, classnames_1.default)('iui-button-base', props.className),
+    onClick: handleIfEnabled(props.onClick),
+    onPointerDown: handleIfEnabled(props.onPointerDown),
+    onPointerUp: handleIfEnabled(props.onPointerUp),
+  });
+});
+exports.ButtonBase.displayName = 'ButtonBase';

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

@@ -40,8 +40,7 @@ exports.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,
@@ -66,7 +65,10 @@ exports.Popover = React.forwardRef((props, ref) => {
       ...props.popperOptions,
       modifiers: [
         { name: 'flip' },
-        { name: 'preventOverflow', options: { padding: 0 } },
+        {
+          name: 'preventOverflow',
+          options: { padding: 0 },
+        },
         ...(props.popperOptions?.modifiers || []),
       ],
     },

package/cjs/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) => {
@@ -350,13 +350,13 @@ 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/cjs/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/cjs/core/utils/components/index.js

@@ -20,3 +20,4 @@ tslib_1.__exportStar(require('./Divider.js'), exports);
 tslib_1.__exportStar(require('./LinkAction.js'), exports);
 tslib_1.__exportStar(require('./AutoclearingHiddenLiveRegion.js'), exports);
 tslib_1.__exportStar(require('./Box.js'), exports);
+tslib_1.__exportStar(require('./ButtonBase.js'), exports);

package/cjs/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/cjs/core/utils/functions/colors.js

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

package/cjs/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/cjs/core/utils/hooks/index.js

@@ -18,3 +18,4 @@ tslib_1.__exportStar(require('./useLatestRef.js'), exports);
 tslib_1.__exportStar(require('./useIsomorphicLayoutEffect.js'), exports);
 tslib_1.__exportStar(require('./useIsClient.js'), exports);
 tslib_1.__exportStar(require('./useId.js'), exports);
+tslib_1.__exportStar(require('./useUncontrolledState.js'), exports);