@economic/taco 1.40.3 → 2.0.0-alpha.173

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

@@ -0,0 +1,283 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Input } from '../../../../Input/Input.js';
+import { deselectInputValue } from '../../../../../utils/input.js';
+import { Datepicker } from '../../../../Datepicker/Datepicker.js';
+import { Switch } from '../../../../Switch/Switch.js';
+import { getCurrentRowCellElement } from '../../../util/columns.js';
+import { getInputAppearanceClassnames, getCellAlignmentClasses } from '../styles.js';
+import { globalFilterFn, columnFilterFn } from '../../../util/filtering.js';
+import _ from 'lodash-es';
+import { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions.js';
+import { Indicator, IndicatorReason } from './Indicator.js';
+import { hasChanged, willRowMoveAfterSorting } from '../../../util/editing.js';
+
+function EditingCell(props) {
+  return /*#__PURE__*/React__default.createElement(MemoedEditingCell, Object.assign({}, props));
+}
+const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$curre;
+  const {
+    cell,
+    column,
+    index,
+    getValue,
+    table,
+    tableRef,
+    row
+  } = props;
+  const tableMeta = table.options.meta;
+  const columnMeta = column.columnDef.meta;
+  const cellRef = React__default.useRef(null);
+  const controlRef = React__default.useRef(null);
+  const handleChange = value => tableMeta.editing.setCellValue(cell, value);
+  const value = (_tableMeta$editing$ge = tableMeta.editing.getCellValue(cell)) !== null && _tableMeta$editing$ge !== void 0 ? _tableMeta$editing$ge : getValue();
+  const handleFocus = event => {
+    var _event$target;
+    // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.
+    const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;
+    const tableElement = tableRef.current;
+    if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {
+      var _cellRef$current;
+      const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);
+      const cellRect = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.getBoundingClientRect();
+      const lastFrozenRect = lastFrozenColumnElement === null || lastFrozenColumnElement === void 0 ? void 0 : lastFrozenColumnElement.getBoundingClientRect();
+      const tableRect = tableElement.getBoundingClientRect();
+      // Check for pinned columns overlap
+      if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {
+        const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;
+        tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);
+        // Check for editing actions overlap
+      } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {
+        const spaceBetweenCellAndEditingActions = 10;
+        tableElement.scrollTo(
+        // Need to take into account if table has been already scrolled.
+        tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions, tableElement.scrollTop);
+      }
+    }
+    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.select) {
+      requestAnimationFrame(() => {
+        event.target.select();
+      });
+    }
+  };
+  const handleBlur = () => {
+    tableMeta.editing.setDetailModeEditing(false);
+  };
+  // row move indicator
+  const moveReason = (_tableMeta$editing$ro = tableMeta.editing.rowMoveReason[cell.column.id]) !== null && _tableMeta$editing$ro !== void 0 ? _tableMeta$editing$ro : null;
+  const rows = table.getRowModel().rows;
+  const isCurrentRow = ((_rows$tableMeta$curre = rows[tableMeta.currentRow.currentRowIndex]) === null || _rows$tableMeta$curre === void 0 ? void 0 : _rows$tableMeta$curre.id) === row.id;
+  const mountNode = React__default.useMemo(() => {
+    if (moveReason) {
+      var _cellRef$current2, _cellRef$current2$par;
+      return (_cellRef$current2 = cellRef.current) === null || _cellRef$current2 === void 0 ? void 0 : (_cellRef$current2$par = _cellRef$current2.parentElement) === null || _cellRef$current2$par === void 0 ? void 0 : _cellRef$current2$par.firstChild;
+    }
+    return null;
+  }, [moveReason, cellRef]);
+  const removeMoveReason = () => {
+    tableMeta.editing.removeRowMoveReason(cell.column.id);
+  };
+  React__default.useEffect(() => {
+    // To avoid reseting move reason on another row hover,
+    // we need to check for changes only if value got changed in the current row.
+    if (!isCurrentRow) {
+      return;
+    }
+    if (hasChanged(getValue(), value)) {
+      const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);
+      tableMeta.editing.setRowMoveReason({
+        [cell.column.id]: moveReason
+      });
+    } else {
+      removeMoveReason();
+    }
+    return removeMoveReason;
+  }, [value]);
+  const className = cn('!px-2 py-[var(--table3-row-padding)]',
+  // component overrides - grayscale for editing hover
+  '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100', typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && /*#__PURE__*/React__default.createElement(Indicator, {
+    reason: moveReason,
+    columnName: String(cell.column.columnDef.header),
+    mountNode: mountNode,
+    validationErrors: []
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    "data-column-index": index,
+    role: "cell",
+    ref: cellRef
+  }, /*#__PURE__*/React__default.createElement(Control, {
+    align: columnMeta.align,
+    column: cell.column,
+    data: cell.row.original,
+    initialValue: getValue(),
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onChange: handleChange,
+    ref: controlRef,
+    table: table,
+    tableRef: tableRef,
+    value: value,
+    cell: cell
+  })));
+});
+const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, ref) {
+  var _column$columnDef$met, _ref$current;
+  const {
+    align,
+    column,
+    data,
+    initialValue,
+    onChange: handleChange,
+    table,
+    tableRef,
+    value,
+    cell,
+    ...attributes
+  } = props;
+  const tableMeta = table.options.meta;
+  const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.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));
+  const handleKeyDown = event => {
+    const target = event.target;
+    if (target.readOnly) {
+      return;
+    }
+    // prevent row arrow shortcuts triggering when in detail mode
+    if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      // Revert to initial value if escape was pressed in detail mode.
+      if (tableMeta.editing.detailModeEditing) {
+        tableMeta.editing.setDetailModeEditing(false);
+        if (value !== initialValue) {
+          // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,
+          // and in this case we need to completely remove row from editing state to avoid saving the same data as original.
+          const changedRow = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};
+          const rowEdtitingDataWithInitialValue = {
+            ...changedRow,
+            [cell.column.id]: initialValue
+          };
+          if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {
+            tableMeta.editing.resetChange(cell.row.id);
+          } else {
+            handleChange(initialValue);
+          }
+        }
+      } else {
+        var _tableRef$current;
+        tableMeta.editing.toggleEditing(false);
+        (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+      }
+      return;
+    }
+    // Should enable/disable editing mode if Enter was clicked
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (!tableMeta.editing.detailModeEditing) {
+        deselectInputValue(target);
+      } else {
+        var _target$select;
+        target === null || target === void 0 ? void 0 : (_target$select = target.select) === null || _target$select === void 0 ? void 0 : _target$select.call(target);
+      }
+      // Ketydown "Enter" should toggle edititng mode
+      tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);
+      return;
+    }
+  };
+  const handleDatepickerChange = event => {
+    // When datepicker looses focus, it triggers change event, even if date wasn't changed,
+    // so adding additional check here to prevent adding change to the edititng state.
+    const originalDate = cell.row.original[cell.column.id];
+    const changedDate = event.detail;
+    if (hasChanged(originalDate, changedDate)) {
+      handleChange(changedDate);
+    }
+  };
+  if (typeof controlRenderer === 'function') {
+    return controlRenderer({
+      ...attributes,
+      ref,
+      setValue: nextValue => {
+        if (nextValue !== value) {
+          handleChange(nextValue);
+        }
+      },
+      value
+    }, data);
+  } else if (controlRenderer === 'datepicker') {
+    const handleDatepickerKeyDown = event => {
+      handleKeyDown(event);
+      if (/^[a-z0-9]$/i.test(event.key)) {
+        tableMeta.editing.setDetailModeEditing(true);
+        return;
+      }
+    };
+    return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
+      className: cn({
+        '[&_input]:!yt-focus-dark': isCellInDetailMode
+      }),
+      onChange: handleDatepickerChange,
+      onKeyDown: handleDatepickerKeyDown,
+      ref: ref,
+      value: value
+    }));
+  } else if (controlRenderer === 'switch') {
+    return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
+      className: "mx-2 mt-1.5",
+      checked: Boolean(value),
+      onChange: handleChange,
+      ref: ref
+    }));
+  }
+  const isNumber = typeof value === 'number';
+  const handleInputKeyDown = event => {
+    handleKeyDown(event);
+    // 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;
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
+    className: cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {
+      '!yt-focus-dark': isCellInDetailMode
+    }),
+    onChange: event => {
+      handleChange(event.target.value);
+    },
+    onKeyDown: handleInputKeyDown,
+    ref: ref,
+    type: isNumber ? 'number' : undefined,
+    value: isNumber ? value : String(value !== null && value !== void 0 ? value : '')
+  }));
+});
+function getRowMoveReason(table, rowIndex, rowValues, cell, newValue) {
+  var _table$getState$sorti;
+  let rowMoveReason = null;
+  const {
+    globalFilter
+  } = table.getState();
+  const isFilteredByGlobalFilter = Object.values({
+    ...rowValues,
+    [cell.id]: newValue
+  }).some(cellValue =>
+  // Global filter can be undefined when there is no text being searched so we pass an empty string to
+  // globalFilterFn as query in that case.
+  globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : ''));
+  if (!isFilteredByGlobalFilter) {
+    rowMoveReason = IndicatorReason.SEARCH;
+  } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue())) {
+    rowMoveReason = IndicatorReason.FILTER;
+  } else if (!rowMoveReason && cell.column.getIsSorted() && willRowMoveAfterSorting(newValue, cell, rowIndex, table.getRowModel().rows, !!((_table$getState$sorti = table.getState().sorting.find(s => s.id === cell.column.id)) !== null && _table$getState$sorti !== void 0 && _table$getState$sorti.desc))) {
+    rowMoveReason = IndicatorReason.SORTING;
+  }
+  return rowMoveReason;
+}
+
+export { EditingCell };
+//# sourceMappingURL=EditingCell.js.map

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

