@expcat/tigercat-react 1.2.37 → 1.2.41

package/dist/{chunk-L2CAJUXH.js → chunk-LHBE3N3U.js}

@@ -1,28 +1,47 @@
 "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; }
 
-var _chunkMIINT2WVjs = require('./chunk-MIINT2WV.js');
+var _chunkXUETAIF3js = require('./chunk-XUETAIF3.js');
 
 
 var _chunk6Z4LLPZAjs = require('./chunk-6Z4LLPZA.js');
 
 
+var _chunkLYYL2JMPjs = require('./chunk-LYYL2JMP.js');
+
+
+var _chunkTDODFBBOjs = require('./chunk-TDODFBBO.js');
+
+
 var _chunkZYJTHGQWjs = require('./chunk-ZYJTHGQW.js');
 
 
+var _chunkF7H4ALKNjs = require('./chunk-F7H4ALKN.js');
+
+
 var _chunk56ZV3VVYjs = require('./chunk-56ZV3VVY.js');
 
 // src/components/DataTableWithToolbar.tsx
 var _react = require('react');
 
 
+
+
+
+
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var _jsxruntime = require('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 = _chunkTDODFBBOjs.useTigerConfig.call(void 0, );
   const previousPageSizeRef = _react.useRef.call(void 0, 
     pagination && typeof pagination === "object" ? _nullishCoalesce(_nullishCoalesce(pagination.pageSize, () => ( pagination.defaultPageSize)), () => ( 10)) : void 0
   );
   const [internalSearch, setInternalSearch] = _react.useState.call(void 0, _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _ => _.defaultSearchValue]), () => ( "")));
