pixel-react 1.5.8 → 1.5.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/.storybook/main.ts +1 -7
  2. package/.storybook/preview-head.html +3 -0
  3. package/index.scss +5 -0
  4. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +1 -1
  5. package/lib/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.d.ts +2 -2
  6. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +17 -1
  7. package/lib/components/Excel/Types.d.ts +22 -1
  8. package/lib/components/Excel/dataConversion.d.ts +3 -0
  9. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  10. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  11. package/lib/components/Select/Select.stories.d.ts +0 -1
  12. package/lib/index.d.ts +1 -1
  13. package/lib/index.esm.js +264 -56
  14. package/lib/index.esm.js.map +1 -1
  15. package/lib/index.js +264 -56
  16. package/lib/index.js.map +1 -1
  17. package/lib/tsconfig.tsbuildinfo +1 -1
  18. package/package.json +1 -2
  19. package/src/assets/icons/approval_pending.svg +8 -8
  20. package/src/assets/icons/configuration.svg +3 -3
  21. package/src/assets/icons/defects.svg +8 -8
  22. package/src/assets/icons/element.svg +4 -4
  23. package/src/assets/icons/project_element.svg +4 -4
  24. package/src/assets/icons/step_group.svg +10 -10
  25. package/src/assets/icons/variable.svg +3 -3
  26. package/src/components/Excel/ExcelFile/ExcelFile.tsx +60 -5
  27. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +39 -39
  28. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +34 -28
  29. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +0 -29
  30. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +29 -0
  31. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +33 -0
  32. package/src/components/Excel/ExcelFile.stories.tsx +77 -67
  33. package/src/components/Excel/Types.ts +23 -1
  34. package/src/components/Excel/dataConversion.ts +173 -0
  35. package/src/components/Typography/Typography.scss +1 -36
  36. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  37. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  38. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  39. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  40. package/lib/components/AddButton/AddButton.d.ts +0 -5
  41. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  42. package/lib/components/AddButton/index.d.ts +0 -1
  43. package/lib/components/AddButton/types.d.ts +0 -4
  44. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  45. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  46. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  47. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  48. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  49. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  50. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  51. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  52. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  53. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  54. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  55. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  56. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  57. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  58. package/src/assets/fonts/Poppins-Bold.ttf +0 -0
  59. package/src/assets/fonts/Poppins-Bold.woff2 +0 -0
  60. package/src/assets/fonts/Poppins-Medium.ttf +0 -0
  61. package/src/assets/fonts/Poppins-Medium.woff2 +0 -0
  62. package/src/assets/fonts/Poppins-Regular.ttf +0 -0
  63. package/src/assets/fonts/Poppins-Regular.woff2 +0 -0
  64. package/src/assets/fonts/Poppins-SemiBold.ttf +0 -0
  65. package/src/assets/fonts/Poppins-SemiBold.woff2 +0 -0
  66. /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
package/lib/index.js CHANGED
@@ -865,7 +865,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
865
865
  });
866
866
  });
867
867
 
868
- var css_248z$17 = "/* poppins-latin-400-normal */\n@font-face {\n font-family: \"Poppins\";\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(@fontsource/poppins/files/poppins-latin-400-normal.woff2) format(\"woff2\"), url(@fontsource/poppins/files/poppins-latin-400-normal.woff) format(\"woff\");\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n.ff-text {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n.ff-text--regular {\n font-weight: 400;\n}\n.ff-text--medium {\n font-weight: 500;\n}\n.ff-text--semi-bold {\n font-weight: 600;\n}\n.ff-text--bold {\n font-weight: 700;\n}\n.ff-text .required-asterisk {\n color: var(--input-error-text-color);\n padding-right: 4px;\n}";
868
+ var css_248z$17 = ".ff-text {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n.ff-text--regular {\n font-weight: 400;\n}\n.ff-text--medium {\n font-weight: 500;\n}\n.ff-text--semi-bold {\n font-weight: 600;\n}\n.ff-text--bold {\n font-weight: 700;\n}\n.ff-text .required-asterisk {\n color: var(--input-error-text-color);\n padding-right: 4px;\n}";
869
869
  styleInject(css_248z$17);
870
870
 
