@economic/taco 11.0.0 → 11.0.1-react-v19.0

package/dist/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 type { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate, isEqual as isEqualDate, isSameDay } from 'date-fns';\nimport React from 'react';\n\nimport { useLazyEffect } from '../../../../../hooks/useLazyEffect';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport type { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport type { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport { getDataTypeProperties } from '../../../../../primitives/Table/useTableManager/util/dataTypes';\nimport * as date from '../../../../../utils/date';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Field } from '../../../../Field/Field';\nimport { Input } from '../../../../Input/Input';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Switch } from '../../../../Switch/Switch';\n\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { useEditingCellAutofocus } from './util';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, isHighlighted, index } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const { table } = cell.getContext();\n    const locale = useLocalization();\n    const tableMeta = 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    const type = columnMeta.control ?? 'input';\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    const value = cell.getValue();\n    const rowChanges = tableMeta.editing.getRowValue(cell.row.id);\n    const shouldRunUpdate = React.useRef(false);\n\n    // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n    const hasNonTextControl = React.useMemo(() => {\n        return (\n            typeof type === 'function' &&\n            !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n        );\n    }, [cellRef.current]);\n\n    useLazyEffect(() => {\n        // Use an effect instead of a change handler to prevent onEditingChange from running with a stale js closure during on-the-fly creation.\n        if (hasNonTextControl && shouldRunUpdate.current) {\n            tableMeta.editing.onCellChanged(cell, rowIndex, value, true, false);\n            shouldRunUpdate.current = false; // prevent risk of infinite loop, in case there'd ever be an updater function with two values that update each other.\n        }\n    }, [value]);\n\n    const handleChange = React.useCallback(\n        (nextValue: unknown) => {\n            let hasChanged = false;\n\n            if (columnMeta.dataType === 'date') {\n                hasChanged = !isSameDay(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta.dataType === 'datetime') {\n                hasChanged = !isEqualDate(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta.dataType === 'time') {\n                const next = new Date(nextValue as string | Date);\n                const current = new Date(value as string | Date);\n                hasChanged = !(next.getHours() === current.getHours() && next.getMinutes() === current.getMinutes());\n            } else {\n                hasChanged = nextValue !== value;\n            }\n\n            if (hasChanged) {\n                tableMeta.editing.setCellValue(cell, rowIndex, nextValue);\n                shouldRunUpdate.current = hasNonTextControl;\n            }\n        },\n        [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta.dataType]\n    );\n\n    const handleBlur = React.useCallback(\n        (event: React.FocusEvent) => {\n            if (event && isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {\n                return;\n            }\n\n            requestAnimationFrame(() => {\n                tableMeta.editing.toggleDetailedMode(false);\n                tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl, true);\n            });\n        },\n        [hasNonTextControl, cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]\n    );\n\n    const error = tableMeta.editing.getCellError<TType>(cell);\n\n    const handleExitDetailedMode = React.useCallback(() => {\n        tableMeta.editing.onCellChanged(cell, rowIndex, undefined, true, true);\n    }, [cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]);\n\n    const controlProps = {\n        dataType: columnMeta.dataType,\n        disabled: tableMeta.editing.getRowStatus(cell.row.id) === 'saving',\n        fontSize: tableMeta.fontSize.size,\n        id: cell.column.id,\n        invalid: !!error,\n        isDetailedMode: tableMeta.editing.isDetailedMode,\n        isTruncated: !!columnMeta.enableTruncate,\n        locale: locale.locale,\n        onBlur: handleBlur,\n        onChange: handleChange,\n        onExitDetailedMode: handleExitDetailedMode,\n        row: cell.row.original,\n        rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n        tabIndex: isActiveRow ? 0 : -1,\n        toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n        type,\n        value,\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    disabled: boolean;\n    fontSize: TableFontSize;\n    id: string;\n    invalid: boolean;\n    isDetailedMode: boolean;\n    isTruncated: boolean;\n    locale: string;\n    onBlur: (event: React.FocusEvent) => void;\n    onChange: (value: TValue) => void;\n    onExitDetailedMode: () => void;\n    row: TType;\n    rowPendingChanges: Partial<TType> | undefined;\n    tabIndex?: number;\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        disabled,\n        fontSize,\n        id,\n        invalid,\n        isDetailedMode,\n        isTruncated,\n        locale,\n        onBlur,\n        onChange,\n        onExitDetailedMode,\n        row,\n        rowPendingChanges,\n        tabIndex = -1,\n        toggleDetailedMode,\n        type = 'input',\n        value,\n    } = props;\n    const controlRef = React.useRef<HTMLElement>(null);\n    const currentValue = row[id as keyof TType];\n    const commonProps = {\n        disabled,\n        onBlur,\n        ref: controlRef,\n        tabIndex,\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                onExitDetailedMode();\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            if (isDetailedMode) {\n                event.preventDefault();\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            }\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 handlePaste = () => {\n        if (!isDetailedMode) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    if (typeof type === 'function') {\n        const controlFnProps = {\n            ...commonProps,\n            invalid,\n            setValue: onChange,\n            onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n                const target = (event.target as HTMLElement) || null;\n                // it make sense to handle keydown for the custom edititng controls only if target is either input or textarea\n                if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {\n                    handleInputKeyDown(event as React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>);\n                }\n            },\n            onPaste: handlePaste,\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<HTMLInputElement>}\n            />\n        );\n    }\n\n    if (type === 'checkbox') {\n        return (\n            <Checkbox\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.RefObject<HTMLInputElement>}\n            />\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        const handleDatepickerInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const target = event.target as HTMLInputElement;\n\n            if (isDetailedMode && event.key === 'Enter') {\n                // If the field is empty, save as null before exiting detailed mode\n                // This prevents the value from reverting to the previous value\n                if (target.value === '') {\n                    onChange(null);\n                } else {\n                    // When value is not empty, prevent handleInputKeyDown and give full control to Datepicker\n                    // The datepicker will exit \"detailed mode\" by itself when a valid date change is triggered\n                    target.select?.();\n                    return;\n                }\n            }\n\n            handleInputKeyDown(event);\n        };\n\n        return (\n            <Datepicker\n                {...commonProps}\n                invalid={invalid}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleDatepickerInputKeyDown}\n                onPaste={handlePaste}\n                ref={controlRef as React.RefObject<HTMLInputElement>}\n                value={valueAsDate}\n            />\n        );\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const dataTypeProps = getDataTypeProperties(dataType);\n        onChange(dataTypeProps.parse?.(event.target.value, locale) ?? event.target.value);\n    };\n\n    if (type === 'textarea') {\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                onPaste={handlePaste}\n                ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...commonProps}\n            invalid={invalid}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            onPaste={handlePaste}\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":["React","isEqualDate","MemoedEditingCell","date.parse","handleChange","date.isWeakEqual"],"mappings":"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"}
+{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import type { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate, isEqual as isEqualDate, isSameDay } from 'date-fns';\nimport React from 'react';\n\nimport { useLazyEffect } from '../../../../../hooks/useLazyEffect';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport type { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport type { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport { getDataTypeProperties } from '../../../../../primitives/Table/useTableManager/util/dataTypes';\nimport * as date from '../../../../../utils/date';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Field } from '../../../../Field/Field';\nimport { Input } from '../../../../Input/Input';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Switch } from '../../../../Switch/Switch';\n\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { useEditingCellAutofocus } from './util';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, isHighlighted, index } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const { table } = cell.getContext();\n    const locale = useLocalization();\n    const tableMeta = 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    const type = columnMeta.control ?? 'input';\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    const value = cell.getValue();\n    const rowChanges = tableMeta.editing.getRowValue(cell.row.id);\n    const shouldRunUpdate = React.useRef(false);\n\n    // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n    const hasNonTextControl = React.useMemo(() => {\n        return (\n            typeof type === 'function' &&\n            !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n        );\n    }, [cellRef.current]);\n\n    useLazyEffect(() => {\n        // Use an effect instead of a change handler to prevent onEditingChange from running with a stale js closure during on-the-fly creation.\n        if (hasNonTextControl && shouldRunUpdate.current) {\n            tableMeta.editing.onCellChanged(cell, rowIndex, value, true, false);\n            shouldRunUpdate.current = false; // prevent risk of infinite loop, in case there'd ever be an updater function with two values that update each other.\n        }\n    }, [value]);\n\n    const handleChange = React.useCallback(\n        (nextValue: unknown) => {\n            let hasChanged = false;\n\n            if (columnMeta.dataType === 'date') {\n                hasChanged = !isSameDay(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta.dataType === 'datetime') {\n                hasChanged = !isEqualDate(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta.dataType === 'time') {\n                const next = new Date(nextValue as string | Date);\n                const current = new Date(value as string | Date);\n                hasChanged = !(next.getHours() === current.getHours() && next.getMinutes() === current.getMinutes());\n            } else {\n                hasChanged = nextValue !== value;\n            }\n\n            if (hasChanged) {\n                tableMeta.editing.setCellValue(cell, rowIndex, nextValue);\n                shouldRunUpdate.current = hasNonTextControl;\n            }\n        },\n        [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta.dataType]\n    );\n\n    const handleBlur = React.useCallback(\n        (event: React.FocusEvent) => {\n            if (event && isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {\n                return;\n            }\n\n            requestAnimationFrame(() => {\n                tableMeta.editing.toggleDetailedMode(false);\n                tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl, true);\n            });\n        },\n        [hasNonTextControl, cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]\n    );\n\n    const error = tableMeta.editing.getCellError<TType>(cell);\n\n    const handleExitDetailedMode = React.useCallback(() => {\n        tableMeta.editing.onCellChanged(cell, rowIndex, undefined, true, true);\n    }, [cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]);\n\n    const controlProps = {\n        dataType: columnMeta.dataType,\n        disabled: tableMeta.editing.getRowStatus(cell.row.id) === 'saving',\n        fontSize: tableMeta.fontSize.size,\n        id: cell.column.id,\n        invalid: !!error,\n        isDetailedMode: tableMeta.editing.isDetailedMode,\n        isTruncated: !!columnMeta.enableTruncate,\n        locale: locale.locale,\n        onBlur: handleBlur,\n        onChange: handleChange,\n        onExitDetailedMode: handleExitDetailedMode,\n        row: cell.row.original,\n        rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n        tabIndex: isActiveRow ? 0 : -1,\n        toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n        type,\n        value,\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    disabled: boolean;\n    fontSize: TableFontSize;\n    id: string;\n    invalid: boolean;\n    isDetailedMode: boolean;\n    isTruncated: boolean;\n    locale: string;\n    onBlur: (event: React.FocusEvent) => void;\n    onChange: (value: TValue) => void;\n    onExitDetailedMode: () => void;\n    row: TType;\n    rowPendingChanges: Partial<TType> | undefined;\n    tabIndex?: number;\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        disabled,\n        fontSize,\n        id,\n        invalid,\n        isDetailedMode,\n        isTruncated,\n        locale,\n        onBlur,\n        onChange,\n        onExitDetailedMode,\n        row,\n        rowPendingChanges,\n        tabIndex = -1,\n        toggleDetailedMode,\n        type = 'input',\n        value,\n    } = props;\n    const controlRef = React.useRef<HTMLElement>(null);\n    const currentValue = row[id as keyof TType];\n    const commonProps = {\n        disabled,\n        onBlur,\n        ref: controlRef,\n        tabIndex,\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                onExitDetailedMode();\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            if (isDetailedMode) {\n                event.preventDefault();\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            }\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 handlePaste = () => {\n        if (!isDetailedMode) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    if (typeof type === 'function') {\n        const controlFnProps = {\n            ...commonProps,\n            invalid,\n            setValue: onChange,\n            onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n                const target = (event.target as HTMLElement) || null;\n                // it make sense to handle keydown for the custom edititng controls only if target is either input or textarea\n                if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {\n                    handleInputKeyDown(event as React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>);\n                }\n            },\n            onPaste: handlePaste,\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<HTMLInputElement>}\n            />\n        );\n    }\n\n    if (type === 'checkbox') {\n        return (\n            <Checkbox\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.RefObject<HTMLInputElement>}\n            />\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        const handleDatepickerInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const target = event.target as HTMLInputElement;\n\n            if (isDetailedMode && event.key === 'Enter') {\n                // If the field is empty, save as null before exiting detailed mode\n                // This prevents the value from reverting to the previous value\n                if (target.value === '') {\n                    onChange(null);\n                } else {\n                    // When value is not empty, prevent handleInputKeyDown and give full control to Datepicker\n                    // The datepicker will exit \"detailed mode\" by itself when a valid date change is triggered\n                    target.select?.();\n                    return;\n                }\n            }\n\n            handleInputKeyDown(event);\n        };\n\n        return (\n            <Datepicker\n                {...commonProps}\n                invalid={invalid}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleDatepickerInputKeyDown}\n                onPaste={handlePaste}\n                ref={controlRef as React.RefObject<HTMLInputElement>}\n                value={valueAsDate}\n            />\n        );\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const dataTypeProps = getDataTypeProperties(dataType);\n        onChange(dataTypeProps.parse?.(event.target.value, locale) ?? event.target.value);\n    };\n\n    if (type === 'textarea') {\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                onPaste={handlePaste}\n                ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...commonProps}\n            invalid={invalid}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            onPaste={handlePaste}\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>) => React.JSX.Element;\n"],"names":["React","isEqualDate","MemoedEditingCell","date.parse","handleChange","date.isWeakEqual"],"mappings":"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"}

