@dxos/react-ui-dnd 0.8.4-main.84f28bd → 0.8.4-main.ae835ea

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.
@@ -7,25 +7,7 @@ import { useControllableState } from "@radix-ui/react-use-controllable-state";
7
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
-
11
- // src/util/sizeStyle.ts
12
- var sizeStyle = (size, sideOrOrientation, calcSize) => {
13
- let sizeProperty = "inlineSize";
14
- switch (sideOrOrientation) {
15
- case "vertical":
16
- case "block-start":
17
- case "block-end":
18
- sizeProperty = "blockSize";
19
- }
20
- return {
21
- [sizeProperty]: size === "min-content" ? calcSize ? "var(--dx-calc-min)" : "min-content" : `${size}rem`
22
- };
23
- };
24
-
25
- // src/util/rem.ts
26
10
  var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
27
-
28
- // src/components/ResizeHandle.tsx
29
11
  var measureSubject = (element, fallbackSize) => {
30
12
  const stackItemElement = element.closest("[data-dx-resize-subject]");
31
13
  return stackItemElement?.getBoundingClientRect() ?? {
@@ -133,8 +115,21 @@ var DragHandleSignifier = ({ side }) => {
133
115
  _effect.f();
134
116
  }
135
117
  };
118
+
119
+ // src/util/sizeStyle.ts
120
+ var sizeStyle = (size, sideOrOrientation, calcSize) => {
121
+ let sizeProperty = "inlineSize";
122
+ switch (sideOrOrientation) {
123
+ case "vertical":
124
+ case "block-start":
125
+ case "block-end":
126
+ sizeProperty = "blockSize";
127
+ }
128
+ return {
129
+ [sizeProperty]: size === "min-content" ? calcSize ? "var(--dx-calc-min)" : "min-content" : `${size}rem`
130
+ };
131
+ };
136
132
  export {
137
- REM,
138
133
  ResizeHandle,
139
134
  resizeAttributes,
140
135
  sizeStyle
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 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 [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"]
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/react-ui-theme';\n\nimport { type Side, type Size } from '../types';\n\nconst REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n const stackItemElement = element.closest('[data-dx-resize-subject]');\n return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n startSize: number,\n location: DragLocationHistory,\n client: 'clientX' | 'clientY',\n side: Side,\n minSize: number,\n maxSize: number | undefined,\n) => {\n return Math.min(\n maxSize ?? Infinity,\n Math.max(\n minSize,\n startSize +\n ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n ),\n );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n [RESIZE_SUBJECT]: true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n side: Side;\n iconPosition?: 'start' | 'center' | 'end';\n defaultSize?: Size;\n fallbackSize: number;\n size?: Size;\n minSize: number;\n maxSize?: number;\n unit?: 'rem';\n onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n classNames,\n side,\n iconPosition = 'start',\n defaultSize,\n fallbackSize,\n size: _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\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", "_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", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty"]
7
7
  }
@@ -1 +1 @@
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
+ {"inputs":{"src/components/ResizeHandle.tsx":{"bytes":22523,"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}],"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":2174,"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":12481},"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":["ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"src/index.ts","inputs":{"src/components/ResizeHandle.tsx":{"bytesInOutput":6189},"src/components/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0},"src/util/sizeStyle.ts":{"bytesInOutput":355},"src/util/index.ts":{"bytesInOutput":0}},"bytes":6700}}}
@@ -9,25 +9,7 @@ import { useControllableState } from "@radix-ui/react-use-controllable-state";
9
9
  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
-
13
- // src/util/sizeStyle.ts
14
- var sizeStyle = (size, sideOrOrientation, calcSize) => {
15
- let sizeProperty = "inlineSize";
16
- switch (sideOrOrientation) {
17
- case "vertical":
18
- case "block-start":
19
- case "block-end":
20
- sizeProperty = "blockSize";
21
- }
22
- return {
23
- [sizeProperty]: size === "min-content" ? calcSize ? "var(--dx-calc-min)" : "min-content" : `${size}rem`
24
- };
25
- };
26
-
27
- // src/util/rem.ts
28
12
  var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
29
-
30
- // src/components/ResizeHandle.tsx
31
13
  var measureSubject = (element, fallbackSize) => {
32
14
  const stackItemElement = element.closest("[data-dx-resize-subject]");
33
15
  return stackItemElement?.getBoundingClientRect() ?? {
@@ -135,8 +117,21 @@ var DragHandleSignifier = ({ side }) => {
135
117
  _effect.f();
136
118
  }
137
119
  };
120
+
121
+ // src/util/sizeStyle.ts
122
+ var sizeStyle = (size, sideOrOrientation, calcSize) => {
123
+ let sizeProperty = "inlineSize";
124
+ switch (sideOrOrientation) {
125
+ case "vertical":
126
+ case "block-start":
127
+ case "block-end":
128
+ sizeProperty = "blockSize";
129
+ }
130
+ return {
131
+ [sizeProperty]: size === "min-content" ? calcSize ? "var(--dx-calc-min)" : "min-content" : `${size}rem`
132
+ };
133
+ };
138
134
  export {
139
- REM,
140
135
  ResizeHandle,
141
136
  resizeAttributes,
142
137
  sizeStyle
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 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 [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"]
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/react-ui-theme';\n\nimport { type Side, type Size } from '../types';\n\nconst REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n const stackItemElement = element.closest('[data-dx-resize-subject]');\n return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n startSize: number,\n location: DragLocationHistory,\n client: 'clientX' | 'clientY',\n side: Side,\n minSize: number,\n maxSize: number | undefined,\n) => {\n return Math.min(\n maxSize ?? Infinity,\n Math.max(\n minSize,\n startSize +\n ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n ),\n );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n [RESIZE_SUBJECT]: true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n side: Side;\n iconPosition?: 'start' | 'center' | 'end';\n defaultSize?: Size;\n fallbackSize: number;\n size?: Size;\n minSize: number;\n maxSize?: number;\n unit?: 'rem';\n onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n classNames,\n side,\n iconPosition = 'start',\n defaultSize,\n fallbackSize,\n size: _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\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", "_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", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty"]
7
7
  }
@@ -1 +1 @@
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}}}
1
+ {"inputs":{"src/components/ResizeHandle.tsx":{"bytes":22523,"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}],"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":2174,"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":12483},"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":["ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"src/index.ts","inputs":{"src/components/ResizeHandle.tsx":{"bytesInOutput":6189},"src/components/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0},"src/util/sizeStyle.ts":{"bytesInOutput":355},"src/util/index.ts":{"bytesInOutput":0}},"bytes":6793}}}
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { type ThemedClassName } from '@dxos/react-ui';
3
- import { type Size, type Side } from '../types';
3
+ import { type Side, type Size } from '../types';
4
4
  export declare const resizeAttributes: {
5
5
  "data-dx-resize-subject": boolean;
6
6
  };
@@ -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,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"}
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,6GAU1B,iBAAiB,sBAkGnB,CAAC"}
@@ -1,4 +1,4 @@
1
1
  export * from './components';
2
- export * from './types';
2
+ export type * from './types';
3
3
  export * from './util';
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,mBAAmB,SAAS,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
@@ -1,3 +1,2 @@
1
1
  export * from './sizeStyle';
2
- export * from './rem';
3
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"sizeStyle.d.ts","sourceRoot":"","sources":["../../../../src/util/sizeStyle.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC,eAAO,MAAM,SAAS,GACpB,MAAM,IAAI,EACV,mBAAmB,iBAAiB,CAAC,MAAM,CAAC,GAAG,YAAY,GAAG,UAAU,EAExE,WAAW,OAAO;;CAUnB,CAAC"}
1
+ {"version":3,"file":"sizeStyle.d.ts","sourceRoot":"","sources":["../../../../src/util/sizeStyle.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC,eAAO,MAAM,SAAS,GACpB,MAAM,IAAI,EACV,mBAAmB,iBAAiB,CAAC,MAAM,CAAC,GAAG,YAAY,GAAG,UAAU,EAExE,WAAW,OAAO;;CAanB,CAAC"}