@expcat/tigercat-react 1.3.4 → 1.5.0

package/dist/{chunk-4LX5UGPQ.js → chunk-LJRCEB7F.js}

@@ -4,23 +4,21 @@
 var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
 
 // src/components/Menu.tsx
-
-
-
-
-
-
-
-
-
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 
 
 
+var _tigercatcore = require('@expcat/tigercat-core');
 
+// src/components/Menu/context.ts
 
+var MenuContext = _react.createContext.call(void 0, null);
+function useMenuContext() {
+  return _react.useContext.call(void 0, MenuContext);
+}
 
+// src/components/Menu/state.ts
 
 
 
@@ -30,52 +28,31 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var _jsxruntime = require('react/jsx-runtime');
-var MenuContext = _react.createContext.call(void 0, null);
-function useMenuContext() {
-  return _react.useContext.call(void 0, MenuContext);
-}
-var Menu = ({
-  items,
-  mode = "vertical",
-  theme = "light",
-  selectedKeys: controlledSelectedKeys,
-  defaultSelectedKeys = [],
-  openKeys: controlledOpenKeys,
-  defaultOpenKeys = [],
-  collapsed = false,
-  multiple = true,
-  inlineIndent = 24,
-  popupPortal = false,
-  className,
-  style,
-  onSelect,
-  onOpenChange,
-  onSearch,
-  searchable = false,
-  searchValue: controlledSearchValue,
-  defaultSearchValue = "",
-  searchPlaceholder = "Search menu",
-  emptyText = "No menu items found",
-  children
-}) => {
+function useMenuRootState(props) {
+  const {
+    items,
+    mode = "vertical",
+    theme = "light",
+    selectedKeys: controlledSelectedKeys,
+    defaultSelectedKeys = [],
+    openKeys: controlledOpenKeys,
+    defaultOpenKeys = [],
+    collapsed = false,
+    multiple = true,
+    inlineIndent = 24,
+    popupPortal = false,
+    className,
+    style,
+    onSelect,
+    onOpenChange,
+    onSearch,
+    searchable = false,
+    searchValue: controlledSearchValue,
+    defaultSearchValue = "",
+    searchPlaceholder = "Search menu",
+    emptyText = "No menu items found"
+  } = props;
+  const children = props.children;
   const menuRef = _react.useRef.call(void 0, null);
   const resolvedMode = collapsed && mode === "inline" ? "vertical" : mode;
   const [internalSelectedKeys, setInternalSelectedKeys] = _react.useState.call(void 0, defaultSelectedKeys);
@@ -146,57 +123,41 @@ var Menu = ({
     () => _tigercatcore.filterMenuItems.call(void 0, _nullishCoalesce(items, () => ( [])), searchValue),
     [items, searchValue]
   );
-  function renderDataItem(item) {
-    if (item.children && item.children.length > 0) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        SubMenu,
-        {
-          itemKey: item.key,
-          title: item.label,
-          icon: item.icon,
-          disabled: item.disabled,
-          children: item.children.map(renderDataItem)
-        },
-        item.key
-      );
-    }
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuItem, { itemKey: item.key, icon: item.icon, disabled: item.disabled, children: item.label }, item.key);
-  }
-  const dataChildren = filteredItems.map(renderDataItem);
-  const hasSlotChildren = _react2.default.Children.count(children) > 0;
-  const emptyChild = items && items.length > 0 && dataChildren.length === 0 && !hasSlotChildren ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { role: "none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.menuSearchEmptyClasses, children: emptyText }) }) : null;
   _react.useEffect.call(void 0, () => {
     if (menuRef.current) _tigercatcore.initRovingTabIndex.call(void 0, menuRef.current);
   }, [resolvedMode, collapsed, selectedKeys, openKeys, filteredItems]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "ul",
-    {
-      ref: menuRef,
-      className: menuClasses,
-      style,
-      role: "menu",
-      "data-tiger-menu-root": "true",
-      "data-tiger-menu-mode": resolvedMode,
-      "data-tiger-menu-requested-mode": mode,
-      children: [
-        searchable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { role: "none", className: _tigercatcore.menuSearchFieldClasses, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "input",
-          {
-            type: "search",
-            value: searchValue,
-            placeholder: searchPlaceholder,
-            "aria-label": searchPlaceholder,
-            className: _tigercatcore.menuSearchInputClasses,
-            onChange: handleSearchInput
-          }
-        ) }),
-        dataChildren,
-        children,
-        emptyChild
-      ]
-    }
-  ) });
-};
+  return {
+    menuRef,
+    menuClasses,
+    style,
+    resolvedMode,
+    mode,
+    contextValue,
+    searchable,
+    searchValue,
+    searchPlaceholder,
+    emptyText,
+    handleSearchInput,
+    filteredItems,
+    items,
+    children
+  };
+}
+
+// src/components/Menu/menu-item.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+var _jsxruntime = require('react/jsx-runtime');
 var MenuItem = ({
   itemKey,
   disabled = false,
@@ -228,9 +189,7 @@ var MenuItem = ({
       const current = event.currentTarget;
       const rootMenu = current.closest('ul[role="menu"]');
       const isRoot = _optionalChain([rootMenu, 'optionalAccess', _4 => _4.dataset, 'access', _5 => _5.tigerMenuRoot]) === "true";
-      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
-      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
-      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      const { nextKey, prevKey } = _tigercatcore.getMenuNavigationKeys.call(void 0, menuContext.mode, isRoot);
       if (event.key === nextKey) {
         event.preventDefault();
         _tigercatcore.moveFocusInMenu.call(void 0, current, 1);
@@ -299,6 +258,51 @@ var MenuItem = ({
     }
   ) });
 };
+
+// src/components/Menu/submenu.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/components/Menu/icons.tsx
+
+
+var ExpandIcon = ({ expanded }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "svg",
+  {
+    className: _tigercatcore.getSubMenuExpandIconClasses.call(void 0, expanded),
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z" })
+  }
+);
+
+// src/components/Menu/menu-item-group.tsx
+
+
+
 function isComponentNamed(elementType, name) {
   if (typeof elementType !== "function" && typeof elementType !== "object") return false;
   const maybeFn = elementType;
@@ -329,17 +333,9 @@ var MenuItemGroup = ({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { role: "group", className, children: enhancedChildren })
   ] });
 };
