@economic/taco 2.25.1 → 2.26.0

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

@@ -0,0 +1,216 @@
+import React__default from 'react';
+import { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom.js';
+import { Input } from '../../../../Input/Input.js';
+import { isDate } from 'date-fns';
+import { isWeakEqual } from '../../../../../utils/date.js';
+import { Datepicker } from '../../../../Datepicker/Datepicker.js';
+import { Field } from '../../../../Field/Field.js';
+import { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext.js';
+import { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util.js';
+import { Switch } from '../../../../Switch/Switch.js';
+import { RowMoveIndicator } from './Editing/RowMoveIndicator.js';
+import { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing.js';
+import { useEditingCellAutofocus } from './util.js';
+
+function EditingControlCell(props) {
+  var _columnMeta$control;
+  const {
+    cell,
+    cellRef,
+    isHighlighted,
+    index
+  } = props;
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  const tableMeta = cell.getContext().table.options.meta;
+  const columnMeta = cell.column.columnDef.meta;
+  const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
+  const handleFocus = useEditingCellAutofocus(props);
+  const handleBlur = () => {
+    tableMeta.editing.toggleDetailedMode(false);
+    tableMeta.editing.validateCell(cell);
+  };
+  // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
+  React__default.useEffect(() => {
+    const ref = cellRef.current;
+    return () => {
+      if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {
+        handleBlur();
+      }
+    };
+  }, []);
+  const error = tableMeta.editing.getCellError(cell);
+  const controlProps = {
+    dataType: columnMeta.dataType,
+    fontSize: tableMeta.fontSize.size,
+    id: cell.column.id,
+    invalid: !!error,
+    isDetailedMode: tableMeta.editing.isDetailedMode,
+    isTruncated: !!columnMeta.enableTruncate,
+    onBlur: handleBlur,
+    onChange: value => tableMeta.editing.setCellValue(cell, value, rowIndex),
+    row: cell.row.original,
+    tabIndex: isActiveRow ? 0 : -1,
+    toggleEditing: tableMeta.editing.toggleEditing,
+    toggleDetailedMode: tableMeta.editing.toggleDetailedMode,
+    type: (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input',
+    value: cell.getValue()
+  };
+  const cellAttributes = {
+    ...getCellAttributes(cell, index, isHighlighted),
+    'data-cell-editing-invalid': error ? true : undefined,
+    onFocus: handleFocus,
+    ref: cellRef,
+    tabIndex: -1
+  };
+  return /*#__PURE__*/React__default.createElement("td", Object.assign({}, cellAttributes), /*#__PURE__*/React__default.createElement(Field, {
+    invalid: !!error,
+    message: error
+  }, /*#__PURE__*/React__default.createElement(MemoedEditingCell, Object.assign({}, controlProps))), /*#__PURE__*/React__default.createElement(RowMoveIndicator, {
+    cell: cell,
+    cellRef: cellRef,
+    isActiveRow: isActiveRow
+  }));
+}
+const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
+  const {
+    dataType,
+    fontSize,
+    id,
+    invalid,
+    isDetailedMode,
+    isTruncated,
+    onBlur,
+    onChange,
+    row,
+    tabIndex = -1,
+    toggleEditing,
+    toggleDetailedMode,
+    type = 'input',
+    value
+  } = props;
+  const controlRef = React__default.useRef(null);
+  const currentValue = row[id];
+  const commonProps = {
+    onBlur,
+    ref: controlRef,
+    tabIndex
+  };
+  if (typeof type === 'function') {
+    const controlFnProps = {
+      ...commonProps,
+      invalid,
+      setValue: onChange,
+      value
+    };
+    return type(controlFnProps, row);
+  }
+  if (type === 'switch') {
+    return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, commonProps, {
+      checked: Boolean(value),
+      onChange: onChange,
+      ref: controlRef
+    }));
+  }
+  const handleInputKeyDown = event => {
+    const target = event.target;
+    if (target.readOnly) {
+      return;
+    }
+    // prevent active row navigation while in detailed mode
+    if (isDetailedMode && (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+      event.stopPropagation();
+    }
+    // enter or exit detail mode when pressing enter
+    if (event.key === 'Enter') {
+      // textareas support shift and enter, don't prevent default in that case
+      if (event.shiftKey && isDetailedMode) {
+        return;
+      }
+      event.preventDefault();
+      if (isDetailedMode) {
+        var _target$select;
+        (_target$select = target.select) === null || _target$select === void 0 ? void 0 : _target$select.call(target);
+      } else {
+        var _target$setSelectionR, _target$value, _target$value2;
+        (_target$setSelectionR = target.setSelectionRange) === null || _target$setSelectionR === void 0 ? void 0 : _target$setSelectionR.call(target, (_target$value = target.value) === null || _target$value === void 0 ? void 0 : _target$value.length, (_target$value2 = target.value) === null || _target$value2 === void 0 ? void 0 : _target$value2.length);
+      }
+      toggleDetailedMode(editing => !editing);
+      return;
+    }
+    // reset the value, or exit edit mode when pressing escape
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (isDetailedMode) {
+        toggleDetailedMode(false);
+        if (value !== currentValue) {
+          props.onChange(currentValue);
+        }
+        // have to let onChange run before selecting, otherwise the value changes
+        requestAnimationFrame(() => {
+          var _target$select2;
+          return (_target$select2 = target.select) === null || _target$select2 === void 0 ? void 0 : _target$select2.call(target);
+        });
+      } else {
+        toggleEditing(false);
+      }
+      return;
+    }
+    // toggle into detailed mode when actually inputting something
+    if (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace') {
+      toggleDetailedMode(true);
+    }
+  };
+  const handleFocus = event => {
+    if (!isDetailedMode) {
+      event.target.select();
+    }
+  };
+  if (type === 'datepicker') {
+    const handleChange = event => {
+      const newDate = event.detail;
+      if (isDate(value) && isDate(newDate) && !isWeakEqual(value, newDate)) {
+        props.onChange(event.detail);
+      }
+    };
+    return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, commonProps, {
+      invalid: invalid,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onKeyDown: handleInputKeyDown,
+      ref: controlRef,
+      value: value
+    }));
+  }
+  if (type === 'textarea') {
+    const handleChange = event => {
+      onChange(event.target.value);
+    };
+    return /*#__PURE__*/React__default.createElement(TextareaWithAutosizing, Object.assign({}, commonProps, {
+      fontSize: fontSize,
+      invalid: invalid,
+      isTruncated: isTruncated,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onKeyDown: handleInputKeyDown,
+      ref: controlRef,
+      value: String(value !== null && value !== void 0 ? value : '')
+    }));
+  }
+  const handleChange = event => {
+    onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);
+  };
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, commonProps, {
+    invalid: invalid,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onKeyDown: handleInputKeyDown,
+    ref: controlRef,
+    type: dataType === 'number' ? 'number' : undefined,
+    value: dataType === 'number' ? value : String(value !== null && value !== void 0 ? value : '')
+  }));
+});
+
+export { EditingControlCell };
+//# sourceMappingURL=EditingControlCell.js.map

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

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

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { DisplayCell } from '../../../../../primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell.js';
+import { useEditingCellAutofocus } from './util.js';
+
+const EditingDisplayCell = /*#__PURE__*/React__default.memo(function EditingDisplayCell(props) {
+  const handleFocus = useEditingCellAutofocus(props);
+  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, {
+    onFocus: handleFocus,
+    tabIndex: -1
+  }));
+});
+
+export { EditingDisplayCell };
+//# sourceMappingURL=EditingDisplayCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditingDisplayCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingDisplayCell.tsx"],"sourcesContent":["import React from 'react';\nimport { DisplayCell } from '../../../../../primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\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","React","memo","props","handleFocus","useEditingCellAutofocus","DisplayCell","onFocus","tabIndex"],"mappings":";;;;MAKaA,kBAAkB,gBAAGC,cAAK,CAACC,IAAI,CAAC,SAASF,kBAAkBA,CAAkBG,KAAoC;EAC1H,MAAMC,WAAW,GAAGC,uBAAuB,CAAQF,KAAK,CAAC;EACzD,oBAAOF,6BAACK,WAAW,oBAAYH,KAAK;IAAEI,OAAO,EAAEH,WAAW;IAAEI,QAAQ,EAAE,CAAC;KAAK;AAChF,CAAC;;;;"}

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

