@economic/taco 2.12.0 → 2.13.0

package/dist/taco.cjs.development.js

@@ -4426,6 +4426,7 @@ const defaultLocalisationTexts = {
         condition: 'Condition',
         value: 'Value'
       },
+      hiddenColumn: 'Hidden column',
       tooltip: 'Apply filters',
       total: 'Viewing [CURRENT] of [TOTAL]'
     },
@@ -5558,7 +5559,7 @@ const useCombobox = ({
   // event handlers
   const handleInputBlur = event => {
     event.persist();
-    if (event.relatedTarget === listRef.current) {
+    if (listRef.current && event.relatedTarget === listRef.current) {
       event.preventDefault();
       return;
     }
@@ -6740,7 +6741,10 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
   }, dragHandleProps, {
     "data-testid": "resize-handler",
     ref: dragHandlerRef
-  })), showCloseButton ? /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
+  }), dragging ? /*#__PURE__*/React__default.createElement("div", {
+    "data-testid": "resize-hit-area",
+    className: "fixed bottom-0 left-0 right-0 top-0"
+  }) : null), showCloseButton ? /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
     "aria-label": texts.drawer.close,
     className: "absolute right-0 top-0 mr-2 mt-4",
@@ -9851,7 +9855,8 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     children,
     color,
     description,
-    icon,
+    prefix,
+    postfix,
     className: cName,
     ...otherProps
   } = props;
