@economic/taco 2.15.0 → 2.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/components/Drawer/Drawer.d.ts +5 -1
  2. package/dist/components/Provider/Localization.d.ts +19 -0
  3. package/dist/components/SearchInput2/SearchInput2.d.ts +1 -0
  4. package/dist/components/Table3/components/alert/ErrorAlert.d.ts +10 -0
  5. package/dist/components/Table3/components/columns/cell/DisplayCell.d.ts +5 -2
  6. package/dist/components/Table3/components/columns/cell/EditingCell.d.ts +3 -0
  7. package/dist/components/Table3/components/columns/cell/Highlight.d.ts +2 -0
  8. package/dist/components/Table3/components/columns/internal/EditingActions.d.ts +1 -1
  9. package/dist/components/Table3/components/rows/Row.d.ts +2 -0
  10. package/dist/components/Table3/components/rows/RowContext.d.ts +1 -0
  11. package/dist/components/Table3/hooks/features/useEditing.d.ts +12 -11
  12. package/dist/components/Table3/hooks/features/usePauseShortcuts.d.ts +5 -0
  13. package/dist/components/Table3/hooks/features/useSearch.d.ts +2 -0
  14. package/dist/components/Table3/hooks/features/useValidation.d.ts +13 -0
  15. package/dist/components/Table3/hooks/useTable.d.ts +4 -0
  16. package/dist/components/Table3/types.d.ts +26 -1
  17. package/dist/components/Table3/util/editing.d.ts +6 -0
  18. package/dist/esm/index.css +108 -33
  19. package/dist/esm/packages/taco/src/components/Drawer/Drawer.js +7 -2
  20. package/dist/esm/packages/taco/src/components/Drawer/Drawer.js.map +1 -1
  21. package/dist/esm/packages/taco/src/components/Provider/Localization.js +19 -0
  22. package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
  23. package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js +4 -0
  24. package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js.map +1 -1
  25. package/dist/esm/packages/taco/src/components/Table3/Table3.js +7 -1
  26. package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
  27. package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js +154 -0
  28. package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js.map +1 -0
  29. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Cell.js +51 -6
  30. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Cell.js.map +1 -1
  31. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js +7 -55
  32. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js.map +1 -1
  33. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js +69 -37
  34. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js.map +1 -1
  35. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js +17 -17
  36. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map +1 -1
  37. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Highlight.js +41 -0
  38. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Highlight.js.map +1 -0
  39. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js +21 -12
  40. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js.map +1 -1
  41. package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Footer.js +1 -1
  42. package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Footer.js.map +1 -1
  43. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js +57 -17
  44. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js.map +1 -1
  45. package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js +39 -31
  46. package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js.map +1 -1
  47. package/dist/esm/packages/taco/src/components/Table3/components/rows/RowContext.js +2 -1
  48. package/dist/esm/packages/taco/src/components/Table3/components/rows/RowContext.js.map +1 -1
  49. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js +8 -1
  50. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js.map +1 -1
  51. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js +48 -1
  52. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js.map +1 -1
  53. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useEditing.js +185 -101
  54. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useEditing.js.map +1 -1
  55. package/dist/esm/packages/taco/src/components/Table3/hooks/features/usePauseShortcuts.js +12 -0
  56. package/dist/esm/packages/taco/src/components/Table3/hooks/features/usePauseShortcuts.js.map +1 -0
  57. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSearch.js +4 -1
  58. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSearch.js.map +1 -1
  59. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useValidation.js +178 -0
  60. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useValidation.js.map +1 -0
  61. package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js +1 -1
  62. package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map +1 -1
  63. package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js +8 -2
  64. package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js.map +1 -1
  65. package/dist/esm/packages/taco/src/components/Table3/strategies/virtualised.js +1 -1
  66. package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
  67. package/dist/esm/packages/taco/src/components/Table3/util/editing.js +21 -1
  68. package/dist/esm/packages/taco/src/components/Table3/util/editing.js.map +1 -1
  69. package/dist/index.css +108 -33
  70. package/dist/taco.cjs.development.js +2605 -1970
  71. package/dist/taco.cjs.development.js.map +1 -1
  72. package/dist/taco.cjs.production.min.js +1 -1
  73. package/dist/taco.cjs.production.min.js.map +1 -1
  74. package/package.json +2 -2
  75. package/types.json +10973 -7880
