@economic/taco 2.44.4 → 2.44.5-create.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/Provider/Localization.d.ts +2 -0
- package/dist/components/Report/Report.d.ts +1 -1
- package/dist/components/Table3/Table3.d.ts +2 -14
- package/dist/components/Table3/components/Columns/Internal/EditingActionsMenu.d.ts +1 -2
- package/dist/components/Table3/components/Editing/DiscardChangesConfirmationDialog.d.ts +7 -0
- package/dist/components/Table3/components/Row/Editing/CreateNewRow.d.ts +13 -0
- package/dist/components/Table3/components/Row/Editing/TemporaryRow.d.ts +11 -0
- package/dist/components/Table3/features/useEditingState.d.ts +28 -0
- package/dist/components/Table3/features/useTableEditing.d.ts +25 -36
- package/dist/components/Table3/types.d.ts +23 -8
- package/dist/components/Table3/useTable3.d.ts +6 -0
- package/dist/components/Table3/util/editing.d.ts +2 -1
- package/dist/esm/index.css +6 -2
- package/dist/esm/node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js +17 -17
- package/dist/esm/node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js.map +1 -1
- package/dist/esm/packages/taco/src/components/ModeSwitch/ModeSwitch.js +2 -2
- package/dist/esm/packages/taco/src/components/ModeSwitch/ModeSwitch.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Provider/Localization.js +5 -3
- package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Switch/Switch.js +1 -1
- package/dist/esm/packages/taco/src/components/Switch/Switch.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +19 -7
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js +21 -10
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js +5 -37
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js +17 -12
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/DiscardChangesConfirmationDialog.js +34 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/DiscardChangesConfirmationDialog.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateNewRow.js +88 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateNewRow.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js +2 -14
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/TemporaryRow.js +95 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/TemporaryRow.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js +39 -6
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Toolbar/Editing/Editing.js +7 -2
- package/dist/esm/packages/taco/src/components/Table3/components/Toolbar/Editing/Editing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/features/useEditingState.js +512 -0
- package/dist/esm/packages/taco/src/components/Table3/features/useEditingState.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js +19 -406
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js +37 -32
- package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js +25 -8
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js +6 -24
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js +18 -2
- package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Listbox2/components/Root.js +1 -0
- package/dist/esm/packages/taco/src/primitives/Listbox2/components/Root.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js +3 -4
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.js +9 -3
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js +6 -3
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Footer/Footer.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Footer/Footer.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js +23 -6
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/useTable.js +2 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/useTable.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/types.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/useTableManager.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/useTableManager.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js +11 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/dom.js +7 -4
- package/dist/esm/packages/taco/src/utils/dom.js.map +1 -1
- package/dist/index.css +6 -2
- package/dist/primitives/Collection/components/Root.d.ts +2 -0
- package/dist/primitives/Table/Core/Table.d.ts +1 -0
- package/dist/primitives/Table/Core/components/Columns/Internal/Actions.d.ts +3 -1
- package/dist/primitives/Table/Core/components/Footer/Footer.d.ts +2 -2
- package/dist/primitives/Table/Core/features/useTableRenderer.d.ts +2 -2
- package/dist/primitives/Table/Core/features/useTableStyle.d.ts +1 -1
- package/dist/primitives/Table/Core/types.d.ts +3 -0
- package/dist/primitives/Table/Core/useTable.d.ts +2 -2
- package/dist/primitives/Table/types.d.ts +1 -1
- package/dist/primitives/Table/useTableManager/useTableManager.d.ts +1 -1
- package/dist/taco.cjs.development.js +941 -628
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/dom.d.ts +1 -0
- package/package.json +3 -5
- package/dist/components/Table3/components/Row/Editing/CreateRowButton.d.ts +0 -11
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js +0 -90
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js.map +0 -1
package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTableEditingListener.js","sources":["../../../../../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../hooks/useLazyEffect';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { TableRef } from '../../../primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '../../../primitives/Table/useTableManager/util/search';\nimport { useLocalization } from '../../Provider/Localization';\n\nexport function useTableEditingListener<TType = unknown>(table: ReactTable<TType>, tableRef: React.RefObject<TableRef>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const
|
1
|
+
{"version":3,"file":"useTableEditingListener.js","sources":["../../../../../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../hooks/useLazyEffect';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { TableRef } from '../../../primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '../../../primitives/Table/useTableManager/util/search';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\n\nexport function useTableEditingListener<TType = unknown>(table: ReactTable<TType>, tableRef: React.RefObject<TableRef>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const localization = useLocalization();\n\n // save when the row changes\n // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again\n const lastRowActiveIndexRef = React.useRef<number | undefined>(tableMeta.rowActive.rowActiveIndex);\n\n useLazyEffect(() => {\n if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {\n lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;\n tableMeta.editing.saveChanges(table);\n }\n }, [tableMeta.rowActive.rowActiveIndex, tableMeta.editing.saveChanges]);\n\n // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n const hasChanges = tableMeta.editing.hasChanges();\n\n React.useEffect(() => {\n function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n if (tableMeta.editing.isEditing && hasChanges) {\n event.returnValue = true;\n return true;\n }\n\n return false;\n }\n\n window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n return () => {\n window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n };\n }, [tableMeta.editing.isEditing, hasChanges]);\n\n const hasSavedChanges = tableMeta.editing.hasSaved();\n\n useLazyEffect(() => {\n if (hasSavedChanges) {\n resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);\n }\n }, [hasSavedChanges]);\n\n React.useEffect(() => {\n const onClickOutside = (event: MouseEvent) => {\n if (tableMeta.editing.isEditing) {\n const element = event.target as Element;\n const insideTable =\n element.getAttribute('data-taco') === 'backdrop' ||\n element.getAttribute('data-table') === 'editing-toggle' ||\n isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n // users can click the white space below rows which could be inside the table, but a valid scenario to save\n if (!insideTable || element.tagName === 'TABLE' || element.tagName === 'TBODY') {\n tableMeta.editing.saveChanges(table);\n }\n }\n };\n\n document.addEventListener('click', onClickOutside);\n\n return () => document.removeEventListener('click', onClickOutside);\n }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n const rows = table.getRowModel().rows;\n\n // make sure pending changes are removed for rows that no longer exist\n useLazyEffect(() => {\n const pendingChanges = tableMeta.editing.getErrorsShownInAlert();\n\n pendingChanges.forEach(pendingChange => {\n try {\n table.getRow(pendingChange.rowId);\n } catch {\n tableMeta.editing.discardChanges(pendingChange.rowId, table);\n }\n });\n }, [rows.length]);\n\n useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n event.preventDefault();\n tableMeta.editing.saveChanges(table);\n });\n}\n"],"names":["useTableEditingListener","table","tableRef","tableMeta","options","meta","localization","useLocalization","lastRowActiveIndexRef","React","useRef","rowActive","rowActiveIndex","useLazyEffect","editing","isEditing","current","saveChanges","hasChanges","useEffect","showUnsavedChangesWarning","event","returnValue","window","addEventListener","removeEventListener","hasSavedChanges","hasSaved","resetHighlightedColumnIndexes","getState","globalFilter","onClickOutside","element","target","insideTable","getAttribute","isElementInsideOrTriggeredFromContainer","tagName","document","rows","getRowModel","pendingChanges","getErrorsShownInAlert","forEach","pendingChange","getRow","rowId","discardChanges","length","useGlobalKeyDown","key","shift","undefined","preventDefault"],"mappings":"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"}
|
@@ -11,33 +11,50 @@ const RENDERERS = {
|
|
11
11
|
cell: Cell
|
12
12
|
};
|
13
13
|
function useTable3(props, ref) {
|
14
|
-
const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.validator);
|
14
|
+
const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.rowIdentityAccessor, props.validator);
|
15
15
|
const creationEnabled = editing.isEnabled && !!props.onEditingCreate;
|
16
|
+
// this gives me the performance heeby jeebies, but can't think of a better way to internalise the state
|
17
|
+
const data = React__default.useMemo(() => {
|
18
|
+
if (editing.isEditing && editing.temporaryRows.length) {
|
19
|
+
var _props$data;
|
20
|
+
return editing.temporaryRows.concat((_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : []);
|
21
|
+
}
|
22
|
+
return props.data;
|
23
|
+
}, [JSON.stringify(props.data), editing.temporaryRows.length]);
|
16
24
|
const extendedProps = {
|
17
25
|
...props,
|
26
|
+
data,
|
18
27
|
enableRowActions: editing.isEditing ? true : props.enableRowActions,
|
19
|
-
rowActions: editing.isEditing ? [(_, rowId) => (/*#__PURE__*/React__default.createElement(EditingActionMenu, {
|
28
|
+
rowActions: editing.isEditing ? [(_, rowId, table) => (/*#__PURE__*/React__default.createElement(EditingActionMenu, {
|
20
29
|
hasChanges: editing.hasChanges(rowId),
|
21
30
|
hasErrors: editing.hasRowErrors(rowId),
|
22
|
-
|
23
|
-
onEditingSave: ()
|
24
|
-
|
31
|
+
onDiscard: () => editing.discardChanges(rowId, table),
|
32
|
+
onEditingSave: function () {
|
33
|
+
try {
|
34
|
+
return Promise.resolve(editing.saveChanges(table, rowId)).then(function () {});
|
35
|
+
} catch (e) {
|
36
|
+
return Promise.reject(e);
|
37
|
+
}
|
38
|
+
},
|
25
39
|
isLastRow: !creationEnabled && table.meta.rowActive.rowActiveIndex === table.meta.length - 1
|
26
40
|
}))] : props.rowActions
|
27
41
|
};
|
28
42
|
const meta = {
|
29
43
|
editing
|
30
44
|
};
|
31
|
-
const
|
45
|
+
const options = {
|
46
|
+
virtualiserPaddingEndOffset: props.enableEditing && props.onEditingCreate ? 1 : 0
|
47
|
+
};
|
48
|
+
const table = useTable(extendedProps, ref, RENDERERS, meta, options);
|
32
49
|
// listeners
|
33
50
|
useTableEditingListener(table.instance, table.ref);
|
34
51
|
React__default.useEffect(() => {
|
35
52
|
if (table.ref.current) {
|
36
|
-
table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing);
|
53
|
+
table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing, table.instance);
|
37
54
|
}
|
38
55
|
}, [table.ref.current]);
|
39
56
|
return table;
|
40
57
|
}
|
41
58
|
|
42
|
-
export { useTable3 };
|
59
|
+
export { RENDERERS, useTable3 };
|
43
60
|
//# sourceMappingURL=useTable3.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTable3.js","sources":["../../../../../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import React from 'react';\nimport { RowData } from '@tanstack/react-table';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport { useTableEditing } from './features/useTableEditing';\nimport { Table3Props, Table3Ref } from './types';\nimport { TableRowActionRenderer } from '../../primitives/Table/types';\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { EditingActionMenu } from './components/Columns/Internal/EditingActionsMenu';\nimport { Row } from './components/Row/Row';\n\
|
1
|
+
{"version":3,"file":"useTable3.js","sources":["../../../../../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import React from 'react';\nimport { RowData } from '@tanstack/react-table';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport { useTableEditing } from './features/useTableEditing';\nimport { Table3Props, Table3Ref } from './types';\nimport { TableRowActionRenderer } from '../../primitives/Table/types';\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { EditingActionMenu } from './components/Columns/Internal/EditingActionsMenu';\nimport { Row } from './components/Row/Row';\nimport { useTableRenderOptions } from '../../primitives/Table/Core/types';\n\nexport const RENDERERS = {\n row: Row,\n cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n interface TableMeta<TData extends RowData> {\n editing: ReturnType<typeof useTableEditing>;\n }\n}\n\ntype Table3Meta = {\n editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const editing = useTableEditing(\n props.enableEditing,\n props.onEditingSave,\n props.onEditingChange,\n props.rowIdentityAccessor,\n props.validator\n );\n const creationEnabled = editing.isEnabled && !!props.onEditingCreate;\n\n // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state\n const data: TType[] = React.useMemo(() => {\n if (editing.isEditing && editing.temporaryRows.length) {\n return editing.temporaryRows.concat(props.data ?? []) as TType[];\n }\n\n return props.data;\n }, [JSON.stringify(props.data), editing.temporaryRows.length]);\n\n const extendedProps: Table3Props<TType> = {\n ...props,\n data,\n enableRowActions: editing.isEditing ? true : props.enableRowActions,\n rowActions: editing.isEditing\n ? ([\n (_, rowId, table) => (\n <EditingActionMenu\n hasChanges={editing.hasChanges(rowId)}\n hasErrors={editing.hasRowErrors(rowId)}\n onDiscard={() => editing.discardChanges(rowId, table)}\n onEditingSave={async () => {\n await editing.saveChanges(table, rowId);\n }}\n isLastRow={!creationEnabled && table.meta.rowActive.rowActiveIndex === table.meta.length - 1}\n />\n ),\n ] as TableRowActionRenderer<TType>[])\n : props.rowActions,\n };\n const meta = { editing };\n const options: useTableRenderOptions = {\n virtualiserPaddingEndOffset: props.enableEditing && props.onEditingCreate ? 1 : 0,\n };\n const table = useTable<TType, Table3Meta>(extendedProps, ref, RENDERERS, meta, options);\n\n // listeners\n useTableEditingListener<TType>(table.instance, table.ref);\n\n React.useEffect(() => {\n if (table.ref.current) {\n (table.ref.current as Table3Ref).instance.toggleEditing = (enabled: boolean | undefined) =>\n table.meta.editing.toggleEditing(enabled ?? (editing => !editing), table.instance);\n }\n }, [table.ref.current]);\n\n return table;\n}\n"],"names":["RENDERERS","row","Row","cell","Cell","useTable3","props","ref","editing","useTableEditing","enableEditing","onEditingSave","onEditingChange","rowIdentityAccessor","validator","creationEnabled","isEnabled","onEditingCreate","data","React","useMemo","isEditing","temporaryRows","length","_props$data","concat","JSON","stringify","extendedProps","enableRowActions","rowActions","_","rowId","table","EditingActionMenu","hasChanges","hasErrors","hasRowErrors","onDiscard","discardChanges","saveChanges","then","e","Promise","reject","isLastRow","meta","rowActive","rowActiveIndex","options","virtualiserPaddingEndOffset","useTable","useTableEditingListener","instance","useEffect","current","toggleEditing","enabled"],"mappings":"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"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { setDataFocusAttribute } from '../../../utils/dom.js';
|
2
1
|
import { columnFilterFn } from '../../../primitives/Table/useTableManager/util/filtering.js';
|
3
2
|
import { globalFilterFn } from '../../../primitives/Table/useTableManager/util/search.js';
|
4
3
|
|
@@ -69,6 +68,8 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
|
|
69
68
|
const aUndefined = aValue === undefined;
|
70
69
|
const bUndefined = bValue === undefined;
|
71
70
|
if (aUndefined || bUndefined) {
|
71
|
+
if (sortUndefined === 'first') return aUndefined ? -1 : 1;
|
72
|
+
if (sortUndefined === 'last') return aUndefined ? 1 : -1;
|
72
73
|
return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;
|
73
74
|
}
|
74
75
|
}
|
@@ -79,29 +80,10 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
|
|
79
80
|
}
|
80
81
|
return ((_resortedRows$index = resortedRows[index]) === null || _resortedRows$index === void 0 ? void 0 : _resortedRows$index.id) !== cell.row.id;
|
81
82
|
}
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
const firstCell = templateRow.querySelector(':first-child');
|
86
|
-
const checkbox = firstCell === null || firstCell === void 0 ? void 0 : firstCell.querySelector('[data-taco="checkbox"]');
|
87
|
-
firstCell === null || firstCell === void 0 ? void 0 : firstCell.focus();
|
88
|
-
if (checkbox) {
|
89
|
-
setDataFocusAttribute(checkbox);
|
90
|
-
}
|
91
|
-
templateRow.scrollIntoView();
|
92
|
-
const keyframes = [{
|
93
|
-
background: '#b2c7ef'
|
94
|
-
}, {
|
95
|
-
background: '#ebebeb'
|
96
|
-
}];
|
97
|
-
for (const child of templateRow.children) {
|
98
|
-
child.animate(keyframes, {
|
99
|
-
duration: 1000,
|
100
|
-
easing: 'ease-out'
|
101
|
-
});
|
102
|
-
}
|
103
|
-
}
|
83
|
+
const TEMPORARY_ROW_ID_PREFIX = 'temp-';
|
84
|
+
function isTemporaryRow(rowId) {
|
85
|
+
return rowId === null || rowId === void 0 ? void 0 : rowId.startsWith(TEMPORARY_ROW_ID_PREFIX);
|
104
86
|
}
|
105
87
|
|
106
|
-
export {
|
88
|
+
export { TEMPORARY_ROW_ID_PREFIX, isTemporaryRow, willRowMove };
|
107
89
|
//# sourceMappingURL=editing.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"editing.js","sources":["../../../../../../../../src/components/Table3/util/editing.ts"],"sourcesContent":["import { Cell as ReactTableCell, Row as ReactTableRow, Table as ReactTable } from '@tanstack/react-table';\nimport { TableFilterValue } from '../../../primitives/Table/types';\nimport {
|
1
|
+
{"version":3,"file":"editing.js","sources":["../../../../../../../../src/components/Table3/util/editing.ts"],"sourcesContent":["import { Cell as ReactTableCell, Row as ReactTableRow, Table as ReactTable } from '@tanstack/react-table';\nimport { TableFilterValue } from '../../../primitives/Table/types';\nimport { columnFilterFn } from '../../../primitives/Table/useTableManager/util/filtering';\nimport { globalFilterFn } from '../../../primitives/Table/useTableManager/util/search';\nimport { Localization } from '../../Provider/Localization';\n\nexport function willRowMove<TType = unknown>(\n cell: ReactTableCell<TType, unknown>,\n change: unknown,\n rowIndex: number,\n localization: Localization\n) {\n const { table } = cell.getContext();\n\n if (willRowMoveAfterSearch<TType>(cell, change, table, localization)) {\n return 'search';\n } else if (willRowMoveAfterFilter<TType>(cell, change)) {\n return 'filter';\n } else if (willRowMoveAfterSorting<TType>(cell, change, rowIndex)) {\n return 'sorting';\n }\n\n return undefined;\n}\n\nfunction willRowMoveAfterSearch<TType = unknown>(\n cell: ReactTableCell<TType, unknown>,\n change: unknown,\n table: ReactTable<TType>,\n localization: Localization\n) {\n const searchQuery = table.getState().globalFilter;\n\n if (!table.options.enableGlobalFilter || !searchQuery) {\n return false;\n }\n\n const rowWithChange = { ...cell.row, original: { ...cell.row.original, [cell.column.id]: change } };\n return !globalFilterFn(rowWithChange, cell.column.id, searchQuery, localization);\n}\n\nfunction willRowMoveAfterFilter<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown) {\n if (!cell.column.getIsFiltered()) {\n return false;\n }\n\n return !columnFilterFn(change, cell.column.getFilterValue() as TableFilterValue);\n}\n\nfunction willRowMoveAfterSorting<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number) {\n if (!cell.column.getIsSorted()) {\n return false;\n }\n\n const { table } = cell.getContext();\n const rows = table.getRowModel().rows;\n\n const miniSortRows: ReactTableRow<TType>[] = [\n {\n ...cell.row,\n original: {\n ...cell.row.original,\n [cell.column.id]: change,\n },\n getValue: () => change as any,\n },\n ];\n\n let index = 0;\n\n if (rowIndex > 0) {\n miniSortRows.unshift(rows[rowIndex - 1]);\n index = 1;\n }\n\n if (rowIndex < rows.length - 1) {\n miniSortRows.push(rows[rowIndex + 1]);\n }\n\n const resortedRows = [...miniSortRows].sort((rowA, rowB) => {\n const sortFn = cell.column.getSortingFn();\n const sortUndefined = cell.column.columnDef.sortUndefined;\n\n if (!table.options.manualSorting && sortUndefined) {\n const aValue = rowA.getValue(cell.column.id);\n const bValue = rowB.getValue(cell.column.id);\n\n const aUndefined = aValue === undefined;\n const bUndefined = bValue === undefined;\n\n if (aUndefined || bUndefined) {\n if (sortUndefined === 'first') return aUndefined ? -1 : 1;\n if (sortUndefined === 'last') return aUndefined ? 1 : -1;\n\n return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;\n }\n }\n\n return sortFn(rowA, rowB, cell.column.id);\n });\n\n if (cell.column.getIsSorted() === 'desc') {\n resortedRows.reverse();\n }\n\n return resortedRows[index]?.id !== cell.row.id;\n}\n\nexport const TEMPORARY_ROW_ID_PREFIX = 'temp-';\n\nexport function isTemporaryRow(rowId: string) {\n return rowId?.startsWith(TEMPORARY_ROW_ID_PREFIX);\n}\n"],"names":["willRowMove","cell","change","rowIndex","localization","table","getContext","willRowMoveAfterSearch","willRowMoveAfterFilter","willRowMoveAfterSorting","undefined","searchQuery","getState","globalFilter","options","enableGlobalFilter","rowWithChange","row","original","column","id","globalFilterFn","getIsFiltered","columnFilterFn","getFilterValue","getIsSorted","rows","getRowModel","miniSortRows","getValue","index","unshift","length","push","resortedRows","sort","rowA","rowB","sortFn","getSortingFn","sortUndefined","columnDef","manualSorting","aValue","bValue","aUndefined","bUndefined","reverse","_resortedRows$index","TEMPORARY_ROW_ID_PREFIX","isTemporaryRow","rowId","startsWith"],"mappings":"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"}
|
@@ -10,6 +10,7 @@ const getOptionsFromCollection = (collection, selector) => collection.querySelec
|
|
10
10
|
const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(props, ref) {
|
11
11
|
const {
|
12
12
|
querySelector,
|
13
|
+
resetOnChange,
|
13
14
|
tabIndex = 0,
|
14
15
|
...otherProps
|
15
16
|
} = props;
|
@@ -40,6 +41,21 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
|
|
40
41
|
internalRef.current.setActiveIndexByElement = setActiveIndexByElement;
|
41
42
|
}
|
42
43
|
}, [internalRef.current]);
|
44
|
+
React__default.useEffect(() => {
|
45
|
+
if (internalRef.current) {
|
46
|
+
const selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
|
47
|
+
const options = getOptionsFromCollection(internalRef.current, querySelector);
|
48
|
+
if (options.length && selected.length === 1) {
|
49
|
+
const firstSelected = internalRef.current.querySelector(`[aria-selected]`);
|
50
|
+
if (firstSelected) {
|
51
|
+
const selectedIndex = Array.from(options).indexOf(firstSelected);
|
52
|
+
if (selectedIndex > -1) {
|
53
|
+
setActiveOption(selectedIndex, internalRef.current, firstSelected);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
}
|
57
|
+
}
|
58
|
+
}, [resetOnChange]);
|
43
59
|
React__default.useEffect(() => {
|
44
60
|
if (internalRef.current) {
|
45
61
|
const options = getOptionsFromCollection(internalRef.current, querySelector);
|
@@ -51,8 +67,8 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
|
|
51
67
|
}
|
52
68
|
// if one item is selected, make sure it's current
|
53
69
|
if (selected.length === 1) {
|
54
|
-
|
55
|
-
|
70
|
+
if (options) {
|
71
|
+
const firstSelected = selected.item(0);
|
56
72
|
const selectedIndex = Array.from(options).indexOf(firstSelected);
|
57
73
|
if (selectedIndex > -1) {
|
58
74
|
setActiveOption(selectedIndex, internalRef.current, firstSelected);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Root.js","sources":["../../../../../../../../src/primitives/Collection/components/Root.tsx"],"sourcesContent":["import React from 'react';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { isAriaDirectionKey } from '../../../utils/aria';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\n\n/* This component provides a keyboard navigable collection primitive for use in lists\n * It is unlikely you need to edit this component\n */\n\nexport type CollectionProps = React.HTMLAttributes<HTMLDivElement> & {\n querySelector: string;\n};\n\nexport type CollectionRef = HTMLDivElement & {\n setActiveIndexByElement: (option: HTMLDivElement) => void;\n};\n\nconst getOptionsFromCollection = (collection: HTMLDivElement, selector: string): NodeListOf<Element> =>\n collection.querySelectorAll(selector);\n\n// we use javascript to set attributes (rather than cloning children and adding them)\n// so that we can support nesting (e.g. groups) - child elements that aren't options.\n// without doing this we would have to unwrap and flatten all groups\nexport const Root = React.forwardRef<CollectionRef, CollectionProps>(function CollectionRoot(props, ref) {\n const { querySelector, tabIndex = 0, ...otherProps } = props;\n const internalRef = useMergedRef<CollectionRef>(ref);\n const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n\n const setActiveOption = (index: number, collection: HTMLDivElement, option: Element) => {\n collection.querySelector(`[aria-current]`)?.removeAttribute('aria-current');\n option.setAttribute('aria-current', 'true');\n option.scrollIntoView({ block: 'nearest' });\n setActiveIndex(index);\n };\n\n const setActiveIndexByElement = React.useCallback(\n (option: HTMLDivElement) => {\n if (internalRef.current) {\n if (option.matches(querySelector)) {\n const options = getOptionsFromCollection(internalRef.current, querySelector);\n const nextActiveIndex = Array.from(options).indexOf(option);\n\n if (nextActiveIndex > -1) {\n setActiveOption(nextActiveIndex, internalRef.current, option);\n }\n }\n }\n },\n [internalRef.current, querySelector]\n );\n\n React.useEffect(() => {\n if (internalRef.current) {\n internalRef.current.setActiveIndexByElement = setActiveIndexByElement;\n }\n }, [internalRef.current]);\n\n React.useEffect(() => {\n if (internalRef.current) {\n const options = getOptionsFromCollection(internalRef.current, querySelector);\n\n if (options.length) {\n let selected = internalRef.current.querySelectorAll(`[aria-current=\"true\"]`);\n\n // if nothing is current (keyboard visible), look for selected items\n if (selected.length === 0) {\n selected = internalRef.current.querySelectorAll(`[aria-selected]`);\n }\n\n // if one item is selected, make sure it's current\n if (selected.length === 1) {\n const firstSelected = internalRef.current.querySelector(`[aria-selected]`);\n\n if (firstSelected) {\n const selectedIndex = Array.from(options).indexOf(firstSelected);\n\n if (selectedIndex > -1) {\n setActiveOption(selectedIndex, internalRef.current, firstSelected);\n }\n }\n } else {\n // multiple selected or none selected should go to 0\n setActiveOption(0, internalRef.current, options.item(0));\n }\n }\n }\n }, [props.children]);\n\n const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n const option = event.target as HTMLElement;\n\n if (option.matches(querySelector)) {\n const options = getOptionsFromCollection(event.currentTarget, querySelector);\n const nextActiveIndex = Array.from(options).indexOf(option);\n\n if (nextActiveIndex > -1) {\n setActiveOption(nextActiveIndex, event.currentTarget, option);\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n // this stops the event dispatched to the option rebounding back and starting an infinite loop\n if (event.target !== event.currentTarget) {\n return;\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const options = getOptionsFromCollection(event.currentTarget, querySelector);\n\n if (options) {\n if (isAriaDirectionKey(event)) {\n event.preventDefault();\n event.stopPropagation();\n const nextActiveIndex = getNextEnabledItem(event, options, activeIndex);\n\n if (nextActiveIndex !== undefined && nextActiveIndex !== activeIndex) {\n setActiveOption(nextActiveIndex, event.currentTarget, options.item(nextActiveIndex));\n }\n } else if (activeIndex !== undefined && !!options.item(activeIndex)) {\n // forward events onto the underlying option - this lets consumers place onKeyDown handlers on their own components\n options\n .item(activeIndex)\n ?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n }\n }\n };\n\n return <div {...otherProps} onClick={handleClick} onKeyDown={handleKeyDown} ref={internalRef} tabIndex={tabIndex} />;\n});\n\nexport const getNextIndexFromKeycode = (\n event: React.KeyboardEvent,\n length: number,\n activeIndex: number | undefined\n): number | undefined => {\n switch (event.key) {\n case 'ArrowUp':\n return activeIndex === undefined ? length - 1 : activeIndex > 0 ? activeIndex - 1 : activeIndex;\n\n case 'ArrowDown':\n return activeIndex === undefined ? 0 : activeIndex < length - 1 ? activeIndex + 1 : activeIndex;\n\n case 'Home':\n return 0;\n\n case 'End':\n return length - 1;\n\n default:\n return;\n }\n};\n\nexport const getNextEnabledItem = (\n event: React.KeyboardEvent<HTMLElement>,\n options: NodeListOf<Element>,\n activeIndex: number | undefined,\n recurse = true\n): number | undefined => {\n const nextIndex = getNextIndexFromKeycode(event, options.length, activeIndex);\n\n if (nextIndex !== undefined) {\n if (nextIndex === activeIndex) {\n return activeIndex;\n } else if (options.item(nextIndex) && isSkippableItem(options.item(nextIndex))) {\n // check in the other direction if the first or last item is disabled,\n // but prevent infinite loops if all elements are disabled by disabling recursion\n if (recurse) {\n if (nextIndex === 0) {\n return getNextEnabledItem(\n new KeyboardEvent(event.type, { ...(event as any), key: 'ArrowDown' }) as any,\n options,\n nextIndex,\n false\n );\n } else if (nextIndex === options.length - 1) {\n return getNextEnabledItem(\n new KeyboardEvent(event.type, { ...(event as any), key: 'ArrowUp' }) as any,\n options,\n nextIndex,\n false\n );\n }\n }\n\n return getNextEnabledItem(event, options, nextIndex, recurse);\n }\n }\n\n return nextIndex;\n};\n\nconst isSkippableItem = (element: Element) => {\n return (\n element.getAttribute('role') === 'presentation' ||\n !!element.hasAttribute('disabled') ||\n !!element.getAttribute('aria-disabled') ||\n !!element.getAttribute('aria-hidden')\n );\n};\n"],"names":["getOptionsFromCollection","collection","selector","querySelectorAll","Root","React","forwardRef","CollectionRoot","props","ref","querySelector","tabIndex","otherProps","internalRef","useMergedRef","activeIndex","setActiveIndex","useState","setActiveOption","index","option","_collection$querySele","removeAttribute","setAttribute","scrollIntoView","block","setActiveIndexByElement","useCallback","current","matches","options","nextActiveIndex","Array","from","indexOf","useEffect","length","selected","firstSelected","selectedIndex","item","children","handleClick","event","target","currentTarget","handleKeyDown","onKeyDown","isDefaultPrevented","isAriaDirectionKey","preventDefault","stopPropagation","getNextEnabledItem","undefined","_options$item","dispatchEvent","createCustomKeyboardEvent","onClick","getNextIndexFromKeycode","key","recurse","nextIndex","isSkippableItem","KeyboardEvent","type","element","getAttribute","hasAttribute"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Root.js","sources":["../../../../../../../../src/primitives/Collection/components/Root.tsx"],"sourcesContent":["import React from 'react';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { isAriaDirectionKey } from '../../../utils/aria';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\n\n/* This component provides a keyboard navigable collection primitive for use in lists\n * It is unlikely you need to edit this component\n */\n\nexport type CollectionProps = React.HTMLAttributes<HTMLDivElement> & {\n querySelector: string;\n resetOnChange?: unknown;\n};\n\nexport type CollectionRef = HTMLDivElement & {\n setActiveIndexByElement: (option: HTMLDivElement) => void;\n};\n\nconst getOptionsFromCollection = (collection: HTMLDivElement, selector: string): NodeListOf<Element> =>\n collection.querySelectorAll(selector);\n\n// we use javascript to set attributes (rather than cloning children and adding them)\n// so that we can support nesting (e.g. groups) - child elements that aren't options.\n// without doing this we would have to unwrap and flatten all groups\nexport const Root = React.forwardRef<CollectionRef, CollectionProps>(function CollectionRoot(props, ref) {\n const { querySelector, resetOnChange, tabIndex = 0, ...otherProps } = props;\n const internalRef = useMergedRef<CollectionRef>(ref);\n const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n\n const setActiveOption = (index: number, collection: HTMLDivElement, option: Element) => {\n collection.querySelector(`[aria-current]`)?.removeAttribute('aria-current');\n option.setAttribute('aria-current', 'true');\n option.scrollIntoView({ block: 'nearest' });\n setActiveIndex(index);\n };\n\n const setActiveIndexByElement = React.useCallback(\n (option: HTMLDivElement) => {\n if (internalRef.current) {\n if (option.matches(querySelector)) {\n const options = getOptionsFromCollection(internalRef.current, querySelector);\n const nextActiveIndex = Array.from(options).indexOf(option);\n\n if (nextActiveIndex > -1) {\n setActiveOption(nextActiveIndex, internalRef.current, option);\n }\n }\n }\n },\n [internalRef.current, querySelector]\n );\n\n React.useEffect(() => {\n if (internalRef.current) {\n internalRef.current.setActiveIndexByElement = setActiveIndexByElement;\n }\n }, [internalRef.current]);\n\n React.useEffect(() => {\n if (internalRef.current) {\n const selected = internalRef.current.querySelectorAll(`[aria-current=\"true\"]`);\n const options = getOptionsFromCollection(internalRef.current, querySelector);\n\n if (options.length && selected.length === 1) {\n const firstSelected = internalRef.current.querySelector(`[aria-selected]`);\n\n if (firstSelected) {\n const selectedIndex = Array.from(options).indexOf(firstSelected);\n\n if (selectedIndex > -1) {\n setActiveOption(selectedIndex, internalRef.current, firstSelected);\n }\n }\n }\n }\n }, [resetOnChange]);\n\n React.useEffect(() => {\n if (internalRef.current) {\n const options = getOptionsFromCollection(internalRef.current, querySelector);\n\n if (options.length) {\n let selected = internalRef.current.querySelectorAll(`[aria-current=\"true\"]`);\n\n // if nothing is current (keyboard visible), look for selected items\n if (selected.length === 0) {\n selected = internalRef.current.querySelectorAll(`[aria-selected]`);\n }\n\n // if one item is selected, make sure it's current\n if (selected.length === 1) {\n if (options) {\n const firstSelected = selected.item(0);\n const selectedIndex = Array.from(options).indexOf(firstSelected);\n\n if (selectedIndex > -1) {\n setActiveOption(selectedIndex, internalRef.current, firstSelected);\n }\n }\n } else {\n // multiple selected or none selected should go to 0\n setActiveOption(0, internalRef.current, options.item(0));\n }\n }\n }\n }, [props.children]);\n\n const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n const option = event.target as HTMLElement;\n\n if (option.matches(querySelector)) {\n const options = getOptionsFromCollection(event.currentTarget, querySelector);\n const nextActiveIndex = Array.from(options).indexOf(option);\n\n if (nextActiveIndex > -1) {\n setActiveOption(nextActiveIndex, event.currentTarget, option);\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n // this stops the event dispatched to the option rebounding back and starting an infinite loop\n if (event.target !== event.currentTarget) {\n return;\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const options = getOptionsFromCollection(event.currentTarget, querySelector);\n\n if (options) {\n if (isAriaDirectionKey(event)) {\n event.preventDefault();\n event.stopPropagation();\n const nextActiveIndex = getNextEnabledItem(event, options, activeIndex);\n\n if (nextActiveIndex !== undefined && nextActiveIndex !== activeIndex) {\n setActiveOption(nextActiveIndex, event.currentTarget, options.item(nextActiveIndex));\n }\n } else if (activeIndex !== undefined && !!options.item(activeIndex)) {\n // forward events onto the underlying option - this lets consumers place onKeyDown handlers on their own components\n options\n .item(activeIndex)\n ?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n }\n }\n };\n\n return <div {...otherProps} onClick={handleClick} onKeyDown={handleKeyDown} ref={internalRef} tabIndex={tabIndex} />;\n});\n\nexport const getNextIndexFromKeycode = (\n event: React.KeyboardEvent,\n length: number,\n activeIndex: number | undefined\n): number | undefined => {\n switch (event.key) {\n case 'ArrowUp':\n return activeIndex === undefined ? length - 1 : activeIndex > 0 ? activeIndex - 1 : activeIndex;\n\n case 'ArrowDown':\n return activeIndex === undefined ? 0 : activeIndex < length - 1 ? activeIndex + 1 : activeIndex;\n\n case 'Home':\n return 0;\n\n case 'End':\n return length - 1;\n\n default:\n return;\n }\n};\n\nexport const getNextEnabledItem = (\n event: React.KeyboardEvent<HTMLElement>,\n options: NodeListOf<Element>,\n activeIndex: number | undefined,\n recurse = true\n): number | undefined => {\n const nextIndex = getNextIndexFromKeycode(event, options.length, activeIndex);\n\n if (nextIndex !== undefined) {\n if (nextIndex === activeIndex) {\n return activeIndex;\n } else if (options.item(nextIndex) && isSkippableItem(options.item(nextIndex))) {\n // check in the other direction if the first or last item is disabled,\n // but prevent infinite loops if all elements are disabled by disabling recursion\n if (recurse) {\n if (nextIndex === 0) {\n return getNextEnabledItem(\n new KeyboardEvent(event.type, { ...(event as any), key: 'ArrowDown' }) as any,\n options,\n nextIndex,\n false\n );\n } else if (nextIndex === options.length - 1) {\n return getNextEnabledItem(\n new KeyboardEvent(event.type, { ...(event as any), key: 'ArrowUp' }) as any,\n options,\n nextIndex,\n false\n );\n }\n }\n\n return getNextEnabledItem(event, options, nextIndex, recurse);\n }\n }\n\n return nextIndex;\n};\n\nconst isSkippableItem = (element: Element) => {\n return (\n element.getAttribute('role') === 'presentation' ||\n !!element.hasAttribute('disabled') ||\n !!element.getAttribute('aria-disabled') ||\n !!element.getAttribute('aria-hidden')\n );\n};\n"],"names":["getOptionsFromCollection","collection","selector","querySelectorAll","Root","React","forwardRef","CollectionRoot","props","ref","querySelector","resetOnChange","tabIndex","otherProps","internalRef","useMergedRef","activeIndex","setActiveIndex","useState","setActiveOption","index","option","_collection$querySele","removeAttribute","setAttribute","scrollIntoView","block","setActiveIndexByElement","useCallback","current","matches","options","nextActiveIndex","Array","from","indexOf","useEffect","selected","length","firstSelected","selectedIndex","item","children","handleClick","event","target","currentTarget","handleKeyDown","onKeyDown","isDefaultPrevented","isAriaDirectionKey","preventDefault","stopPropagation","getNextEnabledItem","undefined","_options$item","dispatchEvent","createCustomKeyboardEvent","onClick","getNextIndexFromKeycode","key","recurse","nextIndex","isSkippableItem","KeyboardEvent","type","element","getAttribute","hasAttribute"],"mappings":"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"}
|
@@ -36,6 +36,7 @@ const Root = /*#__PURE__*/React__default.forwardRef(function Listbox2(props, ref
|
|
36
36
|
id: id,
|
37
37
|
querySelector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR,
|
38
38
|
ref: ref,
|
39
|
+
resetOnChange: value,
|
39
40
|
role: "listbox"
|
40
41
|
}), children)));
|
41
42
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Root.js","sources":["../../../../../../../../src/primitives/Listbox2/components/Root.tsx"],"sourcesContent":["import React from 'react';\nimport { useId } from '../../../hooks/useId';\nimport * as CollectionPrimitive from '../../Collection/Collection';\nimport { Listbox2Value } from '../types';\nimport { Listbox2Context } from './Context';\n\nexport type Listbox2Props = React.HTMLAttributes<HTMLDivElement> & {\n customSelector?: string;\n disabled?: boolean;\n multiple?: boolean;\n readOnly?: boolean;\n setValue: (value: Listbox2Value) => void;\n value?: Listbox2Value;\n};\n\nconst DEFAULT_SELECTOR = '[role=\"option\"]';\n\nexport const Root = React.forwardRef<CollectionPrimitive.CollectionRef, Listbox2Props>(function Listbox2(props, ref) {\n const {\n children,\n customSelector,\n disabled = false,\n id: nativeId,\n multiple,\n readOnly = false,\n setValue,\n title,\n value,\n ...otherProps\n } = props;\n // The id name cannot start with a number, otherwise unit tests will fail when trying to querry element with such id.\n // That's why adding prefix.\n const id = 'listbox2-' + useId(nativeId);\n\n const context = React.useMemo(\n () => ({\n disabled,\n readOnly,\n setValue,\n value,\n }),\n [disabled, readOnly, value]\n );\n\n return (\n <Listbox2Context.Provider value={context}>\n <div data-taco=\"listbox2\">\n <CollectionPrimitive.Root\n {...otherProps}\n aria-multiselectable={multiple ? true : undefined}\n id={id}\n querySelector={customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR}\n ref={ref}\n role=\"listbox\">\n {children}\n </CollectionPrimitive.Root>\n </div>\n </Listbox2Context.Provider>\n );\n});\n\nexport const createListboxValueSetter =\n (multiple: boolean, setValue: React.Dispatch<React.SetStateAction<Listbox2Value | undefined>>) =>\n (nextValue: Listbox2Value) => {\n setValue(value => {\n if (Array.isArray(nextValue)) {\n return nextValue;\n }\n\n if (multiple) {\n if (value === undefined) {\n return [nextValue];\n } else if (Array.isArray(value)) {\n if (value.includes(nextValue)) {\n return value.filter(v => v !== nextValue);\n }\n\n return [...value, nextValue];\n } else if (value === nextValue) {\n return [];\n }\n\n return [value, nextValue];\n }\n\n return nextValue;\n });\n };\n"],"names":["DEFAULT_SELECTOR","Root","React","forwardRef","Listbox2","props","ref","children","customSelector","disabled","id","nativeId","multiple","readOnly","setValue","title","value","otherProps","useId","context","useMemo","Listbox2Context","Provider","CollectionPrimitive","undefined","querySelector","role","createListboxValueSetter","nextValue","Array","isArray","includes","filter","v"],"mappings":";;;;;;AAeA,MAAMA,gBAAgB,GAAG,iBAAiB;MAE7BC,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAmD,SAASC,QAAQA,CAACC,KAAK,EAAEC,GAAG;EAC/G,MAAM;IACFC,QAAQ;IACRC,cAAc;IACdC,QAAQ,GAAG,KAAK;IAChBC,EAAE,EAAEC,QAAQ;IACZC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,QAAQ;IACRC,KAAK;IACLC,KAAK;IACL,GAAGC;GACN,GAAGZ,KAAK;;;EAGT,MAAMK,EAAE,GAAG,WAAW,GAAGQ,KAAK,CAACP,QAAQ,CAAC;EAExC,MAAMQ,OAAO,GAAGjB,cAAK,CAACkB,OAAO,CACzB,OAAO;IACHX,QAAQ;IACRI,QAAQ;IACRC,QAAQ;IACRE;GACH,CAAC,EACF,CAACP,QAAQ,EAAEI,QAAQ,EAAEG,KAAK,CAAC,CAC9B;EAED,oBACId,6BAACmB,eAAe,CAACC,QAAQ;IAACN,KAAK,EAAEG;kBAC7BjB;iBAAe;kBACXA,6BAACqB,MAAwB,oBACjBN,UAAU;4BACQL,QAAQ,GAAG,IAAI,GAAGY,SAAS;IACjDd,EAAE,EAAEA,EAAE;IACNe,aAAa,EAAEjB,cAAc,GAAG,GAAGR,gBAAgB,KAAKQ,cAAc,EAAE,GAAGR,gBAAgB;IAC3FM,GAAG,EAAEA,GAAG;IACRoB,IAAI,EAAC;
|
1
|
+
{"version":3,"file":"Root.js","sources":["../../../../../../../../src/primitives/Listbox2/components/Root.tsx"],"sourcesContent":["import React from 'react';\nimport { useId } from '../../../hooks/useId';\nimport * as CollectionPrimitive from '../../Collection/Collection';\nimport { Listbox2Value } from '../types';\nimport { Listbox2Context } from './Context';\n\nexport type Listbox2Props = React.HTMLAttributes<HTMLDivElement> & {\n customSelector?: string;\n disabled?: boolean;\n multiple?: boolean;\n readOnly?: boolean;\n setValue: (value: Listbox2Value) => void;\n value?: Listbox2Value;\n};\n\nconst DEFAULT_SELECTOR = '[role=\"option\"]';\n\nexport const Root = React.forwardRef<CollectionPrimitive.CollectionRef, Listbox2Props>(function Listbox2(props, ref) {\n const {\n children,\n customSelector,\n disabled = false,\n id: nativeId,\n multiple,\n readOnly = false,\n setValue,\n title,\n value,\n ...otherProps\n } = props;\n // The id name cannot start with a number, otherwise unit tests will fail when trying to querry element with such id.\n // That's why adding prefix.\n const id = 'listbox2-' + useId(nativeId);\n\n const context = React.useMemo(\n () => ({\n disabled,\n readOnly,\n setValue,\n value,\n }),\n [disabled, readOnly, value]\n );\n\n return (\n <Listbox2Context.Provider value={context}>\n <div data-taco=\"listbox2\">\n <CollectionPrimitive.Root\n {...otherProps}\n aria-multiselectable={multiple ? true : undefined}\n id={id}\n querySelector={customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR}\n ref={ref}\n resetOnChange={value}\n role=\"listbox\">\n {children}\n </CollectionPrimitive.Root>\n </div>\n </Listbox2Context.Provider>\n );\n});\n\nexport const createListboxValueSetter =\n (multiple: boolean, setValue: React.Dispatch<React.SetStateAction<Listbox2Value | undefined>>) =>\n (nextValue: Listbox2Value) => {\n setValue(value => {\n if (Array.isArray(nextValue)) {\n return nextValue;\n }\n\n if (multiple) {\n if (value === undefined) {\n return [nextValue];\n } else if (Array.isArray(value)) {\n if (value.includes(nextValue)) {\n return value.filter(v => v !== nextValue);\n }\n\n return [...value, nextValue];\n } else if (value === nextValue) {\n return [];\n }\n\n return [value, nextValue];\n }\n\n return nextValue;\n });\n };\n"],"names":["DEFAULT_SELECTOR","Root","React","forwardRef","Listbox2","props","ref","children","customSelector","disabled","id","nativeId","multiple","readOnly","setValue","title","value","otherProps","useId","context","useMemo","Listbox2Context","Provider","CollectionPrimitive","undefined","querySelector","resetOnChange","role","createListboxValueSetter","nextValue","Array","isArray","includes","filter","v"],"mappings":";;;;;;AAeA,MAAMA,gBAAgB,GAAG,iBAAiB;MAE7BC,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAmD,SAASC,QAAQA,CAACC,KAAK,EAAEC,GAAG;EAC/G,MAAM;IACFC,QAAQ;IACRC,cAAc;IACdC,QAAQ,GAAG,KAAK;IAChBC,EAAE,EAAEC,QAAQ;IACZC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,QAAQ;IACRC,KAAK;IACLC,KAAK;IACL,GAAGC;GACN,GAAGZ,KAAK;;;EAGT,MAAMK,EAAE,GAAG,WAAW,GAAGQ,KAAK,CAACP,QAAQ,CAAC;EAExC,MAAMQ,OAAO,GAAGjB,cAAK,CAACkB,OAAO,CACzB,OAAO;IACHX,QAAQ;IACRI,QAAQ;IACRC,QAAQ;IACRE;GACH,CAAC,EACF,CAACP,QAAQ,EAAEI,QAAQ,EAAEG,KAAK,CAAC,CAC9B;EAED,oBACId,6BAACmB,eAAe,CAACC,QAAQ;IAACN,KAAK,EAAEG;kBAC7BjB;iBAAe;kBACXA,6BAACqB,MAAwB,oBACjBN,UAAU;4BACQL,QAAQ,GAAG,IAAI,GAAGY,SAAS;IACjDd,EAAE,EAAEA,EAAE;IACNe,aAAa,EAAEjB,cAAc,GAAG,GAAGR,gBAAgB,KAAKQ,cAAc,EAAE,GAAGR,gBAAgB;IAC3FM,GAAG,EAAEA,GAAG;IACRoB,aAAa,EAAEV,KAAK;IACpBW,IAAI,EAAC;MACJpB,QAAQ,CACc,CACzB,CACiB;AAEnC,CAAC;MAEYqB,wBAAwB,GACjCA,CAAChB,QAAiB,EAAEE,QAAyE,KAC5Fe,SAAwB;EACrBf,QAAQ,CAACE,KAAK;IACV,IAAIc,KAAK,CAACC,OAAO,CAACF,SAAS,CAAC,EAAE;MAC1B,OAAOA,SAAS;;IAGpB,IAAIjB,QAAQ,EAAE;MACV,IAAII,KAAK,KAAKQ,SAAS,EAAE;QACrB,OAAO,CAACK,SAAS,CAAC;OACrB,MAAM,IAAIC,KAAK,CAACC,OAAO,CAACf,KAAK,CAAC,EAAE;QAC7B,IAAIA,KAAK,CAACgB,QAAQ,CAACH,SAAS,CAAC,EAAE;UAC3B,OAAOb,KAAK,CAACiB,MAAM,CAACC,CAAC,IAAIA,CAAC,KAAKL,SAAS,CAAC;;QAG7C,OAAO,CAAC,GAAGb,KAAK,EAAEa,SAAS,CAAC;OAC/B,MAAM,IAAIb,KAAK,KAAKa,SAAS,EAAE;QAC5B,OAAO,EAAE;;MAGb,OAAO,CAACb,KAAK,EAAEa,SAAS,CAAC;;IAG7B,OAAOA,SAAS;GACnB,CAAC;AACN;;;;"}
|
@@ -29,6 +29,7 @@ function TableGrid(props) {
|
|
29
29
|
var _table$state$grouping;
|
30
30
|
const {
|
31
31
|
enableHorizontalArrowKeyNavigation,
|
32
|
+
rowsForFooter,
|
32
33
|
table,
|
33
34
|
...attributes
|
34
35
|
} = props;
|
@@ -36,8 +37,6 @@ function TableGrid(props) {
|
|
36
37
|
table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);
|
37
38
|
} : undefined;
|
38
39
|
const filterReason = getFilterReason(table);
|
39
|
-
const searchNotApplied = !table.state.globalFilter || table.state.globalFilter === '';
|
40
|
-
const filtersNotApplied = !table.state.columnFilters || table.state.columnFilters.length === 0;
|
41
40
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("style", null, table.stylesheet), /*#__PURE__*/React__default.createElement(FocusScope, null, /*#__PURE__*/React__default.createElement("table", Object.assign({}, attributes, {
|
42
41
|
id: table.id,
|
43
42
|
"data-table-font-size": table.meta.fontSize.size,
|
@@ -70,9 +69,9 @@ function TableGrid(props) {
|
|
70
69
|
...table.renderer.style,
|
71
70
|
height: table.renderer.style.height + ROW_HEIGHT_ESTIMATES[table.meta.rowHeight.height]
|
72
71
|
} : table.renderer.style
|
73
|
-
}, table.renderer.rows,
|
72
|
+
}, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
|
74
73
|
table: table.instance
|
75
|
-
}) : null)))));
|
74
|
+
}, rowsForFooter) : null)))));
|
76
75
|
}
|
77
76
|
|
78
77
|
export { Table, TableGrid };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../../../../../../src/primitives/Table/Core/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport { Header } from './components/Header/Header';\nimport { Body } from './components/Body/Body';\nimport { Foot } from './components/Footer/Footer';\nimport { EmptyStateBody } from './components/Body/EmptyStateBody';\nimport { useTableReturnValue } from './useTable';\nimport { TableToolbar } from './components/Toolbar/Toolbar';\nimport
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../../../../../../src/primitives/Table/Core/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport { Header } from './components/Header/Header';\nimport { Body } from './components/Body/Body';\nimport { Foot } from './components/Footer/Footer';\nimport { EmptyStateBody } from './components/Body/EmptyStateBody';\nimport { useTableReturnValue } from './useTable';\nimport { TableToolbar } from './components/Toolbar/Toolbar';\nimport { TableEmptyStateReason } from '../types';\nimport { ROW_HEIGHT_ESTIMATES } from './util/rows';\nimport './style.css';\n\ntype TableProps = {\n children: JSX.Element | Array<JSX.Element | null>;\n};\n\nexport function Table(props: TableProps) {\n return <>{props.children}</>;\n}\nTable.Toolbar = TableToolbar;\nTable.Grid = TableGrid;\n\nexport type TableGridProps<TType = unknown> = React.TableHTMLAttributes<HTMLTableElement> & {\n 'data-taco': string;\n enableHorizontalArrowKeyNavigation?: boolean;\n rowsForFooter?: JSX.Element;\n table: useTableReturnValue<TType>;\n};\n\nfunction getFilterReason<TType = unknown>(table: useTableReturnValue<TType>): TableEmptyStateReason | null {\n if (table.instance.getFilteredRowModel().rows.length === 0 && table.instance.getCoreRowModel().rows.length !== 0) {\n const state = table.instance.getState();\n\n if (table.meta.search.enableGlobalFilter && !!state.globalFilter) {\n return 'searching';\n }\n\n return 'filtering';\n }\n if (table.instance.getCoreRowModel().rows.length === 0) {\n return 'empty';\n }\n\n return null;\n}\n\nexport function TableGrid<TType = unknown>(props: TableGridProps<TType>) {\n const { enableHorizontalArrowKeyNavigation, rowsForFooter, table, ...attributes } = props;\n const handleFocus =\n table.meta.rowActive.rowActiveIndex === undefined\n ? (event: React.FocusEvent) => {\n table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);\n }\n : undefined;\n const filterReason = getFilterReason(table);\n\n return (\n <>\n <style>{table.stylesheet}</style>\n <FocusScope>\n <table\n {...attributes}\n id={table.id}\n data-table-font-size={table.meta.fontSize.size}\n data-table-grouped={!!table.state.grouping?.length}\n data-table-horizontally-scrolled={table.meta.columnFreezing.isHorizontallyScrolled ? true : undefined}\n data-table-status={table.meta.server.isEnabled ? (table.meta.server.isReady ? 'ready' : undefined) : 'ready'}\n data-table-pause-hover={table.meta.rowActive.isHoverStatePaused ? true : undefined}\n data-table-resizing={table.state.columnSizingInfo.isResizingColumn ? true : undefined}\n data-table-row-height={table.meta.rowHeight.height}\n onFocus={handleFocus}\n onScroll={table.meta.columnFreezing.handleScroll}\n ref={table.ref}\n style={table.style}\n tabIndex={-1}>\n <thead>\n {table.instance.getHeaderGroups().map(headerGroup => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map(props => (\n <Header key={props.id} header={props} scrollToIndex={table.renderer.scrollToIndex} />\n ))}\n </tr>\n ))}\n </thead>\n {filterReason ? (\n <EmptyStateBody emptyState={props.table.props.emptyState} reason={filterReason} />\n ) : (\n <>\n <Body\n enableHorizontalArrowKeyNavigation={enableHorizontalArrowKeyNavigation}\n table={table.instance}\n tableElement={table.ref.current}\n scrollToIndex={table.renderer.scrollToIndex}\n style={\n props.children\n ? {\n ...table.renderer.style,\n height:\n (table.renderer.style.height as number) +\n ROW_HEIGHT_ESTIMATES[table.meta.rowHeight.height],\n }\n : table.renderer.style\n }>\n {table.renderer.rows}\n {props.children}\n </Body>\n {table.meta.footer.isEnabled ? <Foot table={table.instance}>{rowsForFooter}</Foot> : null}\n </>\n )}\n </table>\n </FocusScope>\n </>\n );\n}\n"],"names":["Table","props","React","children","Toolbar","TableToolbar","Grid","TableGrid","getFilterReason","table","instance","getFilteredRowModel","rows","length","getCoreRowModel","state","getState","meta","search","enableGlobalFilter","globalFilter","enableHorizontalArrowKeyNavigation","rowsForFooter","attributes","handleFocus","rowActive","rowActiveIndex","undefined","event","renderer","scrollToIndex","filterReason","stylesheet","FocusScope","id","fontSize","size","_table$state$grouping","grouping","columnFreezing","isHorizontallyScrolled","server","isEnabled","isReady","isHoverStatePaused","columnSizingInfo","isResizingColumn","rowHeight","height","onFocus","onScroll","handleScroll","ref","style","tabIndex","getHeaderGroups","map","headerGroup","key","headers","Header","header","EmptyStateBody","emptyState","reason","Body","tableElement","current","ROW_HEIGHT_ESTIMATES","footer","Foot"],"mappings":"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"}
|
@@ -12,7 +12,10 @@ function GroupedCell(props) {
|
|
12
12
|
index,
|
13
13
|
isHighlighted
|
14
14
|
} = props;
|
15
|
-
const
|
15
|
+
const {
|
16
|
+
table
|
17
|
+
} = cell.getContext();
|
18
|
+
const tableMeta = table.options.meta;
|
16
19
|
const columnMeta = cell.column.columnDef.meta;
|
17
20
|
const attributes = getCellAttributes(cell, index, isHighlighted);
|
18
21
|
const {
|
@@ -30,7 +33,8 @@ function GroupedCell(props) {
|
|
30
33
|
colSpan: colSpan,
|
31
34
|
rowActions: tableMeta.rowGroups.rowActionsForGroup,
|
32
35
|
rowId: cell.row.id,
|
33
|
-
subRows: subRows
|
36
|
+
subRows: subRows,
|
37
|
+
table: table
|
34
38
|
}), content);
|
35
39
|
}
|
36
40
|
const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupedCell(props) {
|
@@ -42,6 +46,7 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
|
|
42
46
|
rowActions,
|
43
47
|
rowId,
|
44
48
|
subRows,
|
49
|
+
table,
|
45
50
|
...attributes
|
46
51
|
} = props;
|
47
52
|
return /*#__PURE__*/React__default.createElement("td", Object.assign({}, attributes, {
|
@@ -56,7 +61,8 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
|
|
56
61
|
actionsLength: 4,
|
57
62
|
data: subRows,
|
58
63
|
isActiveRow: true,
|
59
|
-
rowId: rowId
|
64
|
+
rowId: rowId,
|
65
|
+
table: table
|
60
66
|
})) : null);
|
61
67
|
});
|
62
68
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"GroupedCell.js","sources":["../../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { getCellAttributes } from '../util';\nimport { Actions as RowGroupActions } from '../../Internal/Actions';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport { RowContext } from '../../../Row/RowContext';\nimport { TableRowActionGroupRenderer } from '../../../../../types';\nimport { TableCellRendererProps } from '../../../../types';\n\nexport function GroupedCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n const { cell, cellRef, index, isHighlighted } = props;\n const
|
1
|
+
{"version":3,"file":"GroupedCell.js","sources":["../../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { getCellAttributes } from '../util';\nimport { Actions as RowGroupActions } from '../../Internal/Actions';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport { RowContext } from '../../../Row/RowContext';\nimport { TableRowActionGroupRenderer } from '../../../../../types';\nimport { TableCellRendererProps } from '../../../../types';\n\nexport function GroupedCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n const { cell, cellRef, index, isHighlighted } = props;\n const { table } = cell.getContext();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n const attributes = getCellAttributes(cell, index, isHighlighted);\n\n const { isHovered, rowIndex } = React.useContext(RowContext);\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n const canShowActions = isActiveRow || (isHovered && !tableMeta.rowActive.isHoverStatePaused);\n\n const colSpan = cell.row.getVisibleCells().filter(c => !isInternalColumn(c.column.id)).length - 1;\n const content = columnMeta.renderer?.(cell.getValue<TType>(), cell.row.original) ?? cell.getValue() ?? null;\n const subRows = cell.getContext().row.subRows.map(row => row.original);\n\n return (\n <MemoedGroupedCell<TType>\n {...attributes}\n canShowActions={canShowActions}\n cellRef={cellRef}\n colSpan={colSpan}\n rowActions={tableMeta.rowGroups.rowActionsForGroup}\n rowId={cell.row.id}\n subRows={subRows}\n table={table}>\n {content}\n </MemoedGroupedCell>\n );\n}\n\ntype MemoedGroupedCellProps<TType = unknown> = React.TdHTMLAttributes<HTMLTableCellElement> & {\n canShowActions: boolean;\n cellRef: React.RefObject<HTMLTableCellElement>;\n colSpan: number;\n rowActions?: TableRowActionGroupRenderer<TType>[];\n rowId: string;\n subRows: TType[];\n table: ReactTable<TType>;\n};\n\nconst MemoedGroupedCell = React.memo(function MemoedGroupedCell<TType = unknown>(props: MemoedGroupedCellProps<TType>) {\n const { canShowActions, cellRef, children, colSpan, rowActions, rowId, subRows, table, ...attributes } = props;\n\n return (\n <td {...attributes} ref={cellRef} style={{ gridColumn: `span ${colSpan} / span ${colSpan}` }}>\n <span className=\"grow\">{children}</span>\n {rowActions?.length && canShowActions ? (\n <RowGroupActions<TType>\n actions={rowActions as any}\n actionsLength={4}\n data={subRows}\n isActiveRow\n rowId={rowId}\n table={table}\n />\n ) : null}\n </td>\n );\n}) as <TType = unknown>(props: MemoedGroupedCellProps<TType>) => JSX.Element;\n"],"names":["GroupedCell","props","cell","cellRef","index","isHighlighted","table","getContext","tableMeta","options","meta","columnMeta","column","columnDef","attributes","getCellAttributes","isHovered","rowIndex","React","useContext","RowContext","isActiveRow","rowActive","rowActiveIndex","canShowActions","isHoverStatePaused","colSpan","row","getVisibleCells","filter","c","isInternalColumn","id","length","content","_ref","_columnMeta$renderer","_columnMeta$renderer2","renderer","call","getValue","original","subRows","map","MemoedGroupedCell","rowActions","rowGroups","rowActionsForGroup","rowId","memo","children","ref","style","gridColumn","className","RowGroupActions","actions","actionsLength","data"],"mappings":";;;;;;SASgBA,WAAWA,CAAkBC,KAAoC;;EAC7E,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAEC,KAAK;IAAEC;GAAe,GAAGJ,KAAK;EACrD,MAAM;IAAEK;GAAO,GAAGJ,IAAI,CAACK,UAAU,EAAE;EACnC,MAAMC,SAAS,GAAGF,KAAK,CAACG,OAAO,CAACC,IAA6B;EAC7D,MAAMC,UAAU,GAAGT,IAAI,CAACU,MAAM,CAACC,SAAS,CAACH,IAA4C;EACrF,MAAMI,UAAU,GAAGC,iBAAiB,CAACb,IAAI,EAAEE,KAAK,EAAEC,aAAa,CAAC;EAEhE,MAAM;IAAEW,SAAS;IAAEC;GAAU,GAAGC,cAAK,CAACC,UAAU,CAACC,UAAU,CAAC;EAC5D,MAAMC,WAAW,GAAGb,SAAS,CAACc,SAAS,CAACC,cAAc,KAAKN,QAAQ;EACnE,MAAMO,cAAc,GAAGH,WAAW,IAAKL,SAAS,IAAI,CAACR,SAAS,CAACc,SAAS,CAACG,kBAAmB;EAE5F,MAAMC,OAAO,GAAGxB,IAAI,CAACyB,GAAG,CAACC,eAAe,EAAE,CAACC,MAAM,CAACC,CAAC,IAAI,CAACC,gBAAgB,CAACD,CAAC,CAAClB,MAAM,CAACoB,EAAE,CAAC,CAAC,CAACC,MAAM,GAAG,CAAC;EACjG,MAAMC,OAAO,IAAAC,IAAA,IAAAC,oBAAA,IAAAC,qBAAA,GAAG1B,UAAU,CAAC2B,QAAQ,cAAAD,qBAAA,uBAAnBA,qBAAA,CAAAE,IAAA,CAAA5B,UAAU,EAAYT,IAAI,CAACsC,QAAQ,EAAS,EAAEtC,IAAI,CAACyB,GAAG,CAACc,QAAQ,CAAC,cAAAL,oBAAA,cAAAA,oBAAA,GAAIlC,IAAI,CAACsC,QAAQ,EAAE,cAAAL,IAAA,cAAAA,IAAA,GAAI,IAAI;EAC3G,MAAMO,OAAO,GAAGxC,IAAI,CAACK,UAAU,EAAE,CAACoB,GAAG,CAACe,OAAO,CAACC,GAAG,CAAChB,GAAG,IAAIA,GAAG,CAACc,QAAQ,CAAC;EAEtE,oBACIvB,6BAAC0B,iBAAiB,oBACV9B,UAAU;IACdU,cAAc,EAAEA,cAAc;IAC9BrB,OAAO,EAAEA,OAAO;IAChBuB,OAAO,EAAEA,OAAO;IAChBmB,UAAU,EAAErC,SAAS,CAACsC,SAAS,CAACC,kBAAkB;IAClDC,KAAK,EAAE9C,IAAI,CAACyB,GAAG,CAACK,EAAE;IAClBU,OAAO,EAAEA,OAAO;IAChBpC,KAAK,EAAEA;MACN4B,OAAO,CACQ;AAE5B;AAYA,MAAMU,iBAAiB,gBAAG1B,cAAK,CAAC+B,IAAI,CAAC,SAASL,iBAAiBA,CAAkB3C,KAAoC;EACjH,MAAM;IAAEuB,cAAc;IAAErB,OAAO;IAAE+C,QAAQ;IAAExB,OAAO;IAAEmB,UAAU;IAAEG,KAAK;IAAEN,OAAO;IAAEpC,KAAK;IAAE,GAAGQ;GAAY,GAAGb,KAAK;EAE9G,oBACIiB,qDAAQJ,UAAU;IAAEqC,GAAG,EAAEhD,OAAO;IAAEiD,KAAK,EAAE;MAAEC,UAAU,EAAE,QAAQ3B,OAAO,WAAWA,OAAO;;mBACpFR;IAAMoC,SAAS,EAAC;KAAQJ,QAAQ,CAAQ,EACvCL,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEZ,MAAM,IAAIT,cAAc,iBACjCN,6BAACqC,OAAe;IACZC,OAAO,EAAEX,UAAiB;IAC1BY,aAAa,EAAE,CAAC;IAChBC,IAAI,EAAEhB,OAAO;IACbrB,WAAW;IACX2B,KAAK,EAAEA,KAAK;IACZ1C,KAAK,EAAEA;IACT,IACF,IAAI,CACP;AAEb,CAAC,CAA2E;;;;"}
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js
CHANGED
@@ -12,12 +12,14 @@ function Actions(props) {
|
|
12
12
|
actionsLength,
|
13
13
|
data,
|
14
14
|
isActiveRow,
|
15
|
-
rowId
|
15
|
+
rowId,
|
16
|
+
table
|
16
17
|
} = props;
|
17
18
|
const {
|
18
19
|
texts
|
19
20
|
} = useLocalization();
|
20
|
-
|
21
|
+
// we don't want to document passing table, so it isn't on the type
|
22
|
+
const visibleActions = actions.map(action => action(data, rowId, table)).filter(action => !!action);
|
21
23
|
const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
|
22
24
|
const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
|
23
25
|
const className = cn('flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden');
|
@@ -73,7 +75,8 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
|
|
73
75
|
actionsLength: actionsLength,
|
74
76
|
data: row.original,
|
75
77
|
isActiveRow: isActiveRow,
|
76
|
-
rowId: row.id
|
78
|
+
rowId: row.id,
|
79
|
+
table: table
|
77
80
|
});
|
78
81
|
}
|
79
82
|
return null;
|