@@ -9905,14 +9910,20 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
   }) : null, isTag ? /*#__PURE__*/React__default.createElement(Tag$1, {
     className: "pointer-events-none my-1",
     color: color,
-    icon: icon
-  }, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon ? typeof icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    name: icon
-  }) : icon : null, /*#__PURE__*/React__default.createElement("span", {
+    icon: prefix
+  }, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, prefix ? typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: prefix
+  }) : prefix : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex w-full justify-between"
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: "flex flex-col"
   }, /*#__PURE__*/React__default.createElement("span", null, children), description ? /*#__PURE__*/React__default.createElement("span", {
     className: "text-grey-700 -mt-1.5 mb-1.5 text-xs"
-  }, description) : null)), popover ? /*#__PURE__*/React__default.createElement(IconButton, {
+  }, description) : null), /*#__PURE__*/React__default.createElement("span", {
+    className: "mt-1 flex flex-col"
+  }, postfix ? typeof postfix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: postfix
+  }) : postfix : null))), popover ? /*#__PURE__*/React__default.createElement(IconButton, {
     icon: "ellipsis-vertical",
     appearance: "discrete",
     className: cn('group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible', {
@@ -10062,13 +10073,14 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
         className: "truncate",
         color: currentValue.props.color,
         disabled: disabled,
-        icon: currentValue.props.icon,
+        icon: currentValue.props.prefix,
         readOnly: readOnly
       }, currentValue.props.children);
     } else {
-      output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.icon ? typeof currentValue.props.icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-        name: currentValue.props.icon
-      }) : currentValue.props.icon : null, currentValue.props.children);
+      output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.prefix ? typeof currentValue.props.prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+        name: currentValue.props.prefix,
+        className: "mr-1 !h-5 !w-5"
+      }) : currentValue.props.prefix : null, currentValue.props.children);
     }
   }
   return /*#__PURE__*/React__default.createElement(Button$2, Object.assign({}, buttonProps, {
@@ -10115,7 +10127,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
       className: "truncate",
       color: tags ? child.props.color : undefined,
       disabled: disabled,
-      icon: child.props.icon,
+      icon: child.props.prefix,
       onDelete: event => {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -10183,7 +10195,7 @@ const MultipleValue = ({
       }),
       color: tags ? child.props.color : undefined,
       disabled: disabled,
-      icon: child.props.icon,
+      icon: child.props.prefix,
       onDelete: open ? createClickHandler(child.props.value) : undefined,
       readOnly: readOnly
     }, child.props.children);
@@ -16194,6 +16206,7 @@ function Header$2(props) {
     children,
     column,
     header,
+    hasSeparator,
     scrollToIndex,
     table
   } = props;
@@ -16229,10 +16242,13 @@ function Header$2(props) {
     canResize: column.getCanResize(),
     canSort,
     children: children !== null && children !== void 0 ? children : columnMeta.header,
+    colSpan: header.colSpan,
     hasMenu: isMenuAvailable(table, header),
+    hasSeparator,
     id: header.id,
     index: header.index,
     isFrozen: isFrozenColumn(header, table),
+    isPlaceholder: header.isPlaceholder,
     isPrinting: tableMeta.isPrinting,
     isResizing: column.getIsResizing(),
     length: table.getRowModel().rows.length,
@@ -16257,10 +16273,13 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     canHide,
     canResize,
     canSort,
+    colSpan,
     hasMenu,
+    hasSeparator,
     id,
     index,
     isFrozen,
+    isPlaceholder,
     isPrinting,
     isResizing,
     length,
@@ -16274,19 +16293,22 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     sortDirection,
     table
   } = props;
-  const className = cn('sticky top-0 border-b-2 font-bold box-content group/column relative', '[[role="table"][data-resizing="true"]_&]:pointer-events-none', 'px-[var(--table3-cell-padding-x)]', {
+  const className = cn('sticky font-bold border-b-2 box-content group/column relative', '[[role="table"][data-resizing="true"]_&]:pointer-events-none', 'px-[var(--table3-cell-padding-x)]', {
+    '!border-white': isPlaceholder,
     'h-10 items-center': !isPrinting,
     'pb-2': isPrinting,
     'cursor-pointer select-none': canSort,
-    'hover:bg-grey-100': canSort || canResize || hasMenu,
+    'hover:bg-grey-100': !isPlaceholder && (canSort || canResize || hasMenu),
     'focus-within:bg-grey-100': hasMenu,
-    '!pointer-events-all !bg-grey-100': isResizing,
+    '!pointer-events-all !bg-grey-100': !isPlaceholder && isResizing,
     // z-indexes
     'z-10 hover:z-20': !isFrozen && !isResizing,
     'z-20': !isFrozen && isResizing,
-    '!z-30': isFrozen,
+    // when column is frozen, we need to increase it's z-index when it's hovered,
+    // so that resize handler appears on top of next frozen cell, and didn't get cut by it.
+    '!z-30 hover:!z-40': isFrozen,
     '!z-40': isFrozen && isResizing
-  }, meta.headerClassName);
+  }, colSpan > 1 ? `col-span-${colSpan}` : '', meta.headerClassName);
   const [internalRef, setInternalRef] = React__default.useState(null);
   React__default.useLayoutEffect(() => {
     if (internalRef && length) {
@@ -16309,7 +16331,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-column-index": index,
     role: "columnheader",
     ref: setInternalRef
-  }), isInternalColumn$1(id) ? children : /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), isPlaceholder ? null : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isInternalColumn$1(id) ? children : /*#__PURE__*/React__default.createElement(Tooltip, {
     title: String((_meta$tooltip = meta === null || meta === void 0 ? void 0 : meta.tooltip) !== null && _meta$tooltip !== void 0 ? _meta$tooltip : children),
     placement: "top"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -16334,11 +16356,19 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     scrollToIndex: scrollToIndex,
     sortDirection: sortDirection,
     table: table
-  }) : null, canResize ? /*#__PURE__*/React__default.createElement(Resizer, {
+  }) : null), hasSeparator ? /*#__PURE__*/React__default.createElement(HeaderSeparator, null) : null, !isPlaceholder && canResize ? /*#__PURE__*/React__default.createElement(Resizer, {
     isResizing: isResizing,
     onResize: handleResize
   }) : null);
 });
+function HeaderSeparator() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-taco": "header-separator",
+    className: cn('invisible absolute right-[0.5px] top-0 flex h-full w-2 touch-none select-none justify-center py-2 group-hover/header:visible')
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('bg-grey-300 h-full w-[1px]')
+  }));
+}
 
 const RowContext$1 = /*#__PURE__*/React__default.createContext({
   isHovered: false,
@@ -17552,6 +17582,7 @@ const savingIndicatorHideDelay = 3000;
 const COLUMN_ID$1 = '__editing_actions';
 const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   const {
+    hasChanges,
     isCurrentRow,
     isEditing,
     row,
@@ -17560,8 +17591,6 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
   const tableMeta = table.options.meta;
   const savingState = tableMeta.editing.savingStates && tableMeta.editing.savingStates[row.id];
   const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React__default.useState(false);
-  const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];
-  const isRowInEditingState = changeset.indexOf(row.id) >= 0;
   const {
     texts
   } = useLocalization();
@@ -17583,14 +17612,14 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
         title: texts.table3.editing.saving.progress
       }, /*#__PURE__*/React__default.createElement(Spinner, {
         delay: 0,
-        className: "!text-grey-700 mr-1.5 !h-5 !w-5"
+        className: "!text-grey-700 mr-1 !h-5 !w-5"
       }));
     } else if (isSavedIndicatorVisible) {
       content = /*#__PURE__*/React__default.createElement(Tooltip, {
         title: texts.table3.editing.saving.complete
       }, /*#__PURE__*/React__default.createElement(Icon, {
         name: "tick",
-        className: "!text-grey-700 mr-1"
+        className: "!text-grey-700 mr-1 !h-5 !w-5"
       }));
     }
   }
