@itwin/itwinui-react 5.0.0-alpha.10 → 5.0.0-alpha.12

package/dist/DEV/bricks/Table.js

@@ -3,65 +3,90 @@ import { Role } from "@ariakit/react/role";
 import * as React from "react";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
-import { useMergedRefs } from "./~hooks.js";
-const TableContext = React.createContext({
-  setCaptionId: () => {
-  }
-});
-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(
+import { useMergedRefs, useSafeContext } from "./~hooks.js";
+const TableContext = React.createContext(void 0);
+const TableHeaderContext = React.createContext(false);
+const HtmlTable = forwardRef((props, forwardedRef) => {
+  const tableContextValue = React.useMemo(
+    () => ({ mode: "html" }),
+    []
+  );
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
     Role,
     {
+      render: /* @__PURE__ */ jsx("table", {}),
       ...props,
-      className: cx("\u{1F95D}-table", props.className),
       ref: forwardedRef,
-      role: "table",
-      "aria-labelledby": captionId,
-      children: props.children
+      className: cx("\u{1F95D}-table", props.className)
     }
   ) });
 });
-DEV: Table.displayName = "Table.Root";
-const TableHeaderContext = React.createContext(false);
+DEV: HtmlTable.displayName = "Table.HtmlTable";
+const CustomTable = forwardRef(
+  (props, forwardedRef) => {
+    const [captionId, setCaptionId] = React.useState();
+    const tableContextValue = React.useMemo(
+      () => ({ captionId, setCaptionId, mode: "aria" }),
+      [captionId]
+    );
+    return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        role: "table",
+        "aria-labelledby": captionId,
+        ...props,
+        ref: forwardedRef,
+        className: cx("\u{1F95D}-table", props.className)
+      }
+    ) });
+  }
+);
+DEV: CustomTable.displayName = "Table.CustomTable";
 const TableHeader = forwardRef(
   (props, forwardedRef) => {
+    const { mode } = useSafeContext(TableContext);
+    const render = mode === "html" ? /* @__PURE__ */ jsx("thead", {}) : void 0;
+    const role = mode === "aria" ? "rowgroup" : void 0;
     return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
       Role.div,
       {
+        render,
+        role,
         ...props,
-        className: cx("\u{1F95D}-table-header", props.className),
         ref: forwardedRef,
-        role: "rowgroup",
-        children: props.children
+        className: cx("\u{1F95D}-table-header", props.className)
       }
     ) });
   }
 );
 DEV: TableHeader.displayName = "Table.Header";
 const TableBody = forwardRef((props, forwardedRef) => {
+  const { mode } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tbody", {}) : void 0;
   return /* @__PURE__ */ jsx(
     Role.div,
     {
+      render,
+      role: void 0,
       ...props,
-      className: cx("\u{1F95D}-table-body", props.className),
       ref: forwardedRef,
-      children: props.children
+      className: cx("\u{1F95D}-table-body", props.className)
     }
   );
 });
 DEV: TableBody.displayName = "Table.Body";
 const TableRow = forwardRef((props, forwardedRef) => {
-  const { children, ...rest } = props;
+  const { mode } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tr", {}) : void 0;
+  const role = mode === "aria" ? "row" : void 0;
   return /* @__PURE__ */ jsx(
     Role.div,
     {
-      ...rest,
-      className: cx("\u{1F95D}-table-row", props.className),
+      render,
+      role,
+      ...props,
       ref: forwardedRef,
-      role: "row",
-      children
+      className: cx("\u{1F95D}-table-row", props.className)
     }
   );
 });
