@dxos/react-ui 0.8.4-main.e8ec1fe → 0.8.4-main.ef1bc66f44

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';
@@ -35,7 +37,14 @@ const MAIN_NAME = 'Main';
 const MAIN_ROOT_NAME = 'MainRoot';
 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 +76,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 +135,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 +148,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 +190,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 +224,9 @@ const MainRoot = ({
 
 MainRoot.displayName = MAIN_ROOT_NAME;
 
-const handleOpenAutoFocus = (event: Event) => {
-  !document.body.hasAttribute('data-is-keyboard') && event.preventDefault();
-};
+//
+// Sidebar
+//
 
 type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContent>> & {
   swipeToDismiss?: boolean;
@@ -219,9 +247,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 +266,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
       },
       [props.onKeyDown],
     );
+
     const Root = isLg ? Primitive.div : DialogContent;
 
     return (
@@ -243,13 +274,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)}
           onKeyDownCapture={handleKeyDown}
-          {...(state === 'closed' && { inert: true })}
           ref={ref}
         >
           {children}
@@ -259,6 +290,10 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   },
 );
 
+//
+// Navigation Sidebar
+//
+
 type MainNavigationSidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
 
 const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarProps>((props, forwardedRef) => {
@@ -280,6 +315,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 +339,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 (
@@ -335,7 +378,7 @@ const MainContent = forwardRef<HTMLDivElement, MainProps>(
 
 MainContent.displayName = MAIN_NAME;
 
-type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.div>, 'children'>>;
+type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.div>, 'children' | 'onClick'>>;
 
 const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery('lg');
@@ -344,15 +387,19 @@ const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames,
   const { tx } = useThemeContext();
   return (
     <div
+      {...props}
       onClick={() => {
         setNavigationSidebarState('collapsed');
         setComplementarySidebarState('collapsed');
       }}
-      {...props}
       className={tx(
         'main.overlay',
         'main__overlay',
-        { isLg, inlineStartSidebarOpen: navigationSidebarState, inlineEndSidebarOpen: complementarySidebarState },
+        {
+          isLg,
+          inlineStartSidebarOpen: navigationSidebarState,
+          inlineEndSidebarOpen: complementarySidebarState,
+        },
         classNames,
       )}
       data-state={navigationSidebarState === 'expanded' || complementarySidebarState === 'expanded' ? 'open' : 'closed'}
@@ -372,4 +419,4 @@ export const Main = {
 
 export { useMainContext, useSidebars, useLandmarkMover };
 
-export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps, SidebarState };
+export type { MainRootProps, MainContentProps, MainOverlayProps, 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;

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

package/src/components/{Menus → Menu}/DropdownMenu.tsx

@@ -35,15 +35,15 @@ import { type ThemedClassName } from '../../util';
 
 type Direction = 'ltr' | 'rtl';
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenu
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenu
+//
 
 const DROPDOWN_MENU_NAME = 'DropdownMenu';
 
 type ScopedProps<P> = P & { __scopeDropdownMenu?: Scope };
 const [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [createMenuScope]);
-const useMenuScope = createMenuScope();
+const useMenuScope: (scope?: Scope) => any = createMenuScope();
 
 type DropdownMenuContextValue = {
   triggerId: string;
@@ -97,9 +97,9 @@ const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<Dropdown
 
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuTrigger
+//
 
 const TRIGGER_NAME = 'DropdownMenuTrigger';
 
@@ -162,9 +162,9 @@ const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuT
 
 DropdownMenuTrigger.displayName = TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuVirtualTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuVirtualTrigger
+//
 
 const VIRTUAL_TRIGGER_NAME = 'DropdownMenuVirtualTrigger';
 
@@ -186,9 +186,9 @@ const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTrigge
 
 DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuPortal
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuPortal
+//
 
 const PORTAL_NAME = 'DropdownMenuPortal';
 
@@ -203,9 +203,9 @@ const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: ScopedProps<Drop
 
 DropdownMenuPortal.displayName = PORTAL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuViewport
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuViewport
+//
 
 type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   asChild?: boolean;
@@ -223,9 +223,9 @@ const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProp
   },
 );
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuContent
+//
 
 const CONTENT_NAME = 'DropdownMenuContent';
 
@@ -302,9 +302,9 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
 
 DropdownMenuContent.displayName = CONTENT_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuGroup
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuGroup
+//
 
 const GROUP_NAME = 'DropdownMenuGroup';
 
@@ -322,9 +322,9 @@ const DropdownMenuGroup = forwardRef<DropdownMenuGroupElement, DropdownMenuGroup
 
 DropdownMenuGroup.displayName = GROUP_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuLabel
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuLabel
+//
 
 const LABEL_NAME = 'DropdownMenuLabel';
 
@@ -350,9 +350,9 @@ const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenu
 
 DropdownMenuGroupLabel.displayName = LABEL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuItem
+//
 
 const ITEM_NAME = 'DropdownMenuItem';
 
@@ -378,9 +378,9 @@ const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemPro
 
 DropdownMenuItem.displayName = ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuCheckboxItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuCheckboxItem
+//
 
 const CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
 
@@ -406,9 +406,9 @@ const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, Dro
 
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuRadioGroup
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuRadioGroup
+//
 
 const RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
 
@@ -426,9 +426,9 @@ const DropdownMenuRadioGroup = forwardRef<DropdownMenuRadioGroupElement, Dropdow
 
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuRadioItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuRadioItem
+//
 
 const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
 
@@ -454,9 +454,9 @@ const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownM
 
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuItemIndicator
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuItemIndicator
+//
 
 const INDICATOR_NAME = 'DropdownMenuItemIndicator';
 
@@ -474,9 +474,9 @@ const DropdownMenuItemIndicator = forwardRef<DropdownMenuItemIndicatorElement, D
 
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSeparator
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSeparator
+//
 
 const SEPARATOR_NAME = 'DropdownMenuSeparator';
 
@@ -502,9 +502,9 @@ const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownM
 
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuArrow
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuArrow
+//
 
 const ARROW_NAME = 'DropdownMenuArrow';
 
@@ -530,9 +530,9 @@ const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrow
 
 DropdownMenuArrow.displayName = ARROW_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSub
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSub
+//
 
 interface DropdownMenuSubProps {
   children?: ReactNode;
@@ -557,9 +557,9 @@ const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMe
   );
 };
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSubTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSubTrigger
+//
 
 const SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
 
@@ -577,9 +577,9 @@ const DropdownMenuSubTrigger = forwardRef<DropdownMenuSubTriggerElement, Dropdow
 
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSubContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSubContent
+//
 
 const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
 
@@ -615,7 +615,9 @@ const DropdownMenuSubContent = forwardRef<DropdownMenuSubContentElement, Dropdow
 
 DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
 
-/* ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenu
+//
 
 export const DropdownMenu = {
   Root: DropdownMenuRoot,
@@ -638,7 +640,9 @@ export const DropdownMenu = {
   SubContent: DropdownMenuSubContent,
 };
 
-const useDropdownMenuMenuScope = useMenuScope;
+type DropdownMenuScope = Scope;
+
+const useDropdownMenuMenuScope: (scope?: DropdownMenuScope) => any = useMenuScope;
 
 export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
 

package/src/components/Message/Message.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { type MessageValence } from '@dxos/react-ui-types';
+import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
 
@@ -25,10 +25,10 @@ const DefaultStory = ({ valence, title, body }: StoryProps) => (
 );
 
 const meta = {
-  title: 'ui/react-ui-core/Callout',
+  title: 'ui/react-ui-core/components/Callout',
   component: Callout.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: { chromatic: { disableSnapshot: false } },
   argTypes: {
     valence: {