@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.
Files changed (73) hide show
  1. package/dist/lib/browser/index.mjs +31 -101
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node/index.cjs +21 -93
  5. package/dist/lib/node/index.cjs.map +4 -4
  6. package/dist/lib/node/meta.json +1 -1
  7. package/dist/lib/node-esm/index.mjs +31 -101
  8. package/dist/lib/node-esm/index.mjs.map +4 -4
  9. package/dist/lib/node-esm/meta.json +1 -1
  10. package/dist/types/src/components/{Stack.d.ts → Stack/Stack.d.ts} +2 -1
  11. package/dist/types/src/components/Stack/Stack.d.ts.map +1 -0
  12. package/dist/types/src/components/Stack/Stack.stories.d.ts +9 -0
  13. package/dist/types/src/components/Stack/Stack.stories.d.ts.map +1 -0
  14. package/dist/types/src/components/Stack/index.d.ts +2 -0
  15. package/dist/types/src/components/Stack/index.d.ts.map +1 -0
  16. package/dist/types/src/components/StackContext.d.ts +1 -10
  17. package/dist/types/src/components/StackContext.d.ts.map +1 -1
  18. package/dist/types/src/components/StackItem/MenuSignifier.d.ts.map +1 -0
  19. package/dist/types/src/components/{StackItem.d.ts → StackItem/StackItem.d.ts} +3 -3
  20. package/dist/types/src/components/StackItem/StackItem.d.ts.map +1 -0
  21. package/dist/types/src/components/StackItem/StackItem.stories.d.ts +8 -0
  22. package/dist/types/src/components/StackItem/StackItem.stories.d.ts.map +1 -0
  23. package/dist/types/src/components/StackItem/StackItemContent.d.ts.map +1 -0
  24. package/dist/types/src/components/StackItem/StackItemDragHandle.d.ts.map +1 -0
  25. package/dist/types/src/components/StackItem/StackItemHeading.d.ts.map +1 -0
  26. package/dist/types/src/components/StackItem/StackItemResizeHandle.d.ts.map +1 -0
  27. package/dist/types/src/components/StackItem/StackItemSigil.d.ts.map +1 -0
  28. package/dist/types/src/components/StackItem/index.d.ts +2 -0
  29. package/dist/types/src/components/StackItem/index.d.ts.map +1 -0
  30. package/dist/types/src/components/defs.d.ts +18 -0
  31. package/dist/types/src/components/defs.d.ts.map +1 -0
  32. package/dist/types/src/components/deprecated/LayoutControls.d.ts.map +1 -0
  33. package/dist/types/src/components/index.d.ts +1 -2
  34. package/dist/types/src/components/index.d.ts.map +1 -1
  35. package/dist/types/src/hooks/useStackDropForElements.d.ts +3 -4
  36. package/dist/types/src/hooks/useStackDropForElements.d.ts.map +1 -1
  37. package/dist/types/tsconfig.tsbuildinfo +1 -1
  38. package/package.json +20 -20
  39. package/src/components/{Stack.stories.tsx → Stack/Stack.stories.tsx} +15 -13
  40. package/src/components/{Stack.tsx → Stack/Stack.tsx} +3 -2
  41. package/src/components/Stack/index.ts +5 -0
  42. package/src/components/StackContext.tsx +1 -13
  43. package/src/components/StackItem/StackItem.stories.tsx +49 -0
  44. package/src/components/{StackItem.tsx → StackItem/StackItem.tsx} +4 -2
  45. package/src/components/{StackItemContent.tsx → StackItem/StackItemContent.tsx} +1 -1
  46. package/src/components/{StackItemDragHandle.tsx → StackItem/StackItemDragHandle.tsx} +1 -1
  47. package/src/components/{StackItemHeading.tsx → StackItem/StackItemHeading.tsx} +2 -2
  48. package/src/components/{StackItemResizeHandle.tsx → StackItem/StackItemResizeHandle.tsx} +1 -1
  49. package/src/components/{StackItemSigil.tsx → StackItem/StackItemSigil.tsx} +1 -1
  50. package/src/components/StackItem/index.ts +5 -0
  51. package/src/components/defs.ts +26 -0
  52. package/src/components/{LayoutControls.tsx → deprecated/LayoutControls.tsx} +3 -23
  53. package/src/components/index.ts +2 -2
  54. package/src/hooks/useStackDropForElements.ts +3 -4
  55. package/dist/types/src/components/LayoutControls.d.ts.map +0 -1
  56. package/dist/types/src/components/MenuSignifier.d.ts.map +0 -1
  57. package/dist/types/src/components/Stack.d.ts.map +0 -1
  58. package/dist/types/src/components/Stack.stories.d.ts +0 -8
  59. package/dist/types/src/components/Stack.stories.d.ts.map +0 -1
  60. package/dist/types/src/components/StackItem.d.ts.map +0 -1
  61. package/dist/types/src/components/StackItemContent.d.ts.map +0 -1
  62. package/dist/types/src/components/StackItemDragHandle.d.ts.map +0 -1
  63. package/dist/types/src/components/StackItemHeading.d.ts.map +0 -1
  64. package/dist/types/src/components/StackItemResizeHandle.d.ts.map +0 -1
  65. package/dist/types/src/components/StackItemSigil.d.ts.map +0 -1
  66. /package/dist/types/src/components/{MenuSignifier.d.ts → StackItem/MenuSignifier.d.ts} +0 -0
  67. /package/dist/types/src/components/{StackItemContent.d.ts → StackItem/StackItemContent.d.ts} +0 -0
  68. /package/dist/types/src/components/{StackItemDragHandle.d.ts → StackItem/StackItemDragHandle.d.ts} +0 -0
  69. /package/dist/types/src/components/{StackItemHeading.d.ts → StackItem/StackItemHeading.d.ts} +0 -0
  70. /package/dist/types/src/components/{StackItemResizeHandle.d.ts → StackItem/StackItemResizeHandle.d.ts} +0 -0
  71. /package/dist/types/src/components/{StackItemSigil.d.ts → StackItem/StackItemSigil.d.ts} +0 -0
  72. /package/dist/types/src/components/{LayoutControls.d.ts → deprecated/LayoutControls.d.ts} +0 -0
  73. /package/src/components/{MenuSignifier.tsx → StackItem/MenuSignifier.tsx} +0 -0
