@expcat/tigercat-react 1.2.39 → 1.2.41

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

@@ -1,15 +1,21 @@
 import {
   Table
-} from "./chunk-TSZKBVTA.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";
@@ -33,6 +39,9 @@ var DataTableWithToolbar = ({
   onSearch,
   onFiltersChange,
   onBulkAction,
+  hiddenColumnKeys,
+  defaultHiddenColumnKeys,
+  onHiddenColumnsChange,
   pagination = false,
   onPageChange,
   onPageSizeChange,
@@ -45,6 +54,9 @@ var DataTableWithToolbar = ({
     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 = {};
@@ -60,7 +72,9 @@ var DataTableWithToolbar = ({
     () => locale ? getImmediateTigerLocale(locale) : void 0,
     [locale]
   );
-  const [resolvedTableLocale, setResolvedTableLocale] = useState(immediateTableLocale);
+  const [resolvedTableLocale, setResolvedTableLocale] = useState(
+    immediateTableLocale
+  );
   useEffect(() => {
     let active = true;
     setResolvedTableLocale(immediateTableLocale);
@@ -79,15 +93,17 @@ var DataTableWithToolbar = ({
     () => mergeTigerLocale(config.locale, resolvedTableLocale),
     [config.locale, resolvedTableLocale]
   );
-  const tableLabels = useMemo(
-    () => getTableLabels(tableLocale, labels),
-    [labels, tableLocale]
-  );
+  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;
@@ -119,6 +135,18 @@ 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;
@@ -169,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",
       {
@@ -279,7 +371,8 @@ var DataTableWithToolbar = ({
               },
               action.key
             ))
-          ] }) : null
+          ] }) : null,
+          hasColumnSettings ? /* @__PURE__ */ jsx("div", { className: classNames("shrink-0", !hasBulkActions && "ml-auto"), children: renderColumnSettings() }) : null
         ]
       }
     );
@@ -293,6 +386,7 @@ var DataTableWithToolbar = ({
         locale,
         labels,
         bordered,
+        hiddenColumnKeys: resolvedHiddenKeys,
         pagination,
         className: classNames(tableClassName, bordered && "border-none rounded-none shadow-none"),
         onPageChange: handleTablePageChange

package/dist/{chunk-LJDILPI6.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 _chunk3LCISRAVjs = require('./chunk-3LCISRAV.js');
+var _chunkJIFSUUGAjs = require('./chunk-JIFSUUGA.js');
 
 
 var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
@@ -84,7 +84,7 @@ var Popconfirm = ({
     floatingRef,
     actualPlacement,
     floatingStyles: baseFloatingStyles
-  } = _chunk3LCISRAVjs.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-ZDEOTMXP.mjs → chunk-C44WSDEY.mjs}

@@ -8,6 +8,7 @@ import {
 import { useCallback, useMemo, useRef, useState } from "react";
 import {
   getTransformOrigin,
+  FLOATING_OVERLAY_Z_INDEX,
   buildTriggerHandlerMap,
   restoreFocus
 } from "@expcat/tigercat-core";
@@ -86,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-3LCISRAV.js → chunk-JIFSUUGA.js}

@@ -10,6 +10,7 @@ var _react = require('react');
 
 
 
+
 var _tigercatcore = require('@expcat/tigercat-core');
 function usePopup(options) {
   const {
@@ -86,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
   ] }) });
 };
 

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

@@ -1,17 +1,23 @@
 "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 _chunkM36PT6BSjs = require('./chunk-M36PT6BS.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
@@ -33,6 +39,9 @@ var DataTableWithToolbar = ({
   onSearch,
   onFiltersChange,
   onBulkAction,
+  hiddenColumnKeys,
+  defaultHiddenColumnKeys,
+  onHiddenColumnsChange,
   pagination = false,
   onPageChange,
   onPageSizeChange,
@@ -45,6 +54,9 @@ var DataTableWithToolbar = ({
     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 = {};
@@ -60,7 +72,9 @@ var DataTableWithToolbar = ({
     () => locale ? _tigercatcore.getImmediateTigerLocale.call(void 0, locale) : void 0,
     [locale]
   );
-  const [resolvedTableLocale, setResolvedTableLocale] = _react.useState.call(void 0, immediateTableLocale);
+  const [resolvedTableLocale, setResolvedTableLocale] = _react.useState.call(void 0, 
+    immediateTableLocale
+  );
   _react.useEffect.call(void 0, () => {
     let active = true;
     setResolvedTableLocale(immediateTableLocale);
@@ -79,15 +93,17 @@ var DataTableWithToolbar = ({
     () => _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]
-  );
+  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));
@@ -119,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]), () => ( tableLabels.selectedText));
+  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",
@@ -132,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 = {
@@ -153,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",
       {
@@ -189,7 +281,7 @@ var DataTableWithToolbar = ({
                   type: "search",
                   size: "sm",
                   value: searchValue,
-                  placeholder: _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _38 => _38.searchPlaceholder]), () => ( tableLabels.searchPlaceholder)),
+                  placeholder: _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _44 => _44.searchPlaceholder]), () => ( tableLabels.searchPlaceholder)),
                   prefix: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "svg",
                     {
@@ -217,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]), () => ( tableLabels.searchButtonText))
+                  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, 
@@ -268,7 +360,7 @@ var DataTableWithToolbar = ({
                 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",
@@ -279,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
         ]
       }
     );
@@ -287,12 +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, 
-      _chunkM36PT6BSjs.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-XU4TF2YA.js → chunk-LYYL2JMP.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk3LCISRAVjs = require('./chunk-3LCISRAV.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 } = _chunk3LCISRAVjs.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-LJARWKJT.mjs → chunk-MV54EEKO.mjs}

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