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

package/dist/bricks/Badge.d.ts

@@ -0,0 +1,28 @@
+import { type BaseProps } from "./~utils.js";
+interface BadgeProps extends Omit<BaseProps<"span">, "children"> {
+    /**
+     * The label displayed inside the badge.
+     */
+    label: string;
+    /**
+     * The tone of the badge.
+     * @default "neutral"
+     */
+    tone?: "neutral" | "info" | "positive" | "attention" | "critical";
+    /**
+     * The variant style of the badge.
+     * @default "solid"
+     */
+    variant?: "solid" | "muted" | "outline";
+}
+/**
+ * A badge component, typically used to designate the status of an item.
+ *
+ * Example:
+ * ```tsx
+ * <Badge label="Value" />
+ * <Badge label="Value" tone="info" variant="outline" />
+ * ```
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
+export {};

package/dist/bricks/Badge.js

@@ -0,0 +1,21 @@
+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
+    }
+  );
+});
+export {
+  Badge
+};

package/dist/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/bricks/Checkbox.d.ts

@@ -1,7 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import { type CheckboxProps as AkCheckboxProps } from "@ariakit/react/checkbox";
 import { type FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "checked" | "defaultChecked">;
-type CheckboxOwnProps = Pick<Ariakit.CheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
+type CheckboxOwnProps = Pick<AkCheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
 interface CheckboxProps extends InputBaseProps, CheckboxOwnProps {
 }
 /**

package/dist/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/bricks/Chip.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface ChipProps extends Omit<BaseProps<"div">, "children"> {
+    /**
+     * The label displayed inside the chip.
+     */
+    label: string;
+    /**
+     * The variant style of the Chip.
+     * Use "solid" for primary states and "outline" for less prominent states.
+     *
+     * @default "solid"
+     */
+    variant?: "solid" | "outline";
+    /**
+     * Callback invoked when the dismiss ("❌") button is clicked.
+     */
+    onDismiss?: () => void;
+}
+/**
+ * Chip is a UI component used to represent an item, attribute, or action in a compact visual style.
+ * It supports two visual variants: `solid` for primary emphasis and `outline` for less prominent states.
+ *
+ * Example:
+ * ```tsx
+ * <Chip label="Value" />
+ * <Chip label="Value" variant="outline" />
+ * ```
+ */
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/Chip.js

@@ -0,0 +1,41 @@
+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
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Chip
+};

package/dist/bricks/Description.d.ts

@@ -0,0 +1,19 @@
+import { type BaseProps } from "./~utils.js";
+interface DescriptionProps extends BaseProps {
+    /**
+     * The tone of the description.
+     * @default "neutral"
+     */
+    tone?: "neutral" | "critical";
+}
+/**
+ * An additional description for a form control.
+ *
+ * Should not include content without an adequate text alternative.
+ *
+ * Either give this component an `id` and manually associate with a form control
+ * using `aria-describedby` on said control or use the `<Field>` component
+ * (WIP).
+ */
+export declare const Description: import("react").ForwardRefExoticComponent<DescriptionProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/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/bricks/Divider.d.ts

@@ -1,6 +1,6 @@
-import * as Ariakit from "@ariakit/react";
+import { type SeparatorProps } from "@ariakit/react/separator";
 import { type BaseProps } from "./~utils.js";
