@dxos/react-ui 0.6.8-main.3be982f → 0.6.8-staging.63bcb81

package/dist/lib/browser/index.mjs

@@ -1260,7 +1260,9 @@ var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot9 : Primitive8.div;
   const arrowNavigationAttrs = useArrowNavigationGroup({
-    axis: "vertical"
+    axis: "vertical",
+    tabbable: false,
+    circular: true
   });
   return /* @__PURE__ */ React19.createElement(Root3, {
     role: "treegrid",
@@ -1284,11 +1286,14 @@ var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, c
     onChange: propsOnOpenChange,
     defaultProp: defaultOpen
   });
-  const focusableGroupAttrs = useFocusableGroup();
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited"
+  });
   const arrowGroupAttrs = useArrowNavigationGroup({
     axis: "horizontal",
-    tabbable: true,
-    circular: false
+    tabbable: false,
+    circular: false,
+    memorizeCurrent: false
   });
   return /* @__PURE__ */ React19.createElement(TreegridRowProvider, {
     open,
@@ -1337,6 +1342,8 @@ var Treegrid = {
 };
 
 // packages/ui/react-ui/src/components/Main/Main.tsx
+import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { createContext as createContext8 } from "@radix-ui/react-context";
 import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/react-dialog";
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
@@ -1450,13 +1457,42 @@ var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
 var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
 var MAIN_NAME = "Main";
 var GENERIC_CONSUMER_NAME = "GenericConsumer";
+var landmarkAttr = "data-main-landmark";
+var useLandmarkMover = (propsOnKeyDown, landmark) => {
+  const handleKeyDown = useCallback3((event) => {
+    const target = event.target;
+    if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
+      event.preventDefault();
+      const landmarks = Array.from(document.querySelectorAll(`[${landmarkAttr}]:not([inert])`)).map((el) => el.hasAttribute(landmarkAttr) ? parseInt(el.getAttribute(landmarkAttr)) : NaN).sort();
+      const l = landmarks.length;
+      const cursor = landmarks.indexOf(parseInt(target.getAttribute(landmarkAttr)));
+      const nextLandmark = landmarks[(cursor + l + (event.getModifierState("Shift") ? -1 : 1)) % l];
+      document.querySelector(`[${landmarkAttr}="${nextLandmark}"]`)?.focus();
+    }
+    propsOnKeyDown?.(event);
+  }, [
+    propsOnKeyDown
+  ]);
+  const focusableAttrs = useFocusableGroup2({
+    tabBehavior: "limited",
+    ignoreDefaultKeydown: {
+      Tab: true
+    }
+  });
+  return {
+    onKeyDown: handleKeyDown,
+    [landmarkAttr]: landmark,
+    tabIndex: 0,
+    ...focusableAttrs
+  };
+};
 var [MainProvider, useMainContext] = createContext8(MAIN_NAME, {
   resizing: false,
   navigationSidebarOpen: false,
   setNavigationSidebarOpen: (nextOpen) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 49,
+      L: 81,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1465,7 +1501,7 @@ var [MainProvider, useMainContext] = createContext8(MAIN_NAME, {
   setComplementarySidebarOpen: (nextOpen) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 54,
+      L: 86,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1556,6 +1592,14 @@ var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToD
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => setOpen(false)
   });
+  const handleKeyDown = useCallback3((event) => {
+    if (event.key === "Escape") {
+      event.target.closest("[data-tabster]")?.focus();
+    }
+    props.onKeyDown?.(event);
+  }, [
+    props.onKeyDown
+  ]);
   const Root3 = isLg ? Primitive9.div : DialogContent2;
   return /* @__PURE__ */ React20.createElement(DialogRoot2, {
     open,
@@ -1571,6 +1615,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToD
     "data-state": open ? "open" : "closed",
     "data-resizing": resizing ? "true" : "false",
     className: tx("main.sidebar", "main__sidebar", {}, classNames),
+    onKeyDown: handleKeyDown,
     ...!open && {
       inert: "true"
     },
@@ -1581,7 +1626,9 @@ var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToD
 });
 var MainNavigationSidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "0");
   return /* @__PURE__ */ React20.createElement(MainSidebar, {
+    ...mover,
     ...props,
     open: navigationSidebarOpen,
     setOpen: setNavigationSidebarOpen,
@@ -1593,7 +1640,9 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) =
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainComplementarySidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "2");
   return /* @__PURE__ */ React20.createElement(MainSidebar, {
+    ...mover,
     ...props,
     open: complementarySidebarOpen,
     setOpen: setComplementarySidebarOpen,
@@ -1603,16 +1652,22 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef17(({ asChild, classNames, bounce, children, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef17(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot10 : "main";
+  const Root3 = asChild ? Slot10 : role ? "div" : "main";
+  const mover = useLandmarkMover(props.onKeyDown, "1");
   return /* @__PURE__ */ React20.createElement(Root3, {
+    role,
+    ...handlesFocus && {
+      ...mover
+    },
     ...props,
     "data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
     "data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed",
     className: tx("main.content", "main", {
-      bounce
+      bounce,
+      handlesFocus
     }, classNames),
     ref: forwardedRef
   }, children);
@@ -1643,11 +1698,25 @@ var MainOverlay = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwar
 var MainNotch = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
-  return /* @__PURE__ */ React20.createElement("nav", {
+  const notchElement = useRef(null);
+  const ref = useComposedRefs(forwardedRef, notchElement);
+  const handleKeyDown = useCallback3((event) => {
+    switch (event.key) {
+      case "Escape":
+        props?.onKeyDown?.(event);
+        notchElement.current?.focus();
+    }
+  }, [
+    props?.onKeyDown
+  ]);
+  const mover = useLandmarkMover(handleKeyDown, "3");
+  return /* @__PURE__ */ React20.createElement("div", {
+    role: "toolbar",
+    ...mover,
     ...props,
     "data-nav-sidebar-state": navigationSidebarOpen ? "open" : "closed",
     className: tx("main.notch", "main__notch", {}, classNames),
-    ref: forwardedRef
+    ref
   });
 });
 var Main = {