@@ -0,0 +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 { Input } from '../../../../Input/Input';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\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 { deselectInputValue } from '../../../../../utils/input';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\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    return <MemoedEditingCell<TType> {...props} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType>;\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const { cell, column, index, getValue, table, tableRef, row } = props;\n    const tableMeta = table.options.meta as TableMeta<unknown>;\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 className = cn(\n        '!px-2 py-[var(--table3-row-padding)]',\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        typeof columnMeta.className === 'function' ? columnMeta.className(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-column-index={index} role=\"cell\" ref={cellRef}>\n                <Control\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                />\n            </div>\n        </>\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nconst Control = React.forwardRef<HTMLElement, any>(function Control(props, ref) {\n    const { align, column, data, initialValue, onChange: handleChange, table, tableRef, value, cell, ...attributes } = props;\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\n    const controlRenderer = column.columnDef.meta?.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        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.preventDefault();\n            event.stopPropagation();\n        }\n\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            // Revert to initial value if escape was pressed in detail mode.\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 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,\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={ref}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={ref} />;\n    }\n\n    const isNumber = typeof value === 'number';\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\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    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={ref as React.Ref<HTMLInputElement>}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n});\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","React","MemoedEditingCell","memo","cell","column","index","getValue","table","tableRef","row","tableMeta","options","meta","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","rowMoveReason","id","rows","getRowModel","isCurrentRow","currentRow","currentRowIndex","mountNode","useMemo","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","className","cn","Indicator","reason","columnName","String","header","validationErrors","role","ref","Control","align","data","initialValue","onBlur","onFocus","onChange","forwardRef","attributes","controlRenderer","control","isCellInDetailMode","detailModeEditing","contains","document","activeElement","handleKeyDown","readOnly","key","preventDefault","stopPropagation","changedRow","changes","rowEdtitingDataWithInitialValue","_","isEqual","resetChange","toggleEditing","focus","deselectInputValue","handleDatepickerChange","originalDate","changedDate","detail","setValue","nextValue","handleDatepickerKeyDown","test","Datepicker","onKeyDown","Switch","checked","Boolean","isNumber","handleInputKeyDown","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","sorting","find","s","desc","SORTING"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/{Table2/components/column → Table3/components/columns/cell}/Indicator.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
-import { Icon } from '../../../Icon/Icon.js';
-import { Tooltip } from '../../../Tooltip/Tooltip.js';
-import { useLocalization } from '../../../Provider/Localization.js';
+import { Icon } from '../../../../Icon/Icon.js';
+import { Tooltip } from '../../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
 import ReactDOM from 'react-dom';
 
 var IndicatorReason;
@@ -18,16 +18,16 @@ const useIndicatorText = reason => {
   } = useLocalization();
   switch (reason) {
     case IndicatorReason.FILTER:
-      title = texts.table2.editing.rowIndicator.rowWillBeHidden;
-      description = texts.table2.editing.rowIndicator.rowWillMoveReasonFilter;
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;
       break;
     case IndicatorReason.SEARCH:
-      title = texts.table2.editing.rowIndicator.rowWillBeHidden;
-      description = texts.table2.editing.rowIndicator.rowWillMoveReasonSearch;
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;
       break;
     case IndicatorReason.SORTING:
-      title = texts.table2.editing.rowIndicator.rowWillMove;
-      description = texts.table2.editing.rowIndicator.rowWillMoveReasonSorting;
+      title = texts.table3.editing.rowIndicator.rowWillMove;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;
       break;
   }
   return {
@@ -43,20 +43,21 @@ const Indicator = ({
 }) => {
   const container = React__default.useMemo(() => {
     const element = document.createElement('div');
-    element.className += 'z-[3] rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    element.className += 'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
     return element;
   }, []);
   const indicatorText = useIndicatorText(reason);
   const hasValidationErrorsInRow = !!validationErrors;
   React__default.useEffect(() => {
     // mountNode could be null when rows are filtered
-    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('relative');
+    // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('!z-[21]', 'relative');
     mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
     return () => {
-      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('relative');
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('!z-[21]', 'relative');
       mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
     };
-  }, [hasValidationErrorsInRow]);
+  }, [hasValidationErrorsInRow, mountNode]);
   // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
   // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {

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

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { Icon } from '../../../../Icon/Icon';\n\nexport enum IndicatorReason {\n    SEARCH = 'SEARCH',\n    SORTING = 'SORTING',\n    FILTER = 'FILTER',\n}\n\nexport const useIndicatorText = reason => {\n    let title = '';\n    let description = '';\n\n    const { texts } = useLocalization();\n\n    switch (reason) {\n        case IndicatorReason.FILTER:\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n            break;\n        case IndicatorReason.SEARCH:\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n            break;\n        case IndicatorReason.SORTING:\n            title = texts.table3.editing.rowIndicator.rowWillMove;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n            break;\n    }\n\n    return { title, description };\n};\n\nexport type IndicatorProps = {\n    reason: IndicatorReason;\n    columnName: string;\n    mountNode: Element | null;\n    validationErrors: any;\n};\nexport const Indicator = ({ reason, columnName, mountNode, validationErrors }: IndicatorProps) => {\n    const container = React.useMemo(() => {\n        const element = document.createElement('div');\n        element.className +=\n            'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';\n\n        return element;\n    }, []);\n\n    const indicatorText = useIndicatorText(reason);\n\n    const hasValidationErrorsInRow = !!validationErrors;\n\n    React.useEffect(() => {\n        // mountNode could be null when rows are filtered\n        // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.\n        mountNode?.classList.add('!z-[21]', 'relative');\n        mountNode?.appendChild(container);\n\n        return () => {\n            mountNode?.classList.remove('!z-[21]', 'relative');\n            mountNode?.removeChild(container);\n        };\n    }, [hasValidationErrorsInRow, mountNode]);\n\n    // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring\n    // and being able to use Taco Tooltip component in side the visual indicator, portal is used.\n    return ReactDOM.createPortal(\n        <Tooltip title={indicatorText.description.replace('[COLUMN]', columnName)}>\n            <span className=\"flex gap-1 hover:cursor-pointer\">\n                <Icon name=\"info\" className=\"!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {indicatorText.title}\n            </span>\n        </Tooltip>,\n        container\n    );\n};\n"],"names":["IndicatorReason","useIndicatorText","reason","title","description","texts","useLocalization","FILTER","table3","editing","rowIndicator","rowWillBeHidden","rowWillMoveReasonFilter","SEARCH","rowWillMoveReasonSearch","SORTING","rowWillMove","rowWillMoveReasonSorting","Indicator","columnName","mountNode","validationErrors","container","React","useMemo","element","document","createElement","className","indicatorText","hasValidationErrorsInRow","useEffect","classList","add","appendChild","remove","removeChild","ReactDOM","createPortal","Tooltip","replace","Icon","name"],"mappings":";;;;;;IAMYA;AAAZ,WAAYA,eAAe;EACvBA,oCAAiB;EACjBA,sCAAmB;EACnBA,oCAAiB;AACrB,CAAC,EAJWA,eAAe,KAAfA,eAAe;MAMdC,gBAAgB,GAAGC,MAAM;EAClC,IAAIC,KAAK,GAAG,EAAE;EACd,IAAIC,WAAW,GAAG,EAAE;EAEpB,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAEnC,QAAQJ,MAAM;IACV,KAAKF,eAAe,CAACO,MAAM;MACvBJ,KAAK,GAAGE,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACC,eAAe;MACzDP,WAAW,GAAGC,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACE,uBAAuB;MACvE;IACJ,KAAKZ,eAAe,CAACa,MAAM;MACvBV,KAAK,GAAGE,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACC,eAAe;MACzDP,WAAW,GAAGC,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACI,uBAAuB;MACvE;IACJ,KAAKd,eAAe,CAACe,OAAO;MACxBZ,KAAK,GAAGE,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACM,WAAW;MACrDZ,WAAW,GAAGC,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACO,wBAAwB;MACxE;;EAGR,OAAO;IAAEd,KAAK;IAAEC;GAAa;AACjC;MAQac,SAAS,GAAG,CAAC;EAAEhB,MAAM;EAAEiB,UAAU;EAAEC,SAAS;EAAEC;CAAkC;EACzF,MAAMC,SAAS,GAAGC,cAAK,CAACC,OAAO,CAAC;IAC5B,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC7CF,OAAO,CAACG,SAAS,IACb,iIAAiI;IAErI,OAAOH,OAAO;GACjB,EAAE,EAAE,CAAC;EAEN,MAAMI,aAAa,GAAG5B,gBAAgB,CAACC,MAAM,CAAC;EAE9C,MAAM4B,wBAAwB,GAAG,CAAC,CAACT,gBAAgB;EAEnDE,cAAK,CAACQ,SAAS,CAAC;;;IAGZX,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,SAAS,CAACC,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC;IAC/Cb,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEc,WAAW,CAACZ,SAAS,CAAC;IAEjC,OAAO;MACHF,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,SAAS,CAACG,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC;MAClDf,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEgB,WAAW,CAACd,SAAS,CAAC;KACpC;GACJ,EAAE,CAACQ,wBAAwB,EAAEV,SAAS,CAAC,CAAC;;;EAIzC,oBAAOiB,QAAQ,CAACC,YAAY,eACxBf,6BAACgB,OAAO;IAACpC,KAAK,EAAE0B,aAAa,CAACzB,WAAW,CAACoC,OAAO,CAAC,UAAU,EAAErB,UAAU;kBACpEI;IAAMK,SAAS,EAAC;kBACZL,6BAACkB,IAAI;IAACC,IAAI,EAAC,MAAM;IAACd,SAAS,EAAC;IAAuD,EAClFC,aAAa,CAAC1B,KAAK,CACjB,CACD,EACVmB,SAAS,CACZ;AACL;;;;"}

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

@@ -0,0 +1,50 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { isFrozenColumn } from '../../../util/columns.js';
+
+function Footer(props) {
+  const {
+    column,
+    header,
+    table
+  } = props;
+  const meta = React__default.useMemo(() => column.columnDef.meta, []);
+  // Footers are heavily memoized because performance in our table is critical
+  // be careful and selective about props that you pass to the Footer
+  const memoedProps = {
+    align: meta.align,
+    id: header.id,
+    index: header.index,
+    isFrozen: isFrozenColumn(header.index, table),
+    meta,
+    table
+  };
+  return /*#__PURE__*/React__default.createElement(MemoedFooter, Object.assign({}, memoedProps));
+}
+const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(props) {
+  const {
+    align,
+    id,
+    index,
+    isFrozen,
+    meta,
+    table
+  } = props;
+  const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative', {
+    'z-30': isFrozen
+  });
+  if (table.options.debugAll) {
+    console.log('footer render', id);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    "data-align": align,
+    "data-column-index": index,
+    role: "cell"
+  }, typeof meta.footer === 'function' ? /*#__PURE__*/React__default.createElement("span", {
+    className: "flex-grow truncate"
+  }, meta.footer(table.getRowModel().rows.map(row => row.original[id]))) : null);
+});
+
+export { Footer };
+//# sourceMappingURL=Footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext } from '@tanstack/react-table';\nimport { isFrozenColumn } from '../../../util/columns';\nimport { ColumnAlignment, Table3ColumnFooterRenderer } from '../../../types';\n\nexport type FooterProps<TType = unknown> = HeaderContext<TType, unknown> & {\n    renderer?: Table3ColumnFooterRenderer<TType>;\n};\n\nexport function Footer<TType = unknown>(props: FooterProps<TType>) {\n    const { column, header, table } = props;\n    const meta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n\n    // Footers are heavily memoized because performance in our table is critical\n    // be careful and selective about props that you pass to the Footer\n    const memoedProps = {\n        align: meta.align,\n        id: header.id,\n        index: header.index,\n        isFrozen: isFrozenColumn(header.index, table),\n        meta,\n        table,\n    };\n\n    return <MemoedFooter<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedFooterProps<TType = unknown> = Omit<FooterProps<TType>, 'header' | 'column' | 'scrollToIndex'> & {\n    align?: ColumnAlignment;\n    id: string;\n    index: number;\n    isFrozen: boolean;\n    meta: ColumnMeta<TType, unknown>;\n};\n\nconst MemoedFooter = React.memo(function MemoedFooter<TType = unknown>(props: MemoedFooterProps<TType>) {\n    const { align, id, index, isFrozen, meta, table } = props;\n\n    const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative', {\n        'z-30': isFrozen,\n    });\n\n    if (table.options.debugAll) {\n        console.log('footer render', id);\n    }\n\n    return (\n        <div className={className} data-align={align} data-column-index={index} role=\"cell\">\n            {typeof meta.footer === 'function' ? (\n                <span className=\"flex-grow truncate\">{meta.footer(table.getRowModel().rows.map(row => row.original[id]))}</span>\n            ) : null}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedFooterProps<TType>) => JSX.Element;\n"],"names":["Footer","props","column","header","table","meta","React","useMemo","columnDef","memoedProps","align","id","index","isFrozen","isFrozenColumn","MemoedFooter","memo","className","cn","options","debugAll","console","log","role","footer","getRowModel","rows","map","row","original"],"mappings":";;;;SAUgBA,MAAM,CAAkBC,KAAyB;EAC7D,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGH,KAAK;EACvC,MAAMI,IAAI,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAML,MAAM,CAACM,SAAS,CAACH,IAAI,EAAE,EAAE,CAA+B;;;EAIzF,MAAMI,WAAW,GAAG;IAChBC,KAAK,EAAEL,IAAI,CAACK,KAAK;IACjBC,EAAE,EAAER,MAAM,CAACQ,EAAE;IACbC,KAAK,EAAET,MAAM,CAACS,KAAK;IACnBC,QAAQ,EAAEC,cAAc,CAACX,MAAM,CAACS,KAAK,EAAER,KAAK,CAAC;IAC7CC,IAAI;IACJD;GACH;EAED,oBAAOE,6BAACS,YAAY,oBAAYN,WAAW,EAAI;AACnD;AAWA,MAAMM,YAAY,gBAAGT,cAAK,CAACU,IAAI,CAAC,SAASD,YAAY,CAAkBd,KAA+B;EAClG,MAAM;IAAES,KAAK;IAAEC,EAAE;IAAEC,KAAK;IAAEC,QAAQ;IAAER,IAAI;IAAED;GAAO,GAAGH,KAAK;EAEzD,MAAMgB,SAAS,GAAGC,EAAE,CAAC,0FAA0F,EAAE;IAC7G,MAAM,EAAEL;GACX,CAAC;EAEF,IAAIT,KAAK,CAACe,OAAO,CAACC,QAAQ,EAAE;IACxBC,OAAO,CAACC,GAAG,CAAC,eAAe,EAAEX,EAAE,CAAC;;EAGpC,oBACIL;IAAKW,SAAS,EAAEA,SAAS;kBAAcP,KAAK;yBAAqBE,KAAK;IAAEW,IAAI,EAAC;KACxE,OAAOlB,IAAI,CAACmB,MAAM,KAAK,UAAU,gBAC9BlB;IAAMW,SAAS,EAAC;KAAsBZ,IAAI,CAACmB,MAAM,CAACpB,KAAK,CAACqB,WAAW,EAAE,CAACC,IAAI,CAACC,GAAG,CAACC,GAAG,IAAIA,GAAG,CAACC,QAAQ,CAAClB,EAAE,CAAC,CAAC,CAAC,CAAQ,GAChH,IAAI,CACN;AAEd,CAAC,CAAsE;;;;"}

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

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { useLocalization } from '../../../../Provider/Localization.js';
+
+function Summary(props) {
+  const {
+    length,
+    table
+  } = props;
+  const {
+    locale,
+    texts
+  } = useLocalization();
+  let label;
+  let count;
+  // row selection
+  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));
+  } 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)]"
+  }, label, "\u00A0", count);
+}
+
+export { Summary };
+//# sourceMappingURL=Summary.js.map

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

