@dxos/react-ui-dnd 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

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 (11) hide show
  1. package/dist/lib/browser/index.mjs +86 -75
  2. package/dist/lib/browser/index.mjs.map +2 -2
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node/index.cjs +86 -75
  5. package/dist/lib/node/index.cjs.map +2 -2
  6. package/dist/lib/node/meta.json +1 -1
  7. package/dist/lib/node-esm/index.mjs +86 -75
  8. package/dist/lib/node-esm/index.mjs.map +2 -2
  9. package/dist/lib/node-esm/meta.json +1 -1
  10. package/package.json +6 -5
  11. package/src/components/ResizeHandle.tsx +1 -1
package/dist/lib/browser/index.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  // packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx
2
+ import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
2
3
  import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
3
4
  import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
4
5
  import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
@@ -41,84 +42,94 @@ var resizeAttributes = {
41
42
  "data-dx-resize-subject": true
42
43
  };
43
44
  var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: propsSize, minSize, maxSize, onSizeChange }) => {
44
- const buttonRef = useRef(null);
45
- const [size = "min-content", setSize] = useControllableState({
46
- prop: propsSize,
47
- defaultProp: defaultSize,
48
- onChange: onSizeChange
49
- });
50
- const dragStartSize = useRef(size);
51
- const elevation = useElevationContext();
52
- const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
53
- const client = orientation === "horizontal" ? "clientX" : "clientY";
54
- useLayoutEffect(() => {
55
- if (!buttonRef.current) {
56
- return;
57
- }
58
- return draggable({
59
- element: buttonRef.current,
60
- onGenerateDragPreview: ({ nativeSetDragImage }) => {
61
- disableNativeDragPreview({
62
- nativeSetDragImage
63
- });
64
- preventUnhandled.start();
65
- },
66
- onDragStart: () => {
67
- dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
68
- buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
69
- },
70
- onDrag: ({ location }) => {
71
- if (typeof dragStartSize.current !== "number") {
72
- return;
73
- }
74
- setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
75
- },
76
- onDrop: ({ location }) => {
77
- if (typeof dragStartSize.current !== "number") {
78
- return;
79
- }
80
- const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
81
- setSize(nextSize);
82
- onSizeChange?.(nextSize, true);
83
- dragStartSize.current = nextSize;
84
- buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
85
- }
45
+ var _effect = _useSignals();
46
+ try {
47
+ const buttonRef = useRef(null);
48
+ const [size = "min-content", setSize] = useControllableState({
49
+ prop: propsSize,
50
+ defaultProp: defaultSize,
51
+ onChange: onSizeChange
86
52
  });
87
- }, [
88
- // Note that `size` should not be a dependency here since dragging this adjusts the size.
89
- minSize,
90
- maxSize
91
- ]);
92
- return /* @__PURE__ */ React.createElement("button", {
93
- ref: buttonRef,
94
- "data-side": side,
95
- className: mx("group absolute flex focus-visible:outline-none", surfaceZIndex({
96
- elevation,
97
- level: "tooltip"
98
- }), orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator", classNames)
99
- }, /* @__PURE__ */ React.createElement("div", {
100
- role: "none",
101
- "data-side": side,
102
- className: mx("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
103
- }, /* @__PURE__ */ React.createElement(DragHandleSignifier, {
104
- side
105
- })));
53
+ const dragStartSize = useRef(size);
54
+ const elevation = useElevationContext();
55
+ const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
56
+ const client = orientation === "horizontal" ? "clientX" : "clientY";
57
+ useLayoutEffect(() => {
58
+ if (!buttonRef.current) {
59
+ return;
60
+ }
61
+ return draggable({
62
+ element: buttonRef.current,
63
+ onGenerateDragPreview: ({ nativeSetDragImage }) => {
64
+ disableNativeDragPreview({
65
+ nativeSetDragImage
66
+ });
67
+ preventUnhandled.start();
68
+ },
69
+ onDragStart: () => {
70
+ dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
71
+ buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
72
+ },
73
+ onDrag: ({ location }) => {
74
+ if (typeof dragStartSize.current !== "number") {
75
+ return;
76
+ }
77
+ setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
78
+ },
79
+ onDrop: ({ location }) => {
80
+ if (typeof dragStartSize.current !== "number") {
81
+ return;
82
+ }
83
+ const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
84
+ setSize(nextSize);
85
+ onSizeChange?.(nextSize, true);
86
+ dragStartSize.current = nextSize;
87
+ buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
88
+ }
89
+ });
90
+ }, [
91
+ // Note that `size` should not be a dependency here since dragging this adjusts the size.
92
+ minSize,
93
+ maxSize
94
+ ]);
95
+ return /* @__PURE__ */ React.createElement("button", {
96
+ ref: buttonRef,
97
+ "data-side": side,
98
+ className: mx("group absolute flex focus-visible:outline-none", surfaceZIndex({
99
+ elevation,
100
+ level: "tooltip"
101
+ }), orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-neutralFocusIndicator", classNames)
102
+ }, /* @__PURE__ */ React.createElement("div", {
103
+ role: "none",
104
+ "data-side": side,
105
+ className: mx("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
106
+ }, /* @__PURE__ */ React.createElement(DragHandleSignifier, {
107
+ side
108
+ })));
109
+ } finally {
110
+ _effect.f();
111
+ }
106
112
  };
107
113
  var DragHandleSignifier = ({ side }) => {
108
- return /* @__PURE__ */ React.createElement("svg", {
109
- xmlns: "http://www.w3.org/2000/svg",
110
- viewBox: "0 0 256 256",
111
- fill: "currentColor",
112
- className: mx("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
113
- }, /* @__PURE__ */ React.createElement("path", {
114
- d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
115
- }), /* @__PURE__ */ React.createElement("path", {
116
- d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
117
- }), /* @__PURE__ */ React.createElement("path", {
118
- d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
119
- }), /* @__PURE__ */ React.createElement("path", {
120
- d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
121
- }));
114
+ var _effect = _useSignals();
115
+ try {
116
+ return /* @__PURE__ */ React.createElement("svg", {
117
+ xmlns: "http://www.w3.org/2000/svg",
118
+ viewBox: "0 0 256 256",
119
+ fill: "currentColor",
120
+ className: mx("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
121
+ }, /* @__PURE__ */ React.createElement("path", {
122
+ d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
123
+ }), /* @__PURE__ */ React.createElement("path", {
124
+ d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
125
+ }), /* @__PURE__ */ React.createElement("path", {
126
+ d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
127
+ }), /* @__PURE__ */ React.createElement("path", {
128
+ d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
129
+ }));
130
+ } finally {
131
+ _effect.f();
132
+ }
122
133
  };
123
134
  export {
124
135
  REM,
package/dist/lib/browser/index.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/ResizeHandle.tsx", "../../../src/util/sizeStyle.ts", "../../../src/util/rem.ts"],
4
- "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName, useElevationContext } from '@dxos/react-ui';\nimport { mx, surfaceZIndex } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n const stackItemElement = element.closest('[data-dx-resize-subject]');\n return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n startSize: number,\n location: DragLocationHistory,\n client: 'clientX' | 'clientY',\n side: Side,\n minSize: number,\n maxSize: number | undefined,\n) => {\n return Math.min(\n maxSize ?? Infinity,\n Math.max(\n minSize,\n startSize +\n ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n ),\n );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n 'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n side: Side;\n defaultSize?: Size;\n fallbackSize: number;\n size?: Size;\n minSize: number;\n maxSize?: number;\n unit?: 'rem';\n iconPosition?: 'start' | 'center' | 'end';\n onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n classNames,\n side,\n iconPosition = 'start',\n defaultSize,\n fallbackSize,\n size: propsSize,\n minSize,\n maxSize,\n onSizeChange,\n}: ResizeHandleProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [size = 'min-content', setSize] = useControllableState({\n prop: propsSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n const dragStartSize = useRef<Size>(size);\n const elevation = useElevationContext();\n\n const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n useLayoutEffect(() => {\n if (!buttonRef.current) {\n return;\n }\n\n // TODO(thure): This should handle StackItem state vs local state better.\n return draggable({\n element: buttonRef.current,\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\n // We will be moving the line to indicate a drag; we can disable the native drag preview.\n disableNativeDragPreview({ nativeSetDragImage });\n // We don't want any native drop animation for when the user does not drop on a drop target.\n // We want the drag to finish immediately.\n preventUnhandled.start();\n },\n onDragStart: () => {\n dragStartSize.current =\n dragStartSize.current === 'min-content'\n ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n : dragStartSize.current;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n },\n onDrag: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n },\n onDrop: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n setSize(nextSize);\n onSizeChange?.(nextSize, true);\n dragStartSize.current = nextSize;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n },\n });\n }, [\n // Note that `size` should not be a dependency here since dragging this adjusts the size.\n minSize,\n maxSize,\n ]);\n\n return (\n <button\n ref={buttonRef}\n data-side={side}\n className={mx(\n 'group absolute flex focus-visible:outline-none',\n surfaceZIndex({ elevation, level: 'tooltip' }),\n orientation === 'horizontal'\n ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n orientation === 'horizontal'\n ? iconPosition === 'end'\n ? 'align-end'\n : iconPosition === 'center'\n ? 'align-center'\n : 'align-start'\n : iconPosition === 'end'\n ? 'justify-end'\n : iconPosition === 'center'\n ? 'justify-center'\n : 'justify-start',\n 'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n 'before:absolute before:block before:bg-accentFocusIndicator',\n classNames,\n )}\n >\n <div\n role='none'\n data-side={side}\n className={mx(\n 'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n )}\n >\n <DragHandleSignifier side={side} />\n </div>\n </button>\n );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n return (\n <svg\n xmlns='http://www.w3.org/2000/svg'\n viewBox='0 0 256 256'\n fill='currentColor'\n className={mx(\n 'shrink-0 bs-4 is-4 text-unAccent',\n side === 'block-end'\n ? 'rotate-90'\n : side === 'block-start'\n ? '-rotate-90'\n : side === 'inline-start' && 'rotate-180',\n )}\n >\n {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n </svg>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n size: Size,\n sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n calcSize?: boolean,\n) => {\n let sizeProperty = 'inlineSize';\n switch (sideOrOrientation) {\n case 'vertical':\n case 'block-start':\n case 'block-end':\n sizeProperty = 'blockSize';\n }\n return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName, useElevationContext } from '@dxos/react-ui';\nimport { mx, surfaceZIndex } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n const stackItemElement = element.closest('[data-dx-resize-subject]');\n return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n startSize: number,\n location: DragLocationHistory,\n client: 'clientX' | 'clientY',\n side: Side,\n minSize: number,\n maxSize: number | undefined,\n) => {\n return Math.min(\n maxSize ?? Infinity,\n Math.max(\n minSize,\n startSize +\n ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n ),\n );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n 'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n side: Side;\n defaultSize?: Size;\n fallbackSize: number;\n size?: Size;\n minSize: number;\n maxSize?: number;\n unit?: 'rem';\n iconPosition?: 'start' | 'center' | 'end';\n onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n classNames,\n side,\n iconPosition = 'start',\n defaultSize,\n fallbackSize,\n size: propsSize,\n minSize,\n maxSize,\n onSizeChange,\n}: ResizeHandleProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [size = 'min-content', setSize] = useControllableState({\n prop: propsSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n const dragStartSize = useRef<Size>(size);\n const elevation = useElevationContext();\n\n const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n useLayoutEffect(() => {\n if (!buttonRef.current) {\n return;\n }\n\n // TODO(thure): This should handle StackItem state vs local state better.\n return draggable({\n element: buttonRef.current,\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\n // We will be moving the line to indicate a drag; we can disable the native drag preview.\n disableNativeDragPreview({ nativeSetDragImage });\n // We don't want any native drop animation for when the user does not drop on a drop target.\n // We want the drag to finish immediately.\n preventUnhandled.start();\n },\n onDragStart: () => {\n dragStartSize.current =\n dragStartSize.current === 'min-content'\n ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n : dragStartSize.current;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n },\n onDrag: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n },\n onDrop: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n setSize(nextSize);\n onSizeChange?.(nextSize, true);\n dragStartSize.current = nextSize;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n },\n });\n }, [\n // Note that `size` should not be a dependency here since dragging this adjusts the size.\n minSize,\n maxSize,\n ]);\n\n return (\n <button\n ref={buttonRef}\n data-side={side}\n className={mx(\n 'group absolute flex focus-visible:outline-none',\n surfaceZIndex({ elevation, level: 'tooltip' }),\n orientation === 'horizontal'\n ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n orientation === 'horizontal'\n ? iconPosition === 'end'\n ? 'align-end'\n : iconPosition === 'center'\n ? 'align-center'\n : 'align-start'\n : iconPosition === 'end'\n ? 'justify-end'\n : iconPosition === 'center'\n ? 'justify-center'\n : 'justify-start',\n 'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n 'before:absolute before:block before:bg-neutralFocusIndicator',\n classNames,\n )}\n >\n <div\n role='none'\n data-side={side}\n className={mx(\n 'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n )}\n >\n <DragHandleSignifier side={side} />\n </div>\n </button>\n );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n return (\n <svg\n xmlns='http://www.w3.org/2000/svg'\n viewBox='0 0 256 256'\n fill='currentColor'\n className={mx(\n 'shrink-0 bs-4 is-4 text-unAccent',\n side === 'block-end'\n ? 'rotate-90'\n : side === 'block-start'\n ? '-rotate-90'\n : side === 'inline-start' && 'rotate-180',\n )}\n >\n {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n </svg>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n size: Size,\n sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n calcSize?: boolean,\n) => {\n let sizeProperty = 'inlineSize';\n switch (sideOrOrientation) {\n case 'vertical':\n case 'block-start':\n case 'block-end':\n sizeProperty = 'blockSize';\n }\n return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
5
+ "mappings": "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",
6
6
  "names": ["draggable", "disableNativeDragPreview", "preventUnhandled", "useControllableState", "React", "useLayoutEffect", "useRef", "useElevationContext", "mx", "surfaceZIndex", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "measureSubject", "element", "fallbackSize", "stackItemElement", "closest", "getBoundingClientRect", "width", "height", "getNextSize", "startSize", "location", "client", "side", "minSize", "maxSize", "Math", "min", "Infinity", "max", "current", "input", "initial", "REM", "endsWith", "RESIZE_SUBJECT", "RESIZE_SUBJECT_DRAGGING", "resizeAttributes", "ResizeHandle", "classNames", "iconPosition", "defaultSize", "size", "propsSize", "onSizeChange", "buttonRef", "useRef", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "dragStartSize", "elevation", "useElevationContext", "orientation", "startsWith", "useLayoutEffect", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "button", "ref", "data-side", "className", "mx", "surfaceZIndex", "level", "div", "role", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d"]
7
7
  }
package/dist/lib/browser/meta.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2227,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":795,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":581,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":21571,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":604,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12468},"packages/ui/react-ui-dnd/dist/lib/browser/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":5633},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6382}}}
1
+ {"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2175,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":763,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":549,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":22003,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":487,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":572,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":631,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12481},"packages/ui/react-ui-dnd/dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":6015},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6764}}}
package/dist/lib/node/index.cjs CHANGED
@@ -34,6 +34,7 @@ __export(node_exports, {
34
34
  sizeStyle: () => sizeStyle
35
35
  });
36
36
  module.exports = __toCommonJS(node_exports);
37
+ var import_tracking = require("@preact-signals/safe-react/tracking");
37
38
  var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
38
39
  var import_disable_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
39
40
  var import_prevent_unhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
@@ -70,84 +71,94 @@ var resizeAttributes = {
70
71
  "data-dx-resize-subject": true
71
72
  };
72
73
  var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: propsSize, minSize, maxSize, onSizeChange }) => {
73
- const buttonRef = (0, import_react.useRef)(null);
74
- const [size = "min-content", setSize] = (0, import_react_use_controllable_state.useControllableState)({
75
- prop: propsSize,
76
- defaultProp: defaultSize,
77
- onChange: onSizeChange
78
- });
79
- const dragStartSize = (0, import_react.useRef)(size);
80
- const elevation = (0, import_react_ui.useElevationContext)();
81
- const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
82
- const client = orientation === "horizontal" ? "clientX" : "clientY";
83
- (0, import_react.useLayoutEffect)(() => {
84
- if (!buttonRef.current) {
85
- return;
86
- }
87
- return (0, import_adapter.draggable)({
88
- element: buttonRef.current,
89
- onGenerateDragPreview: ({ nativeSetDragImage }) => {
90
- (0, import_disable_native_drag_preview.disableNativeDragPreview)({
91
- nativeSetDragImage
92
- });
93
- import_prevent_unhandled.preventUnhandled.start();
94
- },
95
- onDragStart: () => {
96
- dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
97
- buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
98
- },
99
- onDrag: ({ location }) => {
100
- if (typeof dragStartSize.current !== "number") {
101
- return;
102
- }
103
- setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
104
- },
105
- onDrop: ({ location }) => {
106
- if (typeof dragStartSize.current !== "number") {
107
- return;
108
- }
109
- const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
110
- setSize(nextSize);
111
- onSizeChange?.(nextSize, true);
112
- dragStartSize.current = nextSize;
113
- buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
114
- }
74
+ var _effect = (0, import_tracking.useSignals)();
75
+ try {
76
+ const buttonRef = (0, import_react.useRef)(null);
77
+ const [size = "min-content", setSize] = (0, import_react_use_controllable_state.useControllableState)({
78
+ prop: propsSize,
79
+ defaultProp: defaultSize,
80
+ onChange: onSizeChange
115
81
  });
116
- }, [
117
- // Note that `size` should not be a dependency here since dragging this adjusts the size.
118
- minSize,
119
- maxSize
120
- ]);
121
- return /* @__PURE__ */ import_react.default.createElement("button", {
122
- ref: buttonRef,
123
- "data-side": side,
124
- className: (0, import_react_ui_theme.mx)("group absolute flex focus-visible:outline-none", (0, import_react_ui_theme.surfaceZIndex)({
125
- elevation,
126
- level: "tooltip"
127
- }), orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator", classNames)
128
- }, /* @__PURE__ */ import_react.default.createElement("div", {
129
- role: "none",
130
- "data-side": side,
131
- className: (0, import_react_ui_theme.mx)("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
132
- }, /* @__PURE__ */ import_react.default.createElement(DragHandleSignifier, {
133
- side
134
- })));
82
+ const dragStartSize = (0, import_react.useRef)(size);
83
+ const elevation = (0, import_react_ui.useElevationContext)();
84
+ const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
85
+ const client = orientation === "horizontal" ? "clientX" : "clientY";
86
+ (0, import_react.useLayoutEffect)(() => {
87
+ if (!buttonRef.current) {
88
+ return;
89
+ }
90
+ return (0, import_adapter.draggable)({
91
+ element: buttonRef.current,
92
+ onGenerateDragPreview: ({ nativeSetDragImage }) => {
93
+ (0, import_disable_native_drag_preview.disableNativeDragPreview)({
94
+ nativeSetDragImage
95
+ });
96
+ import_prevent_unhandled.preventUnhandled.start();
97
+ },
98
+ onDragStart: () => {
99
+ dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
100
+ buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
101
+ },
102
+ onDrag: ({ location }) => {
103
+ if (typeof dragStartSize.current !== "number") {
104
+ return;
105
+ }
106
+ setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
107
+ },
108
+ onDrop: ({ location }) => {
109
+ if (typeof dragStartSize.current !== "number") {
110
+ return;
111
+ }
112
+ const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
113
+ setSize(nextSize);
114
+ onSizeChange?.(nextSize, true);
115
+ dragStartSize.current = nextSize;
116
+ buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
117
+ }
118
+ });
119
+ }, [
120
+ // Note that `size` should not be a dependency here since dragging this adjusts the size.
121
+ minSize,
122
+ maxSize
123
+ ]);
124
+ return /* @__PURE__ */ import_react.default.createElement("button", {
125
+ ref: buttonRef,
126
+ "data-side": side,
127
+ className: (0, import_react_ui_theme.mx)("group absolute flex focus-visible:outline-none", (0, import_react_ui_theme.surfaceZIndex)({
128
+ elevation,
129
+ level: "tooltip"
130
+ }), orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-neutralFocusIndicator", classNames)
131
+ }, /* @__PURE__ */ import_react.default.createElement("div", {
132
+ role: "none",
133
+ "data-side": side,
134
+ className: (0, import_react_ui_theme.mx)("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
135
+ }, /* @__PURE__ */ import_react.default.createElement(DragHandleSignifier, {
136
+ side
137
+ })));
138
+ } finally {
139
+ _effect.f();
140
+ }
135
141
  };
136
142
  var DragHandleSignifier = ({ side }) => {
137
- return /* @__PURE__ */ import_react.default.createElement("svg", {
138
- xmlns: "http://www.w3.org/2000/svg",
139
- viewBox: "0 0 256 256",
140
- fill: "currentColor",
141
- className: (0, import_react_ui_theme.mx)("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
142
- }, /* @__PURE__ */ import_react.default.createElement("path", {
143
- d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
144
- }), /* @__PURE__ */ import_react.default.createElement("path", {
145
- d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
146
- }), /* @__PURE__ */ import_react.default.createElement("path", {
147
- d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
148
- }), /* @__PURE__ */ import_react.default.createElement("path", {
149
- d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
150
- }));
143
+ var _effect = (0, import_tracking.useSignals)();
144
+ try {
145
+ return /* @__PURE__ */ import_react.default.createElement("svg", {
146
+ xmlns: "http://www.w3.org/2000/svg",
147
+ viewBox: "0 0 256 256",
148
+ fill: "currentColor",
149
+ className: (0, import_react_ui_theme.mx)("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
150
+ }, /* @__PURE__ */ import_react.default.createElement("path", {
151
+ d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
152
+ }), /* @__PURE__ */ import_react.default.createElement("path", {
153
+ d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
154
+ }), /* @__PURE__ */ import_react.default.createElement("path", {
155
+ d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
156
+ }), /* @__PURE__ */ import_react.default.createElement("path", {
157
+ d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
158
+ }));
159
+ } finally {
160
+ _effect.f();
161
+ }
151
162
  };
152
163
  // Annotate the CommonJS export names for ESM import in node:
153
164
  0 && (module.exports = {
package/dist/lib/node/index.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/ResizeHandle.tsx", "../../../src/util/sizeStyle.ts", "../../../src/util/rem.ts"],
4
- "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName, useElevationContext } from '@dxos/react-ui';\nimport { mx, surfaceZIndex } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n const stackItemElement = element.closest('[data-dx-resize-subject]');\n return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n startSize: number,\n location: DragLocationHistory,\n client: 'clientX' | 'clientY',\n side: Side,\n minSize: number,\n maxSize: number | undefined,\n) => {\n return Math.min(\n maxSize ?? Infinity,\n Math.max(\n minSize,\n startSize +\n ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n ),\n );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n 'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n side: Side;\n defaultSize?: Size;\n fallbackSize: number;\n size?: Size;\n minSize: number;\n maxSize?: number;\n unit?: 'rem';\n iconPosition?: 'start' | 'center' | 'end';\n onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n classNames,\n side,\n iconPosition = 'start',\n defaultSize,\n fallbackSize,\n size: propsSize,\n minSize,\n maxSize,\n onSizeChange,\n}: ResizeHandleProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [size = 'min-content', setSize] = useControllableState({\n prop: propsSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n const dragStartSize = useRef<Size>(size);\n const elevation = useElevationContext();\n\n const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n useLayoutEffect(() => {\n if (!buttonRef.current) {\n return;\n }\n\n // TODO(thure): This should handle StackItem state vs local state better.\n return draggable({\n element: buttonRef.current,\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\n // We will be moving the line to indicate a drag; we can disable the native drag preview.\n disableNativeDragPreview({ nativeSetDragImage });\n // We don't want any native drop animation for when the user does not drop on a drop target.\n // We want the drag to finish immediately.\n preventUnhandled.start();\n },\n onDragStart: () => {\n dragStartSize.current =\n dragStartSize.current === 'min-content'\n ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n : dragStartSize.current;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n },\n onDrag: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n },\n onDrop: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n setSize(nextSize);\n onSizeChange?.(nextSize, true);\n dragStartSize.current = nextSize;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n },\n });\n }, [\n // Note that `size` should not be a dependency here since dragging this adjusts the size.\n minSize,\n maxSize,\n ]);\n\n return (\n <button\n ref={buttonRef}\n data-side={side}\n className={mx(\n 'group absolute flex focus-visible:outline-none',\n surfaceZIndex({ elevation, level: 'tooltip' }),\n orientation === 'horizontal'\n ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n orientation === 'horizontal'\n ? iconPosition === 'end'\n ? 'align-end'\n : iconPosition === 'center'\n ? 'align-center'\n : 'align-start'\n : iconPosition === 'end'\n ? 'justify-end'\n : iconPosition === 'center'\n ? 'justify-center'\n : 'justify-start',\n 'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n 'before:absolute before:block before:bg-accentFocusIndicator',\n classNames,\n )}\n >\n <div\n role='none'\n data-side={side}\n className={mx(\n 'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n )}\n >\n <DragHandleSignifier side={side} />\n </div>\n </button>\n );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n return (\n <svg\n xmlns='http://www.w3.org/2000/svg'\n viewBox='0 0 256 256'\n fill='currentColor'\n className={mx(\n 'shrink-0 bs-4 is-4 text-unAccent',\n side === 'block-end'\n ? 'rotate-90'\n : side === 'block-start'\n ? '-rotate-90'\n : side === 'inline-start' && 'rotate-180',\n )}\n >\n {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n </svg>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n size: Size,\n sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n calcSize?: boolean,\n) => {\n let sizeProperty = 'inlineSize';\n switch (sideOrOrientation) {\n case 'vertical':\n case 'block-start':\n case 'block-end':\n sizeProperty = 'blockSize';\n }\n return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName, useElevationContext } from '@dxos/react-ui';\nimport { mx, surfaceZIndex } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n const stackItemElement = element.closest('[data-dx-resize-subject]');\n return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n startSize: number,\n location: DragLocationHistory,\n client: 'clientX' | 'clientY',\n side: Side,\n minSize: number,\n maxSize: number | undefined,\n) => {\n return Math.min(\n maxSize ?? Infinity,\n Math.max(\n minSize,\n startSize +\n ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n ),\n );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n 'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n side: Side;\n defaultSize?: Size;\n fallbackSize: number;\n size?: Size;\n minSize: number;\n maxSize?: number;\n unit?: 'rem';\n iconPosition?: 'start' | 'center' | 'end';\n onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n classNames,\n side,\n iconPosition = 'start',\n defaultSize,\n fallbackSize,\n size: propsSize,\n minSize,\n maxSize,\n onSizeChange,\n}: ResizeHandleProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [size = 'min-content', setSize] = useControllableState({\n prop: propsSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n const dragStartSize = useRef<Size>(size);\n const elevation = useElevationContext();\n\n const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n useLayoutEffect(() => {\n if (!buttonRef.current) {\n return;\n }\n\n // TODO(thure): This should handle StackItem state vs local state better.\n return draggable({\n element: buttonRef.current,\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\n // We will be moving the line to indicate a drag; we can disable the native drag preview.\n disableNativeDragPreview({ nativeSetDragImage });\n // We don't want any native drop animation for when the user does not drop on a drop target.\n // We want the drag to finish immediately.\n preventUnhandled.start();\n },\n onDragStart: () => {\n dragStartSize.current =\n dragStartSize.current === 'min-content'\n ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n : dragStartSize.current;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n },\n onDrag: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n },\n onDrop: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n setSize(nextSize);\n onSizeChange?.(nextSize, true);\n dragStartSize.current = nextSize;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n },\n });\n }, [\n // Note that `size` should not be a dependency here since dragging this adjusts the size.\n minSize,\n maxSize,\n ]);\n\n return (\n <button\n ref={buttonRef}\n data-side={side}\n className={mx(\n 'group absolute flex focus-visible:outline-none',\n surfaceZIndex({ elevation, level: 'tooltip' }),\n orientation === 'horizontal'\n ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n orientation === 'horizontal'\n ? iconPosition === 'end'\n ? 'align-end'\n : iconPosition === 'center'\n ? 'align-center'\n : 'align-start'\n : iconPosition === 'end'\n ? 'justify-end'\n : iconPosition === 'center'\n ? 'justify-center'\n : 'justify-start',\n 'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n 'before:absolute before:block before:bg-neutralFocusIndicator',\n classNames,\n )}\n >\n <div\n role='none'\n data-side={side}\n className={mx(\n 'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n )}\n >\n <DragHandleSignifier side={side} />\n </div>\n </button>\n );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n return (\n <svg\n xmlns='http://www.w3.org/2000/svg'\n viewBox='0 0 256 256'\n fill='currentColor'\n className={mx(\n 'shrink-0 bs-4 is-4 text-unAccent',\n side === 'block-end'\n ? 'rotate-90'\n : side === 'block-start'\n ? '-rotate-90'\n : side === 'inline-start' && 'rotate-180',\n )}\n >\n {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n </svg>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n size: Size,\n sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n calcSize?: boolean,\n) => {\n let sizeProperty = 'inlineSize';\n switch (sideOrOrientation) {\n case 'vertical':\n case 'block-start':\n case 'block-end':\n sizeProperty = 'blockSize';\n }\n return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
5
+ "mappings": "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",
6
6
  "names": ["sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "measureSubject", "element", "fallbackSize", "stackItemElement", "closest", "getBoundingClientRect", "width", "height", "getNextSize", "startSize", "location", "client", "side", "minSize", "maxSize", "Math", "min", "Infinity", "max", "current", "input", "initial", "endsWith", "RESIZE_SUBJECT", "RESIZE_SUBJECT_DRAGGING", "resizeAttributes", "ResizeHandle", "classNames", "iconPosition", "defaultSize", "propsSize", "onSizeChange", "buttonRef", "useRef", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "dragStartSize", "elevation", "useElevationContext", "orientation", "startsWith", "useLayoutEffect", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "React", "button", "ref", "data-side", "className", "mx", "surfaceZIndex", "level", "div", "role", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d"]
7
7
  }
package/dist/lib/node/meta.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2227,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":795,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":581,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":21571,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":604,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12468},"packages/ui/react-ui-dnd/dist/lib/node/index.cjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":5633},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6382}}}
1
+ {"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2175,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":763,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":549,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":22003,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":487,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":572,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":631,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12481},"packages/ui/react-ui-dnd/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":6015},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6764}}}
package/dist/lib/node-esm/index.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
2
2
 
3
3
  // packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx
4
+ import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
4
5
  import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
5
6
  import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
6
7
  import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
@@ -43,84 +44,94 @@ var resizeAttributes = {
43
44
  "data-dx-resize-subject": true
44
45
  };
45
46
  var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: propsSize, minSize, maxSize, onSizeChange }) => {
46
- const buttonRef = useRef(null);
47
- const [size = "min-content", setSize] = useControllableState({
48
- prop: propsSize,
49
- defaultProp: defaultSize,
50
- onChange: onSizeChange
51
- });
52
- const dragStartSize = useRef(size);
53
- const elevation = useElevationContext();
54
- const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
55
- const client = orientation === "horizontal" ? "clientX" : "clientY";
56
- useLayoutEffect(() => {
57
- if (!buttonRef.current) {
58
- return;
59
- }
60
- return draggable({
61
- element: buttonRef.current,
62
- onGenerateDragPreview: ({ nativeSetDragImage }) => {
63
- disableNativeDragPreview({
64
- nativeSetDragImage
65
- });
66
- preventUnhandled.start();
67
- },
68
- onDragStart: () => {
69
- dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
70
- buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
71
- },
72
- onDrag: ({ location }) => {
73
- if (typeof dragStartSize.current !== "number") {
74
- return;
75
- }
76
- setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
77
- },
78
- onDrop: ({ location }) => {
79
- if (typeof dragStartSize.current !== "number") {
80
- return;
81
- }
82
- const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
83
- setSize(nextSize);
84
- onSizeChange?.(nextSize, true);
85
- dragStartSize.current = nextSize;
86
- buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
87
- }
47
+ var _effect = _useSignals();
48
+ try {
49
+ const buttonRef = useRef(null);
50
+ const [size = "min-content", setSize] = useControllableState({
51
+ prop: propsSize,
52
+ defaultProp: defaultSize,
53
+ onChange: onSizeChange
88
54
  });
89
- }, [
90
- // Note that `size` should not be a dependency here since dragging this adjusts the size.
91
- minSize,
92
- maxSize
93
- ]);
94
- return /* @__PURE__ */ React.createElement("button", {
95
- ref: buttonRef,
96
- "data-side": side,
97
- className: mx("group absolute flex focus-visible:outline-none", surfaceZIndex({
98
- elevation,
99
- level: "tooltip"
100
- }), orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator", classNames)
101
- }, /* @__PURE__ */ React.createElement("div", {
102
- role: "none",
103
- "data-side": side,
104
- className: mx("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
105
- }, /* @__PURE__ */ React.createElement(DragHandleSignifier, {
106
- side
107
- })));
55
+ const dragStartSize = useRef(size);
56
+ const elevation = useElevationContext();
57
+ const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
58
+ const client = orientation === "horizontal" ? "clientX" : "clientY";
59
+ useLayoutEffect(() => {
60
+ if (!buttonRef.current) {
61
+ return;
62
+ }
63
+ return draggable({
64
+ element: buttonRef.current,
65
+ onGenerateDragPreview: ({ nativeSetDragImage }) => {
66
+ disableNativeDragPreview({
67
+ nativeSetDragImage
68
+ });
69
+ preventUnhandled.start();
70
+ },
71
+ onDragStart: () => {
72
+ dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
73
+ buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
74
+ },
75
+ onDrag: ({ location }) => {
76
+ if (typeof dragStartSize.current !== "number") {
77
+ return;
78
+ }
79
+ setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
80
+ },
81
+ onDrop: ({ location }) => {
82
+ if (typeof dragStartSize.current !== "number") {
83
+ return;
84
+ }
85
+ const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
86
+ setSize(nextSize);
87
+ onSizeChange?.(nextSize, true);
88
+ dragStartSize.current = nextSize;
89
+ buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
90
+ }
91
+ });
92
+ }, [
93
+ // Note that `size` should not be a dependency here since dragging this adjusts the size.
94
+ minSize,
95
+ maxSize
96
+ ]);
97
+ return /* @__PURE__ */ React.createElement("button", {
98
+ ref: buttonRef,
99
+ "data-side": side,
100
+ className: mx("group absolute flex focus-visible:outline-none", surfaceZIndex({
101
+ elevation,
102
+ level: "tooltip"
103
+ }), orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-neutralFocusIndicator", classNames)
104
+ }, /* @__PURE__ */ React.createElement("div", {
105
+ role: "none",
106
+ "data-side": side,
107
+ className: mx("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
108
+ }, /* @__PURE__ */ React.createElement(DragHandleSignifier, {
109
+ side
110
+ })));
111
+ } finally {
112
+ _effect.f();
113
+ }
108
114
  };
109
115
  var DragHandleSignifier = ({ side }) => {
110
- return /* @__PURE__ */ React.createElement("svg", {
111
- xmlns: "http://www.w3.org/2000/svg",
112
- viewBox: "0 0 256 256",
113
- fill: "currentColor",
114
- className: mx("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
115
- }, /* @__PURE__ */ React.createElement("path", {
116
- d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
117
- }), /* @__PURE__ */ React.createElement("path", {
118
- d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
119
- }), /* @__PURE__ */ React.createElement("path", {
120
- d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
121
- }), /* @__PURE__ */ React.createElement("path", {
122
- d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
123
- }));
116
+ var _effect = _useSignals();
117
+ try {
118
+ return /* @__PURE__ */ React.createElement("svg", {
119
+ xmlns: "http://www.w3.org/2000/svg",
120
+ viewBox: "0 0 256 256",
121
+ fill: "currentColor",
122
+ className: mx("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
123
+ }, /* @__PURE__ */ React.createElement("path", {
124
+ d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
125
+ }), /* @__PURE__ */ React.createElement("path", {
126
+ d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
127
+ }), /* @__PURE__ */ React.createElement("path", {
128
+ d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
129
+ }), /* @__PURE__ */ React.createElement("path", {
130
+ d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
131
+ }));
132
+ } finally {
133
+ _effect.f();
134
+ }
124
135
  };
125
136
  export {
126
137
  REM,
package/dist/lib/node-esm/index.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/ResizeHandle.tsx", "../../../src/util/sizeStyle.ts", "../../../src/util/rem.ts"],
4
- "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName, useElevationContext } from '@dxos/react-ui';\nimport { mx, surfaceZIndex } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n const stackItemElement = element.closest('[data-dx-resize-subject]');\n return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n startSize: number,\n location: DragLocationHistory,\n client: 'clientX' | 'clientY',\n side: Side,\n minSize: number,\n maxSize: number | undefined,\n) => {\n return Math.min(\n maxSize ?? Infinity,\n Math.max(\n minSize,\n startSize +\n ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n ),\n );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n 'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n side: Side;\n defaultSize?: Size;\n fallbackSize: number;\n size?: Size;\n minSize: number;\n maxSize?: number;\n unit?: 'rem';\n iconPosition?: 'start' | 'center' | 'end';\n onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n classNames,\n side,\n iconPosition = 'start',\n defaultSize,\n fallbackSize,\n size: propsSize,\n minSize,\n maxSize,\n onSizeChange,\n}: ResizeHandleProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [size = 'min-content', setSize] = useControllableState({\n prop: propsSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n const dragStartSize = useRef<Size>(size);\n const elevation = useElevationContext();\n\n const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n useLayoutEffect(() => {\n if (!buttonRef.current) {\n return;\n }\n\n // TODO(thure): This should handle StackItem state vs local state better.\n return draggable({\n element: buttonRef.current,\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\n // We will be moving the line to indicate a drag; we can disable the native drag preview.\n disableNativeDragPreview({ nativeSetDragImage });\n // We don't want any native drop animation for when the user does not drop on a drop target.\n // We want the drag to finish immediately.\n preventUnhandled.start();\n },\n onDragStart: () => {\n dragStartSize.current =\n dragStartSize.current === 'min-content'\n ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n : dragStartSize.current;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n },\n onDrag: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n },\n onDrop: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n setSize(nextSize);\n onSizeChange?.(nextSize, true);\n dragStartSize.current = nextSize;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n },\n });\n }, [\n // Note that `size` should not be a dependency here since dragging this adjusts the size.\n minSize,\n maxSize,\n ]);\n\n return (\n <button\n ref={buttonRef}\n data-side={side}\n className={mx(\n 'group absolute flex focus-visible:outline-none',\n surfaceZIndex({ elevation, level: 'tooltip' }),\n orientation === 'horizontal'\n ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n orientation === 'horizontal'\n ? iconPosition === 'end'\n ? 'align-end'\n : iconPosition === 'center'\n ? 'align-center'\n : 'align-start'\n : iconPosition === 'end'\n ? 'justify-end'\n : iconPosition === 'center'\n ? 'justify-center'\n : 'justify-start',\n 'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n 'before:absolute before:block before:bg-accentFocusIndicator',\n classNames,\n )}\n >\n <div\n role='none'\n data-side={side}\n className={mx(\n 'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n )}\n >\n <DragHandleSignifier side={side} />\n </div>\n </button>\n );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n return (\n <svg\n xmlns='http://www.w3.org/2000/svg'\n viewBox='0 0 256 256'\n fill='currentColor'\n className={mx(\n 'shrink-0 bs-4 is-4 text-unAccent',\n side === 'block-end'\n ? 'rotate-90'\n : side === 'block-start'\n ? '-rotate-90'\n : side === 'inline-start' && 'rotate-180',\n )}\n >\n {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n </svg>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n size: Size,\n sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n calcSize?: boolean,\n) => {\n let sizeProperty = 'inlineSize';\n switch (sideOrOrientation) {\n case 'vertical':\n case 'block-start':\n case 'block-end':\n sizeProperty = 'blockSize';\n }\n return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
5
- "mappings": ";;;AAIA,SAASA,iBAAiB;AAC1B,SAASC,gCAAgC;AACzC,SAASC,wBAAwB;AAEjC,SAASC,4BAA4B;AACrC,OAAOC,SAASC,iBAAiBC,cAAc;AAE/C,SAA+BC,2BAA2B;AAC1D,SAASC,IAAIC,qBAAqB;;;ACL3B,IAAMC,YAAY,CACvBC,MACAC,mBAEAC,aAAAA;AAEA,MAAIC,eAAe;AACnB,UAAQF,mBAAAA;IACN,KAAK;IACL,KAAK;IACL,KAAK;AACHE,qBAAe;EACnB;AACA,SAAO;IAAE,CAACA,YAAAA,GAAeH,SAAS,gBAAiBE,WAAW,uBAAuB,gBAAiB,GAAGF,IAAAA;EAAU;AACrH;;;ACjBO,IAAMI,MAAMC,WAAWC,iBAAiBC,SAASC,eAAe,EAAEC,QAAQ;;;AFajF,IAAMC,iBAAiB,CAACC,SAA4BC,iBAAAA;AAClD,QAAMC,mBAAmBF,QAAQG,QAAQ,0BAAA;AACzC,SAAOD,kBAAkBE,sBAAAA,KAA2B;IAAEC,OAAOJ;IAAcK,QAAQL;EAAa;AAClG;AAEA,IAAMM,cAAc,CAClBC,WACAC,UACAC,QACAC,MACAC,SACAC,YAAAA;AAEA,SAAOC,KAAKC,IACVF,WAAWG,UACXF,KAAKG,IACHL,SACAJ,aACIC,SAASS,QAAQC,MAAMT,MAAAA,IAAUD,SAASW,QAAQD,MAAMT,MAAAA,KAAWW,OAAQV,KAAKW,SAAS,KAAA,IAAS,IAAI,GAAC,CAAA;AAGjH;AAEA,IAAMC,iBAAiB;AACvB,IAAMC,0BAA0B;AAEzB,IAAMC,mBAAmB;EAC9B,0BAA0B;AAC5B;AAcO,IAAMC,eAAe,CAAC,EAC3BC,YACAhB,MACAiB,eAAe,SACfC,aACA5B,cACA6B,MAAMC,WACNnB,SACAC,SACAmB,aAAY,MACM;AAClB,QAAMC,YAAYC,OAA0B,IAAA;AAC5C,QAAM,CAACJ,OAAO,eAAeK,OAAAA,IAAWC,qBAAqB;IAC3DC,MAAMN;IACNO,aAAaT;IACbU,UAAUP;EACZ,CAAA;AACA,QAAMQ,gBAAgBN,OAAaJ,IAAAA;AACnC,QAAMW,YAAYC,oBAAAA;AAElB,QAAMC,cAAchC,KAAKiC,WAAW,QAAA,IAAY,eAAe;AAC/D,QAAMlC,SAASiC,gBAAgB,eAAe,YAAY;AAE1DE,kBAAgB,MAAA;AACd,QAAI,CAACZ,UAAUf,SAAS;AACtB;IACF;AAGA,WAAO4B,UAAU;MACf9C,SAASiC,UAAUf;MACnB6B,uBAAuB,CAAC,EAAEC,mBAAkB,MAAE;AAE5CC,iCAAyB;UAAED;QAAmB,CAAA;AAG9CE,yBAAiBC,MAAK;MACxB;MACAC,aAAa,MAAA;AACXZ,sBAActB,UACZsB,cAActB,YAAY,gBACtBnB,eAAekC,UAAUf,SAAUjB,YAAAA,EAAc0C,gBAAgB,eAAe,UAAU,QAAA,IAAYtB,MACtGmB,cAActB;AACpBe,kBAAUf,SAASf,QAAQ,IAAIoB,cAAAA,GAAiB,GAAG8B,aAAa7B,yBAAyB,MAAA;MAC3F;MACA8B,QAAQ,CAAC,EAAE7C,SAAQ,MAAE;AACnB,YAAI,OAAO+B,cAActB,YAAY,UAAU;AAC7C;QACF;AACAiB,gBAAQ5B,YAAYiC,cAActB,SAAST,UAAUC,QAAQC,MAAMC,SAASC,OAAAA,CAAAA;MAC9E;MACA0C,QAAQ,CAAC,EAAE9C,SAAQ,MAAE;AACnB,YAAI,OAAO+B,cAActB,YAAY,UAAU;AAC7C;QACF;AACA,cAAMsC,WAAWjD,YAAYiC,cAActB,SAAST,UAAUC,QAAQC,MAAMC,SAASC,OAAAA;AACrFsB,gBAAQqB,QAAAA;AACRxB,uBAAewB,UAAU,IAAA;AACzBhB,sBAActB,UAAUsC;AACxBvB,kBAAUf,SAASf,QAAQ,IAAIoB,cAAAA,GAAiB,GAAGkC,gBAAgBjC,uBAAAA;MACrE;IACF,CAAA;EACF,GAAG;;IAEDZ;IACAC;GACD;AAED,SACE,sBAAA,cAAC6C,UAAAA;IACCC,KAAK1B;IACL2B,aAAWjD;IACXkD,WAAWC,GACT,kDACAC,cAAc;MAAEtB;MAAWuB,OAAO;IAAU,CAAA,GAC5CrB,gBAAgB,eACZ,qQACA,8PACJA,gBAAgB,eACZf,iBAAiB,QACf,cACAA,iBAAiB,WACf,iBACA,gBACJA,iBAAiB,QACf,gBACAA,iBAAiB,WACf,mBACA,iBACR,yKACA,+DACAD,UAAAA;KAGF,sBAAA,cAACsC,OAAAA;IACCC,MAAK;IACLN,aAAWjD;IACXkD,WAAWC,GACT,sGACAnB,gBAAgB,eAAe,0BAA0B,uBAAA;KAG3D,sBAAA,cAACwB,qBAAAA;IAAoBxD;;AAI7B;AAEA,IAAMwD,sBAAsB,CAAC,EAAExD,KAAI,MAAmC;AACpE,SACE,sBAAA,cAACyD,OAAAA;IACCC,OAAM;IACNC,SAAQ;IACRC,MAAK;IACLV,WAAWC,GACT,oCACAnD,SAAS,cACL,cACAA,SAAS,gBACP,eACAA,SAAS,kBAAkB,YAAA;KAKnC,sBAAA,cAAC6D,QAAAA;IAAKC,GAAE;MACR,sBAAA,cAACD,QAAAA;IAAKC,GAAE;MACR,sBAAA,cAACD,QAAAA;IAAKC,GAAE;MACR,sBAAA,cAACD,QAAAA;IAAKC,GAAE;;AAGd;",
4
+ "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName, useElevationContext } from '@dxos/react-ui';\nimport { mx, surfaceZIndex } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n const stackItemElement = element.closest('[data-dx-resize-subject]');\n return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n startSize: number,\n location: DragLocationHistory,\n client: 'clientX' | 'clientY',\n side: Side,\n minSize: number,\n maxSize: number | undefined,\n) => {\n return Math.min(\n maxSize ?? Infinity,\n Math.max(\n minSize,\n startSize +\n ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n ),\n );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n 'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n side: Side;\n defaultSize?: Size;\n fallbackSize: number;\n size?: Size;\n minSize: number;\n maxSize?: number;\n unit?: 'rem';\n iconPosition?: 'start' | 'center' | 'end';\n onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n classNames,\n side,\n iconPosition = 'start',\n defaultSize,\n fallbackSize,\n size: propsSize,\n minSize,\n maxSize,\n onSizeChange,\n}: ResizeHandleProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [size = 'min-content', setSize] = useControllableState({\n prop: propsSize,\n defaultProp: defaultSize,\n onChange: onSizeChange,\n });\n const dragStartSize = useRef<Size>(size);\n const elevation = useElevationContext();\n\n const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n useLayoutEffect(() => {\n if (!buttonRef.current) {\n return;\n }\n\n // TODO(thure): This should handle StackItem state vs local state better.\n return draggable({\n element: buttonRef.current,\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\n // We will be moving the line to indicate a drag; we can disable the native drag preview.\n disableNativeDragPreview({ nativeSetDragImage });\n // We don't want any native drop animation for when the user does not drop on a drop target.\n // We want the drag to finish immediately.\n preventUnhandled.start();\n },\n onDragStart: () => {\n dragStartSize.current =\n dragStartSize.current === 'min-content'\n ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n : dragStartSize.current;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n },\n onDrag: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n },\n onDrop: ({ location }) => {\n if (typeof dragStartSize.current !== 'number') {\n return;\n }\n const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n setSize(nextSize);\n onSizeChange?.(nextSize, true);\n dragStartSize.current = nextSize;\n buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n },\n });\n }, [\n // Note that `size` should not be a dependency here since dragging this adjusts the size.\n minSize,\n maxSize,\n ]);\n\n return (\n <button\n ref={buttonRef}\n data-side={side}\n className={mx(\n 'group absolute flex focus-visible:outline-none',\n surfaceZIndex({ elevation, level: 'tooltip' }),\n orientation === 'horizontal'\n ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n orientation === 'horizontal'\n ? iconPosition === 'end'\n ? 'align-end'\n : iconPosition === 'center'\n ? 'align-center'\n : 'align-start'\n : iconPosition === 'end'\n ? 'justify-end'\n : iconPosition === 'center'\n ? 'justify-center'\n : 'justify-start',\n 'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n 'before:absolute before:block before:bg-neutralFocusIndicator',\n classNames,\n )}\n >\n <div\n role='none'\n data-side={side}\n className={mx(\n 'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n )}\n >\n <DragHandleSignifier side={side} />\n </div>\n </button>\n );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n return (\n <svg\n xmlns='http://www.w3.org/2000/svg'\n viewBox='0 0 256 256'\n fill='currentColor'\n className={mx(\n 'shrink-0 bs-4 is-4 text-unAccent',\n side === 'block-end'\n ? 'rotate-90'\n : side === 'block-start'\n ? '-rotate-90'\n : side === 'inline-start' && 'rotate-180',\n )}\n >\n {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n </svg>\n );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n size: Size,\n sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n calcSize?: boolean,\n) => {\n let sizeProperty = 'inlineSize';\n switch (sideOrOrientation) {\n case 'vertical':\n case 'block-start':\n case 'block-end':\n sizeProperty = 'blockSize';\n }\n return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
5
+ "mappings": "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",
6
6
  "names": ["draggable", "disableNativeDragPreview", "preventUnhandled", "useControllableState", "React", "useLayoutEffect", "useRef", "useElevationContext", "mx", "surfaceZIndex", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "measureSubject", "element", "fallbackSize", "stackItemElement", "closest", "getBoundingClientRect", "width", "height", "getNextSize", "startSize", "location", "client", "side", "minSize", "maxSize", "Math", "min", "Infinity", "max", "current", "input", "initial", "REM", "endsWith", "RESIZE_SUBJECT", "RESIZE_SUBJECT_DRAGGING", "resizeAttributes", "ResizeHandle", "classNames", "iconPosition", "defaultSize", "size", "propsSize", "onSizeChange", "buttonRef", "useRef", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "dragStartSize", "elevation", "useElevationContext", "orientation", "startsWith", "useLayoutEffect", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "button", "ref", "data-side", "className", "mx", "surfaceZIndex", "level", "div", "role", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d"]
7
7
  }
package/dist/lib/node-esm/meta.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2227,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":795,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":581,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":21571,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":604,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12470},"packages/ui/react-ui-dnd/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":5633},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6475}}}
1
+ {"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2175,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":763,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":549,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":22003,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":487,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":572,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":631,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12483},"packages/ui/react-ui-dnd/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":6015},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6857}}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-dnd",
3
- "version": "0.8.2-main.fbd8ed0",
3
+ "version": "0.8.2-staging.4d6ad0f",
4
4
  "description": "Drag and drop components.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,6 +29,7 @@
29
29
  ],
30
30
  "dependencies": {
31
31
  "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
32
+ "@preact-signals/safe-react": "^0.9.0",
32
33
  "@radix-ui/react-use-controllable-state": "1.1.0"
33
34
  },
34
35
  "devDependencies": {
@@ -37,14 +38,14 @@
37
38
  "react": "~18.2.0",
38
39
  "react-dom": "~18.2.0",
39
40
  "vite": "5.4.7",
40
- "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
41
- "@dxos/react-ui": "0.8.2-main.fbd8ed0"
41
+ "@dxos/react-ui": "0.8.2-staging.4d6ad0f",
42
+ "@dxos/react-ui-theme": "0.8.2-staging.4d6ad0f"
42
43
  },
43
44
  "peerDependencies": {
44
45
  "react": "~18.2.0",
45
46
  "react-dom": "~18.2.0",
46
- "@dxos/react-ui": "0.8.2-main.fbd8ed0",
47
- "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0"
47
+ "@dxos/react-ui": "0.8.2-staging.4d6ad0f",
48
+ "@dxos/react-ui-theme": "0.8.2-staging.4d6ad0f"
48
49
  },
49
50
  "publishConfig": {
50
51
  "access": "public"
package/src/components/ResizeHandle.tsx CHANGED
@@ -147,7 +147,7 @@ export const ResizeHandle = ({
147
147
  ? 'justify-center'
148
148
  : 'justify-start',
149
149
  'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',
150
- 'before:absolute before:block before:bg-accentFocusIndicator',
150
+ 'before:absolute before:block before:bg-neutralFocusIndicator',
151
151
  classNames,
152
152
  )}
153
153
  >