package/dist/components/Table3/components/Columns/Cell/EditingDisplayCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditingDisplayCell.cjs","sources":["../../../../../../src/components/Table3/components/Columns/Cell/EditingDisplayCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayCell } from '../../../../../primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell';\nimport type { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\n\nimport { useEditingCellAutofocus } from './util';\n\nexport const EditingDisplayCell = React.memo(function EditingDisplayCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    return <DisplayCell<TType> {...props} onFocus={handleFocus} tabIndex={-1} />;\n}) as <TType = unknown>(props: TableCellRendererProps<TType>) => JSX.Element;\n"],"names":["EditingDisplayCell","useEditingCellAutofocus","DisplayCell"],"mappings":";;;;;AAOO,MAAM,qBAAqB,MAAM,KAAK,SAASA,oBAAoC,OAAsC;AAC5H,QAAM,cAAcC,KAAAA,wBAA+B,KAAK;AACxD,6CAAQC,YAAAA,aAAA,EAAoB,GAAG,OAAO,SAAS,aAAa,UAAU,IAAI;AAC9E,CAAC;;"}
+{"version":3,"file":"EditingDisplayCell.cjs","sources":["../../../../../../src/components/Table3/components/Columns/Cell/EditingDisplayCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayCell } from '../../../../../primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell';\nimport type { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\n\nimport { useEditingCellAutofocus } from './util';\n\nexport const EditingDisplayCell = React.memo(function EditingDisplayCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    return <DisplayCell<TType> {...props} onFocus={handleFocus} tabIndex={-1} />;\n}) as <TType = unknown>(props: TableCellRendererProps<TType>) => React.JSX.Element;\n"],"names":["EditingDisplayCell","useEditingCellAutofocus","DisplayCell"],"mappings":";;;;;AAOO,MAAM,qBAAqB,MAAM,KAAK,SAASA,oBAAoC,OAAsC;AAC5H,QAAM,cAAcC,KAAAA,wBAA+B,KAAK;AACxD,6CAAQC,YAAAA,aAAA,EAAoB,GAAG,OAAO,SAAS,aAAa,UAAU,IAAI;AAC9E,CAAC;;"}

package/dist/components/Table3/components/Columns/Cell/EditingDisplayCell.d.ts

