@economic/taco 1.33.0 → 1.34.0

package/dist/taco.cjs.development.js

@@ -39,7 +39,7 @@ var reactTable$1 = require('@tanstack/react-table');
 var ReactDOM = _interopDefault(require('react-dom'));
 var reactVirtual = require('react-virtual');
 var core = require('@dnd-kit/core');
-var sortable = require('@dnd-kit/sortable');
+var SortablePrimitive = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Joyride = require('react-joyride');
@@ -3962,15 +3962,10 @@ const defaultLocalisationTexts = {
       }
     },
     columnSettings: {
-      columnsHidden: 'Hidden columns',
-      columnsHiddenDrop: 'Drop column here to hide',
-      columnsVisible: 'Visible columns',
-      columnsVisibleDrop: 'Drop column here to show',
-      noHiddenColumns: 'No hidden columns',
-      noVisibleColumns: 'No visible columns',
       search: 'Search column...',
       tooltip: 'Column settings',
-      button: 'Columns'
+      button: 'Columns',
+      noResults: 'No results'
     },
     editing: {
       button: 'Edit',
@@ -11821,6 +11816,42 @@ function createRowActionsColumn(rowActions, rowActionsLength, texts) {
     enableResizing: false
   };
 }
+function ensureOrdering(columns, settingsOrder) {
+  const fixedOrder = [];
+  const disabledOrder = [];
+  const enabledOrder = [];
+  if (Array.isArray(settingsOrder)) {
+    const firstNonInternalColumnIndex = settingsOrder.findIndex(id => !(id !== null && id !== void 0 && id.startsWith('__')) && id !== COLUMN_ID_FOR_ACTIONS);
+    if (firstNonInternalColumnIndex > -1) {
+      fixedOrder.push(...settingsOrder.slice(0, firstNonInternalColumnIndex));
+    }
+    settingsOrder.forEach(id => {
+      var _columns$find, _columns$find$meta;
+      if ((_columns$find = columns.find(column => column.id === id)) !== null && _columns$find !== void 0 && (_columns$find$meta = _columns$find.meta) !== null && _columns$find$meta !== void 0 && _columns$find$meta.disableReordering) {
+        disabledOrder.unshift(id);
+      } else {
+        enabledOrder.push(id);
+      }
+    });
+  } else {
+    const firstNonInternalColumnIndex = columns.findIndex(column => {
+      var _column$id;
+      return !((_column$id = column.id) !== null && _column$id !== void 0 && _column$id.startsWith('__')) && column.id !== COLUMN_ID_FOR_ACTIONS;
+    });
+    if (firstNonInternalColumnIndex > -1) {
+      fixedOrder.push(...columns.slice(0, firstNonInternalColumnIndex).map(column => column.id));
+    }
+    columns.slice(firstNonInternalColumnIndex).forEach(column => {
+      var _column$meta;
+      if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.disableReordering) {
+        disabledOrder.push(column.id);
+      } else {
+        enabledOrder.push(column.id);
+      }
+    });
+  }
+  return [...fixedOrder, ...disabledOrder, ...enabledOrder];
+}
 
 const getDensitySizing = (density, editing = false) => {
   switch (density) {
@@ -11853,8 +11884,8 @@ const getFrozenShadowClasses = (column, frozenColumns, isHorizontallyOffset) =>
     'shadow-[1px_0px_0px_theme(colors.grey.300)]': isLastFrozen && !isHorizontallyOffset && !hideFrozenShadow
   };
 };
+const focussableNodeNames = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS'];
 const isKeyboardFocusableElement = element => {
-  const focussableNodeNames = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS'];
   return focussableNodeNames.includes(element.nodeName) && !element.hasAttribute('disabled') && !element.hasAttribute('readonly') && !element.getAttribute('aria-hidden');
 };
 
@@ -12238,6 +12269,7 @@ const willRowMoveAfterSorting = (value, cell, rowIndex, rows, desc) => {
   }
   return resortedRows[index].id !== cell.row.id;
 };