@@ -1 +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 currentRowIndex = tableMeta.currentRow.currentRowIndex;\n const isCurrentRow = currentRowIndex !== undefined && rows[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 'py-[calc(var(--table3-cell-padding-y)_-_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 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\n className={className}\n data-align={columnMeta.align}\n data-column-index={index}\n data-editable\n role=\"cell\"\n 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","currentRowIndex","currentRow","isCurrentRow","_rows$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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"}
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 { Table3ColumnControlRenderer, 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';\nimport { Field } from '../../../../Field/Field';\nimport { Highlight } from './Highlight';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n highlighted?: boolean;\n highlightedAsCurrent?: boolean;\n children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n const { cell, table } = props;\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 = table.options.meta as TableMeta<TType>;\n const error = tableMeta.validation.getCellError(cell);\n return <MemoedEditingCell<TType> {...props} error={error} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n isHovered: boolean;\n tableMeta: TableMeta<TType>;\n error?: string;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const { cell, column, index, getValue, table, tableRef, row, tableMeta, error, highlighted, highlightedAsCurrent } = props;\n\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 if (tableMeta.editing.changes?.[cell.row.id]) {\n tableMeta.validation.validate(cell.row.id, tableMeta.editing.changes[cell.row.id] as TType, cell.column.id);\n }\n };\n\n // row move indicator\n const moveReason = tableMeta.editing.rowMoveReason?.[cell.column.id] || null;\n const rows = table.getRowModel().rows;\n const currentRowIndex = tableMeta.currentRow.currentRowIndex;\n const isCurrentRow = currentRowIndex !== undefined && rows[currentRowIndex]?.id === row.id;\n const mountNode = React.useMemo(() => {\n if (moveReason !== null && isCurrentRow && !error) {\n return cellRef.current?.parentElement?.firstChild as Element | null;\n }\n return null;\n }, [moveReason, isCurrentRow, error, cellRef]);\n\n const removeMoveReason = () => {\n tableMeta.editing.removeRowMoveReason();\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 || error) {\n if (tableMeta.editing.rowMoveReason) {\n removeMoveReason();\n }\n return;\n }\n\n if (hasChanged(getValue(), value)) {\n const moveReason = getRowMoveReason(\n table,\n row.index,\n row.original,\n cell,\n value,\n tableMeta.search.excludeUnmatchedResults\n );\n tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n } else {\n removeMoveReason();\n }\n return removeMoveReason;\n }, [value, tableMeta.currentRow.currentRowIndex, tableMeta.search.excludeUnmatchedResults, error]);\n\n const controlRenderer = column.columnDef.meta?.control as Table3ColumnControlRenderer;\n\n const className = cn(\n 'py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]',\n {\n // Textarea control is positioned absolute, when column is in enableTruncate mode, so the cell need to be positioned relative\n relative: controlRenderer === 'textarea' && columnMeta.enableTruncate,\n },\n typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className\n );\n\n const fieldClassName = cn('!min-h-0 w-full !pb-0', {\n '!pb-3': !!error,\n });\n\n const content = (\n <Field message={error} invalid={!!error} className={fieldClassName}>\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 error={error}\n tabIndex={isCurrentRow ? 0 : -1}\n isCurrentRow={isCurrentRow}\n />\n </Field>\n );\n\n return (\n <>\n {moveReason !== null && mountNode && !error ? (\n <Indicator\n reason={moveReason}\n columnName={String(cell.column.columnDef.header)}\n mountNode={mountNode}\n validationErrors={[]}\n />\n ) : null}\n <div\n className={!highlighted ? className : undefined}\n data-align={columnMeta.align}\n data-column-index={index}\n role=\"cell\"\n data-editable\n ref={cellRef}\n data-invalid={!!error}\n data-highlighted={highlighted}>\n {highlighted ? (\n <Highlight\n current={highlightedAsCurrent}\n className={className}\n frozenColumnIndex={tableMeta.columnFreezing.frozenColumnIndex}\n index={index}\n tableRef={tableRef}>\n {content}\n </Highlight>\n ) : (\n content\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 excludeUnmatchedResults: boolean\n) {\n let rowMoveReason: IndicatorReason | null = null;\n const { globalFilter } = table.getState();\n\n const isFilteredByGlobalFilter = excludeUnmatchedResults\n ? Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(() => {\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 return globalFilterFn(String(newValue), globalFilter ? String(globalFilter) : '');\n })\n : true;\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","cell","table","isHovered","useRowContext","tableMeta","options","meta","error","validation","getCellError","React","MemoedEditingCell","memo","column","index","getValue","tableRef","row","highlighted","highlightedAsCurrent","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","_tableMeta$editing$ch","changes","id","validate","moveReason","_tableMeta$editing$ro","rowMoveReason","rows","getRowModel","currentRowIndex","currentRow","isCurrentRow","_rows$currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","search","excludeUnmatchedResults","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","enableTruncate","fieldClassName","content","Field","message","invalid","EditingControl","align","data","initialValue","onBlur","onFocus","onChange","ref","tabIndex","Indicator","reason","columnName","String","header","validationErrors","role","Highlight","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}
@@ -23,6 +23,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
23
23
  tableRef,
24
24
  value,
25
25
  cell,
26
+ error,
26
27
  isCurrentRow,
27
28
  ...attributes
28
29
  } = props;
