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

package/dist/DEV/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,76 +31,43 @@ const Field = forwardRef((props, forwardedRef) => {
     }
   );
 });
-DEV: Field.displayName = "Field";
-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"
+DEV: FieldRoot.displayName = "Field";
+const FieldLabel = forwardRef(
+  (props, forwardedRef) => {
+    const store = useCollectionContext();
+    const renderedItems = useStoreState(
+      store,
+      "renderedItems"
     );
-    return [renderedItems[controlIndex2]?.controlType, controlIndex2];
-  }, [renderedItems]);
-  const labelPlacement = React.useMemo(() => {
-    const labelIndex = renderedItems.findIndex(
-      (item) => item.elementType === "label"
+    const fieldId = React.useMemo(
+      () => renderedItems?.find((item) => item.elementType === "control")?.id,
+      [renderedItems]
     );
-    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();
+    const getData = React.useCallback(
+      (data) => ({
+        ...data,
+        elementType: "label"
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsx(
+      CollectionItem,
+      {
+        getItem: getData,
+        render: /* @__PURE__ */ jsx(Label, { ...props, htmlFor: fieldId }),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: FieldLabel.displayName = "Field.Label";
+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"
     }),
     []
   );
@@ -104,25 +75,89 @@ 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 });
-}
+});
+DEV: FieldDescription.displayName = "Field.Description";
+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
+      }
+    ) });
+  }
+);
+DEV: FieldControl.displayName = "Field.Control";
+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
+      }
+    );
+  }
+);
+DEV: FieldErrorMessage.displayName = "Field.ErrorMessage";
 export {
-  Field,
-  FieldControl,
-  FieldDescription,
-  FieldLabel
+  FieldControl as Control,
+  FieldDescription as Description,
+  FieldErrorMessage as ErrorMessage,
+  FieldLabel as Label,
+  FieldRoot as Root
 };

package/dist/DEV/bricks/Icon.js

@@ -220,10 +220,67 @@ const StatusWarning = forwardRef(
   }
 );
 DEV: StatusWarning.displayName = "StatusWarning";
+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
+      }
+    );
+  }
+);
+DEV: MoreHorizontal.displayName = "MoreHorizontal";
+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
+      }
+    );
+  }
+);
+DEV: ChevronDown.displayName = "ChevronDown";
 export {
   Checkmark,
+  ChevronDown,
   DisclosureArrow,
   Dismiss,
   Icon,
+  MoreHorizontal,
   StatusWarning
 };

package/dist/DEV/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/DEV/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
     }
   );
 });

package/dist/DEV/bricks/Radio.js

@@ -3,24 +3,17 @@ import cx from "classnames";
 import {
   Radio as AkRadio
 } from "@ariakit/react/radio";
-import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
+import { useFieldControlType } from "./Field.internal.js";
 const Radio = forwardRef((props, forwardedRef) => {
-  const { id, ...rest } = props;
+  useFieldControlType("checkable");
   return /* @__PURE__ */ jsx(
-    FieldControl,
+    AkRadio,
     {
-      type: "checkable",
-      id,
-      render: /* @__PURE__ */ jsx(
-        AkRadio,
-        {
-          accessibleWhenDisabled: true,
-          ...rest,
-          className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
-          ref: forwardedRef
-        }
-      )
+      accessibleWhenDisabled: true,
+      ...props,
+      className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
+      ref: forwardedRef
     }
   );
 });

package/dist/DEV/bricks/Select.js

@@ -7,11 +7,12 @@ import {
   isBrowser
 } from "./~utils.js";
 import { DisclosureArrow } from "./Icon.js";
