@dxos/react-ui 0.7.5-staging.b81e783 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.7.5-staging.b81e783",
+  "version": "0.8.0",
   "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",
@@ -61,13 +61,13 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.7.5-staging.b81e783",
-    "@dxos/log": "0.7.5-staging.b81e783",
-    "@dxos/react-hooks": "0.7.5-staging.b81e783",
-    "@dxos/react-list": "0.7.5-staging.b81e783",
-    "@dxos/util": "0.7.5-staging.b81e783",
-    "@dxos/react-input": "0.7.5-staging.b81e783",
-    "@dxos/react-ui-types": "0.7.5-staging.b81e783"
+    "@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"
   },
   "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/react-ui-theme": "0.7.5-staging.b81e783",
-    "@dxos/util": "0.7.5-staging.b81e783",
-    "@dxos/random": "0.7.5-staging.b81e783"
+    "@dxos/random": "0.8.0",
+    "@dxos/react-ui-theme": "0.8.0",
+    "@dxos/util": "0.8.0"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.5-staging.b81e783"
+    "@dxos/react-ui-theme": "0.8.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Main/Main.stories.tsx

@@ -26,7 +26,7 @@ const StoryMain = (_args: StoryMainArgs) => {
   return (
     <Main.Root>
       <Main.Overlay />
-      <Main.NavigationSidebar classNames='p-4'>
+      <Main.NavigationSidebar label='Navigation' classNames='p-4'>
         <p>Navigation sidebar content, hi!</p>
         <NavigationSidebarToggle />
       </Main.NavigationSidebar>
@@ -37,7 +37,7 @@ const StoryMain = (_args: StoryMainArgs) => {
           <NavigationSidebarToggle />
         </div>
       </Main.Content>
-      <Main.ComplementarySidebar classNames='p-4'>
+      <Main.ComplementarySidebar label='Complementary content' classNames='p-4'>
         <p>Complementary sidebar content, hello!</p>
         <ComplementarySidebarToggle />
       </Main.ComplementarySidebar>

package/src/components/Main/Main.tsx

@@ -28,6 +28,7 @@ import { useMediaQuery, useForwardedRef } from '@dxos/react-hooks';
 import { useSwipeToDismiss } from './useSwipeToDismiss';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { type Label, toLocalizedString, useTranslation } from '../ThemeProvider';
 
 const MAIN_ROOT_NAME = 'MainRoot';
 const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
@@ -194,15 +195,17 @@ type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogConte
   resizing?: boolean;
   onStateChange?: (nextState: SidebarState) => void;
   side: 'inline-start' | 'inline-end';
+  label: Label;
 };
 
 const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   (
-    { classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, ...props },
+    { classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props },
     forwardedRef,
   ) => {
     const [isLg] = useMediaQuery('lg', { ssr: false });
     const { tx } = useThemeContext();
+    const { t } = useTranslation();
     const ref = useForwardedRef(forwardedRef);
     const noopRef = useRef(null);
     useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
@@ -219,7 +222,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
     );
     const Root = isLg ? Primitive.div : DialogContent;
     return (
-      <DialogRoot open={state !== 'closed'} modal={false}>
+      <DialogRoot open={state !== 'closed'} aria-label={toLocalizedString(label, t)} modal={false}>
         <Root
           {...(!isLg && { forceMount: true, tabIndex: -1, onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus })}
           {...props}