@@ -1,2 +1,3 @@
+import { default as React } from 'react';
 import { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';
-export declare const EditingDisplayCell: <TType = unknown>(props: TableCellRendererProps<TType>) => JSX.Element;
+export declare const EditingDisplayCell: <TType = unknown>(props: TableCellRendererProps<TType>) => React.JSX.Element;

package/dist/components/Table3/components/Columns/Cell/EditingDisplayCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditingDisplayCell.js","sources":["../../../../../../src/components/Table3/components/Columns/Cell/EditingDisplayCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayCell } from '../../../../../primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell';\nimport type { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\n\nimport { useEditingCellAutofocus } from './util';\n\nexport const EditingDisplayCell = React.memo(function EditingDisplayCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    return <DisplayCell<TType> {...props} onFocus={handleFocus} tabIndex={-1} />;\n}) as <TType = unknown>(props: TableCellRendererProps<TType>) => JSX.Element;\n"],"names":["React","EditingDisplayCell"],"mappings":";;;AAOO,MAAM,qBAAqBA,eAAM,KAAK,SAASC,oBAAoC,OAAsC;AAC5H,QAAM,cAAc,wBAA+B,KAAK;AACxD,sDAAQ,aAAA,EAAoB,GAAG,OAAO,SAAS,aAAa,UAAU,IAAI;AAC9E,CAAC;"}
+{"version":3,"file":"EditingDisplayCell.js","sources":["../../../../../../src/components/Table3/components/Columns/Cell/EditingDisplayCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayCell } from '../../../../../primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell';\nimport type { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\n\nimport { useEditingCellAutofocus } from './util';\n\nexport const EditingDisplayCell = React.memo(function EditingDisplayCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    return <DisplayCell<TType> {...props} onFocus={handleFocus} tabIndex={-1} />;\n}) as <TType = unknown>(props: TableCellRendererProps<TType>) => React.JSX.Element;\n"],"names":["React","EditingDisplayCell"],"mappings":";;;AAOO,MAAM,qBAAqBA,eAAM,KAAK,SAASC,oBAAoC,OAAsC;AAC5H,QAAM,cAAc,wBAA+B,KAAK;AACxD,sDAAQ,aAAA,EAAoB,GAAG,OAAO,SAAS,aAAa,UAAU,IAAI;AAC9E,CAAC;"}

package/dist/components/Table3/components/Editing/Alert.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const Button = require("../../../Actions/Button/Button.cjs");
 const Alert$1 = require("../../../Alert/Alert.cjs");
 const Dialog = require("../../../Dialog/Dialog.cjs");
 const Inline = require("../../../Inline/Inline.cjs");
