@dxos/react-ui 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/src/components/Main/Main.tsx

@@ -35,14 +35,12 @@ const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';
 const MAIN_NAME = 'Main';
 const GENERIC_CONSUMER_NAME = 'GenericConsumer';
 
-type SidebarState = 'expanded' | 'collapsed' | 'closed';
-
 type MainContextValue = {
   resizing: boolean;
-  navigationSidebarState: SidebarState;
-  setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
-  complementarySidebarState: SidebarState;
-  setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
+  navigationSidebarOpen: boolean;
+  setNavigationSidebarOpen: Dispatch<SetStateAction<boolean | undefined>>;
+  complementarySidebarOpen: boolean;
+  setComplementarySidebarOpen: Dispatch<SetStateAction<boolean | undefined>>;
 };
 
 const landmarkAttr = 'data-main-landmark';
@@ -75,77 +73,73 @@ const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKey
 
 const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
   resizing: false,
-  navigationSidebarState: 'closed',
-  setNavigationSidebarState: (nextState) => {
+  navigationSidebarOpen: false,
+  setNavigationSidebarOpen: (nextOpen) => {
     // TODO(burdon): Standardize with other context missing errors using raise.
     log.warn('Attempt to set sidebar state without initializing `MainRoot`');
   },
-  complementarySidebarState: 'closed',
-  setComplementarySidebarState: (nextState) => {
+  complementarySidebarOpen: false,
+  setComplementarySidebarOpen: (nextOpen) => {
     // TODO(burdon): Standardize with other context missing errors using raise.
     log.warn('Attempt to set sidebar state without initializing `MainRoot`');
   },
 });
 
 const useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } =
