@economic/taco 2.14.2 → 2.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/dist/components/Drawer/Drawer.d.ts +5 -1
  2. package/dist/components/Icon/components/AiChatSolid.d.ts +3 -0
  3. package/dist/components/Icon/components/AiStars.d.ts +3 -0
  4. package/dist/components/Icon/components/EnvelopeSolid.d.ts +3 -0
  5. package/dist/components/Icon/components/PhoneSolid.d.ts +3 -0
  6. package/dist/components/Icon/components/QuestionMarkBold.d.ts +3 -0
  7. package/dist/components/Icon/components/index.d.ts +1 -1
  8. package/dist/components/Input/Input.d.ts +1 -1
  9. package/dist/components/Menu/components/Item.d.ts +1 -1
  10. package/dist/components/Menu/components/Link.d.ts +1 -1
  11. package/dist/components/Navigation2/components/Link.d.ts +1 -1
  12. package/dist/components/Provider/Localization.d.ts +19 -0
  13. package/dist/components/SearchInput2/SearchInput2.d.ts +1 -0
  14. package/dist/components/Select2/components/Option.d.ts +2 -2
  15. package/dist/components/Select2/components/Search.d.ts +1 -1
  16. package/dist/components/Table3/components/alert/ErrorAlert.d.ts +10 -0
  17. package/dist/components/Table3/components/columns/cell/DisplayCell.d.ts +5 -2
  18. package/dist/components/Table3/components/columns/cell/EditingCell.d.ts +3 -0
  19. package/dist/components/Table3/components/columns/cell/Highlight.d.ts +2 -0
  20. package/dist/components/Table3/components/columns/internal/EditingActions.d.ts +1 -1
  21. package/dist/components/Table3/components/rows/Row.d.ts +2 -0
  22. package/dist/components/Table3/components/rows/RowContext.d.ts +1 -0
  23. package/dist/components/Table3/hooks/features/useEditing.d.ts +12 -11
  24. package/dist/components/Table3/hooks/features/usePauseShortcuts.d.ts +5 -0
  25. package/dist/components/Table3/hooks/features/useSearch.d.ts +2 -0
  26. package/dist/components/Table3/hooks/features/useValidation.d.ts +13 -0
  27. package/dist/components/Table3/hooks/useTable.d.ts +4 -0
  28. package/dist/components/Table3/types.d.ts +26 -1
  29. package/dist/components/Table3/util/editing.d.ts +6 -0
  30. package/dist/components/Tag/Tag.d.ts +1 -1
  31. package/dist/components/Tooltip/Tooltip.d.ts +4 -0
  32. package/dist/esm/index.css +112 -33
  33. package/dist/esm/packages/taco/src/components/Drawer/Drawer.js +7 -2
  34. package/dist/esm/packages/taco/src/components/Drawer/Drawer.js.map +1 -1
  35. package/dist/esm/packages/taco/src/components/Field/Field.js +19 -3
  36. package/dist/esm/packages/taco/src/components/Field/Field.js.map +1 -1
  37. package/dist/esm/packages/taco/src/components/Icon/components/AiChatSolid.js +19 -0
  38. package/dist/esm/packages/taco/src/components/Icon/components/AiChatSolid.js.map +1 -0
  39. package/dist/esm/packages/taco/src/components/Icon/components/AiStars.js +30 -0
  40. package/dist/esm/packages/taco/src/components/Icon/components/AiStars.js.map +1 -0
  41. package/dist/esm/packages/taco/src/components/Icon/components/EnvelopeSolid.js +19 -0
  42. package/dist/esm/packages/taco/src/components/Icon/components/EnvelopeSolid.js.map +1 -0
  43. package/dist/esm/packages/taco/src/components/Icon/components/PhoneSolid.js +17 -0
  44. package/dist/esm/packages/taco/src/components/Icon/components/PhoneSolid.js.map +1 -0
  45. package/dist/esm/packages/taco/src/components/Icon/components/QuestionMarkBold.js +17 -0
  46. package/dist/esm/packages/taco/src/components/Icon/components/QuestionMarkBold.js.map +1 -0
  47. package/dist/esm/packages/taco/src/components/Icon/components/index.js +10 -0
  48. package/dist/esm/packages/taco/src/components/Icon/components/index.js.map +1 -1
  49. package/dist/esm/packages/taco/src/components/Provider/Localization.js +19 -0
  50. package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
  51. package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js +4 -0
  52. package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js.map +1 -1
  53. package/dist/esm/packages/taco/src/components/Table3/Table3.js +28 -4
  54. package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
  55. package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js +154 -0
  56. package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js.map +1 -0
  57. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Cell.js +51 -6
  58. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Cell.js.map +1 -1
  59. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js +7 -55
  60. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js.map +1 -1
  61. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js +69 -37
  62. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js.map +1 -1
  63. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js +17 -17
  64. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map +1 -1
  65. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Highlight.js +41 -0
  66. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Highlight.js.map +1 -0
  67. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js +21 -12
  68. package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js.map +1 -1
  69. package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Footer.js +1 -1
  70. package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Footer.js.map +1 -1
  71. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Group.js +6 -5
  72. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Group.js.map +1 -1
  73. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js +2 -2
  74. package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js.map +1 -1
  75. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js +57 -17
  76. package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js.map +1 -1
  77. package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js +42 -32
  78. package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js.map +1 -1
  79. package/dist/esm/packages/taco/src/components/Table3/components/rows/RowContext.js +2 -1
  80. package/dist/esm/packages/taco/src/components/Table3/components/rows/RowContext.js.map +1 -1
  81. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js +8 -1
  82. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js.map +1 -1
  83. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/hooks/useParentStylesheets.js +2 -1
  84. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/hooks/useParentStylesheets.js.map +1 -1
  85. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js +48 -1
  86. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js.map +1 -1
  87. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Settings.js +2 -2
  88. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Settings.js.map +1 -1
  89. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Toolbar.js +1 -1
  90. package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Toolbar.js.map +1 -1
  91. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useEditing.js +185 -101
  92. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useEditing.js.map +1 -1
  93. package/dist/esm/packages/taco/src/components/Table3/hooks/features/usePauseShortcuts.js +12 -0
  94. package/dist/esm/packages/taco/src/components/Table3/hooks/features/usePauseShortcuts.js.map +1 -0
  95. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSearch.js +4 -1
  96. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSearch.js.map +1 -1
  97. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useValidation.js +178 -0
  98. package/dist/esm/packages/taco/src/components/Table3/hooks/features/useValidation.js.map +1 -0
  99. package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js +1 -1
  100. package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map +1 -1
  101. package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js +8 -2
  102. package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js.map +1 -1
  103. package/dist/esm/packages/taco/src/components/Table3/strategies/virtualised.js +1 -1
  104. package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
  105. package/dist/esm/packages/taco/src/components/Table3/util/editing.js +21 -1
  106. package/dist/esm/packages/taco/src/components/Table3/util/editing.js.map +1 -1
  107. package/dist/esm/packages/taco/src/components/Tooltip/Tooltip.js +4 -0
  108. package/dist/esm/packages/taco/src/components/Tooltip/Tooltip.js.map +1 -1
  109. package/dist/esm/packages/taco/src/utils/hooks/useTruncated.js +20 -0
  110. package/dist/esm/packages/taco/src/utils/hooks/useTruncated.js.map +1 -0
  111. package/dist/index.css +112 -33
  112. package/dist/taco.cjs.development.js +1735 -957
  113. package/dist/taco.cjs.development.js.map +1 -1
  114. package/dist/taco.cjs.production.min.js +1 -1
  115. package/dist/taco.cjs.production.min.js.map +1 -1
  116. package/package.json +2 -2
  117. package/types.json +23852 -10957
