@dxos/react-ui 0.8.4-main.937b3ca → 0.8.4-main.9735255

package/dist/lib/browser/index.mjs

@@ -1247,8 +1247,9 @@ import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { Slot as Slot8 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
 import React20, { forwardRef as forwardRef16, useCallback as useCallback7, useEffect as useEffect3, useRef, useState as useState5 } from "react";
+import { addEventListener } from "@dxos/async";
 import { log } from "@dxos/log";
-import { useForwardedRef, useMediaQuery } from "@dxos/react-hooks";
+import { useDynamicRef, useForwardedRef, useMediaQuery, useViewportResize as useViewportResize2 } from "@dxos/react-hooks";
 
 // src/components/Main/useSwipeToDismiss.ts
 import { useCallback as useCallback6, useEffect as useEffect2, useState as useState4 } from "react";
@@ -1347,7 +1348,10 @@ var MAIN_NAME = "Main";
 var MAIN_ROOT_NAME = "MainRoot";
 var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
 var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
-var GENERIC_CONSUMER_NAME = "GenericConsumer";
+var DRAWER_NAME = "Drawer";
+var handleOpenAutoFocus = (event) => {
+  !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
+};
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
   const handleKeyDown = useCallback7((event) => {
@@ -1371,35 +1375,67 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
     }
   });
   return {
-    onKeyDown: handleKeyDown,
     [landmarkAttr]: landmark,
     tabIndex: 0,
+    onKeyDown: handleKeyDown,
     ...focusableGroupAttrs
   };
 };
+var isFullscreen = () => {
+  const isMobile = window.innerHeight <= 1e3;
+  return window.visualViewport && isMobile ? window.visualViewport.height < 700 : false;
+};
+var useDynamicDrawer = (consumerName) => {
+  const { drawerState, setDrawerState } = useSidebars(consumerName);
+  const drawersStateRef = useDynamicRef(drawerState);
+  const checkViewport = useCallback7(() => {
+    if (window.visualViewport) {
+      document.documentElement.style.setProperty("--visual-viewport-height", `${window.visualViewport.height}px`);
+    }
+    if (drawersStateRef.current !== "closed") {
+      setDrawerState(isFullscreen() ? "full" : "expanded");
+    }
+  }, [
+    setDrawerState
+  ]);
+  useViewportResize2(checkViewport, [], 100);
+  useEffect3(() => addEventListener(window, "resize", checkViewport), [
+    checkViewport
+  ]);
+  return drawerState;
+};
 var [MainProvider, useMainContext] = createContext6(MAIN_NAME, {
   resizing: false,
   navigationSidebarState: "closed",
   setNavigationSidebarState: (_nextState) => {
-    log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
+    log.warn("Not initialized", void 0, {
       F: __dxlog_file,
-      L: 92,
+      L: 150,
       S: void 0,
       C: (f, a) => f(...a)
     });
   },
   complementarySidebarState: "closed",
   setComplementarySidebarState: (_nextState) => {
-    log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
+    log.warn("Not initialized", void 0, {
       F: __dxlog_file,
-      L: 97,
+      L: 155,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  },
+  drawerState: "closed",
+  setDrawerState: (_nextState) => {
+    log.warn("Not initialized", void 0, {
+      F: __dxlog_file,
+      L: 160,
       S: void 0,
       C: (f, a) => f(...a)
     });
   }
 });
-var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
+var useSidebars = (consumerName) => {
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState, drawerState, setDrawerState } = useMainContext(consumerName);
   return {
     navigationSidebarState,
     setNavigationSidebarState,
@@ -1418,11 +1454,18 @@ var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
     ]),
     openComplementarySidebar: useCallback7(() => setComplementarySidebarState("expanded"), []),
     collapseComplementarySidebar: useCallback7(() => setComplementarySidebarState("collapsed"), []),
-    closeComplementarySidebar: useCallback7(() => setComplementarySidebarState("closed"), [])
+    closeComplementarySidebar: useCallback7(() => setComplementarySidebarState("closed"), []),
+    drawerState,
+    setDrawerState,
+    toggleDrawer: useCallback7(() => setDrawerState(drawerState === "closed" ? isFullscreen() ? "full" : "expanded" : "closed"), [
+      drawerState,
+      setDrawerState
+    ]),
+    openDrawer: useCallback7(() => setDrawerState("expanded"), []),
+    closeDrawer: useCallback7(() => setDrawerState("closed"), [])
   };
 };
-var resizeDebounce = 3e3;
-var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
+var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState = "closed", onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState = "closed", onComplementarySidebarStateChange, drawerState: propsDrawerState, defaultDrawerState = "closed", onDrawerStateChange, children, ...props }) => {
   const [isLg] = useMediaQuery("lg");
   const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState3({
     prop: propsNavigationSidebarState,
@@ -1434,9 +1477,14 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
     defaultProp: defaultComplementarySidebarState,
     onChange: onComplementarySidebarStateChange
   });
+  const [drawerState = "closed", setDrawerState] = useControllableState3({
+    prop: propsDrawerState,
+    defaultProp: defaultDrawerState,
+    onChange: onDrawerStateChange
+  });
   const [resizing, setResizing] = useState5(false);
   const resizeInterval = useRef(null);
-  const handleResize = useCallback7(() => {
+  useEffect3(() => addEventListener(window, "resize", () => {
     setResizing(true);
     if (resizeInterval.current) {
       clearTimeout(resizeInterval.current);
@@ -1444,27 +1492,20 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
     resizeInterval.current = setTimeout(() => {
       setResizing(false);
       resizeInterval.current = null;
-    }, resizeDebounce);
-  }, []);
-  useEffect3(() => {
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [
-    handleResize
-  ]);
+    }, 3e3);
+  }), []);
   return /* @__PURE__ */ React20.createElement(MainProvider, {
     ...props,
     navigationSidebarState,
     setNavigationSidebarState,
     complementarySidebarState,
     setComplementarySidebarState,
+    drawerState,
+    setDrawerState,
     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, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg");
   const { tx } = useThemeContext();
@@ -1498,15 +1539,15 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
       tabIndex: -1,
       onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
     },
+    ...state === "closed" && {
+      inert: true
+    },
     ...props,
     "data-side": side === "inline-end" ? "ie" : "is",
     "data-state": state,
     "data-resizing": resizing ? "true" : "false",
     className: tx("main.sidebar", "main__sidebar", {}, classNames),
     onKeyDownCapture: handleKeyDown,
-    ...state === "closed" && {
-      inert: true
-    },
     ref
   }, children));
 });
