@dxos/react-ui-stack 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0
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/index.mjs +31 -101
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +21 -93
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +31 -101
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/{Stack.d.ts → Stack/Stack.d.ts} +2 -1
- package/dist/types/src/components/Stack/Stack.d.ts.map +1 -0
- package/dist/types/src/components/Stack/Stack.stories.d.ts +9 -0
- package/dist/types/src/components/Stack/Stack.stories.d.ts.map +1 -0
- package/dist/types/src/components/Stack/index.d.ts +2 -0
- package/dist/types/src/components/Stack/index.d.ts.map +1 -0
- package/dist/types/src/components/StackContext.d.ts +1 -10
- package/dist/types/src/components/StackContext.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/MenuSignifier.d.ts.map +1 -0
- package/dist/types/src/components/{StackItem.d.ts → StackItem/StackItem.d.ts} +3 -3
- package/dist/types/src/components/StackItem/StackItem.d.ts.map +1 -0
- package/dist/types/src/components/StackItem/StackItem.stories.d.ts +8 -0
- package/dist/types/src/components/StackItem/StackItem.stories.d.ts.map +1 -0
- package/dist/types/src/components/StackItem/StackItemContent.d.ts.map +1 -0
- package/dist/types/src/components/StackItem/StackItemDragHandle.d.ts.map +1 -0
- package/dist/types/src/components/StackItem/StackItemHeading.d.ts.map +1 -0
- package/dist/types/src/components/StackItem/StackItemResizeHandle.d.ts.map +1 -0
- package/dist/types/src/components/StackItem/StackItemSigil.d.ts.map +1 -0
- package/dist/types/src/components/StackItem/index.d.ts +2 -0
- package/dist/types/src/components/StackItem/index.d.ts.map +1 -0
- package/dist/types/src/components/defs.d.ts +18 -0
- package/dist/types/src/components/defs.d.ts.map +1 -0
- package/dist/types/src/components/deprecated/LayoutControls.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -2
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useStackDropForElements.d.ts +3 -4
- package/dist/types/src/hooks/useStackDropForElements.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +20 -20
- package/src/components/{Stack.stories.tsx → Stack/Stack.stories.tsx} +15 -13
- package/src/components/{Stack.tsx → Stack/Stack.tsx} +3 -2
- package/src/components/Stack/index.ts +5 -0
- package/src/components/StackContext.tsx +1 -13
- package/src/components/StackItem/StackItem.stories.tsx +49 -0
- package/src/components/{StackItem.tsx → StackItem/StackItem.tsx} +4 -2
- package/src/components/{StackItemContent.tsx → StackItem/StackItemContent.tsx} +1 -1
- package/src/components/{StackItemDragHandle.tsx → StackItem/StackItemDragHandle.tsx} +1 -1
- package/src/components/{StackItemHeading.tsx → StackItem/StackItemHeading.tsx} +2 -2
- package/src/components/{StackItemResizeHandle.tsx → StackItem/StackItemResizeHandle.tsx} +1 -1
- package/src/components/{StackItemSigil.tsx → StackItem/StackItemSigil.tsx} +1 -1
- package/src/components/StackItem/index.ts +5 -0
- package/src/components/defs.ts +26 -0
- package/src/components/{LayoutControls.tsx → deprecated/LayoutControls.tsx} +3 -23
- package/src/components/index.ts +2 -2
- package/src/hooks/useStackDropForElements.ts +3 -4
- package/dist/types/src/components/LayoutControls.d.ts.map +0 -1
- package/dist/types/src/components/MenuSignifier.d.ts.map +0 -1
- package/dist/types/src/components/Stack.d.ts.map +0 -1
- package/dist/types/src/components/Stack.stories.d.ts +0 -8
- package/dist/types/src/components/Stack.stories.d.ts.map +0 -1
- package/dist/types/src/components/StackItem.d.ts.map +0 -1
- package/dist/types/src/components/StackItemContent.d.ts.map +0 -1
- package/dist/types/src/components/StackItemDragHandle.d.ts.map +0 -1
- package/dist/types/src/components/StackItemHeading.d.ts.map +0 -1
- package/dist/types/src/components/StackItemResizeHandle.d.ts.map +0 -1
- package/dist/types/src/components/StackItemSigil.d.ts.map +0 -1
- /package/dist/types/src/components/{MenuSignifier.d.ts → StackItem/MenuSignifier.d.ts} +0 -0
- /package/dist/types/src/components/{StackItemContent.d.ts → StackItem/StackItemContent.d.ts} +0 -0
- /package/dist/types/src/components/{StackItemDragHandle.d.ts → StackItem/StackItemDragHandle.d.ts} +0 -0
- /package/dist/types/src/components/{StackItemHeading.d.ts → StackItem/StackItemHeading.d.ts} +0 -0
- /package/dist/types/src/components/{StackItemResizeHandle.d.ts → StackItem/StackItemResizeHandle.d.ts} +0 -0
- /package/dist/types/src/components/{StackItemSigil.d.ts → StackItem/StackItemSigil.d.ts} +0 -0
- /package/dist/types/src/components/{LayoutControls.d.ts → deprecated/LayoutControls.d.ts} +0 -0
- /package/src/components/{MenuSignifier.tsx → StackItem/MenuSignifier.tsx} +0 -0
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import { type Orientation } from '../components
|
|
2
|
-
import { type StackItemRearrangeHandler } from '../components/StackContext';
|
|
1
|
+
import { type StackItemRearrangeHandler, type Orientation } from '../components';
|
|
3
2
|
/**
|
|
4
3
|
* Hook to handle drag and drop functionality for Stack components.
|
|
5
4
|
*/
|
|
6
|
-
export declare const useStackDropForElements: ({ element, selfDroppable, orientation,
|
|
5
|
+
export declare const useStackDropForElements: ({ id, element, selfDroppable, orientation, onRearrange, }: {
|
|
6
|
+
id?: string;
|
|
7
7
|
element: HTMLDivElement | null;
|
|
8
8
|
selfDroppable: boolean;
|
|
9
9
|
orientation: Orientation;
|
|
10
|
-
id?: string;
|
|
11
10
|
onRearrange?: StackItemRearrangeHandler;
|
|
12
11
|
}) => {
|
|
13
12
|
dropping: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStackDropForElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useStackDropForElements.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"useStackDropForElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useStackDropForElements.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,yBAAyB,EAAsB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAErG;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAAI,2DAMrC;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;;CA4CA,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.
|
|
1
|
+
{"version":"5.8.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-stack",
|
|
3
|
-
"version": "0.8.2-main.
|
|
3
|
+
"version": "0.8.2-main.fbd8ed0",
|
|
4
4
|
"description": "A stack component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
"@radix-ui/react-slot": "1.1.2",
|
|
48
48
|
"@radix-ui/react-use-controllable-state": "1.1.0",
|
|
49
49
|
"react-resize-detector": "^11.0.1",
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/
|
|
52
|
-
"@dxos/
|
|
53
|
-
"@dxos/
|
|
54
|
-
"@dxos/
|
|
55
|
-
"@dxos/
|
|
50
|
+
"@dxos/keyboard": "0.8.2-main.fbd8ed0",
|
|
51
|
+
"@dxos/live-object": "0.8.2-main.fbd8ed0",
|
|
52
|
+
"@dxos/react-ui-attention": "0.8.2-main.fbd8ed0",
|
|
53
|
+
"@dxos/echo-schema": "0.8.2-main.fbd8ed0",
|
|
54
|
+
"@dxos/react-ui-dnd": "0.8.2-main.fbd8ed0",
|
|
55
|
+
"@dxos/util": "0.8.2-main.fbd8ed0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -61,24 +61,24 @@
|
|
|
61
61
|
"react": "~18.2.0",
|
|
62
62
|
"react-dom": "~18.2.0",
|
|
63
63
|
"vite": "5.4.7",
|
|
64
|
-
"@dxos/app-graph": "0.8.2-main.
|
|
65
|
-
"@dxos/
|
|
66
|
-
"@dxos/
|
|
67
|
-
"@dxos/
|
|
68
|
-
"@dxos/
|
|
69
|
-
"@dxos/react-ui
|
|
70
|
-
"@dxos/react-ui-theme": "0.8.2-main.
|
|
71
|
-
"@dxos/storybook-utils": "0.8.2-main.
|
|
72
|
-
"@dxos/test-utils": "0.8.2-main.
|
|
64
|
+
"@dxos/app-graph": "0.8.2-main.fbd8ed0",
|
|
65
|
+
"@dxos/echo-schema": "0.8.2-main.fbd8ed0",
|
|
66
|
+
"@dxos/client": "0.8.2-main.fbd8ed0",
|
|
67
|
+
"@dxos/random": "0.8.2-main.fbd8ed0",
|
|
68
|
+
"@dxos/react-ui-editor": "0.8.2-main.fbd8ed0",
|
|
69
|
+
"@dxos/react-ui": "0.8.2-main.fbd8ed0",
|
|
70
|
+
"@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
|
|
71
|
+
"@dxos/storybook-utils": "0.8.2-main.fbd8ed0",
|
|
72
|
+
"@dxos/test-utils": "0.8.2-main.fbd8ed0"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"@phosphor-icons/react": "^2.1.5",
|
|
76
76
|
"react": "~18.2.0",
|
|
77
77
|
"react-dom": "~18.2.0",
|
|
78
|
-
"@dxos/
|
|
79
|
-
"@dxos/
|
|
80
|
-
"@dxos/
|
|
81
|
-
"@dxos/react-ui": "0.8.2-main.
|
|
78
|
+
"@dxos/random": "0.8.2-main.fbd8ed0",
|
|
79
|
+
"@dxos/react-ui": "0.8.2-main.fbd8ed0",
|
|
80
|
+
"@dxos/client": "0.8.2-main.fbd8ed0",
|
|
81
|
+
"@dxos/react-ui-theme": "0.8.2-main.fbd8ed0"
|
|
82
82
|
},
|
|
83
83
|
"publishConfig": {
|
|
84
84
|
"access": "public"
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
import '@dxos-theme';
|
|
6
|
+
|
|
5
7
|
import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
6
8
|
import { type Meta, type StoryObj } from '@storybook/react';
|
|
7
9
|
import React, { useState, useCallback } from 'react';
|
|
@@ -10,8 +12,8 @@ import { faker } from '@dxos/random';
|
|
|
10
12
|
import { withTheme } from '@dxos/storybook-utils';
|
|
11
13
|
|
|
12
14
|
import { Stack } from './Stack';
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
+
import { StackItem } from '../StackItem';
|
|
16
|
+
import { type StackItemData } from '../defs';
|
|
15
17
|
|
|
16
18
|
type StoryStackItem = {
|
|
17
19
|
id: string;
|
|
@@ -27,7 +29,7 @@ const KanbanBlock = ({ item }: { item: StoryStackItem }) => {
|
|
|
27
29
|
);
|
|
28
30
|
};
|
|
29
31
|
|
|
30
|
-
const
|
|
32
|
+
const DefaultStory = () => {
|
|
31
33
|
const [columns, setColumns] = useState<StoryStackItem[]>(
|
|
32
34
|
faker.helpers.multiple(
|
|
33
35
|
() =>
|
|
@@ -117,19 +119,19 @@ const StorybookStack = () => {
|
|
|
117
119
|
);
|
|
118
120
|
};
|
|
119
121
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
export const Default: Story = {
|
|
123
|
-
args: {
|
|
124
|
-
orientation: 'horizontal',
|
|
125
|
-
},
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
const meta: Meta<typeof StorybookStack> = {
|
|
122
|
+
const meta: Meta<typeof DefaultStory> = {
|
|
129
123
|
title: 'ui/react-ui-stack/Stack',
|
|
130
|
-
component:
|
|
124
|
+
component: DefaultStory,
|
|
131
125
|
decorators: [withTheme],
|
|
132
126
|
argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
|
|
133
127
|
};
|
|
134
128
|
|
|
135
129
|
export default meta;
|
|
130
|
+
|
|
131
|
+
type Story = StoryObj<typeof DefaultStory>;
|
|
132
|
+
|
|
133
|
+
export const Default: Story = {
|
|
134
|
+
args: {
|
|
135
|
+
orientation: 'horizontal',
|
|
136
|
+
},
|
|
137
|
+
};
|
|
@@ -9,8 +9,9 @@ import React, { Children, type CSSProperties, type ComponentPropsWithRef, forwar
|
|
|
9
9
|
import { type ThemedClassName, ListItem } from '@dxos/react-ui';
|
|
10
10
|
import { mx } from '@dxos/react-ui-theme';
|
|
11
11
|
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
12
|
+
import { useStackDropForElements } from '../../hooks';
|
|
13
|
+
import { StackContext } from '../StackContext';
|
|
14
|
+
import { type StackContextValue } from '../defs';
|
|
14
15
|
|
|
15
16
|
export type Orientation = 'horizontal' | 'vertical';
|
|
16
17
|
export type Size = 'intrinsic' | 'contain' | 'contain-fit-content';
|
|
@@ -2,22 +2,10 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
6
5
|
import { createContext, useContext } from 'react';
|
|
7
6
|
|
|
8
|
-
import { type Size as DndSize } from '@dxos/react-ui-dnd';
|
|
9
|
-
|
|
10
7
|
import { type Orientation, type Size } from './Stack';
|
|
11
|
-
|
|
12
|
-
export type StackItemSize = DndSize;
|
|
13
|
-
|
|
14
|
-
export type StackItemData = { id: string; type: 'column' | 'card' };
|
|
15
|
-
|
|
16
|
-
export type StackItemRearrangeHandler<Data extends { id: string } = StackItemData> = (
|
|
17
|
-
source: Data,
|
|
18
|
-
target: Data,
|
|
19
|
-
closestEdge: Edge | null,
|
|
20
|
-
) => void;
|
|
8
|
+
import { type StackItemSize, type StackItemRearrangeHandler } from './defs';
|
|
21
9
|
|
|
22
10
|
export type StackContextValue = {
|
|
23
11
|
orientation: Orientation;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import '@dxos-theme';
|
|
6
|
+
|
|
7
|
+
import { type Meta, type StoryObj } from '@storybook/react';
|
|
8
|
+
import React from 'react';
|
|
9
|
+
|
|
10
|
+
import { Icon, DropdownMenu } from '@dxos/react-ui';
|
|
11
|
+
import { withTheme } from '@dxos/storybook-utils';
|
|
12
|
+
|
|
13
|
+
import { StackItem } from './StackItem';
|
|
14
|
+
|
|
15
|
+
const meta: Meta<typeof StackItem.Root> = {
|
|
16
|
+
title: 'ui/react-ui-stack/StackItem',
|
|
17
|
+
component: StackItem.Root,
|
|
18
|
+
render: (args) => (
|
|
19
|
+
<StackItem.Root role='section' {...args} classNames='w-[20rem] border border-separator'>
|
|
20
|
+
<StackItem.Heading>
|
|
21
|
+
<span className='sr-only'>Title</span>
|
|
22
|
+
<div role='none' className='sticky -block-start-px bg-[--sticky-bg] p-1 is-full'>
|
|
23
|
+
<DropdownMenu.Root>
|
|
24
|
+
<DropdownMenu.Trigger asChild>
|
|
25
|
+
<StackItem.SigilButton>
|
|
26
|
+
<Icon icon={'ph--dots-three--regular'} size={5} />
|
|
27
|
+
</StackItem.SigilButton>
|
|
28
|
+
</DropdownMenu.Trigger>
|
|
29
|
+
</DropdownMenu.Root>
|
|
30
|
+
</div>
|
|
31
|
+
</StackItem.Heading>
|
|
32
|
+
<StackItem.Content classNames='p-2'>Content</StackItem.Content>
|
|
33
|
+
</StackItem.Root>
|
|
34
|
+
),
|
|
35
|
+
decorators: [withTheme],
|
|
36
|
+
parameters: {
|
|
37
|
+
layout: 'centered',
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export default meta;
|
|
42
|
+
|
|
43
|
+
type Story = StoryObj<typeof StackItem.Root>;
|
|
44
|
+
|
|
45
|
+
export const Default: Story = {
|
|
46
|
+
args: {
|
|
47
|
+
item: { id: '1' },
|
|
48
|
+
},
|
|
49
|
+
};
|
|
@@ -19,7 +19,6 @@ import { type ThemedClassName, ListItem } from '@dxos/react-ui';
|
|
|
19
19
|
import { resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
|
|
20
20
|
import { mx } from '@dxos/react-ui-theme';
|
|
21
21
|
|
|
22
|
-
import { useStack, StackItemContext, type StackItemSize, type StackItemData } from './StackContext';
|
|
23
22
|
import { StackItemContent, type StackItemContentProps } from './StackItemContent';
|
|
24
23
|
import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
|
|
25
24
|
import {
|
|
@@ -36,13 +35,15 @@ import {
|
|
|
36
35
|
type StackItemSigilButtonProps,
|
|
37
36
|
StackItemSigilButton,
|
|
38
37
|
} from './StackItemSigil';
|
|
38
|
+
import { useStack, StackItemContext } from '../StackContext';
|
|
39
|
+
import { type StackItemSize, type StackItemData } from '../defs';
|
|
39
40
|
|
|
40
41
|
// NOTE: 48rem fills the screen on a MacbookPro with the sidebars closed.
|
|
41
42
|
export const DEFAULT_HORIZONTAL_SIZE = 48 satisfies StackItemSize;
|
|
42
43
|
export const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;
|
|
43
44
|
export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;
|
|
44
45
|
|
|
45
|
-
|
|
46
|
+
type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
|
|
46
47
|
item: Omit<StackItemData, 'type'>;
|
|
47
48
|
order?: number;
|
|
48
49
|
size?: StackItemSize;
|
|
@@ -197,6 +198,7 @@ export const StackItem = {
|
|
|
197
198
|
};
|
|
198
199
|
|
|
199
200
|
export type {
|
|
201
|
+
StackItemRootProps,
|
|
200
202
|
StackItemContentProps,
|
|
201
203
|
StackItemHeadingProps,
|
|
202
204
|
StackItemHeadingLabelProps,
|
|
@@ -7,7 +7,7 @@ import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
|
|
|
7
7
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
8
8
|
import { mx } from '@dxos/react-ui-theme';
|
|
9
9
|
|
|
10
|
-
import { useStack } from '
|
|
10
|
+
import { useStack } from '../StackContext';
|
|
11
11
|
|
|
12
12
|
export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
|
|
13
13
|
/**
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { Slot } from '@radix-ui/react-slot';
|
|
6
6
|
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
7
7
|
|
|
8
|
-
import { useStackItem } from '
|
|
8
|
+
import { useStackItem } from '../StackContext';
|
|
9
9
|
|
|
10
10
|
export type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { asChild: boolean };
|
|
11
11
|
|
|
@@ -9,7 +9,7 @@ import { type ThemedClassName } from '@dxos/react-ui';
|
|
|
9
9
|
import { useAttention, type AttendableId, type Related } from '@dxos/react-ui-attention';
|
|
10
10
|
import { mx } from '@dxos/react-ui-theme';
|
|
11
11
|
|
|
12
|
-
import { useStack } from '
|
|
12
|
+
import { useStack } from '../StackContext';
|
|
13
13
|
|
|
14
14
|
export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
|
|
15
15
|
|
|
@@ -24,7 +24,7 @@ export const StackItemHeading = ({ children, classNames, ...props }: StackItemHe
|
|
|
24
24
|
tabIndex={0}
|
|
25
25
|
{...focusableGroupAttrs}
|
|
26
26
|
className={mx(
|
|
27
|
-
'flex items-center dx-focus-ring-inset-over-all relative !border-is-0',
|
|
27
|
+
'flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface',
|
|
28
28
|
orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',
|
|
29
29
|
classNames,
|
|
30
30
|
)}
|
|
@@ -6,8 +6,8 @@ import React from 'react';
|
|
|
6
6
|
|
|
7
7
|
import { ResizeHandle } from '@dxos/react-ui-dnd';
|
|
8
8
|
|
|
9
|
-
import { useStack, useStackItem } from './StackContext';
|
|
10
9
|
import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
|
|
10
|
+
import { useStack, useStackItem } from '../StackContext';
|
|
11
11
|
|
|
12
12
|
const MIN_WIDTH = 20;
|
|
13
13
|
const MIN_HEIGHT = 3;
|
|
@@ -12,7 +12,7 @@ import { descriptionText, mx } from '@dxos/react-ui-theme';
|
|
|
12
12
|
import { getHostPlatform } from '@dxos/util';
|
|
13
13
|
|
|
14
14
|
import { MenuSignifierHorizontal } from './MenuSignifier';
|
|
15
|
-
import { translationKey } from '
|
|
15
|
+
import { translationKey } from '../../translations';
|
|
16
16
|
|
|
17
17
|
export type KeyBinding = {
|
|
18
18
|
windows?: string;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
6
|
+
|
|
7
|
+
import { type Size as DndSize } from '@dxos/react-ui-dnd';
|
|
8
|
+
|
|
9
|
+
import { type Orientation, type Size } from './Stack';
|
|
10
|
+
|
|
11
|
+
export type StackItemSize = DndSize;
|
|
12
|
+
|
|
13
|
+
export type StackItemData = { id: string; type: 'column' | 'card' };
|
|
14
|
+
|
|
15
|
+
export type StackItemRearrangeHandler<Data extends { id: string } = StackItemData> = (
|
|
16
|
+
source: Data,
|
|
17
|
+
target: Data,
|
|
18
|
+
closestEdge: Edge | null,
|
|
19
|
+
) => void;
|
|
20
|
+
|
|
21
|
+
export type StackContextValue = {
|
|
22
|
+
orientation: Orientation;
|
|
23
|
+
rail: boolean;
|
|
24
|
+
size: Size;
|
|
25
|
+
onRearrange?: StackItemRearrangeHandler;
|
|
26
|
+
};
|
|
@@ -4,17 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
import React, { forwardRef } from 'react';
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
Button,
|
|
9
|
-
ButtonGroup,
|
|
10
|
-
type ButtonGroupProps,
|
|
11
|
-
type ButtonProps,
|
|
12
|
-
Icon,
|
|
13
|
-
Tooltip,
|
|
14
|
-
useTranslation,
|
|
15
|
-
} from '@dxos/react-ui';
|
|
7
|
+
import { ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, useTranslation } from '@dxos/react-ui';
|
|
16
8
|
|
|
17
|
-
import { translationKey } from '
|
|
9
|
+
import { translationKey } from '../../translations';
|
|
18
10
|
|
|
19
11
|
export type LayoutControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;
|
|
20
12
|
export type LayoutControlHandler = (event: LayoutControlEvent) => void;
|
|
@@ -35,19 +27,7 @@ export type LayoutControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
|
|
|
35
27
|
};
|
|
36
28
|
|
|
37
29
|
const LayoutControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {
|
|
38
|
-
return
|
|
39
|
-
<Tooltip.Root>
|
|
40
|
-
<Tooltip.Trigger asChild>
|
|
41
|
-
<Button variant='ghost' {...props}>
|
|
42
|
-
<span className='sr-only'>{label}</span>
|
|
43
|
-
<Icon icon={icon} />
|
|
44
|
-
</Button>
|
|
45
|
-
</Tooltip.Trigger>
|
|
46
|
-
<Tooltip.Portal>
|
|
47
|
-
<Tooltip.Content side='bottom'>{label}</Tooltip.Content>
|
|
48
|
-
</Tooltip.Portal>
|
|
49
|
-
</Tooltip.Root>
|
|
50
|
-
);
|
|
30
|
+
return <IconButton iconOnly icon={icon} label={label} tooltipSide='bottom' variant='ghost' {...props} />;
|
|
51
31
|
};
|
|
52
32
|
|
|
53
33
|
export const LayoutControls = forwardRef<HTMLDivElement, LayoutControlsProps>(
|
package/src/components/index.ts
CHANGED
|
@@ -8,23 +8,22 @@ 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 Orientation } from '../components
|
|
12
|
-
import { type StackItemRearrangeHandler, type StackItemData } from '../components/StackContext';
|
|
11
|
+
import { type StackItemRearrangeHandler, type StackItemData, type Orientation } from '../components';
|
|
13
12
|
|
|
14
13
|
/**
|
|
15
14
|
* Hook to handle drag and drop functionality for Stack components.
|
|
16
15
|
*/
|
|
17
16
|
export const useStackDropForElements = ({
|
|
17
|
+
id,
|
|
18
18
|
element,
|
|
19
19
|
selfDroppable,
|
|
20
20
|
orientation,
|
|
21
|
-
id,
|
|
22
21
|
onRearrange,
|
|
23
22
|
}: {
|
|
23
|
+
id?: string;
|
|
24
24
|
element: HTMLDivElement | null;
|
|
25
25
|
selfDroppable: boolean;
|
|
26
26
|
orientation: Orientation;
|
|
27
|
-
id?: string;
|
|
28
27
|
onRearrange?: StackItemRearrangeHandler;
|
|
29
28
|
}) => {
|
|
30
29
|
const [dropping, setDropping] = useState(false);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutControls.d.ts","sourceRoot":"","sources":["../../../../src/components/LayoutControls.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAGL,KAAK,gBAAgB,EAKtB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,KAAK,GAAG,WAAW,IAAI,OAAO,GAAG,KAAK,EAAE,CAAC;AAChG,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,OAAO,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,YAAY,CAAC;IAChD,YAAY,EAAE,kBAAkB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;CAChC,CAAC;AAkBF,eAAO,MAAM,cAAc,yGA4E1B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSignifier.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuSignifier.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,uBAAuB,yBAoBnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBAIjC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAgC,KAAK,qBAAqB,EAAiC,MAAM,OAAO,CAAC;AAEvH,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,gBAAgB,CAAC;AAGhE,OAAO,EAAE,KAAK,iBAAiB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGtE,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AACpD,MAAM,MAAM,IAAI,GAAG,WAAW,GAAG,SAAS,GAAG,qBAAqB,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAC9F,OAAO,CAAC,iBAAiB,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvD,eAAO,MAAM,kBAAkB,gFAAgF,CAAC;AAChH,eAAO,MAAM,gBAAgB,gFAAgF,CAAC;AAG9G,eAAO,MAAM,mCAAmC,2HAC0E,CAAC;AAC3H,eAAO,MAAM,iCAAiC,2HAC4E,CAAC;AAE3H,eAAO,MAAM,wBAAwB;;CAAqC,CAAC;AAE3E,eAAO,MAAM,KAAK,gGA8EjB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { type Meta, type StoryObj } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
declare const StorybookStack: () => React.JSX.Element;
|
|
4
|
-
type Story = StoryObj<typeof StorybookStack>;
|
|
5
|
-
export declare const Default: Story;
|
|
6
|
-
declare const meta: Meta<typeof StorybookStack>;
|
|
7
|
-
export default meta;
|
|
8
|
-
//# sourceMappingURL=Stack.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAgC,MAAM,OAAO,CAAC;AAuBrD,QAAA,MAAM,cAAc,yBAwFnB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAKrC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItem.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAyC,KAAK,qBAAqB,EAAe,MAAM,OAAO,CAAC;AAE9G,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,gBAAgB,CAAC;AAIhE,OAAO,EAA8B,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpG,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAChC,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAE/B,MAAM,kBAAkB,CAAC;AAG1B,eAAO,MAAM,uBAAuB,KAA6B,CAAC;AAClE,eAAO,MAAM,qBAAqB,gBAAwC,CAAC;AAC3E,eAAO,MAAM,sBAAsB,KAAkD,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAC/E,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CAC9C,CAAC;AAuIF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CASrB,CAAC;AAEF,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,0BAA0B,EAC1B,wBAAwB,EACxB,mBAAmB,EACnB,yBAAyB,EACzB,oBAAoB,GACrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackItemContent.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKtD,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IACrF;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;CACzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;IAtB3B;;;OAGG;cACO,OAAO;IAEjB;;OAEG;gBACS,OAAO;IAEnB;;;OAGG;WACI,WAAW,GAAG,OAAO,GAAG,QAAQ;wCAmCxC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackItemDragHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemDragHandle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI7D,MAAM,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEjG,eAAO,MAAM,mBAAmB,0BAA2B,wBAAwB,sBAUlF,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackItemHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemHeading.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAKzF,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAErF,eAAO,MAAM,gBAAgB,uCAAwC,qBAAqB,sBAmBzF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,eAAe,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG,YAAY,GAAG,OAAO,CAAC;AAE/G,eAAO,MAAM,qBAAqB,oHAgBjC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackItemResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemResizeHandle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAE5C,eAAO,MAAM,qBAAqB,yBAajC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackItemSigil.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemSigil.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAY,KAAK,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAU,KAAK,WAAW,EAAyD,MAAM,gBAAgB,CAAC;AACjH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,OAAO,EAAgB,MAAM,0BAA0B,CAAC;AAOzF,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAClE,YAAY,GACZ,OAAO,GAAG;IACR,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,oBAAoB,kHAiBhC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CACjD;IACE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,oBAAoB,EAAE,EAAE,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD,GAAG,OAAO,CACZ,CAAC;AAEF,eAAO,MAAM,cAAc;mBARR,MAAM;kBACP,MAAM;cACV,oBAAoB,EAAE,EAAE;UAC5B,MAAM;eACD,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI;;;2CAyGpD,CAAC"}
|
|
File without changes
|
/package/dist/types/src/components/{StackItemContent.d.ts → StackItem/StackItemContent.d.ts}
RENAMED
|
File without changes
|
/package/dist/types/src/components/{StackItemDragHandle.d.ts → StackItem/StackItemDragHandle.d.ts}
RENAMED
|
File without changes
|
/package/dist/types/src/components/{StackItemHeading.d.ts → StackItem/StackItemHeading.d.ts}
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|