@economic/taco 1.36.0 → 1.37.0

package/dist/taco.cjs.development.js

@@ -1460,6 +1460,36 @@ function IconExport(props, svgRef) {
 }
 var Export = /*#__PURE__*/React.forwardRef(IconExport);
 
+function IconEyeOff(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.53 2.47a.75.75 0 00-1.06 1.06l3.605 3.605a10.258 10.258 0 00-4.097 6.208.75.75 0 101.466.314 8.757 8.757 0 013.71-5.443l1.987 1.988a4 4 0 005.656 5.656l5.673 5.672a.75.75 0 101.06-1.06l-18-18zm10.207 12.328l-3.535-3.535a2.5 2.5 0 003.535 3.535zM12.061 9L16 12.94A4 4 0 0012.06 9zM8.815 5.754l1.218 1.218a8.753 8.753 0 0110.523 6.685.75.75 0 101.467-.314C21.032 8.718 16.922 5.25 12 5.25c-1.112 0-2.182.177-3.185.504z",
+    fill: "currentColor"
+  }));
+}
+var EyeOff = /*#__PURE__*/React.forwardRef(IconEyeOff);
+
+function IconEyeOn(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.444 13.657a8.753 8.753 0 0117.112 0 .75.75 0 101.466-.314C21.033 8.718 16.922 5.25 12 5.25c-4.922 0-9.031 3.468-10.022 8.093a.75.75 0 101.466.314zM14.5 13a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.5 0a4 4 0 11-8 0 4 4 0 018 0z",
+    fill: "currentColor"
+  }));
+}
+var EyeOn = /*#__PURE__*/React.forwardRef(IconEyeOn);
+
 function IconFilterSolid(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3139,6 +3169,8 @@ const icons = {
   'export-to-excel': ExportToExcel,
   'export-to-pdf': ExportToPdf,
   export: Export,
+  'eye-off': EyeOff,
+  'eye-on': EyeOn,
   'filter-solid': FilterSolid,
   filter: Filter,
   'graph-solid': GraphSolid,
@@ -3960,6 +3992,7 @@ const defaultLocalisationTexts = {
         selectAll: 'Select all rows'
       },
       menu: {
+        hideColumn: 'Hide column',
         freezeColumns: (count = 1) => count === 1 ? 'Freeze the first column' : `Freeze first ${count} columns`,
         unfreezeColumns: 'Unfreeze all columns'
       }
@@ -9261,6 +9294,7 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
 const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSingle(props, ref) {
   const {
     children,
+    emptyValue,
     value,
     ...buttonProps
   } = props;
@@ -9273,7 +9307,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   const currentValue = children.find(matchesValue(value));
   let output;
   if (currentValue) {
-    if (tags) {
+    if (tags && emptyValue !== undefined && emptyValue !== value) {
       output = /*#__PURE__*/React__default.createElement(Tag$1, {
         className: "truncate",
         color: currentValue.props.color,
@@ -9297,6 +9331,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   var _buttonRef$current;
   const {
     children,
+    emptyValue: _,
     values = [],
     ...buttonProps
   } = props;
@@ -9612,7 +9647,7 @@ const getNextColor = options => {
   }, {});
   const colors = Object.keys(occurences);
   if (colors.length) {
-    return colors.sort((a, b) => occurences[b] - occurences[a])[0];
+    return colors.sort((a, b) => occurences[a] - occurences[b])[0];
   }
   return undefined;
 };
@@ -9847,6 +9882,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     "data-taco": "Select2"
   }, /*#__PURE__*/React__default.createElement(Trigger$7, Object.assign({}, otherProps, {
     "aria-haspopup": "listbox",
+    emptyValue: emptyValue,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     ref: internalRef
@@ -12871,7 +12907,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
 }));
 
 const Header$1 = function Header(props) {
-  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8, _header$column$column9;
+  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8;
   const {
     header,
     index,
@@ -12977,8 +13013,7 @@ const Header$1 = function Header(props) {
       className: "pointer-events-none -my-0.5"
     })
   }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu2 !== void 0 ? _asc$desc$header$colu2 : null), !isInternalColumn(header.column.id) && ((_header$column$column8 = header.column.columnDef.meta) !== null && _header$column$column8 !== void 0 && _header$column$column8.menu || enableColumnFreezing) ? /*#__PURE__*/React__default.createElement(HeaderMenu, {
-    menu: (_header$column$column9 = header.column.columnDef.meta) === null || _header$column$column9 === void 0 ? void 0 : _header$column$column9.menu,
-    enableColumnFreezing: enableColumnFreezing,
+    header: header,
     table: table,
     columnIndex: index
   }) : null), header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -13003,46 +13038,62 @@ const Header$1 = function Header(props) {
   }))) : null);
 };
 const HeaderMenu = ({
-  menu,
-  enableColumnFreezing,
+  header,
   table,
   columnIndex
 }) => {
+  var _header$column$column9;
   const [open, setOpen] = React__default.useState(false);
   const {
     texts
   } = useLocalization();
+  const menu = (_header$column$column9 = header.column.columnDef.meta) === null || _header$column$column9 === void 0 ? void 0 : _header$column$column9.menu;
+  const meta = table.options.meta;
   const {
     frozenColumnsCount,
     setFrozenColumnsCount
-  } = table.options.meta;
+  } = meta;
   const columns = table.getVisibleLeafColumns();
   const {
     columnVisibility,
     columnOrder
   } = table.getState();
   const visibleInternalColumnsCount = React__default.useMemo(() => columns.filter(column => isInternalFrozenColumn(column.id)).length, [columns]);
