@itwin/itwinui-react 5.0.0-alpha.11 → 5.0.0-alpha.12

package/dist/bricks/Tabs.js

@@ -1,41 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
 import cx from "classnames";
 import * as AkTab from "@ariakit/react/tab";
-import { useControlledState } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 function Tabs(props) {
   const {
     defaultSelectedId,
-    selectedId: selectedIdProp,
-    setSelectedId: setSelectedIdProp,
+    selectedId,
+    setSelectedId,
     selectOnMove,
     children
   } = props;
-  const [selectedId, setSelectedId] = useControlledState(
-    defaultSelectedId,
-    selectedIdProp,
-    setSelectedIdProp
-  );
   return /* @__PURE__ */ jsx(
     AkTab.TabProvider,
     {
+      defaultSelectedId,
       selectedId,
-      setSelectedId: React.useCallback(
-        (id) => {
-          if (document.startViewTransition) {
-            document.startViewTransition(() => {
-              ReactDOM.flushSync(() => {
-                setSelectedId(id);
-              });
-            });
-          } else {
-            setSelectedId(id);
-          }
-        },
-        [setSelectedId]
-      ),
+      setSelectedId,
       selectOnMove,
       children
     }
@@ -43,17 +23,12 @@ function Tabs(props) {
 }
 const TabList = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
-  const viewTransitionName = `\u{1F95D}active-stripe-${React.useId().replaceAll(":", "_")}`;
   return /* @__PURE__ */ jsx(
     AkTab.TabList,
     {
       ...rest,
       "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-tab-list", props.className),
-      style: {
-        "--\u{1F95D}tab-active-stripe-view-transition-name": viewTransitionName,
-        ...props.style
-      },
       ref: forwardedRef
     }
   );

package/dist/bricks/TextBox.d.ts

@@ -19,17 +19,26 @@ interface TextBoxInputProps extends Omit<BaseInputProps, "children" | "type"> {
  *
  * Example usage:
  * ```tsx
- * <TextBox.Input defaultValue="Hello" />
+ * <TextBox.Input name="greeting" defaultValue="Hello" />
  * ```
  *
  * To add additional decorations, see `TextBox.Root` component.
  *
- * Works well with the `Field` and `Label` components.
+ * Use with the `Field` components to automatically handle ID associations for
+ * labels and descriptions:
  * ```tsx
- * <Field>
- *   <Label>Enter your name</Label>
- *   <TextBox.Input />
- * </Field>
+ * <Field.Root>
+ *   <Field.Label>First name</Field.Label>
+ *   <Field.Control render={<TextBox.Input name="firstName" />} />
+ * </Field.Root>
+ * ```
+ *
+ * Without the `Field` components you will need to manually associate labels,
+ * descriptions, etc.:
+ * ```tsx
+ * <Label htmlFor="fruit">Fruit</Label>
+ * <TextBox.Input id="fruit" aria-describedby="fruit-description" />
+ * <Description id="fruit-description">Something to include in a fruit salad.</Description>
  * ```
  *
  * Underneath, it's an HTML input, i.e. `<input>`, so it supports the same props, including
@@ -48,12 +57,21 @@ interface TextareaProps extends FocusableProps<"textarea"> {
  * <TextBox.Textarea defaultValue="Hello" />
  * ```
  *
- * Works well with the `Field` and `Label` components.
+ * Use with the `Field` components to automatically handle ID associations for
+ * labels and descriptions:
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Leave a comment, be kind</Field.Label>
+ *   <Field.Control render={<TextBox.Textarea name="comment" />} />
+ * </Field.Root>
+ * ```
+ *
+ * Without the `Field` components you will need to manually associate labels,
+ * descriptions, etc.:
  * ```tsx
- * <Field>
- *   <Label>Leave a comment, be kind</Label>
- *   <TextBox.Textarea />
- * </Field>
+ * <Label htmlFor="fruit">Fruit</Label>
+ * <TextBox.Input id="fruit" aria-describedby="fruit-description" />
+ * <Description id="fruit-description">Something to include in a fruit salad.</Description>
  * ```
  *
  * Underneath, it's an HTML textarea, i.e. `<textarea>`, so it supports the same props, including
@@ -73,15 +91,20 @@ interface TextBoxRootProps extends BaseProps {
  * </TextBox.Root>
  * ```
  *
- * Works well with the `Field` and `Label` components.
+ * Use with the `Field` components to automatically handle ID associations for
+ * labels and descriptions:
  * ```tsx
- * <Field>
- *   <Label>Enter your name</Label>
- *   <TextBox.Root>
- *     <TextBox.Input />
- *     <TextBox.Icon href={…} />
- *   </TextBox.Root>
- * </Field>
+ * <Field.Root>
+ *   <Field.Label>First name</Field.Label>
+ *   <Field.Control
+ *     render={(controlProps) => (
+ *       <TextBox.Root>
+ *         <TextBox.Input name="firstName" {...controlProps} />
+ *         <TextBox.Icon href={…} />
+ *       </TextBox.Root>
+ *     )}
+ *   />
+ * </Field.Root>
  * ```
  */
 declare const TextBoxRoot: React.ForwardRefExoticComponent<TextBoxRootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;

package/dist/bricks/TextBox.js

@@ -3,69 +3,55 @@ import * as React from "react";
 import { Role } from "@ariakit/react/role";
 import { Focusable } from "@ariakit/react/focusable";
 import cx from "classnames";
-import { FieldControl } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
+import { useFieldControlType } from "./Field.internal.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
-    const { id, ...rest } = props;
+    useFieldControlType("textlike");
     const rootContext = React.useContext(TextBoxRootContext);
     const setDisabled = rootContext?.setDisabled;
     React.useEffect(() => {
       setDisabled?.(props.disabled);
     }, [setDisabled, props.disabled]);
     return /* @__PURE__ */ jsx(
-      FieldControl,
+      Role.input,
       {
-        type: "textlike",
-        id,
+        readOnly: props.disabled,
+        ...props,
+        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+        placeholder: props.placeholder ?? " ",
         render: /* @__PURE__ */ jsx(
-          Role.input,
+          Focusable,
           {
-            readOnly: props.disabled,
-            ...rest,
-            className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
-            placeholder: props.placeholder ?? " ",
-            render: /* @__PURE__ */ jsx(
-              Focusable,
-              {
-                accessibleWhenDisabled: true,
-                render: props.render || /* @__PURE__ */ jsx("input", {})
-              }
-            ),
-            ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("input", {})
           }
-        )
+        ),
+        ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
       }
     );
   }
 );
 const TextBoxTextarea = forwardRef(
   (props, forwardedRef) => {
-    const { id, ...rest } = props;
+    useFieldControlType("textlike");
     return /* @__PURE__ */ jsx(
-      FieldControl,
+      Role.textarea,
       {
-        type: "textlike",
-        id,
+        readOnly: props.disabled,
+        ...props,
+        className: cx("\u{1F95D}-text-box", props.className),
+        placeholder: props.placeholder ?? " ",
         render: /* @__PURE__ */ jsx(
-          Role.textarea,
+          Focusable,
           {
-            readOnly: props.disabled,
-            ...rest,
-            className: cx("\u{1F95D}-text-box", props.className),
-            placeholder: props.placeholder ?? " ",
-            render: /* @__PURE__ */ jsx(
-              Focusable,
-              {
-                accessibleWhenDisabled: true,
-                render: props.render || /* @__PURE__ */ jsx("textarea", {})
-              }
-            ),
-            ref: forwardedRef
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("textarea", {})
           }
-        )
+        ),
+        ref: forwardedRef
       }
     );
   }

package/dist/bricks/TreeItem.d.ts

@@ -1,5 +1,4 @@
 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. */
@@ -62,20 +61,42 @@ interface TreeItemRootProps extends Omit<BaseProps, "content" | "children"> {
     /** 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.
+     * The secondary actions available for the tree item. Must be a list of `Tree.ItemAction` components.
      *
      * Example:
      * ```tsx
      * actions={[
+     *   error && <Tree.ItemAction key={…} icon={…} label={…} />,
      *   <Tree.ItemAction key={…} icon={…} label={…} />,
      *   <Tree.ItemAction key={…} icon={…} label={…} />,
      * ]}
      * ```
+     *
+     * Excess actions will automatically get collapsed into an overflow menu.
+     * - Normally, the third action and onwards will overflow.
+     * - When the `error` prop is set, the _second_ action and onwards will overflow.
+     *
+     * The actions are normally hidden until the treeitem is hovered or focused.
+     * When the `error` prop is set, the actions will be made visible by default. The first
+     * action slot can be used to display an error-related action.
+     *
+     * ```tsx
+     * actions={[
+     *   error && <Tree.ItemAction key={…} icon={…} label={…} />,
+     *   <Tree.ItemAction key={…} icon={…} label={…} />,
+     *   <Tree.ItemAction key={…} icon={…} label={…} />,
+     * ]}
+     * ```
+     *
+     * @experimental
      */
     actions?: React.ReactNode[];
     /**
      * Specifies if the tree item is in an error state.
      *
+     * Can be combined with the `actions` prop to display an error-related action. The first
+     * action will be made visible by default.
+     *
      * @default false
      */
     error?: boolean;
@@ -107,23 +128,40 @@ 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>>;
-type IconButtonProps = React.ComponentProps<typeof IconButton>;
-interface TreeItemActionProps extends BaseProps<"button">, Pick<IconButtonProps, "label" | "icon"> {
+interface TreeItemActionProps extends Omit<BaseProps<"button">, "children"> {
+    /**
+     * Label for the action.
+     *
+     * Will be displayed as a tooltip when the action is an icon-button,
+     * otherwise will be displayed as a label inside the menu-item.
+     */
+    label: string;
+    /**
+     * Icon for the action.
+     *
+     * Can be a URL of an SVG from the `@itwin/itwinui-icons` package, or a JSX element.
+     *
+     * Required when the action is displayed as an icon-button (i.e. not overflowing).
+     */
+    icon?: string | React.JSX.Element;
     /**
-     * Controls the visibility of the action.
+     * Controls the visibility of the action (only when the action is displayed as icon-button).
      *
      * 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.
+     * By default, the action is shown only when the treeitem receives hover/focus. When the
+     * treeitem has an `error`, the action will become always visible (i.e. it will default
+     * to `true` when `error` is set).
      */
     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.
+ * displayed as an icon-button or a menu-item (e.g. when overflowing).
  *
- * By default, the action appears only on hover/focus. This can be controlled by the `visible` prop.
+ * 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 };

package/dist/bricks/TreeItem.js

@@ -2,15 +2,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
 import { Role } from "@ariakit/react/role";
+import { PopoverProvider } from "@ariakit/react/popover";
 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, StatusWarning } from "./Icon.js";
+import * as DropdownMenu from "./DropdownMenu.js";
+import { Icon, StatusWarning, MoreHorizontal } from "./Icon.js";
 import { forwardRef } from "./~utils.js";
-import { useEventHandlers } from "./~hooks.js";
+import { useEventHandlers, useSafeContext } from "./~hooks.js";
 import { GhostAligner, useGhostAlignment } from "./~utils.GhostAligner.js";
 const TreeItemContext = React.createContext(void 0);
 const TreeItemRoot = forwardRef(
@@ -63,9 +65,10 @@ const TreeItemRoot = forwardRef(
           () => ({
             level,
             expanded,
-            selected
+            selected,
+            error
           }),
-          [level, expanded, selected]
+          [level, expanded, selected, error]
         ),
         children: /* @__PURE__ */ jsx(
           CompositeItem,
@@ -142,24 +145,89 @@ const TreeItemRoot = forwardRef(
   }
 );
 const TreeItemActions = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
+  const { children, ...rest } = props;
+  const actions = React.Children.toArray(children).filter(Boolean);
+  const { error } = useSafeContext(TreeItemContext);
+  const limit = error ? 2 : 3;
+  return /* @__PURE__ */ jsxs(
     Toolbar,
     {
-      ...props,
+      ...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,
-      children: props.children
+      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
+      ]
     }
   );
 });
+const arrowKeys = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+const TreeItemActionsOverflowMenuContext = React.createContext(false);
+function TreeItemActionsOverflowMenu({ children }) {
+  const [open, setOpen] = React.useState(false);
+  const isArrowKeyPressed = React.useRef(false);
+  return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(
+    DropdownMenu.Root,
+    {
+      open,
+      setOpen: React.useCallback((value) => {
+        if (value && !isArrowKeyPressed.current) {
+          setOpen(true);
+        } else {
+          setOpen(false);
+        }
+      }, []),
+      children: [
+        /* @__PURE__ */ jsx(
+          DropdownMenu.Button,
+          {
+            onKeyDown: (e) => {
+              if (arrowKeys.includes(e.key)) {
+                isArrowKeyPressed.current = true;
+              }
+              queueMicrotask(() => {
+                isArrowKeyPressed.current = false;
+              });
+            },
+            render: /* @__PURE__ */ jsx(TreeItemAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContext.Provider, { value: true, children: /* @__PURE__ */ jsx(DropdownMenu.Content, { children }) })
+      ]
+    }
+  ) });
+}
 const TreeItemAction = forwardRef(
   (props, forwardedRef) => {
-    const { visible, ...rest } = props;
+    const { error } = useSafeContext(TreeItemContext);
+    const {
+      visible = error ? true : void 0,
+      // visible by default during error state
+      label,
+      icon,
+      ...rest
+    } = props;
+    if (React.useContext(TreeItemActionsOverflowMenuContext)) {
+      return /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          ...rest,
+          label,
+          icon,
+          ref: forwardedRef
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       IconButton,
       {
+        label,
+        icon,
         inert: visible === false ? true : void 0,
         ...rest,
         variant: "ghost",

package/dist/bricks/index.d.ts

@@ -10,7 +10,7 @@ export * as DropdownMenu from "./DropdownMenu.js";
 export { Divider } from "./Divider.js";
 export { Icon } from "./Icon.js";
 export { IconButton } from "./IconButton.js";
-export { Field } from "./Field.js";
+export * as Field from "./Field.js";
 export { Kbd } from "./Kbd.js";
 export { Label } from "./Label.js";
 export { ProgressBar } from "./ProgressBar.js";
@@ -19,6 +19,7 @@ export * as Select from "./Select.js";
 export { Spinner } from "./Spinner.js";
 export { Skeleton } from "./Skeleton.js";
 export { Switch } from "./Switch.js";
+export * as Table from "./Table.js";
 export * as Tabs from "./Tabs.js";
 export { Text } from "./Text.js";
 export * as TextBox from "./TextBox.js";

package/dist/bricks/index.js

@@ -11,7 +11,7 @@ import * as DropdownMenu from "./DropdownMenu.js";
 import { Divider } from "./Divider.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { Field } from "./Field.js";
+import * as Field from "./Field.js";
 import { Kbd } from "./Kbd.js";
 import { Label } from "./Label.js";
 import { ProgressBar } from "./ProgressBar.js";
@@ -20,6 +20,7 @@ import * as Select from "./Select.js";
 import { Spinner } from "./Spinner.js";
 import { Skeleton } from "./Skeleton.js";
 import { Switch } from "./Switch.js";
+import * as Table from "./Table.js";
 import * as Tabs from "./Tabs.js";
 import { Text } from "./Text.js";
 import * as TextBox from "./TextBox.js";
@@ -48,6 +49,7 @@ export {
   Skeleton,
   Spinner,
   Switch,
+  Table,
   Tabs,
   Text,
   TextBox,