@economic/taco 1.19.1 → 1.21.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sources":["../../../../../../../../../src/components/Table2/components/column/Cell.tsx"],"sourcesContent":["import React, { RefObject } from 'react';\nimport cn from 'classnames';\nimport { flexRender, Cell as RTCell, Row as RTRow, Table as RTTable, TableMeta } from '@tanstack/react-table';\n\nimport { Input } from '../../../Input/Input';\nimport { ColumnBase, ColumnBaseProps } from './Base';\nimport { getCellAlignmentClasses, getCellSizingClasses, isKeyboardFocusableElement } from '../../utilities/cell';\nimport { isInternalColumn } from '../../utilities/columns';\nimport { Datepicker } from '../../../Datepicker/Datepicker';\nimport { Switch } from '../../../Switch/Switch';\nimport { SaveHandler, SaveHandlerErrorResponse, Table2Filter } from '../../types';\nimport { columnFilterFn, globalFilterFn } from '../../utilities/filterFn';\nimport { MOVE_DIR } from '../../hooks/useEditMode';\nimport { useRowContext } from '../row/Context';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { ValidationError } from './ValidationError';\nimport { hasChanged, willRowMoveAfterSorting } from './utils';\nimport { useMergedRef } from '../../../../hooks/useMergedRef';\n\ntype CellProps<TType = unknown> = Omit<ColumnBaseProps<TType>, 'column' | 'isEditing'> & {\n    cell: RTCell<TType, unknown>;\n    index: number;\n    isLastRow: boolean;\n    rowIndex: number;\n    rows: RTRow<TType>[];\n    scrollToIndex: (index: number, options?: any) => void;\n    scrollToOffset: (index: number, options?: any) => void;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport const Cell = function Cell<TType = unknown>(props: CellProps<TType>) {\n    const { cell, index, isLastRow, rowIndex, rows, scrollToIndex, scrollToOffset, table, tableRef, ...columnProps } = props;\n    const meta = table.options.meta as TableMeta<any>;\n\n    const { addFocussableColumnIndex, focussableColumnIndexes: allFocussableColumnIndexes } = meta;\n\n    const { validationErrors, rowMoveReason } = useRowContext();\n    const hasValidationErrorsInRow = !!validationErrors;\n\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const controlRef = React.useRef<HTMLElement>(null);\n    const disableTruncation = cell.column.columnDef.meta?.disableTruncation;\n    const cellClassName = cell.column.columnDef.meta?.className;\n\n    const isActiveRow = meta.activeRowIndex === rowIndex;\n    const isHoveredRow = meta.hoveredRowIndex === rowIndex;\n    const isPinned = !!cell.column.getIsPinned();\n    const isDragging = meta.dragging[cell.row.id];\n    const isSelected = cell.row.getIsSelected();\n    const isDataColumn = !isInternalColumn(cell.column.id);\n    const hasCellControl = !!cell.column.columnDef.meta?.control;\n    const allVisibleColumns = table.getVisibleLeafColumns();\n    const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;\n\n    // editing\n    const isEditingThisRow = meta.editMode.isEditing && isActiveRow;\n    const canEditThisCell = isEditingThisRow && isDataColumn;\n    const isEditingThisCell = canEditThisCell && meta.editMode.columnIndex === index;\n    const isHoveringThisRowWhileEditing = meta.editMode.isEditing && isHoveredRow;\n\n    const isIndicatorVisible = Object.keys(rowMoveReason).length > 0;\n\n    React.useEffect(() => {\n        // Adds padding to the table so that indicator doesn't get cropped\n        if (isIndicatorVisible && isLastRow) {\n            tableRef.current?.classList.add('pb-4');\n        }\n\n        return () => tableRef.current?.classList.remove('pb-4');\n    }, [isIndicatorVisible, isLastRow]);\n\n    const className = cn(\n        {\n            'border-b': !isLastRow,\n            'sticky z-[1]': isPinned,\n            // use isHoveredRow rather than css group-hover/row because we want to hide hover state when keyboard navigating\n            'bg-white': !isActiveRow && !isSelected && !isHoveredRow,\n            'bg-grey-100': !isActiveRow && !isSelected && isHoveredRow,\n            'bg-grey-200 group-hover/row:bg-grey-200': isActiveRow && !isSelected,\n            'bg-blue-100': isSelected,\n            '!wcag-blue-500': isDragging,\n            '[&>*]:!grayscale [&_.bg-white]:!bg-grey-100': !isEditingThisRow && isHoveringThisRowWhileEditing,\n            '!bg-red-100': hasValidationErrorsInRow,\n            'z-[1]': isPinned && isActiveRow,\n            // First column should have higher z-index so that row indicator always show on top of the cell\n            // control components.\n            'z-[2]': isPinned && isActiveRow && index === 0,\n            'border-blue !border-y-2 border-x-0': isIndicatorVisible,\n            'border-l-2 rounded-l': isIndicatorVisible && index === 0,\n            'border-r-2 rounded-r': isIndicatorVisible && index === lastColumnIndex,\n        },\n        getCellSizingClasses(\n            table.options.meta?.rowDensity,\n            (isEditingThisRow || isHoveringThisRowWhileEditing) && hasCellControl\n        ),\n        typeof cellClassName === 'function' ? cellClassName(cell.row) : cellClassName\n    );\n\n    const handleMouseDown = (event: React.MouseEvent<HTMLElement>) => {\n        // only detect left clicks\n        if (event.button === 0) {\n            const activeElement = document.activeElement;\n            const isActiveElementControl = activeElement?.closest('[role=\"cell\"]');\n            const hasActiveRowChanged = meta.activeRowIndex !== rowIndex;\n\n            // When user clicks on a cell that is not in the active row, for some reason blur event is not called on the cell\n            // previous cell control element so we need to manually call it in order to save the changes in that cell\n            if (isActiveElementControl && hasActiveRowChanged) {\n                (activeElement as HTMLElement).blur();\n            }\n\n            meta.setActiveRowIndex(rowIndex);\n\n            if (meta.editMode.isEditing) {\n                if (allFocussableColumnIndexes.includes(index)) {\n                    meta.editMode.setColumn(index);\n                } else {\n                    meta.editMode.setColumn(allFocussableColumnIndexes[0]);\n                }\n            }\n        }\n    };\n\n    const attributes = {\n        ...columnProps,\n        // base props,\n        column: cell.column,\n        table,\n        // dom attributes\n        className,\n        'data-column-index': index,\n        'data-row-index': rowIndex,\n        onMouseDown: handleMouseDown,\n        ref: internalRef,\n        role: 'cell',\n    };\n\n    const [detailModeEditing, setDetailModeEditing] = React.useState(false);\n\n    const detailModeClassName = cn({\n        '!shadow-[0_0_0_4px_rgba(0,99,255,0.25)]': detailModeEditing,\n    });\n\n    // reset the editing state when we move column\n    React.useEffect(() => {\n        if (meta.editMode.columnIndex !== index) {\n            setDetailModeEditing(false);\n        }\n    }, [meta.editMode.columnIndex]);\n\n    React.useEffect(() => {\n        if (isEditingThisRow && controlRef.current && isKeyboardFocusableElement(controlRef.current)) {\n            addFocussableColumnIndex(index);\n        }\n    }, [isEditingThisRow, allFocussableColumnIndexes, addFocussableColumnIndex, index]);\n\n    const moveRow = (moveDirection: MOVE_DIR) => {\n        if (moveDirection === MOVE_DIR.PREV) {\n            meta.moveToPreviousRow(rows, nextIndex => scrollToIndex(nextIndex - 1));\n        } else if (moveDirection === MOVE_DIR.NEXT) {\n            meta.moveToNextRow(rows, nextIndex => scrollToIndex(nextIndex + 2));\n        }\n    };\n\n    if (meta.editMode.onSave && hasCellControl && (canEditThisCell || (isHoveringThisRowWhileEditing && isDataColumn))) {\n        attributes.onMouseDown = event => {\n            handleMouseDown(event);\n\n            const target = event.target;\n            const isTargetInput = target !== null && (target as HTMLElement).nodeName === 'INPUT';\n\n            // event.target?.select is only truthy for input elements\n            // if event.target is active element, then that means we should select the text\n            if (isTargetInput && target !== document.activeElement) {\n                event.preventDefault();\n\n                setTimeout(() => {\n                    (target as HTMLInputElement).select();\n                }, 1);\n            } else if (isTargetInput && target === document.activeElement) {\n                // if user left clicks on the input then we are into edit mode\n                // only detect left clicks\n                if (event.button === 0) {\n                    setDetailModeEditing(true);\n                }\n            }\n        };\n\n        if (canEditThisCell) {\n            const firstDataColumnIndex = allFocussableColumnIndexes.at(0) ?? 0;\n            const lastDataColumnIndex = allFocussableColumnIndexes.at(-1) ?? 0;\n\n            attributes.onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n                const control = event.target as HTMLElement;\n                const isControlInput =\n                    control.nodeName === 'INPUT' && control?.getAttribute('data-inline-editing-component') === 'true';\n\n                // For some reason, Taco Input keyboard event always return true when \"event.isDefaultPrevented()\" is\n                // called. So we need to check if the control is input or not so that we don't return early.\n                if (!isControlInput && (event.isDefaultPrevented() || event.isPropagationStopped())) {\n                    return;\n                }\n\n                if (control.tagName === 'INPUT') {\n                    if (event.key === 'Enter') {\n                        event.preventDefault();\n                        const input = control as HTMLInputElement;\n\n                        if (!detailModeEditing) {\n                            input.setSelectionRange?.(input.value?.length, input.value?.length);\n                            setDetailModeEditing(true);\n                        }\n\n                        return;\n                    }\n                }\n\n                // Don't exit edit mode if the target of the escape isn't a child of the cell (e.g. if its a popover).\n                if (event.key === 'Escape' && event.currentTarget.contains(control)) {\n                    event.preventDefault();\n                    const input = control as HTMLInputElement;\n\n                    if (detailModeEditing) {\n                        input?.select?.();\n                        setDetailModeEditing(false);\n                    } else {\n                        meta.editMode.toggleEditing(false);\n                        tableRef.current?.focus();\n                    }\n\n                    return;\n                }\n\n                if ((!detailModeEditing && event.key === 'ArrowLeft') || (event.key === 'Tab' && event.shiftKey)) {\n                    event.preventDefault();\n\n                    const isFirstRow = rowIndex === 0;\n                    const isFirstColumn = index === firstDataColumnIndex;\n\n                    if (event.ctrlKey || event.metaKey) {\n                        // If the current active column is the first column then we don't do any thing so that focus\n                        // remains on the first column.\n                        if (!isFirstColumn) {\n                            control.blur();\n                            meta.editMode.moveToFirstColumn(allFocussableColumnIndexes);\n                        }\n                    } else {\n                        // If it is first row and first column, then don't move column.\n                        if (!isFirstRow || !isFirstColumn) {\n                            control.blur();\n                            meta.editMode.moveToPreviousColumn(allFocussableColumnIndexes, moveRow);\n                        }\n                    }\n\n                    return;\n                }\n\n                if ((!detailModeEditing && event.key === 'ArrowRight') || (event.key === 'Tab' && !event.shiftKey)) {\n                    event.preventDefault();\n\n                    const isLastColumn = index === lastDataColumnIndex;\n\n                    if (event.ctrlKey || event.metaKey) {\n                        // If the current active column is the last column then we don't do any thing so that focus\n                        // remains on the last column.\n                        if (!isLastColumn) {\n                            control.blur();\n                            meta.editMode.moveToLastColumn(allFocussableColumnIndexes);\n                        }\n                    } else {\n                        // If it is last row and last column, then don't move column.\n                        if (!isLastRow || !isLastColumn) {\n                            control.blur();\n                            meta.editMode.moveToNextColumn(allFocussableColumnIndexes, moveRow);\n                        }\n                    }\n\n                    return;\n                }\n\n                if (!detailModeEditing && event.key === 'ArrowUp') {\n                    event.preventDefault();\n\n                    // if it is the first row then return early, so that focus on the cell is not lost\n                    if (rowIndex === 0) {\n                        return;\n                    }\n\n                    control.blur();\n\n                    if (event.ctrlKey || event.metaKey) {\n                        meta.setActiveRowIndex(0);\n\n                        scrollToOffset(0);\n                    } else {\n                        moveRow(MOVE_DIR.PREV);\n                    }\n\n                    meta.setHoveredRowIndex(undefined);\n                    return;\n                }\n\n                if (!detailModeEditing && event.key === 'ArrowDown') {\n                    event.preventDefault();\n\n                    // if it is the last row then return early, so that focus on the cell is not lost\n                    if (rowIndex === rows.length - 1) {\n                        return;\n                    }\n\n                    control.blur();\n\n                    if (event.ctrlKey || event.metaKey) {\n                        meta.setActiveRowIndex(rows.length - 1);\n                        scrollToIndex(rows.length + 20);\n                    } else {\n                        moveRow(MOVE_DIR.NEXT);\n                    }\n\n                    meta.setHoveredRowIndex(undefined);\n                    return;\n                }\n            };\n        }\n\n        return (\n            <ColumnBase {...attributes}>\n                <EditingCell\n                    detailModeClassName={detailModeClassName}\n                    cell={cell}\n                    cellRef={internalRef}\n                    columnIndex={index}\n                    isEditingThisCell={isEditingThisCell}\n                    onSave={meta.editMode.onSave}\n                    rowIndex={rowIndex}\n                    table={table}\n                    ref={controlRef}\n                    rowValues={rows[rowIndex].original}\n                    rowsLength={rows.length}\n                />\n            </ColumnBase>\n        );\n    } else {\n        if (meta.onRowClick) {\n            attributes.onClick = () => {\n                meta.onRowClick?.(cell.row.original);\n            };\n        }\n    }\n\n    return (\n        <ColumnBase {...attributes}>\n            <div className={disableTruncation ? '-my-[0.45rem]' : 'truncate'}>\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n            </div>\n        </ColumnBase>\n    );\n};\n\ntype EditingCellProps = {\n    cell: RTCell<any, unknown>;\n    cellRef: React.RefObject<HTMLDivElement>;\n    columnIndex: number;\n    isEditingThisCell: boolean;\n    onSave: SaveHandler<any>;\n    rowIndex: number;\n    table: RTTable<any>;\n    rowValues: Record<string, any>;\n    rowsLength: number;\n    detailModeClassName?: string;\n};\n\nconst EditingCell = React.memo(\n    React.forwardRef<HTMLElement, EditingCellProps>((props, ref) => {\n        const {\n            cell,\n            cellRef,\n            columnIndex,\n            detailModeClassName,\n            isEditingThisCell = false,\n            onSave: handleSave,\n            rowIndex,\n            rowValues,\n            table,\n        } = props;\n        const { validationErrors, setValidationErrors, rowMoveReason, setRowMoveReason } = useRowContext();\n\n        const controlRef = useMergedRef(ref);\n        const cellId = cell.column.id;\n        const cellValidationError = validationErrors?.[cellId];\n\n        const value = cell.getValue();\n        const ariaLabel = cell.column.columnDef.header as string | undefined;\n        const meta = table.options.meta as TableMeta<any>;\n        const { globalFilter } = table.getState();\n\n        const [state, setState] = React.useState(value);\n\n        const isHoveringAnotherRowWhileEditing =\n            meta.editMode.isEditing && meta.activeRowIndex !== rowIndex && meta.hoveredRowIndex === rowIndex;\n        const showValidationError = !isHoveringAnotherRowWhileEditing && !!cellValidationError;\n        // On each save, the initialValue will be set to the new value of the cell\n        const initialValue = React.useRef<any>(value);\n\n        // It is important that we let consumers pass a newValue as an argument because when setState is called before\n        // onBlur then saveIfChanged method gets the stale state value. This happens because the rerender hasn't happened\n        // before the saveIfChanged method is called.\n        const saveIfChanged = async (eventOrNewValue?: any) => {\n            let newValue = state;\n\n            // if eventOrNewValue is not an event object\n            if (!eventOrNewValue.target) {\n                newValue = eventOrNewValue;\n            }\n\n            if (hasChanged(value, newValue)) {\n                try {\n                    const updatedRow = { ...cell.row.original, [cellId]: newValue };\n\n                    await handleSave(updatedRow, cellId);\n\n                    // If sorting is paused then update the last sorted or filtered rows to store the newly updated row\n                    if (meta.shouldPauseSortingAndFiltering) {\n                        meta.lastSortedOrFilteredRows.current = meta.lastSortedOrFilteredRows.current.map(row => {\n                            if (row.id === cell.row.id) {\n                                row.original = updatedRow;\n                            }\n\n                            return row;\n                        });\n                    }\n\n                    // Reset error if save was successful\n                    setValidationErrors(null);\n                } catch (error) {\n                    setValidationErrors(error as SaveHandlerErrorResponse);\n                }\n            }\n        };\n\n        // Ensures we \"auto focus\" the field if the cell is being edited.\n        React.useEffect(() => {\n            const isFocusInsideTable = meta.tableRef.current?.contains(document.activeElement);\n            // When control is blurred then body gets the focus that's why we have to make sure if activeElement\n            // is body then we focus the cell if it is being edited.\n            const isBodyFocussed = document.body === document.activeElement;\n\n            // Don't focus cell if any table popup(filter popup, column settings popup) is open.\n            if (isEditingThisCell && (isFocusInsideTable || isBodyFocussed)) {\n                (controlRef.current as HTMLElement)?.focus?.();\n            }\n        }, [isEditingThisCell, controlRef.current]);\n\n        // make sure the cell becomes active if the field is focused\n        const handleFocus = event => {\n            meta.editMode.setColumn(columnIndex);\n\n            if (event.target?.select) {\n                event.target?.select();\n            }\n        };\n\n        React.useEffect(() => {\n            if (hasChanged(initialValue.current, state)) {\n                showIndicator();\n            } else {\n                hideIndicator();\n            }\n\n            return hideIndicator;\n        }, [state]);\n\n        const showIndicator = () => {\n            let willRowMoveReason: IndicatorReason | null = null;\n\n            const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cellId]: state }).some(cellValue =>\n                // Global filter can be undefined when there is no text being searched so we pass an empty string to\n                // globalFilterFn as query in that case.\n                globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : '')\n            );\n\n            if (!isFilteredByGlobalFilter) {\n                willRowMoveReason = IndicatorReason.SEARCH;\n            } else if (cell.column.getIsFiltered() && !columnFilterFn(state, cell.column.getFilterValue() as Table2Filter)) {\n                willRowMoveReason = IndicatorReason.FILTER;\n            } else if (\n                !willRowMoveReason &&\n                cell.column.getIsSorted() &&\n                willRowMoveAfterSorting(\n                    state,\n                    cell,\n                    rowIndex,\n                    table.getRowModel().rows,\n                    !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n                )\n            ) {\n                willRowMoveReason = IndicatorReason.SORTING;\n            }\n\n            if (willRowMoveReason !== null) {\n                meta.setShouldPauseSortingAndFiltering(true);\n                setRowMoveReason({ [cellId]: willRowMoveReason });\n            }\n        };\n\n        const hideIndicator = () => {\n            setRowMoveReason(prevState => {\n                const newState = { ...prevState };\n                delete newState[cellId];\n\n                return newState;\n            });\n        };\n\n        const cellControl = cell.column.columnDef.meta?.control;\n\n        const attributes = {\n            'aria-label': ariaLabel,\n            onBlur: saveIfChanged,\n            onFocus: handleFocus,\n            ref,\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        };\n\n        const className = cn(getCellAlignmentClasses(cell.column.columnDef.meta?.align));\n        const indicatorMountNode = cellRef.current?.parentElement?.querySelector(':first-child') as Element | null;\n\n        let controlComponent;\n\n        if (cellControl) {\n            if (typeof cellControl === 'function') {\n                controlComponent = cellControl(\n                    {\n                        onBlur: saveIfChanged,\n                        onFocus: handleFocus,\n                        ref: controlRef,\n                        setValue: setState,\n                        value: state,\n                        'data-inline-editing-component': 'true',\n                        className: detailModeClassName,\n                    },\n                    cell.row.original\n                );\n            } else {\n                switch (cellControl) {\n                    case 'datepicker':\n                        controlComponent = (\n                            <Datepicker\n                                {...attributes}\n                                className={detailModeClassName}\n                                onBlur={event => {\n                                    const newDate = (event as any).detail;\n                                    saveIfChanged(newDate);\n                                }}\n                                onChange={event => {\n                                    setState((event as any).detail);\n                                }}\n                                ref={controlRef as RefObject<HTMLInputElement>}\n                                value={state as Date}\n                            />\n                        );\n                        break;\n\n                    case 'switch':\n                        controlComponent = (\n                            <Switch\n                                {...attributes}\n                                className={cn('mx-2', detailModeClassName)}\n                                checked={Boolean(state)}\n                                onChange={setState}\n                                ref={controlRef as RefObject<HTMLButtonElement>}\n                            />\n                        );\n                        break;\n                    default:\n                        controlComponent = (\n                            <Input\n                                {...attributes}\n                                className={cn(className, detailModeClassName)}\n                                onChange={event => {\n                                    setState(event.target.value);\n                                }}\n                                ref={controlRef as RefObject<HTMLInputElement>}\n                                value={String(state ?? '')}\n                            />\n                        );\n                        break;\n                }\n            }\n        }\n\n        const indicatorReason = rowMoveReason[cellId] ?? null;\n\n        return (\n            <>\n                {indicatorReason !== null && (\n                    <Indicator\n                        reason={indicatorReason}\n                        columnName={String(cell.column.columnDef.header)}\n                        mountNode={indicatorMountNode}\n                    />\n                )}\n                <span className=\"relative flex-grow\">\n                    {controlComponent}\n                    {showValidationError && <ValidationError>{String(cellValidationError)}</ValidationError>}\n                </span>\n            </>\n        );\n    })\n);\n"],"names":["Cell","props","cell","index","isLastRow","rowIndex","rows","scrollToIndex","scrollToOffset","table","tableRef","columnProps","meta","options","addFocussableColumnIndex","focussableColumnIndexes","allFocussableColumnIndexes","validationErrors","rowMoveReason","useRowContext","hasValidationErrorsInRow","internalRef","React","useRef","controlRef","disableTruncation","column","columnDef","cellClassName","className","isActiveRow","activeRowIndex","isHoveredRow","hoveredRowIndex","isPinned","getIsPinned","isDragging","dragging","row","id","isSelected","getIsSelected","isDataColumn","isInternalColumn","hasCellControl","control","allVisibleColumns","getVisibleLeafColumns","lastColumnIndex","length","isEditingThisRow","editMode","isEditing","canEditThisCell","isEditingThisCell","columnIndex","isHoveringThisRowWhileEditing","isIndicatorVisible","Object","keys","useEffect","current","classList","add","remove","cn","getCellSizingClasses","rowDensity","handleMouseDown","event","button","activeElement","document","isActiveElementControl","closest","hasActiveRowChanged","blur","setActiveRowIndex","includes","setColumn","attributes","onMouseDown","ref","role","detailModeEditing","setDetailModeEditing","useState","detailModeClassName","isKeyboardFocusableElement","moveRow","moveDirection","MOVE_DIR","PREV","moveToPreviousRow","nextIndex","NEXT","moveToNextRow","onSave","target","isTargetInput","nodeName","preventDefault","setTimeout","select","firstDataColumnIndex","at","lastDataColumnIndex","onKeyDown","isControlInput","getAttribute","isDefaultPrevented","isPropagationStopped","tagName","key","input","setSelectionRange","value","currentTarget","contains","toggleEditing","focus","shiftKey","isFirstRow","isFirstColumn","ctrlKey","metaKey","moveToFirstColumn","moveToPreviousColumn","isLastColumn","moveToLastColumn","moveToNextColumn","setHoveredRowIndex","undefined","ColumnBase","EditingCell","cellRef","rowValues","original","rowsLength","onRowClick","onClick","flexRender","getContext","memo","forwardRef","handleSave","setValidationErrors","setRowMoveReason","useMergedRef","cellId","cellValidationError","getValue","ariaLabel","header","globalFilter","getState","state","setState","isHoveringAnotherRowWhileEditing","showValidationError","initialValue","saveIfChanged","eventOrNewValue","newValue","hasChanged","updatedRow","shouldPauseSortingAndFiltering","lastSortedOrFilteredRows","map","error","isFocusInsideTable","isBodyFocussed","body","handleFocus","showIndicator","hideIndicator","willRowMoveReason","isFilteredByGlobalFilter","values","some","cellValue","globalFilterFn","String","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","getRowModel","sorting","find","s","desc","SORTING","setShouldPauseSortingAndFiltering","prevState","newState","cellControl","onBlur","onFocus","getCellAlignmentClasses","align","indicatorMountNode","parentElement","querySelector","controlComponent","setValue","Datepicker","newDate","detail","onChange","Switch","checked","Boolean","Input","indicatorReason","Indicator","reason","columnName","mountNode","ValidationError"],"mappings":"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"}

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

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { ColumnBase } from './Base.js';
+
+const Footer = function Footer(props) {
+  const {
+    footer,
+    index,
+    table,
+    ...columnProps
+  } = props;
+  const isPinned = !!footer.column.getIsPinned();
+  const className = cn('group/header sticky bottom-0 bg-white border-t-2 relative ', {
+    'z-[1]': isPinned
+  }, props.className);
+  return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, columnProps, {
+    // base props
+    column: footer.column,
+    table: table,
+    className: className,
+    role: "cell",
+    "data-column-index": index
+  }));
+};
+
+export { Footer };
+//# sourceMappingURL=Footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../../../../../../../src/components/Table2/components/column/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Header as RTHeader } from '@tanstack/react-table';\nimport { ColumnBase, ColumnBaseProps } from './Base';\n\ntype FooterProps<TType = unknown> = Omit<ColumnBaseProps<TType>, 'column' | 'isEditing'> & {\n    footer: RTHeader<TType, unknown>;\n    index: number;\n};\n\nexport const Footer = function Footer<TType = unknown>(props: FooterProps<TType>) {\n    const { footer, index, table, ...columnProps } = props;\n    const isPinned = !!footer.column.getIsPinned();\n\n    const className = cn(\n        'group/header sticky bottom-0 bg-white border-t-2 relative ',\n        {\n            'z-[1]': isPinned, // pinned headers should show above cells and other headers, so we add z-index\n        },\n        props.className\n    );\n\n    return (\n        <ColumnBase\n            {...columnProps}\n            // base props\n            column={footer.column}\n            table={table}\n            className={className}\n            role=\"cell\"\n            // helper props\n            data-column-index={index}\n        />\n    );\n};\n"],"names":["Footer","props","footer","index","table","columnProps","isPinned","column","getIsPinned","className","cn","React","ColumnBase","role"],"mappings":";;;;MAUaA,MAAM,GAAG,SAASA,MAAM,CAAkBC,KAAyB;EAC5E,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC,KAAK;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACtD,MAAMK,QAAQ,GAAG,CAAC,CAACJ,MAAM,CAACK,MAAM,CAACC,WAAW,EAAE;EAE9C,MAAMC,SAAS,GAAGC,EAAE,CAChB,4DAA4D,EAC5D;IACI,OAAO,EAAEJ;GACZ,EACDL,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIE,6BAACC,UAAU,oBACHP,WAAW;;IAEfE,MAAM,EAAEL,MAAM,CAACK,MAAM;IACrBH,KAAK,EAAEA,KAAK;IACZK,SAAS,EAAEA,SAAS;IACpBI,IAAI,EAAC,MAAM;yBAEQV;KACrB;AAEV;;;;"}

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