+  const [internalHiddenKeys, setInternalHiddenKeys] = _react.useState.call(void 0, 
+    _nullishCoalesce(_nullishCoalesce(defaultHiddenColumnKeys, () => ( hiddenColumnKeys)), () => ( []))
+  );
   const [internalFilters, setInternalFilters] = _react.useState.call(void 0, 
     () => {
       const initial = {};
@@ -45,11 +68,42 @@ var DataTableWithToolbar = ({
       return initial;
     }
   );
+  const immediateTableLocale = _react.useMemo.call(void 0, 
+    () => locale ? _tigercatcore.getImmediateTigerLocale.call(void 0, locale) : void 0,
+    [locale]
+  );
+  const [resolvedTableLocale, setResolvedTableLocale] = _react.useState.call(void 0, 
+    immediateTableLocale
+  );
+  _react.useEffect.call(void 0, () => {
+    let active = true;
+    setResolvedTableLocale(immediateTableLocale);
+    if (locale && _tigercatcore.isLazyTigerLocale.call(void 0, locale)) {
+      _tigercatcore.resolveTigerLocale.call(void 0, locale).then((nextLocale) => {
+        if (active) setResolvedTableLocale(nextLocale);
+      }).catch(() => {
+        if (active) setResolvedTableLocale(immediateTableLocale);
+      });
+    }
+    return () => {
+      active = false;
+    };
+  }, [locale, immediateTableLocale]);
+  const tableLocale = _react.useMemo.call(void 0, 
+    () => _tigercatcore.mergeTigerLocale.call(void 0, config.locale, resolvedTableLocale),
+    [config.locale, resolvedTableLocale]
+  );
+  const tableLabels = _react.useMemo.call(void 0, () => _tigercatcore.getTableLabels.call(void 0, tableLocale, labels), [labels, tableLocale]);
   _react.useEffect.call(void 0, () => {
     if (_optionalChain([toolbar, 'optionalAccess', _5 => _5.searchValue]) !== void 0) {
       setInternalSearch(_nullishCoalesce(toolbar.searchValue, () => ( "")));
     }
   }, [_optionalChain([toolbar, 'optionalAccess', _6 => _6.searchValue])]);
+  _react.useEffect.call(void 0, () => {
+    if (hiddenColumnKeys !== void 0) {
+      setInternalHiddenKeys(hiddenColumnKeys);
+    }
+  }, [hiddenColumnKeys]);
   _react.useEffect.call(void 0, () => {
     if (pagination && typeof pagination === "object") {
       previousPageSizeRef.current = _nullishCoalesce(_nullishCoalesce(pagination.pageSize, () => ( pagination.defaultPageSize)), () => ( 10));
@@ -81,10 +135,22 @@ var DataTableWithToolbar = ({
   );
   const hasFilters = Boolean(_optionalChain([toolbar, 'optionalAccess', _14 => _14.filters]) && toolbar.filters.length > 0);
   const hasBulkActions = Boolean(_optionalChain([toolbar, 'optionalAccess', _15 => _15.bulkActions]) && toolbar.bulkActions.length > 0);
+  const hasColumnSettings = Boolean(_optionalChain([toolbar, 'optionalAccess', _16 => _16.showColumnSettings]));
+  const resolvedHiddenKeys = _nullishCoalesce(hiddenColumnKeys, () => ( internalHiddenKeys));
+  const handleHiddenColumnsChange = (nextHiddenKeys) => {
+    if (hiddenColumnKeys === void 0) {
+      setInternalHiddenKeys(nextHiddenKeys);
+    }
+    _optionalChain([onHiddenColumnsChange, 'optionalCall', _17 => _17(nextHiddenKeys)]);
+  };
+  const handleToggleColumnVisibility = (columnKey, visible) => {
+    const nextHiddenKeys = visible ? resolvedHiddenKeys.filter((key) => key !== columnKey) : [...resolvedHiddenKeys, columnKey];
+    handleHiddenColumnsChange(nextHiddenKeys);
+  };
   const { bordered = false, ...remainingTableProps } = tableProps;
-  const selectedKeys = _nullishCoalesce(_nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _16 => _16.selectedKeys]), () => ( _optionalChain([tableProps, 'access', _17 => _17.rowSelection, 'optionalAccess', _18 => _18.selectedRowKeys]))), () => ( []));
-  const selectedCount = _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _19 => _19.selectedCount]), () => ( selectedKeys.length));
-  const bulkLabel = _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _20 => _20.bulkActionsLabel]), () => ( "\u5DF2\u9009\u62E9"));
+  const selectedKeys = _nullishCoalesce(_nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _18 => _18.selectedKeys]), () => ( _optionalChain([tableProps, 'access', _19 => _19.rowSelection, 'optionalAccess', _20 => _20.selectedRowKeys]))), () => ( []));
+  const selectedCount = _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _21 => _21.selectedCount]), () => ( selectedKeys.length));
+  const bulkLabel = _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _22 => _22.bulkActionsLabel]), () => ( tableLabels.selectedText));
   const wrapperClasses = _react.useMemo.call(void 0, 
     () => _tigercatcore.classNames.call(void 0, 
       "tiger-data-table-with-toolbar flex flex-col",
@@ -94,15 +160,15 @@ var DataTableWithToolbar = ({
     [className, bordered]
   );
   const handleSearchChange = (value) => {
-    if (_optionalChain([toolbar, 'optionalAccess', _21 => _21.searchValue]) === void 0) {
+    if (_optionalChain([toolbar, 'optionalAccess', _23 => _23.searchValue]) === void 0) {
       setInternalSearch(value);
     }
-    _optionalChain([onSearchChange, 'optionalCall', _22 => _22(value)]);
-    _optionalChain([toolbar, 'optionalAccess', _23 => _23.onSearchChange, 'optionalCall', _24 => _24(value)]);
+    _optionalChain([onSearchChange, 'optionalCall', _24 => _24(value)]);
+    _optionalChain([toolbar, 'optionalAccess', _25 => _25.onSearchChange, 'optionalCall', _26 => _26(value)]);
   };
   const handleSearchSubmit = () => {
-    _optionalChain([onSearch, 'optionalCall', _25 => _25(_nullishCoalesce(searchValue, () => ( "")))]);
-    _optionalChain([toolbar, 'optionalAccess', _26 => _26.onSearch, 'optionalCall', _27 => _27(_nullishCoalesce(searchValue, () => ( "")))]);
+    _optionalChain([onSearch, 'optionalCall', _27 => _27(_nullishCoalesce(searchValue, () => ( "")))]);
+    _optionalChain([toolbar, 'optionalAccess', _28 => _28.onSearch, 'optionalCall', _29 => _29(_nullishCoalesce(searchValue, () => ( "")))]);
   };
   const handleFilterSelect = (filter, value) => {
     const nextFilters = {
@@ -115,24 +181,88 @@ var DataTableWithToolbar = ({
         [filter.key]: value
       }));
     }
-    _optionalChain([onFiltersChange, 'optionalCall', _28 => _28(nextFilters)]);
-    _optionalChain([toolbar, 'optionalAccess', _29 => _29.onFiltersChange, 'optionalCall', _30 => _30(nextFilters)]);
+    _optionalChain([onFiltersChange, 'optionalCall', _30 => _30(nextFilters)]);
+    _optionalChain([toolbar, 'optionalAccess', _31 => _31.onFiltersChange, 'optionalCall', _32 => _32(nextFilters)]);
   };
   const handleBulkAction = (action) => {
     const keys = _nullishCoalesce(selectedKeys, () => ( []));
-    _optionalChain([action, 'access', _31 => _31.onClick, 'optionalCall', _32 => _32(keys)]);
-    _optionalChain([onBulkAction, 'optionalCall', _33 => _33(action, keys)]);
-    _optionalChain([toolbar, 'optionalAccess', _34 => _34.onBulkAction, 'optionalCall', _35 => _35(action, keys)]);
+    _optionalChain([action, 'access', _33 => _33.onClick, 'optionalCall', _34 => _34(keys)]);
+    _optionalChain([onBulkAction, 'optionalCall', _35 => _35(action, keys)]);
+    _optionalChain([toolbar, 'optionalAccess', _36 => _36.onBulkAction, 'optionalCall', _37 => _37(action, keys)]);
   };
   const handleTablePageChange = ({ current, pageSize }) => {
-    _optionalChain([onPageChange, 'optionalCall', _36 => _36(current, pageSize)]);
+    _optionalChain([onPageChange, 'optionalCall', _38 => _38(current, pageSize)]);
     if (previousPageSizeRef.current !== void 0 && previousPageSizeRef.current !== pageSize) {
-      _optionalChain([onPageSizeChange, 'optionalCall', _37 => _37(current, pageSize)]);
+      _optionalChain([onPageSizeChange, 'optionalCall', _39 => _39(current, pageSize)]);
     }
     previousPageSizeRef.current = pageSize;
   };
+  const renderColumnSettings = () => {
+    const lockedKeys = new Set(_nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _40 => _40.columnSettings, 'optionalAccess', _41 => _41.lockedColumnKeys]), () => ( [])));
+    const panelTitle = _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _42 => _42.columnSettings, 'optionalAccess', _43 => _43.title]), () => ( tableLabels.columnSettingsText));
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkLYYL2JMPjs.Popover,
+      {
+        trigger: "click",
+        placement: "bottom-end",
+        titleContent: panelTitle,
+        contentContent: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkF7H4ALKNjs.Checkbox,
+            {
+              size: "sm",
+              checked: !resolvedHiddenKeys.includes(column.key),
+              disabled: locked,
+              onChange: (checked) => handleToggleColumnVisibility(column.key, checked),
+              children: column.title
+            },
+            column.key
+          );
+        }) }),
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunk56ZV3VVYjs.Button,
+          {
+            size: "sm",
+            variant: "outline",
+            className: "shrink-0 px-2",
+            "aria-label": tableLabels.columnSettingsAriaLabel,
+            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "svg",
+              {
+                className: "w-3.5 h-3.5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "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__ */ _jsxruntime.jsx.call(void 0, 
+                    "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__ */ _jsxruntime.jsxs.call(void 0, 
       "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3 flex-wrap flex-1 min-w-0", children: [
             hasSearch ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "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: _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _38 => _38.searchPlaceholder]), () => ( "\u641C\u7D22")),
+                  placeholder: _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _44 => _44.searchPlaceholder]), () => ( tableLabels.searchPlaceholder)),
                   prefix: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "svg",
                     {
@@ -179,19 +309,19 @@ var DataTableWithToolbar = ({
                   }
                 }
               ),
-              _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _39 => _39.showSearchButton]), () => ( true)) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _45 => _45.showSearchButton]), () => ( true)) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _chunk56ZV3VVYjs.Button,
                 {
                   size: "sm",
                   variant: "primary",
                   className: "whitespace-nowrap shrink-0 rounded-[var(--tiger-radius-md,0.5rem)] px-3",
                   onClick: handleSearchSubmit,
-                  disabled: !onSearch && !_optionalChain([toolbar, 'optionalAccess', _40 => _40.onSearch]),
-                  children: _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _41 => _41.searchButtonText]), () => ( "\u641C\u7D22"))
+                  disabled: !onSearch && !_optionalChain([toolbar, 'optionalAccess', _46 => _46.onSearch]),
+                  children: _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _47 => _47.searchButtonText]), () => ( tableLabels.searchButtonText))
                 }
               ) : null
             ] }) : null,