-import { FieldControl } from "./Field.js";
+import { useFieldControlType } from "./Field.internal.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
 const SelectRoot = forwardRef((props, forwardedRef) => {
+  useFieldControlType("textlike");
   const [isHtmlSelect, setIsHtmlSelect] = React.useState(false);
   return /* @__PURE__ */ jsx(HtmlSelectContext.Provider, { value: setIsHtmlSelect, children: /* @__PURE__ */ jsx(
     Role.div,
@@ -25,7 +26,7 @@ const SelectRoot = forwardRef((props, forwardedRef) => {
 });
 const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
-    const { id, variant = "solid", ...rest } = props;
+    const { variant = "solid", ...rest } = props;
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
     React.useEffect(
       function updateContext() {
@@ -35,20 +36,13 @@ const HtmlSelect = forwardRef(
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        FieldControl,
+        Role.select,
         {
-          type: "textlike",
-          id,
-          render: /* @__PURE__ */ jsx(
-            Role.select,
-            {
-              ...rest,
-              className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
-              "data-kiwi-tone": "neutral",
-              "data-kiwi-variant": variant,
-              ref: forwardedRef
-            }
-          )
+          ...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/DEV/bricks/Switch.js

@@ -3,26 +3,19 @@ import cx from "classnames";
 import {
   Checkbox as AkCheckbox
 } from "@ariakit/react/checkbox";
-import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
+import { useFieldControlType } from "./Field.internal.js";
 const Switch = forwardRef(
   (props, forwardedRef) => {
-    const { id, ...rest } = props;
+    useFieldControlType("checkable");
     return /* @__PURE__ */ jsx(
-      FieldControl,
+      AkCheckbox,
       {
-        type: "checkable",
-        id,
-        render: /* @__PURE__ */ jsx(
-          AkCheckbox,
-          {
-            accessibleWhenDisabled: true,
-            ...rest,
-            className: cx("\u{1F95D}-switch", props.className),
-            role: "switch",
-            ref: forwardedRef
-          }
-        )
+        accessibleWhenDisabled: true,
+        ...props,
+        className: cx("\u{1F95D}-switch", props.className),
+        role: "switch",
+        ref: forwardedRef
       }
     );
   }

package/dist/DEV/bricks/Table.js

@@ -3,65 +3,90 @@ import { Role } from "@ariakit/react/role";
 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(
+import { useMergedRefs, useSafeContext } from "./~hooks.js";
+const TableContext = React.createContext(void 0);
+const TableHeaderContext = React.createContext(false);
+const HtmlTable = forwardRef((props, forwardedRef) => {
+  const tableContextValue = React.useMemo(
+    () => ({ mode: "html" }),
+    []
+  );
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
     Role,
     {
+      render: /* @__PURE__ */ jsx("table", {}),
       ...props,
-      className: cx("\u{1F95D}-table", props.className),
       ref: forwardedRef,
-      role: "table",
-      "aria-labelledby": captionId,
-      children: props.children
+      className: cx("\u{1F95D}-table", props.className)
     }
   ) });
 });
-DEV: Table.displayName = "Table.Root";
-const TableHeaderContext = React.createContext(false);
+DEV: HtmlTable.displayName = "Table.HtmlTable";
+const CustomTable = forwardRef(
+  (props, forwardedRef) => {
+    const [captionId, setCaptionId] = React.useState();
+    const tableContextValue = React.useMemo(
+      () => ({ captionId, setCaptionId, mode: "aria" }),
+      [captionId]
+    );
+    return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        role: "table",
+        "aria-labelledby": captionId,
+        ...props,
+        ref: forwardedRef,
+        className: cx("\u{1F95D}-table", props.className)
+      }
+    ) });
+  }
+);
+DEV: CustomTable.displayName = "Table.CustomTable";
 const TableHeader = forwardRef(
   (props, forwardedRef) => {
+    const { mode } = useSafeContext(TableContext);
+    const render = mode === "html" ? /* @__PURE__ */ jsx("thead", {}) : void 0;
+    const role = mode === "aria" ? "rowgroup" : void 0;
     return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
       Role.div,
       {
+        render,
+        role,
         ...props,
-        className: cx("\u{1F95D}-table-header", props.className),
         ref: forwardedRef,
-        role: "rowgroup",
-        children: props.children
+        className: cx("\u{1F95D}-table-header", props.className)
       }
     ) });
   }
 );
 DEV: TableHeader.displayName = "Table.Header";
 const TableBody = forwardRef((props, forwardedRef) => {
+  const { mode } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tbody", {}) : void 0;
   return /* @__PURE__ */ jsx(
     Role.div,
     {
+      render,
+      role: void 0,
       ...props,
-      className: cx("\u{1F95D}-table-body", props.className),
       ref: forwardedRef,
-      children: props.children
+      className: cx("\u{1F95D}-table-body", props.className)
     }
   );
 });
 DEV: TableBody.displayName = "Table.Body";
 const TableRow = forwardRef((props, forwardedRef) => {
-  const { children, ...rest } = props;
+  const { mode } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tr", {}) : void 0;
+  const role = mode === "aria" ? "row" : void 0;
   return /* @__PURE__ */ jsx(
     Role.div,
     {
-      ...rest,
-      className: cx("\u{1F95D}-table-row", props.className),
+      render,
+      role,
+      ...props,
       ref: forwardedRef,
-      role: "row",
-      children
+      className: cx("\u{1F95D}-table-row", props.className)
     }
   );
 });
@@ -69,37 +94,45 @@ DEV: TableRow.displayName = "Table.Row";
 const TableCaption = forwardRef(
   (props, forwardedRef) => {
     const fallbackId = React.useId();
-    const { id = fallbackId, children, ...rest } = props;
-    const { setCaptionId } = React.useContext(TableContext);
+    const { id = fallbackId, ...rest } = props;
+    const { mode, setCaptionId } = useSafeContext(TableContext);
+    const render = mode === "html" ? /* @__PURE__ */ jsx("caption", {}) : void 0;
     const captionIdRef = React.useCallback(
       (element) => {
-        setCaptionId(element ? id : void 0);
+        setCaptionId?.(element ? id : void 0);
       },
       [id, setCaptionId]
     );
     return /* @__PURE__ */ jsx(
-      Role,
+      Role.div,
       {
+        render,
         ...rest,
         id,
-        className: cx("\u{1F95D}-table-caption", props.className),
         ref: useMergedRefs(forwardedRef, captionIdRef),
-        children
+        className: cx("\u{1F95D}-table-caption", props.className)
       }
     );
   }
 );
 DEV: TableCaption.displayName = "Table.Caption";
 const TableCell = forwardRef((props, forwardedRef) => {
-  const isWithinTableHeader = React.useContext(TableHeaderContext);
+  const isWithinTableHeader = useSafeContext(TableHeaderContext);
+  const { mode } = useSafeContext(TableContext);
+  const { render, role } = React.useMemo(() => {
+    if (mode === "aria") {
+      return { role: isWithinTableHeader ? "columnheader" : "cell" };
+    }
+    return { render: isWithinTableHeader ? /* @__PURE__ */ jsx("th", {}) : /* @__PURE__ */ jsx("td", {}) };
+  }, [isWithinTableHeader, mode]);
   return /* @__PURE__ */ jsx(
-    Role.span,
+    Role.div,
     {
+      render,
+      role,
       ...props,
-      className: cx("\u{1F95D}-table-cell", props.className),
       ref: forwardedRef,
-      role: isWithinTableHeader ? "columnheader" : "cell",
-      children: props.children
+      className: cx("\u{1F95D}-table-cell", props.className)
     }
   );
 });
@@ -108,7 +141,8 @@ export {
   TableBody as Body,
   TableCaption as Caption,
   TableCell as Cell,
+  CustomTable,
   TableHeader as Header,
-  Table as Root,
+  HtmlTable,
   TableRow as Row
 };