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

package/LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © 2021-2024 Bentley Systems, Incorporated. All rights reserved.
+Copyright © 2024 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,100 +1,29 @@
-<p align="center">
-  <picture>
-    <source
-      media='(prefers-color-scheme: dark)'
-      srcset='https://itwin.github.io/iTwinUI/logo-dark.svg'
-    />
-    <img
-      src='https://itwin.github.io/iTwinUI/logo.svg'
-      alt='iTwinUI logo'
-    />
-  </picture>
-</p>
+# @itwin/itwinui-react
 
-<h1 align="center">iTwinUI-react</h1>
-
-<div align="center">
-  
-  [![itwinui-react on npm](https://img.shields.io/npm/v/@itwin/itwinui-react)](https://www.npmjs.com/package/@itwin/itwinui-react)
-  [![Build status](https://github.com/iTwin/iTwinUI/actions/workflows/build.yml/badge.svg?branch=main)](https://github.com/iTwin/iTwinUI/actions/workflows/build.yml?query=branch%3Amain)
-
-</div>
-
-## What is iTwinUI-react?
-
-iTwinUI-react is a React component library for [iTwinUI](https://github.com/iTwin/iTwinUI).
-The goal of this package is to provide React components that make it easier to use the styles from [`@itwin/itwinui-css`](https://github.com/iTwin/iTwinUI/tree/main/packages/itwinui-css). Check out the [documentation website](https://itwinui.bentley.com/) to detailed documentation and examples of all components.
-
-🆕 Check out the [v3 migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v3-migration-guide) if you're upgrading from an older version.
-
----
-
-## Installation
-
-```
-npm add @itwin/itwinui-react
-```
-
----
-
-## Setup
-
-Wrap your application entrypoint in `ThemeProvider` and import `styles.css`.
-
-```jsx
-import { ThemeProvider } from '@itwin/itwinui-react';
-import '@itwin/itwinui-react/styles.css';
-
-export default function App() {
-  return (
-    <>
-      <ThemeProvider>
-        {/* Your components go here. */}
-      </ThemeProvider>
-    </>
-  );
-}
-```
-
-ThemeProvider has a `theme` prop which accepts one of the following values:
-  - `"light"`
-  - `"dark"`
-  - `"os"` (respects the color scheme of the operating system)
-  - `"inherit"` (default)
-
----
+A React component library for the Kiwi design system.
 
 ## Usage
 
-After setting up ThemeProvider and styles, import the component you want and start using it!
+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:
 
 ```jsx
-import { Button } from '@itwin/itwinui-react';
-
-const Page = () => (
-  <Button>Hello!</Button>
-);
+import { Root } from "@itwin/itwinui-react/bricks";
+
+export function App() {
+	return (
+		<Root colorScheme="dark" density="dense">
+			{/* Use Kiwi design system components here */}
+		</Root>
+	);
+}
 ```
 
-Check out this template for a live interactive demo:
-
-[![Edit in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/iTwin/iTwinUI/tree/main/minimal-sandbox?file=src/App.tsx)
-
----
-
-## FAQ
+This will ensure Kiwi’s styles are loaded to either the document or the encompassing shadow root.
 
-For a list of frequently asked questions, visit the [wiki](https://github.com/iTwin/iTwinUI/wiki/FAQ).
-
----
+Once that’s in place you can import and use components from `@itwin/itwinui-react/bricks`.
 
 ## Contributing
 
-We welcome you to contribute and make this UI design system better. You can submit feature requests or bugs by creating an [issue](https://github.com/iTwin/iTwinUI/issues).
-Please read our [CONTRIBUTING.md](https://github.com/iTwin/iTwinUI/blob/main/CONTRIBUTING.md) for more information.
-
----
-
-## Changelog
+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).
 
-Read our [CHANGELOG.md](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-react/CHANGELOG.md) to find recent changes.
+If you're interested in contributing code, please read [`CONTRIBUTING.md`](https://github.com/iTwin/kiwi/blob/main/CONTRIBUTING.md) for more information.

package/dist/DEV/bricks/Anchor.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const Anchor = 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
+    }
+  );
+});
+DEV: Anchor.displayName = "Anchor";
+export {
+  Anchor
+};

package/dist/DEV/bricks/Button.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 Button = 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
+      }
+    );
+  }
+);
+DEV: Button.displayName = "Button";
+export {
+  Button
+};

package/dist/DEV/bricks/Checkbox.js

@@ -0,0 +1,24 @@
+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 Checkbox = 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
+      }
+    );
+  }
+);
+DEV: Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};

package/dist/DEV/bricks/Divider.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const Divider = 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
+    }
+  );
+});
+DEV: Divider.displayName = "Divider";
+export {
+  Divider
+};

package/dist/DEV/bricks/DropdownMenu.js

@@ -0,0 +1,106 @@
+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
+    }
+  );
+}
+DEV: DropdownMenu.displayName = "DropdownMenu.Root";
+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
+      }
+    );
+  }
+);
+DEV: DropdownMenuContent.displayName = "DropdownMenu.Content";
+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
+      }
+    );
+  }
+);
+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;
+    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}`)) })
+        ]
+      }
+    );
+  }
+);
+DEV: DropdownMenuItem.displayName = "DropdownMenu.Item";
+export {
+  DropdownMenuButton as Button,
+  DropdownMenuContent as Content,
+  DropdownMenuItem as Item,
+  DropdownMenu as Root
+};

package/dist/DEV/bricks/Field.js

@@ -0,0 +1,27 @@
+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
+    }
+  ) });
+});
+DEV: Field.displayName = "Field";
+const FieldIdContext = React.createContext(void 0);
+function useFieldId() {
+  return React.useContext(FieldIdContext);
+}
+export {
+  Field,
+  useFieldId
+};

package/dist/DEV/bricks/Icon.js

@@ -0,0 +1,62 @@
+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}` })
+    }
+  );
+});
+DEV: Icon.displayName = "Icon";
+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
+      }
+    );
+  }
+);
+DEV: DisclosureArrow.displayName = "DisclosureArrow";
+export {
+  DisclosureArrow,
+  Icon
+};

package/dist/DEV/bricks/IconButton.js

@@ -0,0 +1,33 @@
+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 });
+  }
+);
+DEV: IconButton.displayName = "IconButton";
+export {
+  IconButton
+};

package/dist/DEV/bricks/Kbd.js

@@ -0,0 +1,21 @@
+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
+    }
+  );
+});
+DEV: Kbd.displayName = "Kbd";
+export {
+  Kbd
+};

package/dist/DEV/bricks/Label.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 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
+    }
+  );
+});
+DEV: Label.displayName = "Label";
+export {
+  Label
+};

package/dist/DEV/bricks/ListItem.js

@@ -0,0 +1,33 @@
+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
+    }
+  );
+});
+DEV: ListItem.displayName = "ListItem.Root";
+const ListItemContent = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.span,
+      {
+        ...props,
+        className: cx("\u{1F95D}-list-item-content", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: ListItemContent.displayName = "ListItem.Content";
+export {
+  ListItemContent as Content,
+  ListItem as Root
+};

package/dist/DEV/bricks/Radio.js

@@ -0,0 +1,22 @@
+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
+    }
+  );
+});
+DEV: Radio.displayName = "Radio";
+export {
+  Radio
+};