@dxos/react-ui 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/src/components/Main/Main.tsx

@@ -24,8 +24,8 @@ import React, {
 
 import { addEventListener } from '@dxos/async';
 import { log } from '@dxos/log';
-import { useDynamicRef, useForwardedRef, useMediaQuery, useViewportResize } from '@dxos/react-hooks';
-import { type MainStyleProps } from '@dxos/ui-theme';
+import { useForwardedRef, useMediaQuery } from '@dxos/react-hooks';
+import { type MainStyleProps, osTranslations } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -35,12 +35,12 @@ import { useSwipeToDismiss } from './useSwipeToDismiss';
 
 const MAIN_NAME = 'Main';
 const MAIN_ROOT_NAME = 'MainRoot';
+const MAIN_OVERLAY_NAME = 'MainOverlay';
 const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
 const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';
-const DRAWER_NAME = 'Drawer';
 
 const handleOpenAutoFocus = (event: Event) => {
-  !document.body.hasAttribute('data-is-keyboard') && event.preventDefault();
+  !document.body.hasAttribute('data-w-keyboard') && event.preventDefault();
 };
 
 //
@@ -84,47 +84,12 @@ const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKey
   };
 };
 
-// TODO(burdon): Better way to detect software keyboard on mobile?
-const isFullscreen = () => {
-  const isMobile = window.innerHeight <= 1000;
-  return window.visualViewport && isMobile ? window.visualViewport.height < 700 : false;
-};
-
-/**
- * Detects if drawer should be in full mode based on:
- * - Device is mobile (width)
- * - Visual viewport is constrained (keyboard visible)
- */
-const useDynamicDrawer = (consumerName: string) => {
-  const { drawerState, setDrawerState } = useSidebars(consumerName);
-  const drawersStateRef = useDynamicRef(drawerState);
-
-  const checkViewport = useCallback(() => {
-    if (window.visualViewport) {
-      document.documentElement.style.setProperty('--visual-viewport-height', `${window.visualViewport.height}px`);
-    }
-
-    if (drawersStateRef.current !== 'closed') {
-      setDrawerState(isFullscreen() ? 'full' : 'expanded');
-    }
-  }, [setDrawerState]);
-
-  // Check resize.
-  useViewportResize(checkViewport, [], 100);
-
-  // Check on window resize (for device orientation changes).
-  useEffect(() => addEventListener(window, 'resize', checkViewport), [checkViewport]);
-
-  return drawerState;
-};
-
 //
 // Context
 //
 
 // TODO(burdon): Define collapsed state.
 type SidebarState = 'expanded' | 'collapsed' | 'closed';