@@ -69,37 +94,45 @@ DEV: TableRow.displayName = "Table.Row";
 const TableCaption = forwardRef(
   (props, forwardedRef) => {
     const fallbackId = React.useId();
-    const { id = fallbackId, children, ...rest } = props;
-    const { setCaptionId } = React.useContext(TableContext);
+    const { id = fallbackId, ...rest } = props;
+    const { mode, setCaptionId } = useSafeContext(TableContext);
+    const render = mode === "html" ? /* @__PURE__ */ jsx("caption", {}) : void 0;
     const captionIdRef = React.useCallback(
       (element) => {
-        setCaptionId(element ? id : void 0);
+        setCaptionId?.(element ? id : void 0);
       },
       [id, setCaptionId]
     );
     return /* @__PURE__ */ jsx(
-      Role,
+      Role.div,
       {
+        render,
         ...rest,
         id,
-        className: cx("\u{1F95D}-table-caption", props.className),
         ref: useMergedRefs(forwardedRef, captionIdRef),
-        children
+        className: cx("\u{1F95D}-table-caption", props.className)
       }
     );
   }
 );
 DEV: TableCaption.displayName = "Table.Caption";
 const TableCell = forwardRef((props, forwardedRef) => {
-  const isWithinTableHeader = React.useContext(TableHeaderContext);
+  const isWithinTableHeader = useSafeContext(TableHeaderContext);
+  const { mode } = useSafeContext(TableContext);
+  const { render, role } = React.useMemo(() => {
+    if (mode === "aria") {
+      return { role: isWithinTableHeader ? "columnheader" : "cell" };
+    }
+    return { render: isWithinTableHeader ? /* @__PURE__ */ jsx("th", {}) : /* @__PURE__ */ jsx("td", {}) };
+  }, [isWithinTableHeader, mode]);
   return /* @__PURE__ */ jsx(
-    Role.span,
+    Role.div,
     {
+      render,
+      role,
       ...props,
-      className: cx("\u{1F95D}-table-cell", props.className),
       ref: forwardedRef,
-      role: isWithinTableHeader ? "columnheader" : "cell",
-      children: props.children
+      className: cx("\u{1F95D}-table-cell", props.className)
     }
   );
 });
@@ -108,7 +141,8 @@ export {
   TableBody as Body,
   TableCaption as Caption,
   TableCell as Cell,
+  CustomTable,
   TableHeader as Header,
-  Table as Root,
+  HtmlTable,
   TableRow as Row
 };

package/dist/DEV/bricks/Tabs.js

@@ -1,41 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
 import cx from "classnames";
 import * as AkTab from "@ariakit/react/tab";
-import { useControlledState } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 function Tabs(props) {
   const {
     defaultSelectedId,
-    selectedId: selectedIdProp,
-    setSelectedId: setSelectedIdProp,
+    selectedId,
+    setSelectedId,
     selectOnMove,
     children
   } = props;
-  const [selectedId, setSelectedId] = useControlledState(
-    defaultSelectedId,
-    selectedIdProp,
-    setSelectedIdProp
-  );
   return /* @__PURE__ */ jsx(
     AkTab.TabProvider,
     {
+      defaultSelectedId,
       selectedId,
-      setSelectedId: React.useCallback(
-        (id) => {
-          if (document.startViewTransition) {
-            document.startViewTransition(() => {
-              ReactDOM.flushSync(() => {
-                setSelectedId(id);
-              });
-            });
-          } else {
-            setSelectedId(id);
-          }
-        },
-        [setSelectedId]
-      ),
+      setSelectedId,
       selectOnMove,
       children
     }
@@ -44,17 +24,12 @@ function Tabs(props) {
 DEV: Tabs.displayName = "Tabs.Root";
 const TabList = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
-  const viewTransitionName = `\u{1F95D}active-stripe-${React.useId().replaceAll(":", "_")}`;
   return /* @__PURE__ */ jsx(
     AkTab.TabList,
     {
       ...rest,
       "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-tab-list", props.className),
-      style: {
-        "--\u{1F95D}tab-active-stripe-view-transition-name": viewTransitionName,
-        ...props.style
-      },
       ref: forwardedRef
     }
   );

package/dist/DEV/bricks/TextBox.js

@@ -3,40 +3,33 @@ import * as React from "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";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
+import { useFieldControlType } from "./Field.internal.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
-    const { id, ...rest } = props;
+    useFieldControlType("textlike");
     const rootContext = React.useContext(TextBoxRootContext);
     const setDisabled = rootContext?.setDisabled;
     React.useEffect(() => {
       setDisabled?.(props.disabled);
     }, [setDisabled, props.disabled]);
     return /* @__PURE__ */ jsx(
-      FieldControl,
+      Role.input,
       {
-        type: "textlike",
-        id,
+        readOnly: props.disabled,
+        ...props,
+        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+        placeholder: props.placeholder ?? " ",
         render: /* @__PURE__ */ jsx(
-          Role.input,
+          Focusable,
           {
-            readOnly: props.disabled,
-            ...rest,
-            className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
-            placeholder: props.placeholder ?? " ",
-            render: /* @__PURE__ */ jsx(
-              Focusable,
-              {
-                accessibleWhenDisabled: true,
-                render: props.render || /* @__PURE__ */ jsx("input", {})
-              }
-            ),
-            ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("input", {})
           }
-        )
+        ),
+        ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
       }
     );
   }