-var ExpandIcon = ({ expanded }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  "svg",
-  {
-    className: _tigercatcore.getSubMenuExpandIconClasses.call(void 0, expanded),
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
-    fill: "currentColor",
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z" })
-  }
-);
+
+// src/components/Menu/submenu.tsx
+
 var SubMenu = ({
   itemKey,
   title = "",
@@ -471,9 +467,7 @@ var SubMenu = ({
       const current = event.currentTarget;
       const rootMenu = current.closest('ul[role="menu"]');
       const isRoot = _optionalChain([rootMenu, 'optionalAccess', _14 => _14.dataset, 'access', _15 => _15.tigerMenuRoot]) === "true";
-      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
-      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
-      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      const { nextKey, prevKey } = _tigercatcore.getMenuNavigationKeys.call(void 0, menuContext.mode, isRoot);
       if (event.key === nextKey) {
         event.preventDefault();
         _tigercatcore.moveFocusInMenu.call(void 0, current, 1);
@@ -662,10 +656,63 @@ var SubMenu = ({
   );
 };
 
+// src/components/Menu.tsx
+
+var Menu = (props) => {
+  const ctx = useMenuRootState(props);
+  function renderDataItem(item) {
+    if (item.children && item.children.length > 0) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        SubMenu,
+        {
+          itemKey: item.key,
+          title: item.label,
+          icon: item.icon,
+          disabled: item.disabled,
+          children: item.children.map(renderDataItem)
+        },
+        item.key
+      );
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuItem, { itemKey: item.key, icon: item.icon, disabled: item.disabled, children: item.label }, item.key);
+  }
+  const dataChildren = ctx.filteredItems.map(renderDataItem);
+  const hasSlotChildren = _react2.default.Children.count(ctx.children) > 0;
+  const emptyChild = ctx.items && ctx.items.length > 0 && dataChildren.length === 0 && !hasSlotChildren ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { role: "none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.menuSearchEmptyClasses, children: ctx.emptyText }) }) : null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuContext.Provider, { value: ctx.contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "ul",
+    {
+      ref: ctx.menuRef,
+      className: ctx.menuClasses,
+      style: ctx.style,
+      role: "menu",
+      "data-tiger-menu-root": "true",
+      "data-tiger-menu-mode": ctx.resolvedMode,
+      "data-tiger-menu-requested-mode": ctx.mode,
+      children: [
+        ctx.searchable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { role: "none", className: _tigercatcore.menuSearchFieldClasses, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            type: "search",
+            value: ctx.searchValue,
+            placeholder: ctx.searchPlaceholder,
+            "aria-label": ctx.searchPlaceholder,
+            className: _tigercatcore.menuSearchInputClasses,
+            onChange: ctx.handleSearchInput
+          }
+        ) }),
+        dataChildren,
+        ctx.children,
+        emptyChild
+      ]
+    }
+  ) });
+};
+
 
 
 
 
 
 
-exports.useMenuContext = useMenuContext; exports.Menu = Menu; exports.MenuItem = MenuItem; exports.MenuItemGroup = MenuItemGroup; exports.SubMenu = SubMenu;
+exports.useMenuContext = useMenuContext; exports.MenuItem = MenuItem; exports.MenuItemGroup = MenuItemGroup; exports.SubMenu = SubMenu; exports.Menu = Menu;

package/dist/{chunk-BJQIYELW.mjs → chunk-LOM6NNQK.mjs}

