@economic/taco 2.43.1 → 2.44.0

package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate } from 'date-fns';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport * as date from '../../../../../utils/date';\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { Field } from '../../../../Field/Field';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { useEditingCellAutofocus } from './util';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, isHighlighted, index } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n\n    const handleBlur = () => {\n        tableMeta.editing.toggleDetailedMode(false);\n        tableMeta.editing.validateCell(cell);\n    };\n\n    // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)\n    React.useEffect(() => {\n        const ref = cellRef.current;\n\n        return () => {\n            if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {\n                handleBlur();\n            }\n        };\n    }, []);\n\n    const error = tableMeta.editing.getCellError<TType>(cell);\n\n    const controlProps = {\n        dataType: columnMeta.dataType,\n        fontSize: tableMeta.fontSize.size,\n        id: cell.column.id,\n        invalid: !!error,\n        isDetailedMode: tableMeta.editing.isDetailedMode,\n        isTruncated: !!columnMeta.enableTruncate,\n        onBlur: handleBlur,\n        onChange: (value: unknown) => tableMeta.editing.setCellValue(cell, value, rowIndex),\n        row: cell.row.original,\n        tabIndex: isActiveRow ? 0 : -1,\n        toggleEditing: tableMeta.editing.toggleEditing,\n        toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n        type: columnMeta.control ?? 'input',\n        value: cell.getValue(),\n    };\n\n    const cellAttributes = {\n        ...getCellAttributes(cell, index, isHighlighted),\n        'data-cell-editing-invalid': error ? true : undefined,\n        'data-taco': 'cell-control',\n        onFocus: handleFocus,\n        ref: cellRef,\n        tabIndex: -1,\n    };\n\n    return (\n        <td {...cellAttributes}>\n            <Field invalid={!!error} message={error}>\n                <MemoedEditingCell<TType> {...controlProps} />\n            </Field>\n            {\n                // we show row move indicator here within the cell rather than the row because it is\n                // an editing only feature, and we don't want to leak editing into the shared row component\n            }\n            <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n        </td>\n    );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n    dataType?: TableColumnDataType;\n    fontSize: TableFontSize;\n    id: string;\n    invalid: boolean;\n    isDetailedMode: boolean;\n    isTruncated: boolean;\n    onBlur: () => void;\n    onChange: (value: TValue) => void;\n    row: TType;\n    tabIndex?: number;\n    toggleEditing: (editing: React.SetStateAction<boolean>) => void;\n    toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n    type: TableColumnRendererControl<TType>;\n    value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const {\n        dataType,\n        fontSize,\n        id,\n        invalid,\n        isDetailedMode,\n        isTruncated,\n        onBlur,\n        onChange,\n        row,\n        tabIndex = -1,\n        toggleEditing,\n        toggleDetailedMode,\n        type = 'input',\n        value,\n    } = props;\n    const controlRef = React.useRef<HTMLElement>(null);\n    const currentValue = row[id];\n    const commonProps = {\n        onBlur,\n        ref: controlRef,\n        tabIndex,\n    };\n\n    if (typeof type === 'function') {\n        const controlFnProps = {\n            ...commonProps,\n            invalid,\n            setValue: onChange,\n            value,\n        };\n        return type(controlFnProps, row);\n    }\n\n    if (type === 'switch') {\n        return (\n            <Switch\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.RefObject<HTMLButtonElement>}\n            />\n        );\n    }\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent active row navigation while in detailed mode\n        if (\n            isDetailedMode &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n        ) {\n            event.stopPropagation();\n        }\n\n        // enter or exit detail mode when pressing enter\n        if (event.key === 'Enter') {\n            // textareas support shift and enter, don't prevent default in that case\n            if (event.shiftKey && isDetailedMode) {\n                return;\n            }\n\n            event.preventDefault();\n\n            if (isDetailedMode) {\n                target.select?.();\n            } else {\n                target.setSelectionRange?.(target.value?.length, target.value?.length);\n            }\n\n            toggleDetailedMode(editing => !editing);\n            return;\n        }\n\n        // reset the value, or exit edit mode when pressing escape\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (isDetailedMode) {\n                toggleDetailedMode(false);\n\n                if (value !== currentValue) {\n                    props.onChange(currentValue);\n                }\n\n                // have to let onChange run before selecting, otherwise the value changes\n                requestAnimationFrame(() => target.select?.());\n            } else {\n                toggleEditing(false);\n            }\n\n            return;\n        }\n\n        // toggle into detailed mode when actually inputting something\n        if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!isDetailedMode) {\n            event.target.select();\n        }\n    };\n\n    if (type === 'datepicker') {\n        const valueAsDate = date.parse(value as Date | string | undefined);\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            const newDate = (event as any).detail as Date;\n\n            if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n                props.onChange(newDate);\n            }\n        };\n\n        return (\n            <Datepicker\n                {...commonProps}\n                invalid={invalid}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={controlRef as React.RefObject<HTMLInputElement>}\n                value={valueAsDate}\n            />\n        );\n    }\n\n    if (type === 'textarea') {\n        const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n            onChange(event.target.value);\n        };\n\n        return (\n            <TextareaWithAutosizing\n                {...commonProps}\n                fontSize={fontSize}\n                invalid={invalid}\n                isTruncated={isTruncated}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);\n    };\n\n    return (\n        <Input\n            {...commonProps}\n            invalid={invalid}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            ref={controlRef as React.RefObject<HTMLInputElement>}\n            type={dataType === 'number' ? 'number' : undefined}\n            value={dataType === 'number' ? (value as number) : String(value ?? '')}\n        />\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n"],"names":["EditingControlCell","props","cell","cellRef","isHighlighted","index","rowIndex","React","useContext","RowContext","tableMeta","getContext","table","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","handleFocus","useEditingCellAutofocus","handleBlur","editing","toggleDetailedMode","validateCell","useEffect","ref","current","document","activeElement","isElementInsideOrTriggeredFromContainer","error","getCellError","controlProps","dataType","fontSize","size","id","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","value","setCellValue","row","original","tabIndex","toggleEditing","type","_columnMeta$control","control","getValue","cellAttributes","getCellAttributes","undefined","onFocus","Field","message","MemoedEditingCell","RowMoveIndicator","memo","controlRef","useRef","currentValue","commonProps","controlFnProps","setValue","Switch","checked","Boolean","handleInputKeyDown","event","target","readOnly","key","stopPropagation","shiftKey","preventDefault","_target$select","select","call","_target$setSelectionR","_target$value","_target$value2","setSelectionRange","length","requestAnimationFrame","_target$select2","isPressingMetaKey","test","valueAsDate","date","handleChange","newDate","detail","isDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":"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"}
+{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate } from 'date-fns';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport * as date from '../../../../../utils/date';\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { Field } from '../../../../Field/Field';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { useEditingCellAutofocus } from './util';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, isHighlighted, index } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n\n    const handleBlur = () => {\n        tableMeta.editing.toggleDetailedMode(false);\n        tableMeta.editing.validateCell(cell);\n    };\n\n    // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)\n    React.useEffect(() => {\n        const ref = cellRef.current;\n\n        return () => {\n            if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {\n                handleBlur();\n            }\n        };\n    }, []);\n\n    const error = tableMeta.editing.getCellError<TType>(cell);\n\n    const controlProps = {\n        dataType: columnMeta.dataType,\n        fontSize: tableMeta.fontSize.size,\n        id: cell.column.id,\n        invalid: !!error,\n        isDetailedMode: tableMeta.editing.isDetailedMode,\n        isTruncated: !!columnMeta.enableTruncate,\n        onBlur: handleBlur,\n        onChange: (value: unknown) => tableMeta.editing.setCellValue(cell, value, rowIndex),\n        row: cell.row.original,\n        rowPendingChanges: tableMeta.editing.getRowPendingChange(cell.row.id),\n        tabIndex: isActiveRow ? 0 : -1,\n        toggleEditing: tableMeta.editing.toggleEditing,\n        toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n        type: columnMeta.control ?? 'input',\n        value: cell.getValue(),\n    };\n\n    const cellAttributes = {\n        ...getCellAttributes(cell, index, isHighlighted),\n        'data-cell-editing-invalid': error ? true : undefined,\n        'data-taco': 'cell-control',\n        onFocus: handleFocus,\n        ref: cellRef,\n        tabIndex: -1,\n    };\n\n    return (\n        <td {...cellAttributes}>\n            <Field invalid={!!error} message={error}>\n                <MemoedEditingCell<TType> {...controlProps} />\n            </Field>\n            {\n                // we show row move indicator here within the cell rather than the row because it is\n                // an editing only feature, and we don't want to leak editing into the shared row component\n            }\n            <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n        </td>\n    );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n    dataType?: TableColumnDataType;\n    fontSize: TableFontSize;\n    id: string;\n    invalid: boolean;\n    isDetailedMode: boolean;\n    isTruncated: boolean;\n    onBlur: () => void;\n    onChange: (value: TValue) => void;\n    row: TType;\n    rowPendingChanges: Partial<TType> | undefined;\n    tabIndex?: number;\n    toggleEditing: (editing: React.SetStateAction<boolean>) => void;\n    toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n    type: TableColumnRendererControl<TType>;\n    value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const {\n        dataType,\n        fontSize,\n        id,\n        invalid,\n        isDetailedMode,\n        isTruncated,\n        onBlur,\n        onChange,\n        row,\n        rowPendingChanges,\n        tabIndex = -1,\n        toggleEditing,\n        toggleDetailedMode,\n        type = 'input',\n        value,\n    } = props;\n    const controlRef = React.useRef<HTMLElement>(null);\n    const currentValue = row[id];\n    const commonProps = {\n        onBlur,\n        ref: controlRef,\n        tabIndex,\n    };\n\n    if (typeof type === 'function') {\n        const controlFnProps = {\n            ...commonProps,\n            invalid,\n            setValue: onChange,\n            value,\n        };\n\n        return type(controlFnProps, { ...row, ...rowPendingChanges });\n    }\n\n    if (type === 'switch') {\n        return (\n            <Switch\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.RefObject<HTMLButtonElement>}\n            />\n        );\n    }\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent active row navigation while in detailed mode\n        if (\n            isDetailedMode &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n        ) {\n            event.stopPropagation();\n        }\n\n        // enter or exit detail mode when pressing enter\n        if (event.key === 'Enter') {\n            // textareas support shift and enter, don't prevent default in that case\n            if (event.shiftKey && isDetailedMode) {\n                return;\n            }\n\n            event.preventDefault();\n\n            if (isDetailedMode) {\n                target.select?.();\n            } else {\n                target.setSelectionRange?.(target.value?.length, target.value?.length);\n            }\n\n            toggleDetailedMode(editing => !editing);\n            return;\n        }\n\n        // reset the value, or exit edit mode when pressing escape\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (isDetailedMode) {\n                toggleDetailedMode(false);\n\n                if (value !== currentValue) {\n                    props.onChange(currentValue);\n                }\n\n                // have to let onChange run before selecting, otherwise the value changes\n                requestAnimationFrame(() => target.select?.());\n            } else {\n                toggleEditing(false);\n            }\n\n            return;\n        }\n\n        // toggle into detailed mode when actually inputting something\n        if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!isDetailedMode) {\n            event.target.select();\n        }\n    };\n\n    if (type === 'datepicker') {\n        const valueAsDate = date.parse(value as Date | string | undefined);\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            const newDate = (event as any).detail as Date;\n\n            if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n                props.onChange(newDate);\n            }\n        };\n\n        return (\n            <Datepicker\n                {...commonProps}\n                invalid={invalid}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={controlRef as React.RefObject<HTMLInputElement>}\n                value={valueAsDate}\n            />\n        );\n    }\n\n    if (type === 'textarea') {\n        const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n            onChange(event.target.value);\n        };\n\n        return (\n            <TextareaWithAutosizing\n                {...commonProps}\n                fontSize={fontSize}\n                invalid={invalid}\n                isTruncated={isTruncated}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);\n    };\n\n    return (\n        <Input\n            {...commonProps}\n            invalid={invalid}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            ref={controlRef as React.RefObject<HTMLInputElement>}\n            type={dataType === 'number' ? 'number' : undefined}\n            value={dataType === 'number' ? (value as number) : String(value ?? '')}\n        />\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n"],"names":["EditingControlCell","props","cell","cellRef","isHighlighted","index","rowIndex","React","useContext","RowContext","tableMeta","getContext","table","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","handleFocus","useEditingCellAutofocus","handleBlur","editing","toggleDetailedMode","validateCell","useEffect","ref","current","document","activeElement","isElementInsideOrTriggeredFromContainer","error","getCellError","controlProps","dataType","fontSize","size","id","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","value","setCellValue","row","original","rowPendingChanges","getRowPendingChange","tabIndex","toggleEditing","type","_columnMeta$control","control","getValue","cellAttributes","getCellAttributes","undefined","onFocus","Field","message","MemoedEditingCell","RowMoveIndicator","memo","controlRef","useRef","currentValue","commonProps","controlFnProps","setValue","Switch","checked","Boolean","handleInputKeyDown","event","target","readOnly","key","stopPropagation","shiftKey","preventDefault","_target$select","select","call","_target$setSelectionR","_target$value","_target$value2","setSelectionRange","length","requestAnimationFrame","_target$select2","isPressingMetaKey","test","valueAsDate","date","handleChange","newDate","detail","isDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/util.js

