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

package/dist/bricks/DropdownMenu.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import cx from "classnames";
 import * as ListItem from "./~utils.ListItem.js";
 import { Button } from "./Button.js";
+import { Button as ButtonAk } from "@ariakit/react/button";
 import { Kbd } from "./Kbd.js";
 import { Checkmark, DisclosureArrow, Icon } from "./Icon.js";
 import {
@@ -19,7 +20,8 @@ import {
 } from "@ariakit/react/menu";
 import { useStoreState } from "@ariakit/react/store";
 import { predefinedSymbols } from "./Kbd.internal.js";
-function DropdownMenu(props) {
+import { usePopoverContext } from "@ariakit/react/popover";
+function DropdownMenuRoot(props) {
   const {
     children,
     placement,
@@ -34,6 +36,7 @@ function DropdownMenu(props) {
       defaultOpen: defaultOpenProp,
       open: openProp,
       setOpen: setOpenProp,
+      popover: usePopoverContext(),
       children
     }
   );
@@ -83,13 +86,23 @@ const DropdownMenuItem = forwardRef(
       MenuItem,
       {
         accessibleWhenDisabled: true,
-        ...rest,
-        render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
-        className: cx("\u{1F95D}-dropdown-menu-item", props.className),
-        ref: forwardedRef,
+        render: /* @__PURE__ */ jsx(
+          ListItem.Root,
+          {
+            render: /* @__PURE__ */ jsx(
+              ButtonAk,
+              {
+                accessibleWhenDisabled: true,
+                ...rest,
+                className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+                ref: forwardedRef
+              }
+            )
+          }
+        ),
         children: [
           icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
-          /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
+          /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
           shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null
         ]
       }
@@ -107,6 +120,7 @@ const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     ListItem.Decoration,
     {
+      render: /* @__PURE__ */ jsx("span", {}),
       ...rest,
       className: cx("\u{1F95D}-dropdown-menu-item-shortcuts", props.className),
       ref: forwardedRef,
@@ -136,29 +150,53 @@ const DropdownMenuIcon = forwardRef(
           Icon,
           {
             href: typeof icon === "string" ? icon : void 0,
-            render: React.isValidElement(icon) ? icon : void 0
+            render: React.isValidElement(icon) ? icon : void 0,
+            ...rest,
+            ref: forwardedRef
           }
-        ),
-        ...rest,
-        ref: forwardedRef
+        )
       }
     );
   }
 );
 const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
