@expcat/tigercat-react 1.2.37 → 1.2.41

package/dist/{chunk-2CJKAO2I.mjs → chunk-2VE2CP7E.mjs}

@@ -1,12 +1,21 @@
 import {
   Table
-} from "./chunk-ZGPOMSGD.mjs";
+} from "./chunk-WYGO6XC7.mjs";
 import {
   Select
 } from "./chunk-T4OVGM4X.mjs";
+import {
+  Popover
+} from "./chunk-TANTMMR7.mjs";
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
 import {
   Input
 } from "./chunk-WNLUUD5N.mjs";
+import {
+  Checkbox
+} from "./chunk-MSHCPJIJ.mjs";
 import {
   Button
 } from "./chunk-USWK2S3Y.mjs";
@@ -14,15 +23,25 @@ import {
 // src/components/DataTableWithToolbar.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
-  classNames
+  classNames,
+  getImmediateTigerLocale,
+  getTableLabels,
+  isLazyTigerLocale,
+  mergeTigerLocale,
+  resolveTigerLocale
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DataTableWithToolbar = ({
   toolbar,
+  locale,
+  labels,
   onSearchChange,
   onSearch,
   onFiltersChange,
   onBulkAction,
+  hiddenColumnKeys,
+  defaultHiddenColumnKeys,
+  onHiddenColumnsChange,
   pagination = false,
   onPageChange,
   onPageSizeChange,
@@ -30,10 +49,14 @@ var DataTableWithToolbar = ({
   tableClassName,
   ...tableProps
 }) => {
+  const config = useTigerConfig();
   const previousPageSizeRef = useRef(
     pagination && typeof pagination === "object" ? pagination.pageSize ?? pagination.defaultPageSize ?? 10 : void 0
   );
   const [internalSearch, setInternalSearch] = useState(toolbar?.defaultSearchValue ?? "");
+  const [internalHiddenKeys, setInternalHiddenKeys] = useState(
+    defaultHiddenColumnKeys ?? hiddenColumnKeys ?? []
+  );
   const [internalFilters, setInternalFilters] = useState(
     () => {
       const initial = {};
@@ -45,11 +68,42 @@ var DataTableWithToolbar = ({
       return initial;
     }
   );
+  const immediateTableLocale = useMemo(
+    () => locale ? getImmediateTigerLocale(locale) : void 0,
+    [locale]
+  );
+  const [resolvedTableLocale, setResolvedTableLocale] = useState(
+    immediateTableLocale
+  );
+  useEffect(() => {
+    let active = true;
+    setResolvedTableLocale(immediateTableLocale);
+    if (locale && isLazyTigerLocale(locale)) {
+      resolveTigerLocale(locale).then((nextLocale) => {
+        if (active) setResolvedTableLocale(nextLocale);
+      }).catch(() => {
+        if (active) setResolvedTableLocale(immediateTableLocale);
+      });
+    }
+    return () => {
+      active = false;
+    };
+  }, [locale, immediateTableLocale]);
+  const tableLocale = useMemo(
+    () => mergeTigerLocale(config.locale, resolvedTableLocale),
+    [config.locale, resolvedTableLocale]
+  );
+  const tableLabels = useMemo(() => getTableLabels(tableLocale, labels), [labels, tableLocale]);
   useEffect(() => {
     if (toolbar?.searchValue !== void 0) {
       setInternalSearch(toolbar.searchValue ?? "");
     }
   }, [toolbar?.searchValue]);
+  useEffect(() => {
+    if (hiddenColumnKeys !== void 0) {
+      setInternalHiddenKeys(hiddenColumnKeys);
+    }
+  }, [hiddenColumnKeys]);
   useEffect(() => {
     if (pagination && typeof pagination === "object") {
       previousPageSizeRef.current = pagination.pageSize ?? pagination.defaultPageSize ?? 10;
@@ -81,10 +135,22 @@ var DataTableWithToolbar = ({
   );
   const hasFilters = Boolean(toolbar?.filters && toolbar.filters.length > 0);
   const hasBulkActions = Boolean(toolbar?.bulkActions && toolbar.bulkActions.length > 0);
+  const hasColumnSettings = Boolean(toolbar?.showColumnSettings);
+  const resolvedHiddenKeys = hiddenColumnKeys ?? internalHiddenKeys;
+  const handleHiddenColumnsChange = (nextHiddenKeys) => {
+    if (hiddenColumnKeys === void 0) {
+      setInternalHiddenKeys(nextHiddenKeys);
+    }
+    onHiddenColumnsChange?.(nextHiddenKeys);
+  };
+  const handleToggleColumnVisibility = (columnKey, visible) => {
+    const nextHiddenKeys = visible ? resolvedHiddenKeys.filter((key) => key !== columnKey) : [...resolvedHiddenKeys, columnKey];
+    handleHiddenColumnsChange(nextHiddenKeys);
+  };
   const { bordered = false, ...remainingTableProps } = tableProps;
   const selectedKeys = toolbar?.selectedKeys ?? tableProps.rowSelection?.selectedRowKeys ?? [];
   const selectedCount = toolbar?.selectedCount ?? selectedKeys.length;
-  const bulkLabel = toolbar?.bulkActionsLabel ?? "\u5DF2\u9009\u62E9";
+  const bulkLabel = toolbar?.bulkActionsLabel ?? tableLabels.selectedText;
   const wrapperClasses = useMemo(
     () => classNames(
       "tiger-data-table-with-toolbar flex flex-col",
@@ -131,8 +197,72 @@ var DataTableWithToolbar = ({
     }
     previousPageSizeRef.current = pageSize;
   };
+  const renderColumnSettings = () => {
+    const lockedKeys = new Set(toolbar?.columnSettings?.lockedColumnKeys ?? []);
+    const panelTitle = toolbar?.columnSettings?.title ?? tableLabels.columnSettingsText;
+    return /* @__PURE__ */ jsx(
+      Popover,
+      {
+        trigger: "click",
+        placement: "bottom-end",
+        titleContent: panelTitle,
+        contentContent: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 min-w-[160px]", children: tableProps.columns.map((column) => {
+          const locked = lockedKeys.has(column.key) || column.hideable === false;
+          return /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "sm",
+              checked: !resolvedHiddenKeys.includes(column.key),
+              disabled: locked,
+              onChange: (checked) => handleToggleColumnVisibility(column.key, checked),
+              children: column.title
+            },
+            column.key
+          );
+        }) }),
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            className: "shrink-0 px-2",
+            "aria-label": tableLabels.columnSettingsAriaLabel,
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "w-3.5 h-3.5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  };
   const renderToolbar = () => {
-    if (!hasSearch && !hasFilters && !hasBulkActions) return null;
+    if (!hasSearch && !hasFilters && !hasBulkActions && !hasColumnSettings) return null;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -141,7 +271,7 @@ var DataTableWithToolbar = ({
           bordered ? "bg-[var(--tiger-surface-muted,#f9fafb)] dark:bg-gray-800/10 px-4 py-3.5 border-b border-[var(--tiger-border,#e5e7eb)]" : "bg-[var(--tiger-surface-muted,#f9fafb)]/80 dark:bg-gray-800/30 px-4 py-3.5 border border-[var(--tiger-border,#e5e7eb)] rounded-[var(--tiger-radius-md,0.5rem)] shadow-sm"
         ),
         role: "toolbar",
-        "aria-label": "\u6570\u636E\u8868\u683C\u5DE5\u5177\u680F",
+        "aria-label": tableLabels.toolbarAriaLabel,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap flex-1 min-w-0", children: [
             hasSearch ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[220px] sm:max-w-[320px]", children: [
@@ -151,7 +281,7 @@ var DataTableWithToolbar = ({
                   type: "search",
                   size: "sm",
                   value: searchValue,
-                  placeholder: toolbar?.searchPlaceholder ?? "\u641C\u7D22",
+                  placeholder: toolbar?.searchPlaceholder ?? tableLabels.searchPlaceholder,
                   prefix: /* @__PURE__ */ jsx(
                     "svg",
                     {
@@ -187,7 +317,7 @@ var DataTableWithToolbar = ({
                   className: "whitespace-nowrap shrink-0 rounded-[var(--tiger-radius-md,0.5rem)] px-3",
                   onClick: handleSearchSubmit,
                   disabled: !onSearch && !toolbar?.onSearch,
-                  children: toolbar?.searchButtonText ?? "\u641C\u7D22"
+                  children: toolbar?.searchButtonText ?? tableLabels.searchButtonText
                 }
               ) : null
             ] }) : null,
@@ -226,7 +356,8 @@ var DataTableWithToolbar = ({
                 bulkLabel,
                 " ",
                 selectedCount,
-                " \u9879"
+                " ",
+                tableLabels.selectedItemsText
               ] })
             ] }) : null,
             toolbar?.bulkActions?.map((action) => /* @__PURE__ */ jsx(
@@ -240,7 +371,8 @@ var DataTableWithToolbar = ({
               },
               action.key
             ))
-          ] }) : null
+          ] }) : null,
+          hasColumnSettings ? /* @__PURE__ */ jsx("div", { className: classNames("shrink-0", !hasBulkActions && "ml-auto"), children: renderColumnSettings() }) : null
         ]
       }
     );
