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

package/dist/bricks/DropdownMenu.js

@@ -0,0 +1,102 @@
+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 { Button } from "./Button.js";
+import { Kbd } from "./Kbd.js";
+import { DisclosureArrow } from "./Icon.js";
+import { forwardRef, supportsPopover } from "./~utils.js";
+function DropdownMenu(props) {
+  const {
+    children,
+    placement,
+    open: openProp,
+    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,
+    {
+      store,
+      placement,
+      defaultOpen: defaultOpenProp,
+      open: openProp,
+      setOpen: setOpenProp,
+      children
+    }
+  );
+}
+const DropdownMenuContent = 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 DropdownMenuButton = forwardRef(
+  (props, forwardedRef) => {
+    const { accessibleWhenDisabled = true, children, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Ariakit.MenuButton,
+      {
+        accessibleWhenDisabled: true,
+        render: /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
+          children,
+          /* @__PURE__ */ jsx(DisclosureArrow, {})
+        ] }),
+        ...rest,
+        className: cx("\u{1F95D}-dropdown-menu-button", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+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;
+    return /* @__PURE__ */ jsxs(
+      Ariakit.MenuItem,
+      {
+        accessibleWhenDisabled: true,
+        ...rest,
+        render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
+        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}`)) })
+        ]
+      }
+    );
+  }
+);
+export {
+  DropdownMenuButton as Button,
+  DropdownMenuContent as Content,
+  DropdownMenuItem as Item,
+  DropdownMenu as Root
+};

package/dist/bricks/Field.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface FieldProps extends BaseProps {
+    /**
+     * Allows overriding the default block layout for text controls.
+     */
+    layout?: "inline";
+}
+/**
+ * A container for form controls. It manages ID associations provides a consistent layout and spacing.
+ *
+ * Example:
+ * ```tsx
+ * <Field>
+ *   <Label>Label</Label>
+ *   <TextBox.Input />
+ * </Field>
+ * ```
+ *
+ * Supports a `layout` prop, which can be set to `inline` to align the label and control horizontally.
+ *
+ * Should contain a `Label` component paired with a form control. Supported form controls include:
+ * - `TextBox.Input`
+ * - `TextBox.Textarea`
+ * - `Checkbox`
+ * - `Radio`
+ * - `Switch`
+ */
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export declare function useFieldId(): string | undefined;
+export {};

package/dist/bricks/Field.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+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 { className, layout, ...rest } = props;
+  return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(
+    Ariakit.Role,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-field", className),
+      "data-kiwi-layout": layout,
+      ref: forwardedRef
+    }
+  ) });
+});
+const FieldIdContext = React.createContext(void 0);
+function useFieldId() {
+  return React.useContext(FieldIdContext);
+}
+export {
+  Field,
+  useFieldId
+};

package/dist/bricks/Icon.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface IconProps extends Omit<BaseProps<"svg">, "children"> {
+    /** URL of the symbol sprite. */
+    href?: string;
+    /** Size of the icon. Defaults to `regular`. */
+    size?: "regular" | "large";
+}
+/**
+ * Icon component that provides fill and sizing to the SVGs from `@itwin/itwinui-icons`.
+ * It uses an external symbol sprite to render the icon based on the specified `size`.
+ *
+ * ```tsx
+ * const arrowIcon = new URL("@itwin/itwinui-icons/arrow.svg", import.meta.url).href;
+ * <Icon href={arrowIcon} />
+ * ```
+ *
+ * It also accepts a custom SVG, via the `render `prop:
+ *
+ * ```tsx
+ * <Icon render={<svg><path d="…" fill="currentColor" /></svg>} />
+ * ```
+ *
+ * **Note**: This component is meant to be used with decorative icons, so it adds `aria-hidden` by default.
+ */
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface DisclosureArrowProps extends Omit<BaseProps<"svg">, "children"> {
+    /**
+     * Which direction should the arrow point towards?
+     * @default "down"
+     */
+    direction?: "down" | "right";
+}
+export declare const DisclosureArrow: React.ForwardRefExoticComponent<DisclosureArrowProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+export {};

package/dist/bricks/Icon.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+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 iconId = toIconId(size);
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.svg,
+    {
+      "data-kiwi-size": size,
+      "aria-hidden": true,
+      ...rest,
+      className: cx("\u{1F95D}-icon", props.className),
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("use", { href: `${props.href}#${iconId}` })
+    }
+  );
+});
+function toIconId(size) {
+  if (size === "large") return "icon-large";
+  return "icon";
+}
+const DisclosureArrow = forwardRef(
+  (props, forwardedRef) => {
+    const { direction = "down", ...rest } = props;
+    const path = React.useMemo(() => {
+      switch (direction) {
+        case "down":
+          return /* @__PURE__ */ jsx("path", { d: "M8 10 5 7h6l-3 3Z" });
+        case "right":
+          return /* @__PURE__ */ jsx("path", { d: "M7 11V5l3 3-3 3Z" });
+      }
+    }, [direction]);
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...rest,
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            children: path
+          }
+        ),
+        className: cx("\u{1F95D}-disclosure-arrow", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+export {
+  DisclosureArrow,
+  Icon
+};

package/dist/bricks/IconButton.d.ts

@@ -0,0 +1,79 @@
+import { Button } from "./Button.js";
+interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>, "children" | "tone"> {
+    /**
+     * Accessible name for the button.
+     *
+     * This label gets used by assistive technology to identify the button,
+     * and also gets shown in a tooltip by default.
+     */
+    label: string;
+    /**
+     * Icon to be displayed inside the button.
+     *
+     * Can be a URL of an SVG from the `kiwi-icons` package,
+     * or a custom JSX icon.
+     */
+    icon: string | React.JSX.Element;
+    /**
+     * Behavior of the label.
+     *
+     * By default, the label is shown in a tooltip. Use `"visually-hidden"` to
+     * hide the label from sighted users.
+     *
+     * @default "tooltip"
+     */
+    labelVariant?: "tooltip" | "visually-hidden";
+}
+/**
+ * An icon-only button, with a required accessible name.
+ *
+ * The icon can be a URL from the `kiwi-icons` package:
+ * ```tsx
+ * <IconButton
+ *   label="Reveal full content"
+ *   icon={new URL("@itwin/itwinui-icons/arrow.svg", import.meta.url).href}
+ * />
+ * ```
+ *
+ * Alternatively, pass a JSX node such as an `<Icon>`.
+ * ```tsx
+ * <IconButton
+ *   label={…}
+ *   icon={<Icon href={…} />}
+ *   variant="ghost"
+ * />
+ * ```
+ *
+ * The `isActive` prop can be used to turn this button into a toggle button.
+ * ```tsx
+ * const [isActive, setIsActive] = React.useState(false);
+ *
+ * <IconButton
+ *   label={…}
+ *   icon={…}
+ *   isActive={isActive}
+ *   onClick={() => setIsActive(!isActive)}
+ * />
+ * ```
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<(Omit<IconButtonBaseProps & {
+    variant: "ghost";
+    /**
+     * Whether the button is in a toggled state and currently "active" (toggled on).
+     *
+     * Setting this prop to `true` or `false` will turn this button into a toggle button.
+     * The button will have an `aria-pressed` attribute and extra styling for the "active" state.
+     * When this prop is `undefined`, the button will be a regular button (no `aria-pressed` attribute).
+     *
+     * **Note:** This prop is only available with `variant="ghost"`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed
+     *
+     * @default undefined
+     */
+    isActive?: boolean;
+}, "ref"> | Omit<IconButtonBaseProps & {
+    variant?: Omit<React.ComponentProps<typeof Button>["variant"], "ghost">;
+    isActive?: never;
+}, "ref">) & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+export {};

