@economic/taco 2.7.4 → 2.8.0

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js

@@ -102,11 +102,9 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
   const className = cn('!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]', {
     relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
-    // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below
-    'z-10': isCurrentRow,
-    // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),
-    // as result we need to set lower z-index for the hovered row -> cell.
-    'z-0': isHovered
+    // Need to set higher z-index, so that the current row textarea (in expanded state, when positioned absolute) overlaps rows below,
+    // but at the same time it should not overlap the table headers which has z-10.
+    'z-[9]': isCurrentRow && controlRenderer === 'textarea'
   },
   // component overrides - grayscale for editing hover
   '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100',

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n    const { isHovered } = useRowContext();\n    // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    return <MemoedEditingCell<TType> {...props} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n    isHovered: boolean;\n    tableMeta: TableMeta<TType>;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const { cell, column, index, getValue, table, tableRef, row, isHovered, tableMeta } = props;\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n    const cellRef = React.useRef<HTMLDivElement>(null);\n    const controlRef = React.useRef<HTMLElement>(null);\n\n    const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n    const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n    const handleFocus = event => {\n        // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n        const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n        const tableElement = tableRef.current;\n\n        if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n            const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n            const cellRect = cellRef.current?.getBoundingClientRect();\n            const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n\n            // Check for pinned columns overlap\n            if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n                const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n                tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n                // Check for editing actions overlap\n            } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n                const spaceBetweenCellAndEditingActions = 10;\n                tableElement.scrollTo(\n                    // Need to take into account if table has been already scrolled.\n                    tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n                    tableElement.scrollTop\n                );\n            }\n        }\n\n        if (event.target?.select) {\n            requestAnimationFrame(() => {\n                event.target.select();\n            });\n        }\n    };\n\n    const handleBlur = () => {\n        tableMeta.editing.setDetailModeEditing(false);\n    };\n\n    // row move indicator\n    const moveReason = tableMeta.editing.rowMoveReason[cell.column.id] ?? null;\n    const rows = table.getRowModel().rows;\n    const isCurrentRow = rows[tableMeta.currentRow.currentRowIndex]?.id === row.id;\n    const mountNode = React.useMemo(() => {\n        if (moveReason) {\n            return cellRef.current?.parentElement?.firstChild as Element | null;\n        }\n        return null;\n    }, [moveReason, cellRef]);\n\n    const removeMoveReason = () => {\n        tableMeta.editing.removeRowMoveReason(cell.column.id);\n    };\n\n    React.useEffect(() => {\n        // To avoid reseting move reason on another row hover,\n        // we need to check for changes only if value got changed in the current row.\n        if (!isCurrentRow) {\n            return;\n        }\n\n        if (hasChanged(getValue(), value)) {\n            const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);\n            tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n        } else {\n            removeMoveReason();\n        }\n        return removeMoveReason;\n    }, [value]);\n\n    const controlRenderer = column.columnDef.meta?.control;\n\n    const className = cn(\n        '!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]',\n        {\n            relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',\n            // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below\n            'z-10': isCurrentRow,\n            // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),\n            // as result we need to set lower z-index for the hovered row -> cell.\n            'z-0': isHovered,\n        },\n\n        // component overrides - grayscale for editing hover\n        '[[role=\"row\"][data-current=\"false\"]:hover_&>*]:!grayscale [[role=\"row\"][data-current=\"false\"]:hover_&_.bg-white]:!bg-grey-100',\n        // we alias to any because className conflicts with the Table2 definition,\n        // when Table2 is gone, remove this as any\n        typeof columnMeta.className === 'function' ? (columnMeta.className as any)(row.original) : columnMeta.className\n    );\n\n    return (\n        <>\n            {moveReason !== null && mountNode && (\n                <Indicator\n                    reason={moveReason}\n                    columnName={String(cell.column.columnDef.header)}\n                    mountNode={mountNode}\n                    validationErrors={[]}\n                />\n            )}\n            <div className={className} data-align={columnMeta.align} data-column-index={index} role=\"cell\" ref={cellRef}>\n                <EditingControl\n                    align={columnMeta.align}\n                    column={cell.column}\n                    data={cell.row.original}\n                    initialValue={getValue()}\n                    onBlur={handleBlur}\n                    onFocus={handleFocus}\n                    onChange={handleChange}\n                    ref={controlRef}\n                    table={table}\n                    tableRef={tableRef}\n                    value={value}\n                    cell={cell}\n                    isCurrentRow={isCurrentRow}\n                />\n            </div>\n        </>\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n    table: RTTable<any>,\n    rowIndex: number,\n    rowValues: TType,\n    cell: RTCell<any, unknown>,\n    newValue: any\n) {\n    let rowMoveReason: IndicatorReason | null = null;\n    const { globalFilter } = table.getState();\n\n    const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).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        rowMoveReason = IndicatorReason.SEARCH;\n    } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n        rowMoveReason = IndicatorReason.FILTER;\n    } else if (\n        !rowMoveReason &&\n        cell.column.getIsSorted() &&\n        willRowMoveAfterSorting(\n            newValue,\n            cell,\n            rowIndex,\n            table.getRowModel().rows,\n            !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n        )\n    ) {\n        rowMoveReason = IndicatorReason.SORTING;\n    }\n\n    return rowMoveReason;\n}\n"],"names":["EditingCell","props","isHovered","useRowContext","tableMeta","table","options","meta","React","MemoedEditingCell","memo","cell","column","index","getValue","tableRef","row","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","_tableMeta$editing$ro","rowMoveReason","id","rows","getRowModel","isCurrentRow","_rows$tableMeta$curre","currentRow","currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","Indicator","reason","columnName","String","header","validationErrors","align","role","ref","EditingControl","data","initialValue","onBlur","onFocus","onChange","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}
+{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n    const { isHovered } = useRowContext();\n    // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    return <MemoedEditingCell<TType> {...props} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n    isHovered: boolean;\n    tableMeta: TableMeta<TType>;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const { cell, column, index, getValue, table, tableRef, row, isHovered, tableMeta } = props;\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n    const cellRef = React.useRef<HTMLDivElement>(null);\n    const controlRef = React.useRef<HTMLElement>(null);\n\n    const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n    const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n    const handleFocus = event => {\n        // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n        const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n        const tableElement = tableRef.current;\n\n        if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n            const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n            const cellRect = cellRef.current?.getBoundingClientRect();\n            const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n\n            // Check for pinned columns overlap\n            if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n                const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n                tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n                // Check for editing actions overlap\n            } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n                const spaceBetweenCellAndEditingActions = 10;\n                tableElement.scrollTo(\n                    // Need to take into account if table has been already scrolled.\n                    tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n                    tableElement.scrollTop\n                );\n            }\n        }\n\n        if (event.target?.select) {\n            requestAnimationFrame(() => {\n                event.target.select();\n            });\n        }\n    };\n\n    const handleBlur = () => {\n        tableMeta.editing.setDetailModeEditing(false);\n    };\n\n    // row move indicator\n    const moveReason = tableMeta.editing.rowMoveReason[cell.column.id] ?? null;\n    const rows = table.getRowModel().rows;\n    const isCurrentRow = rows[tableMeta.currentRow.currentRowIndex]?.id === row.id;\n    const mountNode = React.useMemo(() => {\n        if (moveReason) {\n            return cellRef.current?.parentElement?.firstChild as Element | null;\n        }\n        return null;\n    }, [moveReason, cellRef]);\n\n    const removeMoveReason = () => {\n        tableMeta.editing.removeRowMoveReason(cell.column.id);\n    };\n\n    React.useEffect(() => {\n        // To avoid reseting move reason on another row hover,\n        // we need to check for changes only if value got changed in the current row.\n        if (!isCurrentRow) {\n            return;\n        }\n\n        if (hasChanged(getValue(), value)) {\n            const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);\n            tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n        } else {\n            removeMoveReason();\n        }\n        return removeMoveReason;\n    }, [value]);\n\n    const controlRenderer = column.columnDef.meta?.control;\n\n    const className = cn(\n        '!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]',\n        {\n            relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',\n            // Need to set higher z-index, so that the current row textarea (in expanded state, when positioned absolute) overlaps rows below,\n            // but at the same time it should not overlap the table headers which has z-10.\n            'z-[9]': isCurrentRow && controlRenderer === 'textarea',\n        },\n\n        // component overrides - grayscale for editing hover\n        '[[role=\"row\"][data-current=\"false\"]:hover_&>*]:!grayscale [[role=\"row\"][data-current=\"false\"]:hover_&_.bg-white]:!bg-grey-100',\n        // we alias to any because className conflicts with the Table2 definition,\n        // when Table2 is gone, remove this as any\n        typeof columnMeta.className === 'function' ? (columnMeta.className as any)(row.original) : columnMeta.className\n    );\n\n    return (\n        <>\n            {moveReason !== null && mountNode && (\n                <Indicator\n                    reason={moveReason}\n                    columnName={String(cell.column.columnDef.header)}\n                    mountNode={mountNode}\n                    validationErrors={[]}\n                />\n            )}\n            <div className={className} data-align={columnMeta.align} data-column-index={index} role=\"cell\" ref={cellRef}>\n                <EditingControl\n                    align={columnMeta.align}\n                    column={cell.column}\n                    data={cell.row.original}\n                    initialValue={getValue()}\n                    onBlur={handleBlur}\n                    onFocus={handleFocus}\n                    onChange={handleChange}\n                    ref={controlRef}\n                    table={table}\n                    tableRef={tableRef}\n                    value={value}\n                    cell={cell}\n                    isCurrentRow={isCurrentRow}\n                />\n            </div>\n        </>\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n    table: RTTable<any>,\n    rowIndex: number,\n    rowValues: TType,\n    cell: RTCell<any, unknown>,\n    newValue: any\n) {\n    let rowMoveReason: IndicatorReason | null = null;\n    const { globalFilter } = table.getState();\n\n    const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).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        rowMoveReason = IndicatorReason.SEARCH;\n    } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n        rowMoveReason = IndicatorReason.FILTER;\n    } else if (\n        !rowMoveReason &&\n        cell.column.getIsSorted() &&\n        willRowMoveAfterSorting(\n            newValue,\n            cell,\n            rowIndex,\n            table.getRowModel().rows,\n            !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n        )\n    ) {\n        rowMoveReason = IndicatorReason.SORTING;\n    }\n\n    return rowMoveReason;\n}\n"],"names":["EditingCell","props","isHovered","useRowContext","tableMeta","table","options","meta","React","MemoedEditingCell","memo","cell","column","index","getValue","tableRef","row","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","_tableMeta$editing$ro","rowMoveReason","id","rows","getRowModel","isCurrentRow","_rows$tableMeta$curre","currentRow","currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","Indicator","reason","columnName","String","header","validationErrors","align","role","ref","EditingControl","data","initialValue","onBlur","onFocus","onChange","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import cn from 'classnames';
 import { mergeRefs } from '../../../../../utils/mergeRefs.js';
+import { shouldTriggerShortcut } from '../../../../../utils/keyboard.js';
 import { Input } from '../../../../Input/Input.js';
 import { deselectInputValue } from '../../../../../utils/input.js';
 import { Datepicker } from '../../../../Datepicker/Datepicker.js';
@@ -31,16 +32,26 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
   const columnMeta = column.columnDef.meta;
   const controlRenderer = columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.control;
   const isCellInDetailMode = tableMeta.editing.detailModeEditing && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(document.activeElement));
-  // Revert to initial value if escape was pressed
   const handleKeyDown = event => {
+    // For some reason keydown event handler is not propogated to the table when input or other control element is
+    // in focus so we need to check for shortcut that toggles the editing.
+    if (shouldTriggerShortcut(event, {
+      key: 'e',
+      meta: true,
+      shift: false
+    })) {
+      tableMeta.editing.toggleEditing(false);
+      return;
+    }
     const target = event.target;
     if (target.readOnly) {
       return;
     }
-    // prevent row arrow shortcuts triggering when in detail mode
+    // Prevent row arrow shortcuts triggering when in detail mode
     if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
       event.stopPropagation();
     }
+    // Revert to initial value if escape was pressed
     if (event.key === 'Escape') {
       event.preventDefault();
       if (tableMeta.editing.detailModeEditing) {
@@ -86,7 +97,6 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     // Switching to editing mode, when key pressed any alphabetical character or number
     if (/^[a-z0-9]$/i.test(event.key)) {
       tableMeta.editing.setDetailModeEditing(true);
-      return;
     }
   };
   const handleDatepickerChange = event => {
@@ -137,7 +147,8 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
       isCellInDetailMode: isCellInDetailMode,
       onKeyDown: handleInputKeyDown,
-      ref: refCallback
+      ref: refCallback,
+      fontSize: tableMeta.fontSize.size
     }));
   }
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\n\nexport type EditingControlProps<TType = unknown> = {\n    align?: Table3ColumnAlignment;\n    column: RTColumn<TType, unknown>;\n    data: TType;\n    initialValue: any;\n    value: any;\n    onBlur: (event: React.FocusEvent) => void;\n    onFocus: (event: React.FocusEvent) => void;\n    onChange: (value: any) => void;\n    ref: React.Ref<HTMLElement>;\n    table: RTTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    cell: RTCell<TType, unknown>;\n    error?: string;\n    tabIndex?: number;\n    isCurrentRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n    props: EditingControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        align,\n        column,\n        data,\n        initialValue,\n        onChange: handleChange,\n        table,\n        tableRef,\n        value,\n        cell,\n        isCurrentRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\n    const ref = React.useRef<HTMLElement>();\n    const refCallback = mergeRefs([ref, externalRef]);\n\n    const columnMeta = column.columnDef.meta;\n    const controlRenderer = columnMeta?.control;\n\n    const isCellInDetailMode =\n        tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n    // Revert to initial value if escape was pressed\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const target = event.target as HTMLInputElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent row arrow shortcuts triggering when in detail mode\n        if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n            event.stopPropagation();\n        }\n\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (tableMeta.editing.detailModeEditing) {\n                tableMeta.editing.setDetailModeEditing(false);\n\n                if (value !== initialValue) {\n                    // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n                    // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n                    const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n                    const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n                    if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n                        tableMeta.editing.resetChange(cell.row.id);\n                    } else {\n                        handleChange(initialValue);\n                    }\n                }\n            } else {\n                tableMeta.editing.toggleEditing(false);\n                tableRef.current?.focus();\n            }\n\n            return;\n        }\n\n        // Should enable/disable editing mode if Enter was clicked\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (!tableMeta.editing.detailModeEditing) {\n                deselectInputValue(target);\n            } else {\n                target?.select?.();\n            }\n\n            // Ketydown \"Enter\" should toggle edititng mode\n            tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n            return;\n        }\n    };\n\n    const isNumber = typeof value === 'number';\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        handleKeyDown(event);\n\n        // Switching to editing mode, when key pressed any alphabetical character or number\n        if (/^[a-z0-9]$/i.test(event.key)) {\n            tableMeta.editing.setDetailModeEditing(true);\n            return;\n        }\n    };\n\n    const handleDatepickerChange = event => {\n        // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n        // so adding additional check here to prevent adding change to the edititng state.\n        const originalDate = cell.row.original[cell.column.id];\n        const changedDate = (event as any).detail;\n        if (hasChanged(originalDate, changedDate)) {\n            handleChange(changedDate);\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                ref: ref,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            handleKeyDown(event);\n\n            if (/^[a-z0-9]$/i.test(event.key)) {\n                tableMeta.editing.setDetailModeEditing(true);\n                return;\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onKeyDown={handleDatepickerKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                isCellInDetailMode={isCellInDetailMode}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\n            onKeyDown={handleInputKeyDown}\n            ref={refCallback}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","handleKeyDown","event","target","readOnly","key","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","toggleEditing","focus","deselectInputValue","_target$select","select","call","isNumber","handleInputKeyDown","test","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","setValue","nextValue","handleDatepickerKeyDown","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}
+{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\nimport { shouldTriggerShortcut } from '../../../../../utils/keyboard';\n\nexport type EditingControlProps<TType = unknown> = {\n    align?: Table3ColumnAlignment;\n    column: RTColumn<TType, unknown>;\n    data: TType;\n    initialValue: any;\n    value: any;\n    onBlur: (event: React.FocusEvent) => void;\n    onFocus: (event: React.FocusEvent) => void;\n    onChange: (value: any) => void;\n    ref: React.Ref<HTMLElement>;\n    table: RTTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    cell: RTCell<TType, unknown>;\n    error?: string;\n    tabIndex?: number;\n    isCurrentRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n    props: EditingControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        align,\n        column,\n        data,\n        initialValue,\n        onChange: handleChange,\n        table,\n        tableRef,\n        value,\n        cell,\n        isCurrentRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\n    const ref = React.useRef<HTMLElement>();\n    const refCallback = mergeRefs([ref, externalRef]);\n\n    const columnMeta = column.columnDef.meta;\n    const controlRenderer = columnMeta?.control;\n\n    const isCellInDetailMode =\n        tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        // For some reason keydown event handler is not propogated to the table when input or other control element is\n        // in focus so we need to check for shortcut that toggles the editing.\n        if (shouldTriggerShortcut(event, { key: 'e', meta: true, shift: false })) {\n            tableMeta.editing.toggleEditing(false);\n            return;\n        }\n\n        const target = event.target as HTMLInputElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // Prevent row arrow shortcuts triggering when in detail mode\n        if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n            event.stopPropagation();\n        }\n\n        // Revert to initial value if escape was pressed\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (tableMeta.editing.detailModeEditing) {\n                tableMeta.editing.setDetailModeEditing(false);\n\n                if (value !== initialValue) {\n                    // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n                    // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n                    const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n                    const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n                    if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n                        tableMeta.editing.resetChange(cell.row.id);\n                    } else {\n                        handleChange(initialValue);\n                    }\n                }\n            } else {\n                tableMeta.editing.toggleEditing(false);\n                tableRef.current?.focus();\n            }\n\n            return;\n        }\n\n        // Should enable/disable editing mode if Enter was clicked\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (!tableMeta.editing.detailModeEditing) {\n                deselectInputValue(target);\n            } else {\n                target?.select?.();\n            }\n\n            // Ketydown \"Enter\" should toggle edititng mode\n            tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n            return;\n        }\n    };\n\n    const isNumber = typeof value === 'number';\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        handleKeyDown(event);\n\n        // Switching to editing mode, when key pressed any alphabetical character or number\n        if (/^[a-z0-9]$/i.test(event.key)) {\n            tableMeta.editing.setDetailModeEditing(true);\n        }\n    };\n\n    const handleDatepickerChange = event => {\n        // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n        // so adding additional check here to prevent adding change to the edititng state.\n        const originalDate = cell.row.original[cell.column.id];\n        const changedDate = (event as any).detail;\n        if (hasChanged(originalDate, changedDate)) {\n            handleChange(changedDate);\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                ref: ref,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            handleKeyDown(event);\n\n            if (/^[a-z0-9]$/i.test(event.key)) {\n                tableMeta.editing.setDetailModeEditing(true);\n                return;\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onKeyDown={handleDatepickerKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                isCellInDetailMode={isCellInDetailMode}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                fontSize={tableMeta.fontSize.size}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\n            onKeyDown={handleInputKeyDown}\n            ref={refCallback}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","handleKeyDown","event","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","focus","deselectInputValue","_target$select","select","call","isNumber","handleInputKeyDown","test","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","setValue","nextValue","handleDatepickerKeyDown","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","fontSize","size","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js

@@ -4,6 +4,22 @@ import { useMergedRef } from '../../../../../../hooks/useMergedRef.js';
 import { getCellAlignmentClasses } from '../../styles.js';
 import { Textarea } from '../../../../../Textarea/Textarea.js';
 
+// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,
+// for this reason we need to set min/max height limits for each font size value.
+const heights = {
+  small: {
+    min: 24,
+    max: 86
+  },
+  medium: {
+    min: 34,
+    max: 100
+  },
+  large: {
+    min: 40,
+    max: 140
+  }
+};
 const TextareaControl = /*#__PURE__*/React__default.forwardRef(function TextareaControl(props, externalRef) {
   const {
     onKeyDown: handleKeyDown,
@@ -13,19 +29,25 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     align,
     isCurrentRow,
     value,
+    fontSize,
     ...attributes
   } = props;
-  const textareaMaxHeight = 120;
-  const textareaMinHeight = 32;
+  const minMaxHeight = heights[fontSize];
   const columnMeta = column.columnDef.meta;
   const ref = useMergedRef(externalRef);
   React__default.useEffect(() => {
-    // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.
-    if (ref !== null && ref !== void 0 && ref.current && !(columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate)) {
-      const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
-      resizeTextArea(textareaElement);
+    if (ref !== null && ref !== void 0 && ref.current) {
+      // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.
+      if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+        const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
+        // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.
+      } else {
+        const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        resizeTextArea(textareaElement);
+      }
     }
-  }, []);
+  }, [fontSize]);
   React__default.useEffect(() => {
     // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.
     // Otherwise it should collapse to minimal height.
@@ -34,7 +56,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       if (isCellInDetailMode) {
         resizeTextArea(textareaElement);
       } else {
-        textareaElement.style.height = `${textareaMinHeight}px`;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
       }
     }
   }, [isCellInDetailMode]);
@@ -44,9 +66,9 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     const textareaRect = textareaElement.getBoundingClientRect();
     const prevHeight = textareaRect.height;
     if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
-      if (prevHeight < textareaMaxHeight) {
+      if (prevHeight < minMaxHeight.max) {
         textareaElement.style.height = 'inherit';
-        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;
+        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;
       }
     } else {
       textareaElement.style.height = 'inherit';
@@ -83,13 +105,13 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
       if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
         const textareaElement = event.currentTarget;
-        textareaElement.style.height = `${textareaMinHeight}px`;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
       }
     },
     className: cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {
-      [`!min-h-[${textareaMinHeight}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
+      [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
       '!yt-focus-dark': isCellInDetailMode,
-      [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
+      [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
       // Only allow resizing when focused and truncation enabled
       'focus:resize-y': isCurrentRow && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate)
     }),

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextareaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n    isCellInDetailMode?: boolean;\n};\n\nexport const TextareaControl = React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n    props: TextareaControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n        column,\n        isCellInDetailMode,\n        align,\n        isCurrentRow,\n        value,\n        ...attributes\n    } = props;\n\n    const textareaMaxHeight = 120;\n    const textareaMinHeight = 32;\n\n    const columnMeta = column.columnDef.meta;\n\n    const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n    React.useEffect(() => {\n        // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.\n        if (ref?.current && !columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n            resizeTextArea(textareaElement);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n        // Otherwise it should collapse to minimal height.\n        if (ref?.current && columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n\n            if (isCellInDetailMode) {\n                resizeTextArea(textareaElement);\n            } else {\n                textareaElement.style.height = `${textareaMinHeight}px`;\n            }\n        }\n    }, [isCellInDetailMode]);\n\n    const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n        // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n        // depending on text inside.\n        const textareaRect = textareaElement.getBoundingClientRect();\n        const prevHeight = textareaRect.height;\n        if (columnMeta?.enableTruncate) {\n            if (prevHeight < textareaMaxHeight) {\n                textareaElement.style.height = 'inherit';\n                textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;\n            }\n        } else {\n            textareaElement.style.height = 'inherit';\n            textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n        }\n    };\n\n    const handleTextareaChange = e => {\n        resizeTextArea(e.target);\n    };\n\n    const textareaContainerClassName = cn('w-full', {\n        'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]':\n            columnMeta?.enableTruncate,\n    });\n    const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n        if (event.shiftKey && event.key === 'Enter') {\n            return;\n        } else {\n            handleKeyDown(event);\n        }\n    };\n\n    return (\n        <div className={textareaContainerClassName} data-taco=\"input-container\">\n            <Textarea\n                {...attributes}\n                onChange={event => {\n                    handleChange(event.target.value);\n                    handleTextareaChange(event);\n                }}\n                rows={1}\n                onKeyDown={e => {\n                    handleTextareaKeyDown(e);\n                }}\n                onBlur={event => {\n                    // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n                    if (columnMeta?.enableTruncate) {\n                        const textareaElement = event.currentTarget;\n                        textareaElement.style.height = `${textareaMinHeight}px`;\n                    }\n                }}\n                className={cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {\n                    [`!min-h-[${textareaMinHeight}px]`]: columnMeta?.enableTruncate,\n                    '!yt-focus-dark': isCellInDetailMode,\n                    [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n                    // Only allow resizing when focused and truncation enabled\n                    'focus:resize-y': isCurrentRow && columnMeta?.enableTruncate,\n                })}\n                ref={ref}\n                value={String(value ?? '')}\n            />\n        </div>\n    );\n});\n"],"names":["TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","column","isCellInDetailMode","align","isCurrentRow","value","attributes","textareaMaxHeight","textareaMinHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","resizeTextArea","style","height","textareaRect","getBoundingClientRect","prevHeight","Math","min","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","className","Textarea","rows","onBlur","currentTarget","getCellAlignmentClasses","String"],"mappings":"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"}
+{"version":3,"file":"TextareaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextareaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\nimport { Table3FontSize } from '../../../../types';\n\ntype TextareaHeight = {\n    min: number;\n    max: number;\n};\n// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,\n// for this reason we need to set min/max height limits for each font size value.\nconst heights: Record<Table3FontSize, TextareaHeight> = {\n    small: {\n        min: 24,\n        max: 86,\n    },\n    medium: {\n        min: 34,\n        max: 100,\n    },\n    large: {\n        min: 40,\n        max: 140,\n    },\n};\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n    fontSize: Table3FontSize;\n    isCellInDetailMode?: boolean;\n};\n\nexport const TextareaControl = React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n    props: TextareaControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n        column,\n        isCellInDetailMode,\n        align,\n        isCurrentRow,\n        value,\n        fontSize,\n        ...attributes\n    } = props;\n\n    const minMaxHeight = heights[fontSize];\n\n    const columnMeta = column.columnDef.meta;\n\n    const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.\n            if (columnMeta?.enableTruncate) {\n                const textareaElement = ref?.current as HTMLTextAreaElement;\n                textareaElement.style.height = `${minMaxHeight.min}px`;\n\n                // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.\n            } else {\n                const textareaElement = ref?.current as HTMLTextAreaElement;\n                resizeTextArea(textareaElement);\n            }\n        }\n    }, [fontSize]);\n\n    React.useEffect(() => {\n        // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n        // Otherwise it should collapse to minimal height.\n        if (ref?.current && columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n\n            if (isCellInDetailMode) {\n                resizeTextArea(textareaElement);\n            } else {\n                textareaElement.style.height = `${minMaxHeight.min}px`;\n            }\n        }\n    }, [isCellInDetailMode]);\n\n    const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n        // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n        // depending on text inside.\n        const textareaRect = textareaElement.getBoundingClientRect();\n        const prevHeight = textareaRect.height;\n        if (columnMeta?.enableTruncate) {\n            if (prevHeight < minMaxHeight.max) {\n                textareaElement.style.height = 'inherit';\n                textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;\n            }\n        } else {\n            textareaElement.style.height = 'inherit';\n            textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n        }\n    };\n\n    const handleTextareaChange = e => {\n        resizeTextArea(e.target);\n    };\n\n    const textareaContainerClassName = cn('w-full', {\n        'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]':\n            columnMeta?.enableTruncate,\n    });\n    const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n        if (event.shiftKey && event.key === 'Enter') {\n            return;\n        } else {\n            handleKeyDown(event);\n        }\n    };\n\n    return (\n        <div className={textareaContainerClassName} data-taco=\"input-container\">\n            <Textarea\n                {...attributes}\n                onChange={event => {\n                    handleChange(event.target.value);\n                    handleTextareaChange(event);\n                }}\n                rows={1}\n                onKeyDown={e => {\n                    handleTextareaKeyDown(e);\n                }}\n                onBlur={event => {\n                    // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n                    if (columnMeta?.enableTruncate) {\n                        const textareaElement = event.currentTarget;\n                        textareaElement.style.height = `${minMaxHeight.min}px`;\n                    }\n                }}\n                className={cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {\n                    [`!min-h-[${minMaxHeight.min}px]`]: columnMeta?.enableTruncate,\n                    '!yt-focus-dark': isCellInDetailMode,\n                    [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n                    // Only allow resizing when focused and truncation enabled\n                    'focus:resize-y': isCurrentRow && columnMeta?.enableTruncate,\n                })}\n                ref={ref}\n                value={String(value ?? '')}\n            />\n        </div>\n    );\n});\n"],"names":["heights","small","min","max","medium","large","TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","column","isCellInDetailMode","align","isCurrentRow","value","fontSize","attributes","minMaxHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","style","height","resizeTextArea","textareaRect","getBoundingClientRect","prevHeight","Math","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","className","Textarea","rows","onBlur","currentTarget","getCellAlignmentClasses","String"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Summary.js

@@ -2,10 +2,13 @@ import React__default from 'react';
 import { useLocalization } from '../../../../Provider/Localization.js';
 
 function Summary(props) {
+  var _table$getState$colum;
   const {
+    currentLength,
     length,
     table
   } = props;
+  const tableMeta = table.options.meta;
   const {
     locale,
     texts
@@ -16,13 +19,20 @@ function Summary(props) {
   const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;
   if (rowsSelectedLength > 0) {
     label = texts.table3.footer.summary.selected;
-    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, length));
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
+  } else if ((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length ||
+  // filtered data
+  !!table.getState().globalFilter && tableMeta.search.excludeUnmatchedResults // search with hide enabled
+  ) {
+    label = texts.table3.footer.summary.records;
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, currentLength), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
   } else {
     label = texts.table3.footer.summary.records;
     count = /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length));
   }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]"
+    className: "sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]",
+    "data-taco": "table2-footer-summary"
   }, label, "\u00A0", count);
 }
 

package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Summary.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../Provider/Localization';\n\nexport type FooterSummaryProps<TType = unknown> = {\n    length: number;\n    table: RTable<TType>;\n};\n\nexport function Summary<TType = unknown>(props: FooterSummaryProps<TType>) {\n    const { length, table } = props;\n    const { locale, texts } = useLocalization();\n\n    let label;\n    let count;\n\n    // row selection\n    const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;\n\n    if (rowsSelectedLength > 0) {\n        label = texts.table3.footer.summary.selected;\n        count = (\n            <>\n                <strong>{new Intl.NumberFormat(locale).format(rowsSelectedLength)}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{length}</strong>\n            </>\n        );\n    } else {\n        label = texts.table3.footer.summary.records;\n        count = <strong>{new Intl.NumberFormat(locale).format(length)}</strong>;\n    }\n\n    return (\n        <div className=\"sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]\">\n            {label}&nbsp;{count}\n        </div>\n    );\n}\n"],"names":["Summary","props","length","table","locale","texts","useLocalization","label","count","rowsSelectedLength","getIsAllRowsSelected","getSelectedRowModel","rows","table3","footer","summary","selected","React","Intl","NumberFormat","format","records","className"],"mappings":";;;SASgBA,OAAOA,CAAkBC,KAAgC;EACrE,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGF,KAAK;EAC/B,MAAM;IAAEG,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAE3C,IAAIC,KAAK;EACT,IAAIC,KAAK;;EAGT,MAAMC,kBAAkB,GAAGN,KAAK,CAACO,oBAAoB,EAAE,GAAGR,MAAM,GAAGC,KAAK,CAACQ,mBAAmB,EAAE,CAACC,IAAI,CAACV,MAAM;EAE1G,IAAIO,kBAAkB,GAAG,CAAC,EAAE;IACxBF,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACC,QAAQ;IAC5CR,KAAK,gBACDS,yEACIA,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACX,kBAAkB,CAAC,CAAU,YAC1EJ,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACP,KAAK,yBAClCS,6CAASf,MAAM,CAAU,CAEhC;GACJ,MAAM;IACHK,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACM,OAAO;IAC3Cb,KAAK,gBAAGS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAAClB,MAAM,CAAC,CAAU;;EAG3E,oBACIe;IAAKK,SAAS,EAAC;KACVf,KAAK,YAAQC,KAAK,CACjB;AAEd;;;;"}
+{"version":3,"file":"Summary.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Summary.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../Provider/Localization';\n\nexport type FooterSummaryProps<TType = unknown> = {\n    currentLength: number;\n    length: number;\n    table: RTable<TType>;\n};\n\nexport function Summary<TType = unknown>(props: FooterSummaryProps<TType>) {\n    const { currentLength, length, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { locale, texts } = useLocalization();\n\n    let label;\n    let count;\n\n    // row selection\n    const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;\n\n    if (rowsSelectedLength > 0) {\n        label = texts.table3.footer.summary.selected;\n        count = (\n            <>\n                <strong>{new Intl.NumberFormat(locale).format(rowsSelectedLength)}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{new Intl.NumberFormat(locale).format(length)}</strong>\n            </>\n        );\n    } else if (\n        table.getState().columnFilters?.length || // filtered data\n        (!!table.getState().globalFilter && tableMeta.search.excludeUnmatchedResults) // search with hide enabled\n    ) {\n        label = texts.table3.footer.summary.records;\n        count = (\n            <>\n                <strong>{currentLength}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{new Intl.NumberFormat(locale).format(length)}</strong>\n            </>\n        );\n    } else {\n        label = texts.table3.footer.summary.records;\n        count = <strong>{new Intl.NumberFormat(locale).format(length)}</strong>;\n    }\n\n    return (\n        <div\n            className=\"sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]\"\n            data-taco=\"table2-footer-summary\">\n            {label}&nbsp;{count}\n        </div>\n    );\n}\n"],"names":["Summary","props","currentLength","length","table","tableMeta","options","meta","locale","texts","useLocalization","label","count","rowsSelectedLength","getIsAllRowsSelected","getSelectedRowModel","rows","table3","footer","summary","selected","React","Intl","NumberFormat","format","_table$getState$colum","getState","columnFilters","globalFilter","search","excludeUnmatchedResults","records","className"],"mappings":";;;SAUgBA,OAAOA,CAAkBC,KAAgC;;EACrE,MAAM;IAAEC,aAAa;IAAEC,MAAM;IAAEC;GAAO,GAAGH,KAAK;EAC9C,MAAMI,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAAwB;EACxD,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAE3C,IAAIC,KAAK;EACT,IAAIC,KAAK;;EAGT,MAAMC,kBAAkB,GAAGT,KAAK,CAACU,oBAAoB,EAAE,GAAGX,MAAM,GAAGC,KAAK,CAACW,mBAAmB,EAAE,CAACC,IAAI,CAACb,MAAM;EAE1G,IAAIU,kBAAkB,GAAG,CAAC,EAAE;IACxBF,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACC,QAAQ;IAC5CR,KAAK,gBACDS,yEACIA,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACX,kBAAkB,CAAC,CAAU,YAC1EJ,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACP,KAAK,yBAClCS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACrB,MAAM,CAAC,CAAU,CAEtE;GACJ,MAAM,IACH,CAAAsB,qBAAA,GAAArB,KAAK,CAACsB,QAAQ,EAAE,CAACC,aAAa,cAAAF,qBAAA,eAA9BA,qBAAA,CAAgCtB,MAAM;;EACrC,CAAC,CAACC,KAAK,CAACsB,QAAQ,EAAE,CAACE,YAAY,IAAIvB,SAAS,CAACwB,MAAM,CAACC,uBAAwB;IAC/E;IACEnB,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACY,OAAO;IAC3CnB,KAAK,gBACDS,yEACIA,6CAASnB,aAAa,CAAU,YAC/BO,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACP,KAAK,yBAClCS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACrB,MAAM,CAAC,CAAU,CAEtE;GACJ,MAAM;IACHQ,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACY,OAAO;IAC3CnB,KAAK,gBAAGS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACrB,MAAM,CAAC,CAAU;;EAG3E,oBACIkB;IACIW,SAAS,EAAC,gJAAgJ;iBAChJ;KACTrB,KAAK,YAAQC,KAAK,CACjB;AAEd;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js

@@ -121,7 +121,10 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   }) : null, hasMenu ? /*#__PURE__*/React__default.createElement(Menu, {
     canFreeze: canFreeze,
     canHide: canHide,
-    className: "ml-auto hidden group-hover/column:flex aria-expanded:!flex",
+    className: cn('hidden group-hover/column:flex aria-expanded:!flex', {
+      'ml-auto': align !== 'right',
+      'ml-2': align === 'right'
+    }),
     index: index,
     menu: meta.menu,
     onGoto: handleGoto,

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext, TableMeta } from '@tanstack/react-table';\nimport { Menu, isMenuAvailable, isGotoAvailable } from './Menu';\nimport { Resizer } from './Resizer';\nimport { Table3ColumnAlignment, Table3SortDirection, TableStrategy } from '../../../types';\nimport { getSortAttributes, SortIndicator } from './SortIndicator';\nimport { isFrozenColumn, isInternalColumn } from '../../../util/columns';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport type HeaderProps<TType = unknown> = HeaderContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, scrollToIndex, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const canSort = column.getCanSort();\n\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const handleResize = React.useMemo(() => header.getResizeHandler(), []);\n    const handleSort = React.useMemo(() => header.column.getToggleSortingHandler(), []);\n    const handleHide = React.useMemo(() => header.column.getToggleVisibilityHandler(), []);\n    const hasGoto = isGotoAvailable(table, header);\n\n    const sorting = table.getState().sorting;\n    const filters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    const handleGoto = React.useMemo(() => {\n        if (hasGoto) {\n            return ((query: string) => tableMeta.rowGoto.handleGoto(header.id, query, sorting, filters, search)) as (\n                query: string\n            ) => Promise<number>;\n        }\n\n        return undefined;\n    }, [hasGoto, JSON.stringify(sorting), JSON.stringify(filters), search]);\n\n    const memoedProps = {\n        align: columnMeta.align,\n        canFreeze: tableMeta.columnFreezing.isEnabled,\n        canHide: column.getCanHide(),\n        canResize: column.getCanResize(),\n        canSort,\n        children: children ?? columnMeta.header,\n        hasMenu: isMenuAvailable<TType>(table, header),\n        id: header.id,\n        index: header.index,\n        isFrozen: isFrozenColumn(header, table),\n        isResizing: column.getIsResizing(),\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort as (event: unknown) => void,\n        scrollToIndex,\n        sortDirection: column.getIsSorted(),\n        table,\n    };\n\n    return <MemoedHeader<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {\n    align?: Table3ColumnAlignment;\n    canFreeze: boolean;\n    canHide: boolean;\n    canResize: boolean;\n    canSort: boolean;\n    hasMenu: boolean;\n    id: string;\n    index: number;\n    isFrozen: boolean;\n    isResizing: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n    onGoto?: (query: string) => Promise<number>;\n    onHide: (event: unknown) => void;\n    onResize: (event: unknown) => void;\n    onSort: (event: unknown) => void;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    sortDirection: false | Table3SortDirection;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader<TType = unknown>(props: MemoedHeaderProps<TType>) {\n    const {\n        align,\n        children,\n        canFreeze,\n        canHide,\n        canResize,\n        canSort,\n        hasMenu,\n        id,\n        index,\n        isFrozen,\n        isResizing,\n        length,\n        meta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort,\n        scrollToIndex,\n        sortDirection,\n        table,\n    } = props;\n\n    const className = cn(\n        'sticky top-0 border-b-2 font-bold h-10 box-content items-center group/column relative',\n        '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n        {\n            'cursor-pointer select-none': canSort,\n            'hover:bg-grey-100': canSort || canResize || hasMenu,\n            '!pointer-events-all !bg-grey-100': isResizing,\n            // z-indexes\n            'z-10 hover:z-20': !isFrozen && !isResizing,\n            'z-20': !isFrozen && isResizing,\n            '!z-30': isFrozen,\n            '!z-40': isFrozen && isResizing,\n        },\n        meta.headerClassName\n    );\n\n    const [internalRef, setInternalRef] = React.useState<HTMLDivElement | null>(null);\n\n    React.useLayoutEffect(() => {\n        if (internalRef && length) {\n            // the actions column size gets set by the column itself\n            if (isInternalColumn(id)) {\n                return;\n            }\n\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [id]: internalRef.getBoundingClientRect().width,\n            }));\n        }\n    }, [internalRef, length]);\n\n    if (table.options.debugAll) {\n        console.log('header render', id);\n    }\n\n    return (\n        <div\n            {...(canSort ? getSortAttributes(handleSort, sortDirection) : undefined)}\n            className={className}\n            data-align={align}\n            data-column-index={index}\n            role=\"columnheader\"\n            ref={setInternalRef}>\n            {isInternalColumn(id) ? (\n                children\n            ) : (\n                <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                    <span className=\"truncate\">{children}</span>\n                </Tooltip>\n            )}\n            {canSort ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <Menu\n                    canFreeze={canFreeze}\n                    canHide={canHide}\n                    className=\"ml-auto hidden group-hover/column:flex aria-expanded:!flex\"\n                    index={index}\n                    menu={meta.menu}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    scrollToIndex={scrollToIndex}\n                    table={table}\n                />\n            ) : null}\n            {canResize ? <Resizer isResizing={isResizing} onResize={handleResize} /> : null}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedHeaderProps<TType>) => JSX.Element;\n"],"names":["Header","props","children","column","header","scrollToIndex","table","tableMeta","options","meta","columnMeta","React","useMemo","columnDef","canSort","getCanSort","handleResize","getResizeHandler","handleSort","getToggleSortingHandler","handleHide","getToggleVisibilityHandler","hasGoto","isGotoAvailable","sorting","getState","filters","columnFilters","search","globalFilter","handleGoto","query","rowGoto","id","undefined","JSON","stringify","memoedProps","align","canFreeze","columnFreezing","isEnabled","canHide","getCanHide","canResize","getCanResize","hasMenu","isMenuAvailable","index","isFrozen","isFrozenColumn","isResizing","getIsResizing","length","getRowModel","rows","onGoto","onHide","onResize","onSort","sortDirection","getIsSorted","MemoedHeader","memo","className","cn","headerClassName","internalRef","setInternalRef","useState","useLayoutEffect","isInternalColumn","setColumnSizing","sizes","getBoundingClientRect","width","debugAll","console","log","getSortAttributes","role","ref","Tooltip","title","String","_meta$tooltip","tooltip","placement","SortIndicator","direction","Menu","menu","Resizer"],"mappings":";;;;;;;;SAcgBA,MAAMA,CAAkBC,KAAyB;EAC7D,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,MAAM;IAAEC,aAAa;IAAEC;GAAO,GAAGL,KAAK;EAChE,MAAMM,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAAwB;EACxD,MAAMC,UAAU,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMT,MAAM,CAACU,SAAS,CAACJ,IAAI,EAAE,EAAE,CAA+B;EAC/F,MAAMK,OAAO,GAAGX,MAAM,CAACY,UAAU,EAAE;;EAGnC,MAAMC,YAAY,GAAGL,cAAK,CAACC,OAAO,CAAC,MAAMR,MAAM,CAACa,gBAAgB,EAAE,EAAE,EAAE,CAAC;EACvE,MAAMC,UAAU,GAAGP,cAAK,CAACC,OAAO,CAAC,MAAMR,MAAM,CAACD,MAAM,CAACgB,uBAAuB,EAAE,EAAE,EAAE,CAAC;EACnF,MAAMC,UAAU,GAAGT,cAAK,CAACC,OAAO,CAAC,MAAMR,MAAM,CAACD,MAAM,CAACkB,0BAA0B,EAAE,EAAE,EAAE,CAAC;EACtF,MAAMC,OAAO,GAAGC,eAAe,CAACjB,KAAK,EAAEF,MAAM,CAAC;EAE9C,MAAMoB,OAAO,GAAGlB,KAAK,CAACmB,QAAQ,EAAE,CAACD,OAAO;EACxC,MAAME,OAAO,GAAGpB,KAAK,CAACmB,QAAQ,EAAE,CAACE,aAAa;EAC9C,MAAMC,MAAM,GAAGtB,KAAK,CAACmB,QAAQ,EAAE,CAACI,YAAY;EAE5C,MAAMC,UAAU,GAAGnB,cAAK,CAACC,OAAO,CAAC;IAC7B,IAAIU,OAAO,EAAE;MACT,OAASS,KAAa,IAAKxB,SAAS,CAACyB,OAAO,CAACF,UAAU,CAAC1B,MAAM,CAAC6B,EAAE,EAAEF,KAAK,EAAEP,OAAO,EAAEE,OAAO,EAAEE,MAAM,CAAC;;IAKvG,OAAOM,SAAS;GACnB,EAAE,CAACZ,OAAO,EAAEa,IAAI,CAACC,SAAS,CAACZ,OAAO,CAAC,EAAEW,IAAI,CAACC,SAAS,CAACV,OAAO,CAAC,EAAEE,MAAM,CAAC,CAAC;EAEvE,MAAMS,WAAW,GAAG;IAChBC,KAAK,EAAE5B,UAAU,CAAC4B,KAAK;IACvBC,SAAS,EAAEhC,SAAS,CAACiC,cAAc,CAACC,SAAS;IAC7CC,OAAO,EAAEvC,MAAM,CAACwC,UAAU,EAAE;IAC5BC,SAAS,EAAEzC,MAAM,CAAC0C,YAAY,EAAE;IAChC/B,OAAO;IACPZ,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIQ,UAAU,CAACN,MAAM;IACvC0C,OAAO,EAAEC,eAAe,CAAQzC,KAAK,EAAEF,MAAM,CAAC;IAC9C6B,EAAE,EAAE7B,MAAM,CAAC6B,EAAE;IACbe,KAAK,EAAE5C,MAAM,CAAC4C,KAAK;IACnBC,QAAQ,EAAEC,cAAc,CAAC9C,MAAM,EAAEE,KAAK,CAAC;IACvC6C,UAAU,EAAEhD,MAAM,CAACiD,aAAa,EAAE;IAClCC,MAAM,EAAE/C,KAAK,CAACgD,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;IACvC5C,IAAI,EAAEC,UAAU;IAChB8C,MAAM,EAAE1B,UAAU;IAClB2B,MAAM,EAAErC,UAAU;IAClBsC,QAAQ,EAAE1C,YAAY;IACtB2C,MAAM,EAAEzC,UAAsC;IAC9Cb,aAAa;IACbuD,aAAa,EAAEzD,MAAM,CAAC0D,WAAW,EAAE;IACnCvD;GACH;EAED,oBAAOK,6BAACmD,YAAY,oBAAYzB,WAAW,EAAI;AACnD;AAwBA,MAAMyB,YAAY,gBAAGnD,cAAK,CAACoD,IAAI,CAAC,SAASD,YAAYA,CAAkB7D,KAA+B;;EAClG,MAAM;IACFqC,KAAK;IACLpC,QAAQ;IACRqC,SAAS;IACTG,OAAO;IACPE,SAAS;IACT9B,OAAO;IACPgC,OAAO;IACPb,EAAE;IACFe,KAAK;IACLC,QAAQ;IACRE,UAAU;IACVE,MAAM;IACN5C,IAAI;IACJ+C,MAAM,EAAE1B,UAAU;IAClB2B,MAAM,EAAErC,UAAU;IAClBsC,QAAQ,EAAE1C,YAAY;IACtB2C,MAAM,EAAEzC,UAAU;IAClBb,aAAa;IACbuD,aAAa;IACbtD;GACH,GAAGL,KAAK;EAET,MAAM+D,SAAS,GAAGC,EAAE,CAChB,uFAAuF,EACvF,8DAA8D,EAC9D;IACI,4BAA4B,EAAEnD,OAAO;IACrC,mBAAmB,EAAEA,OAAO,IAAI8B,SAAS,IAAIE,OAAO;IACpD,kCAAkC,EAAEK,UAAU;;IAE9C,iBAAiB,EAAE,CAACF,QAAQ,IAAI,CAACE,UAAU;IAC3C,MAAM,EAAE,CAACF,QAAQ,IAAIE,UAAU;IAC/B,OAAO,EAAEF,QAAQ;IACjB,OAAO,EAAEA,QAAQ,IAAIE;GACxB,EACD1C,IAAI,CAACyD,eAAe,CACvB;EAED,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGzD,cAAK,CAAC0D,QAAQ,CAAwB,IAAI,CAAC;EAEjF1D,cAAK,CAAC2D,eAAe,CAAC;IAClB,IAAIH,WAAW,IAAId,MAAM,EAAE;;MAEvB,IAAIkB,gBAAgB,CAACtC,EAAE,CAAC,EAAE;QACtB;;MAGJ3B,KAAK,CAACkE,eAAe,CAACC,KAAK,KAAK;QAC5B,GAAGA,KAAK;QACR,CAACxC,EAAE,GAAGkC,WAAW,CAACO,qBAAqB,EAAE,CAACC;OAC7C,CAAC,CAAC;;GAEV,EAAE,CAACR,WAAW,EAAEd,MAAM,CAAC,CAAC;EAEzB,IAAI/C,KAAK,CAACE,OAAO,CAACoE,QAAQ,EAAE;IACxBC,OAAO,CAACC,GAAG,CAAC,eAAe,EAAE7C,EAAE,CAAC;;EAGpC,oBACItB,sDACSG,OAAO,GAAGiE,iBAAiB,CAAC7D,UAAU,EAAE0C,aAAa,CAAC,GAAG1B,SAAS;IACvE8B,SAAS,EAAEA,SAAS;kBACR1B,KAAK;yBACEU,KAAK;IACxBgC,IAAI,EAAC,cAAc;IACnBC,GAAG,EAAEb;MACJG,gBAAgB,CAACtC,EAAE,CAAC,GACjB/B,QAAQ,gBAERS,6BAACuE,OAAO;IAACC,KAAK,EAAEC,MAAM,EAAAC,aAAA,GAAC5E,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE6E,OAAO,cAAAD,aAAA,cAAAA,aAAA,GAAInF,QAAQ,CAAC;IAAEqF,SAAS,EAAC;kBACzD5E;IAAMqD,SAAS,EAAC;KAAY9D,QAAQ,CAAQ,CAEnD,EACAY,OAAO,gBAAGH,6BAAC6E,aAAa;IAACC,SAAS,EAAE7B;IAAiB,GAAG,IAAI,EAC5Dd,OAAO,gBACJnC,6BAAC+E,IAAI;IACDnD,SAAS,EAAEA,SAAS;IACpBG,OAAO,EAAEA,OAAO;IAChBsB,SAAS,EAAC,4DAA4D;IACtEhB,KAAK,EAAEA,KAAK;IACZ2C,IAAI,EAAElF,IAAI,CAACkF,IAAI;IACfnC,MAAM,EAAE1B,UAAU;IAClB2B,MAAM,EAAErC,UAAU;IAClBf,aAAa,EAAEA,aAAa;IAC5BC,KAAK,EAAEA;IACT,GACF,IAAI,EACPsC,SAAS,gBAAGjC,6BAACiF,OAAO;IAACzC,UAAU,EAAEA,UAAU;IAAEO,QAAQ,EAAE1C;IAAgB,GAAG,IAAI,CAC7E;AAEd,CAAC,CAAsE;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext, TableMeta } from '@tanstack/react-table';\nimport { Menu, isMenuAvailable, isGotoAvailable } from './Menu';\nimport { Resizer } from './Resizer';\nimport { Table3ColumnAlignment, Table3SortDirection, TableStrategy } from '../../../types';\nimport { getSortAttributes, SortIndicator } from './SortIndicator';\nimport { isFrozenColumn, isInternalColumn } from '../../../util/columns';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport type HeaderProps<TType = unknown> = HeaderContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, scrollToIndex, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const canSort = column.getCanSort();\n\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const handleResize = React.useMemo(() => header.getResizeHandler(), []);\n    const handleSort = React.useMemo(() => header.column.getToggleSortingHandler(), []);\n    const handleHide = React.useMemo(() => header.column.getToggleVisibilityHandler(), []);\n    const hasGoto = isGotoAvailable(table, header);\n\n    const sorting = table.getState().sorting;\n    const filters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    const handleGoto = React.useMemo(() => {\n        if (hasGoto) {\n            return ((query: string) => tableMeta.rowGoto.handleGoto(header.id, query, sorting, filters, search)) as (\n                query: string\n            ) => Promise<number>;\n        }\n\n        return undefined;\n    }, [hasGoto, JSON.stringify(sorting), JSON.stringify(filters), search]);\n\n    const memoedProps = {\n        align: columnMeta.align,\n        canFreeze: tableMeta.columnFreezing.isEnabled,\n        canHide: column.getCanHide(),\n        canResize: column.getCanResize(),\n        canSort,\n        children: children ?? columnMeta.header,\n        hasMenu: isMenuAvailable<TType>(table, header),\n        id: header.id,\n        index: header.index,\n        isFrozen: isFrozenColumn(header, table),\n        isResizing: column.getIsResizing(),\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort as (event: unknown) => void,\n        scrollToIndex,\n        sortDirection: column.getIsSorted(),\n        table,\n    };\n\n    return <MemoedHeader<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {\n    align?: Table3ColumnAlignment;\n    canFreeze: boolean;\n    canHide: boolean;\n    canResize: boolean;\n    canSort: boolean;\n    hasMenu: boolean;\n    id: string;\n    index: number;\n    isFrozen: boolean;\n    isResizing: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n    onGoto?: (query: string) => Promise<number>;\n    onHide: (event: unknown) => void;\n    onResize: (event: unknown) => void;\n    onSort: (event: unknown) => void;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    sortDirection: false | Table3SortDirection;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader<TType = unknown>(props: MemoedHeaderProps<TType>) {\n    const {\n        align,\n        children,\n        canFreeze,\n        canHide,\n        canResize,\n        canSort,\n        hasMenu,\n        id,\n        index,\n        isFrozen,\n        isResizing,\n        length,\n        meta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort,\n        scrollToIndex,\n        sortDirection,\n        table,\n    } = props;\n\n    const className = cn(\n        'sticky top-0 border-b-2 font-bold h-10 box-content items-center group/column relative',\n        '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n        {\n            'cursor-pointer select-none': canSort,\n            'hover:bg-grey-100': canSort || canResize || hasMenu,\n            '!pointer-events-all !bg-grey-100': isResizing,\n            // z-indexes\n            'z-10 hover:z-20': !isFrozen && !isResizing,\n            'z-20': !isFrozen && isResizing,\n            '!z-30': isFrozen,\n            '!z-40': isFrozen && isResizing,\n        },\n        meta.headerClassName\n    );\n\n    const [internalRef, setInternalRef] = React.useState<HTMLDivElement | null>(null);\n\n    React.useLayoutEffect(() => {\n        if (internalRef && length) {\n            // the actions column size gets set by the column itself\n            if (isInternalColumn(id)) {\n                return;\n            }\n\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [id]: internalRef.getBoundingClientRect().width,\n            }));\n        }\n    }, [internalRef, length]);\n\n    if (table.options.debugAll) {\n        console.log('header render', id);\n    }\n\n    return (\n        <div\n            {...(canSort ? getSortAttributes(handleSort, sortDirection) : undefined)}\n            className={className}\n            data-align={align}\n            data-column-index={index}\n            role=\"columnheader\"\n            ref={setInternalRef}>\n            {isInternalColumn(id) ? (\n                children\n            ) : (\n                <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                    <span className=\"truncate\">{children}</span>\n                </Tooltip>\n            )}\n            {canSort ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <Menu\n                    canFreeze={canFreeze}\n                    canHide={canHide}\n                    className={cn('hidden group-hover/column:flex aria-expanded:!flex', {\n                        'ml-auto': align !== 'right',\n                        'ml-2': align === 'right',\n                    })}\n                    index={index}\n                    menu={meta.menu}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    scrollToIndex={scrollToIndex}\n                    table={table}\n                />\n            ) : null}\n            {canResize ? <Resizer isResizing={isResizing} onResize={handleResize} /> : null}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedHeaderProps<TType>) => JSX.Element;\n"],"names":["Header","props","children","column","header","scrollToIndex","table","tableMeta","options","meta","columnMeta","React","useMemo","columnDef","canSort","getCanSort","handleResize","getResizeHandler","handleSort","getToggleSortingHandler","handleHide","getToggleVisibilityHandler","hasGoto","isGotoAvailable","sorting","getState","filters","columnFilters","search","globalFilter","handleGoto","query","rowGoto","id","undefined","JSON","stringify","memoedProps","align","canFreeze","columnFreezing","isEnabled","canHide","getCanHide","canResize","getCanResize","hasMenu","isMenuAvailable","index","isFrozen","isFrozenColumn","isResizing","getIsResizing","length","getRowModel","rows","onGoto","onHide","onResize","onSort","sortDirection","getIsSorted","MemoedHeader","memo","className","cn","headerClassName","internalRef","setInternalRef","useState","useLayoutEffect","isInternalColumn","setColumnSizing","sizes","getBoundingClientRect","width","debugAll","console","log","getSortAttributes","role","ref","Tooltip","title","String","_meta$tooltip","tooltip","placement","SortIndicator","direction","Menu","menu","Resizer"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
 import React__default from 'react';
 import cn from 'classnames';
 import { Icon } from '../../../Icon/Icon.js';
-import { useGlobalKeyDown } from '../../../../hooks/useGlobalKeyDown.js';
 import { useLocalization } from '../../../Provider/Localization.js';
 import { Button } from '../../../Button/Button.js';
 import { Shortcut } from '../../../Shortcut/Shortcut.js';
@@ -15,14 +14,6 @@ function EditButton(props) {
     '!wcag-blue-100': tableMeta.editing.isEditing
   });
   const handleClick = () => tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);
-  useGlobalKeyDown({
-    key: 'e',
-    meta: true,
-    shift: false
-  }, event => {
-    event.preventDefault();
-    tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);
-  });
   return /*#__PURE__*/React__default.createElement(Button, {
     "aria-pressed": tableMeta.editing.isEditing,
     className: className,

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

@@ -1 +1 @@
-{"version":3,"file":"EditButton.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/EditButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Icon } from '../../../Icon/Icon';\nimport { Button } from '../../../Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { useGlobalKeyDown } from '../../../../hooks/useGlobalKeyDown';\nimport { Shortcut } from '../../../Shortcut/Shortcut';\n\ntype EditButtonProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElement> & {\n    table: RTable<TType>;\n};\n\nexport function EditButton<TType = unknown>(props: EditButtonProps<TType>) {\n    const { texts } = useLocalization();\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    const className = cn({\n        '!wcag-blue-100': tableMeta.editing.isEditing,\n    });\n    const handleClick = () => tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);\n\n    useGlobalKeyDown({ key: 'e', meta: true, shift: false }, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);\n    });\n\n    return (\n        <Button\n            aria-pressed={tableMeta.editing.isEditing}\n            className={className}\n            onClick={handleClick}\n            tooltip={\n                <>\n                    {texts.table3.editing.buttons.edit.tooltip}\n                    <Shortcut className=\"ml-2\" keys={{ key: 'e', meta: true, shift: false }} />\n                </>\n            }>\n            <Icon aria-hidden name=\"edit\" />\n            {texts.table3.editing.buttons.edit.text}\n        </Button>\n    );\n}\n"],"names":["EditButton","props","texts","useLocalization","tableMeta","table","options","meta","className","cn","editing","isEditing","handleClick","toggleEditing","useGlobalKeyDown","key","shift","event","preventDefault","React","Button","onClick","tooltip","table3","buttons","edit","Shortcut","keys","Icon","name","text"],"mappings":";;;;;;;;SAagBA,UAAUA,CAAkBC,KAA6B;EACrE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACC,IAAwB;EAC9D,MAAMC,SAAS,GAAGC,EAAE,CAAC;IACjB,gBAAgB,EAAEL,SAAS,CAACM,OAAO,CAACC;GACvC,CAAC;EACF,MAAMC,WAAW,GAAGA,MAAMR,SAAS,CAACM,OAAO,CAACG,aAAa,CAAC,CAACT,SAAS,CAACM,OAAO,CAACC,SAAS,CAAC;EAEvFG,gBAAgB,CAAC;IAAEC,GAAG,EAAE,GAAG;IAAER,IAAI,EAAE,IAAI;IAAES,KAAK,EAAE;GAAO,EAAGC,KAAoB;IAC1EA,KAAK,CAACC,cAAc,EAAE;IACtBd,SAAS,CAACM,OAAO,CAACG,aAAa,CAAC,CAACT,SAAS,CAACM,OAAO,CAACC,SAAS,CAAC;GAChE,CAAC;EAEF,oBACIQ,6BAACC,MAAM;oBACWhB,SAAS,CAACM,OAAO,CAACC,SAAS;IACzCH,SAAS,EAAEA,SAAS;IACpBa,OAAO,EAAET,WAAW;IACpBU,OAAO,eACHH,4DACKjB,KAAK,CAACqB,MAAM,CAACb,OAAO,CAACc,OAAO,CAACC,IAAI,CAACH,OAAO,eAC1CH,6BAACO,QAAQ;MAAClB,SAAS,EAAC,MAAM;MAACmB,IAAI,EAAE;QAAEZ,GAAG,EAAE,GAAG;QAAER,IAAI,EAAE,IAAI;QAAES,KAAK,EAAE;;MAAW;kBAGnFG,6BAACS,IAAI;;IAAaC,IAAI,EAAC;IAAS,EAC/B3B,KAAK,CAACqB,MAAM,CAACb,OAAO,CAACc,OAAO,CAACC,IAAI,CAACK,IAAI,CAClC;AAEjB;;;;"}
+{"version":3,"file":"EditButton.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/EditButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Icon } from '../../../Icon/Icon';\nimport { Button } from '../../../Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Shortcut } from '../../../Shortcut/Shortcut';\n\ntype EditButtonProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElement> & {\n    table: RTable<TType>;\n};\n\nexport function EditButton<TType = unknown>(props: EditButtonProps<TType>) {\n    const { texts } = useLocalization();\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    const className = cn({\n        '!wcag-blue-100': tableMeta.editing.isEditing,\n    });\n    const handleClick = () => tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);\n\n    return (\n        <Button\n            aria-pressed={tableMeta.editing.isEditing}\n            className={className}\n            onClick={handleClick}\n            tooltip={\n                <>\n                    {texts.table3.editing.buttons.edit.tooltip}\n                    <Shortcut className=\"ml-2\" keys={{ key: 'e', meta: true, shift: false }} />\n                </>\n            }>\n            <Icon aria-hidden name=\"edit\" />\n            {texts.table3.editing.buttons.edit.text}\n        </Button>\n    );\n}\n"],"names":["EditButton","props","texts","useLocalization","tableMeta","table","options","meta","className","cn","editing","isEditing","handleClick","toggleEditing","React","Button","onClick","tooltip","table3","buttons","edit","Shortcut","keys","key","shift","Icon","name","text"],"mappings":";;;;;;;SAYgBA,UAAUA,CAAkBC,KAA6B;EACrE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACC,IAAwB;EAC9D,MAAMC,SAAS,GAAGC,EAAE,CAAC;IACjB,gBAAgB,EAAEL,SAAS,CAACM,OAAO,CAACC;GACvC,CAAC;EACF,MAAMC,WAAW,GAAGA,MAAMR,SAAS,CAACM,OAAO,CAACG,aAAa,CAAC,CAACT,SAAS,CAACM,OAAO,CAACC,SAAS,CAAC;EAEvF,oBACIG,6BAACC,MAAM;oBACWX,SAAS,CAACM,OAAO,CAACC,SAAS;IACzCH,SAAS,EAAEA,SAAS;IACpBQ,OAAO,EAAEJ,WAAW;IACpBK,OAAO,eACHH,4DACKZ,KAAK,CAACgB,MAAM,CAACR,OAAO,CAACS,OAAO,CAACC,IAAI,CAACH,OAAO,eAC1CH,6BAACO,QAAQ;MAACb,SAAS,EAAC,MAAM;MAACc,IAAI,EAAE;QAAEC,GAAG,EAAE,GAAG;QAAEhB,IAAI,EAAE,IAAI;QAAEiB,KAAK,EAAE;;MAAW;kBAGnFV,6BAACW,IAAI;;IAAaC,IAAI,EAAC;IAAS,EAC/BxB,KAAK,CAACgB,MAAM,CAACR,OAAO,CAACS,OAAO,CAACC,IAAI,CAACO,IAAI,CAClC;AAEjB;;;;"}

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

@@ -22,6 +22,7 @@ function Filters(props) {
     table
   } = props;
   const {
+    locale,
     texts
   } = useLocalization();
   const ref = React__default.useRef(null);
@@ -102,7 +103,7 @@ function Filters(props) {
       className: "mb-0 inline-flex"
     }, texts.table3.filters.button), /*#__PURE__*/React__default.createElement("p", {
       className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
-    }, texts.table3.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(total))))), /*#__PURE__*/React__default.createElement("div", {
+    }, texts.table3.filters.total.replace('[CURRENT]', new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', new Intl.NumberFormat(locale).format(total))))), /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col gap-2"
     }, filters.map((filter, index) => /*#__PURE__*/React__default.createElement(Filter, {
       key: `filter_${index}`,