@itwin/itwinui-react 5.0.0-alpha.0 → 5.0.0-alpha.2

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Changelog
+
+## 5.0.0-alpha.2
+
+- Added initial `Tree` component, exposed as `<Tree.Root>` and `<Tree.Item>` subcomponents.
+- Added initial `<Spinner>` component for indicating quick, indeterminate progress.
+- Added `<Description>` component to be used within a `<Field>`.
+- Added initial `<Chip>` component.
+- Added `symbol` prop to `<Kbd>` for displaying predefined symbols.
+- Added `focusable` prop to `<Tabs.TabPanel>` component.
+- Fixed a visual issue where light color-scheme was using dark shadows.
+
+## 5.0.0-alpha.1
+
+- Added `<Text>` component with a `variant` prop to support all text styles from Figma.
+- Added `Select` component built on top of the HTML `<select>` element. Exposed as `<Select.Root>` and `<Select.HtmlSelect>`.
+- Added `shortcuts` prop to `<DropdownMenu.Item>`.
+- Added JSDoc comments to all components for inline IDE hints.
+- Fixed `<Kbd>` component using the wrong font.
+- Fixed some visual issues.
+
+## 5.0.0-alpha.0
+
+Initial release 🥳

package/dist/DEV/bricks/Anchor.js

@@ -1,28 +1,26 @@
 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 { forwardRef } from "./~utils.js";
