@economic/taco 1.38.2 → 1.39.0

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

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","sources":["../../../../../../../../src/components/Table2/hooks/useTable.ts"],"sourcesContent":["import React from 'react';\nimport {\n    useReactTable,\n    getCoreRowModel,\n    OnChangeFn,\n    getSortedRowModel,\n    getFilteredRowModel,\n    RowData,\n    TableState,\n    TableOptions,\n} from '@tanstack/react-table';\nimport { RowClickHandler, RowDensity, Table2Children, Table2Props } from '../types';\nimport { useColumnDefinitions } from './useColumnDefinitions';\nimport { useColumnOffsetStateListener } from './listeners/useColumnOffsetStateListener';\nimport { ColumnOffsetState } from '../types';\nimport { useRowSelectionListener } from './listeners/useRowSelectionListener';\nimport { useSettingsStateListener } from './listeners/useSettingsStateListener';\nimport { columnFilterFn, globalFilterFn } from '../utilities/filterFn';\nimport { ActiveRowHandler, ActiveRowMoveHandler, useActiveRow } from './useActiveRow';\nimport { useActiveRowStateListener } from './listeners/useActiveRowStateListener';\nimport { useEditMode } from './useEditMode';\nimport { useIsHoverStatePaused } from '../../../hooks/useIsHoverStatePaused';\nimport { useFilterStateListener } from './listeners/useFilterStateListener';\nimport { ensureOrdering } from '../utilities/columns';\n\ndeclare module '@tanstack/table-core' {\n    interface TableMeta<TData extends RowData> {\n        // active row\n        activeRowIndex: number;\n        setActiveRowIndex: ActiveRowHandler;\n        moveToPreviousRow: ActiveRowMoveHandler<TData>;\n        moveToNextRow: ActiveRowMoveHandler<TData>;\n        // offsets\n        columnOffsets: ColumnOffsetState;\n        // density\n        enableRowDensity: boolean;\n        rowDensity: RowDensity;\n        setRowDensity: OnChangeFn<RowDensity>;\n        // dragging\n        enableRowDragging: boolean;\n        dragging: Record<string, boolean>;\n        setDragging: OnChangeFn<Record<string, boolean>>;\n        // computed\n        enableColumnFreezing: boolean;\n        enableColumnReordering: boolean;\n        enableColumnHiding: boolean;\n        shouldPauseSortingAndFiltering: boolean;\n        setShouldPauseSortingAndFiltering: OnChangeFn<boolean>;\n        shouldPauseHoverState: boolean;\n        setShouldPauseHoverState: OnChangeFn<boolean>;\n        frozenColumnsCount: number;\n        setFrozenColumnsCount: OnChangeFn<number>;\n        // other\n        onRowClick?: RowClickHandler<TData>;\n        // editing\n        editMode: useEditMode;\n        // used to determine first and last data column position\n        dataColumnStartOffset: number;\n        dataColumnEndOffset: number;\n        // disable table actions\n        shouldDisableTableActions: boolean;\n        setShouldDisableTableActions: OnChangeFn<boolean>;\n        // active row column indexes\n        focussableColumnIndexes: number[];\n        addFocussableColumnIndex: (index: number) => void;\n        resetFocussableColumnIndexes: () => void;\n        // table ref\n        tableRef: React.RefObject<HTMLDivElement>;\n        // last sorted or filtered rows\n        lastSortedOrFilteredRows: React.MutableRefObject<Array<any>>;\n    }\n}\n\nconst ACTIONS_ON_ROW_LENGTH = 4;\n\nexport function useTable<TType = any>(children: Table2Children, props: Table2Props<TType>, ref: React.RefObject<HTMLDivElement>) {\n    const {\n        actionsForRow = [],\n        actionsForRowLength = ACTIONS_ON_ROW_LENGTH,\n        data,\n        defaultActiveRowIndex,\n        disableColumnFiltering = false,\n        disableColumnHiding = false,\n        disableColumnFreezing = false,\n        disableColumnReordering = false,\n        disableColumnResizing = false,\n        disableRowDensity = false,\n        disableRowExpansion = false,\n        disableRowSelection = false,\n        disableMultipleRowSelection = false,\n        disableSearch = false,\n        disableSorting = false,\n        expandedRowRenderer,\n        manualColumnFiltering = false,\n        manualSearch = false,\n        manualSorting = false,\n        onChangeSettings,\n        onRowClick,\n        onRowDrag,\n        onRowSelect,\n        onSave,\n        settings = {},\n        // experimental\n        _experimentalActionsForTable,\n    } = props;\n\n    const enableRowExpansion = !disableRowExpansion && !!expandedRowRenderer;\n    const enableRowSelection = !disableRowSelection && (!!onRowSelect || !!_experimentalActionsForTable?.length);\n    const enableMultipleRowSelection = !disableMultipleRowSelection && enableRowSelection;\n\n    const { columns, internalFrozenColumnCount, defaultColumnSizing, defaultSorting, defaultColumnVisibility, footers } =\n        useColumnDefinitions<TType>(\n            children,\n            {\n                actionsForRow,\n                actionsForRowLength,\n                enableColumnFiltering: !disableColumnFiltering,\n                enableColumnHiding: !disableColumnHiding,\n                enableColumnFreezing: !disableColumnFreezing,\n                enableRowExpansion,\n                enableRowSelection,\n                enableMultipleRowSelection,\n                expandedRowRenderer,\n                onRowDrag,\n            },\n            ref\n        );\n\n    const lastSortedOrFilteredRows = React.useRef<any>(null);\n    const totalFrozenColumns = internalFrozenColumnCount + (settings?.frozenColumnCount ?? 0);\n    const frozenColumns = columns.slice(0, totalFrozenColumns).map(column => column.id);\n\n    // defaults\n    const initialState: Partial<TableState> = {\n        columnOrder: ensureOrdering<TType>(columns, settings?.columnOrder),\n        columnPinning: {\n            left: frozenColumns,\n            right: [],\n        },\n        columnSizing: settings?.columnSizing ?? defaultColumnSizing,\n        columnVisibility: settings?.columnVisibility ?? defaultColumnVisibility,\n    };\n\n    // Data column index - these are needed to make sure left and right arrow key shortcuts focuses only the data columns\n    const dataColumnStartOffset = [!!onRowDrag, !!enableRowExpansion, !!enableRowSelection].reduce((t, e) => t + (e ? 1 : 0), 0);\n    const dataColumnEndOffset = actionsForRow.length ? 1 : 0;\n\n    // custom\n    const activeRow = useActiveRow<TType>(defaultActiveRowIndex);\n    const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n    const editMode = useEditMode(onSave);\n    const [columnOffsets, setColumnOffsets] = React.useState({});\n    const [rowDensity, setRowDensity] = React.useState<RowDensity>(settings?.rowDensity ?? 'normal');\n    const [dragging, setDragging] = React.useState<Record<string, boolean>>({});\n    const [shouldPauseSortingAndFiltering, setShouldPauseSortingAndFiltering] = React.useState<boolean>(false);\n    const [shouldDisableTableActions, setShouldDisableTableActions] = React.useState<boolean>(false);\n    // Frozen column count is the count of external columns that are frozen\n    const [frozenColumnsCount, setFrozenColumnsCount] = React.useState(totalFrozenColumns - internalFrozenColumnCount);\n    // For some reason, using state instead of ref didn't work as expected, that's why ref is used\n    const focussableColumnIndexes = React.useRef<number[]>([]);\n\n    // some options get set even if they are undefined, so we have to do it conditionally\n    const options: Partial<TableOptions<any>> = {\n        enableExpanding: enableRowExpansion,\n        enableColumnFilters: !disableColumnFiltering,\n        enableColumnResizing: !disableColumnResizing,\n        enableGlobalFilter: !disableSearch,\n        enableHiding: !disableColumnHiding,\n        enablePinning: !disableColumnFreezing,\n        enableRowSelection: enableRowSelection,\n        enableMultiRowSelection: enableMultipleRowSelection,\n        enableSorting: !disableSorting,\n    };\n\n    // resizing\n    if (options.enableColumnResizing) {\n        options.columnResizeMode = 'onChange';\n    }\n\n    // sorting\n    if (options.enableSorting) {\n        initialState.sorting = settings?.sorting ?? defaultSorting;\n\n        if (manualSorting) {\n            options.manualSorting = true;\n        } else {\n            options.getSortedRowModel = getSortedRowModel();\n        }\n    }\n\n    // filtering\n    if (options.enableColumnFilters) {\n        initialState.columnFilters = settings?.columnFilters ?? [];\n\n        if (manualColumnFiltering) {\n            options.manualFiltering = true;\n        } else {\n            options.filterFns = {\n                tacoFilter: (row, columnId, filter) => columnFilterFn(row.getValue(columnId), filter),\n            };\n            options.getFilteredRowModel = getFilteredRowModel();\n        }\n    }\n\n    // search\n    if (options.enableGlobalFilter) {\n        if (manualSearch) {\n            options.manualFiltering = true;\n        } else {\n            options.globalFilterFn = (row, columnId, query) => globalFilterFn(row.getValue(columnId), query);\n            options.getFilteredRowModel = getFilteredRowModel();\n        }\n    }\n\n    const table = useReactTable({\n        data,\n        columns: columns as any,\n        getCoreRowModel: getCoreRowModel(),\n        initialState,\n        ...options,\n        meta: {\n            ...activeRow,\n            editMode,\n            // offsets\n            columnOffsets,\n            // density\n            enableRowDensity: !disableRowDensity,\n            rowDensity,\n            setRowDensity,\n            // dragging\n            enableRowDragging: !!onRowDrag,\n            dragging,\n            setDragging,\n            // computed\n            enableColumnFreezing: !disableColumnFreezing,\n            enableColumnReordering: !disableColumnReordering,\n            enableColumnHiding: !disableColumnHiding,\n            shouldPauseHoverState,\n            setShouldPauseHoverState,\n            frozenColumnsCount,\n            setFrozenColumnsCount,\n            // resorting\n            shouldPauseSortingAndFiltering,\n            setShouldPauseSortingAndFiltering,\n            // other\n            onRowClick,\n            // data column positions\n            dataColumnStartOffset,\n            dataColumnEndOffset,\n            // disable table actions\n            shouldDisableTableActions,\n            setShouldDisableTableActions,\n            // active row column indexes\n            focussableColumnIndexes: focussableColumnIndexes.current,\n            addFocussableColumnIndex: (index: number) => {\n                if (!focussableColumnIndexes.current.includes(index)) {\n                    focussableColumnIndexes.current = [...focussableColumnIndexes.current, index].sort((a, b) => a - b);\n                }\n            },\n            resetFocussableColumnIndexes: () => {\n                focussableColumnIndexes.current = [];\n            },\n            // table ref\n            tableRef: ref,\n            // last sorted or filtered rows\n            lastSortedOrFilteredRows,\n        },\n    });\n\n    const tableRows = table.getRowModel().rows;\n\n    if (!shouldPauseSortingAndFiltering) {\n        lastSortedOrFilteredRows.current = tableRows;\n    }\n\n    const rows = shouldPauseSortingAndFiltering ? lastSortedOrFilteredRows.current : tableRows;\n\n    // state listeners\n    useActiveRowStateListener<TType>(table, rows, activeRow);\n    useColumnOffsetStateListener(table, setColumnOffsets);\n    useFilterStateListener<TType>(table, onRowSelect);\n    useRowSelectionListener<TType>(table, onRowSelect);\n    useSettingsStateListener(table, onChangeSettings);\n\n    return { rows, table, footers };\n}\n"],"names":["ACTIONS_ON_ROW_LENGTH","useTable","children","props","ref","actionsForRow","actionsForRowLength","data","defaultActiveRowIndex","disableColumnFiltering","disableColumnHiding","disableColumnFreezing","disableColumnReordering","disableColumnResizing","disableRowDensity","disableRowExpansion","disableRowSelection","disableMultipleRowSelection","disableSearch","disableSorting","expandedRowRenderer","manualColumnFiltering","manualSearch","manualSorting","onChangeSettings","onRowClick","onRowDrag","onRowSelect","onSave","settings","_experimentalActionsForTable","enableRowExpansion","enableRowSelection","length","enableMultipleRowSelection","columns","internalFrozenColumnCount","defaultColumnSizing","defaultSorting","defaultColumnVisibility","footers","useColumnDefinitions","enableColumnFiltering","enableColumnHiding","enableColumnFreezing","lastSortedOrFilteredRows","React","useRef","totalFrozenColumns","frozenColumnCount","frozenColumns","slice","map","column","id","initialState","columnOrder","ensureOrdering","columnPinning","left","right","columnSizing","columnVisibility","dataColumnStartOffset","reduce","t","e","dataColumnEndOffset","activeRow","useActiveRow","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","editMode","useEditMode","columnOffsets","setColumnOffsets","useState","rowDensity","setRowDensity","dragging","setDragging","shouldPauseSortingAndFiltering","setShouldPauseSortingAndFiltering","shouldDisableTableActions","setShouldDisableTableActions","frozenColumnsCount","setFrozenColumnsCount","focussableColumnIndexes","options","enableExpanding","enableColumnFilters","enableColumnResizing","enableGlobalFilter","enableHiding","enablePinning","enableMultiRowSelection","enableSorting","columnResizeMode","sorting","getSortedRowModel","columnFilters","manualFiltering","filterFns","tacoFilter","row","columnId","filter","columnFilterFn","getValue","getFilteredRowModel","globalFilterFn","query","table","useReactTable","getCoreRowModel","meta","enableRowDensity","enableRowDragging","enableColumnReordering","current","addFocussableColumnIndex","index","includes","sort","a","b","resetFocussableColumnIndexes","tableRef","tableRows","getRowModel","rows","useActiveRowStateListener","useColumnOffsetStateListener","useFilterStateListener","useRowSelectionListener","useSettingsStateListener"],"mappings":"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"}
+{"version":3,"file":"useTable.js","sources":["../../../../../../../../src/components/Table2/hooks/useTable.ts"],"sourcesContent":["import React from 'react';\nimport {\n    useReactTable,\n    getCoreRowModel,\n    OnChangeFn,\n    getSortedRowModel,\n    getFilteredRowModel,\n    RowData,\n    TableState,\n    TableOptions,\n} from '@tanstack/react-table';\nimport { RowClickHandler, RowDensity, Table2Children, Table2Props } from '../types';\nimport { useColumnDefinitions } from './useColumnDefinitions';\nimport { useColumnOffsetStateListener } from './listeners/useColumnOffsetStateListener';\nimport { ColumnOffsetState } from '../types';\nimport { useRowSelectionListener } from './listeners/useRowSelectionListener';\nimport { useSettingsStateListener } from './listeners/useSettingsStateListener';\nimport { columnFilterFn, globalFilterFn } from '../utilities/filterFn';\nimport { ActiveRowHandler, ActiveRowMoveHandler, useActiveRow } from './useActiveRow';\nimport { useActiveRowStateListener } from './listeners/useActiveRowStateListener';\nimport { useEditMode } from './useEditMode';\nimport { useIsHoverStatePaused } from '../../../hooks/useIsHoverStatePaused';\nimport { useFilterStateListener } from './listeners/useFilterStateListener';\nimport { ensureOrdering } from '../utilities/columns';\nimport { useTableShortcuts } from './useTableShortcuts';\n\ndeclare module '@tanstack/table-core' {\n    interface TableMeta<TData extends RowData> {\n        // active row\n        activeRowIndex: number;\n        setActiveRowIndex: ActiveRowHandler;\n        moveToPreviousRow: ActiveRowMoveHandler<TData>;\n        moveToNextRow: ActiveRowMoveHandler<TData>;\n        // offsets\n        columnOffsets: ColumnOffsetState;\n        // density\n        enableRowDensity: boolean;\n        rowDensity: RowDensity;\n        setRowDensity: OnChangeFn<RowDensity>;\n        // dragging\n        enableRowDragging: boolean;\n        dragging: Record<string, boolean>;\n        setDragging: OnChangeFn<Record<string, boolean>>;\n        // computed\n        enableColumnFreezing: boolean;\n        enableColumnReordering: boolean;\n        enableColumnHiding: boolean;\n        shouldPauseSortingAndFiltering: boolean;\n        setShouldPauseSortingAndFiltering: OnChangeFn<boolean>;\n        shouldPauseHoverState: boolean;\n        setShouldPauseHoverState: OnChangeFn<boolean>;\n        frozenColumnsCount: number;\n        setFrozenColumnsCount: OnChangeFn<number>;\n        // other\n        onRowClick?: RowClickHandler<TData>;\n        // editing\n        editMode: useEditMode;\n        // used to determine first and last data column position\n        dataColumnStartOffset: number;\n        dataColumnEndOffset: number;\n        // disable table actions\n        shouldDisableTableActions: boolean;\n        setShouldDisableTableActions: OnChangeFn<boolean>;\n        // active row column indexes\n        focussableColumnIndexes: number[];\n        addFocussableColumnIndex: (index: number) => void;\n        resetFocussableColumnIndexes: () => void;\n        // table ref\n        tableRef: React.RefObject<HTMLDivElement>;\n        // last sorted or filtered rows\n        lastSortedOrFilteredRows: React.MutableRefObject<Array<any>>;\n    }\n}\n\nconst ACTIONS_ON_ROW_LENGTH = 4;\n\nexport function useTable<TType = any>(children: Table2Children, props: Table2Props<TType>, ref: React.RefObject<HTMLDivElement>) {\n    const {\n        actionsForRow = [],\n        actionsForRowLength = ACTIONS_ON_ROW_LENGTH,\n        data,\n        defaultActiveRowIndex,\n        disableColumnFiltering = false,\n        disableColumnHiding = false,\n        disableColumnFreezing = false,\n        disableColumnReordering = false,\n        disableColumnResizing = false,\n        disableRowDensity = false,\n        disableRowExpansion = false,\n        disableRowSelection = false,\n        disableMultipleRowSelection = false,\n        disableSearch = false,\n        disableSorting = false,\n        expandedRowRenderer,\n        manualColumnFiltering = false,\n        manualSearch = false,\n        manualSorting = false,\n        onChangeSettings,\n        onRowClick,\n        onRowDrag,\n        onRowSelect,\n        onSave,\n        settings = {},\n        shortcuts,\n        // experimental\n        _experimentalActionsForTable,\n    } = props;\n\n    const enableRowExpansion = !disableRowExpansion && !!expandedRowRenderer;\n    const enableRowSelection = !disableRowSelection && (!!onRowSelect || !!_experimentalActionsForTable?.length);\n    const enableMultipleRowSelection = !disableMultipleRowSelection && enableRowSelection;\n\n    const { columns, internalFrozenColumnCount, defaultColumnSizing, defaultSorting, defaultColumnVisibility, footers } =\n        useColumnDefinitions<TType>(\n            children,\n            {\n                actionsForRow,\n                actionsForRowLength,\n                enableColumnFiltering: !disableColumnFiltering,\n                enableColumnHiding: !disableColumnHiding,\n                enableColumnFreezing: !disableColumnFreezing,\n                enableRowExpansion,\n                enableRowSelection,\n                enableMultipleRowSelection,\n                expandedRowRenderer,\n                onRowDrag,\n            },\n            ref\n        );\n\n    const lastSortedOrFilteredRows = React.useRef<any>(null);\n    const totalFrozenColumns = internalFrozenColumnCount + (settings?.frozenColumnCount ?? 0);\n    const frozenColumns = columns.slice(0, totalFrozenColumns).map(column => column.id);\n\n    // defaults\n    const initialState: Partial<TableState> = {\n        columnOrder: ensureOrdering<TType>(columns, settings?.columnOrder),\n        columnPinning: {\n            left: frozenColumns,\n            right: [],\n        },\n        columnSizing: settings?.columnSizing ?? defaultColumnSizing,\n        columnVisibility: settings?.columnVisibility ?? defaultColumnVisibility,\n    };\n\n    // Data column index - these are needed to make sure left and right arrow key shortcuts focuses only the data columns\n    const dataColumnStartOffset = [!!onRowDrag, !!enableRowExpansion, !!enableRowSelection].reduce((t, e) => t + (e ? 1 : 0), 0);\n    const dataColumnEndOffset = actionsForRow.length ? 1 : 0;\n\n    // custom\n    const activeRow = useActiveRow<TType>(defaultActiveRowIndex);\n    const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n    const editMode = useEditMode(onSave);\n    const [columnOffsets, setColumnOffsets] = React.useState({});\n    const [rowDensity, setRowDensity] = React.useState<RowDensity>(settings?.rowDensity ?? 'normal');\n    const [dragging, setDragging] = React.useState<Record<string, boolean>>({});\n    const [shouldPauseSortingAndFiltering, setShouldPauseSortingAndFiltering] = React.useState<boolean>(false);\n    const [shouldDisableTableActions, setShouldDisableTableActions] = React.useState<boolean>(false);\n    // Frozen column count is the count of external columns that are frozen\n    const [frozenColumnsCount, setFrozenColumnsCount] = React.useState(totalFrozenColumns - internalFrozenColumnCount);\n    // For some reason, using state instead of ref didn't work as expected, that's why ref is used\n    const focussableColumnIndexes = React.useRef<number[]>([]);\n\n    // some options get set even if they are undefined, so we have to do it conditionally\n    const options: Partial<TableOptions<any>> = {\n        enableExpanding: enableRowExpansion,\n        enableColumnFilters: !disableColumnFiltering,\n        enableColumnResizing: !disableColumnResizing,\n        enableGlobalFilter: !disableSearch,\n        enableHiding: !disableColumnHiding,\n        enablePinning: !disableColumnFreezing,\n        enableRowSelection: enableRowSelection,\n        enableMultiRowSelection: enableMultipleRowSelection,\n        enableSorting: !disableSorting,\n    };\n\n    // resizing\n    if (options.enableColumnResizing) {\n        options.columnResizeMode = 'onChange';\n    }\n\n    // sorting\n    if (options.enableSorting) {\n        initialState.sorting = settings?.sorting ?? defaultSorting;\n\n        if (manualSorting) {\n            options.manualSorting = true;\n        } else {\n            options.getSortedRowModel = getSortedRowModel();\n        }\n    }\n\n    // filtering\n    if (options.enableColumnFilters) {\n        initialState.columnFilters = settings?.columnFilters ?? [];\n\n        if (manualColumnFiltering) {\n            options.manualFiltering = true;\n        } else {\n            options.filterFns = {\n                tacoFilter: (row, columnId, filter) => columnFilterFn(row.getValue(columnId), filter),\n            };\n            options.getFilteredRowModel = getFilteredRowModel();\n        }\n    }\n\n    // search\n    if (options.enableGlobalFilter) {\n        if (manualSearch) {\n            options.manualFiltering = true;\n        } else {\n            options.globalFilterFn = (row, columnId, query) => globalFilterFn(row.getValue(columnId), query);\n            options.getFilteredRowModel = getFilteredRowModel();\n        }\n    }\n\n    const table = useReactTable({\n        data,\n        columns: columns as any,\n        getCoreRowModel: getCoreRowModel(),\n        initialState,\n        ...options,\n        meta: {\n            ...activeRow,\n            editMode,\n            // offsets\n            columnOffsets,\n            // density\n            enableRowDensity: !disableRowDensity,\n            rowDensity,\n            setRowDensity,\n            // dragging\n            enableRowDragging: !!onRowDrag,\n            dragging,\n            setDragging,\n            // computed\n            enableColumnFreezing: !disableColumnFreezing,\n            enableColumnReordering: !disableColumnReordering,\n            enableColumnHiding: !disableColumnHiding,\n            shouldPauseHoverState,\n            setShouldPauseHoverState,\n            frozenColumnsCount,\n            setFrozenColumnsCount,\n            // resorting\n            shouldPauseSortingAndFiltering,\n            setShouldPauseSortingAndFiltering,\n            // other\n            onRowClick,\n            // data column positions\n            dataColumnStartOffset,\n            dataColumnEndOffset,\n            // disable table actions\n            shouldDisableTableActions,\n            setShouldDisableTableActions,\n            // active row column indexes\n            focussableColumnIndexes: focussableColumnIndexes.current,\n            addFocussableColumnIndex: (index: number) => {\n                if (!focussableColumnIndexes.current.includes(index)) {\n                    focussableColumnIndexes.current = [...focussableColumnIndexes.current, index].sort((a, b) => a - b);\n                }\n            },\n            resetFocussableColumnIndexes: () => {\n                focussableColumnIndexes.current = [];\n            },\n            // table ref\n            tableRef: ref,\n            // last sorted or filtered rows\n            lastSortedOrFilteredRows,\n        },\n    });\n\n    const tableRows = table.getRowModel().rows;\n\n    if (!shouldPauseSortingAndFiltering) {\n        lastSortedOrFilteredRows.current = tableRows;\n    }\n\n    const rows = shouldPauseSortingAndFiltering ? lastSortedOrFilteredRows.current : tableRows;\n\n    // state listeners\n    useActiveRowStateListener<TType>(table, rows, activeRow);\n    useColumnOffsetStateListener(table, setColumnOffsets);\n    useFilterStateListener<TType>(table, onRowSelect);\n    useRowSelectionListener<TType>(table, onRowSelect);\n    useSettingsStateListener(table, onChangeSettings);\n\n    useTableShortcuts(shortcuts, tableRows[activeRow.activeRowIndex]?.original);\n\n    return { rows, table, footers };\n}\n"],"names":["ACTIONS_ON_ROW_LENGTH","useTable","children","props","ref","actionsForRow","actionsForRowLength","data","defaultActiveRowIndex","disableColumnFiltering","disableColumnHiding","disableColumnFreezing","disableColumnReordering","disableColumnResizing","disableRowDensity","disableRowExpansion","disableRowSelection","disableMultipleRowSelection","disableSearch","disableSorting","expandedRowRenderer","manualColumnFiltering","manualSearch","manualSorting","onChangeSettings","onRowClick","onRowDrag","onRowSelect","onSave","settings","shortcuts","_experimentalActionsForTable","enableRowExpansion","enableRowSelection","length","enableMultipleRowSelection","columns","internalFrozenColumnCount","defaultColumnSizing","defaultSorting","defaultColumnVisibility","footers","useColumnDefinitions","enableColumnFiltering","enableColumnHiding","enableColumnFreezing","lastSortedOrFilteredRows","React","useRef","totalFrozenColumns","frozenColumnCount","frozenColumns","slice","map","column","id","initialState","columnOrder","ensureOrdering","columnPinning","left","right","columnSizing","columnVisibility","dataColumnStartOffset","reduce","t","e","dataColumnEndOffset","activeRow","useActiveRow","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","editMode","useEditMode","columnOffsets","setColumnOffsets","useState","rowDensity","setRowDensity","dragging","setDragging","shouldPauseSortingAndFiltering","setShouldPauseSortingAndFiltering","shouldDisableTableActions","setShouldDisableTableActions","frozenColumnsCount","setFrozenColumnsCount","focussableColumnIndexes","options","enableExpanding","enableColumnFilters","enableColumnResizing","enableGlobalFilter","enableHiding","enablePinning","enableMultiRowSelection","enableSorting","columnResizeMode","sorting","getSortedRowModel","columnFilters","manualFiltering","filterFns","tacoFilter","row","columnId","filter","columnFilterFn","getValue","getFilteredRowModel","globalFilterFn","query","table","useReactTable","getCoreRowModel","meta","enableRowDensity","enableRowDragging","enableColumnReordering","current","addFocussableColumnIndex","index","includes","sort","a","b","resetFocussableColumnIndexes","tableRef","tableRows","getRowModel","rows","useActiveRowStateListener","useColumnOffsetStateListener","useFilterStateListener","useRowSelectionListener","useSettingsStateListener","useTableShortcuts","activeRowIndex","original"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/hooks/useTableShortcuts.js

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import { createShortcutKeyDownHandler } from '../../../utils/keyboard.js';
+
+function useTableShortcuts(shortcuts, activeRow) {
+  React__default.useEffect(() => {
+    const shortcutKeys = Object.keys(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {});
+    const globalHandlers = [];
+    // convert the shortcut into the correct format to register it
+    if (shortcuts && shortcutKeys.length) {
+      shortcutKeys.forEach(key => {
+        const handler = shortcuts[key];
+        let keyDownHandler;
+        let keyDownHandlerOptions;
+        if (typeof handler === 'function') {
+          keyDownHandler = handler;
+          keyDownHandlerOptions = {
+            key
+          };
+        } else {
+          const handlerObject = handler;
+          keyDownHandler = handlerObject.handler;
+          keyDownHandlerOptions = {
+            key,
+            meta: handlerObject.meta,
+            shift: handlerObject.shift
+          };
+        }
+        globalHandlers.push(createShortcutKeyDownHandler(keyDownHandlerOptions, event => {
+          event.preventDefault();
+          keyDownHandler(activeRow);
+        }));
+      });
+    }
+    globalHandlers.forEach(handler => {
+      document.addEventListener('keydown', handler);
+    });
+    return () => {
+      globalHandlers.forEach(handler => {
+        document.removeEventListener('keydown', handler);
+      });
+    };
+  }, [shortcuts, activeRow]);
+}
+
+export { useTableShortcuts };
+//# sourceMappingURL=useTableShortcuts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableShortcuts.js","sources":["../../../../../../../../src/components/Table2/hooks/useTableShortcuts.ts"],"sourcesContent":["import React from 'react';\nimport { Table2ShortcutHandlerObject, Table2Shortcuts } from '../types';\nimport { KeyDownHandlerOptions, createShortcutKeyDownHandler } from '../../../utils/keyboard';\n\nexport function useTableShortcuts<TType = any>(shortcuts: Table2Shortcuts<TType> | undefined, activeRow: TType) {\n    React.useEffect(() => {\n        const shortcutKeys = Object.keys(shortcuts ?? {});\n\n        const globalHandlers: Array<(event: KeyboardEvent) => void> = [];\n\n        // convert the shortcut into the correct format to register it\n        if (shortcuts && shortcutKeys.length) {\n            shortcutKeys.forEach(key => {\n                const handler = shortcuts[key];\n\n                let keyDownHandler;\n                let keyDownHandlerOptions: KeyDownHandlerOptions;\n\n                if (typeof handler === 'function') {\n                    keyDownHandler = handler;\n                    keyDownHandlerOptions = {\n                        key,\n                    };\n                } else {\n                    const handlerObject = handler as Table2ShortcutHandlerObject<TType>;\n                    keyDownHandler = handlerObject.handler;\n                    keyDownHandlerOptions = {\n                        key,\n                        meta: handlerObject.meta,\n                        shift: handlerObject.shift,\n                    };\n                }\n\n                globalHandlers.push(\n                    createShortcutKeyDownHandler(keyDownHandlerOptions, event => {\n                        event.preventDefault();\n                        keyDownHandler(activeRow);\n                    })\n                );\n            });\n        }\n\n        globalHandlers.forEach(handler => {\n            document.addEventListener('keydown', handler);\n        });\n\n        return () => {\n            globalHandlers.forEach(handler => {\n                document.removeEventListener('keydown', handler);\n            });\n        };\n    }, [shortcuts, activeRow]);\n}\n"],"names":["useTableShortcuts","shortcuts","activeRow","React","useEffect","shortcutKeys","Object","keys","globalHandlers","length","forEach","key","handler","keyDownHandler","keyDownHandlerOptions","handlerObject","meta","shift","push","createShortcutKeyDownHandler","event","preventDefault","document","addEventListener","removeEventListener"],"mappings":";;;SAIgBA,iBAAiB,CAAcC,SAA6C,EAAEC,SAAgB;EAC1GC,cAAK,CAACC,SAAS,CAAC;IACZ,MAAMC,YAAY,GAAGC,MAAM,CAACC,IAAI,CAACN,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,CAAC;IAEjD,MAAMO,cAAc,GAA0C,EAAE;;IAGhE,IAAIP,SAAS,IAAII,YAAY,CAACI,MAAM,EAAE;MAClCJ,YAAY,CAACK,OAAO,CAACC,GAAG;QACpB,MAAMC,OAAO,GAAGX,SAAS,CAACU,GAAG,CAAC;QAE9B,IAAIE,cAAc;QAClB,IAAIC,qBAA4C;QAEhD,IAAI,OAAOF,OAAO,KAAK,UAAU,EAAE;UAC/BC,cAAc,GAAGD,OAAO;UACxBE,qBAAqB,GAAG;YACpBH;WACH;SACJ,MAAM;UACH,MAAMI,aAAa,GAAGH,OAA6C;UACnEC,cAAc,GAAGE,aAAa,CAACH,OAAO;UACtCE,qBAAqB,GAAG;YACpBH,GAAG;YACHK,IAAI,EAAED,aAAa,CAACC,IAAI;YACxBC,KAAK,EAAEF,aAAa,CAACE;WACxB;;QAGLT,cAAc,CAACU,IAAI,CACfC,4BAA4B,CAACL,qBAAqB,EAAEM,KAAK;UACrDA,KAAK,CAACC,cAAc,EAAE;UACtBR,cAAc,CAACX,SAAS,CAAC;SAC5B,CAAC,CACL;OACJ,CAAC;;IAGNM,cAAc,CAACE,OAAO,CAACE,OAAO;MAC1BU,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEX,OAAO,CAAC;KAChD,CAAC;IAEF,OAAO;MACHJ,cAAc,CAACE,OAAO,CAACE,OAAO;QAC1BU,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEZ,OAAO,CAAC;OACnD,CAAC;KACL;GACJ,EAAE,CAACX,SAAS,EAAEC,SAAS,CAAC,CAAC;AAC9B;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table2/types.ts"],"sourcesContent":["import React from 'react';\nimport {\n    ColumnFiltersState,\n    ColumnOrderState,\n    ColumnSizingState,\n    OnChangeFn,\n    Row,\n    SortingState,\n    VisibilityState,\n} from '@tanstack/react-table';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { IconName } from '../Icon/Icon';\nimport { MenuProps } from '../Menu/Menu';\n\nexport enum Table2FilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsOneOf,\n    IsNoneOf,\n    IsAllOf,\n    IsEmpty,\n    IsNotEmpty,\n}\n\nexport type Table2Filter<TType = any> = {\n    comparator?: Table2FilterComparator;\n    value: TType | TType[];\n};\n\nexport type ColumnOffsetState = Record<string, number | undefined>;\nexport type RowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type CellAlignment = 'left' | 'center' | 'right';\n\nexport type SortDirection = 'asc' | 'desc';\nexport type ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\n\nexport type Table2ColumnHeaderRenderer<TType = any> = (value: any, row: TType) => JSX.Element | string | null;\nexport type Table2ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\nexport type Table2ColumnFooterRenderer = (values: any[]) => JSX.Element | string | null;\n\nexport type Table2ColumnControlProps = {\n    className?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    onBlur: (newValue?: any) => Promise<void>;\n    onFocus: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement>;\n    setValue: (value: any) => void;\n    value: any;\n    // This is a temporary fix to enable up/down arrow key shortcuts on input in quick mode. For some reason,\n    // the preventDefault is true on Taco Input, so the keyboard shortcuts doesn't work. By adding this\n    // data attribute we make sure the event is coming from a control component, and then we can make sure\n    // keyboard shortcut works as expected.\n    'data-inline-editing-component'?: 'true';\n};\nexport type Table2ColumnControlRenderer<TType = any> =\n    | ((props: Table2ColumnControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch';\n\nexport type SortFn<TType = unknown> = (rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1;\n\nexport type Table2ColumnProps<TType = any> = {\n    accessor: string;\n    align?: CellAlignment;\n    className?: string | ((row: Row<TType>) => string);\n    control?: Table2ColumnControlRenderer<TType>;\n    dataType?: ColumnDataType;\n    defaultActiveColumnIndex?: number;\n    defaultActiveRowIndex?: number;\n    defaultHidden?: boolean;\n    disableFiltering?: boolean;\n    disableHiding?: boolean;\n    disableReordering?: boolean;\n    disableResizing?: boolean;\n    disableSorting?: boolean;\n    defaultWidth?: number | 'grow';\n    header: string;\n    headerClassName?: string;\n    footer?: Table2ColumnFooterRenderer;\n    renderer?: Table2ColumnHeaderRenderer<TType>;\n    menu?: Table2ColumnHeaderMenu;\n    minWidth?: number;\n    sort?: SortDirection;\n    sortFn?: SortFn<TType>;\n    tooltip?: string;\n};\n\nexport type Table2ActionProps<TType> = {\n    dialog?: (rows: TType[], resetSelectedRows: () => void) => (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean | ((rows: TType[]) => boolean);\n    icon: IconName | ((rows: TType[]) => IconName);\n    onClick?: (rows: TType[], resetSelectedRows: () => void) => void;\n    text: string | ((rows: TType[]) => string);\n    visible?: boolean | ((rows: TType[]) => boolean);\n};\n\nexport type Table2RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\nexport type Table2Settings = {\n    columnFilters?: ColumnFiltersState;\n    columnOrder?: ColumnOrderState;\n    columnSizing?: ColumnSizingState;\n    columnVisibility?: VisibilityState;\n    frozenColumnCount?: number;\n    globalFilter?: string;\n    rowDensity?: RowDensity;\n    sorting?: SortingState;\n};\n\nexport type RowClickHandler<TType = any> = (row: TType) => void;\nexport type RowDragHandler<TType = any> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type RowSelectionHandler<TType = any> = (rows: TType[]) => void;\nexport type RowExpansionRenderer<TType = any> = (row: TType) => (() => JSX.Element) | null;\nexport type SortHandler = OnChangeFn<SortingState>;\nexport type SettingsHandler = OnChangeFn<Table2Settings>;\nexport type SaveHandlerErrorResponse = Record<string, string | undefined | null> | null;\nexport type SaveHandler<TType = any> = (row: TType, accessor: string) => Promise<SaveHandlerErrorResponse | void>;\n\nexport type DataColumnIndexes = {\n    dataColumnStartOffset: number;\n    dataColumnEndOffset: number;\n};\n\nexport type Table2Children<TType = any> = (React.ReactElement<Table2ColumnProps<TType>> | boolean | null | undefined)[];\n\nexport type Table2Props<TType = any> = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    actionsForRow?: Table2RowActionRenderer<TType>[];\n    actionsForRowLength?: number;\n    children: Table2Children;\n    className?: string;\n    data: TType[];\n    defaultActiveRowIndex?: number;\n    disableColumnFiltering?: boolean;\n    disableColumnHiding?: boolean;\n    disableColumnFreezing?: boolean;\n    disableColumnReordering?: boolean;\n    disableColumnResizing?: boolean;\n    disableRowDensity?: boolean;\n    disableRowExpansion?: boolean;\n    disableRowSelection?: boolean;\n    disableMultipleRowSelection?: boolean;\n    disableSearch?: boolean;\n    disableSorting?: boolean;\n    emptyState?: () => JSX.Element;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    length?: number;\n    loadMore?: () => Promise<void>;\n    manualColumnFiltering?: boolean;\n    manualSearch?: boolean;\n    manualSorting?: boolean;\n    onChangeSettings?: SettingsHandler;\n    onRowClick?: RowClickHandler<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n    onRowDrop?: RowDropHandler<TType>;\n    onRowSelect?: RowSelectionHandler<TType>;\n    onSave?: SaveHandler<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    settings?: Table2Settings;\n    _experimentalActionsForTable?: Table2ActionProps<TType>[];\n    _experimentalActionsForTableSummary?: (rows: TType[]) => JSX.Element | string;\n};\n"],"names":["Table2FilterComparator"],"mappings":"IAcYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,2EAAQ;EACRA,yEAAO;EACPA,0EAAO;EACPA,gFAAU;AACd,CAAC,EAbWA,sBAAsB,KAAtBA,sBAAsB;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table2/types.ts"],"sourcesContent":["import React from 'react';\nimport {\n    ColumnFiltersState,\n    ColumnOrderState,\n    ColumnSizingState,\n    OnChangeFn,\n    Row,\n    SortingState,\n    VisibilityState,\n} from '@tanstack/react-table';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { IconName } from '../Icon/Icon';\nimport { MenuProps } from '../Menu/Menu';\n\nexport enum Table2FilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsOneOf,\n    IsNoneOf,\n    IsAllOf,\n    IsEmpty,\n    IsNotEmpty,\n}\n\nexport type Table2Filter<TType = any> = {\n    comparator?: Table2FilterComparator;\n    value: TType | TType[];\n};\n\nexport type ColumnOffsetState = Record<string, number | undefined>;\nexport type RowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type CellAlignment = 'left' | 'center' | 'right';\n\nexport type SortDirection = 'asc' | 'desc';\nexport type ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\n\nexport type Table2ColumnHeaderRenderer<TType = any> = (value: any, row: TType) => JSX.Element | string | null;\nexport type Table2ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\nexport type Table2ColumnFooterRenderer = (values: any[]) => JSX.Element | string | null;\n\nexport type Table2ColumnControlProps = {\n    className?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    onBlur: (newValue?: any) => Promise<void>;\n    onFocus: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement>;\n    setValue: (value: any) => void;\n    value: any;\n    // This is a temporary fix to enable up/down arrow key shortcuts on input in quick mode. For some reason,\n    // the preventDefault is true on Taco Input, so the keyboard shortcuts doesn't work. By adding this\n    // data attribute we make sure the event is coming from a control component, and then we can make sure\n    // keyboard shortcut works as expected.\n    'data-inline-editing-component'?: 'true';\n};\nexport type Table2ColumnControlRenderer<TType = any> =\n    | ((props: Table2ColumnControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch';\n\nexport type SortFn<TType = unknown> = (rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1;\n\nexport type Table2ColumnProps<TType = any> = {\n    accessor: string;\n    align?: CellAlignment;\n    className?: string | ((row: Row<TType>) => string);\n    control?: Table2ColumnControlRenderer<TType>;\n    dataType?: ColumnDataType;\n    defaultActiveColumnIndex?: number;\n    defaultActiveRowIndex?: number;\n    defaultHidden?: boolean;\n    disableFiltering?: boolean;\n    disableHiding?: boolean;\n    disableReordering?: boolean;\n    disableResizing?: boolean;\n    disableSorting?: boolean;\n    defaultWidth?: number | 'grow';\n    header: string;\n    headerClassName?: string;\n    footer?: Table2ColumnFooterRenderer;\n    renderer?: Table2ColumnHeaderRenderer<TType>;\n    menu?: Table2ColumnHeaderMenu;\n    minWidth?: number;\n    sort?: SortDirection;\n    sortFn?: SortFn<TType>;\n    tooltip?: string;\n};\n\nexport type Table2ActionProps<TType> = {\n    dialog?: (rows: TType[], resetSelectedRows: () => void) => (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean | ((rows: TType[]) => boolean);\n    icon: IconName | ((rows: TType[]) => IconName);\n    onClick?: (rows: TType[], resetSelectedRows: () => void) => void;\n    text: string | ((rows: TType[]) => string);\n    visible?: boolean | ((rows: TType[]) => boolean);\n};\n\nexport type Table2RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\nexport type Table2Settings = {\n    columnFilters?: ColumnFiltersState;\n    columnOrder?: ColumnOrderState;\n    columnSizing?: ColumnSizingState;\n    columnVisibility?: VisibilityState;\n    frozenColumnCount?: number;\n    globalFilter?: string;\n    rowDensity?: RowDensity;\n    sorting?: SortingState;\n};\n\nexport type RowClickHandler<TType = any> = (row: TType) => void;\nexport type RowDragHandler<TType = any> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type RowSelectionHandler<TType = any> = (rows: TType[]) => void;\nexport type RowExpansionRenderer<TType = any> = (row: TType) => (() => JSX.Element) | null;\nexport type SortHandler = OnChangeFn<SortingState>;\nexport type SettingsHandler = OnChangeFn<Table2Settings>;\nexport type SaveHandlerErrorResponse = Record<string, string | undefined | null> | null;\nexport type SaveHandler<TType = any> = (row: TType, accessor: string) => Promise<SaveHandlerErrorResponse | void>;\n\nexport type DataColumnIndexes = {\n    dataColumnStartOffset: number;\n    dataColumnEndOffset: number;\n};\n\nexport type Table2Children<TType = any> = (React.ReactElement<Table2ColumnProps<TType>> | boolean | null | undefined)[];\n\nexport type Table2ShortcutHandlerFn<TType = any> = (row: TType) => void;\nexport type Table2ShortcutHandlerObject<TType = any> = {\n    handler: Table2ShortcutHandlerFn<TType>;\n    meta?: boolean;\n    shift?: boolean;\n};\nexport type Table2Shortcuts<TType = any> = Record<string, Table2ShortcutHandlerFn<TType> | Table2ShortcutHandlerObject<TType>>;\n\nexport type Table2Props<TType = any> = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    actionsForRow?: Table2RowActionRenderer<TType>[];\n    actionsForRowLength?: number;\n    children: Table2Children;\n    className?: string;\n    data: TType[];\n    defaultActiveRowIndex?: number;\n    disableColumnFiltering?: boolean;\n    disableColumnHiding?: boolean;\n    disableColumnFreezing?: boolean;\n    disableColumnReordering?: boolean;\n    disableColumnResizing?: boolean;\n    disableRowDensity?: boolean;\n    disableRowExpansion?: boolean;\n    disableRowSelection?: boolean;\n    disableMultipleRowSelection?: boolean;\n    disableSearch?: boolean;\n    disableSorting?: boolean;\n    emptyState?: () => JSX.Element;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    length?: number;\n    loadMore?: () => Promise<void>;\n    manualColumnFiltering?: boolean;\n    manualSearch?: boolean;\n    manualSorting?: boolean;\n    onChangeSettings?: SettingsHandler;\n    onRowClick?: RowClickHandler<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n    onRowDrop?: RowDropHandler<TType>;\n    onRowSelect?: RowSelectionHandler<TType>;\n    onSave?: SaveHandler<TType>;\n    shortcuts?: Table2Shortcuts<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    settings?: Table2Settings;\n    _experimentalActionsForTable?: Table2ActionProps<TType>[];\n    _experimentalActionsForTableSummary?: (rows: TType[]) => JSX.Element | string;\n};\n"],"names":["Table2FilterComparator"],"mappings":"IAcYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,2EAAQ;EACRA,yEAAO;EACPA,0EAAO;EACPA,gFAAU;AACd,CAAC,EAbWA,sBAAsB,KAAtBA,sBAAsB;;;;"}

package/dist/esm/packages/taco/src/utils/keyboard.js

@@ -8,7 +8,7 @@ function createShortcutKeyDownHandler(key, handler) {
     if (typeof key === 'string') {
       condition = event.key.toLowerCase() === key.toLowerCase();
     } else {
-      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || key.meta === false && key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
+      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || !key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
         return;
       }
       if (key.shift && !event.shiftKey || key.shift === false && event.shiftKey) {

package/dist/esm/packages/taco/src/utils/keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.js","sources":["../../../../../../src/utils/keyboard.ts"],"sourcesContent":["import React from 'react';\n\nexport type KeyDownHandlerOptions = { key: string; meta?: boolean; shift?: boolean };\n\nconst WHITELISTED_ELEMENTS = ['INPUT', 'TEXTAREA', 'SELECT'];\n\nexport function createShortcutKeyDownHandler<T = Element>(\n    key: string | KeyDownHandlerOptions,\n    handler: (event: KeyboardEvent | React.KeyboardEvent<T>) => void\n) {\n    return function (event: KeyboardEvent | React.KeyboardEvent<T>) {\n        let condition = false;\n\n        if (event.target !== event.currentTarget && WHITELISTED_ELEMENTS.includes((event.target as HTMLElement).tagName)) {\n            return;\n        }\n\n        if (typeof key === 'string') {\n            condition = event.key.toLowerCase() === key.toLowerCase();\n        } else {\n            if (\n                (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey)) ||\n                (key.meta === false && key.meta && (isMacOs() ? event.metaKey : event.ctrlKey))\n            ) {\n                return;\n            }\n\n            if ((key.shift && !event.shiftKey) || (key.shift === false && event.shiftKey)) {\n                return;\n            }\n\n            condition = event.key.toLowerCase() === key.key.toLowerCase();\n        }\n\n        if (condition) {\n            // stops react handlers bubbling up to global\n            event.stopPropagation();\n            // stops global handlers bubbling up to other global\n            (event as KeyboardEvent).stopImmediatePropagation?.();\n            handler(event);\n        }\n    };\n}\n\nexport const isMacOs = () => window?.navigator.userAgent.includes('Mac');\n"],"names":["WHITELISTED_ELEMENTS","createShortcutKeyDownHandler","key","handler","event","condition","target","currentTarget","includes","tagName","toLowerCase","meta","isMacOs","metaKey","ctrlKey","shift","shiftKey","stopPropagation","stopImmediatePropagation","window","navigator","userAgent"],"mappings":"AAIA,MAAMA,oBAAoB,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC;SAE5CC,4BAA4B,CACxCC,GAAmC,EACnCC,OAAgE;EAEhE,OAAO,UAAUC,KAA6C;IAC1D,IAAIC,SAAS,GAAG,KAAK;IAErB,IAAID,KAAK,CAACE,MAAM,KAAKF,KAAK,CAACG,aAAa,IAAIP,oBAAoB,CAACQ,QAAQ,CAAEJ,KAAK,CAACE,MAAsB,CAACG,OAAO,CAAC,EAAE;MAC9G;;IAGJ,IAAI,OAAOP,GAAG,KAAK,QAAQ,EAAE;MACzBG,SAAS,GAAGD,KAAK,CAACF,GAAG,CAACQ,WAAW,EAAE,KAAKR,GAAG,CAACQ,WAAW,EAAE;KAC5D,MAAM;MACH,IACKR,GAAG,CAACS,IAAI,KAAKC,OAAO,EAAE,GAAG,CAACR,KAAK,CAACS,OAAO,GAAG,CAACT,KAAK,CAACU,OAAO,CAAC,IACzDZ,GAAG,CAACS,IAAI,KAAK,KAAK,IAAIT,GAAG,CAACS,IAAI,KAAKC,OAAO,EAAE,GAAGR,KAAK,CAACS,OAAO,GAAGT,KAAK,CAACU,OAAO,CAAE,EACjF;QACE;;MAGJ,IAAKZ,GAAG,CAACa,KAAK,IAAI,CAACX,KAAK,CAACY,QAAQ,IAAMd,GAAG,CAACa,KAAK,KAAK,KAAK,IAAIX,KAAK,CAACY,QAAS,EAAE;QAC3E;;MAGJX,SAAS,GAAGD,KAAK,CAACF,GAAG,CAACQ,WAAW,EAAE,KAAKR,GAAG,CAACA,GAAG,CAACQ,WAAW,EAAE;;IAGjE,IAAIL,SAAS,EAAE;MAAA;;MAEXD,KAAK,CAACa,eAAe,EAAE;;MAEtB,yBAAAb,KAAuB,CAACc,wBAAwB,0DAAhD,2BAAAd,KAAuB,CAA6B;MACrDD,OAAO,CAACC,KAAK,CAAC;;GAErB;AACL;MAEaQ,OAAO,GAAG;EAAA;EAAA,kBAAMO,MAAM,4CAAN,QAAQC,SAAS,CAACC,SAAS,CAACb,QAAQ,CAAC,KAAK,CAAC;AAAA;;;;"}
+{"version":3,"file":"keyboard.js","sources":["../../../../../../src/utils/keyboard.ts"],"sourcesContent":["import React from 'react';\n\nexport type KeyDownHandlerOptions = { key: string; meta?: boolean; shift?: boolean };\n\nconst WHITELISTED_ELEMENTS = ['INPUT', 'TEXTAREA', 'SELECT'];\n\nexport function createShortcutKeyDownHandler<T = Element>(\n    key: string | KeyDownHandlerOptions,\n    handler: (event: KeyboardEvent | React.KeyboardEvent<T>) => void\n) {\n    return function (event: KeyboardEvent | React.KeyboardEvent<T>) {\n        let condition = false;\n\n        if (event.target !== event.currentTarget && WHITELISTED_ELEMENTS.includes((event.target as HTMLElement).tagName)) {\n            return;\n        }\n\n        if (typeof key === 'string') {\n            condition = event.key.toLowerCase() === key.toLowerCase();\n        } else {\n            if (\n                (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey)) ||\n                (!key.meta && (isMacOs() ? event.metaKey : event.ctrlKey))\n            ) {\n                return;\n            }\n\n            if ((key.shift && !event.shiftKey) || (key.shift === false && event.shiftKey)) {\n                return;\n            }\n\n            condition = event.key.toLowerCase() === key.key.toLowerCase();\n        }\n\n        if (condition) {\n            // stops react handlers bubbling up to global\n            event.stopPropagation();\n            // stops global handlers bubbling up to other global\n            (event as KeyboardEvent).stopImmediatePropagation?.();\n            handler(event);\n        }\n    };\n}\n\nexport const isMacOs = () => window?.navigator.userAgent.includes('Mac');\n"],"names":["WHITELISTED_ELEMENTS","createShortcutKeyDownHandler","key","handler","event","condition","target","currentTarget","includes","tagName","toLowerCase","meta","isMacOs","metaKey","ctrlKey","shift","shiftKey","stopPropagation","stopImmediatePropagation","window","navigator","userAgent"],"mappings":"AAIA,MAAMA,oBAAoB,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC;SAE5CC,4BAA4B,CACxCC,GAAmC,EACnCC,OAAgE;EAEhE,OAAO,UAAUC,KAA6C;IAC1D,IAAIC,SAAS,GAAG,KAAK;IAErB,IAAID,KAAK,CAACE,MAAM,KAAKF,KAAK,CAACG,aAAa,IAAIP,oBAAoB,CAACQ,QAAQ,CAAEJ,KAAK,CAACE,MAAsB,CAACG,OAAO,CAAC,EAAE;MAC9G;;IAGJ,IAAI,OAAOP,GAAG,KAAK,QAAQ,EAAE;MACzBG,SAAS,GAAGD,KAAK,CAACF,GAAG,CAACQ,WAAW,EAAE,KAAKR,GAAG,CAACQ,WAAW,EAAE;KAC5D,MAAM;MACH,IACKR,GAAG,CAACS,IAAI,KAAKC,OAAO,EAAE,GAAG,CAACR,KAAK,CAACS,OAAO,GAAG,CAACT,KAAK,CAACU,OAAO,CAAC,IACzD,CAACZ,GAAG,CAACS,IAAI,KAAKC,OAAO,EAAE,GAAGR,KAAK,CAACS,OAAO,GAAGT,KAAK,CAACU,OAAO,CAAE,EAC5D;QACE;;MAGJ,IAAKZ,GAAG,CAACa,KAAK,IAAI,CAACX,KAAK,CAACY,QAAQ,IAAMd,GAAG,CAACa,KAAK,KAAK,KAAK,IAAIX,KAAK,CAACY,QAAS,EAAE;QAC3E;;MAGJX,SAAS,GAAGD,KAAK,CAACF,GAAG,CAACQ,WAAW,EAAE,KAAKR,GAAG,CAACA,GAAG,CAACQ,WAAW,EAAE;;IAGjE,IAAIL,SAAS,EAAE;MAAA;;MAEXD,KAAK,CAACa,eAAe,EAAE;;MAEtB,yBAAAb,KAAuB,CAACc,wBAAwB,0DAAhD,2BAAAd,KAAuB,CAA6B;MACrDD,OAAO,CAACC,KAAK,CAAC;;GAErB;AACL;MAEaQ,OAAO,GAAG;EAAA;EAAA,kBAAMO,MAAM,4CAAN,QAAQC,SAAS,CAACC,SAAS,CAACb,QAAQ,CAAC,KAAK,CAAC;AAAA;;;;"}

package/dist/taco.cjs.development.js

@@ -3684,7 +3684,7 @@ function createShortcutKeyDownHandler(key, handler) {
     if (typeof key === 'string') {
       condition = event.key.toLowerCase() === key.toLowerCase();
     } else {
-      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || key.meta === false && key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
+      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || !key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
         return;
       }
       if (key.shift && !event.shiftKey || key.shift === false && event.shiftKey) {
@@ -4016,7 +4016,7 @@ const defaultLocalisationTexts = {
     filters: {
       button: 'Filters',
       buttons: {
-        addFilter: 'Add Filter',
+        addNewFilter: 'Add new filter',
         clearFilters: 'Clear all filters'
       },
       comparators: {
@@ -4033,6 +4033,14 @@ const defaultLocalisationTexts = {
         isEmpty: 'Is empty',
         isNotEmpty: 'Is not empty'
       },
+      conditions: {
+        and: 'And',
+        where: 'Where'
+      },
+      emptyFilter: {
+        condition: 'Condition',
+        value: 'Value'
+      },
       tooltip: 'Apply filters',
       total: 'Viewing [CURRENT] of [TOTAL]'
     },
@@ -6285,15 +6293,15 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     ref: contentRef,
     "data-taco": "drawer",
     className: containerClassName
-  }, /*#__PURE__*/React__default.createElement("div", Object.assign({
+  }, output, /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: dragHandlerClassName
   }, dragHandleProps, {
     "data-testid": "resize-handler",
     ref: dragHandlerRef
-  })), output, showCloseButton ? /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
+  })), showCloseButton ? /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
     "aria-label": texts.drawer.close,
-    className: "absolute top-0 right-0 mt-4 mr-2",
+    className: "absolute right-0 top-0 mr-2 mt-4",
     icon: "close"
   })) : null);
   const styleProp = {
@@ -7042,7 +7050,7 @@ const replaceWithShortform = key => {
     case ' ':
       return '␣';
     default:
-      return key;
+      return String(key).toLocaleUpperCase();
   }
 };
 const getShortcutText = key => {
@@ -13231,7 +13239,8 @@ function useColumnDefinitions(children, options, tableRef) {
           size: child.props.defaultWidth,
           // sorting
           enableSorting: !child.props.disableSorting,
-          sortingFn: getSortingFn(child.props.dataType, child.props.sortFn)
+          sortingFn: getSortingFn(child.props.dataType, child.props.sortFn),
+          sortDescFirst: false
         });
       }
     });
