@itwin/itwinui-react 5.0.0-alpha.8 → 5.0.0-alpha.9

package/dist/bricks/Tree.js

@@ -1,207 +1,25 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import * as ListItem from "./ListItem.js";
-import { IconButton } from "./IconButton.js";
-import { Icon } from "./Icon.js";
+import { Role } from "@ariakit/react/role";
+import { useCompositeStore, Composite } from "@ariakit/react/composite";
 import { forwardRef } from "./~utils.js";
-import { useEventHandlers } from "./~hooks.js";
+import { Root as TreeItemRoot, Action as TreeItemAction } from "./TreeItem.js";
 const Tree = forwardRef((props, forwardedRef) => {
-  const composite = Ariakit.useCompositeStore({ orientation: "vertical" });
+  const composite = useCompositeStore({ orientation: "vertical" });
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       role: "tree",
       ...props,
-      render: /* @__PURE__ */ jsx(Ariakit.Composite, { store: composite }),
+      render: /* @__PURE__ */ jsx(Composite, { store: composite }),
       className: cx("\u{1F95D}-tree", props.className),
       ref: forwardedRef,
       children: props.children
     }
   );
 });
-const TreeItem = forwardRef((props, forwardedRef) => {
-  const {
-    "aria-level": level,
-    selected,
-    expanded,
-    icon,
-    label,
-    description,
-    actions,
-    onSelectedChange,
-    onExpandedChange,
-    onClick: onClickProp,
-    onKeyDown: onKeyDownProp,
-    ...rest
-  } = props;
-  const handleClick = (event) => {
-    if (selected === void 0) return;
-    event.stopPropagation();
-    onSelectedChange?.(!selected);
-  };
-  const handleKeyDown = (event) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-      return;
-    }
-    if (expanded === void 0) return;
-    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
-      event.preventDefault();
-      onExpandedChange?.(event.key === "ArrowRight");
-    }
-  };
-  const labelId = React.useId();
-  const descriptionId = React.useId();
-  return /* @__PURE__ */ jsx(
-    TreeItemContext.Provider,
-    {
-      value: React.useMemo(
-        () => ({
-          level,
-          expanded,
-          selected
-        }),
-        [level, expanded, selected]
-      ),
-      children: /* @__PURE__ */ jsx(
-        Ariakit.CompositeItem,
-        {
-          render: /* @__PURE__ */ jsx(Ariakit.Role, { ...rest }),
-          onClick: useEventHandlers(
-            onClickProp,
-            handleClick
-          ),
-          onKeyDown: useEventHandlers(
-            onKeyDownProp,
-            handleKeyDown
-          ),
-          role: "treeitem",
-          "aria-expanded": expanded,
-          "aria-selected": selected,
-          "aria-labelledby": labelId,
-          "aria-describedby": description ? descriptionId : void 0,
-          "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,
-              className: "\u{1F95D}-tree-item-node",
-              style: { "--\u{1F95D}tree-item-level": level },
-              role: void 0,
-              children: [
-                /* @__PURE__ */ jsxs(ListItem.Decoration, { children: [
-                  /* @__PURE__ */ jsx(
-                    TreeItemExpander,
-                    {
-                      "data-kiwi-description": description ? true : void 0,
-                      onClick: () => {
-                        if (expanded === void 0) return;
-                        onExpandedChange?.(!expanded);
-                      }
-                    }
-                  ),
-                  typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon
-                ] }),
-                /* @__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 })
-                  }
-                )
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-});
-const TreeItemActions = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Ariakit.Toolbar,
-    {
-      ...props,
-      onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
-      className: cx("\u{1F95D}-tree-item-actions", props.className),
-      ref: forwardedRef,
-      children: props.children
-    }
-  );
-});
-const TreeItemAction = forwardRef(
-  (props, forwardedRef) => {
-    const { visible, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        inert: visible === false ? true : void 0,
-        ...rest,
-        variant: "ghost",
-        className: cx("\u{1F95D}-tree-item-action", props.className),
-        "data-kiwi-visible": visible,
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const TreeItemExpander = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        tabIndex: -1,
-        "aria-hidden": "true",
-        icon: /* @__PURE__ */ jsx(TreeChevron, {}),
-        label: "Toggle",
-        ...props,
-        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
-        className: cx("\u{1F95D}-tree-item-expander", props.className),
-        variant: "ghost",
-        labelVariant: "visually-hidden",
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const TreeChevron = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Icon,
-      {
-        ...props,
-        render: /* @__PURE__ */ jsx(
-          Ariakit.Role.svg,
-          {
-            width: "16",
-            height: "16",
-            fill: "currentColor",
-            viewBox: "0 0 16 16",
-            render: props.render,
-            children: /* @__PURE__ */ jsx("path", { d: "M4.146 6.146a.5.5 0 0 1 .708 0L8 9.293l3.146-3.147a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 0 1 0-.708Z" })
-          }
-        ),
-        className: cx("\u{1F95D}-tree-chevron", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const TreeItemContext = React.createContext(void 0);
 export {
-  TreeItem as Item,
+  TreeItemRoot as Item,
   TreeItemAction as ItemAction,
   Tree as Root
 };

package/dist/bricks/TreeItem.d.ts

@@ -0,0 +1,123 @@
+import * as React from "react";
+import { IconButton } from "./IconButton.js";
+import { type BaseProps } from "./~utils.js";
+interface TreeItemRootProps 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. */
+    "aria-posinset": number;
+    /** Defines tree item set size of the current level. */
+    "aria-setsize": number;
+    /**
+     * Specifies if the tree item is selected.
+     *
+     * If `undefined`, the tree item is not selectable.
+     *
+     * @default undefined
+     */
+    selected?: boolean;
+    /**
+     * Callback fired when the tree item is selected.
+     *
+     * Should be used with the `selected` prop.
+     */
+    onSelectedChange?: (selected: boolean) => void;
+    /**
+     * Specifies if the tree item is expanded.
+     *
+     * Used to determine if a tree item is a parent node. If `undefined`, it is a leaf node (i.e. not expandable).
+     *
+     * @default undefined
+     * */
+    expanded?: boolean;
+    /**
+     * Callback fired when the tree item is expanded.
+     *
+     * Should be used with the `expanded` prop.
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Icon to be displayed inside the tree item.
+     *
+     * Can be a URL of an SVG from the `@itwin/itwinui-icons` package, or a JSX element.
+     *
+     * For multiple icons/decorations, use the `unstable_decorations` prop.
+     */
+    icon?: string | React.JSX.Element;
+    /**
+     * Decoration(s) to be displayed inside the tree item.
+     *
+     * This is an alternative to the `icon` prop, and can be used to
+     * display multiple icons or other decorations before the label.
+     *
+     * Note: This should _not_ be used together with the `icon` prop.
+     *
+     * @experimental
+     */
+    unstable_decorations?: React.ReactNode;
+    /**
+     * The primary label that identifies the tree item and is displayed inside it.
+     */
+    label?: React.ReactNode;
+    /** Secondary line of text to display additional information about the tree item. */
+    description?: React.ReactNode;
+    /**
+     * The actions available for the tree item. Must be a list of `Tree.ItemAction` components.
+     *
+     * Example:
+     * ```tsx
+     * actions={[
+     *   <Tree.ItemAction key={…} icon={…} label={…} />,
+     *   <Tree.ItemAction key={…} icon={…} label={…} />,
+     * ]}
+     * ```
+     */
+    actions?: React.ReactNode[];
+}
+/**
+ * A treeitem is a node in a tree structure that may be expanded or collapsed to reveal or hide its descendants.
+ *
+ * `Tree.Item`s can be rendered inside a `Tree.Root`. Additional properties are specified to the `Tree.Item`s to create a hierarchical tree structure.
+ *
+ * Example:
+ * ```tsx
+ * <Tree.Root>
+ *   <Tree.Item label="Parent" aria-level={1} aria-posinset={1} aria-setsize={1} />
+ *   <Tree.Item label="Child 1" aria-level={2} aria-posinset={1} aria-setsize={2} />
+ *   <Tree.Item label="Child 2" aria-level={2} aria-posinset={2} aria-setsize={2}  />
+ * </Tree.Root>
+ * ```
+ *
+ * The `label` and `icon` props can be used to specify the treeitem's own content.
+ *
+ * The `aria-level` prop is used to specify the nesting level of the treeitem. Nesting levels start at 1.
+ *
+ * The `aria-posinset` and `aria-setsize` props are used to define the treeitem's position in the current level of tree items.
+ *
+ * The `expanded` and `onExpandedChange` props can be used to control the expansion state of a treeitem.
+ *
+ * The `selected` and `onSelectedChange` props can be used to control the selection state of a treeitem.
+ *
+ * Secondary actions can be passed into the `actions` prop.
+ */
+declare const TreeItemRoot: React.ForwardRefExoticComponent<TreeItemRootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+type IconButtonProps = React.ComponentProps<typeof IconButton>;
+interface TreeItemActionProps extends BaseProps<"button">, Pick<IconButtonProps, "label" | "icon"> {
+    /**
+     * Controls the visibility of the action.
+     *
+     * If `true`, the action is always visible.
+     * If `false`, the action is hidden and becomes inaccessible, but still occupies space.
+     *
+     * By default, the action is shown only when the treeitem receives hover/focus.
+     */
+    visible?: boolean;
+}
+/**
+ * A secondary action for `<Tree.Item>`, to be passed into the `actions` prop. The action is typically
+ * displayed as an icon-button on the right end of the treeitem.
+ *
+ * By default, the action appears only on hover/focus. This can be controlled by the `visible` prop.
+ */
+declare const TreeItemAction: React.ForwardRefExoticComponent<TreeItemActionProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { TreeItemRoot as Root, TreeItemAction as Action };

package/dist/bricks/TreeItem.js

@@ -0,0 +1,214 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import { Role } from "@ariakit/react/role";
+import {
+  CompositeItem
+} from "@ariakit/react/composite";
+import { Toolbar } from "@ariakit/react/toolbar";
+import * as ListItem from "./~utils.ListItem.js";
+import { IconButton } from "./IconButton.js";
+import { Icon } from "./Icon.js";
+import { forwardRef } from "./~utils.js";
+import { useEventHandlers } from "./~hooks.js";
+import { GhostAligner } from "./~utils.GhostAligner.js";
+const TreeItemContext = React.createContext(void 0);
+const TreeItemRoot = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      "aria-level": level,
+      selected,
+      expanded,
+      icon,
+      unstable_decorations,
+      label,
+      description,
+      actions,
+      onSelectedChange,
+      onExpandedChange,
+      onClick: onClickProp,
+      onKeyDown: onKeyDownProp,
+      ...rest
+    } = props;
+    const handleClick = (event) => {
+      if (selected === void 0) return;
+      event.stopPropagation();
+      onSelectedChange?.(!selected);
+    };
+    const handleKeyDown = (event) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+        return;
+      }
+      if (expanded === void 0) return;
+      if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        onExpandedChange?.(event.key === "ArrowRight");
+      }
+    };
+    const labelId = React.useId();
+    const descriptionId = React.useId();
+    const decorationId = React.useId();
+    const describedBy = React.useMemo(() => {
+      const idRefs = [];
+      if (description) idRefs.push(descriptionId);
+      if (unstable_decorations || icon) idRefs.push(decorationId);
+      return idRefs.length > 0 ? idRefs.join(" ") : void 0;
+    }, [unstable_decorations, icon, decorationId, description, descriptionId]);
+    return /* @__PURE__ */ jsx(
+      TreeItemContext.Provider,
+      {
+        value: React.useMemo(
+          () => ({
+            level,
+            expanded,
+            selected
+          }),
+          [level, expanded, selected]
+        ),
+        children: /* @__PURE__ */ jsx(
+          CompositeItem,
+          {
+            render: /* @__PURE__ */ jsx(Role, { ...rest }),
+            onClick: useEventHandlers(
+              onClickProp,
+              handleClick
+            ),
+            onKeyDown: useEventHandlers(
+              onKeyDownProp,
+              handleKeyDown
+            ),
+            role: "treeitem",
+            "aria-expanded": expanded,
+            "aria-selected": selected,
+            "aria-labelledby": labelId,
+            "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,
+                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 })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+const TreeItemActions = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Toolbar,
+    {
+      ...props,
+      onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+      className: cx("\u{1F95D}-tree-item-actions", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
+});
+const TreeItemAction = forwardRef(
+  (props, forwardedRef) => {
+    const { visible, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        inert: visible === false ? true : void 0,
+        ...rest,
+        variant: "ghost",
+        className: cx("\u{1F95D}-tree-item-action", props.className),
+        "data-kiwi-visible": visible,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const TreeItemExpander = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        icon: /* @__PURE__ */ jsx(TreeChevron, {}),
+        label: "Toggle",
+        ...props,
+        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+        className: cx("\u{1F95D}-tree-item-expander", props.className),
+        variant: "ghost",
+        labelVariant: "visually-hidden",
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const TreeChevron = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            children: /* @__PURE__ */ jsx("path", { d: "M4.146 6.146a.5.5 0 0 1 .708 0L8 9.293l3.146-3.147a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 0 1 0-.708Z" })
+          }
+        ),
+        className: cx("\u{1F95D}-tree-chevron", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+export {
+  TreeItemAction as Action,
+  TreeItemRoot as Root
+};

package/dist/bricks/VisuallyHidden.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { VisuallyHidden as AkVisuallyHidden } from "@ariakit/react/visually-hidden";
 import { forwardRef } from "./~utils.js";
 const VisuallyHidden = forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(Ariakit.VisuallyHidden, { ...props, ref: forwardedRef });
+    return /* @__PURE__ */ jsx(AkVisuallyHidden, { ...props, ref: forwardedRef });
   }
 );
 export {