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

package/dist/bricks/ErrorRegion.js

@@ -0,0 +1,135 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import {
+  DialogProvider,
+  DialogDisclosure,
+  Dialog
+} from "@ariakit/react/dialog";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+import { ChevronDown, Dismiss, StatusWarning } from "./Icon.js";
+import { Text } from "./Text.js";
+import { IconButton } from "./IconButton.js";
+import { Button } from "./Button.js";
+import { useControlledState } from "./~hooks.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+const ErrorRegionRoot = forwardRef(
+  (props, forwardedRef) => {
+    const { label, items, expanded, onExpandedChange, ...rest } = props;
+    const labelId = React.useId();
+    const sectionLabelledBy = props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelId);
+    const [open, setOpen] = useControlledState(
+      false,
+      expanded,
+      onExpandedChange
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", "aria-atomic": true, children: label }),
+      /* @__PURE__ */ jsx(DialogProvider, { open, setOpen, children: /* @__PURE__ */ jsx(
+        Role.section,
+        {
+          ...rest,
+          "aria-labelledby": sectionLabelledBy,
+          className: cx("\u{1F95D}-error-region", props.className),
+          "data-kiwi-visible": !!label,
+          "data-kiwi-expanded": open,
+          ref: forwardedRef,
+          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}-error-region-container", children: [
+            /* @__PURE__ */ jsxs(
+              DialogDisclosure,
+              {
+                className: "\u{1F95D}-error-region-header",
+                render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
+                children: [
+                  /* @__PURE__ */ jsx(StatusWarning, { className: "\u{1F95D}-error-region-icon" }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      id: labelId,
+                      className: "\u{1F95D}-error-region-label",
+                      variant: "body-sm",
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      inert: true,
+                      render: /* @__PURE__ */ jsx("span", {}),
+                      role: void 0,
+                      label: "",
+                      icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+                      variant: "ghost"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Dialog,
+              {
+                className: "\u{1F95D}-error-region-dialog",
+                portal: false,
+                modal: false,
+                autoFocusOnShow: false,
+                "aria-labelledby": labelId,
+                children: /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-items", role: "list", children: items })
+              }
+            )
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
+const ErrorRegionItem = forwardRef(
+  (props, forwardedRef) => {
+    const generatedId = React.useId();
+    const {
+      message,
+      messageId = `${generatedId}-message`,
+      actions,
+      onDismiss,
+      ...rest
+    } = props;
+    const dismissButtonId = `${generatedId}-dismiss`;
+    return /* @__PURE__ */ jsxs(
+      Role.div,
+      {
+        ...rest,
+        role: "listitem",
+        className: cx("\u{1F95D}-error-region-item", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              id: messageId,
+              variant: "body-sm",
+              className: "\u{1F95D}-error-region-item-message",
+              children: message
+            }
+          ),
+          onDismiss && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              id: dismissButtonId,
+              className: "\u{1F95D}-error-region-item-dismiss",
+              variant: "ghost",
+              label: "Dismiss",
+              "aria-labelledby": `${dismissButtonId} ${messageId}`,
+              icon: /* @__PURE__ */ jsx(Dismiss, {}),
+              onClick: onDismiss
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-item-actions", children: actions })
+        ]
+      }
+    );
+  }
+);
+export {
+  ErrorRegionItem as Item,
+  ErrorRegionRoot as Root
+};

package/dist/bricks/Field.d.ts

@@ -50,6 +50,12 @@ interface FieldCollectionItemControlProps extends Pick<CollectionItemProps, "ren
 /**
  * The control component for the field.
  *
+ * Use the `render` prop to render the control component.
+ *
+ * ```tsx
+ * <Field.Control render={<TextBox.Input />} />
+ * ```
+ *
  * If the rendered component uses a compositional API, then use a function
  * within `render` to apply the `controlProps` to the correct sub-component:
  *

package/dist/bricks/Field.js

@@ -34,11 +34,12 @@ const FieldRoot = forwardRef((props, forwardedRef) => {
 const FieldLabel = forwardRef(
   (props, forwardedRef) => {
     const store = useCollectionContext();
-    const renderedItems = useStoreState(store, "renderedItems");
+    const renderedItems = useStoreState(
+      store,
+      "renderedItems"
+    );
     const fieldId = React.useMemo(
-      () => renderedItems?.find(
-        (item) => item.elementType === "control"
-      )?.id,
+      () => renderedItems?.find((item) => item.elementType === "control")?.id,
       [renderedItems]
     );
     const getData = React.useCallback(
@@ -84,7 +85,10 @@ const FieldControl = forwardRef(
     const store = useCollectionContext();
     const generatedId = React.useId();
     const { id = store ? generatedId : void 0, ...rest } = props;
-    const renderedItems = useStoreState(store, "renderedItems");
+    const renderedItems = useStoreState(
+      store,
+      "renderedItems"
+    );
     const describedBy = React.useMemo(() => {
       const idRefList = renderedItems?.filter(
         (item) => item.elementType === "description" || item.elementType === "error"

package/dist/bricks/Icon.d.ts

@@ -74,4 +74,7 @@ export declare const StatusWarning: React.ForwardRefExoticComponent<StatusWarnin
 interface MoreHorizontalProps extends Omit<BaseProps<"svg">, "children"> {
 }
 export declare const MoreHorizontal: React.ForwardRefExoticComponent<MoreHorizontalProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface ChevronDownProps extends Omit<BaseProps<"svg">, "children"> {
+}
+export declare const ChevronDown: React.ForwardRefExoticComponent<ChevronDownProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 export {};

package/dist/bricks/Icon.js

@@ -245,8 +245,32 @@ const MoreHorizontal = forwardRef(
     );
   }
 );
+const ChevronDown = 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}-chevron-down", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
   Checkmark,
+  ChevronDown,
   DisclosureArrow,
   Dismiss,
   Icon,

package/dist/bricks/IconButton.js

@@ -1,19 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import { useToolbarContext, ToolbarItem } from "@ariakit/react/toolbar";
 import { Button } from "./Button.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { Icon } from "./Icon.js";
 import { Tooltip } from "./Tooltip.js";
 import { forwardRef } from "./~utils.js";
+import { Dot } from "./~utils.Dot.js";
 const IconButton = forwardRef(
   (props, forwardedRef) => {
     const { label, icon, isActive, labelVariant, dot, ...rest } = props;
     const baseId = React.useId();
     const labelId = `${baseId}-label`;
     const dotId = `${baseId}-dot`;
-    const toolbar = useToolbarContext();
     const button = /* @__PURE__ */ jsxs(
       Button,
       {
@@ -21,14 +20,12 @@ const IconButton = forwardRef(
         "aria-labelledby": labelId,
         "aria-describedby": dot ? dotId : void 0,
         ...rest,
-        "data-kiwi-dot": dot ? "true" : void 0,
-        render: toolbar ? /* @__PURE__ */ jsx(ToolbarItem, { render: props.render }) : props.render,
         className: cx("\u{1F95D}-icon-button", props.className),
         ref: forwardedRef,
         children: [
           /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }),
           typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
-          dot ? /* @__PURE__ */ jsx(VisuallyHidden, { id: dotId, "aria-hidden": "true", children: dot }) : null
+          dot ? /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-icon-button-dot", children: dot }) : null
         ]
       }
     );

package/dist/bricks/ProgressBar.d.ts

@@ -1,5 +1,11 @@
 import { type BaseProps } from "./~utils.js";
-interface ProgressBarProps extends Omit<BaseProps, "aria-labelledby">, Required<Pick<BaseProps, "aria-labelledby">> {
+interface ProgressBarProps extends Omit<BaseProps, "aria-labelledby"> {
+    /**
+     * Label for the progress bar.
+     *
+     * This prop is required because `role="progressbar"` requires an accessible name.
+     */
+    "aria-labelledby": string;
     /**
      * The size of the progress bar.
      * @default "medium"

package/dist/bricks/Toolbar.d.ts

@@ -0,0 +1,35 @@
+import { type BaseProps } from "./~utils.js";
+interface ToolbarProps extends BaseProps {
+    /** Must be set to `"solid"` for now. */
+    variant: "solid";
+}
+/**
+ * A toolbar for grouping related interactive elements.
+ *
+ * Follows the [ARIA Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) for reducing the number of tab stops.
+ *
+ * Example:
+ * ```jsx
+ * <Toolbar.Group variant="solid">
+ *   <Toolbar.Item render={…} />
+ *   <Toolbar.Item render={…} />
+ *   <Toolbar.Item render={…} />
+ * </Toolbar.Group>
+ * ```
+ */
+declare const ToolbarGroup: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+interface ToolbarItemProps extends Omit<BaseProps<"button">, "render">, Required<Pick<BaseProps, "render">> {
+}
+/**
+ * An item within the toolbar.
+ * Should be used with the `render` prop.
+ *
+ * Example:
+ * ```jsx
+ * <Toolbar.Item
+ *   render={<IconButton variant="ghost" … />}
+ * />
+ * ```
+ */
+declare const ToolbarItem: import("react").ForwardRefExoticComponent<ToolbarItemProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { ToolbarGroup as Group, ToolbarItem as Item };

package/dist/bricks/Toolbar.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Toolbar from "@ariakit/react/toolbar";
+import { forwardRef } from "./~utils.js";
+const ToolbarGroup = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Toolbar.Toolbar,
+    {
+      ...props,
+      className: cx("\u{1F95D}-toolbar", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+const ToolbarItem = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Toolbar.ToolbarItem, { ...props, ref: forwardedRef });
+  }
+);
+export {
+  ToolbarGroup as Group,
+  ToolbarItem as Item
+};

package/dist/bricks/TreeItem.d.ts

@@ -93,13 +93,14 @@ interface TreeItemRootProps extends Omit<BaseProps, "content" | "children"> {
     actions?: React.ReactNode[];
     /**
      * Specifies if the tree item is in an error state.
+     * The id for an associated error message (e.g. `<ErrorRegion.Item>`) can be passed as a string.
      *
-     * Can be combined with the `actions` prop to display an error-related action. The first
-     * action will be made visible by default.
+     * Can be combined with the `actions` prop to display an error-related action (e.g. "Retry").
+     * The first action will be made visible by default.
      *
      * @default false
      */
-    error?: boolean;
+    error?: boolean | string;
 }
 /**
  * A treeitem is a node in a tree structure that may be expanded or collapsed to reveal or hide its descendants.
@@ -155,6 +156,21 @@ interface TreeItemActionProps extends Omit<BaseProps<"button">, "children"> {
      * to `true` when `error` is set).
      */
     visible?: boolean;
+    /**
+     * A small dot displayed in the corner of the action.
+     *
+     * The value of this prop gets used as the button's "accessible description".
+     *
+     * Example:
+     * ```tsx
+     * <Tree.ItemAction
+     *   label="Filter"
+     *   dot="Some filters applied"
+     *   icon={…}
+     * />
+     * ```
+     */
+    dot?: string;
 }
 /**
  * A secondary action for `<Tree.Item>`, to be passed into the `actions` prop. The action is typically

package/dist/bricks/TreeItem.js

@@ -6,11 +6,11 @@ import { PopoverProvider } from "@ariakit/react/popover";
 import {
   CompositeItem
 } from "@ariakit/react/composite";
-import { Toolbar } from "@ariakit/react/toolbar";
+import { Toolbar, ToolbarItem } from "@ariakit/react/toolbar";
 import * as ListItem from "./~utils.ListItem.js";
 import { IconButton } from "./IconButton.js";
 import * as DropdownMenu from "./DropdownMenu.js";
-import { Icon, StatusWarning, MoreHorizontal } from "./Icon.js";
+import { ChevronDown, Icon, StatusWarning, MoreHorizontal } from "./Icon.js";
 import { forwardRef } from "./~utils.js";
 import { useEventHandlers, useSafeContext } from "./~hooks.js";
 import { GhostAligner, useGhostAlignment } from "./~utils.GhostAligner.js";
@@ -51,13 +51,22 @@ const TreeItemRoot = forwardRef(
     const labelId = React.useId();
     const descriptionId = React.useId();
     const decorationId = React.useId();
+    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]);
+    }, [
+      unstable_decorations,
+      icon,
+      decorationId,
+      description,
+      descriptionId,
+      errorId
+    ]);
     return /* @__PURE__ */ jsx(
       TreeItemContext.Provider,
       {
@@ -210,6 +219,7 @@ const TreeItemAction = forwardRef(
       // visible by default during error state
       label,
       icon,
+      dot,
       ...rest
     } = props;
     if (React.useContext(TreeItemActionsOverflowMenuContext)) {
@@ -219,21 +229,28 @@ const TreeItemAction = forwardRef(
           ...rest,
           label,
           icon,
+          unstable_dot: dot,
           ref: forwardedRef
         }
       );
     }
     return /* @__PURE__ */ jsx(
-      IconButton,
+      ToolbarItem,
       {
-        label,
-        icon,
-        inert: visible === false ? true : void 0,
-        ...rest,
-        variant: "ghost",
-        className: cx("\u{1F95D}-tree-item-action", props.className),
-        "data-kiwi-visible": visible,
-        ref: forwardedRef
+        render: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label,
+            icon,
+            inert: visible === false ? true : void 0,
+            ...rest,
+            dot,
+            variant: "ghost",
+            className: cx("\u{1F95D}-tree-item-action", props.className),
+            "data-kiwi-visible": visible,
+            ref: forwardedRef
+          }
+        )
       }
     );
   }
@@ -256,30 +273,7 @@ const TreeItemExpander = forwardRef(
         "data-kiwi-variant": "ghost",
         "data-kiwi-ghost-align": useGhostAlignment(),
         ref: forwardedRef,
-        children: /* @__PURE__ */ jsx(TreeChevron, {})
-      }
-    );
-  }
-);
-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
+        children: /* @__PURE__ */ jsx(ChevronDown, {})
       }
     );
   }