+const Anchor = forwardRef((props, forwardedRef) => {
+  const { tone = "neutral", ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.a,
+    {
+      ...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", {})
+        }
+      ),
+      ref: forwardedRef
+    }
+  );
+});
 DEV: Anchor.displayName = "Anchor";
 export {
   Anchor

package/dist/DEV/bricks/Button.js

@@ -1,21 +1,23 @@
 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 { forwardRef } from "./~utils.js";
+const Button = forwardRef(
+  (props, forwardedRef) => {
+    const { variant = "solid", tone = "neutral", ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Ariakit.Button,
+      {
+        accessibleWhenDisabled: true,
+        ...rest,
+        "data-kiwi-variant": variant,
+        "data-kiwi-tone": tone,
+        className: cx("\u{1F95D}-button", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 DEV: Button.displayName = "Button";
 export {
   Button

package/dist/DEV/bricks/Checkbox.js

@@ -1,21 +1,25 @@
 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 { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { forwardRef } from "./~utils.js";
+const Checkbox = forwardRef(
+  (props, forwardedRef) => {
+    const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
+    return /* @__PURE__ */ jsx(
+      Ariakit.Checkbox,
+      {
+        accessibleWhenDisabled: true,
+        id: fieldId,
+        ...props,
+        className: cx("\u{1F95D}-checkbox", props.className),
+        "aria-describedby": describedBy,
+        ref: forwardedRef
+      }
+    );
+  }
+);
 DEV: Checkbox.displayName = "Checkbox";
 export {
   Checkbox

package/dist/DEV/bricks/Chip.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 Chip = forwardRef((props, forwardedRef) => {
+  const { variant = "solid", children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      "data-kiwi-variant": variant,
+      ...rest,
+      className: cx("\u{1F95D}-chip", props.className),
+      ref: forwardedRef,
+      children
+    }
+  );
+});
+DEV: Chip.displayName = "Chip";
+export {
+  Chip
+};

package/dist/DEV/bricks/Description.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { forwardRef } from "./~utils.js";
+import cx from "classnames";
+import { Text } from "./Text.js";
+import { useFieldRegisterDescribedBy } from "./Field.js";
+const Description = forwardRef(
+  (props, forwardedRef) => {
+    const generatedId = React.useId();
+    const { id = generatedId, tone, ...rest } = props;
+    useFieldRegisterDescribedBy(id);
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ...rest,
+        id,
+        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,20 @@
 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 { 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

@@ -4,8 +4,9 @@ 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 { supportsPopover } from "./~utils.js";
+import { forwardRef, supportsPopover } from "./~utils.js";
 function DropdownMenu(props) {
   const {
     children,
@@ -15,8 +16,8 @@ function DropdownMenu(props) {
     defaultOpen: defaultOpenProp
   } = props;
   const store = Ariakit.useMenuStore();
-  const open = Ariakit.useStoreState(store, (store2) => store2.open);
-  const popover = Ariakit.useStoreState(store, (store2) => store2.popoverElement);
+  const open = Ariakit.useStoreState(store, (state) => state.open);
+  const popover = Ariakit.useStoreState(store, (state) => state.popoverElement);
   React.useEffect(
     function syncPopoverWithOpenState() {
       if (popover?.isConnected) {
@@ -38,49 +39,64 @@ 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) => {
+    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 = React.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 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 = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Ariakit.MenuItem,
-    {
-      accessibleWhenDisabled: true,
-      ...props,
-      render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
-      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}`)) })
+        ]
+      }
+    );
+  }
+);
 DEV: DropdownMenuItem.displayName = "DropdownMenu.Item";
 export {
   DropdownMenuButton as Button,

package/dist/DEV/bricks/Field.js

@@ -2,27 +2,77 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
-const Field = React.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
-      }
-    ) });
-  }
-);
+import { forwardRef } from "./~utils.js";
+const Field = forwardRef((props, forwardedRef) => {
+  const fieldId = React.useId();
+  const { layout, ...rest } = props;
+  return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(FieldDescribedByProvider, { children: /* @__PURE__ */ jsx(
+    Ariakit.Role,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-field", props.className),
+      "data-kiwi-layout": layout,
+      ref: forwardedRef
+    }
+  ) }) });
+});
 DEV: Field.displayName = "Field";
+const FieldDescribedByContext = React.createContext(void 0);
+function FieldDescribedByProvider(props) {
+  const [describedBy, setDescribedBy] = React.useState(/* @__PURE__ */ new Set());
+  const register = React.useCallback((id) => {
+    setDescribedBy((describedBy2) => {
+      const updated = new Set(describedBy2);
+      updated.add(id);
+      return updated;
+    });
+  }, []);
+  const unregister = React.useCallback((id) => {
+    setDescribedBy((describedBy2) => {
+      const updated = new Set(describedBy2);
+      updated.delete(id);
+      return updated;
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(
+    FieldDescribedByContext.Provider,
+    {
+      value: React.useMemo(
+        () => ({
+          describedBy,
+          register,
+          unregister
+        }),
+        [describedBy, register, unregister]
+      ),
+      children: props.children
+    }
+  );
+}
+function useFieldDescribedBy(ariaDescribedByProp) {
+  const describedBySet = React.useContext(FieldDescribedByContext)?.describedBy;
+  return React.useMemo(
+    () => !describedBySet || describedBySet.size === 0 ? ariaDescribedByProp : [...describedBySet, ariaDescribedByProp].filter(Boolean).join(" "),
+    [describedBySet, ariaDescribedByProp]
+  );
+}
+function useFieldRegisterDescribedBy(id) {
+  const context = React.useContext(FieldDescribedByContext);
+  const register = context?.register;
+  const unregister = context?.unregister;
+  React.useEffect(() => {
+    if (!register || !unregister) return;
+    register(id);
+    return () => unregister(id);
+  }, [id, register, unregister]);
+}
 const FieldIdContext = React.createContext(void 0);
 function useFieldId() {
   return React.useContext(FieldIdContext);
 }
 export {
   Field,
-  useFieldId
+  useFieldDescribedBy,
+  useFieldId,
+  useFieldRegisterDescribedBy
 };

package/dist/DEV/bricks/Icon.js

@@ -2,58 +2,59 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-const Icon = React.forwardRef(
+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,
+    {
+      "aria-hidden": true,
+      ...rest,
+      "data-kiwi-size": size,
+      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 { href, size = "regular", ...rest } = props;
-    const iconId = toIconId(size);
+    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(
-      Ariakit.Role.svg,
+      Icon,
       {
-        "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}` })
+        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: Icon.displayName = "Icon";
-function toIconId(size) {
-  if (size === "large") return "icon-large";
-  return "icon";
-}
-const DisclosureArrow = React.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,

package/dist/DEV/bricks/IconButton.js

@@ -1,30 +1,35 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
 import { Button } from "./Button.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { Icon } from "./Icon.js";
 import { Tooltip } from "./Tooltip.js";
-const IconButton = React.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
-      ]
+import { forwardRef } from "./~utils.js";
+const IconButton = forwardRef(
+  (props, forwardedRef) => {
+    const { label, icon, isActive, labelVariant, ...rest } = props;
+    const toolbar = Ariakit.useToolbarContext();
+    const button = /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-pressed": isActive,
+        ...rest,
+        render: toolbar ? /* @__PURE__ */ jsx(Ariakit.ToolbarItem, { render: props.render }) : props.render,
+        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;
     }
-  );
-  if (labelVariant === "visually-hidden") {
-    return button;
+    return /* @__PURE__ */ jsx(Tooltip, { content: label, type: "none", children: button });
   }
-  return /* @__PURE__ */ jsx(Tooltip, { content: label, type: "none", children: button });
-});
+);
 DEV: IconButton.displayName = "IconButton";
 export {
   IconButton