@salt-ds/core 1.73.0 → 1.74.0

package/dist-es/drawer/internal/DrawerResizeGuide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerResizeGuide.js","sources":["../src/drawer/internal/DrawerResizeGuide.tsx"],"sourcesContent":["import { FloatingPortal } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { makePrefixer } from \"../../utils\";\nimport type { DrawerProps } from \"../Drawer\";\nimport drawerResizeGuideCss from \"./DrawerResizeGuide.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerResizeGuide\");\n\nexport interface DrawerResizeGuideProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  position: NonNullable<DrawerProps[\"position\"]>;\n}\n\n/** Covers the viewport while placing the edge by click, so the click doesn't reach the content. */\nexport const DrawerResizeGuide = forwardRef<\n  HTMLDivElement,\n  DrawerResizeGuideProps\n>(function DrawerResizeGuide(props, ref) {\n  const { position, className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer-resize-guide\",\n    css: drawerResizeGuideCss,\n    window: targetWindow,\n  });\n\n  const { themeNext } = useTheme();\n  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n  const vertical = position === \"left\" || position === \"right\";\n\n  return (\n    <FloatingPortal>\n      <ChosenSaltProvider applyClassesTo=\"scope\">\n        <div\n          ref={ref}\n          aria-hidden\n          className={clsx(\n            withBaseName(),\n            withBaseName(vertical ? \"vertical\" : \"horizontal\"),\n            className,\n          )}\n          {...rest}\n        />\n      </ChosenSaltProvider>\n    </FloatingPortal>\n  );\n});\n"],"names":["DrawerResizeGuide","drawerResizeGuideCss"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AAQlD,MAAM,iBAAA,GAAoB,UAAA,CAG/B,SAASA,kBAAAA,CAAkB,OAAO,GAAA,EAAK;AACvC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEzC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,0BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,QAAA,EAAS;AAC/B,EAAA,MAAM,kBAAA,GAAqB,YAAY,gBAAA,GAAmB,YAAA;AAE1D,EAAA,MAAM,QAAA,GAAW,QAAA,KAAa,MAAA,IAAU,QAAA,KAAa,OAAA;AAErD,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,gBAAe,OAAA,EACjC,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,QAAA,GAAW,UAAA,GAAa,YAAY,CAAA;AAAA,QACjD;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,KAER,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/drawer/internal/DrawerResizeHandle.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to root element */\n.saltDrawerResizeHandle {\n  --drawerResizeHandle-thumbSize: max(var(--salt-size-icon, 12px), 12px);\n  --drawerResizeHandle-thumbImage: url(\"data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3Cpath%20d%3D%22M5%2011V9H7V11H5Z%22%20%2F%3E%3Cpath%20d%3D%22M5%207L5%205H7L7%207H5Z%22%20%2F%3E%3Cpath%20d%3D%22M5%201V3H7V1L5%201Z%22%20%2F%3E%3C%2Fsvg%3E\");\n  --drawerResizeHandle-background: transparent;\n  --drawerResizeHandle-background-hover: var(--salt-separable-background-hover);\n  --drawerResizeHandle-background-active: var(--salt-separable-background-active);\n  --drawerResizeHandle-dot-background: var(--salt-separable-foreground);\n  --drawerResizeHandle-dot-background-hover: var(--salt-separable-foreground-hover);\n  --drawerResizeHandle-dot-background-active: var(--salt-separable-foreground-active);\n  /* The outset is equal on both sides, strip sits centred in the hit target. */\n  --drawerResizeHandle-targetSize: calc(var(--drawer-resizeHandleSize) + 2 * var(--drawer-resizeHandleOutset));\n\n  position: absolute;\n  z-index: 1;\n  touch-action: none;\n}\n\n/* Styles applied to the visible strip (::before) and its thumb (::after) */\n.saltDrawerResizeHandle::before,\n.saltDrawerResizeHandle::after {\n  content: \"\";\n  position: absolute;\n  inset: var(--drawerResizeHandle-stripInset);\n}\n\n.saltDrawerResizeHandle::before {\n  background: var(--drawerResizeHandle-background);\n}\n\n.saltDrawerResizeHandle::after {\n  background: var(--drawerResizeHandle-dot-background);\n  mask-image: var(--drawerResizeHandle-thumbImage);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: var(--drawerResizeHandle-thumbSize);\n  -webkit-mask-image: var(--drawerResizeHandle-thumbImage);\n  -webkit-mask-position: center;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-size: var(--drawerResizeHandle-thumbSize);\n}\n\n.saltDrawerResizeHandle-left,\n.saltDrawerResizeHandle-right {\n  --drawerResizeHandle-stripInset: 0 var(--drawer-resizeHandleOutset);\n  top: 0;\n  bottom: 0;\n  width: var(--drawerResizeHandle-targetSize);\n}\n\n.saltDrawerResizeHandle-left {\n  right: calc(-1 * var(--drawer-resizeHandleOutset));\n}\n\n.saltDrawerResizeHandle-right {\n  left: calc(-1 * var(--drawer-resizeHandleOutset));\n}\n\n.saltDrawerResizeHandle-top,\n.saltDrawerResizeHandle-bottom {\n  --drawerResizeHandle-thumbImage: url(\"data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3Cpath%20d%3D%22M1%205H3V7H1Z%22%20%2F%3E%3Cpath%20d%3D%22M5%205H7V7H5Z%22%20%2F%3E%3Cpath%20d%3D%22M9%205H11V7H9Z%22%20%2F%3E%3C%2Fsvg%3E\");\n  --drawerResizeHandle-stripInset: var(--drawer-resizeHandleOutset) 0;\n  left: 0;\n  right: 0;\n  height: var(--drawerResizeHandle-targetSize);\n}\n\n.saltDrawerResizeHandle-top {\n  bottom: calc(-1 * var(--drawer-resizeHandleOutset));\n}\n\n.saltDrawerResizeHandle-bottom {\n  top: calc(-1 * var(--drawer-resizeHandleOutset));\n}\n\n.saltDrawerResizeHandle-hovered {\n  --drawerResizeHandle-background: var(--drawerResizeHandle-background-hover);\n  --drawerResizeHandle-dot-background: var(--drawerResizeHandle-dot-background-hover);\n}\n\n.saltDrawerResizeHandle.saltDrawerResizeHandle-resizing {\n  --drawerResizeHandle-background: var(--drawerResizeHandle-background-active);\n  --drawerResizeHandle-dot-background: var(--drawerResizeHandle-dot-background-active);\n}\n\n.saltDrawerResizeHandle:focus-visible {\n  outline: none;\n}\n\n.saltDrawerResizeHandle:focus-visible::before {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DrawerResizeHandle.css.js.map

package/dist-es/drawer/internal/DrawerResizeHandle.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerResizeHandle.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/drawer/internal/DrawerResizeHandle.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../../utils/makePrefixer.js';
+import '../../utils/useFloatingUI/useFloatingUI.js';
+import '../../utils/useId.js';
+import '../../salt-provider/SaltProvider.js';
+import '../../viewport/ViewportProvider.js';
+import css_248z from './DrawerResizeHandle.css.js';
+
+const withBaseName = makePrefixer("saltDrawerResizeHandle");
+const DrawerResizeHandle = forwardRef(function DrawerResizeHandle2(props, ref) {
+  const { position, resizing, hovered, className, ...rest } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-drawer-resize-handle",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        withBaseName(),
+        withBaseName(position),
+        {
+          [withBaseName("resizing")]: resizing,
+          [withBaseName("hovered")]: hovered
+        },
+        className
+      ),
+      ...rest
+    }
+  );
+});
+
+export { DrawerResizeHandle };
+//# sourceMappingURL=DrawerResizeHandle.js.map

