npm - @economic/taco - Versions diffs - 2.17.1 → 2.17.2 - Mend

@economic/taco 2.17.1 → 2.17.2

Files changed (23) hide show

package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js.map CHANGED Viewed

	@@ -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 { 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 isActiveRow: 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, isActiveRow, 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 && isActiveRow) {\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 icon=\"tick\" disabled={!hasChanges} onClick={() => editing.saveChangesIfNeeded()}>\n {texts.table3.editing.actions.save}\n </Menu.Item>\n <Menu.Item icon=\"close\" disabled={!hasChanges} 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={isActiveRow ? 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\n tabIndex={0}\n appearance=\"primary\"\n autoFocus\n 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': isActiveRow });\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 isActiveRow={tableMeta.rowActive.rowActiveIndex === 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","isActiveRow","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","rowActive","rowActiveIndex","EDITING_ACTIONS_WIDTH","createRowEditingActionsColumn","ColumnHeader","cell","context","footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","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';\nimport { getIndicatorCellClassName, isIndicatorVisible } from '../cell/Indicator';\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 className?: string;\n editing: ReturnType<typeof useEditing>;\n hasChanges: boolean;\n isActiveRow: boolean;\n rowIdentifier?: string;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { className, editing, hasChanges, isActiveRow, row, 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 && isActiveRow) {\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 icon=\"tick\" disabled={!hasChanges} onClick={() => editing.saveChangesIfNeeded()}>\n {texts.table3.editing.actions.save}\n </Menu.Item>\n <Menu.Item icon=\"close\" disabled={!hasChanges} 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={isActiveRow ? 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\n tabIndex={0}\n appearance=\"primary\"\n autoFocus\n 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': isActiveRow });\n return (\n <DisplayCell {...props} className={cn(className, { '!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 const allVisibleColumns = props.table.getVisibleLeafColumns();\n const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;\n const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason)\n ? getIndicatorCellClassName(props.index, lastColumnIndex)\n : undefined;\n\n return (\n <MemoedCell\n {...props}\n className={className}\n editing={tableMeta.editing}\n hasChanges={changeset.indexOf(props.row.id) >= 0}\n isActiveRow={tableMeta.rowActive.rowActiveIndex === rowIndex}\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","className","editing","hasChanges","isActiveRow","row","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","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","allVisibleColumns","getVisibleLeafColumns","lastColumnIndex","length","isIndicatorVisible","rowActive","rowActiveIndex","rowMoveReason","getIndicatorCellClassName","indexOf","EDITING_ACTIONS_WIDTH","createRowEditingActionsColumn","ColumnHeader","cell","context","footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","minSize"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintIFrame.js CHANGED Viewed

@@ -62,8 +62,8 @@ import '../../../../Table/components/PaginatedTable.js';
 import '../../../../Table/components/WindowedTable.js';
 import '../../../../Table/util/rowIndexPath.js';
 import '../../../../Table/hooks/useRowCreation.js';
-import '../../../../../hooks/useLazyEffect.js';
 import ReactDOM from 'react-dom';
+import '../../../../../hooks/useLazyEffect.js';
 import '../../../../Textarea/Textarea.js';
 import '../../../../../hooks/useMatchMedia.js';
 import '../../../../../hooks/useIsLargeScreen.js';

package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableRowSelectionListener.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { useLazyEffect } from '../../../../hooks/useLazyEffect.js';
 function useTableRowSelectionListener(table, onRowSelect) {
-  const selectedRows = table.getSelectedRowModel().rows;
+  const rowSelection = table.getState().rowSelection;
   useLazyEffect(() => {
+    const selectedRows = table.getSelectedRowModel().rows;
     if (table.options.enableRowSelection && typeof onRowSelect === 'function') {
       if (table.options.enableMultiRowSelection) {
         onRowSelect(selectedRows.map(row => row.original));
@@ -11,7 +12,11 @@ function useTableRowSelectionListener(table, onRowSelect) {
         onRowSelect((_ref = [(_selectedRows$ = selectedRows[0]) === null || _selectedRows$ === void 0 ? void 0 : _selectedRows$.original]) !== null && _ref !== void 0 ? _ref : []);
       }
     }
-  }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, selectedRows]);
+    // It is important to stringify either rowSelection state or selectedRows, because we don't
+    // know if the array or object that is returned by react-table has the same reference or not.
+    // rowSelection state is used here because it will be more expensive to strigify selectedRows
+    // than rowSelection state.
+  }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, JSON.stringify(rowSelection)]);
 }
 export { useTableRowSelectionListener };

