@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-STTQ5LXX.js

@@ -0,0 +1,153 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/utils/overlay.ts
+var _react = require('react');
+var _reactdom = require('react-dom');
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+function useClickOutside({
+  enabled,
+  refs,
+  onOutsideClick,
+  defer = false
+}) {
+  _react.useEffect.call(void 0, () => {
+    if (!enabled) return;
+    const handler = (event) => {
+      const elements = refs.map((ref) => _optionalChain([ref, 'optionalAccess', _ => _.current]));
+      if (_tigercatcore.isEventOutside.call(void 0, event, elements)) {
+        onOutsideClick();
+      }
+    };
+    const attach = () => document.addEventListener("click", handler);
+    const detach = () => document.removeEventListener("click", handler);
+    if (!defer) {
+      attach();
+      return () => detach();
+    }
+    const timer = window.setTimeout(() => attach(), 0);
+    return () => {
+      window.clearTimeout(timer);
+      detach();
+    };
+  }, [enabled, refs, onOutsideClick, defer]);
+}
+function useEscapeKey({ enabled, onEscape }) {
+  _react.useEffect.call(void 0, () => {
+    if (!enabled) return;
+    const handler = (event) => {
+      if (event.defaultPrevented) return;
+      if (!_tigercatcore.isEscapeKey.call(void 0, event)) return;
+      onEscape();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [enabled, onEscape]);
+}
+function useBodyScrollLock({ enabled }) {
+  _react.useEffect.call(void 0, () => {
+    if (!enabled) return;
+    return _tigercatcore.lockBodyScroll.call(void 0, );
+  }, [enabled]);
+}
+function renderBodyPortal(node) {
+  if (!_tigercatcore.isBrowser.call(void 0, )) return null;
+  return _reactdom.createPortal.call(void 0, node, document.body);
+}
+function useFocusTrap({ enabled, containerRef }) {
+  _react.useEffect.call(void 0, () => {
+    const container = containerRef.current;
+    if (!enabled || !container) return;
+    const handler = (event) => {
+      const focusables = _tigercatcore.getFocusableElements.call(void 0, container);
+      const activeElement = _nullishCoalesce(_optionalChain([container, 'access', _2 => _2.ownerDocument, 'optionalAccess', _3 => _3.activeElement]), () => ( document.activeElement));
+      const nav = _tigercatcore.getFocusTrapNavigation.call(void 0, event, focusables, activeElement);
+      if (!nav.shouldHandle || !nav.next) return;
+      event.preventDefault();
+      nav.next.focus();
+    };
+    container.addEventListener("keydown", handler);
+    return () => container.removeEventListener("keydown", handler);
+  }, [enabled, containerRef]);
+}
+function useFloating(options) {
+  const {
+    referenceRef,
+    floatingRef,
+    enabled,
+    placement: initialPlacement = "bottom",
+    offset: offsetDistance = 8,
+    arrowRef,
+    onPlacementChange
+  } = options;
+  const [x, setX] = _react.useState.call(void 0, 0);
+  const [y, setY] = _react.useState.call(void 0, 0);
+  const [placement, setPlacement] = _react.useState.call(void 0, initialPlacement);
+  const [arrowX, setArrowX] = _react.useState.call(void 0, void 0);
+  const [arrowY, setArrowY] = _react.useState.call(void 0, void 0);
+  const onPlacementChangeRef = _react.useRef.call(void 0, onPlacementChange);
+  onPlacementChangeRef.current = onPlacementChange;
+  const update = _react.useCallback.call(void 0, async () => {
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    if (!reference || !floating) return;
+    const floatingOptions = {
+      placement: initialPlacement,
+      offset: offsetDistance,
+      flip: true,
+      shift: true,
+      arrowElement: _optionalChain([arrowRef, 'optionalAccess', _4 => _4.current])
+    };
+    const result = await _tigercatcore.computeFloatingPosition.call(void 0, 
+      reference,
+      floating,
+      floatingOptions
+    );
+    setX(result.x);
+    setY(result.y);
+    setPlacement((prev) => {
+      if (prev !== result.placement) {
+        _optionalChain([onPlacementChangeRef, 'access', _5 => _5.current, 'optionalCall', _6 => _6(result.placement)]);
+        return result.placement;
+      }
+      return prev;
+    });
+    if (result.arrow) {
+      setArrowX(result.arrow.x);
+      setArrowY(result.arrow.y);
+    }
+  }, [referenceRef, floatingRef, initialPlacement, offsetDistance, arrowRef]);
+  _react.useEffect.call(void 0, () => {
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    if (!enabled || !reference || !floating) return;
+    update();
+    const cleanup = _tigercatcore.autoUpdateFloating.call(void 0, reference, floating, update);
+    return () => {
+      cleanup();
+    };
+  }, [enabled, referenceRef, floatingRef, update]);
+  return {
+    x,
+    y,
+    placement,
+    arrowX,
+    arrowY,
+    update
+  };
+}
+
+
+
+
+
+
+
+
+exports.useClickOutside = useClickOutside; exports.useEscapeKey = useEscapeKey; exports.useBodyScrollLock = useBodyScrollLock; exports.renderBodyPortal = renderBodyPortal; exports.useFocusTrap = useFocusTrap; exports.useFloating = useFloating;

package/dist/{chunk-2EOXY2LP.mjs → chunk-SY23FAXK.mjs}

@@ -1,8 +1,29 @@
-import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo } from 'react';
-import { getInitialCropRect, cropCanvas, classNames, imageCropperContainerClasses, CROP_HANDLES, imageCropperImgClasses, imageCropperMaskClasses, imageCropperSelectionClasses, imageCropperDragAreaClasses, imageCropperGuideClasses, getCropperHandleClasses, moveCropRect, resizeCropRect } from '@expcat/tigercat-core';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
 // src/components/ImageCropper.tsx
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+  useImperativeHandle,
+  forwardRef
+} from "react";
+import {
+  classNames,
+  imageCropperContainerClasses,
+  imageCropperImgClasses,
+  imageCropperMaskClasses,
+  imageCropperSelectionClasses,
+  imageCropperGuideClasses,
+  imageCropperDragAreaClasses,
+  getCropperHandleClasses,
+  CROP_HANDLES,
+  getInitialCropRect,
+  resizeCropRect,
+  moveCropRect,
+  cropCanvas
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ImageCropper = forwardRef(
   ({
     src,
@@ -174,6 +195,65 @@ var ImageCropper = forwardRef(
       },
       [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
     );
+    const updateCropRect = useCallback(
+      (nextRect) => {
+        setCropRect(nextRect);
+        onCropChange?.(nextRect);
+      },
+      [onCropChange]
+    );
+    const handleMoveKeyDown = useCallback(
+      (e) => {
+        const step = e.shiftKey ? 10 : 1;
+        const deltas = {
+          ArrowLeft: { dx: -step, dy: 0 },
+          ArrowRight: { dx: step, dy: 0 },
+          ArrowUp: { dx: 0, dy: -step },
+          ArrowDown: { dx: 0, dy: step }
+        };
+        const delta = deltas[e.key];
+        if (!delta) return;
+        e.preventDefault();
+        updateCropRect(
+          moveCropRect(
+            cropRect,
+            delta.dx,
+            delta.dy,
+            displayDimsRef.current.w,
+            displayDimsRef.current.h
+          )
+        );
+      },
+      [cropRect, updateCropRect]
+    );
+    const handleResizeKeyDown = useCallback(
+      (e, handle) => {
+        const step = e.shiftKey ? 10 : 1;
+        const deltas = {
+          ArrowLeft: { dx: -step, dy: 0 },
+          ArrowRight: { dx: step, dy: 0 },
+          ArrowUp: { dx: 0, dy: -step },
+          ArrowDown: { dx: 0, dy: step }
+        };
+        const delta = deltas[e.key];
+        if (!delta) return;
+        e.preventDefault();
+        updateCropRect(
+          resizeCropRect(
+            cropRect,
+            handle,
+            delta.dx,
+            delta.dy,
+            displayDimsRef.current.w,
+            displayDimsRef.current.h,
+            aspectRatio,
+            minWidth,
+            minHeight
+          )
+        );
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, updateCropRect]
+    );
     const containerClasses = useMemo(
       () => classNames(imageCropperContainerClasses, className),
       [className]
@@ -262,8 +342,12 @@ var ImageCropper = forwardRef(
                 width: `${cr.width}px`,
                 height: `${cr.height}px`
               },
+              role: "button",
+              tabIndex: 0,
+              "aria-label": "Move crop area",
               onMouseDown: (e) => handleMouseDown(e, "move"),
-              onTouchStart: (e) => handleTouchStart(e, "move")
+              onTouchStart: (e) => handleTouchStart(e, "move"),
+              onKeyDown: handleMoveKeyDown
             }
           ),
           guides && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -271,6 +355,7 @@ var ImageCropper = forwardRef(
               "div",
               {
                 className: imageCropperGuideClasses,
+                "data-guide": "true",
                 style: {
                   left: `${cr.x}px`,
                   top: `${cr.y + cr.height / 3}px`,
@@ -285,6 +370,7 @@ var ImageCropper = forwardRef(
               "div",
               {
                 className: imageCropperGuideClasses,
+                "data-guide": "true",
                 style: {
                   left: `${cr.x}px`,
                   top: `${cr.y + cr.height * 2 / 3}px`,
@@ -299,6 +385,7 @@ var ImageCropper = forwardRef(
               "div",
               {
                 className: imageCropperGuideClasses,
+                "data-guide": "true",
                 style: {
                   left: `${cr.x + cr.width / 3}px`,
                   top: `${cr.y}px`,
@@ -313,6 +400,7 @@ var ImageCropper = forwardRef(
               "div",
               {
                 className: imageCropperGuideClasses,
+                "data-guide": "true",
                 style: {
                   left: `${cr.x + cr.width * 2 / 3}px`,
                   top: `${cr.y}px`,
@@ -337,8 +425,12 @@ var ImageCropper = forwardRef(
               {
                 className: getCropperHandleClasses(handle),
                 style: pos,
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Resize crop area ${handle}`,
                 onMouseDown: (e) => handleMouseDown(e, "resize", handle),
-                onTouchStart: (e) => handleTouchStart(e, "resize", handle)
+                onTouchStart: (e) => handleTouchStart(e, "resize", handle),
+                onKeyDown: (e) => handleResizeKeyDown(e, handle)
               },
               handle
             );
@@ -350,4 +442,6 @@ var ImageCropper = forwardRef(
 );
 ImageCropper.displayName = "ImageCropper";
 
-export { ImageCropper };
+export {
+  ImageCropper
+};