@economic/taco 2.23.0 → 2.24.0

package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js

@@ -5,6 +5,7 @@ import { useLocalization } from '../../../../Provider/Localization.js';
 import { Checkbox } from '../../../../Checkbox/Checkbox.js';
 import { Shortcut } from '../../../../Shortcut/Shortcut.js';
 import { getRadioClassnames } from '../../../../RadioGroup/util.js';
+import { TableServerLoadAllState } from '../../../../../primitives/Table/types.js';
 import { Header as Header$1 } from '../header/Header.js';
 import { RowContext } from '../../rows/RowContext.js';
 import { DisplayCell } from '../cell/DisplayCell.js';
@@ -19,6 +20,25 @@ function Header(context) {
     const isAllRowsSelected = context.table.getIsAllRowsSelected();
     const isSomeRowsSelected = context.table.getIsSomeRowsSelected();
     const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;
+    const tableMeta = context.table.options.meta;
+    const isServerloading = tableMeta.server.loadAllStatus === TableServerLoadAllState.Loading;
+    const isLoadingAll = isAllRowsSelected && isServerloading;
+    const isLoadingPreviousRows = tableMeta.rowSelection.lastSelectedRowIndex !== undefined && isServerloading;
+    const toggleSelectAll = function () {
+      try {
+        const _temp = function () {
+          if (!isServerloading) {
+            var _tableMeta$server, _tableMeta$server$loa;
+            return Promise.resolve((_tableMeta$server = tableMeta.server) === null || _tableMeta$server === void 0 ? void 0 : (_tableMeta$server$loa = _tableMeta$server.loadAllIfNeeded) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, context.table.getState().sorting, context.table.getState().columnFilters, undefined)).then(function () {
+              context.table.toggleAllRowsSelected(!isAllRowsSelected);
+            });
+          }
+        }();
+        return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
     return /*#__PURE__*/React__default.createElement(Header$1, Object.assign({}, context), /*#__PURE__*/React__default.createElement(Tooltip, {
       title: title
     }, /*#__PURE__*/React__default.createElement(Checkbox, {
@@ -27,8 +47,9 @@ function Header(context) {
       key: String(`${isAllRowsSelected}_${isSomeRowsSelected}`),
       checked: isAllRowsSelected,
       indeterminate: isSomeRowsSelected,
-      onChange: context.table.toggleAllRowsSelected,
-      tabIndex: -1
+      onChange: toggleSelectAll,
+      tabIndex: -1,
+      loading: isLoadingAll || isLoadingPreviousRows
     })));
   } else {
     return /*#__PURE__*/React__default.createElement(Header$1, Object.assign({}, context));
@@ -50,18 +71,49 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const isSelected = context.row.getIsSelected();
   const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;
-  if (context.table.options.enableMultiRowSelection) {
-    const handleClick = event => {
-      event.stopPropagation();
-      if (event.shiftKey) {
-        var _tableMeta$rowSelecti;
-        const [fromIndex, toIndex] = toggleBetween((_tableMeta$rowSelecti = tableMeta.rowSelection.lastSelectedRowIndex.current) !== null && _tableMeta$rowSelecti !== void 0 ? _tableMeta$rowSelecti : 0, rowIndex);
-        context.table.getRowModel().rows.slice(fromIndex, toIndex + 1).forEach(row => row.toggleSelected(true));
-      } else {
-        context.row.toggleSelected();
+  const handleCheckboxClick = function (event) {
+    try {
+      function _temp5() {
+        tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;
       }
-      tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;
-    };
+      event.stopPropagation();
+      const _temp4 = function () {
+        if (event.shiftKey) {
+          var _tableMeta$rowSelecti;
+          function _temp3() {
+            const currentlySelected = context.table.getSelectedRowModel().rows;
+            // concat currently selected with selection range and get rid of duplicates using "Set".
+            // converting allSelected array into updater object: {[row.id]: true}
+            const allSelected = [...new Set(currentlySelected.concat(selectionRangeRows))];
+            const updater = allSelected.reduce((obj, row) => Object.assign(obj, {
+              [row.id]: true
+            }), {});
+            context.table.setRowSelection(updater);
+          }
+          const [fromIndex, toIndex] = toggleBetween((_tableMeta$rowSelecti = tableMeta.rowSelection.lastSelectedRowIndex.current) !== null && _tableMeta$rowSelecti !== void 0 ? _tableMeta$rowSelecti : 0, rowIndex);
+          const selectionRangeRows = context.table.getRowModel().rows.slice(fromIndex, toIndex + 1);
+          // Table data loader filling-in all the rest of unloaded items with the undefined values,
+          // so we can easily check if at least one of the rows in the selection range is undefined,
+          // then it means that we need to call load all.
+          const hasUndefinedRows = selectionRangeRows.some(row => row.original === undefined);
+          const _temp2 = function () {
+            if (hasUndefinedRows) {
+              var _tableMeta$server2, _tableMeta$server2$lo;
+              // We don't need to await and freeze UI
+              return Promise.resolve((_tableMeta$server2 = tableMeta.server) === null || _tableMeta$server2 === void 0 ? void 0 : (_tableMeta$server2$lo = _tableMeta$server2.loadAllIfNeeded) === null || _tableMeta$server2$lo === void 0 ? void 0 : _tableMeta$server2$lo.call(_tableMeta$server2, context.table.getState().sorting, context.table.getState().columnFilters, undefined)).then(function () {});
+            }
+          }();
+          return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
+        } else {
+          context.row.toggleSelected();
+        }
+      }();
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  if (context.table.options.enableMultiRowSelection) {
     return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, context), /*#__PURE__*/React__default.createElement(Tooltip, {
       title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title, /*#__PURE__*/React__default.createElement(Shortcut, {
         className: "ml-2",
@@ -71,7 +123,7 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
       "aria-label": title,
       className: "!mt-0",
       checked: isSelected,
-      onClick: handleClick,
+      onClick: handleCheckboxClick,
       // this is necessary to remove console spam from eslint
       onChange: () => false,
       tabIndex: isActiveRow ? 0 : -1

package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n\n    if (context.table.options.enableMultiRowSelection) {\n        const isAllRowsSelected = context.table.getIsAllRowsSelected();\n        const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n        const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n\n        return (\n            <ColumnHeader {...context}>\n                <Tooltip title={title}>\n                    <Checkbox\n                        aria-label={title}\n                        className=\"hover:border-blue !mt-0\"\n                        key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n                        checked={isAllRowsSelected}\n                        indeterminate={isSomeRowsSelected}\n                        onChange={context.table.toggleAllRowsSelected}\n                        tabIndex={-1}\n                    />\n                </Tooltip>\n            </ColumnHeader>\n        );\n    } else {\n        return <ColumnHeader {...context}></ColumnHeader>;\n    }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n    function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n        const { texts } = useLocalization();\n        const { rowIndex } = React.useContext(RowContext);\n        const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n        const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n        const isSelected = context.row.getIsSelected();\n        const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n        if (context.table.options.enableMultiRowSelection) {\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n\n                if (event.shiftKey) {\n                    const [fromIndex, toIndex] = toggleBetween(\n                        tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0,\n                        rowIndex\n                    );\n\n                    context.table\n                        .getRowModel()\n                        .rows.slice(fromIndex, toIndex + 1)\n                        .forEach(row => row.toggleSelected(true));\n                } else {\n                    context.row.toggleSelected();\n                }\n\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <Tooltip\n                        title={\n                            <>\n                                {title}\n                                <Shortcut className=\"ml-2\" keys=\"Space\" />\n                            </>\n                        }>\n                        <Checkbox\n                            aria-label={title}\n                            className=\"!mt-0\"\n                            checked={isSelected}\n                            onClick={handleClick}\n                            // this is necessary to remove console spam from eslint\n                            onChange={() => false}\n                            tabIndex={isActiveRow ? 0 : -1}\n                        />\n                    </Tooltip>\n                </DisplayCell>\n            );\n        } else {\n            const className = cn('!mt-0', getRadioClassnames());\n\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n                context.row.toggleSelected();\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <button\n                        className={className}\n                        aria-checked={isSelected}\n                        onClick={handleClick}\n                        role=\"radio\"\n                        tabIndex={-1}\n                        type=\"button\">\n                        {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n                    </button>\n                </DisplayCell>\n            );\n        }\n    },\n    function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n        const oldTableMeta = oldProps.table.options.meta as TableMeta<unknown>;\n        const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n        // we memo because we don't want the row re-rendering and removing focus from the checkbox\n        // we can't default to the standard comparison because we need currentRow off the table meta\n        // and we don't really care about re-rendering in any other scenario\n        return (\n            newTableMeta.rowActive.rowActiveIndex === oldTableMeta.rowActive.rowActiveIndex &&\n            newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n        );\n    }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n    hasDrag: boolean,\n    hasExpansion: boolean\n): DisplayColumnDef<TType, unknown> {\n    const size = hasDrag && hasExpansion ? 22 : 40;\n\n    return {\n        id: COLUMN_ID,\n        header: Header,\n        cell: Cell,\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: cn('!pt-[var(--table3-cell-padding-y)] !justify-end !p-0', {\n                '!pr-0.5': hasExpansion,\n                '!pr-3': !hasExpansion,\n            }),\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: cn('items-center !justify-end !p-0', { '!pr-0.5': hasExpansion, '!pr-3': !hasExpansion }),\n        },\n        // options\n        enableResizing: false,\n        size,\n        minSize: size,\n    };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","toggleAllRowsSelected","tabIndex","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","tableMeta","meta","isActiveRow","rowActive","rowActiveIndex","isSelected","row","getIsSelected","deselect","handleClick","event","stopPropagation","shiftKey","_tableMeta$rowSelecti","rowSelection","lastSelectedRowIndex","current","getRowModel","rows","slice","forEach","toggleSelected","DisplayCell","Shortcut","keys","onClick","cn","getRadioClassnames","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","hasDrag","hasExpansion","size","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","minSize"],"mappings":"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"}
+{"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta, RowSelectionState } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { TableServerLoadAllState } from '../../../../../primitives/Table/types';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n\n    if (context.table.options.enableMultiRowSelection) {\n        const isAllRowsSelected = context.table.getIsAllRowsSelected();\n        const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n        const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n        const tableMeta = context.table.options.meta as TableMeta<TType>;\n        const isServerloading = tableMeta.server.loadAllStatus === TableServerLoadAllState.Loading;\n        const isLoadingAll = isAllRowsSelected && isServerloading;\n        const isLoadingPreviousRows = tableMeta.rowSelection.lastSelectedRowIndex !== undefined && isServerloading;\n\n        const toggleSelectAll = async () => {\n            if (!isServerloading) {\n                await tableMeta.server?.loadAllIfNeeded?.(\n                    context.table.getState().sorting,\n                    context.table.getState().columnFilters,\n                    undefined\n                );\n                context.table.toggleAllRowsSelected(!isAllRowsSelected);\n            }\n        };\n\n        return (\n            <ColumnHeader {...context}>\n                <Tooltip title={title}>\n                    <Checkbox\n                        aria-label={title}\n                        className=\"hover:border-blue !mt-0\"\n                        key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n                        checked={isAllRowsSelected}\n                        indeterminate={isSomeRowsSelected}\n                        onChange={toggleSelectAll}\n                        tabIndex={-1}\n                        loading={isLoadingAll || isLoadingPreviousRows}\n                    />\n                </Tooltip>\n            </ColumnHeader>\n        );\n    } else {\n        return <ColumnHeader {...context}></ColumnHeader>;\n    }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n    function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n        const { texts } = useLocalization();\n        const { rowIndex } = React.useContext(RowContext);\n        const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n        const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n        const isSelected = context.row.getIsSelected();\n        const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n        const handleCheckboxClick = async (event: React.MouseEvent) => {\n            event.stopPropagation();\n\n            if (event.shiftKey) {\n                const [fromIndex, toIndex] = toggleBetween(tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0, rowIndex);\n\n                const selectionRangeRows = context.table.getRowModel().rows.slice(fromIndex, toIndex + 1);\n\n                // Table data loader filling-in all the rest of unloaded items with the undefined values,\n                // so we can easily check if at least one of the rows in the selection range is undefined,\n                // then it means that we need to call load all.\n                const hasUndefinedRows = selectionRangeRows.some(row => row.original === undefined);\n\n                if (hasUndefinedRows) {\n                    // We don't need to await and freeze UI\n                    await tableMeta.server?.loadAllIfNeeded?.(\n                        context.table.getState().sorting,\n                        context.table.getState().columnFilters,\n                        undefined\n                    );\n                }\n\n                const currentlySelected = context.table.getSelectedRowModel().rows;\n                // concat currently selected with selection range and get rid of duplicates using \"Set\".\n                const allSelected = [...new Set(currentlySelected.concat(selectionRangeRows))];\n                // converting allSelected array into updater object: {[row.id]: true}\n                const updater: RowSelectionState = allSelected.reduce((obj, row) => Object.assign(obj, { [row.id]: true }), {});\n\n                context.table.setRowSelection(updater);\n            } else {\n                context.row.toggleSelected();\n            }\n\n            tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n        };\n\n        if (context.table.options.enableMultiRowSelection) {\n            return (\n                <DisplayCell {...context}>\n                    <Tooltip\n                        title={\n                            <>\n                                {title}\n                                <Shortcut className=\"ml-2\" keys=\"Space\" />\n                            </>\n                        }>\n                        <Checkbox\n                            aria-label={title}\n                            className=\"!mt-0\"\n                            checked={isSelected}\n                            onClick={handleCheckboxClick}\n                            // this is necessary to remove console spam from eslint\n                            onChange={() => false}\n                            tabIndex={isActiveRow ? 0 : -1}\n                        />\n                    </Tooltip>\n                </DisplayCell>\n            );\n        } else {\n            const className = cn('!mt-0', getRadioClassnames());\n\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n                context.row.toggleSelected();\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <button\n                        className={className}\n                        aria-checked={isSelected}\n                        onClick={handleClick}\n                        role=\"radio\"\n                        tabIndex={-1}\n                        type=\"button\">\n                        {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n                    </button>\n                </DisplayCell>\n            );\n        }\n    },\n    function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n        const oldTableMeta = oldProps.table.options.meta as TableMeta<unknown>;\n        const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n        // we memo because we don't want the row re-rendering and removing focus from the checkbox\n        // we can't default to the standard comparison because we need currentRow off the table meta\n        // and we don't really care about re-rendering in any other scenario\n        return (\n            newTableMeta.rowActive.rowActiveIndex === oldTableMeta.rowActive.rowActiveIndex &&\n            newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n        );\n    }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n    hasDrag: boolean,\n    hasExpansion: boolean\n): DisplayColumnDef<TType, unknown> {\n    const size = hasDrag && hasExpansion ? 22 : 40;\n\n    return {\n        id: COLUMN_ID,\n        header: Header,\n        cell: Cell,\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: cn('!pt-[var(--table3-cell-padding-y)] !justify-end !p-0', {\n                '!pr-0.5': hasExpansion,\n                '!pr-3': !hasExpansion,\n            }),\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: cn('items-center !justify-end !p-0', { '!pr-0.5': hasExpansion, '!pr-3': !hasExpansion }),\n        },\n        // options\n        enableResizing: false,\n        size,\n        minSize: size,\n    };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","tableMeta","meta","isServerloading","server","loadAllStatus","TableServerLoadAllState","Loading","isLoadingAll","isLoadingPreviousRows","rowSelection","lastSelectedRowIndex","undefined","toggleSelectAll","_tableMeta$server","_tableMeta$server$loa","Promise","resolve","loadAllIfNeeded","call","getState","sorting","columnFilters","then","toggleAllRowsSelected","_temp","e","reject","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","tabIndex","loading","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","isActiveRow","rowActive","rowActiveIndex","isSelected","row","getIsSelected","deselect","handleCheckboxClick","event","current","stopPropagation","_temp4","shiftKey","_tableMeta$rowSelecti","_temp3","currentlySelected","getSelectedRowModel","rows","allSelected","Set","concat","selectionRangeRows","updater","reduce","obj","Object","assign","id","setRowSelection","getRowModel","slice","hasUndefinedRows","some","original","_temp2","_tableMeta$server2","_tableMeta$server2$lo","toggleSelected","_temp5","DisplayCell","Shortcut","keys","onClick","cn","getRadioClassnames","handleClick","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","hasDrag","hasExpansion","size","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","minSize"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js

@@ -10,13 +10,19 @@ import { Shortcut } from '../../../../../Shortcut/Shortcut.js';
 import { useIsLargeScreen } from '../../../../../../hooks/useIsLargeScreen.js';
 import { isInternalColumn } from '../../../../util/columns.js';
 import { Table3FilterComparator } from '../../../../types.js';
-import { Placeholder } from './components/Placeholder.js';
 import { Filter } from './components/Filter.js';
 
 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);
 }
+const placeholderFilter = {
+  id: null,
+  value: {
+    comparator: Table3FilterComparator.Contains,
+    value: undefined
+  }
+};
 function FiltersButton(props) {
   const {
     total,
@@ -36,41 +42,28 @@ function FiltersButton(props) {
     shift: true
   };
   // state, since we "apply" filters
-  const [filters, setFilters] = React__default.useState(appliedFilters);
-  const [placeholderCount, setPlaceholderCount] = React__default.useState(1);
+  const [filters, setFilters] = React__default.useState(appliedFilters.length ? appliedFilters : [placeholderFilter]);
   // filters
-  const handleChangeFilter = (currentId, filter) => {
+  const handleChangeFilter = (position, filter) => {
     setFilters(currentFilters => {
-      const nextFilters = [...currentFilters];
-      const index = nextFilters.findIndex(f => f.id === currentId);
-      nextFilters[index] = filter;
-      return nextFilters;
+      return currentFilters.map((current, index) => {
+        if (index === position) {
+          return filter;
+        }
+        return current;
+      });
     });
   };
-  const handleRemoveFilter = columnId => {
-    if (filters.length === 1 && placeholderCount === 0) {
-      setPlaceholderCount(count => count + 1);
+  const handleRemoveFilter = position => {
+    if (filters.length === 1) {
+      setFilters([placeholderFilter]);
+      return;
     }
-    setFilters(currentFilters => currentFilters.filter(f => f.id !== columnId));
-  };
-  // placeholders
-  const handleCreateFilterFromPlaceholder = columnId => {
-    setFilters(currentFilters => [...currentFilters, {
-      id: columnId,
-      value: {
-        comparator: Table3FilterComparator.Contains,
-        value: undefined
-      }
-    }]);
-    handleRemovePlaceholder();
-  };
-  const handleCreatePlaceholder = () => {
-    setPlaceholderCount(count => count + 1);
+    setFilters(currentFilters => currentFilters.filter((_, index) => index !== position));
   };
-  const handleRemovePlaceholder = () => {
-    setPlaceholderCount(count => count - 1);
+  const handleCreateNew = () => {
+    setFilters(filters.concat(placeholderFilter));
   };
-  //
   const handleApply = () => {
     table.setColumnFilters(() => {
       const newFilters = filters.filter(f => {
@@ -90,20 +83,17 @@ function FiltersButton(props) {
   };
   const handleClear = () => {
     table.resetColumnFilters();
-    setFilters([]);
-    setPlaceholderCount(1);
+    setFilters([placeholderFilter]);
   };
   const handleClose = React__default.useCallback(open => {
     if (!open) {
-      setFilters(appliedFilters);
-      setPlaceholderCount(appliedFilters.length === 0 ? 1 : 0);
+      setFilters(appliedFilters.length === 0 ? [placeholderFilter] : appliedFilters);
     }
   }, [appliedFilters]);
   // Because filters can be reset from outside
   React__default.useEffect(() => {
     if (appliedFilters.length === 0) {
-      setFilters([]);
-      setPlaceholderCount(1);
+      setFilters([placeholderFilter]);
     }
   }, [appliedFilters]);
   const buttonProps = {
@@ -133,19 +123,12 @@ function FiltersButton(props) {
       filters: filters,
       position: index,
       onChange: handleChangeFilter,
-      onRemove: handleRemoveFilter
-    }))), [...Array(placeholderCount)].map((_, index) => ( /*#__PURE__*/React__default.createElement(Placeholder, {
-      key: `placeholder_${index}`,
-      allColumns: allColumns,
-      filters: filters,
-      position: filters.length + index,
-      onCreate: handleCreateFilterFromPlaceholder,
-      onRemove: placeholderCount > 1 || filters.length > 0 ? handleRemovePlaceholder : undefined
+      onRemove: filters.length > 0 && filters.some(f => f.id) || filters.length > 1 ? handleRemoveFilter : undefined
     }))), /*#__PURE__*/React__default.createElement("div", {
       className: "justify-start"
     }, /*#__PURE__*/React__default.createElement(Button, {
       appearance: "discrete",
-      onClick: handleCreatePlaceholder
+      onClick: handleCreateNew
     }, "+ ", texts.table3.filters.buttons.addFilter))), /*#__PURE__*/React__default.createElement(Group, {
       className: "ml-auto"
     }, /*#__PURE__*/React__default.createElement(Popover.Close, null, /*#__PURE__*/React__default.createElement(Button, null, "Cancel")), /*#__PURE__*/React__default.createElement(Button, {

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filters.js","sources":["../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/Filters.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Table as RTable, Column as RTColumn } from '@tanstack/react-table';\nimport { Button } from '../../../../../Button/Button';\nimport { Icon } from '../../../../../Icon/Icon';\nimport { Popover } from '../../../../../Popover/Popover';\nimport { Table3FilterValue, Table3FilterComparator, Table3Filter, ColumnFilter } from '../../../../types';\nimport { Shortcut } from '../../../../../Shortcut/Shortcut';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { isInternalColumn } from '../../../../util/columns';\nimport { Placeholder } from './components/Placeholder';\nimport { Filter } from './components/Filter';\nimport { Group } from '../../../../../Group/Group';\nimport { useIsLargeScreen } from '../../../../../../hooks/useIsLargeScreen';\nimport { IconButton } from '../../../../../IconButton/IconButton';\n\nfunction sortByHeader<TType = unknown>(a: RTColumn<TType>, b: RTColumn<TType>) {\n    return (a.columnDef.meta?.header as string)?.localeCompare?.(b.columnDef.meta?.header as string);\n}\n\nexport type FiltersProps<TType = unknown> = {\n    total: number;\n    table: RTable<TType>;\n};\n\nexport function FiltersButton<TType = unknown>(props: FiltersProps<TType>) {\n    const { total, table } = props;\n    const { locale, texts } = useLocalization();\n    const ref = React.useRef<HTMLButtonElement>(null);\n    const isLargeScreen = useIsLargeScreen();\n    const allColumns = table\n        .getAllLeafColumns()\n        .filter(column => !isInternalColumn(column.id))\n        .sort(sortByHeader);\n    const appliedFilters = table.getState().columnFilters as Table3Filter[];\n\n    const shortcut = { key: 'f', meta: true, shift: true };\n\n    // state, since we \"apply\" filters\n    const [filters, setFilters] = React.useState<Table3Filter[]>(appliedFilters);\n    const [placeholderCount, setPlaceholderCount] = React.useState(1);\n\n    // filters\n    const handleChangeFilter = (currentId: string | null, filter: { id: string | null; value: Table3FilterValue }) => {\n        setFilters(currentFilters => {\n            const nextFilters = [...currentFilters];\n            const index = nextFilters.findIndex(f => f.id === currentId);\n            nextFilters[index] = filter;\n            return nextFilters;\n        });\n    };\n\n    const handleRemoveFilter = (columnId: string | null) => {\n        if (filters.length === 1 && placeholderCount === 0) {\n            setPlaceholderCount(count => count + 1);\n        }\n\n        setFilters(currentFilters => currentFilters.filter(f => f.id !== columnId));\n    };\n\n    // placeholders\n    const handleCreateFilterFromPlaceholder = (columnId: string) => {\n        setFilters(currentFilters => [\n            ...currentFilters,\n            {\n                id: columnId,\n                value: {\n                    comparator: Table3FilterComparator.Contains,\n                    value: undefined,\n                },\n            },\n        ]);\n        handleRemovePlaceholder();\n    };\n\n    const handleCreatePlaceholder = () => {\n        setPlaceholderCount(count => count + 1);\n    };\n\n    const handleRemovePlaceholder = () => {\n        setPlaceholderCount(count => count - 1);\n    };\n\n    //\n    const handleApply = () => {\n        table.setColumnFilters(() => {\n            const newFilters = filters.filter(f => {\n                if (f.id === null) {\n                    return false;\n                }\n\n                const controlRenderer = (allColumns.find(c => c.id === f.id) as RTColumn<TType, unknown>)?.columnDef.meta\n                    ?.control;\n                if (\n                    f.value.comparator === Table3FilterComparator.IsEmpty ||\n                    f.value.comparator === Table3FilterComparator.IsNotEmpty ||\n                    controlRenderer === 'switch'\n                ) {\n                    return true;\n                }\n                return !!f.value.value;\n            });\n            // Compiler didn't get that we stripped out filters with null ids, so we still need to cast a ColumnFilter type here\n            return newFilters as ColumnFilter[];\n        });\n    };\n\n    const handleClear = () => {\n        table.resetColumnFilters();\n        setFilters([]);\n        setPlaceholderCount(1);\n    };\n\n    const handleClose = React.useCallback(\n        (open: boolean) => {\n            if (!open) {\n                setFilters(appliedFilters);\n                setPlaceholderCount(appliedFilters.length === 0 ? 1 : 0);\n            }\n        },\n        [appliedFilters]\n    );\n\n    // Because filters can be reset from outside\n    React.useEffect(() => {\n        if (appliedFilters.length === 0) {\n            setFilters([]);\n            setPlaceholderCount(1);\n        }\n    }, [appliedFilters]);\n\n    const buttonProps = {\n        'aria-label': texts.table3.filters.tooltip,\n        className: cn({ '!wcag-blue-100': appliedFilters.length }),\n        shortcut,\n        popover: popoverProps => (\n            <Popover {...popoverProps} onChange={handleClose}>\n                <Popover.Content>\n                    <div className=\"flex w-[40rem] flex-col gap-4\">\n                        <div className=\"flex h-8\">\n                            <div className=\"flex w-full items-center gap-2\">\n                                <h4 className=\"mb-0 inline-flex\">{texts.table3.filters.button}</h4>\n                                <p className=\"text-grey-700 mb-0 mr-auto mt-px inline-flex\">\n                                    {texts.table3.filters.total\n                                        .replace(\n                                            '[CURRENT]',\n                                            new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)\n                                        )\n                                        .replace('[TOTAL]', new Intl.NumberFormat(locale).format(total))}\n                                </p>\n                            </div>\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                            {filters.map((filter, index) => (\n                                <Filter\n                                    key={`filter_${index}`}\n                                    allColumns={allColumns as RTColumn<unknown, unknown>[]}\n                                    filter={filter}\n                                    filters={filters}\n                                    position={index}\n                                    onChange={handleChangeFilter}\n                                    onRemove={handleRemoveFilter}\n                                />\n                            ))}\n                            {[...Array(placeholderCount)].map((_, index) => (\n                                <Placeholder\n                                    key={`placeholder_${index}`}\n                                    allColumns={allColumns as RTColumn<unknown, unknown>[]}\n                                    filters={filters}\n                                    position={filters.length + index}\n                                    onCreate={handleCreateFilterFromPlaceholder as any}\n                                    onRemove={placeholderCount > 1 || filters.length > 0 ? handleRemovePlaceholder : undefined}\n                                />\n                            ))}\n                            <div className=\"justify-start\">\n                                <Button appearance=\"discrete\" onClick={handleCreatePlaceholder}>\n                                    + {texts.table3.filters.buttons.addFilter}\n                                </Button>\n                            </div>\n                        </div>\n                        <Group className=\"ml-auto\">\n                            <Popover.Close>\n                                <Button>Cancel</Button>\n                            </Popover.Close>\n                            <Button onClick={handleClear}>Clear</Button>\n                            <Button appearance=\"primary\" onClick={handleApply}>\n                                Apply\n                            </Button>\n                        </Group>\n                    </div>\n                </Popover.Content>\n            </Popover>\n        ),\n        ref,\n        tooltip: (\n            <>\n                {texts.table3.filters.tooltip}\n                <Shortcut className=\"ml-2\" keys={{ key: 'f', meta: true, shift: true }} />\n            </>\n        ),\n    };\n\n    if (!isLargeScreen && !appliedFilters.length) {\n        return <IconButton {...buttonProps} icon=\"filter\" />;\n    }\n    return (\n        <Button {...buttonProps}>\n            <Icon className={cn({ '-mr-1.5': !isLargeScreen })} name={appliedFilters.length ? 'filter-solid' : 'filter'} />\n            {isLargeScreen ? texts.table3.filters.button : ''}\n            {appliedFilters.length ? `(${appliedFilters.length})` : ''}\n        </Button>\n    );\n}\n"],"names":["sortByHeader","a","b","_a$columnDef$meta","columnDef","meta","_a$columnDef$meta$hea","header","_a$columnDef$meta$hea2","localeCompare","call","_b$columnDef$meta","FiltersButton","props","total","table","locale","texts","useLocalization","ref","React","useRef","isLargeScreen","useIsLargeScreen","allColumns","getAllLeafColumns","filter","column","isInternalColumn","id","sort","appliedFilters","getState","columnFilters","shortcut","key","shift","filters","setFilters","useState","placeholderCount","setPlaceholderCount","handleChangeFilter","currentId","currentFilters","nextFilters","index","findIndex","f","handleRemoveFilter","columnId","length","count","handleCreateFilterFromPlaceholder","value","comparator","Table3FilterComparator","Contains","undefined","handleRemovePlaceholder","handleCreatePlaceholder","handleApply","setColumnFilters","newFilters","controlRenderer","_allColumns$find","find","c","_allColumns$find$colu","control","IsEmpty","IsNotEmpty","handleClear","resetColumnFilters","handleClose","useCallback","open","useEffect","buttonProps","table3","tooltip","className","cn","popover","popoverProps","Popover","onChange","Content","button","replace","Intl","NumberFormat","format","getFilteredRowModel","rows","map","Filter","position","onRemove","Array","_","Placeholder","onCreate","Button","appearance","onClick","buttons","addFilter","Group","Close","Shortcut","keys","IconButton","icon","Icon","name"],"mappings":"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"}
+{"version":3,"file":"Filters.js","sources":["../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/Filters.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Table as RTable, Column as RTColumn } from '@tanstack/react-table';\nimport { Button } from '../../../../../Button/Button';\nimport { Icon } from '../../../../../Icon/Icon';\nimport { Popover } from '../../../../../Popover/Popover';\nimport { Table3FilterValue, Table3FilterComparator, Table3Filter, ColumnFilter } from '../../../../types';\nimport { Shortcut } from '../../../../../Shortcut/Shortcut';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { isInternalColumn } from '../../../../util/columns';\nimport { Filter } from './components/Filter';\nimport { Group } from '../../../../../Group/Group';\nimport { useIsLargeScreen } from '../../../../../../hooks/useIsLargeScreen';\nimport { IconButton } from '../../../../../IconButton/IconButton';\n\nfunction sortByHeader<TType = unknown>(a: RTColumn<TType>, b: RTColumn<TType>) {\n    return (a.columnDef.meta?.header as string)?.localeCompare?.(b.columnDef.meta?.header as string);\n}\n\nexport type FiltersProps<TType = unknown> = {\n    total: number;\n    table: RTable<TType>;\n};\n\nconst placeholderFilter: Table3Filter = { id: null, value: { comparator: Table3FilterComparator.Contains, value: undefined } };\n\nexport function FiltersButton<TType = unknown>(props: FiltersProps<TType>) {\n    const { total, table } = props;\n    const { locale, texts } = useLocalization();\n    const ref = React.useRef<HTMLButtonElement>(null);\n    const isLargeScreen = useIsLargeScreen();\n    const allColumns = table\n        .getAllLeafColumns()\n        .filter(column => !isInternalColumn(column.id))\n        .sort(sortByHeader);\n\n    const appliedFilters = table.getState().columnFilters as Table3Filter[];\n    const shortcut = { key: 'f', meta: true, shift: true };\n\n    // state, since we \"apply\" filters\n    const [filters, setFilters] = React.useState<Table3Filter[]>(appliedFilters.length ? appliedFilters : [placeholderFilter]);\n\n    // filters\n    const handleChangeFilter = (position: number, filter: { id: string | null; value: Table3FilterValue }) => {\n        setFilters(currentFilters => {\n            return currentFilters.map((current, index) => {\n                if (index === position) {\n                    return filter;\n                }\n                return current;\n            });\n        });\n    };\n\n    const handleRemoveFilter = position => {\n        if (filters.length === 1) {\n            setFilters([placeholderFilter]);\n            return;\n        }\n\n        setFilters(currentFilters => currentFilters.filter((_, index) => index !== position));\n    };\n\n    const handleCreateNew = () => {\n        setFilters(filters.concat(placeholderFilter));\n    };\n\n    const handleApply = () => {\n        table.setColumnFilters(() => {\n            const newFilters = filters.filter(f => {\n                if (f.id === null) {\n                    return false;\n                }\n\n                const controlRenderer = (allColumns.find(c => c.id === f.id) as RTColumn<TType, unknown>)?.columnDef.meta\n                    ?.control;\n                if (\n                    f.value.comparator === Table3FilterComparator.IsEmpty ||\n                    f.value.comparator === Table3FilterComparator.IsNotEmpty ||\n                    controlRenderer === 'switch'\n                ) {\n                    return true;\n                }\n                return !!f.value.value;\n            });\n            // Compiler didn't get that we stripped out filters with null ids, so we still need to cast a ColumnFilter type here\n            return newFilters as ColumnFilter[];\n        });\n    };\n\n    const handleClear = () => {\n        table.resetColumnFilters();\n        setFilters([placeholderFilter]);\n    };\n\n    const handleClose = React.useCallback(\n        (open: boolean) => {\n            if (!open) {\n                setFilters(appliedFilters.length === 0 ? [placeholderFilter] : appliedFilters);\n            }\n        },\n        [appliedFilters]\n    );\n\n    // Because filters can be reset from outside\n    React.useEffect(() => {\n        if (appliedFilters.length === 0) {\n            setFilters([placeholderFilter]);\n        }\n    }, [appliedFilters]);\n\n    const buttonProps = {\n        'aria-label': texts.table3.filters.tooltip,\n        className: cn({ '!wcag-blue-100': appliedFilters.length }),\n        shortcut,\n        popover: popoverProps => (\n            <Popover {...popoverProps} onChange={handleClose}>\n                <Popover.Content>\n                    <div className=\"flex w-[40rem] flex-col gap-4\">\n                        <div className=\"flex h-8\">\n                            <div className=\"flex w-full items-center gap-2\">\n                                <h4 className=\"mb-0 inline-flex\">{texts.table3.filters.button}</h4>\n                                <p className=\"text-grey-700 mb-0 mr-auto mt-px inline-flex\">\n                                    {texts.table3.filters.total\n                                        .replace(\n                                            '[CURRENT]',\n                                            new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)\n                                        )\n                                        .replace('[TOTAL]', new Intl.NumberFormat(locale).format(total))}\n                                </p>\n                            </div>\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                            {filters.map((filter, index) => (\n                                <Filter\n                                    key={`filter_${index}`}\n                                    allColumns={allColumns}\n                                    filter={filter}\n                                    filters={filters}\n                                    position={index}\n                                    onChange={handleChangeFilter}\n                                    onRemove={\n                                        (filters.length > 0 && filters.some(f => f.id)) || filters.length > 1\n                                            ? handleRemoveFilter\n                                            : undefined\n                                    }\n                                />\n                            ))}\n                            <div className=\"justify-start\">\n                                <Button appearance=\"discrete\" onClick={handleCreateNew}>\n                                    + {texts.table3.filters.buttons.addFilter}\n                                </Button>\n                            </div>\n                        </div>\n                        <Group className=\"ml-auto\">\n                            <Popover.Close>\n                                <Button>Cancel</Button>\n                            </Popover.Close>\n                            <Button onClick={handleClear}>Clear</Button>\n                            <Button appearance=\"primary\" onClick={handleApply}>\n                                Apply\n                            </Button>\n                        </Group>\n                    </div>\n                </Popover.Content>\n            </Popover>\n        ),\n        ref,\n        tooltip: (\n            <>\n                {texts.table3.filters.tooltip}\n                <Shortcut className=\"ml-2\" keys={{ key: 'f', meta: true, shift: true }} />\n            </>\n        ),\n    };\n\n    if (!isLargeScreen && !appliedFilters.length) {\n        return <IconButton {...buttonProps} icon=\"filter\" />;\n    }\n    return (\n        <Button {...buttonProps}>\n            <Icon className={cn({ '-mr-1.5': !isLargeScreen })} name={appliedFilters.length ? 'filter-solid' : 'filter'} />\n            {isLargeScreen ? texts.table3.filters.button : ''}\n            {appliedFilters.length ? `(${appliedFilters.length})` : ''}\n        </Button>\n    );\n}\n"],"names":["sortByHeader","a","b","_a$columnDef$meta","columnDef","meta","_a$columnDef$meta$hea","header","_a$columnDef$meta$hea2","localeCompare","call","_b$columnDef$meta","placeholderFilter","id","value","comparator","Table3FilterComparator","Contains","undefined","FiltersButton","props","total","table","locale","texts","useLocalization","ref","React","useRef","isLargeScreen","useIsLargeScreen","allColumns","getAllLeafColumns","filter","column","isInternalColumn","sort","appliedFilters","getState","columnFilters","shortcut","key","shift","filters","setFilters","useState","length","handleChangeFilter","position","currentFilters","map","current","index","handleRemoveFilter","_","handleCreateNew","concat","handleApply","setColumnFilters","newFilters","f","controlRenderer","_allColumns$find","find","c","_allColumns$find$colu","control","IsEmpty","IsNotEmpty","handleClear","resetColumnFilters","handleClose","useCallback","open","useEffect","buttonProps","table3","tooltip","className","cn","popover","popoverProps","Popover","onChange","Content","button","replace","Intl","NumberFormat","format","getFilteredRowModel","rows","Filter","onRemove","some","Button","appearance","onClick","buttons","addFilter","Group","Close","Shortcut","keys","IconButton","icon","Icon","name"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/Filter.js

@@ -19,6 +19,7 @@ function Filter(props) {
     texts
   } = useLocalization();
   const column = allColumns.find(c => c.id === filter.id);
+  const ref = React__default.useRef(null);
   const {
     id,
     value: {
@@ -37,7 +38,7 @@ function Filter(props) {
       comparator: null,
       value: null
     };
-    handleChange(id, {
+    handleChange(position, {
       id: columnId,
       value
     });
@@ -47,7 +48,7 @@ function Filter(props) {
     if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {
       nextValue = undefined;
     }
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         comparator,
@@ -56,7 +57,7 @@ function Filter(props) {
     });
   };
   const handleChangeValue = value => {
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         ...filter.value,
@@ -64,7 +65,12 @@ function Filter(props) {
       }
     });
   };
-  const handleRemove = () => onRemove(id);
+  const handleRemove = () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(position);
+  React__default.useEffect(() => {
+    if (ref.current && !id) {
+      ref.current.focus(); // after adding a new filter placeholder, we want to focus it right way.
+    }
+  }, [id]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-start gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -73,7 +79,8 @@ function Filter(props) {
     allColumns: allColumns,
     filters: filters,
     onChange: handleChangeColumn,
-    value: id
+    value: id,
+    ref: ref
   }), /*#__PURE__*/React__default.createElement(FilterComparator, {
     column: column,
     onChange: handleChangeComparator,
@@ -83,12 +90,12 @@ function Filter(props) {
     comparator: comparator,
     onChange: handleChangeValue,
     value: value
-  }), /*#__PURE__*/React__default.createElement(IconButton, {
+  }), onRemove ? /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
     className: "ml-auto",
     icon: "close",
     onClick: handleRemove
-  }));
+  }) : null);
 }
 
 export { Filter };

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/Filter.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { IconButton } from '../../../../../../IconButton/IconButton';\nimport { Table3Filter, Table3FilterComparator } from '../../../../../types';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { FilterColumn } from './FilterColumn';\nimport { FilterComparator } from './FilterComparator';\nimport { FilterValue } from './FilterValue';\n\nexport type FilterProps<TType = unknown> = {\n    allColumns: RTColumn<TType, unknown>[];\n    filter: Table3Filter;\n    filters: Table3Filter[];\n    position: number;\n    onChange: (id: string | null, value: Table3Filter) => void;\n    onRemove: (columnId: string | null) => void;\n};\n\nexport function Filter<TType = unknown>(props: FilterProps<TType>) {\n    const { allColumns, filter, filters, onChange: handleChange, onRemove, position } = props;\n    const { texts } = useLocalization();\n    const column = allColumns.find(c => c.id === filter.id) as RTColumn<TType, unknown>;\n\n    const {\n        id,\n        value: { comparator, value },\n    } = filter;\n\n    const handleChangeColumn = (columnId: string | null) => {\n        const columnPrev = allColumns.find(column => column.id === id);\n        const columnNext = allColumns.find(column => column.id === columnId);\n        // UX requirement: if old column data type is the same as next column data type,\n        // then we applying the same filter value for the next column,\n        // but when data types are different, we're reseting comparator ans value for the next column\n        const value =\n            columnPrev?.columnDef.meta?.dataType === columnNext?.columnDef.meta?.dataType\n                ? filter.value\n                : { comparator: null, value: null };\n\n        handleChange(id, { id: columnId, value });\n    };\n\n    const handleChangeComparator = (comparator: Table3FilterComparator) => {\n        let nextValue = filter.value.value;\n\n        if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {\n            nextValue = undefined;\n        }\n        handleChange(id, { id, value: { comparator, value: nextValue } });\n    };\n\n    const handleChangeValue = (value: any) => {\n        handleChange(id, { id, value: { ...filter.value, value } });\n    };\n\n    const handleRemove = () => onRemove(id);\n\n    return (\n        <div className=\"flex items-start gap-2\">\n            <div className=\"flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right\">\n                {position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where}\n            </div>\n            <FilterColumn allColumns={allColumns} filters={filters} onChange={handleChangeColumn as any} value={id} />\n            <FilterComparator column={column} onChange={handleChangeComparator as any} value={comparator} />\n            <FilterValue column={column} comparator={comparator} onChange={handleChangeValue} value={value} />\n            <IconButton appearance=\"discrete\" className=\"ml-auto\" icon=\"close\" onClick={handleRemove} />\n        </div>\n    );\n}\n"],"names":["Filter","props","allColumns","filter","filters","onChange","handleChange","onRemove","position","texts","useLocalization","column","find","c","id","value","comparator","handleChangeColumn","columnId","columnPrev","columnNext","_columnPrev$columnDef","columnDef","meta","dataType","_columnNext$columnDef","handleChangeComparator","nextValue","Table3FilterComparator","IsEmpty","IsNotEmpty","undefined","handleChangeValue","handleRemove","React","className","table3","conditions","and","where","FilterColumn","FilterComparator","FilterValue","IconButton","appearance","icon","onClick"],"mappings":"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"}
+{"version":3,"file":"Filter.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/Filter.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { IconButton } from '../../../../../../IconButton/IconButton';\nimport { Table3Filter, Table3FilterComparator } from '../../../../../types';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { FilterColumn } from './FilterColumn';\nimport { FilterComparator } from './FilterComparator';\nimport { FilterValue } from './FilterValue';\n\nexport type FilterProps<TType = unknown> = {\n    allColumns: RTColumn<TType, unknown>[];\n    filter: Table3Filter;\n    filters: Table3Filter[];\n    position: number;\n    onChange: (position: number, value: Table3Filter) => void;\n    onRemove?: (position: number) => void;\n};\n\nexport function Filter<TType = unknown>(props: FilterProps<TType>) {\n    const { allColumns, filter, filters, onChange: handleChange, onRemove, position } = props;\n    const { texts } = useLocalization();\n    const column = allColumns.find(c => c.id === filter.id) as RTColumn<TType, unknown>;\n    const ref = React.useRef<HTMLButtonElement>(null);\n\n    const {\n        id,\n        value: { comparator, value },\n    } = filter;\n\n    const handleChangeColumn = (columnId: string | null) => {\n        const columnPrev = allColumns.find(column => column.id === id);\n        const columnNext = allColumns.find(column => column.id === columnId);\n        // UX requirement: if old column data type is the same as next column data type,\n        // then we applying the same filter value for the next column,\n        // but when data types are different, we're reseting comparator ans value for the next column\n        const value =\n            columnPrev?.columnDef.meta?.dataType === columnNext?.columnDef.meta?.dataType\n                ? filter.value\n                : { comparator: null, value: null };\n\n        handleChange(position, { id: columnId, value });\n    };\n\n    const handleChangeComparator = (comparator: Table3FilterComparator) => {\n        let nextValue = filter.value.value;\n\n        if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {\n            nextValue = undefined;\n        }\n        handleChange(position, { id, value: { comparator, value: nextValue } });\n    };\n\n    const handleChangeValue = (value: any) => {\n        handleChange(position, { id, value: { ...filter.value, value } });\n    };\n\n    const handleRemove = () => onRemove?.(position);\n\n    React.useEffect(() => {\n        if (ref.current && !id) {\n            ref.current.focus(); // after adding a new filter placeholder, we want to focus it right way.\n        }\n    }, [id]);\n\n    return (\n        <div className=\"flex items-start gap-2\">\n            <div className=\"flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right\">\n                {position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where}\n            </div>\n            <FilterColumn\n                allColumns={allColumns as any}\n                filters={filters}\n                onChange={handleChangeColumn as any}\n                value={id}\n                ref={ref}\n            />\n            <FilterComparator column={column} onChange={handleChangeComparator as any} value={comparator} />\n            <FilterValue column={column} comparator={comparator} onChange={handleChangeValue} value={value} />\n            {onRemove ? <IconButton appearance=\"discrete\" className=\"ml-auto\" icon=\"close\" onClick={handleRemove} /> : null}\n        </div>\n    );\n}\n"],"names":["Filter","props","allColumns","filter","filters","onChange","handleChange","onRemove","position","texts","useLocalization","column","find","c","id","ref","React","useRef","value","comparator","handleChangeColumn","columnId","columnPrev","columnNext","_columnPrev$columnDef","columnDef","meta","dataType","_columnNext$columnDef","handleChangeComparator","nextValue","Table3FilterComparator","IsEmpty","IsNotEmpty","undefined","handleChangeValue","handleRemove","useEffect","current","focus","className","table3","conditions","and","where","FilterColumn","FilterComparator","FilterValue","IconButton","appearance","icon","onClick"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.js

@@ -5,7 +5,7 @@ import { useLocalization } from '../../../../../../Provider/Localization.js';
 import { Field } from '../../../../../../Field/Field.js';
 import { Select2 } from '../../../../../../Select2/Select2.js';
 
-function FilterColumn(props) {
+const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     allColumns,
     filters,
@@ -25,7 +25,8 @@ function FilterColumn(props) {
     warning: warning,
     className: "min-h-[theme(spacing.8)]"
   }, /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
-    className: "!w-32 flex-shrink-0",
+    ref: ref,
+    className: "focus:yt-focus !w-32 flex-shrink-0",
     emptyValue: null,
     onChange: handleChange,
     value: value
@@ -43,7 +44,7 @@ function FilterColumn(props) {
       disabled: column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))
     }, ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header) + (column.parent ? ` (${(_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef.meta) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header})` : ''));
   }))));
-}
+});
 
 export { FilterColumn };
 //# sourceMappingURL=FilterColumn.js.map

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterColumn.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../../../Select2/Select2';\nimport { Icon } from '../../../../../../Icon/Icon';\nimport { Tooltip } from '../../../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { Field } from '../../../../../../Field/Field';\nimport { Table3Filter } from '../../../../../types';\n\nexport type FilterColumnProps<TType = unknown> = Omit<Select2Props, 'children'> & {\n    allColumns: RTColumn<TType, unknown>[];\n    filters: Table3Filter[];\n};\n\nexport function FilterColumn<TType = unknown>(props: FilterColumnProps<TType>) {\n    const { allColumns, filters, onChange: handleChange, value = null, ...attributes } = props;\n    const { texts } = useLocalization();\n    const selectedColumn = allColumns.find(column => column.id === value);\n    const warning = selectedColumn && !selectedColumn.getIsVisible();\n\n    return (\n        <div className=\"flex flex-col\">\n            <Field\n                message={warning ? texts.table3.filters.hiddenColumn : undefined}\n                warning={warning}\n                className=\"min-h-[theme(spacing.8)]\">\n                <Select2 {...attributes} className=\"!w-32 flex-shrink-0\" emptyValue={null} onChange={handleChange} value={value}>\n                    {allColumns.map(column => (\n                        <Select2.Option\n                            key={column.id}\n                            value={column.id}\n                            postfix={\n                                !column.getIsVisible() ? (\n                                    <Tooltip title={texts.table3.filters.hiddenColumn}>\n                                        <Icon name=\"eye-off\" className=\"text-grey-500 !h-5 !w-5\" />\n                                    </Tooltip>\n                                ) : undefined\n                            }\n                            disabled={column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))}>\n                            {(column.columnDef.meta?.header as string) +\n                                (column.parent ? ` (${column.parent?.columnDef.meta?.header})` : '')}\n                        </Select2.Option>\n                    ))}\n                </Select2>\n            </Field>\n        </div>\n    );\n}\n"],"names":["FilterColumn","props","allColumns","filters","onChange","handleChange","value","attributes","texts","useLocalization","selectedColumn","find","column","id","warning","getIsVisible","React","className","Field","message","table3","hiddenColumn","undefined","Select2","emptyValue","map","_column$columnDef$met","_column$parent","_column$parent$column","Option","key","postfix","Tooltip","title","Icon","name","disabled","getCanFilter","f","columnDef","meta","header","parent"],"mappings":";;;;;;;SAcgBA,YAAYA,CAAkBC,KAA+B;EACzE,MAAM;IAAEC,UAAU;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,YAAY;IAAEC,KAAK,GAAG,IAAI;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC1F,MAAM;IAAEO;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,cAAc,GAAGR,UAAU,CAACS,IAAI,CAACC,MAAM,IAAIA,MAAM,CAACC,EAAE,KAAKP,KAAK,CAAC;EACrE,MAAMQ,OAAO,GAAGJ,cAAc,IAAI,CAACA,cAAc,CAACK,YAAY,EAAE;EAEhE,oBACIC;IAAKC,SAAS,EAAC;kBACXD,6BAACE,KAAK;IACFC,OAAO,EAAEL,OAAO,GAAGN,KAAK,CAACY,MAAM,CAACjB,OAAO,CAACkB,YAAY,GAAGC,SAAS;IAChER,OAAO,EAAEA,OAAO;IAChBG,SAAS,EAAC;kBACVD,6BAACO,OAAO,oBAAKhB,UAAU;IAAEU,SAAS,EAAC,qBAAqB;IAACO,UAAU,EAAE,IAAI;IAAEpB,QAAQ,EAAEC,YAAY;IAAEC,KAAK,EAAEA;MACrGJ,UAAU,CAACuB,GAAG,CAACb,MAAM;IAAA,IAAAc,qBAAA,EAAAC,cAAA,EAAAC,qBAAA;IAAA,oBAClBZ,6BAACO,OAAO,CAACM,MAAM;MACXC,GAAG,EAAElB,MAAM,CAACC,EAAE;MACdP,KAAK,EAAEM,MAAM,CAACC,EAAE;MAChBkB,OAAO,EACH,CAACnB,MAAM,CAACG,YAAY,EAAE,kBAClBC,6BAACgB,OAAO;QAACC,KAAK,EAAEzB,KAAK,CAACY,MAAM,CAACjB,OAAO,CAACkB;sBACjCL,6BAACkB,IAAI;QAACC,IAAI,EAAC,SAAS;QAAClB,SAAS,EAAC;QAA4B,CACrD,IACVK,SAAS;MAEjBc,QAAQ,EAAExB,MAAM,CAACC,EAAE,KAAKP,KAAK,KAAK,CAACM,MAAM,CAACyB,YAAY,EAAE,IAAI,CAAC,CAAClC,OAAO,CAACQ,IAAI,CAAC2B,CAAC,IAAIA,CAAC,CAACzB,EAAE,KAAKD,MAAM,CAACC,EAAE,CAAC;OACjG,EAAAa,qBAAA,GAAAd,MAAM,CAAC2B,SAAS,CAACC,IAAI,cAAAd,qBAAA,uBAArBA,qBAAA,CAAuBe,MAAiB,KACrC7B,MAAM,CAAC8B,MAAM,0BAAQ9B,MAAM,CAAC8B,MAAM,cAAAf,cAAA,wBAAAC,qBAAA,GAAbD,cAAA,CAAeY,SAAS,CAACC,IAAI,cAAAZ,qBAAA,uBAA7BA,qBAAA,CAA+Ba,SAAS,GAAG,EAAE,CAAC,CAC3D;GACpB,CAAC,CACI,CACN,CACN;AAEd;;;;"}
+{"version":3,"file":"FilterColumn.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../../../Select2/Select2';\nimport { Icon } from '../../../../../../Icon/Icon';\nimport { Tooltip } from '../../../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { Field } from '../../../../../../Field/Field';\nimport { Table3Filter } from '../../../../../types';\n\nexport type FilterColumnProps<TType = unknown> = Omit<Select2Props, 'children'> & {\n    allColumns: RTColumn<TType, unknown>[];\n    filters: Table3Filter[];\n};\n\nexport const FilterColumn = React.forwardRef<HTMLButtonElement, FilterColumnProps>((props, ref) => {\n    const { allColumns, filters, onChange: handleChange, value = null, ...attributes } = props;\n    const { texts } = useLocalization();\n    const selectedColumn = allColumns.find(column => column.id === value);\n    const warning = selectedColumn && !selectedColumn.getIsVisible();\n\n    return (\n        <div className=\"flex flex-col\">\n            <Field\n                message={warning ? texts.table3.filters.hiddenColumn : undefined}\n                warning={warning}\n                className=\"min-h-[theme(spacing.8)]\">\n                <Select2\n                    {...attributes}\n                    ref={ref}\n                    className=\"focus:yt-focus !w-32 flex-shrink-0\"\n                    emptyValue={null}\n                    onChange={handleChange}\n                    value={value}>\n                    {allColumns.map(column => (\n                        <Select2.Option\n                            key={column.id}\n                            value={column.id}\n                            postfix={\n                                !column.getIsVisible() ? (\n                                    <Tooltip title={texts.table3.filters.hiddenColumn}>\n                                        <Icon name=\"eye-off\" className=\"text-grey-500 !h-5 !w-5\" />\n                                    </Tooltip>\n                                ) : undefined\n                            }\n                            disabled={column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))}>\n                            {(column.columnDef.meta?.header as string) +\n                                (column.parent ? ` (${column.parent?.columnDef.meta?.header})` : '')}\n                        </Select2.Option>\n                    ))}\n                </Select2>\n            </Field>\n        </div>\n    );\n});\n"],"names":["FilterColumn","React","forwardRef","props","ref","allColumns","filters","onChange","handleChange","value","attributes","texts","useLocalization","selectedColumn","find","column","id","warning","getIsVisible","className","Field","message","table3","hiddenColumn","undefined","Select2","emptyValue","map","_column$columnDef$met","_column$parent","_column$parent$column","Option","key","postfix","Tooltip","title","Icon","name","disabled","getCanFilter","f","columnDef","meta","header","parent"],"mappings":";;;;;;;MAcaA,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAuC,CAACC,KAAK,EAAEC,GAAG;EAC1F,MAAM;IAAEC,UAAU;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,YAAY;IAAEC,KAAK,GAAG,IAAI;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC1F,MAAM;IAAEQ;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,cAAc,GAAGR,UAAU,CAACS,IAAI,CAACC,MAAM,IAAIA,MAAM,CAACC,EAAE,KAAKP,KAAK,CAAC;EACrE,MAAMQ,OAAO,GAAGJ,cAAc,IAAI,CAACA,cAAc,CAACK,YAAY,EAAE;EAEhE,oBACIjB;IAAKkB,SAAS,EAAC;kBACXlB,6BAACmB,KAAK;IACFC,OAAO,EAAEJ,OAAO,GAAGN,KAAK,CAACW,MAAM,CAAChB,OAAO,CAACiB,YAAY,GAAGC,SAAS;IAChEP,OAAO,EAAEA,OAAO;IAChBE,SAAS,EAAC;kBACVlB,6BAACwB,OAAO,oBACAf,UAAU;IACdN,GAAG,EAAEA,GAAG;IACRe,SAAS,EAAC,oCAAoC;IAC9CO,UAAU,EAAE,IAAI;IAChBnB,QAAQ,EAAEC,YAAY;IACtBC,KAAK,EAAEA;MACNJ,UAAU,CAACsB,GAAG,CAACZ,MAAM;IAAA,IAAAa,qBAAA,EAAAC,cAAA,EAAAC,qBAAA;IAAA,oBAClB7B,6BAACwB,OAAO,CAACM,MAAM;MACXC,GAAG,EAAEjB,MAAM,CAACC,EAAE;MACdP,KAAK,EAAEM,MAAM,CAACC,EAAE;MAChBiB,OAAO,EACH,CAAClB,MAAM,CAACG,YAAY,EAAE,kBAClBjB,6BAACiC,OAAO;QAACC,KAAK,EAAExB,KAAK,CAACW,MAAM,CAAChB,OAAO,CAACiB;sBACjCtB,6BAACmC,IAAI;QAACC,IAAI,EAAC,SAAS;QAAClB,SAAS,EAAC;QAA4B,CACrD,IACVK,SAAS;MAEjBc,QAAQ,EAAEvB,MAAM,CAACC,EAAE,KAAKP,KAAK,KAAK,CAACM,MAAM,CAACwB,YAAY,EAAE,IAAI,CAAC,CAACjC,OAAO,CAACQ,IAAI,CAAC0B,CAAC,IAAIA,CAAC,CAACxB,EAAE,KAAKD,MAAM,CAACC,EAAE,CAAC;OACjG,EAAAY,qBAAA,GAAAb,MAAM,CAAC0B,SAAS,CAACC,IAAI,cAAAd,qBAAA,uBAArBA,qBAAA,CAAuBe,MAAiB,KACrC5B,MAAM,CAAC6B,MAAM,0BAAQ7B,MAAM,CAAC6B,MAAM,cAAAf,cAAA,wBAAAC,qBAAA,GAAbD,cAAA,CAAeY,SAAS,CAACC,IAAI,cAAAZ,qBAAA,uBAA7BA,qBAAA,CAA+Ba,SAAS,GAAG,EAAE,CAAC,CAC3D;GACpB,CAAC,CACI,CACN,CACN;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterComparator.js

@@ -20,7 +20,7 @@ function FilterComparator(props) {
     }
   }, [validComparators]);
   return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
-    className: "!w-32 flex-shrink-0",
+    className: "focus:yt-focus !w-32 flex-shrink-0",
     disabled: !column,
     onChange: handleChange,
     value: value