+  const { setNavigationSidebarOpen, navigationSidebarOpen, setComplementarySidebarOpen, complementarySidebarOpen } =
     useMainContext(consumerName);
   return {
-    navigationSidebarState,
-    setNavigationSidebarState,
+    navigationSidebarOpen,
+    setNavigationSidebarOpen,
     toggleNavigationSidebar: useCallback(
-      () => setNavigationSidebarState(navigationSidebarState === 'expanded' ? 'closed' : 'expanded'),
-      [navigationSidebarState, setNavigationSidebarState],
+      () => setNavigationSidebarOpen(!navigationSidebarOpen),
+      [navigationSidebarOpen, setNavigationSidebarOpen],
     ),
-    openNavigationSidebar: useCallback(() => setNavigationSidebarState('expanded'), []),
-    collapseNavigationSidebar: useCallback(() => setNavigationSidebarState('collapsed'), []),
-    closeNavigationSidebar: useCallback(() => setNavigationSidebarState('closed'), []),
-    complementarySidebarState,
-    setComplementarySidebarState,
+    openNavigationSidebar: useCallback(() => setNavigationSidebarOpen(true), [setNavigationSidebarOpen]),
+    closeNavigationSidebar: useCallback(() => setNavigationSidebarOpen(false), [setNavigationSidebarOpen]),
+    complementarySidebarOpen,
+    setComplementarySidebarOpen,
     toggleComplementarySidebar: useCallback(
-      () => setComplementarySidebarState(complementarySidebarState === 'expanded' ? 'closed' : 'expanded'),
-      [complementarySidebarState, setComplementarySidebarState],
+      () => setComplementarySidebarOpen(!complementarySidebarOpen),
+      [complementarySidebarOpen, setComplementarySidebarOpen],
     ),
-    openComplementarySidebar: useCallback(() => setComplementarySidebarState('expanded'), []),
-    collapseComplementarySidebar: useCallback(() => setComplementarySidebarState('collapsed'), []),
-    closeComplementarySidebar: useCallback(() => setComplementarySidebarState('closed'), []),
+    openComplementarySidebar: useCallback(() => setComplementarySidebarOpen(true), [setComplementarySidebarOpen]),
+    closeComplementarySidebar: useCallback(() => setComplementarySidebarOpen(false), [setComplementarySidebarOpen]),
   };
 };
 
 type MainRootProps = PropsWithChildren<{
-  navigationSidebarState?: SidebarState;
-  defaultNavigationSidebarState?: SidebarState;
-  onNavigationSidebarStateChange?: (nextState: SidebarState) => void;
-  complementarySidebarState?: SidebarState;
-  defaultComplementarySidebarState?: SidebarState;
-  onComplementarySidebarStateChange?: (nextState: SidebarState) => void;
+  navigationSidebarOpen?: boolean;
+  defaultNavigationSidebarOpen?: boolean;
+  onNavigationSidebarOpenChange?: (nextOpen: boolean) => void;
+  complementarySidebarOpen?: boolean;
+  defaultComplementarySidebarOpen?: boolean;
+  onComplementarySidebarOpenChange?: (nextOpen: boolean) => void;
 }>;
 
 const resizeDebounce = 3000;
 
 const MainRoot = ({
-  navigationSidebarState: propsNavigationSidebarState,
-  defaultNavigationSidebarState,
-  onNavigationSidebarStateChange,
-  complementarySidebarState: propsComplementarySidebarState,
-  defaultComplementarySidebarState,
-  onComplementarySidebarStateChange,
+  navigationSidebarOpen: propsNavigationSidebarOpen,
+  defaultNavigationSidebarOpen,
+  onNavigationSidebarOpenChange,
+  complementarySidebarOpen: propsComplementarySidebarOpen,
+  defaultComplementarySidebarOpen,
+  onComplementarySidebarOpenChange,
   children,
   ...props
 }: MainRootProps) => {
   const [isLg] = useMediaQuery('lg', { ssr: false });
-  const [navigationSidebarState = isLg ? 'expanded' : 'collapsed', setNavigationSidebarState] =
-    useControllableState<SidebarState>({
-      prop: propsNavigationSidebarState,
-      defaultProp: defaultNavigationSidebarState,
-      onChange: onNavigationSidebarStateChange,
-    });
-  const [complementarySidebarState = isLg ? 'expanded' : 'collapsed', setComplementarySidebarState] =
-    useControllableState<SidebarState>({
-      prop: propsComplementarySidebarState,
-      defaultProp: defaultComplementarySidebarState,
-      onChange: onComplementarySidebarStateChange,
-    });
+  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState<boolean>({
+    prop: propsNavigationSidebarOpen,
+    defaultProp: defaultNavigationSidebarOpen,
+    onChange: onNavigationSidebarOpenChange,
+  });
+  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState<boolean>({
+    prop: propsComplementarySidebarOpen,
+    defaultProp: defaultComplementarySidebarOpen,
+    onChange: onComplementarySidebarOpenChange,
+  });
 
   const [resizing, setResizing] = useState(false);
   const resizeInterval = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -170,10 +164,10 @@ const MainRoot = ({
     <MainProvider
       {...props}
       {...{
-        navigationSidebarState,
-        setNavigationSidebarState,
-        complementarySidebarState,
-        setComplementarySidebarState,
+        navigationSidebarOpen,
+        setNavigationSidebarOpen,
+        complementarySidebarOpen,
+        setComplementarySidebarOpen,
       }}
       resizing={resizing}
     >
@@ -190,15 +184,15 @@ const handleOpenAutoFocus = (event: Event) => {
 
 type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContent>> & {
   swipeToDismiss?: boolean;
-  state?: SidebarState;
+  open: boolean;
   resizing?: boolean;
-  onStateChange?: (nextState: SidebarState) => void;
+  setOpen: Dispatch<SetStateAction<boolean | undefined>>;
   side: 'inline-start' | 'inline-end';
 };
 
 const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   (
-    { classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, ...props },
+    { classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props },
     forwardedRef,
   ) => {
     const [isLg] = useMediaQuery('lg', { ssr: false });
@@ -206,7 +200,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
     const ref = useForwardedRef(forwardedRef);
     const noopRef = useRef(null);
     useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
-      onDismiss: () => onStateChange?.('closed'),
+      onDismiss: () => setOpen(false),
     });
     const handleKeyDown = useCallback(
       (event: KeyboardEvent<HTMLDivElement>) => {
@@ -219,16 +213,16 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
     );
     const Root = isLg ? Primitive.div : DialogContent;
     return (
-      <DialogRoot open={state !== 'closed'} modal={false}>
+      <DialogRoot open={open} modal={false}>
         <Root
           {...(!isLg && { forceMount: true, tabIndex: -1, onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus })}
           {...props}
           data-side={side === 'inline-end' ? 'ie' : 'is'}
-          data-state={state}
+          data-state={open ? 'open' : 'closed'}
           data-resizing={resizing ? 'true' : 'false'}
           className={tx('main.sidebar', 'main__sidebar', {}, classNames)}
           onKeyDown={handleKeyDown}
-          {...(state === 'closed' && { inert: 'true' })}
+          {...(!open && { inert: 'true' })}
           ref={ref}
         >
           {children}
@@ -238,17 +232,17 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   },
 );
 
-type MainNavigationSidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
+type MainNavigationSidebarProps = Omit<MainSidebarProps, 'open' | 'setOpen' | 'side'>;
 
 const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarProps>((props, forwardedRef) => {
-  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, '0');
   return (
     <MainSidebar
       {...mover}
       {...props}
-      state={navigationSidebarState}
-      onStateChange={setNavigationSidebarState}
+      open={navigationSidebarOpen}
+      setOpen={setNavigationSidebarOpen}
       resizing={resizing}
       side='inline-start'
       ref={forwardedRef}
@@ -258,18 +252,18 @@ const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarPr
 
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 
-type MainComplementarySidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
+type MainComplementarySidebarProps = Omit<MainSidebarProps, 'open' | 'setOpen' | 'side'>;
 
 const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySidebarProps>((props, forwardedRef) => {
-  const { complementarySidebarState, setComplementarySidebarState, resizing } =
+  const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } =
     useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, '2');
   return (
     <MainSidebar
       {...mover}
       {...props}
-      state={complementarySidebarState}
-      onStateChange={setComplementarySidebarState}
+      open={complementarySidebarOpen}
+      setOpen={setComplementarySidebarOpen}
       resizing={resizing}
       side='inline-end'
       ref={forwardedRef}
@@ -287,7 +281,7 @@ type MainProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> &
 
 const MainContent = forwardRef<HTMLDivElement, MainProps>(
   ({ asChild, classNames, bounce, handlesFocus, children, role, ...props }: MainProps, forwardedRef) => {
-    const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
+    const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : role ? 'div' : 'main';
 
@@ -298,8 +292,8 @@ const MainContent = forwardRef<HTMLDivElement, MainProps>(
         role={role}
         {...(handlesFocus && { ...mover })}
         {...props}
-        data-sidebar-inline-start-state={navigationSidebarState}
-        data-sidebar-inline-end-state={complementarySidebarState}
+        data-sidebar-inline-start-state={navigationSidebarOpen ? 'open' : 'closed'}
+        data-sidebar-inline-end-state={complementarySidebarOpen ? 'open' : 'closed'}
         className={tx('main.content', 'main', { bounce, handlesFocus }, classNames)}
         ref={forwardedRef}
       >
@@ -315,23 +309,23 @@ type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primit
 
 const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery('lg', { ssr: false });
-  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } =
+  const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } =
     useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   return (
     <div
       onClick={() => {
-        setNavigationSidebarState('collapsed');
-        setComplementarySidebarState('collapsed');
+        setNavigationSidebarOpen(false);
+        setComplementarySidebarOpen(false);
       }}
       {...props}
       className={tx(
         'main.overlay',
         'main__overlay',
-        { isLg, inlineStartSidebarOpen: navigationSidebarState, inlineEndSidebarOpen: complementarySidebarState },
+        { isLg, inlineStartSidebarOpen: navigationSidebarOpen, inlineEndSidebarOpen: complementarySidebarOpen },
         classNames,
       )}
-      data-state={navigationSidebarState === 'expanded' || complementarySidebarState === 'expanded' ? 'open' : 'closed'}
+      data-state={navigationSidebarOpen || complementarySidebarOpen ? 'open' : 'closed'}
       aria-hidden='true'
       ref={forwardedRef}
     />
@@ -346,6 +340,6 @@ export const Main = {
   ComplementarySidebar: MainComplementarySidebar,
 };
 
-export { useMainContext, useSidebars, useLandmarkMover };
+export { useMainContext, useSidebars };
 
-export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps, SidebarState };
+export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps };

package/src/components/Tag/Tag.stories.tsx

@@ -1,35 +1,46 @@
 //
 // Copyright 2022 DXOS.org
 //
-import React from 'react';
 
-import { hueTokenThemes } from '@dxos/react-ui-theme';
 import '@dxos-theme';
-import { type ChromaticPalette, type MessageValence } from '@dxos/react-ui-types';
 
 import { Tag } from './Tag';
 import { withTheme } from '../../testing';
 
-const palettes = ['neutral', 'success', 'info', 'warning', 'error', ...Object.keys(hueTokenThemes)] as (
-  | ChromaticPalette
-  | MessageValence
-)[];
-
 export default {
   title: 'ui/react-ui-core/Tag',
   component: Tag,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
-} as const;
+  argTypes: {
+    palette: {
+      control: 'select',
+      options: [
+        'neutral',
+        'success',
+        'info',
+        'warning',
+        'error',
+        'red',
+        'orange',
+        'amber',
+        'yellow',
+        'lime',
+        'green',
+        'emerald',
+        'teal',
+        'cyan',
+        'sky',
+        'blue',
+        'indigo',
+        'violet',
+        'purple',
+        'fuchsia',
+        'pink',
+        'rose',
+      ],
+    },
+  },
+} as any;
 
-export const Default = {
-  render: () => (
-    <div role='grid' className='grid grid-cols-5 gap-2 max-is-screen-md'>
-      {palettes.map((palette) => (
-        <Tag key={palette} palette={palette}>
-          {palette}
-        </Tag>
-      ))}
-    </div>
-  ),
-};
+export const Default = { args: { children: 'Hello', palette: 'success' } };

package/src/components/Tag/Tag.tsx

@@ -1,5 +1,5 @@
 //
-// Copyright 2025 DXOS.org
+// Copyright 2022 DXOS.org
 //
 
 import { Primitive } from '@radix-ui/react-primitive';
@@ -16,17 +16,8 @@ export type TagProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.sp
   asChild?: boolean;
 };
 
-export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ asChild, palette = 'neutral', classNames, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.span;
-    return (
-      <Root
-        {...props}
-        className={tx('tag.root', 'dx-tag', { palette }, classNames)}
-        data-hue={palette}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root = asChild ? Slot : Primitive.span;
+  return <Root {...props} className={tx('tag.root', 'tag', { palette }, classNames)} ref={forwardedRef} />;
+});

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -12,12 +12,11 @@ import { Button } from '../Buttons';
 
 type StoryTooltipProps = {
   content: string;
-  defaultOpen?: boolean;
 };
 
-const StoryTooltip = ({ content, defaultOpen }: StoryTooltipProps) => (
+const StoryTooltip = ({ content }: StoryTooltipProps) => (
   <Tooltip.Provider>
-    <Tooltip.Root defaultOpen={defaultOpen}>
+    <Tooltip.Root defaultOpen>
       <Tooltip.Trigger asChild>
         <Button>Trigger tooltip</Button>
       </Tooltip.Trigger>
@@ -45,13 +44,3 @@ export const Default = {
     chromatic: { delay: 500 },
   },
 };
-
-export const Testing = {
-  args: {
-    defaultOption: true,
-    content: 'This is the tooltip content',
-  },
-  parameters: {
-    chromatic: { delay: 500 },
-  },
-};

package/src/util/ThemedClassName.ts

@@ -4,4 +4,4 @@
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
 
-export type ThemedClassName<P = {}> = Omit<P, 'className'> & { classNames?: ClassNameValue };
+export type ThemedClassName<P> = Omit<P, 'className'> & { classNames?: ClassNameValue };