871
871
  const Typography = ({
@@ -1163,7 +1163,7 @@ const Drawer = ({
1163
1163
  var css_248z$14 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-accordion {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n display: flex;\n justify-content: space-between;\n min-height: 32px;\n align-items: center;\n cursor: pointer;\n}\n.ff-accordion .accordion-header .header-title {\n padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n display: flex;\n padding: 8px;\n align-items: center;\n transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n background-color: var(--hover-color);\n border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n padding: 8px;\n}";
1164
1164
  styleInject(css_248z$14);
1165
1165
 
1166
- var css_248z$13 = "";
1166
+ var css_248z$13 = "/* global.css or component CSS */\nbody {\n font-family: \"Poppins\", sans-serif;\n}";
1167
1167
  styleInject(css_248z$13);
1168
1168
 
1169
1169
  var css_248z$12 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tooltip-container {\n cursor: pointer;\n display: inline-block;\n}\n\n.ff-tooltip {\n position: fixed;\n width: max-content;\n max-width: 60vw;\n word-wrap: break-word;\n background-color: var(--tooltip-bg-color);\n line-height: 18px;\n color: var(--tooltip-text-color);\n text-align: center;\n border-radius: 5px;\n padding: 4px 8px;\n opacity: 0;\n z-index: 10000;\n}\n.ff-tooltip--visible {\n opacity: 1;\n transition: opacity 0.3s;\n}";
@@ -7557,7 +7557,7 @@ function createFormControl(props = {}) {
7557
7557
  timer = setTimeout(callback, wait);
7558
7558
  };
7559
7559
  const _updateValid = async (shouldUpdateValid) => {
7560
- if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7560
+ if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7561
7561
  const isValid = _options.resolver
7562
7562
  ? isEmptyObject((await _executeSchema()).errors)
7563
7563
  : await executeBuiltInValidation(_fields, true);
@@ -7569,7 +7569,7 @@ function createFormControl(props = {}) {
7569
7569
  }
7570
7570
  };
7571
7571
  const _updateIsValidating = (names, isValidating) => {
7572
- if (!props.disabled &&
7572
+ if (!_options.disabled &&
7573
7573
  (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
7574
7574
  (names || Array.from(_names.mount)).forEach((name) => {
7575
7575
  if (name) {
@@ -7585,7 +7585,7 @@ function createFormControl(props = {}) {
7585
7585
  }
7586
7586
  };
7587
7587
  const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
7588
- if (args && method && !props.disabled) {
7588
+ if (args && method && !_options.disabled) {
7589
7589
  _state.action = true;
7590
7590
  if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
7591
7591
  const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -7649,7 +7649,7 @@ function createFormControl(props = {}) {
7649
7649
  const output = {
7650
7650
  name,
7651
7651
  };
7652
- if (!props.disabled) {
7652
+ if (!_options.disabled) {
7653
7653
  const disabledField = !!(get$1(_fields, name) &&
7654
7654
  get$1(_fields, name)._f &&
7655
7655
  get$1(_fields, name)._f.disabled);
@@ -7785,7 +7785,7 @@ function createFormControl(props = {}) {
7785
7785
  }
7786
7786
  _names.unMount = new Set();
7787
7787
  };
7788
- const _getDirty = (name, data) => !props.disabled &&
7788
+ const _getDirty = (name, data) => !_options.disabled &&
7789
7789
  (name && data && set$1(_formValues, name, data),
7790
7790
  !deepEqual(getValues(), _defaultValues));
7791
7791
  const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8101,7 +8101,7 @@ function createFormControl(props = {}) {
8101
8101
  };
8102
8102
  const register = (name, options = {}) => {
8103
8103
  let field = get$1(_fields, name);
8104
- const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
8104
+ const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
8105
8105
  set$1(_fields, name, {
8106
8106
  ...(field || {}),
8107
8107
  _f: {
@@ -8117,7 +8117,7 @@ function createFormControl(props = {}) {
8117
8117
  field,
8118
8118
  disabled: isBoolean(options.disabled)
8119
8119
  ? options.disabled
8120
- : props.disabled,
8120
+ : _options.disabled,
8121
8121
  name,
8122
8122
  value: options.value,
8123
8123
  });
@@ -8127,7 +8127,7 @@ function createFormControl(props = {}) {
8127
8127
  }
8128
8128
  return {
8129
8129
  ...(disabledIsDefined
8130
- ? { disabled: options.disabled || props.disabled }
8130
+ ? { disabled: options.disabled || _options.disabled }
8131
8131
  : {}),
8132
8132
  ...(_options.progressive
8133
8133
  ? {
@@ -8211,6 +8211,12 @@ function createFormControl(props = {}) {
8211
8211
  e.preventDefault && e.preventDefault();
8212
8212
  e.persist && e.persist();
8213
8213
  }
8214
+ if (_options.disabled) {
8215
+ if (onInvalid) {
8216
+ await onInvalid({ ..._formState.errors }, e);
8217
+ }
8218
+ return;
8219
+ }
8214
8220
  let fieldValues = cloneObject(_formValues);
8215
8221
  _subjects.state.next({
8216
8222
  isSubmitting: true,
@@ -8389,7 +8395,9 @@ function createFormControl(props = {}) {
8389
8395
  : fieldReference.ref;
8390
8396
  if (fieldRef.focus) {
8391
8397
  fieldRef.focus();
8392
- options.shouldSelect && fieldRef.select();
8398
+ options.shouldSelect &&
8399
+ isFunction$1(fieldRef.select) &&
8400
+ fieldRef.select();
8393
8401
  }
8394
8402
  }
8395
8403
  };
@@ -8590,11 +8598,6 @@ function useForm(props = {}) {
8590
8598
  values: control._getWatch(),
8591
8599
  });
8592
8600
  }, [props.shouldUnregister, control]);
8593
- React.useEffect(() => {
8594
- if (_formControl.current) {
8595
- _formControl.current.watch = _formControl.current.watch.bind({});
8596
- }
8597
- }, [formState]);
8598
8601
  _formControl.current.formState = getProxyFormState(formState, control);
8599
8602
  return _formControl.current;
8600
8603
  }
@@ -27011,6 +27014,26 @@ const ADD_ROW_TOP = 'ADD_ROW_TOP';
27011
27014
  const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
27012
27015
  const DELETE_ROW = 'DELETE_ROW';
27013
27016
  const DELETE_COLUMN = 'DELETE_COLUMN';
27017
+ const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
27018
+ const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
27019
+ function setRowHeight(row, height) {
27020
+ return {
27021
+ type: SET_ROW_HEIGHT,
27022
+ payload: {
27023
+ row,
27024
+ height
27025
+ }
27026
+ };
27027
+ }
27028
+ function setColumnPosition(column, width) {
27029
+ return {
27030
+ type: SET_COLUMN_POSITION,
27031
+ payload: {
27032
+ column,
27033
+ width
27034
+ }
27035
+ };
27036
+ }
27014
27037
  function bold(data) {
27015
27038
  return {
27016
27039
  type: BOLD,
@@ -29344,6 +29367,48 @@ function reducer(state, action) {
29344
29367
  }
29345
29368
  return state;
29346
29369
  }
29370
+ case SET_ROW_HEIGHT:
29371
+ {
29372
+ const {
29373
+ row,
29374
+ height
29375
+ } = action.payload;
29376
+ const prevDimensions = state.rowDimensions[row] || {
29377
+ top: 0,
29378
+ height: 0
29379
+ };
29380
+ return {
29381
+ ...state,
29382
+ rowDimensions: {
29383
+ ...state.rowDimensions,
29384
+ [row]: {
29385
+ top: prevDimensions.top,
29386
+ height
29387
+ }
29388
+ }
29389
+ };
29390
+ }
29391
+ case SET_COLUMN_POSITION:
29392
+ {
29393
+ const {
29394
+ column,
29395
+ width
29396
+ } = action.payload;
29397
+ const prevDimensions = state.columnDimensions[column] || {
29398
+ left: 0,
29399
+ width: 0
29400
+ };
29401
+ return {
29402
+ ...state,
29403
+ columnDimensions: {
29404
+ ...state.columnDimensions,
29405
+ [column]: {
29406
+ left: prevDimensions.left,
29407
+ width
29408
+ }
29409
+ }
29410
+ };
29411
+ }
29347
29412
  case DRAG_START:
29348
29413
  {
29349
29414
  return {
@@ -30486,7 +30551,7 @@ const ColumnIndicator = ({
30486
30551
  data
30487
30552
  }) => {
30488
30553
  const dispatch = useDispatch();
30489
- const [width, setWidth] = React__namespace.useState(100);
30554
+ const columnWidth = useSelector(state => state.columnDimensions[column]?.width || 100);
30490
30555
  const options = [{
30491
30556
  label: 'Add Column',
30492
30557
  value: 'Add Column',
@@ -30504,26 +30569,24 @@ const ColumnIndicator = ({
30504
30569
  },
30505
30570
  disable: false
30506
30571
  }];
30507
- const onMouseDown = e => {
30508
- const startX = e.clientX;
30572
+ const onMouseDown = React__namespace.useCallback(event => {
30573
+ onSelect(column, event.shiftKey);
30574
+ const startX = event.clientX;
30575
+ const initialWidth = columnWidth;
30509
30576
  const onMouseMove = moveEvent => {
30510
- const newWidth = width + (moveEvent.clientX - startX);
30511
- setWidth(newWidth);
30512
- const selectedAllRow = document.querySelector('ff-spreadsheet-floating-rect--selected');
30513
- const selectedSingleRow = document.querySelector('ff-spreadsheet-active-cell');
30514
- if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
30515
- selectedAllRow.style.width = `${newWidth}px`;
30516
- selectedSingleRow.style.width = `${newWidth}px`;
30517
- }
30577
+ const newWidth = Math.max(100, initialWidth + (moveEvent.clientX - startX));
30578
+ dispatch(setColumnPosition(column, newWidth));
30518
30579
  };
30519
30580
  const onMouseUp = () => {
30520
30581
  document.removeEventListener('mousemove', onMouseMove);
30521
30582
  document.removeEventListener('mouseup', onMouseUp);
30583
+ dispatch(dragEnd());
30522
30584
  };
30523
30585
  document.addEventListener('mousemove', onMouseMove);
30524
30586
  document.addEventListener('mouseup', onMouseUp);
30525
- };
30526
- React__namespace.useCallback(point => dispatch(activate(point)), [dispatch]);
30587
+ dispatch(dragStart());
30588
+ }, [column, columnWidth, dispatch]);
30589
+ const activate$1 = React__namespace.useCallback(point => dispatch(activate(point)), [dispatch]);
30527
30590
  const handleClick = React__namespace.useCallback(event => {
30528
30591
  onSelect(column, event.shiftKey);
30529
30592
  }, [onSelect, column]);
@@ -30541,7 +30604,7 @@ const ColumnIndicator = ({
30541
30604
  }, [onSelect, column, setContextMenu]);
30542
30605
  return jsxRuntime.jsxs("th", {
30543
30606
  style: {
30544
- minWidth: `${width}px`,
30607
+ minWidth: `${columnWidth}px`,
30545
30608
  position: 'relative'
30546
30609
  },
30547
30610
  className: classNames('ff-spreadsheet-header', {
@@ -30552,8 +30615,10 @@ const ColumnIndicator = ({
30552
30615
  tabIndex: 0,
30553
30616
  children: [label !== undefined ? label : columnIndexToLabel(column), jsxRuntime.jsx("div", {
30554
30617
  onMouseDown: onMouseDown,
30555
- onClick: () => {
30556
- },
30618
+ onClick: () => activate$1({
30619
+ row: -1,
30620
+ column
30621
+ }),
30557
30622
  style: {
30558
30623
  zIndex: 'inherit',
30559
30624
  width: '2px',
@@ -30578,7 +30643,7 @@ const enhance$2 = ColumnIndicatorComponent => {
30578
30643
  });
30579
30644
  };
30580
30645
  };
30581
- // Utility function to convert column index to label (e.g., 0 -> A, 1 -> B, etc.)
30646
+ const EnhancedColumnIndicator = enhance$2(ColumnIndicator);
30582
30647
  function columnIndexToLabel(column) {
30583
30648
  let label = '';
30584
30649
  let index = column;
@@ -30599,7 +30664,8 @@ const RowIndicator = ({
30599
30664
  deleteRow,
30600
30665
  data
30601
30666
  }) => {
30602
- const [height, setHeight] = React__namespace.useState(0);
30667
+ const dispatch = useDispatch();
30668
+ const rowHeight = useSelector(state => state.rowDimensions[row]?.height || 28);
30603
30669
  const options = [{
30604
30670
  label: 'Add Row',
30605
30671
  value: 'Add Row',
@@ -30617,25 +30683,24 @@ const RowIndicator = ({
30617
30683
  },
30618
30684
  disable: false
30619
30685
  }];
30620
- const onMouseDown = e => {
30621
- const startY = e.clientY;
30686
+ const onMouseDown = React__namespace.useCallback(event => {
30687
+ onSelect(row, event.shiftKey);
30688
+ const startY = event.clientY;
30689
+ const initialHeight = rowHeight;
30622
30690
  const onMouseMove = moveEvent => {
30623
- const newHeight = height + (moveEvent.clientY - startY);
30624
- setHeight(newHeight);
30625
- const selectedAllRow = document.querySelector('.ff-spreadsheet-floating-rect--selected');
30626
- const selectedSingleRow = document.querySelector('.ff-spreadsheet-active-cell');
30627
- if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
30628
- selectedAllRow.style.height = `${newHeight}px`;
30629
- selectedSingleRow.style.height = `${newHeight}px`;
30630
- }
30691
+ const newHeight = Math.max(28, initialHeight + (moveEvent.clientY - startY));
30692
+ dispatch(setRowHeight(row, newHeight));
30631
30693
  };
30632
30694
  const onMouseUp = () => {
30633
30695
  document.removeEventListener('mousemove', onMouseMove);
30634
30696
  document.removeEventListener('mouseup', onMouseUp);
30697
+ dispatch(dragEnd());
30635
30698
  };
30636
30699
  document.addEventListener('mousemove', onMouseMove);
30637
30700
  document.addEventListener('mouseup', onMouseUp);
30638
- };
30701
+ dispatch(dragEnd());
30702
+ }, [onSelect, rowHeight, row]);
30703
+ const activate$1 = React__namespace.useCallback(point => dispatch(activate(point)), [dispatch]);
30639
30704
  const handleClick = React__namespace.useCallback(event => {
30640
30705
  onSelect(row, event.shiftKey);
30641
30706
  }, [onSelect, row]);
@@ -30653,8 +30718,7 @@ const RowIndicator = ({
30653
30718
  }, [onSelect, row, setContextMenu]);
30654
30719
  return jsxRuntime.jsxs("th", {
30655
30720
  style: {
30656
- height: `${height}px`,
30657
- minWidth: '60px',
30721
+ height: `${rowHeight}px`,
30658
30722
  position: 'relative'
30659
30723
  },
30660
30724
  className: classNames('ff-spreadsheet-header', {
@@ -30665,6 +30729,10 @@ const RowIndicator = ({
30665
30729
  tabIndex: 0,
30666
30730
  children: [label !== undefined ? label : row + 1, jsxRuntime.jsx("div", {
30667
30731
  onMouseDown: onMouseDown,
30732
+ onClick: () => activate$1({
30733
+ row,
30734
+ column: -1
30735
+ }),
30668
30736
  style: {
30669
30737
  zIndex: 'inherit',
30670
30738
  height: '2px',
@@ -31058,7 +31126,7 @@ const Copied = () => {
31058
31126
  });
31059
31127
  };
31060
31128
 
31061
- var css_248z$f = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-spreadsheet-cell .ff-option-card .ff-options,\n.ff-spreadsheet-header .ff-option-card .ff-options {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-excel {\n display: flex;\n flex-direction: column;\n}\n\n.ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--toggle-strip-color);\n --header-background-color: var(--pop-up-background-blur);\n --elevation: var(--brand-color);\n position: relative;\n overflow: visible;\n background: var(--background-color);\n color: var(--text-color);\n display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n overflow: scroll;\n margin-top: 20px;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n\n.ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n background-color: var(--elevation);\n height: 7px;\n width: 7px;\n border-radius: 50%;\n position: absolute;\n right: -3px;\n z-index: 10;\n bottom: -3px;\n cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n.ff-spreadsheet-cell .ff-option-card,\n.ff-spreadsheet-header .ff-option-card {\n position: absolute;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n border-radius: 4px;\n margin: 2px;\n min-height: 32px;\n min-width: 111px;\n z-index: 100000;\n white-space: nowrap;\n}\n.ff-spreadsheet-cell .ff-option-card .ff-options,\n.ff-spreadsheet-header .ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 4px;\n display: flex;\n align-items: center;\n padding: 8px;\n line-height: 16px;\n gap: 8px;\n}\n.ff-spreadsheet-cell .ff-option-card .ff-options:hover,\n.ff-spreadsheet-header .ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-spreadsheet-cell .ff-option-card .ff-options label,\n.ff-spreadsheet-header .ff-option-card .ff-options label {\n cursor: pointer;\n}\n\n.ff-spreadsheet-header {\n background: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n}\n\n.corner_indicator {\n margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
31129
+ var css_248z$f = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-excel {\n display: flex;\n flex-direction: column;\n}\n\n.ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--toggle-strip-color);\n --header-background-color: var(--pop-up-background-blur);\n --elevation: var(--brand-color);\n position: relative;\n overflow: visible;\n background: var(--background-color);\n color: var(--text-color);\n display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n overflow: scroll;\n margin-top: 20px;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n\n.ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n background-color: var(--elevation);\n height: 7px;\n width: 7px;\n border-radius: 50%;\n position: absolute;\n right: -3px;\n z-index: 10;\n bottom: -3px;\n cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n\n.ff-spreadsheet-header {\n background: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n}\n\n.corner_indicator {\n margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
31062
31130
  styleInject(css_248z$f);
31063
31131
 
31064
31132
  var css_248z$e = ".ff-excel-toolbar {\n display: flex;\n height: 32px;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n width: 1px;\n height: 24px;\n background-color: var(--excel-toolbar-divider);\n margin: 0 24px;\n border-radius: 1px;\n z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n width: 100px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n display: flex;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n width: 88px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n display: flex;\n align-items: center;\n width: 36px;\n height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n display: flex;\n align-items: center;\n}";
@@ -31600,7 +31668,7 @@ const Spreadsheet = props => {
31600
31668
  }, [props.Cell]);
31601
31669
  const CornerIndicator$1 = React__namespace.useMemo(() => enhance$3(props.CornerIndicator || CornerIndicator), [props.CornerIndicator]);
31602
31670
  const RowIndicator$1 = React__namespace.useMemo(() => enhance$1(props.RowIndicator || RowIndicator), [props.RowIndicator]);
31603
- const ColumnIndicator$1 = React__namespace.useMemo(() => enhance$2(props.ColumnIndicator || ColumnIndicator), [props.ColumnIndicator]);
31671
+ const ColumnIndicator = React__namespace.useMemo(() => enhance$2(props.ColumnIndicator || EnhancedColumnIndicator), [props.ColumnIndicator]);
31604
31672
  React__namespace.useEffect(() => {
31605
31673
  document.addEventListener('cut', handleCut);
31606
31674
  document.addEventListener('copy', handleCopy);
@@ -31614,14 +31682,14 @@ const Spreadsheet = props => {
31614
31682
  const tableNode = React__namespace.useMemo(() => jsxRuntime.jsxs(Table$1, {
31615
31683
  columns: size.columns,
31616
31684
  children: [jsxRuntime.jsxs(HeaderRow$1, {
31617
- children: [jsxRuntime.jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsxRuntime.jsx(ColumnIndicator$1, {
31685
+ children: [jsxRuntime.jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsxRuntime.jsx(ColumnIndicator, {
31618
31686
  column: columnNumber,
31619
31687
  setContextMenu: props.setContextMenu,
31620
31688
  label: columnNumber in columnLabels ? columnLabels[columnNumber] : null,
31621
31689
  deleteColumn: deleteColumn$1,
31622
31690
  addColumnLeft: addColumnLeft$1,
31623
31691
  data: props.data
31624
- }, columnNumber) : jsxRuntime.jsx(ColumnIndicator$1, {
31692
+ }, columnNumber) : jsxRuntime.jsx(ColumnIndicator, {
31625
31693
  column: columnNumber,
31626
31694
  setContextMenu: props.setContextMenu,
31627
31695
  deleteColumn: deleteColumn$1,
@@ -31651,7 +31719,7 @@ const Spreadsheet = props => {
31651
31719
  DataViewer: DataViewer$1
31652
31720
  }, columnNumber))]
31653
31721
  }, rowNumber))]
31654
- }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator$1, rowLabels, RowIndicator$1, Cell$1, DataViewer$1]);
31722
+ }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator, rowLabels, RowIndicator$1, Cell$1, DataViewer$1]);
31655
31723
  const activeCellNode = React__namespace.useMemo(() => jsxRuntime.jsx(ActiveCell
31656
31724
  // @ts-ignore
31657
31725
  , {
@@ -31719,9 +31787,112 @@ const ExcelContextMenu = ({
31719
31787
  });
31720
31788
  };
31721
31789
 
31790
+ const getTextAlignment = alignment => {
31791
+ switch (alignment.toLowerCase()) {
31792
+ case 'left':
31793
+ return 'left';
31794
+ case 'right':
31795
+ return 'right';
31796
+ case 'center':
31797
+ return 'center';
31798
+ case 'justify':
31799
+ return 'justify';
31800
+ default:
31801
+ return 'left';
31802
+ }
31803
+ };
31804
+ const getTextDecoration = textDecoration => {
31805
+ if (!textDecoration) {
31806
+ return 'solid';
31807
+ }
31808
+ switch (textDecoration.toLowerCase()) {
31809
+ case 'solid':
31810
+ return 'solid';
31811
+ case 'dotted':
31812
+ return 'dotted';
31813
+ case 'dashed':
31814
+ return 'dashed';
31815
+ case 'wavy':
31816
+ return 'wavy';
31817
+ default:
31818
+ return 'solid';
31819
+ }
31820
+ };
31821
+ const getTextAlignmentBack = alignment => {
31822
+ switch (alignment) {
31823
+ case 'left':
31824
+ return 'left';
31825
+ case 'right':
31826
+ return 'right';
31827
+ case 'center':
31828
+ return 'center';
31829
+ case 'justify':
31830
+ return 'justify';
31831
+ default:
31832
+ return 'left';
31833
+ }
31834
+ };
31835
+ function convertStyleToFrontend(backendStyle) {
31836
+ return {
31837
+ fontSize: `${backendStyle.size}px`,
31838
+ fontFamily: backendStyle.name,
31839
+ color: `#${backendStyle.color}`,
31840
+ backgroundColor: `#${backendStyle.backgroundColor}`,
31841
+ fontWeight: backendStyle.bold ? 'bold' : 'normal',
31842
+ fontStyle: backendStyle.italic ? 'italic' : 'normal',
31843
+ textDecoration: backendStyle.underline ? 'underline' : 'value',
31844
+ textDecorationStyle: getTextDecoration(backendStyle.underline),
31845
+ borderTop: backendStyle.border.top === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31846
+ borderRight: backendStyle.border.right === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31847
+ borderBottom: backendStyle.border.bottom === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31848
+ borderLeft: backendStyle.border.left === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31849
+ textAlign: getTextAlignment(backendStyle.alignment.horizontal)
31850
+ };
31851
+ }
31852
+ const getBorderStyle = border => {
31853
+ if (!border || border === 'none') {
31854
+ return 'NONE';
31855
+ }
31856
+ if (border.includes('solid') || border.includes('dashed') || border.includes('dotted')) {
31857
+ if (border.includes('2px') || border.includes('thin')) {
31858
+ return 'THIN';
31859
+ } else if (border.includes('3px') || border.includes('medium')) {
31860
+ return 'MEDIUM';
31861
+ } else if (border.includes('4px') || border.includes('thick')) {
31862
+ return 'THICK';
31863
+ }
31864
+ }
31865
+ return 'THIN';
31866
+ };
31867
+ const convertStyleToBackend = frontendStyle => {
31868
+ return {
31869
+ name: frontendStyle.fontFamily || 'Arial',
31870
+ size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
31871
+ bold: frontendStyle.fontWeight === 'bold',
31872
+ italic: frontendStyle.fontStyle === 'italic',
31873
+ underline: "solid",
31874
+ color: frontendStyle.color?.replace('#', '') || '000000',
31875
+ backgroundColor: frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
31876
+ borderColor: frontendStyle.borderTop && frontendStyle.borderTop.toString().includes('solid') ? 'F2F2F2' : '000000',
31877
+ border: {
31878
+ top: getBorderStyle(frontendStyle.borderTop ? frontendStyle.borderTop.toString() : undefined),
31879
+ right: getBorderStyle(frontendStyle.borderRight ? frontendStyle.borderRight.toString() : undefined),
31880
+ bottom: getBorderStyle(frontendStyle.borderBottom ? frontendStyle.borderBottom.toString() : undefined),
31881
+ left: getBorderStyle(frontendStyle.borderLeft ? frontendStyle.borderLeft.toString() : undefined)
31882
+ },
31883
+ alignment: {
31884
+ horizontal: getTextAlignmentBack(frontendStyle.textAlign),
31885
+ vertical: 'BOTTOM',
31886
+ wrapText: false
31887
+ }
31888
+ };
31889
+ };
31890
+
31722
31891
  const ExcelFile = ({
31723
31892
  excelData,
31724
- onSave = () => {}
31893
+ onSave = saveData => {
31894
+ saveData();
31895
+ }
31725
31896
  }) => {
31726
31897
  const [sheetNames, setSheetNames] = React.useState([]);
31727
31898
  const [contextMenu, setContextMenu] = React.useState({
@@ -31808,7 +31979,7 @@ const ExcelFile = ({
31808
31979
  }
31809
31980
  spreadsheetData[rowIndex][colIndex] = {
31810
31981
  value: checkVal(cell.value),
31811
- style: cell.style,
31982
+ style: convertStyleToFrontend(cell?.style),
31812
31983
  type: true
31813
31984
  };
31814
31985
  }
@@ -31822,12 +31993,49 @@ const ExcelFile = ({
31822
31993
  setSelectedSheetData(newWorksheetsData[firstSheetName]);
31823
31994
  }
31824
31995
  }, []);
31996
+ const onSaveWorksheetData = () => {
31997
+ const savedData = {
31998
+ sheets: sheetNames.map(sheetName => {
31999
+ const sheetData = worksheetsData[sheetName]?.map(row => {
32000
+ const lastIndex = row.reduce((lastIdx, cell, i) => {
32001
+ const hasValueOrTypeTrue = cell && cell.value !== null && !checkEmpty(cell && cell.value) || cell && cell.type === true;
32002
+ return hasValueOrTypeTrue ? i : lastIdx;
32003
+ }, -1);
32004
+ const filteredRow = row.map((cell, index) => {
32005
+ if (cell && cell.value !== null) {
32006
+ return {
32007
+ value: cell.value,
32008
+ styles: convertStyleToBackend(cell.style ?? {})
32009
+ };
32010
+ } else if (cell && cell.type || index <= lastIndex) {
32011
+ return {
32012
+ value: '',
32013
+ styles: convertStyleToBackend(cell?.style ?? {})
32014
+ };
32015
+ }
32016
+ return null;
32017
+ }).filter(cell => cell !== null);
32018
+ return filteredRow.length > 0 ? filteredRow : [];
32019
+ }) || [];
32020
+ const finalData = sheetData.filter((row, index) => {
32021
+ const isNextRowNotEmpty = sheetData.slice(index + 1).some(nextRow => nextRow.length > 0);
32022
+ return row.length > 0 || isNextRowNotEmpty;
32023
+ });
32024
+ return {
32025
+ sheetName: sheetName,
32026
+ data: checkEmpty(finalData.length) ? [[]] : finalData
32027
+ };
32028
+ })
32029
+ };
32030
+ onSave(savedData);
32031
+ toast.success('File saved successfully!');
32032
+ };
31825
32033
  const onEvaluateChange = data => {
31826
32034
  setWorksheetsData(prev => ({
31827
32035
  ...prev,
31828
32036
  [pageRef.current]: data
31829
32037
  }));
31830
- onSave();
32038
+ onSaveWorksheetData();
31831
32039
  };
31832
32040
  const [editingSheet, setEditingSheet] = React.useState(null);
31833
32041
  const handleAddSheet = () => {
@@ -31867,7 +32075,7 @@ const ExcelFile = ({
31867
32075
  } else {
31868
32076
  setSelectedSheetData([]);
31869
32077
  }
31870
- }, [selectedSheet.name, worksheetsData]);
32078
+ }, [selectedSheet.name]);
31871
32079
  const handleDeleteSheet = () => {
31872
32080
  const {
31873
32081
  index,