package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableRowSelectionListener.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTableRowSelectionListener.js","sources":["../../../../../../../../../src/primitives/Table/useTable/listeners/useTableRowSelectionListener.ts"],"sourcesContent":["import { Table as ReactTable } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\nimport { TableRowSelectHandler } from '../../types';\n\nexport function useTableRowSelectionListener<TType = unknown>(\n table: ReactTable<TType>,\n onRowSelect?: TableRowSelectHandler<TType>\n) {\n const ~~selectedRows~~ = table.~~getSelectedRowModel~~().~~rows~~;\n\n useLazyEffect(() => {\n if (table.options.enableRowSelection && typeof onRowSelect === 'function') {\n if (table.options.enableMultiRowSelection) {\n onRowSelect(selectedRows.map(row => row.original));\n } else {\n onRowSelect([selectedRows[0]?.original] ?? []);\n }\n }\n }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, ~~selectedRows~~]);\n}\n"],"names":["useTableRowSelectionListener","table","onRowSelect","selectedRows","getSelectedRowModel","rows","~~useLazyEffect","~~options","enableRowSelection","enableMultiRowSelection","map","row","original","_ref","_selectedRows$"],"mappings":";;SAIgBA,4BAA4BA,CACxCC,KAAwB,EACxBC,WAA0C;EAE1C,MAAMC,YAAY,GAAGF,KAAK,CAACG,~~mBAAmB~~,EAAE,~~CAACC~~,~~IAAI~~;~~EAErDC~~,aAAa,CAAC;IACV,~~IAAIL~~,KAAK,CAACM,OAAO,CAACC,kBAAkB,IAAI,~~OAAON~~,WAAW,KAAK,UAAU,EAAE;MACvE,IAAID,KAAK,~~CAACM~~,OAAO,CAACE,uBAAuB,EAAE;~~QACvCP~~,WAAW,~~CAACC~~,YAAY,~~CAACO~~,GAAG,CAACC,GAAG,IAAIA,GAAG,CAACC,QAAQ,CAAC,CAAC;OACrD,MAAM;QAAA,IAAAC,IAAA,EAAAC,cAAA;~~QACHZ~~,WAAW,~~EAAAW~~,IAAA,GAAC,EAAAC,cAAA,~~GAACX~~,YAAY,CAAC,CAAC,CAAC,~~cAAAW~~,cAAA,uBAAfA,cAAA,CAAiBF,QAAQ,CAAC,cAAAC,IAAA,cAAAA,IAAA,GAAI,EAAE,CAAC~~;;;GAGzD~~,EAAE,~~CAACZ~~,KAAK,~~CAACM~~,OAAO,CAACC,kBAAkB,~~EAAEP~~,KAAK,~~CAACM~~,OAAO,CAACE,uBAAuB,~~EAAEN~~,YAAY,CAAC,CAAC;AAC/F;;;;"}
1	+ {"version":3,"file":"useTableRowSelectionListener.js","sources":["../../../../../../../../../src/primitives/Table/useTable/listeners/useTableRowSelectionListener.ts"],"sourcesContent":["import { Table as ReactTable } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\nimport { TableRowSelectHandler } from '../../types';\n\nexport function useTableRowSelectionListener<TType = unknown>(\n table: ReactTable<TType>,\n onRowSelect?: TableRowSelectHandler<TType>\n) {\n const rowSelection = table.getState().rowSelection;\n\n useLazyEffect(() => {\n const selectedRows = table.getSelectedRowModel().rows;\n\n if (table.options.enableRowSelection && typeof onRowSelect === 'function') {\n if (table.options.enableMultiRowSelection) {\n onRowSelect(selectedRows.map(row => row.original));\n } else {\n onRowSelect([selectedRows[0]?.original] ?? []);\n }\n }\n // It is important to stringify either rowSelection state or selectedRows, because we don't\n // know if the array or object that is returned by react-table has the same reference or not.\n // rowSelection state is used here because it will be more expensive to strigify selectedRows\n // than rowSelection state.\n }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, JSON.stringify(rowSelection)]);\n}\n"],"names":["useTableRowSelectionListener","table","onRowSelect","rowSelection","getState","useLazyEffect","selectedRows","getSelectedRowModel","rows","options","enableRowSelection","enableMultiRowSelection","map","row","original","_ref","_selectedRows$","JSON","stringify"],"mappings":";;SAIgBA,4BAA4BA,CACxCC,KAAwB,EACxBC,WAA0C;EAE1C,MAAMC,YAAY,GAAGF,KAAK,CAACG,QAAQ,EAAE,CAACD,YAAY;EAElDE,aAAa,CAAC;IACV,MAAMC,YAAY,GAAGL,KAAK,CAACM,mBAAmB,EAAE,CAACC,IAAI;IAErD,IAAIP,KAAK,CAACQ,OAAO,CAACC,kBAAkB,IAAI,OAAOR,WAAW,KAAK,UAAU,EAAE;MACvE,IAAID,KAAK,CAACQ,OAAO,CAACE,uBAAuB,EAAE;QACvCT,WAAW,CAACI,YAAY,CAACM,GAAG,CAACC,GAAG,IAAIA,GAAG,CAACC,QAAQ,CAAC,CAAC;OACrD,MAAM;QAAA,IAAAC,IAAA,EAAAC,cAAA;QACHd,WAAW,EAAAa,IAAA,GAAC,EAAAC,cAAA,GAACV,YAAY,CAAC,CAAC,CAAC,cAAAU,cAAA,uBAAfA,cAAA,CAAiBF,QAAQ,CAAC,cAAAC,IAAA,cAAAA,IAAA,GAAI,EAAE,CAAC;;;;;;;GAOzD,EAAE,CAACd,KAAK,CAACQ,OAAO,CAACC,kBAAkB,EAAET,KAAK,CAACQ,OAAO,CAACE,uBAAuB,EAAEM,IAAI,CAACC,SAAS,CAACf,YAAY,CAAC,CAAC,CAAC;AAC/G;;;;"}

