@economic/taco 2.47.0-server.7 → 2.47.0-server.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. package/dist/components/Calendar/Calendar.d.ts +1 -0
  2. package/dist/components/Table3/features/useEditingState.d.ts +1 -1
  3. package/dist/components/Table3/features/useTableEditing.d.ts +2 -2
  4. package/dist/esm/_virtual/_rollupPluginBabelHelpers.js +32 -1
  5. package/dist/esm/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
  6. package/dist/esm/index.css +10 -2
  7. package/dist/esm/packages/taco/src/components/Calendar/Calendar.js +12 -11
  8. package/dist/esm/packages/taco/src/components/Calendar/Calendar.js.map +1 -1
  9. package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js +15 -6
  10. package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js.map +1 -1
  11. package/dist/esm/packages/taco/src/components/Menu/components/Content.js +1 -1
  12. package/dist/esm/packages/taco/src/components/Menu/components/Content.js.map +1 -1
  13. package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js +2 -2
  14. package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js.map +1 -1
  15. package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js +5 -1
  16. package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js.map +1 -1
  17. package/dist/esm/packages/taco/src/components/Table3/features/useEditingState.js +9 -6
  18. package/dist/esm/packages/taco/src/components/Table3/features/useEditingState.js.map +1 -1
  19. package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js +45 -28
  20. package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js.map +1 -1
  21. package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js +5 -8
  22. package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js.map +1 -1
  23. package/dist/esm/packages/taco/src/hooks/useGlobalKeyDown.js +2 -2
  24. package/dist/esm/packages/taco/src/hooks/useGlobalKeyDown.js.map +1 -1
  25. package/dist/esm/packages/taco/src/hooks/useLazyEffect.js +1 -1
  26. package/dist/esm/packages/taco/src/hooks/useLazyEffect.js.map +1 -1
  27. package/dist/esm/packages/taco/src/primitives/BubbleSelect.js +1 -1
  28. package/dist/esm/packages/taco/src/primitives/BubbleSelect.js.map +1 -1
  29. package/dist/esm/packages/taco/src/primitives/Button.js +1 -6
  30. package/dist/esm/packages/taco/src/primitives/Button.js.map +1 -1
  31. package/dist/esm/packages/taco/src/primitives/Table/Core/components/Body/EmptyStateBody.js +9 -2
  32. package/dist/esm/packages/taco/src/primitives/Table/Core/components/Body/EmptyStateBody.js.map +1 -1
  33. package/dist/esm/packages/taco/src/primitives/Table/useTableManager/listeners/useTableFontSizeListener.js +4 -1
  34. package/dist/esm/packages/taco/src/primitives/Table/useTableManager/listeners/useTableFontSizeListener.js.map +1 -1
  35. package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/dataTypes.js +6 -2
  36. package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/dataTypes.js.map +1 -1
  37. package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/search.js +9 -1
  38. package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/search.js.map +1 -1
  39. package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js +8 -3
  40. package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js.map +1 -1
  41. package/dist/esm/packages/taco/src/utils/dom.js +9 -1
  42. package/dist/esm/packages/taco/src/utils/dom.js.map +1 -1
  43. package/dist/esm/packages/taco/src/utils/keyboard.js +5 -2
  44. package/dist/esm/packages/taco/src/utils/keyboard.js.map +1 -1
  45. package/dist/hooks/useGlobalKeyDown.d.ts +1 -1
  46. package/dist/index.css +10 -2
  47. package/dist/primitives/Table/useTableManager/util/dataTypes.d.ts +1 -1
  48. package/dist/taco.cjs.development.js +179 -85
  49. package/dist/taco.cjs.development.js.map +1 -1
  50. package/dist/taco.cjs.production.min.js +1 -1
  51. package/dist/taco.cjs.production.min.js.map +1 -1
  52. package/dist/utils/keyboard.d.ts +1 -1
  53. package/package.json +2 -1
@@ -79,6 +79,37 @@ function _objectWithoutPropertiesLoose(source, excluded) {
79
79
  }