package/dist/bricks/IconButton.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+import { Button } from "./Button.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { Icon } from "./Icon.js";
+import { Tooltip } from "./Tooltip.js";
+import { forwardRef } from "./~utils.js";
+const IconButton = forwardRef(
+  (props, forwardedRef) => {
+    const { label, icon, isActive, labelVariant, ...rest } = props;
+    const button = /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-pressed": isActive,
+        ...rest,
+        className: cx("\u{1F95D}-icon-button", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: label }),
+          typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon
+        ]
+      }
+    );
+    if (labelVariant === "visually-hidden") {
+      return button;
+    }
+    return /* @__PURE__ */ jsx(Tooltip, { content: label, type: "none", children: button });
+  }
+);
+export {
+  IconButton
+};

package/dist/bricks/Kbd.d.ts

@@ -0,0 +1,15 @@
+import { type BaseProps } from "./~utils.js";
+interface KbdProps extends BaseProps<"kbd"> {
+    /** @default "solid" */
+    variant?: "solid" | "muted" | "ghost";
+}
+/**
+ * A styled wrapper over the HTML `<kbd>` element. This is typically
+ * used for displaying keyboard shortcuts.
+ *
+ * ```tsx
+ * <Kbd>Ctrl</Kbd> <Kbd>S</Kbd>
+ * ```
+ */
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/bricks/Kbd.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const Kbd = forwardRef((props, forwardedRef) => {
+  const { variant = "solid", ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role,
+    {
+      "data-kiwi-variant": variant,
+      ...rest,
+      className: cx("\u{1F95D}-kbd", props.className),
+      render: props.render || /* @__PURE__ */ jsx("kbd", {}),
+      ref: forwardedRef
+    }
+  );
+});
+export {
+  Kbd
+};