@@ -4,45 +4,60 @@ import { Icon } from '../../../../Icon/Icon.js';
4
4
  import { Tooltip } from '../../../../Tooltip/Tooltip.js';
5
5
  import { IconButton } from '../../../../IconButton/IconButton.js';
6
6
  import { useLocalization } from '../../../../Provider/Localization.js';
7
+ import { Button } from '../../../../Button/Button.js';
7
8
  import { Spinner } from '../../../../Spinner/Spinner.js';
9
+ import { Dialog } from '../../../../Dialog/Dialog.js';
10
+ import { Group } from '../../../../Group/Group.js';
8
11
  import useTimer from '../../../../../utils/hooks/useTimer.js';
9
12
  import { Menu } from '../../../../Menu/Menu.js';
10
13
  import { Header } from '../header/Header.js';
11
14
  import { RowContext } from '../../rows/RowContext.js';
12
15
  import { DisplayCell } from '../cell/DisplayCell.js';
13
16
  import { Footer } from '../footer/Footer.js';
14
- import { SavingStateValue } from '../../../hooks/features/useEditing.js';
17
+ import { getColumnIndex } from '../../../util/editing.js';
18
+ import { lastCellIndex } from '../../rows/Row.js';
19
+ import { SavingStatusValue } from '../../../hooks/features/useEditing.js';
15
20
 
16
21
  const savingIndicatorHideDelay = 3000;
17
22
  const COLUMN_ID = '__editing_actions';
18
23
  const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
24
+ var _column$columnDef$met;
19
25
  const {
20
26
  hasChanges,
21
27
  isCurrentRow,
22
- isEditing,
23
28
  row,
29
+ editing,
30
+ rowIdentifier,
24
31
  table
25
32
  } = props;
26
- const tableMeta = table.options.meta;
27
- const savingState = tableMeta.editing.savingStates && tableMeta.editing.savingStates[row.id];
33
+ const savingStatus = editing.getSavingStatus(row.id);
28
34
  const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React__default.useState(false);
29
35
  const {
30
36
  texts
31
37
  } = useLocalization();
