@itwin/itwinui-react 5.0.0-alpha.13 → 5.0.0-alpha.14

package/dist/bricks/Text.d.ts

@@ -1,4 +1,4 @@
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface TextProps extends BaseProps {
     /**
      * The typography variant to use.

package/dist/bricks/TextBox.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { type FocusableProps, type BaseProps } from "./~utils.js";
+import type { BaseProps, FocusableProps } from "./~utils.js";
 interface BaseInputProps extends FocusableProps<"input"> {
 }
 interface TextBoxInputProps extends Omit<BaseInputProps, "children" | "type"> {

package/dist/bricks/TextBox.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { Role } from "@ariakit/react/role";
 import { Focusable } from "@ariakit/react/focusable";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
+import * as React from "react";
+import { useFieldControlType } from "./Field.internal.js";
 import { Icon } from "./Icon.js";
-import { useMergedRefs } from "./~hooks.js";
+import { useEventHandlers, useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
-import { useFieldControlType } from "./Field.internal.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
     useFieldControlType("textlike");
@@ -70,14 +70,12 @@ const TextBoxRoot = forwardRef(
             ...props,
             "data-kiwi-disabled": disabled,
             className: cx("\u{1F95D}-text-box", props.className),
-            onPointerDown: (e) => {
-              props.onPointerDown?.(e);
-              if (e.defaultPrevented) return;
+            onPointerDown: useEventHandlers(props.onPointerDown, (e) => {
               if (disabled) return;
               if (e.target !== e.currentTarget) return;
               e.preventDefault();
               inputRef.current?.focus();
-            },
+            }),
             ref: forwardedRef
           }
         )

package/dist/bricks/Toolbar.d.ts

@@ -1,4 +1,5 @@
-import { type BaseProps } from "./~utils.js";
+import * as React from "react";
+import type { BaseProps } from "./~utils.js";
 interface ToolbarProps extends BaseProps {
     /** Must be set to `"solid"` for now. */
     variant: "solid";
@@ -17,7 +18,7 @@ interface ToolbarProps extends BaseProps {
  * </Toolbar.Group>
  * ```
  */
-declare const ToolbarGroup: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 interface ToolbarItemProps extends Omit<BaseProps<"button">, "render">, Required<Pick<BaseProps, "render">> {
 }
 /**
@@ -31,5 +32,5 @@ interface ToolbarItemProps extends Omit<BaseProps<"button">, "render">, Required
  * />
  * ```
  */
-declare const ToolbarItem: import("react").ForwardRefExoticComponent<ToolbarItemProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+declare const ToolbarItem: React.ForwardRefExoticComponent<ToolbarItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
 export { ToolbarGroup as Group, ToolbarItem as Item };

package/dist/bricks/Toolbar.js

@@ -1,16 +1,18 @@
 import { jsx } from "react/jsx-runtime";
-import cx from "classnames";
 import * as Toolbar from "@ariakit/react/toolbar";
+import cx from "classnames";
+import * as React from "react";
+import { IconButtonContext } from "./IconButton.internal.js";
 import { forwardRef } from "./~utils.js";
 const ToolbarGroup = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(IconButtonContext, { value: React.useMemo(() => ({ iconSize: "large" }), []), children: /* @__PURE__ */ jsx(
     Toolbar.Toolbar,
     {
       ...props,
       className: cx("\u{1F95D}-toolbar", props.className),
       ref: forwardedRef
     }
-  );
+  ) });
 });
 const ToolbarItem = forwardRef(
   (props, forwardedRef) => {

package/dist/bricks/Tooltip.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as AkTooltip from "@ariakit/react/tooltip";
-import { type FocusableProps } from "./~utils.js";
+import * as React from "react";
+import type { FocusableProps } from "./~utils.js";
 interface TooltipProps extends Omit<FocusableProps<"div">, "content">, Pick<AkTooltip.TooltipProps, "open" | "unmountOnHide">, Pick<AkTooltip.TooltipProviderProps, "defaultOpen" | "setOpen"> {
     /**
      * The content to be displayed inside the tooltip when the trigger element is hovered or focused.

package/dist/bricks/Tooltip.js

@@ -1,10 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import cx from "classnames";
-import * as AkTooltip from "@ariakit/react/tooltip";
 import { useStoreState } from "@ariakit/react/store";
-import { forwardRef } from "./~utils.js";
+import * as AkTooltip from "@ariakit/react/tooltip";
+import cx from "classnames";
+import * as React from "react";
 import { usePopoverApi } from "./~hooks.js";
+import { forwardRef } from "./~utils.js";
 const Tooltip = forwardRef(
   (props, forwardedRef) => {
     const generatedId = React.useId();

package/dist/bricks/Tree.d.ts

@@ -1,5 +1,5 @@
-import { type BaseProps } from "./~utils.js";
-import { Root as TreeItemRoot, Action as TreeItemAction } from "./TreeItem.js";
+import { Action as TreeItemAction, Root as TreeItemRoot } from "./TreeItem.js";
+import type { BaseProps } from "./~utils.js";
 interface TreeProps extends BaseProps {
 }
 /**

package/dist/bricks/Tree.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import cx from "classnames";
+import { Composite, useCompositeStore } from "@ariakit/react/composite";
 import { Role } from "@ariakit/react/role";
-import { useCompositeStore, Composite } from "@ariakit/react/composite";
+import cx from "classnames";
+import { Action as TreeItemAction, Root as TreeItemRoot } from "./TreeItem.js";
 import { forwardRef } from "./~utils.js";
-import { Root as TreeItemRoot, Action as TreeItemAction } from "./TreeItem.js";
 const Tree = forwardRef((props, forwardedRef) => {
   const composite = useCompositeStore({ orientation: "vertical" });
   return /* @__PURE__ */ jsx(

package/dist/bricks/TreeItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type BaseProps } from "./~utils.js";
-interface TreeItemRootProps extends Omit<BaseProps, "content" | "children"> {
+import type { BaseProps } from "./~utils.js";
+interface TreeItemProps extends Omit<BaseProps, "content" | "children"> {
     /** Specifies the nesting level of the tree item. Nesting levels start at 1. */
     "aria-level": number;
     /** Defines tree item position in the current level of tree items. Integer greater than or equal to 1. */
@@ -128,7 +128,7 @@ interface TreeItemRootProps extends Omit<BaseProps, "content" | "children"> {
  *
  * Secondary actions can be passed into the `actions` prop.
  */
-declare const TreeItemRoot: React.ForwardRefExoticComponent<TreeItemRootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+declare const TreeItem: React.NamedExoticComponent<TreeItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 interface TreeItemActionProps extends Omit<BaseProps<"button">, "children"> {
     /**
      * Label for the action.
@@ -179,5 +179,5 @@ interface TreeItemActionProps extends Omit<BaseProps<"button">, "children"> {
  * By default, the action appears only when the treeitem has hover/focus or an error. This behavior can
  * be overridden using the `visible` prop.
  */
-declare const TreeItemAction: React.ForwardRefExoticComponent<TreeItemActionProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-export { TreeItemRoot as Root, TreeItemAction as Action };
+declare const TreeItemAction: React.NamedExoticComponent<TreeItemActionProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { TreeItem as Root, TreeItemAction as Action };

package/dist/bricks/TreeItem.js

@@ -1,38 +1,54 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import cx from "classnames";
-import { Role } from "@ariakit/react/role";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CompositeItem } from "@ariakit/react/composite";
 import { PopoverProvider } from "@ariakit/react/popover";
-import {
-  CompositeItem
-} from "@ariakit/react/composite";
+import { Role } from "@ariakit/react/role";
 import { Toolbar, ToolbarItem } from "@ariakit/react/toolbar";
-import * as ListItem from "./~utils.ListItem.js";
-import { IconButton } from "./IconButton.js";
+import cx from "classnames";
+import * as React from "react";
 import * as DropdownMenu from "./DropdownMenu.js";
-import { ChevronDown, Icon, StatusWarning, MoreHorizontal } from "./Icon.js";
+import { ChevronDown, Icon, MoreHorizontal, StatusWarning } from "./Icon.js";
+import { IconButtonPresentation } from "./IconButton.internal.js";
+import { IconButton } from "./IconButton.js";
+import { useEventHandlers } from "./~hooks.js";
+import * as ListItem from "./~utils.ListItem.js";
 import { forwardRef } from "./~utils.js";
-import { useEventHandlers, useSafeContext } from "./~hooks.js";
-import { GhostAligner, useGhostAlignment } from "./~utils.GhostAligner.js";
-const TreeItemContext = React.createContext(void 0);
-const TreeItemRoot = forwardRef(
-  (props, forwardedRef) => {
+const TreeItemErrorContext = React.createContext(void 0);
+const TreeItemActionsContext = React.createContext(void 0);
+const TreeItemDecorationsContext = React.createContext(void 0);
+const TreeItemIconContext = React.createContext(void 0);
+const TreeItemDecorationIdContext = React.createContext(
+  void 0
+);
+const TreeItemLabelContext = React.createContext(void 0);
+const TreeItemLabelIdContext = React.createContext(
+  void 0
+);
+const TreeItemDescriptionContext = React.createContext(void 0);
+const TreeItemDescriptionIdContext = React.createContext(
+  void 0
+);
+const TreeItemInlineActionsContext = React.createContext(void 0);
+const TreeItemOverflowActionsContext = React.createContext(void 0);
+const TreeItemHasOverflowActionsContext = React.createContext(false);
+const TreeItem = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const { expanded, selected } = props;
     const {
-      "aria-level": level,
-      selected,
-      expanded,
-      icon: iconProp,
+      onSelectedChange,
+      onExpandedChange,
+      icon,
       unstable_decorations,
       label,
       description,
       actions,
-      error,
-      onSelectedChange,
-      onExpandedChange,
       onClick: onClickProp,
       onKeyDown: onKeyDownProp,
       ...rest
     } = props;
+    const onExpanderClick = useEventHandlers(() => {
+      if (expanded === void 0) return;
+      onExpandedChange?.(!expanded);
+    });
     const handleClick = (event) => {
       if (selected === void 0) return;
       event.stopPropagation();
@@ -48,49 +64,91 @@ const TreeItemRoot = forwardRef(
         onExpandedChange?.(event.key === "ArrowRight");
       }
     };
-    const labelId = React.useId();
-    const descriptionId = React.useId();
-    const decorationId = React.useId();
+    return /* @__PURE__ */ jsx(TreeItemRootProvider, { ...props, children: /* @__PURE__ */ jsx(
+      TreeItemRoot,
+      {
+        ...rest,
+        onClick: useEventHandlers(onClickProp, handleClick),
+        onKeyDown: useEventHandlers(onKeyDownProp, handleKeyDown),
+        ref: forwardedRef,
+        children: React.useMemo(
+          () => /* @__PURE__ */ jsx(
+            TreeItemNode,
+            {
+              onExpanderClick,
+              expanded,
+              selected
+            }
+          ),
+          [onExpanderClick, expanded, selected]
+        )
+      }
+    ) });
+  })
+);
+function TreeItemRootProvider(props) {
+  const {
+    actions,
+    label,
+    description,
+    icon: iconProp,
+    unstable_decorations: decorations,
+    error
+  } = props;
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+  const decorationId = React.useId();
+  const icon = error ? /* @__PURE__ */ jsx(StatusWarning, {}) : iconProp;
+  const hasDecoration = icon || decorations;
+  return /* @__PURE__ */ jsx(TreeItemErrorContext.Provider, { value: error, children: /* @__PURE__ */ jsx(TreeItemActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx(
+    TreeItemDecorationIdContext.Provider,
+    {
+      value: hasDecoration ? decorationId : void 0,
+      children: /* @__PURE__ */ jsx(TreeItemDecorationsContext.Provider, { value: decorations, children: /* @__PURE__ */ jsx(TreeItemIconContext.Provider, { value: icon, children: /* @__PURE__ */ jsx(TreeItemLabelIdContext.Provider, { value: labelId, children: /* @__PURE__ */ jsx(TreeItemLabelContext.Provider, { value: label, children: /* @__PURE__ */ jsx(TreeItemDescriptionContext.Provider, { value: description, children: /* @__PURE__ */ jsx(
+        TreeItemDescriptionIdContext.Provider,
+        {
+          value: description ? descriptionId : void 0,
+          children: props.children
+        }
+      ) }) }) }) }) })
+    }
+  ) }) });
+}
+const TreeItemRoot = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const {
+      style: styleProp,
+      "aria-level": level,
+      selected,
+      expanded,
+      ...rest
+    } = props;
+    const labelId = React.useContext(TreeItemLabelIdContext);
+    const decorationId = React.useContext(TreeItemDecorationIdContext);
+    const descriptionId = React.useContext(TreeItemDescriptionIdContext);
+    const error = React.useContext(TreeItemErrorContext);
     const errorId = typeof error === "string" ? error : void 0;
-    const icon = error ? /* @__PURE__ */ jsx(StatusWarning, {}) : iconProp;
     const describedBy = React.useMemo(() => {
-      const idRefs = [];
-      if (description) idRefs.push(descriptionId);
-      if (unstable_decorations || icon) idRefs.push(decorationId);
-      if (errorId) idRefs.push(errorId);
-      return idRefs.length > 0 ? idRefs.join(" ") : void 0;
-    }, [
-      unstable_decorations,
-      icon,
-      decorationId,
-      description,
-      descriptionId,
-      errorId
-    ]);
+      const ids = [];
+      if (descriptionId) ids.push(descriptionId);
+      if (decorationId) ids.push(decorationId);
+      if (errorId) ids.push(errorId);
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    }, [decorationId, descriptionId, errorId]);
+    const style = React.useMemo(
+      () => ({
+        ...styleProp,
+        "--\u{1F95D}tree-item-level": level
+      }),
+      [styleProp, level]
+    );
     return /* @__PURE__ */ jsx(
-      TreeItemContext.Provider,
+      CompositeItem,
       {
-        value: React.useMemo(
-          () => ({
-            level,
-            expanded,
-            selected,
-            error
-          }),
-          [level, expanded, selected, error]
-        ),
-        children: /* @__PURE__ */ jsx(
-          CompositeItem,
+        render: /* @__PURE__ */ jsx(
+          Role,
           {
-            render: /* @__PURE__ */ jsx(Role, { ...rest }),
-            onClick: useEventHandlers(
-              onClickProp,
-              handleClick
-            ),
-            onKeyDown: useEventHandlers(
-              onKeyDownProp,
-              handleKeyDown
-            ),
+            ...rest,
             role: "treeitem",
             "aria-expanded": expanded,
             "aria-selected": selected,
@@ -98,88 +156,112 @@ const TreeItemRoot = forwardRef(
             "aria-describedby": describedBy,
             "aria-level": level,
             className: cx("\u{1F95D}-tree-item", props.className),
-            ref: forwardedRef,
-            children: /* @__PURE__ */ jsxs(
-              ListItem.Root,
-              {
-                "data-kiwi-expanded": expanded,
-                "data-kiwi-selected": selected,
-                "data-kiwi-error": error ? true : void 0,
-                className: "\u{1F95D}-tree-item-node",
-                style: { "--\u{1F95D}tree-item-level": level },
-                role: void 0,
-                children: [
-                  /* @__PURE__ */ jsxs(ListItem.Decoration, { children: [
-                    /* @__PURE__ */ jsx(GhostAligner, { align: description ? "block" : void 0, children: /* @__PURE__ */ jsx(
-                      TreeItemExpander,
-                      {
-                        onClick: () => {
-                          if (expanded === void 0) return;
-                          onExpandedChange?.(!expanded);
-                        }
-                      }
-                    ) }),
-                    icon || unstable_decorations ? /* @__PURE__ */ jsx(
-                      Role,
-                      {
-                        className: "\u{1F95D}-tree-item-decoration",
-                        id: decorationId,
-                        render: React.isValidElement(icon) ? icon : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : void 0,
-                        children: !icon ? unstable_decorations : null
-                      }
-                    ) : null
-                  ] }),
-                  /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}-tree-item-content", children: label }),
-                  description ? /* @__PURE__ */ jsx(
-                    ListItem.Content,
-                    {
-                      id: descriptionId,
-                      className: "\u{1F95D}-tree-item-description",
-                      children: description
-                    }
-                  ) : void 0,
-                  /* @__PURE__ */ jsx(
-                    ListItem.Decoration,
-                    {
-                      render: /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
-                    }
-                  )
-                ]
-              }
-            )
+            style,
+            ref: forwardedRef
           }
-        )
+        ),
+        children: props.children
       }
     );
-  }
+  })
 );
