@itwin/itwinui-react 5.0.0-alpha.4 → 5.0.0-alpha.6

package/dist/bricks/Description.js

@@ -1,23 +1,25 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { forwardRef } from "./~utils.js";
 import cx from "classnames";
 import { Text } from "./Text.js";
-import { useFieldRegisterDescribedBy } from "./Field.js";
+import { FieldDescription } from "./Field.js";
 const Description = forwardRef(
   (props, forwardedRef) => {
-    const generatedId = React.useId();
-    const { id = generatedId, tone, ...rest } = props;
-    useFieldRegisterDescribedBy(id);
+    const { id, tone, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      Text,
+      FieldDescription,
       {
-        ...rest,
         id,
-        variant: "caption-md",
-        "data-kiwi-tone": tone ?? "neutral",
-        className: cx("\u{1F95D}-description", props.className),
-        ref: forwardedRef
+        render: /* @__PURE__ */ jsx(
+          Text,
+          {
+            ...rest,
+            variant: "caption-md",
+            "data-kiwi-tone": tone ?? "neutral",
+            className: cx("\u{1F95D}-description", props.className),
+            ref: forwardedRef
+          }
+        )
       }
     );
   }

package/dist/bricks/Field.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as Ariakit from "@ariakit/react";
 import { type BaseProps } from "./~utils.js";
 interface FieldProps extends BaseProps {
     /**
@@ -27,13 +28,26 @@ interface FieldProps extends BaseProps {
  * - `Switch`
  */
 export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof Ariakit.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<Ariakit.CollectionItemProps, "render" | "id"> {
+    type: FieldCollectionStoreItem["controlType"];
+}
+/**
+ * An element tracked as a control in the `Field`’s collection.
+ */
+export declare function FieldControl(props: FieldCollectionItemControlProps): import("react/jsx-runtime").JSX.Element;
 /**
- * Use the description IDs for a field.
+ * An element tracked as a label in the `Field`’s collection.
  */
-export declare function useFieldDescribedBy(ariaDescribedByProp?: string): string | undefined;
+export declare function FieldLabel(props: Pick<Ariakit.CollectionItemProps, "render">): import("react/jsx-runtime").JSX.Element;
 /**
- * Registers a description for an associated control.
+ * An element tracked as a description in the `Field`’s collection.
  */
-export declare function useFieldRegisterDescribedBy(id: string): void;
-export declare function useFieldId(): string | undefined;
+export declare function FieldDescription(props: Pick<Ariakit.CollectionItemProps, "render" | "id">): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/bricks/Field.js

@@ -4,74 +4,120 @@ import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Field = forwardRef((props, forwardedRef) => {
-  const fieldId = React.useId();
   const { layout, ...rest } = props;
-  return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(FieldDescribedByProvider, { children: /* @__PURE__ */ jsx(
-    Ariakit.Role,
+  return /* @__PURE__ */ jsx(
+    FieldCollection,
     {
-      ...rest,
-      className: cx("\u{1F95D}-field", props.className),
-      "data-kiwi-layout": layout,
-      ref: forwardedRef
+      render: /* @__PURE__ */ jsx(
+        Ariakit.Role.div,
+        {
+          ...rest,
+          className: cx("\u{1F95D}-field", props.className),
+          "data-kiwi-layout": layout,
+          ref: forwardedRef
+        }
+      )
     }
-  ) }) });
+  );
 });
