@dxos/react-ui-stack 0.8.4-main.c1de068 → 0.8.4-main.e098934
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/dist/lib/browser/{chunk-P3TQV4BA.mjs → chunk-3V2YUQK5.mjs} +346 -169
- package/dist/lib/browser/chunk-3V2YUQK5.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +5 -1
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/playwright/index.mjs +23 -6
- package/dist/lib/browser/playwright/index.mjs.map +2 -2
- package/dist/lib/browser/testing/index.mjs +3 -3
- package/dist/lib/browser/testing/index.mjs.map +3 -3
- package/dist/lib/node-esm/{chunk-3WVEPAJ4.mjs → chunk-HE3BRF7A.mjs} +346 -169
- package/dist/lib/node-esm/chunk-HE3BRF7A.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +5 -1
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/playwright/index.mjs +23 -6
- package/dist/lib/node-esm/playwright/index.mjs.map +2 -2
- package/dist/lib/node-esm/testing/index.mjs +3 -3
- package/dist/lib/node-esm/testing/index.mjs.map +3 -3
- package/dist/types/src/components/Image/Image.d.ts +11 -0
- package/dist/types/src/components/Image/Image.d.ts.map +1 -0
- package/dist/types/src/components/Image/Image.stories.d.ts +31 -0
- package/dist/types/src/components/Image/Image.stories.d.ts.map +1 -0
- package/dist/types/src/components/Image/index.d.ts +2 -0
- package/dist/types/src/components/Image/index.d.ts.map +1 -0
- package/dist/types/src/components/Stack/Stack.d.ts +9 -2
- package/dist/types/src/components/Stack/Stack.d.ts.map +1 -1
- package/dist/types/src/components/Stack/Stack.stories.d.ts +12 -2
- package/dist/types/src/components/Stack/Stack.stories.d.ts.map +1 -1
- package/dist/types/src/components/StackContext.d.ts +2 -1
- package/dist/types/src/components/StackContext.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItem.d.ts +3 -3
- package/dist/types/src/components/StackItem/StackItem.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItem.stories.d.ts +13 -4
- package/dist/types/src/components/StackItem/StackItem.stories.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItemContent.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItemHeading.d.ts +1 -1
- package/dist/types/src/components/StackItem/StackItemHeading.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItemResizeHandle.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItemSigil.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +1 -0
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/exemplars/Card/Card.d.ts +2 -2
- package/dist/types/src/exemplars/Card/Card.d.ts.map +1 -1
- package/dist/types/src/exemplars/Card/Card.stories.d.ts +34 -3
- package/dist/types/src/exemplars/Card/Card.stories.d.ts.map +1 -1
- package/dist/types/src/exemplars/Card/fragments.d.ts +2 -1
- package/dist/types/src/exemplars/Card/fragments.d.ts.map +1 -1
- package/dist/types/src/exemplars/CardStack/CardStack.d.ts.map +1 -1
- package/dist/types/src/exemplars/CardStack/CardStack.stories.d.ts +6 -2
- package/dist/types/src/exemplars/CardStack/CardStack.stories.d.ts.map +1 -1
- package/dist/types/src/hooks/useStackDropForElements.d.ts +1 -1
- package/dist/types/src/hooks/useStackDropForElements.d.ts.map +1 -1
- package/dist/types/src/testing/CardContainer.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +21 -21
- package/src/components/Image/Image.stories.tsx +58 -0
- package/src/components/Image/Image.tsx +137 -0
- package/src/components/Image/index.ts +5 -0
- package/src/components/Stack/Stack.stories.tsx +6 -5
- package/src/components/Stack/Stack.tsx +160 -18
- package/src/components/StackContext.tsx +2 -1
- package/src/components/StackItem/StackItem.stories.tsx +14 -10
- package/src/components/StackItem/StackItem.tsx +15 -14
- package/src/components/StackItem/StackItemContent.tsx +1 -0
- package/src/components/StackItem/StackItemHeading.tsx +3 -3
- package/src/components/StackItem/StackItemResizeHandle.tsx +2 -1
- package/src/components/StackItem/StackItemSigil.tsx +2 -1
- package/src/components/index.ts +1 -0
- package/src/exemplars/Card/Card.stories.tsx +33 -23
- package/src/exemplars/Card/Card.tsx +11 -11
- package/src/exemplars/Card/fragments.ts +2 -1
- package/src/exemplars/CardStack/CardStack.stories.tsx +6 -6
- package/src/exemplars/CardStack/CardStack.tsx +1 -1
- package/src/hooks/useStackDropForElements.ts +1 -1
- package/src/testing/CardContainer.tsx +9 -6
- package/dist/lib/browser/chunk-P3TQV4BA.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-3WVEPAJ4.mjs.map +0 -7
|
@@ -7,46 +7,47 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
|
|
|
7
7
|
import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
|
|
8
8
|
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
|
|
9
9
|
import {
|
|
10
|
+
type Edge,
|
|
10
11
|
attachClosestEdge,
|
|
11
12
|
extractClosestEdge,
|
|
12
|
-
type Edge,
|
|
13
13
|
} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
14
14
|
import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
15
15
|
import { composeRefs } from '@radix-ui/react-compose-refs';
|
|
16
16
|
import React, {
|
|
17
|
-
forwardRef,
|
|
18
|
-
useLayoutEffect,
|
|
19
|
-
useState,
|
|
20
17
|
type ComponentPropsWithRef,
|
|
21
|
-
useCallback,
|
|
22
18
|
type ReactNode,
|
|
19
|
+
forwardRef,
|
|
20
|
+
useCallback,
|
|
21
|
+
useLayoutEffect,
|
|
23
22
|
useMemo,
|
|
23
|
+
useState,
|
|
24
24
|
} from 'react';
|
|
25
25
|
import { createPortal } from 'react-dom';
|
|
26
26
|
|
|
27
|
-
import { type ThemedClassName
|
|
27
|
+
import { ListItem, type ThemedClassName } from '@dxos/react-ui';
|
|
28
28
|
import { resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
|
|
29
29
|
import { mx } from '@dxos/react-ui-theme';
|
|
30
30
|
|
|
31
|
+
import { type StackItemData, type StackItemSize } from '../defs';
|
|
32
|
+
import { type ItemDragState, StackItemContext, idle, useStack, useStackItem } from '../StackContext';
|
|
33
|
+
|
|
31
34
|
import { StackItemContent, type StackItemContentProps } from './StackItemContent';
|
|
32
35
|
import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
|
|
33
36
|
import {
|
|
34
37
|
StackItemHeading,
|
|
35
38
|
StackItemHeadingLabel,
|
|
36
|
-
type StackItemHeadingProps,
|
|
37
39
|
type StackItemHeadingLabelProps,
|
|
40
|
+
type StackItemHeadingProps,
|
|
38
41
|
StackItemHeadingStickyContent,
|
|
39
42
|
} from './StackItemHeading';
|
|
40
43
|
import { StackItemResizeHandle, type StackItemResizeHandleProps } from './StackItemResizeHandle';
|
|
41
44
|
import {
|
|
42
45
|
StackItemSigil,
|
|
43
|
-
type StackItemSigilProps,
|
|
44
46
|
type StackItemSigilAction,
|
|
45
|
-
type StackItemSigilButtonProps,
|
|
46
47
|
StackItemSigilButton,
|
|
48
|
+
type StackItemSigilButtonProps,
|
|
49
|
+
type StackItemSigilProps,
|
|
47
50
|
} from './StackItemSigil';
|
|
48
|
-
import { useStack, StackItemContext, idle, type ItemDragState, useStackItem } from '../StackContext';
|
|
49
|
-
import { type StackItemSize, type StackItemData } from '../defs';
|
|
50
51
|
|
|
51
52
|
// NOTE: 48rem fills the screen on a MacbookPro with the sidebars closed.
|
|
52
53
|
export const DEFAULT_HORIZONTAL_SIZE = 48 satisfies StackItemSize;
|
|
@@ -89,7 +90,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
|
|
|
89
90
|
const [closestEdge, setEdge] = useState<Edge | null>(null);
|
|
90
91
|
const [sourceId, setSourceId] = useState<string | null>(null);
|
|
91
92
|
const [dragState, setDragState] = useState<ItemDragState>(idle);
|
|
92
|
-
const { orientation, rail, onRearrange } = useStack();
|
|
93
|
+
const { orientation, rail, onRearrange, size: stackSize, stackId } = useStack();
|
|
93
94
|
const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =
|
|
94
95
|
useState(propsSize);
|
|
95
96
|
|
|
@@ -239,10 +240,10 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
|
|
|
239
240
|
role === 'section' && orientation !== 'horizontal' && 'border-be border-subduedSeparator',
|
|
240
241
|
classNames,
|
|
241
242
|
)}
|
|
242
|
-
data-dx-stack-item
|
|
243
|
+
data-dx-stack-item={stackId}
|
|
243
244
|
{...resizeAttributes}
|
|
244
245
|
style={{
|
|
245
|
-
...sizeStyle(size, orientation),
|
|
246
|
+
...(stackSize !== 'split' && sizeStyle(size, orientation)),
|
|
246
247
|
...(Number.isFinite(order) && {
|
|
247
248
|
[orientation === 'horizontal' ? 'gridColumn' : 'gridRow']: `${order}`,
|
|
248
249
|
}),
|
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
6
6
|
import { Slot } from '@radix-ui/react-slot';
|
|
7
7
|
import React, {
|
|
8
|
-
type ComponentPropsWithoutRef,
|
|
9
8
|
type ComponentPropsWithRef,
|
|
10
|
-
|
|
9
|
+
type ComponentPropsWithoutRef,
|
|
11
10
|
type PropsWithChildren,
|
|
11
|
+
forwardRef,
|
|
12
12
|
} from 'react';
|
|
13
13
|
|
|
14
14
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
15
|
-
import {
|
|
15
|
+
import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
|
|
16
16
|
import { mx } from '@dxos/react-ui-theme';
|
|
17
17
|
|
|
18
18
|
import { useStack } from '../StackContext';
|
|
@@ -6,9 +6,10 @@ import React from 'react';
|
|
|
6
6
|
|
|
7
7
|
import { ResizeHandle } from '@dxos/react-ui-dnd';
|
|
8
8
|
|
|
9
|
-
import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
|
|
10
9
|
import { useStack, useStackItem } from '../StackContext';
|
|
11
10
|
|
|
11
|
+
import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
|
|
12
|
+
|
|
12
13
|
const MIN_WIDTH = 20;
|
|
13
14
|
const MIN_HEIGHT = 3;
|
|
14
15
|
|
|
@@ -11,9 +11,10 @@ import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-at
|
|
|
11
11
|
import { descriptionText, mx } from '@dxos/react-ui-theme';
|
|
12
12
|
import { getHostPlatform } from '@dxos/util';
|
|
13
13
|
|
|
14
|
-
import { MenuSignifierHorizontal } from './MenuSignifier';
|
|
15
14
|
import { translationKey } from '../../translations';
|
|
16
15
|
|
|
16
|
+
import { MenuSignifierHorizontal } from './MenuSignifier';
|
|
17
|
+
|
|
17
18
|
export type KeyBinding = {
|
|
18
19
|
windows?: string;
|
|
19
20
|
macos?: string;
|
package/src/components/index.ts
CHANGED
|
@@ -12,7 +12,6 @@ import { withTheme } from '@dxos/storybook-utils';
|
|
|
12
12
|
|
|
13
13
|
import { Card } from './Card';
|
|
14
14
|
|
|
15
|
-
// Set a seed for reproducible random values
|
|
16
15
|
faker.seed(0);
|
|
17
16
|
|
|
18
17
|
type CardStoryProps = {
|
|
@@ -23,9 +22,31 @@ type CardStoryProps = {
|
|
|
23
22
|
showIcon: boolean;
|
|
24
23
|
};
|
|
25
24
|
|
|
26
|
-
const
|
|
25
|
+
const DefaultStory = ({ title, description, image, showImage, showIcon }: CardStoryProps) => {
|
|
26
|
+
return (
|
|
27
|
+
<div className='max-is-md'>
|
|
28
|
+
<Card.StaticRoot>
|
|
29
|
+
<Card.Toolbar>
|
|
30
|
+
<Card.DragHandle toolbarItem />
|
|
31
|
+
<Card.ToolbarSeparator variant='gap' />
|
|
32
|
+
<Card.ToolbarIconButton iconOnly variant='ghost' icon='ph--x--regular' label={'remove card label'} />
|
|
33
|
+
</Card.Toolbar>
|
|
34
|
+
{showImage && <Card.Poster alt={title} image={image} />}
|
|
35
|
+
{!showImage && showIcon && <Card.Poster alt={title} icon='ph--building-office--regular' />}
|
|
36
|
+
<Card.Heading>{title}</Card.Heading>
|
|
37
|
+
{description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
|
|
38
|
+
</Card.StaticRoot>
|
|
39
|
+
</div>
|
|
40
|
+
);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
const meta = {
|
|
27
44
|
title: 'ui/react-ui-stack/Card',
|
|
45
|
+
render: DefaultStory,
|
|
28
46
|
decorators: [withTheme],
|
|
47
|
+
parameters: {
|
|
48
|
+
layout: 'centered',
|
|
49
|
+
},
|
|
29
50
|
argTypes: {
|
|
30
51
|
title: {
|
|
31
52
|
control: 'text',
|
|
@@ -48,31 +69,20 @@ const meta: Meta<CardStoryProps> = {
|
|
|
48
69
|
description: 'Whether to show an icon (when image is not shown)',
|
|
49
70
|
},
|
|
50
71
|
},
|
|
72
|
+
} satisfies Meta<typeof DefaultStory>;
|
|
73
|
+
|
|
74
|
+
export default meta;
|
|
75
|
+
|
|
76
|
+
type Story = StoryObj<typeof meta>;
|
|
77
|
+
|
|
78
|
+
const image = faker.image.url();
|
|
79
|
+
|
|
80
|
+
export const Default: Story = {
|
|
51
81
|
args: {
|
|
52
82
|
title: faker.commerce.productName(),
|
|
53
83
|
description: faker.lorem.paragraph(),
|
|
54
|
-
image
|
|
84
|
+
image,
|
|
55
85
|
showImage: true,
|
|
56
86
|
showIcon: true,
|
|
57
87
|
},
|
|
58
88
|
};
|
|
59
|
-
|
|
60
|
-
export default meta;
|
|
61
|
-
|
|
62
|
-
export const Default: StoryObj<CardStoryProps> = {
|
|
63
|
-
render: ({ title, description, image, showImage, showIcon }: CardStoryProps) => (
|
|
64
|
-
<div className='max-is-md'>
|
|
65
|
-
<Card.StaticRoot>
|
|
66
|
-
<Card.Toolbar>
|
|
67
|
-
<Card.DragHandle toolbarItem />
|
|
68
|
-
<Card.ToolbarSeparator variant='gap' />
|
|
69
|
-
<Card.ToolbarIconButton iconOnly variant='ghost' icon='ph--x--regular' label={'remove card label'} />
|
|
70
|
-
</Card.Toolbar>
|
|
71
|
-
{showImage && <Card.Poster alt={title} image={image} />}
|
|
72
|
-
{!showImage && showIcon && <Card.Poster alt={title} icon='ph--building-office--regular' />}
|
|
73
|
-
<Card.Heading>{title}</Card.Heading>
|
|
74
|
-
{description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
|
|
75
|
-
</Card.StaticRoot>
|
|
76
|
-
</div>
|
|
77
|
-
),
|
|
78
|
-
};
|
|
@@ -5,20 +5,21 @@
|
|
|
5
5
|
import { Primitive } from '@radix-ui/react-primitive';
|
|
6
6
|
import { Slot } from '@radix-ui/react-slot';
|
|
7
7
|
import React, {
|
|
8
|
-
type ComponentPropsWithoutRef,
|
|
9
8
|
type ComponentPropsWithRef,
|
|
9
|
+
type ComponentPropsWithoutRef,
|
|
10
10
|
type FC,
|
|
11
|
-
forwardRef,
|
|
12
11
|
type PropsWithChildren,
|
|
12
|
+
forwardRef,
|
|
13
13
|
} from 'react';
|
|
14
14
|
|
|
15
15
|
import { Icon, IconButton, type ThemedClassName, Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
|
|
16
16
|
import { hoverableControls, mx } from '@dxos/react-ui-theme';
|
|
17
17
|
|
|
18
|
-
import {
|
|
19
|
-
import { StackItem } from '../../components';
|
|
18
|
+
import { Image, StackItem } from '../../components';
|
|
20
19
|
import { translationKey } from '../../translations';
|
|
21
20
|
|
|
21
|
+
import { cardChrome, cardHeading, cardRoot, cardSpacing, cardText } from './fragments';
|
|
22
|
+
|
|
22
23
|
type SharedCardProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
|
|
23
24
|
|
|
24
25
|
const CardStaticRoot = forwardRef<HTMLDivElement, SharedCardProps>(
|
|
@@ -62,7 +63,7 @@ const CardSurfaceRoot = ({
|
|
|
62
63
|
return (
|
|
63
64
|
<CardStaticRoot
|
|
64
65
|
classNames={[
|
|
65
|
-
role === 'card--transclusion' && 'mlb-
|
|
66
|
+
role === 'card--transclusion' && 'mlb-1',
|
|
66
67
|
role === 'card--transclusion' && hoverableControls,
|
|
67
68
|
classNames,
|
|
68
69
|
]}
|
|
@@ -125,15 +126,14 @@ type CardPosterProps = {
|
|
|
125
126
|
const CardPoster = (props: CardPosterProps) => {
|
|
126
127
|
const aspect = props.aspect === 'auto' ? 'aspect-auto' : 'aspect-video';
|
|
127
128
|
if (props.image) {
|
|
128
|
-
return
|
|
129
|
-
<img className={`dx-card__poster ${aspect} object-cover is-full bs-auto`} src={props.image} alt={props.alt} />
|
|
130
|
-
);
|
|
129
|
+
return <Image classNames={[`dx-card__poster is-full __bs-auto`, aspect]} src={props.image} alt={props.alt} />;
|
|
131
130
|
}
|
|
131
|
+
|
|
132
132
|
if (props.icon) {
|
|
133
133
|
return (
|
|
134
134
|
<div
|
|
135
135
|
role='image'
|
|
136
|
-
className={`dx-card__poster grid
|
|
136
|
+
className={mx(`dx-card__poster grid place-items-center bg-inputSurface text-subdued`, aspect)}
|
|
137
137
|
aria-label={props.alt}
|
|
138
138
|
>
|
|
139
139
|
<Icon icon={props.icon} size={10} />
|
|
@@ -156,9 +156,9 @@ const CardChrome = forwardRef<HTMLDivElement, SharedCardProps>(
|
|
|
156
156
|
},
|
|
157
157
|
);
|
|
158
158
|
|
|
159
|
-
const CardText = forwardRef<
|
|
159
|
+
const CardText = forwardRef<HTMLDivElement, SharedCardProps>(
|
|
160
160
|
({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
|
|
161
|
-
const Root = asChild ? Slot : '
|
|
161
|
+
const Root = asChild ? Slot : 'div';
|
|
162
162
|
const rootProps = asChild ? { classNames: [cardText, classNames] } : { className: mx(cardText, classNames), role };
|
|
163
163
|
return (
|
|
164
164
|
<Root {...props} {...rootProps} ref={forwardedRef}>
|
|
@@ -6,6 +6,7 @@ export const cardRoot =
|
|
|
6
6
|
'rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card';
|
|
7
7
|
|
|
8
8
|
export const cardSpacing = 'pli-cardSpacingInline mlb-cardSpacingBlock';
|
|
9
|
+
export const cardNoSpacing = 'pli-0 mlb-0';
|
|
9
10
|
export const labelSpacing = 'mbs-inputSpacingBlock mbe-labelSpacingBlock';
|
|
10
11
|
|
|
11
12
|
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 =
|
|
|
17
18
|
|
|
18
19
|
export const cardText = cardSpacing;
|
|
19
20
|
|
|
20
|
-
export const cardHeading = 'text-lg font-medium line-clamp-2';
|
|
21
|
+
export const cardHeading = 'text-lg font-medium line-clamp-2 grow';
|
|
21
22
|
|
|
22
23
|
export const cardChrome =
|
|
23
24
|
'pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full';
|
|
@@ -6,17 +6,17 @@ import '@dxos-theme';
|
|
|
6
6
|
|
|
7
7
|
import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
8
8
|
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
9
|
-
import React, {
|
|
9
|
+
import React, { useCallback, useState } from 'react';
|
|
10
10
|
|
|
11
11
|
import { faker } from '@dxos/random';
|
|
12
12
|
import { IconButton } from '@dxos/react-ui';
|
|
13
13
|
import { withLayout, withTheme } from '@dxos/storybook-utils';
|
|
14
14
|
|
|
15
|
-
import { CardStack } from './CardStack';
|
|
16
15
|
import { StackItem } from '../../components';
|
|
17
16
|
import { Card, CardDragPreview } from '../Card';
|
|
18
17
|
|
|
19
|
-
|
|
18
|
+
import { CardStack } from './CardStack';
|
|
19
|
+
|
|
20
20
|
faker.seed(0);
|
|
21
21
|
|
|
22
22
|
type CardItem = {
|
|
@@ -130,7 +130,7 @@ const CardStackStory = () => {
|
|
|
130
130
|
<Card.Text classNames='line-clamp-2'>{card.description}</Card.Text>
|
|
131
131
|
</Card.StaticRoot>
|
|
132
132
|
<StackItem.DragPreview>
|
|
133
|
-
{(
|
|
133
|
+
{() => (
|
|
134
134
|
<CardDragPreview.Root>
|
|
135
135
|
<CardDragPreview.Content>
|
|
136
136
|
<Card.Toolbar>
|
|
@@ -159,11 +159,11 @@ const CardStackStory = () => {
|
|
|
159
159
|
);
|
|
160
160
|
};
|
|
161
161
|
|
|
162
|
-
const meta
|
|
162
|
+
const meta = {
|
|
163
163
|
title: 'ui/react-ui-stack/CardStack',
|
|
164
164
|
component: CardStackStory,
|
|
165
165
|
decorators: [withTheme, withLayout({ fullscreen: true })],
|
|
166
|
-
}
|
|
166
|
+
} satisfies Meta<typeof CardStackStory>;
|
|
167
167
|
|
|
168
168
|
export default meta;
|
|
169
169
|
|
|
@@ -8,7 +8,7 @@ import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
|
|
|
8
8
|
import type { ThemedClassName } from '@dxos/react-ui';
|
|
9
9
|
import { mx } from '@dxos/react-ui-theme';
|
|
10
10
|
|
|
11
|
-
import {
|
|
11
|
+
import { Stack, type StackProps, railGridHorizontalContainFitContent } from '../../components';
|
|
12
12
|
import { Card } from '../Card';
|
|
13
13
|
|
|
14
14
|
type SharedCardStackProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
|
|
@@ -8,7 +8,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
|
|
|
8
8
|
import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
9
9
|
import { useLayoutEffect, useState } from 'react';
|
|
10
10
|
|
|
11
|
-
import { type
|
|
11
|
+
import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';
|
|
12
12
|
|
|
13
13
|
/**
|
|
14
14
|
* Hook to handle drag and drop functionality for Stack components.
|
|
@@ -16,18 +16,21 @@ export const CardContainer = ({
|
|
|
16
16
|
switch (role) {
|
|
17
17
|
case 'card--popover':
|
|
18
18
|
return <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>;
|
|
19
|
-
|
|
20
|
-
return (
|
|
21
|
-
<IntrinsicCardContainer>
|
|
22
|
-
<Card.StaticRoot>{children}</Card.StaticRoot>
|
|
23
|
-
</IntrinsicCardContainer>
|
|
24
|
-
);
|
|
19
|
+
|
|
25
20
|
case 'card--extrinsic':
|
|
26
21
|
return (
|
|
27
22
|
<ExtrinsicCardContainer>
|
|
28
23
|
<Card.StaticRoot>{children}</Card.StaticRoot>
|
|
29
24
|
</ExtrinsicCardContainer>
|
|
30
25
|
);
|
|
26
|
+
|
|
27
|
+
case 'card--intrinsic':
|
|
28
|
+
return (
|
|
29
|
+
<IntrinsicCardContainer>
|
|
30
|
+
<Card.StaticRoot>{children}</Card.StaticRoot>
|
|
31
|
+
</IntrinsicCardContainer>
|
|
32
|
+
);
|
|
33
|
+
|
|
31
34
|
default:
|
|
32
35
|
return <Card.StaticRoot>{children}</Card.StaticRoot>;
|
|
33
36
|
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/StackContext.tsx", "../../../src/components/Stack/Stack.tsx", "../../../src/hooks/useStackDropForElements.ts", "../../../src/translations.ts", "../../../src/components/StackItem/StackItem.tsx", "../../../src/components/StackItem/StackItemContent.tsx", "../../../src/components/StackItem/StackItemDragHandle.tsx", "../../../src/components/StackItem/StackItemHeading.tsx", "../../../src/components/StackItem/StackItemResizeHandle.tsx", "../../../src/components/StackItem/StackItemSigil.tsx", "../../../src/components/StackItem/MenuSignifier.tsx", "../../../src/exemplars/Card/fragments.ts", "../../../src/exemplars/Card/Card.tsx", "../../../src/exemplars/Card/CardDragPreview.tsx", "../../../src/exemplars/CardStack/CardStack.tsx", "../../../src/exemplars/CardStack/CardStackDragPreview.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { createContext, useContext } from 'react';\n\nimport { type Orientation, type Size } from './Stack';\nimport { type StackItemSize, type StackItemRearrangeHandler } from './defs';\n\nexport type StackContextValue = {\n orientation: Orientation;\n rail: boolean;\n size: Size;\n onRearrange?: StackItemRearrangeHandler;\n};\n\nexport const StackContext = createContext<StackContextValue>({\n orientation: 'vertical',\n rail: true,\n size: 'intrinsic',\n});\n\nexport const useStack = () => useContext(StackContext);\n\nexport type ItemDragState =\n | {\n type: 'idle';\n }\n | {\n type: 'preview';\n container: HTMLElement;\n item: any;\n }\n | {\n type: 'is-dragging';\n item: any;\n };\n\nexport const idle: ItemDragState = { type: 'idle' };\n\nexport type StackItemContextValue = {\n selfDragHandleRef: (element: HTMLDivElement | null) => void;\n size: StackItemSize;\n setSize: (nextSize: StackItemSize, commit?: boolean) => void;\n state: ItemDragState;\n setState: (state: ItemDragState) => void;\n role?: string;\n};\n\nexport const StackItemContext = createContext<StackItemContextValue>({\n selfDragHandleRef: () => {},\n size: 'min-content',\n setSize: () => {},\n state: idle,\n setState: () => {},\n});\n\nexport const useStackItem = () => useContext(StackItemContext);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n Children,\n type CSSProperties,\n type ComponentPropsWithRef,\n forwardRef,\n useState,\n useMemo,\n useCallback,\n useEffect,\n} from 'react';\n\nimport { type ThemedClassName, ListItem } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStackDropForElements } from '../../hooks';\nimport { StackContext } from '../StackContext';\nimport { type StackContextValue } from '../defs';\n\nexport type Orientation = 'horizontal' | 'vertical';\nexport type Size = 'intrinsic' | 'contain' | 'contain-fit-content';\n\nexport type StackProps = Omit<ThemedClassName<ComponentPropsWithRef<'div'>>, 'aria-orientation'> &\n Partial<StackContextValue> & {\n itemsCount?: number;\n getDropElement?: (stackElement: HTMLDivElement) => HTMLDivElement;\n separatorOnScroll?: number;\n };\n\nexport const railGridHorizontal = 'grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';\nexport const railGridVertical = 'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';\n\n// TODO(ZaymonFC): Magic 2px to stop overflow (tabster dummies... ask @thure).\nexport const railGridHorizontalContainFitContent =\n 'grid-rows-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]';\nexport const railGridVerticalContainFitContent =\n 'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]';\n\nexport const autoScrollRootAttributes = { 'data-drag-autoscroll': 'idle' };\n\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n (\n {\n children,\n classNames,\n style,\n orientation = 'vertical',\n rail = true,\n size = 'intrinsic',\n onRearrange,\n itemsCount = Children.count(children),\n getDropElement,\n separatorOnScroll,\n ...props\n },\n forwardedRef,\n ) => {\n const [stackElement, stackRef] = useState<HTMLDivElement | null>(null);\n const composedItemRef = composeRefs<HTMLDivElement>(stackRef, forwardedRef);\n const arrowNavigationAttrs = useArrowNavigationGroup({ axis: orientation });\n\n const styles: CSSProperties = {\n [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']:\n `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,\n ...style,\n };\n\n const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);\n\n const { dropping } = useStackDropForElements({\n id: props.id,\n element: getDropElement && stackElement ? getDropElement(stackElement) : stackElement,\n scrollElement: stackElement,\n selfDroppable,\n orientation,\n onRearrange,\n });\n\n const handleScroll = useCallback(() => {\n if (stackElement && Number.isFinite(separatorOnScroll)) {\n const scrollPosition = orientation === 'horizontal' ? stackElement.scrollLeft : stackElement.scrollTop;\n const scrollSize = orientation === 'horizontal' ? stackElement.scrollWidth : stackElement.scrollHeight;\n const clientSize = orientation === 'horizontal' ? stackElement.clientWidth : stackElement.clientHeight;\n const separatorHost = stackElement.closest('[data-scroll-separator]');\n if (separatorHost) {\n separatorHost.setAttribute('data-scroll-separator', String(scrollPosition > separatorOnScroll!));\n separatorHost.setAttribute(\n 'data-scroll-separator-end',\n String(scrollSize - (scrollPosition + clientSize) > separatorOnScroll!),\n );\n }\n }\n }, [stackElement, separatorOnScroll, orientation]);\n\n const gridClasses = useMemo(() => {\n if (!rail) {\n return orientation === 'horizontal' ? 'grid-rows-1 pli-1' : 'grid-cols-1 plb-1';\n }\n if (orientation === 'horizontal') {\n return size === 'contain-fit-content' ? railGridHorizontalContainFitContent : railGridHorizontal;\n } else {\n return size === 'contain-fit-content' ? railGridVerticalContainFitContent : railGridVertical;\n }\n }, [rail, orientation, size]);\n\n useEffect(() => {\n if (!(stackElement && Number.isFinite(separatorOnScroll))) {\n return;\n }\n\n const observer = new MutationObserver(() => {\n handleScroll();\n });\n\n observer.observe(stackElement, { childList: true, subtree: true });\n\n return () => {\n observer.disconnect();\n };\n }, [stackElement, handleScroll]);\n\n return (\n <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>\n <div\n {...props}\n {...arrowNavigationAttrs}\n className={mx(\n 'grid relative',\n gridClasses,\n (size === 'contain' || size === 'contain-fit-content') &&\n (orientation === 'horizontal'\n ? 'overflow-x-auto min-bs-0 max-bs-full bs-full'\n : 'overflow-y-auto min-is-0 max-is-full is-full'),\n classNames,\n )}\n data-rail={rail}\n aria-orientation={orientation}\n style={styles}\n ref={composedItemRef}\n {...(Number.isFinite(separatorOnScroll) && { onScroll: handleScroll })}\n >\n {children}\n {selfDroppable && dropping && (\n <ListItem.DropIndicator\n lineInset={8}\n terminalInset={-8}\n gap={-8}\n edge={orientation === 'horizontal' ? 'left' : 'top'}\n />\n )}\n </div>\n </StackContext.Provider>\n );\n },\n);\n\nexport { StackContext };\n\nexport type { StackContextValue };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { useLayoutEffect, useState } from 'react';\n\nimport { type StackItemRearrangeHandler, type StackItemData, type Orientation } from '../components';\n\n/**\n * Hook to handle drag and drop functionality for Stack components.\n */\nexport const useStackDropForElements = ({\n id,\n element,\n scrollElement = element,\n selfDroppable,\n orientation,\n onRearrange,\n}: {\n id?: string;\n element: HTMLDivElement | null;\n scrollElement?: HTMLDivElement | null;\n selfDroppable: boolean;\n orientation: Orientation;\n onRearrange?: StackItemRearrangeHandler;\n}) => {\n const [dropping, setDropping] = useState(false);\n\n useLayoutEffect(() => {\n if (!element || !selfDroppable) {\n return;\n }\n\n const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';\n\n return combine(\n dropTargetForElements({\n element,\n getData: ({ input, element }) => {\n return attachClosestEdge(\n { id, type: orientation === 'horizontal' ? 'card' : 'column' },\n { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },\n );\n },\n onDragEnter: ({ source }) => {\n if (source.data.type === acceptSourceType) {\n setDropping(true);\n }\n },\n onDrag: ({ source }) => {\n if (source.data.type === acceptSourceType) {\n setDropping(true);\n }\n },\n onDragLeave: () => {\n return setDropping(false);\n },\n onDrop: ({ self, source }) => {\n setDropping(false);\n if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {\n onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));\n }\n },\n }),\n autoScrollForElements({\n element: scrollElement as Element,\n getAllowedAxis: () => orientation,\n }),\n );\n }, [element, scrollElement, selfDroppable, orientation, id, onRearrange]);\n\n return { dropping };\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = 'react-ui-stack';\n\nexport const translations = [\n {\n 'en-US': {\n [translationKey]: {\n 'resize label': 'Drag to resize',\n 'drag handle label': 'Drag to rearrange',\n 'pin start label': 'Pin to the left sidebar',\n 'pin end label': 'Pin to the right sidebar',\n 'increment start label': 'Move to the left',\n 'increment end label': 'Move to the right',\n 'close label': 'Close',\n 'minify label': 'Minify',\n },\n },\n },\n] as const satisfies Resource[];\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';\nimport { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';\nimport {\n attachClosestEdge,\n extractClosestEdge,\n type Edge,\n} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n forwardRef,\n useLayoutEffect,\n useState,\n type ComponentPropsWithRef,\n useCallback,\n type ReactNode,\n useMemo,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { type ThemedClassName, ListItem } from '@dxos/react-ui';\nimport { resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { StackItemContent, type StackItemContentProps } from './StackItemContent';\nimport { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';\nimport {\n StackItemHeading,\n StackItemHeadingLabel,\n type StackItemHeadingProps,\n type StackItemHeadingLabelProps,\n StackItemHeadingStickyContent,\n} from './StackItemHeading';\nimport { StackItemResizeHandle, type StackItemResizeHandleProps } from './StackItemResizeHandle';\nimport {\n StackItemSigil,\n type StackItemSigilProps,\n type StackItemSigilAction,\n type StackItemSigilButtonProps,\n StackItemSigilButton,\n} from './StackItemSigil';\nimport { useStack, StackItemContext, idle, type ItemDragState, useStackItem } from '../StackContext';\nimport { type StackItemSize, type StackItemData } from '../defs';\n\n// NOTE: 48rem fills the screen on a MacbookPro with the sidebars closed.\nexport const DEFAULT_HORIZONTAL_SIZE = 48 satisfies StackItemSize;\nexport const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;\nexport const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;\n\ntype StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n item: Omit<StackItemData, 'type'>;\n order?: number;\n prevSiblingId?: string;\n nextSiblingId?: string;\n size?: StackItemSize;\n onSizeChange?: (nextSize: StackItemSize) => void;\n role?: 'article' | 'section';\n disableRearrange?: boolean;\n focusIndicatorVariant?: 'over-all' | 'group';\n};\n\nconst StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(\n (\n {\n item,\n children,\n classNames,\n size: propsSize,\n onSizeChange,\n role,\n order,\n prevSiblingId,\n nextSiblingId,\n style,\n disableRearrange,\n focusIndicatorVariant = 'over-all',\n ...props\n },\n forwardedRef,\n ) => {\n const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);\n const [selfDragHandleElement, selfDragHandleRef] = useState<HTMLDivElement | null>(null);\n const [closestEdge, setEdge] = useState<Edge | null>(null);\n const [sourceId, setSourceId] = useState<string | null>(null);\n const [dragState, setDragState] = useState<ItemDragState>(idle);\n const { orientation, rail, onRearrange } = useStack();\n const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =\n useState(propsSize);\n\n const Root = role ?? 'div';\n\n const composedItemRef = composeRefs<HTMLDivElement>(itemRef, forwardedRef);\n\n const setSize = useCallback(\n (nextSize: StackItemSize, commit?: boolean) => {\n setInternalSize(nextSize);\n if (commit) {\n onSizeChange?.(nextSize);\n }\n },\n [onSizeChange],\n );\n\n const type = orientation === 'horizontal' ? 'column' : 'card';\n\n useLayoutEffect(() => {\n if (!itemElement || !onRearrange || disableRearrange) {\n return;\n }\n\n return combine(\n draggable({\n element: itemElement,\n ...(selfDragHandleElement && { dragHandle: selfDragHandleElement }),\n getInitialData: () => ({ id: item.id, type }),\n onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {\n document.body.setAttribute('data-drag-preview', 'true');\n const offsetFn = preserveOffsetOnSource({ element: source.element, input: location.current.input });\n const rect = source.element.getBoundingClientRect();\n setCustomNativeDragPreview({\n nativeSetDragImage,\n getOffset: ({ container }) => {\n return offsetFn({ container });\n },\n render: ({ container }) => {\n container.style.width = rect.width + 'px';\n setDragState({ type: 'preview', container, item });\n return () => {};\n },\n });\n },\n onDragStart: () => {\n document.body.removeAttribute('data-drag-preview');\n itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'active');\n setDragState({ type: 'is-dragging', item });\n },\n onDrop: () => {\n itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'idle');\n setDragState(idle);\n },\n }),\n dropTargetForElements({\n element: itemElement,\n getData: ({ input, element }) => {\n return attachClosestEdge(\n { id: item.id, type },\n { input, element, allowedEdges: orientation === 'horizontal' ? ['left', 'right'] : ['top', 'bottom'] },\n );\n },\n onDragEnter: ({ self, source }) => {\n if (source.data.type === self.data.type) {\n setEdge(extractClosestEdge(self.data));\n setSourceId(source.data.id as string);\n }\n },\n onDrag: ({ self, source }) => {\n if (source.data.type === self.data.type) {\n setEdge(extractClosestEdge(self.data));\n setSourceId(source.data.id as string);\n }\n },\n onDragLeave: () => {\n setEdge(null);\n setSourceId(null);\n },\n onDrop: ({ self, source }) => {\n setEdge(null);\n setSourceId(null);\n if (source.data.type === self.data.type) {\n onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));\n }\n },\n }),\n );\n }, [orientation, item, onRearrange, selfDragHandleElement, itemElement]);\n\n const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });\n\n // Determine if the drop would result in any changes\n const shouldShowDropIndicator = () => {\n if (!closestEdge || !sourceId) {\n return false;\n }\n\n // Don't show indicator when dragged item is over itself\n if (sourceId === item.id) {\n return false;\n }\n\n // Don't show indicator when dragged item is over the trailing edge of its previous sibling\n const isTrailingEdgeOfPrevSibling =\n prevSiblingId !== undefined &&\n sourceId === prevSiblingId &&\n ((orientation === 'horizontal' && closestEdge === 'left') ||\n (orientation === 'vertical' && closestEdge === 'top'));\n if (isTrailingEdgeOfPrevSibling) {\n return false;\n }\n\n // Don't show indicator when dragged item is over the leading edge of its next sibling\n const isLeadingEdgeOfNextSibling =\n nextSiblingId !== undefined &&\n sourceId === nextSiblingId &&\n ((orientation === 'horizontal' && closestEdge === 'right') ||\n (orientation === 'vertical' && closestEdge === 'bottom'));\n if (isLeadingEdgeOfNextSibling) {\n return false;\n }\n\n return true;\n };\n\n const stackItemContextValue = useMemo(\n () => ({ selfDragHandleRef, size, setSize, state: dragState, setState: setDragState, role }),\n [selfDragHandleRef, size, setSize, dragState, setDragState, role],\n );\n\n return (\n <StackItemContext.Provider value={stackItemContextValue}>\n <Root\n {...props}\n tabIndex={0}\n {...focusableGroupAttrs}\n className={mx(\n 'group/stack-item grid relative',\n focusIndicatorVariant === 'over-all'\n ? 'dx-focus-ring-inset-over-all'\n : orientation === 'horizontal'\n ? 'dx-focus-ring-group-x'\n : 'dx-focus-ring-group-y',\n orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',\n rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),\n role === 'section' && orientation !== 'horizontal' && 'border-be border-subduedSeparator',\n classNames,\n )}\n data-dx-stack-item\n {...resizeAttributes}\n style={{\n ...sizeStyle(size, orientation),\n ...(Number.isFinite(order) && {\n [orientation === 'horizontal' ? 'gridColumn' : 'gridRow']: `${order}`,\n }),\n ...style,\n }}\n ref={composedItemRef}\n >\n {children}\n {shouldShowDropIndicator() && closestEdge && (\n <ListItem.DropIndicator lineInset={8} terminalInset={-8} edge={closestEdge} />\n )}\n </Root>\n </StackItemContext.Provider>\n );\n },\n);\n\ntype StackItemDragPreviewProps = {\n children: ({ item }: { item: any }) => ReactNode;\n};\n\nexport const StackItemDragPreview = ({ children }: StackItemDragPreviewProps) => {\n const { state } = useStackItem();\n return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;\n};\n\nexport const StackItem = {\n Root: StackItemRoot,\n Content: StackItemContent,\n Heading: StackItemHeading,\n HeadingLabel: StackItemHeadingLabel,\n HeadingStickyContent: StackItemHeadingStickyContent,\n ResizeHandle: StackItemResizeHandle,\n DragHandle: StackItemDragHandle,\n Sigil: StackItemSigil,\n SigilButton: StackItemSigilButton,\n DragPreview: StackItemDragPreview,\n};\n\nexport type {\n StackItemRootProps,\n StackItemContentProps,\n StackItemHeadingProps,\n StackItemHeadingLabelProps,\n StackItemResizeHandleProps,\n StackItemDragHandleProps,\n StackItemSigilProps,\n StackItemSigilButtonProps,\n StackItemSigilAction,\n StackItemDragPreviewProps,\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type ComponentPropsWithoutRef, forwardRef, useMemo } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStack, useStackItem } from '../StackContext';\n\nexport type StackItemContentProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'role'>> & {\n /**\n * This flag is required in order to clarify a developer experience that seemed like it needed extra boilerplate\n * (`row-span-2`) or was buggy. See the description of the StackItem.Content component itself for more information.\n */\n toolbar?: boolean;\n\n /**\n * Whether to provide for the layout of a statusbar after the content.\n */\n statusbar?: boolean;\n\n /**\n * Whether the consumer intends to do something custom and typical affordances should not apply\n */\n layoutManaged?: boolean;\n\n /**\n * Whether to set a certain aspect ratio on the content, including the toolbar and statusbar. This is provided for\n * convenience and consistency; it can instead be specified by the `classNames` or `style` props as needed.\n */\n size?: 'intrinsic' | 'video' | 'square';\n};\n\n/**\n * This component should be used by plugins for rendering content within a stack item, a.k.a. a “plank” or “section”.\n * The `toolbar` flag must be provided since this component provides for the layout of content with the toolbar.\n */\nexport const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps>(\n ({ children, toolbar, statusbar, layoutManaged, classNames, size = 'intrinsic', ...props }, forwardedRef) => {\n const { size: stackItemSize } = useStack();\n const { role } = useStackItem();\n const style = useMemo(\n () =>\n layoutManaged\n ? {}\n : {\n gridTemplateRows: [\n ...(toolbar ? [role === 'section' ? 'calc(var(--toolbar-size) - 1px)' : 'var(--toolbar-size)'] : []),\n '1fr',\n ...(statusbar ? ['var(--statusbar-size)'] : []),\n ].join(' '),\n },\n [toolbar, statusbar, layoutManaged],\n );\n return (\n <div\n role='none'\n {...props}\n className={mx(\n 'group grid grid-cols-[100%] density-coarse',\n stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',\n size === 'video' ? 'aspect-video' : size === 'square' && 'aspect-square',\n toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator',\n role === 'section' &&\n toolbar &&\n '[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0',\n classNames,\n )}\n style={style}\n data-popover-collision-boundary={true}\n ref={forwardedRef}\n >\n {children}\n </div>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithoutRef } from 'react';\n\nimport { useStackItem } from '../StackContext';\n\nexport type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { asChild?: boolean };\n\nexport const StackItemDragHandle = ({ asChild, children }: StackItemDragHandleProps) => {\n const { selfDragHandleRef } = useStackItem();\n\n const Root = asChild ? Slot : 'div';\n\n return (\n <Root ref={selfDragHandleRef} role='button'>\n {children}\n </Root>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, {\n type ComponentPropsWithoutRef,\n type ComponentPropsWithRef,\n forwardRef,\n type PropsWithChildren,\n} from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention, type AttendableId, type Related } from '@dxos/react-ui-attention';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useStack } from '../StackContext';\n\nexport type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {\n asChild?: boolean;\n separateOnScroll?: boolean;\n};\n\nexport const StackItemHeading = ({\n children,\n classNames,\n asChild,\n separateOnScroll,\n ...props\n}: StackItemHeadingProps) => {\n const { orientation } = useStack();\n const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });\n\n const Root = asChild ? Slot : 'div';\n\n return (\n <Root\n role='heading'\n {...props}\n tabIndex={0}\n {...focusableGroupAttrs}\n className={mx(\n 'flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface',\n separateOnScroll\n ? 'border-transparent [[data-scroll-separator=\"true\"]_&]:border-subduedSeparator'\n : 'border-subduedSeparator',\n orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',\n orientation === 'horizontal' ? 'border-be' : 'border-ie',\n classNames,\n )}\n >\n {children}\n </Root>\n );\n};\n\nexport const StackItemHeadingStickyContent = ({ children }: PropsWithChildren<{}>) => {\n return (\n <div role='none' className='sticky block-start-0 bg-[--sticky-bg] p-1 is-full'>\n {children}\n </div>\n );\n};\n\nexport type StackItemHeadingLabelProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & AttendableId & Related;\n\nexport const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHeadingLabelProps>(\n ({ attendableId, related, classNames, ...props }, forwardedRef) => {\n const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);\n\n return (\n <h1\n {...props}\n data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}\n className={mx(\n 'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center',\n classNames,\n )}\n ref={forwardedRef}\n />\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { ResizeHandle } from '@dxos/react-ui-dnd';\n\nimport { DEFAULT_EXTRINSIC_SIZE } from './StackItem';\nimport { useStack, useStackItem } from '../StackContext';\n\nconst MIN_WIDTH = 20;\nconst MIN_HEIGHT = 3;\n\nexport type StackItemResizeHandleProps = {};\n\nexport const StackItemResizeHandle = () => {\n const { orientation } = useStack();\n const { setSize, size } = useStackItem();\n\n return (\n <ResizeHandle\n side={orientation === 'horizontal' ? 'inline-end' : 'block-end'}\n fallbackSize={DEFAULT_EXTRINSIC_SIZE}\n minSize={orientation === 'horizontal' ? MIN_WIDTH : MIN_HEIGHT}\n size={size}\n onSizeChange={setSize}\n />\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { Fragment, type PropsWithChildren, forwardRef, useState } from 'react';\n\nimport { type ActionLike } from '@dxos/app-graph';\nimport { keySymbols } from '@dxos/keyboard';\nimport { Button, type ButtonProps, DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';\nimport { descriptionText, mx } from '@dxos/react-ui-theme';\nimport { getHostPlatform } from '@dxos/util';\n\nimport { MenuSignifierHorizontal } from './MenuSignifier';\nimport { translationKey } from '../../translations';\n\nexport type KeyBinding = {\n windows?: string;\n macos?: string;\n ios?: string;\n linux?: string;\n unknown?: string;\n};\n\nexport type StackItemSigilAction = Pick<ActionLike, 'id' | 'properties' | 'data'>;\n\nexport type StackItemSigilButtonProps = Omit<ButtonProps, 'variant'> &\n AttendableId &\n Related & {\n isMenu?: boolean;\n };\n\nexport const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigilButtonProps>(\n ({ attendableId, classNames, related, isMenu = true, children, ...props }, forwardedRef) => {\n const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);\n const variant = (related && isRelated) || hasAttention || isAncestor ? 'primary' : 'ghost';\n // TODO(wittjosiah): Disable hover styles when isMenu is false.\n return (\n <Button\n {...props}\n variant={variant}\n classNames={['shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag', classNames]}\n ref={forwardedRef}\n >\n {isMenu && <MenuSignifierHorizontal />}\n {children}\n </Button>\n );\n },\n);\n\nexport type StackItemSigilProps = PropsWithChildren<\n {\n attendableId?: string;\n triggerLabel: string;\n actions?: StackItemSigilAction[][];\n icon: string;\n onAction?: (action: StackItemSigilAction) => void;\n } & Related\n>;\n\nexport const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>(\n ({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {\n const { t } = useTranslation(translationKey);\n\n const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n\n const hasActions = actionGroups && actionGroups.length > 0;\n\n const button = (\n <StackItemSigilButton\n attendableId={attendableId}\n related={related}\n isMenu={hasActions}\n // TODO(wittjosiah): Better disabling of interactive styles when no action are available.\n // Remove underscore icon when no actions are available?\n classNames={!hasActions && 'cursor-default'}\n >\n <span className='sr-only'>{triggerLabel}</span>\n <Icon icon={icon} size={5} />\n </StackItemSigilButton>\n );\n\n if (!hasActions) {\n return button;\n }\n\n return (\n <DropdownMenu.Root open={optionsMenuOpen} onOpenChange={setOptionsMenuOpen}>\n <DropdownMenu.Trigger asChild ref={forwardedRef}>\n {button}\n </DropdownMenu.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content classNames='z-[31]'>\n <DropdownMenu.Viewport>\n {actionGroups?.map((actions, index) => {\n const separator = index > 0 ? <DropdownMenu.Separator /> : null;\n return (\n <Fragment key={index}>\n {separator}\n {actions.map((action) => {\n const shortcut =\n typeof action.properties.keyBinding === 'string'\n ? action.properties.keyBinding\n : action.properties.keyBinding?.[getHostPlatform()];\n\n const menuItemType = action.properties.menuItemType;\n const Root = menuItemType === 'toggle' ? DropdownMenu.CheckboxItem : DropdownMenu.Item;\n\n return (\n <Root\n key={action.id}\n onClick={(event) => {\n if (action.properties.disabled) {\n return;\n }\n event.stopPropagation();\n // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?\n setOptionsMenuOpen(false);\n onAction?.(action);\n }}\n classNames='gap-2'\n disabled={action.properties.disabled}\n checked={menuItemType === 'toggle' ? action.properties.isChecked : undefined}\n {...(action.properties?.testId && { 'data-testid': action.properties.testId })}\n >\n <Icon icon={action.properties.icon ?? 'ph--placeholder--regular'} size={4} />\n <span className='grow truncate'>{toLocalizedString(action.properties.label ?? '', t)}</span>\n {menuItemType === 'toggle' && (\n <DropdownMenu.ItemIndicator asChild>\n <Icon icon='ph--check--regular' size={4} />\n </DropdownMenu.ItemIndicator>\n )}\n {shortcut && (\n <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>\n )}\n </Root>\n );\n })}\n </Fragment>\n );\n })}\n {children}\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n );\n },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nexport const MenuSignifierHorizontal = () => (\n <svg\n className='absolute block-end-[7px]'\n width={20}\n height={2}\n viewBox='0 0 20 2'\n stroke='currentColor'\n opacity={0.5}\n >\n <line\n x1={0.5}\n y1={0.75}\n x2={19}\n y2={0.75}\n strokeWidth={1.25}\n strokeLinecap='round'\n strokeDasharray='6 20'\n strokeDashoffset='-6.5'\n />\n </svg>\n);\n\nexport const MenuSignifierVertical = () => (\n <svg className='absolute inline-start-1' width={2} height={18} viewBox='0 0 2 18' stroke='currentColor'>\n <line x1={1} y1={3} x2={1} y2={18} strokeWidth={1.5} strokeLinecap='round' strokeDasharray='0 6' />\n </svg>\n);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const cardRoot =\n 'rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card';\n\nexport const cardSpacing = 'pli-cardSpacingInline mlb-cardSpacingBlock';\nexport const labelSpacing = 'mbs-inputSpacingBlock mbe-labelSpacingBlock';\n\nexport const cardDialogContent = 'p-0 bs-content min-bs-[8rem] max-bs-full md:max-is-[32rem] overflow-hidden';\nexport const cardDialogHeader = 'pli-cardSpacingInline mbs-cardSpacingBlock flex justify-between';\nexport const cardDialogOverflow = 'overflow-y-auto min-bs-0 flex-1';\nexport const cardDialogPaddedOverflow = `${cardDialogOverflow} plb-cardSpacingBlock`;\nexport const cardDialogSearchListRoot =\n 'pli-cardSpacingInline pbs-cardSpacingBlock [&>input]:mbe-0 min-bs-0 flex-1 flex flex-col';\n\nexport const cardText = cardSpacing;\n\nexport const cardHeading = 'text-lg font-medium line-clamp-2';\n\nexport const cardChrome =\n 'pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, {\n type ComponentPropsWithoutRef,\n type ComponentPropsWithRef,\n type FC,\n forwardRef,\n type PropsWithChildren,\n} from 'react';\n\nimport { Icon, IconButton, type ThemedClassName, Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';\nimport { hoverableControls, mx } from '@dxos/react-ui-theme';\n\nimport { cardChrome, cardRoot, cardHeading, cardText, cardSpacing } from './fragments';\nimport { StackItem } from '../../components';\nimport { translationKey } from '../../translations';\n\ntype SharedCardProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };\n\nconst CardStaticRoot = forwardRef<HTMLDivElement, SharedCardProps>(\n ({ children, classNames, asChild, role = 'group', ...props }, forwardedRef) => {\n const Root = asChild ? Slot : 'div';\n const rootProps = asChild ? { classNames: [cardRoot, classNames] } : { className: mx(cardRoot, classNames), role };\n return (\n <Root {...props} {...rootProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\n/**\n * This should be used by Surface fulfillments in cases where the content may or may not already be encapsulated (e.g.\n * in a Popover) and knows this based on the `role` it receives. This will render a `Card.StaticRoot` by default, otherwise\n * it will render a `div` primitive with the appropriate styling for specific handled situations.\n */\nconst CardSurfaceRoot = ({\n role = 'never',\n children,\n classNames,\n}: ThemedClassName<PropsWithChildren<{ role?: string }>>) => {\n if (['card--popover', 'card--intrinsic', 'card--extrinsic'].includes(role)) {\n return (\n <div\n className={mx(\n role === 'card--popover'\n ? 'popover-card-width'\n : ['card--intrinsic', 'card--extrinsic'].includes(role)\n ? 'contents'\n : '',\n classNames,\n )}\n >\n {children}\n </div>\n );\n } else {\n return (\n <CardStaticRoot\n classNames={[\n role === 'card--transclusion' && 'mlb-[1em]',\n role === 'card--transclusion' && hoverableControls,\n classNames,\n ]}\n >\n {children}\n </CardStaticRoot>\n );\n }\n};\n\nconst CardHeading = forwardRef<HTMLDivElement, SharedCardProps>(\n ({ children, classNames, asChild, role = 'heading', ...props }, forwardedRef) => {\n const Root = asChild ? Slot : 'div';\n const rootProps = asChild\n ? { classNames: [cardHeading, cardText, classNames] }\n : { className: mx(cardHeading, cardText, classNames), role };\n return (\n <Root {...props} {...rootProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nconst CardToolbar = forwardRef<HTMLDivElement, ToolbarRootProps>(({ children, classNames, ...props }, forwardedRef) => {\n return (\n <Toolbar.Root {...props} classNames={['bg-transparent density-coarse', classNames]} ref={forwardedRef}>\n {children}\n </Toolbar.Root>\n );\n});\n\nconst CardToolbarIconButton = Toolbar.IconButton;\nconst CardToolbarSeparator = Toolbar.Separator;\n\nconst CardDragHandle = forwardRef<HTMLButtonElement, { toolbarItem?: boolean }>(({ toolbarItem }, forwardedRef) => {\n const { t } = useTranslation(translationKey);\n const Root = toolbarItem ? Toolbar.IconButton : IconButton;\n return (\n <Root\n iconOnly\n icon='ph--dots-six-vertical--regular'\n variant='ghost'\n label={t('drag handle label')}\n classNames='pli-2'\n ref={forwardedRef}\n />\n );\n});\n\nconst CardDragPreview = StackItem.DragPreview;\n\nconst CardMenu = Primitive.div as FC<ComponentPropsWithRef<'div'>>;\n\ntype CardPosterProps = {\n alt: string;\n aspect?: 'video' | 'auto';\n} & Partial<{ image: string; icon: string }>;\n\nconst CardPoster = (props: CardPosterProps) => {\n const aspect = props.aspect === 'auto' ? 'aspect-auto' : 'aspect-video';\n if (props.image) {\n return (\n <img className={`dx-card__poster ${aspect} object-cover is-full bs-auto`} src={props.image} alt={props.alt} />\n );\n }\n if (props.icon) {\n return (\n <div\n role='image'\n className={`dx-card__poster grid ${aspect} place-items-center bg-inputSurface text-subdued`}\n aria-label={props.alt}\n >\n <Icon icon={props.icon} size={10} />\n </div>\n );\n }\n};\n\nconst CardChrome = forwardRef<HTMLDivElement, SharedCardProps>(\n ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {\n const Root = asChild ? Slot : 'div';\n const rootProps = asChild\n ? { classNames: [cardChrome, classNames] }\n : { className: mx(cardChrome, classNames), role };\n return (\n <Root {...props} {...rootProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nconst CardText = forwardRef<HTMLParagraphElement, SharedCardProps>(\n ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {\n const Root = asChild ? Slot : 'p';\n const rootProps = asChild ? { classNames: [cardText, classNames] } : { className: mx(cardText, classNames), role };\n return (\n <Root {...props} {...rootProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nexport const Card = {\n StaticRoot: CardStaticRoot,\n SurfaceRoot: CardSurfaceRoot,\n Heading: CardHeading,\n Toolbar: CardToolbar,\n ToolbarIconButton: CardToolbarIconButton,\n ToolbarSeparator: CardToolbarSeparator,\n DragHandle: CardDragHandle,\n DragPreview: CardDragPreview,\n Menu: CardMenu,\n Poster: CardPoster,\n Chrome: CardChrome,\n Text: CardText,\n};\n\nexport { cardRoot, cardHeading, cardText, cardChrome, cardSpacing };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { cardRoot } from './fragments';\n\nconst CardDragPreviewRoot = ({ children }: PropsWithChildren<{}>) => {\n return <div className='p-2'>{children}</div>;\n};\n\nconst CardDragPreviewContent = ({ children }: PropsWithChildren<{}>) => {\n return <div className={mx(cardRoot, 'ring-focusLine ring-neutralFocusIndicator')}>{children}</div>;\n};\n\nexport const CardDragPreview = {\n Root: CardDragPreviewRoot,\n Content: CardDragPreviewContent,\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithoutRef, forwardRef } from 'react';\n\nimport type { ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { railGridHorizontalContainFitContent, Stack, type StackProps } from '../../components';\nimport { Card } from '../Card';\n\ntype SharedCardStackProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };\n\nconst CardStackStack = forwardRef<\n HTMLDivElement,\n Omit<StackProps, 'orientation' | 'size' | 'rail' | 'separatorOnScroll'>\n>(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {\n return (\n <Stack\n orientation='vertical'\n size='contain'\n rail={false}\n classNames={\n /* NOTE(thure): Do not let this element have zero intrinsic size, otherwise the drop indicator will not display. See #9035. */\n ['plb-1', itemsCount > 0 && 'plb-2', classNames]\n }\n itemsCount={itemsCount}\n separatorOnScroll={9}\n data-density='fine'\n {...props}\n ref={forwardedRef}\n >\n {children}\n </Stack>\n );\n});\n\nconst CardStackDragHandle = Card.DragHandle;\n\nconst cardStackHeading = 'mli-2 order-first bg-transparent rounded-bs-md flex items-center';\n\nconst CardStackHeading = forwardRef<HTMLDivElement, SharedCardStackProps>(\n ({ children, classNames, asChild, role = 'heading', ...props }, forwardedRef) => {\n const Root = asChild ? Slot : 'div';\n const rootProps = asChild\n ? { classNames: [cardStackHeading, classNames] }\n : { className: mx(cardStackHeading, classNames), role };\n return (\n <Root {...props} {...rootProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nconst cardStackFooter =\n 'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end=\"true\"]_&]:border-subduedSeparator';\n\nconst CardStackFooter = forwardRef<HTMLDivElement, SharedCardStackProps>(\n ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {\n const Root = asChild ? Slot : 'div';\n const rootProps = asChild\n ? { classNames: [cardStackFooter, classNames] }\n : { className: mx(cardStackFooter, classNames), role };\n return (\n <Root {...props} {...rootProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nconst cardStackContent = [\n 'shrink min-bs-0 bg-baseSurface border border-separator rounded-md grid dx-focus-ring-group-x-indicator kanban-drop',\n railGridHorizontalContainFitContent,\n];\n\nconst CardStackContent = forwardRef<HTMLDivElement, SharedCardStackProps>(\n ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {\n const Root = asChild ? Slot : 'div';\n const rootProps = asChild\n ? { classNames: [...cardStackContent, classNames] }\n : { className: mx(...cardStackContent, classNames), role };\n return (\n <Root {...props} {...rootProps} data-scroll-separator='false' ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nconst cardStackRoot = 'flex flex-col pli-2 plb-2';\n\nconst CardStackRoot = forwardRef<HTMLDivElement, SharedCardStackProps>(\n ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {\n const Root = asChild ? Slot : 'div';\n const rootProps = asChild\n ? { classNames: [cardStackRoot, classNames] }\n : { className: mx(cardStackRoot, classNames), role };\n return (\n <Root {...props} {...rootProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nconst cardStackItem = 'contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0';\n\nconst CardStackItem = forwardRef<HTMLDivElement, SharedCardStackProps>(\n ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {\n const Root = asChild ? Slot : 'div';\n const rootProps = asChild\n ? { classNames: [cardStackItem, classNames] }\n : { className: mx(cardStackItem, classNames), role };\n return (\n <Root {...props} {...rootProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nexport const CardStack = {\n Root: CardStackRoot,\n Content: CardStackContent,\n Stack: CardStackStack,\n Heading: CardStackHeading,\n Footer: CardStackFooter,\n DragHandle: CardStackDragHandle,\n Item: CardStackItem,\n};\n\nexport { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent, cardStackItem };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\n\nimport { IconButton, useTranslation } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type StackProps } from '../../components';\nimport { translationKey } from '../../translations';\n\nconst CardStackDragPreviewRoot = ({ children }: PropsWithChildren<{}>) => {\n return (\n <div className='p-2'>\n <div className='rounded-md max-bs-[calc(100dvh-1rem)] overflow-hidden bg-baseSurface border border-separator ring-focusLine ring-neutralFocusIndicator flex flex-col'>\n {children}\n </div>\n </div>\n );\n};\n\nconst CardStackDragPreviewHeading = ({ children }: PropsWithChildren<{}>) => {\n const { t } = useTranslation(translationKey);\n return (\n <div className='flex items-center p-2'>\n <IconButton\n iconOnly\n icon='ph--dots-six-vertical--regular'\n variant='ghost'\n label={t('column drag handle label')}\n classNames='pli-2'\n />\n {children}\n </div>\n );\n};\n\nconst CardStackDragPreviewContent = ({\n children,\n itemsCount = 0,\n}: PropsWithChildren<Pick<StackProps, 'itemsCount'>>) => {\n return (\n <div\n className={mx('overflow-y-auto flex-1 pli-2 flex flex-col gap-2', 'plb-1', itemsCount > 0 ? 'plb-2' : 'plb-1')}\n >\n {children}\n </div>\n );\n};\n\nconst CardStackDragPreviewFooter = ({ children }: PropsWithChildren<{}>) => {\n return <div className='p-2 border-t border-separator'>{children}</div>;\n};\n\nexport const CardStackDragPreview = {\n Root: CardStackDragPreviewRoot,\n Heading: CardStackDragPreviewHeading,\n Content: CardStackDragPreviewContent,\n Footer: CardStackDragPreviewFooter,\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["createContext", "useContext", "StackContext", "createContext", "orientation", "rail", "size", "useStack", "useContext", "idle", "type", "StackItemContext", "selfDragHandleRef", "setSize", "state", "setState", "useStackItem", "useArrowNavigationGroup", "composeRefs", "React", "Children", "forwardRef", "useState", "useMemo", "useCallback", "useEffect", "ListItem", "mx", "combine", "dropTargetForElements", "autoScrollForElements", "attachClosestEdge", "extractClosestEdge", "useLayoutEffect", "useState", "useStackDropForElements", "id", "element", "scrollElement", "selfDroppable", "orientation", "onRearrange", "dropping", "setDropping", "useState", "useLayoutEffect", "acceptSourceType", "combine", "dropTargetForElements", "getData", "input", "attachClosestEdge", "type", "allowedEdges", "onDragEnter", "source", "data", "onDrag", "onDragLeave", "onDrop", "self", "extractClosestEdge", "autoScrollForElements", "getAllowedAxis", "railGridHorizontal", "railGridVertical", "railGridHorizontalContainFitContent", "railGridVerticalContainFitContent", "autoScrollRootAttributes", "Stack", "forwardRef", "children", "classNames", "style", "orientation", "rail", "size", "onRearrange", "itemsCount", "Children", "count", "getDropElement", "separatorOnScroll", "props", "forwardedRef", "stackElement", "stackRef", "useState", "composedItemRef", "composeRefs", "arrowNavigationAttrs", "useArrowNavigationGroup", "axis", "styles", "selfDroppable", "id", "dropping", "useStackDropForElements", "element", "scrollElement", "handleScroll", "useCallback", "Number", "isFinite", "scrollPosition", "scrollLeft", "scrollTop", "scrollSize", "scrollWidth", "scrollHeight", "clientSize", "clientWidth", "clientHeight", "separatorHost", "closest", "setAttribute", "String", "gridClasses", "useMemo", "useEffect", "observer", "MutationObserver", "observe", "childList", "subtree", "disconnect", "StackContext", "Provider", "value", "div", "className", "mx", "data-rail", "aria-orientation", "ref", "onScroll", "ListItem", "DropIndicator", "lineInset", "terminalInset", "gap", "edge", "translationKey", "translations", "combine", "draggable", "dropTargetForElements", "preserveOffsetOnSource", "setCustomNativeDragPreview", "attachClosestEdge", "extractClosestEdge", "useFocusableGroup", "composeRefs", "React", "forwardRef", "useLayoutEffect", "useState", "useCallback", "useMemo", "createPortal", "ListItem", "resizeAttributes", "sizeStyle", "mx", "React", "forwardRef", "useMemo", "mx", "StackItemContent", "forwardRef", "children", "toolbar", "statusbar", "layoutManaged", "classNames", "size", "props", "forwardedRef", "stackItemSize", "useStack", "role", "useStackItem", "style", "useMemo", "gridTemplateRows", "join", "React", "div", "className", "mx", "data-popover-collision-boundary", "ref", "Slot", "React", "StackItemDragHandle", "asChild", "children", "selfDragHandleRef", "useStackItem", "Root", "Slot", "React", "ref", "role", "useFocusableGroup", "Slot", "React", "forwardRef", "useAttention", "mx", "StackItemHeading", "children", "classNames", "asChild", "separateOnScroll", "props", "orientation", "useStack", "focusableGroupAttrs", "useFocusableGroup", "tabBehavior", "Root", "Slot", "React", "role", "tabIndex", "className", "mx", "StackItemHeadingStickyContent", "div", "StackItemHeadingLabel", "forwardRef", "attendableId", "related", "forwardedRef", "hasAttention", "isAncestor", "isRelated", "useAttention", "h1", "data-attention", "toString", "ref", "React", "ResizeHandle", "MIN_WIDTH", "MIN_HEIGHT", "StackItemResizeHandle", "orientation", "useStack", "setSize", "size", "useStackItem", "React", "ResizeHandle", "side", "fallbackSize", "DEFAULT_EXTRINSIC_SIZE", "minSize", "onSizeChange", "React", "Fragment", "forwardRef", "useState", "keySymbols", "Button", "DropdownMenu", "Icon", "toLocalizedString", "useTranslation", "useAttention", "descriptionText", "mx", "getHostPlatform", "React", "MenuSignifierHorizontal", "React", "svg", "className", "width", "height", "viewBox", "stroke", "opacity", "line", "x1", "y1", "x2", "y2", "strokeWidth", "strokeLinecap", "strokeDasharray", "strokeDashoffset", "StackItemSigilButton", "forwardRef", "attendableId", "classNames", "related", "isMenu", "children", "props", "forwardedRef", "hasAttention", "isAncestor", "isRelated", "useAttention", "variant", "React", "Button", "ref", "MenuSignifierHorizontal", "StackItemSigil", "actions", "actionGroups", "onAction", "triggerLabel", "icon", "t", "useTranslation", "translationKey", "optionsMenuOpen", "setOptionsMenuOpen", "useState", "hasActions", "length", "button", "span", "className", "Icon", "size", "DropdownMenu", "Root", "open", "onOpenChange", "Trigger", "asChild", "Portal", "Content", "Viewport", "map", "index", "separator", "Separator", "Fragment", "key", "action", "shortcut", "properties", "keyBinding", "getHostPlatform", "menuItemType", "CheckboxItem", "Item", "id", "onClick", "event", "disabled", "stopPropagation", "checked", "isChecked", "undefined", "testId", "toLocalizedString", "label", "ItemIndicator", "mx", "descriptionText", "keySymbols", "join", "Arrow", "DEFAULT_HORIZONTAL_SIZE", "DEFAULT_VERTICAL_SIZE", "DEFAULT_EXTRINSIC_SIZE", "StackItemRoot", "forwardRef", "item", "children", "classNames", "size", "propsSize", "onSizeChange", "role", "order", "prevSiblingId", "nextSiblingId", "style", "disableRearrange", "focusIndicatorVariant", "props", "forwardedRef", "itemElement", "itemRef", "useState", "selfDragHandleElement", "selfDragHandleRef", "closestEdge", "setEdge", "sourceId", "setSourceId", "dragState", "setDragState", "idle", "orientation", "rail", "onRearrange", "useStack", "setInternalSize", "Root", "composedItemRef", "composeRefs", "setSize", "useCallback", "nextSize", "commit", "type", "useLayoutEffect", "combine", "draggable", "element", "dragHandle", "getInitialData", "id", "onGenerateDragPreview", "nativeSetDragImage", "source", "location", "document", "body", "setAttribute", "offsetFn", "preserveOffsetOnSource", "input", "current", "rect", "getBoundingClientRect", "setCustomNativeDragPreview", "getOffset", "container", "render", "width", "onDragStart", "removeAttribute", "closest", "onDrop", "dropTargetForElements", "getData", "attachClosestEdge", "allowedEdges", "onDragEnter", "self", "data", "extractClosestEdge", "onDrag", "onDragLeave", "focusableGroupAttrs", "useFocusableGroup", "tabBehavior", "shouldShowDropIndicator", "isTrailingEdgeOfPrevSibling", "undefined", "isLeadingEdgeOfNextSibling", "stackItemContextValue", "useMemo", "state", "setState", "React", "StackItemContext", "Provider", "value", "tabIndex", "className", "mx", "data-dx-stack-item", "resizeAttributes", "sizeStyle", "Number", "isFinite", "ref", "ListItem", "DropIndicator", "lineInset", "terminalInset", "edge", "StackItemDragPreview", "useStackItem", "createPortal", "StackItem", "Content", "StackItemContent", "Heading", "StackItemHeading", "HeadingLabel", "StackItemHeadingLabel", "HeadingStickyContent", "StackItemHeadingStickyContent", "ResizeHandle", "StackItemResizeHandle", "DragHandle", "StackItemDragHandle", "Sigil", "StackItemSigil", "SigilButton", "StackItemSigilButton", "DragPreview", "cardRoot", "cardSpacing", "labelSpacing", "cardDialogContent", "cardDialogHeader", "cardDialogOverflow", "cardDialogPaddedOverflow", "cardDialogSearchListRoot", "cardText", "cardHeading", "cardChrome", "Primitive", "Slot", "React", "forwardRef", "Icon", "IconButton", "Toolbar", "useTranslation", "hoverableControls", "mx", "CardStaticRoot", "forwardRef", "children", "classNames", "asChild", "role", "props", "forwardedRef", "Root", "Slot", "rootProps", "cardRoot", "className", "mx", "React", "ref", "CardSurfaceRoot", "includes", "div", "hoverableControls", "CardHeading", "cardHeading", "cardText", "CardToolbar", "Toolbar", "CardToolbarIconButton", "IconButton", "CardToolbarSeparator", "Separator", "CardDragHandle", "toolbarItem", "t", "useTranslation", "translationKey", "iconOnly", "icon", "variant", "label", "CardDragPreview", "StackItem", "DragPreview", "CardMenu", "Primitive", "CardPoster", "aspect", "image", "img", "src", "alt", "aria-label", "Icon", "size", "CardChrome", "cardChrome", "CardText", "Card", "StaticRoot", "SurfaceRoot", "Heading", "ToolbarIconButton", "ToolbarSeparator", "DragHandle", "Menu", "Poster", "Chrome", "Text", "React", "mx", "CardDragPreviewRoot", "children", "React", "div", "className", "CardDragPreviewContent", "mx", "cardRoot", "CardDragPreview", "Root", "Content", "Slot", "React", "forwardRef", "mx", "CardStackStack", "forwardRef", "children", "classNames", "itemsCount", "props", "forwardedRef", "React", "Stack", "orientation", "size", "rail", "separatorOnScroll", "data-density", "ref", "CardStackDragHandle", "Card", "DragHandle", "cardStackHeading", "CardStackHeading", "asChild", "role", "Root", "Slot", "rootProps", "className", "mx", "cardStackFooter", "CardStackFooter", "cardStackContent", "railGridHorizontalContainFitContent", "CardStackContent", "data-scroll-separator", "cardStackRoot", "CardStackRoot", "cardStackItem", "CardStackItem", "CardStack", "Content", "Heading", "Footer", "Item", "React", "IconButton", "useTranslation", "mx", "CardStackDragPreviewRoot", "children", "React", "div", "className", "CardStackDragPreviewHeading", "t", "useTranslation", "translationKey", "IconButton", "iconOnly", "icon", "variant", "label", "classNames", "CardStackDragPreviewContent", "itemsCount", "mx", "CardStackDragPreviewFooter", "CardStackDragPreview", "Root", "Heading", "Content", "Footer"]
|
|
7
|
-
}
|