@itwin/itwinui-react 3.0.11 → 3.1.0

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, Box, useIsomorphicLayoutEffect, useControlledState, } from '../utils/index.js';
+import { useMediaQuery, useMergedRefs, Box, useIsomorphicLayoutEffect, useControlledState, useLatestRef, } from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 /**
@@ -38,27 +38,26 @@ import { ToastProvider, Toaster } from '../Toast/Toaster.js';
  */
 export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     const { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, ...rest } = props;
-    const [parentTheme, rootRef, parentContext] = useParentTheme();
-    const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
+    const [rootElement, setRootElement] = React.useState(null);
+    const parent = useParentThemeAndContext(rootElement);
+    const theme = themeProp === 'inherit' ? parent.theme || 'light' : themeProp;
     // default apply background only for topmost ThemeProvider
-    themeOptions.applyBackground ?? (themeOptions.applyBackground = !parentTheme);
+    themeOptions.applyBackground ?? (themeOptions.applyBackground = !parent.theme);
     // default inherit highContrast option from parent if also inheriting base theme
-    themeOptions.highContrast ?? (themeOptions.highContrast = themeProp === 'inherit'
-        ? parentContext?.themeOptions?.highContrast
-        : undefined);
+    themeOptions.highContrast ?? (themeOptions.highContrast = themeProp === 'inherit' ? parent.highContrast : undefined);
     /**
      * We will portal our portal container into `portalContainer` prop (if specified),
      * or inherit `portalContainer` from context (if also inheriting theme).
      */
     const portaledPortalContainer = portalContainerProp ||
