pixel-react 1.5.8 → 1.5.9

package/lib/index.js

@@ -865,7 +865,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-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}";
+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}";
 styleInject(css_248z$17);
 
 const Typography = ({
@@ -1163,7 +1163,7 @@ const Drawer = ({
 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}";
 styleInject(css_248z$14);
 
-var css_248z$13 = "";
+var css_248z$13 = "/* global.css or component CSS */\nbody {\n  font-family: \"Poppins\", sans-serif;\n}";
 styleInject(css_248z$13);
 
 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 = {}) {
         timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
-        if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
+        if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -7569,7 +7569,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (!props.disabled &&
+        if (!_options.disabled &&
             (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
@@ -7585,7 +7585,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method && !props.disabled) {
+        if (args && method && !_options.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
                 const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -7649,7 +7649,7 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!props.disabled) {
+        if (!_options.disabled) {
             const disabledField = !!(get$1(_fields, name) &&
                 get$1(_fields, name)._f &&
                 get$1(_fields, name)._f.disabled);
@@ -7785,7 +7785,7 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !props.disabled &&
+    const _getDirty = (name, data) => !_options.disabled &&
         (name && data && set$1(_formValues, name, data),
             !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8101,7 +8101,7 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get$1(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
         set$1(_fields, name, {
             ...(field || {}),
             _f: {
@@ -8117,7 +8117,7 @@ function createFormControl(props = {}) {
                 field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : props.disabled,
+                    : _options.disabled,
                 name,
                 value: options.value,
             });
@@ -8127,7 +8127,7 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || props.disabled }
+                ? { disabled: options.disabled || _options.disabled }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -8211,6 +8211,12 @@ function createFormControl(props = {}) {
             e.preventDefault && e.preventDefault();
             e.persist && e.persist();
         }
+        if (_options.disabled) {
+            if (onInvalid) {
+                await onInvalid({ ..._formState.errors }, e);
+            }
+            return;
+        }
         let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
@@ -8389,7 +8395,9 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect && fieldRef.select();
+                options.shouldSelect &&
+                    isFunction$1(fieldRef.select) &&
+                    fieldRef.select();
             }
         }
     };
@@ -8590,11 +8598,6 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
-    React.useEffect(() => {
-        if (_formControl.current) {
-            _formControl.current.watch = _formControl.current.watch.bind({});
-        }
-    }, [formState]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
@@ -27011,6 +27014,26 @@ const ADD_ROW_TOP = 'ADD_ROW_TOP';
 const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
 const DELETE_ROW = 'DELETE_ROW';
 const DELETE_COLUMN = 'DELETE_COLUMN';
+const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
+const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
+function setRowHeight(row, height) {
+  return {
+    type: SET_ROW_HEIGHT,
+    payload: {
+      row,
+      height
+    }
+  };
+}
+function setColumnPosition(column, width) {
+  return {
+    type: SET_COLUMN_POSITION,
+    payload: {
+      column,
+      width
+    }
+  };
+}
 function bold(data) {
   return {
     type: BOLD,
@@ -29344,6 +29367,48 @@ function reducer(state, action) {
         }
         return state;
       }
+    case SET_ROW_HEIGHT:
+      {
+        const {
+          row,
+          height
+        } = action.payload;
+        const prevDimensions = state.rowDimensions[row] || {
+          top: 0,
+          height: 0
+        };
+        return {
+          ...state,
+          rowDimensions: {
+            ...state.rowDimensions,
+            [row]: {
+              top: prevDimensions.top,
+              height
+            }
+          }
+        };
+      }
+    case SET_COLUMN_POSITION:
+      {
+        const {
+          column,
+          width
+        } = action.payload;
+        const prevDimensions = state.columnDimensions[column] || {
+          left: 0,
+          width: 0
+        };
+        return {
+          ...state,
+          columnDimensions: {
+            ...state.columnDimensions,
+            [column]: {
+              left: prevDimensions.left,
+              width
+            }
+          }
+        };
+      }
     case DRAG_START:
       {
         return {
@@ -30486,7 +30551,7 @@ const ColumnIndicator = ({
   data
 }) => {
   const dispatch = useDispatch();
-  const [width, setWidth] = React__namespace.useState(100);
+  const columnWidth = useSelector(state => state.columnDimensions[column]?.width || 100);
   const options = [{
     label: 'Add Column',
     value: 'Add Column',
@@ -30504,26 +30569,24 @@ const ColumnIndicator = ({
     },
     disable: false
   }];
-  const onMouseDown = e => {
-    const startX = e.clientX;
+  const onMouseDown = React__namespace.useCallback(event => {
+    onSelect(column, event.shiftKey);
+    const startX = event.clientX;
+    const initialWidth = columnWidth;
     const onMouseMove = moveEvent => {
-      const newWidth = width + (moveEvent.clientX - startX);
-      setWidth(newWidth);
-      const selectedAllRow = document.querySelector('ff-spreadsheet-floating-rect--selected');
-      const selectedSingleRow = document.querySelector('ff-spreadsheet-active-cell');
-      if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
-        selectedAllRow.style.width = `${newWidth}px`;
-        selectedSingleRow.style.width = `${newWidth}px`;
-      }
+      const newWidth = Math.max(100, initialWidth + (moveEvent.clientX - startX));
+      dispatch(setColumnPosition(column, newWidth));
     };
     const onMouseUp = () => {
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
+      dispatch(dragEnd());
     };
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
-  };
-  React__namespace.useCallback(point => dispatch(activate(point)), [dispatch]);
+    dispatch(dragStart());
+  }, [column, columnWidth, dispatch]);
+  const activate$1 = React__namespace.useCallback(point => dispatch(activate(point)), [dispatch]);
   const handleClick = React__namespace.useCallback(event => {
     onSelect(column, event.shiftKey);
   }, [onSelect, column]);
@@ -30541,7 +30604,7 @@ const ColumnIndicator = ({
   }, [onSelect, column, setContextMenu]);
   return jsxRuntime.jsxs("th", {
     style: {
-      minWidth: `${width}px`,
+      minWidth: `${columnWidth}px`,
       position: 'relative'
     },
     className: classNames('ff-spreadsheet-header', {
@@ -30552,8 +30615,10 @@ const ColumnIndicator = ({
     tabIndex: 0,
     children: [label !== undefined ? label : columnIndexToLabel(column), jsxRuntime.jsx("div", {
       onMouseDown: onMouseDown,
-      onClick: () => {
-      },
+      onClick: () => activate$1({
+        row: -1,
+        column
+      }),
       style: {
         zIndex: 'inherit',
         width: '2px',
@@ -30578,7 +30643,7 @@ const enhance$2 = ColumnIndicatorComponent => {
     });
   };
 };
-// Utility function to convert column index to label (e.g., 0 -> A, 1 -> B, etc.)
+const EnhancedColumnIndicator = enhance$2(ColumnIndicator);
 function columnIndexToLabel(column) {
   let label = '';
   let index = column;
@@ -30599,7 +30664,8 @@ const RowIndicator = ({
   deleteRow,
   data
 }) => {
-  const [height, setHeight] = React__namespace.useState(0);
+  const dispatch = useDispatch();
+  const rowHeight = useSelector(state => state.rowDimensions[row]?.height || 28);
   const options = [{
     label: 'Add Row',
     value: 'Add Row',
@@ -30617,25 +30683,24 @@ const RowIndicator = ({
     },
     disable: false
   }];
-  const onMouseDown = e => {
-    const startY = e.clientY;
+  const onMouseDown = React__namespace.useCallback(event => {
+    onSelect(row, event.shiftKey);
+    const startY = event.clientY;
+    const initialHeight = rowHeight;
     const onMouseMove = moveEvent => {
-      const newHeight = height + (moveEvent.clientY - startY);
-      setHeight(newHeight);
-      const selectedAllRow = document.querySelector('.ff-spreadsheet-floating-rect--selected');
-      const selectedSingleRow = document.querySelector('.ff-spreadsheet-active-cell');
-      if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
-        selectedAllRow.style.height = `${newHeight}px`;
-        selectedSingleRow.style.height = `${newHeight}px`;
-      }
+      const newHeight = Math.max(28, initialHeight + (moveEvent.clientY - startY));
+      dispatch(setRowHeight(row, newHeight));
     };
     const onMouseUp = () => {
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
+      dispatch(dragEnd());
     };
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
-  };
+    dispatch(dragEnd());
+  }, [onSelect, rowHeight, row]);
+  const activate$1 = React__namespace.useCallback(point => dispatch(activate(point)), [dispatch]);
   const handleClick = React__namespace.useCallback(event => {
     onSelect(row, event.shiftKey);
   }, [onSelect, row]);
@@ -30653,8 +30718,7 @@ const RowIndicator = ({
   }, [onSelect, row, setContextMenu]);
   return jsxRuntime.jsxs("th", {
     style: {
-      height: `${height}px`,
-      minWidth: '60px',
+      height: `${rowHeight}px`,
       position: 'relative'
     },
     className: classNames('ff-spreadsheet-header', {
@@ -30665,6 +30729,10 @@ const RowIndicator = ({
     tabIndex: 0,
     children: [label !== undefined ? label : row + 1, jsxRuntime.jsx("div", {
       onMouseDown: onMouseDown,
+      onClick: () => activate$1({
+        row,
+        column: -1
+      }),
       style: {
         zIndex: 'inherit',
         height: '2px',
@@ -31058,7 +31126,7 @@ const Copied = () => {
   });
 };
 
-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}";
+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}";
 styleInject(css_248z$f);
 
 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 => {
   }, [props.Cell]);
   const CornerIndicator$1 = React__namespace.useMemo(() => enhance$3(props.CornerIndicator || CornerIndicator), [props.CornerIndicator]);
   const RowIndicator$1 = React__namespace.useMemo(() => enhance$1(props.RowIndicator || RowIndicator), [props.RowIndicator]);
-  const ColumnIndicator$1 = React__namespace.useMemo(() => enhance$2(props.ColumnIndicator || ColumnIndicator), [props.ColumnIndicator]);
+  const ColumnIndicator = React__namespace.useMemo(() => enhance$2(props.ColumnIndicator || EnhancedColumnIndicator), [props.ColumnIndicator]);
   React__namespace.useEffect(() => {
     document.addEventListener('cut', handleCut);
     document.addEventListener('copy', handleCopy);
@@ -31614,14 +31682,14 @@ const Spreadsheet = props => {
   const tableNode = React__namespace.useMemo(() => jsxRuntime.jsxs(Table$1, {
     columns: size.columns,
     children: [jsxRuntime.jsxs(HeaderRow$1, {
-      children: [jsxRuntime.jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsxRuntime.jsx(ColumnIndicator$1, {
+      children: [jsxRuntime.jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsxRuntime.jsx(ColumnIndicator, {
         column: columnNumber,
         setContextMenu: props.setContextMenu,
         label: columnNumber in columnLabels ? columnLabels[columnNumber] : null,
         deleteColumn: deleteColumn$1,
         addColumnLeft: addColumnLeft$1,
         data: props.data
-      }, columnNumber) : jsxRuntime.jsx(ColumnIndicator$1, {
+      }, columnNumber) : jsxRuntime.jsx(ColumnIndicator, {
         column: columnNumber,
         setContextMenu: props.setContextMenu,
         deleteColumn: deleteColumn$1,
@@ -31651,7 +31719,7 @@ const Spreadsheet = props => {
         DataViewer: DataViewer$1
       }, columnNumber))]
     }, rowNumber))]
-  }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator$1, rowLabels, RowIndicator$1, Cell$1, DataViewer$1]);
+  }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator, rowLabels, RowIndicator$1, Cell$1, DataViewer$1]);
   const activeCellNode = React__namespace.useMemo(() => jsxRuntime.jsx(ActiveCell
   // @ts-ignore
   , {
@@ -31719,9 +31787,112 @@ const ExcelContextMenu = ({
   });
 };
 
+const getTextAlignment = alignment => {
+  switch (alignment.toLowerCase()) {
+    case 'left':
+      return 'left';
+    case 'right':
+      return 'right';
+    case 'center':
+      return 'center';
+    case 'justify':
+      return 'justify';
+    default:
+      return 'left';
+  }
+};
+const getTextDecoration = textDecoration => {
+  if (!textDecoration) {
+    return 'solid';
+  }
+  switch (textDecoration.toLowerCase()) {
+    case 'solid':
+      return 'solid';
+    case 'dotted':
+      return 'dotted';
+    case 'dashed':
+      return 'dashed';
+    case 'wavy':
+      return 'wavy';
+    default:
+      return 'solid';
+  }
+};
+const getTextAlignmentBack = alignment => {
+  switch (alignment) {
+    case 'left':
+      return 'left';
+    case 'right':
+      return 'right';
+    case 'center':
+      return 'center';
+    case 'justify':
+      return 'justify';
+    default:
+      return 'left';
+  }
+};
+function convertStyleToFrontend(backendStyle) {
+  return {
+    fontSize: `${backendStyle.size}px`,
+    fontFamily: backendStyle.name,
+    color: `#${backendStyle.color}`,
+    backgroundColor: `#${backendStyle.backgroundColor}`,
+    fontWeight: backendStyle.bold ? 'bold' : 'normal',
+    fontStyle: backendStyle.italic ? 'italic' : 'normal',
+    textDecoration: backendStyle.underline ? 'underline' : 'value',
+    textDecorationStyle: getTextDecoration(backendStyle.underline),
+    borderTop: backendStyle.border.top === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
+    borderRight: backendStyle.border.right === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
+    borderBottom: backendStyle.border.bottom === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
+    borderLeft: backendStyle.border.left === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
+    textAlign: getTextAlignment(backendStyle.alignment.horizontal)
+  };
+}
+const getBorderStyle = border => {
+  if (!border || border === 'none') {
+    return 'NONE';
+  }
+  if (border.includes('solid') || border.includes('dashed') || border.includes('dotted')) {
+    if (border.includes('2px') || border.includes('thin')) {
+      return 'THIN';
+    } else if (border.includes('3px') || border.includes('medium')) {
+      return 'MEDIUM';
+    } else if (border.includes('4px') || border.includes('thick')) {
+      return 'THICK';
+    }
+  }
+  return 'THIN';
+};
+const convertStyleToBackend = frontendStyle => {
+  return {
+    name: frontendStyle.fontFamily || 'Arial',
+    size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
+    bold: frontendStyle.fontWeight === 'bold',
+    italic: frontendStyle.fontStyle === 'italic',
+    underline: "solid",
+    color: frontendStyle.color?.replace('#', '') || '000000',
+    backgroundColor: frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
+    borderColor: frontendStyle.borderTop && frontendStyle.borderTop.toString().includes('solid') ? 'F2F2F2' : '000000',
+    border: {
+      top: getBorderStyle(frontendStyle.borderTop ? frontendStyle.borderTop.toString() : undefined),
+      right: getBorderStyle(frontendStyle.borderRight ? frontendStyle.borderRight.toString() : undefined),
+      bottom: getBorderStyle(frontendStyle.borderBottom ? frontendStyle.borderBottom.toString() : undefined),
+      left: getBorderStyle(frontendStyle.borderLeft ? frontendStyle.borderLeft.toString() : undefined)
+    },
+    alignment: {
+      horizontal: getTextAlignmentBack(frontendStyle.textAlign),
+      vertical: 'BOTTOM',
+      wrapText: false
+    }
+  };
+};
+
 const ExcelFile = ({
   excelData,
-  onSave = () => {}
+  onSave = saveData => {
+    saveData();
+  }
 }) => {
   const [sheetNames, setSheetNames] = React.useState([]);
   const [contextMenu, setContextMenu] = React.useState({
@@ -31808,7 +31979,7 @@ const ExcelFile = ({
             }
             spreadsheetData[rowIndex][colIndex] = {
               value: checkVal(cell.value),
-              style: cell.style,
+              style: convertStyleToFrontend(cell?.style),
               type: true
             };
           }
@@ -31822,12 +31993,49 @@ const ExcelFile = ({
       setSelectedSheetData(newWorksheetsData[firstSheetName]);
     }
   }, []);
+  const onSaveWorksheetData = () => {
+    const savedData = {
+      sheets: sheetNames.map(sheetName => {
+        const sheetData = worksheetsData[sheetName]?.map(row => {
+          const lastIndex = row.reduce((lastIdx, cell, i) => {
+            const hasValueOrTypeTrue = cell && cell.value !== null && !checkEmpty(cell && cell.value) || cell && cell.type === true;
+            return hasValueOrTypeTrue ? i : lastIdx;
+          }, -1);
+          const filteredRow = row.map((cell, index) => {
+            if (cell && cell.value !== null) {
+              return {
+                value: cell.value,
+                styles: convertStyleToBackend(cell.style ?? {})
+              };
+            } else if (cell && cell.type || index <= lastIndex) {
+              return {
+                value: '',
+                styles: convertStyleToBackend(cell?.style ?? {})
+              };
+            }
+            return null;
+          }).filter(cell => cell !== null);
+          return filteredRow.length > 0 ? filteredRow : [];
+        }) || [];
+        const finalData = sheetData.filter((row, index) => {
+          const isNextRowNotEmpty = sheetData.slice(index + 1).some(nextRow => nextRow.length > 0);
+          return row.length > 0 || isNextRowNotEmpty;
+        });
+        return {
+          sheetName: sheetName,
+          data: checkEmpty(finalData.length) ? [[]] : finalData
+        };
+      })
+    };
+    onSave(savedData);
+    toast.success('File saved successfully!');
+  };
   const onEvaluateChange = data => {
     setWorksheetsData(prev => ({
       ...prev,
       [pageRef.current]: data
     }));
-    onSave();
+    onSaveWorksheetData();
   };
   const [editingSheet, setEditingSheet] = React.useState(null);
   const handleAddSheet = () => {
@@ -31867,7 +32075,7 @@ const ExcelFile = ({
     } else {
       setSelectedSheetData([]);
     }
-  }, [selectedSheet.name, worksheetsData]);
+  }, [selectedSheet.name]);
   const handleDeleteSheet = () => {
     const {
       index,