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

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/Resizer.js

@@ -37,7 +37,10 @@ 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,
     );
@@ -105,6 +108,8 @@ 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': {
@@ -112,12 +117,14 @@ 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': {
@@ -138,6 +145,7 @@ 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;
@@ -172,8 +180,8 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        top: -4,
-        left: -4,
+        top: 0,
+        left: 0,
         width: 12,
         height: 12,
         cursor: 'nw-resize',
@@ -184,7 +192,7 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        top: -4,
+        top: 0,
         left: 8,
         right: 8,
         height: 8,
@@ -196,8 +204,8 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        top: -4,
-        right: -4,
+        top: 0,
+        right: 0,
         width: 12,
         height: 12,
         cursor: 'ne-resize',
@@ -209,7 +217,7 @@ const Resizer = (props) => {
       style: {
         position: 'absolute',
         top: 8,
-        right: -4,
+        right: 0,
         bottom: 8,
         width: 8,
         cursor: 'e-resize',
@@ -220,8 +228,8 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        bottom: -4,
-        right: -4,
+        bottom: 0,
+        right: 0,
         width: 12,
         height: 12,
         cursor: 'se-resize',
@@ -232,7 +240,7 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        bottom: -4,
+        bottom: 0,
         left: 8,
         right: 8,
         height: 8,
@@ -244,8 +252,8 @@ const Resizer = (props) => {
       onPointerDown: onResizePointerDown,
       style: {
         position: 'absolute',
-        bottom: -4,
-        left: -4,
+        bottom: 0,
+        left: 0,
         width: 12,
         height: 12,
         cursor: 'sw-resize',
@@ -257,7 +265,7 @@ const Resizer = (props) => {
       style: {
         position: 'absolute',
         top: 8,
-        left: -4,
+        left: 0,
         bottom: 8,
         width: 8,
         cursor: 'w-resize',

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);

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

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

package/cjs/styles.js

@@ -11,13 +11,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',
@@ -108,6 +101,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',
@@ -117,7 +111,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',
@@ -243,13 +236,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',
@@ -439,6 +431,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,