@dxos/react-ui 0.4.5-main.f8d6c4e → 0.4.5-next.ea4f804

package/dist/lib/browser/index.mjs

@@ -411,12 +411,14 @@ import React6, { forwardRef as forwardRef5 } from "react";
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import React5, { forwardRef as forwardRef4 } from "react";
-var Link = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+var Link = /* @__PURE__ */ forwardRef4(({ asChild, variant, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot3 : Primitive3.a;
   return /* @__PURE__ */ React5.createElement(Root3, {
     ...props,
-    className: tx("link.root", "link", {}, classNames),
+    className: tx("link.root", "link", {
+      variant
+    }, classNames),
     ref: forwardedRef
   });
 });
@@ -1248,7 +1250,7 @@ import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React19, { forwardRef as forwardRef16, useCallback as useCallback3, useRef } from "react";
+import React19, { forwardRef as forwardRef16, useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState4 } from "react";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Main/useSwipeToDismiss.ts
@@ -1355,6 +1357,7 @@ var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
 var MAIN_NAME = "Main";
 var GENERIC_CONSUMER_NAME = "GenericConsumer";
 var [MainProvider, useMainContext] = createContext8(MAIN_NAME, {
+  resizing: false,
   navigationSidebarOpen: false,
   setNavigationSidebarOpen: (nextOpen) => {
     console.warn("Attempt to set sidebar state without initializing `MainRoot`");
@@ -1393,6 +1396,7 @@ var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
     ])
   };
 };
+var resizeDebounce = 3e3;
 var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavigationSidebarOpen, onNavigationSidebarOpenChange, complementarySidebarOpen: propsComplementarySidebarOpen, defaultComplementarySidebarOpen, onComplementarySidebarOpenChange, children, ...props }) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
@@ -1407,19 +1411,38 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
     defaultProp: defaultComplementarySidebarOpen,
     onChange: onComplementarySidebarOpenChange
   });
+  const [resizing, setResizing] = useState4(false);
+  const resizeInterval = useRef(null);
+  const handleResize = useCallback3(() => {
+    setResizing(true);
+    if (resizeInterval.current) {
+      clearTimeout(resizeInterval.current);
+    }
+    resizeInterval.current = setTimeout(() => {
+      setResizing(false);
+      resizeInterval.current = null;
+    }, resizeDebounce);
+  }, []);
+  useEffect4(() => {
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [
+    handleResize
+  ]);
   return /* @__PURE__ */ React19.createElement(MainProvider, {
     ...props,
     navigationSidebarOpen,
     setNavigationSidebarOpen,
     complementarySidebarOpen,
-    setComplementarySidebarOpen
+    setComplementarySidebarOpen,
+    resizing
   }, children);
 };
 MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, setOpen, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -1440,11 +1463,10 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
       onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
     },
     ...props,
-    className: tx("main.sidebar", "main__sidebar", {
-      isLg,
-      [side === "inline-end" ? "inlineEndSidebarOpen" : "inlineStartSidebarOpen"]: open,
-      side
-    }, classNames),
+    "data-side": side === "inline-end" ? "ie" : "is",
+    "data-state": open ? "open" : "closed",
+    "data-resizing": resizing ? "true" : "false",
+    className: tx("main.sidebar", "main__sidebar", {}, classNames),
     ...!open && {
       inert: "true"
     },
@@ -1454,40 +1476,38 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
   }, children)));
 });
 var MainNavigationSidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
-  const { navigationSidebarOpen, setNavigationSidebarOpen } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   return /* @__PURE__ */ React19.createElement(MainSidebar, {
     ...props,
     open: navigationSidebarOpen,
     setOpen: setNavigationSidebarOpen,
+    resizing,
     side: "inline-start",
     ref: forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainComplementarySidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
-  const { complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   return /* @__PURE__ */ React19.createElement(MainSidebar, {
     ...props,
     open: complementarySidebarOpen,
     setOpen: setComplementarySidebarOpen,
+    resizing,
     side: "inline-end",
     ref: forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, children, ...props }, forwardedRef) => {
-  const [isLg] = useMediaQuery("lg", {
-    ssr: false
-  });
   const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot9 : "main";
   return /* @__PURE__ */ React19.createElement(Root3, {
     ...props,
+    "data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
+    "data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed",
     className: tx("main.content", "main", {
-      isLg,
-      inlineStartSidebarOpen: navigationSidebarOpen,
-      inlineEndSidebarOpen: complementarySidebarOpen,
       bounce
     }, classNames),
     ref: forwardedRef
@@ -1511,9 +1531,18 @@ var MainOverlay = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwar
       inlineStartSidebarOpen: navigationSidebarOpen,
       inlineEndSidebarOpen: complementarySidebarOpen
     }, classNames),
-    "data-open": navigationSidebarOpen,
+    "data-state": navigationSidebarOpen || complementarySidebarOpen ? "open" : "closed",
     "aria-hidden": "true",
-    "data-aria-hidden": "true",
+    ref: forwardedRef
+  });
+});
+var MainNotch = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
+  return /* @__PURE__ */ React19.createElement("nav", {
+    ...props,
+    "data-nav-sidebar-state": navigationSidebarOpen ? "open" : "closed",
+    className: tx("main.notch", "main__notch", {}, classNames),
     ref: forwardedRef
   });
 });
@@ -1522,7 +1551,8 @@ var Main = {
   Content: MainContent,
   Overlay: MainOverlay,
   NavigationSidebar: MainNavigationSidebar,
-  ComplementarySidebar: MainComplementarySidebar
+  ComplementarySidebar: MainComplementarySidebar,
+  Notch: MainNotch
 };
 
 // packages/ui/react-ui/src/components/Message/Message.tsx
@@ -2043,7 +2073,7 @@ var Tooltip = {
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 import { createKeyborg } from "keyborg";
-import React30, { createContext as createContext10, useEffect as useEffect4 } from "react";
+import React30, { createContext as createContext10, useEffect as useEffect5 } from "react";
 
 // packages/ui/react-ui/src/util/hasIosKeyboard.ts
 var hasIosKeyboard = () => {
@@ -2064,7 +2094,7 @@ var handleInputModalityChange = (isUsingKeyboard) => {
   }
 };
 var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootElevation = "base", rootDensity = "coarse" }) => {
-  useEffect4(() => {
+  useEffect5(() => {
     if (document.defaultView) {
       const kb = createKeyborg(document.defaultView);
       kb.subscribe(handleInputModalityChange);