@dxos/react-ui-stack 0.8.4-main.5acf9ea → 0.8.4-main.5ea62a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.4-main.5acf9ea",
+  "version": "0.8.4-main.5ea62a8",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -54,36 +54,36 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/echo-schema": "0.8.4-main.5acf9ea",
-    "@dxos/keyboard": "0.8.4-main.5acf9ea",
-    "@dxos/live-object": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-attention": "0.8.4-main.5acf9ea",
-    "@dxos/util": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-dnd": "0.8.4-main.5acf9ea",
-    "@dxos/storybook-utils": "0.8.4-main.5acf9ea"
+    "@dxos/echo-schema": "0.8.4-main.5ea62a8",
+    "@dxos/keyboard": "0.8.4-main.5ea62a8",
+    "@dxos/live-object": "0.8.4-main.5ea62a8",
+    "@dxos/storybook-utils": "0.8.4-main.5ea62a8",
+    "@dxos/util": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-dnd": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-attention": "0.8.4-main.5ea62a8"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/client": "0.8.4-main.5acf9ea",
-    "@dxos/app-graph": "0.8.4-main.5acf9ea",
-    "@dxos/echo-schema": "0.8.4-main.5acf9ea",
-    "@dxos/random": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui": "0.8.4-main.5acf9ea",
-    "@dxos/storybook-utils": "0.8.4-main.5acf9ea",
-    "@dxos/test-utils": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-theme": "0.8.4-main.5acf9ea"
+    "vite": "7.1.1",
+    "@dxos/app-graph": "0.8.4-main.5ea62a8",
+    "@dxos/client": "0.8.4-main.5ea62a8",
+    "@dxos/echo-schema": "0.8.4-main.5ea62a8",
+    "@dxos/random": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
+    "@dxos/storybook-utils": "0.8.4-main.5ea62a8",
+    "@dxos/test-utils": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui": "0.8.4-main.5ea62a8"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/client": "0.8.4-main.5acf9ea",
-    "@dxos/random": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-theme": "0.8.4-main.5acf9ea"
+    "@dxos/client": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui": "0.8.4-main.5ea62a8",
+    "@dxos/random": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Stack/Stack.stories.tsx

@@ -6,14 +6,15 @@ import '@dxos-theme';
 
 import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { Stack } from './Stack';
-import { StackItem } from '../StackItem';
 import { type StackItemData } from '../defs';
+import { StackItem } from '../StackItem';
+
+import { Stack } from './Stack';
 
 type StoryStackItem = {
   id: string;
@@ -129,12 +130,12 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta = {
   title: 'ui/react-ui-stack/Stack',
   component: DefaultStory,
   decorators: [withTheme],
   argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 

package/src/components/Stack/Stack.tsx

@@ -5,22 +5,22 @@
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 import React, {
-  Children,
   type CSSProperties,
+  Children,
   type ComponentPropsWithRef,
   forwardRef,
-  useState,
-  useMemo,
   useCallback,
   useEffect,
+  useMemo,
+  useState,
 } from 'react';
 
-import { type ThemedClassName, ListItem } from '@dxos/react-ui';
+import { ListItem, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useStackDropForElements } from '../../hooks';
-import { StackContext } from '../StackContext';
 import { type StackContextValue } from '../defs';
+import { StackContext } from '../StackContext';
 
 export type Orientation = 'horizontal' | 'vertical';
 export type Size = 'intrinsic' | 'contain' | 'contain-fit-content';
@@ -134,7 +134,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
             gridClasses,
             (size === 'contain' || size === 'contain-fit-content') &&
               (orientation === 'horizontal'
-                ? 'overflow-x-auto min-bs-0 max-bs-full bs-full'
+                ? 'overflow-x-auto overscroll-x-contain min-bs-0 max-bs-full bs-full'
                 : 'overflow-y-auto min-is-0 max-is-full is-full'),
             classNames,
           )}

package/src/components/StackContext.tsx

@@ -4,8 +4,8 @@
 
 import { createContext, useContext } from 'react';
 
+import { type StackItemRearrangeHandler, type StackItemSize } from './defs';
 import { type Orientation, type Size } from './Stack';
