@itwin/itwinui-react 5.0.0-alpha.8 → 5.0.0-alpha.9

package/dist/DEV/bricks/Root.js

@@ -1,19 +1,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import * as ReactDOM from "react-dom";
+import { Role } from "@ariakit/react/role";
+import { PortalContext } from "@ariakit/react/portal";
 import cx from "classnames";
 import foundationsCss from "../foundations/styles.css.js";
 import bricksCss from "./styles.css.js";
 import { forwardRef, isBrowser } from "./~utils.js";
-import { useMergedRefs } from "./~hooks.js";
+import { useIsClient, useMergedRefs } from "./~hooks.js";
 const css = foundationsCss + bricksCss;
 const Root = forwardRef((props, forwardedRef) => {
   const { children, synchronizeColorScheme = false, ...rest } = props;
+  const [portalContainer, setPortalContainer] = React.useState(null);
   return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
     /* @__PURE__ */ jsx(Styles, {}),
     /* @__PURE__ */ jsx(Fonts, {}),
     synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
-    children
+    /* @__PURE__ */ jsx(
+      PortalContainer,
+      {
+        colorScheme: props.colorScheme,
+        density: props.density,
+        ref: setPortalContainer
+      }
+    ),
+    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children })
   ] });
 });
 DEV: Root.displayName = "Root";
@@ -32,7 +43,7 @@ const RootInternal = forwardRef(
       setRootNode(rootNode2);
     }, []);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         className: cx("\u{1F95D}-root", props.className),
@@ -60,6 +71,26 @@ function SynchronizeColorScheme({
   }, [rootNode, colorScheme]);
   return null;
 }
