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.esm.js CHANGED
@@ -845,7 +845,7 @@ const Icon = /*#__PURE__*/forwardRef(({
845
845
  });
846
846
  });
847
847
 
848
- 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}";
848
+ 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}";
849
849
  styleInject(css_248z$17);
850
850
 
851
851
  const Typography = ({
@@ -1143,7 +1143,7 @@ const Drawer = ({
1143
1143
  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}";
1144
1144
  styleInject(css_248z$14);
1145
1145
 
1146
- var css_248z$13 = "";
1146
+ var css_248z$13 = "/* global.css or component CSS */\nbody {\n font-family: \"Poppins\", sans-serif;\n}";
1147
1147
  styleInject(css_248z$13);
1148
1148
 
1149
1149
  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}";
@@ -7537,7 +7537,7 @@ function createFormControl(props = {}) {
7537
7537
  timer = setTimeout(callback, wait);
7538
7538
  };
7539
7539
  const _updateValid = async (shouldUpdateValid) => {
7540
- if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7540
+ if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7541
7541
  const isValid = _options.resolver
7542
7542
  ? isEmptyObject((await _executeSchema()).errors)
7543
7543
  : await executeBuiltInValidation(_fields, true);
@@ -7549,7 +7549,7 @@ function createFormControl(props = {}) {
7549
7549
  }
7550
7550
  };
7551
7551
  const _updateIsValidating = (names, isValidating) => {
7552
- if (!props.disabled &&
7552
+ if (!_options.disabled &&
7553
7553
  (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
7554
7554
  (names || Array.from(_names.mount)).forEach((name) => {
7555
7555
  if (name) {
@@ -7565,7 +7565,7 @@ function createFormControl(props = {}) {
7565
7565
  }
7566
7566
  };
7567
7567
  const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
7568
- if (args && method && !props.disabled) {
7568
+ if (args && method && !_options.disabled) {
7569
7569
  _state.action = true;
7570
7570
  if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
7571
7571
  const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -7629,7 +7629,7 @@ function createFormControl(props = {}) {
7629
7629
  const output = {
7630
7630
  name,
7631
7631
  };
7632
- if (!props.disabled) {
7632
+ if (!_options.disabled) {
7633
7633
  const disabledField = !!(get$1(_fields, name) &&
7634
7634
  get$1(_fields, name)._f &&
7635
7635
  get$1(_fields, name)._f.disabled);
@@ -7765,7 +7765,7 @@ function createFormControl(props = {}) {
7765
7765
  }
7766
7766
  _names.unMount = new Set();
7767
7767
  };
7768
- const _getDirty = (name, data) => !props.disabled &&
7768
+ const _getDirty = (name, data) => !_options.disabled &&
7769
7769
  (name && data && set$1(_formValues, name, data),
7770
7770
  !deepEqual(getValues(), _defaultValues));
7771
7771
  const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8081,7 +8081,7 @@ function createFormControl(props = {}) {
8081
8081
  };
8082
8082
  const register = (name, options = {}) => {
8083
8083
  let field = get$1(_fields, name);
8084
- const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
8084
+ const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
8085
8085
  set$1(_fields, name, {
8086
8086
  ...(field || {}),
8087
8087
  _f: {
@@ -8097,7 +8097,7 @@ function createFormControl(props = {}) {
8097
8097
  field,
8098
8098
  disabled: isBoolean(options.disabled)
8099
8099
  ? options.disabled
8100
- : props.disabled,
8100
+ : _options.disabled,
8101
8101
  name,
8102
8102
  value: options.value,
8103
8103
  });
@@ -8107,7 +8107,7 @@ function createFormControl(props = {}) {
8107
8107
  }
8108
8108
  return {
8109
8109
  ...(disabledIsDefined
8110
- ? { disabled: options.disabled || props.disabled }
8110
+ ? { disabled: options.disabled || _options.disabled }
8111
8111
  : {}),
8112
8112
  ...(_options.progressive
8113
8113
  ? {
@@ -8191,6 +8191,12 @@ function createFormControl(props = {}) {
8191
8191
  e.preventDefault && e.preventDefault();
8192
8192
  e.persist && e.persist();
8193
8193
  }
8194
+ if (_options.disabled) {
8195
+ if (onInvalid) {
8196
+ await onInvalid({ ..._formState.errors }, e);
8197
+ }
8198
+ return;
8199
+ }
8194
8200
  let fieldValues = cloneObject(_formValues);
8195
8201
  _subjects.state.next({
8196
8202
  isSubmitting: true,
@@ -8369,7 +8375,9 @@ function createFormControl(props = {}) {
8369
8375
  : fieldReference.ref;
8370
8376
  if (fieldRef.focus) {
8371
8377
  fieldRef.focus();
8372
- options.shouldSelect && fieldRef.select();
8378
+ options.shouldSelect &&
8379
+ isFunction$1(fieldRef.select) &&
8380
+ fieldRef.select();
8373
8381
  }
8374
8382
  }
8375
8383
  };
@@ -8570,11 +8578,6 @@ function useForm(props = {}) {
8570
8578
  values: control._getWatch(),
8571
8579
  });
8572
8580
  }, [props.shouldUnregister, control]);
8573
- React__default.useEffect(() => {
8574
- if (_formControl.current) {
8575
- _formControl.current.watch = _formControl.current.watch.bind({});
8576
- }
8577
- }, [formState]);
8578
8581
  _formControl.current.formState = getProxyFormState(formState, control);
8579
8582
  return _formControl.current;
8580
8583
  }
@@ -26991,6 +26994,26 @@ const ADD_ROW_TOP = 'ADD_ROW_TOP';
26991
26994
  const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
26992
26995
  const DELETE_ROW = 'DELETE_ROW';
26993
26996
  const DELETE_COLUMN = 'DELETE_COLUMN';
26997
+ const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
26998
+ const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
26999
+ function setRowHeight(row, height) {
27000
+ return {
27001
+ type: SET_ROW_HEIGHT,
27002
+ payload: {
27003
+ row,
27004
+ height
27005
+ }
27006
+ };
27007
+ }
27008
+ function setColumnPosition(column, width) {
27009
+ return {
27010
+ type: SET_COLUMN_POSITION,
27011
+ payload: {
27012
+ column,
27013
+ width
27014
+ }
27015
+ };
27016
+ }
26994
27017
  function bold(data) {
26995
27018
  return {
26996
27019
  type: BOLD,
@@ -29324,6 +29347,48 @@ function reducer(state, action) {
29324
29347
  }
29325
29348
  return state;
29326
29349
  }
29350
+ case SET_ROW_HEIGHT:
29351
+ {
29352
+ const {
29353
+ row,
29354
+ height
29355
+ } = action.payload;
29356
+ const prevDimensions = state.rowDimensions[row] || {
29357
+ top: 0,
29358
+ height: 0
29359
+ };
29360
+ return {
29361
+ ...state,
29362
+ rowDimensions: {
29363
+ ...state.rowDimensions,
29364
+ [row]: {
29365
+ top: prevDimensions.top,
29366
+ height
29367
+ }
29368
+ }
29369
+ };
29370
+ }
29371
+ case SET_COLUMN_POSITION:
29372
+ {
29373
+ const {
29374
+ column,
29375
+ width
29376
+ } = action.payload;
29377
+ const prevDimensions = state.columnDimensions[column] || {
29378
+ left: 0,
29379
+ width: 0
29380
+ };
29381
+ return {
29382
+ ...state,
29383
+ columnDimensions: {
29384
+ ...state.columnDimensions,
29385
+ [column]: {
29386
+ left: prevDimensions.left,
29387
+ width
29388
+ }
29389
+ }
29390
+ };
29391
+ }
29327
29392
  case DRAG_START:
29328
29393
  {
29329
29394
  return {
@@ -30466,7 +30531,7 @@ const ColumnIndicator = ({
30466
30531
  data
30467
30532
  }) => {
30468
30533
  const dispatch = useDispatch();
30469
- const [width, setWidth] = React.useState(100);
30534
+ const columnWidth = useSelector(state => state.columnDimensions[column]?.width || 100);
30470
30535
  const options = [{
30471
30536
  label: 'Add Column',
30472
30537
  value: 'Add Column',
@@ -30484,26 +30549,24 @@ const ColumnIndicator = ({
30484
30549
  },
30485
30550
  disable: false
30486
30551
  }];
30487
- const onMouseDown = e => {
30488
- const startX = e.clientX;
30552
+ const onMouseDown = React.useCallback(event => {
30553
+ onSelect(column, event.shiftKey);
30554
+ const startX = event.clientX;
30555
+ const initialWidth = columnWidth;
30489
30556
  const onMouseMove = moveEvent => {
30490
- const newWidth = width + (moveEvent.clientX - startX);
30491
- setWidth(newWidth);
30492
- const selectedAllRow = document.querySelector('ff-spreadsheet-floating-rect--selected');
30493
- const selectedSingleRow = document.querySelector('ff-spreadsheet-active-cell');
30494
- if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
30495
- selectedAllRow.style.width = `${newWidth}px`;
30496
- selectedSingleRow.style.width = `${newWidth}px`;
30497
- }
30557
+ const newWidth = Math.max(100, initialWidth + (moveEvent.clientX - startX));
30558
+ dispatch(setColumnPosition(column, newWidth));
30498
30559
  };
30499
30560
  const onMouseUp = () => {
30500
30561
  document.removeEventListener('mousemove', onMouseMove);
30501
30562
  document.removeEventListener('mouseup', onMouseUp);
30563
+ dispatch(dragEnd());
30502
30564
  };
30503
30565
  document.addEventListener('mousemove', onMouseMove);
30504
30566
  document.addEventListener('mouseup', onMouseUp);
30505
- };
30506
- React.useCallback(point => dispatch(activate(point)), [dispatch]);
30567
+ dispatch(dragStart());
30568
+ }, [column, columnWidth, dispatch]);
30569
+ const activate$1 = React.useCallback(point => dispatch(activate(point)), [dispatch]);
30507
30570
  const handleClick = React.useCallback(event => {
30508
30571
  onSelect(column, event.shiftKey);
30509
30572
  }, [onSelect, column]);
@@ -30521,7 +30584,7 @@ const ColumnIndicator = ({
30521
30584
  }, [onSelect, column, setContextMenu]);
30522
30585
  return jsxs("th", {
30523
30586
  style: {
30524
- minWidth: `${width}px`,
30587
+ minWidth: `${columnWidth}px`,
30525
30588
  position: 'relative'
30526
30589
  },
30527
30590
  className: classNames('ff-spreadsheet-header', {
@@ -30532,8 +30595,10 @@ const ColumnIndicator = ({
30532
30595
  tabIndex: 0,
30533
30596
  children: [label !== undefined ? label : columnIndexToLabel(column), jsx("div", {
30534
30597
  onMouseDown: onMouseDown,
30535
- onClick: () => {
30536
- },
30598
+ onClick: () => activate$1({
30599
+ row: -1,
30600
+ column
30601
+ }),
30537
30602
  style: {
30538
30603
  zIndex: 'inherit',
30539
30604
  width: '2px',
@@ -30558,7 +30623,7 @@ const enhance$2 = ColumnIndicatorComponent => {
30558
30623
  });
30559
30624
  };
30560
30625
  };
30561
- // Utility function to convert column index to label (e.g., 0 -> A, 1 -> B, etc.)
30626
+ const EnhancedColumnIndicator = enhance$2(ColumnIndicator);
30562
30627
  function columnIndexToLabel(column) {
30563
30628
  let label = '';
30564
30629
  let index = column;
@@ -30579,7 +30644,8 @@ const RowIndicator = ({
30579
30644
  deleteRow,
30580
30645
  data
30581
30646
  }) => {
30582
- const [height, setHeight] = React.useState(0);
30647
+ const dispatch = useDispatch();
30648
+ const rowHeight = useSelector(state => state.rowDimensions[row]?.height || 28);
30583
30649
  const options = [{
30584
30650
  label: 'Add Row',
30585
30651
  value: 'Add Row',
@@ -30597,25 +30663,24 @@ const RowIndicator = ({
30597
30663
  },
30598
30664
  disable: false
30599
30665
  }];
30600
- const onMouseDown = e => {
30601
- const startY = e.clientY;
30666
+ const onMouseDown = React.useCallback(event => {
30667
+ onSelect(row, event.shiftKey);
30668
+ const startY = event.clientY;
30669
+ const initialHeight = rowHeight;
30602
30670
  const onMouseMove = moveEvent => {
30603
- const newHeight = height + (moveEvent.clientY - startY);
30604
- setHeight(newHeight);
30605
- const selectedAllRow = document.querySelector('.ff-spreadsheet-floating-rect--selected');
30606
- const selectedSingleRow = document.querySelector('.ff-spreadsheet-active-cell');
30607
- if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
30608
- selectedAllRow.style.height = `${newHeight}px`;
30609
- selectedSingleRow.style.height = `${newHeight}px`;
30610
- }
30671
+ const newHeight = Math.max(28, initialHeight + (moveEvent.clientY - startY));
30672
+ dispatch(setRowHeight(row, newHeight));
30611
30673
  };
30612
30674
  const onMouseUp = () => {
30613
30675
  document.removeEventListener('mousemove', onMouseMove);
30614
30676
  document.removeEventListener('mouseup', onMouseUp);
30677
+ dispatch(dragEnd());
30615
30678
  };
30616
30679
  document.addEventListener('mousemove', onMouseMove);
30617
30680
  document.addEventListener('mouseup', onMouseUp);
30618
- };
30681
+ dispatch(dragEnd());
30682
+ }, [onSelect, rowHeight, row]);
30683
+ const activate$1 = React.useCallback(point => dispatch(activate(point)), [dispatch]);
30619
30684
  const handleClick = React.useCallback(event => {
30620
30685
  onSelect(row, event.shiftKey);
30621
30686
  }, [onSelect, row]);
@@ -30633,8 +30698,7 @@ const RowIndicator = ({
30633
30698
  }, [onSelect, row, setContextMenu]);
30634
30699
  return jsxs("th", {
30635
30700
  style: {
30636
- height: `${height}px`,
30637
- minWidth: '60px',
30701
+ height: `${rowHeight}px`,
30638
30702
  position: 'relative'
30639
30703
  },
30640
30704
  className: classNames('ff-spreadsheet-header', {
@@ -30645,6 +30709,10 @@ const RowIndicator = ({
30645
30709
  tabIndex: 0,
30646
30710
  children: [label !== undefined ? label : row + 1, jsx("div", {
30647
30711
  onMouseDown: onMouseDown,
30712
+ onClick: () => activate$1({
30713
+ row,
30714
+ column: -1
30715
+ }),
30648
30716
  style: {
30649
30717
  zIndex: 'inherit',
30650
30718
  height: '2px',
@@ -31038,7 +31106,7 @@ const Copied = () => {
31038
31106
  });
31039
31107
  };
31040
31108
 
31041
- 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}";
31109
+ 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}";
31042
31110
  styleInject(css_248z$f);
31043
31111
 
31044
31112
  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}";
@@ -31580,7 +31648,7 @@ const Spreadsheet = props => {
31580
31648
  }, [props.Cell]);
31581
31649
  const CornerIndicator$1 = React.useMemo(() => enhance$3(props.CornerIndicator || CornerIndicator), [props.CornerIndicator]);
31582
31650
  const RowIndicator$1 = React.useMemo(() => enhance$1(props.RowIndicator || RowIndicator), [props.RowIndicator]);
31583
- const ColumnIndicator$1 = React.useMemo(() => enhance$2(props.ColumnIndicator || ColumnIndicator), [props.ColumnIndicator]);
31651
+ const ColumnIndicator = React.useMemo(() => enhance$2(props.ColumnIndicator || EnhancedColumnIndicator), [props.ColumnIndicator]);
31584
31652
  React.useEffect(() => {
31585
31653
  document.addEventListener('cut', handleCut);
31586
31654
  document.addEventListener('copy', handleCopy);
@@ -31594,14 +31662,14 @@ const Spreadsheet = props => {
31594
31662
  const tableNode = React.useMemo(() => jsxs(Table$1, {
31595
31663
  columns: size.columns,
31596
31664
  children: [jsxs(HeaderRow$1, {
31597
- children: [jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsx(ColumnIndicator$1, {
31665
+ children: [jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsx(ColumnIndicator, {
31598
31666
  column: columnNumber,
31599
31667
  setContextMenu: props.setContextMenu,
31600
31668
  label: columnNumber in columnLabels ? columnLabels[columnNumber] : null,
31601
31669
  deleteColumn: deleteColumn$1,
31602
31670
  addColumnLeft: addColumnLeft$1,
31603
31671
  data: props.data
31604
- }, columnNumber) : jsx(ColumnIndicator$1, {
31672
+ }, columnNumber) : jsx(ColumnIndicator, {
31605
31673
  column: columnNumber,
31606
31674
  setContextMenu: props.setContextMenu,
31607
31675
  deleteColumn: deleteColumn$1,
@@ -31631,7 +31699,7 @@ const Spreadsheet = props => {
31631
31699
  DataViewer: DataViewer$1
31632
31700
  }, columnNumber))]
31633
31701
  }, rowNumber))]
31634
- }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator$1, rowLabels, RowIndicator$1, Cell$1, DataViewer$1]);
31702
+ }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator, rowLabels, RowIndicator$1, Cell$1, DataViewer$1]);
31635
31703
  const activeCellNode = React.useMemo(() => jsx(ActiveCell
31636
31704
  // @ts-ignore
31637
31705
  , {
@@ -31699,9 +31767,112 @@ const ExcelContextMenu = ({
31699
31767
  });
31700
31768
  };
31701
31769
 
31770
+ const getTextAlignment = alignment => {
31771
+ switch (alignment.toLowerCase()) {
31772
+ case 'left':
31773
+ return 'left';
31774
+ case 'right':
31775
+ return 'right';
31776
+ case 'center':
31777
+ return 'center';
31778
+ case 'justify':
31779
+ return 'justify';
31780
+ default:
31781
+ return 'left';
31782
+ }
31783
+ };
31784
+ const getTextDecoration = textDecoration => {
31785
+ if (!textDecoration) {
31786
+ return 'solid';
31787
+ }
31788
+ switch (textDecoration.toLowerCase()) {
31789
+ case 'solid':
31790
+ return 'solid';
31791
+ case 'dotted':
31792
+ return 'dotted';
31793
+ case 'dashed':
31794
+ return 'dashed';
31795
+ case 'wavy':
31796
+ return 'wavy';
31797
+ default:
31798
+ return 'solid';
31799
+ }
31800
+ };
31801
+ const getTextAlignmentBack = alignment => {
31802
+ switch (alignment) {
31803
+ case 'left':
31804
+ return 'left';
31805
+ case 'right':
31806
+ return 'right';
31807
+ case 'center':
31808
+ return 'center';
31809
+ case 'justify':
31810
+ return 'justify';
31811
+ default:
31812
+ return 'left';
31813
+ }
31814
+ };
31815
+ function convertStyleToFrontend(backendStyle) {
31816
+ return {
31817
+ fontSize: `${backendStyle.size}px`,
31818
+ fontFamily: backendStyle.name,
31819
+ color: `#${backendStyle.color}`,
31820
+ backgroundColor: `#${backendStyle.backgroundColor}`,
31821
+ fontWeight: backendStyle.bold ? 'bold' : 'normal',
31822
+ fontStyle: backendStyle.italic ? 'italic' : 'normal',
31823
+ textDecoration: backendStyle.underline ? 'underline' : 'value',
31824
+ textDecorationStyle: getTextDecoration(backendStyle.underline),
31825
+ borderTop: backendStyle.border.top === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31826
+ borderRight: backendStyle.border.right === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31827
+ borderBottom: backendStyle.border.bottom === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31828
+ borderLeft: backendStyle.border.left === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31829
+ textAlign: getTextAlignment(backendStyle.alignment.horizontal)
31830
+ };
31831
+ }
31832
+ const getBorderStyle = border => {
31833
+ if (!border || border === 'none') {
31834
+ return 'NONE';
31835
+ }
31836
+ if (border.includes('solid') || border.includes('dashed') || border.includes('dotted')) {
31837
+ if (border.includes('2px') || border.includes('thin')) {
31838
+ return 'THIN';
31839
+ } else if (border.includes('3px') || border.includes('medium')) {
31840
+ return 'MEDIUM';
31841
+ } else if (border.includes('4px') || border.includes('thick')) {
31842
+ return 'THICK';
31843
+ }
31844
+ }
31845
+ return 'THIN';
31846
+ };
31847
+ const convertStyleToBackend = frontendStyle => {
31848
+ return {
31849
+ name: frontendStyle.fontFamily || 'Arial',
31850
+ size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
31851
+ bold: frontendStyle.fontWeight === 'bold',
31852
+ italic: frontendStyle.fontStyle === 'italic',
31853
+ underline: "solid",
31854
+ color: frontendStyle.color?.replace('#', '') || '000000',
31855
+ backgroundColor: frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
31856
+ borderColor: frontendStyle.borderTop && frontendStyle.borderTop.toString().includes('solid') ? 'F2F2F2' : '000000',
31857
+ border: {
31858
+ top: getBorderStyle(frontendStyle.borderTop ? frontendStyle.borderTop.toString() : undefined),
31859
+ right: getBorderStyle(frontendStyle.borderRight ? frontendStyle.borderRight.toString() : undefined),
31860
+ bottom: getBorderStyle(frontendStyle.borderBottom ? frontendStyle.borderBottom.toString() : undefined),
31861
+ left: getBorderStyle(frontendStyle.borderLeft ? frontendStyle.borderLeft.toString() : undefined)
31862
+ },
31863
+ alignment: {
31864
+ horizontal: getTextAlignmentBack(frontendStyle.textAlign),
31865
+ vertical: 'BOTTOM',
31866
+ wrapText: false
31867
+ }
31868
+ };
31869
+ };
31870
+
31702
31871
  const ExcelFile = ({
31703
31872
  excelData,
31704
- onSave = () => {}
31873
+ onSave = saveData => {
31874
+ saveData();
31875
+ }
31705
31876
  }) => {
31706
31877
  const [sheetNames, setSheetNames] = useState([]);
31707
31878
  const [contextMenu, setContextMenu] = React__default.useState({
@@ -31788,7 +31959,7 @@ const ExcelFile = ({
31788
31959
  }
31789
31960
  spreadsheetData[rowIndex][colIndex] = {
31790
31961
  value: checkVal(cell.value),
31791
- style: cell.style,
31962
+ style: convertStyleToFrontend(cell?.style),
31792
31963
  type: true
31793
31964
  };
31794
31965
  }
@@ -31802,12 +31973,49 @@ const ExcelFile = ({
31802
31973
  setSelectedSheetData(newWorksheetsData[firstSheetName]);
31803
31974
  }
31804
31975
  }, []);
31976
+ const onSaveWorksheetData = () => {
31977
+ const savedData = {
31978
+ sheets: sheetNames.map(sheetName => {
31979
+ const sheetData = worksheetsData[sheetName]?.map(row => {
31980
+ const lastIndex = row.reduce((lastIdx, cell, i) => {
31981
+ const hasValueOrTypeTrue = cell && cell.value !== null && !checkEmpty(cell && cell.value) || cell && cell.type === true;
31982
+ return hasValueOrTypeTrue ? i : lastIdx;
31983
+ }, -1);
31984
+ const filteredRow = row.map((cell, index) => {
31985
+ if (cell && cell.value !== null) {
31986
+ return {
31987
+ value: cell.value,
31988
+ styles: convertStyleToBackend(cell.style ?? {})
31989
+ };
31990
+ } else if (cell && cell.type || index <= lastIndex) {
31991
+ return {
31992
+ value: '',
31993
+ styles: convertStyleToBackend(cell?.style ?? {})
31994
+ };
31995
+ }
31996
+ return null;
31997
+ }).filter(cell => cell !== null);
31998
+ return filteredRow.length > 0 ? filteredRow : [];
31999
+ }) || [];
32000
+ const finalData = sheetData.filter((row, index) => {
32001
+ const isNextRowNotEmpty = sheetData.slice(index + 1).some(nextRow => nextRow.length > 0);
32002
+ return row.length > 0 || isNextRowNotEmpty;
32003
+ });
32004
+ return {
32005
+ sheetName: sheetName,
32006
+ data: checkEmpty(finalData.length) ? [[]] : finalData
32007
+ };
32008
+ })
32009
+ };
32010
+ onSave(savedData);
32011
+ toast.success('File saved successfully!');
32012
+ };
31805
32013
  const onEvaluateChange = data => {
31806
32014
  setWorksheetsData(prev => ({
31807
32015
  ...prev,
31808
32016
  [pageRef.current]: data
31809
32017
  }));
31810
- onSave();
32018
+ onSaveWorksheetData();
31811
32019
  };
31812
32020
  const [editingSheet, setEditingSheet] = useState(null);
31813
32021
  const handleAddSheet = () => {
@@ -31847,7 +32055,7 @@ const ExcelFile = ({
31847
32055
  } else {
31848
32056
  setSelectedSheetData([]);
31849
32057
  }
31850
- }, [selectedSheet.name, worksheetsData]);
32058
+ }, [selectedSheet.name]);
31851
32059
  const handleDeleteSheet = () => {
31852
32060
  const {
31853
32061
  index,