@dxos/react-ui-dnd 0.9.0 → 0.9.1-staging.ee54ba693a
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 +15 -4
- package/dist/lib/browser/index.mjs.map +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +15 -4
- package/dist/lib/node-esm/index.mjs.map +2 -2
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/ResizeHandle.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +10 -10
- package/src/components/ResizeHandle.tsx +5 -2
|
@@ -76,10 +76,21 @@ 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(
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
className: mx(
|
|
80
|
+
"group absolute flex focus-visible:outline-hidden",
|
|
81
|
+
surfaceZIndex({
|
|
82
|
+
elevation,
|
|
83
|
+
level: "tooltip"
|
|
84
|
+
}),
|
|
85
|
+
// Both the grab button (w-4/h-4) and its hover line are centered on the underlying edge: the
|
|
86
|
+
// button is offset by half its size (-2) so it straddles the edge, and the line is centered
|
|
87
|
+
// within the button (start-1/2 / top-1/2) so it sits on the edge too.
|
|
88
|
+
orientation === "horizontal" ? "cursor-col-resize w-4 inset-y-0 data-[side=inline-end]:-end-2 data-[side=inline-start]:-start-2 border-b-0! before:inset-y-0 before:w-1 before:start-1/2 before:-translate-x-1/2" : "cursor-row-resize h-4 inset-x-0 data-[side=block-end]:-bottom-2 data-[side=block-start]:-top-2 border-x-0! before:inset-x-0 before:h-1 before:top-1/2 before:-translate-y-1/2",
|
|
89
|
+
orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start",
|
|
90
|
+
"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",
|
|
91
|
+
"before:absolute before:block before:bg-focus-ring-subtle",
|
|
92
|
+
classNames
|
|
93
|
+
)
|
|
83
94
|
});
|
|
84
95
|
};
|
|
85
96
|
|
|
@@ -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('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]
|
|
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,OAAA,IAAW,KAAK,EAAA,CAAA;AAGnH;AAEA,IAAMC,iBAAiB;AACvB,IAAMC,0BAA0B;AAEzB,IAAMC,mBAAmB;EAC9B,CAACF,cAAAA,GAAiB;AACpB;AAcO,IAAMG,eAAe,CAAC,EAC3BC,YACAf,MACAgB,eAAe,SACfC,aACA3B,cACA4B,MAAMC,UACNlB,SACAC,SACAkB,aAAY,MACM;AAClB,QAAMC,YAAY3C,OAA0B,IAAA;AAC5C,QAAM,CAACwC,OAAO,eAAeI,OAAAA,IAAW/C,qBAAqB;IAC3DgD,MAAMJ;IACNK,aAAaP;IACbQ,UAAUL;EACZ,CAAA;AACA,QAAMM,gBAAgBhD,OAAawC,IAAAA;AACnC,QAAMS,YAAYhD,oBAAAA;AAElB,QAAMiD,cAAc5B,KAAK6B,WAAW,QAAA,IAAY,eAAe;AAC/D,QAAM9B,SAAS6B,gBAAgB,eAAe,YAAY;AAE1DnD,kBAAgB,MAAA;AACd,QAAI,CAAC4C,UAAUd,SAAS;AACtB;IACF;AAGA,WAAOnC,UAAU;MACfiB,SAASgC,UAAUd;MACnBuB,uBAAuB,CAAC,EAAEC,mBAAkB,MAAE;AAE5C1D,iCAAyB;UAAE0D;QAAmB,CAAA;AAG9CzD,yBAAiB0D,MAAK;MACxB;MACAC,aAAa,MAAA;AACXP,sBAAcnB,UACZmB,cAAcnB,YAAY,gBACtBnB,eAAeiC,UAAUd,SAAUjB,YAAAA,EAAcsC,gBAAgB,eAAe,UAAU,QAAA,IAAY9C,MACtG4C,cAAcnB;AACpBc,kBAAUd,SAASf,QAAQ,IAAImB,cAAAA,GAAiB,GAAGuB,aAAatB,yBAAyB,MAAA;MAC3F;;;MAGAuB,QAAQ,CAAC,EAAErC,SAAQ,MAAE;AACnB,YAAI,OAAO4B,cAAcnB,YAAY,UAAU;AAC7C;QACF;AACAe,gBAAQ1B,YAAY8B,cAAcnB,SAAST,UAAUC,QAAQC,MAAMC,SAASC,OAAAA,CAAAA;MAC9E;MACAkC,QAAQ,CAAC,EAAEtC,SAAQ,MAAE;AACnB,YAAI,OAAO4B,cAAcnB,YAAY,UAAU;AAC7C;QACF;AACA,cAAM8B,WAAWzC,YAAY8B,cAAcnB,SAAST,UAAUC,QAAQC,MAAMC,SAASC,OAAAA;AACrFoB,gBAAQe,QAAAA;AACRjB,uBAAeiB,UAAU,IAAA;AACzBX,sBAAcnB,UAAU8B;AACxBhB,kBAAUd,SAASf,QAAQ,IAAImB,cAAAA,GAAiB,GAAG2B,gBAAgB1B,uBAAAA;MACrE;IACF,CAAA;EACF,GAAG;;IAEDX;IACAC;GACD;AAED,SACE,sBAAA,cAACqC,UAAAA;IACCC,KAAKnB;IACLoB,aAAWzC;IACX0C,WAAW9D,
|
|
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 // Both the grab button (w-4/h-4) and its hover line are centered on the underlying edge: the\n // button is offset by half its size (-2) so it straddles the edge, and the line is centered\n // within the button (start-1/2 / top-1/2) so it sits on the edge too.\n orientation === 'horizontal'\n ? 'cursor-col-resize w-4 inset-y-0 data-[side=inline-end]:-end-2 data-[side=inline-start]:-start-2 border-b-0! before:inset-y-0 before:w-1 before:start-1/2 before:-translate-x-1/2'\n : 'cursor-row-resize h-4 inset-x-0 data-[side=block-end]:-bottom-2 data-[side=block-start]:-top-2 border-x-0! before:inset-x-0 before:h-1 before:top-1/2 before:-translate-y-1/2',\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-focus-ring-subtle',\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
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", "setSize", "prop", "defaultProp", "onChange", "dragStartSize", "elevation", "orientation", "startsWith", "onGenerateDragPreview", "nativeSetDragImage", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "button", "ref", "data-side", "className", "level", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/components/ResizeHandle.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/ResizeHandle.tsx":{"bytes":18580,"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":388,"imports":[{"path":"src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"src/util/sizeStyle.ts":{"bytes":2133,"imports":[],"format":"esm"},"src/util/index.ts":{"bytes":377,"imports":[{"path":"src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"}],"format":"esm"},"src/index.ts":{"bytes":502,"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":10611},"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":4810},"src/index.ts":{"bytesInOutput":0},"src/util/sizeStyle.ts":{"bytesInOutput":368}},"bytes":5334}}}
|
|
@@ -78,10 +78,21 @@ 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(
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
className: mx(
|
|
82
|
+
"group absolute flex focus-visible:outline-hidden",
|
|
83
|
+
surfaceZIndex({
|
|
84
|
+
elevation,
|
|
85
|
+
level: "tooltip"
|
|
86
|
+
}),
|
|
87
|
+
// Both the grab button (w-4/h-4) and its hover line are centered on the underlying edge: the
|
|
88
|
+
// button is offset by half its size (-2) so it straddles the edge, and the line is centered
|
|
89
|
+
// within the button (start-1/2 / top-1/2) so it sits on the edge too.
|
|
90
|
+
orientation === "horizontal" ? "cursor-col-resize w-4 inset-y-0 data-[side=inline-end]:-end-2 data-[side=inline-start]:-start-2 border-b-0! before:inset-y-0 before:w-1 before:start-1/2 before:-translate-x-1/2" : "cursor-row-resize h-4 inset-x-0 data-[side=block-end]:-bottom-2 data-[side=block-start]:-top-2 border-x-0! before:inset-x-0 before:h-1 before:top-1/2 before:-translate-y-1/2",
|
|
91
|
+
orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start",
|
|
92
|
+
"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",
|
|
93
|
+
"before:absolute before:block before:bg-focus-ring-subtle",
|
|
94
|
+
classNames
|
|
95
|
+
)
|
|
85
96
|
});
|
|
86
97
|
};
|
|
87
98
|
|
|
@@ -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('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]
|
|
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,OAAA,IAAW,KAAK,EAAA,CAAA;AAGnH;AAEA,IAAMC,iBAAiB;AACvB,IAAMC,0BAA0B;AAEzB,IAAMC,mBAAmB;EAC9B,CAACF,cAAAA,GAAiB;AACpB;AAcO,IAAMG,eAAe,CAAC,EAC3BC,YACAf,MACAgB,eAAe,SACfC,aACA3B,cACA4B,MAAMC,UACNlB,SACAC,SACAkB,aAAY,MACM;AAClB,QAAMC,YAAY3C,OAA0B,IAAA;AAC5C,QAAM,CAACwC,OAAO,eAAeI,OAAAA,IAAW/C,qBAAqB;IAC3DgD,MAAMJ;IACNK,aAAaP;IACbQ,UAAUL;EACZ,CAAA;AACA,QAAMM,gBAAgBhD,OAAawC,IAAAA;AACnC,QAAMS,YAAYhD,oBAAAA;AAElB,QAAMiD,cAAc5B,KAAK6B,WAAW,QAAA,IAAY,eAAe;AAC/D,QAAM9B,SAAS6B,gBAAgB,eAAe,YAAY;AAE1DnD,kBAAgB,MAAA;AACd,QAAI,CAAC4C,UAAUd,SAAS;AACtB;IACF;AAGA,WAAOnC,UAAU;MACfiB,SAASgC,UAAUd;MACnBuB,uBAAuB,CAAC,EAAEC,mBAAkB,MAAE;AAE5C1D,iCAAyB;UAAE0D;QAAmB,CAAA;AAG9CzD,yBAAiB0D,MAAK;MACxB;MACAC,aAAa,MAAA;AACXP,sBAAcnB,UACZmB,cAAcnB,YAAY,gBACtBnB,eAAeiC,UAAUd,SAAUjB,YAAAA,EAAcsC,gBAAgB,eAAe,UAAU,QAAA,IAAY9C,MACtG4C,cAAcnB;AACpBc,kBAAUd,SAASf,QAAQ,IAAImB,cAAAA,GAAiB,GAAGuB,aAAatB,yBAAyB,MAAA;MAC3F;;;MAGAuB,QAAQ,CAAC,EAAErC,SAAQ,MAAE;AACnB,YAAI,OAAO4B,cAAcnB,YAAY,UAAU;AAC7C;QACF;AACAe,gBAAQ1B,YAAY8B,cAAcnB,SAAST,UAAUC,QAAQC,MAAMC,SAASC,OAAAA,CAAAA;MAC9E;MACAkC,QAAQ,CAAC,EAAEtC,SAAQ,MAAE;AACnB,YAAI,OAAO4B,cAAcnB,YAAY,UAAU;AAC7C;QACF;AACA,cAAM8B,WAAWzC,YAAY8B,cAAcnB,SAAST,UAAUC,QAAQC,MAAMC,SAASC,OAAAA;AACrFoB,gBAAQe,QAAAA;AACRjB,uBAAeiB,UAAU,IAAA;AACzBX,sBAAcnB,UAAU8B;AACxBhB,kBAAUd,SAASf,QAAQ,IAAImB,cAAAA,GAAiB,GAAG2B,gBAAgB1B,uBAAAA;MACrE;IACF,CAAA;EACF,GAAG;;IAEDX;IACAC;GACD;AAED,SACE,sBAAA,cAACqC,UAAAA;IACCC,KAAKnB;IACLoB,aAAWzC;IACX0C,WAAW9D,
|
|
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 // Both the grab button (w-4/h-4) and its hover line are centered on the underlying edge: the\n // button is offset by half its size (-2) so it straddles the edge, and the line is centered\n // within the button (start-1/2 / top-1/2) so it sits on the edge too.\n orientation === 'horizontal'\n ? 'cursor-col-resize w-4 inset-y-0 data-[side=inline-end]:-end-2 data-[side=inline-start]:-start-2 border-b-0! before:inset-y-0 before:w-1 before:start-1/2 before:-translate-x-1/2'\n : 'cursor-row-resize h-4 inset-x-0 data-[side=block-end]:-bottom-2 data-[side=block-start]:-top-2 border-x-0! before:inset-x-0 before:h-1 before:top-1/2 before:-translate-y-1/2',\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-focus-ring-subtle',\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
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", "setSize", "prop", "defaultProp", "onChange", "dragStartSize", "elevation", "orientation", "startsWith", "onGenerateDragPreview", "nativeSetDragImage", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "button", "ref", "data-side", "className", "level", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/components/ResizeHandle.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/ResizeHandle.tsx":{"bytes":18580,"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":388,"imports":[{"path":"src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"src/util/sizeStyle.ts":{"bytes":2133,"imports":[],"format":"esm"},"src/util/index.ts":{"bytes":377,"imports":[{"path":"src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"}],"format":"esm"},"src/index.ts":{"bytes":502,"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":10613},"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":4810},"src/index.ts":{"bytesInOutput":0},"src/util/sizeStyle.ts":{"bytesInOutput":368}},"bytes":5427}}}
|
|
@@ -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,mHAUtB,iBAAiB,
|
|
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,mHAUtB,iBAAiB,sBA0FnB,CAAC"}
|