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

package/dist/bricks/Label.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import cx from "classnames";
 import { Role } from "@ariakit/react/role";
+import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Label = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(

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">> {
+import type { BaseProps } from "./~utils.js";
+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/Radio.d.ts

@@ -1,5 +1,5 @@
-import { type RadioProps as AkRadioProps } from "@ariakit/react/radio";
-import { type FocusableProps } from "./~utils.js";
+import type { RadioProps as AkRadioProps } from "@ariakit/react/radio";
+import type { FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
 type RadioOwnProps = Pick<AkRadioProps, "value" | "checked" | "onChange">;
 interface RadioProps extends InputBaseProps, RadioOwnProps {

package/dist/bricks/Radio.js

@@ -1,10 +1,8 @@
 import { jsx } from "react/jsx-runtime";
+import { Radio as AkRadio } from "@ariakit/react/radio";
 import cx from "classnames";
-import {
-  Radio as AkRadio
-} from "@ariakit/react/radio";
-import { forwardRef } from "./~utils.js";
 import { useFieldControlType } from "./Field.internal.js";
+import { forwardRef } from "./~utils.js";
 const Radio = forwardRef((props, forwardedRef) => {
   useFieldControlType("checkable");
   return /* @__PURE__ */ jsx(

package/dist/bricks/Root.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface RootProps extends BaseProps {
     /**
      * The color scheme to use for all components under the Root.

package/dist/bricks/Root.js

@@ -1,11 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { Role } from "@ariakit/react/role";
 import { PortalContext } from "@ariakit/react/portal";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 import foundationsCss from "../foundations/styles.css.js";
+import {
+  HtmlSanitizerContext,
+  RootNodeContext,
+  spriteSheetId,
+  useRootNode
+} from "./Root.internal.js";
 import bricksCss from "./styles.css.js";
+import { useLayoutEffect, useMergedRefs } from "./~hooks.js";
 import {
   forwardRef,
   getOwnerDocument,
@@ -13,13 +20,6 @@ import {
   isBrowser,
   isDocument
 } from "./~utils.js";
-import { useLayoutEffect, useMergedRefs } from "./~hooks.js";
-import {
-  HtmlSanitizerContext,
-  RootNodeContext,
-  spriteSheetId,
-  useRootNode
-} from "./Root.internal.js";
 const css = foundationsCss + bricksCss;
 const Root = forwardRef((props, forwardedRef) => {
   const {
@@ -187,7 +187,7 @@ function InlineSpriteSheet() {
 }
 function loadFonts(rootNode) {
   const ownerWindow = getWindow(rootNode);
-  if (!ownerWindow || Array.from(ownerWindow.document.fonts).some(
+  if (!ownerWindow?.document?.fonts || Array.from(ownerWindow.document.fonts).some(
     (font) => font.family === "InterVariable"
   )) {
     return;

package/dist/bricks/Select.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type FocusableProps } from "./~utils.js";
+import type { FocusableProps } from "./~utils.js";
 /**
  * Compound component for a select element, which allows the user to select a value from a list of options.
  *

package/dist/bricks/Select.js

@@ -1,13 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import cx from "classnames";
 import { Role } from "@ariakit/react/role";
-import {
-  forwardRef,
-  isBrowser
-} from "./~utils.js";
-import { DisclosureArrow } from "./Icon.js";
+import cx from "classnames";
+import * as React from "react";
 import { useFieldControlType } from "./Field.internal.js";
+import { DisclosureArrow } from "./Icon.js";
+import { forwardRef, isBrowser } from "./~utils.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });

package/dist/bricks/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface SkeletonPropsBase extends Omit<BaseProps, "children"> {
 }
 /**

package/dist/bricks/Spinner.d.ts

@@ -1,4 +1,4 @@
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface SpinnerProps extends BaseProps {
     /**
      * A text alternative for the spinner.

package/dist/bricks/Switch.d.ts

@@ -1,5 +1,5 @@
-import { type CheckboxProps as AkCheckboxProps } from "@ariakit/react/checkbox";
-import { type FocusableProps } from "./~utils.js";
+import type { CheckboxProps as AkCheckboxProps } from "@ariakit/react/checkbox";
+import type { FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
 type CheckboxOwnProps = Pick<AkCheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
 interface SwitchProps extends InputBaseProps, CheckboxOwnProps {

package/dist/bricks/Switch.js

@@ -1,10 +1,8 @@
 import { jsx } from "react/jsx-runtime";
+import { Checkbox as AkCheckbox } from "@ariakit/react/checkbox";
 import cx from "classnames";
-import {
-  Checkbox as AkCheckbox
-} from "@ariakit/react/checkbox";
-import { forwardRef } from "./~utils.js";
 import { useFieldControlType } from "./Field.internal.js";
+import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
   (props, forwardedRef) => {
     useFieldControlType("checkable");

package/dist/bricks/Table.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface HtmlTableProps extends BaseProps {
 }
 /**

package/dist/bricks/Table.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Role } from "@ariakit/react/role";
-import * as React from "react";
 import cx from "classnames";
-import { forwardRef } from "./~utils.js";
+import * as React from "react";
 import { useMergedRefs, useSafeContext } from "./~hooks.js";
+import { forwardRef } from "./~utils.js";
 const TableContext = React.createContext(void 0);
 const TableHeaderContext = React.createContext(false);
 const HtmlTable = forwardRef((props, forwardedRef) => {

package/dist/bricks/Tabs.d.ts

@@ -1,5 +1,5 @@
 import * as AkTab from "@ariakit/react/tab";
-import { type FocusableProps, type BaseProps } from "./~utils.js";
+import type { BaseProps, FocusableProps } from "./~utils.js";
 interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
 }
 /**

package/dist/bricks/Tabs.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import cx from "classnames";
 import * as AkTab from "@ariakit/react/tab";
+import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 function Tabs(props) {
   const {

package/dist/bricks/Text.d.ts

@@ -1,4 +1,4 @@
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface TextProps extends BaseProps {
     /**
      * The typography variant to use.

package/dist/bricks/TextBox.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { type FocusableProps, type BaseProps } from "./~utils.js";
+import type { BaseProps, FocusableProps } from "./~utils.js";
 interface BaseInputProps extends FocusableProps<"input"> {
 }
 interface TextBoxInputProps extends Omit<BaseInputProps, "children" | "type"> {

package/dist/bricks/TextBox.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { Role } from "@ariakit/react/role";
 import { Focusable } from "@ariakit/react/focusable";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
+import * as React from "react";
+import { useFieldControlType } from "./Field.internal.js";
 import { Icon } from "./Icon.js";
-import { useMergedRefs } from "./~hooks.js";
+import { useEventHandlers, useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
-import { useFieldControlType } from "./Field.internal.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
     useFieldControlType("textlike");
@@ -70,14 +70,12 @@ const TextBoxRoot = forwardRef(
             ...props,
             "data-kiwi-disabled": disabled,
             className: cx("\u{1F95D}-text-box", props.className),
-            onPointerDown: (e) => {
-              props.onPointerDown?.(e);
-              if (e.defaultPrevented) return;
+            onPointerDown: useEventHandlers(props.onPointerDown, (e) => {
               if (disabled) return;
               if (e.target !== e.currentTarget) return;
               e.preventDefault();
               inputRef.current?.focus();
-            },
+            }),
             ref: forwardedRef
           }
         )

package/dist/bricks/Toolbar.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+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: React.ForwardRefExoticComponent<ToolbarProps & 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: React.ForwardRefExoticComponent<ToolbarItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { ToolbarGroup as Group, ToolbarItem as Item };

package/dist/bricks/Toolbar.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import * as Toolbar from "@ariakit/react/toolbar";
+import cx from "classnames";
+import * as React from "react";
+import { IconButtonContext } from "./IconButton.internal.js";
+import { forwardRef } from "./~utils.js";
+const ToolbarGroup = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(IconButtonContext, { value: React.useMemo(() => ({ iconSize: "large" }), []), children: /* @__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/Tooltip.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as AkTooltip from "@ariakit/react/tooltip";
-import { type FocusableProps } from "./~utils.js";
+import * as React from "react";
+import type { FocusableProps } from "./~utils.js";
 interface TooltipProps extends Omit<FocusableProps<"div">, "content">, Pick<AkTooltip.TooltipProps, "open" | "unmountOnHide">, Pick<AkTooltip.TooltipProviderProps, "defaultOpen" | "setOpen"> {
     /**
      * The content to be displayed inside the tooltip when the trigger element is hovered or focused.

package/dist/bricks/Tooltip.js

@@ -1,10 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import cx from "classnames";
-import * as AkTooltip from "@ariakit/react/tooltip";
 import { useStoreState } from "@ariakit/react/store";
-import { forwardRef } from "./~utils.js";
+import * as AkTooltip from "@ariakit/react/tooltip";
+import cx from "classnames";
+import * as React from "react";
 import { usePopoverApi } from "./~hooks.js";
+import { forwardRef } from "./~utils.js";
 const Tooltip = forwardRef(
   (props, forwardedRef) => {
     const generatedId = React.useId();

package/dist/bricks/Tree.d.ts

@@ -1,5 +1,5 @@
-import { type BaseProps } from "./~utils.js";
-import { Root as TreeItemRoot, Action as TreeItemAction } from "./TreeItem.js";
+import { Action as TreeItemAction, Root as TreeItemRoot } from "./TreeItem.js";
+import type { BaseProps } from "./~utils.js";
 interface TreeProps extends BaseProps {
 }
 /**

package/dist/bricks/Tree.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import cx from "classnames";
+import { Composite, useCompositeStore } from "@ariakit/react/composite";
 import { Role } from "@ariakit/react/role";
-import { useCompositeStore, Composite } from "@ariakit/react/composite";
+import cx from "classnames";
+import { Action as TreeItemAction, Root as TreeItemRoot } from "./TreeItem.js";
 import { forwardRef } from "./~utils.js";
-import { Root as TreeItemRoot, Action as TreeItemAction } from "./TreeItem.js";
 const Tree = forwardRef((props, forwardedRef) => {
   const composite = useCompositeStore({ orientation: "vertical" });
   return /* @__PURE__ */ jsx(

package/dist/bricks/TreeItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type BaseProps } from "./~utils.js";
-interface TreeItemRootProps extends Omit<BaseProps, "content" | "children"> {
+import type { BaseProps } from "./~utils.js";
+interface TreeItemProps 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. */
@@ -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.
@@ -127,7 +128,7 @@ 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>>;
+declare const TreeItem: React.NamedExoticComponent<TreeItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 interface TreeItemActionProps extends Omit<BaseProps<"button">, "children"> {
     /**
      * Label for the action.
@@ -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
@@ -163,5 +179,5 @@ interface TreeItemActionProps extends Omit<BaseProps<"button">, "children"> {
  * 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 };
+declare const TreeItemAction: React.NamedExoticComponent<TreeItemActionProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { TreeItem as Root, TreeItemAction as Action };