-type DrawerState = 'expanded' | 'full' | 'closed';
 
 type MainContextValue = {
   resizing: boolean;
@@ -136,10 +101,6 @@ type MainContextValue = {
   // Complementary
   complementarySidebarState: SidebarState;
   setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
-
-  // Drawer
-  drawerState: DrawerState;
-  setDrawerState: Dispatch<SetStateAction<DrawerState | undefined>>;
 };
 
 const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
@@ -154,21 +115,15 @@ const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME
   setComplementarySidebarState: (_nextState) => {
     log.warn('Not initialized');
   },
-
-  drawerState: 'closed',
-  setDrawerState: (_nextState) => {
-    log.warn('Not initialized');
-  },
 });
 
 const useSidebars = (consumerName: string) => {
   const {
     navigationSidebarState,
     setNavigationSidebarState,
+
     complementarySidebarState,
     setComplementarySidebarState,
-    drawerState,
-    setDrawerState,
   } = useMainContext(consumerName);
 
   return {
@@ -191,15 +146,6 @@ const useSidebars = (consumerName: string) => {
     openComplementarySidebar: useCallback(() => setComplementarySidebarState('expanded'), []),
     collapseComplementarySidebar: useCallback(() => setComplementarySidebarState('collapsed'), []),
     closeComplementarySidebar: useCallback(() => setComplementarySidebarState('closed'), []),
-
-    drawerState,
-    setDrawerState,
-    toggleDrawer: useCallback(
-      () => setDrawerState(drawerState === 'closed' ? (isFullscreen() ? 'full' : 'expanded') : 'closed'),
-      [drawerState, setDrawerState],
-    ),
-    openDrawer: useCallback(() => setDrawerState('expanded'), []),
-    closeDrawer: useCallback(() => setDrawerState('closed'), []),
   };
 };
 
@@ -215,10 +161,6 @@ type MainRootProps = PropsWithChildren<{
   complementarySidebarState?: SidebarState;
   defaultComplementarySidebarState?: SidebarState;
   onComplementarySidebarStateChange?: (nextState: SidebarState) => void;
-
-  drawerState?: DrawerState;
-  defaultDrawerState?: DrawerState;
-  onDrawerStateChange?: (nextState: DrawerState) => void;
 }>;
 
 const MainRoot = ({
@@ -230,10 +172,6 @@ const MainRoot = ({
   defaultComplementarySidebarState = 'closed',
   onComplementarySidebarStateChange,
 
-  drawerState: propsDrawerState,
-  defaultDrawerState = 'closed',
-  onDrawerStateChange,
-
   children,
   ...props
 }: MainRootProps) => {
@@ -250,11 +188,6 @@ const MainRoot = ({
       defaultProp: defaultComplementarySidebarState,
       onChange: onComplementarySidebarStateChange,
     });
-  const [drawerState = 'closed', setDrawerState] = useControllableState<DrawerState>({
-    prop: propsDrawerState,
-    defaultProp: defaultDrawerState,
-    onChange: onDrawerStateChange,
-  });
 
   const [resizing, setResizing] = useState(false);
   const resizeInterval = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -282,8 +215,6 @@ const MainRoot = ({
         setNavigationSidebarState,
         complementarySidebarState,
         setComplementarySidebarState,
-        drawerState,
-        setDrawerState,
       }}
       resizing={resizing}
     >
@@ -294,6 +225,42 @@ const MainRoot = ({
 
 MainRoot.displayName = MAIN_ROOT_NAME;
 
+//
+// Overlay
+//
+
+type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.div>, 'children' | 'onClick'>>;
+
+const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery('lg');
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } =
+    useMainContext(MAIN_OVERLAY_NAME);
+  const { tx } = useThemeContext();
+  return (
+    <div
+      {...props}
+      onClick={() => {
+        setNavigationSidebarState('collapsed');
+        setComplementarySidebarState('collapsed');
+      }}
+      className={tx(
+        'main.overlay',
+        {
+          isLg,
+          inlineStartSidebarOpen: navigationSidebarState,
+          inlineEndSidebarOpen: complementarySidebarState,
+        },
+        classNames,
+      )}
+      data-state={navigationSidebarState === 'expanded' || complementarySidebarState === 'expanded' ? 'open' : 'closed'}
+      aria-hidden='true'
+      ref={forwardedRef}
+    />
+  );
+});
+
+MainOverlay.displayName = MAIN_OVERLAY_NAME;
+
 //
 // Sidebar
 //
@@ -303,7 +270,7 @@ type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogConte
   state?: SidebarState;
   resizing?: boolean;
   onStateChange?: (nextState: SidebarState) => void;
-  side: 'inline-start' | 'inline-end';
+  side: 'w-start' | 'w-end';
   label: Label;
 };
 
@@ -314,7 +281,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   ) => {
     const [isLg] = useMediaQuery('lg');
     const { tx } = useThemeContext();
-    const { t } = useTranslation();
+    const { t } = useTranslation(osTranslations);
     const ref = useForwardedRef(forwardedRef);
     const noopRef = useRef(null);
 
@@ -346,10 +313,10 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
           {...(!isLg && { forceMount: true, tabIndex: -1, onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus })}
           {...(state === 'closed' && { inert: true })}
           {...props}
-          data-side={side === 'inline-end' ? 'ie' : 'is'}
+          data-side={side === 'w-end' ? 'ie' : 'is'}
           data-state={state}
           data-resizing={resizing ? 'true' : 'false'}
-          className={tx('main.sidebar', 'main__sidebar', {}, classNames)}
+          className={tx('main.sidebar', {}, classNames)}
           onKeyDownCapture={handleKeyDown}
           ref={ref}
         >
@@ -377,7 +344,7 @@ const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarPr
       state={navigationSidebarState}
       onStateChange={setNavigationSidebarState}
       resizing={resizing}
-      side='inline-start'
+      side='w-start'
       ref={forwardedRef}
     />
   );
@@ -403,7 +370,7 @@ const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySid
       state={complementarySidebarState}
       onStateChange={setComplementarySidebarState}
       resizing={resizing}
-      side='inline-end'
+      side='w-end'
       ref={forwardedRef}
     />
   );