-const TreeItemActions = forwardRef((props, forwardedRef) => {
-  const { children, ...rest } = props;
-  const actions = React.Children.toArray(children).filter(Boolean);
-  const { error } = useSafeContext(TreeItemContext);
-  const limit = error ? 2 : 3;
+const TreeItemNode = React.memo((props) => {
+  const { expanded, selected, onExpanderClick } = props;
+  const error = React.useContext(TreeItemErrorContext);
   return /* @__PURE__ */ jsxs(
-    Toolbar,
+    ListItem.Root,
     {
-      ...rest,
-      onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
-      onKeyDown: useEventHandlers(props.onKeyDown, (e) => e.stopPropagation()),
-      className: cx("\u{1F95D}-tree-item-actions-container", props.className),
-      focusLoop: false,
-      ref: forwardedRef,
+      "data-kiwi-expanded": expanded,
+      "data-kiwi-selected": selected,
+      "data-kiwi-error": error ? true : void 0,
+      className: "\u{1F95D}-tree-item-node",
+      role: void 0,
       children: [
-        actions.slice(0, limit - 1),
-        actions.length === limit ? actions[limit - 1] : null,
-        actions.length > limit ? /* @__PURE__ */ jsx(TreeItemActionsOverflowMenu, { children: actions.slice(limit - 1) }) : null
+        /* @__PURE__ */ jsx(TreeItemDecorations, { onExpanderClick }),
+        /* @__PURE__ */ jsx(TreeItemContent, {}),
+        /* @__PURE__ */ jsx(TreeItemDescription, {}),
+        /* @__PURE__ */ jsx(TreeItemActions, {})
       ]
     }
   );
 });
+const TreeItemDecorations = React.memo((props) => {
+  return /* @__PURE__ */ jsxs(ListItem.Decoration, { children: [
+    /* @__PURE__ */ jsx(TreeItemExpander, { onClick: props.onExpanderClick }),
+    /* @__PURE__ */ jsx(TreeItemDecoration, {})
+  ] });
+});
+function TreeItemDecoration() {
+  const decorationId = React.useContext(TreeItemDecorationIdContext);
+  const decorations = React.useContext(TreeItemDecorationsContext);
+  const icon = React.useContext(TreeItemIconContext);
+  return icon || decorations ? /* @__PURE__ */ jsx(
+    Role,
+    {
+      className: "\u{1F95D}-tree-item-decoration",
+      id: decorationId,
+      render: React.isValidElement(icon) ? icon : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : void 0,
+      children: !icon ? decorations : null
+    }
+  ) : null;
+}
+const TreeItemContent = React.memo(() => {
+  const labelId = React.useContext(TreeItemLabelIdContext);
+  const label = React.useContext(TreeItemLabelContext);
+  return /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}-tree-item-content", children: label });
+});
+const TreeItemDescription = React.memo(() => {
+  const description = React.useContext(TreeItemDescriptionContext);
+  const descriptionId = React.useContext(TreeItemDescriptionIdContext);
+  return description ? /* @__PURE__ */ jsx(ListItem.Content, { id: descriptionId, className: "\u{1F95D}-tree-item-description", children: description }) : void 0;
+});
+const TreeItemActions = React.memo(
+  forwardRef((props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(TreeItemActionsProvider, { children: /* @__PURE__ */ jsx(
+      ListItem.Decoration,
+      {
+        ...props,
+        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+        onKeyDown: useEventHandlers(
+          props.onKeyDown,
+          (e) => e.stopPropagation()
+        ),
+        className: cx("\u{1F95D}-tree-item-actions-container", props.className),
+        ref: forwardedRef,
+        render: /* @__PURE__ */ jsxs(Toolbar, { focusLoop: false, children: [
+          /* @__PURE__ */ jsx(TreeItemInlineActions, {}),
+          /* @__PURE__ */ jsx(TreeItemActionsOverflowMenu, {})
+        ] })
+      }
+    ) });
+  })
+);
+function TreeItemActionsProvider(props) {
+  const actionsProp = React.useContext(TreeItemActionsContext);
+  const error = React.useContext(TreeItemErrorContext);
+  const actionsLimit = error ? 2 : 3;
+  const { inline, overflow } = React.useMemo(() => {
+    const actions = React.Children.toArray(actionsProp).filter(Boolean);
+    const inline2 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      actions.slice(0, actionsLimit - 1),
+      actions.length === actionsLimit ? actions[actionsLimit - 1] : null
+    ] });
+    const overflow2 = actions.length > actionsLimit ? actions.slice(actionsLimit - 1) : void 0;
+    return { inline: inline2, overflow: overflow2 };
+  }, [actionsProp, actionsLimit]);
+  return /* @__PURE__ */ jsx(TreeItemInlineActionsContext.Provider, { value: inline, children: /* @__PURE__ */ jsx(TreeItemOverflowActionsContext.Provider, { value: overflow, children: /* @__PURE__ */ jsx(TreeItemHasOverflowActionsContext.Provider, { value: !!overflow, children: props.children }) }) });
+}
+function TreeItemInlineActions() {
+  const actions = React.useContext(TreeItemInlineActionsContext);
+  return actions;
+}
 const arrowKeys = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
 const TreeItemActionsOverflowMenuContext = React.createContext(false);