@@ -0,0 +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,OAAO,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;;;;"}

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

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import { useLocalization } from '../../../../Provider/Localization.js';
+import { Popover } from '../../../../Popover/Popover.js';
+import { SearchInput } from '../../../../SearchInput/SearchInput.js';
+
+function GotoPopover(props) {
+  const {
+    onGoto: handleGoto,
+    trigger,
+    ...popoverProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const handleSearch = value => handleGoto(value);
+  return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
+    anchor: trigger
+  }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement(SearchInput, {
+    "aria-label": texts.table3.columns.menu.gotoRow,
+    name: "query",
+    onSearch: handleSearch,
+    placeholder: `${texts.table3.columns.menu.gotoRow}...`
+  })));
+}
+
+export { GotoPopover };
+//# sourceMappingURL=Goto.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Goto.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Goto.tsx"],"sourcesContent":["import React from 'react';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Popover, PopoverProps } from '../../../../Popover/Popover';\nimport { SearchInput } from '../../../../SearchInput/SearchInput';\n\nexport type GotoProps = PopoverProps & {\n    onGoto: (query: string) => Promise<void>;\n};\nexport function GotoPopover(props: GotoProps) {\n    const { onGoto: handleGoto, trigger, ...popoverProps } = props;\n    const { texts } = useLocalization();\n\n    const handleSearch = value => handleGoto(value);\n\n    return (\n        <Popover {...popoverProps} anchor={trigger}>\n            <Popover.Content>\n                <SearchInput\n                    aria-label={texts.table3.columns.menu.gotoRow}\n                    name=\"query\"\n                    onSearch={handleSearch}\n                    placeholder={`${texts.table3.columns.menu.gotoRow}...`}\n                />\n            </Popover.Content>\n        </Popover>\n    );\n}\n"],"names":["GotoPopover","props","onGoto","handleGoto","trigger","popoverProps","texts","useLocalization","handleSearch","value","React","Popover","anchor","Content","SearchInput","table3","columns","menu","gotoRow","name","onSearch","placeholder"],"mappings":";;;;;SAQgBA,WAAW,CAACC,KAAgB;EACxC,MAAM;IAAEC,MAAM,EAAEC,UAAU;IAAEC,OAAO;IAAE,GAAGC;GAAc,GAAGJ,KAAK;EAC9D,MAAM;IAAEK;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,YAAY,GAAGC,KAAK,IAAIN,UAAU,CAACM,KAAK,CAAC;EAE/C,oBACIC,6BAACC,OAAO,oBAAKN,YAAY;IAAEO,MAAM,EAAER;mBAC/BM,6BAACC,OAAO,CAACE,OAAO,qBACZH,6BAACI,WAAW;kBACIR,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,IAAI,CAACC,OAAO;IAC7CC,IAAI,EAAC,OAAO;IACZC,QAAQ,EAAEZ,YAAY;IACtBa,WAAW,KAAKf,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,IAAI,CAACC;IAC5C,CACY,CACZ;AAElB;;;;"}