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

package/dist/bricks/TextBox.js

@@ -6,31 +6,34 @@ import { useFieldId } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { Textarea } from "./Textarea.js";
 import { useMergedRefs } from "./~hooks.js";
-const TextBoxInput = React.forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
-  const rootContext = React.useContext(TextBoxRootContext);
-  const setDisabled = rootContext?.setDisabled;
-  React.useEffect(() => {
-    setDisabled?.(props.disabled);
-  }, [setDisabled, props.disabled]);
-  return /* @__PURE__ */ jsx(
-    Ariakit.Role.input,
-    {
-      id: fieldId,
-      ...props,
-      className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
-      render: /* @__PURE__ */ jsx(
-        Ariakit.Focusable,
-        {
-          accessibleWhenDisabled: true,
-          render: props.render || /* @__PURE__ */ jsx("input", {})
-        }
-      ),
-      ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
-    }
-  );
-});
-const TextBoxRoot = React.forwardRef(
+import { forwardRef } from "./~utils.js";
+const TextBoxInput = forwardRef(
+  (props, forwardedRef) => {
+    const fieldId = useFieldId();
+    const rootContext = React.useContext(TextBoxRootContext);
+    const setDisabled = rootContext?.setDisabled;
+    React.useEffect(() => {
+      setDisabled?.(props.disabled);
+    }, [setDisabled, props.disabled]);
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.input,
+      {
+        id: fieldId,
+        ...props,
+        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Focusable,
+          {
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("input", {})
+          }
+        ),
+        ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
+      }
+    );
+  }
+);
+const TextBoxRoot = forwardRef(
   (props, forwardedRef) => {
     const inputRef = React.useRef(null);
     const [disabled, setDisabled] = React.useState();
@@ -59,26 +62,30 @@ const TextBoxRoot = React.forwardRef(
     );
   }
 );
