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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 5.0.0-alpha.7
+
+- Added new `<Avatar>` component.
+- Added new `<Badge>` component.
+- Added `alt` prop to `<Icon>` component.
+- Fixed all color tokens to use the correct `oklch` values.
+- Fixed an issue where `<Tree.Item>` was not respecting its `style` prop.
+
+## 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`.

package/dist/DEV/bricks/Avatar.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const Avatar = forwardRef((props, forwardedRef) => {
+  const { size = "medium", initials, alt, image, children, ...rest } = props;
+  const isDecorative = !alt;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.span,
+    {
+      role: isDecorative ? void 0 : "img",
+      "aria-label": isDecorative ? void 0 : alt,
+      ...rest,
+      "data-kiwi-size": size,
+      className: cx("\u{1F95D}-avatar", props.className),
+      ref: forwardedRef,
+      children: image ?? /* @__PURE__ */ jsx("abbr", { className: "\u{1F95D}-avatar-initials", "aria-hidden": "true", children: initials?.substring(0, 1) })
+    }
+  );
+});
+DEV: Avatar.displayName = "Avatar";
+export {
+  Avatar
+};

package/dist/DEV/bricks/Badge.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const Badge = forwardRef((props, forwardedRef) => {
+  const { tone = "neutral", variant = "solid", label, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.span,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      "data-kiwi-variant": variant,
+      className: cx("\u{1F95D}-badge", props.className),
+      ref: forwardedRef,
+      children: label
+    }
+  );
+});
+DEV: Badge.displayName = "Badge";
+export {
+  Badge
+};

package/dist/DEV/bricks/Checkbox.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { FieldControl, useFieldDescribedBy } from "./Field.js";
+import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Checkbox = forwardRef(
   (props, forwardedRef) => {
     const { id, ...rest } = props;
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
       FieldControl,
       {
@@ -18,7 +17,6 @@ const Checkbox = forwardRef(
             accessibleWhenDisabled: true,
             ...rest,
             className: cx("\u{1F95D}-checkbox", props.className),
-            "aria-describedby": describedBy,
             ref: forwardedRef
           }
         )

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/DropdownMenu.js

@@ -93,7 +93,7 @@ const DropdownMenuItem = forwardRef(
         ref: forwardedRef,
         children: [
           /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
-          hasShortcuts && /* @__PURE__ */ jsx("span", { className: "\u{1F95D}-dropdown-menu-item-shortcuts", children: shortcutKeys.map((key, index) => /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`)) })
+          hasShortcuts && /* @__PURE__ */ jsx(ListItem.Decoration, { className: "\u{1F95D}-dropdown-menu-item-shortcuts", children: shortcutKeys.map((key, index) => /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`)) })
         ]
       }
     );
@@ -112,7 +112,12 @@ const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       children: [
         /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
-        /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+        /* @__PURE__ */ jsx(
+          ListItem.Decoration,
+          {
+            render: /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+          }
+        )
       ]
     }
   );

package/dist/DEV/bricks/Field.js

@@ -5,7 +5,7 @@ import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Field = forwardRef((props, forwardedRef) => {
   const { layout, ...rest } = props;
-  return /* @__PURE__ */ jsx(FieldDescribedByProvider, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     FieldCollection,
     {
       render: /* @__PURE__ */ jsx(
@@ -18,58 +18,9 @@ const Field = forwardRef((props, 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;
-    });
-  }, []);
-  return /* @__PURE__ */ jsx(
-    FieldDescribedByContext.Provider,
-    {
-      value: React.useMemo(
-        () => ({
-          describedBy,
-          register,
-          unregister
-        }),
-        [describedBy, register, unregister]
-      ),
-      children: props.children
-    }
-  );
-}
-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 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 FieldCollection(props) {
   const fieldElementCollection = Ariakit.useCollectionStore({
     defaultItems: []
@@ -102,8 +53,16 @@ function FieldCollection(props) {
   );
 }
 function FieldControl(props) {
+  const store = Ariakit.useCollectionContext();
   const generatedId = React.useId();
-  const { id = generatedId, type, ...rest } = props;
+  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,
@@ -112,7 +71,14 @@ function FieldControl(props) {
     }),
     [type]
   );
-  return /* @__PURE__ */ jsx(Ariakit.CollectionItem, { ...rest, id, getItem: getData });
+  return /* @__PURE__ */ jsx(
+    Ariakit.CollectionItem,
+    {
+      id,
+      getItem: getData,
+      render: /* @__PURE__ */ jsx(Ariakit.Role, { ...rest, "aria-describedby": describedBy })
+    }
+  );
 }
 function FieldLabel(props) {
   const store = Ariakit.useCollectionContext();
@@ -138,10 +104,21 @@ function FieldLabel(props) {
     }
   );
 }
+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,
   FieldControl,
-  FieldLabel,
-  useFieldDescribedBy,
-  useFieldRegisterDescribedBy
+  FieldDescription,
+  FieldLabel
 };

package/dist/DEV/bricks/Icon.js