@@ -251,7 +383,10 @@ var DataTableWithToolbar = ({
       Table,
       {
         ...remainingTableProps,
+        locale,
+        labels,
         bordered,
+        hiddenColumnKeys: resolvedHiddenKeys,
         pagination,
         className: classNames(tableClassName, bordered && "border-none rounded-none shadow-none"),
         onPageChange: handleTablePageChange

package/dist/{chunk-JNRUOQNT.js → chunk-36I5APFX.js}

@@ -1,6 +1,6 @@
 "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 _chunk6HELKWFNjs = require('./chunk-6HELKWFN.js');
+var _chunkJIFSUUGAjs = require('./chunk-JIFSUUGA.js');
 
 
 var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
@@ -84,7 +84,7 @@ var Popconfirm = ({
     floatingRef,
     actualPlacement,
     floatingStyles: baseFloatingStyles
-  } = _chunk6HELKWFNjs.usePopup.call(void 0, {
+  } = _chunkJIFSUUGAjs.usePopup.call(void 0, {
     open,
     defaultOpen,
     disabled,

package/dist/{chunk-C3NKZZQQ.js → chunk-AE2QE2C6.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _chunkAKZY7QYAjs = require('./chunk-AKZY7QYA.js');
+var _chunkJLQBG5XUjs = require('./chunk-JLQBG5XU.js');
 
 // src/components/DropdownItem.tsx
 var _react = require('react');
@@ -17,7 +17,7 @@ var DropdownItem = ({
   children,
   ...buttonProps
 }) => {
-  const context = _react.useContext.call(void 0, _chunkAKZY7QYAjs.DropdownContext);
+  const context = _react.useContext.call(void 0, _chunkJLQBG5XUjs.DropdownContext);
   const handleClick = (event) => {
     if (disabled) {
       event.preventDefault();

package/dist/{chunk-4XOWNEZA.mjs → chunk-C44WSDEY.mjs}

@@ -8,7 +8,9 @@ import {
 import { useCallback, useMemo, useRef, useState } from "react";
 import {
   getTransformOrigin,
-  buildTriggerHandlerMap
+  FLOATING_OVERLAY_Z_INDEX,
+  buildTriggerHandlerMap,
+  restoreFocus
 } from "@expcat/tigercat-core";
 function usePopup(options) {
   const {
@@ -46,6 +48,19 @@ function usePopup(options) {
     },
     [disabled, isControlled, onOpenChange]
   );
+  const restoreTriggerFocus = useCallback(() => {
+    const trigger2 = triggerRef.current;
+    const target = trigger2?.querySelector(
+      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
+    ) ?? trigger2;
+    window.setTimeout(() => {
+      restoreFocus(target, { preventScroll: true });
+    }, 0);
+  }, []);
+  const closeAndRestoreFocus = useCallback(() => {
+    setVisible(false);
+    restoreTriggerFocus();
+  }, [restoreTriggerFocus, setVisible]);
   const handleToggle = useCallback(() => {
     if (!disabled) setVisible(!currentVisible);
   }, [disabled, currentVisible, setVisible]);
@@ -59,12 +74,12 @@ function usePopup(options) {
   useClickOutside({
     enabled: currentVisible && effectiveTrigger === "click",
     refs: [containerRef, floatingRef],
-    onOutsideClick: () => setVisible(false),
+    onOutsideClick: closeAndRestoreFocus,
     defer: true
   });
   useEscapeKey({
     enabled: currentVisible && effectiveTrigger !== "manual",
-    onEscape: () => setVisible(false)
+    onEscape: closeAndRestoreFocus
   });
   const floatingStyles = useMemo(
     () => ({
@@ -72,7 +87,7 @@ function usePopup(options) {
       left: x,
       top: y,
       transformOrigin: getTransformOrigin(actualPlacement),
-      zIndex: 1e3
+      zIndex: FLOATING_OVERLAY_Z_INDEX
     }),
     [x, y, actualPlacement]
   );

package/dist/{chunk-6HELKWFN.js → chunk-JIFSUUGA.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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; }
+"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; }
 
 
 
@@ -9,6 +9,8 @@ var _react = require('react');
 
 
 
+
+
 var _tigercatcore = require('@expcat/tigercat-core');
 function usePopup(options) {
   const {
@@ -46,6 +48,19 @@ function usePopup(options) {
     },
     [disabled, isControlled, onOpenChange]
   );
+  const restoreTriggerFocus = _react.useCallback.call(void 0, () => {
+    const trigger2 = triggerRef.current;
+    const target = _nullishCoalesce(_optionalChain([trigger2, 'optionalAccess', _2 => _2.querySelector, 'call', _3 => _3(
+      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
+    )]), () => ( trigger2));
+    window.setTimeout(() => {
+      _tigercatcore.restoreFocus.call(void 0, target, { preventScroll: true });
+    }, 0);
+  }, []);
+  const closeAndRestoreFocus = _react.useCallback.call(void 0, () => {
+    setVisible(false);
+    restoreTriggerFocus();
+  }, [restoreTriggerFocus, setVisible]);
   const handleToggle = _react.useCallback.call(void 0, () => {
     if (!disabled) setVisible(!currentVisible);
   }, [disabled, currentVisible, setVisible]);
@@ -59,12 +74,12 @@ function usePopup(options) {
   _chunkSTTQ5LXXjs.useClickOutside.call(void 0, {
     enabled: currentVisible && effectiveTrigger === "click",
     refs: [containerRef, floatingRef],
-    onOutsideClick: () => setVisible(false),
+    onOutsideClick: closeAndRestoreFocus,
     defer: true
   });
   _chunkSTTQ5LXXjs.useEscapeKey.call(void 0, {
     enabled: currentVisible && effectiveTrigger !== "manual",
-    onEscape: () => setVisible(false)
+    onEscape: closeAndRestoreFocus
   });
   const floatingStyles = _react.useMemo.call(void 0, 
     () => ({
@@ -72,7 +87,7 @@ function usePopup(options) {
       left: x,
       top: y,
       transformOrigin: _tigercatcore.getTransformOrigin.call(void 0, actualPlacement),
-      zIndex: 1e3
+      zIndex: _tigercatcore.FLOATING_OVERLAY_Z_INDEX
     }),
     [x, y, actualPlacement]
   );

package/dist/{chunk-AKZY7QYA.js → chunk-JLQBG5XU.js}

@@ -2,6 +2,7 @@
 
 
 
+
 var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
 
 // src/components/Dropdown.tsx
@@ -28,6 +29,7 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 
 
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var _jsxruntime = require('react/jsx-runtime');
 var DropdownContext = _react.createContext.call(void 0, null);
@@ -50,6 +52,7 @@ var Dropdown = ({
   defaultOpen = false,
   closeOnClick = true,
   showArrow = true,
+  portal = true,
   className,
   style,
   onOpenChange,
@@ -125,7 +128,7 @@ var Dropdown = ({
   }, []);
   _chunkSTTQ5LXXjs.useClickOutside.call(void 0, {
     enabled: trigger === "click" && visible,
-    refs: [containerRef],
+    refs: [containerRef, floatingRef],
     onOutsideClick: () => setVisible(false)
   });
   _chunkSTTQ5LXXjs.useEscapeKey.call(void 0, {
@@ -151,12 +154,13 @@ var Dropdown = ({
     [className]
   );
   const triggerClasses = _react.useMemo.call(void 0, () => _tigercatcore.getDropdownTriggerClasses.call(void 0, disabled), [disabled]);
-  const menuWrapperClasses = _tigercatcore.classNames.call(void 0, "absolute z-50", _tigercatcore.DROPDOWN_ENTER_CLASS);
+  const menuWrapperClasses = _tigercatcore.classNames.call(void 0, "absolute", _tigercatcore.DROPDOWN_ENTER_CLASS);
   const menuWrapperStyles = _react.useMemo.call(void 0, 
     () => ({
       position: "absolute",
       left: x,
       top: y,
+      zIndex: _tigercatcore.FLOATING_OVERLAY_Z_INDEX,
       transformOrigin: _tigercatcore.getTransformOrigin.call(void 0, placement)
     }),
     [x, y, placement]
@@ -195,6 +199,22 @@ var Dropdown = ({
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: _tigercatcore.DROPDOWN_CHEVRON_PATH })
     }
   ) : null;
+  const menuWrapperNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref: floatingRef,
+      className: menuWrapperClasses,
+      style: menuWrapperStyles,
+      hidden: !visible,
+      "data-tiger-dropdown-menu": "",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onKeyDown: handleMenuKeyDown,
+      children: menuElement && _react2.default.isValidElement(menuElement) ? _react2.default.cloneElement(menuElement, {
+        id: menuId
+      }) : menuElement
+    }
+  );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
@@ -213,21 +233,7 @@ var Dropdown = ({
         ]
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "div",
-      {
-        ref: floatingRef,
-        className: menuWrapperClasses,
-        style: menuWrapperStyles,
-        hidden: !visible,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onKeyDown: handleMenuKeyDown,
-        children: menuElement && _react2.default.isValidElement(menuElement) ? _react2.default.cloneElement(menuElement, {
-          id: menuId
-        }) : menuElement
-      }
-    )
+    portal ? _chunkSTTQ5LXXjs.renderBodyPortal.call(void 0, menuWrapperNode) : menuWrapperNode
   ] }) });
 };