-interface DividerProps extends BaseProps<"hr">, Pick<Ariakit.SeparatorProps, "orientation"> {
+interface DividerProps extends BaseProps<"hr">, Pick<SeparatorProps, "orientation"> {
     /**
      * If true, the divider will be purely presentational and will not have any associated semantics.
      *

package/dist/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/bricks/DropdownMenu.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
-import { type FocusableProps } from "./~utils.js";
-interface DropdownMenuProps extends Pick<Ariakit.MenuProviderProps, "children" | "placement" | "open" | "setOpen" | "defaultOpen"> {
+import { type AnyString, type BaseProps, type FocusableProps } from "./~utils.js";
+import { type MenuItemCheckboxProps, type MenuProviderProps } from "@ariakit/react/menu";
+import { type PredefinedSymbol } from "./Kbd.internal.js";
+interface DropdownMenuProps extends Pick<MenuProviderProps, "children" | "placement" | "open" | "setOpen" | "defaultOpen"> {
 }
 /**
  * A dropdown menu displays a list of actions or commands when the menu button is clicked.
@@ -14,9 +15,9 @@ interface DropdownMenuProps extends Pick<Ariakit.MenuProviderProps, "children" |
  *   <DropdownMenu.Button>Actions</DropdownMenu.Button>
  *
  *   <DropdownMenu.Content>
- *     <DropdownMenu.Item>Add</DropdownMenu.Item>
- *     <DropdownMenu.Item>Edit</DropdownMenu.Item>
- *     <DropdownMenu.Item>Delete</DropdownMenu.Item>
+ *     <DropdownMenu.Item label="Add" />
+ *     <DropdownMenu.Item label="Edit" />
+ *     <DropdownMenu.Item label="Delete" />
  *   </DropdownMenu.Content>
  * </DropdownMenu.Root>
  * ```
@@ -55,7 +56,21 @@ interface DropdownMenuButtonProps extends FocusableProps<"button"> {
  * ```
  */
 declare const DropdownMenuButton: React.ForwardRefExoticComponent<DropdownMenuButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-interface DropdownMenuItemProps extends FocusableProps {
+interface DropdownMenuItemProps extends Omit<FocusableProps, "children">, Partial<Pick<DropdownMenuItemShortcutsProps, "shortcuts"> & Pick<DropdownMenuIconProps, "icon">> {
+    /** The primary text label for the menu-item. */
+    label: React.ReactNode;
+}
+/**
+ * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu.Item label="Add" />
+ * <DropdownMenu.Item label="Edit" />
+ * ```
+ */
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface DropdownMenuItemShortcutsProps extends BaseProps {
     /**
      * A string defining the keyboard shortcut(s) associated with the menu item.
      *
@@ -63,22 +78,34 @@ interface DropdownMenuItemProps extends FocusableProps {
      * shortcuts="S" // A single key shortcut
      * ```
      *
-     * Multiple keys should be separated by the '+' character.
+     * Multiple keys should be separated by the `+` character. If one of the keys is
+     * recognized as a symbol name or a modifier key, it will be displayed as a symbol.
      *
      * ```tsx
-     * shortcuts="Ctrl+Shift+S" // A multi-key combination
+     * shortcuts="Control+Enter" // A multi-key shortcut, displayed as "Ctrl ⏎"
      * ```
      */
-    shortcuts?: string;
+    shortcuts: AnyString | `${PredefinedSymbol}+${AnyString}`;
+}
+interface DropdownMenuIconProps extends BaseProps {
+    /**
+     * An optional icon displayed before the menu-item label.
+     *
+     * Can be a URL of an SVG from the `@itwin/itwinui-icons` package,
+     * or a custom JSX icon.
+     */
+    icon?: string | React.JSX.Element;
+}
+interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps, "onChange" | "children">, Pick<MenuItemCheckboxProps, "checked" | "onChange" | "name" | "value">, Pick<DropdownMenuItemProps, "label" | "icon"> {
 }
 /**
  * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
  *
  * Example:
  * ```tsx
- * <DropdownMenu.Item>Add</DropdownMenu.Item>
- * <DropdownMenu.Item>Edit</DropdownMenu.Item>
+ * <DropdownMenu.CheckboxItem name="add" label="Add" />
+ * <DropdownMenu.CheckboxItem name="edit" label="Edit" />
  * ```
  */
-declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-export { DropdownMenu as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, };
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { DropdownMenu as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, DropdownMenuCheckboxItem as CheckboxItem, };

package/dist/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,
@@ -40,14 +40,16 @@ function DropdownMenu(props) {
 }
 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
       }
@@ -57,8 +59,9 @@ const DropdownMenuContent = forwardRef(
 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: [
@@ -67,6 +70,7 @@ const DropdownMenuButton = forwardRef(
         ] }),
         ...rest,
         className: cx("\u{1F95D}-dropdown-menu-button", props.className),
+        "data-has-popover-open": open || void 0,
         ref: forwardedRef
       }
     );
@@ -74,28 +78,100 @@ const DropdownMenuButton = forwardRef(
 );
 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
         ]
       }
     );
   }
 );
+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}`);
+      })
+    }
+  );
+});
+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
+      }
+    );
+  }
+);
+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" })
+          }
+        )
+      ]
+    }
+  );
+});
 export {
   DropdownMenuButton as Button,
+  DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
   DropdownMenu as Root

package/dist/bricks/Field.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useCollectionStore, type CollectionItemProps } from "@ariakit/react/collection";
 import { type BaseProps } from "./~utils.js";
 interface FieldProps extends BaseProps {
     /**
@@ -27,5 +28,26 @@ interface FieldProps extends BaseProps {
  * - `Switch`
  */
 export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-export declare function useFieldId(): string | undefined;
+type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof useCollectionStore>["item"]>>;
+interface FieldCollectionStoreItem extends CollectionStoreItem {
+    /** The type of field element being tracked */
+    elementType: "label" | "control" | "description";
+    /** If a control, the type of control. */
+    controlType?: "textlike" | "checkable";
+}
+interface FieldCollectionItemControlProps extends Pick<CollectionItemProps, "render" | "id"> {
+    type: FieldCollectionStoreItem["controlType"];
+}
+/**
+ * An element tracked as a control in the `Field`’s collection.
+ */
+export declare function FieldControl(props: FieldCollectionItemControlProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * An element tracked as a label in the `Field`’s collection.
+ */
+export declare function FieldLabel(props: Pick<CollectionItemProps, "render">): import("react/jsx-runtime").JSX.Element;
+/**
+ * An element tracked as a description in the `Field`’s collection.
+ */
+export declare function FieldDescription(props: Pick<CollectionItemProps, "render" | "id">): import("react/jsx-runtime").JSX.Element;
 export {};