@@ -17601,11 +17630,11 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
       icon: "more",
       menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "tick",
-        disabled: !isRowInEditingState,
+        disabled: !hasChanges,
         onClick: () => tableMeta.editing.saveChangesIfNeeded()
       }, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "close",
-        disabled: !isRowInEditingState,
+        disabled: !hasChanges,
         onClick: () => tableMeta.editing.resetChange(row.id)
       }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "undo",
@@ -17614,12 +17643,15 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
       tabIndex: isCurrentRow ? 0 : -1
     }));
   }
+  const contentClassName = cn('flex items-center justify-end text-right', {
+    '-mb-2 -mt-2': isCurrentRow
+  });
   return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, {
     className: cn({
       '!sticky': !!content
     })
   }), content ? /*#__PURE__*/React__default.createElement("span", {
-    className: "-mb-2 -mt-2 flex items-center justify-end text-right"
+    className: contentClassName
   }, content) : undefined);
 });
 function Cell$2(props) {
@@ -17627,12 +17659,14 @@ function Cell$2(props) {
     rowIndex
   } = React__default.useContext(RowContext$1);
   const tableMeta = props.table.options.meta;
+  const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];
   return /*#__PURE__*/React__default.createElement(MemoedCell$1, Object.assign({}, props, {
+    hasChanges: changeset.indexOf(props.row.id) >= 0,
     isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
     isEditing: tableMeta.editing.isEditing
   }));
 }