38
+ const [clearConfirmationOpen, setClearConfirmationOpen] = React__default.useState(false);
39
+ const columns = table.getAllFlatColumns();
40
+ const column = columns.find(column => column.id === rowIdentifier);
41
+ const rowIdentifierHeader = column === null || column === void 0 ? void 0 : (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header;
42
+ const edititngActionsRef = React__default.useRef(null);
43
+ const tableMeta = table.options.meta;
32
44
  const handleSaved = () => {
33
45
  setIsSavingIndicatorVisible(false);
34
- tableMeta.editing.removeSavingState(row.id);
46
+ editing.resetSavingStatus(row.id);
35
47
  };
36
48
  const timer = useTimer(savingIndicatorHideDelay, handleSaved);
37
49
  React__default.useEffect(() => {
38
- if (savingState && savingState.state === SavingStateValue.Saved && !isSavedIndicatorVisible) {
50
+ if (savingStatus && savingStatus === SavingStatusValue.Saved && !isSavedIndicatorVisible) {
39
51
  setIsSavingIndicatorVisible(true);
40
52
  timer.start();
41
53
  }
42
- }, [savingState]);
54
+ }, [savingStatus]);
55
+ React__default.useEffect(() => {
56
+ tableMeta.shortcutsState.pause(clearConfirmationOpen);
57
+ }, [clearConfirmationOpen]);
43
58
  let content;
44
- if (savingState) {
45
- if (savingState.state === SavingStateValue.Saving) {
59
+ if (savingStatus) {
60
+ if (savingStatus === SavingStatusValue.Saving) {
46
61
  content = /*#__PURE__*/React__default.createElement(Tooltip, {
47
62
  title: texts.table3.editing.saving.progress
48
63
  }, /*#__PURE__*/React__default.createElement(Spinner, {
@@ -58,25 +73,48 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
58
73
  }));
59
74
  }
60
75
  }
61
- if (isEditing && isCurrentRow) {
76
+ if (editing.isEditing && isCurrentRow) {
62
77
  content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, /*#__PURE__*/React__default.createElement(IconButton, {
78
+ ref: edititngActionsRef,
63
79
  appearance: "transparent",
64
80
  "aria-label": texts.table3.editing.actions.tooltip,
65
81
  icon: "more",
66
82
  menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, /*#__PURE__*/React__default.createElement(Menu.Item, {
67
83
  icon: "tick",
68
84
  disabled: !hasChanges,
69
- onClick: () => tableMeta.editing.saveChangesIfNeeded()
85
+ onClick: () => editing.saveChangesIfNeeded()
70
86
  }, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu.Item, {
71
87
  icon: "close",
72
88
  disabled: !hasChanges,
73
- onClick: () => tableMeta.editing.resetChange(row.id)
89
+ onClick: () => setClearConfirmationOpen(true)
74
90
  }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu.Item, {
75
91
  icon: "undo",
76
- onClick: () => tableMeta.editing.toggleEditing(false)
92
+ onClick: () => editing.toggleEditing(false)
77
93
  }, texts.table3.editing.actions.exit))),
78
94
  tabIndex: isCurrentRow ? 0 : -1
79
- }));
95
+ }), /*#__PURE__*/React__default.createElement(Dialog, {
96
+ size: "xs",
97
+ open: clearConfirmationOpen,
98
+ onClose: () => {
99
+ setClearConfirmationOpen(false);
100
+ requestAnimationFrame(() => {
101
+ if (edititngActionsRef.current) {
102
+ edititngActionsRef.current.focus();
103
+ // When table looses focus, we need to re-set the last column index
104
+ lastCellIndex.value = getColumnIndex(edititngActionsRef.current);
105
+ }
106
+ });
107
+ }
108
+ }, /*#__PURE__*/React__default.createElement(Dialog.Content, {
109
+ "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title
110
+ }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description.replace('[ROW_IDENTIFIER]', rowIdentifier && rowIdentifierHeader ? rowIdentifierHeader : texts.table3.validation.index).replace('[ROW_IDENTIFIER_VALUE]', rowIdentifier && rowIdentifierHeader ? row.original[rowIdentifier] : row.index)), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
111
+ tabIndex: 0
112
+ }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
113
+ tabIndex: 0,
114
+ appearance: "primary",
115
+ autoFocus: true,
116
+ onClick: () => editing.resetChange(row.id)
117
+ }, texts.table3.editing.clearChangesConfirmationDialog.confirm)))))));
80
118
  }
81
119
  const contentClassName = cn('flex items-center justify-end text-right', {
82
120
  '-mb-2 -mt-2': isCurrentRow
@@ -98,15 +136,17 @@ function Cell(props) {
98
136
  return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, props, {
99
137
  hasChanges: changeset.indexOf(props.row.id) >= 0,
100
138
  isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
101
- isEditing: tableMeta.editing.isEditing
139
+ editing: tableMeta.editing
102
140
  }));
103
141
  }
104
142
  const EDITING_ACTIONS_WIDTH = 60;
