abdul-react 0.0.37 → 0.0.38

package/lib/index.cjs

@@ -40214,12 +40214,15 @@ function reducer(state, action) {
         updatedData.forEach((rowData, rowIndex) => {
           let maxHeight = 32; // Default row height
           rowData.forEach((cell, _colIndex) => {
-            if (cell && cell.value) {
-              const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
-              const lineHeight = Math.max(fontSize * 1.2, 18);
-              const lines = String(cell.value).split('\n').length;
-              const cellHeight = lineHeight * lines + 10;
-              maxHeight = Math.max(Number(cell?.style?.height) ?? maxHeight, cellHeight);
+            if (cell) {
+              maxHeight = Math.max(maxHeight, Number(cell.style?.height ?? 32));
+              if (cell.value) {
+                const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+                const lineHeight = Math.max(fontSize * 1.2, 18);
+                const lines = String(cell.value).split('\n').length;
+                const cellHeight = lineHeight * lines + 10;
+                maxHeight = Math.max(maxHeight, cellHeight);
+              }
             }
           });
           newRowDimensions[rowIndex] = {
@@ -40236,10 +40239,13 @@ function reducer(state, action) {
           let maxWidth = 100; // Default column width
           updatedData.forEach((rowData, _rowIndex) => {
             const cell = rowData[col];
-            if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
-              const font = getFontString(cell);
-              const textWidth = measureText(String(cell.value), font) + 20;
-              maxWidth = Math.max(Number(cell?.style?.width) ?? maxWidth, textWidth);
+            if (cell) {
+              maxWidth = Math.max(maxWidth, Number(cell.style?.width ?? 100));
+              if (cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+                const font = getFontString(cell);
+                const textWidth = measureText(String(cell.value), font) + 20;
+                maxWidth = Math.max(maxWidth, textWidth);
+              }
             }
           });
           newColumnDimensions[col] = {
@@ -40343,7 +40349,9 @@ function reducer(state, action) {
         } = action.payload;
         const nextActive = state.active && has$1(state.active, data) ? state.active : null;
         const nextSelected = state.selected.normalizeTo(data);
-        const updatedModel = new Model(state.model.createFormulaParser, data);
+        // Ensure data is a valid array; fallback to empty matrix if invalid
+        const updatedData = Array.isArray(data) && data.every(row => Array.isArray(row)) ? data : [[EmptyCell]];
+        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
         // Auto-resize all rows and columns on initial load
         let newRowDimensions = {
           ...state.rowDimensions
@@ -40352,15 +40360,18 @@ function reducer(state, action) {
           ...state.columnDimensions
         };
         // Auto-resize all rows
-        data.forEach((rowData, rowIndex) => {
+        updatedData.forEach((rowData, rowIndex) => {
           let maxHeight = 32; // Default row height
           rowData.forEach((cell, _colIndex) => {
-            if (cell && cell.value) {
-              const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
-              const lineHeight = Math.max(fontSize * 1.2, 18);
-              const lines = String(cell.value).split('\n').length;
-              const cellHeight = lineHeight * lines + 10;
-              maxHeight = Math.max(Number(cell?.style?.height) ?? maxHeight, cellHeight);
+            if (cell) {
+              maxHeight = Math.max(maxHeight, Number(cell.style?.height ?? 32));
+              if (cell.value) {
+                const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+                const lineHeight = Math.max(fontSize * 1.2, 18);
+                const lines = String(cell.value).split('\n').length;
+                const cellHeight = lineHeight * lines + 10;
+                maxHeight = Math.max(maxHeight, cellHeight);
+              }
             }
           });
           newRowDimensions[rowIndex] = {
@@ -40372,15 +40383,18 @@ function reducer(state, action) {
           };
         });
         // Auto-resize all columns
-        const columnCount = data[0] ? data[0].length : 0;
+        const columnCount = updatedData[0] ? updatedData[0].length : 0;
         for (let col = 0; col < columnCount; col++) {
           let maxWidth = 100; // Default column width
-          data.forEach((rowData, _rowIndex) => {
+          updatedData.forEach((rowData, _rowIndex) => {
             const cell = rowData[col];
-            if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
-              const font = getFontString(cell);
-              const textWidth = measureText(String(cell.value), font) + 20;
-              maxWidth = Math.max(Number(cell?.style?.width) ?? maxWidth, textWidth);
+            if (cell) {
+              maxWidth = Math.max(maxWidth, Number(cell.style?.width ?? 100));
+              if (cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+                const font = getFontString(cell);
+                const textWidth = measureText(String(cell.value), font) + 20;
+                maxWidth = Math.max(maxWidth, textWidth);
+              }
             }
           });
           newColumnDimensions[col] = {
@@ -40528,15 +40542,18 @@ function reducer(state, action) {
           debouncedResize(`resize-${active.row}-${active.column}`, () => {
             // Auto-resize row
             const rowData = updatedModel.data[active.row] || [];
-            let maxRowHeight = 32; // Default row height
+            let maxHeight = 32; // Default row height
             // Only check this row's cells for height calculation
             rowData.forEach((cell, _colIndex) => {
-              if (cell && cell.value) {
-                const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
-                const lineHeight = Math.max(fontSize * 1.2, 18);
-                const lines = String(cell.value).split('\n').length;
-                const cellHeight = lineHeight * lines + 10;
-                maxRowHeight = Math.max(Number(cell?.style?.height) ?? maxRowHeight, cellHeight);
+              if (cell) {
+                maxHeight = Math.max(maxHeight, Number(cell.style?.height ?? 32));
+                if (cell.value) {
+                  const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+                  const lineHeight = Math.max(fontSize * 1.2, 18);
+                  const lines = String(cell.value).split('\n').length;
+                  const cellHeight = lineHeight * lines + 10;
+                  maxHeight = Math.max(maxHeight, cellHeight);
+                }
               }
             });
             newRowDimensions[active.row] = {
@@ -40544,17 +40561,20 @@ function reducer(state, action) {
                 top: 0,
                 height: 32
               }),
-              height: maxRowHeight
+              height: maxHeight
             };
             // Auto-resize column
-            let maxColWidth = 100; // Default column width
+            let maxWidth = 100; // Default column width
             // Only check this column's cells for width calculation
             updatedModel.data.forEach((rowData, _rowIndex) => {
               const cell = rowData[active.column];
-              if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
-                const font = getFontString(cell);
-                const textWidth = measureText(String(cell.value), font) + 20;
-                maxColWidth = Math.max(Number(cell?.style?.width) ?? maxColWidth, textWidth);
+              if (cell) {
+                maxWidth = Math.max(maxWidth, Number(cell.style?.width ?? 100));
+                if (cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+                  const font = getFontString(cell);
+                  const textWidth = measureText(String(cell.value), font) + 20;
+                  maxWidth = Math.max(maxWidth, textWidth);
+                }
               }
             });
             newColumnDimensions[active.column] = {
@@ -40562,7 +40582,7 @@ function reducer(state, action) {
                 left: 0,
                 width: 100
               }),
-              width: maxColWidth
+              width: maxWidth
             };
           }, 300 // 300ms delay
           );
@@ -41091,12 +41111,15 @@ function reducer(state, action) {
           const rowData = model.data[row] || [];
           let maxHeight = 32;
           rowData.forEach((cell, _colIndex) => {
-            if (cell && cell.value) {
-              const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
-              const lineHeight = Math.max(fontSize * 1.2, 18);
-              const lines = String(cell.value).split('\n').length;
-              const cellHeight = lineHeight * lines + 10;
-              maxHeight = Math.max(Number(cell?.style?.height) ?? maxHeight, cellHeight);
+            if (cell) {
+              maxHeight = Math.max(maxHeight, Number(cell.style?.height ?? 32));
+              if (cell.value) {
+                const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+                const lineHeight = Math.max(fontSize * 1.2, 18);
+                const lines = String(cell.value).split('\n').length;
+                const cellHeight = lineHeight * lines + 10;
+                maxHeight = Math.max(maxHeight, cellHeight);
+              }
             }
           });
           newRowDimensions[row] = {
@@ -41112,10 +41135,13 @@ function reducer(state, action) {
           let maxWidth = 100;
           model.data.forEach((rowData, _rowIndex) => {
             const cell = rowData[col];
-            if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
-              const font = getFontString(cell);
-              const textWidth = measureText(String(cell.value), font) + 20;
-              maxWidth = Math.max(Number(cell?.style?.width) ?? maxWidth, textWidth);
+            if (cell) {
+              maxWidth = Math.max(maxWidth, Number(cell.style?.width ?? 100));
+              if (cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+                const font = getFontString(cell);
+                const textWidth = measureText(String(cell.value), font) + 20;
+                maxWidth = Math.max(maxWidth, textWidth);
+              }
             }
           });
           newColumnDimensions[col] = {
@@ -41136,15 +41162,7 @@ function reducer(state, action) {
       throw new Error('Unknown action');
   }
 }
-// const reducer = createReducer(INITIAL_STATE, (builder) => {
-//   builder.addMatcher(
-//     (action) =>
-//       action.type === Actions.copy.type || action.type === Actions.cut.type,
-//     (state, action) => {
-//     }
-//   );
-// });
-// // Shared reducers
+// Shared reducers
 
 var scheduler = {exports: {}};
 
@@ -42484,7 +42502,7 @@ const ColumnIndicator = ({
   const dispatch = useDispatch();
   const excelData = useSelector(state => state.model.data);
   const activeCell = useSelector(state => state.active);
-  const minColumnWidth = minimumColumnWidth ?? 100;
+  const columnWidth = useSelector(state => state.columnDimensions[column]?.width ?? 100);
   const matrixData = useSelector(state => state.model.data);
   const {
     columnCount
@@ -42513,7 +42531,6 @@ const ColumnIndicator = ({
       return value;
     });
   };
-  const columnWidth = useSelector(state => state.columnDimensions[column]?.width ?? minColumnWidth);
   const options = React.useMemo(() => {
     const checkVisible = cell?.contextDisable?.['Delete Column'] && isCellDataChanged();
     return [{
@@ -42522,7 +42539,7 @@ const ColumnIndicator = ({
       iconName: 'plus_icon',
       action: () => {
         updateVisibleRangeEnd('increment');
-        addColumnLeft(minColumnWidth);
+        addColumnLeft(minimumColumnWidth);
         onAddColumn?.(selectedColumn ?? column, true);
       },
       disableTooltip: 'Column limit reached',
@@ -42534,7 +42551,7 @@ const ColumnIndicator = ({
       iconName: 'plus_icon',
       action: () => {
         updateVisibleRangeEnd('increment');
-        addColumnRight(minColumnWidth);
+        addColumnRight(minimumColumnWidth);
         onAddColumn?.(selectedColumn ?? column, false);
       },
       disableTooltip: 'Column limit reached',
@@ -42553,8 +42570,7 @@ const ColumnIndicator = ({
       visible: checkVisible ? true : false,
       disable: false
     }] : [])];
-  }, [selectedColumn, cell, addColumnLeft, addColumnRight, deleteColumn, minColumnWidth, columnCount, maxColLimit, disableDeleteOption, onAddColumn, onDeleteColumn, column, isCellDataChanged]);
-  const MIN_COLUMN_WIDTH = minimumColumnWidth || 100;
+  }, [selectedColumn, cell, addColumnLeft, addColumnRight, deleteColumn, minimumColumnWidth, columnCount, maxColLimit, disableDeleteOption, onAddColumn, onDeleteColumn, column, isCellDataChanged]);
   const onMouseDrag = React__namespace.useCallback((event, isRight) => {
     const getTargetColumn = isRight ? column - 1 : column;
     const targetColumn = Math.max(getTargetColumn, 0);
@@ -42563,7 +42579,7 @@ const ColumnIndicator = ({
     const initialWidth = Number(columnWidth);
     const onMouseMove = moveEvent => {
       const delta = moveEvent.clientX - startX;
-      const newWidth = Math.max(MIN_COLUMN_WIDTH, initialWidth + delta);
+      const newWidth = Math.max(minimumColumnWidth, initialWidth + delta);
       dispatch(setColumnWidth(targetColumn, newWidth));
     };
     const onMouseUp = () => {
@@ -42601,6 +42617,10 @@ const ColumnIndicator = ({
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
     }),
+    style: {
+      width: `${columnWidth}px`,
+      minWidth: '100px'
+    },
     onClick: handleClick,
     onContextMenu: contextClick,
     tabIndex: 0,
@@ -42610,7 +42630,7 @@ const ColumnIndicator = ({
     }), jsxRuntime.jsx("div", {
       className: "drag-column-selector drag-column-left",
       onMouseDown: e => onMouseDrag(e, false),
-      onDoubleClick: () => dispatch(setColumnPosition(column, minColumnWidth)),
+      onDoubleClick: () => dispatch(setColumnPosition(column, columnWidth)),
       onClick: () => activate$1({
         row: -1,
         column
@@ -42618,7 +42638,7 @@ const ColumnIndicator = ({
     }), jsxRuntime.jsx("div", {
       className: "drag-column-selector drag-column-right",
       onMouseDown: e => onMouseDrag(e, true),
-      onDoubleClick: () => dispatch(setColumnPosition(column, minColumnWidth)),
+      onDoubleClick: () => dispatch(setColumnPosition(column, columnWidth)),
       onClick: () => activate$1({
         row: -1,
         column
@@ -42774,7 +42794,7 @@ const RowIndicator = ({
     }),
     style: {
       height: `${rowHeight}px`,
-      minWidth: '60px'
+      minHeight: '32px'
     },
     onClick: handleClick,
     onContextMenu: contextClick,
@@ -44236,13 +44256,57 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
   const initialState = React__namespace.useMemo(() => {
     const createParser = props.createFormulaParser || createFormulaParser;
     const model = new Model(createParser, props.data);
+    let newRowDimensions = {};
+    let newColumnDimensions = {};
+    props.data.forEach((rowData, rowIndex) => {
+      let maxHeight = DEFAULT_ROW_HEIGHT;
+      rowData.forEach(cell => {
+        if (cell) {
+          const cellHeight = parseFloat(String(cell.style?.height).replace('px', '')) || DEFAULT_ROW_HEIGHT;
+          maxHeight = Math.max(maxHeight, cellHeight);
+          if (cell.value) {
+            const fontSize = parseFloat(String(cell.style?.fontSize).replace('px', '')) || 11;
+            const lineHeight = Math.max(fontSize * 1.2, 18);
+            const lines = String(cell.value).split('\n').length;
+            const contentHeight = lineHeight * lines + 10;
+            maxHeight = Math.max(maxHeight, contentHeight);
+          }
+        }
+      });
+      newRowDimensions[rowIndex] = {
+        top: 0,
+        height: maxHeight
+      };
+    });
+    const columnCount = props.data[0] ? props.data[0].length : 0;
+    for (let col = 0; col < columnCount; col++) {
+      let maxWidth = DEFAULT_COLUMN_WIDTH;
+      props.data.forEach(rowData => {
+        const cell = rowData[col];
+        if (cell) {
+          const cellWidth = parseFloat(String(cell.style?.width).replace('px', '')) || DEFAULT_COLUMN_WIDTH;
+          maxWidth = Math.max(maxWidth, cellWidth);
+          if (cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+            const font = getFontString(cell);
+            const textWidth = measureText(String(cell.value), font) + 20;
+            maxWidth = Math.max(maxWidth, textWidth);
+          }
+        }
+      });
+      newColumnDimensions[col] = {
+        left: 0,
+        width: maxWidth
+      };
+    }
     setSheetChange(prev => !prev);
     return {
       ...INITIAL_STATE,
       model,
-      selected: props.selected || INITIAL_STATE.selected
+      selected: props.selected || INITIAL_STATE.selected,
+      rowDimensions: newRowDimensions,
+      columnDimensions: newColumnDimensions
     };
-  }, [props.createFormulaParser, props.data, props.selected]);
+  }, [props.createFormulaParser, props.data, props.selected, props.minimumColumnWidth]);
   const reducerElements = React__namespace.useReducer(reducer, initialState);
   const [state, dispatch] = reducerElements;
   const size = React__namespace.useMemo(() => {
@@ -44355,10 +44419,10 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
     prevSelectedPropRef.current = props.selected;
   }, [props.selected, setSelection$1]);
   // Update data when props.data changes
-  let prevDataPropRef = React__namespace.useRef(props.data);
+  let prevDataPropRef = React__namespace.useRef();
   React__namespace.useEffect(() => {
     setEditable(editable$1);
-    if (props.data !== prevDataPropRef.current) {
+    if (prevDataPropRef.current !== undefined && props.data !== prevDataPropRef.current) {
       setData$1(props.data);
     }
     prevDataPropRef.current = props.data;
@@ -44523,7 +44587,7 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
     requestAnimationFrame(() => {
       let scrollTop = 0;
       for (let r = 0; r <= row; r++) {
-        scrollTop += state.rowDimensions?.[r]?.height || DEFAULT_ROW_HEIGHT;
+        scrollTop += state.rowDimensions[r]?.height || DEFAULT_ROW_HEIGHT;
       }
       requestAnimationFrame(() => {
         if (!rootRef.current) return;
@@ -44542,7 +44606,7 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
     requestAnimationFrame(() => {
       let scrollLeft = 0;
       for (let c = 0; c <= column; c++) {
-        scrollLeft += state.columnDimensions?.[c]?.width || DEFAULT_COLUMN_WIDTH;
+        scrollLeft += state.columnDimensions[c]?.width || DEFAULT_COLUMN_WIDTH;
       }
       requestAnimationFrame(() => {
         if (!rootRef.current) return;