@@ -1,3 +1,7 @@
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
+
 // src/components/ImageViewer.tsx
 import { useState, useCallback, useEffect, useMemo, useRef } from "react";
 import {
@@ -20,7 +24,9 @@ import {
   movePan,
   createPinchState,
   startPinch,
-  movePinch
+  movePinch,
+  getImageViewerLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function SvgIcon({ pathD, label }) {
@@ -40,6 +46,7 @@ function SvgIcon({ pathD, label }) {
   );
 }
 var ImageViewer = ({
+  locale,
   images,
   open = false,
   currentIndex = 0,
@@ -53,8 +60,14 @@ var ImageViewer = ({
   className,
   onOpenChange,
   onClose,
-  onIndexChange
+  onCurrentIndexChange
 }) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getImageViewerLabels(mergedLocale), [mergedLocale]);
   const [index, setIndex] = useState(currentIndex);
   const [transform, setTransform] = useState(createDefaultTransform);
   const panRef = useRef(createPanState());
@@ -75,14 +88,14 @@ var ImageViewer = ({
     const newIndex = (index - 1 + images.length) % images.length;
     setIndex(newIndex);
     resetTransform();
-    onIndexChange?.(newIndex);
-  }, [index, images.length, onIndexChange, resetTransform]);
+    onCurrentIndexChange?.(newIndex);
+  }, [index, images.length, onCurrentIndexChange, resetTransform]);
   const handleNext = useCallback(() => {
     const newIndex = (index + 1) % images.length;
     setIndex(newIndex);
     resetTransform();
-    onIndexChange?.(newIndex);
-  }, [index, images.length, onIndexChange, resetTransform]);
+    onCurrentIndexChange?.(newIndex);
+  }, [index, images.length, onCurrentIndexChange, resetTransform]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -112,7 +125,7 @@ var ImageViewer = ({
       className: backdropClasses,
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": "Image viewer",
+      "aria-label": labels.dialogAriaLabel,
       onClick: (e) => {
         if (maskClosable && e.target === e.currentTarget) handleClose();
       },
@@ -127,9 +140,9 @@ var ImageViewer = ({
           {
             className: imageViewerCloseBtnClasses,
             onClick: handleClose,
-            "aria-label": "Close",
+            "aria-label": labels.closeAriaLabel,
             type: "button",
-            children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.close, label: "Close" })
+            children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.close, label: labels.closeAriaLabel })
           }
         ),
         showNav && images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -138,9 +151,9 @@ var ImageViewer = ({
             {
               className: classNames(imageViewerNavBtnClasses, "left-4"),
               onClick: handlePrev,
-              "aria-label": "Previous image",
+              "aria-label": labels.previousImageAriaLabel,
               type: "button",
-              children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.prev, label: "Previous" })
+              children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.prev, label: labels.previousImageAriaLabel })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -148,9 +161,9 @@ var ImageViewer = ({
             {
               className: classNames(imageViewerNavBtnClasses, "right-4"),
               onClick: handleNext,
-              "aria-label": "Next image",
+              "aria-label": labels.nextImageAriaLabel,
               type: "button",
-              children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.next, label: "Next" })
+              children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.next, label: labels.nextImageAriaLabel })
             }
           )
         ] }),
@@ -238,9 +251,9 @@ var ImageViewer = ({
                   ...t,
                   scale: clampZoom(t.scale - 0.25, minZoom, maxZoom)
                 })),
-                "aria-label": "Zoom out",
+                "aria-label": labels.zoomOutAriaLabel,
                 type: "button",
-                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.zoomOut, label: "Zoom out" })
+                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.zoomOut, label: labels.zoomOutAriaLabel })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -251,9 +264,9 @@ var ImageViewer = ({
                   ...t,
                   scale: clampZoom(t.scale + 0.25, minZoom, maxZoom)
                 })),
-                "aria-label": "Zoom in",
+                "aria-label": labels.zoomInAriaLabel,
                 type: "button",
-                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.zoomIn, label: "Zoom in" })
+                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.zoomIn, label: labels.zoomInAriaLabel })
               }
             )
           ] }),
@@ -263,9 +276,9 @@ var ImageViewer = ({
               {
                 className: imageViewerToolbarBtnClasses,
                 onClick: () => setTransform((t) => ({ ...t, rotation: normalizeRotation(t.rotation - 90) })),
-                "aria-label": "Rotate left",
+                "aria-label": labels.rotateLeftAriaLabel,
                 type: "button",
-                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.rotateLeft, label: "Rotate left" })
+                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.rotateLeft, label: labels.rotateLeftAriaLabel })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -273,9 +286,9 @@ var ImageViewer = ({
               {
                 className: imageViewerToolbarBtnClasses,
                 onClick: () => setTransform((t) => ({ ...t, rotation: normalizeRotation(t.rotation + 90) })),
-                "aria-label": "Rotate right",
+                "aria-label": labels.rotateRightAriaLabel,
                 type: "button",
-                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.rotateRight, label: "Rotate right" })
+                children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.rotateRight, label: labels.rotateRightAriaLabel })
               }
             )
           ] })