@expcat/tigercat-react 1.3.4 → 1.5.0

package/dist/{chunk-VHGCWZ6V.mjs → chunk-OTRPN5ZG.mjs}

@@ -1,7 +1,12 @@
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
+
 // src/components/ImageAnnotation.tsx
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   classNames,
+  isActivationKey,
   createImageAnnotationBox,
   createImageAnnotationPath,
   defaultImageAnnotationTools,
@@ -11,7 +16,7 @@ import {
   getImageAnnotationShapeAriaLabel,
   getImageAnnotationStrokeColor,
   getImageAnnotationToolButtonClasses,
-  getImageAnnotationToolLabel,
+  getImageEditorLabels,
   imageAnnotationContainerClasses,
   imageAnnotationDeleteButtonClasses,
   imageAnnotationImageClasses,
@@ -20,10 +25,12 @@ import {
   imageAnnotationReadonlyOverlayClasses,
   imageAnnotationStageClasses,
   imageAnnotationToolbarClasses,
-  shouldCommitImageAnnotationBox
+  shouldCommitImageAnnotationBox,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ImageAnnotation({
+  locale,
   src,
   alt = "Image to annotate",
   value,
@@ -45,6 +52,22 @@ function ImageAnnotation({
   onToolChange,
   onReady
 }) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getImageEditorLabels(mergedLocale), [mergedLocale]);
+  const toolLabels = useMemo(
+    () => ({
+      select: labels.selectToolText,
+      rectangle: labels.rectangleToolText,
+      ellipse: labels.ellipseToolText,
+      polygon: labels.polygonToolText,
+      freehand: labels.freehandToolText
+    }),
+    [labels]
+  );
   const containerRef = useRef(null);
   const overlayRef = useRef(null);
   const idSeedRef = useRef(0);
@@ -183,13 +206,20 @@ function ImageAnnotation({
     },
     [activeTool, canEdit, getPointFromEvent]
   );
+  const removeAnnotation = useCallback(
+    (annotation) => {
+      if (!canEdit) return;
+      const next = annotations.filter((item) => item.id !== annotation.id);
+      commitAnnotations(next, { type: "remove", annotation });
+      selectAnnotation(null);
+    },
+    [annotations, canEdit, commitAnnotations, selectAnnotation]
+  );
   const removeSelectedAnnotation = useCallback(() => {
     if (!canEdit || !activeSelectedId) return;
     const removed = annotations.find((annotation) => annotation.id === activeSelectedId);
-    const next = annotations.filter((annotation) => annotation.id !== activeSelectedId);
-    commitAnnotations(next, { type: "remove", annotation: removed });
-    selectAnnotation(null);
-  }, [activeSelectedId, annotations, canEdit, commitAnnotations, selectAnnotation]);
+    if (removed) removeAnnotation(removed);
+  }, [activeSelectedId, annotations, canEdit, removeAnnotation]);
   const handleKeyDown = useCallback(
     (event) => {
       if (event.key === "Escape") {
@@ -212,6 +242,20 @@ function ImageAnnotation({
     (annotation, isDraft = false) => {
       const selected = !isDraft && annotation.id === activeSelectedId;
       const stroke = getImageAnnotationStrokeColor(annotation);
+      const onKeyDown = (event) => {
+        if (isDraft) return;
+        if (isActivationKey(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          selectAnnotation(annotation);
+          return;
+        }
+        if (event.key === "Delete" || event.key === "Backspace") {
+          event.preventDefault();
+          event.stopPropagation();
+          removeAnnotation(annotation);
+        }
+      };
       const commonProps = {
         stroke,
         strokeWidth: selected ? strokeWidth + 1 : strokeWidth,
@@ -220,7 +264,8 @@ function ImageAnnotation({
         role: "button",
         tabIndex: isDraft ? -1 : 0,
         "aria-label": getImageAnnotationShapeAriaLabel(annotation),
-        className: classNames(!isDraft && "cursor-pointer focus:outline-none")
+        className: classNames(!isDraft && "cursor-pointer focus:outline-none"),
+        onKeyDown: isDraft ? void 0 : onKeyDown
       };
       const onClick = (event) => {
         if (isDraft) return;
@@ -267,7 +312,7 @@ function ImageAnnotation({
         annotation.id
       );
     },
-    [activeSelectedId, displayHeight, displayWidth, selectAnnotation, strokeWidth]
+    [activeSelectedId, displayHeight, displayWidth, removeAnnotation, selectAnnotation, strokeWidth]
   );
   const renderedAnnotations = useMemo(
     () => annotations.map((annotation) => renderAnnotation(annotation)),
@@ -290,7 +335,7 @@ function ImageAnnotation({
   }) : null;
   const containerClasses = classNames(imageAnnotationContainerClasses, className);
   return /* @__PURE__ */ jsxs("div", { className: containerClasses, style, onKeyDown: handleKeyDown, children: [
-    /* @__PURE__ */ jsxs("div", { className: imageAnnotationToolbarClasses, "aria-label": "Annotation tools", children: [
+    /* @__PURE__ */ jsxs("div", { className: imageAnnotationToolbarClasses, "aria-label": labels.annotationToolbarAriaLabel, children: [
       tools.map((item) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -299,7 +344,7 @@ function ImageAnnotation({
           disabled: disabled || readonly,
           "aria-pressed": activeTool === item,
           onClick: () => setActiveTool(item),
-          children: getImageAnnotationToolLabel(item)
+          children: toolLabels[item]
         },
         item
       )),
@@ -310,7 +355,7 @@ function ImageAnnotation({
           className: imageAnnotationDeleteButtonClasses,
           disabled: !canEdit || !activeSelectedId,
           onClick: removeSelectedAnnotation,
-          children: "Delete"
+          children: labels.deleteText
         }
       )
     ] }),
@@ -321,7 +366,7 @@ function ImageAnnotation({
         className: imageAnnotationStageClasses,
         style: { width: imageLoaded ? `${displayWidth}px` : void 0 },
         role: imageLoaded ? "application" : "img",
-        "aria-label": imageLoaded ? "Image annotation editor" : "Loading image for annotation",
+        "aria-label": imageLoaded ? labels.annotationEditorAriaLabel : labels.loadingAnnotationImageAriaLabel,
         children: !imageLoaded ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[200px] min-w-[240px] items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-[var(--tiger-border,#d1d5db)] border-t-[var(--tiger-primary,#2563eb)]" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             "img",
@@ -344,7 +389,7 @@ function ImageAnnotation({
               width: displayWidth,
               height: displayHeight,
               viewBox: `0 0 ${displayWidth} ${displayHeight}`,
-              "aria-label": "Image annotation canvas",
+              "aria-label": labels.annotationCanvasAriaLabel,
               onMouseDown: handleStageMouseDown,
               onClick: handleStageClick,
               onDoubleClick: commitPolygon,

package/dist/{chunk-QIKR5EFI.js → chunk-OVJO5NYW.js}

@@ -3,10 +3,10 @@
 var _chunkXTV5JLLCjs = require('./chunk-XTV5JLLC.js');
 
 
-var _chunkWV5XHYW6js = require('./chunk-WV5XHYW6.js');
+var _chunk23XPDNCAjs = require('./chunk-23XPDNCA.js');
 
 
-var _chunkUVMQJOTXjs = require('./chunk-UVMQJOTX.js');
+var _chunkSK7PXSVEjs = require('./chunk-SK7PXSVE.js');
 
 
 var _chunkUKLVOR4Ejs = require('./chunk-UKLVOR4E.js');
@@ -192,7 +192,7 @@ var FunnelChart = ({
     }
   );
   const tooltip = showTooltip && hoverable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkUVMQJOTXjs.ChartTooltip,
+    _chunkSK7PXSVEjs.ChartTooltip,
     {
       content: tooltipContent,
       visible: resolvedHoveredIndex !== null && tooltipContent !== "",
@@ -209,7 +209,7 @@ var FunnelChart = ({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkWV5XHYW6js.ChartLegend,
+      _chunk23XPDNCAjs.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,

package/dist/{chunk-6GYT3EZD.mjs → chunk-P2WQIVXD.mjs}

@@ -1,10 +1,13 @@
 import {
+  renderBodyPortal,
   useEscapeKey
 } from "./chunk-SEWNVIHH.mjs";
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
 
 // src/components/ImagePreview.tsx
 import { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { createPortal } from "react-dom";
 import {
   classNames,
   imagePreviewMaskClasses,
@@ -31,7 +34,9 @@ import {
   movePan,
   createPinchState,
   startPinch,
-  movePinch
+  movePinch,
+  getImageViewerLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SvgIcon = ({ d, cls = "w-5 h-5" }) => /* @__PURE__ */ jsx(
@@ -54,10 +59,17 @@ var ImagePreview = ({
   scaleStep = 0.5,
   minScale = 0.25,
   maxScale = 5,
+  locale,
   onOpenChange,
   onCurrentIndexChange,
   onScaleChange
 }) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getImageViewerLabels(mergedLocale), [mergedLocale]);
   const isOpen = open ?? false;
   const [scale, setScale] = useState(1);
   const [rotation, setRotation] = useState(0);
@@ -223,7 +235,7 @@ var ImagePreview = ({
   );
   if (!isOpen || !images.length) return null;
   const currentSrc = images[index] || images[0];
-  return createPortal(
+  return renderBodyPortal(
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -231,7 +243,7 @@ var ImagePreview = ({
         style: { zIndex },
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": "Image preview",
+        "aria-label": labels.previewDialogAriaLabel,
         onClick: handleMaskClick,
         onWheel: handleWheel,
         children: [
@@ -259,7 +271,7 @@ var ImagePreview = ({
             {
               className: imagePreviewCloseBtnClasses,
               onClick: handleClose,
-              "aria-label": "Close preview",
+              "aria-label": labels.closePreviewAriaLabel,
               type: "button",
               children: /* @__PURE__ */ jsx(SvgIcon, { d: previewCloseIconPath })
             }
@@ -270,7 +282,7 @@ var ImagePreview = ({
               className: classNames(imagePreviewNavBtnClasses, "left-4"),
               onClick: handlePrev,
               disabled: !navState.hasPrev,
-              "aria-label": "Previous image",
+              "aria-label": labels.previousImageAriaLabel,
               type: "button",
               children: /* @__PURE__ */ jsx(SvgIcon, { d: prevIconPath })
             }
@@ -281,7 +293,7 @@ var ImagePreview = ({
               className: classNames(imagePreviewNavBtnClasses, "right-4"),
               onClick: handleNext,
               disabled: !navState.hasNext,
-              "aria-label": "Next image",
+              "aria-label": labels.nextImageAriaLabel,
               type: "button",
               children: /* @__PURE__ */ jsx(SvgIcon, { d: nextIconPath })
             }
@@ -292,7 +304,7 @@ var ImagePreview = ({
               {
                 className: imagePreviewToolbarBtnClasses,
                 onClick: handleZoomOut,
-                "aria-label": "Zoom out",
+                "aria-label": labels.zoomOutAriaLabel,
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomOutIconPath })
               }
@@ -302,7 +314,7 @@ var ImagePreview = ({
               {
                 className: imagePreviewToolbarBtnClasses,
                 onClick: handleReset,
-                "aria-label": "Reset",
+                "aria-label": labels.resetAriaLabel,
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: resetIconPath })
               }
@@ -312,7 +324,7 @@ var ImagePreview = ({
               {
                 className: imagePreviewToolbarBtnClasses,
                 onClick: handleZoomIn,
-                "aria-label": "Zoom in",
+                "aria-label": labels.zoomInAriaLabel,
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomInIconPath })
               }
@@ -322,7 +334,7 @@ var ImagePreview = ({
               {
                 className: imagePreviewToolbarBtnClasses,
                 onClick: handleRotateLeft,
-                "aria-label": "Rotate left",
+                "aria-label": labels.rotateLeftAriaLabel,
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: imageViewerIcons.rotateLeft })
               }
@@ -332,7 +344,7 @@ var ImagePreview = ({
               {
                 className: imagePreviewToolbarBtnClasses,
                 onClick: handleRotateRight,
-                "aria-label": "Rotate right",
+                "aria-label": labels.rotateRightAriaLabel,
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: imageViewerIcons.rotateRight })
               }
@@ -341,8 +353,7 @@ var ImagePreview = ({
           ] })
         ]
       }
-    ),
-    document.body
+    )
   );
 };
 

package/dist/{chunk-NMEVQPOD.js → chunk-PHAJXRGE.js}

@@ -23,6 +23,7 @@ var _client = require('react-dom/client');
 
 
 
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var _jsxruntime = require('react/jsx-runtime');
 var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
@@ -32,7 +33,6 @@ var notificationInstancesByPosition = {
   "bottom-left": [],
   "bottom-right": []
 };
-var instanceIdCounter = 0;
 var containerRoots = {
   "top-left": null,
   "top-right": null,
@@ -51,9 +51,7 @@ function scheduleNotificationStackUpdate(position) {
   if (!callback) return;
   stackUpdateScheduler.schedule(position, callback);
 }
-function getNextInstanceId() {
-  return ++instanceIdCounter;
-}
+var getNextInstanceId = _tigercatcore.createInstanceCounter.call(void 0, );
 var NotificationItem = ({ notification: notification2, onClose }) => {
   const [isVisible, setIsVisible] = _react.useState.call(void 0, false);
   _react.useEffect.call(void 0, () => {

package/dist/{chunk-WG3YS2QV.js → chunk-PQF5VLNX.js}

@@ -1,6 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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 _chunkP36GX65Njs = require('./chunk-P36GX65N.js');
+var _chunkFCCHM2B4js = require('./chunk-FCCHM2B4.js');
+
+
+var _chunkTDODFBBOjs = require('./chunk-TDODFBBO.js');
 
 // src/components/List.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -26,6 +29,11 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 
 
+
+
+
+
+
 
 
 
@@ -54,7 +62,8 @@ var List = ({
   size = "md",
   bordered = "divided",
   loading = false,
-  emptyText = "No data",
+  emptyText,
+  locale,
   split = true,
   itemLayout = "horizontal",
   header,
@@ -75,6 +84,11 @@ var List = ({
   onReorder,
   ...divProps
 }) => {
+  const config = _chunkTDODFBBOjs.useTigerConfig.call(void 0, );
+  const mergedLocale = _react.useMemo.call(void 0, 
+    () => _tigercatcore.mergeTigerLocale.call(void 0, config.locale, locale),
+    [config.locale, locale]
+  );
   const [currentPage, setCurrentPage] = _react.useState.call(void 0, 
     pagination && typeof pagination === "object" ? pagination.current || 1 : 1
   );
@@ -232,7 +246,7 @@ var List = ({
       return null;
     }
     if (paginatedData.length === 0) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.listEmptyStateClasses, role: "status", "aria-live": "polite", children: emptyText });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.listEmptyStateClasses, role: "status", "aria-live": "polite", children: _tigercatcore.resolveLocaleText.call(void 0, "No data", emptyText, _optionalChain([mergedLocale, 'optionalAccess', _5 => _5.common, 'optionalAccess', _6 => _6.emptyText])) });
     }
     const items = paginatedData.map((item, index) => renderListItem(item, index));
     if (grid) {
@@ -248,7 +262,7 @@ var List = ({
     }
     if (virtual) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkP36GX65Njs.VirtualList,
+        _chunkFCCHM2B4js.VirtualList,
         {
           itemCount: paginatedData.length,
           itemHeight: virtualItemHeight,
@@ -267,8 +281,15 @@ var List = ({
     const { totalPages, startIndex, endIndex, hasNext, hasPrev } = paginationInfo;
     const total = dataSource.length;
     const paginationConfig = pagination;
+    const paginationLabels = _tigercatcore.getPaginationLabels.call(void 0, mergedLocale);
+    const localeCode = _optionalChain([mergedLocale, 'optionalAccess', _7 => _7.locale]);
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.getSimplePaginationContainerClasses.call(void 0, ), children: [
-      paginationConfig.showTotal !== false && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getSimplePaginationTotalClasses.call(void 0, ), children: paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} items` }),
+      paginationConfig.showTotal !== false && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getSimplePaginationTotalClasses.call(void 0, ), children: paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : _tigercatcore.formatPaginationTotal.call(void 0, 
+        paginationLabels.totalText,
+        total,
+        [startIndex, endIndex],
+        localeCode
+      ) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.getSimplePaginationControlsClasses.call(void 0, ), children: [
         paginationConfig.showSizeChanger !== false && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "select",
@@ -278,7 +299,8 @@ var List = ({
             onChange: (e) => handlePageSizeChange(Number(e.target.value)),
             children: (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map((size2) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "option", { value: size2, children: [
               size2,
-              " / page"
+              " ",
+              paginationLabels.itemsPerPageText
             ] }, size2))
           }
         ),
@@ -289,22 +311,22 @@ var List = ({
               className: _tigercatcore.getSimplePaginationButtonClasses.call(void 0, !hasPrev),
               disabled: !hasPrev,
               onClick: () => handlePageChange(currentPage - 1),
-              children: "Previous"
+              children: paginationLabels.prevPageAriaLabel
             }
           ),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _tigercatcore.getSimplePaginationPageIndicatorClasses.call(void 0, ), children: [
-            "Page ",
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.getSimplePaginationPageIndicatorClasses.call(void 0, ), children: _tigercatcore.formatPaginationPageIndicator.call(void 0, 
+            paginationLabels.pageIndicatorText,
             currentPage,
-            " of ",
-            totalPages
-          ] }),
+            totalPages,
+            localeCode
+          ) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
               className: _tigercatcore.getSimplePaginationButtonClasses.call(void 0, !hasNext),
               disabled: !hasNext,
               onClick: () => handlePageChange(currentPage + 1),
-              children: "Next"
+              children: paginationLabels.nextPageAriaLabel
             }
           )
         ] })