-const FieldDescribedByContext = React.createContext(void 0);
-function FieldDescribedByProvider(props) {
-  const [describedBy, setDescribedBy] = React.useState(/* @__PURE__ */ new Set());
-  const register = React.useCallback((id) => {
-    setDescribedBy((describedBy2) => {
-      const updated = new Set(describedBy2);
-      updated.add(id);
-      return updated;
-    });
-  }, []);
-  const unregister = React.useCallback((id) => {
-    setDescribedBy((describedBy2) => {
-      const updated = new Set(describedBy2);
-      updated.delete(id);
-      return updated;
-    });
-  }, []);
+function FieldCollection(props) {
+  const fieldElementCollection = Ariakit.useCollectionStore({
+    defaultItems: []
+  });
+  const renderedItems = Ariakit.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(
-    FieldDescribedByContext.Provider,
+    Ariakit.Collection,
     {
-      value: React.useMemo(
-        () => ({
-          describedBy,
-          register,
-          unregister
-        }),
-        [describedBy, register, unregister]
-      ),
-      children: props.children
+      ...props,
+      store: fieldElementCollection,
+      "data-kiwi-label-placement": labelPlacement,
+      "data-kiwi-control-type": controlType
     }
   );
 }
-function useFieldDescribedBy(ariaDescribedByProp) {
-  const describedBySet = React.useContext(FieldDescribedByContext)?.describedBy;
-  return React.useMemo(
-    () => !describedBySet || describedBySet.size === 0 ? ariaDescribedByProp : [...describedBySet, ariaDescribedByProp].filter(Boolean).join(" "),
-    [describedBySet, ariaDescribedByProp]
+function FieldControl(props) {
+  const store = Ariakit.useCollectionContext();
+  const generatedId = React.useId();
+  const { id = store ? generatedId : void 0, type, ...rest } = props;
+  const renderedItems = Ariakit.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(
+    Ariakit.CollectionItem,
+    {
+      id,
+      getItem: getData,
+      render: /* @__PURE__ */ jsx(Ariakit.Role, { ...rest, "aria-describedby": describedBy })
+    }
   );
 }
-function useFieldRegisterDescribedBy(id) {
-  const context = React.useContext(FieldDescribedByContext);
-  const register = context?.register;
-  const unregister = context?.unregister;
-  React.useEffect(() => {
-    if (!register || !unregister) return;
-    register(id);
-    return () => unregister(id);
-  }, [id, register, unregister]);
+function FieldLabel(props) {
+  const store = Ariakit.useCollectionContext();
+  const renderedItems = Ariakit.useStoreState(store, "renderedItems");
+  const fieldId = React.useMemo(
+    () => renderedItems?.find(
+      (item) => item.elementType === "control"
+    )?.id,
+    [renderedItems]
+  );
+  const getData = React.useCallback(
+    (data) => ({
+      ...data,
+      elementType: "label"
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    Ariakit.CollectionItem,
+    {
+      getItem: getData,
+      render: /* @__PURE__ */ jsx(Ariakit.Role.label, { ...props, htmlFor: fieldId })
+    }
+  );
 }
-const FieldIdContext = React.createContext(void 0);
-function useFieldId() {
-  return React.useContext(FieldIdContext);
+function FieldDescription(props) {
+  const generatedId = React.useId();
+  const { id = generatedId, ...rest } = props;
+  const getData = React.useCallback(
+    (data) => ({
+      ...data,
+      elementType: "description"
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(Ariakit.CollectionItem, { ...rest, id, getItem: getData });
 }
 export {
   Field,
-  useFieldDescribedBy,
-  useFieldId,
-  useFieldRegisterDescribedBy
+  FieldControl,
+  FieldDescription,
+  FieldLabel
 };

package/dist/bricks/Label.js

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

package/dist/bricks/Radio.js

@@ -1,20 +1,24 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Radio = forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
-  const describedBy = useFieldDescribedBy(props["aria-describedby"]);
+  const { id, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Radio,
+    FieldControl,
     {
-      accessibleWhenDisabled: true,
-      id: fieldId,
-      ...props,
-      className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
-      "aria-describedby": describedBy,
-      ref: forwardedRef
+      type: "checkable",
+      id,
+      render: /* @__PURE__ */ jsx(
+        Ariakit.Radio,
+        {
+          accessibleWhenDisabled: true,
+          ...rest,
+          className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
+          ref: forwardedRef
+        }
+      )
     }
   );
 });

package/dist/bricks/Select.js

@@ -7,7 +7,7 @@ import {
   isBrowser
 } from "./~utils.js";
 import { DisclosureArrow } from "./Icon.js";
-import { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { FieldControl } from "./Field.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
@@ -25,10 +25,8 @@ const SelectRoot = forwardRef((props, forwardedRef) => {
 });
 const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
-    const { variant = "solid", ...rest } = props;
+    const { id, variant = "solid", ...rest } = props;
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
-    const fieldId = useFieldId();
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     React.useEffect(
       function updateContext() {
         setIsHtmlSelect(true);
@@ -37,15 +35,20 @@ const HtmlSelect = forwardRef(
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        Ariakit.Role.select,
+        FieldControl,
         {
-          id: fieldId,
-          ...rest,
-          className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
-          "aria-describedby": describedBy,
-          "data-kiwi-tone": "neutral",
-          "data-kiwi-variant": variant,
-          ref: forwardedRef
+          type: "textlike",
+          id,
+          render: /* @__PURE__ */ jsx(
+            Ariakit.Role.select,
+            {
+              ...rest,
+              className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
+              "data-kiwi-tone": "neutral",
+              "data-kiwi-variant": variant,
+              ref: forwardedRef
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsx(DisclosureArrow, { className: "\u{1F95D}-select-arrow" })

package/dist/bricks/Switch.js

@@ -1,22 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
   (props, forwardedRef) => {
-    const fieldId = useFieldId();
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
+    const { id, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      Ariakit.Checkbox,
+      FieldControl,
       {
-        accessibleWhenDisabled: true,
-        id: fieldId,
-        ...props,
-        className: cx("\u{1F95D}-switch", props.className),
-        "aria-describedby": describedBy,
-        role: "switch",
-        ref: forwardedRef
+        type: "checkable",
+        id,
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Checkbox,
+          {
+            accessibleWhenDisabled: true,
+            ...rest,
+            className: cx("\u{1F95D}-switch", props.className),
+            role: "switch",
+            ref: forwardedRef
+          }
+        )
       }
     );
   }

package/dist/bricks/Table.d.ts

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface TableProps extends BaseProps {
+}
+/**
+ * A table is a grid of rows and columns that displays data in a structured format.
+ *
+ * `Table.Root` is the root component for a table.
+ * `Table.Header`, `Table.Body`, and `Table.Cell` can be nested inside a `Table.Root` to create a table structure.
+ *
+ * Example:
+ * ```tsx
+ * <Table.Root>
+ *  <Table.Caption>Table Caption</Table.Caption>
+ * 	<Table.Header>
+ * 		<Table.Row>
+ * 			<Table.Cell>Header 1</Table.Cell>
+ * 			<Table.Cell>Header 2</Table.Cell>
+ * 		</Table.Row>
+ * 	</Table.Header>
+ *
+ * 	<Table.Body>
+ * 		<Table.Row>
+ * 			<Table.Cell>Cell 1.1</Table.Cell>
+ * 			<Table.Cell>Cell 1.2</Table.Cell>
+ * 		</Table.Row>
+ * 		<Table.Row>
+ * 			<Table.Cell>Cell 2.1</Table.Cell>
+ * 			<Table.Cell>Cell 2.2</Table.Cell>
+ * 		</Table.Row>
+ * 	</Table.Body>
+ * </Table.Root>
+ * ```
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableHeaderProps extends BaseProps {
+}
+/**
+ * `Table.Header` is a column component of cells that labels the columns of a table.
+ * `Table.Row` and `Table.Cell` can be nested inside a `Table.Header` to create a header row.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Header>
+ *		<Table.Row>
+ *			<Table.Cell>Header 1</Table.Cell>
+ * 			<Table.Cell>Header 2</Table.Cell>
+ *		</Table.Row>
+ *	</Table.Header>
+ * ```
+ */
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableBodyProps extends BaseProps {
+}
+/**
+ * `Table.Body` is a component that contains the rows of table data.
+ * Multiple `Table.Row`s and `Table.Cell`s can be nested inside a `Table.Body` to create a table body.
+ *
+ *  This component intentionally does not set `role=rowgroup` because it is not properly supported.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Body>
+ *		<Table.Row>
+ *			<Table.Cell>Cell 1.1</Table.Cell>
+ *			<Table.Cell>Cell 1.2</Table.Cell>
+ *		</Table.Row>
+ *		<Table.Row>
+ *			<Table.Cell>Cell 2.1</Table.Cell>
+ *			<Table.Cell>Cell 2.2</Table.Cell>
+ *		</Table.Row>
+ *	</Table.Body>
+ * ```
+ */
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableRowProps extends BaseProps {
+}
+/**
+ * `Table.Row` is a component that contains the cells of a table row.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Row>
+ *		<Table.Cell>Cell 1.1</Table.Cell>
+ *		<Table.Cell>Cell 1.2</Table.Cell>
+ *	</Table.Row>
+ * ```
+ */
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableCaptionProps extends BaseProps<"caption"> {
+}
+/**
+ * `Table.Caption` is a component that contains the caption of a table.
+ *
+ * Example:
+ * ```tsx
+ * <Table.Root>
+ * 	<Table.Caption>Table Caption</Table.Caption>
+ * 	…
+ * </Table.Root>
+ * ```
+ */
+declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLElement>>;
+interface TableCellProps extends BaseProps<"span"> {
+}
+/**
+ * `Table.Cell` is a component that contains the data of a table cell.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Cell>Cell 1.1</Table.Cell>
+ * ```
+ */
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
+export { Table as Root, TableHeader as Header, TableBody as Body, TableRow as Row, TableCaption as Caption, TableCell as Cell, };

package/dist/bricks/Table.js

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import * as Ariakit from "@ariakit/react";
+import * as React from "react";
+import cx from "classnames";
+import { forwardRef } from "./~utils.js";
+import { useMergedRefs } from "./~hooks.js";
+const TableContext = React.createContext({
+  setCaptionId: () => {
+  }
+});
+const Table = forwardRef((props, forwardedRef) => {
+  const [captionId, setCaptionId] = React.useState();
+  const tableContext = React.useMemo(() => ({ setCaptionId }), []);
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContext, children: /* @__PURE__ */ jsx(
+    Ariakit.Role,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table", props.className),
+      ref: forwardedRef,
+      role: "table",
+      "aria-labelledby": captionId,
+      children: props.children
+    }
+  ) });
+});
+const TableHeaderContext = React.createContext(false);
+const TableHeader = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+      Ariakit.Role.div,
+      {
+        ...props,
+        className: cx("\u{1F95D}-table-header", props.className),
+        ref: forwardedRef,
+        role: "rowgroup",
+        children: props.children
+      }
+    ) });
+  }
+);
+const TableBody = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table-body", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
+});
+const TableRow = forwardRef((props, forwardedRef) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-table-row", props.className),
+      ref: forwardedRef,
+      role: "row",
+      children
+    }
+  );
+});
+const TableCaption = forwardRef(
+  (props, forwardedRef) => {
+    const fallbackId = React.useId();
+    const { id = fallbackId, children, ...rest } = props;
+    const { setCaptionId } = React.useContext(TableContext);
+    const captionIdRef = React.useCallback(
+      (element) => {
+        setCaptionId(element ? id : void 0);
+      },
+      [id, setCaptionId]
+    );
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role,
+      {
+        ...rest,
+        id,
+        className: cx("\u{1F95D}-table-caption", props.className),
+        ref: useMergedRefs(forwardedRef, captionIdRef),
+        children
+      }
+    );
+  }
+);
+const TableCell = forwardRef((props, forwardedRef) => {
+  const isWithinTableHeader = React.useContext(TableHeaderContext);
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.span,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table-cell", props.className),
+      ref: forwardedRef,
+      role: isWithinTableHeader ? "columnheader" : "cell",
+      children: props.children
+    }
+  );
+});
+export {
+  TableBody as Body,
+  TableCaption as Caption,
+  TableCell as Cell,
+  TableHeader as Header,
+  Table as Root,
+  TableRow as Row
+};