@@ -0,0 +1,45 @@
+import React__default from 'react';
+import { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext.js';
+import { useAugmentedFocusManager } from '../../../../../primitives/Table/Core/components/Body/util.js';
+
+function useEditingCellAutofocus(props) {
+  const focusManager = useAugmentedFocusManager();
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  const table = props.cell.getContext().table;
+  const tableMeta = table.options.meta;
+  const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
+  const autoFocus = props.index === tableMeta.editing.lastFocusedCellIndex && isActiveRow;
+  // focus the cell so that we trigger it's handle focus
+  React__default.useEffect(() => {
+    if (props.cellRef.current) {
+      var _props$cellRef$curren, _document$activeEleme;
+      const isFocusedElementInCurrentRow = (_props$cellRef$curren = props.cellRef.current.closest('tr')) === null || _props$cellRef$curren === void 0 ? void 0 : _props$cellRef$curren.contains(document.activeElement);
+      const isFocusedElementSearch = ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('name')) === 'table-search';
+      if (autoFocus && !isFocusedElementInCurrentRow && !isFocusedElementSearch) {
+        var _props$cellRef$curren2;
+        (_props$cellRef$curren2 = props.cellRef.current) === null || _props$cellRef$curren2 === void 0 ? void 0 : _props$cellRef$curren2.focus();
+      }
+    }
+  }, [autoFocus]);
+  // when the cell receives focus we actually want to focus the control inside it...
+  const handleFocus = event => {
+    var _props$cellRef$curren3;
+    const tableElement = (_props$cellRef$curren3 = props.cellRef.current) === null || _props$cellRef$curren3 === void 0 ? void 0 : _props$cellRef$curren3.closest('table');
+    if (tableElement && table.getIsSomeColumnsPinned() && !props.cell.column.getIsPinned()) {
+      const columnFreezingOffset = table.getLeftTotalSize();
+      const leftOffsetFromScrollContainer = event.currentTarget.getBoundingClientRect().left - tableElement.getBoundingClientRect().left;
+      if (leftOffsetFromScrollContainer < columnFreezingOffset) {
+        tableElement.scrollTo(props.cell.column.getStart() - columnFreezingOffset, tableElement.scrollTop);
+      }
+    }
+    if (event.target === event.currentTarget) {
+      focusManager.focusNext();
+    }
+  };
+  return handleFocus;
+}
+
+export { useEditingCellAutofocus };
+//# sourceMappingURL=util.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/util.ts"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useAugmentedFocusManager } from '../../../../../primitives/Table/Core/components/Body/util';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\n\nexport function useEditingCellAutofocus<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const focusManager = useAugmentedFocusManager();\n    const { rowIndex } = React.useContext(RowContext);\n    const table = props.cell.getContext().table;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n\n    const autoFocus = props.index === tableMeta.editing.lastFocusedCellIndex && isActiveRow;\n\n    // focus the cell so that we trigger it's handle focus\n    React.useEffect(() => {\n        if (props.cellRef.current) {\n            const isFocusedElementInCurrentRow = props.cellRef.current.closest('tr')?.contains(document.activeElement);\n            const isFocusedElementSearch = document.activeElement?.getAttribute('name') === 'table-search';\n\n            if (autoFocus && !isFocusedElementInCurrentRow && !isFocusedElementSearch) {\n                props.cellRef.current?.focus();\n            }\n        }\n    }, [autoFocus]);\n\n    // when the cell receives focus we actually want to focus the control inside it...\n    const handleFocus = (event: React.FocusEvent<HTMLTableCellElement>) => {\n        const tableElement = props.cellRef.current?.closest('table');\n\n        if (tableElement && table.getIsSomeColumnsPinned() && !props.cell.column.getIsPinned()) {\n            const columnFreezingOffset = table.getLeftTotalSize();\n            const leftOffsetFromScrollContainer =\n                event.currentTarget.getBoundingClientRect().left - tableElement.getBoundingClientRect().left;\n\n            if (leftOffsetFromScrollContainer < columnFreezingOffset) {\n                tableElement.scrollTo(props.cell.column.getStart() - columnFreezingOffset, tableElement.scrollTop);\n            }\n        }\n\n        if (event.target === event.currentTarget) {\n            focusManager.focusNext();\n        }\n    };\n\n    return handleFocus;\n}\n"],"names":["useEditingCellAutofocus","props","focusManager","useAugmentedFocusManager","rowIndex","React","useContext","RowContext","table","cell","getContext","tableMeta","options","meta","isActiveRow","rowActive","rowActiveIndex","autoFocus","index","editing","lastFocusedCellIndex","useEffect","cellRef","current","_props$cellRef$curren","_document$activeEleme","isFocusedElementInCurrentRow","closest","contains","document","activeElement","isFocusedElementSearch","getAttribute","_props$cellRef$curren2","focus","handleFocus","event","tableElement","_props$cellRef$curren3","getIsSomeColumnsPinned","column","getIsPinned","columnFreezingOffset","getLeftTotalSize","leftOffsetFromScrollContainer","currentTarget","getBoundingClientRect","left","scrollTo","getStart","scrollTop","target","focusNext"],"mappings":";;;;SAMgBA,uBAAuBA,CAAkBC,KAAoC;EACzF,MAAMC,YAAY,GAAGC,wBAAwB,EAAE;EAC/C,MAAM;IAAEC;GAAU,GAAGC,cAAK,CAACC,UAAU,CAACC,UAAU,CAAC;EACjD,MAAMC,KAAK,GAAGP,KAAK,CAACQ,IAAI,CAACC,UAAU,EAAE,CAACF,KAAK;EAC3C,MAAMG,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,WAAW,GAAGH,SAAS,CAACI,SAAS,CAACC,cAAc,KAAKZ,QAAQ;EAEnE,MAAMa,SAAS,GAAGhB,KAAK,CAACiB,KAAK,KAAKP,SAAS,CAACQ,OAAO,CAACC,oBAAoB,IAAIN,WAAW;;EAGvFT,cAAK,CAACgB,SAAS,CAAC;IACZ,IAAIpB,KAAK,CAACqB,OAAO,CAACC,OAAO,EAAE;MAAA,IAAAC,qBAAA,EAAAC,qBAAA;MACvB,MAAMC,4BAA4B,IAAAF,qBAAA,GAAGvB,KAAK,CAACqB,OAAO,CAACC,OAAO,CAACI,OAAO,CAAC,IAAI,CAAC,cAAAH,qBAAA,uBAAnCA,qBAAA,CAAqCI,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC;MAC1G,MAAMC,sBAAsB,GAAG,EAAAN,qBAAA,GAAAI,QAAQ,CAACC,aAAa,cAAAL,qBAAA,uBAAtBA,qBAAA,CAAwBO,YAAY,CAAC,MAAM,CAAC,MAAK,cAAc;MAE9F,IAAIf,SAAS,IAAI,CAACS,4BAA4B,IAAI,CAACK,sBAAsB,EAAE;QAAA,IAAAE,sBAAA;QACvE,CAAAA,sBAAA,GAAAhC,KAAK,CAACqB,OAAO,CAACC,OAAO,cAAAU,sBAAA,uBAArBA,sBAAA,CAAuBC,KAAK,EAAE;;;GAGzC,EAAE,CAACjB,SAAS,CAAC,CAAC;;EAGf,MAAMkB,WAAW,GAAIC,KAA6C;;IAC9D,MAAMC,YAAY,IAAAC,sBAAA,GAAGrC,KAAK,CAACqB,OAAO,CAACC,OAAO,cAAAe,sBAAA,uBAArBA,sBAAA,CAAuBX,OAAO,CAAC,OAAO,CAAC;IAE5D,IAAIU,YAAY,IAAI7B,KAAK,CAAC+B,sBAAsB,EAAE,IAAI,CAACtC,KAAK,CAACQ,IAAI,CAAC+B,MAAM,CAACC,WAAW,EAAE,EAAE;MACpF,MAAMC,oBAAoB,GAAGlC,KAAK,CAACmC,gBAAgB,EAAE;MACrD,MAAMC,6BAA6B,GAC/BR,KAAK,CAACS,aAAa,CAACC,qBAAqB,EAAE,CAACC,IAAI,GAAGV,YAAY,CAACS,qBAAqB,EAAE,CAACC,IAAI;MAEhG,IAAIH,6BAA6B,GAAGF,oBAAoB,EAAE;QACtDL,YAAY,CAACW,QAAQ,CAAC/C,KAAK,CAACQ,IAAI,CAAC+B,MAAM,CAACS,QAAQ,EAAE,GAAGP,oBAAoB,EAAEL,YAAY,CAACa,SAAS,CAAC;;;IAI1G,IAAId,KAAK,CAACe,MAAM,KAAKf,KAAK,CAACS,aAAa,EAAE;MACtC3C,YAAY,CAACkD,SAAS,EAAE;;GAE/B;EAED,OAAOjB,WAAW;AACtB;;;;"}

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