@@ -411,86 +378,6 @@ const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySid
 
 MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
 
-//
-// Drawer
-//
-
-type MainDrawerProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContent>> & {
-  swipeToDismiss?: boolean;
-  state?: DrawerState;
-  resizing?: boolean;
-  onStateChange?: (nextState: DrawerState) => void;
-  label: Label;
-};
-
-const MainDrawer = forwardRef<HTMLDivElement, MainDrawerProps>(
-  (
-    { 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);
-
-    // TODO(burdon): Implement vertical swipe-to-dismiss for drawer.
-    useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
-      onDismiss: () => onStateChange?.('closed'),
-    });
-
-    const handleKeyDown = useCallback(
-      (event: KeyboardEvent<HTMLDivElement>) => {
-        const focusGroupParent = (event.target as HTMLElement).closest('[data-tabster]');
-        if (event.key === 'Escape' && focusGroupParent) {
-          event.preventDefault();
-          event.stopPropagation();
-          (focusGroupParent as HTMLElement).focus();
-        }
-        props.onKeyDown?.(event);
-      },
-      [props.onKeyDown],
-    );
-
-    return (
-      <Primitive.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={ref}
-      >
-        {children}
-      </Primitive.div>
-    );
-  },
-);
-
-type MainDrawerRootProps = Omit<MainDrawerProps, 'state' | 'resizing' | 'onStateChange'>;
-
-const MainDrawerRoot = forwardRef<HTMLDivElement, MainDrawerRootProps>((props, forwardedRef) => {
-  const { drawerState, setDrawerState, resizing } = useMainContext(DRAWER_NAME);
-  const mover = useLandmarkMover(props.onKeyDown, '3');
-
-  return (
-    <MainDrawer
-      {...mover}
-      {...props}
-      resizing={resizing}
-      state={drawerState}
-      onStateChange={setDrawerState}
-      ref={forwardedRef}
-    />
-  );
-});
-
-MainDrawerRoot.displayName = DRAWER_NAME;
-
 //
 // Content
 //
@@ -504,79 +391,42 @@ type MainContentProps = ThemedClassName<
 
 const MainContent = forwardRef<HTMLDivElement, MainContentProps>(
   ({ asChild, classNames, bounce, handlesFocus, children, role, ...props }: MainContentProps, forwardedRef) => {
-    const { navigationSidebarState, complementarySidebarState, drawerState } = useMainContext(MAIN_NAME);
+    const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : role ? 'div' : 'main';
+    const Comp = asChild ? Slot : role ? Primitive.div : 'main';
     const mover = useLandmarkMover(props.onKeyDown, '1');
 
     return (
-      <Root
-        role={role}
+      <Comp
         {...(handlesFocus && { ...mover })}
         {...props}
-        data-sidebar-inline-start-state={navigationSidebarState}
-        data-sidebar-inline-end-state={complementarySidebarState}
-        data-drawer-state={drawerState}
+        role={role}
+        data-sidebar-left-state={navigationSidebarState}
+        data-sidebar-right-state={complementarySidebarState}
         data-handles-focus={handlesFocus}
-        className={tx('main.content', 'main', { bounce, handlesFocus }, classNames)}
+        className={tx('main.content', { bounce, handlesFocus }, classNames)}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
 
 MainContent.displayName = MAIN_NAME;
 
-type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.div>, 'children' | 'onClick'>>;
-
-const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames, ...props }, forwardedRef) => {
-  const [isLg] = useMediaQuery('lg');
-  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } =
-    useMainContext(MAIN_NAME);
-  const { tx } = useThemeContext();
-  return (
-    <div
-      {...props}
-      onClick={() => {
-        setNavigationSidebarState('collapsed');
-        setComplementarySidebarState('collapsed');
-      }}
-      className={tx(
-        'main.overlay',
-        'main__overlay',
-        {
-          isLg,
-          inlineStartSidebarOpen: navigationSidebarState,
-          inlineEndSidebarOpen: complementarySidebarState,
-        },
-        classNames,
-      )}
-      data-state={navigationSidebarState === 'expanded' || complementarySidebarState === 'expanded' ? 'open' : 'closed'}
-      aria-hidden='true'
-      ref={forwardedRef}
-    />
-  );
-});
+//
+// Main
+//
 
 export const Main = {
   Root: MainRoot,
-  Content: MainContent,
   Overlay: MainOverlay,
+  Content: MainContent,
   NavigationSidebar: MainNavigationSidebar,
   ComplementarySidebar: MainComplementarySidebar,
-  Drawer: MainDrawerRoot,
 };
 
