@dxos/react-ui 0.8.1 → 0.8.2-main.10c050d

package/src/components/Dialogs/Dialog.stories.tsx

@@ -10,7 +10,7 @@ import { Dialog } from './Dialog';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-type StorybookDialogProps = Partial<{
+type StoryProps = Partial<{
   title: string;
   description: string;
   body: string;
@@ -19,7 +19,7 @@ type StorybookDialogProps = Partial<{
   blockAlign: 'center' | 'start';
 }>;
 
-const StorybookDialog = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StorybookDialogProps) => {
+const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StoryProps) => {
   return (
     <Dialog.Root defaultOpen>
       <Dialog.Trigger asChild>
@@ -42,7 +42,7 @@ const StorybookDialog = ({ title, openTrigger, description, body, closeTrigger,
 export default {
   title: 'ui/react-ui-core/Dialog',
   component: Dialog,
-  render: StorybookDialog,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Dialogs/Dialog.tsx

@@ -81,11 +81,12 @@ const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 const DIALOG_OVERLAY_NAME = 'DialogOverlay';
 const DIALOG_CONTENT_NAME = 'DialogContent';
-const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(DIALOG_OVERLAY_NAME, {
-  inOverlayLayout: false,
-});
+const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
+  DIALOG_OVERLAY_NAME,
+  {},
+);
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' | 'end' };
+type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps & { blockAlign?: 'center' | 'start' | 'end' }>;
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
@@ -115,6 +116,9 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
 
     return (
       <DialogContentPrimitive
+        // NOTE: Radix warning unless set to undefined.
+        // https://www.radix-ui.com/primitives/docs/components/dialog#description
+        aria-describedby={undefined}
         {...props}
         className={tx(
           'dialog.content',

package/src/components/Input/Input.stories.tsx

@@ -4,28 +4,44 @@
 
 import '@dxos-theme';
 
+import { type StoryObj, type Meta } from '@storybook/react';
 import React from 'react';
 
-import { baseSurface, modalSurface, groupSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
+import { baseSurface, modalSurface, activeSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type MessageValence } from '@dxos/react-ui-types';
 
-import { Input } from './Input';
+import {
+  type CheckboxProps,
+  Input,
+  type PinInputProps,
+  type SwitchProps,
+  type TextInputProps,
+  type TextAreaProps,
+} from './Input';
 import { withTheme } from '../../testing';
 
-type StoryInputProps = Partial<{
+type VariantMap = {
+  text: TextInputProps;
+  pin: PinInputProps;
+  textarea: TextAreaProps;
+  checkbox: CheckboxProps;
+  switch: SwitchProps;
+};
+
+type Variant = { [K in keyof VariantMap]: { type: K } & VariantMap[K] }[keyof VariantMap];
+
+type BaseProps = Partial<{
+  kind: keyof VariantMap;
   label: string;
-  placeholder: string;
-  disabled: boolean;
-  description: string;
   labelVisuallyHidden: boolean;
+  description: string;
   descriptionVisuallyHidden: boolean;
-  type: 'default' | 'pin' | 'textarea' | 'checkbox' | 'switch';
-  validationMessage: string;
   validationValence: MessageValence;
+  validationMessage: string;
 }>;
 
-const StoryInputContent = ({
-  type = 'default',
+const Wrapper = ({
+  kind,
   label,
   description,
   labelVisuallyHidden,
@@ -33,15 +49,17 @@ const StoryInputContent = ({
   validationValence,
   validationMessage,
   ...props
-}: StoryInputProps) => {
+}: BaseProps) => {
   return (
     <Input.Root {...{ validationValence }}>
       <Input.Label srOnly={labelVisuallyHidden}>{label}</Input.Label>
-      {type === 'pin' && <Input.PinInput {...props} />}
-      {type === 'textarea' && <Input.TextArea {...props} />}
-      {type === 'checkbox' && <Input.Checkbox {...props} />}
-      {type === 'switch' && <Input.Switch {...props} />}
-      {type === 'default' && <Input.TextInput {...props} />}
+
+      {kind === 'text' && <Input.TextInput {...props} />}
+      {kind === 'pin' && <Input.PinInput {...props} />}
+      {kind === 'textarea' && <Input.TextArea {...props} />}
+      {kind === 'checkbox' && <Input.Checkbox {...props} />}
+      {kind === 'switch' && <Input.Switch {...props} />}
+
       <Input.DescriptionAndValidation srOnly={descriptionVisuallyHidden}>
         {validationMessage && (
           <>
@@ -54,47 +72,37 @@ const StoryInputContent = ({
   );
 };
 
-const StoryInput = (props: StoryInputProps) => {
-  // TODO(thure): Implement
+const DefaultStory = (props: BaseProps) => {
   return (
     <div className='space-b-4'>
       <div className={mx(baseSurface, 'p-4')}>
-        <StoryInputContent {...props} />
+        <Wrapper {...props} />
       </div>
-      <div className={mx(groupSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'positioned' }))}>
-        <StoryInputContent {...props} />
+      <div className={mx(activeSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'positioned' }))}>
+        <Wrapper {...props} />
       </div>
       <div className={mx(modalSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'dialog' }))}>
-        <StoryInputContent {...props} />
+        <Wrapper {...props} />
       </div>
     </div>
   );
 };
 
-export default {
+const meta: Meta<BaseProps> = {
   title: 'ui/react-ui-core/Input',
-  component: Input,
-  render: StoryInput,
-  // TODO(thure): Refactor.
-  argTypes: {
-    label: { control: 'text' },
-    description: { control: 'text' },
-    validationMessage: { control: 'text' },
-    validationValence: {
-      control: 'select',
-      options: ['success', 'info', 'warning', 'error'],
-    },
-    type: {
-      control: 'select',
-      options: ['default', 'textarea', 'pin'],
-    },
-  },
+  component: Input.Root,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 
-export const Default = {
+export default meta;
+
+type Story = StoryObj<BaseProps & Variant>;
+
+export const Default: Story = {
   args: {
+    kind: 'text',
     label: 'Hello',
     placeholder: 'This is an input',
     disabled: false,
@@ -103,12 +111,12 @@ export const Default = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
-    length: 6,
   },
 };
 
-export const DensityFine = {
+export const DensityFine: Story = {
   args: {
+    kind: 'text',
     label: 'This is an Input with a density value of ‘fine’',
     placeholder: 'This is a density:fine input',
     disabled: false,
@@ -117,13 +125,13 @@ export const DensityFine = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
-    length: 6,
     density: 'fine',
   },
 };
 
-export const Subdued = {
+export const Subdued: Story = {
   args: {
+    kind: 'text',
     label: 'Hello',
     placeholder: 'This is a subdued input',
     disabled: false,
@@ -132,37 +140,40 @@ export const Subdued = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
-    length: 6,
     variant: 'subdued',
   },
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   args: {
+    kind: 'text',
     label: 'Disabled',
     placeholder: 'This is a disabled input',
     disabled: true,
   },
 };
 
-export const LabelVisuallyHidden = {
+export const LabelVisuallyHidden: Story = {
   args: {
+    kind: 'text',
     label: 'The label is for screen readers',
     labelVisuallyHidden: true,
     placeholder: 'The label for this input exists but is only read by screen readers',
   },
 };
 
-export const InputWithDescription = {
+export const InputWithDescription: Story = {
   args: {
+    kind: 'text',
     label: 'Described input',
     placeholder: 'This input has an accessible description',
     description: 'This helper text is accessibly associated with the input.',
   },
 };
 
-export const InputWithErrorAndDescription = {
+export const InputWithErrorAndDescription: Story = {
   args: {
+    kind: 'text',
     label: 'Described invalid input',
     placeholder: 'This input has both an accessible description and a validation error',
     description: 'This description is identified separately in the accessibility tree.',
@@ -171,8 +182,9 @@ export const InputWithErrorAndDescription = {
   },
 };
 
-export const InputWithValidationAndDescription = {
+export const InputWithValidationAndDescription: Story = {
   args: {
+    kind: 'text',
     label: 'Described input with validation message',
     placeholder: 'This input is styled to express a validation valence',
     description: 'This description is extra.',
@@ -181,39 +193,38 @@ export const InputWithValidationAndDescription = {
   },
 };
 
-export const TextArea = {
+export const TextArea: Story = {
   args: {
+    kind: 'textarea',
     label: 'This input is a text area input',
-    type: 'textarea',
     description: 'Type a long paragraph',
     placeholder: 'Lorem ipsum dolor sit amet',
   },
 };
 
-export const PinInput = {
+export const PinInput: Story = {
   args: {
+    kind: 'pin',
     label: 'This input is a PIN-style input',
-    type: 'pin',
     length: 6,
     description: 'Type in secret you received',
     placeholder: '••••••',
   },
 };
 
-export const Checkbox = {
+export const Checkbox: Story = {
   args: {
+    kind: 'checkbox',
     label: 'This is a checkbox',
-    type: 'checkbox',
     description: 'It’s checked, indeterminate, or unchecked',
     size: 5,
-    weight: 'bold',
   },
 };
 
 export const Switch = {
   args: {
+    kind: 'switch',
     label: 'This is a switch',
-    type: 'switch',
     description: 'It’s either off... or on.',
   },
 };

package/src/components/Input/Input.tsx

@@ -342,6 +342,7 @@ export const Input = {
 export type {
   InputVariant,
   InputRootProps,
+  InputSharedProps,
   PinInputProps,
   TextInputProps,
   TextAreaProps,

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

@@ -51,14 +51,14 @@ const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
   );
 };
 
-const StorybookTree = ({ data }: StorybookTreeProps) => {
+const DefaultStory = ({ data }: StorybookTreeProps) => {
   return <StorybookTreeItem data={data} />;
 };
 
 export default {
   title: 'ui/react-ui-core/Tree',
   component: Tree,
-  render: StorybookTree,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Treegrid as Tg } from './Treegrid';
+import { Treegrid } from './Treegrid';
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
@@ -122,30 +122,30 @@ const flattenedContent = Array.from(visitor(content, () => true));
 
 const DefaultStory = () => {
   return (
-    <Tg.Root gridTemplateColumns='1fr'>
+    <Treegrid.Root gridTemplateColumns='1fr'>
       {flattenedContent.map(({ node, parentOf, path }) => {
         return (
-          <Tg.Row
+          <Treegrid.Row
             key={node.id}
-            id={path.join(Tg.PATH_SEPARATOR)}
-            {...(parentOf && { parentOf: parentOf.join(Tg.PARENT_OF_SEPARATOR) })}
+            id={path.join(Treegrid.PATH_SEPARATOR)}
+            {...(parentOf && { parentOf: parentOf.join(Treegrid.PARENT_OF_SEPARATOR) })}
           >
-            <Tg.Cell indent classNames='flex items-center'>
+            <Treegrid.Cell indent classNames='flex items-center'>
               {node.icon && <Icon icon={node.icon} classNames='is-[1em] bs-[1em] mlb-1' />}
               {node.title}
-            </Tg.Cell>
-          </Tg.Row>
+            </Treegrid.Cell>
+          </Treegrid.Row>
         );
       })}
-    </Tg.Root>
+    </Treegrid.Root>
   );
 };
 
-export const Default = {};
-
 export default {
   title: 'ui/react-ui-core/Treegrid',
-  component: Tg.Root,
+  component: Treegrid.Root,
   render: DefaultStory,
   decorators: [withTheme],
 };
+
+export const Default = {};

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

@@ -22,7 +22,7 @@ const ComplementarySidebarToggle = () => {
   return <Button onClick={toggleComplementarySidebar}>Toggle complementary sidebar</Button>;
 };
 
-const StoryMain = (_args: StoryMainArgs) => {
+const DefaultStory = (_args: StoryMainArgs) => {
   return (
     <Main.Root>
       <Main.Overlay />
@@ -48,7 +48,7 @@ const StoryMain = (_args: StoryMainArgs) => {
 export default {
   title: 'ui/react-ui-core/Main',
   component: Main.Root,
-  render: StoryMain,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Main/Main.tsx

@@ -308,6 +308,7 @@ const MainContent = forwardRef<HTMLDivElement, MainProps>(
         {...props}
         data-sidebar-inline-start-state={navigationSidebarState}
         data-sidebar-inline-end-state={complementarySidebarState}
+        data-handles-focus={handlesFocus}
         className={tx('main.content', 'main', { bounce, handlesFocus }, classNames)}
         ref={forwardedRef}
       >

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

@@ -9,7 +9,7 @@ import React from 'react';
 import { ContextMenu } from './ContextMenu';
 import { withTheme } from '../../testing';
 
-const StorybookContextMenu = () => {
+const DefaultStory = () => {
   // NOTE(thure): Since long-tap will select text in some OSs, apply `select-none` to `ContextMenu.Trigger` where possible.
   return (
     <ContextMenu.Root>
@@ -94,7 +94,7 @@ const StorybookContextMenu = () => {
 export default {
   title: 'ui/react-ui-core/ContextMenu',
   component: ContextMenu,
-  render: StorybookContextMenu,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -10,7 +10,7 @@ import { DropdownMenu } from './DropdownMenu';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-const StorybookDropdownMenu = () => {
+const DefaultStory = () => {
   return (
     <DropdownMenu.Root defaultOpen>
       <DropdownMenu.Trigger asChild>
@@ -94,7 +94,7 @@ const StorybookDropdownMenu = () => {
 export default {
   title: 'ui/react-ui-core/DropdownMenu',
   component: DropdownMenu,
-  render: StorybookDropdownMenu,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -12,13 +12,13 @@ import { type MessageValence } from '@dxos/react-ui-types';
 import { Message } from './Message';
 import { withTheme } from '../../testing';
 
-type StoryMessageProps = {
+type StoryProps = {
   valence: MessageValence;
   title: string;
   body: string;
 };
 
-const StoryMessage = ({ valence, title, body }: StoryMessageProps) => (
+const DefaultStory = ({ valence, title, body }: StoryProps) => (
   <Message.Root valence={valence}>
     <Message.Title>
       <Info className='inline w-5 h-5 mb-1' weight='duotone' /> {title}
@@ -30,14 +30,20 @@ const StoryMessage = ({ valence, title, body }: StoryMessageProps) => (
 export default {
   title: 'ui/react-ui-core/Message',
   component: Message,
-  render: StoryMessage,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
+  argTypes: {
+    valence: {
+      control: 'select',
+      options: ['success', 'info', 'warning', 'error', 'neutral'],
+    },
+  },
 };
 
 export const Default = {
   args: {
-    valence: 'error',
+    valence: 'neutral',
     title: 'Alert title',
     body: 'Alert content',
   },

package/src/components/Popover/Popover.stories.tsx

@@ -14,7 +14,7 @@ import { Button } from '../Buttons';
 
 faker.seed(1234);
 
-const StorybookPopover = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
+const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
   return (
     <Popover.Root defaultOpen>
       <Popover.Trigger asChild>{openTrigger}</Popover.Trigger>
@@ -31,7 +31,7 @@ const StorybookPopover = ({ openTrigger, children }: PropsWithChildren<{ openTri
 export default {
   title: 'ui/react-ui-core/Popover',
   component: Popover,
-  render: StorybookPopover,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Popover/Popover.tsx

@@ -246,13 +246,13 @@ PopoverPortal.displayName = PORTAL_NAME;
 
 const CONTENT_NAME = 'PopoverContent';
 
-interface PopoverContentProps extends PopoverContentTypeProps {
+type PopoverContentProps = ThemedClassName<PopoverContentTypeProps> & {
   /**
    * Used to force mounting when more control is needed. Useful when
    * controlling animation with React animation libraries.
    */
-  forceMount?: true;
-}
+  forceMount?: boolean;
+};
 
 const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps>(
   (props: ScopedProps<PopoverContentProps>, forwardedRef) => {
@@ -277,7 +277,8 @@ PopoverContent.displayName = CONTENT_NAME;
 /* ----------------------------------------------------------------------------------------------- */
 
 type PopoverContentTypeElement = PopoverContentImplElement;
-interface PopoverContentTypeProps extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}
+export interface PopoverContentTypeProps
+  extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}
 
 const PopoverContentModal = forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(
   (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {
@@ -571,6 +572,8 @@ const PopoverViewport = forwardRef<HTMLDivElement, PopoverViewportProps>(
 
 const getState = (open: boolean) => (open ? 'open' : 'closed');
 
+type PopoverContentInteractOutsideEvent = Parameters<NonNullable<PopoverContentProps['onInteractOutside']>>[0];
+
 export const Popover = {
   Root: PopoverRoot,
   Anchor: PopoverAnchor,
@@ -595,4 +598,5 @@ export type {
   PopoverCloseProps,
   PopoverArrowProps,
   PopoverViewportProps,
+  PopoverContentInteractOutsideEvent,
 };

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -7,17 +7,17 @@ import '@dxos-theme';
 import React, { type PropsWithChildren } from 'react';
 
 import { faker } from '@dxos/random';
-import { groupSurface, surfaceShadow } from '@dxos/react-ui-theme';
+import { activeSurface, surfaceShadow } from '@dxos/react-ui-theme';
 
 import { ScrollArea } from './ScrollArea';
 import { withTheme } from '../../testing';
 
 faker.seed(1234);
 
-const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
+const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
   return (
     <ScrollArea.Root
-      classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceShadow({ elevation: 'positioned' })]}
+      classNames={['is-[300px] bs-[400px] rounded', activeSurface, surfaceShadow({ elevation: 'positioned' })]}
     >
       <ScrollArea.Viewport classNames='rounded p-4'>
         <p>{children}</p>
@@ -36,7 +36,7 @@ const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
 export default {
   title: 'ui/react-ui-core/Scroll area',
   component: ScrollArea,
-  render: StorybookScrollArea,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/ScrollArea/ScrollArea.tsx

@@ -23,6 +23,9 @@ type ScrollAreaVariant = 'coarse' | 'fine';
 
 type ScrollAreaRootProps = ThemedClassName<ScrollAreaPrimitiveRootProps>;
 
+/**
+ * @deprecated
+ */
 const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (

package/src/components/Select/Select.stories.tsx

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import { faker } from '@dxos/random';
 
 import { Select } from './Select';
-import { withVariants, withTheme } from '../../testing';
+import { withSurfaceVariantsLayout, withTheme } from '../../testing';
 
 faker.seed(1234);
 
@@ -50,6 +50,6 @@ export const Default: StoryObj<StoryProps> = {
 export default {
   title: 'ui/react-ui-core/Select',
   render: DefaultStory,
-  decorators: [withVariants(), withTheme],
+  decorators: [withSurfaceVariantsLayout(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };