@dxos/react-ui-stack 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-stack",
3
- "version": "0.8.4-main.21d9917",
3
+ "version": "0.8.4-main.2244d791bb",
4
4
  "description": "A stack component.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -53,12 +53,12 @@
53
53
  "@radix-ui/react-slot": "1.1.2",
54
54
  "@radix-ui/react-use-controllable-state": "1.1.0",
55
55
  "react-resize-detector": "^11.0.1",
56
- "@dxos/echo": "0.8.4-main.21d9917",
57
- "@dxos/keyboard": "0.8.4-main.21d9917",
58
- "@dxos/react-ui-attention": "0.8.4-main.21d9917",
59
- "@dxos/react-ui-dnd": "0.8.4-main.21d9917",
60
- "@dxos/react-ui-mosaic": "0.8.4-main.21d9917",
61
- "@dxos/util": "0.8.4-main.21d9917"
56
+ "@dxos/keyboard": "0.8.4-main.2244d791bb",
57
+ "@dxos/react-ui-attention": "0.8.4-main.2244d791bb",
58
+ "@dxos/react-ui-dnd": "0.8.4-main.2244d791bb",
59
+ "@dxos/echo": "0.8.4-main.2244d791bb",
60
+ "@dxos/util": "0.8.4-main.2244d791bb",
61
+ "@dxos/react-ui-mosaic": "0.8.4-main.2244d791bb"
62
62
  },
63
63
  "devDependencies": {
64
64
  "@types/react": "~19.2.7",
@@ -66,27 +66,27 @@
66
66
  "react": "~19.2.3",
67
67
  "react-dom": "~19.2.3",
68
68
  "vite": "7.1.9",
69
- "@dxos/app-framework": "0.8.4-main.21d9917",
70
- "@dxos/app-graph": "0.8.4-main.21d9917",
71
- "@dxos/client": "0.8.4-main.21d9917",
72
- "@dxos/echo": "0.8.4-main.21d9917",
73
- "@dxos/random": "0.8.4-main.21d9917",
74
- "@dxos/echo-db": "0.8.4-main.21d9917",
75
- "@dxos/react-client": "0.8.4-main.21d9917",
76
- "@dxos/storybook-utils": "0.8.4-main.21d9917",
77
- "@dxos/schema": "0.8.4-main.21d9917",
78
- "@dxos/types": "0.8.4-main.21d9917",
79
- "@dxos/react-ui": "0.8.4-main.21d9917",
80
- "@dxos/test-utils": "0.8.4-main.21d9917",
81
- "@dxos/ui-theme": "0.8.4-main.21d9917"
69
+ "@dxos/app-framework": "0.8.4-main.2244d791bb",
70
+ "@dxos/client": "0.8.4-main.2244d791bb",
71
+ "@dxos/echo": "0.8.4-main.2244d791bb",
72
+ "@dxos/echo-db": "0.8.4-main.2244d791bb",
73
+ "@dxos/app-graph": "0.8.4-main.2244d791bb",
74
+ "@dxos/react-client": "0.8.4-main.2244d791bb",
75
+ "@dxos/random": "0.8.4-main.2244d791bb",
76
+ "@dxos/react-ui": "0.8.4-main.2244d791bb",
77
+ "@dxos/schema": "0.8.4-main.2244d791bb",
78
+ "@dxos/test-utils": "0.8.4-main.2244d791bb",
79
+ "@dxos/ui-theme": "0.8.4-main.2244d791bb",
80
+ "@dxos/types": "0.8.4-main.2244d791bb",
81
+ "@dxos/storybook-utils": "0.8.4-main.2244d791bb"
82
82
  },
83
83
  "peerDependencies": {
84
84
  "react": "~19.2.3",
85
85
  "react-dom": "~19.2.3",
86
- "@dxos/client": "0.8.4-main.21d9917",
87
- "@dxos/random": "0.8.4-main.21d9917",
88
- "@dxos/react-ui": "0.8.4-main.21d9917",
89
- "@dxos/ui-theme": "0.8.4-main.21d9917"
86
+ "@dxos/client": "0.8.4-main.2244d791bb",
87
+ "@dxos/random": "0.8.4-main.2244d791bb",
88
+ "@dxos/ui-theme": "0.8.4-main.2244d791bb",
89
+ "@dxos/react-ui": "0.8.4-main.2244d791bb"
90
90
  },
91
91
  "publishConfig": {
92
92
  "access": "public"
@@ -160,7 +160,7 @@ const CardStackStory = () => {
160
160
  const meta = {
161
161
  title: 'ui/react-ui-stack/CardStack',
162
162
  component: CardStackStory,
163
- decorators: [withTheme],
163
+ decorators: [withTheme()],
164
164
  parameters: {
165
165
  layout: 'fullscreen',
166
166
  },
@@ -22,7 +22,6 @@ const cardStackDefaultInlineSizeRem = cardDefaultInlineSize + 2.125;
22
22
 
23
23
  const cardStackRoot = 'flex flex-col';
24
24
 
25
- // TODO(burdon): Root should be headless.
26
25
  const CardStackRoot = forwardRef<HTMLDivElement, SharedCardStackProps>(
27
26
  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
28
27
  const Root = asChild ? Slot : 'div';
@@ -173,6 +172,9 @@ const CardStackDragHandle = Card.DragHandle;
173
172
  // CardStack
174
173
  //
175
174
 
175
+ /**
176
+ * @deprecated Replace with Mosaic.Stack.
177
+ */
176
178
  export const CardStack = {
177
179
  Root: CardStackRoot,
178
180
  Content: CardStackContent,
@@ -4,7 +4,7 @@
4
4
 
5
5
  import React, { type PropsWithChildren } from 'react';
6
6
 
7
- import { IconButton, useTranslation } from '@dxos/react-ui';
7
+ import { IconButton, ScrollArea, useTranslation } from '@dxos/react-ui';
8
8
  import { mx } from '@dxos/ui-theme';
9
9
 
10
10
  import { translationKey } from '../../translations';
@@ -41,11 +41,11 @@ const CardStackDragPreviewContent = ({
41
41
  itemsCount = 0,
42
42
  }: PropsWithChildren<Pick<StackProps, 'itemsCount'>>) => {
43
43
  return (
44
- <div
45
- className={mx('overflow-y-auto flex-1 pli-2 flex flex-col gap-2', 'plb-1', itemsCount > 0 ? 'plb-2' : 'plb-1')}
46
- >
47
- {children}
48
- </div>
44
+ <ScrollArea.Root orientation='vertical'>
45
+ <ScrollArea.Viewport classNames={mx('pli-2 plb-1 gap-2', itemsCount > 0 ? 'plb-2' : 'plb-1')}>
46
+ {children}
47
+ </ScrollArea.Viewport>
48
+ </ScrollArea.Root>
49
49
  );
50
50
  };
51
51
 
@@ -53,6 +53,9 @@ const CardStackDragPreviewFooter = ({ children }: PropsWithChildren<{}>) => {
53
53
  return <div className='p-2 border-bs border-separator'>{children}</div>;
54
54
  };
55
55
 
56
+ /**
57
+ * @deprecated
58
+ */
56
59
  export const CardStackDragPreview = {
57
60
  Root: CardStackDragPreviewRoot,
58
61
  Heading: CardStackDragPreviewHeading,
@@ -132,7 +132,7 @@ const meta = {
132
132
  title: 'ui/react-ui-stack/Stack',
133
133
  component: DefaultStory,
134
134
  argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
135
- decorators: [withTheme],
135
+ decorators: [withTheme()],
136
136
  } satisfies Meta<typeof DefaultStory>;
137
137
 
138
138
  export default meta;
@@ -36,7 +36,7 @@ const meta = {
36
36
  title: 'ui/react-ui-stack/StackItem',
37
37
  component: StackItem.Root as any,
38
38
  render: DefaultStory,
39
- decorators: [withTheme],
39
+ decorators: [withTheme()],
40
40
  parameters: {
41
41
  layout: 'centered',
42
42
  },
@@ -24,10 +24,12 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
24
24
  const style = useMemo(
25
25
  () => ({
26
26
  gridTemplateRows: [
27
- ...(toolbar ? [role === 'section' ? 'calc(var(--toolbar-size) - 1px)' : 'var(--toolbar-size)'] : []),
27
+ toolbar && role === 'section' ? 'calc(var(--toolbar-size) - 1px)' : 'var(--toolbar-size)',
28
28
  '1fr',
29
- ...(statusbar ? ['var(--statusbar-size)'] : []),
30
- ].join(' '),
29
+ statusbar && 'var(--statusbar-size)',
30
+ ]
31
+ .filter(Boolean)
32
+ .join(' '),
31
33
  }),
32
34
  [toolbar, statusbar],
33
35
  );
@@ -40,8 +42,8 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
40
42
  className={mx(
41
43
  'group grid grid-cols-[100%] density-coarse',
42
44
  stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
43
- role === 'section' &&
44
- toolbar &&
45
+ toolbar &&
46
+ role === 'section' &&
45
47
  '[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0',
46
48
  toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator',
47
49
  classNames,