@@ -13380,9 +13389,50 @@ const useFilterStateListener = (table, onRowSelect) => {
   }, [table.getState().columnFilters, table.getState().globalFilter]);
 };
 
+function useTableShortcuts(shortcuts, activeRow) {
+  React__default.useEffect(() => {
+    const shortcutKeys = Object.keys(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {});
+    const globalHandlers = [];
+    // convert the shortcut into the correct format to register it
+    if (shortcuts && shortcutKeys.length) {
+      shortcutKeys.forEach(key => {
+        const handler = shortcuts[key];
+        let keyDownHandler;
+        let keyDownHandlerOptions;
+        if (typeof handler === 'function') {
+          keyDownHandler = handler;
+          keyDownHandlerOptions = {
+            key
+          };
+        } else {
+          const handlerObject = handler;
+          keyDownHandler = handlerObject.handler;
+          keyDownHandlerOptions = {
+            key,
+            meta: handlerObject.meta,
+            shift: handlerObject.shift
+          };
+        }
+        globalHandlers.push(createShortcutKeyDownHandler(keyDownHandlerOptions, event => {
+          event.preventDefault();
+          keyDownHandler(activeRow);
+        }));
+      });
+    }
+    globalHandlers.forEach(handler => {
+      document.addEventListener('keydown', handler);
+    });
+    return () => {
+      globalHandlers.forEach(handler => {
+        document.removeEventListener('keydown', handler);
+      });
+    };
+  }, [shortcuts, activeRow]);
+}
+
 const ACTIONS_ON_ROW_LENGTH = 4;
 function useTable$1(children, props, ref) {
-  var _settings$frozenColum, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
+  var _settings$frozenColum, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity, _tableRows$activeRow$;
   const {
     actionsForRow = [],
     actionsForRowLength = ACTIONS_ON_ROW_LENGTH,
@@ -13409,6 +13459,7 @@ function useTable$1(children, props, ref) {
     onRowSelect,
     onSave,
     settings = {},
+    shortcuts,
     // experimental
     _experimentalActionsForTable
   } = props;
@@ -13576,6 +13627,7 @@ function useTable$1(children, props, ref) {
   useFilterStateListener(table, onRowSelect);
   useRowSelectionListener(table, onRowSelect);
   useSettingsStateListener(table, onChangeSettings);
+  useTableShortcuts(shortcuts, (_tableRows$activeRow$ = tableRows[activeRow.activeRowIndex]) === null || _tableRows$activeRow$ === void 0 ? void 0 : _tableRows$activeRow$.original);
   return {
     rows,
     table,
@@ -14262,18 +14314,22 @@ const InferredControl = ({
 };
 
 const ColumnFilter = props => {
-  var _column$columnDef$hea, _column$columnDef$met, _control;
+  var _column$columnDef$hea, _column$columnDef$met;
   const {
     allColumns,
     column,
     index,
-    table
+    table,
+    onRemove
   } = props;
   const {
     comparator,
     value
   } = column.getFilterValue();
   const ariaLabel = String((_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : '');
+  const {
+    texts
+  } = useLocalization();
   const ref = React__default.useRef(null);
   let control;
   const controlType = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
@@ -14318,13 +14374,16 @@ const ColumnFilter = props => {
       }))
     });
   }
-  const handleRemove = () => column.setFilterValue(undefined);
+  const handleRemove = () => {
+    column.setFilterValue(undefined);
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+  };
   const comparators = guessComparatorsBasedOnControl(control, controlType);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-2 flex gap-2"
+    className: "flex gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
-  }, index === 0 ? 'Where' : 'And'), /*#__PURE__*/React__default.createElement(Column$2, {
+  }, index === 0 ? texts.table2.filters.conditions.where : texts.table2.filters.conditions.and), /*#__PURE__*/React__default.createElement(Column$2, {
     className: "!w-32 flex-shrink-0",
     allColumns: allColumns,
     column: column,
@@ -14337,7 +14396,7 @@ const ColumnFilter = props => {
     validComparators: comparators
   }), comparator !== undefined ? /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-grow items-center"
-  }, (_control = control) !== null && _control !== void 0 ? _control : /*#__PURE__*/React__default.createElement(InferredControl, {
+  }, /*#__PURE__*/React__default.createElement(InferredControl, {
     column: column,
     comparator: comparator,
     value: value
@@ -14370,6 +14429,61 @@ const guessComparatorsBasedOnControl = (instance, control) => {
   }
 };
 
+const EmptyFilter = props => {
+  const {
+    texts
+  } = useLocalization();
+  const {
+    onChange,
+    onRemove,
+    allColumns,
+    table,
+    index,
+    filteredColumns,
+    emptyFilterCount
+  } = props;
+  const handleChange = value => {
+    if (value) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
+  }, filteredColumns.length > 0 || filteredColumns.length === 0 && index > 0 ? texts.table2.filters.conditions.and : texts.table2.filters.conditions.where), /*#__PURE__*/React__default.createElement(Select2, {
+    className: "!w-32 flex-shrink-0",
+    emptyValue: null,
+    autoFocus: true,
+    onChange: handleChange,
+    value: null
+  }, allColumns.map(c => /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: c.id,
+    value: c.id,
+    disabled: !c.getCanFilter() || !!table.getState().columnFilters.find(f => f.id === c.id)
+  }, String(c.columnDef.header)))), /*#__PURE__*/React__default.createElement(Select2, {
+    className: "!w-32 flex-shrink-0",
+    value: 1,
+    autoFocus: true,
+    disabled: true
+  }, /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: 'condition1',
+    value: 1
+  }, texts.table2.filters.emptyFilter.condition), /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: 'condition2',
+    value: 2
+  }, "Condition2")), /*#__PURE__*/React__default.createElement(Input, {
+    "aria-label": 'Value',
+    className: "flex-grow items-center",
+    disabled: true,
+    value: texts.table2.filters.emptyFilter.value
+  }), (emptyFilterCount > 1 || filteredColumns.length > 0) && /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "close",
+    onClick: onRemove
+  }));
+};
+
 const FiltersButton = ({
   length,
   table
@@ -14378,7 +14492,10 @@ const FiltersButton = ({
     texts
   } = useLocalization();
   const ref = React__default.useRef(null);
-  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
+  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id)).sort((a, b) => {
+    var _a$columnDef, _b$columnDef;
+    return (_a$columnDef = a.columnDef) === null || _a$columnDef === void 0 ? void 0 : _a$columnDef.header.localeCompare((_b$columnDef = b.columnDef) === null || _b$columnDef === void 0 ? void 0 : _b$columnDef.header);
+  });
   const {
     shouldDisableTableActions
   } = table.options.meta;
@@ -14390,17 +14507,11 @@ const FiltersButton = ({
     }
     return columns;
   }, []);
