@itwin/itwinui-react 3.10.1 → 3.11.1

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.1",
+  "version": "3.11.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -19,6 +19,12 @@
       }
     },
     "./react-table": {
+      "import": {
+        "types": "./esm/react-table/react-table.d.ts"
+      },
+      "require": {
+        "types": "./cjs/react-table/react-table.d.ts"
+      },
       "types": "./react-table.d.ts"
     },
     "./styles.css": "./styles.css",