@itwin/itwinui-react 5.0.0-alpha.1 → 5.0.0-alpha.10

package/LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © 2024 Bentley Systems, Incorporated. All rights reserved.
+Copyright © 2025 Bentley Systems, Incorporated. All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -1,10 +1,10 @@
 # @itwin/itwinui-react
 
-A React component library for the Kiwi design system.
+A React component library for the next evolution of the iTwinUI design system.
 
 ## Usage
 
-To use components from the Kiwi design system in your app, you’ll need to wrap your app’s UI with Kiwi’s `<Root>` component, and specify the required `colorScheme` and `density` props:
+To use components from the iTwinUI design system in your app, you’ll need to wrap your app’s UI with iTwinUI's `<Root>` component, and specify the required `colorScheme` and `density` props:
 
 ```jsx
 import { Root } from "@itwin/itwinui-react/bricks";
@@ -12,18 +12,18 @@ import { Root } from "@itwin/itwinui-react/bricks";
 export function App() {
 	return (
 		<Root colorScheme="dark" density="dense">
-			{/* Use Kiwi design system components here */}
+			{/* Use design system components here */}
 		</Root>
 	);
 }
 ```
 
-This will ensure Kiwi’s styles are loaded to either the document or the encompassing shadow root.
+This will ensure iTwinUI's styles are loaded to either the document or the encompassing shadow root.
 
 Once that’s in place you can import and use components from `@itwin/itwinui-react/bricks`.
 
 ## Contributing
 
-Are you interested in helping kiwi grow and expand? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/kiwi/issues).
+Are you interested in helping iTwinUI grow and expand? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/design-system/issues).
 
-If you're interested in contributing code, please read [`CONTRIBUTING.md`](https://github.com/iTwin/kiwi/blob/main/CONTRIBUTING.md) for more information.
+If you're interested in contributing code, please read [`CONTRIBUTING.md`](https://github.com/iTwin/design-system/blob/main/CONTRIBUTING.md) for more information.

package/dist/DEV/bricks/Anchor.js

@@ -1,22 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
+import { Focusable } from "@ariakit/react/focusable";
 import { forwardRef } from "./~utils.js";
 const Anchor = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.a,
+    Role.a,
     {
-      "data-kiwi-tone": tone,
       ...rest,
+      "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-anchor", props.className),
-      render: /* @__PURE__ */ jsx(
-        Ariakit.Focusable,
-        {
-          accessibleWhenDisabled: true,
-          render: props.render || /* @__PURE__ */ jsx("a", {})
-        }
-      ),
+      render: /* @__PURE__ */ jsx(Focusable, { accessibleWhenDisabled: true, render: props.render || /* @__PURE__ */ jsx("a", {}) }),
       ref: forwardedRef
     }
   );