@@ -32,6 +33,8 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
32
33
  const columnMeta = column.columnDef.meta;
33
34
  const controlRenderer = columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.control;
34
35
  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));
36
+ const originalRow = cell.row.original;
37
+ // Revert to initial value if escape was pressed
35
38
  const handleKeyDown = event => {
36
39
  // For some reason keydown event handler is not propogated to the table when input or other control element is
37
40
  // in focus so we need to check for shortcut that toggles the editing.
@@ -91,7 +94,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
91
94
  return;
92
95
  }
93
96
  };
94
- const isNumber = typeof value === 'number';
97
+ const isNumber = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.dataType) === 'number';
95
98
  const handleInputKeyDown = event => {
96
99
  handleKeyDown(event);
97
100
  // Switching to editing mode, when key pressed any alphabetical character or number
@@ -99,19 +102,11 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
99
102
  tableMeta.editing.setDetailModeEditing(true);
100
103
  }
101
104
  };
102
- const handleDatepickerChange = event => {
103
- // When datepicker looses focus, it triggers change event, even if date wasn't changed,
104
- // so adding additional check here to prevent adding change to the edititng state.
105
- const originalDate = cell.row.original[cell.column.id];
106
- const changedDate = event.detail;
107
- if (hasChanged(originalDate, changedDate)) {
108
- handleChange(changedDate);
109
- }
110
- };
111
105
  if (typeof controlRenderer === 'function') {
112
106
  return controlRenderer({
113
107
  ...attributes,
114
- ref: ref,
108
+ ref: refCallback,
109
+ invalid: !!error,
115
110
  setValue: nextValue => {
116
111
  if (nextValue !== value) {
117
112
  handleChange(nextValue);
@@ -120,19 +115,22 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
120
115
  value
121
116
  }, data);
122
117
  } else if (controlRenderer === 'datepicker') {
123
- const handleDatepickerKeyDown = event => {
124
- handleKeyDown(event);
125
- if (/^[a-z0-9]$/i.test(event.key)) {
126
- tableMeta.editing.setDetailModeEditing(true);
127
- return;
118
+ const handleDatepickerChange = event => {
119
+ // When datepicker looses focus, it triggers change event, even if date wasn't changed,
120
+ // so adding additional check here to prevent adding change to the edititng state.
121
+ const originalDate = originalRow[cell.column.id];
122
+ const changedDate = event.detail;
123
+ if (hasChanged(originalDate, changedDate)) {
124
+ handleChange(changedDate);
128
125
  }
129
126
  };
130
127
  return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
128
+ invalid: !!error,
131
129
  className: cn({
132
130
  '[&_input]:!yt-focus-dark': isCellInDetailMode
133
131
  }),
134
132
  onChange: handleDatepickerChange,
135
- onKeyDown: handleDatepickerKeyDown,
133
+ onKeyDown: handleInputKeyDown,
136
134
  ref: refCallback,
137
135
  value: value
138
136
  }));
@@ -144,6 +142,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
144
142
  }));
