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

package/dist/DEV/bricks/Root.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Ariakit from "@ariakit/react";
+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";
+const css = foundationsCss + bricksCss;
+const Root = forwardRef((props, forwardedRef) => {
+  const { children, synchronizeColorScheme = false, ...rest } = props;
+  return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
+    /* @__PURE__ */ jsx(Styles, {}),
+    /* @__PURE__ */ jsx(Fonts, {}),
+    synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
+    children
+  ] });
+});
+DEV: Root.displayName = "Root";
+const RootNodeContext = React.createContext(null);
+function useRootNode() {
+  return React.useContext(RootNodeContext);
+}
+const RootInternal = forwardRef(
+  (props, forwardedRef) => {
+    const { children, colorScheme, density, ...rest } = props;
+    const [rootNode, setRootNode] = React.useState(null);
+    const findRootNodeFromRef = React.useCallback((element) => {
+      if (!element) return;
+      const rootNode2 = element.getRootNode();
+      if (!isDocument(rootNode2) && !isShadow(rootNode2)) return;
+      setRootNode(rootNode2);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role,
+      {
+        ...rest,
+        className: cx("\u{1F95D}-root", props.className),
+        "data-kiwi-theme": colorScheme,
+        "data-kiwi-density": density,
+        ref: useMergedRefs(forwardedRef, findRootNodeFromRef),
+        children: /* @__PURE__ */ jsx(RootNodeContext.Provider, { value: rootNode, children })
+      }
+    );
+  }
+);
+function SynchronizeColorScheme({
+  colorScheme
+}) {
+  const rootNode = useRootNode();
+  useLayoutEffect(() => {
+    if (!rootNode) return;
+    if (isDocument(rootNode)) {
+      rootNode.documentElement.dataset.colorScheme = colorScheme;
+      const meta = rootNode.querySelector("meta[name='color-scheme']");
+      if (meta) meta.content = colorScheme;
+    } else if (isShadow(rootNode)) {
+      rootNode.host.dataset.colorScheme = colorScheme;
+    }
+  }, [rootNode, colorScheme]);
+  return null;
+}
+function Styles() {
+  const rootNode = useRootNode();
+  useLayoutEffect(() => {
+    if (!rootNode) return;
+    loadStyles(rootNode, { css });
+  }, [rootNode]);
+  return null;
+}
+const styleSheets = /* @__PURE__ */ new WeakMap();
+function loadStyles(rootNode, { css: css2 }) {
+  const loaded = (() => {
+    if (!isBrowser) return false;
+    const ownerDocument = getOwnerDocument(rootNode);
+    const _window = getWindow(rootNode);
+    if (!ownerDocument || !_window) return false;
+    if (!supportsAdoptedStylesheets && !rootNode.querySelector("style[data-kiwi]")) {
+      const styleElement = ownerDocument.createElement("style");
+      styleElement.dataset.kiwi = "true";
+      styleElement.textContent = css2;
+      (rootNode.head || rootNode).appendChild(styleElement);
+      return true;
+    }
+    const styleSheet = styleSheets.get(_window) || new _window.CSSStyleSheet();
+    if (!styleSheets.has(_window)) {
+      styleSheets.set(_window, styleSheet);
+    }
+    styleSheet.replaceSync(css2);
+    if (!rootNode.adoptedStyleSheets.includes(styleSheet)) {
+      rootNode.adoptedStyleSheets.push(styleSheet);
+    }
+    return true;
+  })();
+  return { loaded };
+}
+function Fonts() {
+  const rootNode = useRootNode();
+  useLayoutEffect(() => {
+    if (!rootNode) return;
+    loadFonts(rootNode);
+  }, [rootNode]);
+  return null;
+}
+function loadFonts(rootNode) {
+  const ownerWindow = getWindow(rootNode);
+  if (!ownerWindow || Array.from(ownerWindow.document.fonts).some(
+    (font) => font.family === "InterVariable"
+  )) {
+    return;
+  }
+  const interStyles = {
+    normal: "https://rsms.me/inter/font-files/InterVariable.woff2?v=4.1",
+    italic: "https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.1"
+  };
+  for (const [style, url] of Object.entries(interStyles)) {
+    const font = new ownerWindow.FontFace(
+      "InterVariable",
+      `url(${url}) format("woff2")`,
+      {
+        display: "swap",
+        weight: "100 900",
+        style
+      }
+    );
+    ownerWindow.document.fonts.add(font);
+  }
+}
+const supportsAdoptedStylesheets = isBrowser && "adoptedStyleSheets" in Document.prototype;
+function isShadow(node) {
+  return node instanceof ShadowRoot || node?.nodeType === Node.DOCUMENT_FRAGMENT_NODE && !!node?.host;
+}
+function isDocument(node) {
+  return node?.nodeType === Node.DOCUMENT_NODE;
+}
+function getOwnerDocument(node) {
+  return (isDocument(node) ? node : node.ownerDocument) || null;
+}
+function getWindow(node) {
+  const ownerDocument = getOwnerDocument(node);
+  return ownerDocument?.defaultView || null;
+}
+const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
+export {
+  Root
+};

package/dist/DEV/bricks/Select.js

@@ -0,0 +1,55 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import {
+  forwardRef,
+  isBrowser
+} from "./~utils.js";
+import { DisclosureArrow } from "./Icon.js";
+import { useFieldId } from "./Field.js";
+const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
+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,
+    {
+      ...props,
+      className: cx("\u{1F95D}-select-root", props.className),
+      "data-kiwi-has-select": !supportsHas && isHtmlSelect ? "true" : void 0,
+      ref: forwardedRef
+    }
+  ) });
+});
+const HtmlSelect = forwardRef(
+  (props, forwardedRef) => {
+    const setIsHtmlSelect = React.useContext(HtmlSelectContext);
+    const fieldId = useFieldId();
+    React.useEffect(
+      function updateContext() {
+        setIsHtmlSelect(true);
+      },
+      [setIsHtmlSelect]
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Ariakit.Role.select,
+        {
+          id: fieldId,
+          ...props,
+          className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
+          "data-kiwi-tone": "neutral",
+          "data-kiwi-variant": "solid",
+          ref: forwardedRef
+        }
+      ),
+      /* @__PURE__ */ jsx(DisclosureArrow, { className: "\u{1F95D}-select-arrow" })
+    ] });
+  }
+);
+export {
+  HtmlSelect,
+  SelectRoot as Root
+};