package/dist-es/drawer/internal/DrawerResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerResizeHandle.js","sources":["../src/drawer/internal/DrawerResizeHandle.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../../utils\";\nimport type { DrawerProps } from \"../Drawer\";\nimport drawerResizeHandleCss from \"./DrawerResizeHandle.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerResizeHandle\");\n\nexport interface DrawerResizeHandleProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  position: NonNullable<DrawerProps[\"position\"]>;\n  resizing?: boolean;\n  hovered?: boolean;\n}\n\nexport const DrawerResizeHandle = forwardRef<\n  HTMLDivElement,\n  DrawerResizeHandleProps\n>(function DrawerResizeHandle(props, ref) {\n  const { position, resizing, hovered, className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer-resize-handle\",\n    css: drawerResizeHandleCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(position),\n        {\n          [withBaseName(\"resizing\")]: resizing,\n          [withBaseName(\"hovered\")]: hovered,\n        },\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n"],"names":["DrawerResizeHandle","drawerResizeHandleCss"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA;AASnD,MAAM,kBAAA,GAAqB,UAAA,CAGhC,SAASA,mBAAAA,CAAmB,OAAO,GAAA,EAAK;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,QAAA,EAAU,SAAS,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,2BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,QAAQ,CAAA;AAAA,QACrB;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,SAC7B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/dist-es/drawer/internal/useDrawerResize.js

@@ -0,0 +1,517 @@
+import { useWindow } from '@salt-ds/window';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import 'clsx';
+import 'react/jsx-runtime';
+import { useEventCallback } from '../../utils/useEventCallback.js';
+import '../../utils/useFloatingUI/useFloatingUI.js';
+import '../../utils/useId.js';
+import { useIsomorphicLayoutEffect } from '../../utils/useIsomorphicLayoutEffect.js';
+import '../../salt-provider/SaltProvider.js';
+import '../../viewport/ViewportProvider.js';
+
+const KEYBOARD_STEP = 8;
+const PROBE_SIZE = 1e6;
+const CLICK_THRESHOLD = 4;
+const isElement = (target) => target !== null && target.nodeType === 1;
+const focusWithoutRing = (element) => element == null ? void 0 : element.focus({
+  preventScroll: true,
+  focusVisible: false
+});
+const setDocumentCursor = (ownerDocument, cursor) => {
+  const view = ownerDocument.defaultView;
+  if (!view || !ownerDocument.adoptedStyleSheets) return void 0;
+  const sheet = new view.CSSStyleSheet();
+  sheet.replaceSync(`*, *:hover { cursor: ${cursor} !important; }`);
+  ownerDocument.adoptedStyleSheets = [
+    ...ownerDocument.adoptedStyleSheets,
+    sheet
+  ];
+  return () => {
+    ownerDocument.adoptedStyleSheets = ownerDocument.adoptedStyleSheets.filter(
+      (adopted) => adopted !== sheet
+    );
+  };
+};
+const isHorizontal = (position) => position === "left" || position === "right";
+const growsWithCoordinate = (position) => position === "left" || position === "top";
+const measure = (element, horizontal) => {
+  const { width, height } = element.getBoundingClientRect();
+  return horizontal ? width : height;
+};
+const restoreStyle = (style, property, value, priority) => {
+  if (value) {
+    style.setProperty(property, value, priority);
+  } else {
+    style.removeProperty(property);
+  }
+};
+const probeBounds = (element, horizontal) => {
+  const property = horizontal ? "width" : "height";
+  const { style } = element;
+  const previousValue = style.getPropertyValue(property);
+  const previousPriority = style.getPropertyPriority(property);
+  const previousTransition = style.getPropertyValue("transition-property");
+  const previousTransitionPriority = style.getPropertyPriority(
+    "transition-property"
+  );
+  style.setProperty("transition-property", "none", "important");
+  style.setProperty(property, "0px", "important");
+  const min = measure(element, horizontal);
+  style.setProperty(property, `${PROBE_SIZE}px`, "important");
+  const max = measure(element, horizontal);
+  restoreStyle(style, property, previousValue, previousPriority);
+  measure(element, horizontal);
+  restoreStyle(
+    style,
+    "transition-property",
+    previousTransition,
+    previousTransitionPriority
+  );
+  return { min, max: Math.max(min, max) };
+};
+const clamp = (value, { min, max }) => Math.min(Math.max(value, min), max);
+const sizeFromPoint = (rect, position, { clientX: x, clientY: y }) => {
+  switch (position) {
+    case "left":
+      return x - rect.left;
+    case "right":
+      return rect.right - x;
+    case "top":
+      return y - rect.top;
+    case "bottom":
+      return rect.bottom - y;
+  }
+};
+const edgeFromSize = (rect, position, size) => {
+  switch (position) {
+    case "left":
+      return rect.left + size;
+    case "right":
+      return rect.right - size;
+    case "top":
+      return rect.top + size;
+    case "bottom":
+      return rect.bottom - size;
+  }
+};
+function useDrawerResize({
+  enabled,
+  position,
+  element
+}) {
+  const horizontal = isHorizontal(position);
+  const targetWindow = useWindow();
+  const [sizeState, setSizeState] = useState(void 0);
+  const [sizeAxisHorizontal, setSizeAxisHorizontal] = useState(horizontal);
+  const size = enabled && sizeAxisHorizontal === horizontal ? sizeState : void 0;
+  const [interaction, setInteraction] = useState("inactive");
+  const [metrics, setMetrics] = useState(
+    null
+  );
+  const dragRef = useRef(null);
+  const placingRef = useRef(null);
+  const handleRef = useRef(null);
+  const guideRef = useRef(null);
+  const cancelResizeEventRef = useRef(null);
+  const restoreSizeRef = useRef(null);
+  const initialSizeRef = useRef(null);
+  const axisRef = useRef(horizontal);
+  const boundsRef = useRef(null);
+  const readMetrics = useEventCallback((reuseBounds = false) => {
+    if (!element) return null;
+    const bounds = reuseBounds && boundsRef.current ? boundsRef.current : probeBounds(element, horizontal);
+    boundsRef.current = bounds;
+    const current = clamp(measure(element, horizontal), bounds);
+    const next = { ...bounds, current };
+    setMetrics(next);
+    return next;
+  });
+  const applySize = (nextSize) => {
+    setSizeState(nextSize);
+    setSizeAxisHorizontal(horizontal);
+  };
+  const isOverHandle = ({
+    clientX: x,
+    clientY: y
+  }) => {
+    var _a;
+    const rect = (_a = handleRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    return rect !== void 0 && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+  };
+  const isHandle = useEventCallback(
+    (target) => {
+      var _a;
+      return enabled && isElement(target) && ((_a = handleRef.current) == null ? void 0 : _a.contains(target)) === true;
+    }
+  );
+  const startDrag = useEventCallback((event) => {
+    const current = readMetrics();
+    if (!current) return;
+    event.preventDefault();
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      originSize: current.current,
+      previousSize: current.current,
+      cancelSize: size,
+      min: current.min,
+      max: current.max,
+      moved: false
+    };
+    focusWithoutRing(handleRef.current);
+    setInteraction("active");
+  });
+  const moveDrag = useEventCallback((event, drag) => {
+    var _a;
+    if (!drag.moved) {
+      if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < CLICK_THRESHOLD) {
+        return;
+      }
+      drag.moved = true;
+      try {
+        (_a = handleRef.current) == null ? void 0 : _a.setPointerCapture(event.pointerId);
+      } catch {
+      }
+    }
+    const coordinate = horizontal ? event.clientX : event.clientY;
+    const origin = horizontal ? drag.startX : drag.startY;
+    const direction = growsWithCoordinate(position) ? 1 : -1;
+    const nextSize = clamp(
+      drag.originSize + (coordinate - origin) * direction,
+      drag
+    );
+    if (nextSize !== drag.previousSize) {
+      drag.previousSize = nextSize;
+      applySize(nextSize);
+    }
+  });
+  const moveGuide = (offset) => {
+    var _a;
+    const placing = placingRef.current;
+    if (!placing) return;
+    placing.guideOffset = offset;
+    (_a = guideRef.current) == null ? void 0 : _a.style.setProperty(
+      "--drawerResizeGuide-offset",
+      `${offset}px`
+    );
+  };
+  const setGuide = useCallback((node) => {
+    guideRef.current = node;
+    const placing = placingRef.current;
+    if (node && placing) {
+      node.style.setProperty(
+        "--drawerResizeGuide-offset",
+        `${placing.guideOffset}px`
+      );
+    }
+  }, []);
+  const startPlacing = useEventCallback((drag) => {
+    if (!element) return;
+    placingRef.current = {
+      min: drag.min,
+      max: drag.max,
+      guideOffset: edgeFromSize(
+        element.getBoundingClientRect(),
+        position,
+        drag.originSize
+      ),
+      pressed: false
+    };
+    setInteraction("placing");
+  });
+  const stopPlacing = useEventCallback(() => {
+    if (!placingRef.current) return;
+    placingRef.current = null;
+    setInteraction("inactive");
+  });
+  const endDrag = useEventCallback((event) => {
+    var _a;
+    const drag = dragRef.current;
+    if (!drag) return;
+    dragRef.current = null;
+    const pointer = event;
+    const stillHovered = "pointerType" in event && pointer.pointerType !== "touch" && isHandle(
+      ((_a = handleRef.current) == null ? void 0 : _a.ownerDocument.elementFromPoint(
+        pointer.clientX,
+        pointer.clientY
+      )) ?? null
+    );
+    setInteraction(stillHovered ? "hover" : "inactive");
+  });
+  const cancelDrag = useEventCallback((event) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    const handle = handleRef.current;
+    if (handle == null ? void 0 : handle.hasPointerCapture(drag.pointerId)) {
+      handle.releasePointerCapture(drag.pointerId);
+    }
+    setSizeState(drag.cancelSize);
+    endDrag(event);
+  });
+  const sizeToPlace = (target, rect, point, bounds) => clamp(
+    isOverHandle(point) ? measure(target, horizontal) : sizeFromPoint(rect, position, point),
+    bounds
+  );
+  const moveGuideToPointer = (event) => {
+    const placing = placingRef.current;
+    if (!placing || !element) return;
+    const rect = element.getBoundingClientRect();
+    moveGuide(
+      edgeFromSize(rect, position, sizeToPlace(element, rect, event, placing))
+    );
+  };
+  const onGuidePointerDown = useEventCallback(
+    (event) => {
+      const placing = placingRef.current;
+      if (!placing) return;
+      if (event.pointerType === "mouse" && event.button > 0) {
+        stopPlacing();
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      placing.pressed = true;
+      moveGuideToPointer(event);
+    }
+  );
+  const onGuidePointerMove = useEventCallback(
+    (event) => {
+      moveGuideToPointer(event);
+    }
+  );
+  const onGuideClick = useEventCallback(
+    (event) => {
+      const placing = placingRef.current;
+      if (!(placing == null ? void 0 : placing.pressed) || !element) return;
+      event.stopPropagation();
+      stopPlacing();
+      const rect = element.getBoundingClientRect();
+      const nextSize = sizeToPlace(element, rect, event, placing);
+      const current = clamp(measure(element, horizontal), placing);
+      if (nextSize !== current) {
+        applySize(nextSize);
+      }
+      focusWithoutRing(handleRef.current);
+    }
+  );
+  useEffect(() => {
+    if (!enabled || !element || !targetWindow) return;
+    const ownerDocument = targetWindow.document;
+    const onPointerDown = (event) => {
+      if (event.defaultPrevented || !event.isPrimary) return;
+      if (event.pointerType === "mouse" && event.button > 0) return;
+      if (placingRef.current || dragRef.current || !isHandle(event.target)) {
+        return;
+      }
+      startDrag(event);
+    };
+    const onPointerMove = (event) => {
+      if (event.defaultPrevented) return;
+      if (placingRef.current) return;
+      const drag = dragRef.current;
+      if (!drag) {
+        if (event.pointerType !== "touch") {
+          setInteraction(isHandle(event.target) ? "hover" : "inactive");
+        }
+        return;
+      }
+      if (event.pointerId !== drag.pointerId) return;
+      if (event.buttons === 0) {
+        endDrag(event);
+        return;
+      }
+      moveDrag(event, drag);
+    };
+    const onPointerUp = (event) => {
+      if (event.defaultPrevented) return;
+      if (event.pointerType === "mouse" && event.button > 0) return;
+      const drag = dragRef.current;
+      if ((drag == null ? void 0 : drag.pointerId) !== event.pointerId) return;
+      event.preventDefault();
+      if (!drag.moved) {
+        dragRef.current = null;
+        startPlacing(drag);
+        return;
+      }
+      endDrag(event);
+    };
+    const onPointerCancel = (event) => {
+      var _a;
+      if (((_a = dragRef.current) == null ? void 0 : _a.pointerId) === event.pointerId) endDrag(event);
+    };
+    const onContextMenu = (event) => {
+      if (!event.defaultPrevented) endDrag(event);
+    };
+    const onKeyDown2 = (event) => {
+      if (event.key !== "Escape" || !dragRef.current) return;
+      event.preventDefault();
+      cancelResizeEventRef.current = event;
+      cancelDrag(event);
+    };
+    const onBlur = (event) => {
+      endDrag(event);
+      stopPlacing();
+    };
+    const onPointerOut = (event) => {
+      if (!dragRef.current && isElement(event.relatedTarget) && event.relatedTarget.tagName === "IFRAME") {
+        setInteraction("inactive");
+      }
+    };
+    ownerDocument.addEventListener("pointerdown", onPointerDown, true);
+    ownerDocument.addEventListener("pointermove", onPointerMove);
+    ownerDocument.addEventListener("pointerup", onPointerUp, true);
+    ownerDocument.addEventListener("pointercancel", onPointerCancel);
+    ownerDocument.addEventListener("contextmenu", onContextMenu, true);
+    ownerDocument.addEventListener("keydown", onKeyDown2, true);
+    ownerDocument.addEventListener("pointerout", onPointerOut);
+    targetWindow.addEventListener("blur", onBlur);
+    return () => {
+      ownerDocument.removeEventListener("pointerdown", onPointerDown, true);
+      ownerDocument.removeEventListener("pointermove", onPointerMove);
+      ownerDocument.removeEventListener("pointerup", onPointerUp, true);
+      ownerDocument.removeEventListener("pointercancel", onPointerCancel);
+      ownerDocument.removeEventListener("contextmenu", onContextMenu, true);
+      ownerDocument.removeEventListener("keydown", onKeyDown2, true);
+      ownerDocument.removeEventListener("pointerout", onPointerOut);
+      targetWindow.removeEventListener("blur", onBlur);
+      dragRef.current = null;
+      placingRef.current = null;
+      setInteraction("inactive");
+    };
+  }, [
+    enabled,
+    element,
+    targetWindow,
+    isHandle,
+    startDrag,
+    moveDrag,
+    endDrag,
+    cancelDrag,
+    startPlacing,
+    stopPlacing
+  ]);
+  const showResizeCursor = interaction !== "inactive";
+  useEffect(() => {
+    if (!showResizeCursor || !targetWindow) return;
+    return setDocumentCursor(
+      targetWindow.document,
+      horizontal ? "var(--salt-cursor-drag-ew, ew-resize)" : "var(--salt-cursor-drag-ns, ns-resize)"
+    );
+  }, [showResizeCursor, targetWindow, horizontal]);
+  const onKeyDown = useEventCallback(
+    (event) => {
+      const { key } = event;
+      if (placingRef.current) {
+        stopPlacing();
+        if (key === "Escape") {
+          event.preventDefault();
+          cancelResizeEventRef.current = event.nativeEvent;
+          return;
+        }
+      }
+      const resizeKeys = horizontal ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+      if (!resizeKeys.includes(key) && key !== "Home" && key !== "End" && key !== "Enter") {
+        return;
+      }
+      const current = readMetrics(true);
+      if (!current) return;
+      event.preventDefault();
+      const collapsed = current.current <= current.min + 1;
+      let nextSize;
+      if (key === "Home") {
+        if (!collapsed) {
+          restoreSizeRef.current = current.current;
+        }
+        nextSize = current.min;
+      } else if (key === "End") {
+        nextSize = current.max;
+      } else if (key === "Enter") {
+        if (collapsed) {
+          nextSize = restoreSizeRef.current ?? initialSizeRef.current ?? current.max;
+        } else {
+          restoreSizeRef.current = current.current;
+          nextSize = current.min;
+        }
+      } else {
+        const towardsHigherCoordinate = key === "ArrowRight" || key === "ArrowDown";
+        const direction = towardsHigherCoordinate === growsWithCoordinate(position) ? 1 : -1;
+        nextSize = current.current + KEYBOARD_STEP * direction;
+      }
+      nextSize = clamp(nextSize, current);
+      if (nextSize === current.current) return;
+      applySize(nextSize);
+    }
+  );
+  const isCancelResizeEvent = useCallback(
+    (event) => event !== void 0 && event === cancelResizeEventRef.current,
+    []
+  );
+  const onFocus = useCallback(() => {
+    if (!dragRef.current) readMetrics();
+  }, [readMetrics]);
+  const setHandle = useCallback((node) => {
+    handleRef.current = node;
+  }, []);
+  useEffect(() => {
+    if (!enabled) {
+      setSizeState(void 0);
+      setMetrics(null);
+      restoreSizeRef.current = null;
+      initialSizeRef.current = null;
+    }
+  }, [enabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled || !element) return;
+    if (axisRef.current !== horizontal) {
+      axisRef.current = horizontal;
+      restoreSizeRef.current = null;
+      initialSizeRef.current = null;
+    }
+    const next = readMetrics();
+    if (next && initialSizeRef.current === null) {
+      initialSizeRef.current = next.current;
+    }
+  }, [enabled, element, horizontal, readMetrics]);
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled || !element) return;
+    readMetrics(true);
+  }, [enabled, element, size, readMetrics]);
+  useEffect(() => {
+    if (!enabled || !element || !targetWindow) return;
+    const onResize = () => {
+      stopPlacing();
+      readMetrics();
+    };
+    targetWindow.addEventListener("resize", onResize);
+    return () => targetWindow.removeEventListener("resize", onResize);
+  }, [enabled, element, targetWindow, readMetrics, stopPlacing]);
+  return {
+    sizeStyle: size !== void 0 ? { [horizontal ? "width" : "height"]: size } : void 0,
+    isResizing: interaction === "active" || interaction === "placing",
+    isHovered: interaction === "hover",
+    isPlacing: interaction === "placing",
+    isCancelResizeEvent,
+    separatorProps: {
+      role: "separator",
+      tabIndex: 0,
+      ref: setHandle,
+      "aria-orientation": horizontal ? "vertical" : "horizontal",
+      "aria-valuenow": metrics ? Math.round(metrics.current) : void 0,
+      "aria-valuemin": metrics ? Math.round(metrics.min) : void 0,
+      "aria-valuemax": metrics ? Math.round(metrics.max) : void 0,
+      onKeyDown,
+      onFocus
+    },
+    guideProps: {
+      ref: setGuide,
+      onPointerDown: onGuidePointerDown,
+      onPointerMove: onGuidePointerMove,
+      onClick: onGuideClick,
+      onContextMenu: stopPlacing
+    }
+  };
+}
+
+export { useDrawerResize };
+//# sourceMappingURL=useDrawerResize.js.map