-const Button = require("../../../LegacyComponents/Button/Button.cjs");
 const Localization = require("../../../Provider/Localization.cjs");
 const Tooltip = require("../../../Tooltip/Tooltip.cjs");
 function Alert(props) {
@@ -65,8 +65,14 @@ function Alert(props) {
       row = table.getRow(pendingChangeWithError.rowId).original;
     } catch {
     }
+    let label = "";
+    if (rowIdentityColumn) {
+      label = String(row?.[rowIdentityColumn.id] ?? "");
+    } else if (pendingChangeWithError.index !== void 0) {
+      label = String(pendingChangeWithError.index + 1);
+    }
     links.push(
-      /* @__PURE__ */ React.createElement(Tooltip.Tooltip, { key: pendingChangeWithError.rowId, title: tooltip }, /* @__PURE__ */ React.createElement("span", { className: "text-blue", onClick: handleClick, role: "button" }, rowIdentityColumn ? row?.[rowIdentityColumn.id] : pendingChangeWithError.index + 1))
+      /* @__PURE__ */ React.createElement(Tooltip.Tooltip, { key: pendingChangeWithError.rowId, title: tooltip ?? "" }, /* @__PURE__ */ React.createElement("span", { className: "text-blue", onClick: handleClick, role: "button" }, label))
     );
     if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
       links.push(", ");
@@ -112,7 +118,7 @@ function Alert(props) {
 function FilterResetDialog(props) {
   const { onSubmit: handleSubmit, ...dialogProps } = props;
   const { texts } = Localization.useLocalization();
-  return /* @__PURE__ */ React.createElement(Dialog.Dialog, { ...dialogProps, size: "xs" }, /* @__PURE__ */ React.createElement(Dialog.Dialog.Content, { "aria-label": texts.table3.editing.validation.resetFiltersDialog.title }, /* @__PURE__ */ React.createElement(Dialog.Dialog.Title, null, texts.table3.editing.validation.resetFiltersDialog.title), /* @__PURE__ */ React.createElement("p", null, texts.table3.editing.validation.resetFiltersDialog.description), /* @__PURE__ */ React.createElement(Dialog.Dialog.Footer, null, /* @__PURE__ */ React.createElement(Inline.Inline, { spacing: 8, alignInline: "end" }, /* @__PURE__ */ React.createElement(Dialog.Dialog.Close, null, /* @__PURE__ */ React.createElement(Button.LegacyButton, null, texts.table3.editing.validation.resetFiltersDialog.cancel)), /* @__PURE__ */ React.createElement(Button.LegacyButton, { appearance: "primary", onClick: handleSubmit }, texts.table3.editing.validation.resetFiltersDialog.confirm)))));
+  return /* @__PURE__ */ React.createElement(Dialog.Dialog, { ...dialogProps, size: "xs" }, /* @__PURE__ */ React.createElement(Dialog.Dialog.Content, { "aria-label": texts.table3.editing.validation.resetFiltersDialog.title }, /* @__PURE__ */ React.createElement(Dialog.Dialog.Title, null, texts.table3.editing.validation.resetFiltersDialog.title), /* @__PURE__ */ React.createElement("p", null, texts.table3.editing.validation.resetFiltersDialog.description), /* @__PURE__ */ React.createElement(Dialog.Dialog.Footer, null, /* @__PURE__ */ React.createElement(Inline.Inline, { spacing: 8, alignInline: "end" }, /* @__PURE__ */ React.createElement(Dialog.Dialog.Close, null, /* @__PURE__ */ React.createElement(Button.Button, null, texts.table3.editing.validation.resetFiltersDialog.cancel)), /* @__PURE__ */ React.createElement(Button.Button, { variant: "primary", onClick: handleSubmit }, texts.table3.editing.validation.resetFiltersDialog.confirm)))));
 }
 exports.Alert = Alert;
 //# sourceMappingURL=Alert.cjs.map

package/dist/components/Table3/components/Editing/Alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport type { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport React from 'react';\n\nimport type { TableRef } from '../../../../primitives/Table/types';\nimport type { AlertProps as BaseAlertProps } from '../../../Alert/Alert';\nimport { Alert as BaseAlert } from '../../../Alert/Alert';\nimport type { DialogProps } from '../../../Dialog/Dialog';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Inline } from '../../../Inline/Inline';\nimport { LegacyButton } from '../../../LegacyComponents/Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\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    // row to scroll to and focus once the filters have been reset and it becomes visible again\n    const [pendingFocusRowId, setPendingFocusRowId] = React.useState<string | null>(null);\n    const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n    const visibleRows = table.getRowModel().rows;\n\n    function getVisibleRowIndex(rowId: string) {\n        return visibleRows.findIndex(row => row.id === rowId);\n    }\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 visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n    const rowIdentityColumn =\n        tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n            ? // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n              table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n            : undefined;\n\n    pendingChangesWithErrors.forEach((pendingChangeWithError, 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\n        const handleClick = () => {\n            const visibleIndex = getVisibleRowIndex(pendingChangeWithError.rowId);\n\n            if (visibleIndex > -1) {\n                scrollToRow(visibleIndex);\n            } else {\n                setShowFilterResetDialog(pendingChangeWithError.rowId);\n            }\n        };\n\n        let tooltip;\n\n        if (pendingChangeWithError.errors.row) {\n            tooltip = pendingChangeWithError.errors.row;\n        } else {\n            const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n            const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n\n            if (columnName && firstCellErrorColumnId) {\n                tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n            }\n        }\n\n        let row;\n        try {\n            row = table.getRow(pendingChangeWithError.rowId).original;\n        } catch {\n            // because of server loading, some rows may not be accessible\n        }\n\n        links.push(\n            <Tooltip key={pendingChangeWithError.rowId} title={tooltip}>\n                <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n                    {rowIdentityColumn ? row?.[rowIdentityColumn.id as keyof TType] : pendingChangeWithError.index + 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        const rowId = showFilterResetDialog;\n\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n\n        // defer focusing until the row model has re-rendered with the filters cleared,\n        // otherwise the row isn't in the model/DOM yet\n        if (typeof rowId === 'string') {\n            setPendingFocusRowId(rowId);\n        }\n\n        setShowFilterResetDialog(false);\n    };\n\n    // once the filters are reset and the previously hidden row is visible again, scroll to and focus it\n    React.useEffect(() => {\n        if (pendingFocusRowId === null) {\n            return;\n        }\n\n        const visibleIndex = getVisibleRowIndex(pendingFocusRowId);\n\n        if (visibleIndex > -1) {\n            scrollToRow(visibleIndex);\n            setPendingFocusRowId(null);\n        }\n    }, [pendingFocusRowId, visibleRows]);\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={texts.table3.editing.validation.resetFiltersDialog.title}>\n                <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n                <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n                <Dialog.Footer>\n                    <Inline spacing={8} alignInline=\"end\">\n                        <Dialog.Close>\n                            <LegacyButton>{texts.table3.editing.validation.resetFiltersDialog.cancel}</LegacyButton>\n                        </Dialog.Close>\n                        <LegacyButton appearance=\"primary\" onClick={handleSubmit}>\n                            {texts.table3.editing.validation.resetFiltersDialog.confirm}\n                        </LegacyButton>\n                    </Inline>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["useLocalization","Tooltip","BaseAlert","Dialog","Inline","LegacyButton"],"mappings":"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"}
+{"version":3,"file":"Alert.cjs","sources":["../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport type { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport React from 'react';\n\nimport type { TableRef } from '../../../../primitives/Table/types';\nimport { Button } from '../../../Actions/Button/Button';\nimport type { AlertProps as BaseAlertProps } from '../../../Alert/Alert';\nimport { Alert as BaseAlert } from '../../../Alert/Alert';\nimport type { DialogProps } from '../../../Dialog/Dialog';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Inline } from '../../../Inline/Inline';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\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    // row to scroll to and focus once the filters have been reset and it becomes visible again\n    const [pendingFocusRowId, setPendingFocusRowId] = React.useState<string | null>(null);\n    const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n    const visibleRows = table.getRowModel().rows;\n\n    function getVisibleRowIndex(rowId: string) {\n        return visibleRows.findIndex(row => row.id === rowId);\n    }\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 visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n    const rowIdentityColumn =\n        tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n            ? // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n              table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n            : undefined;\n\n    pendingChangesWithErrors.forEach((pendingChangeWithError, 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\n        const handleClick = () => {\n            const visibleIndex = getVisibleRowIndex(pendingChangeWithError.rowId);\n\n            if (visibleIndex > -1) {\n                scrollToRow(visibleIndex);\n            } else {\n                setShowFilterResetDialog(pendingChangeWithError.rowId);\n            }\n        };\n\n        let tooltip;\n\n        if (pendingChangeWithError.errors.row) {\n            tooltip = pendingChangeWithError.errors.row;\n        } else {\n            const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n            const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n\n            if (columnName && firstCellErrorColumnId) {\n                tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n            }\n        }\n\n        let row;\n        try {\n            row = table.getRow(pendingChangeWithError.rowId).original;\n        } catch {\n            // because of server loading, some rows may not be accessible\n        }\n\n        // the row identity when there is one, otherwise the 1-based position, which server loading can leave unknown\n        let label = '';\n\n        if (rowIdentityColumn) {\n            label = String(row?.[rowIdentityColumn.id as keyof TType] ?? '');\n        } else if (pendingChangeWithError.index !== undefined) {\n            label = String(pendingChangeWithError.index + 1);\n        }\n\n        links.push(\n            <Tooltip key={pendingChangeWithError.rowId} title={tooltip ?? ''}>\n                <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n                    {label}\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        const rowId = showFilterResetDialog;\n\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n\n        // defer focusing until the row model has re-rendered with the filters cleared,\n        // otherwise the row isn't in the model/DOM yet\n        if (typeof rowId === 'string') {\n            setPendingFocusRowId(rowId);\n        }\n\n        setShowFilterResetDialog(false);\n    };\n\n    // once the filters are reset and the previously hidden row is visible again, scroll to and focus it\n    React.useEffect(() => {\n        if (pendingFocusRowId === null) {\n            return;\n        }\n\n        const visibleIndex = getVisibleRowIndex(pendingFocusRowId);\n\n        if (visibleIndex > -1) {\n            scrollToRow(visibleIndex);\n            setPendingFocusRowId(null);\n        }\n    }, [pendingFocusRowId, visibleRows]);\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={texts.table3.editing.validation.resetFiltersDialog.title}>\n                <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n                <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n                <Dialog.Footer>\n                    <Inline spacing={8} alignInline=\"end\">\n                        <Dialog.Close>\n                            <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button variant=\"primary\" onClick={handleSubmit}>\n                            {texts.table3.editing.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Inline>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["useLocalization","Tooltip","BaseAlert","Dialog","Inline","Button"],"mappings":"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"}

package/dist/components/Table3/components/Editing/Alert.js

@@ -1,8 +1,8 @@
 import React__default from "react";
+import { Button } from "../../../Actions/Button/Button.js";
 import { Alert as Alert$1 } from "../../../Alert/Alert.js";
 import { Dialog } from "../../../Dialog/Dialog.js";
 import { Inline } from "../../../Inline/Inline.js";
-import { LegacyButton } from "../../../LegacyComponents/Button/Button.js";
 import { useLocalization } from "../../../Provider/Localization.js";
 import { Tooltip } from "../../../Tooltip/Tooltip.js";
 function Alert(props) {
@@ -63,8 +63,14 @@ function Alert(props) {
       row = table.getRow(pendingChangeWithError.rowId).original;
     } catch {
     }
+    let label = "";
+    if (rowIdentityColumn) {
+      label = String(row?.[rowIdentityColumn.id] ?? "");
+    } else if (pendingChangeWithError.index !== void 0) {
+      label = String(pendingChangeWithError.index + 1);
+    }
     links.push(
-      /* @__PURE__ */ React__default.createElement(Tooltip, { key: pendingChangeWithError.rowId, title: tooltip }, /* @__PURE__ */ React__default.createElement("span", { className: "text-blue", onClick: handleClick, role: "button" }, rowIdentityColumn ? row?.[rowIdentityColumn.id] : pendingChangeWithError.index + 1))
+      /* @__PURE__ */ React__default.createElement(Tooltip, { key: pendingChangeWithError.rowId, title: tooltip ?? "" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-blue", onClick: handleClick, role: "button" }, label))
     );
     if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
       links.push(", ");
@@ -110,7 +116,7 @@ function Alert(props) {
 function FilterResetDialog(props) {
   const { onSubmit: handleSubmit, ...dialogProps } = props;
   const { texts } = useLocalization();
-  return /* @__PURE__ */ React__default.createElement(Dialog, { ...dialogProps, size: "xs" }, /* @__PURE__ */ React__default.createElement(Dialog.Content, { "aria-label": texts.table3.editing.validation.resetFiltersDialog.title }, /* @__PURE__ */ React__default.createElement(Dialog.Title, null, texts.table3.editing.validation.resetFiltersDialog.title), /* @__PURE__ */ React__default.createElement("p", null, texts.table3.editing.validation.resetFiltersDialog.description), /* @__PURE__ */ React__default.createElement(Dialog.Footer, null, /* @__PURE__ */ React__default.createElement(Inline, { spacing: 8, alignInline: "end" }, /* @__PURE__ */ React__default.createElement(Dialog.Close, null, /* @__PURE__ */ React__default.createElement(LegacyButton, null, texts.table3.editing.validation.resetFiltersDialog.cancel)), /* @__PURE__ */ React__default.createElement(LegacyButton, { appearance: "primary", onClick: handleSubmit }, texts.table3.editing.validation.resetFiltersDialog.confirm)))));
+  return /* @__PURE__ */ React__default.createElement(Dialog, { ...dialogProps, size: "xs" }, /* @__PURE__ */ React__default.createElement(Dialog.Content, { "aria-label": texts.table3.editing.validation.resetFiltersDialog.title }, /* @__PURE__ */ React__default.createElement(Dialog.Title, null, texts.table3.editing.validation.resetFiltersDialog.title), /* @__PURE__ */ React__default.createElement("p", null, texts.table3.editing.validation.resetFiltersDialog.description), /* @__PURE__ */ React__default.createElement(Dialog.Footer, null, /* @__PURE__ */ React__default.createElement(Inline, { spacing: 8, alignInline: "end" }, /* @__PURE__ */ React__default.createElement(Dialog.Close, null, /* @__PURE__ */ React__default.createElement(Button, null, texts.table3.editing.validation.resetFiltersDialog.cancel)), /* @__PURE__ */ React__default.createElement(Button, { variant: "primary", onClick: handleSubmit }, texts.table3.editing.validation.resetFiltersDialog.confirm)))));
 }
 export {
   Alert

package/dist/components/Table3/components/Editing/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport type { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport React from 'react';\n\nimport type { TableRef } from '../../../../primitives/Table/types';\nimport type { AlertProps as BaseAlertProps } from '../../../Alert/Alert';\nimport { Alert as BaseAlert } from '../../../Alert/Alert';\nimport type { DialogProps } from '../../../Dialog/Dialog';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Inline } from '../../../Inline/Inline';\nimport { LegacyButton } from '../../../LegacyComponents/Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\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    // row to scroll to and focus once the filters have been reset and it becomes visible again\n    const [pendingFocusRowId, setPendingFocusRowId] = React.useState<string | null>(null);\n    const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n    const visibleRows = table.getRowModel().rows;\n\n    function getVisibleRowIndex(rowId: string) {\n        return visibleRows.findIndex(row => row.id === rowId);\n    }\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 visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n    const rowIdentityColumn =\n        tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n            ? // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n              table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n            : undefined;\n\n    pendingChangesWithErrors.forEach((pendingChangeWithError, 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\n        const handleClick = () => {\n            const visibleIndex = getVisibleRowIndex(pendingChangeWithError.rowId);\n\n            if (visibleIndex > -1) {\n                scrollToRow(visibleIndex);\n            } else {\n                setShowFilterResetDialog(pendingChangeWithError.rowId);\n            }\n        };\n\n        let tooltip;\n\n        if (pendingChangeWithError.errors.row) {\n            tooltip = pendingChangeWithError.errors.row;\n        } else {\n            const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n            const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n\n            if (columnName && firstCellErrorColumnId) {\n                tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n            }\n        }\n\n        let row;\n        try {\n            row = table.getRow(pendingChangeWithError.rowId).original;\n        } catch {\n            // because of server loading, some rows may not be accessible\n        }\n\n        links.push(\n            <Tooltip key={pendingChangeWithError.rowId} title={tooltip}>\n                <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n                    {rowIdentityColumn ? row?.[rowIdentityColumn.id as keyof TType] : pendingChangeWithError.index + 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        const rowId = showFilterResetDialog;\n\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n\n        // defer focusing until the row model has re-rendered with the filters cleared,\n        // otherwise the row isn't in the model/DOM yet\n        if (typeof rowId === 'string') {\n            setPendingFocusRowId(rowId);\n        }\n\n        setShowFilterResetDialog(false);\n    };\n\n    // once the filters are reset and the previously hidden row is visible again, scroll to and focus it\n    React.useEffect(() => {\n        if (pendingFocusRowId === null) {\n            return;\n        }\n\n        const visibleIndex = getVisibleRowIndex(pendingFocusRowId);\n\n        if (visibleIndex > -1) {\n            scrollToRow(visibleIndex);\n            setPendingFocusRowId(null);\n        }\n    }, [pendingFocusRowId, visibleRows]);\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={texts.table3.editing.validation.resetFiltersDialog.title}>\n                <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n                <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n                <Dialog.Footer>\n                    <Inline spacing={8} alignInline=\"end\">\n                        <Dialog.Close>\n                            <LegacyButton>{texts.table3.editing.validation.resetFiltersDialog.cancel}</LegacyButton>\n                        </Dialog.Close>\n                        <LegacyButton appearance=\"primary\" onClick={handleSubmit}>\n                            {texts.table3.editing.validation.resetFiltersDialog.confirm}\n                        </LegacyButton>\n                    </Inline>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["React","BaseAlert"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport type { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport React from 'react';\n\nimport type { TableRef } from '../../../../primitives/Table/types';\nimport { Button } from '../../../Actions/Button/Button';\nimport type { AlertProps as BaseAlertProps } from '../../../Alert/Alert';\nimport { Alert as BaseAlert } from '../../../Alert/Alert';\nimport type { DialogProps } from '../../../Dialog/Dialog';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Inline } from '../../../Inline/Inline';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\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    // row to scroll to and focus once the filters have been reset and it becomes visible again\n    const [pendingFocusRowId, setPendingFocusRowId] = React.useState<string | null>(null);\n    const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n    const visibleRows = table.getRowModel().rows;\n\n    function getVisibleRowIndex(rowId: string) {\n        return visibleRows.findIndex(row => row.id === rowId);\n    }\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 visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n    const rowIdentityColumn =\n        tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n            ? // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n              table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n            : undefined;\n\n    pendingChangesWithErrors.forEach((pendingChangeWithError, 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\n        const handleClick = () => {\n            const visibleIndex = getVisibleRowIndex(pendingChangeWithError.rowId);\n\n            if (visibleIndex > -1) {\n                scrollToRow(visibleIndex);\n            } else {\n                setShowFilterResetDialog(pendingChangeWithError.rowId);\n            }\n        };\n\n        let tooltip;\n\n        if (pendingChangeWithError.errors.row) {\n            tooltip = pendingChangeWithError.errors.row;\n        } else {\n            const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n            const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n\n            if (columnName && firstCellErrorColumnId) {\n                tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n            }\n        }\n\n        let row;\n        try {\n            row = table.getRow(pendingChangeWithError.rowId).original;\n        } catch {\n            // because of server loading, some rows may not be accessible\n        }\n\n        // the row identity when there is one, otherwise the 1-based position, which server loading can leave unknown\n        let label = '';\n\n        if (rowIdentityColumn) {\n            label = String(row?.[rowIdentityColumn.id as keyof TType] ?? '');\n        } else if (pendingChangeWithError.index !== undefined) {\n            label = String(pendingChangeWithError.index + 1);\n        }\n\n        links.push(\n            <Tooltip key={pendingChangeWithError.rowId} title={tooltip ?? ''}>\n                <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n                    {label}\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        const rowId = showFilterResetDialog;\n\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n\n        // defer focusing until the row model has re-rendered with the filters cleared,\n        // otherwise the row isn't in the model/DOM yet\n        if (typeof rowId === 'string') {\n            setPendingFocusRowId(rowId);\n        }\n\n        setShowFilterResetDialog(false);\n    };\n\n    // once the filters are reset and the previously hidden row is visible again, scroll to and focus it\n    React.useEffect(() => {\n        if (pendingFocusRowId === null) {\n            return;\n        }\n\n        const visibleIndex = getVisibleRowIndex(pendingFocusRowId);\n\n        if (visibleIndex > -1) {\n            scrollToRow(visibleIndex);\n            setPendingFocusRowId(null);\n        }\n    }, [pendingFocusRowId, visibleRows]);\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={texts.table3.editing.validation.resetFiltersDialog.title}>\n                <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n                <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n                <Dialog.Footer>\n                    <Inline spacing={8} alignInline=\"end\">\n                        <Dialog.Close>\n                            <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button variant=\"primary\" onClick={handleSubmit}>\n                            {texts.table3.editing.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Inline>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["React","BaseAlert"],"mappings":"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"}

package/dist/components/Table3/components/Row/Editing/TemporaryRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TemporaryRow.cjs","sources":["../../../../../../src/components/Table3/components/Row/Editing/TemporaryRow.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { Row } from '../../../../../primitives/Table/Core/components/Row/Row';\nimport type { TableRef } from '../../../../../primitives/Table/types';\nimport { isAriaDirectionKey } from '../../../../../utils/aria';\nimport { isElementTriggeredFromContainer, isElementInsideExternalRelatedOverlay } from '../../../../../utils/dom';\nimport { RENDERERS } from '../../../useTable3';\n\ntype TemporaryRowsProps<TType = unknown> = {\n    createRowButtonRef: React.RefObject<HTMLButtonElement>;\n    hasScrollbar: boolean;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function TemporaryRows<TType = unknown>(props: TemporaryRowsProps<TType>) {\n    return props.table.getBottomRows().map(row => <TemporaryRow<TType> key={row.id} row={row} {...props} />);\n}\n\ntype TemporaryRowProps<TType = unknown> = {\n    createRowButtonRef: React.RefObject<HTMLButtonElement>;\n    hasScrollbar: boolean;\n    row: ReactTableRow<TType>;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nfunction TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>) {\n    const { createRowButtonRef, hasScrollbar, row, table, tableMeta, tableRef } = props;\n\n    const handleKeyDown = async (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n        const target = event.target as Element;\n\n        // Skip handling if the event is from a related dropdown (overlay, e.q. Select2 options dropdown) outside the row\n        if (isAriaDirectionKey(event) && isElementInsideExternalRelatedOverlay(target, tableRef)) {\n            return;\n        }\n\n        if (event.key === 'ArrowDown') {\n            event.preventDefault();\n\n            if (!isElementTriggeredFromContainer(target, event.currentTarget)) {\n                const saved = await tableMeta.editing.saveChanges(table);\n\n                if (saved) {\n                    requestAnimationFrame(() => {\n                        createRowButtonRef.current?.focus();\n                    });\n                }\n            }\n        } else if (event.key === 'ArrowUp') {\n            event.preventDefault();\n            event.stopPropagation();\n\n            // save or discard changes when we leave the row\n            await tableMeta.editing.saveChanges(table);\n\n            const lastIndex = tableMeta.length - 1;\n            tableMeta.rowActive.setRowActiveIndex(lastIndex);\n\n            if (tableRef.current) {\n                // scroll to the bottom\n                tableRef.current.scrollTop = tableRef.current.scrollHeight;\n\n                // there's a delay in calculating row heights, so the scrollTop isn't always correct first time - recalculate it\n                requestAnimationFrame(() => {\n                    if (tableRef.current) {\n                        tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                    }\n                });\n            }\n        }\n    };\n\n    const className = cn('group/row !sticky z-[22] border-t-2 border-gray-100 print:hidden', {\n        'bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]': tableMeta.footer.isEnabled,\n        'bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]': !tableMeta.footer.isEnabled,\n        '!border-t border-b': !hasScrollbar,\n    });\n\n    return (\n        <Row<TType>\n            key={row.id}\n            cellRenderer={RENDERERS.cell}\n            index={tableMeta.length}\n            measureRow={() => null}\n            renderer={RENDERERS.row}\n            row={row}\n            table={table}\n            className={className}\n            onKeyDown={handleKeyDown}\n            hideInternalColumns\n            hideRowActions={!tableMeta.editing.isEditing}\n        />\n    );\n}\n"],"names":["isAriaDirectionKey","isElementInsideExternalRelatedOverlay","isElementTriggeredFromContainer","Row","RENDERERS"],"mappings":";;;;;;;;AAkBO,SAAS,cAA+B,OAAkC;AAC7E,SAAO,MAAM,MAAM,cAAA,EAAgB,IAAI,CAAA,QAAO,sBAAA,cAAC,cAAA,EAAoB,KAAK,IAAI,IAAI,KAAW,GAAG,OAAO,CAAE;AAC3G;AAWA,SAAS,aAA8B,OAAiC;AACpE,QAAM,EAAE,oBAAoB,cAAc,KAAK,OAAO,WAAW,aAAa;AAE9E,QAAM,gBAAgB,OAAO,UAAoD;AAC7E,UAAM,SAAS,MAAM;AAGrB,QAAIA,KAAAA,mBAAmB,KAAK,KAAKC,IAAAA,sCAAsC,QAAQ,QAAQ,GAAG;AACtF;AAAA,IACJ;AAEA,QAAI,MAAM,QAAQ,aAAa;AAC3B,YAAM,eAAA;AAEN,UAAI,CAACC,IAAAA,gCAAgC,QAAQ,MAAM,aAAa,GAAG;AAC/D,cAAM,QAAQ,MAAM,UAAU,QAAQ,YAAY,KAAK;AAEvD,YAAI,OAAO;AACP,gCAAsB,MAAM;AACxB,+BAAmB,SAAS,MAAA;AAAA,UAChC,CAAC;AAAA,QACL;AAAA,MACJ;AAAA,IACJ,WAAW,MAAM,QAAQ,WAAW;AAChC,YAAM,eAAA;AACN,YAAM,gBAAA;AAGN,YAAM,UAAU,QAAQ,YAAY,KAAK;AAEzC,YAAM,YAAY,UAAU,SAAS;AACrC,gBAAU,UAAU,kBAAkB,SAAS;AAE/C,UAAI,SAAS,SAAS;AAElB,iBAAS,QAAQ,YAAY,SAAS,QAAQ;AAG9C,8BAAsB,MAAM;AACxB,cAAI,SAAS,SAAS;AAClB,qBAAS,QAAQ,YAAY,SAAS,QAAQ;AAAA,UAClD;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,oEAAoE;AAAA,IACrF,+EAA+E,UAAU,OAAO;AAAA,IAChG,mFAAmF,CAAC,UAAU,OAAO;AAAA,IACrG,sBAAsB,CAAC;AAAA,EAAA,CAC1B;AAED,SACI,sBAAA;AAAA,IAACC,IAAAA;AAAAA,IAAA;AAAA,MACG,KAAK,IAAI;AAAA,MACT,cAAcC,UAAAA,UAAU;AAAA,MACxB,OAAO,UAAU;AAAA,MACjB,YAAY,MAAM;AAAA,MAClB,UAAUA,UAAAA,UAAU;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,qBAAmB;AAAA,MACnB,gBAAgB,CAAC,UAAU,QAAQ;AAAA,IAAA;AAAA,EAAA;AAG/C;;"}
+{"version":3,"file":"TemporaryRow.cjs","sources":["../../../../../../src/components/Table3/components/Row/Editing/TemporaryRow.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { Row } from '../../../../../primitives/Table/Core/components/Row/Row';\nimport type { TableRef } from '../../../../../primitives/Table/types';\nimport { isAriaDirectionKey } from '../../../../../utils/aria';\nimport { isElementTriggeredFromContainer, isElementInsideExternalRelatedOverlay } from '../../../../../utils/dom';\nimport { RENDERERS } from '../../../useTable3';\n\ntype TemporaryRowsProps<TType = unknown> = {\n    createRowButtonRef: React.RefObject<HTMLButtonElement | null>;\n    hasScrollbar: boolean;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function TemporaryRows<TType = unknown>(props: TemporaryRowsProps<TType>) {\n    return props.table.getBottomRows().map(row => <TemporaryRow<TType> key={row.id} row={row} {...props} />);\n}\n\ntype TemporaryRowProps<TType = unknown> = {\n    createRowButtonRef: React.RefObject<HTMLButtonElement | null>;\n    hasScrollbar: boolean;\n    row: ReactTableRow<TType>;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nfunction TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>) {\n    const { createRowButtonRef, hasScrollbar, row, table, tableMeta, tableRef } = props;\n\n    const handleKeyDown = async (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n        const target = event.target as Element;\n\n        // Skip handling if the event is from a related dropdown (overlay, e.q. Select2 options dropdown) outside the row\n        if (isAriaDirectionKey(event) && isElementInsideExternalRelatedOverlay(target, tableRef)) {\n            return;\n        }\n\n        if (event.key === 'ArrowDown') {\n            event.preventDefault();\n\n            if (!isElementTriggeredFromContainer(target, event.currentTarget)) {\n                const saved = await tableMeta.editing.saveChanges(table);\n\n                if (saved) {\n                    requestAnimationFrame(() => {\n                        createRowButtonRef.current?.focus();\n                    });\n                }\n            }\n        } else if (event.key === 'ArrowUp') {\n            event.preventDefault();\n            event.stopPropagation();\n\n            // save or discard changes when we leave the row\n            await tableMeta.editing.saveChanges(table);\n\n            const lastIndex = tableMeta.length - 1;\n            tableMeta.rowActive.setRowActiveIndex(lastIndex);\n\n            if (tableRef.current) {\n                // scroll to the bottom\n                tableRef.current.scrollTop = tableRef.current.scrollHeight;\n\n                // there's a delay in calculating row heights, so the scrollTop isn't always correct first time - recalculate it\n                requestAnimationFrame(() => {\n                    if (tableRef.current) {\n                        tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                    }\n                });\n            }\n        }\n    };\n\n    const className = cn('group/row !sticky z-[22] border-t-2 border-gray-100 print:hidden', {\n        'bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]': tableMeta.footer.isEnabled,\n        'bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]': !tableMeta.footer.isEnabled,\n        '!border-t border-b': !hasScrollbar,\n    });\n\n    return (\n        <Row<TType>\n            key={row.id}\n            cellRenderer={RENDERERS.cell}\n            index={tableMeta.length}\n            measureRow={() => null}\n            renderer={RENDERERS.row}\n            row={row}\n            table={table}\n            className={className}\n            onKeyDown={handleKeyDown}\n            hideInternalColumns\n            hideRowActions={!tableMeta.editing.isEditing}\n        />\n    );\n}\n"],"names":["isAriaDirectionKey","isElementInsideExternalRelatedOverlay","isElementTriggeredFromContainer","Row","RENDERERS"],"mappings":";;;;;;;;AAkBO,SAAS,cAA+B,OAAkC;AAC7E,SAAO,MAAM,MAAM,cAAA,EAAgB,IAAI,CAAA,QAAO,sBAAA,cAAC,cAAA,EAAoB,KAAK,IAAI,IAAI,KAAW,GAAG,OAAO,CAAE;AAC3G;AAWA,SAAS,aAA8B,OAAiC;AACpE,QAAM,EAAE,oBAAoB,cAAc,KAAK,OAAO,WAAW,aAAa;AAE9E,QAAM,gBAAgB,OAAO,UAAoD;AAC7E,UAAM,SAAS,MAAM;AAGrB,QAAIA,KAAAA,mBAAmB,KAAK,KAAKC,IAAAA,sCAAsC,QAAQ,QAAQ,GAAG;AACtF;AAAA,IACJ;AAEA,QAAI,MAAM,QAAQ,aAAa;AAC3B,YAAM,eAAA;AAEN,UAAI,CAACC,IAAAA,gCAAgC,QAAQ,MAAM,aAAa,GAAG;AAC/D,cAAM,QAAQ,MAAM,UAAU,QAAQ,YAAY,KAAK;AAEvD,YAAI,OAAO;AACP,gCAAsB,MAAM;AACxB,+BAAmB,SAAS,MAAA;AAAA,UAChC,CAAC;AAAA,QACL;AAAA,MACJ;AAAA,IACJ,WAAW,MAAM,QAAQ,WAAW;AAChC,YAAM,eAAA;AACN,YAAM,gBAAA;AAGN,YAAM,UAAU,QAAQ,YAAY,KAAK;AAEzC,YAAM,YAAY,UAAU,SAAS;AACrC,gBAAU,UAAU,kBAAkB,SAAS;AAE/C,UAAI,SAAS,SAAS;AAElB,iBAAS,QAAQ,YAAY,SAAS,QAAQ;AAG9C,8BAAsB,MAAM;AACxB,cAAI,SAAS,SAAS;AAClB,qBAAS,QAAQ,YAAY,SAAS,QAAQ;AAAA,UAClD;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,oEAAoE;AAAA,IACrF,+EAA+E,UAAU,OAAO;AAAA,IAChG,mFAAmF,CAAC,UAAU,OAAO;AAAA,IACrG,sBAAsB,CAAC;AAAA,EAAA,CAC1B;AAED,SACI,sBAAA;AAAA,IAACC,IAAAA;AAAAA,IAAA;AAAA,MACG,KAAK,IAAI;AAAA,MACT,cAAcC,UAAAA,UAAU;AAAA,MACxB,OAAO,UAAU;AAAA,MACjB,YAAY,MAAM;AAAA,MAClB,UAAUA,UAAAA,UAAU;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,qBAAmB;AAAA,MACnB,gBAAgB,CAAC,UAAU,QAAQ;AAAA,IAAA;AAAA,EAAA;AAG/C;;"}

package/dist/components/Table3/components/Row/Editing/TemporaryRow.d.ts

@@ -2,7 +2,7 @@ import { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/reac
 import { default as React } from 'react';
 import { TableRef } from '../../../../../primitives/Table/types';
 type TemporaryRowsProps<TType = unknown> = {
-    createRowButtonRef: React.RefObject<HTMLButtonElement>;
+    createRowButtonRef: React.RefObject<HTMLButtonElement | null>;
     hasScrollbar: boolean;
     table: ReactTable<TType>;
     tableMeta: ReactTableMeta<TType>;

package/dist/components/Table3/components/Row/Editing/TemporaryRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemporaryRow.js","sources":["../../../../../../src/components/Table3/components/Row/Editing/TemporaryRow.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { Row } from '../../../../../primitives/Table/Core/components/Row/Row';\nimport type { TableRef } from '../../../../../primitives/Table/types';\nimport { isAriaDirectionKey } from '../../../../../utils/aria';\nimport { isElementTriggeredFromContainer, isElementInsideExternalRelatedOverlay } from '../../../../../utils/dom';\nimport { RENDERERS } from '../../../useTable3';\n\ntype TemporaryRowsProps<TType = unknown> = {\n    createRowButtonRef: React.RefObject<HTMLButtonElement>;\n    hasScrollbar: boolean;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function TemporaryRows<TType = unknown>(props: TemporaryRowsProps<TType>) {\n    return props.table.getBottomRows().map(row => <TemporaryRow<TType> key={row.id} row={row} {...props} />);\n}\n\ntype TemporaryRowProps<TType = unknown> = {\n    createRowButtonRef: React.RefObject<HTMLButtonElement>;\n    hasScrollbar: boolean;\n    row: ReactTableRow<TType>;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nfunction TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>) {\n    const { createRowButtonRef, hasScrollbar, row, table, tableMeta, tableRef } = props;\n\n    const handleKeyDown = async (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n        const target = event.target as Element;\n\n        // Skip handling if the event is from a related dropdown (overlay, e.q. Select2 options dropdown) outside the row\n        if (isAriaDirectionKey(event) && isElementInsideExternalRelatedOverlay(target, tableRef)) {\n            return;\n        }\n\n        if (event.key === 'ArrowDown') {\n            event.preventDefault();\n\n            if (!isElementTriggeredFromContainer(target, event.currentTarget)) {\n                const saved = await tableMeta.editing.saveChanges(table);\n\n                if (saved) {\n                    requestAnimationFrame(() => {\n                        createRowButtonRef.current?.focus();\n                    });\n                }\n            }\n        } else if (event.key === 'ArrowUp') {\n            event.preventDefault();\n            event.stopPropagation();\n\n            // save or discard changes when we leave the row\n            await tableMeta.editing.saveChanges(table);\n\n            const lastIndex = tableMeta.length - 1;\n            tableMeta.rowActive.setRowActiveIndex(lastIndex);\n\n            if (tableRef.current) {\n                // scroll to the bottom\n                tableRef.current.scrollTop = tableRef.current.scrollHeight;\n\n                // there's a delay in calculating row heights, so the scrollTop isn't always correct first time - recalculate it\n                requestAnimationFrame(() => {\n                    if (tableRef.current) {\n                        tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                    }\n                });\n            }\n        }\n    };\n\n    const className = cn('group/row !sticky z-[22] border-t-2 border-gray-100 print:hidden', {\n        'bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]': tableMeta.footer.isEnabled,\n        'bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]': !tableMeta.footer.isEnabled,\n        '!border-t border-b': !hasScrollbar,\n    });\n\n    return (\n        <Row<TType>\n            key={row.id}\n            cellRenderer={RENDERERS.cell}\n            index={tableMeta.length}\n            measureRow={() => null}\n            renderer={RENDERERS.row}\n            row={row}\n            table={table}\n            className={className}\n            onKeyDown={handleKeyDown}\n            hideInternalColumns\n            hideRowActions={!tableMeta.editing.isEditing}\n        />\n    );\n}\n"],"names":["React"],"mappings":";;;;;;AAkBO,SAAS,cAA+B,OAAkC;AAC7E,SAAO,MAAM,MAAM,cAAA,EAAgB,IAAI,CAAA,QAAOA,+BAAA,cAAC,cAAA,EAAoB,KAAK,IAAI,IAAI,KAAW,GAAG,OAAO,CAAE;AAC3G;AAWA,SAAS,aAA8B,OAAiC;AACpE,QAAM,EAAE,oBAAoB,cAAc,KAAK,OAAO,WAAW,aAAa;AAE9E,QAAM,gBAAgB,OAAO,UAAoD;AAC7E,UAAM,SAAS,MAAM;AAGrB,QAAI,mBAAmB,KAAK,KAAK,sCAAsC,QAAQ,QAAQ,GAAG;AACtF;AAAA,IACJ;AAEA,QAAI,MAAM,QAAQ,aAAa;AAC3B,YAAM,eAAA;AAEN,UAAI,CAAC,gCAAgC,QAAQ,MAAM,aAAa,GAAG;AAC/D,cAAM,QAAQ,MAAM,UAAU,QAAQ,YAAY,KAAK;AAEvD,YAAI,OAAO;AACP,gCAAsB,MAAM;AACxB,+BAAmB,SAAS,MAAA;AAAA,UAChC,CAAC;AAAA,QACL;AAAA,MACJ;AAAA,IACJ,WAAW,MAAM,QAAQ,WAAW;AAChC,YAAM,eAAA;AACN,YAAM,gBAAA;AAGN,YAAM,UAAU,QAAQ,YAAY,KAAK;AAEzC,YAAM,YAAY,UAAU,SAAS;AACrC,gBAAU,UAAU,kBAAkB,SAAS;AAE/C,UAAI,SAAS,SAAS;AAElB,iBAAS,QAAQ,YAAY,SAAS,QAAQ;AAG9C,8BAAsB,MAAM;AACxB,cAAI,SAAS,SAAS;AAClB,qBAAS,QAAQ,YAAY,SAAS,QAAQ;AAAA,UAClD;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,oEAAoE;AAAA,IACrF,+EAA+E,UAAU,OAAO;AAAA,IAChG,mFAAmF,CAAC,UAAU,OAAO;AAAA,IACrG,sBAAsB,CAAC;AAAA,EAAA,CAC1B;AAED,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK,IAAI;AAAA,MACT,cAAc,UAAU;AAAA,MACxB,OAAO,UAAU;AAAA,MACjB,YAAY,MAAM;AAAA,MAClB,UAAU,UAAU;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,qBAAmB;AAAA,MACnB,gBAAgB,CAAC,UAAU,QAAQ;AAAA,IAAA;AAAA,EAAA;AAG/C;"}
+{"version":3,"file":"TemporaryRow.js","sources":["../../../../../../src/components/Table3/components/Row/Editing/TemporaryRow.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { Row } from '../../../../../primitives/Table/Core/components/Row/Row';\nimport type { TableRef } from '../../../../../primitives/Table/types';\nimport { isAriaDirectionKey } from '../../../../../utils/aria';\nimport { isElementTriggeredFromContainer, isElementInsideExternalRelatedOverlay } from '../../../../../utils/dom';\nimport { RENDERERS } from '../../../useTable3';\n\ntype TemporaryRowsProps<TType = unknown> = {\n    createRowButtonRef: React.RefObject<HTMLButtonElement | null>;\n    hasScrollbar: boolean;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function TemporaryRows<TType = unknown>(props: TemporaryRowsProps<TType>) {\n    return props.table.getBottomRows().map(row => <TemporaryRow<TType> key={row.id} row={row} {...props} />);\n}\n\ntype TemporaryRowProps<TType = unknown> = {\n    createRowButtonRef: React.RefObject<HTMLButtonElement | null>;\n    hasScrollbar: boolean;\n    row: ReactTableRow<TType>;\n    table: ReactTable<TType>;\n    tableMeta: ReactTableMeta<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nfunction TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>) {\n    const { createRowButtonRef, hasScrollbar, row, table, tableMeta, tableRef } = props;\n\n    const handleKeyDown = async (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n        const target = event.target as Element;\n\n        // Skip handling if the event is from a related dropdown (overlay, e.q. Select2 options dropdown) outside the row\n        if (isAriaDirectionKey(event) && isElementInsideExternalRelatedOverlay(target, tableRef)) {\n            return;\n        }\n\n        if (event.key === 'ArrowDown') {\n            event.preventDefault();\n\n            if (!isElementTriggeredFromContainer(target, event.currentTarget)) {\n                const saved = await tableMeta.editing.saveChanges(table);\n\n                if (saved) {\n                    requestAnimationFrame(() => {\n                        createRowButtonRef.current?.focus();\n                    });\n                }\n            }\n        } else if (event.key === 'ArrowUp') {\n            event.preventDefault();\n            event.stopPropagation();\n\n            // save or discard changes when we leave the row\n            await tableMeta.editing.saveChanges(table);\n\n            const lastIndex = tableMeta.length - 1;\n            tableMeta.rowActive.setRowActiveIndex(lastIndex);\n\n            if (tableRef.current) {\n                // scroll to the bottom\n                tableRef.current.scrollTop = tableRef.current.scrollHeight;\n\n                // there's a delay in calculating row heights, so the scrollTop isn't always correct first time - recalculate it\n                requestAnimationFrame(() => {\n                    if (tableRef.current) {\n                        tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                    }\n                });\n            }\n        }\n    };\n\n    const className = cn('group/row !sticky z-[22] border-t-2 border-gray-100 print:hidden', {\n        'bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]': tableMeta.footer.isEnabled,\n        'bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]': !tableMeta.footer.isEnabled,\n        '!border-t border-b': !hasScrollbar,\n    });\n\n    return (\n        <Row<TType>\n            key={row.id}\n            cellRenderer={RENDERERS.cell}\n            index={tableMeta.length}\n            measureRow={() => null}\n            renderer={RENDERERS.row}\n            row={row}\n            table={table}\n            className={className}\n            onKeyDown={handleKeyDown}\n            hideInternalColumns\n            hideRowActions={!tableMeta.editing.isEditing}\n        />\n    );\n}\n"],"names":["React"],"mappings":";;;;;;AAkBO,SAAS,cAA+B,OAAkC;AAC7E,SAAO,MAAM,MAAM,cAAA,EAAgB,IAAI,CAAA,QAAOA,+BAAA,cAAC,cAAA,EAAoB,KAAK,IAAI,IAAI,KAAW,GAAG,OAAO,CAAE;AAC3G;AAWA,SAAS,aAA8B,OAAiC;AACpE,QAAM,EAAE,oBAAoB,cAAc,KAAK,OAAO,WAAW,aAAa;AAE9E,QAAM,gBAAgB,OAAO,UAAoD;AAC7E,UAAM,SAAS,MAAM;AAGrB,QAAI,mBAAmB,KAAK,KAAK,sCAAsC,QAAQ,QAAQ,GAAG;AACtF;AAAA,IACJ;AAEA,QAAI,MAAM,QAAQ,aAAa;AAC3B,YAAM,eAAA;AAEN,UAAI,CAAC,gCAAgC,QAAQ,MAAM,aAAa,GAAG;AAC/D,cAAM,QAAQ,MAAM,UAAU,QAAQ,YAAY,KAAK;AAEvD,YAAI,OAAO;AACP,gCAAsB,MAAM;AACxB,+BAAmB,SAAS,MAAA;AAAA,UAChC,CAAC;AAAA,QACL;AAAA,MACJ;AAAA,IACJ,WAAW,MAAM,QAAQ,WAAW;AAChC,YAAM,eAAA;AACN,YAAM,gBAAA;AAGN,YAAM,UAAU,QAAQ,YAAY,KAAK;AAEzC,YAAM,YAAY,UAAU,SAAS;AACrC,gBAAU,UAAU,kBAAkB,SAAS;AAE/C,UAAI,SAAS,SAAS;AAElB,iBAAS,QAAQ,YAAY,SAAS,QAAQ;AAG9C,8BAAsB,MAAM;AACxB,cAAI,SAAS,SAAS;AAClB,qBAAS,QAAQ,YAAY,SAAS,QAAQ;AAAA,UAClD;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,oEAAoE;AAAA,IACrF,+EAA+E,UAAU,OAAO;AAAA,IAChG,mFAAmF,CAAC,UAAU,OAAO;AAAA,IACrG,sBAAsB,CAAC;AAAA,EAAA,CAC1B;AAED,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK,IAAI;AAAA,MACT,cAAc,UAAU;AAAA,MACxB,OAAO,UAAU;AAAA,MACjB,YAAY,MAAM;AAAA,MAClB,UAAU,UAAU;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,qBAAmB;AAAA,MACnB,gBAAgB,CAAC,UAAU,QAAQ;AAAA,IAAA;AAAA,EAAA;AAG/C;"}

package/dist/components/Table3/features/useEditingState.cjs

@@ -357,12 +357,20 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     if (!rowsWithErrors.length) {
       return [];
     }
-    return rowsWithErrors.filter(hasRowErrorsShownInAlert).map((rowId) => ({
-      rowId,
-      index: state.indexes[rowId],
-      changes: state.changes.rows[rowId],
-      errors: state.changes.errors[rowId]
-    }));
+    return rowsWithErrors.filter(hasRowErrorsShownInAlert).flatMap((rowId) => {
+      const errors = state.changes.errors[rowId];
+      if (!errors) {
+        return [];
+      }
+      return [
+        {
+          rowId,
+          index: state.indexes[rowId],
+          changes: state.changes.rows[rowId],
+          errors
+        }
+      ];
+    });
   }
   function hasSaved() {
     return !!Object.values(state.statuses).filter((status) => status === "saved").length;