@dxos/react-ui-stack 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41
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 +188 -416
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/translations.mjs +23 -0
- package/dist/lib/browser/translations.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +188 -416
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/translations.mjs +25 -0
- package/dist/lib/node-esm/translations.mjs.map +7 -0
- package/dist/types/src/components/Stack/Stack.d.ts +4 -9
- package/dist/types/src/components/Stack/Stack.d.ts.map +1 -1
- package/dist/types/src/components/Stack/Stack.stories.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/MenuSignifier.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItem.d.ts +5 -5
- package/dist/types/src/components/StackItem/StackItem.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItem.stories.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItemDragHandle.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 +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 +0 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useStackDropForElements.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +0 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/playwright/playwright.config.d.ts.map +1 -1
- package/dist/types/src/playwright/stack-manager.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +8 -8
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +34 -35
- package/src/components/Stack/Stack.stories.tsx +8 -10
- package/src/components/Stack/Stack.tsx +197 -210
- package/src/components/StackItem/MenuSignifier.tsx +2 -9
- package/src/components/StackItem/StackItem.stories.tsx +4 -4
- package/src/components/StackItem/StackItem.tsx +13 -15
- package/src/components/StackItem/StackItemContent.tsx +6 -6
- package/src/components/StackItem/StackItemDragHandle.tsx +4 -3
- package/src/components/StackItem/StackItemHeading.tsx +13 -12
- package/src/components/StackItem/StackItemResizeHandle.tsx +1 -2
- package/src/components/StackItem/StackItemSigil.tsx +8 -5
- package/src/components/index.ts +1 -1
- package/src/hooks/useStackDropForElements.ts +2 -2
- package/src/index.ts +0 -1
- package/src/playwright/playwright.config.ts +1 -1
- package/src/translations.ts +8 -8
- package/dist/types/src/components/CardStack/CardStack.d.ts +0 -47
- package/dist/types/src/components/CardStack/CardStack.d.ts.map +0 -1
- package/dist/types/src/components/CardStack/CardStack.stories.d.ts +0 -15
- package/dist/types/src/components/CardStack/CardStack.stories.d.ts.map +0 -1
- package/dist/types/src/components/CardStack/CardStackDragPreview.d.ts +0 -12
- package/dist/types/src/components/CardStack/CardStackDragPreview.d.ts.map +0 -1
- package/dist/types/src/components/CardStack/index.d.ts +0 -3
- package/dist/types/src/components/CardStack/index.d.ts.map +0 -1
- package/dist/types/src/components/deprecated/LayoutControls.d.ts +0 -22
- package/dist/types/src/components/deprecated/LayoutControls.d.ts.map +0 -1
- package/src/components/CardStack/CardStack.stories.tsx +0 -173
- package/src/components/CardStack/CardStack.tsx +0 -195
- package/src/components/CardStack/CardStackDragPreview.tsx +0 -64
- package/src/components/CardStack/index.ts +0 -6
- package/src/components/deprecated/LayoutControls.tsx +0 -112
|
@@ -5,14 +5,7 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
|
|
7
7
|
export const MenuSignifierHorizontal = () => (
|
|
8
|
-
<svg
|
|
9
|
-
className='absolute block-end-[7px]'
|
|
10
|
-
width={20}
|
|
11
|
-
height={2}
|
|
12
|
-
viewBox='0 0 20 2'
|
|
13
|
-
stroke='currentColor'
|
|
14
|
-
opacity={0.5}
|
|
15
|
-
>
|
|
8
|
+
<svg className='absolute bottom-[7px]' width={20} height={2} viewBox='0 0 20 2' stroke='currentColor' opacity={0.5}>
|
|
16
9
|
<line
|
|
17
10
|
x1={0.5}
|
|
18
11
|
y1={0.75}
|
|
@@ -27,7 +20,7 @@ export const MenuSignifierHorizontal = () => (
|
|
|
27
20
|
);
|
|
28
21
|
|
|
29
22
|
export const MenuSignifierVertical = () => (
|
|
30
|
-
<svg className='absolute
|
|
23
|
+
<svg className='absolute left-1' width={2} height={18} viewBox='0 0 2 18' stroke='currentColor'>
|
|
31
24
|
<line x1={1} y1={3} x2={1} y2={18} strokeWidth={1.5} strokeLinecap='round' strokeDasharray='0 6' />
|
|
32
25
|
</svg>
|
|
33
26
|
);
|
|
@@ -12,14 +12,14 @@ import { StackItem, type StackItemRootProps } from './StackItem';
|
|
|
12
12
|
|
|
13
13
|
const DefaultStory = (props: StackItemRootProps) => {
|
|
14
14
|
return (
|
|
15
|
-
<StackItem.Root role='section' {...props} classNames='
|
|
16
|
-
<StackItem.Heading classNames='
|
|
15
|
+
<StackItem.Root role='section' {...props} classNames='w-[20rem] border border-separator'>
|
|
16
|
+
<StackItem.Heading classNames='w-full border-b border-separator'>
|
|
17
17
|
<span className='sr-only'>Title</span>
|
|
18
|
-
<div role='none' className='sticky -
|
|
18
|
+
<div role='none' className='sticky -top-px bg-(--sticky-bg) p-1 w-full'>
|
|
19
19
|
<DropdownMenu.Root>
|
|
20
20
|
<DropdownMenu.Trigger asChild>
|
|
21
21
|
<StackItem.SigilButton>
|
|
22
|
-
<Icon icon='ph--dots-three--regular'
|
|
22
|
+
<Icon icon='ph--dots-three--regular' />
|
|
23
23
|
</StackItem.SigilButton>
|
|
24
24
|
</DropdownMenu.Trigger>
|
|
25
25
|
</DropdownMenu.Root>
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
6
|
-
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
7
|
-
import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
|
|
8
|
-
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
|
|
9
5
|
import {
|
|
10
6
|
type Edge,
|
|
11
7
|
attachClosestEdge,
|
|
12
8
|
extractClosestEdge,
|
|
13
9
|
} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
10
|
+
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
11
|
+
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
12
|
+
import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
|
|
13
|
+
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
|
|
14
14
|
import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
15
15
|
import { composeRefs } from '@radix-ui/react-compose-refs';
|
|
16
16
|
import React, {
|
|
@@ -30,7 +30,6 @@ import { mx } from '@dxos/ui-theme';
|
|
|
30
30
|
|
|
31
31
|
import { type ItemDragState, StackItemContext, idle, useStack, useStackItem } from '../StackContext';
|
|
32
32
|
import { type StackItemData, type StackItemSize } from '../types';
|
|
33
|
-
|
|
34
33
|
import { StackItemContent, type StackItemContentProps } from './StackItemContent';
|
|
35
34
|
import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
|
|
36
35
|
import {
|
|
@@ -49,9 +48,8 @@ import {
|
|
|
49
48
|
type StackItemSigilProps,
|
|
50
49
|
} from './StackItemSigil';
|
|
51
50
|
|
|
52
|
-
// NOTE: 48rem fills the screen on a MacbookPro with the sidebars closed.
|
|
53
|
-
export const DEFAULT_HORIZONTAL_SIZE = 48 satisfies StackItemSize;
|
|
54
51
|
export const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;
|
|
52
|
+
export const DEFAULT_HORIZONTAL_SIZE = 50 satisfies StackItemSize;
|
|
55
53
|
export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;
|
|
56
54
|
|
|
57
55
|
//
|
|
@@ -59,13 +57,13 @@ export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackIte
|
|
|
59
57
|
//
|
|
60
58
|
|
|
61
59
|
type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
|
|
60
|
+
role?: 'article' | 'section';
|
|
62
61
|
item: Omit<StackItemData, 'type'>;
|
|
63
62
|
order?: number;
|
|
64
63
|
prevSiblingId?: string;
|
|
65
64
|
nextSiblingId?: string;
|
|
66
65
|
size?: StackItemSize;
|
|
67
66
|
onSizeChange?: (nextSize: StackItemSize) => void;
|
|
68
|
-
role?: 'article' | 'section';
|
|
69
67
|
disableRearrange?: boolean;
|
|
70
68
|
focusIndicatorVariant?: 'over-all' | 'group' | 'over-all-always' | 'group-always';
|
|
71
69
|
};
|
|
@@ -73,16 +71,16 @@ type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
|
|
|
73
71
|
const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
|
|
74
72
|
(
|
|
75
73
|
{
|
|
76
|
-
item,
|
|
77
|
-
children,
|
|
78
74
|
classNames,
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
children,
|
|
76
|
+
style,
|
|
81
77
|
role,
|
|
78
|
+
item,
|
|
82
79
|
order,
|
|
83
80
|
prevSiblingId,
|
|
84
81
|
nextSiblingId,
|
|
85
|
-
|
|
82
|
+
size: sizeProp,
|
|
83
|
+
onSizeChange,
|
|
86
84
|
disableRearrange,
|
|
87
85
|
focusIndicatorVariant = 'over-all',
|
|
88
86
|
...props
|
|
@@ -97,7 +95,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
|
|
|
97
95
|
const [dragState, setDragState] = useState<ItemDragState>(idle);
|
|
98
96
|
const { orientation, rail, onRearrange, size: stackSize, stackId } = useStack();
|
|
99
97
|
const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =
|
|
100
|
-
useState(
|
|
98
|
+
useState(sizeProp);
|
|
101
99
|
|
|
102
100
|
const Root = role ?? 'div';
|
|
103
101
|
|
|
@@ -247,7 +245,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
|
|
|
247
245
|
: 'dx-focus-ring-group-y',
|
|
248
246
|
orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',
|
|
249
247
|
rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),
|
|
250
|
-
role === 'section' && orientation !== 'horizontal' && 'border-
|
|
248
|
+
role === 'section' && orientation !== 'horizontal' && 'border-b border-subdued-separator',
|
|
251
249
|
classNames,
|
|
252
250
|
)}
|
|
253
251
|
data-dx-stack-item={stackId}
|
|
@@ -24,9 +24,9 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
|
|
|
24
24
|
const style = useMemo(
|
|
25
25
|
() => ({
|
|
26
26
|
gridTemplateRows: [
|
|
27
|
-
toolbar && role === 'section' ? 'calc(var(--toolbar-size) - 1px)' : 'var(--toolbar-size)',
|
|
27
|
+
toolbar && role === 'section' ? 'calc(var(--dx-toolbar-size) - 1px)' : 'var(--dx-toolbar-size)',
|
|
28
28
|
'1fr',
|
|
29
|
-
statusbar && 'var(--statusbar-size)',
|
|
29
|
+
statusbar && 'var(--dx-statusbar-size)',
|
|
30
30
|
]
|
|
31
31
|
.filter(Boolean)
|
|
32
32
|
.join(' '),
|
|
@@ -40,12 +40,12 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
|
|
|
40
40
|
role='none'
|
|
41
41
|
style={style}
|
|
42
42
|
className={mx(
|
|
43
|
-
'group grid grid-cols-[100%] density-coarse',
|
|
44
|
-
stackItemSize === 'contain' && 'min-
|
|
43
|
+
'group grid grid-cols-[100%] dx-density-coarse',
|
|
44
|
+
stackItemSize === 'contain' && 'min-h-0 overflow-hidden',
|
|
45
45
|
toolbar &&
|
|
46
46
|
role === 'section' &&
|
|
47
|
-
'[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:
|
|
48
|
-
toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-
|
|
47
|
+
'[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:top-0 [&_.dx-toolbar]:-mb-px [&_.dx-toolbar]:min-w-0',
|
|
48
|
+
toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-b [&>.dx-toolbar]:border-subdued-separator',
|
|
49
49
|
classNames,
|
|
50
50
|
)}
|
|
51
51
|
data-popover-collision-boundary={true}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
import { Primitive } from '@radix-ui/react-primitive';
|
|
5
6
|
import { Slot } from '@radix-ui/react-slot';
|
|
6
7
|
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
7
8
|
|
|
@@ -12,11 +13,11 @@ export type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { as
|
|
|
12
13
|
export const StackItemDragHandle = ({ asChild, children }: StackItemDragHandleProps) => {
|
|
13
14
|
const { selfDragHandleRef } = useStackItem();
|
|
14
15
|
|
|
15
|
-
const
|
|
16
|
+
const Comp = asChild ? Slot : Primitive.div;
|
|
16
17
|
|
|
17
18
|
return (
|
|
18
|
-
<
|
|
19
|
+
<Comp ref={selfDragHandleRef} role='button'>
|
|
19
20
|
{children}
|
|
20
|
-
</
|
|
21
|
+
</Comp>
|
|
21
22
|
);
|
|
22
23
|
};
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
import { Primitive } from '@radix-ui/react-primitive';
|
|
5
6
|
import { Slot } from '@radix-ui/react-slot';
|
|
6
7
|
import React, {
|
|
7
8
|
type ComponentPropsWithRef,
|
|
@@ -26,34 +27,34 @@ export const StackItemHeading = ({
|
|
|
26
27
|
classNames,
|
|
27
28
|
asChild,
|
|
28
29
|
separateOnScroll,
|
|
30
|
+
role,
|
|
29
31
|
...props
|
|
30
32
|
}: StackItemHeadingProps) => {
|
|
31
33
|
const { orientation } = useStack();
|
|
32
|
-
|
|
33
|
-
const Root = asChild ? Slot : 'div';
|
|
34
|
+
const Comp = asChild ? Slot : Primitive.div;
|
|
34
35
|
|
|
35
36
|
return (
|
|
36
|
-
<
|
|
37
|
-
role='heading'
|
|
37
|
+
<Comp
|
|
38
38
|
{...props}
|
|
39
|
+
role={role ?? 'heading'}
|
|
39
40
|
className={mx(
|
|
40
|
-
'flex items-center
|
|
41
|
+
'flex items-center border-x-0! bg-header-surface',
|
|
41
42
|
separateOnScroll
|
|
42
|
-
? 'border-transparent [[data-scroll-separator="true"]_&]:border-
|
|
43
|
-
: 'border-
|
|
44
|
-
orientation === 'horizontal' ? '
|
|
45
|
-
orientation === 'horizontal' ? 'border-
|
|
43
|
+
? 'border-transparent [[data-scroll-separator="true"]_&]:border-subdued-separator'
|
|
44
|
+
: 'border-subdued-separator',
|
|
45
|
+
orientation === 'horizontal' ? 'h-(--dx-rail-size)' : 'w-(--dx-rail-size) flex-col',
|
|
46
|
+
orientation === 'horizontal' ? 'border-b' : 'border-e',
|
|
46
47
|
classNames,
|
|
47
48
|
)}
|
|
48
49
|
>
|
|
49
50
|
{children}
|
|
50
|
-
</
|
|
51
|
+
</Comp>
|
|
51
52
|
);
|
|
52
53
|
};
|
|
53
54
|
|
|
54
55
|
export const StackItemHeadingStickyContent = ({ children }: PropsWithChildren<{}>) => {
|
|
55
56
|
return (
|
|
56
|
-
<div role='none' className='sticky
|
|
57
|
+
<div role='none' className='sticky top-0 bg-(--sticky-bg) p-1 w-full'>
|
|
57
58
|
{children}
|
|
58
59
|
</div>
|
|
59
60
|
);
|
|
@@ -70,7 +71,7 @@ export const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHea
|
|
|
70
71
|
{...props}
|
|
71
72
|
data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}
|
|
72
73
|
className={mx(
|
|
73
|
-
'
|
|
74
|
+
'px-1 min-w-0 w-0 grow truncate font-medium text-base-surface-text data-[attention=true]:text-accent-text self-center',
|
|
74
75
|
classNames,
|
|
75
76
|
)}
|
|
76
77
|
ref={forwardedRef}
|
|
@@ -7,7 +7,6 @@ import React from 'react';
|
|
|
7
7
|
import { ResizeHandle } from '@dxos/react-ui-dnd';
|
|
8
8
|
|
|
9
9
|
import { useStack, useStackItem } from '../StackContext';
|
|
10
|
-
|
|
11
10
|
import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
|
|
12
11
|
|
|
13
12
|
const MIN_WIDTH = 20;
|
|
@@ -15,7 +14,7 @@ const MIN_HEIGHT = 3;
|
|
|
15
14
|
|
|
16
15
|
export type StackItemResizeHandleProps = {};
|
|
17
16
|
|
|
18
|
-
export const StackItemResizeHandle = () => {
|
|
17
|
+
export const StackItemResizeHandle = (_: StackItemResizeHandleProps) => {
|
|
19
18
|
const { orientation } = useStack();
|
|
20
19
|
const { setSize, size } = useStackItem();
|
|
21
20
|
|
|
@@ -8,10 +8,10 @@ import { type Node } from '@dxos/app-graph';
|
|
|
8
8
|
import { keySymbols } from '@dxos/keyboard';
|
|
9
9
|
import { Button, type ButtonProps, DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
|
|
10
10
|
import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
|
|
11
|
-
import {
|
|
11
|
+
import { mx } from '@dxos/ui-theme';
|
|
12
12
|
import { getHostPlatform } from '@dxos/util';
|
|
13
13
|
|
|
14
|
-
import { translationKey } from '
|
|
14
|
+
import { translationKey } from '#translations';
|
|
15
15
|
|
|
16
16
|
import { MenuSignifierHorizontal } from './MenuSignifier';
|
|
17
17
|
|
|
@@ -40,7 +40,10 @@ export const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigil
|
|
|
40
40
|
<Button
|
|
41
41
|
{...props}
|
|
42
42
|
variant={variant}
|
|
43
|
-
classNames={[
|
|
43
|
+
classNames={[
|
|
44
|
+
'shrink-0 px-0 min-h-0 w-(--dx-rail-action) h-(--dx-rail-action) relative dx-app-no-drag',
|
|
45
|
+
classNames,
|
|
46
|
+
]}
|
|
44
47
|
ref={forwardedRef}
|
|
45
48
|
>
|
|
46
49
|
{isMenu && <MenuSignifierHorizontal />}
|
|
@@ -78,7 +81,7 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
|
|
|
78
81
|
classNames={!hasActions && 'cursor-default'}
|
|
79
82
|
>
|
|
80
83
|
<span className='sr-only'>{triggerLabel}</span>
|
|
81
|
-
<Icon icon={icon}
|
|
84
|
+
<Icon icon={icon} />
|
|
82
85
|
</StackItemSigilButton>
|
|
83
86
|
);
|
|
84
87
|
|
|
@@ -133,7 +136,7 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
|
|
|
133
136
|
</DropdownMenu.ItemIndicator>
|
|
134
137
|
)}
|
|
135
138
|
{shortcut && (
|
|
136
|
-
<span className={mx('shrink-0',
|
|
139
|
+
<span className={mx('shrink-0', 'text-description')}>{keySymbols(shortcut).join('')}</span>
|
|
137
140
|
)}
|
|
138
141
|
</Root>
|
|
139
142
|
);
|
package/src/components/index.ts
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
6
|
-
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
7
5
|
import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
|
|
8
6
|
import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
7
|
+
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
8
|
+
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
9
9
|
import { useLayoutEffect, useState } from 'react';
|
|
10
10
|
|
|
11
11
|
import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';
|
package/src/index.ts
CHANGED
|
@@ -10,7 +10,7 @@ export default defineConfig({
|
|
|
10
10
|
...e2ePreset(import.meta.dirname),
|
|
11
11
|
// TODO(wittjosiah): Avoid hard-coding ports.
|
|
12
12
|
webServer: {
|
|
13
|
-
command: '
|
|
13
|
+
command: 'pnpm storybook dev --ci --quiet --port=9003 --config-dir=.storybook',
|
|
14
14
|
port: 9003,
|
|
15
15
|
reuseExistingServer: false,
|
|
16
16
|
},
|
package/src/translations.ts
CHANGED
|
@@ -10,14 +10,14 @@ export const translations = [
|
|
|
10
10
|
{
|
|
11
11
|
'en-US': {
|
|
12
12
|
[translationKey]: {
|
|
13
|
-
'resize
|
|
14
|
-
'drag
|
|
15
|
-
'pin
|
|
16
|
-
'pin
|
|
17
|
-
'increment
|
|
18
|
-
'increment
|
|
19
|
-
'close
|
|
20
|
-
'minify
|
|
13
|
+
'resize.label': 'Drag to resize',
|
|
14
|
+
'drag-handle.label': 'Drag to rearrange',
|
|
15
|
+
'pin-start.label': 'Pin to the left sidebar',
|
|
16
|
+
'pin-end.label': 'Pin to the right sidebar',
|
|
17
|
+
'increment-start.label': 'Move to the left',
|
|
18
|
+
'increment-end.label': 'Move to the right',
|
|
19
|
+
'close.label': 'Close',
|
|
20
|
+
'minify.label': 'Minify',
|
|
21
21
|
},
|
|
22
22
|
},
|
|
23
23
|
},
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type StackProps } from '../Stack';
|
|
3
|
-
/**
|
|
4
|
-
* This is `cardDefaultInlineSize` plus 2 times the sum of the inner and outer spacing applied by CardStack on the inline axis.
|
|
5
|
-
*/
|
|
6
|
-
declare const cardStackDefaultInlineSizeRem: number;
|
|
7
|
-
declare const cardStackRoot = "flex flex-col";
|
|
8
|
-
declare const cardStackContent = "shrink min-bs-0 grid dx-focus-ring-group-x-indicator bg-baseSurface";
|
|
9
|
-
declare const cardStackItem = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
|
|
10
|
-
declare const cardStackHeading = "mli-2 order-first bg-transparent rounded-bs-md flex items-center";
|
|
11
|
-
declare const cardStackFooter = "plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end=\"true\"]_&]:border-subduedSeparator";
|
|
12
|
-
/**
|
|
13
|
-
* @deprecated Replace with Mosaic.Stack.
|
|
14
|
-
*/
|
|
15
|
-
export declare const CardStack: {
|
|
16
|
-
Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
|
|
17
|
-
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
18
|
-
} & {
|
|
19
|
-
asChild?: boolean;
|
|
20
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
-
Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
|
|
22
|
-
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
23
|
-
} & {
|
|
24
|
-
asChild?: boolean;
|
|
25
|
-
} & {
|
|
26
|
-
footer?: boolean;
|
|
27
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
28
|
-
Stack: React.ForwardRefExoticComponent<Omit<Omit<StackProps, "orientation" | "rail" | "size" | "separatorOnScroll">, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
-
Heading: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
|
|
30
|
-
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
31
|
-
} & {
|
|
32
|
-
asChild?: boolean;
|
|
33
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
34
|
-
Footer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
|
|
35
|
-
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
36
|
-
} & {
|
|
37
|
-
asChild?: boolean;
|
|
38
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
39
|
-
DragHandle: React.ForwardRefExoticComponent<React.RefAttributes<HTMLButtonElement>>;
|
|
40
|
-
Item: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
|
|
41
|
-
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
42
|
-
} & {
|
|
43
|
-
asChild?: boolean;
|
|
44
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
45
|
-
};
|
|
46
|
-
export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent, cardStackItem, cardStackDefaultInlineSizeRem, };
|
|
47
|
-
//# sourceMappingURL=CardStack.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardStack/CardStack.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAMzE,OAAO,EAAS,KAAK,UAAU,EAAuC,MAAM,UAAU,CAAC;AAEvF;;GAEG;AACH,QAAA,MAAM,6BAA6B,QAAgC,CAAC;AAMpE,QAAA,MAAM,aAAa,kBAAkB,CAAC;AAsBtC,QAAA,MAAM,gBAAgB,wEAAwE,CAAC;AA4D/F,QAAA,MAAM,aAAa,sEAAsE,CAAC;AAqB1F,QAAA,MAAM,gBAAgB,qEAAqE,CAAC;AAqB5F,QAAA,MAAM,eAAe,8GACsF,CAAC;AA2B5G;;GAEG;AACH,eAAO,MAAM,SAAS;;;;kBAzGV,OAAO;;;;;kBAAP,OAAO;;iBAzBR,OAAO;;;;;;kBAyBN,OAAO;;;;;kBAAP,OAAO;;;;;;kBAAP,OAAO;;CAiHlB,CAAC;AAEF,OAAO,EACL,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,6BAA6B,GAC9B,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { type StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
declare const CardStackStory: () => React.JSX.Element;
|
|
4
|
-
declare const meta: {
|
|
5
|
-
title: string;
|
|
6
|
-
component: () => React.JSX.Element;
|
|
7
|
-
decorators: import("@storybook/react").Decorator[];
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: string;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
export default meta;
|
|
13
|
-
type Story = StoryObj<typeof CardStackStory>;
|
|
14
|
-
export declare const Default: Story;
|
|
15
|
-
//# sourceMappingURL=CardStack.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardStack.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardStack/CardStack.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAgC,MAAM,OAAO,CAAC;AAyBrD,QAAA,MAAM,cAAc,yBA8HnB,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;;;CAO6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React, { type PropsWithChildren } from 'react';
|
|
2
|
-
import { type StackProps } from '../Stack';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated
|
|
5
|
-
*/
|
|
6
|
-
export declare const CardStackDragPreview: {
|
|
7
|
-
Root: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
|
|
8
|
-
Heading: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
|
|
9
|
-
Content: ({ children, itemsCount, }: PropsWithChildren<Pick<StackProps, "itemsCount">>) => React.JSX.Element;
|
|
10
|
-
Footer: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=CardStackDragPreview.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardStackDragPreview.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardStack/CardStackDragPreview.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AA6C3C;;GAEG;AACH,eAAO,MAAM,oBAAoB;yBA9Ce,iBAAiB,CAAC,EAAE,CAAC;4BAUlB,iBAAiB,CAAC,EAAE,CAAC;yCAmBrE,iBAAiB,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;2BAUF,iBAAiB,CAAC,EAAE,CAAC;CAYtE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardStack/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type ButtonGroupProps } from '@dxos/react-ui';
|
|
3
|
-
export type LayoutControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;
|
|
4
|
-
export type LayoutControlHandler = (event: LayoutControlEvent) => void;
|
|
5
|
-
export type LayoutCapabilities = {
|
|
6
|
-
incrementStart?: boolean;
|
|
7
|
-
incrementEnd?: boolean;
|
|
8
|
-
solo?: boolean;
|
|
9
|
-
};
|
|
10
|
-
export type LayoutControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
|
|
11
|
-
onClick?: LayoutControlHandler;
|
|
12
|
-
variant?: 'hide-disabled' | 'default';
|
|
13
|
-
close?: boolean | 'minify-start' | 'minify-end';
|
|
14
|
-
capabilities: LayoutCapabilities;
|
|
15
|
-
isSolo?: boolean;
|
|
16
|
-
pin?: 'start' | 'end' | 'both';
|
|
17
|
-
};
|
|
18
|
-
/**
|
|
19
|
-
* @deprecated
|
|
20
|
-
*/
|
|
21
|
-
export declare const LayoutControls: React.ForwardRefExoticComponent<Omit<LayoutControlsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
-
//# sourceMappingURL=LayoutControls.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutControls.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/LayoutControls.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAe,KAAK,gBAAgB,EAAgD,MAAM,gBAAgB,CAAC;AAIlH,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;AAMF;;GAEG;AACH,eAAO,MAAM,cAAc,yGA4E1B,CAAC"}
|