+const clickableNodeNames = ['INPUT', 'BUTTON', 'A', 'SELECT', 'OPTION', 'LABEL', 'TEXTAREA', 'DETAILS'];
 
 const Cell = function Cell(props) {
   var _cell$column$columnDe, _cell$column$columnDe2, _table$options$meta;
@@ -12529,11 +12561,18 @@ const Cell = function Cell(props) {
   } else {
     if (meta.onRowClick) {
       attributes.onClick = event => {
-        var _meta$onRowClick;
-        if (event.target !== internalRef.current) {
-          return;
+        const {
+          target
+        } = event;
+        // This check prevents triggering row click, when a click is performed in the dropdown (e.g. Select option or DayPicker date selection)
+        if (internalRef.current && target instanceof HTMLElement && internalRef.current.contains(target)) {
+          var _meta$onRowClick;
+          // Checking that target is clickable element or it is a child of clickable element
+          if (clickableNodeNames.includes(target.tagName) || target.closest(clickableNodeNames.map(tag => `[role=row] ${tag}`).join(','))) {
+            return;
+          }
+          (_meta$onRowClick = meta.onRowClick) === null || _meta$onRowClick === void 0 ? void 0 : _meta$onRowClick.call(meta, cell.row.original);
         }
-        (_meta$onRowClick = meta.onRowClick) === null || _meta$onRowClick === void 0 ? void 0 : _meta$onRowClick.call(meta, cell.row.original);
       };
     }
   }
@@ -13116,7 +13155,7 @@ function useColumnDefinitions(children, options, tableRef) {
           size: child.props.defaultWidth,
           // sorting
           enableSorting: !child.props.disableSorting,
-          sortingFn: getSortingFn(child.props.dataType)
+          sortingFn: getSortingFn(child.props.dataType, child.props.sortFn)
         });
       }
     });
@@ -13145,12 +13184,15 @@ function useColumnDefinitions(children, options, tableRef) {
     };
   }, [children]);
 }
-const getSortingFn = dataType => {
+function getSortingFn(dataType, customFn) {
+  if (customFn) {
+    return (rowA, rowB, columnId) => customFn(rowA.original, rowB.original, columnId);
+  }
   if (dataType && dataType !== 'boolean') {
     return dataType;
   }
   return 'auto';
-};
+}
 
 // frozen columns have position sticky, and because we support more than one of them
 // we must set a 'left' css value. this hook listens to changes on state that will
