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

package/src/components/Icon/Icon.tsx

@@ -5,7 +5,7 @@
 import { type Primitive } from '@radix-ui/react-primitive';
 import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
-import { type Size } from '@dxos/react-ui-types';
+import { type Size } from '@dxos/ui-types';
 
 import { useIconHref, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

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

@@ -5,8 +5,8 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
-import { type MessageValence } from '@dxos/react-ui-types';
+import { baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/ui-theme';
+import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
 

package/src/components/Input/Input.tsx

@@ -27,8 +27,8 @@ import {
   type ValidationProps as ValidationPrimitiveProps,
   useInputContext,
 } from '@dxos/react-input';
-import { mx } from '@dxos/react-ui-theme';
-import { type ClassNameValue, type Density, type Elevation, type Size } from '@dxos/react-ui-types';
+import { mx } from '@dxos/ui-theme';
+import { type ClassNameValue, type Density, type Elevation, type Size } from '@dxos/ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -162,10 +162,17 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
 
 // TODO(burdon): Implement inline icon within button: e.g., https://www.radix-ui.com/themes/playground#text-field
 
-type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps>;
+type AutoFillProps = {
+  noAutoFill?: boolean;
+};
+
+type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps> & AutoFillProps;
 
 const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>(
-  ({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  (
+    { __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props },
+    forwardedRef,
+  ) => {
     const { hasIosKeyboard } = useThemeContext();
     const themeContextValue = useThemeContext();
     const density = useDensityContext(propsDensity);
@@ -177,6 +184,8 @@ const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>
     return (
       <TextInputPrimitive
         {...props}
+        // TODO(wittjosiah): Factor out autofill properies.
+        {...{ 'data-1p-ignore': noAutoFill }}
         className={tx(
           'input.input',
           'input',

package/src/components/{Lists → List}/List.stories.tsx

@@ -7,7 +7,7 @@ import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy }
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type ReactNode, useState } from 'react';
+import React, { type ReactNode, useCallback, useState } from 'react';
 
 import {
   getSize,
@@ -16,7 +16,7 @@ import {
   ghostSelectedTrackingInterFromNormal,
   mx,
   surfaceShadow,
-} from '@dxos/react-ui-theme';
+} from '@dxos/ui-theme';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
@@ -63,16 +63,20 @@ export const UniformSizeDraggable: Story = {
       })),
     );
 
-    const handleDragEnd = (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        setItems((items) => {
-          const oldIndex = items.findIndex((item) => item.id === active.id);
-          const newIndex = items.findIndex((item) => item.id === over?.id);
-          return arrayMove(items, oldIndex, newIndex);
-        });
-      }
-    };
+    const handleDragEnd = useCallback(
+      (event: DragEndEvent) => {
+        const { active, over } = event;
+        if (active.id !== over?.id) {
+          setItems((items) => {
+            const oldIndex = items.findIndex((item) => item.id === active.id);
+            const newIndex = items.findIndex((item) => item.id === over?.id);
+            return arrayMove(items, oldIndex, newIndex);
+          });
+        }
+      },
+      [items],
+    );
+
     return (
       <DndContext onDragEnd={handleDragEnd}>
         <SortableContext items={items.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
@@ -229,7 +233,7 @@ export const SelectableListbox: Story = {
             onClick={() => setSelectedId(id)}
             onKeyUp={(event) => handleKeyUp(event, id)}
           >
-            <ListItem.Heading classNames='flex pis-1 pie-1 items-center grow truncate'>{text}</ListItem.Heading>
+            <ListItem.Heading classNames='flex pli-1 items-center grow truncate'>{text}</ListItem.Heading>
           </ListItem.Root>
         ))}
       </List>

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

package/src/components/{Lists → List}/ListDropIndicator.tsx

@@ -18,7 +18,7 @@ const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['classN
   horizontal:
     'h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]',
   vertical:
-    'w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
+    'is-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
 };
 
 const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {

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

@@ -5,41 +5,86 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { withLayout, withTheme } from '../../testing';
+import { IconButton } from '../Button';
+import { Input } from '../Input';
+import { Toolbar } from '../Toolbar';
 
-import { Main, useSidebars } from './Main';
+import { Main, useDynamicDrawer, 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 DrawerToggle = ({ close }: { close?: boolean }) => {
+  const { toggleDrawer } = useSidebars('StoryMain__DrawerToggle');
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-down--regular' : 'ph--caret-up--regular'}
+      iconOnly
+      label='Toggle drawer'
+      onClick={toggleDrawer}
+    />
+  );
+};
+
+const DrawerState = () => {
+  const { drawerState } = useSidebars('StoryMain__DrawerStateDisplay');
+  return (
+    <div className='flex items-center gap-2'>
+      <span>Drawer</span>
+      <span>({drawerState})</span>
+      <span>[{window.innerHeight}]</span>
+    </div>
+  );
 };
 
 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>
   );
@@ -49,7 +94,7 @@ const meta = {
   title: 'ui/react-ui-core/Main',
   component: Main.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     chromatic: {
@@ -65,3 +110,65 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {},
 };
+
+const DrawerStory = (_args: StoryMainArgs) => {
+  return (
+    <Main.Root>
+      <Main.Overlay />
+      <DrawerStoryInner />
+    </Main.Root>
+  );
+};
+
+const DrawerStoryInner = () => {
+  useDynamicDrawer('DrawerStoryInner');
+
+  return (
+    <>
+      <Main.Content classNames='flex flex-col is-full overflow-hidden'>
+        <Toolbar.Root classNames='pli-2'>
+          <h1>Main Content</h1>
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <DrawerToggle />
+        </Toolbar.Root>
+        <div className='flex flex-col bs-full overflow-y-auto p-2'>
+          <p className='text-sm text-description'>
+            The drawer is mutually exclusive with sidebars and is intended for mobile apps.
+          </p>
+          <div className='plb-2 space-y-2'>
+            {Array.from({ length: 50 }).map((_, i) => (
+              <p key={i}>Line {i + 1}</p>
+            ))}
+          </div>
+        </div>
+      </Main.Content>
+      <Main.Drawer label='Drawer' classNames='grid grid-rows-[min-content_1fr_min-content]'>
+        <Toolbar.Root classNames='pli-2'>
+          <DrawerState />
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <DrawerToggle close />
+        </Toolbar.Root>
+        <div className='p-2 overflow-y-auto'>
+          <p className='text-sm text-description'>
+            On mobile devices, the drawer automatically switches to fullscreenwhen the keyboard appears.
+          </p>
+          <div className='plb-2 space-y-2'>
+            {Array.from({ length: 50 }).map((_, i) => (
+              <p key={i}>Line {i + 1}</p>
+            ))}
+          </div>
+        </div>
+        <div className='p-2 border-bs border-separator'>
+          <Input.Root>
+            <Input.TextInput autoFocus placeholder='Search' />
+          </Input.Root>
+        </div>
+      </Main.Drawer>
+    </>
+  );
+};
+
+export const WithDrawer: Story = {
+  render: DrawerStory,
+  args: {},
+};