@expcat/tigercat-react 1.1.0 → 1.2.14

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-SXHP4Q7O.js

@@ -0,0 +1,317 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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; }
+
+var _chunk56ZV3VVYjs = require('./chunk-56ZV3VVY.js');
+
+
+
+
+
+var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
+
+// src/components/Modal.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var Modal = ({
+  open = false,
+  size = "md",
+  width,
+  title,
+  titleContent,
+  closable = true,
+  mask = true,
+  maskClosable = true,
+  centered = false,
+  mobileSheet = false,
+  destroyOnClose = false,
+  zIndex = 1e3,
+  className,
+  children,
+  footer,
+  onOpenChange,
+  onClose,
+  onCancel,
+  onOk,
+  closeAriaLabel,
+  showDefaultFooter = false,
+  okText,
+  cancelText,
+  locale,
+  style,
+  draggable: isDraggable = false,
+  ...rest
+}) => {
+  const [hasBeenOpened, setHasBeenOpened] = _react2.default.useState(open);
+  const [dragOffset, setDragOffset] = _react2.default.useState({ x: 0, y: 0 });
+  _react.useEffect.call(void 0, () => {
+    if (open) {
+      setHasBeenOpened(true);
+    } else {
+      setDragOffset({ x: 0, y: 0 });
+    }
+  }, [open]);
+  const handleDragMouseDown = _react.useCallback.call(void 0, 
+    (e) => {
+      if (!isDraggable) return;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      let offsetX = dragOffset.x;
+      let offsetY = dragOffset.y;
+      const onMouseMove = (ev) => {
+        offsetX = dragOffset.x + (ev.clientX - startX);
+        offsetY = dragOffset.y + (ev.clientY - startY);
+        setDragOffset({ x: offsetX, y: offsetY });
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    },
+    [isDraggable, dragOffset]
+  );
+  _react.useEffect.call(void 0, () => {
+    _optionalChain([onOpenChange, 'optionalCall', _ => _(open)]);
+    if (!open && onClose) {
+      onClose();
+    }
+  }, [open, onOpenChange, onClose]);
+  const shouldRender = destroyOnClose ? open : hasBeenOpened;
+  const handleClose = _react.useCallback.call(void 0, () => {
+    _optionalChain([onCancel, 'optionalCall', _2 => _2()]);
+    _optionalChain([onOpenChange, 'optionalCall', _3 => _3(false)]);
+  }, [onCancel, onOpenChange]);
+  const handleOk = _react.useCallback.call(void 0, () => {
+    _optionalChain([onOk, 'optionalCall', _4 => _4()]);
+    _optionalChain([onOpenChange, 'optionalCall', _5 => _5(false)]);
+  }, [onOk, onOpenChange]);
+  const handleMaskClick = _react.useCallback.call(void 0, 
+    (event) => {
+      if (_tigercatcore.shouldCloseOnMaskClick.call(void 0, event, maskClosable)) {
+        handleClose();
+      }
+    },
+    [maskClosable, handleClose]
+  );
+  const contentClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getModalContentClasses.call(void 0, size, className, mobileSheet),
+    [size, className, mobileSheet]
+  );
+  const containerClasses = _react.useMemo.call(void 0, () => _tigercatcore.getModalContainerClasses.call(void 0, centered), [centered]);
+  const resolvedCloseAriaLabel = _tigercatcore.resolveLocaleText.call(void 0, 
+    "Close",
+    closeAriaLabel,
+    _optionalChain([locale, 'optionalAccess', _6 => _6.modal, 'optionalAccess', _7 => _7.closeAriaLabel]),
+    _optionalChain([locale, 'optionalAccess', _8 => _8.common, 'optionalAccess', _9 => _9.closeText])
+  );
+  const resolvedCancelText = _tigercatcore.resolveLocaleText.call(void 0, 
+    "\u53D6\u6D88",
+    cancelText,
+    _optionalChain([locale, 'optionalAccess', _10 => _10.modal, 'optionalAccess', _11 => _11.cancelText]),
+    _optionalChain([locale, 'optionalAccess', _12 => _12.common, 'optionalAccess', _13 => _13.cancelText])
+  );
+  const resolvedOkText = _tigercatcore.resolveLocaleText.call(void 0, 
+    "\u786E\u5B9A",
+    okText,
+    _optionalChain([locale, 'optionalAccess', _14 => _14.modal, 'optionalAccess', _15 => _15.okText]),
+    _optionalChain([locale, 'optionalAccess', _16 => _16.common, 'optionalAccess', _17 => _17.okText])
+  );
+  const reactId = _react.useId.call(void 0, );
+  const modalId = _react.useMemo.call(void 0, () => `tiger-modal-${reactId}`, [reactId]);
+  const titleId = `${modalId}-title`;
+  const {
+    ["aria-labelledby"]: _ariaLabelledby,
+    role: _role,
+    tabIndex: _tabIndex,
+    ...dialogDivProps
+  } = rest;
+  const ariaLabelledby = _nullishCoalesce(rest["aria-labelledby"], () => ( (title || titleContent ? titleId : void 0)));
+  const dialogRef = _react.useRef.call(void 0, null);
+  const closeButtonRef = _react.useRef.call(void 0, null);
+  const previousActiveElementRef = _react.useRef.call(void 0, null);
+  const touchStartRef = _react.useRef.call(void 0, null);
+  const touchCurrentRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (open) {
+      previousActiveElementRef.current = _tigercatcore.captureActiveElement.call(void 0, );
+      const timer = setTimeout(() => {
+        _tigercatcore.focusFirst.call(void 0, [closeButtonRef.current, dialogRef.current]);
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+    _tigercatcore.restoreFocus.call(void 0, previousActiveElementRef.current);
+  }, [open]);
+  _chunkSTTQ5LXXjs.useEscapeKey.call(void 0, { enabled: open, onEscape: handleClose });
+  _chunkSTTQ5LXXjs.useBodyScrollLock.call(void 0, { enabled: open });
+  _chunkSTTQ5LXXjs.useFocusTrap.call(void 0, { enabled: open, containerRef: dialogRef });
+  const resetTouchGesture = _react.useCallback.call(void 0, () => {
+    touchStartRef.current = null;
+    touchCurrentRef.current = null;
+  }, []);
+  const handleTouchStart = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([dialogDivProps, 'access', _18 => _18.onTouchStart, 'optionalCall', _19 => _19(event)]);
+      if (!open || !mobileSheet) return;
+      const point = _tigercatcore.getGestureTouchPoint.call(void 0, event.touches);
+      touchStartRef.current = point;
+      touchCurrentRef.current = point;
+    },
+    [dialogDivProps, mobileSheet, open]
+  );
+  const handleTouchMove = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([dialogDivProps, 'access', _20 => _20.onTouchMove, 'optionalCall', _21 => _21(event)]);
+      if (!touchStartRef.current) return;
+      const point = _tigercatcore.getGestureTouchPoint.call(void 0, event.touches);
+      if (point) {
+        touchCurrentRef.current = point;
+      }
+    },
+    [dialogDivProps]
+  );
+  const handleTouchEnd = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([dialogDivProps, 'access', _22 => _22.onTouchEnd, 'optionalCall', _23 => _23(event)]);
+      const gesture = _tigercatcore.resolveSwipeGesture.call(void 0, 
+        touchStartRef.current,
+        _nullishCoalesce(_tigercatcore.getGestureTouchPoint.call(void 0, event.changedTouches), () => ( touchCurrentRef.current)),
+        { minDistance: 48, minVelocity: 0.15 }
+      );
+      resetTouchGesture();
+      if (mobileSheet && _tigercatcore.isModalSheetSwipeCloseGesture.call(void 0, gesture)) {
+        handleClose();
+      }
+    },
+    [dialogDivProps, handleClose, mobileSheet, resetTouchGesture]
+  );
+  const handleTouchCancel = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([dialogDivProps, 'access', _24 => _24.onTouchCancel, 'optionalCall', _25 => _25(event)]);
+      resetTouchGesture();
+    },
+    [dialogDivProps, resetTouchGesture]
+  );
+  const CloseIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      className: "h-5 w-5",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: _tigercatcore.closeIconViewBox,
+      stroke: "currentColor",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          strokeLinecap: _tigercatcore.closeIconPathStrokeLinecap,
+          strokeLinejoin: _tigercatcore.closeIconPathStrokeLinejoin,
+          strokeWidth: _tigercatcore.closeIconPathStrokeWidth,
+          d: _tigercatcore.closeIconPathD
+        }
+      )
+    }
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  const modalContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _tigercatcore.classNames.call(void 0, _tigercatcore.modalWrapperClasses, !open && "pointer-events-none"),
+      style: { zIndex },
+      hidden: !open,
+      "aria-hidden": !open ? "true" : void 0,
+      "data-tiger-modal-root": "",
+      children: [
+        mask && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _tigercatcore.classNames.call(void 0, _tigercatcore.modalMaskClasses, open ? "opacity-100" : "opacity-0"),
+            "aria-hidden": "true",
+            "data-tiger-modal-mask": ""
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: containerClasses, onClick: handleMaskClick, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            className: contentClasses,
+            style: {
+              ...style,
+              ...width ? { width: typeof width === "number" ? `${width}px` : width, maxWidth: "100%" } : void 0,
+              ...isDraggable && (dragOffset.x !== 0 || dragOffset.y !== 0) ? { transform: `translate(${dragOffset.x}px, ${dragOffset.y}px)` } : void 0
+            },
+            ...dialogDivProps,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": ariaLabelledby,
+            tabIndex: -1,
+            ref: dialogRef,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            onTouchCancel: handleTouchCancel,
+            "data-tiger-modal": "",
+            children: [
+              (title || titleContent || closable) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "div",
+                {
+                  className: _tigercatcore.modalHeaderClasses,
+                  onMouseDown: isDraggable ? handleDragMouseDown : void 0,
+                  style: isDraggable ? { cursor: "grab", userSelect: "none" } : void 0,
+                  children: [
+                    (title || titleContent) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { id: titleId, className: _tigercatcore.modalTitleClasses, children: titleContent || title }),
+                    closable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "button",
+                      {
+                        type: "button",
+                        className: _tigercatcore.modalCloseButtonClasses,
+                        onClick: handleClose,
+                        "aria-label": resolvedCloseAriaLabel,
+                        ref: closeButtonRef,
+                        children: CloseIcon
+                      }
+                    )
+                  ]
+                }
+              ),
+              children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.modalBodyClasses, children }),
+              footer ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.modalFooterClasses, "data-tiger-modal-footer": "", children: footer }) : showDefaultFooter ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.modalFooterClasses, "data-tiger-modal-footer": "", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk56ZV3VVYjs.Button, { variant: "secondary", onClick: handleClose, children: resolvedCancelText }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk56ZV3VVYjs.Button, { onClick: handleOk, children: resolvedOkText })
+              ] }) : null
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+  return _chunkSTTQ5LXXjs.renderBodyPortal.call(void 0, modalContent);
+};
+
+
+
+exports.Modal = Modal;

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
+};