105
- function createRowEditingActionsColumn() {
143
+ function createRowEditingActionsColumn(rowIdentifier) {
106
144
  return {
107
145
  id: COLUMN_ID,
108
146
  header: Header,
109
- cell: Cell,
147
+ cell: context => /*#__PURE__*/React__default.createElement(Cell, Object.assign({}, context, {
148
+ rowIdentifier: rowIdentifier
149
+ })),
110
150
  footer: Footer,
111
151
  meta: {
112
152
  align: 'right',
@@ -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 hasChanges: boolean;\n isCurrentRow: boolean;\n isEditing: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { hasChanges, 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 { 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 !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 !h-5 !w-5\" />\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={!hasChanges}\n onClick={() => tableMeta.editing.saveChangesIfNeeded()}>\n {texts.table3.editing.actions.save}\n </Menu.Item>\n <Menu.Item\n icon=\"close\"\n disabled={!hasChanges}\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 const contentClassName = cn('flex items-center justify-end text-right', { '-mb-2 -mt-2': isCurrentRow });\n return (\n <DisplayCell {...props} className={cn({ '!sticky': !!content })}>\n {content ? <span className={contentClassName}>{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 const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];\n\n return (\n <MemoedCell\n {...props}\n hasChanges={changeset.indexOf(props.row.id) >= 0}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n />\n );\n}\n\nexport const EDITING_ACTIONS_WIDTH = 60;\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_var(--table3-row-actions-shadow)]',\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","hasChanges","isCurrentRow","isEditing","row","table","tableMeta","options","meta","savingState","editing","savingStates","id","isSavedIndicatorVisible","setIsSavingIndicatorVisible","useState","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","contentClassName","cn","DisplayCell","undefined","Cell","rowIndex","useContext","RowContext","changeset","changes","Object","keys","indexOf","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 { SavingStatusValue, useEditing } 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';\nimport { Dialog } from '../../../../Dialog/Dialog';\nimport { Group } from '../../../../Group/Group';\nimport { Button } from '../../../../Button/Button';\nimport { lastCellIndex } from '../../rows/Row';\nimport { getColumnIndex } from '../../../util/editing';\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 hasChanges: boolean;\n isCurrentRow: boolean;\n editing: ReturnType<typeof useEditing>;\n rowIdentifier?: string;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { hasChanges, isCurrentRow, row, editing, rowIdentifier, table } = props;\n\n const savingStatus = editing.getSavingStatus(row.id);\n const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React.useState(false);\n const { texts } = useLocalization();\n const [clearConfirmationOpen, setClearConfirmationOpen] = React.useState(false);\n const columns = table.getAllFlatColumns();\n const column = columns.find(column => column.id === rowIdentifier);\n const rowIdentifierHeader = column?.columnDef.meta?.header;\n const edititngActionsRef = React.useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const handleSaved = () => {\n setIsSavingIndicatorVisible(false);\n editing.resetSavingStatus(row.id);\n };\n const timer = useTimer(savingIndicatorHideDelay, handleSaved);\n\n React.useEffect(() => {\n if (savingStatus && savingStatus === SavingStatusValue.Saved && !isSavedIndicatorVisible) {\n setIsSavingIndicatorVisible(true);\n timer.start();\n }\n }, [savingStatus]);\n\n React.useEffect(() => {\n tableMeta.shortcutsState.pause(clearConfirmationOpen);\n }, [clearConfirmationOpen]);\n\n let content;\n\n if (savingStatus) {\n if (savingStatus === SavingStatusValue.Saving) {\n content = (\n <Tooltip title={texts.table3.editing.saving.progress}>\n <Spinner delay={0} className=\"!text-grey-700 mr-1 !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 !h-5 !w-5\" />\n </Tooltip>\n );\n }\n }\n\n if (editing.isEditing && isCurrentRow) {\n content = (\n <>\n {content}\n <IconButton\n ref={edititngActionsRef}\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={!hasChanges}\n onClick={() => editing.saveChangesIfNeeded()}>\n {texts.table3.editing.actions.save}\n </Menu.Item>\n <Menu.Item\n icon=\"close\"\n disabled={!hasChanges}\n onClick={() => setClearConfirmationOpen(true)}>\n {texts.table3.editing.actions.clear}\n </Menu.Item>\n <Menu.Item icon=\"undo\" onClick={() => 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 <Dialog\n size=\"xs\"\n open={clearConfirmationOpen}\n onClose={() => {\n setClearConfirmationOpen(false);\n requestAnimationFrame(() => {\n if (edititngActionsRef.current) {\n edititngActionsRef.current.focus();\n // When table looses focus, we need to re-set the last column index\n lastCellIndex.value = getColumnIndex(edititngActionsRef.current);\n }\n });\n }}>\n <Dialog.Content aria-label={texts.table3.editing.clearChangesConfirmationDialog.title}>\n <Dialog.Title>{texts.table3.editing.clearChangesConfirmationDialog.title}</Dialog.Title>\n\n <p>\n {texts.table3.editing.clearChangesConfirmationDialog.description\n .replace(\n '[ROW_IDENTIFIER]',\n rowIdentifier && rowIdentifierHeader ? rowIdentifierHeader : texts.table3.validation.index\n )\n .replace(\n '[ROW_IDENTIFIER_VALUE]',\n rowIdentifier && rowIdentifierHeader ? row.original[rowIdentifier] : row.index\n )}\n </p>\n\n <Dialog.Footer>\n <Group>\n <Dialog.Close>\n <Button tabIndex={0}>{texts.table3.editing.clearChangesConfirmationDialog.cancel}</Button>\n </Dialog.Close>\n <Dialog.Close>\n <Button tabIndex={0} appearance=\"primary\" autoFocus onClick={() => editing.resetChange(row.id)}>\n {texts.table3.editing.clearChangesConfirmationDialog.confirm}\n </Button>\n </Dialog.Close>\n </Group>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog>\n </>\n );\n }\n\n const contentClassName = cn('flex items-center justify-end text-right', { '-mb-2 -mt-2': isCurrentRow });\n return (\n <DisplayCell {...props} className={cn({ '!sticky': !!content })}>\n {content ? <span className={contentClassName}>{content}</span> : undefined}\n </DisplayCell>\n );\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n rowIdentifier?: string;\n};\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 const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];\n\n return (\n <MemoedCell\n {...props}\n hasChanges={changeset.indexOf(props.row.id) >= 0}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n editing={tableMeta.editing}\n />\n );\n}\n\nexport const EDITING_ACTIONS_WIDTH = 60;\n\nexport function createRowEditingActionsColumn<TType = unknown>(rowIdentifier?: string): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: (context: CellContext<TType, unknown>) => <Cell {...context} rowIdentifier={rowIdentifier} />,\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_var(--table3-row-actions-shadow)]',\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","hasChanges","isCurrentRow","row","editing","rowIdentifier","table","savingStatus","getSavingStatus","id","isSavedIndicatorVisible","setIsSavingIndicatorVisible","useState","texts","useLocalization","clearConfirmationOpen","setClearConfirmationOpen","columns","getAllFlatColumns","column","find","rowIdentifierHeader","_column$columnDef$met","columnDef","meta","header","edititngActionsRef","useRef","tableMeta","options","handleSaved","resetSavingStatus","timer","useTimer","useEffect","SavingStatusValue","Saved","start","shortcutsState","pause","content","Saving","Tooltip","title","table3","saving","progress","Spinner","delay","className","complete","Icon","name","isEditing","IconButton","ref","appearance","actions","tooltip","icon","menu","menuProps","Menu","Content","Item","disabled","onClick","saveChangesIfNeeded","save","clear","toggleEditing","exit","tabIndex","Dialog","size","open","onClose","requestAnimationFrame","current","focus","lastCellIndex","value","getColumnIndex","clearChangesConfirmationDialog","Title","description","replace","validation","index","original","Footer","Group","Close","Button","cancel","autoFocus","resetChange","confirm","contentClassName","cn","DisplayCell","undefined","Cell","rowIndex","useContext","RowContext","changeset","changes","Object","keys","indexOf","currentRow","currentRowIndex","EDITING_ACTIONS_WIDTH","createRowEditingActionsColumn","ColumnHeader","cell","context","footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","minSize"],"mappings":"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"}
@@ -3,12 +3,15 @@ import cn from 'classnames';
3
3
  import { useFocusManager } from '@react-aria/focus';
4
4
  import { useDropTarget } from '../../../../utils/hooks/useDropTarget.js';
5
5
  import { RowContext, useRowContext } from './RowContext.js';
6
- import { focusableSelector } from '../../util/editing.js';
6
+ import { focusableSelector, getColumnIndex, LastCellIndex } from '../../util/editing.js';
7
7
 
8
8
  const FOCUS_MANAGER_OPTIONS = {
9
- tabbable: true
9
+ tabbable: true,
10
+ // Filter out all focusable elelemnts which are not in current row
11
+ accept: element => !!element.closest('[role="row"][data-current="true"]')
10
12
  };
11
13
  function Row(props) {
14
+ var _tableMeta$validation, _tableMeta$validation2;
12
15
  const focusManager = useFocusManager();
13
16
  const tableMeta = props.table.options.meta;
14
17
  const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;
@@ -55,6 +58,7 @@ function Row(props) {
55
58
  }
56
59
  }
57
60
  };
61
+ const hasError = !!Object.keys((_tableMeta$validation = (_tableMeta$validation2 = tableMeta.validation.errors) === null || _tableMeta$validation2 === void 0 ? void 0 : _tableMeta$validation2[props.row.id]) !== null && _tableMeta$validation !== void 0 ? _tableMeta$validation : {}).length;
58
62
  // rows are heavily memoized because performance in our table is critical
59
63
  // be careful and selective about props that you pass to the row
60
64
  const memoedProps = {
@@ -62,6 +66,7 @@ function Row(props) {
62
66
  'aria-grabbed': isDraggingRow ? true : tableMeta.rowDrag.isEnabled ? false : undefined,
63
67
  'data-current': isCurrentRow,
64
68
  'data-selected': props.row.getIsSelected(),
69
+ 'data-invalid': hasError,
65
70
  draggable: tableMeta.rowDrag.isEnabled,
66
71
  index: props.index,
67
72
  onClick: tableMeta.rowClick.handleClick,
@@ -80,21 +85,15 @@ function Row(props) {
80
85
  const contextValue = React__default.useMemo(() => ({
81
86
  isHovered,
82
87
  setIsHovered,
83
- rowIndex: props.index
84
- }), [isHovered, props.index]);
88
+ rowIndex: props.index,
89
+ hasError
90
+ }), [isHovered, hasError, props.index]);
85
91
  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
86
92
  value: contextValue
87
93
  }, output);
88
94
  }