145
143
  } else if (controlRenderer === 'textarea') {
146
144
  return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
145
+ invalid: !!error,
147
146
  isCellInDetailMode: isCellInDetailMode,
148
147
  onKeyDown: handleInputKeyDown,
149
148
  ref: refCallback,
@@ -151,6 +150,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
151
150
  }));
152
151
  }
153
152
  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
153
+ invalid: !!error,
154
154
  className: cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {
155
155
  '!yt-focus-dark': isCellInDetailMode
156
156
  }),
@@ -1 +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';\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 as React.RefObject<HTMLElement>,\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 <Switch {...attributes} checked={Boolean(value)} onChange={handleChange} ref={refCallback} />;\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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"}
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, Table3ColumnDataType } 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 error,\n isCurrentRow,\n ...attributes\n } = props;\n\n const tableMeta = table.options.meta as TableMeta<unknown>;\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 originalRow = cell.row.original as TType;\n\n // Revert to initial value if escape was pressed\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 = columnMeta?.dataType === ('number' as Table3ColumnDataType);\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 if (typeof controlRenderer === 'function') {\n return controlRenderer(\n {\n ...attributes,\n ref: refCallback,\n invalid: !!error,\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 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 = originalRow[cell.column.id];\n const changedDate = (event as any).detail;\n if (hasChanged(originalDate, changedDate)) {\n handleChange(changedDate);\n }\n };\n\n return (\n <Datepicker\n {...attributes}\n invalid={!!error}\n className={cn({\n '[&_input]:!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={handleDatepickerChange}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n value={value as Date}\n />\n );\n } else if (controlRenderer === 'switch') {\n return <Switch {...attributes} checked={Boolean(value)} onChange={handleChange} ref={refCallback} />;\n } else if (controlRenderer === 'textarea') {\n return (\n <TextareaControl\n {...props}\n invalid={!!error}\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 invalid={!!error}\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","error","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","originalRow","row","original","handleKeyDown","event","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","id","rowEdtitingDataWithInitialValue","_","isEqual","resetChange","_tableRef$current","focus","deselectInputValue","_target$select","select","call","isNumber","dataType","handleInputKeyDown","test","invalid","setValue","nextValue","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","fontSize","size","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}
@@ -0,0 +1,41 @@
1
+ import React__default from 'react';
2
+ import cn from 'classnames';
3
+ import { useRowContext } from '../../rows/RowContext.js';
4
+ import { scrollColumnIntoView } from '../../../util/columns.js';
5
+
6
+ const Highlight = props => {
7
+ const {
8
+ current,
9
+ frozenColumnIndex,
10
+ index,
11
+ tableRef,
12
+ ...attributes
13
+ } = props;
14
+ const {
15
+ hasError: rowHasError
16
+ } = useRowContext();
17
+ const ref = React__default.useRef(null);
18
+ const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {
19
+ // normal row
20
+ 'bg-blue-200/25': !current && !rowHasError,
21
+ // current row
22
+ 'bg-blue-200/75': current && !rowHasError,
23
+ // normal row with error
24
+ 'bg-[#eaeaf5]': !current && rowHasError,
25
+ // current with error
26
+ 'bg-[#dadaf5]': current && rowHasError
27
+ });
28
+ React__default.useEffect(() => {
29
+ if (ref.current && current) {
30
+ scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);
31
+ }
32
+ }, [current]);
33
+ return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
34
+ "data-taco": 'highlight',
35
+ className: className,
36
+ ref: ref
37
+ }));
38
+ };
39
+
40
+ export { Highlight };
41
+ //# sourceMappingURL=Highlight.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Highlight.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/Highlight.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { scrollColumnIntoView } from '../../../util/columns';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport const Highlight = props => {\n const { current, frozenColumnIndex, index, tableRef, ...attributes } = props;\n const { hasError: rowHasError } = useRowContext();\n\n const ref = React.useRef<HTMLDivElement | null>(null);\n const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {\n // normal row\n 'bg-blue-200/25': !current && !rowHasError,\n // current row\n 'bg-blue-200/75': current && !rowHasError,\n // normal row with error\n 'bg-[#eaeaf5]': !current && rowHasError,\n // current with error\n 'bg-[#dadaf5]': current && rowHasError,\n });\n\n React.useEffect(() => {\n if (ref.current && current) {\n scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);\n }\n }, [current]);\n\n return <div {...attributes} data-taco='highlight' className={className} ref={ref} />;\n};\n"],"names":["Highlight","props","current","frozenColumnIndex","index","tableRef","attributes","hasError","rowHasError","useRowContext","ref","React","useRef","className","cn","useEffect","scrollColumnIntoView"],"mappings":";;;;;MAKaA,SAAS,GAAGC,KAAK;EAC1B,MAAM;IAAEC,OAAO;IAAEC,iBAAiB;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC5E,MAAM;IAAEM,QAAQ,EAAEC;GAAa,GAAGC,aAAa,EAAE;EAEjD,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAwB,IAAI,CAAC;EACrD,MAAMC,SAAS,GAAGC,EAAE,CAAC,4DAA4D,EAAEb,KAAK,CAACY,SAAS,EAAE;;IAEhG,gBAAgB,EAAE,CAACX,OAAO,IAAI,CAACM,WAAW;;IAE1C,gBAAgB,EAAEN,OAAO,IAAI,CAACM,WAAW;;IAEzC,cAAc,EAAE,CAACN,OAAO,IAAIM,WAAW;;IAEvC,cAAc,EAAEN,OAAO,IAAIM;GAC9B,CAAC;EAEFG,cAAK,CAACI,SAAS,CAAC;IACZ,IAAIL,GAAG,CAACR,OAAO,IAAIA,OAAO,EAAE;MACxBc,oBAAoB,CAACZ,KAAK,EAAED,iBAAiB,EAAEO,GAAG,CAACR,OAAO,EAAEG,QAAQ,CAACH,OAAO,CAAC;;GAEpF,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,oBAAOS,sDAASL,UAAU;iBAAY,WAAW;IAACO,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AACxF;;;;"}
@@ -12,7 +12,7 @@ const heights = {
12
12
  max: 86
13
13
  },
