@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-TQEIMVJD.mjs → chunk-WK45IRP7.mjs}

@@ -1,5 +1,5 @@
-import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import { resolveWatermarkFont, watermarkDefaults, renderWatermarkCanvas, getWatermarkOverlayStyle, classNames, watermarkWrapperClasses } from '@expcat/tigercat-core';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { resolveWatermarkFont, createWatermarkRenderController, watermarkDefaults, getWatermarkOverlayStyle, classNames, watermarkWrapperClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Watermark.tsx
@@ -21,48 +21,39 @@ var Watermark = ({
 }) => {
   const [base64, setBase64] = useState();
   const wrapperRef = useRef(null);
+  const renderControllerRef = useRef(null);
   const resolvedFont = useMemo(() => resolveWatermarkFont(font), [font]);
-  const generate = useCallback(() => {
-    if (image) {
-      const img = new Image();
-      img.crossOrigin = "anonymous";
-      img.onload = () => {
-        const canvas = document.createElement("canvas");
-        const dpr = window.devicePixelRatio || 1;
-        canvas.width = width * dpr;
-        canvas.height = height * dpr;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-        ctx.scale(dpr, dpr);
-        ctx.translate(width / 2, height / 2);
-        ctx.rotate(rotate * Math.PI / 180);
-        ctx.translate(-width / 2, -height / 2);
-        ctx.drawImage(img, 0, 0, width, height);
-        setBase64(canvas.toDataURL());
-      };
-      img.src = image;
-    } else {
-      setBase64(
-        renderWatermarkCanvas({
-          content,
-          width,
-          height,
-          rotate,
-          font: resolvedFont
-        })
-      );
-    }
-  }, [content, image, width, height, rotate, resolvedFont]);
   useEffect(() => {
-    generate();
-  }, [generate]);
+    const target = wrapperRef.current;
+    if (!target) return;
+    const controller = createWatermarkRenderController({
+      getRenderOptions: () => ({
+        content,
+        image,
+        width,
+        height,
+        rotate,
+        font: resolvedFont
+      }),
+      onRender: setBase64
+    });
+    renderControllerRef.current = controller;
+    controller.observe(target);
+    controller.render();
+    return () => {
+      controller.disconnect();
+      if (renderControllerRef.current === controller) {
+        renderControllerRef.current = null;
+      }
+    };
+  }, [content, image, width, height, rotate, resolvedFont]);
   useEffect(() => {
     if (typeof MutationObserver === "undefined" || !wrapperRef.current) return;
     const observer = new MutationObserver((mutations) => {
       for (const m of mutations) {
         for (const node of Array.from(m.removedNodes)) {
           if (node.dataset?.watermark === "true") {
-            generate();
+            renderControllerRef.current?.render();
             return;
           }
         }
@@ -70,7 +61,7 @@ var Watermark = ({
     });
     observer.observe(wrapperRef.current, { childList: true });
     return () => observer.disconnect();
-  }, [generate]);
+  }, []);
   const overlayStyle = useMemo(
     () => getWatermarkOverlayStyle({
       base64Url: base64,

package/dist/{chunk-HLJQZUIY.mjs → chunk-WNX4TH7U.mjs}

@@ -1,7 +1,7 @@
-import { useEscapeKey } from './chunk-WLIFEALE.mjs';
+import { useEscapeKey } from './chunk-XTSG362L.mjs';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { getPreviewNavState, clampScale, calculateTransform, imagePreviewWrapperClasses, imagePreviewMaskClasses, imagePreviewImgClasses, imagePreviewCloseBtnClasses, previewCloseIconPath, classNames, prevIconPath, imagePreviewNavBtnClasses, nextIconPath, imagePreviewToolbarClasses, imagePreviewToolbarBtnClasses, zoomOutIconPath, resetIconPath, zoomInIconPath, imagePreviewCounterClasses } from '@expcat/tigercat-core';
+import { getPreviewNavState, clampScale, normalizeRotation, calculateTransform, imagePreviewWrapperClasses, imagePreviewMaskClasses, imagePreviewImgClasses, imagePreviewCloseBtnClasses, previewCloseIconPath, classNames, prevIconPath, imagePreviewNavBtnClasses, nextIconPath, imagePreviewToolbarClasses, imagePreviewToolbarBtnClasses, zoomOutIconPath, resetIconPath, zoomInIconPath, imageViewerIcons, imagePreviewCounterClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var SvgIcon = ({ d, cls = "w-5 h-5" }) => /* @__PURE__ */ jsx(
@@ -30,6 +30,7 @@ var ImagePreview = ({
 }) => {
   const isOpen = open;
   const [scale, setScale] = useState(1);
+  const [rotation, setRotation] = useState(0);
   const [offsetX, setOffsetX] = useState(0);
   const [offsetY, setOffsetY] = useState(0);
   const [index, setIndex] = useState(currentIndex);
@@ -37,6 +38,7 @@ var ImagePreview = ({
   const dragStartRef = useRef({ x: 0, y: 0, ox: 0, oy: 0 });
   const resetTransform = useCallback(() => {
     setScale(1);
+    setRotation(0);
     setOffsetX(0);
     setOffsetY(0);
   }, []);
@@ -79,6 +81,12 @@ var ImagePreview = ({
     resetTransform();
     onScaleChange?.(1);
   }, [resetTransform, onScaleChange]);
+  const handleRotateLeft = useCallback(() => {
+    setRotation((value) => normalizeRotation(value - 90));
+  }, []);
+  const handleRotateRight = useCallback(() => {
+    setRotation((value) => normalizeRotation(value + 90));
+  }, []);
   const handlePrev = useCallback(() => {
     if (index > 0) {
       const next = index - 1;
@@ -142,8 +150,8 @@ var ImagePreview = ({
     [maskClosable, handleClose]
   );
   const transform = useMemo(
-    () => calculateTransform(scale, offsetX, offsetY),
-    [scale, offsetX, offsetY]
+    () => `${calculateTransform(scale, offsetX, offsetY)} rotate(${rotation}deg)`,
+    [scale, offsetX, offsetY, rotation]
   );
   if (!isOpen || !images.length) return null;
   const currentSrc = images[index] || images[0];
@@ -237,6 +245,26 @@ var ImagePreview = ({
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomInIconPath })
               }
             ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imagePreviewToolbarBtnClasses,
+                onClick: handleRotateLeft,
+                "aria-label": "Rotate left",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { d: imageViewerIcons.rotateLeft })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imagePreviewToolbarBtnClasses,
+                onClick: handleRotateRight,
+                "aria-label": "Rotate right",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { d: imageViewerIcons.rotateRight })
+              }
+            ),
             navState.counter && /* @__PURE__ */ jsx("span", { className: imagePreviewCounterClasses, children: navState.counter })
           ] })
         ]

package/dist/{chunk-7MASYF4S.mjs → chunk-WT6CULN3.mjs}

@@ -1,6 +1,6 @@
-import { useTigerConfig } from './chunk-CRSMECWE.mjs';
+import { useTigerConfig } from './chunk-VBZE77VM.mjs';
 import { useMemo, useRef, useState, useCallback } from 'react';
-import { getSpinnerSVG, mergeTigerLocale, getUploadLabels, classNames, prepareUploadFiles, fileToUploadFile, getDragAreaClasses, interpolateUploadLabel, formatFileSize, getUploadButtonClasses, getFileListItemClasses, icon20ViewBox, getUploadStatusIconClasses, successCircleSolidIcon20PathD, errorCircleSolidIcon20PathD, closeSolidIcon20PathD, getPictureCardClasses } from '@expcat/tigercat-core';
+import { getSpinnerSVG, mergeTigerLocale, getUploadLabels, classNames, prepareUploadFiles, fileToUploadFile, getDragAreaClasses, interpolateUploadLabel, formatFileSize, getUploadButtonClasses, getFileListItemClasses, icon20ViewBox, getUploadStatusIconClasses, successCircleSolidIcon20PathD, errorCircleSolidIcon20PathD, closeSolidIcon20PathD, getPictureCardClasses, handleUploadDrop, handleUploadDragLeave, handleUploadDragOver } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var spinnerSvg = getSpinnerSVG("spinner");
@@ -127,9 +127,9 @@ var Upload = ({
     onPreview?.(file);
   };
   const handleDragOver = (event) => {
-    if (disabled) return;
-    event.preventDefault();
-    setIsDragging(true);
+    const result = handleUploadDragOver(event, disabled);
+    if (!result.handled) return;
+    setIsDragging(result.isDragging);
   };
   const handleDragKeyDown = (event) => {
     if (disabled) return;
@@ -139,16 +139,15 @@ var Upload = ({
     }
   };
   const handleDragLeave = (event) => {
-    if (disabled) return;
-    event.preventDefault();
-    setIsDragging(false);
+    const result = handleUploadDragLeave(event, disabled);
+    if (!result.handled) return;
+    setIsDragging(result.isDragging);
   };
   const handleDrop = async (event) => {
-    if (disabled) return;
-    event.preventDefault();
-    setIsDragging(false);
-    const files = Array.from(event.dataTransfer?.files || []);
-    await processFiles(files);
+    const result = handleUploadDrop(event, disabled);
+    if (!result.handled) return;
+    setIsDragging(result.isDragging);
+    await processFiles(result.files);
   };
   const renderUploadButton = () => {
     if (drag) {

package/dist/{chunk-6PBNFLM7.js → chunk-WV5XHYW6.js}

@@ -56,9 +56,9 @@ var ChartLegend = ({
           {
             type: interactive ? "button" : void 0,
             className: tigercatCore.classNames(
-              "flex items-center gap-2 text-sm",
+              "flex items-center gap-2 text-sm rounded-[var(--tiger-chart-legend-row-radius,0)]",
               "text-[color:var(--tiger-text-secondary,#6b7280)]",
-              interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] transition-colors" : "cursor-default",
+              interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] hover:bg-[var(--tiger-chart-legend-row-hover-bg,transparent)] transition-colors" : "cursor-default",
               item.active === false ? "opacity-50" : void 0
             ),
             role: "listitem",
@@ -74,7 +74,8 @@ var ChartLegend = ({
                   style: {
                     width: `${markerSize}px`,
                     height: `${markerSize}px`,
-                    backgroundColor: item.color
+                    background: `var(--tiger-chart-legend-marker-image, ${item.color})`,
+                    "--tiger-chart-legend-marker-color": item.color
                   },
                   "aria-hidden": "true",
                   "data-legend-marker": "true"

package/dist/{chunk-CQGAZ5JQ.js → chunk-X7WESYRG.js}

@@ -8,6 +8,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var VirtualList = ({
   itemCount = 0,
   itemHeight = 40,
+  estimatedItemHeight,
+  getItemHeight,
+  sizeStrategy: customStrategy,
   height = 400,
   overscan = 5,
   className,
@@ -16,9 +19,15 @@ var VirtualList = ({
 }) => {
   const [scrollTop, setScrollTop] = react.useState(0);
   const containerRef = react.useRef(null);
+  const strategy = react.useMemo(() => {
+    if (customStrategy) return customStrategy;
+    if (getItemHeight) return tigercatCore.variableSizeStrategy(getItemHeight, itemCount);
+    if (estimatedItemHeight !== void 0) return tigercatCore.dynamicSizeStrategy(estimatedItemHeight, itemCount);
+    return tigercatCore.fixedSizeStrategy(itemHeight);
+  }, [customStrategy, getItemHeight, estimatedItemHeight, itemHeight, itemCount]);
   const range = react.useMemo(
-    () => tigercatCore.getFixedVirtualRange(scrollTop, height, itemHeight, itemCount, overscan),
-    [scrollTop, height, itemHeight, itemCount, overscan]
+    () => strategy.getRange(scrollTop, height, itemCount, overscan),
+    [scrollTop, height, itemCount, overscan, strategy]
   );
   const handleScroll = react.useCallback(() => {
     if (containerRef.current) {
@@ -27,13 +36,15 @@ var VirtualList = ({
       onScroll?.(st);
     }
   }, [onScroll]);
-  const { startIndex, endIndex, offsetTop, totalHeight } = range;
+  const { startIndex, endIndex, totalHeight } = range;
   const items = [];
   for (let i = startIndex; i <= endIndex; i++) {
+    const itemH = strategy.getItemHeight(i);
     items.push(
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: `${itemHeight}px`, width: "100%" }, children: renderItem({ index: i }) }, i)
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: `${itemH}px`, width: "100%" }, children: renderItem({ index: i }) }, i)
     );
   }
+  const offsetTop = startIndex >= 0 ? strategy.getItemOffset(startIndex) : 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist/{chunk-PUYT62KC.js → chunk-XAALCDGD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkIWP22YTF_js = require('./chunk-IWP22YTF.js');
+var chunkHCKV7ONR_js = require('./chunk-HCKV7ONR.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -37,7 +37,7 @@ var FormItem = ({
   children,
   className
 }) => {
-  const formContext = chunkIWP22YTF_js.useFormContext();
+  const formContext = chunkHCKV7ONR_js.useFormContext();
   const [errorMessage, setErrorMessage] = React.useState("");
   const [shakeTrigger, setShakeTrigger] = React.useState(0);
   const prevFormErrorRef = React.useRef("");
@@ -76,15 +76,15 @@ var FormItem = ({
     [showRequiredAsterisk, formContext?.showRequiredAsterisk]
   );
   React.useEffect(() => {
-    if (name && formContext?.errors) {
-      const error = tigercatCore.getFieldError(name, formContext.errors) || "";
+    if (name && formContext?.errorsByField) {
+      const error = formContext.errorsByField[name] || "";
       setErrorMessage(error);
       if (error && error !== prevFormErrorRef.current) {
         setShakeTrigger((prev) => prev + 1);
       }
       prevFormErrorRef.current = error;
     }
-  }, [name, formContext?.errors]);
+  }, [name, formContext?.errorsByField]);
   React.useEffect(() => {
     if (controlledError !== void 0) {
       setErrorMessage(controlledError);
@@ -225,7 +225,6 @@ var FormItem = ({
           "aria-labelledby": label ? labelId : void 0,
           "aria-describedby": describedById,
           "aria-invalid": hasError ? true : void 0,
-          "aria-required": isRequired ? true : void 0,
           onBlur: isClonableChild ? void 0 : handleBlur,
           onChange: isClonableChild ? void 0 : handleChange,
           children: enhancedChild

package/dist/{chunk-YPHOVEVU.mjs → chunk-XATXFVKR.mjs}

@@ -1,5 +1,5 @@
 import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import { extractMentionQuery, classNames, getMentionsInputClasses, mentionsDropdownClasses, getMentionsOptionClasses } from '@expcat/tigercat-core';
+import { extractMentionQuery, positionMentionsDropdown, classNames, getMentionsInputClasses, mentionsDropdownClasses, getMentionsOptionClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Mentions.tsx
@@ -20,6 +20,7 @@ var Mentions = ({
   const [query, setQuery] = useState("");
   const mentionStartRef = useRef(-1);
   const textareaRef = useRef(null);
+  const dropdownRef = useRef(null);
   const containerRef = useRef(null);
   const filteredOptions = useMemo(() => {
     if (!query) return options;
@@ -85,6 +86,11 @@ var Mentions = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen || filteredOptions.length === 0) return;
+    if (!textareaRef.current || !dropdownRef.current) return;
+    void positionMentionsDropdown(textareaRef.current, dropdownRef.current);
+  }, [isOpen, filteredOptions.length, size, rows, value]);
   const wrapperClass = classNames("relative", className);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: wrapperClass, children: [
     /* @__PURE__ */ jsx(
@@ -100,7 +106,7 @@ var Mentions = ({
         onKeyDown: handleKeydown
       }
     ),
-    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: mentionsDropdownClasses, role: "listbox", children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx("div", { ref: dropdownRef, className: mentionsDropdownClasses, role: "listbox", children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
       "div",
       {
         className: getMentionsOptionClasses(i === activeIndex, !!opt.disabled),

package/dist/chunk-XHF3L4ET.mjs

@@ -0,0 +1,132 @@
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { resolveAffixTarget, calculateAffixState, createAffixObserver, classNames } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Affix.tsx
+var Affix = ({
+  offsetTop = 0,
+  offsetBottom,
+  target,
+  zIndex = 10,
+  className,
+  style,
+  children,
+  onChange,
+  ...props
+}) => {
+  const wrapperRef = useRef(null);
+  const sentinelRef = useRef(null);
+  const originalRectRef = useRef(null);
+  const [state, setState] = useState({ affixed: false, style: {} });
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const recalcStyle = useCallback(
+    (affixed) => {
+      const el = wrapperRef.current;
+      if (!el) return;
+      if (!stateRef.current.affixed) {
+        const rect = el.getBoundingClientRect();
+        originalRectRef.current = {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        };
+      }
+      if (!originalRectRef.current) return;
+      const resolved = resolveAffixTarget(target);
+      const containerRect = resolved.getRect();
+      if (!affixed) {
+        if (stateRef.current.affixed) {
+          setState({ affixed: false, style: {} });
+          onChangeRef.current?.(false);
+        }
+        return;
+      }
+      const next = calculateAffixState(
+        {
+          top: -1,
+          left: originalRectRef.current.left,
+          width: originalRectRef.current.width,
+          height: originalRectRef.current.height
+        },
+        containerRect,
+        offsetBottom !== void 0 ? void 0 : offsetTop,
+        offsetBottom,
+        zIndex
+      );
+      if (!next.affixed) {
+        if (stateRef.current.affixed) {
+          setState({ affixed: false, style: {} });
+          onChangeRef.current?.(false);
+        }
+        return;
+      }
+      const wasAffixed = stateRef.current.affixed;
+      setState(next);
+      if (!wasAffixed) onChangeRef.current?.(true);
+    },
+    [offsetTop, offsetBottom, target, zIndex]
+  );
+  useEffect(() => {
+    if (!sentinelRef.current) return void 0;
+    const resolved = resolveAffixTarget(target);
+    const root = resolved.element === window ? null : resolved.element;
+    const stop = createAffixObserver(sentinelRef.current, {
+      offsetTop,
+      offsetBottom,
+      root,
+      onToggle: (affixed) => recalcStyle(affixed)
+    });
+    let resizeObs = null;
+    const onResize = () => {
+      if (stateRef.current.affixed) recalcStyle(true);
+    };
+    if (typeof ResizeObserver !== "undefined" && wrapperRef.current) {
+      resizeObs = new ResizeObserver(() => onResize());
+      resizeObs.observe(wrapperRef.current);
+    }
+    window.addEventListener("resize", onResize, { passive: true });
+    return () => {
+      stop();
+      resizeObs?.disconnect();
+      window.removeEventListener("resize", onResize);
+    };
+  }, [offsetTop, offsetBottom, target, recalcStyle]);
+  const wrapperClasses = useMemo(() => classNames(className), [className]);
+  const wrapperStyle = useMemo(
+    () => state.affixed ? { ...state.style, ...style } : style,
+    [state.affixed, state.style, style]
+  );
+  const sentinel = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: sentinelRef,
+      "aria-hidden": "true",
+      style: { display: "block", width: 0, height: 0, pointerEvents: "none" }
+    }
+  );
+  if (state.affixed) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      sentinel,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: originalRectRef.current?.width ?? 0,
+            height: originalRectRef.current?.height ?? 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    sentinel,
+    /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children })
+  ] });
+};
+
+export { Affix };