-import { type StackItemSize, type StackItemRearrangeHandler } from './defs';
 
 export type StackContextValue = {
   orientation: Orientation;

package/src/components/StackItem/StackItem.stories.tsx

@@ -7,16 +7,14 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Icon, DropdownMenu } from '@dxos/react-ui';
+import { DropdownMenu, Icon } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { StackItem } from './StackItem';
+import { StackItem, type StackItemRootProps } from './StackItem';
 
-const meta: Meta<typeof StackItem.Root> = {
-  title: 'ui/react-ui-stack/StackItem',
-  component: StackItem.Root,
-  render: (args) => (
-    <StackItem.Root role='section' {...args} classNames='w-[20rem] border border-separator'>
+const DefaultStory = (props: StackItemRootProps) => {
+  return (
+    <StackItem.Root role='section' {...props} classNames='w-[20rem] border border-separator'>
       <StackItem.Heading>
         <span className='sr-only'>Title</span>
         <div role='none' className='sticky -block-start-px bg-[--sticky-bg] p-1 is-full'>
@@ -31,16 +29,22 @@ const meta: Meta<typeof StackItem.Root> = {
       </StackItem.Heading>
       <StackItem.Content classNames='p-2'>Content</StackItem.Content>
     </StackItem.Root>
-  ),
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-stack/StackItem',
+  component: StackItem.Root as any,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<typeof StackItem.Root>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/StackItem/StackItem.tsx

@@ -7,46 +7,47 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import {
+  type Edge,
   attachClosestEdge,
   extractClosestEdge,
-  type Edge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 import React, {
-  forwardRef,
-  useLayoutEffect,
-  useState,
   type ComponentPropsWithRef,
-  useCallback,
   type ReactNode,
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
   useMemo,
+  useState,
 } from 'react';
 import { createPortal } from 'react-dom';
 
-import { type ThemedClassName, ListItem } from '@dxos/react-ui';
+import { ListItem, type ThemedClassName } from '@dxos/react-ui';
 import { resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
 import { mx } from '@dxos/react-ui-theme';
 
+import { type StackItemData, type StackItemSize } from '../defs';
+import { type ItemDragState, StackItemContext, idle, useStack, useStackItem } from '../StackContext';
+
 import { StackItemContent, type StackItemContentProps } from './StackItemContent';
 import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
 import {
   StackItemHeading,
   StackItemHeadingLabel,
-  type StackItemHeadingProps,
   type StackItemHeadingLabelProps,
+  type StackItemHeadingProps,
   StackItemHeadingStickyContent,
 } from './StackItemHeading';
 import { StackItemResizeHandle, type StackItemResizeHandleProps } from './StackItemResizeHandle';
 import {
   StackItemSigil,
-  type StackItemSigilProps,
   type StackItemSigilAction,
-  type StackItemSigilButtonProps,
   StackItemSigilButton,
+  type StackItemSigilButtonProps,
+  type StackItemSigilProps,
 } from './StackItemSigil';
-import { useStack, StackItemContext, idle, type ItemDragState, useStackItem } from '../StackContext';
-import { type StackItemSize, type StackItemData } from '../defs';
 
 // NOTE: 48rem fills the screen on a MacbookPro with the sidebars closed.
 export const DEFAULT_HORIZONTAL_SIZE = 48 satisfies StackItemSize;

package/src/components/StackItem/StackItemContent.tsx

@@ -54,6 +54,7 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
             },
       [toolbar, statusbar, layoutManaged],
     );
+
     return (
       <div
         role='none'

package/src/components/StackItem/StackItemHeading.tsx

@@ -5,14 +5,14 @@
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { Slot } from '@radix-ui/react-slot';
 import React, {
-  type ComponentPropsWithoutRef,
   type ComponentPropsWithRef,
-  forwardRef,
+  type ComponentPropsWithoutRef,
   type PropsWithChildren,
+  forwardRef,
 } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { useAttention, type AttendableId, type Related } from '@dxos/react-ui-attention';
+import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useStack } from '../StackContext';

package/src/components/StackItem/StackItemResizeHandle.tsx

@@ -6,9 +6,10 @@ import React from 'react';
 
 import { ResizeHandle } from '@dxos/react-ui-dnd';
 
-import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
 import { useStack, useStackItem } from '../StackContext';
 
+import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
+
 const MIN_WIDTH = 20;
 const MIN_HEIGHT = 3;
 

package/src/components/StackItem/StackItemSigil.tsx

@@ -11,9 +11,10 @@ import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-at
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { MenuSignifierHorizontal } from './MenuSignifier';
 import { translationKey } from '../../translations';
 
+import { MenuSignifierHorizontal } from './MenuSignifier';
+
 export type KeyBinding = {
   windows?: string;
   macos?: string;

package/src/exemplars/Card/Card.stories.tsx

@@ -12,7 +12,6 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { Card } from './Card';
 
-// Set a seed for reproducible random values
 faker.seed(0);
 
 type CardStoryProps = {
@@ -23,8 +22,27 @@ type CardStoryProps = {
   showIcon: boolean;
 };
 
-const meta: Meta<CardStoryProps> = {
+const DefaultStory = ({ title, description, image, showImage, showIcon }: CardStoryProps) => {
+  return (
+    <div className='max-is-md'>
+      <Card.StaticRoot>
+        <Card.Toolbar>
+          <Card.DragHandle toolbarItem />
+          <Card.ToolbarSeparator variant='gap' />
+          <Card.ToolbarIconButton iconOnly variant='ghost' icon='ph--x--regular' label={'remove card label'} />
+        </Card.Toolbar>
+        {showImage && <Card.Poster alt={title} image={image} />}
+        {!showImage && showIcon && <Card.Poster alt={title} icon='ph--building-office--regular' />}
+        <Card.Heading>{title}</Card.Heading>
+        {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
+      </Card.StaticRoot>
+    </div>
+  );
+};
+
+const meta = {
   title: 'ui/react-ui-stack/Card',
+  render: DefaultStory,
   decorators: [withTheme],
   argTypes: {
     title: {
@@ -48,6 +66,13 @@ const meta: Meta<CardStoryProps> = {
       description: 'Whether to show an icon (when image is not shown)',
     },
   },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     title: faker.commerce.productName(),
     description: faker.lorem.paragraph(),
@@ -56,23 +81,3 @@ const meta: Meta<CardStoryProps> = {
     showIcon: true,
   },
 };
-
-export default meta;
-
-export const Default: StoryObj<CardStoryProps> = {
-  render: ({ title, description, image, showImage, showIcon }: CardStoryProps) => (
-    <div className='max-is-md'>
-      <Card.StaticRoot>
-        <Card.Toolbar>
-          <Card.DragHandle toolbarItem />
-          <Card.ToolbarSeparator variant='gap' />
-          <Card.ToolbarIconButton iconOnly variant='ghost' icon='ph--x--regular' label={'remove card label'} />
-        </Card.Toolbar>
-        {showImage && <Card.Poster alt={title} image={image} />}
-        {!showImage && showIcon && <Card.Poster alt={title} icon='ph--building-office--regular' />}
-        <Card.Heading>{title}</Card.Heading>
-        {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
-      </Card.StaticRoot>
-    </div>
-  ),
-};

package/src/exemplars/Card/Card.tsx

@@ -5,20 +5,21 @@
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, {
-  type ComponentPropsWithoutRef,
   type ComponentPropsWithRef,
+  type ComponentPropsWithoutRef,
   type FC,
-  forwardRef,
   type PropsWithChildren,
+  forwardRef,
 } from 'react';
 
 import { Icon, IconButton, type ThemedClassName, Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
 import { hoverableControls, mx } from '@dxos/react-ui-theme';
 
-import { cardChrome, cardRoot, cardHeading, cardText, cardSpacing } from './fragments';
 import { StackItem } from '../../components';
 import { translationKey } from '../../translations';
 
+import { cardChrome, cardHeading, cardRoot, cardSpacing, cardText } from './fragments';
+
 type SharedCardProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
 
 const CardStaticRoot = forwardRef<HTMLDivElement, SharedCardProps>(
@@ -62,7 +63,7 @@ const CardSurfaceRoot = ({
     return (
       <CardStaticRoot
         classNames={[
-          role === 'card--transclusion' && 'mlb-[1em]',
+          role === 'card--transclusion' && 'mlb-1',
           role === 'card--transclusion' && hoverableControls,
           classNames,
         ]}
@@ -156,9 +157,9 @@ const CardChrome = forwardRef<HTMLDivElement, SharedCardProps>(
   },
 );
 
-const CardText = forwardRef<HTMLParagraphElement, SharedCardProps>(
+const CardText = forwardRef<HTMLDivElement, SharedCardProps>(
   ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'p';
+    const Root = asChild ? Slot : 'div';
     const rootProps = asChild ? { classNames: [cardText, classNames] } : { className: mx(cardText, classNames), role };
     return (
       <Root {...props} {...rootProps} ref={forwardedRef}>

package/src/exemplars/Card/fragments.ts

@@ -6,6 +6,7 @@ export const cardRoot =
   'rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card';
 
 export const cardSpacing = 'pli-cardSpacingInline mlb-cardSpacingBlock';
+export const cardNoSpacing = 'pli-0 mlb-0';
 export const labelSpacing = 'mbs-inputSpacingBlock mbe-labelSpacingBlock';
 
 export const cardDialogContent = 'p-0 bs-content min-bs-[8rem] max-bs-full md:max-is-[32rem] overflow-hidden';
@@ -17,7 +18,7 @@ export const cardDialogSearchListRoot =
 
 export const cardText = cardSpacing;
 
-export const cardHeading = 'text-lg font-medium line-clamp-2';
+export const cardHeading = 'text-lg font-medium line-clamp-2 grow';
 
 export const cardChrome =
   'pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full';

package/src/exemplars/CardStack/CardStack.stories.tsx

@@ -6,17 +6,17 @@ import '@dxos-theme';
 
 import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { faker } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { CardStack } from './CardStack';
 import { StackItem } from '../../components';
 import { Card, CardDragPreview } from '../Card';
 
-// Set a seed for reproducible random values
+import { CardStack } from './CardStack';
+
 faker.seed(0);
 
 type CardItem = {
@@ -130,7 +130,7 @@ const CardStackStory = () => {
                     <Card.Text classNames='line-clamp-2'>{card.description}</Card.Text>
                   </Card.StaticRoot>
                   <StackItem.DragPreview>
-                    {({ item }) => (
+                    {() => (
                       <CardDragPreview.Root>
                         <CardDragPreview.Content>
                           <Card.Toolbar>
@@ -159,11 +159,11 @@ const CardStackStory = () => {
   );
 };
 
-const meta: Meta<typeof CardStackStory> = {
+const meta = {
   title: 'ui/react-ui-stack/CardStack',
   component: CardStackStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
-};
+} satisfies Meta<typeof CardStackStory>;
 
 export default meta;
 

package/src/exemplars/CardStack/CardStack.tsx

@@ -8,7 +8,7 @@ import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import type { ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { railGridHorizontalContainFitContent, Stack, type StackProps } from '../../components';
+import { Stack, type StackProps, railGridHorizontalContainFitContent } from '../../components';
 import { Card } from '../Card';
 
 type SharedCardStackProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };

package/src/hooks/useStackDropForElements.ts

@@ -8,7 +8,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { useLayoutEffect, useState } from 'react';
 
-import { type StackItemRearrangeHandler, type StackItemData, type Orientation } from '../components';
+import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';
 
 /**
  * Hook to handle drag and drop functionality for Stack components.

package/src/testing/CardContainer.tsx

@@ -16,18 +16,21 @@ export const CardContainer = ({
   switch (role) {
     case 'card--popover':
       return <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>;
-    case 'card--intrinsic':
-      return (
-        <IntrinsicCardContainer>
-          <Card.StaticRoot>{children}</Card.StaticRoot>
-        </IntrinsicCardContainer>
-      );
+
     case 'card--extrinsic':
       return (
         <ExtrinsicCardContainer>
           <Card.StaticRoot>{children}</Card.StaticRoot>
         </ExtrinsicCardContainer>
       );
+
+    case 'card--intrinsic':
+      return (
+        <IntrinsicCardContainer>
+          <Card.StaticRoot>{children}</Card.StaticRoot>
+        </IntrinsicCardContainer>
+      );
+
     default:
       return <Card.StaticRoot>{children}</Card.StaticRoot>;
   }