+const PortalContainer = forwardRef((props, forwardedRef) => {
+  const isClient = useIsClient();
+  const rootNode = useRootNode();
+  if (!isClient) return null;
+  const destination = rootNode && isDocument(rootNode) ? rootNode.body : rootNode;
+  if (!destination) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "\u{1F95D}-root",
+        "data-kiwi-theme": props.colorScheme,
+        "data-kiwi-density": props.density,
+        style: { display: "contents" },
+        ref: forwardedRef
+      }
+    ),
+    destination
+  );
+});
 function Styles() {
   const rootNode = useRootNode();
   useLayoutEffect(() => {

package/dist/DEV/bricks/Select.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import {
   forwardRef,
   isBrowser
@@ -14,7 +14,7 @@ const HtmlSelectContext = React.createContext(() => {
 const SelectRoot = forwardRef((props, forwardedRef) => {
   const [isHtmlSelect, setIsHtmlSelect] = React.useState(false);
   return /* @__PURE__ */ jsx(HtmlSelectContext.Provider, { value: setIsHtmlSelect, children: /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...props,
       className: cx("\u{1F95D}-select-root", props.className),
@@ -40,7 +40,7 @@ const HtmlSelect = forwardRef(
           type: "textlike",
           id,
           render: /* @__PURE__ */ jsx(
-            Ariakit.Role.select,
+            Role.select,
             {
               ...rest,
               className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),

package/dist/DEV/bricks/Spinner.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { forwardRef } from "./~utils.js";
@@ -12,7 +12,7 @@ const Spinner = forwardRef(
       ...rest
     } = props;
     return /* @__PURE__ */ jsxs(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         "data-kiwi-size": size,

package/dist/DEV/bricks/Switch.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import {
+  Checkbox as AkCheckbox
+} from "@ariakit/react/checkbox";
 import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
@@ -12,7 +14,7 @@ const Switch = forwardRef(
         type: "checkable",
         id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Checkbox,
+          AkCheckbox,
           {
             accessibleWhenDisabled: true,
             ...rest,

package/dist/DEV/bricks/Table.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import * as React from "react";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
@@ -12,7 +12,7 @@ const Table = forwardRef((props, forwardedRef) => {
   const [captionId, setCaptionId] = React.useState();
   const tableContext = React.useMemo(() => ({ setCaptionId }), []);
   return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContext, children: /* @__PURE__ */ jsx(
-    Ariakit.Role,
+    Role,
     {
       ...props,
       className: cx("\u{1F95D}-table", props.className),
@@ -28,7 +28,7 @@ const TableHeaderContext = React.createContext(false);
 const TableHeader = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
-      Ariakit.Role.div,
+      Role.div,
       {
         ...props,
         className: cx("\u{1F95D}-table-header", props.className),
@@ -42,7 +42,7 @@ const TableHeader = forwardRef(
 DEV: TableHeader.displayName = "Table.Header";
 const TableBody = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...props,
       className: cx("\u{1F95D}-table-body", props.className),
@@ -55,7 +55,7 @@ DEV: TableBody.displayName = "Table.Body";
 const TableRow = forwardRef((props, forwardedRef) => {
   const { children, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...rest,
       className: cx("\u{1F95D}-table-row", props.className),
@@ -78,7 +78,7 @@ const TableCaption = forwardRef(
       [id, setCaptionId]
     );
     return /* @__PURE__ */ jsx(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         id,
@@ -93,7 +93,7 @@ DEV: TableCaption.displayName = "Table.Caption";
 const TableCell = forwardRef((props, forwardedRef) => {
   const isWithinTableHeader = React.useContext(TableHeaderContext);
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.span,
+    Role.span,
     {
       ...props,
       className: cx("\u{1F95D}-table-cell", props.className),

package/dist/DEV/bricks/Tabs.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import * as AkTab from "@ariakit/react/tab";
 import { useControlledState } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 function Tabs(props) {
@@ -19,7 +19,7 @@ function Tabs(props) {
     setSelectedIdProp
   );
   return /* @__PURE__ */ jsx(
-    Ariakit.TabProvider,
+    AkTab.TabProvider,
     {
       selectedId,
       setSelectedId: React.useCallback(
@@ -46,7 +46,7 @@ const TabList = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
   const viewTransitionName = `\u{1F95D}active-stripe-${React.useId().replaceAll(":", "_")}`;
   return /* @__PURE__ */ jsx(
-    Ariakit.TabList,
+    AkTab.TabList,
     {
       ...rest,
       "data-kiwi-tone": tone,
@@ -62,7 +62,7 @@ const TabList = forwardRef((props, forwardedRef) => {
 DEV: TabList.displayName = "Tabs.TabList";
 const Tab = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.Tab,
+    AkTab.Tab,
     {
       accessibleWhenDisabled: true,
       ...props,
@@ -74,7 +74,7 @@ const Tab = forwardRef((props, forwardedRef) => {
 DEV: Tab.displayName = "Tabs.Tab";
 const TabPanel = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.TabPanel,
+    AkTab.TabPanel,
     {
       ...props,
       className: cx("\u{1F95D}-tab-panel", props.className),

package/dist/DEV/bricks/Text.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Text = forwardRef((props, forwardedRef) => {
   const { variant, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role,
+    Role,
     {
       ...rest,
       className: cx("\u{1F95D}-text", props.className),

package/dist/DEV/bricks/TextBox.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
+import { Focusable } from "@ariakit/react/focusable";
 import cx from "classnames";
 import { FieldControl } from "./Field.js";
 import { Icon } from "./Icon.js";
@@ -20,14 +21,14 @@ const TextBoxInput = forwardRef(
         type: "textlike",
         id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.input,
+          Role.input,
           {
             readOnly: props.disabled,
             ...rest,
             className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
             placeholder: props.placeholder ?? " ",
             render: /* @__PURE__ */ jsx(
-              Ariakit.Focusable,
+              Focusable,
               {
                 accessibleWhenDisabled: true,
                 render: props.render || /* @__PURE__ */ jsx("input", {})
@@ -50,14 +51,14 @@ const TextBoxTextarea = forwardRef(
         type: "textlike",
         id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.textarea,
+          Role.textarea,
           {
             readOnly: props.disabled,
             ...rest,
             className: cx("\u{1F95D}-text-box", props.className),
             placeholder: props.placeholder ?? " ",
             render: /* @__PURE__ */ jsx(
-              Ariakit.Focusable,
+              Focusable,
               {
                 accessibleWhenDisabled: true,
                 render: props.render || /* @__PURE__ */ jsx("textarea", {})
@@ -80,7 +81,7 @@ const TextBoxRoot = forwardRef(
       {
         value: React.useMemo(() => ({ setDisabled, inputRef }), []),
         children: /* @__PURE__ */ jsx(
-          Ariakit.Role.div,
+          Role.div,
           {
             ...props,
             "data-kiwi-disabled": disabled,
@@ -117,7 +118,7 @@ DEV: TextBoxIcon.displayName = "TextBox.Icon";
 const TextBoxText = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.span,
+      Role.span,
       {
         ...props,
         className: cx("\u{1F95D}-text-box-decoration", props.className),

package/dist/DEV/bricks/Tooltip.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import * as AkTooltip from "@ariakit/react/tooltip";
 import { forwardRef } from "./~utils.js";
 import { usePopoverApi } from "./~hooks.js";
 const Tooltip = forwardRef(
@@ -18,10 +18,10 @@ const Tooltip = forwardRef(
       unmountOnHide = type === "none",
       ...rest
     } = props;
-    const store = Ariakit.useTooltipStore();
+    const store = AkTooltip.useTooltipStore();
     const popover = usePopoverApi(store);
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-      Ariakit.TooltipProvider,
+      AkTooltip.TooltipProvider,
       {
         store,
         defaultOpen: defaultOpenProp,
@@ -29,7 +29,7 @@ const Tooltip = forwardRef(
         setOpen: setOpenProp,
         children: [
           /* @__PURE__ */ jsx(
-            Ariakit.TooltipAnchor,
+            AkTooltip.TooltipAnchor,
             {
               render: children,
               ...type === "description" && { "aria-describedby": id },
@@ -37,7 +37,7 @@ const Tooltip = forwardRef(
             }
           ),
           /* @__PURE__ */ jsx(
-            Ariakit.Tooltip,
+            AkTooltip.Tooltip,
             {
               "aria-hidden": "true",
               ...rest,

package/dist/DEV/bricks/Tree.js

@@ -1,20 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import * as ListItem from "./ListItem.js";
-import { IconButton } from "./IconButton.js";
-import { Icon } from "./Icon.js";
+import { Role } from "@ariakit/react/role";
+import { useCompositeStore, Composite } from "@ariakit/react/composite";
 import { forwardRef } from "./~utils.js";
-import { useEventHandlers } from "./~hooks.js";
+import { Root as TreeItemRoot, Action as TreeItemAction } from "./TreeItem.js";
 const Tree = forwardRef((props, forwardedRef) => {
-  const composite = Ariakit.useCompositeStore({ orientation: "vertical" });
+  const composite = useCompositeStore({ orientation: "vertical" });
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       role: "tree",
       ...props,
-      render: /* @__PURE__ */ jsx(Ariakit.Composite, { store: composite }),
+      render: /* @__PURE__ */ jsx(Composite, { store: composite }),
       className: cx("\u{1F95D}-tree", props.className),
       ref: forwardedRef,
       children: props.children
@@ -22,192 +19,8 @@ const Tree = forwardRef((props, forwardedRef) => {
   );
 });
 DEV: Tree.displayName = "Tree.Root";
-const TreeItem = forwardRef((props, forwardedRef) => {
-  const {
-    "aria-level": level,
-    selected,
-    expanded,
-    icon,
-    label,
-    description,
-    actions,
-    onSelectedChange,
-    onExpandedChange,
-    onClick: onClickProp,
-    onKeyDown: onKeyDownProp,
-    ...rest
-  } = props;
-  const handleClick = (event) => {
-    if (selected === void 0) return;
-    event.stopPropagation();
-    onSelectedChange?.(!selected);
-  };
-  const handleKeyDown = (event) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-      return;
-    }
-    if (expanded === void 0) return;
-    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
-      event.preventDefault();
-      onExpandedChange?.(event.key === "ArrowRight");
-    }
-  };
-  const labelId = React.useId();
-  const descriptionId = React.useId();
-  return /* @__PURE__ */ jsx(
-    TreeItemContext.Provider,
-    {
-      value: React.useMemo(
-        () => ({
-          level,
-          expanded,
-          selected
-        }),
-        [level, expanded, selected]
-      ),
-      children: /* @__PURE__ */ jsx(
-        Ariakit.CompositeItem,
-        {
-          render: /* @__PURE__ */ jsx(Ariakit.Role, { ...rest }),
-          onClick: useEventHandlers(
-            onClickProp,
-            handleClick
-          ),
-          onKeyDown: useEventHandlers(
-            onKeyDownProp,
-            handleKeyDown
-          ),
-          role: "treeitem",
-          "aria-expanded": expanded,
-          "aria-selected": selected,
-          "aria-labelledby": labelId,
-          "aria-describedby": description ? descriptionId : void 0,
-          "aria-level": level,
-          className: cx("\u{1F95D}-tree-item", props.className),
-          ref: forwardedRef,
-          children: /* @__PURE__ */ jsxs(
-            ListItem.Root,
-            {
-              "data-kiwi-expanded": expanded,
-              "data-kiwi-selected": selected,
-              className: "\u{1F95D}-tree-item-node",
-              style: { "--\u{1F95D}tree-item-level": level },
-              role: void 0,
-              children: [
-                /* @__PURE__ */ jsxs(ListItem.Decoration, { children: [
-                  /* @__PURE__ */ jsx(
-                    TreeItemExpander,
-                    {
-                      "data-kiwi-description": description ? true : void 0,
-                      onClick: () => {
-                        if (expanded === void 0) return;
-                        onExpandedChange?.(!expanded);
-                      }
-                    }
-                  ),
-                  typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon
-                ] }),
-                /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}-tree-item-content", children: label }),
-                description ? /* @__PURE__ */ jsx(
-                  ListItem.Content,
-                  {
-                    id: descriptionId,
-                    className: "\u{1F95D}-tree-item-description",
-                    children: description
-                  }
-                ) : void 0,
-                /* @__PURE__ */ jsx(
-                  ListItem.Decoration,
-                  {
-                    render: /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
-                  }
-                )
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-});
-DEV: TreeItem.displayName = "Tree.Item";
-const TreeItemActions = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Ariakit.Toolbar,
-    {
-      ...props,
-      onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
-      className: cx("\u{1F95D}-tree-item-actions", props.className),
-      ref: forwardedRef,
-      children: props.children
-    }
-  );
-});
-DEV: TreeItemActions.displayName = "TreeItemActions";
-const TreeItemAction = forwardRef(
-  (props, forwardedRef) => {
-    const { visible, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        inert: visible === false ? true : void 0,
-        ...rest,
-        variant: "ghost",
-        className: cx("\u{1F95D}-tree-item-action", props.className),
-        "data-kiwi-visible": visible,
-        ref: forwardedRef
-      }
-    );
-  }
-);
-DEV: TreeItemAction.displayName = "Tree.ItemAction";
-const TreeItemExpander = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        tabIndex: -1,
-        "aria-hidden": "true",
-        icon: /* @__PURE__ */ jsx(TreeChevron, {}),
-        label: "Toggle",
-        ...props,
-        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
-        className: cx("\u{1F95D}-tree-item-expander", props.className),
-        variant: "ghost",
-        labelVariant: "visually-hidden",
-        ref: forwardedRef
-      }
-    );
-  }
-);
-DEV: TreeItemExpander.displayName = "TreeItemExpander";
-const TreeChevron = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Icon,
-      {
-        ...props,
-        render: /* @__PURE__ */ jsx(
-          Ariakit.Role.svg,
-          {
-            width: "16",
-            height: "16",
-            fill: "currentColor",
-            viewBox: "0 0 16 16",
-            render: props.render,
-            children: /* @__PURE__ */ jsx("path", { d: "M4.146 6.146a.5.5 0 0 1 .708 0L8 9.293l3.146-3.147a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 0 1 0-.708Z" })
-          }
-        ),
-        className: cx("\u{1F95D}-tree-chevron", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-DEV: TreeChevron.displayName = "TreeChevron";
-const TreeItemContext = React.createContext(void 0);
 export {
-  TreeItem as Item,
+  TreeItemRoot as Item,
   TreeItemAction as ItemAction,
   Tree as Root
 };