-const TextBoxIcon = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Icon,
-    {
-      ...props,
-      className: cx("\u{1F95D}-text-box-decoration", props.className),
-      ref: forwardedRef
-    }
-  );
-});
-const TextBoxText = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Ariakit.Role.span,
-    {
-      ...props,
-      className: cx("\u{1F95D}-text-box-decoration", props.className),
-      ref: forwardedRef
-    }
-  );
-});
+const TextBoxIcon = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        className: cx("\u{1F95D}-text-box-decoration", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const TextBoxText = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.span,
+      {
+        ...props,
+        className: cx("\u{1F95D}-text-box-decoration", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 const TextBoxRootContext = React.createContext(void 0);
 export {
   TextBoxIcon as Icon,

package/dist/bricks/Textarea.d.ts

@@ -1,14 +1,24 @@
-import * as React from "react";
-import type { FocusableProps } from "./~utils.js";
+import { type FocusableProps } from "./~utils.js";
 interface TextareaProps extends FocusableProps<"textarea"> {
 }
 /**
- * Textarea component that allows users to enter multiline text values.
+ * 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`.
  */
-export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLElement | HTMLTextAreaElement>>;
 export {};

package/dist/bricks/Textarea.js

@@ -1,27 +1,29 @@
 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";
-const Textarea = React.forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
-  return /* @__PURE__ */ jsx(
-    Ariakit.Role.textarea,
-    {
-      id: fieldId,
-      ...props,
-      className: cx("\u{1F95D}-text-box", props.className),
-      render: /* @__PURE__ */ jsx(
-        Ariakit.Focusable,
-        {
-          accessibleWhenDisabled: true,
-          render: props.render || /* @__PURE__ */ jsx("textarea", {})
-        }
-      ),
-      ref: forwardedRef
-    }
-  );
-});
+import { forwardRef } from "./~utils.js";
+const Textarea = forwardRef(
+  (props, forwardedRef) => {
+    const fieldId = useFieldId();
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.textarea,
+      {
+        id: fieldId,
+        ...props,
+        className: cx("\u{1F95D}-text-box", props.className),
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Focusable,
+          {
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("textarea", {})
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
   Textarea
 };

package/dist/bricks/Tooltip.d.ts

@@ -3,12 +3,16 @@ import * as Ariakit from "@ariakit/react";
 import { type FocusableProps } from "./~utils.js";
 interface TooltipProps extends Omit<FocusableProps<"div">, "content">, Pick<Ariakit.TooltipProps, "open" | "unmountOnHide">, Pick<Ariakit.TooltipProviderProps, "defaultOpen" | "setOpen"> {
     /**
-     * The content to be displayed inside the tooltip.
+     * The content to be displayed inside the tooltip when the trigger element is hovered or focused.
      */
     content: React.ReactNode;
     /**
      * The element that will trigger the tooltip when hovered or focused.
      * Common examples include buttons, links, or form controls.
+     *
+     * **Note**: The trigger must be a single interactive element. Do not add a
+     * tooltip to a non-interactive static element (such as a `<div>` or `<svg>`). Also,
+     * the trigger element must forward its ref and spread its props.
      */
     children: React.ReactElement;
     /**
@@ -23,7 +27,7 @@ interface TooltipProps extends Omit<FocusableProps<"div">, "content">, Pick<Aria
     type?: "description" | "label" | "none";
 }
 /**
- * Tooltip component that provides additional information or context for a trigger element.
+ * A tooltip component that provides additional information or context for an interactive trigger element.
  *
  * Example usage:
  *
@@ -33,7 +37,10 @@ interface TooltipProps extends Omit<FocusableProps<"div">, "content">, Pick<Aria
  * </Tooltip>
  * ```
  *
- * **Note**: If `type` is set to `"none"`, the tooltip will not use ARIA attributes and will unmount when hidden.
+ * **Note**: The trigger element must be a single interactive element, such as a button or link. Do not add a
+ * tooltip to a non-interactive static element (such as a `<div>` or `<svg>`).
+ *
+ * **Note**: If `type` is set to `"none"`, the tooltip will not use ARIA attributes.
  */
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 export {};

package/dist/bricks/Tooltip.js

@@ -2,66 +2,74 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { supportsPopover } from "./~utils.js";
-const Tooltip = React.forwardRef((props, forwardedRef) => {
-  const {
-    content,
-    children,
-    className,
-    type = "description",
-    id = React.useId(),
-    defaultOpen: defaultOpenProp,
-    open: openProp,
-    setOpen: setOpenProp,
-    unmountOnHide = type === "none",
-    ...rest
-  } = props;
-  const store = Ariakit.useTooltipStore();
-  const open = Ariakit.useStoreState(store, (state) => state.open);
-  const popover = Ariakit.useStoreState(store, (state) => state.popoverElement);
-  React.useEffect(
-    function syncPopoverWithOpenState() {
-      if (popover?.isConnected) {
-        popover?.togglePopover?.(open);
-      }
-    },
-    [open, popover]
-  );
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    Ariakit.TooltipProvider,
-    {
-      store,
+import { forwardRef, supportsPopover } from "./~utils.js";
+const Tooltip = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      content,
+      children,
+      className,
+      type = "description",
+      id = React.useId(),
       defaultOpen: defaultOpenProp,
       open: openProp,
       setOpen: setOpenProp,
-      children: [
-        /* @__PURE__ */ jsx(
-          Ariakit.TooltipAnchor,
-          {
-            render: children,
-            ...type === "description" && { "aria-describedby": id },
-            ...type === "label" && { "aria-labelledby": id }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Ariakit.Tooltip,
-          {
-            "aria-hidden": "true",
-            ...rest,
-            unmountOnHide,
-            className: cx("\u{1F95D}-tooltip", className),
-            ref: forwardedRef,
-            id,
-            style: { zIndex: supportsPopover ? void 0 : 9999, ...props.style },
-            wrapperProps: { popover: "manual" },
-            portal: !supportsPopover,
-            children: content
-          }
-        )
-      ]
-    }
-  ) });
-});
+      unmountOnHide = type === "none",
+      ...rest
+    } = props;
+    const store = Ariakit.useTooltipStore();
+    const open = Ariakit.useStoreState(store, (state) => state.open);
+    const popover = Ariakit.useStoreState(
+      store,
+      (state) => state.popoverElement
+    );
+    React.useEffect(
+      function syncPopoverWithOpenState() {
+        if (popover?.isConnected) {
+          popover?.togglePopover?.(open);
+        }
+      },
+      [open, popover]
+    );
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      Ariakit.TooltipProvider,
+      {
+        store,
+        defaultOpen: defaultOpenProp,
+        open: openProp,
+        setOpen: setOpenProp,
+        children: [
+          /* @__PURE__ */ jsx(
+            Ariakit.TooltipAnchor,
+            {
+              render: children,
+              ...type === "description" && { "aria-describedby": id },
+              ...type === "label" && { "aria-labelledby": id }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Ariakit.Tooltip,
+            {
+              "aria-hidden": "true",
+              ...rest,
+              unmountOnHide,
+              className: cx("\u{1F95D}-tooltip", className),
+              ref: forwardedRef,
+              id,
+              style: {
+                zIndex: supportsPopover ? void 0 : 9999,
+                ...props.style
+              },
+              wrapperProps: { popover: "manual" },
+              portal: !supportsPopover,
+              children: content
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
 export {
   Tooltip
 };

package/dist/bricks/Tree.d.ts

@@ -1,23 +1,23 @@
 import * as React from "react";
 import { IconButton } from "./IconButton.js";
-import type { BaseProps } from "./~utils.js";
+import { type BaseProps } from "./~utils.js";
 interface TreeProps extends BaseProps {
 }
-declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLDivElement>>;
+declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 interface TreeItemProps extends Omit<BaseProps, "content"> {
     content?: React.ReactNode;
     selected?: boolean;
     /** Specifies if the tree item is expanded. Used to determine if a tree item is a parent node. Defaults to `undefined`. */
     expanded?: boolean;
 }
-declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 interface TreeItemContentProps extends BaseProps<"span"> {
 }
-declare const TreeItemContent: React.ForwardRefExoticComponent<TreeItemContentProps & React.RefAttributes<HTMLSpanElement>>;
+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<HTMLButtonElement>>;
+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, };

package/dist/bricks/Tree.js

@@ -5,77 +5,83 @@ import * as Ariakit from "@ariakit/react";
 import * as ListItem from "./ListItem.js";
 import { IconButton } from "./IconButton.js";
 import { Icon } from "./Icon.js";
-const Tree = React.forwardRef(
+import { forwardRef } from "./~utils.js";
+const Tree = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Ariakit.Role.div, { ...props, role: "list", ref: forwardedRef, children: props.children });
+});
+const TreeItem = forwardRef((props, forwardedRef) => {
+  const { selected, content, children, className, expanded, style, ...rest } = props;
+  const parentContext = React.useContext(TreeItemContext);
+  const level = parentContext ? parentContext.level + 1 : 1;
+  const firstSelected = !!selected && !parentContext?.selected;
+  return /* @__PURE__ */ jsx(
+    TreeItemContext.Provider,
+    {
+      value: React.useMemo(
+        () => ({
+          level,
+          expanded,
+          selected
+        }),
+        [level, expanded, selected]
+      ),
+      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 })
+      ] })
+    }
+  );
+});
+const TreeItemContent = forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(Ariakit.Role.div, { ...props, role: "list", ref: forwardedRef, children: props.children });
+    const { children, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      ListItem.Content,
+      {
+        ...rest,
+        className: cx("\u{1F95D}-tree-item-content", props.className),
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx("button", { type: "button", children })
+      }
+    );
   }
 );