-function TreeItemActionsOverflowMenu({ children }) {
+function TreeItemActionsOverflowMenu() {
+  const overflow = React.useContext(TreeItemHasOverflowActionsContext);
   const [open, setOpen] = React.useState(false);
   const isArrowKeyPressed = React.useRef(false);
+  if (!overflow) return null;
   return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(
     DropdownMenu.Root,
     {
@@ -206,14 +288,18 @@ function TreeItemActionsOverflowMenu({ children }) {
             render: /* @__PURE__ */ jsx(TreeItemAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
           }
         ),
-        /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContext.Provider, { value: true, children: /* @__PURE__ */ jsx(DropdownMenu.Content, { children }) })
+        /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContext.Provider, { value: true, children: /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContent, {}) })
       ]
     }
   ) });
 }
-const TreeItemAction = forwardRef(
-  (props, forwardedRef) => {
-    const { error } = useSafeContext(TreeItemContext);
+function TreeItemActionsOverflowMenuContent() {
+  const actions = React.useContext(TreeItemOverflowActionsContext);
+  return /* @__PURE__ */ jsx(DropdownMenu.Content, { children: actions });
+}
+const TreeItemAction = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const error = React.useContext(TreeItemErrorContext);
     const {
       visible = error ? true : void 0,
       // visible by default during error state
@@ -253,25 +339,24 @@ const TreeItemAction = forwardRef(
         )
       }
     );
-  }
+  })
 );
 const TreeItemExpander = forwardRef(
   (props, forwardedRef) => {
+    const descriptionId = React.useContext(TreeItemDescriptionIdContext);
     return /* @__PURE__ */ jsx(
-      Role.span,
+      IconButtonPresentation,
       {
         "aria-hidden": "true",
         ...props,
         onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
         className: cx(
-          "\u{1F95D}-button",
-          "\u{1F95D}-icon-button",
           "\u{1F95D}-ghost-aligner",
           "\u{1F95D}-tree-item-expander",
           props.className
         ),
-        "data-kiwi-variant": "ghost",
-        "data-kiwi-ghost-align": useGhostAlignment(),
+        variant: "ghost",
+        "data-kiwi-ghost-align": descriptionId ? "block" : void 0,
         ref: forwardedRef,
         children: /* @__PURE__ */ jsx(ChevronDown, {})
       }
@@ -280,5 +365,5 @@ const TreeItemExpander = forwardRef(
 );
 export {
   TreeItemAction as Action,
-  TreeItemRoot as Root
+  TreeItem as Root
 };

package/dist/bricks/VisuallyHidden.d.ts

@@ -1,4 +1,4 @@
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface VisuallyHiddenProps extends BaseProps<"span"> {
 }
 /**

package/dist/bricks/VisuallyHidden.js

@@ -1,9 +1,17 @@
 import { jsx } from "react/jsx-runtime";
-import { VisuallyHidden as AkVisuallyHidden } from "@ariakit/react/visually-hidden";
+import { Role } from "@ariakit/react/role";
+import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const VisuallyHidden = forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(AkVisuallyHidden, { ...props, ref: forwardedRef });
+    return /* @__PURE__ */ jsx(
+      Role.span,
+      {
+        ...props,
+        className: cx("\u{1F95D}-visually-hidden", props.className),
+        ref: forwardedRef
+      }
+    );
   }
 );
 export {