package/dist/taco.cjs.development.js CHANGED Viewed

@@ -12897,7 +12897,7 @@ function DisplayCell(props) {
       index,
       tableRef
     };
-  }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex]);
+  }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex, className]);
   return /*#__PURE__*/React__default.createElement(MemoedDisplayCell, Object.assign({}, memoedProps, {
     highlighted: highlighted,
     highlightedAsCurrent: highlightedAsCurrent
@@ -13010,6 +13010,85 @@ function FontSize$1(props) {
   }, texts.table3.fontSize.sizes.large)));
 }
+var IndicatorReason;
+(function (IndicatorReason) {
+  IndicatorReason["SEARCH"] = "SEARCH";
+  IndicatorReason["SORTING"] = "SORTING";
+  IndicatorReason["FILTER"] = "FILTER";
+})(IndicatorReason || (IndicatorReason = {}));
+const useIndicatorText = reason => {
+  let title = '';
+  let description = '';
+  const {
+    texts
+  } = useLocalization();
+  switch (reason) {
+    case IndicatorReason.FILTER:
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;
+      break;
+    case IndicatorReason.SEARCH:
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;
+      break;
+    case IndicatorReason.SORTING:
+      title = texts.table3.editing.rowIndicator.rowWillMove;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;
+      break;
+  }
+  return {
+    title,
+    description
+  };
+};
+const Indicator = ({
+  reason,
+  columnName,
+  mountNode,
+  validationErrors
+}) => {
+  const container = React__default.useMemo(() => {
+    const element = document.createElement('div');
+    element.className += 'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    return element;
+  }, []);
+  const indicatorText = useIndicatorText(reason);
+  const hasValidationErrorsInRow = !!validationErrors;
+  React__default.useEffect(() => {
+    // mountNode could be null when rows are filtered
+    // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('!z-[21]', 'relative');
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
+    return () => {
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('!z-[21]', 'relative');
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
+    };
+  }, [hasValidationErrorsInRow, mountNode]);
+  // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
+  // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: indicatorText.description.replace('[COLUMN]', columnName)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex gap-1 hover:cursor-pointer"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "info",
+    className: "!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
+  }), indicatorText.title)), container);
+};
+/**
+ * Generates class names needed to highlight row cells, used when row has a move indicator
+ */
+function getIndicatorCellClassName(columnIndex, lastColumnIndex) {
+  return cn('!border-blue !border-y-2 border-x-0', {
+    'border-l-2 rounded-l': columnIndex === 0,
+    'border-r-2 rounded-r': columnIndex === lastColumnIndex
+  });
+}
+function isIndicatorVisible(rowIndex, rowActiveIndex, rowMoveReason) {
+  const isActiveRow = rowActiveIndex === rowIndex;
+  return isActiveRow && rowMoveReason;
+}
 const COLUMN_ID = '__actions';
 const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   const {
@@ -13054,7 +13133,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
       // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
       '-mt-2': fontSize === FONT_SIZE.small,
       '-mt-1.5': fontSize !== FONT_SIZE.small
-    });
+    }, props.className);
     content = /*#__PURE__*/React__default.createElement("span", {
       className: className,
       ref: ref
@@ -13089,9 +13168,13 @@ function Cell(context) {
     rowIndex
   } = React__default.useContext(RowContext);
   const tableMeta = context.table.options.meta;
+  const allVisibleColumns = context.table.getVisibleLeafColumns();
+  const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
+  const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason) ? getIndicatorCellClassName(context.index, lastColumnIndex) : undefined;
   return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, context, {
     actions: tableMeta.rowActions.actionsForRow,
     actionsLength: tableMeta.rowActions.actionsForRowLength,
+    className: className,
     fontSize: tableMeta.fontSize.size,
     isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex,
     isEditing: tableMeta.editing.isEditing,
@@ -13526,8 +13609,9 @@ function useLazyEffect(effect, deps) {
 }
 function useTableRowSelectionListener(table, onRowSelect) {
-  const selectedRows = table.getSelectedRowModel().rows;
+  const rowSelection = table.getState().rowSelection;
   useLazyEffect(() => {
+    const selectedRows = table.getSelectedRowModel().rows;
     if (table.options.enableRowSelection && typeof onRowSelect === 'function') {
       if (table.options.enableMultiRowSelection) {
         onRowSelect(selectedRows.map(row => row.original));
@@ -13536,7 +13620,11 @@ function useTableRowSelectionListener(table, onRowSelect) {
         onRowSelect((_ref = [(_selectedRows$ = selectedRows[0]) === null || _selectedRows$ === void 0 ? void 0 : _selectedRows$.original]) !== null && _ref !== void 0 ? _ref : []);
       }
     }
-  }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, selectedRows]);
+    // It is important to stringify either rowSelection state or selectedRows, because we don't
+    // know if the array or object that is returned by react-table has the same reference or not.
+    // rowSelection state is used here because it will be more expensive to strigify selectedRows
+    // than rowSelection state.
+  }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, JSON.stringify(rowSelection)]);
 }
 function useRowDrag(isEnabled) {
@@ -13907,72 +13995,6 @@ function useRowDrop(isEnabled, handler) {
   };
 }