89
95
  // 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
90
- let lastIndex;
91
- function getColumnIndex(focusedElement) {
92
- if (focusedElement) {
93
- var _focusedElement$close;
94
- return (_focusedElement$close = focusedElement.closest('[role=cell]')) === null || _focusedElement$close === void 0 ? void 0 : _focusedElement$close.getAttribute('data-column-index');
95
- }
96
- return null;
97
- }
96
+ const lastCellIndex = /*#__PURE__*/new LastCellIndex();
98
97
  // This code is needed to avoid multiple rows being hovered at the same time (it happens since we use non-css hovering)
99
98
  let previouslyHoveredIndex;
100
99
  const unhoverPreviousRow = tableRef => {
@@ -121,7 +120,7 @@ function EditingRow(props) {
121
120
  const focusManager = useFocusManager();
122
121
  const tableMeta = props.table.options.meta;
123
122
  const handleClickCapture = event => {
124
- lastIndex = getColumnIndex(event.target);
123
+ lastCellIndex.value = getColumnIndex(event.target);
125
124
  };
126
125
  const handleArrowLeftKey = event => {
127
126
  let focusedElement;
@@ -130,26 +129,27 @@ function EditingRow(props) {
130
129
  // so we don't need default browser behaviour.
131
130
  event.stopPropagation();
132
131
  event.preventDefault();
132
+ tableMeta.hoverState.pause(true);
133
133
  // "CTRL + ArrowLeft" or "META + ArrowLeft" should focus first focusable element of the row
134
134
  if (event.ctrlKey || event.metaKey) {
135
135
  event.target.blur();
136
136
  focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
137
- lastIndex = getColumnIndex(focusedElement);
137
+ lastCellIndex.value = getColumnIndex(focusedElement);
138
138
  } else {
139
139
  // looping backwards
140
140
  focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);
141
141
  if (focusedElement) {
142
- lastIndex = getColumnIndex(focusedElement);
142
+ lastCellIndex.value = getColumnIndex(focusedElement);
143
143
  } else {
144
144
  // there are no previous elements to focus, go up a row (if there are rows above)
145
- if (!isFirstRow) {
145
+ if (!isFirstRow || !event.currentTarget.contains(focusedElement)) {
146
146
  event.preventDefault();
147
147
  tableMeta.hoverState.pause(true);
148
148
  tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
149
149
  setTimeout(() => {
150
- focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
150
+ focusedElement = focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
151
151
  // Need to update lastIndex when row got changed and last element got selected.
152
- lastIndex = getColumnIndex(focusedElement);
152
+ lastCellIndex.value = getColumnIndex(focusedElement);
153
153
  }, 1);
154
154
  }
155
155
  }
@@ -163,26 +163,27 @@ function EditingRow(props) {
163
163
  // so we don't need default browser behaviour.
164
164
  event.stopPropagation();
165
165
  event.preventDefault();
166
+ tableMeta.hoverState.pause(true);
166
167
  // "CTRL + ArrowRight" or "META + ArrowRight" should focus last focusable element of the row
167
168
  if (event.ctrlKey || event.metaKey) {
168
169
  event.target.blur();
169
170
  focusedElement = focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
170
- lastIndex = getColumnIndex(focusedElement);
171
+ lastCellIndex.value = getColumnIndex(focusedElement);
171
172
  } else {
172
173
  // looping forwards
173
174
  focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);
174
175
  if (focusedElement) {
175
- lastIndex = getColumnIndex(focusedElement);
176
+ lastCellIndex.value = getColumnIndex(focusedElement);
176
177
  } else {
177
178
  // there are no next elements to focus, go down a row or go outside the table
178
- if (!props.isLastRow) {
179
+ if (!props.isLastRow && !event.currentTarget.contains(focusedElement)) {
179
180
  event.preventDefault();
180
181
  tableMeta.hoverState.pause(true);
181
182
  tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
182
183
  setTimeout(() => {
183
- focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
184
+ focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
184
185
  // Need to update lastIndex when row got changed and last element got selected.
185
- lastIndex = getColumnIndex(focusedElement);
186
+ lastCellIndex.value = getColumnIndex(focusedElement);
186
187
  }, 1);
187
188
  }
188
189
  }
@@ -196,7 +197,7 @@ function EditingRow(props) {
196
197
  }
197
198
  }, [tableMeta.hoverState.isPaused]);
198
199
  const handleKeyDown = event => {
199
- if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing) {
200
+ if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing || tableMeta.shortcutsState.isPaused) {
200
201
  return;
201
202
  }
202
203
  onKeyDown(event); // handles tab behaviour
@@ -205,19 +206,28 @@ function EditingRow(props) {
205
206
  };
206
207
  // this ensures we focus either on a field or on the same column when keyboard navigating up/down
207
208
  React__default.useEffect(() => {
208
- if (tableMeta.currentRow.currentRowIndex === props.index) {
209
- if (lastIndex !== undefined) {
210
- var _props$tableRef$curre, _lastIndexCell$queryS;
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}"]`);
212
- lastIndexCell === null || lastIndexCell === void 0 ? void 0 : (_lastIndexCell$queryS = lastIndexCell.querySelector(focusableSelector)) === null || _lastIndexCell$queryS === void 0 ? void 0 : _lastIndexCell$queryS.focus();
209
+ // When table in searching state, whe should prevent editing control to be focused, because it will cause search field to loose focus.
210
+ if (tableMeta.currentRow.currentRowIndex === props.index && !tableMeta.search.isSearching) {
211
+ if (lastCellIndex.value !== null) {
212
+ var _props$tableRef$curre;
213
+ const lastCellElement = (_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="${lastCellIndex.value}"]`);
214
+ const focusableElement = lastCellElement === null || lastCellElement === void 0 ? void 0 : lastCellElement.querySelector(focusableSelector);
215
+ if (focusableElement) {
216
+ focusableElement.focus();
217
+ // if we found a cell but it doesn't contain focusable element, then we'll focus the first one in a row.
218
+ } else if (lastCellElement) {
219
+ const focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
220
+ lastCellIndex.value = getColumnIndex(focusedElement);
221
+ }
213
222
  } else {
214
- focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
223
+ const focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
224
+ lastCellIndex.value = getColumnIndex(focusedElement);
215
225
  }
216
226
  }
217
227
  // Need to subscribe to current row index and check is it a current row,
218
228
  // for a situation where hovered row is the next row after current row...
219
229
  // In this case row will not be re-rendered if user switch to next row, because hovered row also renders EditingRow.
220
- }, [tableMeta.currentRow.currentRowIndex]);
230
+ }, [tableMeta.currentRow.currentRowIndex, tableMeta.search.isSearching]);
221
231
  return /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, attributes, {
222
232
  onClickCapture: handleClickCapture,
223
233
  onKeyDown: handleKeyDown
@@ -309,5 +319,5 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
309
319
  }));
310
320
  });
311
321
 
312
- export { Row };
322
+ export { Row, lastCellIndex };
313
323
  //# sourceMappingURL=Row.js.map
@@ -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\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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"}
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 { LastCellIndex, focusableSelector, getColumnIndex } from '../../util/editing';\n\nconst FOCUS_MANAGER_OPTIONS = {\n tabbable: true,\n // Filter out all focusable elelemnts which are not in current row\n accept: (element: Element) => !!element.closest('[role=\"row\"][data-current=\"true\"]'),\n};\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 const hasError = !!Object.keys(tableMeta.validation.errors?.[props.row.id] ?? {}).length;\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 'data-invalid': hasError,\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(\n () => ({ isHovered, setIsHovered, rowIndex: props.index, hasError }),\n [isHovered, hasError, props.index]\n );\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\nexport const lastCellIndex = new LastCellIndex();\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 lastCellIndex.value = 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 tableMeta.hoverState.pause(true);\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 lastCellIndex.value = getColumnIndex(focusedElement);\n } else {\n // looping backwards\n focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);\n\n if (focusedElement) {\n lastCellIndex.value = getColumnIndex(focusedElement);\n } else {\n // there are no previous elements to focus, go up a row (if there are rows above)\n if (!isFirstRow || !event.currentTarget.contains(focusedElement)) {\n event.preventDefault();\n tableMeta.hoverState.pause(true);\n tableMeta.currentRow.setCurrentRowIndex(props.index - 1);\n setTimeout(() => {\n focusedElement = focusManager.focusLast(FOCUS_MANAGER_OPTIONS);\n // Need to update lastIndex when row got changed and last element got selected.\n lastCellIndex.value = 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 tableMeta.hoverState.pause(true);\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 lastCellIndex.value = getColumnIndex(focusedElement);\n } else {\n // looping forwards\n focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);\n\n if (focusedElement) {\n lastCellIndex.value = 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 && !event.currentTarget.contains(focusedElement)) {\n event.preventDefault();\n tableMeta.hoverState.pause(true);\n tableMeta.currentRow.setCurrentRowIndex(props.index + 1);\n setTimeout(() => {\n focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);\n // Need to update lastIndex when row got changed and last element got selected.\n lastCellIndex.value = 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 (\n event.isDefaultPrevented() ||\n event.isPropagationStopped() ||\n tableMeta.editing.detailModeEditing ||\n tableMeta.shortcutsState.isPaused\n ) {\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 // When table in searching state, whe should prevent editing control to be focused, because it will cause search field to loose focus.\n if (tableMeta.currentRow.currentRowIndex === props.index && !tableMeta.search.isSearching) {\n if (lastCellIndex.value !== null) {\n const lastCellElement = props.tableRef.current?.querySelector(\n `[role=\"row\"][data-current=\"true\"] [data-column-index=\"${lastCellIndex.value}\"]`\n );\n const focusableElement = lastCellElement?.querySelector(focusableSelector);\n if (focusableElement) {\n focusableElement.focus();\n // if we found a cell but it doesn't contain focusable element, then we'll focus the first one in a row.\n } else if (lastCellElement) {\n const focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);\n lastCellIndex.value = getColumnIndex(focusedElement);\n }\n } else {\n const focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);\n lastCellIndex.value = getColumnIndex(focusedElement);\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, tableMeta.search.isSearching]);\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","accept","element","closest","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","hasError","Object","keys","_tableMeta$validation","_tableMeta$validation2","validation","errors","length","memoedProps","isEnabled","undefined","getIsSelected","draggable","onClick","rowClick","handleClick","onDrop","rowDrop","handleDrop","onKeyDown","output","MemoedRow","editing","isEditing","isPaused","EditingRow","contextValue","useMemo","rowIndex","RowContext","Provider","value","lastCellIndex","LastCellIndex","previouslyHoveredIndex","unhoverPreviousRow","tableRef","_tableRef$current","mouseoutEvent","MouseEvent","view","window","bubbles","cancelable","previouslyHovered","current","querySelector","dispatchEvent","virtualiser","attributes","handleClickCapture","getColumnIndex","target","handleArrowLeftKey","stopPropagation","ctrlKey","metaKey","blur","currentTarget","contains","handleArrowRightKey","useEffect","detailModeEditing","shortcutsState","search","isSearching","_props$tableRef$curre","lastCellElement","focusableElement","focusableSelector","focus","onClickCapture","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":"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"}
@@ -5,7 +5,8 @@ const RowContext = /*#__PURE__*/React__default.createContext({
5
5
  setIsHovered: () => {
6
6
  /* empty */
7
7
  },
8
- rowIndex: 0
8
+ rowIndex: 0,
9
+ hasError: false
9
10
  });
10
11
  const useRowContext = () => React__default.useContext(RowContext);
11
12
 
@@ -1 +1 @@
1
- {"version":3,"file":"RowContext.js","sources":["../../../../../../../../../src/components/Table3/components/rows/RowContext.tsx"],"sourcesContent":["import React from 'react';\n\ntype RowContextValue = {\n isHovered: boolean;\n setIsHovered: (value: boolean) => void;\n rowIndex: number;\n};\n\nexport const RowContext = React.createContext<RowContextValue>({\n isHovered: false,\n setIsHovered: () => {\n /* empty */\n },\n rowIndex: 0,\n});\n\nexport const useRowContext = () => React.useContext(RowContext);\n"],"names":["RowContext","React","createContext","isHovered","setIsHovered","rowIndex","useRowContext","useContext"],"mappings":";;MAQaA,UAAU,gBAAGC,cAAK,CAACC,aAAa,CAAkB;EAC3DC,SAAS,EAAE,KAAK;EAChBC,YAAY,EAAEA;;GAEb;EACDC,QAAQ,EAAE;CACb;MAEYC,aAAa,GAAGA,MAAML,cAAK,CAACM,UAAU,CAACP,UAAU;;;;"}
1
+ {"version":3,"file":"RowContext.js","sources":["../../../../../../../../../src/components/Table3/components/rows/RowContext.tsx"],"sourcesContent":["import React from 'react';\n\ntype RowContextValue = {\n isHovered: boolean;\n setIsHovered: (value: boolean) => void;\n rowIndex: number;\n hasError: boolean;\n};\n\nexport const RowContext = React.createContext<RowContextValue>({\n isHovered: false,\n setIsHovered: () => {\n /* empty */\n },\n rowIndex: 0,\n hasError: false,\n});\n\nexport const useRowContext = () => React.useContext(RowContext);\n"],"names":["RowContext","React","createContext","isHovered","setIsHovered","rowIndex","hasError","useRowContext","useContext"],"mappings":";;MASaA,UAAU,gBAAGC,cAAK,CAACC,aAAa,CAAkB;EAC3DC,SAAS,EAAE,KAAK;EAChBC,YAAY,EAAEA;;GAEb;EACDC,QAAQ,EAAE,CAAC;EACXC,QAAQ,EAAE;CACb;MAEYC,aAAa,GAAGA,MAAMN,cAAK,CAACO,UAAU,CAACR,UAAU;;;;"}
@@ -41,7 +41,7 @@ function FiltersButton(props) {
41
41
  (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
42
42
  });
43
43
  // state, since we "apply" filters
44
- const [filters, setFilters] = React__default.useState(table.getState().columnFilters);
44
+ const [filters, setFilters] = React__default.useState(appliedFilters);
45
45
  const [placeholderCount, setPlaceholderCount] = React__default.useState(1);
46
46
  // filters
47
47
  const handleChangeFilter = (currentId, filter) => {
@@ -98,6 +98,13 @@ function FiltersButton(props) {
98
98
  setFilters([]);
99
99
  setPlaceholderCount(1);
100
100
  };
101
+ // Because filters can be reset from outside
102
+ React__default.useEffect(() => {
103
+ if (appliedFilters.length === 0) {
104
+ setFilters([]);
105
+ setPlaceholderCount(1);
106
+ }
107
+ }, [appliedFilters]);
101
108
  const buttonProps = {
102
109
  'aria-label': texts.table3.filters.tooltip,
103
110
  className: cn({