@itwin/itwinui-react 5.0.0-alpha.11 → 5.0.0-alpha.13

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 5.0.0-alpha.13
+
+- Added new `unstable_ErrorRegion` component for displaying errors originating from `Tree`. See [#454](https://github.com/iTwin/design-system/pull/454).
+- Added initial `unstable_Toolbar` component. See [#529](https://github.com/iTwin/design-system/pull/529).
+- Added `dot` prop to `<Tree.ItemAction>`, matching the `dot` prop from `<IconButton>`.
+  - Also added `unstable_dot` prop to `<DropdownMenu.Item>`, although it's not meant to be used currently.
+- Styling changes:
+  - Improved forced-colors mode styling for `<Icon>`, `<Button>` as anchor, and `<Tree.Item>`.
+  - Updated the color of `dot` used in `<IconButton>`.
+
+## 5.0.0-alpha.12
+
+- **breaking**: Introduce composition API for `Field`. See [#449](https://github.com/iTwin/design-system/pull/449).
+  - Includes `<Field.Root>`, `<Field.Label>`, `<Field.Control>`, `<Field.Description>`.
+  - Added a new `<Field.ErrorMessage>` subcomponent.
+- `Tree.Item`: Added automatic overflow handling for `actions`.
+  - **breaking**: `DropdownMenu` is no longer allowed to be passed into `actions`. See [#404](https://github.com/iTwin/design-system/pull/404).
+- Added a new `Table` component, usable as `<Table.HtmlTable>` or `<Table.CustomTable>`.
+- `DropdownMenu`: menuitems will now be rendered as `<button>`.
+- Styling changes:
+  - Reset `<button>` styles.
+  - Added popover-open state styles to `<Button>` and `<IconButton>`.
+  - Improved forced-colors mode styling for `<Checkbox>`, `<Radio>` and `<Switch>`.
+- Bug fixes:
+  - Fixed `<Select.HtmlSelect>` overflowing beyond its container.
+  - Fixed `<Select.HtmlSelect>` options text not appearing in Windows in certain cases.
+  - Added missing `border-radius` to `<Skeleton>`.
+
 ## 5.0.0-alpha.11
 
 - Added `error` prop to `<Tree.Item>`.

package/README.md

@@ -1,6 +1,14 @@
 # @itwin/itwinui-react
 
-A React component library for the next evolution of the iTwinUI design system.
+A React component library for the [next evolution of the iTwinUI design system](https://github.com/iTwin/design-system/discussions/481).
+
+## Installation
+
+Using your package manager of choice, install the latest **alpha** version of [`@itwin/itwinui-react`](https://www.npmjs.com/package/@itwin/itwinui-react?activeTab=versions).
+
+```console
+npm add @itwin/itwinui-react@alpha
+```
 
 ## Usage
 
@@ -20,7 +28,10 @@ export function App() {
 
 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`.
+Once that’s in place, you can import and use components from `@itwin/itwinui-react/bricks`.
+
+> [!NOTE]
+> If you are trying to use this package alongside the current stable version of iTwinUI, you will need to set up the [iTwinUI theme bridge](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-v5-theme-bridge).
 
 ## Contributing
 

package/dist/DEV/bricks/Checkbox.js

@@ -3,25 +3,18 @@ import cx from "classnames";
 import {
   Checkbox as AkCheckbox
 } from "@ariakit/react/checkbox";
-import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
+import { useFieldControlType } from "./Field.internal.js";
 const Checkbox = forwardRef(
   (props, forwardedRef) => {
-    const { id, ...rest } = props;
+    useFieldControlType("checkable");
     return /* @__PURE__ */ jsx(
-      FieldControl,
+      AkCheckbox,
       {
-        type: "checkable",
-        id,
-        render: /* @__PURE__ */ jsx(
-          AkCheckbox,
-          {
-            accessibleWhenDisabled: true,
-            ...rest,
-            className: cx("\u{1F95D}-checkbox", props.className),
-            ref: forwardedRef
-          }
-        )
+        accessibleWhenDisabled: true,
+        ...props,
+        className: cx("\u{1F95D}-checkbox", props.className),
+        ref: forwardedRef
       }
     );
   }

package/dist/DEV/bricks/Description.js

@@ -2,24 +2,17 @@ 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;
+    const { tone, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      FieldDescription,
+      Text,
       {
-        id,
-        render: /* @__PURE__ */ jsx(
-          Text,
-          {
-            ...rest,
-            variant: "caption-md",
-            "data-kiwi-tone": tone ?? "neutral",
-            className: cx("\u{1F95D}-description", props.className),
-            ref: forwardedRef
-          }
-        )
+        ...rest,
+        variant: "caption-md",
+        "data-kiwi-tone": tone ?? "neutral",
+        className: cx("\u{1F95D}-description", props.className),
+        ref: forwardedRef
       }
     );
   }

package/dist/DEV/bricks/DropdownMenu.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import cx from "classnames";
 import * as ListItem from "./~utils.ListItem.js";
 import { Button } from "./Button.js";
+import { Button as ButtonAk } from "@ariakit/react/button";
 import { Kbd } from "./Kbd.js";
 import { Checkmark, DisclosureArrow, Icon } from "./Icon.js";
 import {
@@ -19,7 +20,9 @@ import {
 } from "@ariakit/react/menu";
 import { useStoreState } from "@ariakit/react/store";
 import { predefinedSymbols } from "./Kbd.internal.js";
-function DropdownMenu(props) {
+import { usePopoverContext } from "@ariakit/react/popover";
+import { Dot } from "./~utils.Dot.js";
+function DropdownMenuRoot(props) {
   const {
     children,
     placement,
@@ -34,11 +37,12 @@ function DropdownMenu(props) {
       defaultOpen: defaultOpenProp,
       open: openProp,
       setOpen: setOpenProp,
+      popover: usePopoverContext(),
       children
     }
   );
 }
-DEV: DropdownMenu.displayName = "DropdownMenu.Root";
+DEV: DropdownMenuRoot.displayName = "DropdownMenu.Root";
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
     const popover = usePopoverApi(useMenuContext());
@@ -81,19 +85,37 @@ const DropdownMenuButton = forwardRef(
 DEV: DropdownMenuButton.displayName = "DropdownMenu.Button";
 const DropdownMenuItem = forwardRef(
   (props, forwardedRef) => {
-    const { label, shortcuts, icon, ...rest } = props;
+    const { label, shortcuts, icon, unstable_dot, ...rest } = props;
+    const dotId = React.useId();
     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,
+        render: /* @__PURE__ */ jsx(
+          ListItem.Root,
+          {
+            render: /* @__PURE__ */ jsx(
+              ButtonAk,
+              {
+                accessibleWhenDisabled: true,
+                "aria-describedby": dotId,
+                ...rest,
+                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
+          /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
+          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null,
+          unstable_dot ? /* @__PURE__ */ jsx(
+            ListItem.Decoration,
+            {
+              render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-dropdown-menu-item-dot", children: unstable_dot })
+            }
+          ) : null
         ]
       }
     );
@@ -111,6 +133,7 @@ const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     ListItem.Decoration,
     {
+      render: /* @__PURE__ */ jsx("span", {}),
       ...rest,
       className: cx("\u{1F95D}-dropdown-menu-item-shortcuts", props.className),
       ref: forwardedRef,
@@ -141,30 +164,54 @@ const DropdownMenuIcon = forwardRef(
           Icon,
           {
             href: typeof icon === "string" ? icon : void 0,
-            render: React.isValidElement(icon) ? icon : void 0
+            render: React.isValidElement(icon) ? icon : void 0,
+            ...rest,
+            ref: forwardedRef
           }
-        ),
-        ...rest,
-        ref: forwardedRef
+        )
       }
     );
   }
 );
 DEV: DropdownMenuIcon.displayName = "DropdownMenuIcon";
 const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
-  const { label, icon, ...rest } = props;
+  const {
+    label,
+    icon,
+    defaultChecked,
+    checked,
+    onChange,
+    name,
+    value = defaultChecked ? "on" : void 0,
+    // For defaultChecked to work
+    ...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,
+      defaultChecked,
+      checked,
+      name,
+      value,
+      onChange,
+      render: /* @__PURE__ */ jsx(
+        ListItem.Root,
+        {
+          render: /* @__PURE__ */ jsx(
+            ButtonAk,
+            {
+              accessibleWhenDisabled: true,
+              ...rest,
+              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.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
         /* @__PURE__ */ jsx(
           ListItem.Decoration,
           {
@@ -181,5 +228,5 @@ export {
   DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
-  DropdownMenu as Root
+  DropdownMenuRoot as Root
 };

package/dist/DEV/bricks/ErrorRegion.js

@@ -0,0 +1,137 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import {
+  DialogProvider,
+  DialogDisclosure,
+  Dialog
+} from "@ariakit/react/dialog";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+import { ChevronDown, Dismiss, StatusWarning } from "./Icon.js";
+import { Text } from "./Text.js";
+import { IconButton } from "./IconButton.js";
+import { Button } from "./Button.js";
+import { useControlledState } from "./~hooks.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+const ErrorRegionRoot = forwardRef(
+  (props, forwardedRef) => {
+    const { label, items, expanded, onExpandedChange, ...rest } = props;
+    const labelId = React.useId();
+    const sectionLabelledBy = props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelId);
+    const [open, setOpen] = useControlledState(
+      false,
+      expanded,
+      onExpandedChange
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", "aria-atomic": true, children: label }),
+      /* @__PURE__ */ jsx(DialogProvider, { open, setOpen, children: /* @__PURE__ */ jsx(
+        Role.section,
+        {
+          ...rest,
+          "aria-labelledby": sectionLabelledBy,
+          className: cx("\u{1F95D}-error-region", props.className),
+          "data-kiwi-visible": !!label,
+          "data-kiwi-expanded": open,
+          ref: forwardedRef,
+          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}-error-region-container", children: [
+            /* @__PURE__ */ jsxs(
+              DialogDisclosure,
+              {
+                className: "\u{1F95D}-error-region-header",
+                render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
+                children: [
+                  /* @__PURE__ */ jsx(StatusWarning, { className: "\u{1F95D}-error-region-icon" }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      id: labelId,
+                      className: "\u{1F95D}-error-region-label",
+                      variant: "body-sm",
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      inert: true,
+                      render: /* @__PURE__ */ jsx("span", {}),
+                      role: void 0,
+                      label: "",
+                      icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+                      variant: "ghost"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Dialog,
+              {
+                className: "\u{1F95D}-error-region-dialog",
+                portal: false,
+                modal: false,
+                autoFocusOnShow: false,
+                "aria-labelledby": labelId,
+                children: /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-items", role: "list", children: items })
+              }
+            )
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
+DEV: ErrorRegionRoot.displayName = "ErrorRegion.Root";
+const ErrorRegionItem = forwardRef(
+  (props, forwardedRef) => {
+    const generatedId = React.useId();
+    const {
+      message,
+      messageId = `${generatedId}-message`,
+      actions,
+      onDismiss,
+      ...rest
+    } = props;
+    const dismissButtonId = `${generatedId}-dismiss`;
+    return /* @__PURE__ */ jsxs(
+      Role.div,
+      {
+        ...rest,
+        role: "listitem",
+        className: cx("\u{1F95D}-error-region-item", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              id: messageId,
+              variant: "body-sm",
+              className: "\u{1F95D}-error-region-item-message",
+              children: message
+            }
+          ),
+          onDismiss && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              id: dismissButtonId,
+              className: "\u{1F95D}-error-region-item-dismiss",
+              variant: "ghost",
+              label: "Dismiss",
+              "aria-labelledby": `${dismissButtonId} ${messageId}`,
+              icon: /* @__PURE__ */ jsx(Dismiss, {}),
+              onClick: onDismiss
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-item-actions", children: actions })
+        ]
+      }
+    );
+  }
+);
+DEV: ErrorRegionItem.displayName = "ErrorRegion.Item";
+export {
+  ErrorRegionItem as Item,
+  ErrorRegionRoot as Root
+};

package/dist/DEV/bricks/Field.internal.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  useCollectionStore,
+  Collection
+} from "@ariakit/react/collection";
+import { useStoreState } from "@ariakit/react/store";
+function FieldCollection(props) {
+  const fieldElementCollection = useCollectionStore({
+    defaultItems: []
+  });
+  const renderedItems = useStoreState(fieldElementCollection, "renderedItems");
+  const [controlType, controlIndex] = React.useMemo(() => {
+    const controlIndex2 = renderedItems.findIndex(
+      (item) => item.elementType === "control"
+    );
+    return [renderedItems[controlIndex2]?.controlType, controlIndex2];
+  }, [renderedItems]);
+  const labelPlacement = React.useMemo(() => {
+    const labelIndex = renderedItems.findIndex(
+      (item) => item.elementType === "label"
+    );
+    if (controlIndex === -1 || labelIndex === -1) return;
+    return labelIndex < controlIndex ? "before" : "after";
+  }, [renderedItems, controlIndex]);
+  return /* @__PURE__ */ jsx(
+    Collection,
+    {
+      ...props,
+      store: fieldElementCollection,
+      "data-kiwi-label-placement": labelPlacement,
+      "data-kiwi-control-type": controlType
+    }
+  );
+}
+const FieldControlTypeContext = React.createContext(void 0);
+function useFieldControlType(controlType) {
+  const setControlType = React.useContext(FieldControlTypeContext);
+  React.useEffect(() => {
+    setControlType?.(controlType);
+  }, [controlType, setControlType]);
+}
+export {
+  FieldCollection,
+  FieldControlTypeContext,
+  useFieldControlType
+};