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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 5.0.0-alpha.6
+
+- **breaking**: All CSS variables have been renamed to use the `--ids` prefix. See [#369](https://github.com/iTwin/kiwi/pull/369).
+- **breaking**: Some CSS variables were renamed further. See [#368](https://github.com/iTwin/kiwi/pull/368).
+  - Notably, the "surface" backgrounds have been split into two different "page" and "elevation" scales.
+- Background colors have been updated to match the latest design.
+- All styles are now loaded into `@layer itwinui`. The one exception is the CSS reset which remains in `@layer reset`.
+- `<Field>` now respects the order of `<Description>`s when creating associations.
+
+## 5.0.0-alpha.5
+
+- **breaking**: `Tree` API has changed to require flat structure, with explicit ARIA props (see [#300](https://github.com/iTwin/kiwi/pull/300)). `<Tree.Item>` no longer allows passing `children`.
+- **breaking**: `Tree.Item`s `action` prop now requires a list of `<Tree.ItemAction>` components (see [#355](https://github.com/iTwin/kiwi/pull/355) and [#362](https://github.com/iTwin/kiwi/pull/362)).
+- **breaking**: Replaced `<Chip>` children with new `label` prop (see [#349](https://github.com/iTwin/kiwi/pull/349)).
+- Added `<Tree.ItemAction>` component with `visible` prop for more granular control over action visibility.
+- Updated the layout of `<Field>` so that `<Description>` is placed in the best spot according on the label position and control type.
+- `<Field>` now considers the presence of explicit control `id`s when creating associations.
+
 ## 5.0.0-alpha.4
 
 - Added `onDismiss` prop and dismiss button to `<Chip>`.

package/dist/DEV/bricks/Checkbox.js

@@ -1,21 +1,25 @@
 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 Checkbox = 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}-checkbox", props.className),
-        "aria-describedby": describedBy,
-        ref: forwardedRef
+        type: "checkable",
+        id,
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Checkbox,
+          {
+            accessibleWhenDisabled: true,
+            ...rest,
+            className: cx("\u{1F95D}-checkbox", props.className),
+            ref: forwardedRef
+          }
+        )
       }
     );
   }

package/dist/DEV/bricks/Chip.js

@@ -6,7 +6,7 @@ import { forwardRef } from "./~utils.js";
 import { IconButton } from "./IconButton.js";
 import { Dismiss } from "./Icon.js";
 const Chip = forwardRef((props, forwardedRef) => {
-  const { variant = "solid", onDismiss, children, ...rest } = props;
+  const { variant = "solid", onDismiss, label, ...rest } = props;
   const baseId = React.useId();
   const labelId = `${baseId}-label`;
   const dismissIconId = `${baseId}-dismiss`;
@@ -18,7 +18,7 @@ const Chip = forwardRef((props, forwardedRef) => {
       className: cx("\u{1F95D}-chip", props.className),
       ref: forwardedRef,
       children: [
-        /* @__PURE__ */ jsx("span", { id: labelId, children }),
+        /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
         onDismiss && /* @__PURE__ */ jsx(
           IconButton,
           {

package/dist/DEV/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/DEV/bricks/Field.js

@@ -4,75 +4,121 @@ 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
+        }
+      )
     }
-  ) }) });
+  );
 });
 DEV: Field.displayName = "Field";
-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/DEV/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/DEV/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/DEV/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/DEV/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/DEV/bricks/Table.js

@@ -0,0 +1,114 @@
+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
+    }
+  ) });
+});
+DEV: Table.displayName = "Table.Root";
+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
+      }
+    ) });
+  }
+);
+DEV: TableHeader.displayName = "Table.Header";
+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
+    }
+  );
+});
+DEV: TableBody.displayName = "Table.Body";
+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
+    }
+  );
+});
+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 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
+      }
+    );
+  }
+);
+DEV: TableCaption.displayName = "Table.Caption";
+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
+    }
+  );
+});
+DEV: TableCell.displayName = "Table.Cell";
+export {
+  TableBody as Body,
+  TableCaption as Caption,
+  TableCell as Cell,
+  TableHeader as Header,
+  Table as Root,
+  TableRow as Row
+};

package/dist/DEV/bricks/TextBox.js

@@ -2,36 +2,40 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
-import { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { FieldControl } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
-    const fieldId = useFieldId();
+    const { id, ...rest } = props;
     const rootContext = React.useContext(TextBoxRootContext);
     const setDisabled = rootContext?.setDisabled;
     React.useEffect(() => {
       setDisabled?.(props.disabled);
     }, [setDisabled, props.disabled]);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.input,
+      FieldControl,
       {
-        id: fieldId,
-        readOnly: props.disabled,
-        ...props,
-        "aria-describedby": describedBy,
-        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
-        placeholder: props.placeholder ?? " ",
+        type: "textlike",
+        id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Focusable,
+          Ariakit.Role.input,
           {
-            accessibleWhenDisabled: true,
-            render: props.render || /* @__PURE__ */ jsx("input", {})
+            readOnly: props.disabled,
+            ...rest,
+            className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+            placeholder: props.placeholder ?? " ",
+            render: /* @__PURE__ */ jsx(
+              Ariakit.Focusable,
+              {
+                accessibleWhenDisabled: true,
+                render: props.render || /* @__PURE__ */ jsx("input", {})
+              }
+            ),
+            ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
           }
-        ),
-        ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
+        )
       }
     );
   }
@@ -39,25 +43,29 @@ const TextBoxInput = forwardRef(
 DEV: TextBoxInput.displayName = "TextBox.Input";
 const TextBoxTextarea = forwardRef(
   (props, forwardedRef) => {
-    const fieldId = useFieldId();
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
+    const { id, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.textarea,
+      FieldControl,
       {
-        id: fieldId,
-        readOnly: props.disabled,
-        ...props,
-        className: cx("\u{1F95D}-text-box", props.className),
-        "aria-describedby": describedBy,
-        placeholder: props.placeholder ?? " ",
+        type: "textlike",
+        id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Focusable,
+          Ariakit.Role.textarea,
           {
-            accessibleWhenDisabled: true,
-            render: props.render || /* @__PURE__ */ jsx("textarea", {})
+            readOnly: props.disabled,
+            ...rest,
+            className: cx("\u{1F95D}-text-box", props.className),
+            placeholder: props.placeholder ?? " ",
+            render: /* @__PURE__ */ jsx(
+              Ariakit.Focusable,
+              {
+                accessibleWhenDisabled: true,
+                render: props.render || /* @__PURE__ */ jsx("textarea", {})
+              }
+            ),
+            ref: forwardedRef
           }
-        ),
-        ref: forwardedRef
+        )
       }
     );
   }