@dxos/react-ui-dnd 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6
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 +6 -28
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +6 -28
- package/dist/lib/node-esm/index.mjs.map +3 -3
- 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/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/src/components/ResizeHandle.tsx +8 -44
|
@@ -15,17 +15,17 @@ var measureSubject = (element, fallbackSize) => {
|
|
|
15
15
|
};
|
|
16
16
|
};
|
|
17
17
|
var getNextSize = (startSize, location, client, side, minSize, maxSize) => {
|
|
18
|
-
return Math.min(maxSize ?? Infinity, Math.max(minSize, startSize + (location.current.input[client] - location.initial.input[client]) / REM * (side.endsWith("
|
|
18
|
+
return Math.min(maxSize ?? Infinity, Math.max(minSize, startSize + (location.current.input[client] - location.initial.input[client]) / REM * (side.endsWith("start") ? -1 : 1)));
|
|
19
19
|
};
|
|
20
20
|
var RESIZE_SUBJECT = "data-dx-resize-subject";
|
|
21
21
|
var RESIZE_SUBJECT_DRAGGING = "data-dx-resizing";
|
|
22
22
|
var resizeAttributes = {
|
|
23
23
|
[RESIZE_SUBJECT]: true
|
|
24
24
|
};
|
|
25
|
-
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size:
|
|
25
|
+
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: sizeProp, minSize, maxSize, onSizeChange }) => {
|
|
26
26
|
const buttonRef = useRef(null);
|
|
27
27
|
const [size = "min-content", setSize] = useControllableState({
|
|
28
|
-
prop:
|
|
28
|
+
prop: sizeProp,
|
|
29
29
|
defaultProp: defaultSize,
|
|
30
30
|
onChange: onSizeChange
|
|
31
31
|
});
|
|
@@ -76,33 +76,11 @@ var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fal
|
|
|
76
76
|
return /* @__PURE__ */ React.createElement("button", {
|
|
77
77
|
ref: buttonRef,
|
|
78
78
|
"data-side": side,
|
|
79
|
-
className: mx("group absolute flex focus-visible:outline-
|
|
79
|
+
className: mx("group absolute flex focus-visible:outline-hidden", surfaceZIndex({
|
|
80
80
|
elevation,
|
|
81
81
|
level: "tooltip"
|
|
82
|
-
}), orientation === "horizontal" ?
|
|
83
|
-
}
|
|
84
|
-
role: "none",
|
|
85
|
-
"data-side": side,
|
|
86
|
-
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")
|
|
87
|
-
}, /* @__PURE__ */ React.createElement(DragHandleSignifier, {
|
|
88
|
-
side
|
|
89
|
-
})));
|
|
90
|
-
};
|
|
91
|
-
var DragHandleSignifier = ({ side }) => {
|
|
92
|
-
return /* @__PURE__ */ React.createElement("svg", {
|
|
93
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
94
|
-
viewBox: "0 0 256 256",
|
|
95
|
-
fill: "currentColor",
|
|
96
|
-
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")
|
|
97
|
-
}, /* @__PURE__ */ React.createElement("path", {
|
|
98
|
-
d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
99
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
100
|
-
d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
101
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
102
|
-
d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
103
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
104
|
-
d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
105
|
-
}));
|
|
82
|
+
}), orientation === "horizontal" ? "cursor-col-resize w-4 inset-y-0 data-[side=inline-end]:end-0 data-[side=inline-end]:before:end-0 data-[side=inline-start]:start-0 data-[side=inline-start]:before:start-0 border-b-0! before:inset-y-0 before:w-1" : "cursor-row-resize h-4 inset-x-0 data-[side=block-end]:bottom-0 data-[side=block-end]:before:bottom-0 data-[side=block-start]:top-0 data-[side=block-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
|
+
});
|
|
106
84
|
};
|
|
107
85
|
|
|
108
86
|
// src/util/sizeStyle.ts
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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/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('
|
|
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;AAIlC,IAAMC,MAAMC,WAAWC,iBAAiBC,SAASC,eAAe,EAAEC,QAAQ;AAE1E,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,KAAWjB,OAAQkB,KAAKU,SAAS,
|
|
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", "
|
|
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('start') ? -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=inline-end]:end-0 data-[side=inline-end]:before:end-0 data-[side=inline-start]:start-0 data-[side=inline-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=block-end]:bottom-0 data-[side=block-end]:before:bottom-0 data-[side=block-start]:top-0 data-[side=block-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/components/ResizeHandle.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/ResizeHandle.tsx":{"bytes":18133,"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":10550},"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":4553},"src/index.ts":{"bytesInOutput":0},"src/util/sizeStyle.ts":{"bytesInOutput":368}},"bytes":5077}}}
|
|
@@ -17,17 +17,17 @@ var measureSubject = (element, fallbackSize) => {
|
|
|
17
17
|
};
|
|
18
18
|
};
|
|
19
19
|
var getNextSize = (startSize, location, client, side, minSize, maxSize) => {
|
|
20
|
-
return Math.min(maxSize ?? Infinity, Math.max(minSize, startSize + (location.current.input[client] - location.initial.input[client]) / REM * (side.endsWith("
|
|
20
|
+
return Math.min(maxSize ?? Infinity, Math.max(minSize, startSize + (location.current.input[client] - location.initial.input[client]) / REM * (side.endsWith("start") ? -1 : 1)));
|
|
21
21
|
};
|
|
22
22
|
var RESIZE_SUBJECT = "data-dx-resize-subject";
|
|
23
23
|
var RESIZE_SUBJECT_DRAGGING = "data-dx-resizing";
|
|
24
24
|
var resizeAttributes = {
|
|
25
25
|
[RESIZE_SUBJECT]: true
|
|
26
26
|
};
|
|
27
|
-
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size:
|
|
27
|
+
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: sizeProp, minSize, maxSize, onSizeChange }) => {
|
|
28
28
|
const buttonRef = useRef(null);
|
|
29
29
|
const [size = "min-content", setSize] = useControllableState({
|
|
30
|
-
prop:
|
|
30
|
+
prop: sizeProp,
|
|
31
31
|
defaultProp: defaultSize,
|
|
32
32
|
onChange: onSizeChange
|
|
33
33
|
});
|
|
@@ -78,33 +78,11 @@ var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fal
|
|
|
78
78
|
return /* @__PURE__ */ React.createElement("button", {
|
|
79
79
|
ref: buttonRef,
|
|
80
80
|
"data-side": side,
|
|
81
|
-
className: mx("group absolute flex focus-visible:outline-
|
|
81
|
+
className: mx("group absolute flex focus-visible:outline-hidden", surfaceZIndex({
|
|
82
82
|
elevation,
|
|
83
83
|
level: "tooltip"
|
|
84
|
-
}), orientation === "horizontal" ?
|
|
85
|
-
}
|
|
86
|
-
role: "none",
|
|
87
|
-
"data-side": side,
|
|
88
|
-
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")
|
|
89
|
-
}, /* @__PURE__ */ React.createElement(DragHandleSignifier, {
|
|
90
|
-
side
|
|
91
|
-
})));
|
|
92
|
-
};
|
|
93
|
-
var DragHandleSignifier = ({ side }) => {
|
|
94
|
-
return /* @__PURE__ */ React.createElement("svg", {
|
|
95
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
96
|
-
viewBox: "0 0 256 256",
|
|
97
|
-
fill: "currentColor",
|
|
98
|
-
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")
|
|
99
|
-
}, /* @__PURE__ */ React.createElement("path", {
|
|
100
|
-
d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
101
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
102
|
-
d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
103
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
104
|
-
d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
105
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
106
|
-
d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
|
|
107
|
-
}));
|
|
84
|
+
}), orientation === "horizontal" ? "cursor-col-resize w-4 inset-y-0 data-[side=inline-end]:end-0 data-[side=inline-end]:before:end-0 data-[side=inline-start]:start-0 data-[side=inline-start]:before:start-0 border-b-0! before:inset-y-0 before:w-1" : "cursor-row-resize h-4 inset-x-0 data-[side=block-end]:bottom-0 data-[side=block-end]:before:bottom-0 data-[side=block-start]:top-0 data-[side=block-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
|
+
});
|
|
108
86
|
};
|
|
109
87
|
|
|
110
88
|
// src/util/sizeStyle.ts
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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/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('
|
|
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;AAIlC,IAAMC,MAAMC,WAAWC,iBAAiBC,SAASC,eAAe,EAAEC,QAAQ;AAE1E,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,KAAWjB,OAAQkB,KAAKU,SAAS,
|
|
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", "
|
|
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('start') ? -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=inline-end]:end-0 data-[side=inline-end]:before:end-0 data-[side=inline-start]:start-0 data-[side=inline-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=block-end]:bottom-0 data-[side=block-end]:before:bottom-0 data-[side=block-start]:top-0 data-[side=block-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/components/ResizeHandle.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/ResizeHandle.tsx":{"bytes":18133,"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/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10552},"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/ui-theme","kind":"import-statement","external":true}],"exports":["ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"src/index.ts","inputs":{"src/components/ResizeHandle.tsx":{"bytesInOutput":4553},"src/index.ts":{"bytesInOutput":0},"src/util/sizeStyle.ts":{"bytesInOutput":368}},"bytes":5170}}}
|
|
@@ -15,5 +15,5 @@ export type ResizeHandleProps = ThemedClassName<{
|
|
|
15
15
|
unit?: 'rem';
|
|
16
16
|
onSizeChange?: (nextSize: Size, commit?: boolean) => void;
|
|
17
17
|
}>;
|
|
18
|
-
export declare const ResizeHandle: ({ classNames, side, iconPosition, defaultSize, fallbackSize, size:
|
|
18
|
+
export declare const ResizeHandle: ({ classNames, side, iconPosition, defaultSize, fallbackSize, size: sizeProp, minSize, maxSize, onSizeChange, }: ResizeHandleProps) => React.JSX.Element;
|
|
19
19
|
//# sourceMappingURL=ResizeHandle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/ResizeHandle.tsx"],"names":[],"mappings":"AASA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,eAAe,EAAuB,MAAM,gBAAgB,CAAC;AAG3E,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AA8BhD,eAAO,MAAM,gBAAgB;;CAE5B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC9C,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC1C,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D,CAAC,CAAC;AAEH,eAAO,MAAM,YAAY,GAAI,
|
|
1
|
+
{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/ResizeHandle.tsx"],"names":[],"mappings":"AASA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,eAAe,EAAuB,MAAM,gBAAgB,CAAC;AAG3E,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AA8BhD,eAAO,MAAM,gBAAgB;;CAE5B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC9C,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC1C,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D,CAAC,CAAC;AAEH,eAAO,MAAM,YAAY,GAAI,gHAU1B,iBAAiB,sBAuFnB,CAAC"}
|