-const EDITING_ACTIONS_WIDTH = 45;
+const EDITING_ACTIONS_WIDTH = 60;
 function createRowEditingActionsColumn() {
   return {
     id: COLUMN_ID$1,
@@ -17641,7 +17675,7 @@ function createRowEditingActionsColumn() {
     footer: Footer$4,
     meta: {
       align: 'right',
-      className: cn('items-center print:opacity-0 [[role="table"][data-editing="true"]_&]:group-[[data-current="true"]]/row:sticky right-0 !pl-0 !pr-1', '[[role="table"][data-editing="true"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px] [[role="table"][data-pause-hover="false"][data-editing="true"]_&]:group-hover/row:shadow-[-6px_0px_6px]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
+      className: cn('items-center print:opacity-0 [[role="table"][data-editing="true"]_&]:group-[[data-current="true"]]/row:sticky right-0 !pl-0 !pr-1', '[[role="table"][data-editing="true"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
@@ -18575,6 +18609,69 @@ function createRowDragColumn(onRowDrag) {
   };
 }
 
+function Group$3(props) {
+  const {
+    children,
+    column,
+    header,
+    table,
+    hasSeparator
+  } = props;
+  const columnMeta = React__default.useMemo(() => column.columnDef.meta, []);
+  const tableMeta = table.options.meta;
+  const memoedProps = {
+    align: 'center',
+    children: children !== null && children !== void 0 ? children : columnMeta.header,
+    colSpan: header.colSpan,
+    hasSeparator,
+    id: header.id,
+    index: header.index,
+    isPrinting: tableMeta.isPrinting,
+    length: table.getRowModel().rows.length,
+    meta: columnMeta,
+    table
+  };
+  return /*#__PURE__*/React__default.createElement(MemoedGroup, Object.assign({}, memoedProps));
+}
+const MemoedGroup = /*#__PURE__*/React__default.memo(function MemoedGroup(props) {
+  var _meta$tooltip;
+  const {
+    align,
+    children,
+    colSpan,
+    hasSeparator,
+    id,
+    isPrinting,
+    meta,
+    table
+  } = props;
+  const containerClassName = cn('sticky px-2 mb-[2px]', {
+    'h-10': !isPrinting
+  }, colSpan > 1 ? `col-span-${colSpan}` : '');
+  const innerClassName = cn('font-bold box-content group/column relative', 'px-[var(--table3-cell-padding-x)]', {
+    'h-full items-center': !isPrinting,
+    'pb-2': isPrinting,
+    'border-b-2': !!children
+  }, meta.headerClassName);
+  if (table.options.debugAll) {
+    console.log('header group render', id);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: containerClassName,
+    "data-taco": "table3-column-group",
+    "data-align": align
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: innerClassName
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: String((_meta$tooltip = meta === null || meta === void 0 ? void 0 : meta.tooltip) !== null && _meta$tooltip !== void 0 ? _meta$tooltip : children),
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: cn({
+      truncate: !isPrinting
+    })
+  }, children)), hasSeparator ? /*#__PURE__*/React__default.createElement(HeaderSeparator, null) : null));
+});
+
 function getSortingFn$1(dataType, customFnOrBuiltIn) {
   if (typeof customFnOrBuiltIn === 'function') {
     return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);
@@ -18596,13 +18693,12 @@ function useConvertChildrenToColumns(props, options, editing) {
   return React__default.useMemo(() => {
     var _props$actionsForRow;
     const columnHelper = reactTable$1.createColumnHelper();
-    const columns = [];
     const defaultColumnSizing = {};
     const defaultColumnVisibility = {};
     const defaultSorting = [];
-    React__default.Children.toArray(props.children).filter(child => !!child) // remove falsey children
-    .forEach(child => {
-      if ( /*#__PURE__*/React__default.isValidElement(child) && child.props.accessor) {
+    function processChild(child) {
+      var _child$type, _child$type2;
+      if ( /*#__PURE__*/React__default.isValidElement(child) && ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'Table3Column' && child.props.accessor) {
         var _child$props$enableRe, _child$props$enableFi, _child$props$enableSo, _child$props$enableHi, _child$props$enableOr, _child$props$enablePr, _child$props$enableSe, _child$props$enableTr;
         if (child.props.defaultWidth) {
           defaultColumnSizing[child.props.accessor] = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
@@ -18616,7 +18712,8 @@ function useConvertChildrenToColumns(props, options, editing) {
             desc: child.props.sort === 'desc'
           });
         }
-        columns.push({
+        // return regular column definition
+        return {
           accessorKey: child.props.accessor,
           id: child.props.accessor,
           header: Header$2,
@@ -18653,9 +18750,31 @@ function useConvertChildrenToColumns(props, options, editing) {
             renderer: child.props.renderer,
             tooltip: child.props.tooltip
           }
+        };
+      } else if ( /*#__PURE__*/React__default.isValidElement(child) && ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'Table3Group' && child.props.children) {
+        // return column group definition
+        return columnHelper.group({
+          id: child.props.id,
+          header: Group$3,
+          columns: processChildren(child.props.children),
+          meta: {
+            align: 'center',
+            enableOrdering: false,
+            enableSearch: false,
+            enableTruncate: false,
+            header: child.props.header
+          }
         });
       }
-    });
+      return;
+    }
+    function processChildren(children) {
+      return React__default.Children.toArray(children).map(processChild)
+      // compiler cannot get filtering out undefined items, so using the type casting here
+      .filter(child => !!child); // need to remove undefined array items after processing the children
+    }
+
+    const columns = processChildren(props.children);
     if (options.enableRowExpansion && props.expandedRowRenderer) {
       columns.unshift(columnHelper.display(createRowExpansionColumn$1(props.expandedRowRenderer)));
     }
@@ -18677,7 +18796,7 @@ function useConvertChildrenToColumns(props, options, editing) {
       defaultColumnVisibility,
       defaultSorting
     };
-  }, []);
+  }, [editing.isEditing]);
 }
 
 function usePrinting(isEnabled, loadAll, showWarningWhenPrintingLargeDataset = true) {
@@ -19700,18 +19819,27 @@ function FilterColumn(props) {
     value = null,
     ...attributes
   } = props;
+  const {
+    texts
+  } = useLocalization();
   return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
     className: "!w-32 flex-shrink-0",
     emptyValue: null,
     onChange: handleChange,
     value: value
   }), allColumns.map(column => {
-    var _column$columnDef$met;
+    var _column$columnDef$met, _column$parent, _column$parent$column;
     return /*#__PURE__*/React__default.createElement(Select2.Option, {
       key: column.id,
       value: column.id,
+      postfix: !column.getIsVisible() ? /*#__PURE__*/React__default.createElement(Tooltip, {
+        title: texts.table3.filters.hiddenColumn
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        name: "eye-off",
+        className: "text-grey-500"
+      })) : undefined,
       disabled: column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))
-    }, (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header);
+    }, ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header) + (column.parent ? ` (${(_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef.meta) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header})` : ''));
   }));
 }
 
