@itwin/itwinui-react 3.10.0 → 3.11.0

package/esm/core/SideNavigation/SideNavigation.js

@@ -4,9 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { WithCSSTransition, SvgChevronRight, Box } from '../../utils/index.js';
+import { WithCSSTransition, SvgChevronRight, Box, useControlledState, } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
-import { Tooltip } from '../Tooltip/Tooltip.js';
+// ----------------------------------------------------------------------------
+export const SidenavExpandedContext = React.createContext(undefined);
 /**
  * Left side navigation menu component.
  * @example
@@ -22,25 +23,23 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
  * />
  */
 export const SideNavigation = React.forwardRef((props, forwardedRef) => {
-    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
-    const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
-    React.useEffect(() => {
-        _setIsExpanded(isExpanded);
-    }, [isExpanded]);
-    const ExpandButton = (React.createElement(IconButton, { label: 'Toggle icon labels', "aria-expanded": _isExpanded, className: 'iui-sidenav-button iui-expand', size: 'small', onClick: React.useCallback(() => {
-            _setIsExpanded((expanded) => !expanded);
+    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded: isExpandedProp, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
+    const [isExpanded, setIsExpanded] = useControlledState(false, isExpandedProp);
+    const ExpandButton = (React.createElement(IconButton, { label: 'Toggle icon labels', "aria-expanded": isExpanded, className: 'iui-sidenav-button iui-expand', size: 'small', onClick: React.useCallback(() => {
+            setIsExpanded((expanded) => !expanded);
             onExpanderClick?.();
-        }, [onExpanderClick]) },
+        }, [onExpanderClick, setIsExpanded]) },
         React.createElement(SvgChevronRight, null)));
-    return (React.createElement(Box, { ...wrapperProps, className: cx('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
-        React.createElement(Box, { as: 'div', className: cx('iui-side-navigation', {
-                'iui-expanded': _isExpanded,
-                'iui-collapsed': !_isExpanded,
-            }, className), ...rest },
-            expanderPlacement === 'top' && ExpandButton,
-            React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-sidenav-content', contentProps?.className) },
-                React.createElement(Box, { as: 'div', ...topProps, className: cx('iui-top', topProps?.className) }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement(Box, { as: 'div', ...bottomProps, className: cx('iui-bottom', bottomProps?.className) }, secondaryItems?.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
-            expanderPlacement === 'bottom' && ExpandButton),
-        submenu && (React.createElement(WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
+    return (React.createElement(SidenavExpandedContext.Provider, { value: isExpanded },
+        React.createElement(Box, { ...wrapperProps, className: cx('iui-side-navigation-wrapper', wrapperProps?.className), ref: forwardedRef },
+            React.createElement(Box, { as: 'div', className: cx('iui-side-navigation', {
+                    'iui-expanded': isExpanded,
+                    'iui-collapsed': !isExpanded,
+                }, className), ...rest },
+                expanderPlacement === 'top' && ExpandButton,
+                React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-sidenav-content', contentProps?.className) },
+                    React.createElement(Box, { as: 'div', ...topProps, className: cx('iui-top', topProps?.className) }, items),
+                    React.createElement(Box, { as: 'div', ...bottomProps, className: cx('iui-bottom', bottomProps?.className) }, secondaryItems)),
+                expanderPlacement === 'bottom' && ExpandButton),
+            submenu && (React.createElement(WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu)))));
 });

package/esm/core/SideNavigation/SidenavButton.js

@@ -5,11 +5,15 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Button } from '../Buttons/Button.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { SidenavExpandedContext } from './SideNavigation.js';
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
 export const SidenavButton = React.forwardRef((props, ref) => {
     const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    return (React.createElement(Button, { className: cx('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    const isExpanded = React.useContext(SidenavExpandedContext) === true;
+    const sidenavButton = (React.createElement(Button, { className: cx('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    return !isExpanded ? (React.createElement(Tooltip, { content: children, placement: 'right', ariaStrategy: 'none' }, sidenavButton)) : (sidenavButton);
 });

package/esm/core/Surface/Surface.js

@@ -23,7 +23,7 @@ const getSurfaceElevationValue = (elevation) => {
         case 5:
             return 'var(--iui-shadow-5)';
         default:
-            return '';
+            return undefined;
     }
 };
 /** Returns correct border value based on prop */
@@ -34,7 +34,7 @@ const getBorderValue = (border) => {
     if (border === false) {
         return 'none';
     }
-    return '';
+    return undefined;
 };
 // ----------------------------------------------------------------------------
 // Surface.Header component

package/esm/core/Table/Table.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, ShadowRoot, LineClamp, useMergedRefs, } from '../../utils/index.js';
+import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, ShadowRoot, LineClamp, useMergedRefs, useLatestRef, } from '../../utils/index.js';
 import { TableColumnsContext, getCellStyle, getStickyStyle, getSubRowStyle, } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
@@ -81,13 +81,8 @@ export const Table = (props) => {
         minWidth: 0,
         width: 0,
     }), []);
-    // useRef prevents from rerendering when one of these callbacks changes
-    const onBottomReachedRef = React.useRef(onBottomReached);
-    const onRowInViewportRef = React.useRef(onRowInViewport);
-    React.useEffect(() => {
-        onBottomReachedRef.current = onBottomReached;
-        onRowInViewportRef.current = onRowInViewport;
-    }, [onBottomReached, onRowInViewport]);
+    const onBottomReachedRef = useLatestRef(onBottomReached);
+    const onRowInViewportRef = useLatestRef(onRowInViewport);
     const hasManualSelectionColumn = React.useMemo(() => {
         const flatColumns = flattenColumns(columns);
         return flatColumns.some((column) => column.id === SELECTION_CELL_ID);
@@ -357,6 +352,8 @@ export const Table = (props) => {
         enableVirtualization,
         tableRowRef,
         density,
+        onBottomReachedRef,
+        onRowInViewportRef,
     ]);
     const virtualizedItemRenderer = React.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
     const updateStickyState = () => {

package/esm/core/Tabs/Tabs.d.ts

@@ -269,7 +269,7 @@ export declare const Tabs: PolymorphicForwardRefComponent<"div", TabsLegacyProps
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        fill?: "default" | import("../../utils/types.js").AnyString | "informational" | "negative" | "positive" | "warning" | undefined;
+        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;

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

@@ -249,7 +249,7 @@ 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" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -262,6 +262,14 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
                 ancestorScroll?: boolean | undefined;
                 ancestorResize?: boolean | undefined;
                 elementResize?: boolean | undefined;
+                /**
+                 * Flag whether the tile is disabled.
+                 *
+                 * Note: This only affects the tile. You need to manually disable
+                 * the buttons and other interactive elements inside the tile.
+                 *
+                 * @default false
+                 */
                 animationFrame?: boolean | undefined;
                 layoutShift?: boolean | undefined;
             } | undefined;
@@ -288,6 +296,14 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
                 ancestorScroll?: boolean | undefined;
                 ancestorResize?: boolean | undefined;
                 elementResize?: boolean | undefined;
+                /**
+                 * Flag whether the tile is disabled.
+                 *
+                 * Note: This only affects the tile. You need to manually disable
+                 * the buttons and other interactive elements inside the tile.
+                 *
+                 * @default false
+                 */
                 animationFrame?: boolean | undefined;
                 layoutShift?: boolean | undefined;
             } | undefined;

package/esm/core/Tooltip/Tooltip.js

@@ -6,10 +6,22 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useInteractions, safePolygon, size, autoPlacement, hide, inline, useDelayGroupContext, useDelayGroup, } from '@floating-ui/react';
 import { Box, Portal, cloneElementWithRef, useControlledState, useId, useMergedRefs, } from '../../utils/index.js';
+// ----------------------------------------------------------------------------
 const useTooltip = (options = {}) => {
     const uniqueId = useId();
     const { placement = 'top', visible, onVisibleChange, middleware = { flip: true, shift: true }, autoUpdateOptions = {}, reference, ariaStrategy = 'description', id = uniqueId, ...props } = options;
     const [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
+    const syncWithControlledState = React.useCallback((element) => {
+        // Using a microtask ensures that the popover is mounted before calling togglePopover
+        queueMicrotask(() => {
+            try {
+                element?.togglePopover?.(open);
+            }
+            catch {
+                // Fail silently, to avoid crashing the page
+            }
+        });
+    }, [open]);
     const floating = useFloating({
         placement,
         open,
@@ -92,19 +104,29 @@ const useTooltip = (options = {}) => {
     const getReferenceProps = React.useCallback((userProps) => {
         return interactions.getReferenceProps({ ...userProps, ...ariaProps });
     }, [interactions, ariaProps]);
-    const floatingProps = React.useMemo(() => interactions.getFloatingProps({
-        hidden: !open,
-        'aria-hidden': 'true',
-        ...props,
-        id,
+    const floatingProps = React.useMemo(() => ({
+        ...interactions.getFloatingProps({
+            hidden: !open,
+            'aria-hidden': 'true',
+            ...props,
+            id,
+        }),
+        popover: 'manual',
     }), [interactions, props, id, open]);
     return React.useMemo(() => ({
         getReferenceProps,
         floatingProps,
         ...floating,
+        refs: {
+            ...floating.refs,
+            setFloating: (element) => {
+                floating.refs.setFloating(element);
+                syncWithControlledState(element);
+            },
+        },
         // styles are not relevant when tooltip is not open
         floatingStyles: floating.context.open ? floating.floatingStyles : {},
-    }), [getReferenceProps, floatingProps, floating]);
+    }), [getReferenceProps, floatingProps, floating, syncWithControlledState]);
 };
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.

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

@@ -1,28 +1,53 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
+import { TreeNodeExpander } from './TreeNodeExpander.js';
 type TreeNodeProps = {
     /**
      * Unique id of the node.
      * It has to be compatible with HTML id attribute.
      */
     nodeId: string;
+    /**
+     * Props for treeNode
+     */
+    nodeProps?: React.ComponentProps<'div'>;
     /**
      * The main text displayed on the node.
      */
     label: React.ReactNode;
+    /**
+     * Props for TreeNode label(affects both the main and sub label).
+     */
+    labelProps?: React.ComponentProps<'div'>;
+    /**
+     * Props for the TreeNode's main label.
+     */
+    titleProps?: React.ComponentProps<'div'>;
     /**
      * Small note displayed below main label.
      */
     sublabel?: React.ReactNode;
+    /**
+     * Props for TreeNode sublabel
+     */
+    sublabelProps?: React.ComponentProps<'div'>;
     /**
      * Icon shown before label and sublabel content.
      */
     icon?: JSX.Element;
+    /**
+     * Props for TreeNode Icon
+     */
+    iconProps?: React.ComponentProps<'span'>;
     /**
      * Flag whether the node has child sub-nodes. It is used to show expander icon.
      * @default false
      */
     hasSubNodes?: boolean;
+    /**
+     * Props for subTree list(affects all subnodes of this node).
+     */
+    subTreeProps?: React.ComponentProps<'ul'>;
     /**
      * Flag whether the node is disabled.
      * @default false
@@ -54,10 +79,24 @@ type TreeNodeProps = {
      * Recommended to use `Checkbox` component.
      */
     checkbox?: React.ReactNode;
+    /**
+     * Props for TreeNode checkbox.
+     */
+    checkboxProps?: React.ComponentProps<'div'>;
     /**
      * Custom expander element. If `hasSubNodes` is false, it won't be shown.
      */
     expander?: React.ReactNode;
+    /**
+     * Props for the default TreeNodeExpander that is shown when there are sub nodes and no expander is given.
+     */
+    expanderProps?: React.ComponentProps<typeof TreeNodeExpander>;
+    /**
+     * Props for content of the TreeNode.
+     * This affects all passed in children of the node, as well as the label, sublabel, icon, and expander.
+     * Note that this does not affect the checkbox.
+     */
+    contentProps?: React.ComponentProps<'div'>;
     /**
      * Content shown after `TreeNode`.
      */

package/esm/core/Tree/TreeNode.js

@@ -27,7 +27,7 @@ import { useTreeContext } from './TreeContext.js';
   />
  */
 export const TreeNode = (props) => {
-    const { nodeId, label, sublabel, children, className, icon, hasSubNodes = false, isDisabled = false, isExpanded = false, isSelected = false, onSelected, onExpanded, checkbox, expander, ...rest } = props;
+    const { nodeId, nodeProps = {}, label, labelProps = {}, sublabel, sublabelProps = {}, children, className, icon, iconProps = {}, hasSubNodes = false, isDisabled = false, isExpanded = false, isSelected = false, onSelected, onExpanded, checkbox, checkboxProps = {}, subTreeProps = {}, contentProps = {}, titleProps = {}, expanderProps = {}, expander, ...rest } = props;
     const { nodeDepth, subNodeIds = [], parentNodeId, scrollToParent, groupSize, indexInGroup, } = useTreeContext();
     const [isFocused, setIsFocused] = React.useState(false);
     const nodeRef = React.useRef(null);
@@ -107,22 +107,22 @@ export const TreeNode = (props) => {
         }, onBlur: () => {
             setIsFocused(false);
         }, ref: nodeRef, onKeyDown: onKeyDown, ...rest },
-        React.createElement(Box, { className: cx('iui-tree-node', {
+        React.createElement(Box, { as: 'div', style: { '--level': nodeDepth }, onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected), ...nodeProps, className: cx('iui-tree-node', {
                 'iui-active': isSelected,
                 'iui-disabled': isDisabled,
-            }), style: { '--level': nodeDepth }, onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected) },
-            checkbox && (React.createElement(Box, { className: 'iui-tree-node-checkbox' }, React.isValidElement(checkbox)
+            }, nodeProps?.className) },
+            checkbox && (React.createElement(Box, { as: 'div', ...checkboxProps, className: cx('iui-tree-node-checkbox', checkboxProps?.className) }, React.isValidElement(checkbox)
                 ? React.cloneElement(checkbox, {
                     tabIndex: isFocused ? 0 : -1,
                 })
                 : checkbox)),
-            React.createElement(Box, { className: 'iui-tree-node-content' },
+            React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-tree-node-content', contentProps?.className) },
                 hasSubNodes && expander,
-                hasSubNodes && !expander && (React.createElement(TreeNodeExpander, { isExpanded: isExpanded, disabled: isDisabled, onClick: onExpanderClick, tabIndex: isFocused ? 0 : -1 })),
-                icon && (React.createElement(Box, { as: 'span', className: 'iui-tree-node-content-icon', "aria-hidden": true }, icon)),
-                React.createElement(Box, { className: 'iui-tree-node-content-label' },
-                    React.createElement(Box, { className: 'iui-tree-node-content-title' }, label),
-                    sublabel && (React.createElement(Box, { className: 'iui-tree-node-content-caption' }, sublabel))),
+                hasSubNodes && !expander && (React.createElement(TreeNodeExpander, { isExpanded: isExpanded, disabled: isDisabled, onClick: onExpanderClick, tabIndex: isFocused ? 0 : -1, ...expanderProps })),
+                icon && (React.createElement(Box, { as: 'span', "aria-hidden": true, ...iconProps, className: cx('iui-tree-node-content-icon', iconProps?.className) }, icon)),
+                React.createElement(Box, { as: 'div', ...labelProps, className: cx('iui-tree-node-content-label', labelProps?.className) },
+                    React.createElement(Box, { as: 'div', ...titleProps, className: cx('iui-tree-node-content-title', titleProps?.className) }, label),
+                    sublabel && (React.createElement(Box, { as: 'div', ...sublabelProps, className: cx('iui-tree-node-content-caption', sublabelProps?.className) }, sublabel))),
                 children)),
-        hasSubNodes && (React.createElement(Box, { as: 'ul', className: 'iui-sub-tree', role: 'group', "aria-owns": subNodeIds.join(' ') }))));
+        hasSubNodes && (React.createElement(Box, { as: 'ul', role: 'group', "aria-owns": subNodeIds.join(' '), ...subTreeProps, className: cx('iui-sub-tree', subTreeProps?.className) }))));
 };

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

@@ -1,7 +1,9 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import type { IconButtonProps } from '../Buttons/IconButton.js';
 type TreeNodeExpanderProps = {
     isExpanded?: boolean;
+    expanderIconProps?: React.ComponentProps<'svg'>;
 } & IconButtonProps;
 export declare const TreeNodeExpander: PolymorphicForwardRefComponent<"button", TreeNodeExpanderProps>;
 export {};

package/esm/core/Tree/TreeNodeExpander.js

@@ -8,11 +8,11 @@ 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 { isExpanded, expanderIconProps = {}, ...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(ChevronIcon, { className: cx('iui-tree-node-content-expander-icon', {
+        React.createElement(ChevronIcon, { ...expanderIconProps, className: cx('iui-tree-node-content-expander-icon', expanderIconProps?.className, {
                 'iui-tree-node-content-expander-icon-expanded': isExpanded,
             }) })));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",