14
14
  medium: {
15
- min: 34,
15
+ min: 32,
16
16
  max: 100
17
17
  },
18
18
  large: {
@@ -24,6 +24,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
24
24
  const {
25
25
  onKeyDown: handleKeyDown,
26
26
  onChange: handleChange,
27
+ onBlur,
27
28
  column,
28
29
  isCellInDetailMode,
29
30
  align,
@@ -79,7 +80,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
79
80
  resizeTextArea(e.target);
80
81
  };
81
82
  const textareaContainerClassName = cn('w-full', {
82
- 'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-[var(--table3-cell-padding-x)] focus-within:pt-[var(--table3-cell-padding-y)]': columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate
83
+ 'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-[9]': columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate
83
84
  });
84
85
  const handleTextareaKeyDown = event => {
85
86
  // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour
@@ -89,9 +90,23 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
89
90
  handleKeyDown(event);
90
91
  }
91
92
  };
93
+ const handleBlur = event => {
94
+ // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
95
+ if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
96
+ const textareaElement = event.currentTarget;
97
+ textareaElement.style.height = `${minMaxHeight.min}px`;
98
+ }
99
+ onBlur(event);
100
+ };
92
101
  return /*#__PURE__*/React__default.createElement("div", {
93
- className: textareaContainerClassName,
94
102
  "data-taco": "input-container"
103
+ }, /*#__PURE__*/React__default.createElement("div", {
104
+ style: {
105
+ minHeight: `${minMaxHeight.min}px`
106
+ },
107
+ className: "relative"
108
+ }, /*#__PURE__*/React__default.createElement("div", {
109
+ className: textareaContainerClassName
95
110
  }, /*#__PURE__*/React__default.createElement(Textarea, Object.assign({}, attributes, {
96
111
  onChange: event => {
97
112
  handleChange(event.target.value);
@@ -101,14 +116,8 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
101
116
  onKeyDown: e => {
102
117
  handleTextareaKeyDown(e);
103
118
  },
104
- onBlur: event => {
105
- // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
106
- if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
107
- const textareaElement = event.currentTarget;
108
- textareaElement.style.height = `${minMaxHeight.min}px`;
109
- }
110
- },
111
- className: cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {
119
+ onBlur: handleBlur,
120
+ className: cn(getCellAlignmentClasses(align), `h-fit resize-none`, {
112
121
  [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
113
122
  '!yt-focus-dark': isCellInDetailMode,
114
123
  [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
@@ -117,7 +126,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
117
126
  }),
118
127
  ref: ref,
119
128
  value: String(value !== null && value !== void 0 ? value : '')
120
- })));
129
+ })))));
121
130
  });