-  const columnPosition = columnIndex + 1;
-  const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;
-  const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;
-  const freeAllColumns = () => {
-    setFrozenColumnsCount(0);
-  };
-  const freezeColumns = () => {
-    setFrozenColumnsCount(externalFrozenColumnsCount);
-  };
   const className = cn('-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex', {
     '!flex': open
   });
-  const freezeMenuItems = [/*#__PURE__*/React__default.createElement(Menu$1.Item, {
-    icon: "column-freeze",
-    onClick: freezeColumns,
-    key: "_freeze-columns_"
-  }, texts.table2.columns.menu.freezeColumns(externalFrozenColumnsCount)), ...(isSomeExternalColumnFrozen ? [/*#__PURE__*/React__default.createElement(Menu$1.Item, {
-    icon: "column-unfreeze",
-    onClick: freeAllColumns,
-    key: "_unfreeze-columns_"
-  }, texts.table2.columns.menu.unfreezeColumns)] : [])];
+  const menuItems = [];
+  if (table.options.enableHiding) {
+    // we do this in the next tick, otherwise the menu closes and react throws a "state update on unmounted component" error
+    const handleClick = () => setTimeout(() => header.column.toggleVisibility(), 1);
+    menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      icon: "eye-off",
+      onClick: handleClick
+    }, texts.table2.columns.menu.hideColumn));
+  }
+  if (meta.enableColumnFreezing) {
+    const columnPosition = columnIndex + 1;
+    const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;
+    const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;
+    const freeAllColumns = () => {
+      setFrozenColumnsCount(0);
+    };
+    const freezeColumns = () => {
+      setFrozenColumnsCount(externalFrozenColumnsCount);
+    };
+    menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      icon: "column-freeze",
+      onClick: freezeColumns,
+      key: "_freeze-columns_"
+    }, texts.table2.columns.menu.freezeColumns(externalFrozenColumnsCount)));
+    if (isSomeExternalColumnFrozen) {
+      menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+        icon: "column-unfreeze",
+        onClick: freeAllColumns,
+        key: "_unfreeze-columns_"
+      }, texts.table2.columns.menu.unfreezeColumns));
+    }
+  }
   React__default.useEffect(() => {
     // Update column pinning/freezing whenever frozen columns count changes, or column order or visiblity changes
     const totalFrozenColumnsCount = visibleInternalColumnsCount + frozenColumnsCount;
@@ -13059,23 +13110,21 @@ const HeaderMenu = ({
     open: open,
     onChange: setOpen
   };
-  let menuComponent = null;
   if (menu) {
-    menuComponent = menu(menuProps);
-    if (enableColumnFreezing) {
-      const menuContent = React__default.Children.only(menuComponent.props.children);
-      const menuContentChildren = React__default.Children.toArray(menuContent.props.children);
-      const menuItemsWithFreezingItems = [...menuContentChildren, /*#__PURE__*/React__default.createElement(Menu$1.Separator, null), ...freezeMenuItems];
-      const menuContentWithFreezingItems = /*#__PURE__*/React__default.createElement(Menu$1.Content, null, menuItemsWithFreezingItems.map((item, key) => /*#__PURE__*/React__default.cloneElement(item, {
-        key
-      })));
-      menuComponent = /*#__PURE__*/React__default.cloneElement(menuComponent, {
-        children: menuContentWithFreezingItems
-      });
+    const customMenu = menu({
+      trigger: undefined
+    });
+    const customItems = React__default.Children.toArray(customMenu.props.children.props.children);
+    if (customItems.length) {
+      if (menuItems.length) {
+        menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Separator, null));
+      }
+      menuItems.push(...customItems);
     }
-  } else if (enableColumnFreezing) {
-    menuComponent = /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, freezeMenuItems));
   }
+  const menuComponent = /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, menuItems.map((item, key) => /*#__PURE__*/React__default.cloneElement(item, {
+    key
+  }))));
   // This div catches the mousedown events from menu item and menu trigger and prevents
   // mousedown event from bubbling up to the Header component to prevent toggling sorting
   return menuComponent ? /*#__PURE__*/React__default.createElement("div", {