@@ -13263,7 +13305,7 @@ const useFilterStateListener = (table, onRowSelect) => {
 
 const ACTIONS_ON_ROW_LENGTH = 4;
 function useTable$1(children, props, ref) {
-  var _settings$frozenColum, _settings$columnOrder, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
+  var _settings$frozenColum, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
   const {
     actionsForRow = [],
     actionsForRowLength = ACTIONS_ON_ROW_LENGTH,
@@ -13320,7 +13362,7 @@ function useTable$1(children, props, ref) {
   const frozenColumns = columns.slice(0, totalFrozenColumns).map(column => column.id);
   // defaults
   const initialState = {
-    columnOrder: (_settings$columnOrder = settings === null || settings === void 0 ? void 0 : settings.columnOrder) !== null && _settings$columnOrder !== void 0 ? _settings$columnOrder : columns.map(column => column.id),
+    columnOrder: ensureOrdering(columns, settings === null || settings === void 0 ? void 0 : settings.columnOrder),
     columnPinning: {
       left: frozenColumns,
       right: []
@@ -13634,7 +13676,7 @@ function Item$3(props) {
     setNodeRef,
     transform,
     transition
-  } = sortable.useSortable({
+  } = SortablePrimitive.useSortable({
     disabled,
     id
   });
@@ -13674,10 +13716,10 @@ function List$1(externalProps) {
     id
   });
   const items = React__default.Children.toArray(children).map(child => child.props);
-  return /*#__PURE__*/React__default.createElement(sortable.SortableContext, {
+  return /*#__PURE__*/React__default.createElement(SortablePrimitive.SortableContext, {
     id: id,
     items: items,
-    strategy: sortable.verticalListSortingStrategy
+    strategy: SortablePrimitive.verticalListSortingStrategy
   }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
     ref: id ? setNodeRef : undefined
   }), children));
@@ -13709,363 +13751,107 @@ const Truncate = ({
   return clonedChildrenWithRef;
 };
 
-const OrderableColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+function getColumnName(column) {
   var _ref, _column$columnDef$hea, _column$columnDef$hea2;
+  return (_ref = (_column$columnDef$hea = (_column$columnDef$hea2 = column.columnDef.header) === null || _column$columnDef$hea2 === void 0 ? void 0 : _column$columnDef$hea2.toString()) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : column.columnDef.id) !== null && _ref !== void 0 ? _ref : '';
+}
+const Column$1 = /*#__PURE__*/React__default.forwardRef(function Column(props, ref) {
   const {
-    canBeReordered,
     column,
-    children,
-    isColumnFixed,
-    ...attributes
+    draggable = false,
+    isOrderingEnabled,
+    ...dragAttributes
   } = props;
-  let icon;
-  if (canBeReordered) {
-    icon = /*#__PURE__*/React__default.createElement(Icon, {
-      name: "drag",
-      /** top margin of -3px on Icon, is added to make sure that each OrderableColumn is of 32px height **/
-      className: "text-grey-500 hover:text-grey-700 mr-0.5 -ml-[6px] -mt-[3px] inline-block !h-5 !w-5 cursor-move"
-    });
-  } else if (isColumnFixed) {
-    icon = /*#__PURE__*/React__default.createElement("span", {
-      className: "mr-0.5 inline-flex w-4"
-    });
-  }
-  // columnName should be a string
-  const columnName = (_ref = (_column$columnDef$hea = (_column$columnDef$hea2 = column.columnDef.header) === null || _column$columnDef$hea2 === void 0 ? void 0 : _column$columnDef$hea2.toString()) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : column.columnDef.id) !== null && _ref !== void 0 ? _ref : '';
+  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 text = getColumnName(column);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
-    className: "hover:bg-grey-100 aria-pressed:bg-grey-200 flex w-full items-center justify-between gap-x-2 rounded py-[6px] px-2 aria-pressed:z-10",
+    key: column.id,
+    className: className,
+    onClick: () => column.toggleVisibility(),
     ref: ref
-  }), /*#__PURE__*/React__default.createElement(Truncate, {
-    tooltip: columnName
+  }), draggable ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: "drag",
+    className: "text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5"
+  }) : isOrderingEnabled ? /*#__PURE__*/React__default.createElement("span", {
+    className: "flex w-2"
+  }) : null, /*#__PURE__*/React__default.createElement(Truncate, {
+    tooltip: text
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "select-none"
-  }, icon, columnName)), children);
+    className: "flex-grow select-none"
+  }, text)), canHide ? /*#__PURE__*/React__default.createElement(Checkbox, {
+    checked: column.getIsVisible(),
+    onChange: column.toggleVisibility
+  }) : null);
 });