80
80
  return target;
81
81
  }
82
+ function _unsupportedIterableToArray(o, minLen) {
83
+ if (!o) return;
84
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
85
+ var n = Object.prototype.toString.call(o).slice(8, -1);
86
+ if (n === "Object" && o.constructor) n = o.constructor.name;
87
+ if (n === "Map" || n === "Set") return Array.from(o);
88
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
89
+ }
90
+ function _arrayLikeToArray(arr, len) {
91
+ if (len == null || len > arr.length) len = arr.length;
92
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
93
+ return arr2;
94
+ }
95
+ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
96
+ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
97
+ if (it) return (it = it.call(o)).next.bind(it);
98
+ if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
99
+ if (it) o = it;
100
+ var i = 0;
101
+ return function () {
102
+ if (i >= o.length) return {
103
+ done: true
104
+ };
105
+ return {
106
+ done: false,
107
+ value: o[i++]
108
+ };
109
+ };
110
+ }
111
+ throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
112
+ }
82
113
 
83
114
  var AVAILABLE_COLORS = ['green', 'yellow', 'red', 'blue', 'purple', 'brown', 'pink', 'orange', 'grey', 'transparent'];
84
115
  var getColorByState = function getColorByState(state) {
@@ -4354,7 +4385,15 @@ function isElementInteractive(element) {
4354
4385
  if (!element) {
4355
4386
  return false;
4356
4387
  }
4357
- return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
4388
+ var interactiveElements = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'];
4389
+ var isInteractive = interactiveElements.includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
4390
+ // sometimes buttons contain content like an icon, and we can't rely on pointer events being disabled
4391
+ // so search for a focusable parent
4392
+ if (!isInteractive) {
4393
+ var focusableParent = element.closest(FOCUSABLE_ELEMENTS.join(','));
4394
+ return focusableParent ? interactiveElements.includes(focusableParent.tagName) : false;
4395
+ }
4396
+ return isInteractive;
4358
4397
  }
4359
4398
  function isElementInsideTable3OrReport(element) {
4360
4399
  return !!(element !== null && element !== void 0 && element.closest('[data-taco^=table]'));
@@ -4385,12 +4424,15 @@ function shouldTriggerShortcut(event, key) {
4385
4424
  }
4386
4425
  return event.key.toLowerCase() === keyOptions.key.toLowerCase();
4387
4426
  }
4388
- function createShortcutKeyDownHandler(key, handler, stopPropagation) {
4427
+ function createShortcutKeyDownHandler(key, handler, stopPropagation, element) {
4389
4428
  if (stopPropagation === void 0) {
4390
4429
  stopPropagation = true;
4391
4430
  }
4392
4431
  return function (event) {
4393
- if (event.target !== event.currentTarget && isElementInteractive(event.target) && !isPressingMetaKey(event)) {
4432
+ var dialog = document.querySelector('[role="dialog"]');
4433
+ var isOutsideDialog = element && dialog && !dialog.contains(element);
4434
+ if (event.target !== event.currentTarget && isElementInteractive(event.target) && !isPressingMetaKey(event) || isOutsideDialog // Avoid triggering shortcut if dialog is open and element is outside the dialog
4435
+ ) {
4394
4436
  return;
4395
4437
  }
4396
4438
  var condition = shouldTriggerShortcut(event, key);
@@ -4411,11 +4453,11 @@ var isMacOs = function isMacOs() {
4411
4453
  return (_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent.includes('Mac');
4412
4454
  };
4413
4455
 
4414
- var useGlobalKeyDown = function useGlobalKeyDown(shortcut, handler) {
4456
+ var useGlobalKeyDown = function useGlobalKeyDown(shortcut, handler, element) {
4415
4457
  React__default.useEffect(function () {
4416
4458
  var handleKeyDown;
4417
4459
  if (shortcut) {
4418
- handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false);
4460
+ handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false, element);
4419
4461
  document.addEventListener('keydown', handleKeyDown);
4420
4462
  }
4421
4463
  return function () {
@@ -4438,13 +4480,8 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
4438
4480
  useGlobalKeyDown(shortcut, function (event) {
4439
4481
  var _internalRef$current;
4440
4482
  event === null || event === void 0 ? void 0 : event.preventDefault();
4441
- var dialog = document.querySelector('[role="dialog"]');
4442
- // Don't trigger the click on the button if it is outside of the dialog
4443
- if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
4444
- return;
4445
- }
4446
4483
  (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
4447
- });
4484
+ }, internalRef.current);
4448
4485
  var Tag = props.href ? 'a' : 'button';
4449
4486
  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
4450
4487
  href: disabled ? undefined : props.href,
@@ -5002,7 +5039,7 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
5002
5039
  }, button);
5003
5040
  });
5004
5041
 
5005
- var _excluded$a = ["onChange", "value", "disabledDays"];
5042
+ var _excluded$a = ["onChange", "value", "disabledDays", "visibleMonth"];
5006
5043
  var thisYear = /*#__PURE__*/new Date().getFullYear();
5007
5044
  var years = [];
5008
5045
  for (var i = thisYear - 50; i <= thisYear + 10; i += 1) {
@@ -5088,21 +5125,22 @@ var TodayButton = function TodayButton(_ref2) {
5088
5125
  }, texts.calendar.actions.today);
5089
5126
  };
5090
5127
  var Calendar$1 = function Calendar(props) {
5128
+ var _ref3;
5091
5129
  var handleChange = props.onChange,
5092
5130
  value = props.value,
5093
5131
  disabledDays = props.disabledDays,
5132
+ visibleMonth = props.visibleMonth,
5094
5133
  otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
5095
- var _React$useState = React.useState(value !== null && value !== void 0 ? value : new Date()),
5096
- visibleMonth = _React$useState[0],
5097
- setVisibleMonth = _React$useState[1];
5134
+ var _React$useState = React.useState((_ref3 = visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : value) !== null && _ref3 !== void 0 ? _ref3 : new Date()),
5135
+ internalVisibleMonth = _React$useState[0],
5136
+ setInternalVisibleMonth = _React$useState[1];
5098
5137
  var _useLocalization3 = useLocalization(),
5099
5138
  texts = _useLocalization3.texts;
5100
5139
  React.useEffect(function () {
5101
- if (visibleMonth !== value) {
5102
- setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
5140
+ if (visibleMonth && visibleMonth !== internalVisibleMonth) {
5141
+ setInternalVisibleMonth(visibleMonth);
5103
5142
  }
5104
- // visibleMonth in deps array breaking month switching logic. It should not be in deps array.
5105
- }, [value]);
5143
+ }, [visibleMonth]);
5106
5144
  var handleDayClick = function handleDayClick(date, modifiers, event) {
5107
5145
  if (modifiers.outside || modifiers.disabled) {
5108
5146
  return;
@@ -5116,13 +5154,13 @@ var Calendar$1 = function Calendar(props) {
5116
5154
  className: className,
5117
5155
  captionLayout: "dropdown-buttons",
5118
5156
  weekStartsOn: 1,
5119
- month: visibleMonth,
5157
+ month: internalVisibleMonth,
5120
5158
  numberOfMonths: 1,
5121
5159
  components: {
5122
5160
  Caption: function Caption(props) {
5123
5161
  return /*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
5124
- onMonthChange: setVisibleMonth,
5125
- value: visibleMonth
5162
+ onMonthChange: setInternalVisibleMonth,
5163
+ value: internalVisibleMonth
5126
5164
  }));
5127
5165
  },
5128
5166
  Footer: function Footer() {
@@ -6496,14 +6534,20 @@ var useDatepicker = function useDatepicker(_ref, ref) {
6496
6534
  internalValue = _React$useState[0],
6497
6535
  setInternalValue = _React$useState[1];
6498
6536
  var originalValueAsDate = parse(value);
6499
- // update internal value if it changed 'externally'
6537
+ // Track the current view date (month/year) in the calendar
6538
+ var _React$useState2 = React.useState(originalValueAsDate || new Date()),
6539
+ calendarViewDate = _React$useState2[0],
6540
+ setCalendarViewDate = _React$useState2[1];
6500
6541
  React.useEffect(function () {
6501
- var formattedValue = format(value, formatting.date);
6502
- if (formattedValue !== internalValue) {
6503
- setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
6542
+ // Only update the internal value when the input is not focused
6543
+ // This prevents the input value from being reset while user is typing
6544
+ if (inputRef.current !== document.activeElement) {
6545
+ var formattedValue = format(value, formatting.date);
6546
+ if (formattedValue !== internalValue) {
6547
+ setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
6548
+ }
6504
6549
  }
6505
6550
  }, [value]);
6506
- // event handlers
6507
6551
  var handleInputBlur = function handleInputBlur(event) {
6508
6552
  event.persist();
6509
6553
  var valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getMonth(), originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getFullYear());
@@ -6524,6 +6568,8 @@ var useDatepicker = function useDatepicker(_ref, ref) {
6524
6568
  setInternalValue(event.target.value);
6525
6569
  };
6526
6570
  var handleChange = function handleChange(date) {
6571
+ // Update both the input value and calendar view date when selecting a date
6572
+ setCalendarViewDate(date);
6527
6573
  setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
6528
6574
  };
6529
6575
  var handleKeyDown = function handleKeyDown(event) {
@@ -6547,7 +6593,8 @@ var useDatepicker = function useDatepicker(_ref, ref) {
6547
6593
  });
6548
6594
  var calendarProps = _extends({}, calendar, {
6549
6595
  onChange: handleChange,
6550
- value: originalValueAsDate
6596
+ value: originalValueAsDate,
6597
+ visibleMonth: calendarViewDate
6551
6598
  });
6552
6599
  return {
6553
6600
  input: inputProps,
@@ -8476,7 +8523,7 @@ var Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
8476
8523
  var _childrenRefs$current, _childrenRefs$current2;
8477
8524
  return (_childrenRefs$current = childrenRefs.current[index]) === null || _childrenRefs$current === void 0 ? void 0 : (_childrenRefs$current2 = _childrenRefs$current.current) === null || _childrenRefs$current2 === void 0 ? void 0 : _childrenRefs$current2.click();
8478
8525
  }, 1);
8479
- }));
8526
+ }, true, childrenRefs.current[index].current));
8480
8527
  }
8481
8528
  });
8482
8529
  shortcuts.forEach(function (handler) {
@@ -10211,9 +10258,13 @@ var dataTypes = {
10211
10258
  if (value === undefined) {
10212
10259
  return '';
10213
10260
  }
10214
- return new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.locale, {
10261
+ var formatter = new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.locale, {
10215
10262
  minimumFractionDigits: 2
10216
- }).format(Number(value));
10263
+ });
10264
+ var decimalSeperator = formatter.format(1.1).substring(1, 2);
10265
+ var localisedValue = formatter.format(Number(value));
10266
+ var localisedValueWithoutThousandsSeperator = decimalSeperator === '.' ? localisedValue.replace(',', '') : localisedValue.replace('.', '');
10267
+ return [localisedValue, localisedValueWithoutThousandsSeperator];
10217
10268
  }
10218
10269
  }
10219
10270
  };
@@ -10379,7 +10430,14 @@ function isMatched(searchQuery, cellValue, dataType, localization) {
10379
10430
  var cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, {
10380
10431
  localization: localization
10381
10432
  });
10382
- if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
10433
+ if (Array.isArray(cellDisplayValue)) {
10434
+ for (var _iterator = _createForOfIteratorHelperLoose(cellDisplayValue), _step; !(_step = _iterator()).done;) {
10435
+ var displayValue = _step.value;
10436
+ if (isWeakContains(displayValue, searchQuery)) {
10437
+ return true;
10438
+ }
10439
+ }
10440
+ } else if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
10383
10441
  return true;
10384
10442
  }
10385
10443
  }
@@ -10721,10 +10779,15 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
10721
10779
  };
10722
10780
  } else if (dataTypeProperties.getDisplayValue) {
10723
10781
  var dataTypeRenderer = function dataTypeRenderer(value) {
10724
- var _dataTypeProperties$g, _dataTypeProperties$g2;
10725
- return (_dataTypeProperties$g = (_dataTypeProperties$g2 = dataTypeProperties.getDisplayValue) === null || _dataTypeProperties$g2 === void 0 ? void 0 : _dataTypeProperties$g2.call(dataTypeProperties, value, {
10782
+ var _dataTypeProperties$g;
10783
+ var displayValue = (_dataTypeProperties$g = dataTypeProperties.getDisplayValue) === null || _dataTypeProperties$g === void 0 ? void 0 : _dataTypeProperties$g.call(dataTypeProperties, value, {
10726
10784
  localization: localization
10727
- })) !== null && _dataTypeProperties$g !== void 0 ? _dataTypeProperties$g : value;
10785
+ });
10786
+ if (Array.isArray(displayValue)) {
10787
+ var _displayValue$;
10788
+ return (_displayValue$ = displayValue[0]) !== null && _displayValue$ !== void 0 ? _displayValue$ : value;
10789
+ }
10790
+ return displayValue !== null && displayValue !== void 0 ? displayValue : value;
10728
10791
  };
10729
10792
  column.cell = function (info) {
10730
10793
  return dataTypeRenderer(info.getValue());
@@ -12056,7 +12119,7 @@ function useLazyEffect(effect, deps) {
12056
12119
  var readyRef = React__default.useRef(false);
12057
12120
  React__default.useEffect(function () {
12058
12121
  if (readyRef.current) {
12059
- effect();
12122
+ return effect();
12060
12123
  } else {
12061
12124
  readyRef.current = true;
12062
12125
  }
@@ -12101,7 +12164,10 @@ function useTableFontSizeListener(table) {
12101
12164
  var _column$columnDef$min;
12102
12165
  var columnName = _ref[0],
12103
12166
  prevColumnSize = _ref[1];
12104
- var column = table.getColumn(columnName);
12167
+ // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
12168
+ var column = table.getAllColumns().find(function (x) {
12169
+ return x.id === columnName;
12170
+ });
12105
12171
  if (isInternalColumn(columnName)) {
12106
12172
  var _column$getSize;
12107
12173
  return [columnName, (_column$getSize = column === null || column === void 0 ? void 0 : column.getSize()) !== null && _column$getSize !== void 0 ? _column$getSize : prevColumnSize];
@@ -14562,20 +14628,27 @@ var MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(props)
14562
14628
 
14563
14629
  var _excluded$12 = ["emptyState", "isReady", "reason"];
14564
14630
  function EmptyStateBody(props) {
14631
+ var _ref$current, _ref$current$parentNo;
14565
14632
  var Placeholder = props.emptyState,
14566
14633
  isReady = props.isReady,
14567
14634
  reason = props.reason,
14568
14635
  attributes = _objectWithoutPropertiesLoose(props, _excluded$12);
14636
+ var ref = React__default.useRef(null);
14569
14637
  if (!isReady) {
14570
14638
  return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
14571
14639
  className: "!auto-rows-fr"
14572
14640
  }));
14573
14641
  }
14574
14642
  return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
14575
- className: "!auto-rows-fr"
14643
+ ref: ref,
14644
+ className: "!auto-rows-fr",
14645
+ "data-taco": "empty-state"
14576
14646
  }), /*#__PURE__*/React__default.createElement("tr", {
14577
- className: "!auto-rows-fr"
14647
+ className: "!auto-rows-fr "
14578
14648
  }, /*#__PURE__*/React__default.createElement("td", {
14649
+ style: {
14650
+ maxWidth: ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$parentNo = _ref$current.parentNode) === null || _ref$current$parentNo === void 0 ? void 0 : _ref$current$parentNo.clientWidth
14651
+ },
14579
14652
  className: "col-span-full !border-0 !p-0 hover:!bg-white"
14580
14653
  }, Placeholder ? /*#__PURE__*/React__default.createElement(Placeholder, {
14581
14654
  reason: reason
@@ -16359,7 +16432,7 @@ var BubbleSelect = function BubbleSelect(props) {
16359
16432
  if (prevValue !== value && setValue) {
16360
16433
  if (Array.isArray(value)) {
16361
16434
  value.forEach(function (v) {
16362
- var option = select.querySelector("option[value='" + v + "']");
16435
+ var option = select.querySelector("option[value='" + CSS.escape(v) + "']");
16363
16436
  if (option) {
16364
16437
  option.selected = true;
16365
16438
  }
@@ -19541,16 +19614,13 @@ function isTableScrolled(ref) {
19541
19614
  function useTableEditingListener(table, tableRef, scrollToIndex) {
19542
19615
  var tableMeta = table.options.meta;
19543
19616
  var localization = useLocalization();
19544
- // save when the row changes
19545
- // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again
19546
- var lastRowActiveIndexRef = React__default.useRef(tableMeta.rowActive.rowActiveIndex);
19547
19617
  useLazyEffect(function () {
19548
- if (tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
19549
- lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
19550
- if (tableMeta.editing.isEditing && lastRowActiveIndexRef.current !== undefined) {
19551
- tableMeta.editing.saveChanges(table);
19618
+ return function () {
19619
+ if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== undefined) {
19620
+ var _table$getRowModel$ro;
19621
+ tableMeta.editing.saveChanges(table, (_table$getRowModel$ro = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id);
19552
19622
  }
19553
- }
19623
+ };
19554
19624
  }, [tableMeta.rowActive.rowActiveIndex]);
19555
19625
  // show a warning if the user navigates away without triggering save, such as using the browser back/forward button
19556
19626
  var hasChanges = tableMeta.editing.hasChanges();
@@ -19751,6 +19821,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
19751
19821
  var _temp7 = _forOf(Object.keys(changes), function (rowId) {
19752
19822
  var status = getRowStatus(rowId);
19753
19823
  return _catch(function () {
19824
+ var _changes$rowId;
19754
19825
  function _temp6(_result) {
19755
19826
  return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
19756
19827
  // cleanup changes, we don't need them after saving
@@ -19762,12 +19833,13 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
19762
19833
  }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
19763
19834
  });
19764
19835
  }
19836
+ var rowChanges = (_changes$rowId = changes[rowId]) !== null && _changes$rowId !== void 0 ? _changes$rowId : {};
19765
19837
  // don't try to save if - already saving, or there are known errors
19766
- if (status === 'saving' || status === 'errored') {
19838
+ if (!Object.keys(rowChanges).length || status === 'saving' || status === 'errored') {
19767
19839
  return;
19768
19840
  }
19769
19841
  setRowStatus(rowId, 'saving');
19770
- var changeSet = _extends({}, state.changes.originals[rowId], changes[rowId]);
19842
+ var changeSet = _extends({}, state.changes.originals[rowId], rowChanges);
19771
19843
  // if we had to create a temporary id, delete it first - it's our data, not theirs
19772
19844
  if (isTemporaryRow(changeSet[rowIdentityAccessor])) {
19773
19845
  delete changeSet[rowIdentityAccessor];
@@ -19829,11 +19901,12 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
19829
19901
  return Promise.reject(e);
19830
19902
  }
19831
19903
  };
19832
- var onCellChanged = function onCellChanged(cell, rowIndex, shouldRunUpdaters) {
19904
+ var onCellChanged = function onCellChanged(cell, rowIndex, nextValue, shouldRunUpdaters) {
19833
19905
  if (shouldRunUpdaters === void 0) {
19834
19906
  shouldRunUpdaters = true;
19835
19907
  }
19836
19908
  try {
19909
+ var _extends3;
19837
19910
  var _temp4 = function _temp4() {
19838
19911
  var _state$changes$errors11;
19839
19912
  function _temp2() {
@@ -19874,7 +19947,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
19874
19947
  });
19875
19948
  }
19876
19949
  // create a projection of the next state, so we can act against it
19877
- var nextChanges = _extends({}, state.changes.rows[cell.row.id], updatesForOtherCells);
19950
+ var nextChanges = _extends({}, changes, updatesForOtherCells);
19878
19951
  var nextMoveReasons = _extends({}, state.changes.moveReasons[cell.row.id]);
19879
19952
  var nextCellErrors = _extends({}, (_state$changes$errors11 = state.changes.errors[cell.row.id]) === null || _state$changes$errors11 === void 0 ? void 0 : _state$changes$errors11.cells);
19880
19953
  // run validation
@@ -19889,8 +19962,8 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
19889
19962
  }();
19890
19963
  return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
19891
19964
  };
19892
- var changes = state.changes.rows[cell.row.id];
19893
- if (!changes) {
19965
+ var changes = nextValue !== undefined ? _extends({}, state.changes.rows[cell.row.id], (_extends3 = {}, _extends3[cell.column.id] = nextValue, _extends3)) : _extends({}, state.changes.rows[cell.row.id]);
19966
+ if (!Object.keys(changes).length) {
19894
19967
  return Promise.resolve();
19895
19968
  }
19896
19969
  var updatesForOtherCells = {};
@@ -20074,30 +20147,44 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
20074
20147
  function useTableEditing(isEnabled, handleSave, handleChange, handleCreate, rowIdentityAccessor, validator) {
20075
20148
  var createRow = function createRow(table, scrollToIndex, row) {
20076
20149
  try {
20077
- if (!handleCreate) {
20078
- return Promise.resolve();
20079
- }
20080
- var tableMeta = table.options.meta;
20081
- return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
20082
- if (!saved) {
20083
- return;
20084
- }
20150
+ var _temp2 = function _temp2(_result) {
20151
+ if (_exit) return _result;
20085
20152
  var changeset = row !== null && row !== void 0 ? row : handleCreate();
20086
20153
  try {
20087
20154
  if (changeset) {
20088
- // set the active row to the new row before toggling editing on
20089
20155
  var temporaryRows = tableMeta.editing.temporaryRows;
20090
20156
  var nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
20091
- var rowId = pendingChangesFns.insertTemporaryRow(changeset, nextRowIndex);
20092
- table.getRow(rowId).pin('bottom');
20093
- tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
20094
- toggleEditing(true, table, scrollToIndex);
20157
+ var newRowId = pendingChangesFns.insertTemporaryRow(changeset, nextRowIndex);
20158
+ // reset before changing row otherwise the cell changes and validation might run
20095
20159
  setLastFocusedCellIndex(undefined);
20160
+ // set the active row to the new row before toggling editing on
20161
+ tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
20162
+ // wait until set states have run
20163
+ requestAnimationFrame(function () {
20164
+ toggleEditing(true, table, scrollToIndex, false);
20165
+ table.getRow(newRowId).pin('bottom');
20166
+ });
20096
20167
  }
20097
20168
  } catch (error) {
20098
20169
  console.error(error);
20099
20170
  }
20100
- });
20171
+ };
20172
+ var _exit = false;
20173
+ if (!handleCreate) {
20174
+ return Promise.resolve();
20175
+ }
20176
+ var tableMeta = table.options.meta;
20177
+ var _temp = function () {
20178
+ if (tableMeta.rowActive.rowActiveIndex !== undefined) {
20179
+ var _table$getRowModel$ro2;
20180
+ return Promise.resolve(tableMeta.editing.saveChanges(table, (_table$getRowModel$ro2 = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]) === null || _table$getRowModel$ro2 === void 0 ? void 0 : _table$getRowModel$ro2.id)).then(function (saved) {
20181
+ if (!saved) {
20182
+ _exit = true;
20183
+ }
20184
+ });
20185
+ }
20186
+ }();
20187
+ return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
20101
20188
  } catch (e) {
20102
20189
  return Promise.reject(e);
20103
20190
  }
@@ -20120,26 +20207,29 @@ function useTableEditing(isEnabled, handleSave, handleChange, handleCreate, rowI
20120
20207
  lastFocusedCellIndex = _React$useState3[0],
20121
20208
  setLastFocusedCellIndex = _React$useState3[1];
20122
20209
  var pendingChangesFns = usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator);
20123
- function toggleEditing(enabled, table, scrollToIndex) {
20124
- var _tableMeta$rowActive$, _table$getRowModel$ro;
20125
- if (!enabled) {
20126
- // save
20127
- pendingChangesFns.saveChanges(table);
20210
+ function toggleEditing(enabled, table, scrollToIndex, doSave) {
20211
+ if (doSave === void 0) {
20212
+ doSave = true;
20213
+ }
20214
+ var tableMeta = table.options.meta;
20215
+ if (enabled) {
20216
+ var _tableMeta$rowActive$, _table$getRowModel$ro;
20217
+ var index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
20218
+ if (tableMeta.rowActive.rowActiveIndex === undefined) {
20219
+ tableMeta.rowActive.setRowActiveIndex(index);
20220
+ }
20221
+ if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
20222
+ scrollToIndex(index);
20223
+ }
20224
+ } else if (!enabled) {
20128
20225
  // reset detailed mode
20129
20226
  toggleDetailedMode(false);
20130
20227
  // reset the last index back to the first focusable element, when editing gets turned off
20131
20228
  setLastFocusedCellIndex(undefined);
20132
20229
  }
20133
- var tableMeta = table.options.meta;
20134
- var index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
20135
- if (tableMeta.rowActive.rowActiveIndex === undefined) {
20136
- tableMeta.rowActive.setRowActiveIndex(index);
20137
- }
20138
20230
  setEditing(enabled);
20139
- var row = (_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id;
20140
- if (row && !isTemporaryRow(row)) {
20141
- console.log('hmm');
20142
- scrollToIndex(index);
20231
+ if (doSave) {
20232
+ pendingChangesFns.saveChanges(table);
20143
20233
  }
20144
20234
  }
20145
20235
  return _extends({
@@ -20405,13 +20495,13 @@ function EditingControlCell(props) {
20405
20495
  if (nextValue !== value) {
20406
20496
  tableMeta.editing.setCellValue(cell, rowIndex, nextValue);
20407
20497
  if (hasNonTextControl) {
20408
- tableMeta.editing.onCellChanged(cell, rowIndex);
20498
+ tableMeta.editing.onCellChanged(cell, rowIndex, nextValue);
20409
20499
  }
20410
20500
  }
20411
20501
  };
20412
20502
  var handleBlur = function handleBlur() {
20413
20503
  tableMeta.editing.toggleDetailedMode(false);
20414
- tableMeta.editing.onCellChanged(cell, rowIndex, !hasNonTextControl);
20504
+ tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
20415
20505
  };
20416
20506
  // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
20417
20507
  React__default.useEffect(function () {
@@ -20912,7 +21002,11 @@ function Alert$1(props) {
20912
21002
  var visibleColumns = table.getVisibleFlatColumns().map(function (c) {
20913
21003
  return c.id;
20914
21004
  });
20915
- var rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ? table.getColumn(String(tableMeta.rowIdentityAccessor)) : undefined;
21005
+ var rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ?
21006
+ // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
21007
+ table.getAllColumns().find(function (x) {
21008
+ return x.id === String(tableMeta.rowIdentityAccessor);
21009
+ }) : undefined;
20916
21010
  pendingChangesWithErrors.forEach(function (pendingChangeWithError, index) {
20917
21011
  var _row;
20918
21012
  // if appropriate, concatenate the item with the text "and"