@economic/taco 1.32.0 → 1.34.0

package/dist/esm/packages/taco/src/components/Table2/components/ColumnSettingsButton.js

@@ -1,374 +1,119 @@
 import React__default from 'react';
+import cn from 'classnames';
 import { Icon } from '../../Icon/Icon.js';
 import { useLocalization } from '../../Provider/Localization.js';
 import { Button } from '../../Button/Button.js';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { Input } from '../../Input/Input.js';
 import { Popover } from '../../Popover/Popover.js';
-import { isInternalColumn, COLUMN_ID_FOR_SELECTION, COLUMN_ID_FOR_EXPANSION } from '../utilities/columns.js';
+import { isInternalColumn, COLUMN_ID_FOR_ACTIONS } from '../utilities/columns.js';
 import { Container } from '../../../primitives/Sortable/components/Container.js';
-import '@dnd-kit/sortable';
+import { arrayMove } from '@dnd-kit/sortable';
 import { Item } from '../../../primitives/Sortable/components/Item.js';
 import { List } from '../../../primitives/Sortable/components/List.js';
 import { Truncate } from '../../Truncate/Truncate.js';
 
-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 = /*#__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), ...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, {
-      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, {
-        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, {
-      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, {
-        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, {
-    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, {
       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, {
       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, {
+    column: column,
+    key: column.id
+  })) : texts.table2.columnSettings.noResults))));
   return /*#__PURE__*/React__default.createElement(Button, {
-    "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);
+}
 
 export { ColumnSettingsButton };
 //# sourceMappingURL=ColumnSettingsButton.js.map

package/dist/esm/packages/taco/src/components/Table2/components/ColumnSettingsButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSettingsButton.js","sources":["../../../../../../../../src/components/Table2/components/ColumnSettingsButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../Checkbox/Checkbox';\nimport { Icon } from '../../Icon/Icon';\nimport { Input } from '../../Input/Input';\nimport { Button } from '../../Button/Button';\nimport { Popover } from '../../Popover/Popover';\nimport * as Sortable from '../../../primitives/Sortable/Sortable';\nimport { COLUMN_ID_FOR_EXPANSION, COLUMN_ID_FOR_SELECTION, isInternalColumn } from '../utilities/columns';\nimport { SortableItemId } from '../../../primitives/Sortable/Sortable';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Truncate } from '../../Truncate/Truncate';\n\ntype OrderableColumnProps = React.HTMLAttributes<HTMLDivElement> & {\n    canBeReordered: boolean;\n    column: RTColumn<any, any>;\n    isColumnFixed: boolean;\n};\n\nconst OrderableColumn = React.forwardRef<HTMLDivElement, OrderableColumnProps>((props, ref) => {\n    const { canBeReordered, column, children, isColumnFixed, ...attributes } = props;\n    let icon;\n\n    if (canBeReordered) {\n        icon = (\n            <Icon\n                name=\"drag\"\n                /** top margin of -3px on Icon, is added to make sure that each OrderableColumn is of 32px height **/\n                className=\"text-grey-500 hover:text-grey-700 mr-0.5 -ml-[6px] -mt-[3px] inline-block !h-5 !w-5 cursor-move\"\n            />\n        );\n    } else if (isColumnFixed) {\n        icon = <span className=\"mr-0.5 inline-flex w-4\" />;\n    }\n\n    // columnName should be a string\n    const columnName = column.columnDef.header?.toString() ?? column.columnDef.id ?? '';\n\n    return (\n        <div\n            {...attributes}\n            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\"\n            ref={ref}>\n            <Truncate tooltip={columnName}>\n                <span className=\"select-none\">\n                    {icon}\n                    {columnName}\n                </span>\n            </Truncate>\n            {children}\n        </div>\n    );\n});\n\nconst isOrderingAllowed = (table, column) => {\n    const meta = table.options.meta as TableMeta<any>;\n\n    return meta.enableColumnReordering ? !column.columnDef.meta?.disableReordering : false;\n};\n\nconst isColumnOrderingDisabled = (table, column) => {\n    const meta = table.options.meta as TableMeta<any>;\n    return meta.enableColumnReordering && !!column.columnDef.meta?.disableReordering;\n};\n\ntype SortableColumnContainerProps = {\n    state: VisibilityState;\n    moveColumn: (column: RTColumn<any, any>) => void;\n    reorderColumn: (draggedColumnId: string, targetColumnId: string, isVisible: boolean) => void;\n    table: RTTable<any>;\n    query: string;\n};\n\nconst SortableColumnContainer = ({ state, moveColumn, reorderColumn, table, query }: SortableColumnContainerProps) => {\n    const { texts } = useLocalization();\n    const meta = table.options.meta as TableMeta<any>;\n\n    const reorder = (activeId: SortableItemId, overId: SortableItemId, listId: string) => {\n        const draggedColumn: RTColumn<any, any> = state[listId].find(c => c.id === activeId);\n        const targetColumn: RTColumn<any, any> = state[listId].find(c => c.id === overId);\n\n        if (draggedColumn && targetColumn) {\n            reorderColumn(draggedColumn.id, targetColumn.id, listId === 'visible');\n        }\n    };\n\n    const move = (activeId: SortableItemId, oldListId: string) => {\n        const column = state[oldListId].find(c => c.id === activeId);\n\n        if (column) {\n            moveColumn(column);\n        }\n    };\n\n    const handleColumnCheckboxChange = column => () => {\n        moveColumn?.(column);\n        column.toggleVisibility();\n    };\n\n    const isColumnHidingAllowed = meta.enableColumnHiding;\n    const isQueryFilterNotApplied = query === '';\n    const filteredHiddenColumns = state.hidden.filter(column =>\n        column.columnDef.header?.toString().toLowerCase().includes(query.toLowerCase())\n    );\n    const filteredVisibleColumns = state.visible.filter(column =>\n        column.columnDef.header?.toString().toLowerCase().includes(query.toLowerCase())\n    );\n\n    const visibleListDescriptionText = isQueryFilterNotApplied\n        ? texts.table2.columnSettings.columnsVisibleDrop\n        : texts.table2.columnSettings.noVisibleColumns;\n    const hiddenListDescriptionText = isQueryFilterNotApplied\n        ? texts.table2.columnSettings.columnsHiddenDrop\n        : texts.table2.columnSettings.noHiddenColumns;\n\n    if (isColumnHidingAllowed) {\n        return (\n            <Sortable.Container reorder={reorder} move={move}>\n                <Truncate tooltip={texts.table2.columnSettings.columnsVisible}>\n                    <h5 className=\"mx-4 my-[6px]\">{texts.table2.columnSettings.columnsVisible}</h5>\n                </Truncate>\n                <Sortable.List id=\"visible\" className=\"flex min-h-[theme(spacing.8)] flex-col overflow-hidden px-2\">\n                    {filteredVisibleColumns.length ? (\n                        filteredVisibleColumns.map(column => {\n                            // When searching a column, we disable reordering and make it fixed\n                            const canBeReordered = isOrderingAllowed(table, column) && isQueryFilterNotApplied;\n                            const isColumnFixed = isColumnOrderingDisabled(table, column) && isQueryFilterNotApplied;\n\n                            return (\n                                <Sortable.Item key={column.id} disabled={!canBeReordered} id={column.id} asChild>\n                                    <OrderableColumn\n                                        canBeReordered={canBeReordered}\n                                        column={column}\n                                        isColumnFixed={isColumnFixed}>\n                                        {column.getCanHide() ? (\n                                            <Checkbox\n                                                className=\"!mt-0\"\n                                                checked={column.getIsVisible()}\n                                                onChange={handleColumnCheckboxChange(column)}\n                                            />\n                                        ) : null}\n                                    </OrderableColumn>\n                                </Sortable.Item>\n                            );\n                        })\n                    ) : (\n                        // For some reason wrapping this paragraph with Truncate will throw error in scenarios where\n                        // we conditionally hide or show the paragraph e.g. moving the last column to the hide list\n                        <p className=\"text-grey-500 mb-0 flex h-8 items-center truncate px-2\">{visibleListDescriptionText}</p>\n                    )}\n                </Sortable.List>\n\n                <Truncate tooltip={texts.table2.columnSettings.columnsHidden}>\n                    <h5 className=\"mx-4 my-[6px] truncate\">{texts.table2.columnSettings.columnsHidden}</h5>\n                </Truncate>\n                <Sortable.List id=\"hidden\" className=\"flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-hidden px-2\">\n                    {filteredHiddenColumns.length ? (\n                        filteredHiddenColumns.map((column: RTColumn<any, any>) => {\n                            // When searching a column, we disable reordering and make it fixed\n                            const canBeReordered = isOrderingAllowed(table, column) && isQueryFilterNotApplied;\n                            const isColumnFixed = isColumnOrderingDisabled(table, column) && isQueryFilterNotApplied;\n\n                            return (\n                                <Sortable.Item key={column.id} disabled={!canBeReordered} id={column.id} asChild>\n                                    <OrderableColumn\n                                        canBeReordered={canBeReordered}\n                                        column={column}\n                                        isColumnFixed={isColumnFixed}>\n                                        {column.getCanHide() ? (\n                                            <Checkbox\n                                                className=\"!mt-0\"\n                                                checked={column.getIsVisible()}\n                                                onChange={handleColumnCheckboxChange(column)}\n                                            />\n                                        ) : null}\n                                    </OrderableColumn>\n                                </Sortable.Item>\n                            );\n                        })\n                    ) : (\n                        // For some reason wrapping this paragraph with Truncate will throw error in scenarios where\n                        // we conditionally hide or show the paragraph e.g. moving the last column to the visible list\n                        <p className=\"text-grey-500 mb-0 flex h-8 items-center truncate px-2\">{hiddenListDescriptionText}</p>\n                    )}\n                </Sortable.List>\n            </Sortable.Container>\n        );\n    }\n\n    return (\n        <Sortable.Container reorder={reorder} move={move}>\n            <Sortable.List id=\"visible\" className=\"flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-hidden px-2\">\n                {state.visible.length\n                    ? state.visible\n                          .filter(column => column.columnDef.header?.toString().toLowerCase().includes(query.toLowerCase()))\n                          .map(column => {\n                              // When searching a column, we disable reordering and make it fixed\n                              const canBeReordered = isOrderingAllowed(table, column) && isQueryFilterNotApplied;\n                              const isColumnFixed = isColumnOrderingDisabled(table, column) && isQueryFilterNotApplied;\n\n                              return (\n                                  <Sortable.Item key={column.id} disabled={!canBeReordered} id={column.id} asChild>\n                                      <OrderableColumn\n                                          canBeReordered={canBeReordered}\n                                          column={column}\n                                          isColumnFixed={isColumnFixed}\n                                      />\n                                  </Sortable.Item>\n                              );\n                          })\n                    : null}\n            </Sortable.List>\n        </Sortable.Container>\n    );\n};\n\nconst reorder = (draggedColumnId: string, targetColumnId: string, list: RTColumn<any>[] = []): RTColumn<any>[] => {\n    const nextColumnOrder = [...list];\n    nextColumnOrder.splice(\n        nextColumnOrder.findIndex(c => c.id === targetColumnId),\n        0,\n        nextColumnOrder.splice(\n            nextColumnOrder.findIndex(c => c.id === draggedColumnId),\n            1\n        )[0]\n    );\n    return nextColumnOrder;\n};\n\ntype VisibilityState = {\n    visible: RTColumn<any>[];\n    hidden: RTColumn<any>[];\n};\ntype ColumnSettingsButtonProps = {\n    table: RTTable<any>;\n};\n\nexport const ColumnSettingsButton = ({ table }: ColumnSettingsButtonProps) => {\n    const { texts } = useLocalization();\n    const [query, setQuery] = React.useState('');\n\n    const columns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));\n\n    const [state, setState] = React.useState<VisibilityState>({\n        visible: columns.filter(column => column.getIsVisible()),\n        hidden: columns.filter(column => !column.getIsVisible()),\n    });\n\n    const initialOrderedColumns = React.useRef(columns);\n\n    const moveColumnToList = (column: RTColumn<any, any>) => {\n        // If column can't hide then don't toggle visiblity\n        if (column.getCanHide()) {\n            column.toggleVisibility();\n        }\n\n        if (state.visible.find(c => c.id === column.id)) {\n            setState(currentState => {\n                const filteredColumns = currentState.visible.filter(c => c.id !== column.id);\n\n                if (column.getCanHide()) {\n                    const hiddenColumns = [column].concat(...currentState.hidden);\n\n                    // Sort the hidden column so that they follow the initial order of fixed columns\n                    const sortedFixedHiddenColumns = hiddenColumns\n                        .filter(hiddenColumn => !!hiddenColumn.columnDef.meta?.disableReordering)\n                        .sort((colA, colB) => {\n                            const indexA = initialOrderedColumns.current.indexOf(colA);\n                            const indexB = initialOrderedColumns.current.indexOf(colB);\n\n                            return indexA - indexB;\n                        });\n\n                    const reorderableHiddenColumns = hiddenColumns.filter(\n                        hiddenColumn => !hiddenColumn.columnDef.meta?.disableReordering\n                    );\n\n                    return {\n                        visible: filteredColumns,\n                        hidden: [...sortedFixedHiddenColumns, ...reorderableHiddenColumns],\n                    };\n                }\n\n                // If column can't hide and it is dragged to hidden column list then move the column to the bottom of\n                // the visible column list\n                return {\n                    visible: filteredColumns.concat(column),\n                    hidden: currentState.hidden,\n                };\n            });\n        } else {\n            setState(currentState => {\n                let visibleColumns: RTColumn<any>[] = [];\n\n                // If ordering is allowed then we don't care about the previous column order\n                if (isOrderingAllowed(table, column)) {\n                    visibleColumns = currentState.visible.concat(column);\n                } else {\n                    const orderedVisibleColumns = initialOrderedColumns.current\n                        .filter(\n                            orderedColumn => !state.hidden.find(c => c.id === orderedColumn.id) || orderedColumn.id === column.id\n                        )\n                        .map(({ id }) => id);\n\n                    const movedColumnIndex = orderedVisibleColumns.indexOf(column.id);\n\n                    // Index of the column that is moved to visible list\n                    // Intial value for the index is the last item in visible list\n                    let index = currentState.visible.length;\n\n                    currentState.visible.find((col, colIndex) => {\n                        const columnIndex = orderedVisibleColumns.indexOf(col.id);\n\n                        // Index where the moved column should be shown in visible list\n                        if (movedColumnIndex < columnIndex) {\n                            index = colIndex;\n                            return true;\n                        }\n\n                        return false;\n                    });\n\n                    visibleColumns = currentState.visible\n                        .slice(0, index)\n                        .concat(column)\n                        .concat(currentState.visible.slice(index));\n                }\n\n                return {\n                    visible: visibleColumns,\n                    hidden: currentState.hidden.filter(c => c.id !== column.id),\n                };\n            });\n        }\n    };\n\n    const reorderColumnInList = (draggedColumnId: string, targetColumnId: string, isVisible: boolean) => {\n        const isTargetColumnFixed = !!columns.find(column => column.id === targetColumnId)?.columnDef.meta?.disableReordering;\n\n        if (isVisible) {\n            let firstReorderableVisibleColumnId = targetColumnId;\n\n            if (isTargetColumnFixed) {\n                firstReorderableVisibleColumnId =\n                    state.visible.find(visibleColumn => !visibleColumn.columnDef.meta?.disableReordering)?.id ?? targetColumnId;\n            }\n\n            setState(currentState => ({\n                ...currentState,\n                visible: reorder(draggedColumnId, firstReorderableVisibleColumnId, currentState.visible),\n            }));\n        } else {\n            let firstReorderableHiddenColumnId = targetColumnId;\n\n            if (isTargetColumnFixed) {\n                firstReorderableHiddenColumnId =\n                    state.hidden.find(visibleColumn => !visibleColumn.columnDef.meta?.disableReordering)?.id ?? targetColumnId;\n            }\n\n            setState(currentState => ({\n                ...currentState,\n                hidden: reorder(draggedColumnId, firstReorderableHiddenColumnId, currentState.hidden),\n            }));\n        }\n    };\n\n    const changeColumnOrder = (newColumnOrder: RTColumn<any>[]) => {\n        const internals: string[] = [];\n\n        if (table.options.enableRowSelection) {\n            internals.push(COLUMN_ID_FOR_SELECTION);\n        }\n\n        if (table.options.enableExpanding) {\n            internals.push(COLUMN_ID_FOR_EXPANSION);\n        }\n\n        table.setColumnOrder(internals.concat(newColumnOrder.map(c => c.id)));\n    };\n\n    // probably a more elegant way to do this without local state but had\n    // a range of issues using the native apis directly\n    React.useEffect(() => {\n        changeColumnOrder([...state.visible, ...state.hidden]);\n    }, [state]);\n\n    // This effect moves up all fixed/unorderable columns before orderable columns.\n    // For custom column order, the fixed/unorderable columns will also move up before orderable columns.\n    // The order between all fixed/unorderable column items, and all orderable column items will be same as it was\n    // specified by the consumer.\n    React.useEffect(() => {\n        const orderableColumns: RTColumn<any>[] = [];\n        const fixedColumns: RTColumn<any>[] = [];\n\n        columns.forEach(column => {\n            const isColumnFixed = !!column.columnDef.meta?.disableReordering;\n\n            if (isColumnFixed) {\n                fixedColumns.push(column);\n            } else {\n                orderableColumns.push(column);\n            }\n        });\n\n        const newOrderedColumns = [...fixedColumns, ...orderableColumns];\n\n        // Changes order in the table\n        changeColumnOrder(newOrderedColumns);\n\n        // Changes order in the column settings button popover\n        setState({\n            visible: newOrderedColumns.filter(column => column.getIsVisible()),\n            hidden: newOrderedColumns.filter(column => !column.getIsVisible()),\n        });\n\n        // update initial column order\n        initialOrderedColumns.current = newOrderedColumns;\n    }, []);\n\n    return (\n        <Button\n            aria-label={texts.table2.columnSettings.tooltip}\n            popover={popoverProps => (\n                <Popover {...popoverProps}>\n                    <Popover.Content align=\"end\">\n                        <div className=\"flex w-60 flex-col gap-2\">\n                            {table.options.enableHiding ? (\n                                <Input\n                                    onChange={event => setQuery(event.target.value)}\n                                    placeholder={texts.table2.columnSettings.search}\n                                    value={query}\n                                />\n                            ) : null}\n                            <div className=\"-ml-[calc(theme(spacing.4)_-_2px)] -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.7)_-_1px)] overflow-auto\">\n                                <SortableColumnContainer\n                                    state={state}\n                                    moveColumn={moveColumnToList}\n                                    reorderColumn={reorderColumnInList}\n                                    table={table}\n                                    query={query}\n                                />\n                            </div>\n                        </div>\n                    </Popover.Content>\n                </Popover>\n            )}\n            tooltip={texts.table2.columnSettings.tooltip}>\n            <Icon name=\"columns\" />\n            {texts.table2.columnSettings.button}\n        </Button>\n    );\n};\n"],"names":["OrderableColumn","React","forwardRef","props","ref","canBeReordered","column","children","isColumnFixed","attributes","icon","Icon","name","className","columnName","columnDef","header","toString","id","Truncate","tooltip","isOrderingAllowed","table","meta","options","enableColumnReordering","disableReordering","isColumnOrderingDisabled","SortableColumnContainer","state","moveColumn","reorderColumn","query","texts","useLocalization","reorder","activeId","overId","listId","draggedColumn","find","c","targetColumn","move","oldListId","handleColumnCheckboxChange","toggleVisibility","isColumnHidingAllowed","enableColumnHiding","isQueryFilterNotApplied","filteredHiddenColumns","hidden","filter","toLowerCase","includes","filteredVisibleColumns","visible","visibleListDescriptionText","table2","columnSettings","columnsVisibleDrop","noVisibleColumns","hiddenListDescriptionText","columnsHiddenDrop","noHiddenColumns","Sortable","columnsVisible","length","map","key","disabled","asChild","getCanHide","Checkbox","checked","getIsVisible","onChange","columnsHidden","draggedColumnId","targetColumnId","list","nextColumnOrder","splice","findIndex","ColumnSettingsButton","setQuery","useState","columns","getAllLeafColumns","isInternalColumn","setState","initialOrderedColumns","useRef","moveColumnToList","currentState","filteredColumns","hiddenColumns","concat","sortedFixedHiddenColumns","hiddenColumn","sort","colA","colB","indexA","current","indexOf","indexB","reorderableHiddenColumns","visibleColumns","orderedVisibleColumns","orderedColumn","movedColumnIndex","index","col","colIndex","columnIndex","slice","reorderColumnInList","isVisible","isTargetColumnFixed","firstReorderableVisibleColumnId","visibleColumn","firstReorderableHiddenColumnId","changeColumnOrder","newColumnOrder","internals","enableRowSelection","push","COLUMN_ID_FOR_SELECTION","enableExpanding","COLUMN_ID_FOR_EXPANSION","setColumnOrder","useEffect","orderableColumns","fixedColumns","forEach","newOrderedColumns","Button","popover","popoverProps","Popover","Content","align","enableHiding","Input","event","target","value","placeholder","search","button"],"mappings":"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"}
+{"version":3,"file":"ColumnSettingsButton.js","sources":["../../../../../../../../src/components/Table2/components/ColumnSettingsButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTable, Column as RTColumn, TableMeta } from '@tanstack/react-table';\nimport { Button } from '../../Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Checkbox } from '../../Checkbox/Checkbox';\nimport { Popover } from '../../Popover/Popover';\nimport { Input } from '../../Input/Input';\nimport * as SortablePrimitive from '../../../primitives/Sortable/Sortable';\nimport { Icon } from '../../Icon/Icon';\nimport { COLUMN_ID_FOR_ACTIONS, isInternalColumn } from '../utilities/columns';\nimport { Truncate } from '../../Truncate/Truncate';\n\ntype ColumnProps<TType = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    column: RTColumn<TType, unknown>;\n    draggable?: boolean;\n    isOrderingEnabled?: boolean;\n};\n\nfunction getColumnName<TType = unknown>(column: RTColumn<TType, unknown>) {\n    return column.columnDef.header?.toString() ?? column.columnDef.id ?? '';\n}\n\nconst Column = React.forwardRef(function Column<TType = unknown>(props: ColumnProps<TType>, ref: React.Ref<HTMLDivElement>) {\n    const { column, draggable = false, isOrderingEnabled, ...dragAttributes } = props;\n    const canHide = column.getCanHide();\n\n    const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {\n        'hover:bg-grey-200': canHide || draggable,\n        'hover:cursor-pointer': canHide,\n        'active:cursor-move active:bg-grey-300': draggable,\n    });\n\n    const attributes = draggable ? dragAttributes : undefined;\n    const text = getColumnName(column);\n\n    return (\n        <div {...attributes} key={column.id} className={className} onClick={() => column.toggleVisibility()} ref={ref}>\n            {draggable ? (\n                <Icon name=\"drag\" className=\"text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5\" />\n            ) : isOrderingEnabled ? (\n                <span className=\"flex w-2\" />\n            ) : null}\n            <Truncate tooltip={text}>\n                <span className=\"flex-grow select-none\">{text}</span>\n            </Truncate>\n            {canHide ? <Checkbox checked={column.getIsVisible()} onChange={column.toggleVisibility} /> : null}\n        </div>\n    );\n});\n\nexport type ColumnSettingsProps<TType = unknown> = {\n    table: RTable<TType>;\n};\n\nexport function ColumnSettingsButton<TType = unknown>(props: ColumnSettingsProps<TType>) {\n    const { table } = props;\n    const { texts } = useLocalization();\n    const [query, setQuery] = React.useState('');\n    const allColumns = table.getAllLeafColumns();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columns = React.useMemo(\n        () =>\n            allColumns\n                .filter(column => !isInternalColumn(column.id))\n                .filter(column => (query?.length ? getColumnName(column).toLowerCase().includes(query.toLowerCase()) : true)),\n        [allColumns, query]\n    );\n\n    const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';\n\n    const handleReorder = (activeId, overId) => {\n        const items = columns.map(column => column.id);\n\n        if (columns.find(column => column.id === overId && column.columnDef.meta?.disableReordering)) {\n            return;\n        }\n\n        table.setColumnOrder(currentOrder => {\n            const firstNonInternalColumnIndex = currentOrder.findIndex(\n                id => !id.startsWith('__') && id !== COLUMN_ID_FOR_ACTIONS\n            );\n\n            return [\n                ...currentOrder.slice(0, firstNonInternalColumnIndex),\n                ...SortablePrimitive.arrayMove(\n                    items,\n                    items.findIndex(c => c === activeId),\n                    items.findIndex(c => c === overId)\n                ),\n            ];\n        });\n    };\n\n    const popover = popoverProps => (\n        <Popover {...popoverProps}>\n            <Popover.Content align=\"end\">\n                <div className=\"flex w-60 flex-col gap-2\">\n                    {table.options.enableHiding ? (\n                        <Input\n                            onChange={event => setQuery(event.target.value)}\n                            placeholder={texts.table2.columnSettings.search}\n                            value={query}\n                        />\n                    ) : null}\n                    {tableMeta.enableColumnReordering && columns.length && !query?.length ? (\n                        <SortablePrimitive.Container reorder={handleReorder}>\n                            <SortablePrimitive.List id=\"columns\" className={listClassName}>\n                                {columns.map(column => (\n                                    <SortablePrimitive.Item\n                                        key={column.id}\n                                        id={column.id}\n                                        disabled={column.columnDef.meta?.disableReordering}\n                                        asChild>\n                                        <Column\n                                            column={column as any}\n                                            draggable={!column.columnDef.meta?.disableReordering}\n                                            isOrderingEnabled\n                                        />\n                                    </SortablePrimitive.Item>\n                                ))}\n                            </SortablePrimitive.List>\n                        </SortablePrimitive.Container>\n                    ) : (\n                        <div className={listClassName}>\n                            {columns.length\n                                ? columns.map(column => <Column column={column as any} key={column.id} />)\n                                : texts.table2.columnSettings.noResults}\n                        </div>\n                    )}\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n\n    return (\n        <Button popover={popover} tooltip={texts.table2.columnSettings.tooltip}>\n            <Icon name=\"columns\" /> {texts.table2.columnSettings.button}\n        </Button>\n    );\n}\n"],"names":["getColumnName","column","columnDef","header","toString","id","Column","React","forwardRef","props","ref","draggable","isOrderingEnabled","dragAttributes","canHide","getCanHide","className","cn","attributes","undefined","text","key","onClick","toggleVisibility","Icon","name","Truncate","tooltip","Checkbox","checked","getIsVisible","onChange","ColumnSettingsButton","table","texts","useLocalization","query","setQuery","useState","allColumns","getAllLeafColumns","tableMeta","options","meta","columns","useMemo","filter","isInternalColumn","length","toLowerCase","includes","listClassName","handleReorder","activeId","overId","items","map","find","disableReordering","setColumnOrder","currentOrder","firstNonInternalColumnIndex","findIndex","startsWith","COLUMN_ID_FOR_ACTIONS","slice","SortablePrimitive","c","popover","popoverProps","Popover","Content","align","enableHiding","Input","event","target","value","placeholder","table2","columnSettings","search","enableColumnReordering","reorder","disabled","asChild","noResults","Button","button"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/components/column/Cell.js

@@ -14,7 +14,7 @@ import { globalFilterFn, columnFilterFn } from '../../utilities/filterFn.js';
 import { MOVE_DIR } from '../../hooks/useEditMode.js';
 import { IndicatorReason, Indicator } from './Indicator.js';
 import { ValidationError } from './ValidationError.js';
-import { hasChanged, willRowMoveAfterSorting } from './utils.js';
+import { clickableNodeNames, hasChanged, willRowMoveAfterSorting } from './utils.js';
 
 const Cell = function Cell(props) {
   var _cell$column$columnDe, _cell$column$columnDe2, _table$options$meta;
@@ -306,11 +306,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);
       };
     }
   }