@@ -0,0 +1,159 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../../Icon/Icon.js';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
+import { IconButton } from '../../../IconButton/IconButton.js';
+import { isOverflowing } from '../../../../utils/dom.js';
+import { flexRender } from '@tanstack/react-table';
+import { isInternalColumn, MIN_COLUMN_SIZE } from '../../utilities/columns.js';
+import { getCellSizingClasses, getCellAlignmentClasses } from '../../utilities/cell.js';
+import { ColumnBase } from './Base.js';
+
+const Header = function Header(props) {
+  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8;
+  const {
+    header,
+    index,
+    isLastColumn,
+    table,
+    tableRef,
+    ...columnProps
+  } = props;
+  const textRef = React__default.useRef(null);
+  const pinned = !!header.column.getIsPinned();
+  const isOtherColumnBeingResized = table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;
+  const className = cn('group/header sticky top-0 bg-white border-b-2 relative font-bold z-[5] hover:z-[6]', {
+    'z-[6]': header.column.getIsResizing(),
+    'z-[7]': pinned,
+    'cursor-pointer select-none': header.column.getCanSort(),
+    'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.menu),
+    'pointer-events-none': isOtherColumnBeingResized
+  }, getCellSizingClasses('normal'), (_header$column$column2 = header.column.columnDef.meta) === null || _header$column$column2 === void 0 ? void 0 : _header$column$column2.headerClassName, props.className);
+  // set the column size after the first render (after auto layout with 'max-content') has run
+  // this way columns default to fit their content, then we save that size for resizing
+  const refCallback = node => {
+    if (node && !table.getState().columnSizing[header.id]) {
+      const size = Math.ceil(node.getBoundingClientRect().width);
+      table.setColumnSizing(sizes => ({
+        ...sizes,
+        [header.id]: !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size
+      }));
+    }
+  };
+  // we use mousedown because clicking and dragging resize and then letting go over the
+  // column, results in sorting being applied
+  const handleMouseDown = header.column.getCanSort() ? event => {
+    // only detect left clicks
+    if (event.button === 0) {
+      var _tableRef$current;
+      event.preventDefault();
+      table.resetRowSelection();
+      header.column.toggleSorting();
+      (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+    }
+  } : undefined;
+  const handleResizerDoubleClick = () => {
+    var _header$column$column3;
+    const size = (_header$column$column3 = header.column.columnDef.meta) === null || _header$column$column3 === void 0 ? void 0 : _header$column$column3.defaultWidth;
+    table.setColumnSizing(sizes => {
+      const nextSizes = {
+        ...sizes
+      };
+      if (size) {
+        nextSizes[header.id] = !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
+      } else {
+        delete nextSizes[header.id];
+      }
+      return nextSizes;
+    });
+  };
+  const handleResizerClick = event => {
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  const handleResize = event => {
+    // prevent the parent onMouseDown propagating
+    event.stopPropagation();
+    header.getResizeHandler()(event);
+  };
+  const content = /*#__PURE__*/React__default.createElement("div", {
+    className: "truncate",
+    ref: textRef
+  }, flexRender(header.column.columnDef.header, header.getContext()));
+  return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, columnProps, {
+    // base props
+    column: header.column,
+    table: table,
+    "aria-sort": (_asc$desc$header$colu = {
+      asc: 'ascending',
+      desc: 'descending'
+    }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu !== void 0 ? _asc$desc$header$colu : 'none',
+    className: className,
+    onMouseDown: handleMouseDown,
+    ref: refCallback,
+    role: "columnheader",
+    "data-column-index": index
+  }), isInternalColumn(header.id) ? flexRender(header.column.columnDef.header, header.getContext()) : /*#__PURE__*/React__default.createElement("div", {
+    className: cn('flex flex-grow overflow-hidden', {
+      'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!((_header$column$column4 = header.column.columnDef.meta) !== null && _header$column$column4 !== void 0 && _header$column$column4.menu)
+    }, getCellAlignmentClasses((_header$column$column5 = header.column.columnDef.meta) === null || _header$column$column5 === void 0 ? void 0 : _header$column$column5.align))
+  }, isOverflowing(textRef.current) ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: (_header$column$column6 = (_header$column$column7 = header.column.columnDef.meta) === null || _header$column$column7 === void 0 ? void 0 : _header$column$column7.tooltip) !== null && _header$column$column6 !== void 0 ? _header$column$column6 : content,
+    placement: "top"
+  }, content) : content, (_asc$desc$header$colu2 = {
+    asc: /*#__PURE__*/React__default.createElement(Icon, {
+      name: "chevron-up-solid",
+      className: "pointer-events-none -my-0.5"
+    }),
+    desc: /*#__PURE__*/React__default.createElement(Icon, {
+      name: "chevron-down-solid",
+      className: "pointer-events-none -my-0.5"
+    })
+  }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu2 !== void 0 ? _asc$desc$header$colu2 : null), (_header$column$column8 = header.column.columnDef.meta) !== null && _header$column$column8 !== void 0 && _header$column$column8.menu ? /*#__PURE__*/React__default.createElement(HeaderMenu, {
+    header: header
+  }) : null, header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    placement: "top",
+    title: "Resize column"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('invisible absolute right-0 top-0 flex h-full cursor-col-resize touch-none select-none rounded py-0.5 group-hover/header:visible', {
+      '-mr-2.5 w-5 justify-center': !isLastColumn,
+      'w-2': isLastColumn,
+      '!visible': header.column.getIsResizing()
+    }),
+    onDoubleClick: handleResizerDoubleClick,
+    onMouseDown: handleResize,
+    onTouchStart: handleResize,
+    // this prevents sort handlers being activated
+    onClick: handleResizerClick
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('h-full w-1 rounded', {
+      '!bg-blue-500': header.column.getIsResizing(),
+      'bg-grey-500 hover:bg-grey-700': !header.column.getIsResizing()
+    })
+  }))) : null);
+};
+const HeaderMenu = ({
+  header
+}) => {
+  const [open, setOpen] = React__default.useState(false);
+  const className = cn('-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex', {
+    '!flex': open
+  });
+  return header.column.columnDef.meta ?
+  /*#__PURE__*/
+  // This div catches the mousedown events from menu item and menu trigger and prevents
+  // mousedown event from bubbling up to the Header component to prevent toggling sorting
+  React__default.createElement("div", {
+    onMouseDown: event => event.stopPropagation()
+  }, header.column.columnDef.meta.menu({
+    trigger: /*#__PURE__*/React__default.createElement(IconButton, {
+      className: className,
+      icon: "more"
+    }),
+    open: open,
+    onChange: setOpen
+  })) : null;
+};
+
+export { Header };
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../../../../../src/components/Table2/components/column/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, Header as RTHeader } from '@tanstack/react-table';\nimport { Icon } from '../../../Icon/Icon';\nimport { ColumnBase, ColumnBaseProps } from './Base';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { isInternalColumn, MIN_COLUMN_SIZE } from '../../utilities/columns';\nimport { isOverflowing } from '../../../../utils/dom';\nimport { getCellAlignmentClasses, getCellSizingClasses } from '../../utilities/cell';\nimport { IconButton } from '../../../IconButton/IconButton';\n\ntype HeaderProps<TType = unknown> = Omit<ColumnBaseProps<TType>, 'column' | 'isEditing'> & {\n    header: RTHeader<TType, unknown>;\n    index: number;\n    isLastColumn: boolean;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport const Header = function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { header, index, isLastColumn, table, tableRef, ...columnProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n    const pinned = !!header.column.getIsPinned();\n    const isOtherColumnBeingResized =\n        table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;\n\n    const className = cn(\n        'group/header sticky top-0 bg-white border-b-2 relative font-bold z-[5] hover:z-[6]',\n        {\n            'z-[6]': header.column.getIsResizing(),\n            'z-[7]': pinned, // pinned headers should show above cells and other headers, so we assign a higher z-index\n            'cursor-pointer select-none': header.column.getCanSort(),\n            'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || header.column.columnDef.meta?.menu,\n            'pointer-events-none': isOtherColumnBeingResized,\n        },\n        getCellSizingClasses('normal'),\n        header.column.columnDef.meta?.headerClassName,\n        props.className\n    );\n\n    // set the column size after the first render (after auto layout with 'max-content') has run\n    // this way columns default to fit their content, then we save that size for resizing\n    const refCallback = (node: HTMLDivElement) => {\n        if (node && !table.getState().columnSizing[header.id]) {\n            const size = Math.ceil(node.getBoundingClientRect().width);\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [header.id]: !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size,\n            }));\n        }\n    };\n\n    // we use mousedown because clicking and dragging resize and then letting go over the\n    // column, results in sorting being applied\n    const handleMouseDown = header.column.getCanSort()\n        ? (event: React.MouseEvent) => {\n              // only detect left clicks\n              if (event.button === 0) {\n                  event.preventDefault();\n                  table.resetRowSelection();\n                  header.column.toggleSorting();\n                  tableRef.current?.focus();\n              }\n          }\n        : undefined;\n\n    const handleResizerDoubleClick = () => {\n        const size = header.column.columnDef.meta?.defaultWidth;\n        table.setColumnSizing(sizes => {\n            const nextSizes = { ...sizes };\n\n            if (size) {\n                nextSizes[header.id] = !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;\n            } else {\n                delete nextSizes[header.id];\n            }\n\n            return nextSizes;\n        });\n    };\n\n    const handleResizerClick = event => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const handleResize = event => {\n        // prevent the parent onMouseDown propagating\n        event.stopPropagation();\n        header.getResizeHandler()(event);\n    };\n\n    const content = (\n        <div className=\"truncate\" ref={textRef}>\n            {flexRender(header.column.columnDef.header, header.getContext())}\n        </div>\n    );\n\n    return (\n        <ColumnBase\n            {...columnProps}\n            // base props\n            column={header.column}\n            table={table}\n            // other props\n            aria-sort={\n                {\n                    asc: 'ascending',\n                    desc: 'descending',\n                }[header.column.getIsSorted() as any] ?? 'none'\n            }\n            className={className}\n            onMouseDown={handleMouseDown}\n            ref={refCallback}\n            role=\"columnheader\"\n            // helper props\n            data-column-index={index}>\n            {isInternalColumn(header.id) ? (\n                flexRender(header.column.columnDef.header, header.getContext())\n            ) : (\n                <div\n                    className={cn(\n                        'flex flex-grow overflow-hidden',\n                        {\n                            'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!header.column.columnDef.meta?.menu,\n                        },\n                        getCellAlignmentClasses(header.column.columnDef.meta?.align)\n                    )}>\n                    {isOverflowing(textRef.current) ? (\n                        <Tooltip title={header.column.columnDef.meta?.tooltip ?? content} placement=\"top\">\n                            {content}\n                        </Tooltip>\n                    ) : (\n                        content\n                    )}\n                    {{\n                        asc: <Icon name=\"chevron-up-solid\" className=\"pointer-events-none -my-0.5\" />,\n                        desc: <Icon name=\"chevron-down-solid\" className=\"pointer-events-none -my-0.5\" />,\n                    }[header.column.getIsSorted() as string] ?? null}\n                </div>\n            )}\n            {header.column.columnDef.meta?.menu ? <HeaderMenu header={header} /> : null}\n            {header.column.getCanResize() ? (\n                <Tooltip placement=\"top\" title=\"Resize column\">\n                    <div\n                        className={cn(\n                            'invisible absolute right-0 top-0 flex h-full cursor-col-resize touch-none select-none rounded py-0.5 group-hover/header:visible',\n                            {\n                                '-mr-2.5 w-5 justify-center': !isLastColumn,\n                                'w-2': isLastColumn,\n                                '!visible': header.column.getIsResizing(),\n                            }\n                        )}\n                        onDoubleClick={handleResizerDoubleClick}\n                        onMouseDown={handleResize}\n                        onTouchStart={handleResize}\n                        // this prevents sort handlers being activated\n                        onClick={handleResizerClick}>\n                        <div\n                            className={cn('h-full w-1 rounded', {\n                                '!bg-blue-500': header.column.getIsResizing(),\n                                'bg-grey-500 hover:bg-grey-700': !header.column.getIsResizing(),\n                            })}\n                        />\n                    </div>\n                </Tooltip>\n            ) : null}\n        </ColumnBase>\n    );\n};\n\nconst HeaderMenu = ({ header }) => {\n    const [open, setOpen] = React.useState(false);\n\n    const className = cn(\n        '-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex',\n        {\n            '!flex': open,\n        }\n    );\n    return header.column.columnDef.meta ? (\n        // This div catches the mousedown events from menu item and menu trigger and prevents\n        // mousedown event from bubbling up to the Header component to prevent toggling sorting\n        <div onMouseDown={event => event.stopPropagation()}>\n            {header.column.columnDef.meta.menu({\n                trigger: <IconButton className={className} icon=\"more\" />,\n                open: open,\n                onChange: setOpen,\n            })}\n        </div>\n    ) : null;\n};\n"],"names":["Header","props","header","index","isLastColumn","table","tableRef","columnProps","textRef","React","useRef","pinned","column","getIsPinned","isOtherColumnBeingResized","getState","columnSizingInfo","isResizingColumn","id","className","cn","getIsResizing","getCanSort","getCanResize","columnDef","meta","menu","getCellSizingClasses","headerClassName","refCallback","node","columnSizing","size","Math","ceil","getBoundingClientRect","width","setColumnSizing","sizes","isInternalColumn","MIN_COLUMN_SIZE","handleMouseDown","event","button","preventDefault","resetRowSelection","toggleSorting","current","focus","undefined","handleResizerDoubleClick","defaultWidth","nextSizes","handleResizerClick","stopPropagation","handleResize","getResizeHandler","content","ref","flexRender","getContext","ColumnBase","asc","desc","getIsSorted","onMouseDown","role","getCellAlignmentClasses","align","isOverflowing","Tooltip","title","tooltip","placement","Icon","name","HeaderMenu","onDoubleClick","onTouchStart","onClick","open","setOpen","useState","trigger","IconButton","icon","onChange"],"mappings":"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"}

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

@@ -0,0 +1,78 @@
+import React__default from 'react';
+import { Icon } from '../../../Icon/Icon.js';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../Provider/Localization.js';
+import { useRowContext } from '../row/Context.js';
+import ReactDOM from 'react-dom';
+
+var IndicatorReason;
+(function (IndicatorReason) {
+  IndicatorReason["SEARCH"] = "SEARCH";
+  IndicatorReason["SORTING"] = "SORTING";
+  IndicatorReason["FILTER"] = "FILTER";
+})(IndicatorReason || (IndicatorReason = {}));
+const useIndicatorText = reason => {
+  let title = '';
+  let description = '';
+  const {
+    texts: {
+      table2: tableTexts
+    }
+  } = useLocalization();
+  switch (reason) {
+    case IndicatorReason.SEARCH:
+      title = tableTexts.rowIndicator.rowWillBeFiltered;
+      description = tableTexts.rowIndicator.searchFilterMovementReason;
+      break;
+    case IndicatorReason.SORTING:
+      title = tableTexts.rowIndicator.rowWillMove;
+      description = tableTexts.rowIndicator.sortingMovementReason;
+      break;
+    case IndicatorReason.FILTER:
+      title = tableTexts.rowIndicator.rowWillBeFiltered;
+      description = tableTexts.rowIndicator.tableFilterMovementReason;
+      break;
+  }
+  return {
+    title,
+    description
+  };
+};
+const Indicator = ({
+  reason,
+  columnName,
+  mountNode
+}) => {
+  const container = React__default.useMemo(() => {
+    const element = document.createElement('div');
+    element.className += '-translate-y-1/2 z-[3] rounded-full items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    return element;
+  }, []);
+  const indicatorText = useIndicatorText(reason);
+  const {
+    validationErrors
+  } = useRowContext();
+  const hasValidationErrorsInRow = !!validationErrors;
+  React__default.useEffect(() => {
+    // mountNode could be null when rows are filtered
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('relative');
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
+    return () => {
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('relative');
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
+    };
+  }, [hasValidationErrorsInRow]);
+  // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
+  // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: indicatorText.description.replace('[COLUMN]', columnName)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex gap-1 hover:cursor-pointer"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "info",
+    className: "!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
+  }), indicatorText.title)), container);
+};
+
+export { Indicator, IndicatorReason, useIndicatorText };
+//# sourceMappingURL=Indicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sources":["../../../../../../../../../src/components/Table2/components/column/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Icon } from '../../../Icon/Icon';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { useRowContext } from '../row/Context';\n\nexport enum IndicatorReason {\n    SEARCH = 'SEARCH',\n    SORTING = 'SORTING',\n    FILTER = 'FILTER',\n}\n\nexport const useIndicatorText = reason => {\n    let title = '';\n    let description = '';\n\n    const {\n        texts: { table2: tableTexts },\n    } = useLocalization();\n\n    switch (reason) {\n        case IndicatorReason.SEARCH:\n            title = tableTexts.rowIndicator.rowWillBeFiltered;\n            description = tableTexts.rowIndicator.searchFilterMovementReason;\n            break;\n        case IndicatorReason.SORTING:\n            title = tableTexts.rowIndicator.rowWillMove;\n            description = tableTexts.rowIndicator.sortingMovementReason;\n            break;\n        case IndicatorReason.FILTER:\n            title = tableTexts.rowIndicator.rowWillBeFiltered;\n            description = tableTexts.rowIndicator.tableFilterMovementReason;\n            break;\n    }\n\n    return { title, description };\n};\n\nexport type IndicatorProps = {\n    reason: IndicatorReason;\n    columnName: string;\n    mountNode: Element | null;\n};\nexport const Indicator = ({ reason, columnName, mountNode }: IndicatorProps) => {\n    const container = React.useMemo(() => {\n        const element = document.createElement('div');\n        element.className +=\n            '-translate-y-1/2 z-[3] rounded-full items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';\n\n        return element;\n    }, []);\n\n    const indicatorText = useIndicatorText(reason);\n\n    const { validationErrors } = useRowContext();\n    const hasValidationErrorsInRow = !!validationErrors;\n\n    React.useEffect(() => {\n        // mountNode could be null when rows are filtered\n        mountNode?.classList.add('relative');\n        mountNode?.appendChild(container);\n\n        return () => {\n            mountNode?.classList.remove('relative');\n            mountNode?.removeChild(container);\n        };\n    }, [hasValidationErrorsInRow]);\n\n    // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring\n    // and being able to use Taco Tooltip component in side the visual indicator, portal is used.\n    return ReactDOM.createPortal(\n        <Tooltip title={indicatorText.description.replace('[COLUMN]', columnName)}>\n            <span className=\"flex gap-1 hover:cursor-pointer\">\n                <Icon name=\"info\" className=\"!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {indicatorText.title}\n            </span>\n        </Tooltip>,\n        container\n    );\n};\n"],"names":["IndicatorReason","useIndicatorText","reason","title","description","texts","table2","tableTexts","useLocalization","SEARCH","rowIndicator","rowWillBeFiltered","searchFilterMovementReason","SORTING","rowWillMove","sortingMovementReason","FILTER","tableFilterMovementReason","Indicator","columnName","mountNode","container","React","useMemo","element","document","createElement","className","indicatorText","validationErrors","useRowContext","hasValidationErrorsInRow","useEffect","classList","add","appendChild","remove","removeChild","ReactDOM","createPortal","Tooltip","replace","Icon","name"],"mappings":";;;;;;;IAQYA;AAAZ,WAAYA,eAAe;EACvBA,oCAAiB;EACjBA,sCAAmB;EACnBA,oCAAiB;AACrB,CAAC,EAJWA,eAAe,KAAfA,eAAe;MAMdC,gBAAgB,GAAGC,MAAM;EAClC,IAAIC,KAAK,GAAG,EAAE;EACd,IAAIC,WAAW,GAAG,EAAE;EAEpB,MAAM;IACFC,KAAK,EAAE;MAAEC,MAAM,EAAEC;;GACpB,GAAGC,eAAe,EAAE;EAErB,QAAQN,MAAM;IACV,KAAKF,eAAe,CAACS,MAAM;MACvBN,KAAK,GAAGI,UAAU,CAACG,YAAY,CAACC,iBAAiB;MACjDP,WAAW,GAAGG,UAAU,CAACG,YAAY,CAACE,0BAA0B;MAChE;IACJ,KAAKZ,eAAe,CAACa,OAAO;MACxBV,KAAK,GAAGI,UAAU,CAACG,YAAY,CAACI,WAAW;MAC3CV,WAAW,GAAGG,UAAU,CAACG,YAAY,CAACK,qBAAqB;MAC3D;IACJ,KAAKf,eAAe,CAACgB,MAAM;MACvBb,KAAK,GAAGI,UAAU,CAACG,YAAY,CAACC,iBAAiB;MACjDP,WAAW,GAAGG,UAAU,CAACG,YAAY,CAACO,yBAAyB;MAC/D;;EAGR,OAAO;IAAEd,KAAK;IAAEC;GAAa;AACjC;MAOac,SAAS,GAAG,CAAC;EAAEhB,MAAM;EAAEiB,UAAU;EAAEC;CAA2B;EACvE,MAAMC,SAAS,GAAGC,cAAK,CAACC,OAAO,CAAC;IAC5B,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC7CF,OAAO,CAACG,SAAS,IACb,wJAAwJ;IAE5J,OAAOH,OAAO;GACjB,EAAE,EAAE,CAAC;EAEN,MAAMI,aAAa,GAAG3B,gBAAgB,CAACC,MAAM,CAAC;EAE9C,MAAM;IAAE2B;GAAkB,GAAGC,aAAa,EAAE;EAC5C,MAAMC,wBAAwB,GAAG,CAAC,CAACF,gBAAgB;EAEnDP,cAAK,CAACU,SAAS,CAAC;;IAEZZ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEa,SAAS,CAACC,GAAG,CAAC,UAAU,CAAC;IACpCd,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEe,WAAW,CAACd,SAAS,CAAC;IAEjC,OAAO;MACHD,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEa,SAAS,CAACG,MAAM,CAAC,UAAU,CAAC;MACvChB,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEiB,WAAW,CAAChB,SAAS,CAAC;KACpC;GACJ,EAAE,CAACU,wBAAwB,CAAC,CAAC;;;EAI9B,oBAAOO,QAAQ,CAACC,YAAY,eACxBjB,6BAACkB,OAAO;IAACrC,KAAK,EAAEyB,aAAa,CAACxB,WAAW,CAACqC,OAAO,CAAC,UAAU,EAAEtB,UAAU;kBACpEG;IAAMK,SAAS,EAAC;kBACZL,6BAACoB,IAAI;IAACC,IAAI,EAAC,MAAM;IAAChB,SAAS,EAAC;IAAuD,EAClFC,aAAa,CAACzB,KAAK,CACjB,CACD,EACVkB,SAAS,CACZ;AACL;;;;"}

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

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
+import { useTruncated } from '../../../../utils/hooks/useTruncated.js';
+
+const ValidationError = ({
+  className,
+  ...props
+}) => {
+  const ref = React__default.useRef(null);
+  const {
+    truncated
+  } = useTruncated(ref.current);
+  const error = /*#__PURE__*/React__default.createElement("span", Object.assign({
+    className: cn('truncate px-px text-xs font-normal leading-normal text-red-500', {
+      'hover:cursor-pointer': truncated
+    }, className),
+    ref: ref,
+    role: "alert"
+  }, props));
+  if (truncated) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: props.children
+    }, error);
+  }
+  return error;
+};
+
+export { ValidationError };
+//# sourceMappingURL=ValidationError.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationError.js","sources":["../../../../../../../../../src/components/Table2/components/column/ValidationError.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useTruncated } from '../../../../utils/hooks/useTruncated';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\n\nexport const ValidationError = ({ className, ...props }: { className?: string; children: string }) => {\n    const ref = React.useRef<HTMLSpanElement>(null);\n    const { truncated } = useTruncated(ref.current);\n\n    const error = (\n        <span\n            className={cn(\n                'truncate px-px text-xs font-normal leading-normal text-red-500',\n                {\n                    'hover:cursor-pointer': truncated,\n                },\n                className\n            )}\n            ref={ref}\n            role=\"alert\"\n            {...props}\n        />\n    );\n\n    if (truncated) {\n        return <Tooltip title={props.children}>{error}</Tooltip>;\n    }\n\n    return error;\n};\n"],"names":["ValidationError","className","props","ref","React","useRef","truncated","useTruncated","current","error","cn","role","Tooltip","title","children"],"mappings":";;;;;MAKaA,eAAe,GAAG,CAAC;EAAEC,SAAS;EAAE,GAAGC;CAAiD;EAC7F,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAkB,IAAI,CAAC;EAC/C,MAAM;IAAEC;GAAW,GAAGC,YAAY,CAACJ,GAAG,CAACK,OAAO,CAAC;EAE/C,MAAMC,KAAK,gBACPL;IACIH,SAAS,EAAES,EAAE,CACT,gEAAgE,EAChE;MACI,sBAAsB,EAAEJ;KAC3B,EACDL,SAAS,CACZ;IACDE,GAAG,EAAEA,GAAG;IACRQ,IAAI,EAAC;KACDT,KAAK,EAEhB;EAED,IAAII,SAAS,EAAE;IACX,oBAAOF,6BAACQ,OAAO;MAACC,KAAK,EAAEX,KAAK,CAACY;OAAWL,KAAK,CAAW;;EAG5D,OAAOA,KAAK;AAChB;;;;"}

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