-var IndicatorReason;
-(function (IndicatorReason) {
-  IndicatorReason["SEARCH"] = "SEARCH";
-  IndicatorReason["SORTING"] = "SORTING";
-  IndicatorReason["FILTER"] = "FILTER";
-})(IndicatorReason || (IndicatorReason = {}));
-const useIndicatorText = reason => {
-  let title = '';
-  let description = '';
-  const {
-    texts
-  } = useLocalization();
-  switch (reason) {
-    case IndicatorReason.FILTER:
-      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
-      description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;
-      break;
-    case IndicatorReason.SEARCH:
-      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
-      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;
-      break;
-    case IndicatorReason.SORTING:
-      title = texts.table3.editing.rowIndicator.rowWillMove;
-      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;
-      break;
-  }
-  return {
-    title,
-    description
-  };
-};
-const Indicator = ({
-  reason,
-  columnName,
-  mountNode,
-  validationErrors
-}) => {
-  const container = React__default.useMemo(() => {
-    const element = document.createElement('div');
-    element.className += 'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
-    return element;
-  }, []);
-  const indicatorText = useIndicatorText(reason);
-  const hasValidationErrorsInRow = !!validationErrors;
-  React__default.useEffect(() => {
-    // mountNode could be null when rows are filtered
-    // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.
-    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('!z-[21]', 'relative');
-    mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
-    return () => {
-      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('!z-[21]', 'relative');
-      mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
-    };
-  }, [hasValidationErrorsInRow, mountNode]);
-  // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
-  // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: indicatorText.description.replace('[COLUMN]', columnName)
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "flex gap-1 hover:cursor-pointer"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: "info",
-    className: "!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
-  }), indicatorText.title)), container);
-};
 const focussableNodeNames = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS'];
 const focusableSelector = /*#__PURE__*/focussableNodeNames.join(', ');
 const hasChanged = (value, newValue) => {
@@ -14627,10 +14649,11 @@ const COLUMN_ID$1 = '__editing_actions';
 const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   var _column$columnDef$met;
   const {
+    className,
+    editing,
     hasChanges,
     isActiveRow,
     row,
-    editing,
     rowIdentifier,
     table
   } = props;
@@ -14724,7 +14747,7 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
     '-mb-2 -mt-2': isActiveRow
   });
   return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, {
-    className: cn({
+    className: cn(className, {
       '!sticky': !!content
     })
   }), content ? /*#__PURE__*/React__default.createElement("span", {
@@ -14737,10 +14760,14 @@ function Cell$1(props) {
   } = React__default.useContext(RowContext);
   const tableMeta = props.table.options.meta;
   const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];
+  const allVisibleColumns = props.table.getVisibleLeafColumns();
+  const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
+  const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason) ? getIndicatorCellClassName(props.index, lastColumnIndex) : undefined;
   return /*#__PURE__*/React__default.createElement(MemoedCell$1, Object.assign({}, props, {
+    className: className,
+    editing: tableMeta.editing,
     hasChanges: changeset.indexOf(props.row.id) >= 0,
-    isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex,
-    editing: tableMeta.editing
+    isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex
   }));
 }
 const EDITING_ACTIONS_WIDTH = 60;
