@economic/taco 2.8.1 → 2.9.1

package/dist/taco.cjs.development.js

@@ -2107,6 +2107,21 @@ function IconLockOpen(props, svgRef) {
 }
 var LockOpen = /*#__PURE__*/React.forwardRef(IconLockOpen);
 
+function IconLock(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: "M12 1a5 5 0 015 5v2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0118.25 22H5.75A1.75 1.75 0 014 20.25V9.75C4 8.784 4.784 8 5.75 8H7V6a5 5 0 015-5zm6.25 8.5H5.75a.25.25 0 00-.243.193L5.5 9.75v10.5a.25.25 0 00.193.243l.057.007h12.5a.25.25 0 00.243-.193l.007-.057V9.75a.25.25 0 00-.193-.243L18.25 9.5zM12 13a1.5 1.5 0 01.751 2.799l-.001.951a.75.75 0 01-1.5 0v-.95A1.5 1.5 0 0112 13zm0-10.5a3.5 3.5 0 00-3.495 3.308L8.5 6v2h7V6a3.5 3.5 0 00-3.308-3.495L12 2.5z",
+    fill: "currentColor"
+  }));
+}
+var Lock = /*#__PURE__*/React.forwardRef(IconLock);
+
 function IconLogOut(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -3395,6 +3410,7 @@ const icons = {
   'list-search': ListSearch,
   list: List,
   'lock-open': LockOpen,
+  lock: Lock,
   'log-out': LogOut,
   log: Log,
   market: Market,
@@ -4319,8 +4335,8 @@ const defaultLocalisationTexts = {
     },
     columnSettings: {
       search: 'Search column...',
-      tooltip: 'Columns',
-      button: 'Columns',
+      tooltip: 'Column settings',
+      button: 'Column settings',
       noResults: 'No results'
     },
     editing: {
@@ -4444,7 +4460,7 @@ const defaultLocalisationTexts = {
       collapseRow: 'Collapse current row'
     },
     otherOptions: {
-      tooltip: 'Other options'
+      tooltip: 'Table settings'
     }
   },
   searchInput: {
@@ -9072,7 +9088,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
   const handleClear = () => {
     requestAnimationFrame(() => {
       var _internalRef$current2;
-      return (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.focus();
+      return (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.blur();
     });
     handleChange('');
   };
@@ -16566,6 +16582,7 @@ function getCellValueAsString(value, dataType) {
 }
 
 const MIN_COLUMN_SIZE$1 = 80; // accounts for padding and sort controls
+const PRINT_MIN_COLUMN_SIZE = 20; // while printing, it accounts for minimum width each column can take
 const getCellAlignmentClasses$1 = (alignment = 'left') => {
   return cn({
     'justify-start text-left': alignment === 'left',
@@ -16578,7 +16595,7 @@ const getInputAppearanceClassnames = () => {
   return cn('[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none');
 };
 
-const useCssGrid = table => {
+const useCssGrid = (table, isPrintTable = false) => {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
   const rowsLength = table.getRowModel().rows.length;
@@ -16591,7 +16608,11 @@ const useCssGrid = table => {
       // column has a getSize function, but it always returns a default value (150), and we want the
       // first render to use auto layout - so we get the size directly from table state where it is undefined
       const width = columnSizing[column.id];
-      if (isInternalColumn$1(column.id)) {
+      const isColumnInternal = isInternalColumn$1(column.id);
+      if (isPrintTable) {
+        const maxWidth = isColumnInternal ? `${column.getSize()}px` : '1fr';
+        size = `minmax(${PRINT_MIN_COLUMN_SIZE}px, ${maxWidth})`;
+      } else if (isColumnInternal) {
         if (column.id === COLUMN_ID) {
           size = 'minmax(max-content, auto)';
         } else {
@@ -16631,7 +16652,7 @@ const useCssGrid = table => {
   };
 };
 
-function useCurrentRow(defaultCurrentRowIndex = 0) {
+function useCurrentRow(defaultCurrentRowIndex) {
   const [currentRowIndex, setCurrentRowIndex] = React__default.useState(defaultCurrentRowIndex);
   const move = (direction, length, scrollToIndex) => setCurrentRowIndex(currentIndex => {
     const nextIndex = currentIndex !== undefined ? getNextIndex$2(direction, currentIndex, length) : 0;
@@ -17051,7 +17072,8 @@ function useCurrentRowListener(table) {
   const meta = table.options.meta;
   const rows = table.getRowModel().rows;
   React__default.useEffect(() => {
-    if (meta.currentRow.currentRowIndex > rows.length) {
+    const currentRowIndex = meta.currentRow.currentRowIndex;
+    if (currentRowIndex !== undefined && currentRowIndex > rows.length) {
       meta.currentRow.setCurrentRowIndex(0);
     }
   }, [rows.length]);
@@ -17114,8 +17136,9 @@ function useColumnFreezingStyle(tableId, table) {
     if (tableMeta.columnFreezing.frozenInternalColumnCount > 0 || tableMeta.columnFreezing.isEnabled && frozenColumnIndex !== undefined) {
       var _visibleFrozenColumns;
       const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0, frozenColumnIndex + 1);
-      // if all frozen columns haven't had their size set yet, then abort
-      if (visibleFrozenColumns.every(column => columnSizing[column.id] === undefined)) {
+      const visibleExternalFrozenColumns = visibleFrozenColumns.filter(column => !isInternalColumn$1(column.id));
+      // if all external frozen columns haven't had their size set yet, then abort
+      if (visibleExternalFrozenColumns.length && visibleExternalFrozenColumns.every(column => columnSizing[column.id] === undefined)) {
         return undefined;
       }
       const offsets = {};
@@ -17161,9 +17184,12 @@ function useRowSelection() {
     const rows = table.getRowModel().rows;
     const tableMeta = table.options.meta;
     if (event.key === ' ') {
-      var _rows$tableMeta$curre;
       event.preventDefault();
-      (_rows$tableMeta$curre = rows[tableMeta.currentRow.currentRowIndex]) === null || _rows$tableMeta$curre === void 0 ? void 0 : _rows$tableMeta$curre.toggleSelected();
+      const currentRowIndex = tableMeta.currentRow.currentRowIndex;
+      if (currentRowIndex !== undefined) {
+        var _rows$currentRowIndex;
+        (_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.toggleSelected();
+      }
       return;
     } else if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
       event.preventDefault();
@@ -17186,7 +17212,7 @@ function useRowClick(onRowClick) {
     const tableMeta = table.options.meta;
     if (event.key === 'Enter') {
       event.preventDefault();
-      if (onRowClick) {
+      if (onRowClick && tableMeta.currentRow.currentRowIndex !== undefined) {
         onRowClick(rows[tableMeta.currentRow.currentRowIndex].original);
       }
       return;
@@ -17965,7 +17991,7 @@ function EditingCell$1(props) {
   }));
 }
 const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
-  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$curre, _column$columnDef$met;
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$currentRowIndex, _column$columnDef$met;
   const {
     cell,
     column,
@@ -18017,7 +18043,8 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   // row move indicator
   const moveReason = (_tableMeta$editing$ro = tableMeta.editing.rowMoveReason[cell.column.id]) !== null && _tableMeta$editing$ro !== void 0 ? _tableMeta$editing$ro : null;
   const rows = table.getRowModel().rows;
-  const isCurrentRow = ((_rows$tableMeta$curre = rows[tableMeta.currentRow.currentRowIndex]) === null || _rows$tableMeta$curre === void 0 ? void 0 : _rows$tableMeta$curre.id) === row.id;
+  const currentRowIndex = tableMeta.currentRow.currentRowIndex;
+  const isCurrentRow = currentRowIndex !== undefined && ((_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.id) === row.id;
   const mountNode = React__default.useMemo(() => {
     if (moveReason) {
       var _cellRef$current2, _cellRef$current2$par;
@@ -18107,7 +18134,7 @@ function getRowMoveReason(table, rowIndex, rowValues, cell, newValue) {
 }
 
 function Cell$3(props) {
-  var _rows$tableMeta$curre;
+  var _rows$currentRowIndex;
   const {
     column,
     row,
@@ -18119,7 +18146,8 @@ function Cell$3(props) {
   const rows = table.getRowModel().rows;
   const tableMeta = table.options.meta;
   const columnMeta = column.columnDef.meta;
-  const isCurrentRow = ((_rows$tableMeta$curre = rows[tableMeta.currentRow.currentRowIndex]) === null || _rows$tableMeta$curre === void 0 ? void 0 : _rows$tableMeta$curre.id) === row.id;
+  const currentRowIndex = tableMeta.currentRow.currentRowIndex;
+  const isCurrentRow = currentRowIndex !== undefined && ((_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.id) === row.id;
   if (tableMeta.editing.isEditing && columnMeta.control && (isCurrentRow || isHoveredRow && !tableMeta.hoverState.isPaused)) {
     return /*#__PURE__*/React__default.createElement(EditingCell$1, Object.assign({}, props));
   }
@@ -18538,7 +18566,7 @@ function useShortcutsListener(table, shortcuts) {
     const shortcutKeys = Object.keys(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {});
     const globalHandlers = [];
     // convert the shortcut into the correct format to register it
-    if (shortcuts && shortcutKeys.length) {
+    if (shortcuts && shortcutKeys.length && meta.currentRow.currentRowIndex !== undefined) {
       const currentRow = rows[meta.currentRow.currentRowIndex];
       shortcutKeys.forEach(key => {
         const handler = shortcuts[key];
@@ -18606,10 +18634,14 @@ function useEditingStateListener(table) {
   }, [meta.currentRow.currentRowIndex]);
   // save if editing gets toggled off
   React__default.useEffect(() => {
-    if (meta.editing.isEnabled && !meta.editing.isEditing) {
-      requestAnimationFrame(() => {
-        meta.editing.saveChangesIfNeeded();
-      });
+    if (meta.editing.isEnabled) {
+      if (!meta.editing.isEditing) {
+        requestAnimationFrame(() => {
+          meta.editing.saveChangesIfNeeded();
+        });
+      } else if (meta.currentRow.currentRowIndex === undefined) {
+        meta.currentRow.setCurrentRowIndex(0);
+      }
     }
   }, [meta.editing.isEditing]);
 }
@@ -18741,10 +18773,15 @@ function useTable$2(props) {
     tableOptions.globalFilterFn = (row, columnId, searchQuery) => {
       try {
         if (row.original) {
-          var _row$_getAllCellsByCo, _row$_getAllCellsByCo2;
-          const dataType = (_row$_getAllCellsByCo = row._getAllCellsByColumnId()[columnId]) === null || _row$_getAllCellsByCo === void 0 ? void 0 : (_row$_getAllCellsByCo2 = _row$_getAllCellsByCo.column.columnDef.meta) === null || _row$_getAllCellsByCo2 === void 0 ? void 0 : _row$_getAllCellsByCo2.dataType;
-          const cellValue = getCellValueAsString(row.original[columnId], dataType);
-          return globalFilterFn$1(cellValue, searchQuery);
+          const cell = row.getAllCells().find(cell => cell.column.id === columnId);
+          const columnMeta = cell === null || cell === void 0 ? void 0 : cell.column.columnDef.meta;
+          if (cell && cell.column.getIsVisible() && columnMeta !== null && columnMeta !== void 0 && columnMeta.enableSearch) {
+            const cellValue = getCellValueAsString(row.original[columnId], columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.dataType);
+            if (cellValue !== undefined) {
+              return globalFilterFn$1(cellValue, searchQuery);
+            }
+          }
+          return false;
         }
       } catch {
         //
@@ -19291,32 +19328,6 @@ function useTableRenderStrategy$1(props, table, ref) {
   return useTableRenderStrategy(props, table, ref);
 }
 
-function RowHeight(props) {
-  const {
-    texts
-  } = useLocalization();
-  const meta = props.table.options.meta;
-  const handleChange = value => {
-    const height = value;
-    meta.rowHeight.setHeight(height);
-    if (height === 'short' && meta.fontSize.size === 'large') {
-      meta.fontSize.setSize('medium');
-    }
-  };
-  return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
-    onChange: handleChange,
-    value: meta.rowHeight.height
-  }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    value: "short"
-  }, texts.table3.rowHeight.sizes.short), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    value: "medium"
-  }, texts.table3.rowHeight.sizes.medium), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    value: "tall"
-  }, texts.table3.rowHeight.sizes.tall), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    value: "extra-tall"
-  }, texts.table3.rowHeight.sizes.extraTall)));
-}
-
 // augments useEffect to not run debounced
 function useDebouncedEffect(effect, deps, ms = 200) {
   const timeoutRef = React__default.useRef();
@@ -19458,10 +19469,10 @@ function resetHighlightedColumnIndexes(enabled, value, table) {
       columns.forEach((column, columnIndex) => {
         try {
           var _column$columnDef$met;
-          if ((_column$columnDef$met = column.columnDef.meta) !== null && _column$columnDef$met !== void 0 && _column$columnDef$met.enableSearch) {
+          if (column.getIsVisible() && (_column$columnDef$met = column.columnDef.meta) !== null && _column$columnDef$met !== void 0 && _column$columnDef$met.enableSearch) {
             var _row$original, _column$columnDef$met2;
             const cellValue = getCellValueAsString((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original[column.id], (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.dataType);
-            if (cellValue && globalFilterFn$1(cellValue, value)) {
+            if (cellValue !== undefined && globalFilterFn$1(cellValue, value)) {
               indexes.push([rowIndex, columnIndex]);
             }
           }
@@ -19828,11 +19839,27 @@ function Filter$1(props) {
   }));
 }
 
+const useMatchMedia = (query, defaultMatches = false) => {
+  const [matches, setMatches] = React__default.useState(defaultMatches);
+  const handleChange = React__default.useCallback(event => setMatches(event.matches), []);
+  React__default.useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+  return matches;
+};
+
+const useIsLargeScreen = () => useMatchMedia('(min-width: 1024px)', window.innerWidth > 1024);
+
 function sortByHeader(a, b) {
   var _a$columnDef$meta, _a$columnDef$meta$hea, _a$columnDef$meta$hea2, _b$columnDef$meta;
   return (_a$columnDef$meta = a.columnDef.meta) === null || _a$columnDef$meta === void 0 ? void 0 : (_a$columnDef$meta$hea = _a$columnDef$meta.header) === null || _a$columnDef$meta$hea === void 0 ? void 0 : (_a$columnDef$meta$hea2 = _a$columnDef$meta$hea.localeCompare) === null || _a$columnDef$meta$hea2 === void 0 ? void 0 : _a$columnDef$meta$hea2.call(_a$columnDef$meta$hea, (_b$columnDef$meta = b.columnDef.meta) === null || _b$columnDef$meta === void 0 ? void 0 : _b$columnDef$meta.header);
 }
-function Filters(props) {
+function FiltersButton$1(props) {
   const {
     total,
     table
@@ -19842,6 +19869,7 @@ function Filters(props) {
     texts
   } = useLocalization();
   const ref = React__default.useRef(null);
+  const isLargeScreen = useIsLargeScreen();
   const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn$1(column.id)).sort(sortByHeader);
   const appliedFilters = table.getState().columnFilters;
   useGlobalKeyDown({
@@ -19904,8 +19932,8 @@ function Filters(props) {
     setFilters([]);
     setPlaceholderCount(1);
   };
-  return /*#__PURE__*/React__default.createElement(Button$1, {
-    "aria-label": texts.table3.filters.tooltip,
+  const buttonProps = {
+    'aria-label': texts.table3.filters.tooltip,
     className: cn({
       '!wcag-blue-100': appliedFilters.length
     }),
@@ -19949,7 +19977,7 @@ function Filters(props) {
       appearance: "primary",
       onClick: handleApply
     }, "Apply"))))),
-    ref: ref,
+    ref,
     tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
       keys: {
@@ -19958,97 +19986,18 @@ function Filters(props) {
         shift: true
       }
     }))
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: appliedFilters.length ? 'filter-solid' : 'filter'
-  }), texts.table3.filters.button, " ", appliedFilters.length ? `(${appliedFilters.length})` : '');
-}
-
-const Column$4 = /*#__PURE__*/React__default.forwardRef(function Column(props, ref) {
-  var _column$columnDef$met;
-  const {
-    column,
-    draggable = false,
-    ...dragAttributes
-  } = props;
-  const canHide = column.getCanHide();
-  const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {
-    'hover:bg-grey-200': canHide || draggable,
-    'hover:cursor-pointer': canHide,
-    'active:cursor-move active:bg-grey-300': draggable
-  });
-  const attributes = draggable ? dragAttributes : undefined;
-  const isVisible = column.getIsVisible();
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
-    key: column.id,
-    className: className,
-    onClick: () => column.toggleVisibility(!isVisible),
-    ref: ref
-  }), draggable ? /*#__PURE__*/React__default.createElement(Icon, {
-    name: "drag",
-    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, {
-    checked: isVisible,
-    onChange: () => column.toggleVisibility(!isVisible)
-  }) : null);
-});
-function ColumnSettings(props) {
-  const {
-    table
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  const [query, setQuery] = React__default.useState('');
-  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;
-  }), [allColumns, query]);
-  const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';
-  const handleReorder = (activeId, overId) => {
-    if (columns.find(column => {
-      var _column$columnDef$met3;
-      return column.id === overId && ((_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.enableOrdering) === false;
-    })) {
-      return;
-    }
-    table.setColumnOrder(currentOrder => ensureOrdering$1(allColumns, SortablePrimitive.arrayMove(currentOrder, currentOrder.findIndex(c => c === activeId), currentOrder.findIndex(c => c === overId))));
   };
-  return /*#__PURE__*/React__default.createElement(Button$1, {
-    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
-      className: "flex w-60 flex-col gap-2"
-    }, table.options.enableHiding ? /*#__PURE__*/React__default.createElement(Input, {
-      onChange: event => setQuery(event.target.value),
-      placeholder: texts.table3.columnSettings.search,
-      value: query
-    }) : null, tableMeta.columnOrdering.isEnabled && columns.length && !(query !== null && query !== void 0 && query.length) ? /*#__PURE__*/React__default.createElement(Container, {
-      reorder: handleReorder
-    }, /*#__PURE__*/React__default.createElement(List$1, {
-      id: "columns",
-      className: listClassName
-    }, columns.map(column => {
-      var _column$columnDef$met4, _column$columnDef$met5;
-      return /*#__PURE__*/React__default.createElement(Item$3, {
-        key: column.id,
-        id: column.id,
-        disabled: !((_column$columnDef$met4 = column.columnDef.meta) !== null && _column$columnDef$met4 !== void 0 && _column$columnDef$met4.enableOrdering),
-        asChild: true
-      }, /*#__PURE__*/React__default.createElement(Column$4, {
-        column: column,
-        draggable: (_column$columnDef$met5 = column.columnDef.meta) === null || _column$columnDef$met5 === void 0 ? void 0 : _column$columnDef$met5.enableOrdering
-      }));
-    }))) : /*#__PURE__*/React__default.createElement("div", {
-      className: listClassName
-    }, columns.length ? columns.map(column => /*#__PURE__*/React__default.createElement(Column$4, {
-      column: column,
-      key: column.id
-    })) : texts.table3.columnSettings.noResults))))
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: "columns"
-  }), texts.table3.columnSettings.button);
+  if (!isLargeScreen && !appliedFilters.length) {
+    return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, buttonProps, {
+      icon: "filter"
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, buttonProps), /*#__PURE__*/React__default.createElement(Icon, {
+    className: cn({
+      '-mr-1.5': !isLargeScreen
+    }),
+    name: appliedFilters.length ? 'filter-solid' : 'filter'
+  }), isLargeScreen ? texts.table3.filters.button : '', appliedFilters.length ? `(${appliedFilters.length})` : '');
 }
 
 function EditButton(props) {
@@ -20178,6 +20127,7 @@ function PrintIFrame({
   const [contentRef, setContentRef] = React__default.useState(null);
   const [mountNode, setMountNode] = React__default.useState(null);
   const isFirefoxBrowser = React__default.useMemo(() => navigator.userAgent.toLowerCase().includes('firefox'), []);
+  const isSafariBrowser = React__default.useMemo(() => navigator.userAgent.toLowerCase().includes('safari') && !navigator.userAgent.toLowerCase().includes('chrome'), []);
   const iframeWindow = contentRef === null || contentRef === void 0 ? void 0 : contentRef.contentWindow;
   const stylesReady = useParentStylesheets(iframeWindow);
   // Calls print method when table has loaded in the iframe.
@@ -20246,13 +20196,16 @@ function PrintIFrame({
     tableWrapper.classList.add('h-fit');
     tableWrapper.classList.add('[&>[role="table"]]:!h-fit');
     if (isFirefoxBrowser) {
-      // Fix for firefox bug which adds page-long whitespace between page's top content and table
+      // Fix for firefox bug which adds page-long whitespace between page's top content and table.
       tableWrapper.classList.add('[&>[role="table"]]:!absolute');
     }
-    // Safari print preview assigns no width to the table when w-screen class is used.
-    // By assigning table a big static width and hiding the horizontal scrollbar, the table on chrome
-    // and safari will always take full page width.
-    tableWrapper.classList.add('w-[10000px]');
+    // Makes sure table takes the full screen width.
+    if (isSafariBrowser) {
+      // Safari browser doesn't apply correct width to the columns when w-screen is used.
+      tableWrapper.classList.add('w-full');
+    } else {
+      tableWrapper.classList.add('w-screen');
+    }
     if (tableElement) {
       var _tableElement$parentN;
       (_tableElement$parentN = tableElement.parentNode) === null || _tableElement$parentN === void 0 ? void 0 : _tableElement$parentN.insertBefore(tableWrapper, tableElement);
@@ -20297,7 +20250,7 @@ function PrintIFrame({
   };
   // -top-60 -left-60 styles make sure that iframe is added outside of the viewport
   return /*#__PURE__*/React__default.createElement("iframe", {
-    className: "fixed -left-60 -top-60 !h-0 !w-0",
+    className: "fixed -left-[6000px] -top-[6000px] -z-50 !h-0 !w-0",
     ref: setContentRef,
     // Temporary fix to support printing in firefox: Find another solution while upgrading React
     src: "javascript:void(0);"
@@ -20306,6 +20259,7 @@ function PrintIFrame({
 
 const WarningDialog = ({
   onAccept,
+  onCancel,
   onClose,
   onVisibilityChange,
   ...props
@@ -20339,7 +20293,10 @@ const WarningDialog = ({
     checked: hideWarningDialog,
     onChange: setHideWarningDialog
   }), /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Button$1, {
-    onClick: handleClose
+    onClick: () => {
+      handleClose();
+      onCancel();
+    }
   }, texts.table3.print.warningDialog.cancelButtonText), /*#__PURE__*/React__default.createElement(Button$1, {
     appearance: "primary",
     autoFocus: true,
@@ -20369,20 +20326,23 @@ function PrintButton(props) {
   const {
     printWarningDialogVisibility
   } = tableMeta.printing;
+  // When changing printTableId, update packages/taco/src/components/Table3/Table3.tsx file and other usages where
+  // printTableId is used to figure out whether the table is a print table or not.
   const printTableId = `${tableProps.id}_print`;
+  const excludeUnmatchedResults = tableMeta.search.excludeUnmatchedResults;
   const defaultSettings = React__default.useMemo(() => ({
     columnFreezingIndex: tableMeta.columnFreezing.frozenColumnIndex,
     columnOrder: state.columnOrder,
     columnSizing: state.columnSizing,
     columnVisibility: state.columnVisibility,
-    excludeUnmatchedRecordsInSearch: tableMeta.search.excludeUnmatchedResults,
+    excludeUnmatchedRecordsInSearch: excludeUnmatchedResults,
     fontSize: tableMeta.fontSize.size,
     rowHeight: tableMeta.rowHeight.height,
     sorting: state.sorting,
     // we don't save these, but we must pass them to print
     columnFilters: state.columnFilters,
     globalFilter: state.globalFilter
-  }), [tableMeta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, tableMeta.search.excludeUnmatchedResults, tableMeta.fontSize.size, tableMeta.rowHeight.height, state.sorting, state.columnFilters, state.globalFilter]);
+  }), [tableMeta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, excludeUnmatchedResults, tableMeta.fontSize.size, tableMeta.rowHeight.height, state.sorting, state.columnFilters, state.globalFilter]);
   const iframeTableProps = {
     ...tableProps,
     defaultSettings,
@@ -20398,20 +20358,51 @@ function PrintButton(props) {
     // Starts custom printing
     (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.click();
   });
-  const handleAfterPrint = () => {
+  const handleLoadingError = error => {
     var _loadingToastRef$curr;
-    setIsPrinting(false);
-    (_loadingToastRef$curr = loadingToastRef.current) === null || _loadingToastRef$curr === void 0 ? void 0 : _loadingToastRef$curr.close();
+    const errorMessage = `${texts.table3.print.error}: ${error}`;
+    console.error(errorMessage);
+    (_loadingToastRef$curr = loadingToastRef.current) === null || _loadingToastRef$curr === void 0 ? void 0 : _loadingToastRef$curr.error(errorMessage);
+  };
+  const restoreTableDataWithoutSearch = function () {
+    try {
+      const _temp = _catch(function () {
+        var _tableMeta$printing$l, _tableMeta$printing;
+        return Promise.resolve((_tableMeta$printing$l = (_tableMeta$printing = tableMeta.printing).loadAll) === null || _tableMeta$printing$l === void 0 ? void 0 : _tableMeta$printing$l.call(_tableMeta$printing, table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+      }, function (error) {
+        handleLoadingError(error);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleAfterPrint = function () {
+    try {
+      function _temp3() {
+        var _loadingToastRef$curr2;
+        setIsPrinting(false);
+        (_loadingToastRef$curr2 = loadingToastRef.current) === null || _loadingToastRef$curr2 === void 0 ? void 0 : _loadingToastRef$curr2.close();
+      }
+      const _temp2 = function () {
+        if (tableMeta.printing.loadAll && excludeUnmatchedResults) {
+          return Promise.resolve(restoreTableDataWithoutSearch()).then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
   const handleBeforePrint = () => {
-    var _loadingToastRef$curr2;
-    (_loadingToastRef$curr2 = loadingToastRef.current) === null || _loadingToastRef$curr2 === void 0 ? void 0 : _loadingToastRef$curr2.close();
+    var _loadingToastRef$curr3;
+    (_loadingToastRef$curr3 = loadingToastRef.current) === null || _loadingToastRef$curr3 === void 0 ? void 0 : _loadingToastRef$curr3.close();
   };
   const handlePrint = function () {
     try {
       let _exit = false;
-      function _temp3(_result2) {
-        if (_exit) return _result2;
+      function _temp6(_result3) {
+        if (_exit) return _result3;
         if (hasNonSafeCellCount && printWarningDialogVisibility) {
           setShowWarningDialog(true);
         } else {
@@ -20424,7 +20415,7 @@ function PrintButton(props) {
       let hasNonSafeCellCount = false;
       // if loadAll is not defined, just print with what we've got
       // don't compare length to data.length because the api might be choosing not to return all for performance
-      const _temp2 = function () {
+      const _temp5 = function () {
         if (!tableMeta.printing.loadAll) {
           const {
             data
@@ -20432,8 +20423,12 @@ function PrintButton(props) {
           const cellCount = getCellCount(data);
           hasNonSafeCellCount = cellCount > SAFE_PRINT_CELL_COUNT;
         } else {
-          const _temp = _catch(function () {
-            return Promise.resolve(tableMeta.printing.loadAll(table.getState().sorting, table.getState().columnFilters, tableMeta.search.query)).then(function () {
+          const _temp4 = _catch(function () {
+            return Promise.resolve(tableMeta.printing.loadAll(table.getState().sorting, table.getState().columnFilters,
+            // We need to pass search query to the server when printing, to be able to render correct data set in iFrame,
+            // But in "display" table, search is performed only on client side, so we'll need to request data again without search query,
+            // when printing will be finished.
+            excludeUnmatchedResults ? tableMeta.search.query : undefined)).then(function () {
               // After the loadAll call above, the data changes. Hence, it becomes essential to acquire the data after
               // this call rather than before it.
               const {
@@ -20443,17 +20438,14 @@ function PrintButton(props) {
               hasNonSafeCellCount = cellCount > SAFE_PRINT_CELL_COUNT;
             });
           }, function (error) {
-            var _loadingToastRef$curr3;
-            const errorMessage = `${texts.table3.print.error}: ${error}`;
-            console.error(errorMessage);
-            (_loadingToastRef$curr3 = loadingToastRef.current) === null || _loadingToastRef$curr3 === void 0 ? void 0 : _loadingToastRef$curr3.error(errorMessage);
+            handleLoadingError(error);
             // in case of error, we return early
             _exit = true;
           });
-          if (_temp && _temp.then) return _temp.then(function () {});
+          if (_temp4 && _temp4.then) return _temp4.then(function () {});
         }
       }();
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
+      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -20461,6 +20453,18 @@ function PrintButton(props) {
   const handleWarningDialogAccept = () => {
     setIsPrinting(true);
   };
+  const handleWarningDialogCancel = function () {
+    try {
+      const _temp7 = function () {
+        if (tableMeta.printing.loadAll && excludeUnmatchedResults) {
+          return Promise.resolve(restoreTableDataWithoutSearch()).then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   const handleWarningDialogClose = () => {
     var _loadingToastRef$curr4;
     (_loadingToastRef$curr4 = loadingToastRef.current) === null || _loadingToastRef$curr4 === void 0 ? void 0 : _loadingToastRef$curr4.close();
@@ -20481,10 +20485,125 @@ function PrintButton(props) {
     open: showWarningDialog,
     onAccept: handleWarningDialogAccept,
     onClose: handleWarningDialogClose,
+    onCancel: handleWarningDialogCancel,
     onVisibilityChange: tableMeta.printing.setPrintWarningDialogVisibility
   }));
 }
 
+function RowHeight(props) {
+  const {
+    texts
+  } = useLocalization();
+  const meta = props.table.options.meta;
+  const handleChange = value => {
+    const height = value;
+    meta.rowHeight.setHeight(height);
+    if (height === 'short' && meta.fontSize.size === 'large') {
+      meta.fontSize.setSize('medium');
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
+    onChange: handleChange,
+    value: meta.rowHeight.height
+  }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    value: "short"
+  }, texts.table3.rowHeight.sizes.short), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    value: "medium"
+  }, texts.table3.rowHeight.sizes.medium), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    value: "tall"
+  }, texts.table3.rowHeight.sizes.tall), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    value: "extra-tall"
+  }, texts.table3.rowHeight.sizes.extraTall)));
+}
+
+const Column$4 = /*#__PURE__*/React__default.forwardRef(function Column(props, ref) {
+  var _column$columnDef$met;
+  const {
+    column,
+    draggable = false,
+    ...dragAttributes
+  } = props;
+  const canHide = column.getCanHide();
+  const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {
+    'hover:bg-grey-200': canHide || draggable,
+    'hover:cursor-pointer': canHide,
+    'active:cursor-move active:bg-grey-300': draggable
+  });
+  const attributes = draggable ? dragAttributes : undefined;
+  const isVisible = column.getIsVisible();
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    key: column.id,
+    className: className,
+    onClick: () => column.toggleVisibility(!isVisible),
+    ref: ref
+  }), draggable ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: "drag",
+    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, {
+    checked: isVisible,
+    onChange: () => column.toggleVisibility(!isVisible)
+  }) : null);
+});
+function ColumnSettingsPopover(props) {
+  const {
+    table,
+    trigger,
+    ...popoverProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const [query, setQuery] = React__default.useState('');
+  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;
+  }), [allColumns, query]);
+  const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';
+  const handleReorder = (activeId, overId) => {
+    if (columns.find(column => {
+      var _column$columnDef$met3;
+      return column.id === overId && ((_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.enableOrdering) === false;
+    })) {
+      return;
+    }
+    table.setColumnOrder(currentOrder => ensureOrdering$1(allColumns, SortablePrimitive.arrayMove(currentOrder, currentOrder.findIndex(c => c === activeId), currentOrder.findIndex(c => c === overId))));
+  };
+  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"
+  }, table.options.enableHiding ? /*#__PURE__*/React__default.createElement(Input, {
+    onChange: event => setQuery(event.target.value),
+    placeholder: texts.table3.columnSettings.search,
+    value: query
+  }) : null, tableMeta.columnOrdering.isEnabled && columns.length && !(query !== null && query !== void 0 && query.length) ? /*#__PURE__*/React__default.createElement(Container, {
+    reorder: handleReorder
+  }, /*#__PURE__*/React__default.createElement(List$1, {
+    id: "columns",
+    className: listClassName
+  }, columns.map(column => {
+    var _column$columnDef$met4, _column$columnDef$met5;
+    return /*#__PURE__*/React__default.createElement(Item$3, {
+      key: column.id,
+      id: column.id,
+      disabled: !((_column$columnDef$met4 = column.columnDef.meta) !== null && _column$columnDef$met4 !== void 0 && _column$columnDef$met4.enableOrdering),
+      asChild: true
+    }, /*#__PURE__*/React__default.createElement(Column$4, {
+      column: column,
+      draggable: (_column$columnDef$met5 = column.columnDef.meta) === null || _column$columnDef$met5 === void 0 ? void 0 : _column$columnDef$met5.enableOrdering
+    }));
+  }))) : /*#__PURE__*/React__default.createElement("div", {
+    className: listClassName
+  }, columns.length ? columns.map(column => /*#__PURE__*/React__default.createElement(Column$4, {
+    column: column,
+    key: column.id
+  })) : texts.table3.columnSettings.noResults))));
+}
+
 function FontSize$1(props) {
   const {
     texts
@@ -20504,6 +20623,57 @@ function FontSize$1(props) {
   }, texts.table3.fontSize.sizes.large)));
 }
 
+function SettingsButton(props) {
+  const {
+    table
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const [popover, setPopover] = React__default.useState(undefined);
+  const tableMeta = table.options.meta;
+  const hasColumnSettings = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;
+  let popoverElement;
+  if (popover) {
+    const handleClosePopover = () => setPopover(undefined);
+    switch (popover) {
+      case 'columnSettings':
+        {
+          if (hasColumnSettings) {
+            popoverElement = props => /*#__PURE__*/React__default.createElement(ColumnSettingsPopover, Object.assign({}, props, {
+              open: true,
+              onChange: handleClosePopover,
+              table: table
+            }));
+          }
+        }
+    }
+  }
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": texts.table3.otherOptions.tooltip,
+    icon: "sliders",
+    menu: popoverElement ? undefined : menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
+      align: "end"
+    }, table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      icon: "columns",
+      onClick: () => setPopover('columnSettings')
+    }, texts.table3.columnSettings.button), /*#__PURE__*/React__default.createElement(Menu$1.Separator, null)) : null, tableMeta.rowHeight.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      icon: `height-${tableMeta.rowHeight.height}`,
+      subMenu: () => /*#__PURE__*/React__default.createElement(RowHeight, {
+        table: table
+      })
+    }, texts.table3.rowHeight.tooltip) : null, tableMeta.fontSize.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      icon: "font-size",
+      subMenu: () => /*#__PURE__*/React__default.createElement(FontSize$1, {
+        table: table
+      })
+    }, texts.table3.fontSize.tooltip) : null)),
+    popover: popoverElement,
+    onClickCapture: event => event.preventDefault(),
+    tooltip: texts.table3.otherOptions.tooltip
+  });
+}
+
 function Toolbar(props) {
   const {
     left,
@@ -20513,9 +20683,6 @@ function Toolbar(props) {
     tableProps,
     total
   } = props;
-  const {
-    texts
-  } = useLocalization();
   if (!isToolbarVisible(props)) {
     return null;
   }
@@ -20527,38 +20694,20 @@ function Toolbar(props) {
     className: "ml-auto flex-shrink-0 print:hidden"
   }, tableMeta.editing.isEnabled ? /*#__PURE__*/React__default.createElement(EditButton, {
     table: table
-  }) : null, table.options.enableColumnFilters ? /*#__PURE__*/React__default.createElement(Filters, {
+  }) : null, table.options.enableColumnFilters ? /*#__PURE__*/React__default.createElement(FiltersButton$1, {
     table: table,
     total: total
-  }) : null, table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? /*#__PURE__*/React__default.createElement(ColumnSettings, {
-    table: table
-  }) : null, tableMeta.printing.isEnabled ? /*#__PURE__*/React__default.createElement(PrintButton, {
+  }) : null, right, tableMeta.printing.isEnabled ? /*#__PURE__*/React__default.createElement(PrintButton, {
     table: table,
     tableProps: tableProps
-  }) : null, right, isMoreVisible(props) ? /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: texts.table3.otherOptions.tooltip
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": texts.table3.otherOptions.tooltip,
-    icon: "more",
-    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
-      align: "end"
-    }, tableMeta.rowHeight.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Item, {
-      icon: `height-${tableMeta.rowHeight.height}`,
-      subMenu: () => /*#__PURE__*/React__default.createElement(RowHeight, {
-        table: table
-      })
-    }, texts.table3.rowHeight.tooltip) : null, tableMeta.fontSize.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Item, {
-      icon: "font-size",
-      subMenu: () => /*#__PURE__*/React__default.createElement(FontSize$1, {
-        table: table
-      })
-    }, texts.table3.fontSize.tooltip) : null))
-  })) : null, tableMeta.search.isEnabled ? /*#__PURE__*/React__default.createElement(Search$3, {
+  }) : null, isSettingsVisible(props) ? /*#__PURE__*/React__default.createElement(SettingsButton, {
+    table: table
+  }) : null, tableMeta.search.isEnabled ? /*#__PURE__*/React__default.createElement(Search$3, {
     scrollToIndex: scrollToIndex,
     table: table
   }) : null));
 }
-function isMoreVisible(props) {
+function isSettingsVisible(props) {
   const {
     table
   } = props;
@@ -20882,9 +21031,11 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     'text-sm': tableMeta.fontSize.size === 'medium',
     'text-base': tableMeta.fontSize.size === 'large'
   });
+  // Print tables have "_print" as the postfix for the table id, so we can use the it to determine
+  // if the table is a print table or not.
   const {
     style: cssGridStyle
-  } = useCssGrid(table);
+  } = useCssGrid(table, props.id.endsWith('_print'));
   const {
     style: cssVars
   } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);
@@ -21424,20 +21575,6 @@ const AgreementItem = props => {
   }))), children);
 };
 
-const useMatchMedia = (query, defaultMatches = false) => {
-  const [matches, setMatches] = React__default.useState(defaultMatches);
-  const handleChange = React__default.useCallback(event => setMatches(event.matches), []);
-  React__default.useEffect(() => {
-    const mediaQuery = window.matchMedia(query);
-    setMatches(mediaQuery.matches);
-    mediaQuery.addEventListener('change', handleChange);
-    return () => {
-      mediaQuery.removeEventListener('change', handleChange);
-    };
-  }, []);
-  return matches;
-};
-
 const AgreementDisplay = props => {
   const {
     children,
@@ -21626,8 +21763,6 @@ const Content$9 = /*#__PURE__*/React__default.forwardRef(function LayoutContent(
   }));
 });
 
-const useIsLargeScreen = () => useMatchMedia('(min-width: 1024px)', window.innerWidth > 1024);
-
 const SidebarBackdrop = /*#__PURE__*/framerMotion.motion(Backdrop);
 const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(props, ref) {
   const {