@@ -24,7 +24,7 @@ function useEditingCellAutofocus(props) {
         (_props$cellRef$curren2 = props.cellRef.current) === null || _props$cellRef$curren2 === void 0 ? void 0 : _props$cellRef$curren2.focus();
       }
     }
-  }, [autoFocus]);
+  }, [tableMeta.rowActive.rowActiveIndex]);
   // when the cell receives focus we actually want to focus the control inside it...
   const handleFocus = event => {
     var _props$cellRef$curren3;
@@ -35,11 +35,12 @@ function useEditingCellAutofocus(props) {
       const tableRect = tableElement.getBoundingClientRect();
       const leftOffsetFromScrollContainer = targetRect.left - tableRect.left;
       const scrollbarWidth = tableElement.offsetWidth - tableElement.clientWidth; // the width of table vertical scrollbar
+      const isFocusedElementMenu = event.currentTarget.getAttribute('data-cell-id') === '__actions';
       if (
       // When pinned column overlaps the focused cell
-      leftOffsetFromScrollContainer < columnFreezingOffset ||
+      (leftOffsetFromScrollContainer < columnFreezingOffset ||
       // When focused cell goes behidn the edge of the table
-      leftOffsetFromScrollContainer + targetRect.width > tableRect.width - scrollbarWidth) {
+      leftOffsetFromScrollContainer + targetRect.width > tableRect.width - scrollbarWidth) && !isFocusedElementMenu) {
         tableElement.scrollTo(props.cell.column.getStart() - columnFreezingOffset, tableElement.scrollTop);
       }
     }

package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/util.ts"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useAugmentedFocusManager } from '../../../../../primitives/Table/Core/components/Body/util';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { hasFocusableElement } from '../../../../../utils/dom';\n\nexport function useEditingCellAutofocus<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const focusManager = useAugmentedFocusManager();\n    const { rowIndex } = React.useContext(RowContext);\n    const table = props.cell.getContext().table;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n\n    const autoFocus = props.index === tableMeta.editing.lastFocusedCellIndex && isActiveRow;\n\n    // focus the cell so that we trigger it's handle focus\n    React.useEffect(() => {\n        if (props.cellRef.current) {\n            const isFocusedElementInCurrentRow = props.cellRef.current.closest('tr')?.contains(document.activeElement);\n            const isFocusedElementSearch = document.activeElement?.getAttribute('name') === 'table-search';\n            const isFocusedElementMenu = document.activeElement?.getAttribute('role') === 'menu';\n\n            if (autoFocus && !isFocusedElementInCurrentRow && !isFocusedElementSearch && !isFocusedElementMenu) {\n                props.cellRef.current?.focus();\n            }\n        }\n    }, [autoFocus]);\n\n    // when the cell receives focus we actually want to focus the control inside it...\n    const handleFocus = (event: React.FocusEvent<HTMLTableCellElement>) => {\n        const tableElement = props.cellRef.current?.closest('table');\n\n        if (tableElement && table.getIsSomeColumnsPinned() && !props.cell.column.getIsPinned()) {\n            const columnFreezingOffset = table.getLeftTotalSize();\n            const targetRect = event.currentTarget.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n            const leftOffsetFromScrollContainer = targetRect.left - tableRect.left;\n            const scrollbarWidth = tableElement.offsetWidth - tableElement.clientWidth; // the width of table vertical scrollbar\n\n            if (\n                // When pinned column overlaps the focused cell\n                leftOffsetFromScrollContainer < columnFreezingOffset ||\n                // When focused cell goes behidn the edge of the table\n                leftOffsetFromScrollContainer + targetRect.width > tableRect.width - scrollbarWidth\n            ) {\n                tableElement.scrollTo(props.cell.column.getStart() - columnFreezingOffset, tableElement.scrollTop);\n            }\n        }\n\n        if (event.target === event.currentTarget && hasFocusableElement(event.currentTarget)) {\n            focusManager.focusNext();\n        }\n    };\n\n    return handleFocus;\n}\n"],"names":["useEditingCellAutofocus","props","focusManager","useAugmentedFocusManager","rowIndex","React","useContext","RowContext","table","cell","getContext","tableMeta","options","meta","isActiveRow","rowActive","rowActiveIndex","autoFocus","index","editing","lastFocusedCellIndex","useEffect","cellRef","current","_props$cellRef$curren","_document$activeEleme","_document$activeEleme2","isFocusedElementInCurrentRow","closest","contains","document","activeElement","isFocusedElementSearch","getAttribute","isFocusedElementMenu","_props$cellRef$curren2","focus","handleFocus","event","tableElement","_props$cellRef$curren3","getIsSomeColumnsPinned","column","getIsPinned","columnFreezingOffset","getLeftTotalSize","targetRect","currentTarget","getBoundingClientRect","tableRect","leftOffsetFromScrollContainer","left","scrollbarWidth","offsetWidth","clientWidth","width","scrollTo","getStart","scrollTop","target","hasFocusableElement","focusNext"],"mappings":"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"}
+{"version":3,"file":"util.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/util.ts"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useAugmentedFocusManager } from '../../../../../primitives/Table/Core/components/Body/util';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { hasFocusableElement } from '../../../../../utils/dom';\n\nexport function useEditingCellAutofocus<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const focusManager = useAugmentedFocusManager();\n    const { rowIndex } = React.useContext(RowContext);\n    const table = props.cell.getContext().table;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const autoFocus = props.index === tableMeta.editing.lastFocusedCellIndex && isActiveRow;\n\n    // focus the cell so that we trigger it's handle focus\n    React.useEffect(() => {\n        if (props.cellRef.current) {\n            const isFocusedElementInCurrentRow = props.cellRef.current.closest('tr')?.contains(document.activeElement);\n            const isFocusedElementSearch = document.activeElement?.getAttribute('name') === 'table-search';\n            const isFocusedElementMenu = document.activeElement?.getAttribute('role') === 'menu';\n\n            if (autoFocus && !isFocusedElementInCurrentRow && !isFocusedElementSearch && !isFocusedElementMenu) {\n                props.cellRef.current?.focus();\n            }\n        }\n    }, [tableMeta.rowActive.rowActiveIndex]);\n\n    // when the cell receives focus we actually want to focus the control inside it...\n    const handleFocus = (event: React.FocusEvent<HTMLTableCellElement>) => {\n        const tableElement = props.cellRef.current?.closest('table');\n\n        if (tableElement && table.getIsSomeColumnsPinned() && !props.cell.column.getIsPinned()) {\n            const columnFreezingOffset = table.getLeftTotalSize();\n            const targetRect = event.currentTarget.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n            const leftOffsetFromScrollContainer = targetRect.left - tableRect.left;\n            const scrollbarWidth = tableElement.offsetWidth - tableElement.clientWidth; // the width of table vertical scrollbar\n            const isFocusedElementMenu = event.currentTarget.getAttribute('data-cell-id') === '__actions';\n\n            if (\n                // When pinned column overlaps the focused cell\n                (leftOffsetFromScrollContainer < columnFreezingOffset ||\n                    // When focused cell goes behidn the edge of the table\n                    leftOffsetFromScrollContainer + targetRect.width > tableRect.width - scrollbarWidth) &&\n                !isFocusedElementMenu\n            ) {\n                tableElement.scrollTo(props.cell.column.getStart() - columnFreezingOffset, tableElement.scrollTop);\n            }\n        }\n\n        if (event.target === event.currentTarget && hasFocusableElement(event.currentTarget)) {\n            focusManager.focusNext();\n        }\n    };\n\n    return handleFocus;\n}\n"],"names":["useEditingCellAutofocus","props","focusManager","useAugmentedFocusManager","rowIndex","React","useContext","RowContext","table","cell","getContext","tableMeta","options","meta","isActiveRow","rowActive","rowActiveIndex","autoFocus","index","editing","lastFocusedCellIndex","useEffect","cellRef","current","_props$cellRef$curren","_document$activeEleme","_document$activeEleme2","isFocusedElementInCurrentRow","closest","contains","document","activeElement","isFocusedElementSearch","getAttribute","isFocusedElementMenu","_props$cellRef$curren2","focus","handleFocus","event","tableElement","_props$cellRef$curren3","getIsSomeColumnsPinned","column","getIsPinned","columnFreezingOffset","getLeftTotalSize","targetRect","currentTarget","getBoundingClientRect","tableRect","leftOffsetFromScrollContainer","left","scrollbarWidth","offsetWidth","clientWidth","width","scrollTo","getStart","scrollTop","target","hasFocusableElement","focusNext"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js

