@dxos/react-ui-dnd 0.8.3 → 0.8.4-main.f9ba587
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 +9 -7
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +9 -7
- 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 +3 -3
- package/dist/types/src/components/ResizeHandle.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -10
- package/src/components/ResizeHandle.tsx +6 -4
- package/dist/lib/node/index.cjs +0 -170
- package/dist/lib/node/index.cjs.map +0 -7
- package/dist/lib/node/meta.json +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
//
|
|
1
|
+
// src/components/ResizeHandle.tsx
|
|
2
2
|
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
3
3
|
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
4
4
|
import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
|
|
@@ -8,7 +8,7 @@ import React, { useLayoutEffect, useRef } from "react";
|
|
|
8
8
|
import { useElevationContext } from "@dxos/react-ui";
|
|
9
9
|
import { mx, surfaceZIndex } from "@dxos/react-ui-theme";
|
|
10
10
|
|
|
11
|
-
//
|
|
11
|
+
// src/util/sizeStyle.ts
|
|
12
12
|
var sizeStyle = (size, sideOrOrientation, calcSize) => {
|
|
13
13
|
let sizeProperty = "inlineSize";
|
|
14
14
|
switch (sideOrOrientation) {
|
|
@@ -22,10 +22,10 @@ var sizeStyle = (size, sideOrOrientation, calcSize) => {
|
|
|
22
22
|
};
|
|
23
23
|
};
|
|
24
24
|
|
|
25
|
-
//
|
|
25
|
+
// src/util/rem.ts
|
|
26
26
|
var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
27
27
|
|
|
28
|
-
//
|
|
28
|
+
// src/components/ResizeHandle.tsx
|
|
29
29
|
var measureSubject = (element, fallbackSize) => {
|
|
30
30
|
const stackItemElement = element.closest("[data-dx-resize-subject]");
|
|
31
31
|
return stackItemElement?.getBoundingClientRect() ?? {
|
|
@@ -39,14 +39,14 @@ var getNextSize = (startSize, location, client, side, minSize, maxSize) => {
|
|
|
39
39
|
var RESIZE_SUBJECT = "data-dx-resize-subject";
|
|
40
40
|
var RESIZE_SUBJECT_DRAGGING = "data-dx-resizing";
|
|
41
41
|
var resizeAttributes = {
|
|
42
|
-
|
|
42
|
+
[RESIZE_SUBJECT]: true
|
|
43
43
|
};
|
|
44
|
-
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size:
|
|
44
|
+
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: _size, minSize, maxSize, onSizeChange }) => {
|
|
45
45
|
var _effect = _useSignals();
|
|
46
46
|
try {
|
|
47
47
|
const buttonRef = useRef(null);
|
|
48
48
|
const [size = "min-content", setSize] = useControllableState({
|
|
49
|
-
prop:
|
|
49
|
+
prop: _size,
|
|
50
50
|
defaultProp: defaultSize,
|
|
51
51
|
onChange: onSizeChange
|
|
52
52
|
});
|
|
@@ -70,6 +70,8 @@ var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fal
|
|
|
70
70
|
dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
|
|
71
71
|
buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
|
|
72
72
|
},
|
|
73
|
+
// NOTE: Throttling here doesn't prevent the warning:
|
|
74
|
+
// Measure loop restarted more than 5 times
|
|
73
75
|
onDrag: ({ location }) => {
|
|
74
76
|
if (typeof dragStartSize.current !== "number") {
|
|
75
77
|
return;
|
|
@@ -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
|
|
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,
|
|
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", "
|
|
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 [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: _size,\n minSize,\n maxSize,\n onSizeChange,\n}: ResizeHandleProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [size = 'min-content', setSize] = useControllableState({\n prop: _size,\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-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
|
+
"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", "_size", "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
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"
|
|
1
|
+
{"inputs":{"src/util/sizeStyle.ts":{"bytes":2162,"imports":[],"format":"esm"},"src/util/rem.ts":{"bytes":750,"imports":[],"format":"esm"},"src/util/index.ts":{"bytes":536,"imports":[{"path":"src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"src/components/ResizeHandle.tsx":{"bytes":22277,"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":"src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"src/components/index.ts":{"bytes":474,"imports":[{"path":"src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"src/types.ts":{"bytes":559,"imports":[],"format":"esm"},"src/index.ts":{"bytes":618,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/types.ts","kind":"import-statement","original":"./types"},{"path":"src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12587},"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":"src/index.ts","inputs":{"src/components/ResizeHandle.tsx":{"bytesInOutput":6114},"src/util/sizeStyle.ts":{"bytesInOutput":355},"src/util/index.ts":{"bytesInOutput":0},"src/util/rem.ts":{"bytesInOutput":75},"src/components/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":6763}}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
|
-
//
|
|
3
|
+
// src/components/ResizeHandle.tsx
|
|
4
4
|
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
5
5
|
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
6
6
|
import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
|
|
@@ -10,7 +10,7 @@ import React, { useLayoutEffect, useRef } from "react";
|
|
|
10
10
|
import { useElevationContext } from "@dxos/react-ui";
|
|
11
11
|
import { mx, surfaceZIndex } from "@dxos/react-ui-theme";
|
|
12
12
|
|
|
13
|
-
//
|
|
13
|
+
// src/util/sizeStyle.ts
|
|
14
14
|
var sizeStyle = (size, sideOrOrientation, calcSize) => {
|
|
15
15
|
let sizeProperty = "inlineSize";
|
|
16
16
|
switch (sideOrOrientation) {
|
|
@@ -24,10 +24,10 @@ var sizeStyle = (size, sideOrOrientation, calcSize) => {
|
|
|
24
24
|
};
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
-
//
|
|
27
|
+
// src/util/rem.ts
|
|
28
28
|
var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
29
29
|
|
|
30
|
-
//
|
|
30
|
+
// src/components/ResizeHandle.tsx
|
|
31
31
|
var measureSubject = (element, fallbackSize) => {
|
|
32
32
|
const stackItemElement = element.closest("[data-dx-resize-subject]");
|
|
33
33
|
return stackItemElement?.getBoundingClientRect() ?? {
|
|
@@ -41,14 +41,14 @@ var getNextSize = (startSize, location, client, side, minSize, maxSize) => {
|
|
|
41
41
|
var RESIZE_SUBJECT = "data-dx-resize-subject";
|
|
42
42
|
var RESIZE_SUBJECT_DRAGGING = "data-dx-resizing";
|
|
43
43
|
var resizeAttributes = {
|
|
44
|
-
|
|
44
|
+
[RESIZE_SUBJECT]: true
|
|
45
45
|
};
|
|
46
|
-
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size:
|
|
46
|
+
var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: _size, minSize, maxSize, onSizeChange }) => {
|
|
47
47
|
var _effect = _useSignals();
|
|
48
48
|
try {
|
|
49
49
|
const buttonRef = useRef(null);
|
|
50
50
|
const [size = "min-content", setSize] = useControllableState({
|
|
51
|
-
prop:
|
|
51
|
+
prop: _size,
|
|
52
52
|
defaultProp: defaultSize,
|
|
53
53
|
onChange: onSizeChange
|
|
54
54
|
});
|
|
@@ -72,6 +72,8 @@ var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fal
|
|
|
72
72
|
dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
|
|
73
73
|
buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
|
|
74
74
|
},
|
|
75
|
+
// NOTE: Throttling here doesn't prevent the warning:
|
|
76
|
+
// Measure loop restarted more than 5 times
|
|
75
77
|
onDrag: ({ location }) => {
|
|
76
78
|
if (typeof dragStartSize.current !== "number") {
|
|
77
79
|
return;
|
|
@@ -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
|
|
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,
|
|
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", "
|
|
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 [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: _size,\n minSize,\n maxSize,\n onSizeChange,\n}: ResizeHandleProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [size = 'min-content', setSize] = useControllableState({\n prop: _size,\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-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
|
+
"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", "_size", "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
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"
|
|
1
|
+
{"inputs":{"src/util/sizeStyle.ts":{"bytes":2162,"imports":[],"format":"esm"},"src/util/rem.ts":{"bytes":750,"imports":[],"format":"esm"},"src/util/index.ts":{"bytes":536,"imports":[{"path":"src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"src/components/ResizeHandle.tsx":{"bytes":22277,"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":"src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"src/components/index.ts":{"bytes":474,"imports":[{"path":"src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"src/types.ts":{"bytes":559,"imports":[],"format":"esm"},"src/index.ts":{"bytes":618,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/types.ts","kind":"import-statement","original":"./types"},{"path":"src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12589},"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":"src/index.ts","inputs":{"src/components/ResizeHandle.tsx":{"bytesInOutput":6114},"src/util/sizeStyle.ts":{"bytesInOutput":355},"src/util/index.ts":{"bytesInOutput":0},"src/util/rem.ts":{"bytesInOutput":75},"src/components/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":6856}}}
|
|
@@ -2,18 +2,18 @@ import React from 'react';
|
|
|
2
2
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
3
|
import { type Size, type Side } from '../types';
|
|
4
4
|
export declare const resizeAttributes: {
|
|
5
|
-
|
|
5
|
+
"data-dx-resize-subject": boolean;
|
|
6
6
|
};
|
|
7
7
|
export type ResizeHandleProps = ThemedClassName<{
|
|
8
8
|
side: Side;
|
|
9
|
+
iconPosition?: 'start' | 'center' | 'end';
|
|
9
10
|
defaultSize?: Size;
|
|
10
11
|
fallbackSize: number;
|
|
11
12
|
size?: Size;
|
|
12
13
|
minSize: number;
|
|
13
14
|
maxSize?: number;
|
|
14
15
|
unit?: 'rem';
|
|
15
|
-
iconPosition?: 'start' | 'center' | 'end';
|
|
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: _size, 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;AA6BhD,eAAO,MAAM,gBAAgB;;CAE5B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC9C,IAAI,EAAE,IAAI,CAAC;IACX,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,
|
|
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;AA6BhD,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,6GAU1B,iBAAiB,sBAkGnB,CAAC"}
|