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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 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,27 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { FieldControl, useFieldDescribedBy } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Checkbox = forwardRef(
   (props, forwardedRef) => {
-    const fieldId = useFieldId();
+    const { id, ...rest } = props;
     const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     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),
+            "aria-describedby": describedBy,
+            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/Field.js

@@ -4,17 +4,21 @@ 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(FieldDescribedByProvider, { children: /* @__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);
@@ -66,13 +70,78 @@ function useFieldRegisterDescribedBy(id) {
     return () => unregister(id);
   }, [id, register, unregister]);
 }
-const FieldIdContext = React.createContext(void 0);
-function useFieldId() {
-  return React.useContext(FieldIdContext);
+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(
+    Ariakit.Collection,
+    {
+      ...props,
+      store: fieldElementCollection,
+      "data-kiwi-label-placement": labelPlacement,
+      "data-kiwi-control-type": controlType
+    }
+  );
+}
+function FieldControl(props) {
+  const generatedId = React.useId();
+  const { id = generatedId, type, ...rest } = props;
+  const getData = React.useCallback(
+    (data) => ({
+      ...data,
+      elementType: "control",
+      controlType: type
+    }),
+    [type]
+  );
+  return /* @__PURE__ */ jsx(Ariakit.CollectionItem, { ...rest, id, getItem: getData });
+}
+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 })
+    }
+  );
 }
 export {
   Field,
+  FieldControl,
+  FieldLabel,
   useFieldDescribedBy,
-  useFieldId,
   useFieldRegisterDescribedBy
 };

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,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, useFieldDescribedBy } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Radio = forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
+  const { id, ...rest } = props;
   const describedBy = useFieldDescribedBy(props["aria-describedby"]);
   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),
+          "aria-describedby": describedBy,
+          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, useFieldDescribedBy } from "./Field.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
@@ -25,9 +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() {
@@ -37,15 +36,21 @@ 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),
+              "aria-describedby": describedBy,
+              "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,28 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { FieldControl, useFieldDescribedBy } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
   (props, forwardedRef) => {
-    const fieldId = useFieldId();
+    const { id, ...rest } = props;
     const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     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),
+            "aria-describedby": describedBy,
+            role: "switch",
+            ref: forwardedRef
+          }
+        )
       }
     );
   }

package/dist/DEV/bricks/TextBox.js

@@ -2,36 +2,42 @@ 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, useFieldDescribedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
+    const { id, ...rest } = props;
     const describedBy = useFieldDescribedBy(props["aria-describedby"]);
-    const fieldId = useFieldId();
     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,
+            "aria-describedby": describedBy,
+            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 +45,31 @@ const TextBoxInput = forwardRef(
 DEV: TextBoxInput.displayName = "TextBox.Input";
 const TextBoxTextarea = forwardRef(
   (props, forwardedRef) => {
-    const fieldId = useFieldId();
+    const { id, ...rest } = props;
     const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     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),
+            "aria-describedby": describedBy,
+            placeholder: props.placeholder ?? " ",
+            render: /* @__PURE__ */ jsx(
+              Ariakit.Focusable,
+              {
+                accessibleWhenDisabled: true,
+                render: props.render || /* @__PURE__ */ jsx("textarea", {})
+              }
+            ),
+            ref: forwardedRef
           }
-        ),
-        ref: forwardedRef
+        )
       }
     );
   }

package/dist/DEV/bricks/Tree.js

@@ -24,6 +24,7 @@ const Tree = forwardRef((props, forwardedRef) => {
 DEV: Tree.displayName = "Tree.Root";
 const TreeItem = forwardRef((props, forwardedRef) => {
   const {
+    "aria-level": level,
     selected,
     children,
     expanded,
@@ -37,8 +38,6 @@ const TreeItem = forwardRef((props, forwardedRef) => {
     onKeyDown: onKeyDownProp,
     ...rest
   } = props;
-  const parentContext = React.useContext(TreeItemContext);
-  const level = parentContext ? parentContext.level + 1 : 1;
   const handleClick = (event) => {
     if (selected === void 0) return;
     event.stopPropagation();
@@ -67,7 +66,7 @@ const TreeItem = forwardRef((props, forwardedRef) => {
         }),
         [level, expanded, selected, contentId]
       ),
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         Ariakit.CompositeItem,
         {
           render: /* @__PURE__ */ jsx(Ariakit.Role, { ...rest }),
@@ -83,35 +82,33 @@ const TreeItem = forwardRef((props, forwardedRef) => {
           "aria-expanded": expanded,
           "aria-selected": selected,
           "aria-labelledby": contentId,
+          "aria-level": level,
           className: cx("\u{1F95D}-tree-item", props.className),
           ref: forwardedRef,
-          children: [
-            /* @__PURE__ */ jsxs(
-              ListItem.Root,
-              {
-                "data-kiwi-expanded": expanded,
-                "data-kiwi-selected": selected,
-                className: "\u{1F95D}-tree-item-node",
-                style: { "--\u{1F95D}tree-item-level": level },
-                role: void 0,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    TreeItemExpander,
-                    {
-                      onClick: () => {
-                        if (expanded === void 0) return;
-                        onExpandedChange?.(!expanded);
-                      }
+          children: /* @__PURE__ */ jsxs(
+            ListItem.Root,
+            {
+              "data-kiwi-expanded": expanded,
+              "data-kiwi-selected": selected,
+              className: "\u{1F95D}-tree-item-node",
+              style: { "--\u{1F95D}tree-item-level": level },
+              role: void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  TreeItemExpander,
+                  {
+                    onClick: () => {
+                      if (expanded === void 0) return;
+                      onExpandedChange?.(!expanded);
                     }
-                  ),
-                  typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
-                  /* @__PURE__ */ jsx(TreeItemContent, { label }),
-                  /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
-                ]
-              }
-            ),
-            children && /* @__PURE__ */ jsx("div", { role: "group", children })
-          ]
+                  }
+                ),
+                typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+                /* @__PURE__ */ jsx(TreeItemContent, { label }),
+                /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
+              ]
+            }
+          )
         }
       )
     }
@@ -135,23 +132,36 @@ const TreeItemContent = forwardRef(
   }
 );
 DEV: TreeItemContent.displayName = "TreeItemContent";
-const TreeItemActions = forwardRef(
+const TreeItemActions = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.Toolbar,
+    {
+      ...props,
+      onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+      className: cx("\u{1F95D}-tree-item-actions", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
+});
+DEV: TreeItemActions.displayName = "TreeItemActions";
+const TreeItemAction = forwardRef(
   (props, forwardedRef) => {
     const { visible, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      Ariakit.Toolbar,
+      IconButton,
       {
+        inert: visible === false ? true : void 0,
         ...rest,
-        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
-        className: cx("\u{1F95D}-tree-item-actions", props.className),
+        variant: "ghost",
+        className: cx("\u{1F95D}-tree-item-action", props.className),
         "data-kiwi-visible": visible,
-        ref: forwardedRef,
-        children: props.children
+        ref: forwardedRef
       }
     );
   }
 );
-DEV: TreeItemActions.displayName = "TreeItemActions";
+DEV: TreeItemAction.displayName = "Tree.ItemAction";
 const TreeItemExpander = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(
@@ -199,5 +209,6 @@ DEV: TreeChevron.displayName = "TreeChevron";
 const TreeItemContext = React.createContext(void 0);
 export {
   TreeItem as Item,
+  TreeItemAction as ItemAction,
   Tree as Root
 };