@dxos/react-ui 0.8.0 → 0.8.1-main.013e445

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.0",
+  "version": "0.8.1-main.013e445",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,7 +25,7 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@fluentui/react-tabster": "9.23.3",
+    "@fluentui/react-tabster": "^9.24.2",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
     "@radix-ui/react-avatar": "1.1.3",
@@ -61,13 +61,13 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.0",
-    "@dxos/log": "0.8.0",
-    "@dxos/react-list": "0.8.0",
-    "@dxos/react-hooks": "0.8.0",
-    "@dxos/react-ui-types": "0.8.0",
-    "@dxos/util": "0.8.0",
-    "@dxos/react-input": "0.8.0"
+    "@dxos/debug": "0.8.1-main.013e445",
+    "@dxos/react-hooks": "0.8.1-main.013e445",
+    "@dxos/react-input": "0.8.1-main.013e445",
+    "@dxos/react-list": "0.8.1-main.013e445",
+    "@dxos/log": "0.8.1-main.013e445",
+    "@dxos/react-ui-types": "0.8.1-main.013e445",
+    "@dxos/util": "0.8.1-main.013e445"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -79,15 +79,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.0",
-    "@dxos/react-ui-theme": "0.8.0",
-    "@dxos/util": "0.8.0"
+    "@dxos/react-ui-theme": "0.8.1-main.013e445",
+    "@dxos/util": "0.8.1-main.013e445",
+    "@dxos/random": "0.8.1-main.013e445"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.0"
+    "@dxos/react-ui-theme": "0.8.1-main.013e445"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Lists/List.stories.tsx

@@ -199,7 +199,7 @@ export const Collapsible = {
 export const SelectableListbox = {
   render: () => {
     const [selectedId, setSelectedId] = useState<string>();
-    const domAttributes = useArrowNavigationGroup({ axis: 'vertical' });
+    const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'vertical' });
     const [items, _setItems] = useState(
       [...Array(12)].map((_, index) => ({
         id: `listItem-${index}`,
@@ -217,7 +217,7 @@ export const SelectableListbox = {
     };
 
     return (
-      <List selectable {...domAttributes}>
+      <List selectable {...arrowNavigationAttrs}>
         {items.map(({ id, text }) => (
           <ListItem.Root
             key={id}

package/src/components/Lists/Treegrid.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';
 import { createContextScope, type Scope } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
@@ -41,6 +41,7 @@ const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.div;
     const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'vertical', tabbable: false, circular: true });
+
     return (
       <Root
         role='treegrid'
@@ -97,6 +98,7 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
       circular: false,
       memorizeCurrent: false,
     });
+
     return (
       <TreegridRowProvider open={open} onOpenChange={onOpenChange} scope={__treegridRowScope}>
         <Root

package/src/components/Main/Main.tsx

@@ -2,9 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useFocusableGroup } from '@fluentui/react-tabster';
 import { createContext } from '@radix-ui/react-context';
-import { Root as DialogRoot, DialogContent } from '@radix-ui/react-dialog';
+import { Root as DialogRoot, DialogContent, DialogTitle } from '@radix-ui/react-dialog';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
@@ -70,8 +69,9 @@ const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKey
     },
     [propsOnKeyDown],
   );
-  const focusableAttrs = useFocusableGroup({ tabBehavior: 'limited', ignoreDefaultKeydown: { Tab: true } });
-  return { onKeyDown: handleKeyDown, [landmarkAttr]: landmark, tabIndex: 0, ...focusableAttrs };
+  const focusableGroupAttrs = window ? {} : { tabBehavior: 'limited', ignoreDefaultKeydown: { Tab: true } };
+
+  return { onKeyDown: handleKeyDown, [landmarkAttr]: landmark, tabIndex: 0, ...focusableGroupAttrs };
 };
 
 const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
@@ -91,6 +91,7 @@ const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME
 const useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
   const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } =
     useMainContext(consumerName);
+
   return {
     navigationSidebarState,
     setNavigationSidebarState,
@@ -221,8 +222,10 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
       [props.onKeyDown],
     );
     const Root = isLg ? Primitive.div : DialogContent;
+
     return (
       <DialogRoot open={state !== 'closed'} aria-label={toLocalizedString(label, t)} modal={false}>
+        {!isLg && <DialogTitle className='sr-only'>{toLocalizedString(label, t)}</DialogTitle>}
         <Root
           {...(!isLg && { forceMount: true, tabIndex: -1, onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus })}
           {...props}
@@ -246,6 +249,7 @@ type MainNavigationSidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
 const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarProps>((props, forwardedRef) => {
   const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, '0');
+
   return (
     <MainSidebar
       {...mover}
@@ -267,6 +271,7 @@ const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySid
   const { complementarySidebarState, setComplementarySidebarState, resizing } =
     useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, '2');
+
   return (
     <MainSidebar
       {...mover}