abdul-react 0.0.52 → 0.0.55

package/lib/index.cjs

@@ -37517,7 +37517,6 @@ const ADD_COLUMN_RIGHT = 'ADD_COLUMN_RIGHT';
 const DELETE_ROW = 'DELETE_ROW';
 const DELETE_COLUMN = 'DELETE_COLUMN';
 const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
-const SET_COLUMN_WIDTH = 'SET_COLUMN_WIDTH';
 const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
 const SET_AUTO_FILL = 'SET_AUTO_FILL';
 const SET_EDITABLE = 'SET_EDITABLE';
@@ -37555,15 +37554,6 @@ function setRowHeight(row, height) {
     }
   };
 }
-function setColumnWidth(column, width) {
-  return {
-    type: SET_COLUMN_WIDTH,
-    payload: {
-      column,
-      width
-    }
-  };
-}
 function setColumnPosition(column, width) {
   return {
     type: SET_COLUMN_POSITION,
@@ -40325,7 +40315,7 @@ function reducer(state, action) {
                 top: 0,
                 height: 32
               }),
-              height: Math.max(maxHeight, newRowDimensions?.[rowIndex]?.height ?? 32)
+              height: maxHeight
             };
           });
         }
@@ -40548,21 +40538,6 @@ function reducer(state, action) {
           lastChanged: active
         };
       }