@@ -0,0 +1,62 @@
+import React__default from 'react';
+import { IconButton } from '../../../../IconButton/IconButton.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
+import { Button } from '../../../../Button/Button.js';
+import { Dialog } from '../../../../Dialog/Dialog.js';
+import { Group } from '../../../../Group/Group.js';
+import { Menu } from '../../../../Menu/Menu.js';
+
+function EditingActionMenu(props) {
+  const {
+    hasChanges,
+    hasErrors,
+    onClear: handleClear,
+    onExit: handleExit,
+    onSave: handleSave
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "transparent",
+    "aria-label": texts.table3.editing.actions.tooltip,
+    className: "group-[[data-row-editing-status]]/row:hidden",
+    icon: "more",
+    menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, /*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: "tick",
+      disabled: !hasChanges || hasErrors,
+      onClick: handleSave
+    }, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: "close",
+      disabled: !hasChanges,
+      dialog: props => /*#__PURE__*/React__default.createElement(ConfirmClearChangesDialog, Object.assign({}, props, {
+        onClear: handleClear
+      }))
+    }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: "undo",
+      onClick: handleExit
+    }, texts.table3.editing.actions.exit))))
+  });
+}
+function ConfirmClearChangesDialog(props) {
+  const {
+    onClear: handleClear,
+    ...dialogProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, dialogProps), /*#__PURE__*/React__default.createElement(Dialog.Content, {
+    "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title
+  }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
+    tabIndex: 0
+  }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
+    tabIndex: 0,
+    appearance: "primary",
+    autoFocus: true,
+    onClick: handleClear
+  }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
+}
+
+export { EditingActionMenu };
+//# sourceMappingURL=EditingActionsMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditingActionsMenu.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Internal/EditingActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Dialog, DialogProps } from '../../../../Dialog/Dialog';\nimport { Group } from '../../../../Group/Group';\nimport { Button } from '../../../../Button/Button';\n\ntype EditingActionMenuProps = {\n    hasChanges: boolean;\n    hasErrors: boolean;\n    onClear: () => void;\n    onExit: () => void;\n    onSave: () => Promise<void>;\n};\n\nexport function EditingActionMenu(props: EditingActionMenuProps) {\n    const { hasChanges, hasErrors, onClear: handleClear, onExit: handleExit, onSave: handleSave } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <IconButton\n            appearance=\"transparent\"\n            aria-label={texts.table3.editing.actions.tooltip}\n            className=\"group-[[data-row-editing-status]]/row:hidden\"\n            icon=\"more\"\n            menu={menuProps => (\n                <Menu {...menuProps}>\n                    <Menu.Content>\n                        <Menu.Item icon=\"tick\" disabled={!hasChanges || hasErrors} onClick={handleSave}>\n                            {texts.table3.editing.actions.save}\n                        </Menu.Item>\n                        <Menu.Item\n                            icon=\"close\"\n                            disabled={!hasChanges}\n                            dialog={props => <ConfirmClearChangesDialog {...props} onClear={handleClear} />}>\n                            {texts.table3.editing.actions.clear}\n                        </Menu.Item>\n                        <Menu.Item icon=\"undo\" onClick={handleExit}>\n                            {texts.table3.editing.actions.exit}\n                        </Menu.Item>\n                    </Menu.Content>\n                </Menu>\n            )}\n        />\n    );\n}\n\ntype ConfirmClearChangesDialogProps = Partial<DialogProps> & {\n    onClear: () => void;\n};\n\nfunction ConfirmClearChangesDialog(props: ConfirmClearChangesDialogProps) {\n    const { onClear: handleClear, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <Dialog {...dialogProps}>\n            <Dialog.Content aria-label={texts.table3.editing.clearChangesConfirmationDialog.title}>\n                <Dialog.Title>{texts.table3.editing.clearChangesConfirmationDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.editing.clearChangesConfirmationDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button tabIndex={0}>{texts.table3.editing.clearChangesConfirmationDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Dialog.Close>\n                            <Button tabIndex={0} appearance=\"primary\" autoFocus onClick={handleClear}>\n                                {texts.table3.editing.clearChangesConfirmationDialog.confirm}\n                            </Button>\n                        </Dialog.Close>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["EditingActionMenu","props","hasChanges","hasErrors","onClear","handleClear","onExit","handleExit","onSave","handleSave","texts","useLocalization","React","IconButton","appearance","table3","editing","actions","tooltip","className","icon","menu","menuProps","Menu","Content","Item","disabled","onClick","save","dialog","ConfirmClearChangesDialog","clear","exit","dialogProps","Dialog","clearChangesConfirmationDialog","title","Title","description","Footer","Group","Close","Button","tabIndex","cancel","autoFocus","confirm"],"mappings":";;;;;;;;SAgBgBA,iBAAiBA,CAACC,KAA6B;EAC3D,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,OAAO,EAAEC,WAAW;IAAEC,MAAM,EAAEC,UAAU;IAAEC,MAAM,EAAEC;GAAY,GAAGR,KAAK;EACrG,MAAM;IAAES;GAAO,GAAGC,eAAe,EAAE;EAEnC,oBACIC,6BAACC,UAAU;IACPC,UAAU,EAAC,aAAa;kBACZJ,KAAK,CAACK,MAAM,CAACC,OAAO,CAACC,OAAO,CAACC,OAAO;IAChDC,SAAS,EAAC,8CAA8C;IACxDC,IAAI,EAAC,MAAM;IACXC,IAAI,EAAEC,SAAS,mBACXV,6BAACW,IAAI,oBAAKD,SAAS,gBACfV,6BAACW,IAAI,CAACC,OAAO,qBACTZ,6BAACW,IAAI,CAACE,IAAI;MAACL,IAAI,EAAC,MAAM;MAACM,QAAQ,EAAE,CAACxB,UAAU,IAAIC,SAAS;MAAEwB,OAAO,EAAElB;OAC/DC,KAAK,CAACK,MAAM,CAACC,OAAO,CAACC,OAAO,CAACW,IAAI,CAC1B,eACZhB,6BAACW,IAAI,CAACE,IAAI;MACNL,IAAI,EAAC,OAAO;MACZM,QAAQ,EAAE,CAACxB,UAAU;MACrB2B,MAAM,EAAE5B,KAAK,iBAAIW,6BAACkB,yBAAyB,oBAAK7B,KAAK;QAAEG,OAAO,EAAEC;;OAC/DK,KAAK,CAACK,MAAM,CAACC,OAAO,CAACC,OAAO,CAACc,KAAK,CAC3B,eACZnB,6BAACW,IAAI,CAACE,IAAI;MAACL,IAAI,EAAC,MAAM;MAACO,OAAO,EAAEpB;OAC3BG,KAAK,CAACK,MAAM,CAACC,OAAO,CAACC,OAAO,CAACe,IAAI,CAC1B,CACD,CACZ;IAEb;AAEV;AAMA,SAASF,yBAAyBA,CAAC7B,KAAqC;EACpE,MAAM;IAAEG,OAAO,EAAEC,WAAW;IAAE,GAAG4B;GAAa,GAAGhC,KAAK;EACtD,MAAM;IAAES;GAAO,GAAGC,eAAe,EAAE;EAEnC,oBACIC,6BAACsB,MAAM,oBAAKD,WAAW,gBACnBrB,6BAACsB,MAAM,CAACV,OAAO;kBAAad,KAAK,CAACK,MAAM,CAACC,OAAO,CAACmB,8BAA8B,CAACC;kBAC5ExB,6BAACsB,MAAM,CAACG,KAAK,QAAE3B,KAAK,CAACK,MAAM,CAACC,OAAO,CAACmB,8BAA8B,CAACC,KAAK,CAAgB,eAExFxB,wCAAIF,KAAK,CAACK,MAAM,CAACC,OAAO,CAACmB,8BAA8B,CAACG,WAAW,CAAK,eAExE1B,6BAACsB,MAAM,CAACK,MAAM,qBACV3B,6BAAC4B,KAAK,qBACF5B,6BAACsB,MAAM,CAACO,KAAK,qBACT7B,6BAAC8B,MAAM;IAACC,QAAQ,EAAE;KAAIjC,KAAK,CAACK,MAAM,CAACC,OAAO,CAACmB,8BAA8B,CAACS,MAAM,CAAU,CAC/E,eACfhC,6BAACsB,MAAM,CAACO,KAAK,qBACT7B,6BAAC8B,MAAM;IAACC,QAAQ,EAAE,CAAC;IAAE7B,UAAU,EAAC,SAAS;IAAC+B,SAAS;IAAClB,OAAO,EAAEtB;KACxDK,KAAK,CAACK,MAAM,CAACC,OAAO,CAACmB,8BAA8B,CAACW,OAAO,CACvD,CACE,CACX,CACI,CACH,CACZ;AAEjB;;;;"}

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