@@ -24,13 +24,21 @@ function EditingActionMenu(props) {
       handleSave();
     }
   };
+  const handleMenuContentKeyDown = event => {
+    // Stops the keyboard event from propagating to the Table when EditActionsMenu is open
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.stopPropagation();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "transparent",
     "aria-label": texts.table3.editing.actions.tooltip,
     className: "group-[[data-row-editing-status]]/row:hidden",
     icon: "more",
     onKeyDown: handleKeyDown,
-    menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, /*#__PURE__*/React__default.createElement(Menu.Item, {
+    menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
+      onKeyDown: handleMenuContentKeyDown
+    }, /*#__PURE__*/React__default.createElement(Menu.Item, {
       icon: "tick",
       disabled: !hasChanges || hasErrors,
       onClick: handleSave
@@ -54,14 +62,20 @@ function ConfirmClearChangesDialog(props) {
   const {
     texts
   } = useLocalization();
+  const handleClickInsideDialogContent = event => {
+    // Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs
+    // inside the dialog
+    event.stopPropagation();
+  };
   return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, dialogProps), /*#__PURE__*/React__default.createElement(Dialog.Content, {
-    "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title
+    "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
+    onClick: handleClickInsideDialogContent
   }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
     tabIndex: 0
   }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
+    autoFocus: true,
     tabIndex: 0,
     appearance: "primary",
-    autoFocus: true,
     onClick: handleClear
   }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
 }

package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditingActionsMenu.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Internal/EditingActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Dialog, DialogProps } from '../../../../Dialog/Dialog';\nimport { Group } from '../../../../Group/Group';\nimport { Button } from '../../../../Button/Button';\n\ntype EditingActionMenuProps = {\n    hasChanges: boolean;\n    hasErrors: boolean;\n    onClear: () => void;\n    onExit: () => void;\n    onEditingSave: () => Promise<void>;\n    isLastRow: boolean;\n};\n\nexport function EditingActionMenu(props: EditingActionMenuProps) {\n    const { hasChanges, hasErrors, onClear: handleClear, onExit: handleExit, onEditingSave: handleSave, isLastRow } = props;\n    const { texts } = useLocalization();\n\n    const handleKeyDown = event => {\n        // normally we handle this on change of active row, but when tabbing out of the last row the active row state stays on the last one.\n        if (isLastRow && hasChanges && event.key === 'Tab') {\n            handleSave();\n        }\n    };\n\n    return (\n        <IconButton\n            appearance=\"transparent\"\n            aria-label={texts.table3.editing.actions.tooltip}\n            className=\"group-[[data-row-editing-status]]/row:hidden\"\n            icon=\"more\"\n            onKeyDown={handleKeyDown}\n            menu={menuProps => (\n                <Menu {...menuProps}>\n                    <Menu.Content>\n                        <Menu.Item icon=\"tick\" disabled={!hasChanges || hasErrors} onClick={handleSave}>\n                            {texts.table3.editing.actions.save}\n                        </Menu.Item>\n                        <Menu.Item\n                            icon=\"close\"\n                            disabled={!hasChanges}\n                            dialog={props => <ConfirmClearChangesDialog {...props} onClear={handleClear} />}>\n                            {texts.table3.editing.actions.clear}\n                        </Menu.Item>\n                        <Menu.Item icon=\"undo\" onClick={handleExit}>\n                            {texts.table3.editing.actions.exit}\n                        </Menu.Item>\n                    </Menu.Content>\n                </Menu>\n            )}\n        />\n    );\n}\n\ntype ConfirmClearChangesDialogProps = Partial<DialogProps> & {\n    onClear: () => void;\n};\n\nfunction ConfirmClearChangesDialog(props: ConfirmClearChangesDialogProps) {\n    const { onClear: handleClear, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <Dialog {...dialogProps}>\n            <Dialog.Content aria-label={texts.table3.editing.clearChangesConfirmationDialog.title}>\n                <Dialog.Title>{texts.table3.editing.clearChangesConfirmationDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.editing.clearChangesConfirmationDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button tabIndex={0}>{texts.table3.editing.clearChangesConfirmationDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Dialog.Close>\n                            <Button tabIndex={0} appearance=\"primary\" autoFocus onClick={handleClear}>\n                                {texts.table3.editing.clearChangesConfirmationDialog.confirm}\n                            </Button>\n                        </Dialog.Close>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["EditingActionMenu","props","hasChanges","hasErrors","onClear","handleClear","onExit","handleExit","onEditingSave","handleSave","isLastRow","texts","useLocalization","handleKeyDown","event","key","React","IconButton","appearance","table3","editing","actions","tooltip","className","icon","onKeyDown","menu","menuProps","Menu","Content","Item","disabled","onClick","save","dialog","ConfirmClearChangesDialog","clear","exit","dialogProps","Dialog","clearChangesConfirmationDialog","title","Title","description","Footer","Group","Close","Button","tabIndex","cancel","autoFocus","confirm"],"mappings":";;;;;;;;SAiBgBA,iBAAiBA,CAACC,KAA6B;EAC3D,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,OAAO,EAAEC,WAAW;IAAEC,MAAM,EAAEC,UAAU;IAAEC,aAAa,EAAEC,UAAU;IAAEC;GAAW,GAAGT,KAAK;EACvH,MAAM;IAAEU;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,aAAa,GAAGC,KAAK;;IAEvB,IAAIJ,SAAS,IAAIR,UAAU,IAAIY,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;MAChDN,UAAU,EAAE;;GAEnB;EAED,oBACIO,6BAACC,UAAU;IACPC,UAAU,EAAC,aAAa;kBACZP,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,OAAO,CAACC,OAAO;IAChDC,SAAS,EAAC,8CAA8C;IACxDC,IAAI,EAAC,MAAM;IACXC,SAAS,EAAEZ,aAAa;IACxBa,IAAI,EAAEC,SAAS,kBACXX,6BAACY,IAAI,oBAAKD,SAAS,gBACfX,6BAACY,IAAI,CAACC,OAAO,qBACTb,6BAACY,IAAI,CAACE,IAAI;MAACN,IAAI,EAAC,MAAM;MAACO,QAAQ,EAAE,CAAC7B,UAAU,IAAIC,SAAS;MAAE6B,OAAO,EAAEvB;OAC/DE,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,OAAO,CAACY,IAAI,CAC1B,eACZjB,6BAACY,IAAI,CAACE,IAAI;MACNN,IAAI,EAAC,OAAO;MACZO,QAAQ,EAAE,CAAC7B,UAAU;MACrBgC,MAAM,EAAEjC,KAAK,iBAAIe,6BAACmB,yBAAyB,oBAAKlC,KAAK;QAAEG,OAAO,EAAEC;;OAC/DM,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,OAAO,CAACe,KAAK,CAC3B,eACZpB,6BAACY,IAAI,CAACE,IAAI;MAACN,IAAI,EAAC,MAAM;MAACQ,OAAO,EAAEzB;OAC3BI,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,OAAO,CAACgB,IAAI,CAC1B,CACD,CACZ;IAEb;AAEV;AAMA,SAASF,yBAAyBA,CAAClC,KAAqC;EACpE,MAAM;IAAEG,OAAO,EAAEC,WAAW;IAAE,GAAGiC;GAAa,GAAGrC,KAAK;EACtD,MAAM;IAAEU;GAAO,GAAGC,eAAe,EAAE;EAEnC,oBACII,6BAACuB,MAAM,oBAAKD,WAAW,gBACnBtB,6BAACuB,MAAM,CAACV,OAAO;kBAAalB,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACoB,8BAA8B,CAACC;kBAC5EzB,6BAACuB,MAAM,CAACG,KAAK,QAAE/B,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACoB,8BAA8B,CAACC,KAAK,CAAgB,eAExFzB,wCAAIL,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACoB,8BAA8B,CAACG,WAAW,CAAK,eAExE3B,6BAACuB,MAAM,CAACK,MAAM,qBACV5B,6BAAC6B,KAAK,qBACF7B,6BAACuB,MAAM,CAACO,KAAK,qBACT9B,6BAAC+B,MAAM;IAACC,QAAQ,EAAE;KAAIrC,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACoB,8BAA8B,CAACS,MAAM,CAAU,CAC/E,eACfjC,6BAACuB,MAAM,CAACO,KAAK,qBACT9B,6BAAC+B,MAAM;IAACC,QAAQ,EAAE,CAAC;IAAE9B,UAAU,EAAC,SAAS;IAACgC,SAAS;IAAClB,OAAO,EAAE3B;KACxDM,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACoB,8BAA8B,CAACW,OAAO,CACvD,CACE,CACX,CACI,CACH,CACZ;AAEjB;;;;"}
+{"version":3,"file":"EditingActionsMenu.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Internal/EditingActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Dialog, DialogProps } from '../../../../Dialog/Dialog';\nimport { Group } from '../../../../Group/Group';\nimport { Button } from '../../../../Button/Button';\n\ntype EditingActionMenuProps = {\n    hasChanges: boolean;\n    hasErrors: boolean;\n    onClear: () => void;\n    onExit: () => void;\n    onEditingSave: () => Promise<void>;\n    isLastRow: boolean;\n};\n\nexport function EditingActionMenu(props: EditingActionMenuProps) {\n    const { hasChanges, hasErrors, onClear: handleClear, onExit: handleExit, onEditingSave: handleSave, isLastRow } = props;\n    const { texts } = useLocalization();\n\n    const handleKeyDown = event => {\n        // normally we handle this on change of active row, but when tabbing out of the last row the active row state stays on the last one.\n        if (isLastRow && hasChanges && event.key === 'Tab') {\n            handleSave();\n        }\n    };\n\n    const handleMenuContentKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        // Stops the keyboard event from propagating to the Table when EditActionsMenu is open\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n            event.stopPropagation();\n        }\n    };\n\n    return (\n        <IconButton\n            appearance=\"transparent\"\n            aria-label={texts.table3.editing.actions.tooltip}\n            className=\"group-[[data-row-editing-status]]/row:hidden\"\n            icon=\"more\"\n            onKeyDown={handleKeyDown}\n            menu={menuProps => (\n                <Menu {...menuProps}>\n                    <Menu.Content onKeyDown={handleMenuContentKeyDown}>\n                        <Menu.Item icon=\"tick\" disabled={!hasChanges || hasErrors} onClick={handleSave}>\n                            {texts.table3.editing.actions.save}\n                        </Menu.Item>\n                        <Menu.Item\n                            icon=\"close\"\n                            disabled={!hasChanges}\n                            dialog={props => <ConfirmClearChangesDialog {...props} onClear={handleClear} />}>\n                            {texts.table3.editing.actions.clear}\n                        </Menu.Item>\n                        <Menu.Item icon=\"undo\" onClick={handleExit}>\n                            {texts.table3.editing.actions.exit}\n                        </Menu.Item>\n                    </Menu.Content>\n                </Menu>\n            )}\n        />\n    );\n}\n\ntype ConfirmClearChangesDialogProps = Partial<DialogProps> & {\n    onClear: () => void;\n};\n\nfunction ConfirmClearChangesDialog(props: ConfirmClearChangesDialogProps) {\n    const { onClear: handleClear, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    const handleClickInsideDialogContent = (event: React.MouseEvent) => {\n        // Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs\n        // inside the dialog\n        event.stopPropagation();\n    };\n\n    return (\n        <Dialog {...dialogProps}>\n            <Dialog.Content\n                aria-label={texts.table3.editing.clearChangesConfirmationDialog.title}\n                onClick={handleClickInsideDialogContent}>\n                <Dialog.Title>{texts.table3.editing.clearChangesConfirmationDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.editing.clearChangesConfirmationDialog.description}</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 autoFocus tabIndex={0} appearance=\"primary\" onClick={handleClear}>\n                                {texts.table3.editing.clearChangesConfirmationDialog.confirm}\n                            </Button>\n                        </Dialog.Close>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["EditingActionMenu","props","hasChanges","hasErrors","onClear","handleClear","onExit","handleExit","onEditingSave","handleSave","isLastRow","texts","useLocalization","handleKeyDown","event","key","handleMenuContentKeyDown","stopPropagation","React","IconButton","appearance","table3","editing","actions","tooltip","className","icon","onKeyDown","menu","menuProps","Menu","Content","Item","disabled","onClick","save","dialog","ConfirmClearChangesDialog","clear","exit","dialogProps","handleClickInsideDialogContent","Dialog","clearChangesConfirmationDialog","title","Title","description","Footer","Group","Close","Button","tabIndex","cancel","autoFocus","confirm"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js

@@ -19,17 +19,7 @@ function Alert(props) {
   const validationTexts = texts.table3.editing.validation;
   const tableMeta = table.options.meta;
   const [showFilterResetDialog, setShowFilterResetDialog] = React__default.useState(false);
-  const pendingChangesWithErrors = tableMeta.editing.getErrors();
-  const activeRow = React__default.useMemo(() => tableMeta.rowActive.rowActiveIndex ? table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex] : undefined, [tableMeta.rowActive.rowActiveIndex]);
-  // mark errors being rendered as seen
-  React__default.useEffect(() => {
-    pendingChangesWithErrors.forEach(error => {
-      if (activeRow && error.rowId === activeRow.id) {
-        return;
-      }
-      tableMeta.editing.setRowErrorsSeen(error.rowId);
-    });
-  }, [pendingChangesWithErrors]);
+  const pendingChangesWithErrors = tableMeta.editing.getAlertErrors();
   function scrollToRow(rowIndex) {
     tableMeta.rowActive.setRowActiveIndex(rowIndex);
     scrollToIndex(rowIndex, {

package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport { Alert as BaseAlert, AlertProps as BaseAlertProps } from '../../../Alert/Alert';\nimport { TableRef } from '../../../../primitives/Table/types';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Dialog, DialogProps } from '../../../Dialog/Dialog';\nimport { Group } from '../../../Group/Group';\nimport { Button } from '../../../Button/Button';\n\ntype AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {\n    scrollToIndex: (index: number, options: ReactVirtualScrollToOptions) => void;\n    table: ReactTable<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function Alert<TType = unknown>(props: AlertProps<TType>) {\n    const { scrollToIndex, table, tableRef, ...attributes } = props;\n    const { texts } = useLocalization();\n    const validationTexts = texts.table3.editing.validation;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const [showFilterResetDialog, setShowFilterResetDialog] = React.useState<string | false>(false);\n\n    const pendingChangesWithErrors = tableMeta.editing.getErrors<TType>();\n\n    const activeRow = React.useMemo(\n        () => (tableMeta.rowActive.rowActiveIndex ? table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex] : undefined),\n        [tableMeta.rowActive.rowActiveIndex]\n    );\n\n    // mark errors being rendered as seen\n    React.useEffect(() => {\n        pendingChangesWithErrors.forEach(error => {\n            if (activeRow && error.rowId === activeRow.id) {\n                return;\n            }\n\n            tableMeta.editing.setRowErrorsSeen(error.rowId);\n        });\n    }, [pendingChangesWithErrors]);\n\n    function scrollToRow(rowIndex: number) {\n        tableMeta.rowActive.setRowActiveIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n\n        requestAnimationFrame(() => {\n            const cell = tableRef.current?.querySelector(\n                'tbody > tr[data-row-active=\"true\"] > td[data-cell-editing-invalid=\"true\"]'\n            );\n\n            if (cell) {\n                (cell as HTMLElement).focus?.();\n            }\n        });\n    }\n\n    // generate the \"N unsaved entries\" title\n    const title = (\n        pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural\n    ).replace('[COUNT]', String(pendingChangesWithErrors.length));\n\n    // generate links to each invalid row, to go into the error message\n    const links: React.ReactNode[] = [];\n    const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;\n\n    pendingChangesWithErrors.forEach((error, index) => {\n        // if appropriate, concatenate the item with the text \"and\"\n        if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {\n            // Add space before and after `messageAnd` text\n            links.push(` ${validationTexts.alert.messageAnd} `);\n        }\n        const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);\n\n        const handleClick = () => {\n            if (rowIndex > -1) {\n                scrollToRow(rowIndex);\n            } else {\n                setShowFilterResetDialog(error.rowId);\n            }\n        };\n\n        let tooltip;\n\n        if (error.pendingChange._meta.errors.row) {\n            tooltip = error.pendingChange._meta.errors.row;\n        } else {\n            const firstCellErrorColumnId = Object.keys(error.pendingChange._meta.errors.cells)[0];\n            const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n            tooltip = `${columnName}: ${error.pendingChange._meta.errors.cells[firstCellErrorColumnId]}`;\n        }\n\n        links.push(\n            <Tooltip key={error.rowId} title={tooltip}>\n                <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n                    {rowIdentityColumn ? error.pendingChange._meta.original[rowIdentityColumn.id] : rowIndex + 1}\n                </span>\n            </Tooltip>\n        );\n\n        // if appropriate, concatenate the item with the text \",\"\n        if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {\n            links.push(', ');\n        }\n    });\n\n    // generate the \"Row N is incomplete and hasn't been saved\" error message\n    const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural)\n        .split(/(\\[\\w+\\])/)\n        .map(part => {\n            if (part === '[COLUMN]') {\n                return rowIdentityColumn?.columnDef.meta?.header ?? validationTexts.alert.messageRow;\n            }\n\n            if (part === '[ROW]') {\n                return links;\n            }\n\n            return part;\n        });\n\n    const handleResetFilters = () => {\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n\n        requestAnimationFrame(() => {\n            const rowIndex = table.getRowModel().rows.findIndex(row => row.id === showFilterResetDialog);\n\n            if (rowIndex > -1) {\n                scrollToRow(rowIndex);\n            }\n\n            setShowFilterResetDialog(false);\n        });\n    };\n\n    return (\n        <>\n            <BaseAlert {...attributes} state=\"error\">\n                <span className=\"font-bold\">{title}</span>&nbsp;{message}\n            </BaseAlert>\n            <FilterResetDialog\n                open={showFilterResetDialog !== false}\n                onChange={() => setShowFilterResetDialog(false)}\n                onSubmit={handleResetFilters}\n            />\n        </>\n    );\n}\n\ntype FilterResetDialogProps = Omit<DialogProps, 'children'> & {\n    onSubmit: () => void;\n};\n\nfunction FilterResetDialog(props: FilterResetDialogProps) {\n    const { onSubmit: handleSubmit, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <Dialog {...dialogProps} size=\"xs\">\n            <Dialog.Content aria-label=\"Create a new account\">\n                <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button appearance=\"primary\" onClick={handleSubmit}>\n                            {texts.table3.editing.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["Alert","props","scrollToIndex","table","tableRef","attributes","texts","useLocalization","validationTexts","table3","editing","validation","tableMeta","options","meta","showFilterResetDialog","setShowFilterResetDialog","React","useState","pendingChangesWithErrors","getErrors","activeRow","useMemo","rowActive","rowActiveIndex","getRowModel","rows","undefined","useEffect","forEach","error","rowId","id","setRowErrorsSeen","scrollToRow","rowIndex","setRowActiveIndex","align","requestAnimationFrame","cell","_tableRef$current","current","querySelector","_cell$focus","focus","call","title","length","alert","titleOne","titlePlural","replace","String","links","rowIdentityColumn","rowIdentityColumnId","getColumn","index","push","messageAnd","findIndex","row","handleClick","tooltip","pendingChange","_meta","errors","_table$getAllColumns$","_table$getAllColumns$2","firstCellErrorColumnId","Object","keys","cells","columnName","getAllColumns","find","column","columnDef","header","Tooltip","key","className","onClick","role","original","message","messageOne","messagePlural","split","map","part","_rowIdentityColumn$co","_rowIdentityColumn$co2","messageRow","handleResetFilters","resetGlobalFilter","resetColumnFilters","BaseAlert","state","FilterResetDialog","open","onChange","onSubmit","handleSubmit","dialogProps","Dialog","size","Content","Title","resetFiltersDialog","description","Footer","Group","Close","Button","cancel","appearance","confirm"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport { Alert as BaseAlert, AlertProps as BaseAlertProps } from '../../../Alert/Alert';\nimport { TableRef } from '../../../../primitives/Table/types';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Dialog, DialogProps } from '../../../Dialog/Dialog';\nimport { Group } from '../../../Group/Group';\nimport { Button } from '../../../Button/Button';\n\ntype AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {\n    scrollToIndex: (index: number, options: ReactVirtualScrollToOptions) => void;\n    table: ReactTable<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function Alert<TType = unknown>(props: AlertProps<TType>) {\n    const { scrollToIndex, table, tableRef, ...attributes } = props;\n    const { texts } = useLocalization();\n    const validationTexts = texts.table3.editing.validation;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const [showFilterResetDialog, setShowFilterResetDialog] = React.useState<string | false>(false);\n    const pendingChangesWithErrors = tableMeta.editing.getAlertErrors<TType>();\n\n    function scrollToRow(rowIndex: number) {\n        tableMeta.rowActive.setRowActiveIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n\n        requestAnimationFrame(() => {\n            const cell = tableRef.current?.querySelector(\n                'tbody > tr[data-row-active=\"true\"] > td[data-cell-editing-invalid=\"true\"]'\n            );\n\n            if (cell) {\n                (cell as HTMLElement).focus?.();\n            }\n        });\n    }\n\n    // generate the \"N unsaved entries\" title\n    const title = (\n        pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural\n    ).replace('[COUNT]', String(pendingChangesWithErrors.length));\n\n    // generate links to each invalid row, to go into the error message\n    const links: React.ReactNode[] = [];\n    const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;\n\n    pendingChangesWithErrors.forEach((error, index) => {\n        // if appropriate, concatenate the item with the text \"and\"\n        if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {\n            // Add space before and after `messageAnd` text\n            links.push(` ${validationTexts.alert.messageAnd} `);\n        }\n        const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);\n\n        const handleClick = () => {\n            if (rowIndex > -1) {\n                scrollToRow(rowIndex);\n            } else {\n                setShowFilterResetDialog(error.rowId);\n            }\n        };\n\n        let tooltip;\n\n        if (error.pendingChange._meta.errors.row) {\n            tooltip = error.pendingChange._meta.errors.row;\n        } else {\n            const firstCellErrorColumnId = Object.keys(error.pendingChange._meta.errors.cells)[0];\n            const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n            tooltip = `${columnName}: ${error.pendingChange._meta.errors.cells[firstCellErrorColumnId]}`;\n        }\n\n        links.push(\n            <Tooltip key={error.rowId} title={tooltip}>\n                <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n                    {rowIdentityColumn ? error.pendingChange._meta.original[rowIdentityColumn.id] : rowIndex + 1}\n                </span>\n            </Tooltip>\n        );\n\n        // if appropriate, concatenate the item with the text \",\"\n        if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {\n            links.push(', ');\n        }\n    });\n\n    // generate the \"Row N is incomplete and hasn't been saved\" error message\n    const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural)\n        .split(/(\\[\\w+\\])/)\n        .map(part => {\n            if (part === '[COLUMN]') {\n                return rowIdentityColumn?.columnDef.meta?.header ?? validationTexts.alert.messageRow;\n            }\n\n            if (part === '[ROW]') {\n                return links;\n            }\n\n            return part;\n        });\n\n    const handleResetFilters = () => {\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n\n        requestAnimationFrame(() => {\n            const rowIndex = table.getRowModel().rows.findIndex(row => row.id === showFilterResetDialog);\n\n            if (rowIndex > -1) {\n                scrollToRow(rowIndex);\n            }\n\n            setShowFilterResetDialog(false);\n        });\n    };\n\n    return (\n        <>\n            <BaseAlert {...attributes} state=\"error\">\n                <span className=\"font-bold\">{title}</span>&nbsp;{message}\n            </BaseAlert>\n            <FilterResetDialog\n                open={showFilterResetDialog !== false}\n                onChange={() => setShowFilterResetDialog(false)}\n                onSubmit={handleResetFilters}\n            />\n        </>\n    );\n}\n\ntype FilterResetDialogProps = Omit<DialogProps, 'children'> & {\n    onSubmit: () => void;\n};\n\nfunction FilterResetDialog(props: FilterResetDialogProps) {\n    const { onSubmit: handleSubmit, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <Dialog {...dialogProps} size=\"xs\">\n            <Dialog.Content aria-label=\"Create a new account\">\n                <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button appearance=\"primary\" onClick={handleSubmit}>\n                            {texts.table3.editing.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["Alert","props","scrollToIndex","table","tableRef","attributes","texts","useLocalization","validationTexts","table3","editing","validation","tableMeta","options","meta","showFilterResetDialog","setShowFilterResetDialog","React","useState","pendingChangesWithErrors","getAlertErrors","scrollToRow","rowIndex","rowActive","setRowActiveIndex","align","requestAnimationFrame","cell","_tableRef$current","current","querySelector","_cell$focus","focus","call","title","length","alert","titleOne","titlePlural","replace","String","links","rowIdentityColumn","rowIdentityColumnId","getColumn","undefined","forEach","error","index","push","messageAnd","getRowModel","rows","findIndex","row","id","rowId","handleClick","tooltip","pendingChange","_meta","errors","_table$getAllColumns$","_table$getAllColumns$2","firstCellErrorColumnId","Object","keys","cells","columnName","getAllColumns","find","column","columnDef","header","Tooltip","key","className","onClick","role","original","message","messageOne","messagePlural","split","map","part","_rowIdentityColumn$co","_rowIdentityColumn$co2","messageRow","handleResetFilters","resetGlobalFilter","resetColumnFilters","BaseAlert","state","FilterResetDialog","open","onChange","onSubmit","handleSubmit","dialogProps","Dialog","size","Content","Title","resetFiltersDialog","description","Footer","Group","Close","Button","cancel","appearance","confirm"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js

@@ -19,7 +19,7 @@ function CreateNewRowButton(props) {
   });
   const handleKeyDown = event => {
     if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {
-      !tableMeta.editing.saveChanges();
+      tableMeta.editing.saveChanges();
     }
   };
   const handleCreate = function () {

package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateRowButton.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/CreateRowButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { ScrollToOptions } from '@tanstack/react-virtual';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { animateCreateRow } from '../../../util/editing';\n\ntype Props<TType = unknown> = {\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    onEditingCreate: (() => (row: Partial<TType>) => boolean) | undefined;\n    scrollToIndex: (index: number, options?: ScrollToOptions) => void;\n};\n\nexport default function CreateNewRowButton<TType = unknown>(props: Props<TType>) {\n    const { onEditingCreate, scrollToIndex, table, tableMeta } = props;\n    const { texts } = useLocalization();\n    const rows = table.getCoreRowModel().rows.filter(row => row.original !== undefined);\n\n    const [rowCreated, setRowCreated] = React.useState<{ rowFinder: ((row: Partial<TType>) => boolean) | undefined }>({\n        rowFinder: undefined,\n    });\n\n    const handleKeyDown = event => {\n        if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {\n            !tableMeta.editing.saveChanges();\n        }\n    };\n\n    const handleCreate = async () => {\n        if (!onEditingCreate) {\n            return;\n        }\n        const createdRow = rows.find(row => rowCreated?.rowFinder?.(row.original));\n\n        if (createdRow) {\n            await tableMeta.editing.saveChanges();\n\n            if (!tableMeta.editing.hasRowErrors(createdRow.id)) {\n                const rowFinder = onEditingCreate();\n\n                setRowCreated({ rowFinder });\n            }\n        } else {\n            const rowFinder = onEditingCreate();\n            setRowCreated({ rowFinder });\n        }\n    };\n\n    React.useEffect(() => {\n        if (typeof rowCreated?.rowFinder === 'function') {\n            const createdRow = rows.find(row => rowCreated?.rowFinder?.(row.original));\n\n            if (createdRow) {\n                const rowInTable = table\n                    .getRowModel()\n                    .rows.filter(row => row.original !== undefined)\n                    .find(row => rowCreated?.rowFinder?.(row.original));\n                if (rowInTable) {\n                    tableMeta.editing.toggleEditing(true);\n                    tableMeta.rowActive.setRowActiveIndex(createdRow.index);\n                    scrollToIndex(createdRow.index);\n                    requestAnimationFrame(() => animateCreateRow(createdRow.id));\n                }\n                requestAnimationFrame(() => tableMeta.editing.addCreatedRowChangeset(createdRow));\n            }\n        }\n    }, [rowCreated]);\n\n    return (\n        <tr\n            onClick={handleCreate}\n            className=\"border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t\">\n            <td className=\"!border-t-0 !bg-transparent\">\n                <Button onKeyDown={handleKeyDown} className=\"group-hover:bg-grey-200 sticky left-0\" appearance=\"transparent\">\n                    + {texts.table3.editing.buttons.create.label}\n                </Button>\n            </td>\n        </tr>\n    );\n}\n"],"names":["CreateNewRowButton","props","onEditingCreate","scrollToIndex","table","tableMeta","texts","useLocalization","rows","getCoreRowModel","filter","row","original","undefined","rowCreated","setRowCreated","React","useState","rowFinder","handleKeyDown","event","editing","hasChanges","key","saveChanges","handleCreate","Promise","resolve","createdRow","find","_rowCreated$rowFinder","call","_temp","then","hasRowErrors","id","e","reject","useEffect","_rowCreated$rowFinder2","rowInTable","getRowModel","_rowCreated$rowFinder3","toggleEditing","rowActive","setRowActiveIndex","index","requestAnimationFrame","animateCreateRow","addCreatedRowChangeset","onClick","className","Button","onKeyDown","appearance","table3","buttons","create","label"],"mappings":"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"}
+{"version":3,"file":"CreateRowButton.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/CreateRowButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { ScrollToOptions } from '@tanstack/react-virtual';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { animateCreateRow } from '../../../util/editing';\n\ntype Props<TType = unknown> = {\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    onEditingCreate: (() => (row: Partial<TType>) => boolean) | undefined;\n    scrollToIndex: (index: number, options?: ScrollToOptions) => void;\n};\n\nexport default function CreateNewRowButton<TType = unknown>(props: Props<TType>) {\n    const { onEditingCreate, scrollToIndex, table, tableMeta } = props;\n    const { texts } = useLocalization();\n    const rows = table.getCoreRowModel().rows.filter(row => row.original !== undefined);\n\n    const [rowCreated, setRowCreated] = React.useState<{ rowFinder: ((row: Partial<TType>) => boolean) | undefined }>({\n        rowFinder: undefined,\n    });\n\n    const handleKeyDown = event => {\n        if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {\n            tableMeta.editing.saveChanges();\n        }\n    };\n\n    const handleCreate = async () => {\n        if (!onEditingCreate) {\n            return;\n        }\n        const createdRow = rows.find(row => rowCreated?.rowFinder?.(row.original));\n\n        if (createdRow) {\n            await tableMeta.editing.saveChanges();\n\n            if (!tableMeta.editing.hasRowErrors(createdRow.id)) {\n                const rowFinder = onEditingCreate();\n\n                setRowCreated({ rowFinder });\n            }\n        } else {\n            const rowFinder = onEditingCreate();\n            setRowCreated({ rowFinder });\n        }\n    };\n\n    React.useEffect(() => {\n        if (typeof rowCreated?.rowFinder === 'function') {\n            const createdRow = rows.find(row => rowCreated?.rowFinder?.(row.original));\n\n            if (createdRow) {\n                const rowInTable = table\n                    .getRowModel()\n                    .rows.filter(row => row.original !== undefined)\n                    .find(row => rowCreated?.rowFinder?.(row.original));\n                if (rowInTable) {\n                    tableMeta.editing.toggleEditing(true);\n                    tableMeta.rowActive.setRowActiveIndex(createdRow.index);\n                    scrollToIndex(createdRow.index);\n                    requestAnimationFrame(() => animateCreateRow(createdRow.id));\n                }\n                requestAnimationFrame(() => tableMeta.editing.addCreatedRowChangeset(createdRow));\n            }\n        }\n    }, [rowCreated]);\n\n    return (\n        <tr\n            onClick={handleCreate}\n            className=\"border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t\">\n            <td className=\"!border-t-0 !bg-transparent\">\n                <Button onKeyDown={handleKeyDown} className=\"group-hover:bg-grey-200 sticky left-0\" appearance=\"transparent\">\n                    + {texts.table3.editing.buttons.create.label}\n                </Button>\n            </td>\n        </tr>\n    );\n}\n"],"names":["CreateNewRowButton","props","onEditingCreate","scrollToIndex","table","tableMeta","texts","useLocalization","rows","getCoreRowModel","filter","row","original","undefined","rowCreated","setRowCreated","React","useState","rowFinder","handleKeyDown","event","editing","hasChanges","key","saveChanges","handleCreate","Promise","resolve","createdRow","find","_rowCreated$rowFinder","call","_temp","then","hasRowErrors","id","e","reject","useEffect","_rowCreated$rowFinder2","rowInTable","getRowModel","_rowCreated$rowFinder3","toggleEditing","rowActive","setRowActiveIndex","index","requestAnimationFrame","animateCreateRow","addCreatedRowChangeset","onClick","className","Button","onKeyDown","appearance","table3","buttons","create","label"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import cn from 'clsx';
-import { Icon } from '../../../../Icon/Icon.js';
+import { BadgeIcon } from '../../../../BadgeIcon/BadgeIcon.js';
 import { Tooltip } from '../../../../Tooltip/Tooltip.js';
 import { useLocalization } from '../../../../Provider/Localization.js';
 import { Spinner } from '../../../../Spinner/Spinner.js';
@@ -41,12 +41,14 @@ function SaveStatus(props) {
     title: texts.table3.editing.saving.progress
   }, /*#__PURE__*/React__default.createElement(Spinner, {
     delay: 0,
-    className: "!text-grey-700 mr-1 !h-5 !w-5"
+    className: "mr-1 !h-5 !w-5"
   }))) : (/*#__PURE__*/React__default.createElement(Tooltip, {
     title: texts.table3.editing.saving.complete
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: "tick",
-    className: "!text-grey-700 mr-1 !h-5 !w-5"
+  }, /*#__PURE__*/React__default.createElement(BadgeIcon, {
+    icon: "tick",
+    color: "green",
+    subtle: true,
+    className: "mr-1"
   })))));
 }
 

package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaveStatus.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/SaveStatus.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Spinner } from '../../../../Spinner/Spinner';\n\nconst COMPLETE_INDICATOR_DELAY = 3000;\n\ntype SaveStatusProps<TType = unknown> = {\n    rowId: string;\n    table: ReactTable<TType>;\n};\n\nexport function SaveStatus<TType = unknown>(props: SaveStatusProps<TType>) {\n    const { rowId, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const status = tableMeta.editing.getRowSaveStatus(rowId);\n\n    React.useEffect(() => {\n        let timeout;\n\n        if (status === 'complete') {\n            timeout = setTimeout(() => {\n                tableMeta.editing.setRowSaveStatus(rowId, undefined);\n            }, COMPLETE_INDICATOR_DELAY);\n        }\n\n        return () => {\n            clearTimeout(timeout);\n        };\n    }, [status]);\n\n    const className = clsx(\n        'col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]',\n        {\n            'mt-0.5': tableMeta.rowHeight.height === 'short',\n            'mt-1': tableMeta.rowHeight.height === 'medium',\n            'mt-1.5': tableMeta.rowHeight.height === 'tall',\n            'mt-2': tableMeta.rowHeight.height === 'extra-tall',\n        }\n    );\n\n    return (\n        <td className=\"!contents\">\n            <span className={className}>\n                {status === 'pending' ? (\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                    <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            </span>\n        </td>\n    );\n}\n"],"names":["COMPLETE_INDICATOR_DELAY","SaveStatus","props","rowId","table","texts","useLocalization","tableMeta","options","meta","status","editing","getRowSaveStatus","React","useEffect","timeout","setTimeout","setRowSaveStatus","undefined","clearTimeout","className","clsx","rowHeight","height","Tooltip","title","table3","saving","progress","Spinner","delay","complete","Icon","name"],"mappings":";;;;;;;AAQA,MAAMA,wBAAwB,GAAG,IAAI;SAOrBC,UAAUA,CAAkBC,KAA6B;EACrE,MAAM;IAAEC,KAAK;IAAEC;GAAO,GAAGF,KAAK;EAC9B,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,MAAM,GAAGH,SAAS,CAACI,OAAO,CAACC,gBAAgB,CAACT,KAAK,CAAC;EAExDU,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,OAAO;IAEX,IAAIL,MAAM,KAAK,UAAU,EAAE;MACvBK,OAAO,GAAGC,UAAU,CAAC;QACjBT,SAAS,CAACI,OAAO,CAACM,gBAAgB,CAACd,KAAK,EAAEe,SAAS,CAAC;OACvD,EAAElB,wBAAwB,CAAC;;IAGhC,OAAO;MACHmB,YAAY,CAACJ,OAAO,CAAC;KACxB;GACJ,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,MAAMU,SAAS,GAAGC,EAAI,CAClB,4JAA4J,EAC5J;IACI,QAAQ,EAAEd,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,OAAO;IAChD,MAAM,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,QAAQ;IAC/C,QAAQ,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,MAAM;IAC/C,MAAM,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK;GAC1C,CACJ;EAED,oBACIV;IAAIO,SAAS,EAAC;kBACVP;IAAMO,SAAS,EAAEA;KACZV,MAAM,KAAK,SAAS,iBACjBG,6BAACW,OAAO;IAACC,KAAK,EAAEpB,KAAK,CAACqB,MAAM,CAACf,OAAO,CAACgB,MAAM,CAACC;kBACxCf,6BAACgB,OAAO;IAACC,KAAK,EAAE,CAAC;IAAEV,SAAS,EAAC;IAAkC,CACzD,kBAEVP,6BAACW,OAAO;IAACC,KAAK,EAAEpB,KAAK,CAACqB,MAAM,CAACf,OAAO,CAACgB,MAAM,CAACI;kBACxClB,6BAACmB,IAAI;IAACC,IAAI,EAAC,MAAM;IAACb,SAAS,EAAC;IAAkC,CACxD,CACb,CACE,CACN;AAEb;;;;"}
+{"version":3,"file":"SaveStatus.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/SaveStatus.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { BadgeIcon } from '../../../../BadgeIcon/BadgeIcon';\nimport { Spinner } from '../../../../Spinner/Spinner';\n\nconst COMPLETE_INDICATOR_DELAY = 3000;\n\ntype SaveStatusProps<TType = unknown> = {\n    rowId: string;\n    table: ReactTable<TType>;\n};\n\nexport function SaveStatus<TType = unknown>(props: SaveStatusProps<TType>) {\n    const { rowId, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const status = tableMeta.editing.getRowSaveStatus(rowId);\n\n    React.useEffect(() => {\n        let timeout;\n\n        if (status === 'complete') {\n            timeout = setTimeout(() => {\n                tableMeta.editing.setRowSaveStatus(rowId, undefined);\n            }, COMPLETE_INDICATOR_DELAY);\n        }\n\n        return () => {\n            clearTimeout(timeout);\n        };\n    }, [status]);\n\n    const className = clsx(\n        'col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]',\n        {\n            'mt-0.5': tableMeta.rowHeight.height === 'short',\n            'mt-1': tableMeta.rowHeight.height === 'medium',\n            'mt-1.5': tableMeta.rowHeight.height === 'tall',\n            'mt-2': tableMeta.rowHeight.height === 'extra-tall',\n        }\n    );\n\n    return (\n        <td className=\"!contents\">\n            <span className={className}>\n                {status === 'pending' ? (\n                    <Tooltip title={texts.table3.editing.saving.progress}>\n                        <Spinner delay={0} className=\"mr-1 !h-5 !w-5\" />\n                    </Tooltip>\n                ) : (\n                    <Tooltip title={texts.table3.editing.saving.complete}>\n                        <BadgeIcon icon=\"tick\" color=\"green\" subtle className=\"mr-1\" />\n                    </Tooltip>\n                )}\n            </span>\n        </td>\n    );\n}\n"],"names":["COMPLETE_INDICATOR_DELAY","SaveStatus","props","rowId","table","texts","useLocalization","tableMeta","options","meta","status","editing","getRowSaveStatus","React","useEffect","timeout","setTimeout","setRowSaveStatus","undefined","clearTimeout","className","clsx","rowHeight","height","Tooltip","title","table3","saving","progress","Spinner","delay","complete","BadgeIcon","icon","color","subtle"],"mappings":";;;;;;;AAQA,MAAMA,wBAAwB,GAAG,IAAI;SAOrBC,UAAUA,CAAkBC,KAA6B;EACrE,MAAM;IAAEC,KAAK;IAAEC;GAAO,GAAGF,KAAK;EAC9B,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,MAAM,GAAGH,SAAS,CAACI,OAAO,CAACC,gBAAgB,CAACT,KAAK,CAAC;EAExDU,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,OAAO;IAEX,IAAIL,MAAM,KAAK,UAAU,EAAE;MACvBK,OAAO,GAAGC,UAAU,CAAC;QACjBT,SAAS,CAACI,OAAO,CAACM,gBAAgB,CAACd,KAAK,EAAEe,SAAS,CAAC;OACvD,EAAElB,wBAAwB,CAAC;;IAGhC,OAAO;MACHmB,YAAY,CAACJ,OAAO,CAAC;KACxB;GACJ,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,MAAMU,SAAS,GAAGC,EAAI,CAClB,4JAA4J,EAC5J;IACI,QAAQ,EAAEd,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,OAAO;IAChD,MAAM,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,QAAQ;IAC/C,QAAQ,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK,MAAM;IAC/C,MAAM,EAAEhB,SAAS,CAACe,SAAS,CAACC,MAAM,KAAK;GAC1C,CACJ;EAED,oBACIV;IAAIO,SAAS,EAAC;kBACVP;IAAMO,SAAS,EAAEA;KACZV,MAAM,KAAK,SAAS,iBACjBG,6BAACW,OAAO;IAACC,KAAK,EAAEpB,KAAK,CAACqB,MAAM,CAACf,OAAO,CAACgB,MAAM,CAACC;kBACxCf,6BAACgB,OAAO;IAACC,KAAK,EAAE,CAAC;IAAEV,SAAS,EAAC;IAAmB,CAC1C,kBAEVP,6BAACW,OAAO;IAACC,KAAK,EAAEpB,KAAK,CAACqB,MAAM,CAACf,OAAO,CAACgB,MAAM,CAACI;kBACxClB,6BAACmB,SAAS;IAACC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,OAAO;IAACC,MAAM;IAACf,SAAS,EAAC;IAAS,CACzD,CACb,CACE,CACN;AAEb;;;;"}

package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js

@@ -100,14 +100,13 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
               }
               if (rowError || cellErrors) {
                 setPendingChanges(currentChanges => {
-                  var _nextChanges$rowId$_m, _nextChanges$rowId$_m2;
                   const nextChanges = {
                     ...currentChanges
                   };
                   nextChanges[rowId]._meta.errors = {
                     row: rowError,
                     cells: cellErrors,
-                    hasShownErrorAlert: (_nextChanges$rowId$_m = (_nextChanges$rowId$_m2 = nextChanges[rowId]._meta.errors) === null || _nextChanges$rowId$_m2 === void 0 ? void 0 : _nextChanges$rowId$_m2.hasShownErrorAlert) !== null && _nextChanges$rowId$_m !== void 0 ? _nextChanges$rowId$_m : false
+                    shouldShowErrorAlert: true
                   };
                   return nextChanges;
                 });
@@ -142,7 +141,7 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
                 errors: {
                   ...nextChanges[cell.row.id]._meta.errors,
                   cells: errors,
-                  hasShownErrorAlert: Object.keys(errors).length && !nextChanges[cell.row.id]._meta.errors.hasShownErrorAlert ? false : nextChanges[cell.row.id]._meta.errors.hasShownErrorAlert
+                  shouldShowErrorAlert: !Object.keys(errors).length ? false : nextChanges[cell.row.id]._meta.errors.shouldShowErrorAlert
                 }
               };
               return nextChanges;
@@ -230,22 +229,18 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
     if (!isEnabled) {
       return false;
     }
-    return hasRowErrors(rowId) && !!((_pendingChanges$rowId6 = pendingChanges[rowId]._meta.errors) !== null && _pendingChanges$rowId6 !== void 0 && _pendingChanges$rowId6.hasShownErrorAlert);
+    return hasRowErrors(rowId) && !!((_pendingChanges$rowId6 = pendingChanges[rowId]._meta.errors) !== null && _pendingChanges$rowId6 !== void 0 && _pendingChanges$rowId6.shouldShowErrorAlert);
   }