-        (themeProp === 'inherit' ? parentContext?.portalContainer : undefined);
+        (themeProp === 'inherit' ? parent.context?.portalContainer : undefined);
     const [portalContainer, setPortalContainer] = useControlledState(null, portaledPortalContainer);
     const contextValue = React.useMemo(() => ({ theme, themeOptions, portalContainer }), 
     // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [theme, JSON.stringify(themeOptions), portalContainer]);
     return (React.createElement(ThemeContext.Provider, { value: contextValue },
-        React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: useMergedRefs(forwardedRef, rootRef), ...rest },
+        React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: useMergedRefs(forwardedRef, setRootElement), ...rest },
             React.createElement(ToastProvider, null,
                 children,
                 portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
@@ -77,22 +76,46 @@ const Root = React.forwardRef((props, forwardedRef) => {
 });
 // ----------------------------------------------------------------------------
 /**
- * Returns theme from either parent context or by reading the closest
+ * Returns theme information from either parent ThemeContext or by reading the closest
  * data-iui-theme attribute if context is not found.
+ *
+ * Also returns the ThemeContext itself (if found).
  */
-const useParentTheme = () => {
+const useParentThemeAndContext = (rootElement) => {
     const parentContext = React.useContext(ThemeContext);
-    const rootRef = React.useRef(null);
     const [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
+    const [parentHighContrastState, setParentHighContrastState] = React.useState(parentContext?.themeOptions?.highContrast);
+    const parentThemeRef = useLatestRef(parentContext?.theme);
     useIsomorphicLayoutEffect(() => {
-        setParentTheme((old) => old ||
-            rootRef.current?.parentElement
-                ?.closest('[data-iui-theme]')
-                ?.getAttribute('data-iui-theme'));
-    }, []);
-    return [
-        parentContext?.theme ?? parentThemeState,
-        rootRef,
-        parentContext,
-    ];
+        // bail if we already have theme from context
+        if (parentThemeRef.current) {
+            return;
+        }
+        // find parent theme from closest data-iui-theme attribute
+        const closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
+        if (!closestRoot) {
+            return;
+        }
+        // helper function that updates state to match data attributes from closest root
+        const synchronizeTheme = () => {
+            setParentTheme(closestRoot?.getAttribute('data-iui-theme'));
+            setParentHighContrastState(closestRoot?.getAttribute('data-iui-contrast') === 'high');
+        };
+        // set theme for initial mount
+        synchronizeTheme();
+        // use mutation observers to listen to future updates to data attributes
+        const observer = new MutationObserver(() => synchronizeTheme());
+        observer.observe(closestRoot, {
+            attributes: true,
+            attributeFilter: ['data-iui-theme', 'data-iui-contrast'],
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [rootElement, parentThemeRef]);
+    return {
+        theme: parentContext?.theme ?? parentThemeState,
+        highContrast: parentContext?.themeOptions?.highContrast ?? parentHighContrastState,
+        context: parentContext,
+    };
 };

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

@@ -249,9 +249,69 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      */
     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" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
+        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        }, "as" | "children" | "content" | "portal" | keyof {
+            placement?: import("@floating-ui/utils").Placement | undefined;
+            visible?: boolean | undefined;
+            onVisibleChange?: ((visible: boolean) => void) | undefined;
+            autoUpdateOptions?: {
+                ancestorScroll?: boolean | undefined;
+                ancestorResize?: boolean | undefined;
+                elementResize?: boolean | undefined;
+                animationFrame?: boolean | undefined;
+                layoutShift?: boolean | undefined;
+            } | undefined;
+            middleware?: {
+                offset?: number | undefined;
+                flip?: boolean | undefined;
+                shift?: boolean | undefined;
+                size?: boolean | undefined;
+                autoPlacement?: boolean | undefined;
+                hide?: boolean | undefined;
+                inline?: boolean | undefined;
+            } | undefined;
+            reference?: HTMLElement | null | undefined;
+            ariaStrategy?: "label" | "description" | "none" | undefined; /**
+             * Default tile variant or the folder layout.
+             * @default 'default'
+             */
+            id?: string | undefined;
+        }> & {
+            content: React.ReactNode;
+            children?: React.ReactNode;
+        } & import("../utils/index.js").PortalProps & {
+            placement?: import("@floating-ui/utils").Placement | undefined;
+            visible?: boolean | undefined;
+            onVisibleChange?: ((visible: boolean) => void) | undefined;
+            autoUpdateOptions?: {
+                ancestorScroll?: boolean | undefined;
+                ancestorResize?: boolean | undefined;
+                elementResize?: boolean | undefined;
+                animationFrame?: boolean | undefined;
+                layoutShift?: boolean | undefined;
+            } | undefined;
+            middleware?: {
+                offset?: number | undefined;
+                flip?: boolean | undefined;
+                shift?: boolean | undefined;
+                size?: boolean | undefined;
+                autoPlacement?: boolean | undefined;
+                hide?: boolean | undefined;
+                inline?: boolean | undefined;
+            } | undefined;
+            reference?: HTMLElement | null | undefined;
+            ariaStrategy?: "label" | "description" | "none" | undefined; /**
+             * Default tile variant or the folder layout.
+             * @default 'default'
+             */
+            id?: string | undefined;
+        } & {
+            as?: "div" | undefined;
+        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;

package/esm/core/Tooltip/Tooltip.js

@@ -57,8 +57,12 @@ const useTooltip = (options = {}) => {
             ...interactions.getReferenceProps(),
         }).forEach(([key, value]) => {
             if (typeof value === 'function') {
-                reference.addEventListener(domEventName(key), value);
-                cleanupValues[key] = value;
+                // manually add `.nativeEvent` (react concept) because floating-ui needs it
+                const patchedHandler = (event) => {
+                    value({ ...event, nativeEvent: event });
+                };
+                reference.addEventListener(domEventName(key), patchedHandler);
+                cleanupValues[key] = patchedHandler;
             }
             else if (value) {
                 cleanupValues[key] = reference.getAttribute(key);

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

@@ -33,6 +33,12 @@ export type NodeData<T> = {
 };
 export type NodeRenderProps<T> = Omit<NodeData<T>, 'subNodes'>;
 export type TreeProps<T> = {
+    /**
+     * Modify size of the tree.
+     *
+     * @default 'default'
+     */
+    size?: 'default' | 'small';
     /**
      * Render function that should return the node element.
      * Recommended to use `TreeNode` component.

package/esm/core/Tree/Tree.js

@@ -57,7 +57,7 @@ import { TreeContext } from './TreeContext.js';
   />
  */
 export const Tree = (props) => {
-    const { data, className, nodeRenderer, getNode, enableVirtualization = false, style, ...rest } = props;
+    const { data, className, nodeRenderer, getNode, size = 'default', enableVirtualization = false, style, ...rest } = props;
     const treeRef = React.useRef(null);
     const focusedIndex = React.useRef(0);
     React.useEffect(() => {
@@ -142,8 +142,9 @@ export const Tree = (props) => {
                         setScrollToIndex(parentNodeIndex);
                     }
                     : undefined,
+                size,
             } }, nodeRenderer(node.nodeProps)));
-    }, [firstLevelNodesList.length, flatNodesList, nodeRenderer]);
+    }, [firstLevelNodesList.length, flatNodesList, nodeRenderer, size]);
     const [scrollToIndex, setScrollToIndex] = React.useState();
     const flatNodesListRef = React.useRef(flatNodesList);
     React.useEffect(() => {
@@ -171,7 +172,7 @@ export const Tree = (props) => {
             items[focusedIndex.current]?.focus();
         }
     };
-    return (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualizedTree, { flatNodesList: flatNodesList, itemRenderer: itemRenderer, scrollToIndex: scrollToIndex, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: treeRef, className: className, style: style, ...rest })) : (React.createElement(TreeElement, { onKeyDown: handleKeyDown, onFocus: handleFocus, className: className, style: style, ref: treeRef, ...rest }, flatNodesList.map((_, i) => itemRenderer(i))))));
+    return (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualizedTree, { flatNodesList: flatNodesList, itemRenderer: itemRenderer, scrollToIndex: scrollToIndex, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: treeRef, className: className, style: style, ...rest })) : (React.createElement(TreeElement, { onKeyDown: handleKeyDown, onFocus: handleFocus, className: className, "data-iui-size": size === 'small' ? 'small' : undefined, style: style, ref: treeRef, ...rest }, flatNodesList.map((_, i) => itemRenderer(i))))));
 };
 const TreeElement = polymorphic.ul('iui-tree', {
     role: 'tree',

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

@@ -24,6 +24,10 @@ export type TreeContextProps = {
      * Function that scrolls to the node's parent node.
      */
     scrollToParent?: () => void;
+    /**
+     * Size of the tree.
+     */
+    size?: 'default' | 'small';
 };
 export declare const TreeContext: React.Context<TreeContextProps | undefined>;
 export declare const useTreeContext: () => TreeContextProps;

package/esm/core/Tree/TreeNodeExpander.js

@@ -4,12 +4,15 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { SvgChevronRight } from '../utils/index.js';
+import { SvgChevronRight, SvgChevronRightSmall } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
+import { TreeContext } from './TreeContext.js';
 export const TreeNodeExpander = React.forwardRef((props, ref) => {
     const { isExpanded, ...rest } = props;
+    const size = React.useContext(TreeContext)?.size ?? 'default';
+    const ChevronIcon = size === 'small' ? SvgChevronRightSmall : SvgChevronRight;
     return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand', ref: ref, ...rest },
-        React.createElement(SvgChevronRight, { className: cx('iui-tree-node-content-expander-icon', {
+        React.createElement(ChevronIcon, { className: cx('iui-tree-node-content-expander-icon', {
                 'iui-tree-node-content-expander-icon-expanded': isExpanded,
             }) })));
 });

package/esm/core/utils/icons/SvgChevronRightSmall.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SvgChevronRightSmall: (props: React.ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;

package/esm/core/utils/icons/SvgChevronRightSmall.js

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Svg } from './Svg.js';
+export const SvgChevronRightSmall = (props) => {
+    return (React.createElement(Svg, { ...props },
+        React.createElement("path", { d: 'm5.525 2-1.05 1.05L9.425 8l-4.95 4.95L5.525 14l6-6-6-6Z' })));
+};

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

@@ -7,6 +7,7 @@ export * from './SvgClose.js';
 export * from './SvgCloseSmall.js';
 export * from './SvgChevronLeft.js';
 export * from './SvgChevronRight.js';
+export * from './SvgChevronRightSmall.js';
 export * from './SvgChevronLeftDouble.js';
 export * from './SvgChevronRightDouble.js';
 export * from './SvgCaretUpSmall.js';

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

@@ -11,6 +11,7 @@ export * from './SvgClose.js';
 export * from './SvgCloseSmall.js';
 export * from './SvgChevronLeft.js';
 export * from './SvgChevronRight.js';
+export * from './SvgChevronRightSmall.js';
 export * from './SvgChevronLeftDouble.js';
 export * from './SvgChevronRightDouble.js';
 export * from './SvgCaretUpSmall.js';

package/esm/styles.js

@@ -207,9 +207,9 @@ const styles = {
   "iui-overlay-exiting": "_iui3-overlay-exiting",
   closeAnimation,
   "iui-progress-indicator-radial": "_iui3-progress-indicator-radial",
-  "iui-uu9on85": "_iui3-uu9on85",
+  "iui-uj1wh1i": "_iui3-uj1wh1i",
   "iui-progress-indicator-linear-label": "_iui3-progress-indicator-linear-label",
-  "iui-uu9on8i": "_iui3-uu9on8i",
+  "iui-uj1wh1t": "_iui3-uj1wh1t",
   "iui-radio": "_iui3-radio",
   "iui-radio-tile": "_iui3-radio-tile",
   "iui-radio-tile-icon": "_iui3-radio-tile-icon",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.0.11",
+  "version": "3.1.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -76,14 +76,14 @@
     "dev:styles": "yarn build:styles --watch"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.25.4",
+    "@floating-ui/react": "^0.26.3",
     "classnames": "^2.3.2",
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.0.4",
+    "@itwin/itwinui-css": "^2.1.0",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "@itwin/itwinui-variables": "3.0.0",
     "@swc/cli": "^0.1.62",
@@ -111,7 +111,7 @@
     "ts-jest": "^29.0.0",
     "ts-node": "^10.0.0",
     "typescript": "~5.1.6",
-    "vite": "^4.3.8"
+    "vite": "^4.5.1"
   },
   "peerDependencies": {
     "@itwin/itwinui-illustrations-react": "^2.1.0",