-            hasFilters ? _optionalChain([toolbar, 'optionalAccess', _42 => _42.filters, 'optionalAccess', _43 => _43.map, 'call', _44 => _44((filter) => {
+            hasFilters ? _optionalChain([toolbar, 'optionalAccess', _48 => _48.filters, 'optionalAccess', _49 => _49.map, 'call', _50 => _50((filter) => {
               const currentValue = resolvedFilters[filter.key];
               const clearable = filter.clearable !== false;
               return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -226,10 +356,11 @@ var DataTableWithToolbar = ({
                 bulkLabel,
                 " ",
                 selectedCount,
-                " \u9879"
+                " ",
+                tableLabels.selectedItemsText
               ] })
             ] }) : null,
-            _optionalChain([toolbar, 'optionalAccess', _45 => _45.bulkActions, 'optionalAccess', _46 => _46.map, 'call', _47 => _47((action) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _optionalChain([toolbar, 'optionalAccess', _51 => _51.bulkActions, 'optionalAccess', _52 => _52.map, 'call', _53 => _53((action) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _chunk56ZV3VVYjs.Button,
               {
                 size: "sm",
@@ -240,7 +371,8 @@ var DataTableWithToolbar = ({
               },
               action.key
             ))])
-          ] }) : null
+          ] }) : null,
+          hasColumnSettings ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.classNames.call(void 0, "shrink-0", !hasBulkActions && "ml-auto"), children: renderColumnSettings() }) : null
         ]
       }
     );