-const isOrderingAllowed = (table, column) => {
-  var _column$columnDef$met;
-  const meta = table.options.meta;
-  return meta.enableColumnReordering ? !((_column$columnDef$met = column.columnDef.meta) !== null && _column$columnDef$met !== void 0 && _column$columnDef$met.disableReordering) : false;
-};
-const isColumnOrderingDisabled = (table, column) => {
-  var _column$columnDef$met2;
-  const meta = table.options.meta;
-  return meta.enableColumnReordering && !!((_column$columnDef$met2 = column.columnDef.meta) !== null && _column$columnDef$met2 !== void 0 && _column$columnDef$met2.disableReordering);
-};
-const SortableColumnContainer = ({
-  state,
-  moveColumn,
-  reorderColumn,
-  table,
-  query
-}) => {
+function ColumnSettingsButton(props) {
+  const {
+    table
+  } = props;
   const {
     texts
   } = useLocalization();
-  const meta = table.options.meta;
-  const reorder = (activeId, overId, listId) => {
-    const draggedColumn = state[listId].find(c => c.id === activeId);
-    const targetColumn = state[listId].find(c => c.id === overId);
-    if (draggedColumn && targetColumn) {
-      reorderColumn(draggedColumn.id, targetColumn.id, listId === 'visible');
-    }
-  };
-  const move = (activeId, oldListId) => {
-    const column = state[oldListId].find(c => c.id === activeId);
-    if (column) {
-      moveColumn(column);
+  const [query, setQuery] = React__default.useState('');
+  const allColumns = table.getAllLeafColumns();
+  const tableMeta = table.options.meta;
+  const columns = React__default.useMemo(() => allColumns.filter(column => !isInternalColumn(column.id)).filter(column => query !== null && query !== void 0 && query.length ? getColumnName(column).toLowerCase().includes(query.toLowerCase()) : true), [allColumns, query]);
+  const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';
+  const handleReorder = (activeId, overId) => {
+    const items = columns.map(column => column.id);
+    if (columns.find(column => {
+      var _column$columnDef$met;
+      return column.id === overId && ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.disableReordering);
+    })) {
+      return;
     }
+    table.setColumnOrder(currentOrder => {
+      const firstNonInternalColumnIndex = currentOrder.findIndex(id => !id.startsWith('__') && id !== COLUMN_ID_FOR_ACTIONS);
+      return [...currentOrder.slice(0, firstNonInternalColumnIndex), ...SortablePrimitive.arrayMove(items, items.findIndex(c => c === activeId), items.findIndex(c => c === overId))];
+    });
   };
-  const handleColumnCheckboxChange = column => () => {
-    moveColumn === null || moveColumn === void 0 ? void 0 : moveColumn(column);
-    column.toggleVisibility();
-  };
-  const isColumnHidingAllowed = meta.enableColumnHiding;
-  const isQueryFilterNotApplied = query === '';
-  const filteredHiddenColumns = state.hidden.filter(column => {
-    var _column$columnDef$hea3;
-    return (_column$columnDef$hea3 = column.columnDef.header) === null || _column$columnDef$hea3 === void 0 ? void 0 : _column$columnDef$hea3.toString().toLowerCase().includes(query.toLowerCase());
-  });
-  const filteredVisibleColumns = state.visible.filter(column => {
-    var _column$columnDef$hea4;
-    return (_column$columnDef$hea4 = column.columnDef.header) === null || _column$columnDef$hea4 === void 0 ? void 0 : _column$columnDef$hea4.toString().toLowerCase().includes(query.toLowerCase());
-  });
-  const visibleListDescriptionText = isQueryFilterNotApplied ? texts.table2.columnSettings.columnsVisibleDrop : texts.table2.columnSettings.noVisibleColumns;
-  const hiddenListDescriptionText = isQueryFilterNotApplied ? texts.table2.columnSettings.columnsHiddenDrop : texts.table2.columnSettings.noHiddenColumns;
-  if (isColumnHidingAllowed) {
-    return /*#__PURE__*/React__default.createElement(Container, {
-      reorder: reorder,
-      move: move
-    }, /*#__PURE__*/React__default.createElement(Truncate, {
-      tooltip: texts.table2.columnSettings.columnsVisible
-    }, /*#__PURE__*/React__default.createElement("h5", {
-      className: "mx-4 my-[6px]"
-    }, texts.table2.columnSettings.columnsVisible)), /*#__PURE__*/React__default.createElement(List$1, {
-      id: "visible",
-      className: "flex min-h-[theme(spacing.8)] flex-col overflow-hidden px-2"
-    }, filteredVisibleColumns.length ? filteredVisibleColumns.map(column => {
-      // When searching a column, we disable reordering and make it fixed
-      const canBeReordered = isOrderingAllowed(table, column) && isQueryFilterNotApplied;
-      const isColumnFixed = isColumnOrderingDisabled(table, column) && isQueryFilterNotApplied;
-      return /*#__PURE__*/React__default.createElement(Item$3, {
-        key: column.id,
-        disabled: !canBeReordered,
-        id: column.id,
-        asChild: true
-      }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
-        canBeReordered: canBeReordered,
-        column: column,
-        isColumnFixed: isColumnFixed
-      }, column.getCanHide() ? /*#__PURE__*/React__default.createElement(Checkbox, {
-        className: "!mt-0",
-        checked: column.getIsVisible(),
-        onChange: handleColumnCheckboxChange(column)
-      }) : null));
-    }) :
-    /*#__PURE__*/
-    // For some reason wrapping this paragraph with Truncate will throw error in scenarios where
-    // we conditionally hide or show the paragraph e.g. moving the last column to the hide list
-    React__default.createElement("p", {
-      className: "text-grey-500 mb-0 flex h-8 items-center truncate px-2"
-    }, visibleListDescriptionText)), /*#__PURE__*/React__default.createElement(Truncate, {
-      tooltip: texts.table2.columnSettings.columnsHidden
-    }, /*#__PURE__*/React__default.createElement("h5", {
-      className: "mx-4 my-[6px] truncate"
-    }, texts.table2.columnSettings.columnsHidden)), /*#__PURE__*/React__default.createElement(List$1, {
-      id: "hidden",
-      className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-hidden px-2"
-    }, filteredHiddenColumns.length ? filteredHiddenColumns.map(column => {
-      // When searching a column, we disable reordering and make it fixed
-      const canBeReordered = isOrderingAllowed(table, column) && isQueryFilterNotApplied;
-      const isColumnFixed = isColumnOrderingDisabled(table, column) && isQueryFilterNotApplied;
-      return /*#__PURE__*/React__default.createElement(Item$3, {
-        key: column.id,
-        disabled: !canBeReordered,
-        id: column.id,
-        asChild: true
-      }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
-        canBeReordered: canBeReordered,
-        column: column,
-        isColumnFixed: isColumnFixed
-      }, column.getCanHide() ? /*#__PURE__*/React__default.createElement(Checkbox, {
-        className: "!mt-0",
-        checked: column.getIsVisible(),
-        onChange: handleColumnCheckboxChange(column)
-      }) : null));
-    }) :
-    /*#__PURE__*/
-    // For some reason wrapping this paragraph with Truncate will throw error in scenarios where
-    // we conditionally hide or show the paragraph e.g. moving the last column to the visible list
-    React__default.createElement("p", {
-      className: "text-grey-500 mb-0 flex h-8 items-center truncate px-2"
-    }, hiddenListDescriptionText)));
-  }
-  return /*#__PURE__*/React__default.createElement(Container, {
-    reorder: reorder,
-    move: move
+  const popover = popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
+    align: "end"
+  }, /*#__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.table2.columnSettings.search,
+    value: query
+  }) : null, tableMeta.enableColumnReordering && columns.length && !(query !== null && query !== void 0 && query.length) ? /*#__PURE__*/React__default.createElement(Container, {
+    reorder: handleReorder
   }, /*#__PURE__*/React__default.createElement(List$1, {
-    id: "visible",
-    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-hidden px-2"
-  }, state.visible.length ? state.visible.filter(column => {
-    var _column$columnDef$hea5;
-    return (_column$columnDef$hea5 = column.columnDef.header) === null || _column$columnDef$hea5 === void 0 ? void 0 : _column$columnDef$hea5.toString().toLowerCase().includes(query.toLowerCase());
-  }).map(column => {
-    // When searching a column, we disable reordering and make it fixed
-    const canBeReordered = isOrderingAllowed(table, column) && isQueryFilterNotApplied;
-    const isColumnFixed = isColumnOrderingDisabled(table, column) && isQueryFilterNotApplied;
+    id: "columns",
+    className: listClassName
+  }, columns.map(column => {
+    var _column$columnDef$met2, _column$columnDef$met3;
     return /*#__PURE__*/React__default.createElement(Item$3, {
       key: column.id,
-      disabled: !canBeReordered,
       id: column.id,
+      disabled: (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.disableReordering,
       asChild: true
-    }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
-      canBeReordered: canBeReordered,
+    }, /*#__PURE__*/React__default.createElement(Column$1, {
       column: column,
-      isColumnFixed: isColumnFixed
+      draggable: !((_column$columnDef$met3 = column.columnDef.meta) !== null && _column$columnDef$met3 !== void 0 && _column$columnDef$met3.disableReordering),
+      isOrderingEnabled: true
     }));
-  }) : null));
-};
-const reorder = (draggedColumnId, targetColumnId, list = []) => {
-  const nextColumnOrder = [...list];
-  nextColumnOrder.splice(nextColumnOrder.findIndex(c => c.id === targetColumnId), 0, nextColumnOrder.splice(nextColumnOrder.findIndex(c => c.id === draggedColumnId), 1)[0]);
-  return nextColumnOrder;
-};
-const ColumnSettingsButton = ({
-  table
-}) => {
-  const {
-    texts
-  } = useLocalization();
-  const [query, setQuery] = React__default.useState('');
-  const columns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
-  const [state, setState] = React__default.useState({
-    visible: columns.filter(column => column.getIsVisible()),
-    hidden: columns.filter(column => !column.getIsVisible())
-  });
-  const initialOrderedColumns = React__default.useRef(columns);
-  const moveColumnToList = column => {
-    // If column can't hide then don't toggle visiblity
-    if (column.getCanHide()) {
-      column.toggleVisibility();
-    }
-    if (state.visible.find(c => c.id === column.id)) {
-      setState(currentState => {
-        const filteredColumns = currentState.visible.filter(c => c.id !== column.id);
-        if (column.getCanHide()) {
-          const hiddenColumns = [column].concat(...currentState.hidden);
-          // Sort the hidden column so that they follow the initial order of fixed columns
-          const sortedFixedHiddenColumns = hiddenColumns.filter(hiddenColumn => {
-            var _hiddenColumn$columnD;
-            return !!((_hiddenColumn$columnD = hiddenColumn.columnDef.meta) !== null && _hiddenColumn$columnD !== void 0 && _hiddenColumn$columnD.disableReordering);
-          }).sort((colA, colB) => {
-            const indexA = initialOrderedColumns.current.indexOf(colA);
-            const indexB = initialOrderedColumns.current.indexOf(colB);
-            return indexA - indexB;
-          });
-          const reorderableHiddenColumns = hiddenColumns.filter(hiddenColumn => {
-            var _hiddenColumn$columnD2;
-            return !((_hiddenColumn$columnD2 = hiddenColumn.columnDef.meta) !== null && _hiddenColumn$columnD2 !== void 0 && _hiddenColumn$columnD2.disableReordering);
-          });
-          return {
-            visible: filteredColumns,
-            hidden: [...sortedFixedHiddenColumns, ...reorderableHiddenColumns]
-          };
-        }
-        // If column can't hide and it is dragged to hidden column list then move the column to the bottom of
-        // the visible column list
-        return {
-          visible: filteredColumns.concat(column),
-          hidden: currentState.hidden
-        };
-      });
-    } else {
-      setState(currentState => {
-        let visibleColumns = [];
-        // If ordering is allowed then we don't care about the previous column order
-        if (isOrderingAllowed(table, column)) {
-          visibleColumns = currentState.visible.concat(column);
-        } else {
-          const orderedVisibleColumns = initialOrderedColumns.current.filter(orderedColumn => !state.hidden.find(c => c.id === orderedColumn.id) || orderedColumn.id === column.id).map(({
-            id
-          }) => id);
-          const movedColumnIndex = orderedVisibleColumns.indexOf(column.id);
-          // Index of the column that is moved to visible list
-          // Intial value for the index is the last item in visible list
-          let index = currentState.visible.length;
-          currentState.visible.find((col, colIndex) => {
-            const columnIndex = orderedVisibleColumns.indexOf(col.id);
-            // Index where the moved column should be shown in visible list
-            if (movedColumnIndex < columnIndex) {
-              index = colIndex;
-              return true;
-            }
-            return false;
-          });
-          visibleColumns = currentState.visible.slice(0, index).concat(column).concat(currentState.visible.slice(index));
-        }
-        return {
-          visible: visibleColumns,
-          hidden: currentState.hidden.filter(c => c.id !== column.id)
-        };
-      });
-    }
-  };
-  const reorderColumnInList = (draggedColumnId, targetColumnId, isVisible) => {
-    var _columns$find, _columns$find$columnD;
-    const isTargetColumnFixed = !!((_columns$find = columns.find(column => column.id === targetColumnId)) !== null && _columns$find !== void 0 && (_columns$find$columnD = _columns$find.columnDef.meta) !== null && _columns$find$columnD !== void 0 && _columns$find$columnD.disableReordering);
-    if (isVisible) {
-      let firstReorderableVisibleColumnId = targetColumnId;
-      if (isTargetColumnFixed) {
-        var _state$visible$find$i, _state$visible$find;
-        firstReorderableVisibleColumnId = (_state$visible$find$i = (_state$visible$find = state.visible.find(visibleColumn => {
-          var _visibleColumn$column;
-          return !((_visibleColumn$column = visibleColumn.columnDef.meta) !== null && _visibleColumn$column !== void 0 && _visibleColumn$column.disableReordering);
-        })) === null || _state$visible$find === void 0 ? void 0 : _state$visible$find.id) !== null && _state$visible$find$i !== void 0 ? _state$visible$find$i : targetColumnId;
-      }
-      setState(currentState => ({
-        ...currentState,
-        visible: reorder(draggedColumnId, firstReorderableVisibleColumnId, currentState.visible)
-      }));
-    } else {
-      let firstReorderableHiddenColumnId = targetColumnId;
-      if (isTargetColumnFixed) {
-        var _state$hidden$find$id, _state$hidden$find;
-        firstReorderableHiddenColumnId = (_state$hidden$find$id = (_state$hidden$find = state.hidden.find(visibleColumn => {
-          var _visibleColumn$column2;
-          return !((_visibleColumn$column2 = visibleColumn.columnDef.meta) !== null && _visibleColumn$column2 !== void 0 && _visibleColumn$column2.disableReordering);
-        })) === null || _state$hidden$find === void 0 ? void 0 : _state$hidden$find.id) !== null && _state$hidden$find$id !== void 0 ? _state$hidden$find$id : targetColumnId;
-      }
-      setState(currentState => ({
-        ...currentState,
-        hidden: reorder(draggedColumnId, firstReorderableHiddenColumnId, currentState.hidden)
-      }));
-    }
-  };
-  const changeColumnOrder = newColumnOrder => {
-    const internals = [];
-    if (table.options.enableRowSelection) {
-      internals.push(COLUMN_ID_FOR_SELECTION);
-    }
-    if (table.options.enableExpanding) {
-      internals.push(COLUMN_ID_FOR_EXPANSION);
-    }
-    table.setColumnOrder(internals.concat(newColumnOrder.map(c => c.id)));
-  };
-  // probably a more elegant way to do this without local state but had
-  // a range of issues using the native apis directly
-  React__default.useEffect(() => {
-    changeColumnOrder([...state.visible, ...state.hidden]);
-  }, [state]);
-  // This effect moves up all fixed/unorderable columns before orderable columns.
-  // For custom column order, the fixed/unorderable columns will also move up before orderable columns.
-  // The order between all fixed/unorderable column items, and all orderable column items will be same as it was
-  // specified by the consumer.
-  React__default.useEffect(() => {
-    const orderableColumns = [];
-    const fixedColumns = [];
-    columns.forEach(column => {
-      var _column$columnDef$met3;
-      const isColumnFixed = !!((_column$columnDef$met3 = column.columnDef.meta) !== null && _column$columnDef$met3 !== void 0 && _column$columnDef$met3.disableReordering);
-      if (isColumnFixed) {
-        fixedColumns.push(column);
-      } else {
-        orderableColumns.push(column);
-      }
-    });
-    const newOrderedColumns = [...fixedColumns, ...orderableColumns];
-    // Changes order in the table
-    changeColumnOrder(newOrderedColumns);
-    // Changes order in the column settings button popover
-    setState({
-      visible: newOrderedColumns.filter(column => column.getIsVisible()),
-      hidden: newOrderedColumns.filter(column => !column.getIsVisible())
-    });
-    // update initial column order
-    initialOrderedColumns.current = newOrderedColumns;
-  }, []);
+  }))) : /*#__PURE__*/React__default.createElement("div", {
+    className: listClassName
+  }, columns.length ? columns.map(column => /*#__PURE__*/React__default.createElement(Column$1, {
+    column: column,
+    key: column.id
+  })) : texts.table2.columnSettings.noResults))));
   return /*#__PURE__*/React__default.createElement(Button$1, {
-    "aria-label": texts.table2.columnSettings.tooltip,
-    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
-      align: "end"
-    }, /*#__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.table2.columnSettings.search,
-      value: query
-    }) : null, /*#__PURE__*/React__default.createElement("div", {
-      className: "-ml-[calc(theme(spacing.4)_-_2px)] -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.7)_-_1px)] overflow-auto"
-    }, /*#__PURE__*/React__default.createElement(SortableColumnContainer, {
-      state: state,
-      moveColumn: moveColumnToList,
-      reorderColumn: reorderColumnInList,
-      table: table,
-      query: query
-    }))))),
+    popover: popover,
     tooltip: texts.table2.columnSettings.tooltip
   }, /*#__PURE__*/React__default.createElement(Icon, {
     name: "columns"
-  }), texts.table2.columnSettings.button);
-};
+  }), " ", texts.table2.columnSettings.button);
+}
 
 const ExpandedRow = ({
   index,
@@ -14218,7 +14004,7 @@ const Row$1 = props => {
   }, /*#__PURE__*/React__default.createElement(InternalRow, Object.assign({}, props)));
 };
 
-const Column$1 = ({
+const Column$2 = ({
   allColumns,
   column,
   index,
@@ -14459,7 +14245,7 @@ const ColumnFilter = props => {
     className: "mb-2 flex gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
-  }, index === 0 ? 'Where' : 'And'), /*#__PURE__*/React__default.createElement(Column$1, {
+  }, index === 0 ? 'Where' : 'And'), /*#__PURE__*/React__default.createElement(Column$2, {
     className: "!w-32 flex-shrink-0",
     allColumns: allColumns,
     column: column,
@@ -14715,10 +14501,10 @@ const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeB
   }), texts.table2.editing.button);
 });
 
-function Column$2(_) {
+function Column$3(_) {
   return null;
 }
-Column$2.displayName = 'Table2Column';
+Column$3.displayName = 'Table2Column';
 const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref) {
   // dom
   const {
@@ -15087,7 +14873,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     table: table
   }) : null);
 });
-Table2.Column = Column$2;
+Table2.Column = Column$3;
 
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   const {