@economic/taco 2.9.2 → 2.10.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. package/dist/components/Button/Button.d.ts +1 -1
  2. package/dist/components/IconButton/IconButton.d.ts +2 -2
  3. package/dist/components/Provider/Localization.d.ts +6 -0
  4. package/dist/components/Table3/components/columns/header/Header.d.ts +6 -1
  5. package/dist/components/Table3/components/columns/header/Menu.d.ts +4 -0
  6. package/dist/components/Table3/hooks/features/useCurrentRow.d.ts +6 -5
  7. package/dist/components/Table3/hooks/useCssVars.d.ts +2 -1
  8. package/dist/components/Table3/hooks/useTable.d.ts +1 -0
  9. package/dist/components/Table3/types.d.ts +7 -0
  10. package/dist/esm/index.css +92 -16
  11. package/dist/esm/packages/taco/src/components/Button/util.js +5 -1
  12. package/dist/esm/packages/taco/src/components/Button/util.js.map +1 -1
  13. package/dist/esm/packages/taco/src/components/Menu/components/Content.js +1 -1
  14. package/dist/esm/packages/taco/src/components/Menu/components/Content.js.map +1 -1
  15. package/dist/esm/packages/taco/src/components/Provider/Localization.js +7 -1
  16. package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
  17. package/dist/esm/packages/taco/src/components/Table3/Table3.js +13 -6
  18. package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
  19. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Cell.js +3 -2
  20. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Cell.js.map +1 -1
  21. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js +5 -3
  22. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js.map +1 -1
  23. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js +5 -3
  24. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js.map +1 -1
  25. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js +0 -1
  26. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map +1 -1
  27. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js +1 -1
  28. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js.map +1 -1
  29. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js +30 -6
  30. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js.map +1 -1
  31. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Menu.js +36 -10
  32. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Menu.js.map +1 -1
  33. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js +3 -3
  34. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js.map +1 -1
  35. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Drag.js +1 -1
  36. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Drag.js.map +1 -1
  37. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js +1 -1
  38. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js.map +1 -1
  39. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Expansion.js +2 -2
  40. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Expansion.js.map +1 -1
  41. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js +1 -1
  42. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js.map +1 -1
  43. package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js +87 -40
  44. package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js.map +1 -1
  45. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintButton.js +10 -0
  46. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintButton.js.map +1 -1
  47. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useCurrentRow.js +28 -2
  48. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useCurrentRow.js.map +1 -1
  49. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowClick.js +1 -1
  50. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowClick.js.map +1 -1
  51. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowSelection.js +5 -2
  52. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowSelection.js.map +1 -1
  53. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useCurrentRowListener.js +2 -1
  54. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useCurrentRowListener.js.map +1 -1
  55. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useEditingStateListener.js +8 -4
  56. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useEditingStateListener.js.map +1 -1
  57. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useShortcutsListener.js +1 -1
  58. package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useShortcutsListener.js.map +1 -1
  59. package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js +2 -1
  60. package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map +1 -1
  61. package/dist/esm/packages/taco/src/components/Table3/hooks/useCssVars.js +15 -2
  62. package/dist/esm/packages/taco/src/components/Table3/hooks/useCssVars.js.map +1 -1
  63. package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js +1 -0
  64. package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js.map +1 -1
  65. package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
  66. package/dist/index.css +92 -16
  67. package/dist/taco.cjs.development.js +272 -96
  68. package/dist/taco.cjs.development.js.map +1 -1
  69. package/dist/taco.cjs.production.min.js +1 -1
  70. package/dist/taco.cjs.production.min.js.map +1 -1
  71. package/dist/types.d.ts +1 -1
  72. package/package.json +2 -2
  73. package/types.json +5803 -5242
@@ -1 +1 @@
1
- {"version":3,"file":"Drag.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Drag.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowDragHandler } from '../../../types';\nimport { Icon } from '../../../../Icon/Icon';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__drag';\nconst GHOST_ELEMENT_ID = 'taco_table_dragging';\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n isSelected: boolean;\n onRowDrag: Table3RowDragHandler<TType>;\n};\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(props: CellProps<TType>) {\n const { isSelected, onRowDrag: handleRowDrag, row, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const onDragStart = (event: React.DragEvent): void => {\n let rows = [row];\n\n if (table.options.enableRowSelection) {\n rows = isSelected ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n }\n\n const data = rows.map(row => row.original);\n\n tableMeta.rowDrag.setDragging(\n rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n );\n\n // set a default data value so that the consumer doesn't have to\n event.dataTransfer.setData('text', JSON.stringify(data));\n\n const showPlaceholder = (text: string) => {\n const ghost = document.createElement('div');\n ghost.id = GHOST_ELEMENT_ID;\n ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';\n ghost.innerText = text;\n document.body.appendChild(ghost);\n event.dataTransfer.setDragImage(ghost, 0, 0);\n };\n\n const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n handleRowDrag(data, showPlaceholder, setDataTransfer);\n };\n\n const handleDragEnd = (): void => {\n document.getElementById(GHOST_ELEMENT_ID)?.remove();\n tableMeta.rowDrag.setDragging({});\n };\n\n return (\n <DisplayCell {...props}>\n <div draggable onDragStart={onDragStart} onDragOver={event => event.preventDefault()} onDragEnd={handleDragEnd}>\n <Icon\n aria-label={texts.table3.columns.drag.tooltip}\n name=\"drag\"\n className=\"text-grey-darkest invisible -mt-1 w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white\"\n />\n </div>\n </DisplayCell>\n );\n}) as <TType = unknown>(props: CellProps<TType>) => JSX.Element;\n\nexport function createRowDragColumn<TType = unknown>(onRowDrag: Table3RowDragHandler<TType>): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: (context: CellContext<TType, unknown>) => (\n <Cell {...context} isSelected={context.row.getIsSelected()} onRowDrag={onRowDrag} />\n ),\n footer: Footer,\n meta: {\n align: 'center',\n className: '!p-0 !pt-[var(--table3-row-padding)]',\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n size: 20,\n minSize: 20,\n };\n}\n"],"names":["COLUMN_ID","GHOST_ELEMENT_ID","Cell","React","memo","MemoedCell","props","isSelected","onRowDrag","handleRowDrag","row","table","texts","useLocalization","tableMeta","options","meta","onDragStart","event","rows","enableRowSelection","getSelectedRowModel","data","map","original","rowDrag","setDragging","reduce","dragging","rowBeingDragged","id","dataTransfer","setData","JSON","stringify","showPlaceholder","text","ghost","document","createElement","className","innerText","body","appendChild","setDragImage","setDataTransfer","handleDragEnd","_document$getElementB","getElementById","remove","DisplayCell","draggable","onDragOver","preventDefault","onDragEnd","Icon","table3","columns","drag","tooltip","name","createRowDragColumn","header","ColumnHeader","cell","context","getIsSelected","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size","minSize"],"mappings":"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"}
1
+ {"version":3,"file":"Drag.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Drag.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowDragHandler } from '../../../types';\nimport { Icon } from '../../../../Icon/Icon';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__drag';\nconst GHOST_ELEMENT_ID = 'taco_table_dragging';\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n isSelected: boolean;\n onRowDrag: Table3RowDragHandler<TType>;\n};\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(props: CellProps<TType>) {\n const { isSelected, onRowDrag: handleRowDrag, row, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const onDragStart = (event: React.DragEvent): void => {\n let rows = [row];\n\n if (table.options.enableRowSelection) {\n rows = isSelected ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n }\n\n const data = rows.map(row => row.original);\n\n tableMeta.rowDrag.setDragging(\n rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n );\n\n // set a default data value so that the consumer doesn't have to\n event.dataTransfer.setData('text', JSON.stringify(data));\n\n const showPlaceholder = (text: string) => {\n const ghost = document.createElement('div');\n ghost.id = GHOST_ELEMENT_ID;\n ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';\n ghost.innerText = text;\n document.body.appendChild(ghost);\n event.dataTransfer.setDragImage(ghost, 0, 0);\n };\n\n const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n handleRowDrag(data, showPlaceholder, setDataTransfer);\n };\n\n const handleDragEnd = (): void => {\n document.getElementById(GHOST_ELEMENT_ID)?.remove();\n tableMeta.rowDrag.setDragging({});\n };\n\n return (\n <DisplayCell {...props}>\n <div draggable onDragStart={onDragStart} onDragOver={event => event.preventDefault()} onDragEnd={handleDragEnd}>\n <Icon\n aria-label={texts.table3.columns.drag.tooltip}\n name=\"drag\"\n className=\"text-grey-darkest invisible -mt-1 w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white\"\n />\n </div>\n </DisplayCell>\n );\n}) as <TType = unknown>(props: CellProps<TType>) => JSX.Element;\n\nexport function createRowDragColumn<TType = unknown>(onRowDrag: Table3RowDragHandler<TType>): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: (context: CellContext<TType, unknown>) => (\n <Cell {...context} isSelected={context.row.getIsSelected()} onRowDrag={onRowDrag} />\n ),\n footer: Footer,\n meta: {\n align: 'center',\n className: '!p-0 !pt-[var(--table3-cell-padding-y)]',\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n size: 20,\n minSize: 20,\n };\n}\n"],"names":["COLUMN_ID","GHOST_ELEMENT_ID","Cell","React","memo","MemoedCell","props","isSelected","onRowDrag","handleRowDrag","row","table","texts","useLocalization","tableMeta","options","meta","onDragStart","event","rows","enableRowSelection","getSelectedRowModel","data","map","original","rowDrag","setDragging","reduce","dragging","rowBeingDragged","id","dataTransfer","setData","JSON","stringify","showPlaceholder","text","ghost","document","createElement","className","innerText","body","appendChild","setDragImage","setDataTransfer","handleDragEnd","_document$getElementB","getElementById","remove","DisplayCell","draggable","onDragOver","preventDefault","onDragEnd","Icon","table3","columns","drag","tooltip","name","createRowDragColumn","header","ColumnHeader","cell","context","getIsSelected","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size","minSize"],"mappings":"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"}
@@ -61,7 +61,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
61
61
  }