package/dist/DEV/bricks/Switch.js

@@ -0,0 +1,25 @@
+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 Switch = forwardRef(
+  (props, forwardedRef) => {
+    const fieldId = useFieldId();
+    return /* @__PURE__ */ jsx(
+      Ariakit.Checkbox,
+      {
+        accessibleWhenDisabled: true,
+        id: fieldId,
+        ...props,
+        className: cx("\u{1F95D}-switch", props.className),
+        role: "switch",
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: Switch.displayName = "Switch";
+export {
+  Switch
+};

package/dist/DEV/bricks/Tabs.js

@@ -0,0 +1,91 @@
+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 { useControlledState } from "./~hooks.js";
+import { forwardRef } from "./~utils.js";
+function Tabs(props) {
+  const {
+    defaultSelectedId,
+    selectedId: selectedIdProp,
+    setSelectedId: setSelectedIdProp,
+    selectOnMove,
+    children
+  } = props;
+  const [selectedId, setSelectedId] = useControlledState(
+    defaultSelectedId,
+    selectedIdProp,
+    setSelectedIdProp
+  );
+  return /* @__PURE__ */ jsx(
+    Ariakit.TabProvider,
+    {
+      selectedId,
+      setSelectedId: React.useCallback(
+        (id) => {
+          if (document.startViewTransition) {
+            document.startViewTransition(() => {
+              ReactDOM.flushSync(() => {
+                setSelectedId(id);
+              });
+            });
+          } else {
+            setSelectedId(id);
+          }
+        },
+        [setSelectedId]
+      ),
+      selectOnMove,
+      children
+    }
+  );
+}
+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(
+    Ariakit.TabList,
+    {
+      "data-kiwi-tone": tone,
+      ...rest,
+      className: cx("\u{1F95D}-tab-list", props.className),
+      style: {
+        "--\u{1F95D}tab-active-stripe-view-transition-name": viewTransitionName,
+        ...props.style
+      },
+      ref: forwardedRef
+    }
+  );
+});
+DEV: TabList.displayName = "Tabs.TabList";
+const Tab = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.Tab,
+    {
+      accessibleWhenDisabled: true,
+      ...props,
+      className: cx("\u{1F95D}-tab", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: Tab.displayName = "Tabs.Tab";
+const TabPanel = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.TabPanel,
+    {
+      ...props,
+      className: cx("\u{1F95D}-tab-panel", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: TabPanel.displayName = "Tabs.TabPanel";
+export {
+  Tabs as Root,
+  Tab,
+  TabList,
+  TabPanel
+};

package/dist/DEV/bricks/Text.js

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

package/dist/DEV/bricks/TextBox.js

@@ -0,0 +1,100 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as Ariakit from "@ariakit/react";
+import cx from "classnames";
+import { useFieldId } from "./Field.js";
+import { Icon } from "./Icon.js";
+import { Textarea } from "./Textarea.js";
+import { useMergedRefs } from "./~hooks.js";
+import { forwardRef } from "./~utils.js";
+const TextBoxInput = forwardRef(
+  (props, forwardedRef) => {
+    const fieldId = useFieldId();
+    const rootContext = React.useContext(TextBoxRootContext);
+    const setDisabled = rootContext?.setDisabled;
+    React.useEffect(() => {
+      setDisabled?.(props.disabled);
+    }, [setDisabled, props.disabled]);
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.input,
+      {
+        id: fieldId,
+        ...props,
+        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Focusable,
+          {
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("input", {})
+          }
+        ),
+        ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
+      }
+    );
+  }
+);
+DEV: TextBoxInput.displayName = "TextBox.Input";
+const TextBoxRoot = forwardRef(
+  (props, forwardedRef) => {
+    const inputRef = React.useRef(null);
+    const [disabled, setDisabled] = React.useState();
+    return /* @__PURE__ */ jsx(
+      TextBoxRootContext.Provider,
+      {
+        value: React.useMemo(() => ({ setDisabled, inputRef }), []),
+        children: /* @__PURE__ */ jsx(
+          Ariakit.Role.div,
+          {
+            ...props,
+            "data-kiwi-disabled": disabled,
+            className: cx("\u{1F95D}-text-box", props.className),
+            onPointerDown: (e) => {
+              props.onPointerDown?.(e);
+              if (e.defaultPrevented) return;
+              if (disabled) return;
+              if (e.target !== e.currentTarget) return;
+              e.preventDefault();
+              inputRef.current?.focus();
+            },
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+DEV: TextBoxRoot.displayName = "TextBox.Root";
+const TextBoxIcon = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        className: cx("\u{1F95D}-text-box-decoration", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: TextBoxIcon.displayName = "TextBox.Icon";
+const TextBoxText = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.span,
+      {
+        ...props,
+        className: cx("\u{1F95D}-text-box-decoration", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: TextBoxText.displayName = "TextBox.Text";
+const TextBoxRootContext = React.createContext(void 0);
+export {
+  TextBoxIcon as Icon,
+  TextBoxInput as Input,
+  TextBoxRoot as Root,
+  TextBoxText as Text,
+  Textarea
+};

package/dist/DEV/bricks/Textarea.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import * as Ariakit from "@ariakit/react";
+import cx from "classnames";
+import { useFieldId } from "./Field.js";
+import { forwardRef } from "./~utils.js";
+const Textarea = forwardRef(
+  (props, forwardedRef) => {
+    const fieldId = useFieldId();
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.textarea,
+      {
+        id: fieldId,
+        ...props,
+        className: cx("\u{1F95D}-text-box", props.className),
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Focusable,
+          {
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("textarea", {})
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: Textarea.displayName = "Textarea";
+export {
+  Textarea
+};

package/dist/DEV/bricks/Tooltip.js

@@ -0,0 +1,76 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef, supportsPopover } from "./~utils.js";
+const Tooltip = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      content,
+      children,
+      className,
+      type = "description",
+      id = React.useId(),
+      defaultOpen: defaultOpenProp,
+      open: openProp,
+      setOpen: setOpenProp,
+      unmountOnHide = type === "none",
+      ...rest
+    } = props;
+    const store = Ariakit.useTooltipStore();
+    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(Fragment, { children: /* @__PURE__ */ jsxs(
+      Ariakit.TooltipProvider,
+      {
+        store,
+        defaultOpen: defaultOpenProp,
+        open: openProp,
+        setOpen: setOpenProp,
+        children: [
+          /* @__PURE__ */ jsx(
+            Ariakit.TooltipAnchor,
+            {
+              render: children,
+              ...type === "description" && { "aria-describedby": id },
+              ...type === "label" && { "aria-labelledby": id }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Ariakit.Tooltip,
+            {
+              "aria-hidden": "true",
+              ...rest,
+              unmountOnHide,
+              className: cx("\u{1F95D}-tooltip", className),
+              ref: forwardedRef,
+              id,
+              style: {
+                zIndex: supportsPopover ? void 0 : 9999,
+                ...props.style
+              },
+              wrapperProps: { popover: "manual" },
+              portal: !supportsPopover,
+              children: content
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+DEV: Tooltip.displayName = "Tooltip";
+export {
+  Tooltip
+};

package/dist/DEV/bricks/Tree.js

@@ -0,0 +1,118 @@
+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 { IconButton } from "./IconButton.js";
+import { Icon } from "./Icon.js";
+import { forwardRef } from "./~utils.js";
+const Tree = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Ariakit.Role.div, { ...props, role: "list", ref: forwardedRef, children: props.children });
+});
+DEV: Tree.displayName = "Tree.Root";
+const TreeItem = forwardRef((props, forwardedRef) => {
+  const { selected, content, children, className, expanded, style, ...rest } = props;
+  const parentContext = React.useContext(TreeItemContext);
+  const level = parentContext ? parentContext.level + 1 : 1;
+  const firstSelected = !!selected && !parentContext?.selected;
+  return /* @__PURE__ */ jsx(
+    TreeItemContext.Provider,
+    {
+      value: React.useMemo(
+        () => ({
+          level,
+          expanded,
+          selected
+        }),
+        [level, expanded, selected]
+      ),
+      children: /* @__PURE__ */ jsxs("div", { role: "listitem", "aria-current": firstSelected ? true : void 0, children: [
+        /* @__PURE__ */ jsx(
+          ListItem.Root,
+          {
+            ...rest,
+            "data-kiwi-expanded": expanded,
+            "data-kiwi-selected": selected,
+            "data-kiwi-parent-selected": parentContext?.selected,
+            className: cx("\u{1F95D}-tree-item", className),
+            style: {
+              ...style,
+              "--\u{1F95D}tree-item-level": level
+            },
+            ref: forwardedRef,
+            role: void 0,
+            children: content
+          }
+        ),
+        children && /* @__PURE__ */ jsx("div", { role: "list", children })
+      ] })
+    }
+  );
+});
+DEV: TreeItem.displayName = "Tree.Item";
+const TreeItemContent = forwardRef(
+  (props, forwardedRef) => {
+    const { children, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      ListItem.Content,
+      {
+        ...rest,
+        className: cx("\u{1F95D}-tree-item-content", props.className),
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx("button", { type: "button", children })
+      }
+    );
+  }
+);
+DEV: TreeItemContent.displayName = "Tree.Content";
+const TreeItemExpander = forwardRef(
+  (props, forwardedRef) => {
+    const context = React.useContext(TreeItemContext);
+    const expanded = context?.expanded;
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: /* @__PURE__ */ jsx(TreeChevron, {}),
+        label: "Toggle",
+        "aria-expanded": expanded === void 0 ? void 0 : expanded,
+        ...props,
+        className: cx("\u{1F95D}-tree-item-expander", props.className),
+        variant: "ghost",
+        labelVariant: "visually-hidden",
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: TreeItemExpander.displayName = "Tree.Expander";
+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 {
+  TreeItemContent as Content,
+  TreeItemExpander as Expander,
+  TreeItem as Item,
+  Tree as Root
+};

package/dist/DEV/bricks/VisuallyHidden.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const VisuallyHidden = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Ariakit.VisuallyHidden, { ...props, ref: forwardedRef });
+  }
+);
+DEV: VisuallyHidden.displayName = "VisuallyHidden";
+export {
+  VisuallyHidden
+};