@@ -0,0 +1,134 @@
+import React__default from 'react';
+import { Alert as Alert$1 } from '../../../Alert/Alert.js';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../Provider/Localization.js';
+import { Button } from '../../../Button/Button.js';
+import { Dialog } from '../../../Dialog/Dialog.js';
+import { Group } from '../../../Group/Group.js';
+
+function Alert(props) {
+  const {
+    scrollToIndex,
+    table,
+    tableRef,
+    ...attributes
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const validationTexts = texts.table3.editing.validation;
+  const tableMeta = table.options.meta;
+  const [showFilterResetDialog, setShowFilterResetDialog] = React__default.useState(false);
+  const pendingChangesWithErrors = tableMeta.editing.getErrors();
+  // mark errors being rendered as seen
+  React__default.useEffect(() => {
+    pendingChangesWithErrors.forEach(error => {
+      tableMeta.editing.setRowErrorsSeen(error.rowId);
+    });
+  }, [pendingChangesWithErrors]);
+  function scrollToRow(rowIndex) {
+    tableMeta.rowActive.setRowActiveIndex(rowIndex);
+    scrollToIndex(rowIndex, {
+      align: 'center'
+    });
+    requestAnimationFrame(() => {
+      var _tableRef$current;
+      const cell = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector('tbody > tr[data-row-active="true"] > td[data-cell-editing-invalid="true"]');
+      if (cell) {
+        var _cell$focus;
+        (_cell$focus = cell.focus) === null || _cell$focus === void 0 ? void 0 : _cell$focus.call(cell);
+      }
+    });
+  }
+  // generate the "N unsaved entries" title
+  const title = (pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural).replace('[COUNT]', String(pendingChangesWithErrors.length));
+  // generate links to each invalid row, to go into the error message
+  const links = [];
+  const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;
+  pendingChangesWithErrors.forEach((error, index) => {
+    // if appropriate, concatenate the item with the text "and"
+    if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
+      links.push(validationTexts.alert.messageAnd);
+    }
+    const handleClick = () => {
+      const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
+      if (rowIndex > -1) {
+        scrollToRow(rowIndex);
+      } else {
+        setShowFilterResetDialog(error.rowId);
+      }
+    };
+    let tooltip;
+    if (error.pendingChange._meta.errors.row) {
+      tooltip = error.pendingChange._meta.errors.row;
+    } else {
+      var _table$getAllColumns$, _table$getAllColumns$2;
+      const firstCellErrorColumnId = Object.keys(error.pendingChange._meta.errors.cells)[0];
+      const columnName = (_table$getAllColumns$ = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)) === null || _table$getAllColumns$ === void 0 ? void 0 : (_table$getAllColumns$2 = _table$getAllColumns$.columnDef.meta) === null || _table$getAllColumns$2 === void 0 ? void 0 : _table$getAllColumns$2.header;
+      tooltip = `${columnName}: ${error.pendingChange._meta.errors.cells[firstCellErrorColumnId]}`;
+    }
+    links.push( /*#__PURE__*/React__default.createElement(Tooltip, {
+      key: error.rowId,
+      title: tooltip
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "text-blue",
+      onClick: handleClick,
+      role: "button"
+    }, rowIdentityColumn ? error.pendingChange._meta.original[rowIdentityColumn.id] : error.rowId)));
+    // if appropriate, concatenate the item with the text ","
+    if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
+      links.push(', ');
+    }
+  });
+  // generate the "Row N is incomplete and hasn't been saved" error message
+  const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural).split(/(\[\w+\])/).map(part => {
+    if (part === '[COLUMN]') {
+      var _rowIdentityColumn$co, _rowIdentityColumn$co2;
+      return (_rowIdentityColumn$co = rowIdentityColumn === null || rowIdentityColumn === void 0 ? void 0 : (_rowIdentityColumn$co2 = rowIdentityColumn.columnDef.meta) === null || _rowIdentityColumn$co2 === void 0 ? void 0 : _rowIdentityColumn$co2.header) !== null && _rowIdentityColumn$co !== void 0 ? _rowIdentityColumn$co : validationTexts.alert.messageRow;
+    }
+    if (part === '[ROW]') {
+      return links;
+    }
+    return part;
+  });
+  const handleResetFilters = () => {
+    table.resetGlobalFilter();
+    table.resetColumnFilters();
+    requestAnimationFrame(() => {
+      const rowIndex = table.getRowModel().rows.findIndex(row => row.id === showFilterResetDialog);
+      if (rowIndex > -1) {
+        scrollToRow(rowIndex);
+      }
+      setShowFilterResetDialog(false);
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Alert$1, Object.assign({}, attributes, {
+    state: "error"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "font-bold"
+  }, title), message), /*#__PURE__*/React__default.createElement(FilterResetDialog, {
+    open: showFilterResetDialog !== false,
+    onChange: () => setShowFilterResetDialog(false),
+    onSubmit: handleResetFilters
+  }));
+}
+function FilterResetDialog(props) {
+  const {
+    onSubmit: handleSubmit,
+    ...dialogProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, dialogProps, {
+    size: "xs"
+  }), /*#__PURE__*/React__default.createElement(Dialog.Content, {
+    "aria-label": "Create a new account"
+  }, /*#__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(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, null, texts.table3.editing.validation.resetFiltersDialog.cancel)), /*#__PURE__*/React__default.createElement(Button, {
+    appearance: "primary",
+    onClick: handleSubmit
+  }, texts.table3.editing.validation.resetFiltersDialog.confirm)))));
+}
+
+export { Alert };
+//# sourceMappingURL=Alert.js.map

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

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

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

