@itwin/itwinui-react 5.0.0-alpha.1 → 5.0.0-alpha.3

package/dist/bricks/TextBox.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { Textarea } from "./Textarea.js";
 import { type FocusableProps, type BaseProps } from "./~utils.js";
 interface BaseInputProps extends FocusableProps<"input"> {
 }
@@ -39,6 +38,28 @@ interface TextBoxInputProps extends Omit<BaseInputProps, "children" | "type"> {
  * For a multiline text input, use the `TextBox.Textarea` component.
  */
 declare const TextBoxInput: React.ForwardRefExoticComponent<TextBoxInputProps & React.RefAttributes<HTMLElement | HTMLInputElement>>;
+interface TextareaProps extends FocusableProps<"textarea"> {
+}
+/**
+ * A styled textarea element that allows users to enter multiline text values.
+ *
+ * Example usage:
+ * ```tsx
+ * <TextBox.Textarea defaultValue="Hello" />
+ * ```
+ *
+ * Works well with the `Field` and `Label` components.
+ * ```tsx
+ * <Field>
+ *   <Label>Leave a comment, be kind</Label>
+ *   <TextBox.Textarea />
+ * </Field>
+ * ```
+ *
+ * Underneath, it's an HTML textarea, i.e. `<textarea>`, so it supports the same props, including
+ * `value`, `defaultValue`, `onChange`, and `disabled`.
+ */
+declare const TextBoxTextarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLElement | HTMLTextAreaElement>>;
 interface TextBoxRootProps extends BaseProps {
 }
 /**
@@ -76,4 +97,4 @@ interface TextBoxTextProps extends BaseProps<"span"> {
  * A static text decoration for the `TextBox.Root` component. Can be added before or after the `TextBox.Input`.
  */
 declare const TextBoxText: React.ForwardRefExoticComponent<TextBoxTextProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
-export { TextBoxRoot as Root, TextBoxInput as Input, Textarea, TextBoxIcon as Icon, TextBoxText as Text, };
+export { TextBoxRoot as Root, TextBoxInput as Input, TextBoxTextarea as Textarea, TextBoxIcon as Icon, TextBoxText as Text, };

package/dist/bricks/TextBox.js

@@ -2,13 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 import { Icon } from "./Icon.js";
-import { Textarea } from "./Textarea.js";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     const fieldId = useFieldId();
     const rootContext = React.useContext(TextBoxRootContext);
     const setDisabled = rootContext?.setDisabled;
@@ -20,7 +20,9 @@ const TextBoxInput = forwardRef(
       {
         id: fieldId,
         ...props,
+        "aria-describedby": describedBy,
         className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+        placeholder: props.placeholder ?? " ",
         render: /* @__PURE__ */ jsx(
           Ariakit.Focusable,
           {
@@ -33,6 +35,30 @@ const TextBoxInput = forwardRef(
     );
   }
 );
+const TextBoxTextarea = forwardRef(
+  (props, forwardedRef) => {
+    const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.textarea,
+      {
+        id: fieldId,
+        ...props,
+        className: cx("\u{1F95D}-text-box", props.className),
+        "aria-describedby": describedBy,
+        placeholder: props.placeholder ?? " ",
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Focusable,
+          {
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("textarea", {})
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 const TextBoxRoot = forwardRef(
   (props, forwardedRef) => {
     const inputRef = React.useRef(null);
@@ -92,5 +118,5 @@ export {
   TextBoxInput as Input,
   TextBoxRoot as Root,
   TextBoxText as Text,
-  Textarea
+  TextBoxTextarea as Textarea
 };

package/dist/bricks/Tooltip.js

@@ -5,12 +5,12 @@ import * as Ariakit from "@ariakit/react";
 import { forwardRef, supportsPopover } from "./~utils.js";
 const Tooltip = forwardRef(
   (props, forwardedRef) => {
+    const generatedId = React.useId();
     const {
       content,
       children,
-      className,
       type = "description",
-      id = React.useId(),
+      id = generatedId,
       defaultOpen: defaultOpenProp,
       open: openProp,
       setOpen: setOpenProp,
@@ -53,7 +53,7 @@ const Tooltip = forwardRef(
               "aria-hidden": "true",
               ...rest,
               unmountOnHide,
-              className: cx("\u{1F95D}-tooltip", className),
+              className: cx("\u{1F95D}-tooltip", props.className),
               ref: forwardedRef,
               id,
               style: {

package/dist/bricks/Tree.d.ts

@@ -1,23 +1,86 @@
 import * as React from "react";
-import { IconButton } from "./IconButton.js";
 import { type BaseProps } from "./~utils.js";
 interface TreeProps extends BaseProps {
 }
+/**
+ * A tree is a hierarchical list of items that can be expanded or collapsed, or optionally selected.
+ *
+ * `Tree.Root` is the root component for a tree. `Tree.Item`s can be nested inside a `Tree.Root` to create a hierarchical tree structure.
+ *
+ * Example:
+ * ```tsx
+ * <Tree.Root>
+ *   <Tree.Item label="Parent 1">
+ *     <Tree.Item label="Child 1.1" />
+ *     <Tree.Item label="Child 1.2" />
+ *   </Tree.Item>
+ *   <Tree.Item label="Parent 2">
+ *     <Tree.Item label="Child 2.1" />
+ *   </Tree.Item>
+ * </Tree.Root>
+ * ```
+ */
 declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 interface TreeItemProps extends Omit<BaseProps, "content"> {
-    content?: React.ReactNode;
+    /**
+     * Specifies if the tree item is selected.
+     *
+     * If `undefined`, the tree item is not selectable.
+     *
+     * @default undefined
+     */
     selected?: boolean;
-    /** Specifies if the tree item is expanded. Used to determine if a tree item is a parent node. Defaults to `undefined`. */
+    /**
+     * 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 `kiwi-icons` package, or a JSX element.
+     */
+    icon?: string | React.JSX.Element;
+    /** The label to display for the tree item. */
+    label?: React.ReactNode;
+    /** The actions available for the tree item. */
+    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 nested as JSX elements inside a `Tree.Root` to create a hierarchical tree structure.
+ *
+ * Example:
+ * ```tsx
+ * <Tree.Root>
+ *   <Tree.Item label="Parent">
+ *     <Tree.Item label="Child 1" />
+ *     <Tree.Item label="Child 2" />
+ *   </Tree.Item>
+ * </Tree.Root>
+ * ```
+ *
+ * The `label` and `icon` props can be used to specify the treeitem's own content. `children` is only used for nested 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.
+ */
 declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TreeItemContentProps extends BaseProps<"span"> {
-}
-declare const TreeItemContent: React.ForwardRefExoticComponent<TreeItemContentProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
-type IconButtonProps = React.ComponentProps<typeof IconButton>;
-interface TreeItemExpanderProps extends Omit<IconButtonProps, "variant" | "label" | "icon"> {
-    label?: IconButtonProps["label"];
-    icon?: IconButtonProps["icon"];
-}
-declare const TreeItemExpander: React.ForwardRefExoticComponent<Omit<TreeItemExpanderProps, "ref"> & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-export { Tree as Root, TreeItem as Item, TreeItemExpander as Expander, TreeItemContent as Content, };
+export { Tree as Root, TreeItem as Item };

package/dist/bricks/Tree.js

@@ -6,14 +6,54 @@ import * as ListItem from "./ListItem.js";
 import { IconButton } from "./IconButton.js";
 import { Icon } from "./Icon.js";
 import { forwardRef } from "./~utils.js";
+import { useEventHandlers } from "./~hooks.js";
 const Tree = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(Ariakit.Role.div, { ...props, role: "list", ref: forwardedRef, children: props.children });
+  const composite = Ariakit.useCompositeStore({ orientation: "vertical" });
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      role: "tree",
+      ...props,
+      render: /* @__PURE__ */ jsx(Ariakit.Composite, { store: composite }),
+      className: cx("\u{1F95D}-tree", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
 });
 const TreeItem = forwardRef((props, forwardedRef) => {
-  const { selected, content, children, className, expanded, style, ...rest } = props;
+  const {
+    selected,
+    children,
+    expanded,
+    icon,
+    label,
+    actions,
+    style,
+    onSelectedChange,
+    onExpandedChange,
+    onClick: onClickProp,
+    onKeyDown: onKeyDownProp,
+    ...rest
+  } = props;
   const parentContext = React.useContext(TreeItemContext);
   const level = parentContext ? parentContext.level + 1 : 1;
-  const firstSelected = !!selected && !parentContext?.selected;
+  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 contentId = React.useId();
   return /* @__PURE__ */ jsx(
     TreeItemContext.Provider,
     {
@@ -21,58 +61,104 @@ const TreeItem = forwardRef((props, forwardedRef) => {
         () => ({
           level,
           expanded,
-          selected
+          selected,
+          contentId
         }),
-        [level, expanded, selected]
+        [level, expanded, selected, contentId]
       ),
-      children: /* @__PURE__ */ jsxs("div", { role: "listitem", "aria-current": firstSelected ? true : void 0, children: [
-        /* @__PURE__ */ jsx(
-          ListItem.Root,
-          {
-            ...rest,
-            "data-kiwi-expanded": expanded,
-            "data-kiwi-selected": selected,
-            "data-kiwi-parent-selected": parentContext?.selected,
-            className: cx("\u{1F95D}-tree-item", className),
-            style: {
-              ...style,
-              "--\u{1F95D}tree-item-level": level
-            },
-            ref: forwardedRef,
-            role: void 0,
-            children: content
-          }
-        ),
-        children && /* @__PURE__ */ jsx("div", { role: "list", children })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        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": contentId,
+          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__ */ jsx(
+                    TreeItemExpander,
+                    {
+                      onClick: () => {
+                        if (expanded === void 0) return;
+                        onExpandedChange?.(!expanded);
+                      }
+                    }
+                  ),
+                  typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+                  /* @__PURE__ */ jsx(TreeItemContent, { label }),
+                  /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
+                ]
+              }
+            ),
+            children && /* @__PURE__ */ jsx("div", { role: "group", children })
+          ]
+        }
+      )
     }
   );
 });
 const TreeItemContent = forwardRef(
   (props, forwardedRef) => {
-    const { children, ...rest } = props;
+    const { label, ...rest } = props;
+    const { contentId } = React.useContext(TreeItemContext) ?? {};
     return /* @__PURE__ */ jsx(
       ListItem.Content,
       {
         ...rest,
+        id: contentId,
         className: cx("\u{1F95D}-tree-item-content", props.className),
         ref: forwardedRef,
-        children: /* @__PURE__ */ jsx("button", { type: "button", children })
+        children: label
+      }
+    );
+  }
+);
+const TreeItemActions = forwardRef(
+  (props, forwardedRef) => {
+    const { visible, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Ariakit.Toolbar,
+      {
+        ...rest,
+        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+        className: cx("\u{1F95D}-tree-item-actions", props.className),
+        "data-kiwi-visible": visible,
+        ref: forwardedRef,
+        children: props.children
       }
     );
   }
 );
 const TreeItemExpander = forwardRef(
   (props, forwardedRef) => {
-    const context = React.useContext(TreeItemContext);
-    const expanded = context?.expanded;
     return /* @__PURE__ */ jsx(
       IconButton,
       {
+        tabIndex: -1,
+        "aria-hidden": "true",
         icon: /* @__PURE__ */ jsx(TreeChevron, {}),
         label: "Toggle",
-        "aria-expanded": expanded === void 0 ? void 0 : expanded,
         ...props,
+        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
         className: cx("\u{1F95D}-tree-item-expander", props.className),
         variant: "ghost",
         labelVariant: "visually-hidden",
@@ -106,8 +192,6 @@ const TreeChevron = forwardRef(
 );
 const TreeItemContext = React.createContext(void 0);
 export {
-  TreeItemContent as Content,
-  TreeItemExpander as Expander,
   TreeItem as Item,
   Tree as Root
 };

package/dist/bricks/index.d.ts

@@ -2,6 +2,8 @@ export { Root } from "./Root.js";
 export { Anchor } from "./Anchor.js";
 export { Button } from "./Button.js";
 export { Checkbox } from "./Checkbox.js";
+export { Chip } from "./Chip.js";
+export { Description } from "./Description.js";
 export * as DropdownMenu from "./DropdownMenu.js";
 export { Divider } from "./Divider.js";
 export { Icon } from "./Icon.js";
@@ -11,9 +13,11 @@ export { Kbd } from "./Kbd.js";
 export { Label } from "./Label.js";
 export { Radio } from "./Radio.js";
 export * as Select from "./Select.js";
+export { Spinner } from "./Spinner.js";
 export { Switch } from "./Switch.js";
 export * as Tabs from "./Tabs.js";
 export { Text } from "./Text.js";
 export * as TextBox from "./TextBox.js";
+export * as Tree from "./Tree.js";
 export { Tooltip } from "./Tooltip.js";
 export { VisuallyHidden } from "./VisuallyHidden.js";

package/dist/bricks/index.js

@@ -3,6 +3,8 @@ import { Root } from "./Root.js";
 import { Anchor } from "./Anchor.js";
 import { Button } from "./Button.js";
 import { Checkbox } from "./Checkbox.js";
+import { Chip } from "./Chip.js";
+import { Description } from "./Description.js";
 import * as DropdownMenu from "./DropdownMenu.js";
 import { Divider } from "./Divider.js";
 import { Icon } from "./Icon.js";
@@ -12,16 +14,20 @@ import { Kbd } from "./Kbd.js";
 import { Label } from "./Label.js";
 import { Radio } from "./Radio.js";
 import * as Select from "./Select.js";
+import { Spinner } from "./Spinner.js";
 import { Switch } from "./Switch.js";
 import * as Tabs from "./Tabs.js";
 import { Text } from "./Text.js";
 import * as TextBox from "./TextBox.js";
+import * as Tree from "./Tree.js";
 import { Tooltip } from "./Tooltip.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 export {
   Anchor,
   Button,
   Checkbox,
+  Chip,
+  Description,
   Divider,
   DropdownMenu,
   Field,
@@ -32,10 +38,12 @@ export {
   Radio,
   Root,
   Select,
+  Spinner,
   Switch,
   Tabs,
   Text,
   TextBox,
   Tooltip,
+  Tree,
   VisuallyHidden
 };