@@ -20715,7 +20843,7 @@ function RowHeight(props) {
 }
 
 const Column$4 = /*#__PURE__*/React__default.forwardRef(function Column(props, ref) {
-  var _column$columnDef$met;
+  var _column$parent, _column$parent$column, _column$columnDef$met;
   const {
     column,
     draggable = false,
@@ -20729,6 +20857,7 @@ const Column$4 = /*#__PURE__*/React__default.forwardRef(function Column(props, r
   });
   const attributes = draggable ? dragAttributes : undefined;
   const isVisible = column.getIsVisible();
+  const parentText = column.parent ? (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef.meta) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header : null;
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     key: column.id,
     className: className,
@@ -20739,7 +20868,9 @@ const Column$4 = /*#__PURE__*/React__default.forwardRef(function Column(props, r
     className: "text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5"
   }) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex-grow truncate"
-  }, (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header), canHide ? /*#__PURE__*/React__default.createElement(Checkbox, {
+  }, (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header, parentText ? /*#__PURE__*/React__default.createElement("span", {
+    className: "italic"
+  }, " (", parentText, ")") : null), canHide ? /*#__PURE__*/React__default.createElement(Checkbox, {
     checked: isVisible,
     onChange: () => column.toggleVisibility(!isVisible)
   }) : null);
@@ -20757,8 +20888,8 @@ function ColumnSettingsPopover(props) {
   const allColumns = table.getAllLeafColumns();
   const tableMeta = table.options.meta;
   const columns = React__default.useMemo(() => allColumns.filter(column => !isInternalColumn$1(column.id)).filter(column => {
-    var _column$columnDef$met2;
-    return query !== null && query !== void 0 && query.length ? (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.header.toLowerCase().includes(query.toLowerCase()) : true;
+    var _column$columnDef$met2, _column$parent2, _column$parent2$colum;
+    return query !== null && query !== void 0 && query.length ? ((_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.header.toLowerCase().includes(query.toLowerCase())) || ((_column$parent2 = column.parent) === null || _column$parent2 === void 0 ? void 0 : (_column$parent2$colum = _column$parent2.columnDef.meta) === null || _column$parent2$colum === void 0 ? void 0 : _column$parent2$colum.header.toLowerCase().includes(query.toLowerCase())) : true;
   }), [allColumns, query]);
   const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';
   const handleReorder = (activeId, overId) => {
@@ -20773,7 +20904,7 @@ function ColumnSettingsPopover(props) {
   return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
     anchor: trigger
   }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-60 flex-col gap-2"
+    className: "flex max-w-sm flex-col gap-2"
   }, table.options.enableHiding ? /*#__PURE__*/React__default.createElement(Input, {
     onChange: event => setQuery(event.target.value),
     placeholder: texts.table3.columnSettings.search,
@@ -21052,6 +21183,26 @@ const useCssVars = (height, fontSize) => {
   };
 };
 
+// header height: 40px, border bottom height: 2px;
+const HEADER_COLUMN_HEIGHT = 42;
+function getHeaderTopOffset(depth) {
+  return HEADER_COLUMN_HEIGHT * (depth - 1);
+}
+function useHeaderOffsetStyle(tableId, table) {
+  const headers = table.getFlatHeaders();
+  const style = React__default.useMemo(() => {
+    // 'new Set' will remove all duplicates and leave only unique values,
+    // in the end we should get only one depht value per array item, example: [1, 2, 3], which we will iterate through later.
+    const headerDepths = [...new Set(headers.map(header => header.depth))];
+    return headerDepths.map(depth => {
+      return `#${tableId} [data-taco="table2-header"] [role="row"]:nth-child(${depth}) [role="columnheader"],
+                #${tableId} [data-taco="table2-header"] [role="row"]:nth-child(${depth}) [data-taco="table3-column-group"]
+                    { top: ${getHeaderTopOffset(depth)}px }`;
+    }).join('\r\n');
+  }, [headers, tableId]);
+  return style;
+}
+
 function useTable3DataLoader(fetch, fetchAll, options = {
   pageSize: 100
 }) {
@@ -21180,6 +21331,11 @@ function useTable3DataLoader(fetch, fetchAll, options = {
 function Column$5(_) {
   return null;
 }
+Column$5.displayName = 'Table3Column';
+function Group$4(_) {
+  return null;
+}
+Group$4.displayName = 'Table3Group';
 // Cast the old forwardRef to the new one
 const fixedForwardRef = React__default.forwardRef;
 const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
@@ -21272,10 +21428,13 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     opacity: 0.999
   };
   const columnFreezingStyle = useColumnFreezingStyle(props.id, table);
+  const headerOffsetStyle = useHeaderOffsetStyle(props.id, table);
   const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnFreezingStyle ? /*#__PURE__*/React__default.createElement("style", {
     "data-taco": "table3-column-freezing-styles"
-  }, columnFreezingStyle) : null, /*#__PURE__*/React__default.createElement(Toolbar, {
+  }, columnFreezingStyle) : null, headerOffsetStyle ? /*#__PURE__*/React__default.createElement("style", {
+    "data-taco": "table3-column-header-offset-styles"
+  }, headerOffsetStyle) : null, /*#__PURE__*/React__default.createElement(Toolbar, {
     table: table,
     tableProps: props,
     total: length,
@@ -21294,7 +21453,6 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     "data-taco": "table2",
     onBlur: handleBlur,
     onFocus: handleFocus,
-    onMouseDownCapture: handleMouseCapture,
     onScroll: handleScroll,
     ref: internalRef,
     role: "table",
@@ -21308,14 +21466,22 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     className: "contents",
     key: headerGroup.id,
     role: "row"
-  }, headerGroup.headers.map(header => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-    key: header.id
-  }, reactTable$1.flexRender(header.column.columnDef.header, {
-    ...header.getContext(),
-    scrollToIndex
-  })))))), table.getRowModel().rows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(focus.FocusScope, {
+  }, headerGroup.headers.map((header, index) => {
+    var _headerGroup$headers;
+    // We need to render separator if column is not the last in array, if index is not equal to freeze column index,
+    // if next element is not placeholder and if column itself is not placeholder.
+    const hasSeparator = index !== tableMeta.columnFreezing.frozenColumnIndex && index !== headerGroup.headers.length - 1 && (!((_headerGroup$headers = headerGroup.headers[index + 1]) !== null && _headerGroup$headers !== void 0 && _headerGroup$headers.isPlaceholder) || !header.isPlaceholder);
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: header.id
+    }, reactTable$1.flexRender(header.column.columnDef.header, {
+      ...header.getContext(),
+      scrollToIndex,
+      hasSeparator
+    }));
+  })))), table.getRowModel().rows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(focus.FocusScope, {
     autoFocus: tableMeta.editing.isEditing
   }, /*#__PURE__*/React__default.createElement("div", {
+    onMouseDownCapture: handleMouseCapture,
     className: "group/body contents",
     "data-taco": "table2-body",
     role: "rowgroup",
@@ -21351,6 +21517,7 @@ const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   }));
 });
 Table3.Column = Column$5;
+Table3.Group = Group$4;
 
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   const {
@@ -22108,7 +22275,7 @@ Layout$1.Page = Page;
 Layout$1.Sidebar = Sidebar;
 Layout$1.Content = Content$9;
 
-const Group$3 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref) {
+const Group$5 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref) {
   const {
     children,
     defaultExpanded = false,
@@ -22267,7 +22434,7 @@ const Navigation2 = /*#__PURE__*/React__default.forwardRef(function Navigation2(
     }
   }), children);
 });
-Navigation2.Group = Group$3;
+Navigation2.Group = Group$5;
 Navigation2.Link = Link$2;
 Navigation2.Section = Section;
 Navigation2.Content = Content$a;