-  const { label, icon, ...rest } = props;
+  const {
+    label,
+    icon,
+    defaultChecked,
+    checked,
+    onChange,
+    name,
+    value = defaultChecked ? "on" : void 0,
+    // For defaultChecked to work
+    ...rest
+  } = props;
   return /* @__PURE__ */ jsxs(
     MenuItemCheckbox,
     {
       accessibleWhenDisabled: true,
-      value: props.defaultChecked ? "on" : void 0,
-      ...rest,
-      render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
-      className: cx("\u{1F95D}-dropdown-menu-item", props.className),
-      ref: forwardedRef,
+      defaultChecked,
+      checked,
+      name,
+      value,
+      onChange,
+      render: /* @__PURE__ */ jsx(
+        ListItem.Root,
+        {
+          render: /* @__PURE__ */ jsx(
+            ButtonAk,
+            {
+              accessibleWhenDisabled: true,
+              ...rest,
+              className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+              ref: forwardedRef
+            }
+          )
+        }
+      ),
       children: [
         icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
-        /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
+        /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
         /* @__PURE__ */ jsx(
           ListItem.Decoration,
           {
@@ -174,5 +212,5 @@ export {
   DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
-  DropdownMenu as Root
+  DropdownMenuRoot as Root
 };

package/dist/bricks/Field.d.ts

@@ -1,53 +1,89 @@
 import * as React from "react";
-import { useCollectionStore, type CollectionItemProps } from "@ariakit/react/collection";
+import { type CollectionItemProps } from "@ariakit/react/collection";
 import { type BaseProps } from "./~utils.js";
-interface FieldProps extends BaseProps {
+interface FieldRootProps extends BaseProps {
     /**
      * Allows overriding the default block layout for text controls.
      */
     layout?: "inline";
 }
 /**
- * A container for form controls. It manages ID associations provides a consistent layout and spacing.
+ * A container for form controls. It manages ID associations, and provides a
+ * consistent layout and spacing.
  *
  * Example:
  * ```tsx
- * <Field>
- *   <Label>Label</Label>
- *   <TextBox.Input />
- * </Field>
+ * <Field.Root>
+ *   <Field.Label>Label</Field.Label>
+ *   <Field.Control render={<TextBox.Input />} />
+ * </Field.Root>
  * ```
  *
- * Supports a `layout` prop, which can be set to `inline` to align the label and control horizontally.
+ * Supports a `layout` prop, which can be set to `inline` to align the label and
+ * control horizontally.
  *
- * Should contain a `Label` component paired with a form control. Supported form controls include:
+ * Should contain a `Field.Label` component paired with a form control.
+ *
+ * Supported form controls include:
  * - `TextBox.Input`
  * - `TextBox.Textarea`
  * - `Checkbox`
  * - `Radio`
  * - `Switch`
  */
-export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof useCollectionStore>["item"]>>;
-interface FieldCollectionStoreItem extends CollectionStoreItem {
-    /** The type of field element being tracked */
-    elementType: "label" | "control" | "description";
-    /** If a control, the type of control. */
-    controlType?: "textlike" | "checkable";
-}
-interface FieldCollectionItemControlProps extends Pick<CollectionItemProps, "render" | "id"> {
-    type: FieldCollectionStoreItem["controlType"];
-}
+declare const FieldRoot: React.ForwardRefExoticComponent<FieldRootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 /**
- * An element tracked as a control in the `Field`’s collection.
+ * A label for the field’s control element. This is automatically associated
+ * with the control’s `id`.
  */
-export declare function FieldControl(props: FieldCollectionItemControlProps): import("react/jsx-runtime").JSX.Element;
+declare const FieldLabel: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 /**
- * An element tracked as a label in the `Field`’s collection.
+ * A description for the field’s control element. This is automatically
+ * associated with the control.
+ *
+ * Should not include content without an adequate text alternative (e.g.
+ * interactive elements).
  */
-export declare function FieldLabel(props: Pick<CollectionItemProps, "render">): import("react/jsx-runtime").JSX.Element;
+declare const FieldDescription: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface FieldCollectionItemControlProps extends Pick<CollectionItemProps, "render" | "id"> {
+}
 /**
- * An element tracked as a description in the `Field`’s collection.
+ * The control component for the field.
+ *
+ * If the rendered component uses a compositional API, then use a function
+ * within `render` to apply the `controlProps` to the correct sub-component:
+ *
+ * ```tsx
+ * <Field.Control
+ *   render={(controlProps) => (
+ *     <TextBox.Root>
+ *       <TextBox.Icon href={placeholder} />
+ *       <TextBox.Input {...controlProps} />
+ *     </TextBox.Root>
+ *   )}
+ * />
+ * ```
+ *
+ * If you need a custom `id` set for the control, set it on this component
+ * instead of the control component within `render`.
+ *
+ * ```tsx
+ * <Field.Control id="custom" render={<TextBox.Input />} />
+ * ```
+ */
+declare const FieldControl: React.ForwardRefExoticComponent<FieldCollectionItemControlProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+/**
+ * An associated error message for a field. When used within `<Field.Root>`, the
+ * associated form control will be rendered with `aria-invalid="true"`.
+ *
+ * Example:
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Label</Field.Label>
+ *   <Field.Control render={<TextBox.Input />} />
+ *   <Field.ErrorMessage>Something is wrong!</Field.ErrorMessage>
+ * </Field.Root>
+ * ```
  */
-export declare function FieldDescription(props: Pick<CollectionItemProps, "render" | "id">): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const FieldErrorMessage: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { FieldRoot as Root, FieldControl as Control, FieldLabel as Label, FieldDescription as Description, FieldErrorMessage as ErrorMessage, };

package/dist/bricks/Field.internal.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { useCollectionStore, type CollectionProps } from "@ariakit/react/collection";
+/**
+ * Ariakit’s unexported `CollectionStoreItem` type inferred.
+ * @private
+ */
+export type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof useCollectionStore>["item"]>>;
+/**
+ * An extension of `CollectionStoreItem` to track element and control types.
+ * @private
+ */
+export interface FieldCollectionStoreItem extends CollectionStoreItem {
+    /** The type of field element being tracked */
+    elementType: "label" | "control" | "description" | "error";
+    /** If a control, the type of control. */
+    controlType?: "textlike" | "checkable";
+}
+/**
+ * A collection that tracks labels, controls, and descriptions which provides
+ * information about IDs, placement of labels, and control types.
+ * @private
+ */
+export declare function FieldCollection(props: Pick<CollectionProps, "render">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Control type context for the field.
+ * @private
+ */
+export declare const FieldControlTypeContext: React.Context<React.Dispatch<React.SetStateAction<"textlike" | "checkable" | undefined>> | undefined>;
+/**
+ * Sets the control type for the field. Necessary for layout.
+ * @private
+ */
+export declare function useFieldControlType(controlType: NonNullable<FieldCollectionStoreItem["controlType"]>): void;

package/dist/bricks/Field.internal.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  useCollectionStore,
+  Collection
+} from "@ariakit/react/collection";
+import { useStoreState } from "@ariakit/react/store";
+function FieldCollection(props) {
+  const fieldElementCollection = useCollectionStore({
+    defaultItems: []
+  });
+  const renderedItems = useStoreState(fieldElementCollection, "renderedItems");
+  const [controlType, controlIndex] = React.useMemo(() => {
+    const controlIndex2 = renderedItems.findIndex(
+      (item) => item.elementType === "control"
+    );
+    return [renderedItems[controlIndex2]?.controlType, controlIndex2];
+  }, [renderedItems]);
+  const labelPlacement = React.useMemo(() => {
+    const labelIndex = renderedItems.findIndex(
+      (item) => item.elementType === "label"
+    );
+    if (controlIndex === -1 || labelIndex === -1) return;
+    return labelIndex < controlIndex ? "before" : "after";
+  }, [renderedItems, controlIndex]);
+  return /* @__PURE__ */ jsx(
+    Collection,
+    {
+      ...props,
+      store: fieldElementCollection,
+      "data-kiwi-label-placement": labelPlacement,
+      "data-kiwi-control-type": controlType
+    }
+  );
+}
+const FieldControlTypeContext = React.createContext(void 0);
+function useFieldControlType(controlType) {
+  const setControlType = React.useContext(FieldControlTypeContext);
+  React.useEffect(() => {
+    setControlType?.(controlType);
+  }, [controlType, setControlType]);
+}
+export {
+  FieldCollection,
+  FieldControlTypeContext,
+  useFieldControlType
+};

package/dist/bricks/Field.js

@@ -3,14 +3,18 @@ import * as React from "react";
 import cx from "classnames";
 import { Role } from "@ariakit/react/role";
 import {
-  useCollectionStore,
-  Collection,
   useCollectionContext,
   CollectionItem
 } from "@ariakit/react/collection";
 import { useStoreState } from "@ariakit/react/store";
 import { forwardRef } from "./~utils.js";
-const Field = forwardRef((props, forwardedRef) => {
+import {
+  FieldCollection,
+  FieldControlTypeContext
+} from "./Field.internal.js";
+import { Label } from "./Label.js";
+import { Description } from "./Description.js";
+const FieldRoot = forwardRef((props, forwardedRef) => {
   const { layout, ...rest } = props;
   return /* @__PURE__ */ jsx(
     FieldCollection,
@@ -27,75 +31,40 @@ const Field = forwardRef((props, forwardedRef) => {
     }
   );
 });
-function FieldCollection(props) {
-  const fieldElementCollection = useCollectionStore({
-    defaultItems: []
-  });
-  const renderedItems = useStoreState(fieldElementCollection, "renderedItems");
-  const [controlType, controlIndex] = React.useMemo(() => {
-    const controlIndex2 = renderedItems.findIndex(
-      (item) => item.elementType === "control"
+const FieldLabel = forwardRef(
+  (props, forwardedRef) => {
+    const store = useCollectionContext();
+    const renderedItems = useStoreState(store, "renderedItems");
+    const fieldId = React.useMemo(
+      () => renderedItems?.find(
+        (item) => item.elementType === "control"
+      )?.id,
+      [renderedItems]
     );
-    return [renderedItems[controlIndex2]?.controlType, controlIndex2];
-  }, [renderedItems]);
-  const labelPlacement = React.useMemo(() => {
-    const labelIndex = renderedItems.findIndex(
-      (item) => item.elementType === "label"
+    const getData = React.useCallback(
+      (data) => ({
+        ...data,
+        elementType: "label"
+      }),
+      []
     );
-    if (controlIndex === -1 || labelIndex === -1) return;
-    return labelIndex < controlIndex ? "before" : "after";
-  }, [renderedItems, controlIndex]);
-  return /* @__PURE__ */ jsx(
-    Collection,
-    {
-      ...props,
-      store: fieldElementCollection,
-      "data-kiwi-label-placement": labelPlacement,
-      "data-kiwi-control-type": controlType
-    }
-  );
-}
-function FieldControl(props) {
-  const store = useCollectionContext();
+    return /* @__PURE__ */ jsx(
+      CollectionItem,
+      {
+        getItem: getData,
+        render: /* @__PURE__ */ jsx(Label, { ...props, htmlFor: fieldId }),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const FieldDescription = forwardRef((props, forwardedRef) => {
   const generatedId = React.useId();
-  const { id = store ? generatedId : void 0, type, ...rest } = props;
-  const renderedItems = useStoreState(store, "renderedItems");
-  const describedBy = React.useMemo(() => {
-    const idRefList = renderedItems?.filter(
-      (item) => item.elementType === "description"
-    )?.map((item) => item.id).join(" ");
-    return idRefList || void 0;
-  }, [renderedItems]);
-  const getData = React.useCallback(
-    (data) => ({
-      ...data,
-      elementType: "control",
-      controlType: type
-    }),
-    [type]
-  );
-  return /* @__PURE__ */ jsx(
-    CollectionItem,
-    {
-      id,
-      getItem: getData,
-      render: /* @__PURE__ */ jsx(Role, { ...rest, "aria-describedby": describedBy })
-    }
-  );
-}
-function FieldLabel(props) {
-  const store = useCollectionContext();
-  const renderedItems = useStoreState(store, "renderedItems");
-  const fieldId = React.useMemo(
-    () => renderedItems?.find(
-      (item) => item.elementType === "control"
-    )?.id,
-    [renderedItems]
-  );
+  const { id = generatedId, ...rest } = props;
   const getData = React.useCallback(
     (data) => ({
       ...data,
-      elementType: "label"
+      elementType: "description"
     }),
     []
   );
@@ -103,25 +72,83 @@ function FieldLabel(props) {
     CollectionItem,
     {
       getItem: getData,
-      render: /* @__PURE__ */ jsx(Role.label, { ...props, htmlFor: fieldId })
+      id,
+      render: /* @__PURE__ */ jsx(Description, { ...rest }),
+      ref: forwardedRef
     }
   );
-}
-function FieldDescription(props) {
-  const generatedId = React.useId();
-  const { id = generatedId, ...rest } = props;
-  const getData = React.useCallback(
-    (data) => ({
-      ...data,
-      elementType: "description"
-    }),
-    []
-  );
-  return /* @__PURE__ */ jsx(CollectionItem, { ...rest, id, getItem: getData });
-}
+});
+const FieldControl = forwardRef(
+  (props, forwardedRef) => {
+    const [controlType, setControlType] = React.useState();
+    const store = useCollectionContext();
+    const generatedId = React.useId();
+    const { id = store ? generatedId : void 0, ...rest } = props;
+    const renderedItems = useStoreState(store, "renderedItems");
+    const describedBy = React.useMemo(() => {
+      const idRefList = renderedItems?.filter(
+        (item) => item.elementType === "description" || item.elementType === "error"
+      )?.map((item) => item.id).join(" ");
+      return idRefList || void 0;
+    }, [renderedItems]);
+    const getData = React.useCallback(
+      (data) => ({
+        ...data,
+        elementType: "control",
+        controlType
+      }),
+      [controlType]
+    );
+    const invalid = React.useMemo(
+      () => renderedItems?.some(
+        (item) => item.elementType === "error"
+      ),
+      [renderedItems]
+    );
+    return /* @__PURE__ */ jsx(FieldControlTypeContext.Provider, { value: setControlType, children: /* @__PURE__ */ jsx(
+      CollectionItem,
+      {
+        id,
+        getItem: getData,
+        render: /* @__PURE__ */ jsx(
+          Role,
+          {
+            ...rest,
+            "aria-invalid": invalid ? "true" : void 0,
+            "aria-describedby": describedBy
+          }
+        ),
+        ref: forwardedRef
+      }
+    ) });
+  }
+);
+const FieldErrorMessage = forwardRef(
+  (props, forwardedRef) => {
+    const generatedId = React.useId();
+    const { id = generatedId, ...rest } = props;
+    const getData = React.useCallback(
+      (data) => ({
+        ...data,
+        elementType: "error"
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsx(
+      CollectionItem,
+      {
+        id,
+        getItem: getData,
+        render: /* @__PURE__ */ jsx(Description, { ...rest, tone: "critical" }),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
-  Field,
-  FieldControl,
-  FieldDescription,
-  FieldLabel
+  FieldControl as Control,
+  FieldDescription as Description,
+  FieldErrorMessage as ErrorMessage,
+  FieldLabel as Label,
+  FieldRoot as Root
 };

package/dist/bricks/Icon.d.ts

@@ -71,4 +71,7 @@ export declare const Dismiss: React.ForwardRefExoticComponent<DismissProps & Rea
 interface StatusWarningProps extends Omit<BaseProps<"svg">, "children"> {
 }
 export declare const StatusWarning: React.ForwardRefExoticComponent<StatusWarningProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface MoreHorizontalProps extends Omit<BaseProps<"svg">, "children"> {
+}
+export declare const MoreHorizontal: React.ForwardRefExoticComponent<MoreHorizontalProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 export {};

package/dist/bricks/Icon.js

@@ -215,10 +215,41 @@ const StatusWarning = forwardRef(
     );
   }
 );
+const MoreHorizontal = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Role.svg,
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            render: props.render,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fill: "currentColor",
+                fillRule: "evenodd",
+                d: "M3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
   Checkmark,
   DisclosureArrow,
   Dismiss,
   Icon,
+  MoreHorizontal,
   StatusWarning
 };

package/dist/bricks/Label.d.ts

@@ -2,24 +2,17 @@ import { type BaseProps } from "./~utils.js";
 interface LabelProps extends BaseProps<"label"> {
 }
 /**
- * A styled wrapper over the HTML `<label>` element, used for labelling form controls.
+ * A styled wrapper over the HTML `<label>` element, used for labelling form
+ * controls.
  *
- * Can be used standalone:
-
+ * Example usage:
  * ```tsx
  * <Label htmlFor="my-input">Label</Label>
  * <TextBox.Input id="my-input" />
  * ```
  *
- * Or within a `Field` component to automatically manage ID associations:
- *
- * ```tsx
- * <Field>
- *   <Label>Label</Label>
- *   <TextBox.Input />
- * </Field>
- * ```
- *
+ * See `Field.Label` for convenient usage with form controls (e.g. automatic
+ * association with adjacent form control).
  */
 export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLElement | HTMLLabelElement>>;
 export {};

package/dist/bricks/Label.js

@@ -2,19 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
-import { FieldLabel } from "./Field.js";
 const Label = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    FieldLabel,
+    Role.label,
     {
-      render: /* @__PURE__ */ jsx(
-        Role.label,
-        {
-          ...props,
-          className: cx("\u{1F95D}-label", props.className),
-          ref: forwardedRef
-        }
-      )
+      ...props,
+      className: cx("\u{1F95D}-label", props.className),
+      ref: forwardedRef
     }
   );
 });