-const TreeItem = React.forwardRef(
+const TreeItemExpander = forwardRef(
   (props, forwardedRef) => {
-    const { selected, content, children, className, expanded, style, ...rest } = props;
-    const parentContext = React.useContext(TreeItemContext);
-    const level = parentContext ? parentContext.level + 1 : 1;
+    const context = React.useContext(TreeItemContext);
+    const expanded = context?.expanded;
     return /* @__PURE__ */ jsx(
-      TreeItemContext.Provider,
+      IconButton,
       {
-        value: React.useMemo(
-          () => ({
-            level,
-            expanded
-          }),
-          [level, expanded]
-        ),
-        children: /* @__PURE__ */ jsxs("div", { role: "listitem", children: [
-          /* @__PURE__ */ jsx(
-            ListItem.Root,
-            {
-              ...rest,
-              "data-kiwi-expanded": expanded,
-              "data-kiwi-selected": 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 })
-        ] })
+        icon: /* @__PURE__ */ jsx(TreeChevron, {}),
+        label: "Toggle",
+        "aria-expanded": expanded === void 0 ? void 0 : expanded,
+        ...props,
+        className: cx("\u{1F95D}-tree-item-expander", props.className),
+        variant: "ghost",
+        labelVariant: "visually-hidden",
+        ref: forwardedRef
       }
     );
   }
 );
-const TreeItemContent = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    ListItem.Content,
-    {
-      ...props,
-      className: cx("\u{1F95D}-tree-item-content", props.className),
-      ref: forwardedRef
-    }
-  );
-});
-const TreeItemExpander = React.forwardRef((props, forwardedRef) => {
-  const context = React.useContext(TreeItemContext);
-  const expanded = context?.expanded;
-  return /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      icon: /* @__PURE__ */ jsx(TreeChevron, {}),
-      label: "Toggle",
-      "aria-expanded": expanded === void 0 ? void 0 : expanded,
-      ...props,
-      className: cx("\u{1F95D}-tree-item-expander", props.className),
-      variant: "ghost",
-      labelVariant: "visually-hidden",
-      ref: forwardedRef
-    }
-  );
-});
-const TreeChevron = React.forwardRef(
+const TreeChevron = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(
       Icon,

package/dist/bricks/VisuallyHidden.d.ts

@@ -1,6 +1,18 @@
-import React from "react";
-import type { BaseProps } from "./~utils.js";
+import { type BaseProps } from "./~utils.js";
 interface VisuallyHiddenProps extends BaseProps<"span"> {
 }
-export declare const VisuallyHidden: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * A visually hidden element that is still accessible to screen readers and other assistive technology.
+ *
+ * This is useful when you want to provide a text alternative to a visual element (e.g. an icon or symbol).
+ *
+ * Example:
+ * ```tsx
+ * <span aria-hidden="true">⭐</span>
+ * <VisuallyHidden>Favorite</VisuallyHidden>
+ * ```
+ *
+ * **Note**: The `IconButton` component utilizes `VisuallyHidden` internally when the `label` prop is set.
+ */
+export declare const VisuallyHidden: import("react").ForwardRefExoticComponent<VisuallyHiddenProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
 export {};

package/dist/bricks/VisuallyHidden.js

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

package/dist/bricks/index.d.ts

@@ -10,8 +10,10 @@ export { Field } from "./Field.js";
 export { Kbd } from "./Kbd.js";
 export { Label } from "./Label.js";
 export { Radio } from "./Radio.js";
+export * as Select from "./Select.js";
 export { Switch } from "./Switch.js";
 export * as Tabs from "./Tabs.js";
+export { Text } from "./Text.js";
 export * as TextBox from "./TextBox.js";
 export { Tooltip } from "./Tooltip.js";
 export { VisuallyHidden } from "./VisuallyHidden.js";

package/dist/bricks/index.js

@@ -11,8 +11,10 @@ import { Field } from "./Field.js";
 import { Kbd } from "./Kbd.js";
 import { Label } from "./Label.js";
 import { Radio } from "./Radio.js";
+import * as Select from "./Select.js";
 import { Switch } from "./Switch.js";
 import * as Tabs from "./Tabs.js";
+import { Text } from "./Text.js";
 import * as TextBox from "./TextBox.js";
 import { Tooltip } from "./Tooltip.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
@@ -29,8 +31,10 @@ export {
   Label,
   Radio,
   Root,
+  Select,
   Switch,
   Tabs,
+  Text,
   TextBox,
   Tooltip,
   VisuallyHidden