package/dist/bricks/Label.d.ts

@@ -0,0 +1,25 @@
+import { type BaseProps } from "./~utils.js";
+interface LabelProps extends BaseProps<"label"> {
+}
+/**
+ * A styled wrapper over the HTML `<label>` element, used for labelling form controls.
+ *
+ * Can be used standalone:
+
+ * ```tsx
+ * <Label htmlFor="my-input">Label</Label>
+ * <TextBox.Input id="my-input" />
+ * ```
+ *
+ * Or within a `Field` component to automatically manage ID associations:
+ *
+ * ```tsx
+ * <Field>
+ *   <Label>Label</Label>
+ *   <TextBox.Input />
+ * </Field>
+ * ```
+ *
+ */
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLElement | HTMLLabelElement>>;
+export {};

package/dist/bricks/Label.js

@@ -0,0 +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";
+const Label = forwardRef((props, forwardedRef) => {
+  const fieldId = useFieldId();
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.label,
+    {
+      htmlFor: fieldId,
+      ...props,
+      className: cx("\u{1F95D}-label", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+export {
+  Label
+};

package/dist/bricks/ListItem.d.ts

@@ -0,0 +1,10 @@
+import * as Ariakit from "@ariakit/react";
+interface ListItemProps extends Ariakit.RoleProps<"div"> {
+}
+/** @internal */
+declare const ListItem: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+interface ListItemContentProps extends Ariakit.RoleProps<"span"> {
+}
+/** @internal */
+declare const ListItemContent: import("react").ForwardRefExoticComponent<Omit<ListItemContentProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
+export { ListItem as Root, ListItemContent as Content };

package/dist/bricks/ListItem.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const ListItem = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      role: "listitem",
+      ...props,
+      className: cx("\u{1F95D}-list-item", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+const ListItemContent = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.span,
+      {
+        ...props,
+        className: cx("\u{1F95D}-list-item-content", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+export {
+  ListItemContent as Content,
+  ListItem as Root
+};

package/dist/bricks/Radio.d.ts

@@ -0,0 +1,23 @@
+import * as Ariakit from "@ariakit/react";
+import { type FocusableProps } from "./~utils.js";
+type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
+type RadioOwnProps = Pick<Ariakit.RadioProps, "value" | "checked" | "onChange">;
+interface RadioProps extends InputBaseProps, RadioOwnProps {
+}
+/**
+ * A styled radio input element, typically used for selecting a single option from a list.
+ *
+ * Works well with the `Field` and `Label` components.
+ *
+ * ```tsx
+ * <Field>
+ *   <Label>Choose one</Label>
+ *   <Radio />
+ * </Field>
+ * ```
+ *
+ * Underneath, it's an HTML radio input, i.e. `<input type="radio">`, so it supports the same props,
+ * including `value`, `defaultChecked`, `checked`, and `onChange`.
+ */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLElement | HTMLInputElement>>;
+export {};

package/dist/bricks/Radio.js

@@ -0,0 +1,21 @@
+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";
+const Radio = forwardRef((props, forwardedRef) => {
+  const fieldId = useFieldId();
+  return /* @__PURE__ */ jsx(
+    Ariakit.Radio,
+    {
+      accessibleWhenDisabled: true,
+      id: fieldId,
+      ...props,
+      className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+export {
+  Radio
+};

package/dist/bricks/Root.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface RootProps extends BaseProps {
+    /**
+     * The color scheme to use for all components under the Root.
+     */
+    colorScheme: "light" | "dark";
+    /**
+     * Whether to synchronize the color scheme with the parent document (or shadow-root host).
+     *
+     * This is useful when you don't have explicit control over the color scheme of the host.
+     *
+     * @default false
+     */
+    synchronizeColorScheme?: boolean;
+    /**
+     * The density to use for all components under the Root.
+     */
+    density: "dense";
+}
+/**
+ * Component to be used at the root of your application. It ensures that kiwi styles and fonts are loaded
+ * and automatically applied to the current page or the encompassing shadow-root.
+ *
+ * Make sure to specify the `colorScheme` and `density` props.
+ *
+ * Example:
+ * ```tsx
+ * <Root colorScheme="dark" density="dense">
+ *   <App />
+ * </Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};