@dxos/react-ui 0.4.5-main.623c49f → 0.4.5-main.8a5190e

package/dist/lib/browser/index.mjs

@@ -1250,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
@@ -1357,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`");
@@ -1395,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
@@ -1409,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
   });
@@ -1444,6 +1465,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
     ...props,
     "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,22 +1476,24 @@ 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
   });
@@ -2049,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 = () => {
@@ -2070,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);