@dxos/react-ui 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/components/List/List.tsx

@@ -23,7 +23,7 @@ import {
   useListContext,
   useListItemContext,
 } from '@dxos/react-list';
-import { type Density } from '@dxos/react-ui-types';
+import { type Density } from '@dxos/ui-types';
 
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -40,7 +40,7 @@ const List = forwardRef<HTMLOListElement, ListProps>(({ classNames, children, ..
 
   return (
     <DensityProvider density={density}>
-      <ListPrimitive {...props} className={tx('list.root', 'list', {}, classNames)} ref={forwardedRef}>
+      <ListPrimitive {...props} className={tx('list.root', {}, classNames)} ref={forwardedRef}>
         {children}
       </ListPrimitive>
     </DensityProvider>
@@ -58,7 +58,7 @@ const ListItemEndcap = forwardRef<HTMLDivElement, ListItemEndcapProps>(
       <Root
         {...(!asChild && { role: 'none' })}
         {...props}
-        className={tx('list.item.endcap', 'list__listItem__endcap', { density }, classNames)}
+        className={tx('list.item.endcap', { density }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -73,13 +73,7 @@ const MockListItemOpenTrigger = ({
 }: ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return (
-    <div
-      role='none'
-      {...props}
-      className={tx('list.item.openTrigger', 'list__listItem__openTrigger--mock', { density }, classNames)}
-    />
-  );
+  return <div role='none' {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
 };
 
 type ListItemHeadingProps = ThemedClassName<ListPrimitiveItemHeadingProps>;
@@ -91,7 +85,7 @@ const ListItemHeading = forwardRef<HTMLParagraphElement, ListItemHeadingProps>(
     return (
       <ListPrimitiveItemHeading
         {...props}
-        className={tx('list.item.heading', 'list__listItem__heading', { density }, classNames)}
+        className={tx('list.item.heading', { density }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -110,14 +104,14 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
     return (
       <ListPrimitiveItemOpenTrigger
         {...props}
-        className={tx('list.item.openTrigger', 'list__listItem__openTrigger', { density }, classNames)}
+        className={tx('list.item.openTrigger', { density }, classNames)}
         ref={forwardedRef}
       >
         {children || (
           <Icon
             size={3}
             icon={open ? 'ph--caret-down--bold' : 'ph--caret-right--bold'}
-            classNames={tx('list.item.openTriggerIcon', 'list__listItem__openTrigger__icon', {})}
+            classNames={tx('list.item.openTriggerIcon', {})}
           />
         )}
       </ListPrimitiveItemOpenTrigger>
@@ -134,7 +128,7 @@ const ListItemRoot = forwardRef<HTMLLIElement, ListItemRootProps>(
     return (
       <ListPrimitiveItem
         {...props}
-        className={tx('list.item.root', 'list__listItem', { density, collapsible: props.collapsible }, classNames)}
+        className={tx('list.item.root', { density, collapsible: props.collapsible }, classNames)}
         ref={forwardedRef}
       >
         {children}

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

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

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

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

package/src/components/List/Treegrid.tsx

@@ -97,10 +97,10 @@ const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
     return (
       <Root
         role='treegrid'
-        onKeyDown={handleKeyDown}
         {...props}
-        className={tx('treegrid.root', 'treegrid', {}, classNames)}
+        className={tx('treegrid.root', {}, classNames)}
         style={{ ...style, gridTemplateColumns }}
+        onKeyDown={handleKeyDown}
         ref={forwardedRef}
       >
         {children}
@@ -149,7 +149,7 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
         <Root
           role='row'
           aria-level={level}
-          className={tx('treegrid.row', 'treegrid__row', { level }, classNames)}
+          className={tx('treegrid.row', { level }, classNames)}
           {...(parentOf && { 'aria-expanded': open, 'aria-owns': parentOf })}
           {...props}
           id={id}
@@ -168,12 +168,7 @@ const TreegridCell = forwardRef<HTMLDivElement, TreegridCellProps>(
   ({ classNames, children, indent, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <div
-        role='gridcell'
-        className={tx('treegrid.cell', 'treegrid__cell', { indent }, classNames)}
-        {...props}
-        ref={forwardedRef}
-      >
+      <div role='gridcell' className={tx('treegrid.cell', { indent }, classNames)} {...props} ref={forwardedRef}>
         {children}
       </div>
     );

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

@@ -5,51 +5,72 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '../../testing';
-import { Button } from '../Button';
+import { withLayout, withTheme } from '../../testing';
+import { IconButton } from '../Button';
+import { Toolbar } from '../Toolbar';
 
 import { Main, useSidebars } from './Main';
 
 type StoryMainArgs = {};
 
-const NavigationSidebarToggle = () => {
+const NavigationSidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleNavigationSidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleNavigationSidebar}>Toggle navigation sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-left--regular' : 'ph--caret-right--regular'}
+      iconOnly
+      label='Toggle navigation sidebar'
+      onClick={toggleNavigationSidebar}
+    />
+  );
 };
 
-const ComplementarySidebarToggle = () => {
+const ComplementarySidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleComplementarySidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleComplementarySidebar}>Toggle complementary sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-right--regular' : 'ph--caret-left--regular'}
+      iconOnly
+      label='Toggle complementary sidebar'
+      onClick={toggleComplementarySidebar}
+    />
+  );
 };
 
 const DefaultStory = (_args: StoryMainArgs) => {
   return (
-    <Main.Root>
+    <Main.Root defaultComplementarySidebarState='closed' defaultNavigationSidebarState='closed'>
       <Main.Overlay />
-      <Main.NavigationSidebar label='Navigation' classNames='p-4'>
-        <p>Navigation sidebar content, hi!</p>
-        <NavigationSidebarToggle />
+      <Main.NavigationSidebar label='Navigation'>
+        <Toolbar.Root>
+          <h1>Navigation</h1>
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <NavigationSidebarToggle close />
+        </Toolbar.Root>
       </Main.NavigationSidebar>
-      <Main.Content>
-        <div role='group' className='m-2 p-4 bg-neutral-50 dark:bg-neutral-950 rounded space-y-2'>
-          <ComplementarySidebarToggle />
-          <p>Main content, hello!</p>
+      <Main.Content classNames='is-full'>
+        <Toolbar.Root>
           <NavigationSidebarToggle />
-        </div>
+          <div className='flex items-center grow justify-center'>Main</div>
+          <ComplementarySidebarToggle />
+        </Toolbar.Root>
       </Main.Content>
-      <Main.ComplementarySidebar label='Complementary content' classNames='p-4'>
-        <p>Complementary sidebar content, hello!</p>
-        <ComplementarySidebarToggle />
+      <Main.ComplementarySidebar label='Complementary'>
+        <Toolbar.Root>
+          <ComplementarySidebarToggle close />
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <h1>Complementary</h1>
+        </Toolbar.Root>
       </Main.ComplementarySidebar>
     </Main.Root>
   );
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Main',
+  title: 'ui/react-ui-core/components/Main',
   component: Main.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     chromatic: {

package/src/components/Main/Main.tsx

@@ -22,8 +22,10 @@ import React, {
   useState,
 } from 'react';
 
+import { addEventListener } from '@dxos/async';
 import { log } from '@dxos/log';
 import { useForwardedRef, useMediaQuery } from '@dxos/react-hooks';
+import { type MainStyleProps } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -33,9 +35,17 @@ 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 GENERIC_CONSUMER_NAME = 'GenericConsumer';
+
+const handleOpenAutoFocus = (event: Event) => {
+  !document.body.hasAttribute('data-is-keyboard') && event.preventDefault();
+};
+
+//
+// Landmark
+//
 
 const landmarkAttr = 'data-main-landmark';
 
@@ -67,40 +77,54 @@ const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKey
   const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited', ignoreDefaultKeydown: { Tab: true } });
 
   return {
-    onKeyDown: handleKeyDown,
     [landmarkAttr]: landmark,
     tabIndex: 0,
+    onKeyDown: handleKeyDown,
     ...focusableGroupAttrs,
   };
 };
 
+//
+// Context
+//
+
+// TODO(burdon): Define collapsed state.
 type SidebarState = 'expanded' | 'collapsed' | 'closed';
 
 type MainContextValue = {
   resizing: boolean;
+
+  // Navigation
   navigationSidebarState: SidebarState;
   setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
+
+  // Complementary
   complementarySidebarState: SidebarState;
   setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
 };
 
 const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
   resizing: false,
+
   navigationSidebarState: 'closed',
   setNavigationSidebarState: (_nextState) => {
-    // TODO(burdon): Standardize with other context missing errors using raise.
-    log.warn('Attempt to set sidebar state without initializing `MainRoot`');
+    log.warn('Not initialized');
   },
+
   complementarySidebarState: 'closed',
   setComplementarySidebarState: (_nextState) => {
-    // TODO(burdon): Standardize with other context missing errors using raise.
-    log.warn('Attempt to set sidebar state without initializing `MainRoot`');
+    log.warn('Not initialized');
   },
 });
 
-const useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } =
-    useMainContext(consumerName);
+const useSidebars = (consumerName: string) => {
+  const {
+    navigationSidebarState,
+    setNavigationSidebarState,
+
+    complementarySidebarState,
+    setComplementarySidebarState,
+  } = useMainContext(consumerName);
 
   return {
     navigationSidebarState,
@@ -112,6 +136,7 @@ const useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
     openNavigationSidebar: useCallback(() => setNavigationSidebarState('expanded'), []),
     collapseNavigationSidebar: useCallback(() => setNavigationSidebarState('collapsed'), []),
     closeNavigationSidebar: useCallback(() => setNavigationSidebarState('closed'), []),
+
     complementarySidebarState,
     setComplementarySidebarState,
     toggleComplementarySidebar: useCallback(
@@ -124,24 +149,29 @@ const useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
   };
 };
 
+//
+// Root
+//
+
 type MainRootProps = PropsWithChildren<{
   navigationSidebarState?: SidebarState;
   defaultNavigationSidebarState?: SidebarState;
   onNavigationSidebarStateChange?: (nextState: SidebarState) => void;
+
   complementarySidebarState?: SidebarState;
   defaultComplementarySidebarState?: SidebarState;
   onComplementarySidebarStateChange?: (nextState: SidebarState) => void;
 }>;
 
-const resizeDebounce = 3000;
-
 const MainRoot = ({
   navigationSidebarState: propsNavigationSidebarState,
-  defaultNavigationSidebarState,
+  defaultNavigationSidebarState = 'closed',
   onNavigationSidebarStateChange,
+
   complementarySidebarState: propsComplementarySidebarState,
-  defaultComplementarySidebarState,
+  defaultComplementarySidebarState = 'closed',
   onComplementarySidebarStateChange,
+
   children,
   ...props
 }: MainRootProps) => {
@@ -161,22 +191,21 @@ const MainRoot = ({
 
   const [resizing, setResizing] = useState(false);
   const resizeInterval = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(
+    () =>
+      addEventListener(window, 'resize', () => {
+        setResizing(true);
+        if (resizeInterval.current) {
+          clearTimeout(resizeInterval.current);
+        }
 
-  const handleResize = useCallback(() => {
-    setResizing(true);
-    if (resizeInterval.current) {
-      clearTimeout(resizeInterval.current);
-    }
-    resizeInterval.current = setTimeout(() => {
-      setResizing(false);
-      resizeInterval.current = null;
-    }, resizeDebounce);
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [handleResize]);
+        resizeInterval.current = setTimeout(() => {
+          setResizing(false);
+          resizeInterval.current = null;
+        }, 3_000);
+      }),
+    [],
+  );
 
   return (
     <MainProvider
@@ -196,9 +225,45 @@ const MainRoot = ({
 
 MainRoot.displayName = MAIN_ROOT_NAME;
 
-const handleOpenAutoFocus = (event: Event) => {
-  !document.body.hasAttribute('data-is-keyboard') && event.preventDefault();
-};
+//
+// 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
+//
 
 type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContent>> & {
   swipeToDismiss?: boolean;
@@ -219,9 +284,11 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
     const { t } = useTranslation();
     const ref = useForwardedRef(forwardedRef);
     const noopRef = useRef(null);
+
     useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
       onDismiss: () => onStateChange?.('closed'),
     });
+
     // NOTE(thure): This is a workaround for something further down the tree grabbing focus on Escape. Adding this
     //   intervention to `Tabs.Root` or `Tabs.Tabpenel` instances is somehow ineffectual.
     const handleKeyDown = useCallback(
@@ -236,6 +303,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
       },
       [props.onKeyDown],
     );
+
     const Root = isLg ? Primitive.div : DialogContent;
 
     return (
@@ -243,13 +311,13 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
         {!isLg && <DialogTitle className='sr-only'>{toLocalizedString(label, t)}</DialogTitle>}
         <Root
           {...(!isLg && { forceMount: true, 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)}
+          className={tx('main.sidebar', {}, classNames)}
           onKeyDownCapture={handleKeyDown}
-          {...(state === 'closed' && { inert: true })}
           ref={ref}
         >
           {children}
@@ -259,6 +327,10 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   },
 );
 
+//
+// Navigation Sidebar
+//
+
 type MainNavigationSidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
 
 const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarProps>((props, forwardedRef) => {
@@ -280,6 +352,10 @@ const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarPr
 
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 
+//
+// Complementary Sidebar
+//
+
 type MainComplementarySidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
 
 const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySidebarProps>((props, forwardedRef) => {
@@ -300,20 +376,24 @@ const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySid
   );
 });
 
-MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
 
-type MainProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
-  asChild?: boolean;
-  bounce?: boolean;
-  handlesFocus?: boolean;
-};
+//
+// Content
+//
+
+type MainContentProps = ThemedClassName<
+  ComponentPropsWithRef<typeof Primitive.div> &
+    MainStyleProps & {
+      asChild?: boolean;
+    }
+>;
 
-const MainContent = forwardRef<HTMLDivElement, MainProps>(
-  ({ asChild, classNames, bounce, handlesFocus, children, role, ...props }: MainProps, forwardedRef) => {
+const MainContent = forwardRef<HTMLDivElement, MainContentProps>(
+  ({ asChild, classNames, bounce, handlesFocus, children, role, ...props }: MainContentProps, forwardedRef) => {
     const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : role ? 'div' : 'main';
-
     const mover = useLandmarkMover(props.onKeyDown, '1');
 
     return (
@@ -324,7 +404,7 @@ const MainContent = forwardRef<HTMLDivElement, MainProps>(
         data-sidebar-inline-start-state={navigationSidebarState}
         data-sidebar-inline-end-state={complementarySidebarState}
         data-handles-focus={handlesFocus}
-        className={tx('main.content', 'main', { bounce, handlesFocus }, classNames)}
+        className={tx('main.content', { bounce, handlesFocus }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -335,41 +415,18 @@ const MainContent = forwardRef<HTMLDivElement, MainProps>(
 
 MainContent.displayName = MAIN_NAME;
 
-type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.div>, 'children'>>;
-
-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
-      onClick={() => {
-        setNavigationSidebarState('collapsed');
-        setComplementarySidebarState('collapsed');
-      }}
-      {...props}
-      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,
 };
 
 export { useMainContext, useSidebars, useLandmarkMover };
 
-export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps, SidebarState };
+export type { MainRootProps, MainOverlayProps, MainContentProps, MainNavigationSidebarProps, SidebarState };

package/src/components/{Menus → 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;