@@ -4,12 +4,15 @@ import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "./~utils.js";
 const Icon = forwardRef((props, forwardedRef) => {
-  const { href, size = "regular", ...rest } = props;
+  const { href, size, alt, ...rest } = props;
   const iconId = toIconId(size);
+  const isDecorative = !alt;
   return /* @__PURE__ */ jsx(
     Ariakit.Role.svg,
     {
-      "aria-hidden": true,
+      "aria-hidden": isDecorative ? "true" : void 0,
+      role: isDecorative ? void 0 : "img",
+      "aria-label": isDecorative ? void 0 : alt,
       ...rest,
       "data-kiwi-size": size,
       className: cx("\u{1F95D}-icon", props.className),

package/dist/DEV/bricks/ListItem.js

@@ -27,7 +27,21 @@ const ListItemContent = forwardRef(
   }
 );
 DEV: ListItemContent.displayName = "ListItem.Content";
+const ListItemDecoration = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.span,
+      {
+        ...props,
+        className: cx("\u{1F95D}-list-item-decoration", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: ListItemDecoration.displayName = "ListItem.Decoration";
 export {
   ListItemContent as Content,
+  ListItemDecoration as Decoration,
   ListItem as Root
 };

package/dist/DEV/bricks/Radio.js

@@ -1,11 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { FieldControl, useFieldDescribedBy } from "./Field.js";
+import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Radio = forwardRef((props, forwardedRef) => {
   const { id, ...rest } = props;
-  const describedBy = useFieldDescribedBy(props["aria-describedby"]);
   return /* @__PURE__ */ jsx(
     FieldControl,
     {
@@ -17,7 +16,6 @@ const Radio = forwardRef((props, forwardedRef) => {
           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 { FieldControl, useFieldDescribedBy } from "./Field.js";
+import { FieldControl } from "./Field.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
@@ -27,7 +27,6 @@ const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
     const { id, variant = "solid", ...rest } = props;
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     React.useEffect(
       function updateContext() {
         setIsHtmlSelect(true);
@@ -45,7 +44,6 @@ const HtmlSelect = forwardRef(
             {
               ...rest,
               className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
-              "aria-describedby": describedBy,
               "data-kiwi-tone": "neutral",
               "data-kiwi-variant": variant,
               ref: forwardedRef

package/dist/DEV/bricks/Switch.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { FieldControl, useFieldDescribedBy } from "./Field.js";
+import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
   (props, forwardedRef) => {
     const { id, ...rest } = props;
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
       FieldControl,
       {
@@ -18,7 +17,6 @@ const Switch = forwardRef(
             accessibleWhenDisabled: true,
             ...rest,
             className: cx("\u{1F95D}-switch", props.className),
-            "aria-describedby": describedBy,
             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,14 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
-import { FieldControl, useFieldDescribedBy } 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 { id, ...rest } = props;
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     const rootContext = React.useContext(TextBoxRootContext);
     const setDisabled = rootContext?.setDisabled;
     React.useEffect(() => {
@@ -25,7 +24,6 @@ const TextBoxInput = forwardRef(
           {
             readOnly: props.disabled,
             ...rest,
-            "aria-describedby": describedBy,
             className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
             placeholder: props.placeholder ?? " ",
             render: /* @__PURE__ */ jsx(
@@ -46,7 +44,6 @@ DEV: TextBoxInput.displayName = "TextBox.Input";
 const TextBoxTextarea = forwardRef(
   (props, forwardedRef) => {
     const { id, ...rest } = props;
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
       FieldControl,
       {
@@ -58,7 +55,6 @@ const TextBoxTextarea = forwardRef(
             readOnly: props.disabled,
             ...rest,
             className: cx("\u{1F95D}-text-box", props.className),
-            "aria-describedby": describedBy,
             placeholder: props.placeholder ?? " ",
             render: /* @__PURE__ */ jsx(
               Ariakit.Focusable,

package/dist/DEV/bricks/Tree.js

@@ -31,7 +31,6 @@ const TreeItem = forwardRef((props, forwardedRef) => {
     icon,
     label,
     actions,
-    style,
     onSelectedChange,
     onExpandedChange,
     onClick: onClickProp,
@@ -94,18 +93,25 @@ const TreeItem = forwardRef((props, forwardedRef) => {
               style: { "--\u{1F95D}tree-item-level": level },
               role: void 0,
               children: [
+                /* @__PURE__ */ jsxs(ListItem.Decoration, { 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(
-                  TreeItemExpander,
+                  ListItem.Decoration,
                   {
-                    onClick: () => {
-                      if (expanded === void 0) return;
-                      onExpandedChange?.(!expanded);
-                    }
+                    render: /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
                   }
-                ),
-                typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
-                /* @__PURE__ */ jsx(TreeItemContent, { label }),
-                /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
+                )
               ]
             }
           )

package/dist/DEV/bricks/index.js

@@ -1,6 +1,8 @@
 "use client";
 import { Root } from "./Root.js";
 import { Anchor } from "./Anchor.js";
+import { Avatar } from "./Avatar.js";
+import { Badge } from "./Badge.js";
 import { Button } from "./Button.js";
 import { Checkbox } from "./Checkbox.js";
 import { Chip } from "./Chip.js";
@@ -24,6 +26,8 @@ import { Tooltip } from "./Tooltip.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 export {
   Anchor,
+  Avatar,
+  Badge,
   Button,
   Checkbox,
   Chip,