@@ -0,0 +1,54 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Icon } from '../../../../Icon/Icon.js';
+import { Tooltip } from '../../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
+import { Spinner } from '../../../../Spinner/Spinner.js';
+
+const COMPLETE_INDICATOR_DELAY = 3000;
+function SaveStatus(props) {
+  const {
+    rowId,
+    table
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const tableMeta = table.options.meta;
+  const status = tableMeta.editing.getRowSaveStatus(rowId);
+  React__default.useEffect(() => {
+    let timeout;
+    if (status === 'complete') {
+      timeout = setTimeout(() => {
+        tableMeta.editing.setRowSaveStatus(rowId, undefined);
+      }, COMPLETE_INDICATOR_DELAY);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [status]);
+  const className = cn('col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]', {
+    'mt-0.5': tableMeta.rowHeight.height === 'short',
+    'mt-1': tableMeta.rowHeight.height === 'medium',
+    'mt-1.5': tableMeta.rowHeight.height === 'tall',
+    'mt-2': tableMeta.rowHeight.height === 'extra-tall'
+  });
+  return /*#__PURE__*/React__default.createElement("td", {
+    className: "!contents"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: className
+  }, status === 'pending' ? ( /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: texts.table3.editing.saving.progress
+  }, /*#__PURE__*/React__default.createElement(Spinner, {
+    delay: 0,
+    className: "!text-grey-700 mr-1 !h-5 !w-5"
+  }))) : ( /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: texts.table3.editing.saving.complete
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "tick",
+    className: "!text-grey-700 mr-1 !h-5 !w-5"
+  })))));
+}
+
+export { SaveStatus };
+//# sourceMappingURL=SaveStatus.js.map