-export { useMainContext, useSidebars, useLandmarkMover, useDynamicDrawer };
+export { useMainContext, useSidebars, useLandmarkMover };
 
-export type {
-  MainRootProps,
-  MainContentProps,
-  MainOverlayProps,
-  MainNavigationSidebarProps,
-  MainDrawerRootProps,
-  SidebarState,
-  DrawerState,
-};
+export type { MainRootProps, MainOverlayProps, MainContentProps, MainNavigationSidebarProps, SidebarState };

package/src/components/Menu/ContextMenu.stories.tsx

@@ -92,10 +92,10 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/ContextMenu',
+  title: 'ui/react-ui-core/components/ContextMenu',
   component: ContextMenu.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Menu/ContextMenu.tsx

@@ -36,7 +36,7 @@ const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
         {...props}
         data-arrow-keys='up down'
         collisionPadding={safeCollisionPadding}
-        className={tx('menu.content', 'menu', { elevation }, classNames)}
+        className={tx('menu.content', { elevation }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -52,11 +52,11 @@ type ContextMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Pri
 const ContextMenuViewport = forwardRef<HTMLDivElement, ContextMenuViewportProps>(
   ({ classNames, asChild, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+      <Comp {...props} className={tx('menu.viewport', {}, classNames)} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -65,13 +65,7 @@ type ContextMenuArrowProps = ThemedClassName<ContextMenuPrimitive.ContextMenuArr
 
 const ContextMenuArrow = forwardRef<SVGSVGElement, ContextMenuArrowProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return (
-    <ContextMenuPrimitive.Arrow
-      {...props}
-      className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
-      ref={forwardedRef}
-    />
-  );
+  return <ContextMenuPrimitive.Arrow {...props} className={tx('menu.arrow', {}, classNames)} ref={forwardedRef} />;
 });
 
 type ContextMenuGroupProps = ContextMenuPrimitive.ContextMenuGroupProps;
@@ -87,13 +81,7 @@ type ContextMenuItemProps = ThemedClassName<ContextMenuPrimitive.ContextMenuItem
 const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
   ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
     const { tx } = useThemeContext();
-    return (
-      <ContextMenuPrimitive.Item
-        {...props}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    return <ContextMenuPrimitive.Item {...props} className={tx('menu.item', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -103,11 +91,7 @@ const ContextMenuCheckboxItem = forwardRef<HTMLDivElement, ContextMenuCheckboxIt
   ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.CheckboxItem
-        {...props}
-        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.CheckboxItem {...props} className={tx('menu.item', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -118,11 +102,7 @@ const ContextMenuSeparator = forwardRef<HTMLDivElement, ContextMenuSeparatorProp
   ({ classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.Separator
-        {...props}
-        className={tx('menu.separator', 'menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.Separator {...props} className={tx('menu.separator', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -133,11 +113,7 @@ const ContextMenuGroupLabel = forwardRef<HTMLDivElement, ContextMenuGroupLabelPr
   ({ classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.Label
-        {...props}
-        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.Label {...props} className={tx('menu.groupLabel', {}, classNames)} ref={forwardedRef} />
     );
   },
 );

package/src/components/Menu/DropdownMenu.stories.tsx

@@ -92,10 +92,10 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/DropdownMenu',
+  title: 'ui/react-ui-core/components/DropdownMenu',
   component: DropdownMenu.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;