62
62
  if (isEditing && isCurrentRow) {
63
63
  content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, /*#__PURE__*/React__default.createElement(IconButton, {
64
- appearance: "discrete",
64
+ appearance: "transparent",
65
65
  "aria-label": texts.table3.editing.actions.tooltip,
66
66
  icon: "more",
67
67
  menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, /*#__PURE__*/React__default.createElement(Menu.Item, {
@@ -1 +1 @@
1
- {"version":3,"file":"EditingActions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/EditingActions.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { CellContext, TableMeta, DisplayColumnDef } from '@tanstack/react-table';\nimport { Spinner } from '../../../../Spinner/Spinner';\nimport { SavingStateValue } from '../../../hooks/features/useEditing';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { RowContext } from '../../rows/RowContext';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { Footer } from '../footer/Footer';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport useTimer from '../../../../../utils/hooks/useTimer';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport type EditingActionsProps<TType = unknown> = CellContext<TType, unknown> & {\n className?: string;\n isHovered: boolean;\n};\n\nconst savingIndicatorHideDelay = 3000;\n\nexport const COLUMN_ID = '__editing_actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n isCurrentRow: boolean;\n isEditing: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { isCurrentRow, isEditing, row, table } = props;\n\n const tableMeta = table.options.meta as TableMeta<TType>;\n const savingState = tableMeta.editing.savingStates && tableMeta.editing.savingStates[row.id];\n const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React.useState(false);\n const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];\n const isRowInEditingState = changeset.indexOf(row.id) >= 0;\n const { texts } = useLocalization();\n\n const handleSaved = () => {\n setIsSavingIndicatorVisible(false);\n tableMeta.editing.removeSavingState(row.id);\n };\n const timer = useTimer(savingIndicatorHideDelay, handleSaved);\n\n React.useEffect(() => {\n if (savingState && savingState.state === SavingStateValue.Saved && !isSavedIndicatorVisible) {\n setIsSavingIndicatorVisible(true);\n timer.start();\n }\n }, [savingState]);\n\n let content;\n\n if (savingState) {\n if (savingState.state === SavingStateValue.Saving) {\n content = (\n <Tooltip title={texts.table3.editing.saving.progress}>\n <Spinner delay={0} className=\"!text-grey-700 mr-1.5 !h-5 !w-5\" />\n </Tooltip>\n );\n } else if (isSavedIndicatorVisible) {\n content = (\n <Tooltip title={texts.table3.editing.saving.complete}>\n <Icon name=\"tick\" className=\"!text-grey-700 mr-1\" />\n </Tooltip>\n );\n }\n }\n\n if (isEditing && isCurrentRow) {\n content = (\n <>\n {content}\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.table3.editing.actions.tooltip}\n icon=\"more\"\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n <Menu.Item\n icon=\"tick\"\n disabled={!isRowInEditingState}\n onClick={() => tableMeta.editing.saveChangesIfNeeded()}>\n {texts.table3.editing.actions.save}\n </Menu.Item>\n <Menu.Item\n icon=\"close\"\n disabled={!isRowInEditingState}\n onClick={() => tableMeta.editing.resetChange(row.id)}>\n {texts.table3.editing.actions.clear}\n </Menu.Item>\n <Menu.Item icon=\"undo\" onClick={() => tableMeta.editing.toggleEditing(false)}>\n {texts.table3.editing.actions.exit}\n </Menu.Item>\n </Menu.Content>\n </Menu>\n )}\n tabIndex={isCurrentRow ? 0 : -1}\n />\n </>\n );\n }\n\n return (\n <DisplayCell {...props} className={cn({ '!sticky': !!content })}>\n {content ? <span className=\"-mb-2 -mt-2 flex items-center justify-end text-right\">{content}</span> : undefined}\n </DisplayCell>\n );\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = props.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...props}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n />\n );\n}\n\nexport const EDITING_ACTIONS_WIDTH = 45;\n\nexport function createRowEditingActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'right',\n className: cn(\n 'items-center print:opacity-0 [[role=\"table\"][data-editing=\"true\"]_&]:group-[[data-current=\"true\"]]/row:sticky right-0 !pl-0 !pr-1',\n '[[role=\"table\"][data-editing=\"true\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px] [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"true\"]_&]:group-hover/row:shadow-[-6px_0px_6px]',\n 'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n size: EDITING_ACTIONS_WIDTH,\n minSize: EDITING_ACTIONS_WIDTH,\n };\n}\n"],"names":["savingIndicatorHideDelay","COLUMN_ID","MemoedCell","React","memo","props","isCurrentRow","isEditing","row","table","tableMeta","options","meta","savingState","editing","savingStates","id","isSavedIndicatorVisible","setIsSavingIndicatorVisible","useState","changeset","changes","Object","keys","isRowInEditingState","indexOf","texts","useLocalization","handleSaved","removeSavingState","timer","useTimer","useEffect","state","SavingStateValue","Saved","start","content","Saving","Tooltip","title","table3","saving","progress","Spinner","delay","className","complete","Icon","name","IconButton","appearance","actions","tooltip","icon","menu","menuProps","Menu","Content","Item","disabled","onClick","saveChangesIfNeeded","save","resetChange","clear","toggleEditing","exit","tabIndex","DisplayCell","cn","undefined","Cell","rowIndex","useContext","RowContext","currentRow","currentRowIndex","EDITING_ACTIONS_WIDTH","createRowEditingActionsColumn","header","ColumnHeader","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size","minSize"],"mappings":"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"}
1
+ {"version":3,"file":"EditingActions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/EditingActions.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { CellContext, TableMeta, DisplayColumnDef } from '@tanstack/react-table';\nimport { Spinner } from '../../../../Spinner/Spinner';\nimport { SavingStateValue } from '../../../hooks/features/useEditing';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { RowContext } from '../../rows/RowContext';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { Footer } from '../footer/Footer';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport useTimer from '../../../../../utils/hooks/useTimer';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport type EditingActionsProps<TType = unknown> = CellContext<TType, unknown> & {\n className?: string;\n isHovered: boolean;\n};\n\nconst savingIndicatorHideDelay = 3000;\n\nexport const COLUMN_ID = '__editing_actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n isCurrentRow: boolean;\n isEditing: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { isCurrentRow, isEditing, row, table } = props;\n\n const tableMeta = table.options.meta as TableMeta<TType>;\n const savingState = tableMeta.editing.savingStates && tableMeta.editing.savingStates[row.id];\n const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React.useState(false);\n const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];\n const isRowInEditingState = changeset.indexOf(row.id) >= 0;\n const { texts } = useLocalization();\n\n const handleSaved = () => {\n setIsSavingIndicatorVisible(false);\n tableMeta.editing.removeSavingState(row.id);\n };\n const timer = useTimer(savingIndicatorHideDelay, handleSaved);\n\n React.useEffect(() => {\n if (savingState && savingState.state === SavingStateValue.Saved && !isSavedIndicatorVisible) {\n setIsSavingIndicatorVisible(true);\n timer.start();\n }\n }, [savingState]);\n\n let content;\n\n if (savingState) {\n if (savingState.state === SavingStateValue.Saving) {\n content = (\n <Tooltip title={texts.table3.editing.saving.progress}>\n <Spinner delay={0} className=\"!text-grey-700 mr-1.5 !h-5 !w-5\" />\n </Tooltip>\n );\n } else if (isSavedIndicatorVisible) {\n content = (\n <Tooltip title={texts.table3.editing.saving.complete}>\n <Icon name=\"tick\" className=\"!text-grey-700 mr-1\" />\n </Tooltip>\n );\n }\n }\n\n if (isEditing && isCurrentRow) {\n content = (\n <>\n {content}\n <IconButton\n appearance=\"transparent\"\n aria-label={texts.table3.editing.actions.tooltip}\n icon=\"more\"\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n <Menu.Item\n icon=\"tick\"\n disabled={!isRowInEditingState}\n onClick={() => tableMeta.editing.saveChangesIfNeeded()}>\n {texts.table3.editing.actions.save}\n </Menu.Item>\n <Menu.Item\n icon=\"close\"\n disabled={!isRowInEditingState}\n onClick={() => tableMeta.editing.resetChange(row.id)}>\n {texts.table3.editing.actions.clear}\n </Menu.Item>\n <Menu.Item icon=\"undo\" onClick={() => tableMeta.editing.toggleEditing(false)}>\n {texts.table3.editing.actions.exit}\n </Menu.Item>\n </Menu.Content>\n </Menu>\n )}\n tabIndex={isCurrentRow ? 0 : -1}\n />\n </>\n );\n }\n\n return (\n <DisplayCell {...props} className={cn({ '!sticky': !!content })}>\n {content ? <span className=\"-mb-2 -mt-2 flex items-center justify-end text-right\">{content}</span> : undefined}\n </DisplayCell>\n );\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = props.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...props}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n />\n );\n}\n\nexport const EDITING_ACTIONS_WIDTH = 45;\n\nexport function createRowEditingActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'right',\n className: cn(\n 'items-center print:opacity-0 [[role=\"table\"][data-editing=\"true\"]_&]:group-[[data-current=\"true\"]]/row:sticky right-0 !pl-0 !pr-1',\n '[[role=\"table\"][data-editing=\"true\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px] [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"true\"]_&]:group-hover/row:shadow-[-6px_0px_6px]',\n 'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n size: EDITING_ACTIONS_WIDTH,\n minSize: EDITING_ACTIONS_WIDTH,\n };\n}\n"],"names":["savingIndicatorHideDelay","COLUMN_ID","MemoedCell","React","memo","props","isCurrentRow","isEditing","row","table","tableMeta","options","meta","savingState","editing","savingStates","id","isSavedIndicatorVisible","setIsSavingIndicatorVisible","useState","changeset","changes","Object","keys","isRowInEditingState","indexOf","texts","useLocalization","handleSaved","removeSavingState","timer","useTimer","useEffect","state","SavingStateValue","Saved","start","content","Saving","Tooltip","title","table3","saving","progress","Spinner","delay","className","complete","Icon","name","IconButton","appearance","actions","tooltip","icon","menu","menuProps","Menu","Content","Item","disabled","onClick","saveChangesIfNeeded","save","resetChange","clear","toggleEditing","exit","tabIndex","DisplayCell","cn","undefined","Cell","rowIndex","useContext","RowContext","currentRow","currentRowIndex","EDITING_ACTIONS_WIDTH","createRowEditingActionsColumn","header","ColumnHeader","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size","minSize"],"mappings":"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"}
@@ -21,7 +21,7 @@ function Header(context) {
21
21
  return /*#__PURE__*/React__default.createElement(Header$1, Object.assign({}, context), /*#__PURE__*/React__default.createElement(Tooltip, {
22
22
  title: title
23
23
  }, /*#__PURE__*/React__default.createElement(IconButton, {
24
- appearance: "discrete",
24
+ appearance: "transparent",
25
25
  icon: isSomeRowsExpanded ? 'chevron-down-double' : 'chevron-right-double',
26
26
  onClick: handleClick,
27
27
  tabIndex: -1,
@@ -87,7 +87,7 @@ function createRowExpansionColumn(expandedRowRenderer) {
87
87
  footer: Footer,
88
88
  meta: {
89
89
  align: 'center',
90
- className: '!p-0 !pt-[var(--table3-row-padding)]',
90
+ className: '!p-0 !pt-[var(--table3-cell-padding-y)]',
91
91
  enableOrdering: false,
92
92
  enableSearch: false,
93
93
  enableTruncate: false,
@@ -1 +1 @@
1
- {"version":3,"file":"Expansion.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Expansion.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowExpansionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__expansion';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n const { texts } = useLocalization();\n\n const isSomeRowsExpanded = context.table.getIsSomeRowsExpanded();\n const handleClick = event => {\n event.stopPropagation();\n context.table.toggleAllRowsExpanded(!isSomeRowsExpanded);\n };\n\n const title = isSomeRowsExpanded ? texts.table3.columns.expansion.collapseAll : texts.table3.columns.expansion.expandAll;\n\n return (\n <ColumnHeader {...context}>\n <Tooltip title={title}>\n <IconButton\n appearance=\"discrete\"\n icon={isSomeRowsExpanded ? 'chevron-down-double' : 'chevron-right-double'}\n onClick={handleClick}\n tabIndex={-1}\n title={title}\n />\n </Tooltip>\n </ColumnHeader>\n );\n}\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n isCurrentRow: boolean;\n isExpanded: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { expandedRowRenderer, isCurrentRow, isExpanded, row, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const hasExpandedRow = expandedRowRenderer(row.original);\n\n let content;\n\n if (hasExpandedRow) {\n const handleClick = event => {\n event.stopPropagation();\n row.toggleExpanded();\n };\n const title = isExpanded ? texts.table3.columns.expansion.collapse : texts.table3.columns.expansion.expand;\n\n const tabIndex = isCurrentRow && !tableMeta.editing.isEditing ? 0 : -1;\n\n content = (\n <Tooltip title={title}>\n <IconButton\n appearance=\"discrete\"\n className=\"-mt-1.5\"\n icon={isExpanded ? 'chevron-down' : 'chevron-right'}\n onClick={handleClick}\n tabIndex={tabIndex}\n title={title}\n />\n </Tooltip>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n const { expandedRowRenderer, ...context } = props;\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...context}\n expandedRowRenderer={expandedRowRenderer}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isExpanded={context.row.getIsExpanded()}\n />\n );\n}\n\nexport function createRowExpansionColumn<TType = unknown>(\n expandedRowRenderer: Table3RowExpansionRenderer<TType>\n): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: Header,\n cell: (context: CellContext<TType, unknown>) => <Cell {...context} expandedRowRenderer={expandedRowRenderer} />,\n footer: Footer,\n meta: {\n align: 'center',\n className: '!p-0 !pt-[var(--table3-row-padding)]',\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n size: 40,\n };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","isSomeRowsExpanded","table","getIsSomeRowsExpanded","handleClick","event","stopPropagation","toggleAllRowsExpanded","title","table3","columns","expansion","collapseAll","expandAll","React","ColumnHeader","Tooltip","IconButton","appearance","icon","onClick","tabIndex","MemoedCell","memo","props","expandedRowRenderer","isCurrentRow","isExpanded","row","tableMeta","options","meta","hasExpandedRow","original","content","toggleExpanded","collapse","expand","editing","isEditing","className","DisplayCell","Cell","rowIndex","useContext","RowContext","currentRow","currentRowIndex","getIsExpanded","createRowExpansionColumn","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":"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"}
1
+ {"version":3,"file":"Expansion.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Expansion.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowExpansionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__expansion';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n const { texts } = useLocalization();\n\n const isSomeRowsExpanded = context.table.getIsSomeRowsExpanded();\n const handleClick = event => {\n event.stopPropagation();\n context.table.toggleAllRowsExpanded(!isSomeRowsExpanded);\n };\n\n const title = isSomeRowsExpanded ? texts.table3.columns.expansion.collapseAll : texts.table3.columns.expansion.expandAll;\n\n return (\n <ColumnHeader {...context}>\n <Tooltip title={title}>\n <IconButton\n appearance=\"transparent\"\n icon={isSomeRowsExpanded ? 'chevron-down-double' : 'chevron-right-double'}\n onClick={handleClick}\n tabIndex={-1}\n title={title}\n />\n </Tooltip>\n </ColumnHeader>\n );\n}\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n isCurrentRow: boolean;\n isExpanded: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { expandedRowRenderer, isCurrentRow, isExpanded, row, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const hasExpandedRow = expandedRowRenderer(row.original);\n\n let content;\n\n if (hasExpandedRow) {\n const handleClick = event => {\n event.stopPropagation();\n row.toggleExpanded();\n };\n const title = isExpanded ? texts.table3.columns.expansion.collapse : texts.table3.columns.expansion.expand;\n\n const tabIndex = isCurrentRow && !tableMeta.editing.isEditing ? 0 : -1;\n\n content = (\n <Tooltip title={title}>\n <IconButton\n appearance=\"discrete\"\n className=\"-mt-1.5\"\n icon={isExpanded ? 'chevron-down' : 'chevron-right'}\n onClick={handleClick}\n tabIndex={tabIndex}\n title={title}\n />\n </Tooltip>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n const { expandedRowRenderer, ...context } = props;\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...context}\n expandedRowRenderer={expandedRowRenderer}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isExpanded={context.row.getIsExpanded()}\n />\n );\n}\n\nexport function createRowExpansionColumn<TType = unknown>(\n expandedRowRenderer: Table3RowExpansionRenderer<TType>\n): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: Header,\n cell: (context: CellContext<TType, unknown>) => <Cell {...context} expandedRowRenderer={expandedRowRenderer} />,\n footer: Footer,\n meta: {\n align: 'center',\n className: '!p-0 !pt-[var(--table3-cell-padding-y)]',\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n size: 40,\n };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","isSomeRowsExpanded","table","getIsSomeRowsExpanded","handleClick","event","stopPropagation","toggleAllRowsExpanded","title","table3","columns","expansion","collapseAll","expandAll","React","ColumnHeader","Tooltip","IconButton","appearance","icon","onClick","tabIndex","MemoedCell","memo","props","expandedRowRenderer","isCurrentRow","isExpanded","row","tableMeta","options","meta","hasExpandedRow","original","content","toggleExpanded","collapse","expand","editing","isEditing","className","DisplayCell","Cell","rowIndex","useContext","RowContext","currentRow","currentRowIndex","getIsExpanded","createRowExpansionColumn","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":"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"}
@@ -111,7 +111,7 @@ function createRowSelectionColumn(hasDrag, hasExpansion) {
111
111
  footer: Footer,
112
112
  meta: {
113
113
  align: 'center',
114
- className: cn('!pt-[var(--table3-row-padding)] !justify-end !p-0', {
114
+ className: cn('!pt-[var(--table3-cell-padding-y)] !justify-end !p-0', {
115
115
  '!pr-0.5': hasExpansion,
116
116
  '!pr-3': !hasExpansion
117
117
  }),
@@ -1 +1 @@
1
- {"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n const { texts } = useLocalization();\n\n if (context.table.options.enableMultiRowSelection) {\n const isAllRowsSelected = context.table.getIsAllRowsSelected();\n const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n\n return (\n <ColumnHeader {...context}>\n <Tooltip title={title}>\n <Checkbox\n aria-label={title}\n className=\"hover:border-blue !mt-0\"\n key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n checked={isAllRowsSelected}\n indeterminate={isSomeRowsSelected}\n onChange={context.table.toggleAllRowsSelected}\n tabIndex={-1}\n />\n </Tooltip>\n </ColumnHeader>\n );\n } else {\n return <ColumnHeader {...context}></ColumnHeader>;\n }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n const { texts } = useLocalization();\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n const isCurrentRow = tableMeta.currentRow.currentRowIndex === rowIndex;\n const isSelected = context.row.getIsSelected();\n const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n if (context.table.options.enableMultiRowSelection) {\n const handleClick = (event: React.MouseEvent): void => {\n event.stopPropagation();\n\n if (event.shiftKey) {\n const [fromIndex, toIndex] = toggleBetween(\n tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0,\n rowIndex\n );\n\n context.table\n .getRowModel()\n .rows.slice(fromIndex, toIndex + 1)\n .forEach(row => row.toggleSelected(true));\n } else {\n context.row.toggleSelected();\n }\n\n tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n };\n\n return (\n <DisplayCell {...context}>\n <Tooltip\n title={\n <>\n {title}\n <Shortcut className=\"ml-2\" keys=\"Space\" />\n </>\n }>\n <Checkbox\n aria-label={title}\n className=\"!mt-0\"\n checked={isSelected}\n onClick={handleClick}\n // this is necessary to remove console spam from eslint\n onChange={() => false}\n tabIndex={isCurrentRow ? 0 : -1}\n />\n </Tooltip>\n </DisplayCell>\n );\n } else {\n const className = cn('!mt-0', getRadioClassnames());\n\n const handleClick = (event: React.MouseEvent): void => {\n event.stopPropagation();\n context.row.toggleSelected();\n tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n };\n\n return (\n <DisplayCell {...context}>\n <button\n className={className}\n aria-checked={isSelected}\n onClick={handleClick}\n role=\"radio\"\n tabIndex={-1}\n type=\"button\">\n {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n </button>\n </DisplayCell>\n );\n }\n },\n function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n const oldTableMeta = oldProps.table.options.meta as TableMeta<unknown>;\n const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n // we memo because we don't want the row re-rendering and removing focus from the checkbox\n // we can't default to the standard comparison because we need currentRow off the table meta\n // and we don't really care about re-rendering in any other scenario\n return (\n newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex &&\n newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n );\n }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n hasDrag: boolean,\n hasExpansion: boolean\n): DisplayColumnDef<TType, unknown> {\n const size = hasDrag && hasExpansion ? 22 : 40;\n\n return {\n id: COLUMN_ID,\n header: Header,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'center',\n className: cn('!pt-[var(--table3-row-padding)] !justify-end !p-0', {\n '!pr-0.5': hasExpansion,\n '!pr-3': !hasExpansion,\n }),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: cn('items-center !justify-end !p-0', { '!pr-0.5': hasExpansion, '!pr-3': !hasExpansion }),\n },\n // options\n enableResizing: false,\n size,\n minSize: size,\n };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","toggleAllRowsSelected","tabIndex","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","tableMeta","meta","isCurrentRow","currentRow","currentRowIndex","isSelected","row","getIsSelected","deselect","handleClick","event","stopPropagation","shiftKey","_tableMeta$rowSelecti","rowSelection","lastSelectedRowIndex","current","getRowModel","rows","slice","forEach","toggleSelected","DisplayCell","Shortcut","keys","onClick","cn","getRadioClassnames","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","hasDrag","hasExpansion","size","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","minSize"],"mappings":"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"}
1
+ {"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n const { texts } = useLocalization();\n\n if (context.table.options.enableMultiRowSelection) {\n const isAllRowsSelected = context.table.getIsAllRowsSelected();\n const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n\n return (\n <ColumnHeader {...context}>\n <Tooltip title={title}>\n <Checkbox\n aria-label={title}\n className=\"hover:border-blue !mt-0\"\n key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n checked={isAllRowsSelected}\n indeterminate={isSomeRowsSelected}\n onChange={context.table.toggleAllRowsSelected}\n tabIndex={-1}\n />\n </Tooltip>\n </ColumnHeader>\n );\n } else {\n return <ColumnHeader {...context}></ColumnHeader>;\n }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n const { texts } = useLocalization();\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n const isCurrentRow = tableMeta.currentRow.currentRowIndex === rowIndex;\n const isSelected = context.row.getIsSelected();\n const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n if (context.table.options.enableMultiRowSelection) {\n const handleClick = (event: React.MouseEvent): void => {\n event.stopPropagation();\n\n if (event.shiftKey) {\n const [fromIndex, toIndex] = toggleBetween(\n tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0,\n rowIndex\n );\n\n context.table\n .getRowModel()\n .rows.slice(fromIndex, toIndex + 1)\n .forEach(row => row.toggleSelected(true));\n } else {\n context.row.toggleSelected();\n }\n\n tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n };\n\n return (\n <DisplayCell {...context}>\n <Tooltip\n title={\n <>\n {title}\n <Shortcut className=\"ml-2\" keys=\"Space\" />\n </>\n }>\n <Checkbox\n aria-label={title}\n className=\"!mt-0\"\n checked={isSelected}\n onClick={handleClick}\n // this is necessary to remove console spam from eslint\n onChange={() => false}\n tabIndex={isCurrentRow ? 0 : -1}\n />\n </Tooltip>\n </DisplayCell>\n );\n } else {\n const className = cn('!mt-0', getRadioClassnames());\n\n const handleClick = (event: React.MouseEvent): void => {\n event.stopPropagation();\n context.row.toggleSelected();\n tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n };\n\n return (\n <DisplayCell {...context}>\n <button\n className={className}\n aria-checked={isSelected}\n onClick={handleClick}\n role=\"radio\"\n tabIndex={-1}\n type=\"button\">\n {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n </button>\n </DisplayCell>\n );\n }\n },\n function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n const oldTableMeta = oldProps.table.options.meta as TableMeta<unknown>;\n const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n // we memo because we don't want the row re-rendering and removing focus from the checkbox\n // we can't default to the standard comparison because we need currentRow off the table meta\n // and we don't really care about re-rendering in any other scenario\n return (\n newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex &&\n newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n );\n }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n hasDrag: boolean,\n hasExpansion: boolean\n): DisplayColumnDef<TType, unknown> {\n const size = hasDrag && hasExpansion ? 22 : 40;\n\n return {\n id: COLUMN_ID,\n header: Header,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'center',\n className: cn('!pt-[var(--table3-cell-padding-y)] !justify-end !p-0', {\n '!pr-0.5': hasExpansion,\n '!pr-3': !hasExpansion,\n }),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: cn('items-center !justify-end !p-0', { '!pr-0.5': hasExpansion, '!pr-3': !hasExpansion }),\n },\n // options\n enableResizing: false,\n size,\n minSize: size,\n };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","toggleAllRowsSelected","tabIndex","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","tableMeta","meta","isCurrentRow","currentRow","currentRowIndex","isSelected","row","getIsSelected","deselect","handleClick","event","stopPropagation","shiftKey","_tableMeta$rowSelecti","rowSelection","lastSelectedRowIndex","current","getRowModel","rows","slice","forEach","toggleSelected","DisplayCell","Shortcut","keys","onClick","cn","getRadioClassnames","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","hasDrag","hasExpansion","size","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","minSize"],"mappings":"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"}
@@ -5,12 +5,56 @@ import { useDropTarget } from '../../../../utils/hooks/useDropTarget.js';
5
5
  import { RowContext, useRowContext } from './RowContext.js';
6
6
  import { focusableSelector } from '../../util/editing.js';
7
7
 
8
+ const FOCUS_MANAGER_OPTIONS = {
9
+ tabbable: true
10
+ };
8
11
  function Row(props) {
12
+ const focusManager = useFocusManager();
9
13
  const tableMeta = props.table.options.meta;
10
14
  const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;
11
15
  const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];
16
+ const isFirstRow = props.index === 0;
12
17
  // we use non-css hovered state to determine whether to render actions or not, for performance
13
18
  const [isHovered, setIsHovered] = React__default.useState(false);
19
+ // tab behaviour is consistent across normal mode and edit mode, handle it here
20
+ const handleKeyDown = event => {
21
+ if (event.isDefaultPrevented() || event.isPropagationStopped()) {
22
+ return;
23
+ }
24
+ if (event.key === 'Tab') {
25
+ tableMeta.hoverState.pause(true);
26
+ let focusedElement;
27
+ if (event.shiftKey) {
28
+ // looping backwards
29
+ focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);
30
+ if (focusedElement) {
31
+ // override default behaviour, since we're handling focus internally now
32
+ event.preventDefault();
33
+ } else {
34
+ // there are no previous elements to focus, go up a row or go outside the table
35
+ if (!isFirstRow) {
36
+ event.preventDefault();
37
+ tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
38
+ setTimeout(() => focusManager.focusLast(FOCUS_MANAGER_OPTIONS), 1);
39
+ }
40
+ }
41
+ } else {
42
+ // looping forwards
43
+ focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);
44
+ if (focusedElement) {
45
+ // override default behaviour, since we're handling focus internally now
46
+ event.preventDefault();
47
+ } else {
48
+ // there are no next elements to focus, go down a row or go outside the table
49
+ if (!props.isLastRow) {
50
+ event.preventDefault();
51
+ tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
52
+ setTimeout(() => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS), 1);
53
+ }
54
+ }
55
+ }
56
+ }
57
+ };
14
58
  // rows are heavily memoized because performance in our table is critical
15
59
  // be careful and selective about props that you pass to the row
16
60
  const memoedProps = {
@@ -21,12 +65,13 @@ function Row(props) {
21
65
  draggable: tableMeta.rowDrag.isEnabled,
22
66
  index: props.index,
23
67
  onClick: tableMeta.rowClick.handleClick,
24
- onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined
68
+ onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined,
69
+ onKeyDown: handleKeyDown
25
70
  };
26
71
  let output = /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, props, memoedProps));
27
72
  if (tableMeta.editing.isEditing && (isCurrentRow || isHovered && !tableMeta.hoverState.isPaused)) {
28
73
  output = /*#__PURE__*/React__default.createElement(EditingRow, Object.assign({}, props, memoedProps, {
29
- isLastRow: props.isLastRow,
74
+ isFirstRow: isFirstRow,
30
75
  setCurrentRowIndex: tableMeta.currentRow.setCurrentRowIndex
31
76
  }));
32
77
  }
@@ -66,79 +111,80 @@ const unhoverPreviousRow = tableRef => {
66
111
  };
67
112
  function EditingRow(props) {
68
113
  const {
114
+ isFirstRow,
69
115
  isLastRow,
116
+ onKeyDown,
70
117
  setCurrentRowIndex,
71
118
  virtualiser,
72
119
  ...attributes
73
120
  } = props;
74
121
  const focusManager = useFocusManager();
75
- const focusManagerOptions = {
76
- tabbable: true
77
- };
78
122
  const tableMeta = props.table.options.meta;
79
123
  const handleClickCapture = event => {
80
124
  lastIndex = getColumnIndex(event.target);
81
125
  };
82
126
  const handleArrowLeftKey = event => {
83
127
  let focusedElement;
84
- if (event.key === 'ArrowLeft' || event.key === 'Tab' && event.shiftKey) {
85
- // Need to stop propagation because "Tab" will be handled twice(default browser and programmatic one)
86
- // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,
128
+ if (event.key === 'ArrowLeft') {
129
+ // We need to perform special behaviour when focus reaches the end of the row,
87
130
  // so we don't need default browser behaviour.
88
131
  event.stopPropagation();
89
132
  event.preventDefault();
90
133
  // "CTRL + ArrowLeft" or "META + ArrowLeft" should focus first focusable element of the row
91
134
  if (event.ctrlKey || event.metaKey) {
92
135
  event.target.blur();
93
- focusedElement = focusManager.focusFirst(focusManagerOptions);
136
+ focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
94
137
  lastIndex = getColumnIndex(focusedElement);
95
138
  } else {
96
- // Should focus previous focusable element, if there is one
97
- focusedElement = focusManager.focusPrevious(focusManagerOptions);
98
- // Should move to prevoius row and select last focusable element in that row,
99
- // if there is no previous focusable element in current row
100
- if (props.index !== 0 && (!focusedElement || !event.currentTarget.contains(focusedElement))) {
101
- tableMeta.hoverState.pause(true);
102
- setCurrentRowIndex(props.index - 1);
103
- setTimeout(() => {
104
- focusedElement = focusManager.focusLast(focusManagerOptions);
105
- // Need to update lastIndex when row got changed and last element got selected.
106
- lastIndex = getColumnIndex(focusedElement);
107
- }, 1);
108
- } else {
139
+ // looping backwards
140
+ focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);
141
+ if (focusedElement) {
109
142
  lastIndex = getColumnIndex(focusedElement);
143
+ } else {
144
+ // there are no previous elements to focus, go up a row (if there are rows above)
145
+ if (!isFirstRow) {
146
+ event.preventDefault();
147
+ tableMeta.hoverState.pause(true);
148
+ tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
149
+ setTimeout(() => {
150
+ focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
151
+ // Need to update lastIndex when row got changed and last element got selected.
152
+ lastIndex = getColumnIndex(focusedElement);
153
+ }, 1);
154
+ }
110
155
  }
111
156
  }
112
157
  }
113
158
  };
114
159
  const handleArrowRightKey = event => {
115
160
  let focusedElement;
116
- if (event.key === 'ArrowRight' || event.key === 'Tab' && !event.shiftKey) {
117
- // Need to stop propagation because "Tab" will be handled twice(default browser and programmatic one)
118
- // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,
161
+ if (event.key === 'ArrowRight') {
162
+ // We need to perform special behaviour when focus reaches the end of the row,
119
163
  // so we don't need default browser behaviour.
120
164
  event.stopPropagation();
121
165
  event.preventDefault();
122
166
  // "CTRL + ArrowRight" or "META + ArrowRight" should focus last focusable element of the row
123
167
  if (event.ctrlKey || event.metaKey) {
124
168
  event.target.blur();
125
- focusedElement = focusManager.focusLast(focusManagerOptions);
169
+ focusedElement = focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
126
170
  lastIndex = getColumnIndex(focusedElement);
127
171
  } else {
128
- // Should focus next focusable element, if there is one
129
- focusedElement = focusManager.focusNext(focusManagerOptions);
130
- // Should move to next row and select first focusable element in that row,
131
- // if there is no next focusable element in current row
132
- if (!isLastRow && (!focusedElement || !event.currentTarget.contains(focusedElement))) {
133
- tableMeta.hoverState.pause(true);
134
- setCurrentRowIndex(props.index + 1);
135
- setTimeout(() => {
136
- focusedElement = focusManager.focusFirst(focusManagerOptions);
137
- // Need to update lastIndex when row got changed and first element got selected.
138
- lastIndex = getColumnIndex(focusedElement);
139
- }, 1);
140
- } else {
172
+ // looping forwards
173
+ focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);
174
+ if (focusedElement) {
141
175
  lastIndex = getColumnIndex(focusedElement);
176
+ } else {
177
+ // there are no next elements to focus, go down a row or go outside the table
178
+ if (!props.isLastRow) {
179
+ event.preventDefault();
180
+ tableMeta.hoverState.pause(true);
181
+ tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
182
+ setTimeout(() => {
183
+ focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
184
+ // Need to update lastIndex when row got changed and last element got selected.
185
+ lastIndex = getColumnIndex(focusedElement);
186
+ }, 1);
187
+ }
142
188
  }
143
189
  }
144
190
  }
@@ -153,6 +199,7 @@ function EditingRow(props) {
153
199
  if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing) {
154
200
  return;
155
201
  }
202
+ onKeyDown(event); // handles tab behaviour
156
203
  handleArrowLeftKey(event);
157
204
  handleArrowRightKey(event);
158
205
  };
@@ -164,7 +211,7 @@ function EditingRow(props) {
164
211
  const lastIndexCell = (_props$tableRef$curre = props.tableRef.current) === null || _props$tableRef$curre === void 0 ? void 0 : _props$tableRef$curre.querySelector(`[role="row"][data-current="true"] [data-column-index="${lastIndex}"]`);
165
212
  lastIndexCell === null || lastIndexCell === void 0 ? void 0 : (_lastIndexCell$queryS = lastIndexCell.querySelector(focusableSelector)) === null || _lastIndexCell$queryS === void 0 ? void 0 : _lastIndexCell$queryS.focus();
166
213
  } else {
167
- focusManager.focusFirst(focusManagerOptions);
214
+ focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
168
215
  }
169
216
  }
170
217
  // Need to subscribe to current row index and check is it a current row,
@@ -1 +1 @@
1
- {"version":3,"file":"Row.js","sources":["../../../../../../../../../src/components/Table3/components/rows/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { Row as RTRow, Table as RTable, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { RowContext, useRowContext } from './RowContext';\nimport { useDropTarget } from '../../../../utils/hooks/useDropTarget';\nimport { Table3RowClickHandler, Table3RowDropHandler } from '../../types';\nimport { useFocusManager } from '@react-aria/focus';\nimport { focusableSelector } from '../../util/editing';\n\ntype RowProps<TType = unknown> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop'> & {\n index: number;\n isLastRow: boolean;\n measureRef: (el: HTMLElement | null) => void;\n onClick?: Table3RowClickHandler<TType>;\n onDrop?: Table3RowDropHandler<TType>;\n row: RTRow<TType>;\n table: RTable<TType>;\n tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport function Row<TType = unknown>(props: RowProps<TType>) {\n const tableMeta = props.table.options.meta as TableMeta<TType>;\n const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;\n const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];\n // we use non-css hovered state to determine whether to render actions or not, for performance\n const [isHovered, setIsHovered] = React.useState(false);\n\n // rows are heavily memoized because performance in our table is critical\n // be careful and selective about props that you pass to the row\n const memoedProps = {\n // aria-grabbed is being deprecated but there is no current alternative api, we use it until there is\n 'aria-grabbed': isDraggingRow ? true : tableMeta.rowDrag.isEnabled ? false : undefined,\n 'data-current': isCurrentRow,\n 'data-selected': props.row.getIsSelected(),\n draggable: tableMeta.rowDrag.isEnabled,\n index: props.index,\n onClick: tableMeta.rowClick.handleClick,\n onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined,\n };\n\n let output = <MemoedRow<TType> {...props} {...memoedProps} />;\n\n if (tableMeta.editing.isEditing && (isCurrentRow || (isHovered && !tableMeta.hoverState.isPaused))) {\n output = (\n <EditingRow\n {...props}\n {...memoedProps}\n isLastRow={props.isLastRow}\n setCurrentRowIndex={tableMeta.currentRow.setCurrentRowIndex}\n />\n );\n }\n\n // we store the row index in context because in a virtualised table the row index and the\n // react table row index do not match when, for example, sorting is applied\n const contextValue = React.useMemo(() => ({ isHovered, setIsHovered, rowIndex: props.index }), [isHovered, props.index]);\n\n return <RowContext.Provider value={contextValue}>{output}</RowContext.Provider>;\n}\n\n// turns out we might need some kind of \"state\" for the focused column, but it doesn't need to be react state that re-renders\nlet lastIndex;\n\nfunction getColumnIndex(focusedElement: Element) {\n if (focusedElement) {\n return focusedElement.closest('[role=cell]')?.getAttribute('data-column-index');\n }\n\n return null;\n}\n\n// This code is needed to avoid multiple rows being hovered at the same time (it happens since we use non-css hovering)\nlet previouslyHoveredIndex: number | undefined;\nconst unhoverPreviousRow = (tableRef: React.RefObject<HTMLDivElement>) => {\n if (previouslyHoveredIndex !== undefined) {\n const mouseoutEvent = new MouseEvent('mouseout', { view: window, bubbles: true, cancelable: true });\n const previouslyHovered = tableRef?.current?.querySelector(`[data-row-index=\"${previouslyHoveredIndex}\"]`);\n previouslyHovered?.dispatchEvent(mouseoutEvent);\n }\n};\n\nfunction EditingRow(props) {\n const { isLastRow, setCurrentRowIndex, virtualiser, ...attributes } = props;\n const focusManager = useFocusManager();\n const focusManagerOptions = { tabbable: true };\n const tableMeta = props.table.options.meta as TableMeta<unknown>;\n\n const handleClickCapture = (event: React.FocusEvent) => {\n lastIndex = getColumnIndex(event.target);\n };\n\n const handleArrowLeftKey = event => {\n let focusedElement: Element;\n if (event.key === 'ArrowLeft' || (event.key === 'Tab' && event.shiftKey)) {\n // Need to stop propagation because \"Tab\" will be handled twice(default browser and programmatic one)\n // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,\n // so we don't need default browser behaviour.\n event.stopPropagation();\n event.preventDefault();\n\n // \"CTRL + ArrowLeft\" or \"META + ArrowLeft\" should focus first focusable element of the row\n if (event.ctrlKey || event.metaKey) {\n event.target.blur();\n focusedElement = focusManager.focusFirst(focusManagerOptions);\n lastIndex = getColumnIndex(focusedElement);\n } else {\n // Should focus previous focusable element, if there is one\n focusedElement = focusManager.focusPrevious(focusManagerOptions);\n\n // Should move to prevoius row and select last focusable element in that row,\n // if there is no previous focusable element in current row\n if (props.index !== 0 && (!focusedElement || !event.currentTarget.contains(focusedElement))) {\n tableMeta.hoverState.pause(true);\n setCurrentRowIndex(props.index - 1);\n setTimeout(() => {\n focusedElement = focusManager.focusLast(focusManagerOptions);\n // Need to update lastIndex when row got changed and last element got selected.\n lastIndex = getColumnIndex(focusedElement);\n }, 1);\n } else {\n lastIndex = getColumnIndex(focusedElement);\n }\n }\n }\n };\n\n const handleArrowRightKey = event => {\n let focusedElement: Element;\n if (event.key === 'ArrowRight' || (event.key === 'Tab' && !event.shiftKey)) {\n // Need to stop propagation because \"Tab\" will be handled twice(default browser and programmatic one)\n // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,\n // so we don't need default browser behaviour.\n event.stopPropagation();\n event.preventDefault();\n\n // \"CTRL + ArrowRight\" or \"META + ArrowRight\" should focus last focusable element of the row\n if (event.ctrlKey || event.metaKey) {\n event.target.blur();\n focusedElement = focusManager.focusLast(focusManagerOptions);\n lastIndex = getColumnIndex(focusedElement);\n } else {\n // Should focus next focusable element, if there is one\n focusedElement = focusManager.focusNext(focusManagerOptions);\n\n // Should move to next row and select first focusable element in that row,\n // if there is no next focusable element in current row\n if (!isLastRow && (!focusedElement || !event.currentTarget.contains(focusedElement))) {\n tableMeta.hoverState.pause(true);\n setCurrentRowIndex(props.index + 1);\n setTimeout(() => {\n focusedElement = focusManager.focusFirst(focusManagerOptions);\n // Need to update lastIndex when row got changed and first element got selected.\n\n lastIndex = getColumnIndex(focusedElement);\n }, 1);\n } else {\n lastIndex = getColumnIndex(focusedElement);\n }\n }\n }\n };\n\n React.useEffect(() => {\n // if some row stuck in hovered state, we heed to unhover it when hover state is paused\n if (tableMeta.hoverState.isPaused) {\n unhoverPreviousRow(props.tableRef);\n }\n }, [tableMeta.hoverState.isPaused]);\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing) {\n return;\n }\n\n handleArrowLeftKey(event);\n handleArrowRightKey(event);\n };\n\n // this ensures we focus either on a field or on the same column when keyboard navigating up/down\n React.useEffect(() => {\n if (tableMeta.currentRow.currentRowIndex === props.index) {\n if (lastIndex !== undefined) {\n const lastIndexCell = props.tableRef.current?.querySelector(\n `[role=\"row\"][data-current=\"true\"] [data-column-index=\"${lastIndex}\"]`\n );\n lastIndexCell?.querySelector(focusableSelector)?.focus();\n } else {\n focusManager.focusFirst(focusManagerOptions);\n }\n }\n // Need to subscribe to current row index and check is it a current row,\n // for a situation where hovered row is the next row after current row...\n // In this case row will not be re-rendered if user switch to next row, because hovered row also renders EditingRow.\n }, [tableMeta.currentRow.currentRowIndex]);\n\n return <MemoedRow {...attributes} onClickCapture={handleClickCapture} onKeyDown={handleKeyDown} />;\n}\n\n// Memoization\n\nexport type MemoedRowProps<TType = unknown> = RowProps<TType> & {\n 'aria-grabbed'?: boolean;\n 'data-current': boolean;\n 'data-selected': boolean;\n draggable: boolean;\n index: number;\n};\n\nconst clickableElements = ['input', 'button', 'a', 'select', 'option', 'label', 'textarea'];\n\nconst MemoedRow = React.memo(function MemoedRow<TType = unknown>(props: MemoedRowProps<TType>) {\n const { index, isLastRow: _1, measureRef, onClick, onClickCapture, onDrop, row, table, tableRef, ...attributes } = props;\n const ref = React.useRef<HTMLDivElement | null>(null);\n const tableMeta = table.options.meta as TableMeta<TType>;\n const { setIsHovered } = useRowContext();\n\n // we measure the first cell (since the row has display: contents) so that the virtualiser height is correct\n React.useEffect(() => {\n const firstCell = ref.current?.querySelector('[role=cell]:first-child');\n\n if (firstCell) {\n measureRef(firstCell as HTMLElement);\n }\n }, [ref.current]);\n\n // we use capture because it also picks up clicks on e.g. select checkboxes\n const handleClickCapture = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (typeof onClickCapture === 'function') {\n onClickCapture(event);\n }\n\n // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable\n requestAnimationFrame(() => tableMeta.currentRow.setCurrentRowIndex(index));\n };\n\n const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (typeof onClick === 'function') {\n const clickedElement = event.target as HTMLElement;\n\n if (\n !ref.current?.contains(event.target as HTMLElement) ||\n clickableElements.includes(clickedElement.tagName.toLowerCase()) ||\n clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))\n ) {\n return;\n }\n\n onClick(row.original);\n }\n };\n\n const handleMouseEnter = () => {\n // When user moving mouse to fast, then some of the rows are getting stuck in hover state,\n // because mouseleave event never got triggered, to avoid this to happen we're saving the index of last hovered row,\n // so that we can unhover it when new row got hovered, and saving it in a variable outside of react to save in performance,\n // since it would be very performance heavy to use state which is bound to mouse events.\n if (previouslyHoveredIndex !== undefined) {\n if (previouslyHoveredIndex !== index) {\n unhoverPreviousRow(tableRef);\n previouslyHoveredIndex = index;\n }\n } else {\n previouslyHoveredIndex = index;\n }\n setIsHovered(true);\n };\n const handleMouseLeave = () => {\n if (previouslyHoveredIndex === index) {\n previouslyHoveredIndex = undefined;\n }\n setIsHovered(false);\n };\n\n const [isDraggedOver, dropTargetProps] = useDropTarget(event => onDrop?.(event, row.original));\n\n const className = cn(\n 'group/row contents',\n // resizing column requires dragging, which means the mouse might (on rare occasions) move over rows and trigger hover state\n // that in turn triggers rendering of e.g. row actions, which could cause janky ui - so don't allow mouse interaction when resizing\n '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n {\n 'hover:cursor-pointer': typeof onClick === 'function',\n }\n );\n\n return (\n <div\n {...attributes}\n {...(onDrop ? dropTargetProps : undefined)}\n className={className}\n data-row-index={index}\n data-dragged-over={isDraggedOver}\n onClick={handleClick}\n onClickCapture={handleClickCapture}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"row\"\n ref={ref}\n />\n );\n}) as <TType = unknown>(props: MemoedRowProps<TType>) => JSX.Element;\n"],"names":["Row","props","tableMeta","table","options","meta","isCurrentRow","currentRow","currentRowIndex","index","isDraggingRow","rowDrag","dragging","row","id","isHovered","setIsHovered","React","useState","memoedProps","isEnabled","undefined","getIsSelected","draggable","onClick","rowClick","handleClick","onDrop","rowDrop","handleDrop","output","MemoedRow","editing","isEditing","hoverState","isPaused","EditingRow","isLastRow","setCurrentRowIndex","contextValue","useMemo","rowIndex","RowContext","Provider","value","lastIndex","getColumnIndex","focusedElement","_focusedElement$close","closest","getAttribute","previouslyHoveredIndex","unhoverPreviousRow","tableRef","_tableRef$current","mouseoutEvent","MouseEvent","view","window","bubbles","cancelable","previouslyHovered","current","querySelector","dispatchEvent","virtualiser","attributes","focusManager","useFocusManager","focusManagerOptions","tabbable","handleClickCapture","event","target","handleArrowLeftKey","key","shiftKey","stopPropagation","preventDefault","ctrlKey","metaKey","blur","focusFirst","focusPrevious","currentTarget","contains","pause","setTimeout","focusLast","handleArrowRightKey","focusNext","useEffect","handleKeyDown","isDefaultPrevented","isPropagationStopped","detailModeEditing","_props$tableRef$curre","_lastIndexCell$queryS","lastIndexCell","focusableSelector","focus","onClickCapture","onKeyDown","clickableElements","memo","_1","measureRef","ref","useRef","useRowContext","firstCell","_ref$current","requestAnimationFrame","_ref$current2","clickedElement","includes","tagName","toLowerCase","map","tag","join","original","handleMouseEnter","handleMouseLeave","isDraggedOver","dropTargetProps","useDropTarget","className","cn","onMouseEnter","onMouseLeave","role"],"mappings":";;;;;;;SAoBgBA,GAAGA,CAAkBC,KAAsB;EACvD,MAAMC,SAAS,GAAGD,KAAK,CAACE,KAAK,CAACC,OAAO,CAACC,IAAwB;EAC9D,MAAMC,YAAY,GAAGJ,SAAS,CAACK,UAAU,CAACC,eAAe,KAAKP,KAAK,CAACQ,KAAK;EACzE,MAAMC,aAAa,GAAGR,SAAS,CAACS,OAAO,CAACC,QAAQ,CAACX,KAAK,CAACY,GAAG,CAACC,EAAE,CAAC;;EAE9D,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;;;EAIvD,MAAMC,WAAW,GAAG;;IAEhB,cAAc,EAAET,aAAa,GAAG,IAAI,GAAGR,SAAS,CAACS,OAAO,CAACS,SAAS,GAAG,KAAK,GAAGC,SAAS;IACtF,cAAc,EAAEf,YAAY;IAC5B,eAAe,EAAEL,KAAK,CAACY,GAAG,CAACS,aAAa,EAAE;IAC1CC,SAAS,EAAErB,SAAS,CAACS,OAAO,CAACS,SAAS;IACtCX,KAAK,EAAER,KAAK,CAACQ,KAAK;IAClBe,OAAO,EAAEtB,SAAS,CAACuB,QAAQ,CAACC,WAAW;IACvCC,MAAM,EAAEzB,SAAS,CAAC0B,OAAO,CAACR,SAAS,GAAGlB,SAAS,CAAC0B,OAAO,CAACC,UAAU,GAAGR;GACxE;EAED,IAAIS,MAAM,gBAAGb,6BAACc,SAAS,oBAAY9B,KAAK,EAAMkB,WAAW,EAAI;EAE7D,IAAIjB,SAAS,CAAC8B,OAAO,CAACC,SAAS,KAAK3B,YAAY,IAAKS,SAAS,IAAI,CAACb,SAAS,CAACgC,UAAU,CAACC,QAAS,CAAC,EAAE;IAChGL,MAAM,gBACFb,6BAACmB,UAAU,oBACHnC,KAAK,EACLkB,WAAW;MACfkB,SAAS,EAAEpC,KAAK,CAACoC,SAAS;MAC1BC,kBAAkB,EAAEpC,SAAS,CAACK,UAAU,CAAC+B;OAEhD;;;;EAKL,MAAMC,YAAY,GAAGtB,cAAK,CAACuB,OAAO,CAAC,OAAO;IAAEzB,SAAS;IAAEC,YAAY;IAAEyB,QAAQ,EAAExC,KAAK,CAACQ;GAAO,CAAC,EAAE,CAACM,SAAS,EAAEd,KAAK,CAACQ,KAAK,CAAC,CAAC;EAExH,oBAAOQ,6BAACyB,UAAU,CAACC,QAAQ;IAACC,KAAK,EAAEL;KAAeT,MAAM,CAAuB;AACnF;AAEA;AACA,IAAIe,SAAS;AAEb,SAASC,cAAcA,CAACC,cAAuB;EAC3C,IAAIA,cAAc,EAAE;IAAA,IAAAC,qBAAA;IAChB,QAAAA,qBAAA,GAAOD,cAAc,CAACE,OAAO,CAAC,aAAa,CAAC,cAAAD,qBAAA,uBAArCA,qBAAA,CAAuCE,YAAY,CAAC,mBAAmB,CAAC;;EAGnF,OAAO,IAAI;AACf;AAEA;AACA,IAAIC,sBAA0C;AAC9C,MAAMC,kBAAkB,GAAIC,QAAyC;EACjE,IAAIF,sBAAsB,KAAK9B,SAAS,EAAE;IAAA,IAAAiC,iBAAA;IACtC,MAAMC,aAAa,GAAG,IAAIC,UAAU,CAAC,UAAU,EAAE;MAAEC,IAAI,EAAEC,MAAM;MAAEC,OAAO,EAAE,IAAI;MAAEC,UAAU,EAAE;KAAM,CAAC;IACnG,MAAMC,iBAAiB,GAAGR,QAAQ,aAARA,QAAQ,wBAAAC,iBAAA,GAARD,QAAQ,CAAES,OAAO,cAAAR,iBAAA,uBAAjBA,iBAAA,CAAmBS,aAAa,qBAAqBZ,0BAA0B,CAAC;IAC1GU,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEG,aAAa,CAACT,aAAa,CAAC;;AAEvD,CAAC;AAED,SAASnB,UAAUA,CAACnC,KAAK;EACrB,MAAM;IAAEoC,SAAS;IAAEC,kBAAkB;IAAE2B,WAAW;IAAE,GAAGC;GAAY,GAAGjE,KAAK;EAC3E,MAAMkE,YAAY,GAAGC,eAAe,EAAE;EACtC,MAAMC,mBAAmB,GAAG;IAAEC,QAAQ,EAAE;GAAM;EAC9C,MAAMpE,SAAS,GAAGD,KAAK,CAACE,KAAK,CAACC,OAAO,CAACC,IAA0B;EAEhE,MAAMkE,kBAAkB,GAAIC,KAAuB;IAC/C3B,SAAS,GAAGC,cAAc,CAAC0B,KAAK,CAACC,MAAM,CAAC;GAC3C;EAED,MAAMC,kBAAkB,GAAGF,KAAK;IAC5B,IAAIzB,cAAuB;IAC3B,IAAIyB,KAAK,CAACG,GAAG,KAAK,WAAW,IAAKH,KAAK,CAACG,GAAG,KAAK,KAAK,IAAIH,KAAK,CAACI,QAAS,EAAE;;;;MAItEJ,KAAK,CAACK,eAAe,EAAE;MACvBL,KAAK,CAACM,cAAc,EAAE;;MAGtB,IAAIN,KAAK,CAACO,OAAO,IAAIP,KAAK,CAACQ,OAAO,EAAE;QAChCR,KAAK,CAACC,MAAM,CAACQ,IAAI,EAAE;QACnBlC,cAAc,GAAGoB,YAAY,CAACe,UAAU,CAACb,mBAAmB,CAAC;QAC7DxB,SAAS,GAAGC,cAAc,CAACC,cAAc,CAAC;OAC7C,MAAM;;QAEHA,cAAc,GAAGoB,YAAY,CAACgB,aAAa,CAACd,mBAAmB,CAAC;;;QAIhE,IAAIpE,KAAK,CAACQ,KAAK,KAAK,CAAC,KAAK,CAACsC,cAAc,IAAI,CAACyB,KAAK,CAACY,aAAa,CAACC,QAAQ,CAACtC,cAAc,CAAC,CAAC,EAAE;UACzF7C,SAAS,CAACgC,UAAU,CAACoD,KAAK,CAAC,IAAI,CAAC;UAChChD,kBAAkB,CAACrC,KAAK,CAACQ,KAAK,GAAG,CAAC,CAAC;UACnC8E,UAAU,CAAC;YACPxC,cAAc,GAAGoB,YAAY,CAACqB,SAAS,CAACnB,mBAAmB,CAAC;;YAE5DxB,SAAS,GAAGC,cAAc,CAACC,cAAc,CAAC;WAC7C,EAAE,CAAC,CAAC;SACR,MAAM;UACHF,SAAS,GAAGC,cAAc,CAACC,cAAc,CAAC;;;;GAIzD;EAED,MAAM0C,mBAAmB,GAAGjB,KAAK;IAC7B,IAAIzB,cAAuB;IAC3B,IAAIyB,KAAK,CAACG,GAAG,KAAK,YAAY,IAAKH,KAAK,CAACG,GAAG,KAAK,KAAK,IAAI,CAACH,KAAK,CAACI,QAAS,EAAE;;;;MAIxEJ,KAAK,CAACK,eAAe,EAAE;MACvBL,KAAK,CAACM,cAAc,EAAE;;MAGtB,IAAIN,KAAK,CAACO,OAAO,IAAIP,KAAK,CAACQ,OAAO,EAAE;QAChCR,KAAK,CAACC,MAAM,CAACQ,IAAI,EAAE;QACnBlC,cAAc,GAAGoB,YAAY,CAACqB,SAAS,CAACnB,mBAAmB,CAAC;QAC5DxB,SAAS,GAAGC,cAAc,CAACC,cAAc,CAAC;OAC7C,MAAM;;QAEHA,cAAc,GAAGoB,YAAY,CAACuB,SAAS,CAACrB,mBAAmB,CAAC;;;QAI5D,IAAI,CAAChC,SAAS,KAAK,CAACU,cAAc,IAAI,CAACyB,KAAK,CAACY,aAAa,CAACC,QAAQ,CAACtC,cAAc,CAAC,CAAC,EAAE;UAClF7C,SAAS,CAACgC,UAAU,CAACoD,KAAK,CAAC,IAAI,CAAC;UAChChD,kBAAkB,CAACrC,KAAK,CAACQ,KAAK,GAAG,CAAC,CAAC;UACnC8E,UAAU,CAAC;YACPxC,cAAc,GAAGoB,YAAY,CAACe,UAAU,CAACb,mBAAmB,CAAC;;YAG7DxB,SAAS,GAAGC,cAAc,CAACC,cAAc,CAAC;WAC7C,EAAE,CAAC,CAAC;SACR,MAAM;UACHF,SAAS,GAAGC,cAAc,CAACC,cAAc,CAAC;;;;GAIzD;EAED9B,cAAK,CAAC0E,SAAS,CAAC;;IAEZ,IAAIzF,SAAS,CAACgC,UAAU,CAACC,QAAQ,EAAE;MAC/BiB,kBAAkB,CAACnD,KAAK,CAACoD,QAAQ,CAAC;;GAEzC,EAAE,CAACnD,SAAS,CAACgC,UAAU,CAACC,QAAQ,CAAC,CAAC;EAEnC,MAAMyD,aAAa,GAAIpB,KAA0B;IAC7C,IAAIA,KAAK,CAACqB,kBAAkB,EAAE,IAAIrB,KAAK,CAACsB,oBAAoB,EAAE,IAAI5F,SAAS,CAAC8B,OAAO,CAAC+D,iBAAiB,EAAE;MACnG;;IAGJrB,kBAAkB,CAACF,KAAK,CAAC;IACzBiB,mBAAmB,CAACjB,KAAK,CAAC;GAC7B;;EAGDvD,cAAK,CAAC0E,SAAS,CAAC;IACZ,IAAIzF,SAAS,CAACK,UAAU,CAACC,eAAe,KAAKP,KAAK,CAACQ,KAAK,EAAE;MACtD,IAAIoC,SAAS,KAAKxB,SAAS,EAAE;QAAA,IAAA2E,qBAAA,EAAAC,qBAAA;QACzB,MAAMC,aAAa,IAAAF,qBAAA,GAAG/F,KAAK,CAACoD,QAAQ,CAACS,OAAO,cAAAkC,qBAAA,uBAAtBA,qBAAA,CAAwBjC,aAAa,0DACElB,aAAa,CACzE;QACDqD,aAAa,aAAbA,aAAa,wBAAAD,qBAAA,GAAbC,aAAa,CAAEnC,aAAa,CAACoC,iBAAiB,CAAC,cAAAF,qBAAA,uBAA/CA,qBAAA,CAAiDG,KAAK,EAAE;OAC3D,MAAM;QACHjC,YAAY,CAACe,UAAU,CAACb,mBAAmB,CAAC;;;;;;GAMvD,EAAE,CAACnE,SAAS,CAACK,UAAU,CAACC,eAAe,CAAC,CAAC;EAE1C,oBAAOS,6BAACc,SAAS,oBAAKmC,UAAU;IAAEmC,cAAc,EAAE9B,kBAAkB;IAAE+B,SAAS,EAAEV;KAAiB;AACtG;AAYA,MAAMW,iBAAiB,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,CAAC;AAE3F,MAAMxE,SAAS,gBAAGd,cAAK,CAACuF,IAAI,CAAC,SAASzE,SAASA,CAAkB9B,KAA4B;EACzF,MAAM;IAAEQ,KAAK;IAAE4B,SAAS,EAAEoE,EAAE;IAAEC,UAAU;IAAElF,OAAO;IAAE6E,cAAc;IAAE1E,MAAM;IAAEd,GAAG;IAAEV,KAAK;IAAEkD,QAAQ;IAAE,GAAGa;GAAY,GAAGjE,KAAK;EACxH,MAAM0G,GAAG,GAAG1F,cAAK,CAAC2F,MAAM,CAAwB,IAAI,CAAC;EACrD,MAAM1G,SAAS,GAAGC,KAAK,CAACC,OAAO,CAACC,IAAwB;EACxD,MAAM;IAAEW;GAAc,GAAG6F,aAAa,EAAE;;EAGxC5F,cAAK,CAAC0E,SAAS,CAAC;;IACZ,MAAMmB,SAAS,IAAAC,YAAA,GAAGJ,GAAG,CAAC7C,OAAO,cAAAiD,YAAA,uBAAXA,YAAA,CAAahD,aAAa,CAAC,yBAAyB,CAAC;IAEvE,IAAI+C,SAAS,EAAE;MACXJ,UAAU,CAACI,SAAwB,CAAC;;GAE3C,EAAE,CAACH,GAAG,CAAC7C,OAAO,CAAC,CAAC;;EAGjB,MAAMS,kBAAkB,GAAIC,KAAmD;IAC3E,IAAI,OAAO6B,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAAC7B,KAAK,CAAC;;;IAIzBwC,qBAAqB,CAAC,MAAM9G,SAAS,CAACK,UAAU,CAAC+B,kBAAkB,CAAC7B,KAAK,CAAC,CAAC;GAC9E;EAED,MAAMiB,WAAW,GAAI8C,KAAuC;IACxD,IAAI,OAAOhD,OAAO,KAAK,UAAU,EAAE;MAAA,IAAAyF,aAAA;MAC/B,MAAMC,cAAc,GAAG1C,KAAK,CAACC,MAAqB;MAElD,IACI,GAAAwC,aAAA,GAACN,GAAG,CAAC7C,OAAO,cAAAmD,aAAA,eAAXA,aAAA,CAAa5B,QAAQ,CAACb,KAAK,CAACC,MAAqB,CAAC,KACnD8B,iBAAiB,CAACY,QAAQ,CAACD,cAAc,CAACE,OAAO,CAACC,WAAW,EAAE,CAAC,IAChEH,cAAc,CAACjE,OAAO,CAACsD,iBAAiB,CAACe,GAAG,CAACC,GAAG,kBAAkBA,KAAK,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC,EACrF;QACE;;MAGJhG,OAAO,CAACX,GAAG,CAAC4G,QAAQ,CAAC;;GAE5B;EAED,MAAMC,gBAAgB,GAAGA;;;;;IAKrB,IAAIvE,sBAAsB,KAAK9B,SAAS,EAAE;MACtC,IAAI8B,sBAAsB,KAAK1C,KAAK,EAAE;QAClC2C,kBAAkB,CAACC,QAAQ,CAAC;QAC5BF,sBAAsB,GAAG1C,KAAK;;KAErC,MAAM;MACH0C,sBAAsB,GAAG1C,KAAK;;IAElCO,YAAY,CAAC,IAAI,CAAC;GACrB;EACD,MAAM2G,gBAAgB,GAAGA;IACrB,IAAIxE,sBAAsB,KAAK1C,KAAK,EAAE;MAClC0C,sBAAsB,GAAG9B,SAAS;;IAEtCL,YAAY,CAAC,KAAK,CAAC;GACtB;EAED,MAAM,CAAC4G,aAAa,EAAEC,eAAe,CAAC,GAAGC,aAAa,CAACtD,KAAK,IAAI7C,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAG6C,KAAK,EAAE3D,GAAG,CAAC4G,QAAQ,CAAC,CAAC;EAE9F,MAAMM,SAAS,GAAGC,EAAE,CAChB,oBAAoB;;;EAGpB,8DAA8D,EAC9D;IACI,sBAAsB,EAAE,OAAOxG,OAAO,KAAK;GAC9C,CACJ;EAED,oBACIP,sDACQiD,UAAU,EACTvC,MAAM,GAAGkG,eAAe,GAAGxG,SAAS;IACzC0G,SAAS,EAAEA,SAAS;sBACJtH,KAAK;yBACFmH,aAAa;IAChCpG,OAAO,EAAEE,WAAW;IACpB2E,cAAc,EAAE9B,kBAAkB;IAClC0D,YAAY,EAAEP,gBAAgB;IAC9BQ,YAAY,EAAEP,gBAAgB;IAC9BQ,IAAI,EAAC,KAAK;IACVxB,GAAG,EAAEA;KACP;AAEV,CAAC,CAAmE;;;;"}
1
+ {"version":3,"file":"Row.js","sources":["../../../../../../../../../src/components/Table3/components/rows/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { Row as RTRow, Table as RTable, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { RowContext, useRowContext } from './RowContext';\nimport { useDropTarget } from '../../../../utils/hooks/useDropTarget';\nimport { Table3RowClickHandler, Table3RowDropHandler } from '../../types';\nimport { useFocusManager } from '@react-aria/focus';\nimport { focusableSelector } from '../../util/editing';\n\nconst FOCUS_MANAGER_OPTIONS = { tabbable: true };\n\ntype RowProps<TType = unknown> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop'> & {\n index: number;\n isLastRow: boolean;\n measureRef: (el: HTMLElement | null) => void;\n onClick?: Table3RowClickHandler<TType>;\n onDrop?: Table3RowDropHandler<TType>;\n row: RTRow<TType>;\n table: RTable<TType>;\n tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport function Row<TType = unknown>(props: RowProps<TType>) {\n const focusManager = useFocusManager();\n const tableMeta = props.table.options.meta as TableMeta<TType>;\n const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;\n const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];\n const isFirstRow = props.index === 0;\n // we use non-css hovered state to determine whether to render actions or not, for performance\n const [isHovered, setIsHovered] = React.useState(false);\n\n // tab behaviour is consistent across normal mode and edit mode, handle it here\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.isDefaultPrevented() || event.isPropagationStopped()) {\n return;\n }\n\n if (event.key === 'Tab') {\n tableMeta.hoverState.pause(true);\n let focusedElement: Element;\n\n if (event.shiftKey) {\n // looping backwards\n focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);\n\n if (focusedElement) {\n // override default behaviour, since we're handling focus internally now\n event.preventDefault();\n } else {\n // there are no previous elements to focus, go up a row or go outside the table\n if (!isFirstRow) {\n event.preventDefault();\n tableMeta.currentRow.setCurrentRowIndex(props.index - 1);\n setTimeout(() => focusManager.focusLast(FOCUS_MANAGER_OPTIONS), 1);\n }\n }\n } else {\n // looping forwards\n focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);\n\n if (focusedElement) {\n // override default behaviour, since we're handling focus internally now\n event.preventDefault();\n } else {\n // there are no next elements to focus, go down a row or go outside the table\n if (!props.isLastRow) {\n event.preventDefault();\n tableMeta.currentRow.setCurrentRowIndex(props.index + 1);\n setTimeout(() => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS), 1);\n }\n }\n }\n }\n };\n\n // rows are heavily memoized because performance in our table is critical\n // be careful and selective about props that you pass to the row\n const memoedProps = {\n // aria-grabbed is being deprecated but there is no current alternative api, we use it until there is\n 'aria-grabbed': isDraggingRow ? true : tableMeta.rowDrag.isEnabled ? false : undefined,\n 'data-current': isCurrentRow,\n 'data-selected': props.row.getIsSelected(),\n draggable: tableMeta.rowDrag.isEnabled,\n index: props.index,\n onClick: tableMeta.rowClick.handleClick,\n onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined,\n onKeyDown: handleKeyDown,\n };\n\n let output = <MemoedRow<TType> {...props} {...memoedProps} />;\n\n if (tableMeta.editing.isEditing && (isCurrentRow || (isHovered && !tableMeta.hoverState.isPaused))) {\n output = (\n <EditingRow\n {...props}\n {...memoedProps}\n isFirstRow={isFirstRow}\n setCurrentRowIndex={tableMeta.currentRow.setCurrentRowIndex}\n />\n );\n }\n\n // we store the row index in context because in a virtualised table the row index and the\n // react table row index do not match when, for example, sorting is applied\n const contextValue = React.useMemo(() => ({ isHovered, setIsHovered, rowIndex: props.index }), [isHovered, props.index]);\n\n return <RowContext.Provider value={contextValue}>{output}</RowContext.Provider>;\n}\n\n// turns out we might need some kind of \"state\" for the focused column, but it doesn't need to be react state that re-renders\nlet lastIndex;\n\nfunction getColumnIndex(focusedElement: Element) {\n if (focusedElement) {\n return focusedElement.closest('[role=cell]')?.getAttribute('data-column-index');\n }\n\n return null;\n}\n\n// This code is needed to avoid multiple rows being hovered at the same time (it happens since we use non-css hovering)\nlet previouslyHoveredIndex: number | undefined;\nconst unhoverPreviousRow = (tableRef: React.RefObject<HTMLDivElement>) => {\n if (previouslyHoveredIndex !== undefined) {\n const mouseoutEvent = new MouseEvent('mouseout', { view: window, bubbles: true, cancelable: true });\n const previouslyHovered = tableRef?.current?.querySelector(`[data-row-index=\"${previouslyHoveredIndex}\"]`);\n previouslyHovered?.dispatchEvent(mouseoutEvent);\n }\n};\n\nfunction EditingRow(props) {\n const { isFirstRow, isLastRow, onKeyDown, setCurrentRowIndex, virtualiser, ...attributes } = props;\n const focusManager = useFocusManager();\n const tableMeta = props.table.options.meta as TableMeta<unknown>;\n\n const handleClickCapture = (event: React.FocusEvent) => {\n lastIndex = getColumnIndex(event.target);\n };\n\n const handleArrowLeftKey = event => {\n let focusedElement: Element;\n\n if (event.key === 'ArrowLeft') {\n // We need to perform special behaviour when focus reaches the end of the row,\n // so we don't need default browser behaviour.\n event.stopPropagation();\n event.preventDefault();\n\n // \"CTRL + ArrowLeft\" or \"META + ArrowLeft\" should focus first focusable element of the row\n if (event.ctrlKey || event.metaKey) {\n event.target.blur();\n focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);\n lastIndex = getColumnIndex(focusedElement);\n } else {\n // looping backwards\n focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);\n\n if (focusedElement) {\n lastIndex = getColumnIndex(focusedElement);\n } else {\n // there are no previous elements to focus, go up a row (if there are rows above)\n if (!isFirstRow) {\n event.preventDefault();\n tableMeta.hoverState.pause(true);\n tableMeta.currentRow.setCurrentRowIndex(props.index - 1);\n setTimeout(() => {\n focusManager.focusLast(FOCUS_MANAGER_OPTIONS);\n // Need to update lastIndex when row got changed and last element got selected.\n lastIndex = getColumnIndex(focusedElement);\n }, 1);\n }\n }\n }\n }\n };\n\n const handleArrowRightKey = event => {\n let focusedElement: Element;\n\n if (event.key === 'ArrowRight') {\n // We need to perform special behaviour when focus reaches the end of the row,\n // so we don't need default browser behaviour.\n event.stopPropagation();\n event.preventDefault();\n\n // \"CTRL + ArrowRight\" or \"META + ArrowRight\" should focus last focusable element of the row\n if (event.ctrlKey || event.metaKey) {\n event.target.blur();\n focusedElement = focusManager.focusLast(FOCUS_MANAGER_OPTIONS);\n lastIndex = getColumnIndex(focusedElement);\n } else {\n // looping forwards\n focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);\n\n if (focusedElement) {\n lastIndex = getColumnIndex(focusedElement);\n } else {\n // there are no next elements to focus, go down a row or go outside the table\n if (!props.isLastRow) {\n event.preventDefault();\n tableMeta.hoverState.pause(true);\n tableMeta.currentRow.setCurrentRowIndex(props.index + 1);\n setTimeout(() => {\n focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);\n // Need to update lastIndex when row got changed and last element got selected.\n lastIndex = getColumnIndex(focusedElement);\n }, 1);\n }\n }\n }\n }\n };\n\n React.useEffect(() => {\n // if some row stuck in hovered state, we heed to unhover it when hover state is paused\n if (tableMeta.hoverState.isPaused) {\n unhoverPreviousRow(props.tableRef);\n }\n }, [tableMeta.hoverState.isPaused]);\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing) {\n return;\n }\n\n onKeyDown(event); // handles tab behaviour\n handleArrowLeftKey(event);\n handleArrowRightKey(event);\n };\n\n // this ensures we focus either on a field or on the same column when keyboard navigating up/down\n React.useEffect(() => {\n if (tableMeta.currentRow.currentRowIndex === props.index) {\n if (lastIndex !== undefined) {\n const lastIndexCell = props.tableRef.current?.querySelector(\n `[role=\"row\"][data-current=\"true\"] [data-column-index=\"${lastIndex}\"]`\n );\n lastIndexCell?.querySelector(focusableSelector)?.focus();\n } else {\n focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);\n }\n }\n // Need to subscribe to current row index and check is it a current row,\n // for a situation where hovered row is the next row after current row...\n // In this case row will not be re-rendered if user switch to next row, because hovered row also renders EditingRow.\n }, [tableMeta.currentRow.currentRowIndex]);\n\n return <MemoedRow {...attributes} onClickCapture={handleClickCapture} onKeyDown={handleKeyDown} />;\n}\n\n// Memoization\n\nexport type MemoedRowProps<TType = unknown> = RowProps<TType> & {\n 'aria-grabbed'?: boolean;\n 'data-current': boolean;\n 'data-selected': boolean;\n draggable: boolean;\n index: number;\n};\n\nconst clickableElements = ['input', 'button', 'a', 'select', 'option', 'label', 'textarea'];\n\nconst MemoedRow = React.memo(function MemoedRow<TType = unknown>(props: MemoedRowProps<TType>) {\n const { index, isLastRow: _1, measureRef, onClick, onClickCapture, onDrop, row, table, tableRef, ...attributes } = props;\n const ref = React.useRef<HTMLDivElement | null>(null);\n const tableMeta = table.options.meta as TableMeta<TType>;\n const { setIsHovered } = useRowContext();\n\n // we measure the first cell (since the row has display: contents) so that the virtualiser height is correct\n React.useEffect(() => {\n const firstCell = ref.current?.querySelector('[role=cell]:first-child');\n\n if (firstCell) {\n measureRef(firstCell as HTMLElement);\n }\n }, [ref.current]);\n\n // we use capture because it also picks up clicks on e.g. select checkboxes\n const handleClickCapture = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (typeof onClickCapture === 'function') {\n onClickCapture(event);\n }\n\n // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable\n requestAnimationFrame(() => tableMeta.currentRow.setCurrentRowIndex(index));\n };\n\n const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (typeof onClick === 'function') {\n const clickedElement = event.target as HTMLElement;\n\n if (\n !ref.current?.contains(event.target as HTMLElement) ||\n clickableElements.includes(clickedElement.tagName.toLowerCase()) ||\n clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))\n ) {\n return;\n }\n\n onClick(row.original);\n }\n };\n\n const handleMouseEnter = () => {\n // When user moving mouse to fast, then some of the rows are getting stuck in hover state,\n // because mouseleave event never got triggered, to avoid this to happen we're saving the index of last hovered row,\n // so that we can unhover it when new row got hovered, and saving it in a variable outside of react to save in performance,\n // since it would be very performance heavy to use state which is bound to mouse events.\n if (previouslyHoveredIndex !== undefined) {\n if (previouslyHoveredIndex !== index) {\n unhoverPreviousRow(tableRef);\n previouslyHoveredIndex = index;\n }\n } else {\n previouslyHoveredIndex = index;\n }\n setIsHovered(true);\n };\n const handleMouseLeave = () => {\n if (previouslyHoveredIndex === index) {\n previouslyHoveredIndex = undefined;\n }\n setIsHovered(false);\n };\n\n const [isDraggedOver, dropTargetProps] = useDropTarget(event => onDrop?.(event, row.original));\n\n const className = cn(\n 'group/row contents',\n // resizing column requires dragging, which means the mouse might (on rare occasions) move over rows and trigger hover state\n // that in turn triggers rendering of e.g. row actions, which could cause janky ui - so don't allow mouse interaction when resizing\n '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n {\n 'hover:cursor-pointer': typeof onClick === 'function',\n }\n );\n\n return (\n <div\n {...attributes}\n {...(onDrop ? dropTargetProps : undefined)}\n className={className}\n data-row-index={index}\n data-dragged-over={isDraggedOver}\n onClick={handleClick}\n onClickCapture={handleClickCapture}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"row\"\n ref={ref}\n />\n );\n}) as <TType = unknown>(props: MemoedRowProps<TType>) => JSX.Element;\n"],"names":["FOCUS_MANAGER_OPTIONS","tabbable","Row","props","focusManager","useFocusManager","tableMeta","table","options","meta","isCurrentRow","currentRow","currentRowIndex","index","isDraggingRow","rowDrag","dragging","row","id","isFirstRow","isHovered","setIsHovered","React","useState","handleKeyDown","event","isDefaultPrevented","isPropagationStopped","key","hoverState","pause","focusedElement","shiftKey","focusPrevious","preventDefault","setCurrentRowIndex","setTimeout","focusLast","focusNext","isLastRow","focusFirst","memoedProps","isEnabled","undefined","getIsSelected","draggable","onClick","rowClick","handleClick","onDrop","rowDrop","handleDrop","onKeyDown","output","MemoedRow","editing","isEditing","isPaused","EditingRow","contextValue","useMemo","rowIndex","RowContext","Provider","value","lastIndex","getColumnIndex","_focusedElement$close","closest","getAttribute","previouslyHoveredIndex","unhoverPreviousRow","tableRef","_tableRef$current","mouseoutEvent","MouseEvent","view","window","bubbles","cancelable","previouslyHovered","current","querySelector","dispatchEvent","virtualiser","attributes","handleClickCapture","target","handleArrowLeftKey","stopPropagation","ctrlKey","metaKey","blur","handleArrowRightKey","useEffect","detailModeEditing","_props$tableRef$curre","_lastIndexCell$queryS","lastIndexCell","focusableSelector","focus","onClickCapture","clickableElements","memo","_1","measureRef","ref","useRef","useRowContext","firstCell","_ref$current","requestAnimationFrame","_ref$current2","clickedElement","contains","includes","tagName","toLowerCase","map","tag","join","original","handleMouseEnter","handleMouseLeave","isDraggedOver","dropTargetProps","useDropTarget","className","cn","onMouseEnter","onMouseLeave","role"],"mappings":"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"}