package/dist/DEV/bricks/Avatar.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import { Role } from "@ariakit/react/role";
+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(
+    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 { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+const Badge = forwardRef((props, forwardedRef) => {
+  const { tone = "neutral", variant = "solid", label, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    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/Button.js

@@ -1,18 +1,25 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Button as AkButton } from "@ariakit/react/button";
 import { forwardRef } from "./~utils.js";
+import { useGhostAlignment } from "./~utils.GhostAligner.js";
 const Button = forwardRef(
   (props, forwardedRef) => {
     const { variant = "solid", tone = "neutral", ...rest } = props;
+    const ghostAlignment = useGhostAlignment();
     return /* @__PURE__ */ jsx(
-      Ariakit.Button,
+      AkButton,
       {
         accessibleWhenDisabled: true,
+        ...rest,
         "data-kiwi-variant": variant,
         "data-kiwi-tone": tone,
-        ...rest,
-        className: cx("\u{1F95D}-button", props.className),
+        "data-kiwi-ghost-align": variant === "ghost" ? ghostAlignment : void 0,
+        className: cx(
+          "\u{1F95D}-button",
+          { "\u{1F95D}-ghost-aligner": variant === "ghost" },
+          props.className
+        ),
         ref: forwardedRef
       }
     );

package/dist/DEV/bricks/Checkbox.js

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

package/dist/DEV/bricks/Chip.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+import { IconButton } from "./IconButton.js";
+import { Dismiss } from "./Icon.js";
+const Chip = forwardRef((props, forwardedRef) => {
+  const { variant = "solid", onDismiss, label, ...rest } = props;
+  const baseId = React.useId();
+  const labelId = `${baseId}-label`;
+  const dismissIconId = `${baseId}-dismiss`;
+  return /* @__PURE__ */ jsxs(
+    Role.div,
+    {
+      "data-kiwi-variant": variant,
+      ...rest,
+      className: cx("\u{1F95D}-chip", props.className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
+        onDismiss && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            id: dismissIconId,
+            className: "\u{1F95D}-chip-dismiss-button",
+            variant: "ghost",
+            "aria-labelledby": `${dismissIconId} ${labelId}`,
+            label: "Dismiss",
+            labelVariant: "visually-hidden",
+            icon: /* @__PURE__ */ jsx(Dismiss, {}),
+            onClick: onDismiss
+          }
+        )
+      ]
+    }
+  );
+});
+DEV: Chip.displayName = "Chip";
+export {
+  Chip
+};

package/dist/DEV/bricks/Description.js

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

package/dist/DEV/bricks/Divider.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
+import { Separator } from "@ariakit/react/separator";
 import { forwardRef } from "./~utils.js";
 const Divider = forwardRef((props, forwardedRef) => {
   const { presentational, ...rest } = props;
-  const Comp = presentational ? Ariakit.Role : Ariakit.Separator;
+  const Comp = presentational ? Role : Separator;
   return /* @__PURE__ */ jsx(
     Comp,
     {

package/dist/DEV/bricks/DropdownMenu.js

@@ -1,12 +1,24 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import * as ListItem from "./ListItem.js";
+import * as ListItem from "./~utils.ListItem.js";
 import { Button } from "./Button.js";
 import { Kbd } from "./Kbd.js";
-import { DisclosureArrow } from "./Icon.js";
-import { forwardRef, supportsPopover } from "./~utils.js";
+import { Checkmark, DisclosureArrow, Icon } from "./Icon.js";
+import {
+  forwardRef
+} from "./~utils.js";
+import { usePopoverApi } from "./~hooks.js";
+import {
+  MenuProvider,
+  useMenuContext,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItemCheckbox
+} from "@ariakit/react/menu";
+import { useStoreState } from "@ariakit/react/store";
+import { predefinedSymbols } from "./Kbd.internal.js";
 function DropdownMenu(props) {
   const {
     children,
@@ -15,21 +27,9 @@ function DropdownMenu(props) {
     setOpen: setOpenProp,
     defaultOpen: defaultOpenProp
   } = props;
-  const store = Ariakit.useMenuStore();
-  const open = Ariakit.useStoreState(store, (state) => state.open);
-  const popover = Ariakit.useStoreState(store, (state) => state.popoverElement);
-  React.useEffect(
-    function syncPopoverWithOpenState() {
-      if (popover?.isConnected) {
-        popover?.togglePopover?.(open);
-      }
-    },
-    [open, popover]
-  );
   return /* @__PURE__ */ jsx(
-    Ariakit.MenuProvider,
+    MenuProvider,
     {
-      store,
       placement,
       defaultOpen: defaultOpenProp,
       open: openProp,
@@ -41,14 +41,16 @@ function DropdownMenu(props) {
 DEV: DropdownMenu.displayName = "DropdownMenu.Root";
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
+    const popover = usePopoverApi(useMenuContext());
     return /* @__PURE__ */ jsx(
-      Ariakit.Menu,
+      Menu,
       {
-        portal: !supportsPopover,
+        portal: popover.portal,
         unmountOnHide: true,
         ...props,
-        style: { zIndex: supportsPopover ? void 0 : 9999, ...props.style },
-        wrapperProps: { popover: "manual" },
+        gutter: 4,
+        style: { ...popover.style, ...props.style },
+        wrapperProps: popover.wrapperProps,
         className: cx("\u{1F95D}-dropdown-menu", props.className),
         ref: forwardedRef
       }
@@ -59,8 +61,9 @@ DEV: DropdownMenuContent.displayName = "DropdownMenu.Content";
 const DropdownMenuButton = forwardRef(
   (props, forwardedRef) => {
     const { accessibleWhenDisabled = true, children, ...rest } = props;
+    const open = useStoreState(useMenuContext(), (state) => state?.open);
     return /* @__PURE__ */ jsx(
-      Ariakit.MenuButton,
+      MenuButton,
       {
         accessibleWhenDisabled: true,
         render: /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
@@ -69,6 +72,7 @@ const DropdownMenuButton = forwardRef(
         ] }),
         ...rest,
         className: cx("\u{1F95D}-dropdown-menu-button", props.className),
+        "data-has-popover-open": open || void 0,
         ref: forwardedRef
       }
     );
@@ -77,29 +81,104 @@ const DropdownMenuButton = forwardRef(
 DEV: DropdownMenuButton.displayName = "DropdownMenu.Button";
 const DropdownMenuItem = forwardRef(
   (props, forwardedRef) => {
-    const { shortcuts, ...rest } = props;
-    const shortcutKeys = React.useMemo(() => {
-      return typeof shortcuts === "string" ? shortcuts.split("+").map((key) => key.trim()) : [];
-    }, [shortcuts]);
-    const hasShortcuts = shortcutKeys.length > 0;
+    const { label, shortcuts, icon, ...rest } = props;
     return /* @__PURE__ */ jsxs(
-      Ariakit.MenuItem,
+      MenuItem,
       {
         accessibleWhenDisabled: true,
         ...rest,
         render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
+        className: cx("\u{1F95D}-dropdown-menu-item", props.className),
         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}`)) })
+          icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+          /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
+          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null
         ]
       }
     );
   }
 );
 DEV: DropdownMenuItem.displayName = "DropdownMenu.Item";
+const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
+  const { shortcuts, ...rest } = props;
+  const shortcutKeys = React.useMemo(() => {
+    return shortcuts.split("+").map((key) => ({
+      key: key.trim(),
+      isSymbol: key in predefinedSymbols
+    }));
+  }, [shortcuts]);
+  return /* @__PURE__ */ jsx(
+    ListItem.Decoration,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-dropdown-menu-item-shortcuts", props.className),
+      ref: forwardedRef,
+      children: shortcutKeys.map(({ key, isSymbol }, index) => {
+        if (isSymbol) {
+          return /* @__PURE__ */ jsx(
+            Kbd,
+            {
+              variant: "ghost",
+              symbol: key
+            },
+            `${key + index}`
+          );
+        }
+        return /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`);
+      })
+    }
+  );
+});
+DEV: DropdownMenuItemShortcuts.displayName = "DropdownMenuItemShortcuts";
+const DropdownMenuIcon = forwardRef(
+  (props, forwardedRef) => {
+    const { icon, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      ListItem.Decoration,
+      {
+        render: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            href: typeof icon === "string" ? icon : void 0,
+            render: React.isValidElement(icon) ? icon : void 0
+          }
+        ),
+        ...rest,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DropdownMenuIcon.displayName = "DropdownMenuIcon";
+const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
+  const { label, icon, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    MenuItemCheckbox,
+    {
+      accessibleWhenDisabled: true,
+      value: props.defaultChecked ? "on" : void 0,
+      ...rest,
+      render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
+      className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+      ref: forwardedRef,
+      children: [
+        icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+        /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
+        /* @__PURE__ */ jsx(
+          ListItem.Decoration,
+          {
+            render: /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+          }
+        )
+      ]
+    }
+  );
+});
+DEV: DropdownMenuCheckboxItem.displayName = "DropdownMenu.CheckboxItem";
 export {
   DropdownMenuButton as Button,
+  DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
   DropdownMenu as Root

package/dist/DEV/bricks/Field.js

@@ -1,27 +1,128 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/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) => {
-  const fieldId = React.useId();
-  const { className, layout, ...rest } = props;
-  return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(
-    Ariakit.Role,
+  const { layout, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    FieldCollection,
     {
-      ...rest,
-      className: cx("\u{1F95D}-field", className),
-      "data-kiwi-layout": layout,
-      ref: forwardedRef
+      render: /* @__PURE__ */ jsx(
+        Role.div,
+        {
+          ...rest,
+          className: cx("\u{1F95D}-field", props.className),
+          "data-kiwi-layout": layout,
+          ref: forwardedRef
+        }
+      )
     }
-  ) });
+  );
 });
 DEV: Field.displayName = "Field";
-const FieldIdContext = React.createContext(void 0);
-function useFieldId() {
-  return React.useContext(FieldIdContext);
+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"
+    );
+    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(
+    Collection,
+    {
+      ...props,
+      store: fieldElementCollection,
+      "data-kiwi-label-placement": labelPlacement,
+      "data-kiwi-control-type": controlType
+    }
+  );
+}
+function FieldControl(props) {
+  const store = useCollectionContext();
+  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 getData = React.useCallback(
+    (data) => ({
+      ...data,
+      elementType: "label"
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    CollectionItem,
+    {
+      getItem: getData,
+      render: /* @__PURE__ */ jsx(Role.label, { ...props, htmlFor: fieldId })
+    }
+  );
+}
+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 });
 }
 export {
   Field,
-  useFieldId
+  FieldControl,
+  FieldDescription,
+  FieldLabel
 };