@astryxdesign/core 0.7.7-canary.f9ac85f → 0.7.7

package/dist/Resizable/ResizeHandle.js

@@ -22,31 +22,27 @@
  * (a value below the minimum is invalid per WCAG 4.1.2) and a localized
  * "Collapsed" aria-valuetext announces the real state.
  *
- * Dragging takes pointer capture on the grab zone, so the rest of the gesture
- * is delivered to that element instead of being hit-tested against whatever
- * the cursor happens to be over. A resizable region that contains an embedded
- * frame otherwise loses the drag the moment the cursor crosses the frame: the
- * events go to the guest document, and a listener on the host window never
- * hears them again. Captured events are delivered to the capturing element,
- * so the move/up/cancel handlers live on the grab zone (as in Slider), not on
- * window.
+ * The handle's input (the pointer drag, the keys, the double-click) is
+ * resizeGesture.ts. ResizeHandle forwards its React events to it, over the
+ * region its `resizable` prop describes. A drag takes pointer capture on the grab zone.
+ * The gesture's move, up and cancel events then go there, as in Slider, even
+ * over an embedded frame.
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { devWarn } from "../utils/devWarning.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { mergeProps, rtlStyles } from "../utils/index.js";
 import { getCollapseControls, getEffectiveMaxPx } from "./useResizable.js";
+import { createResizeGesture } from "./resizeGesture.js";
 import { themeProps } from "../utils/themeProps.js";