@@ -0,0 +1,38 @@
+import { isDate } from 'date-fns';
+import { isWeakEqual } from '../../../../utils/date.js';
+
+const hasChanged = (value, newValue) => {
+  if (isDate(value) && isDate(newValue)) {
+    return !isWeakEqual(value, newValue);
+  } else if (Array.isArray(value)) {
+    return JSON.stringify(value) !== JSON.stringify(newValue);
+  }
+  return value !== newValue;
+};
+const willRowMoveAfterSorting = (value, cell, rowIndex, rows, desc) => {
+  const miniSortRows = [{
+    ...cell.row,
+    original: {
+      ...cell.row.original,
+      [cell.column.id]: value
+    }
+  }];
+  // getValue is used by the built-in sort functons, so we need to make sure it returns the changed value
+  miniSortRows[0].getValue = () => value;
+  let index = 0;
+  if (rowIndex > 0) {
+    miniSortRows.unshift(rows[rowIndex - 1]);
+    index = 1;
+  }
+  if (rowIndex < rows.length - 1) {
+    miniSortRows.push(rows[rowIndex + 1]);
+  }
+  let resortedRows = [...miniSortRows].sort((a, b) => cell.column.getSortingFn()(a, b, cell.column.id));
+  if (desc) {
+    resortedRows = resortedRows.reverse();
+  }
+  return resortedRows[index].id !== cell.row.id;
+};
+
+export { hasChanged, willRowMoveAfterSorting };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../../../../src/components/Table2/components/column/utils.ts"],"sourcesContent":["import { isDate } from 'date-fns';\n\nimport { isWeakEqual as isWeakEqualDate } from '../../../../utils/date';\n\nexport const hasChanged = (value, newValue) => {\n    if (isDate(value) && isDate(newValue)) {\n        return !isWeakEqualDate(value, newValue);\n    } else if (Array.isArray(value)) {\n        return JSON.stringify(value) !== JSON.stringify(newValue);\n    }\n\n    return value !== newValue;\n};\n\nexport const willRowMoveAfterSorting = (value, cell, rowIndex, rows, desc): boolean => {\n    const miniSortRows = [{ ...cell.row, original: { ...cell.row.original, [cell.column.id]: value } }];\n    // getValue is used by the built-in sort functons, so we need to make sure it returns the changed value\n    miniSortRows[0].getValue = () => value;\n\n    let index = 0;\n\n    if (rowIndex > 0) {\n        miniSortRows.unshift(rows[rowIndex - 1]);\n        index = 1;\n    }\n\n    if (rowIndex < rows.length - 1) {\n        miniSortRows.push(rows[rowIndex + 1]);\n    }\n\n    let resortedRows = [...miniSortRows].sort((a, b) => cell.column.getSortingFn()(a, b, cell.column.id));\n\n    if (desc) {\n        resortedRows = resortedRows.reverse();\n    }\n\n    return resortedRows[index].id !== cell.row.id;\n};\n"],"names":["hasChanged","value","newValue","isDate","isWeakEqualDate","Array","isArray","JSON","stringify","willRowMoveAfterSorting","cell","rowIndex","rows","desc","miniSortRows","row","original","column","id","getValue","index","unshift","length","push","resortedRows","sort","a","b","getSortingFn","reverse"],"mappings":";;;MAIaA,UAAU,GAAG,CAACC,KAAK,EAAEC,QAAQ;EACtC,IAAIC,MAAM,CAACF,KAAK,CAAC,IAAIE,MAAM,CAACD,QAAQ,CAAC,EAAE;IACnC,OAAO,CAACE,WAAe,CAACH,KAAK,EAAEC,QAAQ,CAAC;GAC3C,MAAM,IAAIG,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC,EAAE;IAC7B,OAAOM,IAAI,CAACC,SAAS,CAACP,KAAK,CAAC,KAAKM,IAAI,CAACC,SAAS,CAACN,QAAQ,CAAC;;EAG7D,OAAOD,KAAK,KAAKC,QAAQ;AAC7B;MAEaO,uBAAuB,GAAG,CAACR,KAAK,EAAES,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,IAAI;EACrE,MAAMC,YAAY,GAAG,CAAC;IAAE,GAAGJ,IAAI,CAACK,GAAG;IAAEC,QAAQ,EAAE;MAAE,GAAGN,IAAI,CAACK,GAAG,CAACC,QAAQ;MAAE,CAACN,IAAI,CAACO,MAAM,CAACC,EAAE,GAAGjB;;GAAS,CAAC;;EAEnGa,YAAY,CAAC,CAAC,CAAC,CAACK,QAAQ,GAAG,MAAMlB,KAAK;EAEtC,IAAImB,KAAK,GAAG,CAAC;EAEb,IAAIT,QAAQ,GAAG,CAAC,EAAE;IACdG,YAAY,CAACO,OAAO,CAACT,IAAI,CAACD,QAAQ,GAAG,CAAC,CAAC,CAAC;IACxCS,KAAK,GAAG,CAAC;;EAGb,IAAIT,QAAQ,GAAGC,IAAI,CAACU,MAAM,GAAG,CAAC,EAAE;IAC5BR,YAAY,CAACS,IAAI,CAACX,IAAI,CAACD,QAAQ,GAAG,CAAC,CAAC,CAAC;;EAGzC,IAAIa,YAAY,GAAG,CAAC,GAAGV,YAAY,CAAC,CAACW,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKjB,IAAI,CAACO,MAAM,CAACW,YAAY,EAAE,CAACF,CAAC,EAAEC,CAAC,EAAEjB,IAAI,CAACO,MAAM,CAACC,EAAE,CAAC,CAAC;EAErG,IAAIL,IAAI,EAAE;IACNW,YAAY,GAAGA,YAAY,CAACK,OAAO,EAAE;;EAGzC,OAAOL,YAAY,CAACJ,KAAK,CAAC,CAACF,EAAE,KAAKR,IAAI,CAACK,GAAG,CAACG,EAAE;AACjD;;;;"}

package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js

@@ -0,0 +1,89 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../../Icon/Icon.js';
+import { Button } from '../../../Button/Button.js';
+import { Popover } from '../../../Popover/Popover.js';
+import { Group } from '../../../Group/Group.js';
+import { Shortcut } from '../../../Shortcut/Shortcut.js';
+import { isInternalColumn } from '../../utilities/columns.js';
+import { ColumnFilter } from './components/ColumnFilter.js';
+import { useGlobalKeyboardShortcut } from '../../../../hooks/useGlobalKeyboardShortcut.js';
+
+const FiltersButton = ({
+  length,
+  table
+}) => {
+  const ref = React__default.useRef(null);
+  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
+  const {
+    shouldDisableTableActions
+  } = table.options.meta;
+  const columnFilters = table.getState().columnFilters;
+  const filteredColumns = columnFilters.reduce((columns, columnFilter) => {
+    const column = allColumns.find(c => c.id === columnFilter.id);
+    if (column) {
+      return [...columns, column];
+    }
+    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 handleReset = () => {
+    table.resetColumnFilters();
+  };
+  useGlobalKeyboardShortcut(event => {
+    if (event.key === 'f' && (event.ctrlKey || event.metaKey) && event.shiftKey) {
+      var _ref$current;
+      event.preventDefault();
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(Button, {
+    appearance: columnFilters.length ? 'primary' : 'default',
+    className: cn({
+      '!wcag-blue-100': columnFilters.length
+    }),
+    disabled: shouldDisableTableActions,
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex w-[40rem] flex-col gap-4"
+    }, /*#__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", {
+      className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
+    }, "Viewing ", table.getFilteredRowModel().rows.length, " of ", length)), /*#__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"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      appearance: "discrete",
+      onClick: handleAdd
+    }, "+ Add filter"), columnFilters.length ? /*#__PURE__*/React__default.createElement(Button, {
+      onClick: handleReset
+    }, "Clear all filters") : null)))),
+    ref: ref,
+    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnFilters.length ? 'Change filters' : 'Apply filters', /*#__PURE__*/React__default.createElement(Shortcut, {
+      className: "ml-2",
+      keys: ['Ctrl', 'Shift', 'F']
+    }))
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: columnFilters.length ? 'filter-solid' : 'filter'
+  }), columnFilters.length ? `Filters (${columnFilters.length})` : 'Filters');
+};
+
+export { FiltersButton };
+//# sourceMappingURL=FiltersButton.js.map