-    case SET_CELL_DATA:
-      {
-        const {
-          active,
-          data: cellData
-        } = action.payload;
-        if (isActiveReadOnly(state) || !state.editable) {
-          return state;
-        }
-        return {
-          ...state,
-          model: updateCellValue(state.model, active, cellData),
-          lastChanged: active
-        };
-      }
     case SET_CELL_DIMENSIONS:
       {
         const {
@@ -40776,28 +40751,6 @@ function reducer(state, action) {
         } = action.payload;
         const prevDimensions = state.rowDimensions[row] || {
           top: 0};
-        let updatedData = state.model.data; // Start with original data
-        // Update all cells in the row with style.height
-        if (updatedData[row]) {
-          // Check if row exists
-          const len = updatedData?.[row]?.length;
-          for (let col = 0; col < len; col++) {
-            const point = {
-              row,
-              column: col
-            };
-            const cell = get$1(point, updatedData) || EmptyCell;
-            const newCell = {
-              ...cell,
-              style: {
-                ...cell.style,
-                height // Set the new height in cell style
-              }
-            };
-            updatedData = set$1(point, newCell, updatedData); // Immutable set
-          }
-        }
-        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
         return {
           ...state,
           rowDimensions: {
@@ -40806,60 +40759,7 @@ function reducer(state, action) {
               top: prevDimensions.top,
               height
             }
-          },
-          model: updatedModel
-        };
-      }
-    case SET_COLUMN_WIDTH:
-      {
-        const {
-          column,
-          width
-        } = action.payload;
-        const prevDimensions = state.columnDimensions[column] || {
-          left: 0};
-        // Narrow first
-        if (!state.model.data) {
-          return {
-            ...state,
-            columnDimensions: {
-              ...state.columnDimensions,
-              [column]: {
-                left: prevDimensions.left,
-                width
-              }
-            }
-          };
-        }
-        let updatedData = state.model.data ?? [];
-        for (let r = 0; r < updatedData.length; r++) {
-          if (updatedData[r] && updatedData?.[r]?.length > column) {
-            const point = {
-              row: r,
-              column
-            };
-            const cell = get$1(point, updatedData) ?? EmptyCell;
-            const newCell = {
-              ...cell,
-              style: {
-                ...(cell.style ?? {}),
-                width
-              }
-            };
-            updatedData = set$1(point, newCell, updatedData);
           }
-        }
-        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
-        return {
-          ...state,
-          columnDimensions: {
-            ...state.columnDimensions,
-            [column]: {
-              left: prevDimensions.left,
-              width
-            }
-          },
-          model: updatedModel
         };
       }
     case SET_COLUMN_POSITION:
@@ -42349,7 +42249,8 @@ const ColumnIndicator = ({
   const dispatch = useDispatch();
   const excelData = useSelector(state => state.model.data);
   const activeCell = useSelector(state => state.active);
-  const columnWidth = useSelector(state => state.columnDimensions[column]?.width ?? minimumColumnWidth);
+  const minColumnWidth = minimumColumnWidth;
+  const columnWidth = useSelector(state => state.columnDimensions[column]?.width || minColumnWidth);
   const matrixData = useSelector(state => state.model.data);
   const {
     columnCount
@@ -42386,7 +42287,7 @@ const ColumnIndicator = ({
       iconName: 'plus_icon',
       action: () => {
         updateVisibleRangeEnd('increment');
-        addColumnLeft(minimumColumnWidth);
+        addColumnLeft(minColumnWidth);
         onAddColumn?.(selectedColumn ?? column, true);
       },
       disableTooltip: 'Column limit reached',
@@ -42398,7 +42299,7 @@ const ColumnIndicator = ({
       iconName: 'plus_icon',
       action: () => {
         updateVisibleRangeEnd('increment');
-        addColumnRight(minimumColumnWidth);
+        addColumnRight(minColumnWidth);
         onAddColumn?.(selectedColumn ?? column, false);
       },
       disableTooltip: 'Column limit reached',
@@ -42417,17 +42318,16 @@ const ColumnIndicator = ({
       visible: checkVisible ? true : false,
       disable: false
     }] : [])];
-  }, [selectedColumn, cell, addColumnLeft, addColumnRight, deleteColumn, minimumColumnWidth, columnCount, maxColLimit, disableDeleteOption, onAddColumn, onDeleteColumn, column, isCellDataChanged]);
+  }, [selectedColumn, cell, addColumnLeft, addColumnRight, deleteColumn, minColumnWidth, 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);
     onSelect(targetColumn, event.shiftKey);
     const startX = event.clientX;
-    const initialWidth = Number(columnWidth);
+    const initialWidth = columnWidth;
     const onMouseMove = moveEvent => {
-      const delta = moveEvent.clientX - startX;
-      const newWidth = Math.max(minimumColumnWidth, initialWidth + delta);
-      dispatch(setColumnWidth(targetColumn, newWidth));
+      const newWidth = Math.max(minColumnWidth, initialWidth + (moveEvent.clientX - startX));
+      dispatch(setColumnPosition(targetColumn, newWidth));
     };
     const onMouseUp = () => {
       document.removeEventListener('mousemove', onMouseMove);
@@ -42465,8 +42365,7 @@ const ColumnIndicator = ({
       'ff-spreadsheet-header--selected': selected
     }),
     style: {
-      width: `${columnWidth}px`,
-      minWidth: '100px'
+      minWidth: `${columnWidth}px`
     },
     onClick: handleClick,
     onContextMenu: contextClick,
@@ -42477,7 +42376,7 @@ const ColumnIndicator = ({
     }), jsxRuntime.jsx("div", {
       className: "drag-column-selector drag-column-left",
       onMouseDown: e => onMouseDrag(e, false),
-      onDoubleClick: () => dispatch(setColumnPosition(column, columnWidth)),
+      onDoubleClick: () => dispatch(setColumnPosition(column, minColumnWidth)),
       onClick: () => activate$1({
         row: -1,
         column
@@ -42485,7 +42384,7 @@ const ColumnIndicator = ({
     }), jsxRuntime.jsx("div", {
       className: "drag-column-selector drag-column-right",
       onMouseDown: e => onMouseDrag(e, true),
-      onDoubleClick: () => dispatch(setColumnPosition(column, columnWidth)),
+      onDoubleClick: () => dispatch(setColumnPosition(column, minColumnWidth)),
       onClick: () => activate$1({
         row: -1,
         column
@@ -42593,7 +42492,6 @@ const RowIndicator = ({
       disable: false
     }] : [])];
   }, [selectedRow, row]);
-  const MIN_ROW_HEIGHT = 32;
   const handleMouseDrag = React__namespace.useCallback((event, isUp) => {
     const getTargetRow = isUp ? row : row - 1;
     const targetRow = Math.max(getTargetRow, 0);
@@ -42601,17 +42499,17 @@ const RowIndicator = ({
     const startY = event.clientY;
     const initialHeight = rowHeight;
     const onMouseMove = moveEvent => {
-      const delta = moveEvent.clientY - startY;
-      const newHeight = Math.max(MIN_ROW_HEIGHT, initialHeight + delta);
+      const newHeight = Math.max(32, initialHeight + (moveEvent.clientY - startY));
       dispatch(setRowHeight(targetRow, newHeight));
     };
     const onMouseUp = () => {
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
-      dispatch(dragEnd()); // only at end
+      dispatch(dragEnd());
     };
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
+    dispatch(dragEnd());
   }, [rowHeight, row]);
   const activate$1 = React__namespace.useCallback(point => dispatch(activate(point)), [dispatch]);
   const handleClick = React__namespace.useCallback(event => {
@@ -42641,7 +42539,7 @@ const RowIndicator = ({
     }),
     style: {
       height: `${rowHeight}px`,
-      minHeight: '32px'
+      minWidth: '60px'
     },
     onClick: handleClick,
     onContextMenu: contextClick,
@@ -42652,7 +42550,7 @@ const RowIndicator = ({
     }), jsxRuntime.jsx("div", {
       className: "drag-row-selector drag-row-down",
       onMouseDown: e => handleMouseDrag(e, true),
-      onDoubleClick: () => dispatch(setRowHeight(row, rowHeight)),
+      onDoubleClick: () => dispatch(setRowHeight(row, 32)),
       onClick: () => activate$1({
         row,
         column: -1
@@ -42660,7 +42558,7 @@ const RowIndicator = ({
     }), jsxRuntime.jsx("div", {
       className: "drag-row-selector drag-row-up",
       onMouseDown: e => handleMouseDrag(e, false),
-      onDoubleClick: () => dispatch(setRowHeight(row, rowHeight)),
+      onDoubleClick: () => dispatch(setRowHeight(row, 32)),
       onClick: () => activate$1({
         row,
         column: -1
@@ -42686,7 +42584,7 @@ const enhance$1 = RowIndicatorComponent => {
   };
 };
 
-const Cell = /*#__PURE__*/React__namespace.memo(({
+const Cell = ({
   row,
   column,
   DataViewer,
@@ -42727,14 +42625,13 @@ const Cell = /*#__PURE__*/React__namespace.memo(({
     const root = rootRef.current;
     if (!root) return;
     const updateDimensions = () => {
-      if (dragging) return;
       setCellDimensions(point, getOffsetRect(root));
     };
     updateDimensions();
     const observer = new ResizeObserver(updateDimensions);
     observer.observe(root);
     return () => observer.disconnect();
-  }, [setCellDimensions, point, dragging]);
+  }, [setCellDimensions, point]);
   if (data && data.DataViewer) {
     DataViewer = data.DataViewer;
   }
@@ -42762,7 +42659,7 @@ const Cell = /*#__PURE__*/React__namespace.memo(({
       inputValue: () => null
     })
   });
-});
+};
 const enhance = CellComponent => {
   return function CellWrapper(props) {
     const {
@@ -42960,8 +42857,6 @@ const DataEditor = ({
       className: "ff-spreadsheet-cell-textarea",
       style: {
         ...cell?.style,
-        width: '100%',
-        height: '100%',
         borderTop: '',
         borderBottom: '',
         borderLeft: '',
@@ -43353,7 +43248,7 @@ const ActiveCell = props => {
   const handleMouseDown = React__namespace.useCallback(() => {
     if (active) {
       autoFill$1(true);
-      activate$1(active);
+      // activate(active);
     }
   }, [activate$1, autoFill$1, active]);
   const contextClick = React__namespace.useCallback(event => {
@@ -43371,6 +43266,8 @@ const ActiveCell = props => {
       activate$1(active);
     }
   }, [active, isDragged]);
+  const availableWidth = props.isAtRight ? props.maxWidth - (dimensions?.left - props.scrollPos.left) + 100 : props.maxWidth;
+  const availableHeight = props.isAtBottom ? props.maxHeight - (dimensions?.top - props.scrollPos.top) + 64 : props.maxHeight;
   return jsxRuntime.jsxs("div", {
     ref: rootRef,
     className: classNames('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`, {
@@ -43382,10 +43279,13 @@ const ActiveCell = props => {
       ...dimensions,
       backgroundColor: cell?.style?.backgroundColor,
       ...(mode === 'edit' && active ? {
-        minWidth: dimensions?.width,
-        minHeight: dimensions?.height,
+        minWidth: Math.min(dimensions?.width, props.maxWidth),
+        minHeight: Math.min(dimensions?.height, props.maxHeight),
         height: 'auto',
-        width: 'auto'
+        width: 'max-content',
+        maxWidth: `${availableWidth}px`,
+        maxHeight: `${availableHeight}px`,
+        overflow: 'auto'
       } : {})
     },
     onContextMenu: contextClick,
@@ -43442,8 +43342,6 @@ const ActiveCell = props => {
       className: "ff-spreadsheet-cell-textarea",
       style: {
         ...cell?.style,
-        height: '100%',
-        width: '100%',
         textDecoration: cell?.style?.textDecoration === 'underline' ? 'underline' : 'none',
         backgroundColor: isDragged ? '#1e161f00' : cell?.style?.backgroundColor,
         pointerEvents: 'none',
@@ -43452,10 +43350,10 @@ const ActiveCell = props => {
         borderLeft: '',
         borderRight: ''
       }
-    }), !['file'].includes(cell?.inputType?.type ?? '') && jsxRuntime.jsx("div", {
+    }), !['file'].includes(cell?.inputType?.type ?? '') && (mode === 'edit' || active && jsxRuntime.jsx("div", {
       onMouseDown: handleMouseDown,
       className: "select_dot"
-    })]
+    }))]
   });
 };
 
@@ -43673,9 +43571,7 @@ function convertStyleToFrontend(backendStyle) {
     borderBottom: borderBottom,
     borderLeft: borderLeft,
     textAlign: getTextAlignment(backendStyle.alignment.horizontal),
-    alignContent: getTextAlignment(backendStyle.alignment.vertical),
-    height: backendStyle.height ?? 32,
-    width: backendStyle.width ?? 150
+    alignContent: getTextAlignment(backendStyle.alignment.vertical)
   };
 }
 const getBorderStyle = border => {
@@ -43711,9 +43607,7 @@ const convertStyleToBackend = frontendStyle => {
       horizontal: getTextAlignmentBack(frontendStyle.textAlign),
       vertical: getTextAlignmentBack(frontendStyle.alignContent),
       wrapText: false
-    },
-    width: frontendStyle.width || 150,
-    height: frontendStyle.height || 32
+    }
   };
 };
 
@@ -44123,48 +44017,18 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
     top: 0,
     left: 0
   });
+  const [isAtBottom, setIsAtBottom] = React__namespace.useState(false);
+  const [isAtRight, setIsAtRight] = React__namespace.useState(false);
   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);
-        }
-      });
-      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);
-        }
-      });
-      newColumnDimensions[col] = {
-        left: 0,
-        width: maxWidth
-      };
-    }
     setSheetChange(prev => !prev);
     return {
       ...INITIAL_STATE,
       model,
-      selected: props.selected || INITIAL_STATE.selected,
-      rowDimensions: newRowDimensions,
-      columnDimensions: newColumnDimensions
+      selected: props.selected || INITIAL_STATE.selected
     };
-  }, [props.createFormulaParser, props.data, props.selected, props.minimumColumnWidth]);
+  }, [props.createFormulaParser, props.data, props.selected]);
   const reducerElements = React__namespace.useReducer(reducer, initialState);
   const [state, dispatch] = reducerElements;
   const size = React__namespace.useMemo(() => {
@@ -44277,10 +44141,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();
+  let prevDataPropRef = React__namespace.useRef(props.data);
   React__namespace.useEffect(() => {
     setEditable(editable$1);
-    if (prevDataPropRef.current !== undefined && props.data !== prevDataPropRef.current) {
+    if (props.data !== prevDataPropRef.current) {
       setData$1(props.data);
     }
     prevDataPropRef.current = props.data;
@@ -44423,6 +44287,8 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
       start: newRowStart,
       end: newRowEnd
     });
+    const atBottom = newRowEnd === size.rows;
+    setIsAtBottom(atBottom);
     // ----- For columns (NEW) -----
     let newColStart = 0;
     while (newColStart < size.columns && getCumulativeWidth(newColStart) < scrollLeft) {
@@ -44438,6 +44304,8 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
       start: newColStart,
       end: newColEnd
     });
+    const atRight = newColEnd === size.columns;
+    setIsAtRight(atRight);
     // Close context menu on scroll
     if (contextMenu.open) {
       setContextMenu({
@@ -44579,7 +44447,7 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
           // @ts-ignore
           DataViewer: DataViewer$1,
           editable: editable$1
-        }, `${rowNumber}-${columnNumber}`)), jsxRuntime.jsx("div", {
+        }, columnNumber)), jsxRuntime.jsx("div", {
           className: "spacer right"
         })]
       }, rowNumber)), jsxRuntime.jsx("tr", {
@@ -44598,8 +44466,14 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
     DataEditor: DataEditor$1,
     visibleRowRange: visibleRowRange,
     visibleColRange: visibleColRange,
+    maxHeight: maxHeight - 64,
+    maxWidth: maxWidth - minimumColumnWidth,
+    totalHeight: totalHeight,
+    totalWidth: totalWidth,
+    isAtBottom: isAtBottom,
+    isAtRight: isAtRight,
     scrollPos: scrollPos
-  }), [DataEditor$1, visibleRowRange, visibleColRange, scrollPos]);
+  }), [DataEditor$1, visibleRowRange, visibleColRange, state.active, maxHeight, maxWidth, totalHeight, totalWidth, isAtBottom, isAtRight]);
   const rootNode = React__namespace.useMemo(() => jsxRuntime.jsxs("div", {
     className: "ff-excel-spreadsheet-container",
     children: [jsxRuntime.jsx("div", {
@@ -45080,7 +44954,7 @@ const ExcelFile = ({
   };
   const handleNameChange = (event, index, name) => {
     const target = event.target;
-    if (!target || target?.textContent?.trim() === name?.trim()) {
+    if (!target || target?.textContent?.trim()?.toLowerCase() === name?.trim()?.toLowerCase()) {
       setEditingSheet(null);
       return;
     }