@@ -1,13 +1,12 @@
1
- import { type Orientation } from '../components/Stack';
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, id, onRearrange, }: {
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,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,KAAK,yBAAyB,EAAsB,MAAM,4BAA4B,CAAC;AAEhG;;GAEG;AACH,eAAO,MAAM,uBAAuB,8DAMjC;IACD,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;;CA4CA,CAAC"}
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.7.3"}
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.f11618f",
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/echo-schema": "0.8.2-main.f11618f",
51
- "@dxos/keyboard": "0.8.2-main.f11618f",
52
- "@dxos/live-object": "0.8.2-main.f11618f",
53
- "@dxos/react-ui-dnd": "0.8.2-main.f11618f",
54
- "@dxos/util": "0.8.2-main.f11618f",
55
- "@dxos/react-ui-attention": "0.8.2-main.f11618f"
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.f11618f",
65
- "@dxos/client": "0.8.2-main.f11618f",
66
- "@dxos/echo-schema": "0.8.2-main.f11618f",
67
- "@dxos/react-ui": "0.8.2-main.f11618f",
68
- "@dxos/random": "0.8.2-main.f11618f",
69
- "@dxos/react-ui-editor": "0.8.2-main.f11618f",
70
- "@dxos/react-ui-theme": "0.8.2-main.f11618f",
71
- "@dxos/storybook-utils": "0.8.2-main.f11618f",
72
- "@dxos/test-utils": "0.8.2-main.f11618f"
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/client": "0.8.2-main.f11618f",
79
- "@dxos/random": "0.8.2-main.f11618f",
80
- "@dxos/react-ui-theme": "0.8.2-main.f11618f",
81
- "@dxos/react-ui": "0.8.2-main.f11618f"
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 { type StackItemData } from './StackContext';
14
- import { StackItem } from './StackItem';
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 StorybookStack = () => {
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
- type Story = StoryObj<typeof StorybookStack>;
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: StorybookStack,
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 { type StackContextValue, StackContext } from './StackContext';
13
- import { useStackDropForElements } from '../hooks';
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';
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ export * from './Stack';
@@ -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
- export type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
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 './StackContext';
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 './StackContext';
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 './StackContext';
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 '../translations';
15
+ import { translationKey } from '../../translations';
16
16
 
17
17
  export type KeyBinding = {
18
18
  windows?: string;
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ export * from './StackItem';
@@ -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 '../translations';
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>(
@@ -2,7 +2,7 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
+ export * from './defs';
6
+
5
7
  export * from './Stack';
6
8
  export * from './StackItem';
7
- export * from './LayoutControls';
8
- export * from './StackContext';
@@ -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/Stack';
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"}