@expcat/tigercat-react 1.1.0 → 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-CCDZLSOL.mjs → chunk-SY23FAXK.mjs}

@@ -1,8 +1,29 @@
-import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo } from 'react';
-import { getInitialCropRect, cropCanvas, moveCropRect, resizeCropRect, classNames, imageCropperContainerClasses, CROP_HANDLES, imageCropperImgClasses, imageCropperMaskClasses, imageCropperSelectionClasses, imageCropperDragAreaClasses, imageCropperGuideClasses, getCropperHandleClasses } 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,
@@ -334,6 +355,7 @@ var ImageCropper = forwardRef(
               "div",
               {
                 className: imageCropperGuideClasses,
+                "data-guide": "true",
                 style: {
                   left: `${cr.x}px`,
                   top: `${cr.y + cr.height / 3}px`,
@@ -348,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`,
@@ -362,6 +385,7 @@ var ImageCropper = forwardRef(
               "div",
               {
                 className: imageCropperGuideClasses,
+                "data-guide": "true",
                 style: {
                   left: `${cr.x + cr.width / 3}px`,
                   top: `${cr.y}px`,
@@ -376,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`,
@@ -417,4 +442,6 @@ var ImageCropper = forwardRef(
 );
 ImageCropper.displayName = "ImageCropper";
 
-export { ImageCropper };
+export {
+  ImageCropper
+};