@@ -15197,7 +15224,10 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   React__default.useEffect(() => {
     // To avoid reseting move reason on another row hover,
     // we need to check for changes only if value got changed in the current row.
-    if (!isActiveRow || error) {
+    if (!isActiveRow) {
+      return;
+    }
+    if (error) {
       if (tableMeta.editing.rowMoveReason) {
         removeMoveReason();
       }
@@ -15207,9 +15237,11 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       const moveReason = getRowMoveReason(table, rowIndex,
       // cannot use row.index, as this is not kept in sync once a column is sorted.
       row.original, cell, value, tableMeta.search.excludeUnmatchedResults);
-      tableMeta.editing.setRowMoveReason({
-        [cell.column.id]: moveReason
-      });
+      if (moveReason) {
+        tableMeta.editing.setRowMoveReason({
+          [cell.column.id]: moveReason
+        });
+      }
     } else {
       removeMoveReason();
     }
@@ -15219,7 +15251,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   const className = cn('py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]', {
     // Textarea control is positioned absolute, when column is in enableTruncate mode, so the cell need to be positioned relative
     relative: controlRenderer === 'textarea' && columnMeta.enableTruncate
-  }, typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
+  }, props.className, typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
   const fieldClassName = cn('!min-h-0 w-full !pb-0', {
     '!pb-3': !!error
   });
@@ -15302,7 +15334,8 @@ function Cell$2(props) {
   } = props;
   const {
     isHovered: isHoveredRow,
-    hasError
+    hasError,
+    rowIndex
   } = useRowContext();
   const rows = table.getRowModel().rows;
   const tableMeta = table.options.meta;
@@ -15312,15 +15345,15 @@ function Cell$2(props) {
   const rowActiveIndex = tableMeta.rowActive.rowActiveIndex;
   const isActiveRow = rowActiveIndex !== undefined && ((_rows$rowActiveIndex = rows[rowActiveIndex]) === null || _rows$rowActiveIndex === void 0 ? void 0 : _rows$rowActiveIndex.id) === row.id;
   let value = getValue();
+  const allVisibleColumns = table.getVisibleLeafColumns();
+  const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
+  const className = isIndicatorVisible(rowIndex, rowActiveIndex, tableMeta.editing.rowMoveReason) ? getIndicatorCellClassName(index, lastColumnIndex) : undefined;
   // When row has changes we always need to show the editing state value, end revert it to original value only when row got saved successfully.
   // Otherwise it might confuse user because it will look like display value is getting reverted everytime user leaves the row.
   if (tableMeta.editing.isEditing) {
     const editingValue = tableMeta.editing.getCellValue(cell);
     value = editingValue !== null && editingValue !== void 0 ? editingValue : value;
   }
-  const {
-    rowIndex
-  } = React__default.useContext(RowContext);
   const memoedHighlight = React__default.useMemo(() => {
     var _tableMeta$search$que;
     if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {
@@ -15348,10 +15381,13 @@ function Cell$2(props) {
   if (tableMeta.editing.isEditing && columnMeta.control && (isActiveRow || isHoveredRow && !tableMeta.rowActive.isHoverStatePaused ||
   // When cell has error, we renderimg it in edit mode (UX reqirement)
   isColumnError)) {
-    return /*#__PURE__*/React__default.createElement(EditingCell, Object.assign({}, props, highlightProps));
+    return /*#__PURE__*/React__default.createElement(EditingCell, Object.assign({}, props, highlightProps, {
+      className: className
+    }));
   }
   return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, highlightProps, {
-    value: value
+    value: value,
+    className: className
   }));
 }