@@ -44,29 +37,22 @@ const TextBoxInput = forwardRef(
 DEV: TextBoxInput.displayName = "TextBox.Input";
 const TextBoxTextarea = forwardRef(
   (props, forwardedRef) => {
-    const { id, ...rest } = props;
+    useFieldControlType("textlike");
     return /* @__PURE__ */ jsx(
-      FieldControl,
+      Role.textarea,
       {
-        type: "textlike",
-        id,
+        readOnly: props.disabled,
+        ...props,
+        className: cx("\u{1F95D}-text-box", props.className),
+        placeholder: props.placeholder ?? " ",
         render: /* @__PURE__ */ jsx(
-          Role.textarea,
+          Focusable,
           {
-            readOnly: props.disabled,
-            ...rest,
-            className: cx("\u{1F95D}-text-box", props.className),
-            placeholder: props.placeholder ?? " ",
-            render: /* @__PURE__ */ jsx(
-              Focusable,
-              {
-                accessibleWhenDisabled: true,
-                render: props.render || /* @__PURE__ */ jsx("textarea", {})
-              }
-            ),
-            ref: forwardedRef
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("textarea", {})
           }
-        )
+        ),
+        ref: forwardedRef
       }
     );
   }

package/dist/DEV/bricks/Tooltip.js

@@ -43,6 +43,7 @@ const Tooltip = forwardRef(
             AkTooltip.Tooltip,
             {
               "aria-hidden": "true",
+              portal: true,
               ...rest,
               unmountOnHide,
               className: cx("\u{1F95D}-tooltip", props.className),
@@ -53,7 +54,6 @@ const Tooltip = forwardRef(
                 ...props.style
               },
               wrapperProps: popover.wrapperProps,
-              portal: popover.portal,
               children: content
             }
           )

package/dist/DEV/bricks/TreeItem.js

@@ -2,15 +2,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
 import { Role } from "@ariakit/react/role";
+import { PopoverProvider } from "@ariakit/react/popover";
 import {
   CompositeItem
 } from "@ariakit/react/composite";
 import { Toolbar } from "@ariakit/react/toolbar";
 import * as ListItem from "./~utils.ListItem.js";
 import { IconButton } from "./IconButton.js";
-import { Icon } from "./Icon.js";
+import * as DropdownMenu from "./DropdownMenu.js";
+import { Icon, StatusWarning, MoreHorizontal } from "./Icon.js";
 import { forwardRef } from "./~utils.js";
-import { useEventHandlers } from "./~hooks.js";
+import { useEventHandlers, useSafeContext } from "./~hooks.js";
 import { GhostAligner, useGhostAlignment } from "./~utils.GhostAligner.js";
 const TreeItemContext = React.createContext(void 0);
 const TreeItemRoot = forwardRef(
@@ -19,11 +21,12 @@ const TreeItemRoot = forwardRef(
       "aria-level": level,
       selected,
       expanded,
-      icon,
+      icon: iconProp,
       unstable_decorations,
       label,
       description,
       actions,
+      error,
       onSelectedChange,
       onExpandedChange,
       onClick: onClickProp,
@@ -48,6 +51,7 @@ const TreeItemRoot = forwardRef(
     const labelId = React.useId();
     const descriptionId = React.useId();
     const decorationId = React.useId();
+    const icon = error ? /* @__PURE__ */ jsx(StatusWarning, {}) : iconProp;
     const describedBy = React.useMemo(() => {
       const idRefs = [];
       if (description) idRefs.push(descriptionId);
@@ -61,9 +65,10 @@ const TreeItemRoot = forwardRef(
           () => ({
             level,
             expanded,
-            selected
+            selected,
+            error
           }),
-          [level, expanded, selected]
+          [level, expanded, selected, error]
         ),
         children: /* @__PURE__ */ jsx(
           CompositeItem,
@@ -90,6 +95,7 @@ const TreeItemRoot = forwardRef(
               {
                 "data-kiwi-expanded": expanded,
                 "data-kiwi-selected": selected,
+                "data-kiwi-error": error ? true : void 0,
                 className: "\u{1F95D}-tree-item-node",
                 style: { "--\u{1F95D}tree-item-level": level },
                 role: void 0,
@@ -140,25 +146,101 @@ const TreeItemRoot = forwardRef(
 );
 DEV: TreeItemRoot.displayName = "TreeItem.Root";
 const TreeItemActions = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
+  const { children, ...rest } = props;
+  const actions = React.Children.toArray(children).filter(Boolean);
+  const { error } = useSafeContext(TreeItemContext);
+  const limit = error ? 2 : 3;
+  return /* @__PURE__ */ jsxs(
     Toolbar,
     {
-      ...props,
+      ...rest,
       onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
       onKeyDown: useEventHandlers(props.onKeyDown, (e) => e.stopPropagation()),
-      className: cx("\u{1F95D}-tree-item-actions", props.className),
+      className: cx("\u{1F95D}-tree-item-actions-container", props.className),
+      focusLoop: false,
       ref: forwardedRef,
-      children: props.children
+      children: [
+        actions.slice(0, limit - 1),
+        actions.length === limit ? actions[limit - 1] : null,
+        actions.length > limit ? /* @__PURE__ */ jsx(TreeItemActionsOverflowMenu, { children: actions.slice(limit - 1) }) : null
+      ]
     }
   );
 });
 DEV: TreeItemActions.displayName = "TreeItemActions";
+const arrowKeys = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+const TreeItemActionsOverflowMenuContext = React.createContext(false);
+function TreeItemActionsOverflowMenu({ children }) {
+  const [open, setOpen] = React.useState(false);
+  const isArrowKeyPressed = React.useRef(false);
+  return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(
+    DropdownMenu.Root,
+    {
+      open,
+      setOpen: React.useCallback((value) => {
+        if (value && !isArrowKeyPressed.current) {
+          setOpen(true);
+        } else {
+          setOpen(false);
+        }
+      }, []),
+      children: [
+        /* @__PURE__ */ jsx(
+          DropdownMenu.Button,
+          {
+            onKeyDown: (e) => {
+              if (arrowKeys.includes(e.key)) {
+                isArrowKeyPressed.current = true;
+              }
+              queueMicrotask(() => {
+                isArrowKeyPressed.current = false;
+              });
+            },
+            render: /* @__PURE__ */ jsx(TreeItemAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContext.Provider, { value: true, children: /* @__PURE__ */ jsx(DropdownMenu.Content, { children }) })
+      ]
+    }
+  ) });
+}
+DEV: TreeItemActionsOverflowMenu.displayName = "TreeItemActionsOverflowMenu";
 const TreeItemAction = forwardRef(
   (props, forwardedRef) => {
-    const { visible, ...rest } = props;
+    const { error } = useSafeContext(TreeItemContext);
+    const {
+      visible = error ? true : void 0,
+      // visible by default during error state
+      label,
+      icon,
+      ...rest
+    } = props;
+    if (React.useContext(TreeItemActionsOverflowMenuContext)) {
+      DEV: {
+        if (visible !== void 0)
+          console.warn("overflowing actions should not use `visible` prop");
+      }
+      return /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          ...rest,
+          label,
+          icon,
+          ref: forwardedRef
+        }
+      );
+    }
+    DEV: {
+      if (!icon)
+        throw new Error(
+          "`icon` prop is required when the action is displayed as a button"
+        );
+    }
     return /* @__PURE__ */ jsx(
       IconButton,
       {
+        label,
+        icon,
         inert: visible === false ? true : void 0,
         ...rest,
         variant: "ghost",

package/dist/DEV/bricks/index.js

@@ -11,7 +11,7 @@ import * as DropdownMenu from "./DropdownMenu.js";
 import { Divider } from "./Divider.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { Field } from "./Field.js";
+import * as Field from "./Field.js";
 import { Kbd } from "./Kbd.js";
 import { Label } from "./Label.js";
 import { ProgressBar } from "./ProgressBar.js";
@@ -20,6 +20,7 @@ import * as Select from "./Select.js";
 import { Spinner } from "./Spinner.js";
 import { Skeleton } from "./Skeleton.js";
 import { Switch } from "./Switch.js";
+import * as Table from "./Table.js";
 import * as Tabs from "./Tabs.js";
 import { Text } from "./Text.js";
 import * as TextBox from "./TextBox.js";
@@ -48,6 +49,7 @@ export {
   Skeleton,
   Spinner,
   Switch,
+  Table,
   Tabs,
   Text,
   TextBox,