@@ -248,10 +380,13 @@ var DataTableWithToolbar = ({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, "data-tiger-data-table-with-toolbar": true, children: [
     renderToolbar(),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkMIINT2WVjs.Table,
+      _chunkXUETAIF3js.Table,
       {
         ...remainingTableProps,
+        locale,
+        labels,
         bordered,
+        hiddenColumnKeys: resolvedHiddenKeys,
         pagination,
         className: _tigercatcore.classNames.call(void 0, tableClassName, bordered && "border-none rounded-none shadow-none"),
         onPageChange: handleTablePageChange

package/dist/{chunk-IAONLOJN.js → chunk-LYYL2JMP.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk6HELKWFNjs = require('./chunk-6HELKWFN.js');
+var _chunkJIFSUUGAjs = require('./chunk-JIFSUUGA.js');
 
 
 var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
@@ -41,7 +41,7 @@ var Popover = ({
   const popoverId = popoverIdRef.current;
   const titleId = `${popoverId}-title`;
   const contentId = `${popoverId}-content`;
-  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = _chunk6HELKWFNjs.usePopup.call(void 0, { open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
+  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = _chunkJIFSUUGAjs.usePopup.call(void 0, { open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
   const containerClasses = _react.useMemo.call(void 0, 
     () => _tigercatcore.classNames.call(void 0, _tigercatcore.getPopoverContainerClasses.call(void 0, ), className),
     [className]

package/dist/{chunk-UKBVJWP3.mjs → chunk-MV54EEKO.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-4XOWNEZA.mjs";
+} from "./chunk-C44WSDEY.mjs";
 import {
   renderBodyPortal
 } from "./chunk-SEWNVIHH.mjs";

package/dist/{chunk-KRFD27WA.js → chunk-OBY4FYRZ.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk6HELKWFNjs = require('./chunk-6HELKWFN.js');
+var _chunkJIFSUUGAjs = require('./chunk-JIFSUUGA.js');
 
 
 var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
@@ -34,7 +34,7 @@ var Tooltip = ({
   if (!tooltipIdRef.current) tooltipIdRef.current = createTooltipId();
   const tooltipId = tooltipIdRef.current;
   const describedBy = content != null ? tooltipId : void 0;
-  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = _chunk6HELKWFNjs.usePopup.call(void 0, { open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
+  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = _chunkJIFSUUGAjs.usePopup.call(void 0, { open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
   const containerClasses = _react.useMemo.call(void 0, 
     () => _tigercatcore.classNames.call(void 0, _tigercatcore.getTooltipContainerClasses.call(void 0, ), className),
     [className]

package/dist/{chunk-O4UDB6ZE.mjs → chunk-TANTMMR7.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-4XOWNEZA.mjs";
+} from "./chunk-C44WSDEY.mjs";
 import {
   renderBodyPortal
 } from "./chunk-SEWNVIHH.mjs";

package/dist/{chunk-WVTUGFWO.mjs → chunk-TYZNV54N.mjs}

@@ -1,4 +1,5 @@
 import {
+  renderBodyPortal,
   useClickOutside,
   useEscapeKey,
   useFloating
@@ -22,6 +23,7 @@ import {
   getDropdownMenuClasses,
   getTransformOrigin,
   injectDropdownStyles,
+  FLOATING_OVERLAY_Z_INDEX,
   DROPDOWN_CHEVRON_PATH,
   DROPDOWN_ENTER_CLASS,
   handleMenuNavigation,
@@ -50,6 +52,7 @@ var Dropdown = ({
   defaultOpen = false,
   closeOnClick = true,
   showArrow = true,
+  portal = true,
   className,
   style,
   onOpenChange,
@@ -125,7 +128,7 @@ var Dropdown = ({
   }, []);
   useClickOutside({
     enabled: trigger === "click" && visible,
-    refs: [containerRef],
+    refs: [containerRef, floatingRef],
     onOutsideClick: () => setVisible(false)
   });
   useEscapeKey({
@@ -151,12 +154,13 @@ var Dropdown = ({
     [className]
   );
   const triggerClasses = useMemo(() => getDropdownTriggerClasses(disabled), [disabled]);
-  const menuWrapperClasses = classNames("absolute z-50", DROPDOWN_ENTER_CLASS);
+  const menuWrapperClasses = classNames("absolute", DROPDOWN_ENTER_CLASS);
   const menuWrapperStyles = useMemo(
     () => ({
       position: "absolute",
       left: x,
       top: y,
+      zIndex: FLOATING_OVERLAY_Z_INDEX,
       transformOrigin: getTransformOrigin(placement)
     }),
     [x, y, placement]
@@ -195,6 +199,22 @@ var Dropdown = ({
       children: /* @__PURE__ */ jsx("path", { d: DROPDOWN_CHEVRON_PATH })
     }
   ) : null;
+  const menuWrapperNode = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: floatingRef,
+      className: menuWrapperClasses,
+      style: menuWrapperStyles,
+      hidden: !visible,
+      "data-tiger-dropdown-menu": "",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onKeyDown: handleMenuKeyDown,
+      children: menuElement && React.isValidElement(menuElement) ? React.cloneElement(menuElement, {
+        id: menuId
+      }) : menuElement
+    }
+  );
   return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -213,21 +233,7 @@ var Dropdown = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: floatingRef,
-        className: menuWrapperClasses,
-        style: menuWrapperStyles,
-        hidden: !visible,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onKeyDown: handleMenuKeyDown,
-        children: menuElement && React.isValidElement(menuElement) ? React.cloneElement(menuElement, {
-          id: menuId
-        }) : menuElement
-      }
-    )
+    portal ? renderBodyPortal(menuWrapperNode) : menuWrapperNode
   ] }) });
 };