122
131
 
123
132
  export { TextareaControl };
@@ -1 +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';\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-[var(--table3-cell-padding-x)] focus-within:pt-[var(--table3-cell-padding-y)]':\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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"}
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';\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: 32,\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 invalid: boolean;\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 onBlur,\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-[9]':\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 const handleBlur = 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 onBlur(event);\n };\n\n return (\n <div data-taco=\"input-container\">\n {/**\n * Textarea should have min height placeholder, because it becomes absolute positioned when focused,\n * which leads to overlapping of validation message rendered bellow.\n * Somehow tailwind cannot dynamically assign min height when arbitary value has been used(in this particular case),\n * so assigning it through style prop here\n **/}\n <div style={{ minHeight: `${minMaxHeight.min}px` }} className=\"relative\">\n <div className={textareaContainerClassName}>\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={handleBlur}\n className={cn(getCellAlignmentClasses(align), `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 </div>\n </div>\n );\n});\n"],"names":["heights","small","min","max","medium","large","TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","onBlur","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","handleBlur","currentTarget","minHeight","className","Textarea","rows","getCellAlignmentClasses","String"],"mappings":"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"}
@@ -30,7 +30,7 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
30
30
  meta,
31
31
  table
32
32
  } = props;
33
- const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative', {
33
+ const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative z-10', {
34
34
  'z-30': isFrozen
35
35
  });