-  const handleAdd = () => {
-    const firstFilterableColumn = allColumns.find(c => c.getCanFilter() && !columnFilters.find(f => f.id === c.id));
-    if (firstFilterableColumn) {
-      firstFilterableColumn.setFilterValue({
-        comparator: undefined,
-        value: undefined
-      });
-    }
-  };
+  const [emptyFilterCount, setEmptyFilterCount] = React__default.useState(1);
+  const handleAdd = () => setEmptyFilterCount(emptyFilterCount + 1);
   const handleReset = () => {
     table.resetColumnFilters();
+    setEmptyFilterCount(1);
   };
   useGlobalKeyDown({
     key: 'f',
@@ -14411,37 +14522,94 @@ const FiltersButton = ({
     event.preventDefault();
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
   });
+  const handleEmptyFilterChange = columnId => {
+    // create an actual filter on that column that the user selected
+    const column = allColumns.find(c => c.getCanFilter() && c.id === columnId);
+    if (column) {
+      column.setFilterValue({
+        comparator: undefined,
+        value: undefined
+      });
+    }
+    // hide the empty filter row because we now have a real filter
+    setEmptyFilterCount(emptyFilterCount - 1);
+  };
+  const handleRemove = () => {
+    if (filteredColumns.length === 1 && emptyFilterCount === 0) {
+      setEmptyFilterCount(1);
+    }
+  };
+  const handleRemoveEmptyFilter = () => {
+    setEmptyFilterCount(emptyFilterCount - 1);
+  };
+  const handleOpenChange = () => {
+    const emptyFilterCount = filteredColumns.length === 0 ? 1 : 0;
+    setEmptyFilterCount(emptyFilterCount);
+  };
+  const filters = filteredColumns.length > 0 && filteredColumns.filter(column => {
+    var _column$columnDef$met;
+    const controlType = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
+    const value = column.getFilterValue().value;
+    const comparator = column.getFilterValue().comparator;
+    if (Array.isArray(value)) {
+      if (value.length > 0 && value.find(item => item !== undefined)) {
+        return true;
+      }
+    } else if (value) {
+      return true;
+    } else if ([Table2FilterComparator.IsEmpty, Table2FilterComparator.IsNotEmpty].includes(comparator)) {
+      if (!controlType) {
+        return true;
+      }
+    }
+    return false;
+  });
+  const filtersApplied = filters && filters.length;
   return /*#__PURE__*/React__default.createElement(Button$1, {
     "aria-label": texts.table2.filters.tooltip,
-    appearance: columnFilters.length ? 'primary' : 'default',
+    appearance: filtersApplied ? 'primary' : 'default',
     className: cn({
-      '!wcag-blue-100': columnFilters.length
+      '!wcag-blue-100': filtersApplied
     }),
     disabled: shouldDisableTableActions,
-    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
+      onChange: handleOpenChange
+    }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
       className: "flex w-[40rem] flex-col gap-4"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex h-8"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex w-full items-center gap-2"
     }, /*#__PURE__*/React__default.createElement("h4", {
       className: "mb-0 inline-flex"
-    }, "Filter"), /*#__PURE__*/React__default.createElement("p", {
+    }, texts.table2.filters.button), /*#__PURE__*/React__default.createElement("p", {
       className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
-    }, texts.table2.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(length)))), /*#__PURE__*/React__default.createElement("div", {
+    }, texts.table2.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(length)))), columnFilters.length || emptyFilterCount > 1 ? /*#__PURE__*/React__default.createElement(Button$1, {
+      onClick: handleReset
+    }, texts.table2.filters.buttons.clearFilters) : null), /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col gap-2"
     }, filteredColumns.map((column, index) => /*#__PURE__*/React__default.createElement(ColumnFilter, {
       key: `${column.id}_${index}`,
       allColumns: allColumns,
       index: index,
       column: column,
-      table: table
-    }))), /*#__PURE__*/React__default.createElement(Group, {
-      className: "justify-between"
+      table: table,
+      onRemove: handleRemove
+    })), [...Array(emptyFilterCount)].map((_, index) => /*#__PURE__*/React__default.createElement(EmptyFilter, {
+      key: `emptyFilter_${index}`,
+      index: index,
+      allColumns: allColumns,
+      table: table,
+      onChange: value => handleEmptyFilterChange(value),
+      emptyFilterCount: emptyFilterCount,
+      filteredColumns: filteredColumns,
+      onRemove: handleRemoveEmptyFilter
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "justify-start"
     }, /*#__PURE__*/React__default.createElement(Button$1, {
       appearance: "discrete",
       onClick: handleAdd
-    }, "+ ", texts.table2.filters.buttons.addFilter), columnFilters.length ? /*#__PURE__*/React__default.createElement(Button$1, {
-      onClick: handleReset
-    }, texts.table2.filters.buttons.clearFilters) : null)))),
+    }, "+ ", texts.table2.filters.buttons.addNewFilter)))))),
     ref: ref,
     tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
@@ -14452,8 +14620,8 @@ const FiltersButton = ({
       }
     }))
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: columnFilters.length ? 'filter-solid' : 'filter'
-  }), texts.table2.filters.button, " ", columnFilters.length ? `(${columnFilters.length})` : '');
+    name: filtersApplied ? 'filter-solid' : 'filter'
+  }), texts.table2.filters.button, " ", filtersApplied ? `(${filtersApplied})` : '');
 };
 
 const Search$2 = props => {
@@ -14619,7 +14787,8 @@ const BaseTable2 = /*#__PURE__*/React__default.forwardRef(function BaseTable2(pr
         resetFiltering: () => table.resetColumnFilters(),
         resetRowExpansion: () => table.resetExpanded(),
         resetRowSelection: () => table.resetRowSelection(),
-        resetSorting: () => table.resetSorting()
+        resetSorting: () => table.resetSorting(),
+        toggleEditing: () => meta.editMode.toggleEditing()
       };
     }
   }, [table, tableRef.current]);