@sheetxl/grid-react 0.7.18 → 0.7.20

package/node/esm/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.7.18
+ * @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.7.20
  *
  * (C) 2025-present SheetXL Inc. & Michael T. Ford
  * License: The license can be found at https://www.sheetxl.com/license.
@@ -554,23 +554,23 @@ const F = ({ itemType: e2, index: t2, itemSize: n2, instanceProps: o2, scale: r2
 });
 we.displayName = "Selection";
 const xe = C(I((t2, n2) => {
-  const { x: o2 = 0, y: r2 = 0, borderWidth: l2 = 1, size: i2 = 6, borderStroke: c2, corner: s2, style: a2, className: d2, background: u2, ...h2 } = t2;
+  const { x: o2 = 0, y: r2 = 0, borderWidth: l2 = 1, size: i2 = 6, borderStroke: c2, corner: s2, style: a2, className: d2, background: u2, ref: h2, ...g2 } = t2;
   if (0 === o2 || 0 === r2) return null;
-  let g2 = true, f2 = true, w2 = true, x2 = true;
+  let f2 = true, w2 = true, x2 = true, p2 = true;
   switch (s2) {
     case "tl":
-      g2 = false, f2 = false;
+      f2 = false, w2 = false;
       break;
     case "bl":
-      g2 = false, x2 = false;
+      f2 = false, p2 = false;
       break;
     case "br":
-      w2 = false, x2 = false;
+      x2 = false, p2 = false;
       break;
     case "tr":
-      f2 = false, w2 = false;
+      w2 = false, x2 = false;
   }
-  return e("div", { className: k("fill-handle", d2), style: { position: "absolute", left: o2 - (i2 + (g2 ? l2 : 0)) / 2, top: r2 - (i2 + (f2 ? l2 : 0)) / 2, width: i2, height: i2, borderLeft: g2 ? `${l2}px ${c2}` : void 0, borderTop: f2 ? `${l2}px ${c2}` : void 0, borderRight: w2 ? `${l2}px ${c2}` : void 0, borderBottom: x2 ? `${l2}px ${c2}` : void 0, background: u2, cursor: "crosshair", pointerEvents: "all", transitionDuration: "0ms", transitionTimingFunction: "linear", transitionDelay: "0", transitionProperty: "left, top", willChange: "left, top", ...a2 }, tabIndex: -1, ...h2 });
+  return e("div", { className: k("fill-handle", d2), style: { position: "absolute", left: o2 - (i2 + (f2 ? l2 : 0)) / 2, top: r2 - (i2 + (w2 ? l2 : 0)) / 2, width: i2, height: i2, borderLeft: f2 ? `${l2}px ${c2}` : void 0, borderTop: w2 ? `${l2}px ${c2}` : void 0, borderRight: x2 ? `${l2}px ${c2}` : void 0, borderBottom: p2 ? `${l2}px ${c2}` : void 0, background: u2, cursor: "crosshair", pointerEvents: "all", transitionDuration: "0ms", transitionTimingFunction: "linear", transitionDelay: "0", transitionProperty: "left, top", willChange: "left, top", ...a2 }, tabIndex: -1, ...g2 });
 }));
 xe.displayName = "FillHandle";
 const pe = i.detectIt().supportsTouchEvents, me = C(I((r2, l2) => {

package/package.json

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

package/types/index.d.ts

@@ -45,26 +45,7 @@ export declare interface AnimatedStrokeProps {
  *
  * @see GridProps
  */
-export declare const BaseGrid: default_2.FC<GridProps & GridRefAttribute>;
-
-export declare type CellEditorAttributes = {
-    /**
-     * When editor is loaded, this will be called. Note this should not use the autoFocus property. here
-     * If this is set the editor focus will be called as appropriate.
-     */
-    startEdit?(event: StartEditEvent): void;
-    submitEdit(): boolean;
-    cancelEdit(): void;
-    /**
-     * Called if the StartEditEvent event has autoFocus set.
-     * @param selector A selector string (or empty means 'default' focus)
-     */
-    autoFocus(selector?: string): void;
-    /**
-     * Returns the default line height.
-     */
-    getLineHeight: () => number;
-};
+export declare const BaseGrid: default_2.NamedExoticComponent<GridProps & default_2.RefAttributes<IGridElement>>;
 
 export declare interface CellEditorProps<CT, DT> extends default_2.HTMLAttributes<HTMLElement>, default_2.Attributes {
     /**
@@ -111,11 +92,11 @@ export declare interface CellEditorProps<CT, DT> extends default_2.HTMLAttribute
      */
     onNavigate?(direction: Direction): void;
     zoom?: number;
-}
-
-export declare type CellEditorRefAttribute = {
+    /**
+     * Reference to the underlying element
+     */
     ref?: default_2.Ref<ICellEditorElement>;
-};
+}
 
 export declare interface CellRendererProps<T = any> extends React.HTMLAttributes<HTMLElement>, React.Attributes {
     /**
@@ -155,19 +136,18 @@ export declare interface CoordOffset {
 
 /**
  * Default cell editor
+ *
  * @param props
  */
-export declare const DefaultCellEditor: default_2.FC<StringCellEditorProps & CellEditorRefAttribute>;
+export declare const DefaultCellEditor: default_2.NamedExoticComponent<Omit<StringCellEditorProps, "ref"> & default_2.RefAttributes<ICellEditorElement>>;
 
 /**
  * Default cell component capable of rendering a value
  * @param props
  */
-export declare const DefaultCellRenderer: default_2.FC<CellRendererProps>;
+export declare const DefaultCellRenderer: default_2.MemoExoticComponent<(props: CellRendererProps) => JSX.Element>;
 
-export declare const DefaultHeaderDivider: default_2.FC<HeaderDividerRendererProps & {
-    ref?: default_2.Ref<IHeaderDividerElement>;
-}>;
+export declare const DefaultHeaderDivider: default_2.NamedExoticComponent<Omit<HeaderDividerRendererProps, "ref"> & default_2.RefAttributes<IHeaderDividerElement>>;
 
 export declare const defaultSelectionRenderer: (props: SelectionProps) => JSX.Element;
 
@@ -219,11 +199,14 @@ export declare interface EditState<CT, DT> {
 /**
  * Fill handle component
  */
-export declare const FillHandle: default_2.FC<FillHandleProps & FillHandleRefAttribute>;
+export declare const FillHandle: default_2.NamedExoticComponent<Omit<FillHandleProps, "ref"> & default_2.RefAttributes<FillHandleElement>>;
 
 export declare interface FillHandleAttributes {
 }
 
+export declare interface FillHandleElement extends HTMLDivElement, FillHandleAttributes {
+}
+
 export declare interface FillHandleProps extends default_2.HTMLAttributes<HTMLDivElement> {
     corner?: string;
     x?: number;
@@ -232,11 +215,11 @@ export declare interface FillHandleProps extends default_2.HTMLAttributes<HTMLDi
     borderWidth?: number;
     borderStroke?: string;
     background?: string;
-}
-
-export declare type FillHandleRefAttribute = {
+    /**
+     * Underlying element reference
+     */
     ref?: default_2.Ref<FillHandleAttributes>;
-};
+}
 
 export declare interface FrozenEdge {
     /**
@@ -251,66 +234,7 @@ export declare interface FrozenEdge {
 
 export declare const getDefaultStringEditState: (clean?: string) => EditState<string, string> | undefined;
 
-export declare const Grid: default_2.FC<GridProps & GridRefAttribute>;
-
-export declare interface GridAttributes {
-    /**
-     * The stage element for the cells
-     */
-    readonly stage: HTMLDivElement | null;
-    /**
-     * The rowCount provided by the properties
-     */
-    readonly rowCount: number;
-    /**
-     * The columnCount provided by the properties
-     */
-    readonly columnCount: number;
-    /**
-     * Invalidate either a cell or a range of cells. If no arguments are provided then the entire grid is invalidated.
-     * @param coords
-     */
-    invalidate: (coords?: CellCoords | RangeCoords) => void;
-    handleWheel: (event: globalThis.WheelEvent) => void;
-    getScrollPosition: () => TopLeft;
-    getViewport: () => RangeCoords;
-    getDimensions: () => {
-        containerWidth: number;
-        containerHeight: number;
-        totalWidth: number;
-        totalHeight: number;
-    };
-    /**
-     * Scroll the cell into view. If the coord does not have an index it will only scroll in a single direction.
-     */
-    scrollCellCoordsIntoView: (coords: Partial<CellCoords>, options?: globalThis.ScrollIntoViewOptions | boolean) => Promise<Partial<TopLeft>>;
-    /**
-     * The grid coordinates relative to the containing div (includes any padding, margins)
-     */
-    getRelativePointFromClient: (x: number, y: number) => Point | null;
-    /**
-     * Returns the view for the given point. If point is
-     * over a frozen pane it will return the frozen pane otherwise
-     * it will return the center view.
-     */
-    getViewFromClient: (x: number, y: number) => GridView;
-    /**
-     * Returns the view for the given coords. If coord is
-     * over a frozen pane it will return the frozen pane otherwise
-     * it will return the center view.
-     */
-    getViewFromCellCoords: (coords: CellCoords) => GridView;
-    /**
-     * Returns null if the view does not exist.
-     */
-    getViewFromLocation: (anchor: AnchorLocation) => GridView | null;
-    /**
-     * Called when the view has been changed.
-     * @remarks
-     * This is only called once.
-     */
-    onViewChangeOnce: (callback: () => void) => void;
-}
+export declare const Grid: default_2.NamedExoticComponent<GridProps & default_2.RefAttributes<IGridElement>>;
 
 export declare interface GridHeaderStyle extends GridSurfaceStyle {
     strokeFillShadow?: string;
@@ -525,14 +449,6 @@ export declare interface GridProps extends default_2.HTMLAttributes<HTMLDivEleme
     clipCells?: boolean;
 }
 
-export declare type GridRefAttribute = {
-    ref?: default_2.Ref<IGridElement>;
-};
-
-export declare interface GridRefProps extends GridProps {
-    ref?: default_2.Ref<HTMLDivElement>;
-}
-
 export declare interface GridStyle extends GridSurfaceStyle {
     body?: GridSurfaceStyle;
     selection?: SelectionStyle;
@@ -752,9 +668,6 @@ export declare interface HeaderDividerAnchorProps extends HeaderDividerProps {
     onDividerAutoFit?: (index: number) => void;
 }
 
-export declare interface HeaderDividerAttributes {
-}
-
 /**
  * HeaderDividers follow the header
  * // TODO - allow negative resizing (before the current) (easy to do I think)
@@ -800,6 +713,10 @@ export declare interface HeaderDividerProps extends default_2.HTMLAttributes<HTM
     headerStyleSelect: GridHeaderStyle;
     headerStyleSelectAll: GridHeaderStyle;
     headerStyleHover?: GridHeaderStyle | ((style: GridHeaderStyle) => GridHeaderStyle);
+    /**
+     * The reference to the element.
+     */
+    ref?: default_2.Ref<IHeaderDividerElement>;
 }
 
 export declare interface HeaderDividerRendererProps extends HeaderDividerProps {
@@ -811,7 +728,7 @@ export declare interface HeaderDividerRendererProps extends HeaderDividerProps {
     onAutoFit: () => void;
 }
 
-export declare const HeaderRenderer: default_2.FC<HeaderRendererCellProps>;
+export declare const HeaderRenderer: default_2.MemoExoticComponent<(props: HeaderRendererCellProps) => JSX.Element>;
 
 export declare interface HeaderRendererCellProps extends CellRendererProps {
     orientation: RangeOrientation;
@@ -840,16 +757,101 @@ export declare interface HeaderSelectionResults {
     getCellCoordsFromClient: (x: number, y: number) => CellCoords;
 }
 
-export declare interface ICellEditorElement extends HTMLDivElement, CellEditorAttributes {
+export declare type ICellEditorAttributes = {
+    /**
+     * When editor is loaded, this will be called. Note this should not use the autoFocus property. here
+     * If this is set the editor focus will be called as appropriate.
+     */
+    startEdit?(event: StartEditEvent): void;
+    submitEdit(): boolean;
+    cancelEdit(): void;
+    /**
+     * Called if the StartEditEvent event has autoFocus set.
+     * @param selector A selector string (or empty means 'default' focus)
+     */
+    autoFocus(selector?: string): void;
+    /**
+     * Returns the default line height.
+     */
+    getLineHeight: () => number;
+};
+
+export declare interface ICellEditorElement extends HTMLDivElement, ICellEditorAttributes {
+}
+
+export declare interface IGridAttributes {
+    /**
+     * The stage element for the cells
+     */
+    readonly stage: HTMLDivElement | null;
+    /**
+     * The rowCount provided by the properties
+     */
+    readonly rowCount: number;
+    /**
+     * The columnCount provided by the properties
+     */
+    readonly columnCount: number;
+    /**
+     * Invalidate either a cell or a range of cells. If no arguments are provided then the entire grid is invalidated.
+     * @param coords
+     */
+    invalidate: (coords?: CellCoords | RangeCoords) => void;
+    handleWheel: (event: globalThis.WheelEvent) => void;
+    getScrollPosition: () => TopLeft;
+    getViewport: () => RangeCoords;
+    getDimensions: () => {
+        containerWidth: number;
+        containerHeight: number;
+        totalWidth: number;
+        totalHeight: number;
+    };
+    /**
+     * Scroll the cell into view. If the coord does not have an index it will only scroll in a single direction.
+     */
+    scrollCellCoordsIntoView: (coords: Partial<CellCoords>, options?: globalThis.ScrollIntoViewOptions | boolean) => Promise<Partial<TopLeft>>;
+    /**
+     * The grid coordinates relative to the containing div (includes any padding, margins)
+     */
+    getRelativePointFromClient: (x: number, y: number) => Point | null;
+    /**
+     * Returns the view for the given point. If point is
+     * over a frozen pane it will return the frozen pane otherwise
+     * it will return the center view.
+     */
+    getViewFromClient: (x: number, y: number) => GridView;
+    /**
+     * Returns the view for the given coords. If coord is
+     * over a frozen pane it will return the frozen pane otherwise
+     * it will return the center view.
+     */
+    getViewFromCellCoords: (coords: CellCoords) => GridView;
+    /**
+     * Returns null if the view does not exist.
+     */
+    getViewFromLocation: (anchor: AnchorLocation) => GridView | null;
+    /**
+     * Called when the view has been changed.
+     * @remarks
+     * This is only called once.
+     */
+    onViewChangeOnce: (callback: () => void) => void;
+    /**
+     * Reference to the underlying element
+     */
+    ref?: default_2.Ref<HTMLDivElement>;
 }
 
 /**
  * Type returned via ref property
  */
-export declare interface IGridElement extends HTMLDivElement, GridAttributes {
+export declare interface IGridElement extends HTMLDivElement, IGridAttributes {
+}
+
+export declare interface IHeaderDividerAttributes {
 }
 
-export declare interface IHeaderDividerElement extends HTMLDivElement, HeaderDividerAttributes {
+export declare interface IHeaderDividerElement extends HTMLDivElement, IHeaderDividerAttributes {
 }
 
 export declare interface LineProps extends default_2.SVGProps<SVGSVGElement> {
@@ -885,7 +887,7 @@ export declare const safeSelectionCoords: (prev?: SelectionCoords) => SelectionC
 /**
  * ScrollableGrid. This wraps BaseGrid and manages bounds to create consistent css behavior for consumers
  */
-export declare const ScrollableGrid: default_2.FC<ScrollableGridProps & ScrollableRefAttribute>;
+export declare const ScrollableGrid: default_2.NamedExoticComponent<Omit<ScrollableGridProps, "ref"> & default_2.RefAttributes<IGridElement>>;
 
 export declare interface ScrollableGridProps extends GridProps, ScrollPaneProps {
     /**
@@ -893,12 +895,12 @@ export declare interface ScrollableGridProps extends GridProps, ScrollPaneProps
      * @param scrollPoint
      */
     onScrollViewport?: (scrollPoint: Partial<TopLeft>) => void;
+    /**
+     * Ref for the HTMLDivElement
+     */
+    ref?: default_2.Ref<IGridElement | IScrollPaneElement | any>;
 }
 
-export declare type ScrollableRefAttribute = {
-    ref?: default_2.Ref<IGridElement | IScrollPaneElement>;
-};
-
 declare const Selection_2: default_2.FC<SelectionProps>;
 export { Selection_2 as Selection }
 
@@ -1063,7 +1065,7 @@ export declare interface TextStyle extends PaintStyle {
 /**
  * TouchSelectHandle component
  */
-export declare const TouchSelectHandle: default_2.NamedExoticComponent<TouchSelectHandleProps & default_2.RefAttributes<TouchSelectHandleElement>>;
+export declare const TouchSelectHandle: default_2.NamedExoticComponent<Omit<TouchSelectHandleProps, "ref"> & default_2.RefAttributes<TouchSelectHandleElement>>;
 
 export declare interface TouchSelectHandleAttributes {
 }
@@ -1102,15 +1104,15 @@ export declare interface TouchSelectHandleProps extends default_2.HTMLAttributes
      * @defaultValue document.body
      */
     scrollableRoot?: HTMLElement;
-}
-
-export declare type TouchSelectHandleRefAttribute = {
+    /**
+     * Reference to the underling element
+     */
     ref?: default_2.Ref<TouchSelectHandleElement>;
-};
-
-export declare interface TouchSelectHandleRefProps extends TouchSelectHandleProps, TouchSelectHandleRefAttribute {
 }
 
+/**
+ * Hook to manage cell layout
+ */
 export declare const useCellLayout: (props: UseCellLayoutProps | null) => CellLayout;
 
 export declare interface UseCellLayoutProps {
@@ -1260,7 +1262,7 @@ export declare interface useKeyboardEditorOverlayOptions {
      * This should not return null but rather can canEdit.
      * This is called during placement after scrolling and other bookkeeping has occurred
      */
-    getCellEditor: (props: CellEditorProps<any, any> & CellEditorRefAttribute, coords: CellCoords) => default_2.ReactElement<CellEditorProps<any, any> & CellEditorRefAttribute>;
+    getCellEditor: (props: CellEditorProps<any, any>, coords: CellCoords) => default_2.ReactElement<CellEditorProps<any, any>>;
     /**
      * Callback fired before editing. Can be used to prevent editing.
      */
@@ -1307,6 +1309,9 @@ export declare interface useKeyboardEditorOverlayOptions {
     alignment?: HorizontalAlignment;
 }
 
+/**
+ * Hook to enable selection in grid
+ */
 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 {