@@ -1537,9 +1578,61 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef
     ref: forwardedRef
   });
 });
-MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
+var MainDrawer = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, label, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery("lg");
+  const { tx } = useThemeContext();
+  const { t } = useTranslation();
+  const ref = useForwardedRef(forwardedRef);
+  const noopRef = useRef(null);
+  useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
+    onDismiss: () => onStateChange?.("closed")
+  });
+  const handleKeyDown = useCallback7((event) => {
+    const focusGroupParent = event.target.closest("[data-tabster]");
+    if (event.key === "Escape" && focusGroupParent) {
+      event.preventDefault();
+      event.stopPropagation();
+      focusGroupParent.focus();
+    }
+    props.onKeyDown?.(event);
+  }, [
+    props.onKeyDown
+  ]);
+  return /* @__PURE__ */ React20.createElement(Primitive7.div, {
+    ...state === "closed" && {
+      inert: true
+    },
+    ...!isLg && {
+      forceMount: true,
+      tabIndex: -1,
+      onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
+    },
+    ...props,
+    role: "region",
+    "aria-label": toLocalizedString(label, t),
+    "data-state": state,
+    "data-resizing": resizing ? "true" : "false",
+    className: tx("main.drawer", "main__drawer", {}, classNames),
+    onKeyDownCapture: handleKeyDown,
+    ref
+  }, children);
+});
+var MainDrawerRoot = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+  const { drawerState, setDrawerState, resizing } = useMainContext(DRAWER_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "3");
+  return /* @__PURE__ */ React20.createElement(MainDrawer, {
+    ...mover,
+    ...props,
+    resizing,
+    state: drawerState,
+    onStateChange: setDrawerState,
+    ref: forwardedRef
+  });
+});
+MainDrawerRoot.displayName = DRAWER_NAME;
 var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
-  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
+  const { navigationSidebarState, complementarySidebarState, drawerState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root6 = asChild ? Slot8 : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
@@ -1551,6 +1644,7 @@ var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, h
     ...props,
     "data-sidebar-inline-start-state": navigationSidebarState,
     "data-sidebar-inline-end-state": complementarySidebarState,
+    "data-drawer-state": drawerState,
     "data-handles-focus": handlesFocus,
     className: tx("main.content", "main", {
       bounce,
@@ -1565,11 +1659,11 @@ var MainOverlay = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwar
   const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React20.createElement("div", {
+    ...props,
     onClick: () => {
       setNavigationSidebarState("collapsed");
       setComplementarySidebarState("collapsed");
     },
-    ...props,
     className: tx("main.overlay", "main__overlay", {
       isLg,
       inlineStartSidebarOpen: navigationSidebarState,
@@ -1585,7 +1679,8 @@ var Main = {
   Content: MainContent,
   Overlay: MainOverlay,
   NavigationSidebar: MainNavigationSidebar,
-  ComplementarySidebar: MainComplementarySidebar
+  ComplementarySidebar: MainComplementarySidebar,
+  Drawer: MainDrawerRoot
 };
 
 // src/components/Menu/ContextMenu.tsx
@@ -2582,7 +2677,7 @@ var ScrollArea = {
 // src/components/ScrollContainer/ScrollContainer.tsx
 import { createContext as createContext8 } from "@radix-ui/react-context";
 import React27, { forwardRef as forwardRef23, useCallback as useCallback10, useEffect as useEffect6, useImperativeHandle, useMemo as useMemo5, useRef as useRef4, useState as useState7 } from "react";
-import { addEventListener, combine } from "@dxos/async";
+import { addEventListener as addEventListener2, combine } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
 import { useForwardedRef as useForwardedRef2 } from "@dxos/react-hooks";
 import { mx as mx5 } from "@dxos/ui-theme";
@@ -2649,11 +2744,11 @@ var Root3 = /* @__PURE__ */ forwardRef23(({ children, classNames, pin, fade, beh
     }
     return combine(
       // Check if user scrolls.
-      addEventListener(scrollerRef.current, "wheel", () => {
+      addEventListener2(scrollerRef.current, "wheel", () => {
         setPinned(isBottom(scrollerRef.current));
       }),
       // Check if scrolls.
-      addEventListener(scrollerRef.current, "scroll", () => {
+      addEventListener2(scrollerRef.current, "scroll", () => {
         setOverflow((scrollerRef.current?.scrollTop ?? 0) > 0);
       })
     );
@@ -3141,6 +3236,7 @@ export {
   useDensityContext,
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
+  useDynamicDrawer,
   useElevationContext,
   useIconHref,
   useLandmarkMover,