@sheetxl/grid-react 0.4.22 → 0.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sheetxl/grid-react",
   "description": "Grid React - Advanced grid component for React",
-  "version": "0.4.22",
+  "version": "0.5.1",
   "license": "SEE LICENSE IN <LICENSE>",
   "type": "module",
   "exports": {
@@ -30,8 +30,8 @@
     "table"
   ],
   "dependencies": {
-    "@sheetxl/utils": "^0.4.22",
-    "@sheetxl/utils-react": "^0.4.22",
+    "@sheetxl/utils": "^0.5.1",
+    "@sheetxl/utils-react": "^0.5.1",
     "clsx": "^2.1.1",
     "react-merge-refs": "^3.0.2",
     "react-use": "^17.6.0",

package/types/index.d.ts

@@ -1063,7 +1063,7 @@ export declare interface TextStyle extends PaintStyle {
 /**
  * TouchSelectHandle component
  */
-export declare const TouchSelectHandle: default_2.FC<TouchSelectHandleRefProps>;
+export declare const TouchSelectHandle: default_2.NamedExoticComponent<TouchSelectHandleProps & default_2.RefAttributes<TouchSelectHandleElement>>;
 
 export declare interface TouchSelectHandleAttributes {
 }
@@ -1111,6 +1111,44 @@ export declare type TouchSelectHandleRefAttribute = {
 export declare interface TouchSelectHandleRefProps extends TouchSelectHandleProps, TouchSelectHandleRefAttribute {
 }
 
+/**
+ * Enhanced version of useMeasure that provides real-time measurements during animations.
+ *
+ * Use for components that don't sit within the component hierarchy but could be animated.
+ * (for examples portal elements; menus, tooltips)
+ *
+ * Unlike the standard useMeasure hook which relies on ResizeObserver (which doesn't trigger
+ * during CSS transform animations), this hook actively monitors element bounds using
+ * requestAnimationFrame and CSS animation/transition events.
+ *
+ * @remarks
+ * - Monitors all bounds properties: x, y, width, height, top, left, right, bottom
+ * - Detects animations on the element itself and all parent elements
+ * - Uses both position polling and event-based detection for optimal performance
+ * - Automatically stops monitoring when animations complete to save resources
+ *
+ * @example
+ * ```tsx
+ * const [ref, bounds] = useAnimatedMeasure<HTMLDivElement>();
+ *
+ * return (
+ *   <div ref={ref} style={{ transform: 'translateX(100px)' }}>
+ *     Position: {bounds?.x}, {bounds?.y}
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useAnimatedMeasure<T extends Element = HTMLDivElement>(options?: UseAnimatedMeasureOptions): readonly [(node: T | null) => void, UseMeasureRect];
+
+export declare interface UseAnimatedMeasureOptions {
+    /** Threshold in pixels for detecting bounds changes (default: 0.1) */
+    threshold?: number;
+    /** Number of frames without movement to consider animation stopped (default: 3) */
+    stillnessThreshold?: number;
+    /** Maximum parent elements to monitor for animations (default: 50) */
+    maxHierarchyDepth?: number;
+}
+
 export declare const useCellLayout: (props: UseCellLayoutProps | null) => CellLayout;
 
 export declare interface UseCellLayoutProps {
@@ -1307,6 +1345,8 @@ export declare interface useKeyboardEditorOverlayOptions {
     alignment?: HorizontalAlignment;
 }
 
+declare type UseMeasureRect = Pick<DOMRectReadOnly, 'x' | 'y' | 'top' | 'left' | 'right' | 'bottom' | 'height' | 'width'>;
+
 export declare const useSelection: ({ gridRef, commands, layout, selection: propSelection, onSelectionChange: propOnSelectionChange, onSelectionDragStart: propOnSelectionDragStart, onSelectionDragEnd: propOnSelectionDragEnd, selectionPolicy, newSelectionMode, allowDeselectSelection, onFillPreview: propOnFillPreview, onFillCancel: propOnFillCancel, onFillDone: propOnFillDone, onFill: propOnFill, disableFillDrag, fillHandleBorderColor, hiddenRowsAt: propHiddenRowsAt, hiddenColumnsAt: propHiddenColumnsAt, isContentfulCell: propsIsContentfulCell, contentfulCellFinder: propContentfulCellFinder, getDataCoords, alwaysScrollToActiveCoords, selectionBounds: propSelectionBounds, pointerDownInterceptor, pointerMoveInterceptor, mergedRanges, canSelectionSpanMergedCells, onMoveDragStart: propOnMoveDragStart, onMoveDragUpdate: propOnMoveDragUpdate, onMoveDragEnd: propOnMoveDragEnd, onMoveDragDone: propOnMoveDragDone, selectionRenderer: propSelectionRenderer, disableMoveDrag, getCellCoordsAsRangeCoords, moveDragHitSize, moveDragOutlineSize, selectionBackgroundColor, selectionBorderColor, selectionRemoveBorderColor, selectionRemoveBackgroundColor, disableTouchSelection, touchSelectHandleProps, }: UseSelectionOptions) => SelectionResults;
 
 export declare interface UseSelectionOptions {