package/dist/bricks/index.d.ts

@@ -7,6 +7,7 @@ export { Checkbox } from "./Checkbox.js";
 export { Chip } from "./Chip.js";
 export { Description } from "./Description.js";
 export * as DropdownMenu from "./DropdownMenu.js";
+export * as unstable_ErrorRegion from "./ErrorRegion.js";
 export { Divider } from "./Divider.js";
 export { Icon } from "./Icon.js";
 export { IconButton } from "./IconButton.js";
@@ -23,6 +24,7 @@ export * as Table from "./Table.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 * as unstable_Toolbar from "./Toolbar.js";
 export { Tooltip } from "./Tooltip.js";
+export * as Tree from "./Tree.js";
 export { VisuallyHidden } from "./VisuallyHidden.js";

package/dist/bricks/index.js

@@ -8,6 +8,7 @@ import { Checkbox } from "./Checkbox.js";
 import { Chip } from "./Chip.js";
 import { Description } from "./Description.js";
 import * as DropdownMenu from "./DropdownMenu.js";
+import * as unstable_ErrorRegion from "./ErrorRegion.js";
 import { Divider } from "./Divider.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
@@ -24,8 +25,9 @@ import * as Table from "./Table.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 * as unstable_Toolbar from "./Toolbar.js";
 import { Tooltip } from "./Tooltip.js";
+import * as Tree from "./Tree.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 export {
   Anchor,
@@ -55,5 +57,7 @@ export {
   TextBox,
   Tooltip,
   Tree,
-  VisuallyHidden
+  VisuallyHidden,
+  unstable_ErrorRegion,
+  unstable_Toolbar
 };