-  function setRowErrorsSeen(rowId) {
-    var _pendingChanges$rowId7;
-    if (((_pendingChanges$rowId7 = pendingChanges[rowId]._meta.errors) === null || _pendingChanges$rowId7 === void 0 ? void 0 : _pendingChanges$rowId7.hasShownErrorAlert) === false) {
-      setPendingChanges(currentChanges => {
-        const nextChanges = {
-          ...currentChanges
-        };
-        nextChanges[rowId]._meta.errors = {
-          ...nextChanges[rowId]._meta.errors,
-          hasShownErrorAlert: true
-        };
-        return nextChanges;
-      });
+  function getRowPendingChange(rowId) {
+    const rowPendingChanges = pendingChanges[rowId];
+    if (rowPendingChanges) {
+      const {
+        _meta,
+        ...pendingChange
+      } = rowPendingChanges;
+      return pendingChange;
     }
+    return undefined;
   }
   function getRowSaveStatus(rowId) {
     if (!isEnabled) {
@@ -267,8 +262,8 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
     });
   }
   function getRowMoveReason(rowId) {
-    var _pendingChanges$rowId8;
-    return (_pendingChanges$rowId8 = pendingChanges[rowId]) !== null && _pendingChanges$rowId8 !== void 0 && _pendingChanges$rowId8._meta.moveReason ? Object.values(pendingChanges[rowId]._meta.moveReason)[0] : undefined;
+    var _pendingChanges$rowId7;
+    return (_pendingChanges$rowId7 = pendingChanges[rowId]) !== null && _pendingChanges$rowId7 !== void 0 && _pendingChanges$rowId7._meta.moveReason ? Object.values(pendingChanges[rowId]._meta.moveReason)[0] : undefined;
   }
   function hasChanges(rowId) {
     if (!isEnabled) {
@@ -276,28 +271,14 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
     }
     return rowId ? !!pendingChanges[rowId] : !!Object.keys(pendingChanges).length;
   }
-  function hasErrors(table, tableRef) {
-    var _tableRef$current;
+  function hasAlertErrors() {
     if (!isEnabled) {
       return false;
     }
-    const tableMeta = table.options.meta;
-    const focusIsInsideTable = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.contains(document.activeElement);
-    let activeRow;
-    if (tableMeta.rowActive.rowActiveIndex !== undefined) {
-      activeRow = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex];
-    }
-    return Object.keys(getErrors().filter(error => {
-      var _activeRow;
-      if ((_activeRow = activeRow) !== null && _activeRow !== void 0 && _activeRow.id && focusIsInsideTable) {
-        var _activeRow2, _error$pendingChange$;
-        return error.rowId === ((_activeRow2 = activeRow) === null || _activeRow2 === void 0 ? void 0 : _activeRow2.id) ? (_error$pendingChange$ = error.pendingChange._meta.errors) === null || _error$pendingChange$ === void 0 ? void 0 : _error$pendingChange$.hasShownErrorAlert : true;
-      }
-      return true;
-    })).length;
+    return !!getAlertErrors().length;
   }
-  function getErrors() {
-    return Object.keys(pendingChanges).filter(hasRowErrors).map(rowId => ({
+  function getAlertErrors() {
+    return Object.keys(pendingChanges).filter(hasRowErrorsSeen).map(rowId => ({
       rowId,
       pendingChange: pendingChanges[rowId]
     }));
@@ -311,6 +292,9 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
       return nextChanges;
     });
   }
+  function getCompletedRowsCount() {
+    return Object.values(saveStates).filter(value => value === 'complete').length;
+  }
   return {
     getCellValue,
     getCellError,
@@ -318,16 +302,17 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
     validateCell,
     addCreatedRowChangeset,
     hasChanges,
-    hasErrors,
-    getErrors,
+    hasAlertErrors,
+    getAlertErrors,
     saveChanges,
     resetChanges,
     hasRowErrors,
     hasRowErrorsSeen,
-    setRowErrorsSeen,
+    getRowPendingChange,
     getRowSaveStatus,
     setRowSaveStatus,
-    getRowMoveReason
+    getRowMoveReason,
+    getCompletedRowsCount
   };
 }
 function useLastFocusedCellIndex() {
@@ -399,12 +384,16 @@ function createPendingChangesSetter(currentChanges, row, rowIndex, changes, loca
     // otherwise remove any change - no point saving the same value
     if (change !== row.original[accessor]) {
       rowChanges[accessor] = change;
-      // determine if the row will move position based on this change, and save why it will move
-      const reason = willRowMove(cells[accessor], change, rowIndex, localization);
-      if (reason) {
-        rowChanges._meta.moveReason[accessor] = reason;
-      } else {
-        delete rowChanges._meta.moveReason[accessor];
+      // consumers sometimes include properties in onEditingChange that aren't rendered as columns, we need to guard against that.
+      // eslint-disable-next-line no-prototype-builtins
+      if (cells.hasOwnProperty(accessor)) {
+        // determine if the row will move position based on this change, and save why it will move
+        const reason = willRowMove(cells[accessor], change, rowIndex, localization);
+        if (reason) {
+          rowChanges._meta.moveReason[accessor] = reason;
+        } else {
+          delete rowChanges._meta.moveReason[accessor];
+        }
       }
     } else {
       delete rowChanges[accessor];