+import { useDevWarning } from "../hooks/useDevWarning.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Resizable/ResizeHandle.generated.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 registerEnglishFallback(english);
-const KEYBOARD_STEP = 10;
-const KEYBOARD_LARGE_STEP = 50;
 function resolveEffectiveSide(pillPlacement, isReversed, isCollapsed) {
   if (pillPlacement !== 'auto') {
     return pillPlacement;
@@ -79,20 +75,6 @@ function hitAreaBiasDir(effectiveSide) {
   }
   return effectiveSide === 'start' ? -1 : 1;
 }
-
-/**
- * Drag feedback lives on `<body>`, not on the handle: the pointer spends the
- * drag off the handle, over whatever the panels contain, and the resize cursor
- * has to hold there. Module scope so the writes stay outside the component.
- */
-function applyBodyDragStyles(isHorizontal) {
-  document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
-  document.body.style.userSelect = 'none';
-}
-function clearBodyDragStyles() {
-  document.body.style.cursor = '';
-  document.body.style.userSelect = '';
-}
 const styles = {
   handle: {
     kVAEAm: "x1n2onr6",
@@ -266,45 +248,6 @@ const dynamicStyles = {
     "--x-transform": `translate(-50%, calc(${dir} * (100% + ${spacingVars['--spacing-1']})))` != null ? `translate(-50%, calc(${dir} * (100% + ${spacingVars['--spacing-1']})))` : undefined
   }]
 };
-/**
- * The snap point `count` points away from the region's current size in
- * `direction` (+1 grows, -1 shrinks). A point beyond `minSize` or `maxSize`
- * counts as that bound; the nearest end point serves when fewer remain, and
- * the current size when it is already there.
- */
-function adjacentSnapPoint(resizable, direction, count) {
-  const points = [...new Set(resizable._snaps.map(p => Math.min(resizable._maxSizePx, Math.max(resizable._minSizePx, p))))].sort((a, b) => a - b);
-  const size = resizable._size;
-  const ahead = direction > 0 ? points.filter(p => p > size) : points.filter(p => p < size).reverse();
-  if (ahead.length === 0) {
-    return size;
-  }
-  return ahead[Math.min(count, ahead.length) - 1];
-}
-
-/**
- * Collapse an open pane, or restore a collapsed one to the size it had before
- * it collapsed (APG window splitter: Enter "restores the splitter to its
- * previous position"). The hook's own collapse/expand do exactly that; a
- * hand-built `ResizableProps` (no registered controls) falls back to a resize
- * gesture to the minimum, which also cannot reopen a pane whose minimum sits below its
- * collapse threshold.
- */
-function toggleCollapse(resizable) {
-  const controls = getCollapseControls(resizable);
-  if (controls) {
-    if (resizable._isCollapsed) {
-      controls.expand();
-    } else {
-      controls.collapse();
-    }
-    return;
-  }
-  resizable._onResizeStart();
-  resizable._onResizeMove(resizable._isCollapsed ? resizable._minSizePx : -resizable._size);
-  resizable._onResizeEnd();
-}
-
 /**
  * Draggable resize handle placed between resizable panels. Renders as a thin
  * divider line with a wider invisible hit area and optional pill grip indicator.
@@ -340,220 +283,125 @@ export function ResizeHandle({
   const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.resizable.handle.label');
   const handleRef = useRef(null);
-  // The pointer that owns the in-flight drag, plus the values its deltas are
-  // measured against. A ref so moves don't re-render, and so unmount can tell
-  // a live drag from a finished one.
-  const dragRef = useRef(null);
-  const [isDragging, setIsDragging] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const isHorizontal = direction === 'horizontal';
   const isOverlay = positionMode === 'overlay';
-  const sign = isReversed ? -1 : 1;
-  const effectiveSide = resolveEffectiveSide(pillPlacement, isReversed, resizable?._isCollapsed ?? false);
+
+  // --- The region a `resizable` prop describes ---
+
+  // The gesture reads the latest props at each input. A drag sees the region
+  // as it is now, not as it was at the press.
+  const resizableRef = useRef(resizable);
+  resizableRef.current = resizable;
+  // The region a drag in flight started on: told the gesture is over even
+  // after the prop has gone.
+  const dragRegionRef = useRef(undefined);
+  const configRef = useRef({
+    direction,
+    isReversed,
+    isDisabled
+  });
+  configRef.current = {
+    direction,
+    isReversed,
+    isDisabled
+  };
+  const [isDragging, setIsDragging] = useState(false);
+  const [regionGesture] = useState(() => {
+    const model = {
+      state() {
+        const region = resizableRef.current;
+        return {
+          size: region?._size ?? 0,
+          isCollapsed: region?._isCollapsed ?? false,
+          minPx: region?._minSizePx ?? 0,
+          maxPx: region?._maxSizePx ?? Infinity,
+          snaps: region?._snaps ?? [],
+          collapsedSize: region?._collapsedSize ?? 0,
+          collapsible: region?._collapsible ?? false
+        };
+      },
+      start: () => {
+        dragRegionRef.current = resizableRef.current;
+        resizableRef.current?._onResizeStart();
+      },
+      move: delta => resizableRef.current?._onResizeMove(delta),
+      end: () => {
+        const region = resizableRef.current ?? dragRegionRef.current;
+        dragRegionRef.current = undefined;
+        region?._onResizeEnd();
+      },
+      // Not a resize end, but the gesture is over. The region froze its state
+      // for the drag, so it must hear that the drag ended.
+      cancel: () => {
+        const region = resizableRef.current ?? dragRegionRef.current;
+        dragRegionRef.current = undefined;
+        region?._onResizeCancel?.();
+      },
+      // The hook's own collapse and expand restore the size before the
+      // collapse; a hand-built `ResizableProps` has none.
+      get collapse() {
+        const region = resizableRef.current;
+        return region ? getCollapseControls(region)?.collapse : undefined;
+      },
+      get expand() {
+        const region = resizableRef.current;
+        return region ? getCollapseControls(region)?.expand : undefined;
+      }
+    };
+    return createResizeGesture(() => handleRef.current, model, () => ({
+      ...configRef.current,
+      isDisabled: configRef.current.isDisabled || resizableRef.current == null
+    }), setIsDragging);
+  });
+  const gesture = resizable != null ? regionGesture : null;
+  const isCollapsed = resizable?._isCollapsed ?? false;
+  const effectiveSide = resolveEffectiveSide(pillPlacement, isReversed, isCollapsed);
   // Physical offset direction shared by the pill and the grab zone (null =
   // centered / no bias). Keeps the two positioned identically in LTR and RTL.
   const hitBiasDir = hitAreaBiasDir(effectiveSide);
-  const getRTLMultiplier = useCallback(() => {
-    const el = handleRef.current;
-    if (!el) {
-      return 1;
-    }
-    return getComputedStyle(el).direction === 'rtl' ? -1 : 1;
-  }, []);
   const isInteracting = isHovered || isFocused;
 
-  // A handle whose axis disagrees with its hook drags along one axis while the
-  // hook measures percentage bounds on the other. `ResizableProps` is exported,
-  // so `_direction` is optional for old hand-built objects; absent means there
-  // is no hook axis to compare, not that the hook is horizontal.
-  const didWarnAxisRef = useRef(false);
-  useEffect(() => {
-    const hookDirection = resizable?._direction;
-    if (hookDirection != null && hookDirection !== direction && !didWarnAxisRef.current) {
-      didWarnAxisRef.current = true;
-      devWarn('ResizeHandle', `direction="${direction}" but its useResizable region is ` + `"${hookDirection}". They must match: the hook measures one axis ` + 'and the handle drags the other.');
-    }
-  }, [direction, resizable]);
-
-  // --- Pointer drag ---
-  const clearDrag = useCallback(() => {
-    dragRef.current = null;
-    setIsDragging(false);
-    clearBodyDragStyles();
-  }, []);
-  const handlePointerDown = useCallback(e => {
-    if (isDisabled || !resizable || dragRef.current) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    // Take the pointer for the whole gesture. Without capture the browser
-    // re-hit-tests every move, so a frame anywhere under the drag path
-    // swallows the rest of it into the guest document.
-    e.currentTarget.setPointerCapture?.(e.pointerId);
-    dragRef.current = {
-      pointerId: e.pointerId,
-      startPos: isHorizontal ? e.clientX : e.clientY,
-      rtl: isHorizontal ? getRTLMultiplier() : 1
-    };
-    setIsDragging(true);
-    resizable._onResizeStart();
-    applyBodyDragStyles(isHorizontal);
-  }, [isDisabled, resizable, isHorizontal, getRTLMultiplier]);
-  const handlePointerMove = useCallback(e => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== e.pointerId || !resizable) {
-      return;
-    }
-    const currentPos = isHorizontal ? e.clientX : e.clientY;
-    resizable._onResizeMove((currentPos - drag.startPos) * drag.rtl * sign);
-  }, [resizable, isHorizontal, sign]);
-  const handlePointerUp = useCallback(e => {
-    if (dragRef.current?.pointerId !== e.pointerId) {
-      return;
-    }
-    clearDrag();
-    resizable?._onResizeEnd();
-  }, [clearDrag, resizable]);
+  // A handle whose axis disagrees with its region drags along one axis while
+  // the region measures percentage bounds on the other. `ResizableProps` is
+  // exported, so `_direction` is optional for old hand-built objects. Without
+  // it there is no axis to compare.
+  const regionDirection = resizable?._direction;
+  useDevWarning('ResizeHandle', `direction="${direction}" but its useResizable region is ` + `"${regionDirection}". They must match: the hook measures one axis ` + 'and the handle drags the other.', regionDirection != null && regionDirection !== direction);
 
-  // Serves pointercancel and lostpointercapture alike: an interrupted drag
-  // ends without signalling a resize end. lostpointercapture also fires on the
-  // implicit release after every pointerup/pointercancel, by which point the
-  // drag is already cleared and this is a no-op.
-  const cancelDrag = useCallback(e => {
-    if (dragRef.current?.pointerId !== e.pointerId) {
-      return;
-    }
-    clearDrag();
-    // Not a resize end, but still the end of the gesture: the region froze
-    // state for the duration of the drag and has to be told it is over.
-    resizable?._onResizeCancel?.();
-  }, [clearDrag, resizable]);
-
-  // --- Keyboard ---
-  const handleKeyDown = useCallback(e => {
-    if (isDisabled || !resizable) {
-      return;
-    }
-    const step = e.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
-    const rtl = isHorizontal ? getRTLMultiplier() : 1;
+  // --- Cleanup on unmount, or when the `resizable` prop goes ---
 
-    // The pane's grow direction on this key: ArrowRight/Down grow unless the
-    // layout is reversed or, on the inline axis, right-to-left.
-    const grows = key => (key === 'ArrowRight' || key === 'ArrowDown' ? 1 : key === 'ArrowLeft' || key === 'ArrowUp' ? -1 : 0) * (isHorizontal ? rtl : 1) * sign > 0;
-    switch (e.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        {
-          e.preventDefault();
-          if (resizable._isCollapsed) {
-            // A collapsed pane answers only the grow arrow: it opens one step
-            // above its minimum, the value the separator announces while
-            // collapsed, or at the collapse threshold when that is larger (APG
-            // window splitter: the arrow moves the separator from where it is;
-            // a bare step would stay below the threshold and leave it in
-            // place). The shrink arrow is a no-op.
-            if (grows(e.key)) {
-              resizable._onResizeStart();
-              // At least the collapse threshold, or the move would stay
-              // collapsed when the minimum sits below it.
-              resizable._onResizeMove(Math.max(resizable._minSizePx + step, resizable._collapsedSize));
-              resizable._onResizeEnd();
-            }
-            break;
-          }
-          if (resizable._snaps.length > 0) {
-            // With snap points the region can rest only on a point, so a
-            // pixel step would snap straight back; the arrow moves to the
-            // adjacent point in its direction instead (Shift, two points),
-            // staying within the bounds.
-            resizable._onResizeStart();
-            resizable._onResizeMove(adjacentSnapPoint(resizable, grows(e.key) ? 1 : -1, e.shiftKey ? 2 : 1) - resizable._size);
-            resizable._onResizeEnd();
-            break;
-          }
-          const direction = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : -1;
-          resizable._onResizeStart();
-          resizable._onResizeMove(direction * step * (isHorizontal ? rtl : 1) * sign);
-          resizable._onResizeEnd();
-          break;
-        }
-      case 'Home':
-        {
-          e.preventDefault();
-          resizable._onResizeStart();
-          resizable._onResizeMove(resizable._minSizePx - resizable._size);
-          resizable._onResizeEnd();
-          break;
-        }
-      case 'End':
-        {
-          e.preventDefault();
-          // Only a configured maximum is the region's own limit; the reported
-          // stand-in for an unbounded region is where the pane *could* reach,
-          // not where End may safely move it (a recorded gap).
-          if (resizable._maxSizePx !== Infinity) {
-            resizable._onResizeStart();
-            resizable._onResizeMove(resizable._maxSizePx - resizable._size);
-            resizable._onResizeEnd();
-          }
-          break;
-        }
-      case 'Enter':
-        {
-          e.preventDefault();
-          if (resizable._collapsible) {
-            toggleCollapse(resizable);
-          }
-          break;
-        }
-    }
-  }, [isDisabled, resizable, isHorizontal, getRTLMultiplier, sign]);
-
-  // --- Double-click collapse ---
-  const handleDoubleClick = useCallback(() => {
-    if (isDisabled || !resizable || !resizable._collapsible) {
-      return;
-    }
-    toggleCollapse(resizable);
-  }, [isDisabled, resizable]);
-
-  // --- Cleanup on unmount ---
-  // Removing the grab zone implicitly releases its captured pointer and takes
-  // its listeners with it, so an in-flight drag stops driving the region on
-  // its own. The body cursor/user-select overrides are not on the element,
-  // though, so they have to be released here or they stick after the handle
-  // is gone — and the region, which outlives this handle, still has to hear
+  // Removing the grab zone releases its captured pointer and its listeners.
+  // A `resizable` prop that goes away takes the grab zone's handlers too. The
+  // body's cursor and user-select overrides are not on the element, so they
+  // are released here. The region outlives this handle and still has to hear
   // that its gesture is over.
-  const cancelOnUnmountRef = useRef(undefined);
-  cancelOnUnmountRef.current = resizable?._onResizeCancel;
+  const hasRegion = resizable != null;
   useEffect(() => {
+    if (!hasRegion) {
+      return;
+    }
     return () => {
-      if (dragRef.current) {
-        dragRef.current = null;
-        clearBodyDragStyles();
-        cancelOnUnmountRef.current?.();
-      }
+      regionGesture.interrupt();
     };
-  }, []);
+  }, [hasRegion, regionGesture]);
 
   // --- ARIA ---
   // When collapsed the panel's real size (0) sits below aria-valuemin, which
   // is invalid per WCAG 4.1.2. Clamp aria-valuenow to the minimum and announce
   // the true state via aria-valuetext instead; the valuetext is removed as
   // soon as the panel expands so the numeric value reads again.
-  const isCollapsed = resizable?._isCollapsed ?? false;
-  const ariaValueNow = resizable ? isCollapsed ? Math.max(resizable._size, resizable._minSizePx) : resizable._size : undefined;
-  const ariaValueMin = resizable ? resizable._minSizePx : undefined;
+  const sizeNow = resizable?._size;
+  const minNow = resizable?._minSizePx;
+  const ariaValueNow = sizeNow == null || minNow == null ? undefined : isCollapsed ? Math.max(sizeNow, minNow) : sizeNow;
+  const ariaValueMin = minNow;
   // A separator with a value needs a maximum (WAI-ARIA, APG window splitter).
   // Unbounded regions report the basis they can fill; a hand-built props
   // object without it reports only a configured maximum.
   const effectiveMax = resizable ? getEffectiveMaxPx(resizable) ?? (resizable._maxSizePx !== Infinity ? resizable._maxSizePx : undefined) : undefined;
   const ariaValueMax = effectiveMax != null && Number.isFinite(effectiveMax) ? effectiveMax : undefined;
-  const ariaValueText = resizable && isCollapsed ? t('@astryx.resizable.collapsed') : undefined;
+  const ariaValueText = resizable != null && isCollapsed ? t('@astryx.resizable.collapsed') : undefined;
   return /*#__PURE__*/_jsxs("div", {
     ref: useMergedRefs(ref, handleRef),
     role: "separator",
@@ -565,7 +413,11 @@ export function ResizeHandle({
     "aria-label": label,
     "aria-disabled": isDisabled || undefined,
     tabIndex: isDisabled ? -1 : 0,
-    onDoubleClick: handleDoubleClick,
+    onDoubleClick: () => {
+      if (!isDisabled) {
+        gesture?.doubleClick();
+      }
+    },
     onFocus: () => setIsFocused(true),
     onBlur: () => setIsFocused(false),
     "data-resizing": isDragging || undefined,
@@ -578,7 +430,9 @@ export function ResizeHandle({
     // this accessibility-critical handler can't be clobbered by a passed prop.
     onKeyDown: e => {
       props.onKeyDown?.(e);
-      handleKeyDown(e);
+      if (!isDisabled) {
+        gesture?.keyDown(e);
+      }
     },
     children: [/*#__PURE__*/_jsx("div", {
       ...stylex.props(styles.hitArea, isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical,
@@ -587,11 +441,15 @@ export function ResizeHandle({
       // it's offset to a panel side, reuse the pill's physical-offset
       // construction so the two stay aligned in LTR and RTL alike.
       hitBiasDir == null ? isHorizontal ? rtlStyles.centerInline('0px') : styles.hitAreaCenteredY : isHorizontal ? dynamicStyles.hitAreaOffsetX(hitBiasDir) : dynamicStyles.hitAreaOffsetY(hitBiasDir), isDisabled && styles.disabled),
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerCancel: cancelDrag,
-      onLostPointerCapture: cancelDrag,
+      onPointerDown: e => {
+        if (!isDisabled) {
+          gesture?.pointerDown(e);
+        }
+      },
+      onPointerMove: e => gesture?.pointerMove(e),
+      onPointerUp: e => gesture?.pointerUp(e),
+      onPointerCancel: e => gesture?.pointerCancel(e),
+      onLostPointerCapture: e => gesture?.pointerCancel(e),
       onPointerEnter: () => setIsHovered(true),
       onPointerLeave: () => {
         if (!isDragging) {

package/dist/Resizable/resizeGesture.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @file resizeGesture.ts
+ * @input A handle element, a resize model (its state, and a gesture's start,
+ *   move, end and cancel), and the handle's axis, reversal and disabled state
+ * @output createResizeGesture: the window splitter's input in one place: a
+ *   pointer drag that holds its pointer, the arrow keys, Home, End and Enter,
+ *   and a double-click collapse; and the body's drag cursor
+ * @position Internal to the Resizable family. ResizeHandle forwards its React
+ *   events to it. No React, and no DOM work on import
+ */
+import type { ResizableDirection } from './resizableModel.js';
+/** Pixels an arrow key moves the separator; Shift moves it further. */
+export declare const KEYBOARD_STEP = 10;
+export declare const KEYBOARD_LARGE_STEP = 50;
+/** What a gesture reads from its region when an input arrives. */
+export interface ResizeGestureState {
+    /** The region's size in px, 0 while collapsed. */
+    readonly size: number;
+    readonly isCollapsed: boolean;
+    readonly minPx: number;
+    /** The configured maximum, Infinity when the region has none. */
+    readonly maxPx: number;
+    readonly snaps: ReadonlyArray<number>;
+    readonly collapsedSize: number;
+    readonly collapsible: boolean;
+}
+/** The region a gesture resizes. */
+export interface ResizeGestureModel {
+    state(): ResizeGestureState;
+    /** A gesture begins: the region holds its basis until it ends. */
+    start(): void;
+    /** The gesture has moved `delta` px from where it began. */
+    move(delta: number): void;
+    /** The gesture ends as completed. */
+    end(): void;
+    /** The gesture ends without completing. */
+    cancel(): void;
+    /**
+     * The region's own collapse and expand. They restore the size it had before
+     * it collapsed, as the APG window splitter's Enter does. Without them a
+     * toggle is a resize gesture to the minimum.
+     */
+    collapse?: () => void;
+    expand?: () => void;
+}
+/** The handle's configuration, read at each input. */
+export interface ResizeGestureConfig {
+    readonly direction: ResizableDirection;
+    readonly isReversed: boolean;
+    readonly isDisabled: boolean;
+}
+/** The fields of a pointer event the gesture reads (native or React). */
+export interface ResizeGesturePointerEvent {
+    readonly pointerId: number;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly currentTarget: EventTarget | null;
+    preventDefault(): void;
+    stopPropagation(): void;
+}
+/** The fields of a key event the gesture reads (native or React). */
+export interface ResizeGestureKeyEvent {
+    readonly key: string;
+    readonly shiftKey: boolean;
+    preventDefault(): void;
+}
+export interface ResizeGesture {
+    pointerDown(event: ResizeGesturePointerEvent): void;
+    pointerMove(event: ResizeGesturePointerEvent): void;
+    pointerUp(event: ResizeGesturePointerEvent): void;
+    /** A `pointercancel` or a `lostpointercapture`. */
+    pointerCancel(event: ResizeGesturePointerEvent): void;
+    keyDown(event: ResizeGestureKeyEvent): void;
+    doubleClick(): void;
+    /** Whether a pointer drag is in flight. */
+    readonly isDragging: boolean;
+    /**
+     * Ends a drag in flight as cancelled, for a handle that goes away mid-drag.
+     * It releases the pointer and the body's drag cursor, and tells the region
+     * that the gesture is over.
+     */
+    interrupt(): void;
+}
+/**
+ * The window splitter's input for one handle. A drag takes pointer capture
+ * on the element the press landed on. The rest of the gesture then goes to
+ * that element. Without capture, the browser hit-tests each move, and an
+ * embedded frame under the pointer takes the drag.
+ */
+export declare function createResizeGesture(getHandle: () => Element | null, model: ResizeGestureModel, getConfig: () => ResizeGestureConfig, onDraggingChange?: (isDragging: boolean) => void): ResizeGesture;
+//# sourceMappingURL=resizeGesture.d.ts.map

package/dist/Resizable/resizeGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizeGesture.d.ts","sourceRoot":"","sources":["../../src/Resizable/resizeGesture.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAEzD,uEAAuE;AACvE,eAAO,MAAM,aAAa,KAAK,CAAC;AAChC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,kEAAkE;AAClE,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,iEAAiE;IACjE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;CAC/B;AAED,oCAAoC;AACpC,MAAM,WAAW,kBAAkB;IACjC,KAAK,IAAI,kBAAkB,CAAC;IAC5B,kEAAkE;IAClE,KAAK,IAAI,IAAI,CAAC;IACd,4DAA4D;IAC5D,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,qCAAqC;IACrC,GAAG,IAAI,IAAI,CAAC;IACZ,2CAA2C;IAC3C,MAAM,IAAI,IAAI,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,sDAAsD;AACtD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;CAC9B;AAED,yEAAyE;AACzE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3C,cAAc,IAAI,IAAI,CAAC;IACvB,eAAe,IAAI,IAAI,CAAC;CACzB;AAED,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,cAAc,IAAI,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC;IACpD,WAAW,CAAC,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC;IACpD,SAAS,CAAC,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAClD,mDAAmD;IACnD,aAAa,CAAC,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC;IACtD,OAAO,CAAC,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAC5C,WAAW,IAAI,IAAI,CAAC;IACpB,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,SAAS,IAAI,IAAI,CAAC;CACnB;AAqED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,MAAM,OAAO,GAAG,IAAI,EAC/B,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,MAAM,mBAAmB,EACpC,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,GAC/C,aAAa,CAmMf"}