36
36
  if (table.options.debugAll) {
@@ -1 +1 @@
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 { Table3ColumnAlignment, 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, 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?: Table3ColumnAlignment;\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=\"columnheader\">\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,MAAMA,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,EAAEC,KAAK,CAAC;IACvCC,IAAI;IACJD;GACH;EAED,oBAAOE,6BAACS,YAAY,oBAAYN,WAAW,EAAI;AACnD;AAWA,MAAMM,YAAY,gBAAGT,cAAK,CAACU,IAAI,CAAC,SAASD,YAAYA,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;;;;"}
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 { Table3ColumnAlignment, 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, 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?: Table3ColumnAlignment;\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 z-10', {\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=\"columnheader\">\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,MAAMA,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,EAAEC,KAAK,CAAC;IACvCC,IAAI;IACJD;GACH;EAED,oBAAOE,6BAACS,YAAY,oBAAYN,WAAW,EAAI;AACnD;AAWA,MAAMM,YAAY,gBAAGT,cAAK,CAACU,IAAI,CAAC,SAASD,YAAYA,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,+FAA+F,EAAE;IAClH,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;;;;"}
@@ -4,45 +4,60 @@ import { Icon } from '../../../../Icon/Icon.js';
4
4
  import { Tooltip } from '../../../../Tooltip/Tooltip.js';
5
5
  import { IconButton } from '../../../../IconButton/IconButton.js';
6
6
  import { useLocalization } from '../../../../Provider/Localization.js';
7
+ import { Button } from '../../../../Button/Button.js';
7
8
  import { Spinner } from '../../../../Spinner/Spinner.js';
9
+ import { Dialog } from '../../../../Dialog/Dialog.js';
10
+ import { Group } from '../../../../Group/Group.js';
8
11
  import useTimer from '../../../../../utils/hooks/useTimer.js';
9
12
  import { Menu } from '../../../../Menu/Menu.js';
10
13
  import { Header } from '../header/Header.js';
11
14
  import { RowContext } from '../../rows/RowContext.js';
12
15
  import { DisplayCell } from '../cell/DisplayCell.js';
13
16
  import { Footer } from '../footer/Footer.js';
14
- import { SavingStateValue } from '../../../hooks/features/useEditing.js';
17
+ import { getColumnIndex } from '../../../util/editing.js';
18
+ import { lastCellIndex } from '../../rows/Row.js';
19
+ import { SavingStatusValue } from '../../../hooks/features/useEditing.js';
15
20
 
16
21
  const savingIndicatorHideDelay = 3000;
17
22
  const COLUMN_ID = '__editing_actions';
18
23
  const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
24
+ var _column$columnDef$met;
19
25
  const {
20
26
  hasChanges,
21
27
  isCurrentRow,
22
- isEditing,
23
28
  row,
29
+ editing,
30
+ rowIdentifier,
24
31
  table
25
32
  } = props;
26
- const tableMeta = table.options.meta;
27
- const savingState = tableMeta.editing.savingStates && tableMeta.editing.savingStates[row.id];
33
+ const savingStatus = editing.getSavingStatus(row.id);
28
34
  const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React__default.useState(false);
29
35
  const {
30
36
  texts
31
37
  } = useLocalization();
38
+ const [clearConfirmationOpen, setClearConfirmationOpen] = React__default.useState(false);
39
+ const columns = table.getAllFlatColumns();
40
+ const column = columns.find(column => column.id === rowIdentifier);
41
+ const rowIdentifierHeader = column === null || column === void 0 ? void 0 : (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header;
42
+ const edititngActionsRef = React__default.useRef(null);
43
+ const tableMeta = table.options.meta;
32
44
  const handleSaved = () => {
33
45
  setIsSavingIndicatorVisible(false);
34
- tableMeta.editing.removeSavingState(row.id);
46
+ editing.resetSavingStatus(row.id);
35
47
  };
36
48
  const timer = useTimer(savingIndicatorHideDelay, handleSaved);
37
49
  React__default.useEffect(() => {
38
- if (savingState && savingState.state === SavingStateValue.Saved && !isSavedIndicatorVisible) {
50
+ if (savingStatus && savingStatus === SavingStatusValue.Saved && !isSavedIndicatorVisible) {
39
51
  setIsSavingIndicatorVisible(true);
40
52
  timer.start();
41
53
  }
42
- }, [savingState]);
54
+ }, [savingStatus]);
55
+ React__default.useEffect(() => {
56
+ tableMeta.shortcutsState.pause(clearConfirmationOpen);
57
+ }, [clearConfirmationOpen]);
43
58
  let content;
44
- if (savingState) {
45
- if (savingState.state === SavingStateValue.Saving) {
59
+ if (savingStatus) {
60
+ if (savingStatus === SavingStatusValue.Saving) {
46
61
  content = /*#__PURE__*/React__default.createElement(Tooltip, {
47
62
  title: texts.table3.editing.saving.progress
48
63
  }, /*#__PURE__*/React__default.createElement(Spinner, {
@@ -58,25 +73,48 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
58
73
  }));
59
74
  }
60
75
  }
61
- if (isEditing && isCurrentRow) {
76
+ if (editing.isEditing && isCurrentRow) {
62
77
  content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, /*#__PURE__*/React__default.createElement(IconButton, {
78
+ ref: edititngActionsRef,
63
79
  appearance: "transparent",
64
80
  "aria-label": texts.table3.editing.actions.tooltip,
65
81
  icon: "more",
66
82
  menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, /*#__PURE__*/React__default.createElement(Menu.Item, {
67
83
  icon: "tick",
68
84
  disabled: !hasChanges,
69
- onClick: () => tableMeta.editing.saveChangesIfNeeded()
85
+ onClick: () => editing.saveChangesIfNeeded()
70
86
  }, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu.Item, {
71
87
  icon: "close",
72
88
  disabled: !hasChanges,
73
- onClick: () => tableMeta.editing.resetChange(row.id)
89
+ onClick: () => setClearConfirmationOpen(true)
74
90
  }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu.Item, {
75
91
  icon: "undo",
76
- onClick: () => tableMeta.editing.toggleEditing(false)
92
+ onClick: () => editing.toggleEditing(false)
77
93
  }, texts.table3.editing.actions.exit))),
78
94
  tabIndex: isCurrentRow ? 0 : -1
79
- }));
95
+ }), /*#__PURE__*/React__default.createElement(Dialog, {
96
+ size: "xs",
97
+ open: clearConfirmationOpen,
98
+ onClose: () => {
99
+ setClearConfirmationOpen(false);
100
+ requestAnimationFrame(() => {
101
+ if (edititngActionsRef.current) {
102
+ edititngActionsRef.current.focus();
103
+ // When table looses focus, we need to re-set the last column index
104
+ lastCellIndex.value = getColumnIndex(edititngActionsRef.current);
105
+ }
106
+ });
107
+ }
108
+ }, /*#__PURE__*/React__default.createElement(Dialog.Content, {
109
+ "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title
110
+ }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description.replace('[ROW_IDENTIFIER]', rowIdentifier && rowIdentifierHeader ? rowIdentifierHeader : texts.table3.validation.index).replace('[ROW_IDENTIFIER_VALUE]', rowIdentifier && rowIdentifierHeader ? row.original[rowIdentifier] : row.index)), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
111
+ tabIndex: 0
112
+ }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
113
+ tabIndex: 0,
114
+ appearance: "primary",
115
+ autoFocus: true,
116
+ onClick: () => editing.resetChange(row.id)
117
+ }, texts.table3.editing.clearChangesConfirmationDialog.confirm)))))));
80
118
  }
81
119
  const contentClassName = cn('flex items-center justify-end text-right', {
82
120
  '-mb-2 -mt-2': isCurrentRow
@@ -98,15 +136,17 @@ function Cell(props) {
98
136
  return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, props, {
99
137
  hasChanges: changeset.indexOf(props.row.id) >= 0,
100
138
  isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
101
- isEditing: tableMeta.editing.isEditing
139
+ editing: tableMeta.editing
102
140
  }));
103
141
  }
104
142
  const EDITING_ACTIONS_WIDTH = 60;
105
- function createRowEditingActionsColumn() {
143
+ function createRowEditingActionsColumn(rowIdentifier) {
106
144
  return {
107
145
  id: COLUMN_ID,
108
146
  header: Header,
109
- cell: Cell,
147
+ cell: context => /*#__PURE__*/React__default.createElement(Cell, Object.assign({}, context, {
148
+ rowIdentifier: rowIdentifier
149
+ })),
110
150
  footer: Footer,
111
151
  meta: {
112
152
  align: 'right',