@itwin/itwinui-react 5.0.0-alpha.0 → 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,28 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-const Anchor = React.forwardRef(
-  (props, forwardedRef) => {
-    const { tone = "neutral", ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      Ariakit.Role.a,
-      {
-        "data-kiwi-tone": tone,
-        ...rest,
-        className: cx("\u{1F95D}-anchor", props.className),
-        render: /* @__PURE__ */ jsx(
-          Ariakit.Focusable,
-          {
-            accessibleWhenDisabled: true,
-            render: props.render || /* @__PURE__ */ jsx("a", {})
-          }
-        ),
-        ref: forwardedRef
-      }
-    );
-  }
-);
+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(
+    Role.a,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      className: cx("\u{1F95D}-anchor", props.className),
+      render: /* @__PURE__ */ jsx(Focusable, { accessibleWhenDisabled: true, render: props.render || /* @__PURE__ */ jsx("a", {}) }),
+      ref: forwardedRef
+    }
+  );
+});
 DEV: Anchor.displayName = "Anchor";
 export {
   Anchor

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,21 +1,30 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-const Button = React.forwardRef((props, forwardedRef) => {
-  const { variant = "solid", tone = "neutral", ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    Ariakit.Button,
-    {
-      accessibleWhenDisabled: true,
-      "data-kiwi-variant": variant,
-      "data-kiwi-tone": tone,
-      ...rest,
-      className: cx("\u{1F95D}-button", props.className),
-      ref: forwardedRef
-    }
-  );
-});
+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(
+      AkButton,
+      {
+        accessibleWhenDisabled: true,
+        ...rest,
+        "data-kiwi-variant": variant,
+        "data-kiwi-tone": tone,
+        "data-kiwi-ghost-align": variant === "ghost" ? ghostAlignment : void 0,
+        className: cx(
+          "\u{1F95D}-button",
+          { "\u{1F95D}-ghost-aligner": variant === "ghost" },
+          props.className
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 DEV: Button.displayName = "Button";
 export {
   Button

package/dist/DEV/bricks/Checkbox.js

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

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,22 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-const Divider = React.forwardRef(
-  (props, forwardedRef) => {
-    const { presentational, ...rest } = props;
-    const Comp = presentational ? Ariakit.Role : Ariakit.Separator;
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ...rest,
-        className: cx("\u{1F95D}-divider", props.className),
-        "data-kiwi-orientation": props.orientation,
-        ref: forwardedRef
-      }
-    );
-  }
-);
+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 ? Role : Separator;
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-divider", props.className),
+      "data-kiwi-orientation": props.orientation,
+      ref: forwardedRef
+    }
+  );
+});
 DEV: Divider.displayName = "Divider";
 export {
   Divider

package/dist/DEV/bricks/DropdownMenu.js

@@ -1,11 +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 { DisclosureArrow } from "./Icon.js";
-import { supportsPopover } from "./~utils.js";
+import { Kbd } from "./Kbd.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,
@@ -14,21 +27,9 @@ function DropdownMenu(props) {
     setOpen: setOpenProp,
     defaultOpen: defaultOpenProp
   } = props;
-  const store = Ariakit.useMenuStore();
-  const open = Ariakit.useStoreState(store, (store2) => store2.open);
-  const popover = Ariakit.useStoreState(store, (store2) => store2.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,
@@ -38,52 +39,146 @@ function DropdownMenu(props) {
   );
 }
 DEV: DropdownMenu.displayName = "DropdownMenu.Root";
-const DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Ariakit.Menu,
-    {
-      portal: !supportsPopover,
-      unmountOnHide: true,
-      ...props,
-      style: { zIndex: supportsPopover ? void 0 : 9999, ...props.style },
-      wrapperProps: { popover: "manual" },
-      className: cx("\u{1F95D}-dropdown-menu", props.className),
-      ref: forwardedRef
-    }
-  );
-});
+const DropdownMenuContent = forwardRef(
+  (props, forwardedRef) => {
+    const popover = usePopoverApi(useMenuContext());
+    return /* @__PURE__ */ jsx(
+      Menu,
+      {
+        portal: popover.portal,
+        unmountOnHide: true,
+        ...props,
+        gutter: 4,
+        style: { ...popover.style, ...props.style },
+        wrapperProps: popover.wrapperProps,
+        className: cx("\u{1F95D}-dropdown-menu", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 DEV: DropdownMenuContent.displayName = "DropdownMenu.Content";
-const DropdownMenuButton = React.forwardRef((props, forwardedRef) => {
-  const { accessibleWhenDisabled = true, children, ...rest } = props;
+const DropdownMenuButton = forwardRef(
+  (props, forwardedRef) => {
+    const { accessibleWhenDisabled = true, children, ...rest } = props;
+    const open = useStoreState(useMenuContext(), (state) => state?.open);
+    return /* @__PURE__ */ jsx(
+      MenuButton,
+      {
+        accessibleWhenDisabled: true,
+        render: /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
+          children,
+          /* @__PURE__ */ jsx(DisclosureArrow, {})
+        ] }),
+        ...rest,
+        className: cx("\u{1F95D}-dropdown-menu-button", props.className),
+        "data-has-popover-open": open || void 0,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DropdownMenuButton.displayName = "DropdownMenu.Button";
+const DropdownMenuItem = forwardRef(
+  (props, forwardedRef) => {
+    const { label, shortcuts, icon, ...rest } = props;
+    return /* @__PURE__ */ jsxs(
+      MenuItem,
+      {
+        accessibleWhenDisabled: true,
+        ...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 }),
+          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(
-    Ariakit.MenuButton,
+    ListItem.Decoration,
     {
-      accessibleWhenDisabled: true,
-      render: /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
-        children,
-        /* @__PURE__ */ jsx(DisclosureArrow, {})
-      ] }),
       ...rest,
-      className: cx("\u{1F95D}-dropdown-menu-button", props.className),
-      ref: forwardedRef
+      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: DropdownMenuButton.displayName = "DropdownMenu.Button";
-const DropdownMenuItem = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Ariakit.MenuItem,
+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,
-      ...props,
+      value: props.defaultChecked ? "on" : void 0,
+      ...rest,
       render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
-      ref: forwardedRef
+      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: DropdownMenuItem.displayName = "DropdownMenu.Item";
+DEV: DropdownMenuCheckboxItem.displayName = "DropdownMenu.CheckboxItem";
 export {
   DropdownMenuButton as Button,
+  DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
   DropdownMenu as Root