@dxos/react-ui-dnd 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +73 -110
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +73 -110
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/ResizeHandle.d.ts +1 -1
- package/dist/types/src/components/ResizeHandle.d.ts.map +1 -1
- package/dist/types/src/util/index.d.ts +0 -1
- package/dist/types/src/util/index.d.ts.map +1 -1
- package/dist/types/src/util/sizeStyle.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +18 -15
- package/src/components/ResizeHandle.tsx +11 -46
- package/src/util/index.ts +0 -1
- package/src/util/sizeStyle.ts +5 -1
- package/dist/types/src/util/rem.d.ts +0 -2
- package/dist/types/src/util/rem.d.ts.map +0 -1
- package/src/util/rem.ts +0 -5
|
@@ -1,31 +1,12 @@
|
|
|
1
1
|
// src/components/ResizeHandle.tsx
|
|
2
|
-
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
3
2
|
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
4
3
|
import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
|
|
5
4
|
import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
|
|
6
5
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
7
6
|
import React, { useLayoutEffect, useRef } from "react";
|
|
8
7
|
import { useElevationContext } from "@dxos/react-ui";
|
|
9
|
-
import { mx, surfaceZIndex } from "@dxos/
|
|
10
|
-
|
|
11
|
-
// src/util/sizeStyle.ts
|
|
12
|
-
var sizeStyle = (size, sideOrOrientation, calcSize) => {
|
|
13
|
-
let sizeProperty = "inlineSize";
|
|
14
|
-
switch (sideOrOrientation) {
|
|
15
|
-
case "vertical":
|
|
16
|
-
case "block-start":
|
|
17
|
-
case "block-end":
|
|
18
|
-
sizeProperty = "blockSize";
|
|
19
|
-
}
|
|
20
|
-
return {
|
|
21
|
-
[sizeProperty]: size === "min-content" ? calcSize ? "var(--dx-calc-min)" : "min-content" : `${size}rem`
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
// src/util/rem.ts
|
|
8
|
+
import { mx, surfaceZIndex } from "@dxos/ui-theme";
|
|
26
9
|
var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
27
|
-
|
|
28
|
-
// src/components/ResizeHandle.tsx
|
|
29
10
|
var measureSubject = (element, fallbackSize) => {
|
|
30
11
|
const stackItemElement = element.closest("[data-dx-resize-subject]");
|
|
31
12
|
return stackItemElement?.getBoundingClientRect() ?? {
|
|
@@ -34,107 +15,89 @@ var measureSubject = (element, fallbackSize) => {
|
|
|
34
15
|
};
|
|
35
16
|
};
|
|
36
17
|
var getNextSize = (startSize, location, client, side, minSize, maxSize) => {
|
|
37
|
-
return Math.min(maxSize ?? Infinity, Math.max(minSize, startSize + (location.current.input[client] - location.initial.input[client]) / REM * (side.endsWith("end") ? 1 :
|
|
18
|
+
return Math.min(maxSize ?? Infinity, Math.max(minSize, startSize + (location.current.input[client] - location.initial.input[client]) / REM * (side.endsWith("end") ? -1 : 1)));
|
|
38
19
|
};
|
|
39
20
|
var RESIZE_SUBJECT = "data-dx-resize-subject";
|
|
40
21
|
var RESIZE_SUBJECT_DRAGGING = "data-dx-resizing";
|
|
41
22
|
var resizeAttributes = {
|
|
42
23
|
[RESIZE_SUBJECT]: true
|
|
43
24
|
};
|
|
44
|
-
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size:
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
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);
|
|
25
|
+
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: sizeProp, minSize, maxSize, onSizeChange }) => {
|
|
26
|
+
const buttonRef = useRef(null);
|
|
27
|
+
const [size = "min-content", setSize] = useControllableState({
|
|
28
|
+
prop: sizeProp,
|
|
29
|
+
defaultProp: defaultSize,
|
|
30
|
+
onChange: onSizeChange
|
|
31
|
+
});
|
|
32
|
+
const dragStartSize = useRef(size);
|
|
33
|
+
const elevation = useElevationContext();
|
|
34
|
+
const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
|
|
35
|
+
const client = orientation === "horizontal" ? "clientX" : "clientY";
|
|
36
|
+
useLayoutEffect(() => {
|
|
37
|
+
if (!buttonRef.current) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
return draggable({
|
|
41
|
+
element: buttonRef.current,
|
|
42
|
+
onGenerateDragPreview: ({ nativeSetDragImage }) => {
|
|
43
|
+
disableNativeDragPreview({
|
|
44
|
+
nativeSetDragImage
|
|
45
|
+
});
|
|
46
|
+
preventUnhandled.start();
|
|
47
|
+
},
|
|
48
|
+
onDragStart: () => {
|
|
49
|
+
dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
|
|
50
|
+
buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
|
|
51
|
+
},
|
|
52
|
+
// NOTE: Throttling here doesn't prevent the warning:
|
|
53
|
+
// Measure loop restarted more than 5 times
|
|
54
|
+
onDrag: ({ location }) => {
|
|
55
|
+
if (typeof dragStartSize.current !== "number") {
|
|
56
|
+
return;
|
|
90
57
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
58
|
+
setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
|
|
59
|
+
},
|
|
60
|
+
onDrop: ({ location }) => {
|
|
61
|
+
if (typeof dragStartSize.current !== "number") {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
|
|
65
|
+
setSize(nextSize);
|
|
66
|
+
onSizeChange?.(nextSize, true);
|
|
67
|
+
dragStartSize.current = nextSize;
|
|
68
|
+
buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
}, [
|
|
72
|
+
// Note that `size` should not be a dependency here since dragging this adjusts the size.
|
|
73
|
+
minSize,
|
|
74
|
+
maxSize
|
|
75
|
+
]);
|
|
76
|
+
return /* @__PURE__ */ React.createElement("button", {
|
|
77
|
+
ref: buttonRef,
|
|
78
|
+
"data-side": side,
|
|
79
|
+
className: mx("group absolute flex focus-visible:outline-hidden", surfaceZIndex({
|
|
80
|
+
elevation,
|
|
81
|
+
level: "tooltip"
|
|
82
|
+
}), orientation === "horizontal" ? 'cursor-col-resize w-4 inset-y-0 data-[side="w-end"]:end-0 data-[side="w-end"]:before:end-0 data-[side="w-start"]:start-0 data-[side="w-start"]:before:start-0 border-b-0! before:inset-y-0 before:w-1' : 'cursor-row-resize h-4 inset-x-0 data-[side="h-end"]:bottom-0 data-[side="h-end"]:before:bottom-0 data-[side="h-start"]:top-0 data-[side="h-start"]:before:top-0 border-x-0! before:inset-x-0 before:h-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-neutral-focus-indicator", classNames)
|
|
83
|
+
});
|
|
114
84
|
};
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
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();
|
|
85
|
+
|
|
86
|
+
// src/util/sizeStyle.ts
|
|
87
|
+
var sizeStyle = (size, sideOrOrientation, calcSize) => {
|
|
88
|
+
let sizeProperty = "inlineSize";
|
|
89
|
+
switch (sideOrOrientation) {
|
|
90
|
+
case "vertical":
|
|
91
|
+
case "block-start":
|
|
92
|
+
case "block-end":
|
|
93
|
+
sizeProperty = "blockSize";
|
|
94
|
+
break;
|
|
134
95
|
}
|
|
96
|
+
return {
|
|
97
|
+
[sizeProperty]: size === "min-content" ? calcSize ? "var(--dx-calc-min)" : "min-content" : `${size}rem`
|
|
98
|
+
};
|
|
135
99
|
};
|
|
136
100
|
export {
|
|
137
|
-
REM,
|
|
138
101
|
ResizeHandle,
|
|
139
102
|
resizeAttributes,
|
|
140
103
|
sizeStyle
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/ResizeHandle.tsx", "../../../src/util/sizeStyle.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/
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["draggable", "disableNativeDragPreview", "preventUnhandled", "useControllableState", "React", "useLayoutEffect", "useRef", "useElevationContext", "mx", "surfaceZIndex", "
|
|
3
|
+
"sources": ["../../../src/components/ResizeHandle.tsx", "../../../src/util/sizeStyle.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/ui-theme';\n\nimport { type Side, type Size } from '../types';\n\nconst REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\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 [RESIZE_SUBJECT]: true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n side: Side;\n iconPosition?: 'start' | 'center' | 'end';\n defaultSize?: Size;\n fallbackSize: number;\n size?: Size;\n minSize: number;\n maxSize?: number;\n unit?: 'rem';\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: sizeProp,\n minSize,\n maxSize,\n onSizeChange,\n}: ResizeHandleProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [size = 'min-content', setSize] = useControllableState({\n prop: sizeProp,\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 // NOTE: Throttling here doesn't prevent the warning:\n // Measure loop restarted more than 5 times\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-hidden',\n surfaceZIndex({ elevation, level: 'tooltip' }),\n orientation === 'horizontal'\n ? 'cursor-col-resize w-4 inset-y-0 data-[side=\"w-end\"]:end-0 data-[side=\"w-end\"]:before:end-0 data-[side=\"w-start\"]:start-0 data-[side=\"w-start\"]:before:start-0 border-b-0! before:inset-y-0 before:w-1'\n : 'cursor-row-resize h-4 inset-x-0 data-[side=\"h-end\"]:bottom-0 data-[side=\"h-end\"]:before:bottom-0 data-[side=\"h-start\"]:top-0 data-[side=\"h-start\"]:before:top-0 border-x-0! before:inset-x-0 before:h-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-neutral-focus-indicator',\n classNames,\n )}\n />\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 break;\n }\n\n return {\n [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem`,\n };\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["draggable", "disableNativeDragPreview", "preventUnhandled", "useControllableState", "React", "useLayoutEffect", "useRef", "useElevationContext", "mx", "surfaceZIndex", "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", "size", "sizeProp", "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", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/
|
|
1
|
+
{"inputs":{"src/components/ResizeHandle.tsx":{"bytes":18103,"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/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/components/index.ts":{"bytes":474,"imports":[{"path":"src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"src/util/sizeStyle.ts":{"bytes":2217,"imports":[],"format":"esm"},"src/util/index.ts":{"bytes":461,"imports":[{"path":"src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"}],"format":"esm"},"src/index.ts":{"bytes":577,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10544},"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/ui-theme","kind":"import-statement","external":true}],"exports":["ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"src/index.ts","inputs":{"src/components/ResizeHandle.tsx":{"bytesInOutput":4531},"src/index.ts":{"bytesInOutput":0},"src/util/sizeStyle.ts":{"bytesInOutput":368}},"bytes":5055}}}
|
|
@@ -1,33 +1,14 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
3
|
// src/components/ResizeHandle.tsx
|
|
4
|
-
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
5
4
|
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
6
5
|
import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
|
|
7
6
|
import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
|
|
8
7
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
9
8
|
import React, { useLayoutEffect, useRef } from "react";
|
|
10
9
|
import { useElevationContext } from "@dxos/react-ui";
|
|
11
|
-
import { mx, surfaceZIndex } from "@dxos/
|
|
12
|
-
|
|
13
|
-
// src/util/sizeStyle.ts
|
|
14
|
-
var sizeStyle = (size, sideOrOrientation, calcSize) => {
|
|
15
|
-
let sizeProperty = "inlineSize";
|
|
16
|
-
switch (sideOrOrientation) {
|
|
17
|
-
case "vertical":
|
|
18
|
-
case "block-start":
|
|
19
|
-
case "block-end":
|
|
20
|
-
sizeProperty = "blockSize";
|
|
21
|
-
}
|
|
22
|
-
return {
|
|
23
|
-
[sizeProperty]: size === "min-content" ? calcSize ? "var(--dx-calc-min)" : "min-content" : `${size}rem`
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
// src/util/rem.ts
|
|
10
|
+
import { mx, surfaceZIndex } from "@dxos/ui-theme";
|
|
28
11
|
var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
29
|
-
|
|
30
|
-
// src/components/ResizeHandle.tsx
|
|
31
12
|
var measureSubject = (element, fallbackSize) => {
|
|
32
13
|
const stackItemElement = element.closest("[data-dx-resize-subject]");
|
|
33
14
|
return stackItemElement?.getBoundingClientRect() ?? {
|
|
@@ -36,107 +17,89 @@ var measureSubject = (element, fallbackSize) => {
|
|
|
36
17
|
};
|
|
37
18
|
};
|
|
38
19
|
var getNextSize = (startSize, location, client, side, minSize, maxSize) => {
|
|
39
|
-
return Math.min(maxSize ?? Infinity, Math.max(minSize, startSize + (location.current.input[client] - location.initial.input[client]) / REM * (side.endsWith("end") ? 1 :
|
|
20
|
+
return Math.min(maxSize ?? Infinity, Math.max(minSize, startSize + (location.current.input[client] - location.initial.input[client]) / REM * (side.endsWith("end") ? -1 : 1)));
|
|
40
21
|
};
|
|
41
22
|
var RESIZE_SUBJECT = "data-dx-resize-subject";
|
|
42
23
|
var RESIZE_SUBJECT_DRAGGING = "data-dx-resizing";
|
|
43
24
|
var resizeAttributes = {
|
|
44
25
|
[RESIZE_SUBJECT]: true
|
|
45
26
|
};
|
|
46
|
-
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
if (typeof dragStartSize.current !== "number") {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
|
|
82
|
-
},
|
|
83
|
-
onDrop: ({ location }) => {
|
|
84
|
-
if (typeof dragStartSize.current !== "number") {
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
|
|
88
|
-
setSize(nextSize);
|
|
89
|
-
onSizeChange?.(nextSize, true);
|
|
90
|
-
dragStartSize.current = nextSize;
|
|
91
|
-
buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
|
|
27
|
+
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: sizeProp, minSize, maxSize, onSizeChange }) => {
|
|
28
|
+
const buttonRef = useRef(null);
|
|
29
|
+
const [size = "min-content", setSize] = useControllableState({
|
|
30
|
+
prop: sizeProp,
|
|
31
|
+
defaultProp: defaultSize,
|
|
32
|
+
onChange: onSizeChange
|
|
33
|
+
});
|
|
34
|
+
const dragStartSize = useRef(size);
|
|
35
|
+
const elevation = useElevationContext();
|
|
36
|
+
const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
|
|
37
|
+
const client = orientation === "horizontal" ? "clientX" : "clientY";
|
|
38
|
+
useLayoutEffect(() => {
|
|
39
|
+
if (!buttonRef.current) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
return draggable({
|
|
43
|
+
element: buttonRef.current,
|
|
44
|
+
onGenerateDragPreview: ({ nativeSetDragImage }) => {
|
|
45
|
+
disableNativeDragPreview({
|
|
46
|
+
nativeSetDragImage
|
|
47
|
+
});
|
|
48
|
+
preventUnhandled.start();
|
|
49
|
+
},
|
|
50
|
+
onDragStart: () => {
|
|
51
|
+
dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
|
|
52
|
+
buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
|
|
53
|
+
},
|
|
54
|
+
// NOTE: Throttling here doesn't prevent the warning:
|
|
55
|
+
// Measure loop restarted more than 5 times
|
|
56
|
+
onDrag: ({ location }) => {
|
|
57
|
+
if (typeof dragStartSize.current !== "number") {
|
|
58
|
+
return;
|
|
92
59
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
60
|
+
setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
|
|
61
|
+
},
|
|
62
|
+
onDrop: ({ location }) => {
|
|
63
|
+
if (typeof dragStartSize.current !== "number") {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
|
|
67
|
+
setSize(nextSize);
|
|
68
|
+
onSizeChange?.(nextSize, true);
|
|
69
|
+
dragStartSize.current = nextSize;
|
|
70
|
+
buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}, [
|
|
74
|
+
// Note that `size` should not be a dependency here since dragging this adjusts the size.
|
|
75
|
+
minSize,
|
|
76
|
+
maxSize
|
|
77
|
+
]);
|
|
78
|
+
return /* @__PURE__ */ React.createElement("button", {
|
|
79
|
+
ref: buttonRef,
|
|
80
|
+
"data-side": side,
|
|
81
|
+
className: mx("group absolute flex focus-visible:outline-hidden", surfaceZIndex({
|
|
82
|
+
elevation,
|
|
83
|
+
level: "tooltip"
|
|
84
|
+
}), orientation === "horizontal" ? 'cursor-col-resize w-4 inset-y-0 data-[side="w-end"]:end-0 data-[side="w-end"]:before:end-0 data-[side="w-start"]:start-0 data-[side="w-start"]:before:start-0 border-b-0! before:inset-y-0 before:w-1' : 'cursor-row-resize h-4 inset-x-0 data-[side="h-end"]:bottom-0 data-[side="h-end"]:before:bottom-0 data-[side="h-start"]:top-0 data-[side="h-start"]:before:top-0 border-x-0! before:inset-x-0 before:h-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-neutral-focus-indicator", classNames)
|
|
85
|
+
});
|
|
116
86
|
};
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
128
|
-
d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
129
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
130
|
-
d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
131
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
132
|
-
d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
133
|
-
}));
|
|
134
|
-
} finally {
|
|
135
|
-
_effect.f();
|
|
87
|
+
|
|
88
|
+
// src/util/sizeStyle.ts
|
|
89
|
+
var sizeStyle = (size, sideOrOrientation, calcSize) => {
|
|
90
|
+
let sizeProperty = "inlineSize";
|
|
91
|
+
switch (sideOrOrientation) {
|
|
92
|
+
case "vertical":
|
|
93
|
+
case "block-start":
|
|
94
|
+
case "block-end":
|
|
95
|
+
sizeProperty = "blockSize";
|
|
96
|
+
break;
|
|
136
97
|
}
|
|
98
|
+
return {
|
|
99
|
+
[sizeProperty]: size === "min-content" ? calcSize ? "var(--dx-calc-min)" : "min-content" : `${size}rem`
|
|
100
|
+
};
|
|
137
101
|
};
|
|
138
102
|
export {
|
|
139
|
-
REM,
|
|
140
103
|
ResizeHandle,
|
|
141
104
|
resizeAttributes,
|
|
142
105
|
sizeStyle
|