sheet-happens 0.0.43 → 0.0.44

package/dist/keyboard.d.ts

@@ -0,0 +1,8 @@
+import { RefObject, KeyboardEvent } from 'react';
+import { CellContentType, CellPropertyFunction, CellPropertyStyledFunction, Change, Rectangle, XY } from './types';
+export declare const useKeyboard: (arrowKeyCommitMode: boolean, overlayRef: RefObject<HTMLDivElement>, cellReadOnly: CellPropertyFunction<boolean | null>, displayData: CellPropertyStyledFunction<CellContentType>, editCell: XY, editMode: boolean, focused: boolean, rawSelection: Rectangle, selection: Rectangle, onEdit?: ((cell: XY, arrowKeyCommitMode?: boolean | undefined) => void) | undefined, onCommit?: (() => void) | undefined, onCancel?: (() => void) | undefined, onSelectionChange?: ((selection: Rectangle, scrollTo?: boolean | undefined, toHead?: boolean | undefined) => void) | undefined, onFocusChange?: ((focus: boolean) => void) | undefined, onClipboardCopy?: ((cut: boolean) => void) | undefined, onChange?: ((changes: Change[]) => void) | undefined) => {
+    onInputKeyDown: (e: KeyboardEvent) => void;
+    onGridFocus: () => void;
+    onGridBlur: () => void;
+    onGridKeyDown: (e: KeyboardEvent) => void;
+};

package/dist/mouse.d.ts

@@ -1,6 +1,6 @@
 import { CellLayout, CellPropertyFunction, Change, Clickable, Rectangle, RowOrColumnPropertyFunction, SheetMouseEvent, SheetStyle, VisibleLayout, XY } from './types';
 import { MouseEvent, PointerEvent, RefObject } from 'react';
-export declare const useMouse: (hitmapRef: RefObject<Clickable[]>, selection: Rectangle, knobArea: Rectangle | null, editMode: boolean, editData: CellPropertyFunction<string>, sourceData: CellPropertyFunction<string | number | null>, cellReadOnly: CellPropertyFunction<boolean | null>, canSizeColumn: RowOrColumnPropertyFunction<boolean | null>, canSizeRow: RowOrColumnPropertyFunction<boolean | null>, canOrderColumn: RowOrColumnPropertyFunction<boolean | null>, canOrderRow: RowOrColumnPropertyFunction<boolean | null>, cellLayout: CellLayout, visibleCells: VisibleLayout, sheetStyle: SheetStyle, columnGroupKeys: RowOrColumnPropertyFunction<string | number | null>, rowGroupKeys: RowOrColumnPropertyFunction<string | number | null>, selectedColumnGroups: Set<string | number | null> | null, selectedRowGroups: Set<string | number | null> | null, getAutoSizeWidth: (column: number) => number, onEdit?: ((cell: XY) => void) | undefined, onCommit?: (() => void) | undefined, onKnobAreaChange?: ((knobArea: Rectangle | null) => void) | undefined, onDragIndicesChange?: ((indices: [number[] | null, number[] | null]) => void) | undefined, onDragOffsetChange?: ((dragOffset: XY | null) => void) | undefined, onDropTargetChange?: ((selection: Rectangle | null) => void) | undefined, onSelectionChange?: ((selection: Rectangle, scrollTo?: boolean | undefined, toHead?: boolean | undefined) => void) | undefined, onInvalidateColumn?: ((column: number) => void) | undefined, onInvalidateRow?: ((row: number) => void) | undefined, onChange?: ((changes: Change[]) => void) | undefined, onColumnOrderChange?: ((indices: number[], order: number) => void) | undefined, onRowOrderChange?: ((indices: number[], order: number) => void) | undefined, onCellWidthChange?: ((indices: number[], value: number) => void) | undefined, onCellHeightChange?: ((indices: number[], value: number) => void) | undefined, onRightClick?: ((e: SheetMouseEvent) => void) | undefined, dontCommitEditOnSelectionChange?: boolean | undefined, dontChangeSelectionOnOrderChange?: boolean | undefined) => {
+export declare const useMouse: (hitmapRef: RefObject<Clickable[]>, selection: Rectangle, knobArea: Rectangle | null, editMode: boolean, editData: CellPropertyFunction<string>, sourceData: CellPropertyFunction<string | number | null>, cellReadOnly: CellPropertyFunction<boolean | null>, canSizeColumn: RowOrColumnPropertyFunction<boolean | null>, canSizeRow: RowOrColumnPropertyFunction<boolean | null>, canOrderColumn: RowOrColumnPropertyFunction<boolean | null>, canOrderRow: RowOrColumnPropertyFunction<boolean | null>, cellLayout: CellLayout, visibleCells: VisibleLayout, sheetStyle: SheetStyle, columnGroupKeys: RowOrColumnPropertyFunction<string | number | null>, rowGroupKeys: RowOrColumnPropertyFunction<string | number | null>, selectedColumnGroups: Set<string | number | null> | null, selectedRowGroups: Set<string | number | null> | null, getAutoSizeWidth: (column: number) => number, onEdit?: ((cell: XY) => void) | undefined, onCommit?: (() => void) | undefined, onKnobAreaChange?: ((knobArea: Rectangle | null) => void) | undefined, onDragIndicesChange?: ((indices: [number[] | null, number[] | null]) => void) | undefined, onDragOffsetChange?: ((dragOffset: XY | null) => void) | undefined, onDropTargetChange?: ((selection: Rectangle | null) => void) | undefined, onSelectionChange?: ((selection: Rectangle, scrollTo?: boolean | undefined, toHead?: boolean | undefined) => void) | undefined, onFocusChange?: ((focus: boolean) => void) | undefined, onInvalidateColumn?: ((column: number) => void) | undefined, onInvalidateRow?: ((row: number) => void) | undefined, onChange?: ((changes: Change[]) => void) | undefined, onColumnOrderChange?: ((indices: number[], order: number) => void) | undefined, onRowOrderChange?: ((indices: number[], order: number) => void) | undefined, onCellWidthChange?: ((indices: number[], values: number[]) => void) | undefined, onCellHeightChange?: ((indices: number[], values: number[]) => void) | undefined, onRightClick?: ((e: SheetMouseEvent) => void) | undefined, dontCommitEditOnSelectionChange?: boolean | undefined, dontChangeSelectionOnOrderChange?: boolean | undefined) => {
     knobPosition: XY | null;
     mouseHandlers: {
         onPointerLeave: () => void;

package/dist/props.d.ts

@@ -1,5 +1,7 @@
-import { Direction, XY, CellContentType, CellProperty, CellPropertyFunction, PropTypes, RowOrColumnProperty, RowOrColumnPropertyFunction } from './types';
+import { Direction, XY, CellContentType, CellProperty, CellPropertyFunction, CellPropertyStyled, CellPropertyStyledFunction, PropTypes, RowOrColumnProperty, RowOrColumnPropertyFunction, RowOrColumnPropertyStyled, RowOrColumnPropertyStyledFunction } from './types';
 export declare const createRowOrColumnProp: <T extends PropTypes>(rowColProp: T | T[] | RowOrColumnPropertyFunction<T> | undefined, defaultValue: T) => RowOrColumnPropertyFunction<T>;
 export declare const createCellProp: <T extends PropTypes>(cellProp: T | T[][] | CellPropertyFunction<T> | undefined, defaultValue: T) => CellPropertyFunction<T>;
+export declare const createRowOrColumnStyledProp: <T extends PropTypes>(rowColProp: T | T[] | RowOrColumnPropertyStyledFunction<T> | undefined, defaultValue: T) => RowOrColumnPropertyStyledFunction<T>;
+export declare const createCellStyledProp: <T extends PropTypes>(cellProp: T | T[][] | CellPropertyStyledFunction<T> | undefined, defaultValue: T) => CellPropertyStyledFunction<T>;
 export declare const findApproxMaxEditDataIndex: (editData: CellPropertyFunction<string>) => XY;
-export declare const findInDisplayData: (displayData: CellPropertyFunction<CellContentType>, start: XY, direction: Direction) => XY;
+export declare const findInDisplayData: (displayData: CellPropertyStyledFunction<CellContentType>, start: XY, direction: Direction) => XY;

package/dist/render.d.ts

@@ -1,3 +1,3 @@
-import { CellLayout, CellPropertyFunction, RowOrColumnPropertyFunction, InternalSheetStyle, Rectangle, Selection, Clickable, Style, CellContentType, VisibleLayout, XY } from './types';
-export declare const renderSheet: (context: CanvasRenderingContext2D, cellLayout: CellLayout, visibleCells: VisibleLayout, sheetStyle: InternalSheetStyle, cellStyle: CellPropertyFunction<Style>, selection: Rectangle, secondarySelections: Selection[], knobPosition: XY | null, knobArea: Rectangle | null, dragIndices: [number[] | null, number[] | null], dragOffset: XY | null, dropTarget: Rectangle | null, columnHeaders: RowOrColumnPropertyFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, displayData: CellPropertyFunction<CellContentType>, columnGroupKeys: RowOrColumnPropertyFunction<string | number | null>, rowGroupKeys: RowOrColumnPropertyFunction<string | number | null>, selectedColumnGroups: Set<string | number | null> | null, selectedRowGroups: Set<string | number | null> | null, dataOffset: XY) => Clickable[];
-export declare const renderCell: (context: CanvasRenderingContext2D, cellContent: CellContentType, style: Style, defaultCellStyle: Required<Style>, xCoord: number, yCoord: number, cellWidth: number, cellHeight: number) => Clickable[];
+import { CellLayout, CellPropertyFunction, CellPropertyStyledFunction, RowOrColumnPropertyFunction, RowOrColumnPropertyStyledFunction, InternalSheetStyle, Rectangle, Selection, Clickable, Style, CellContentType, VisibleLayout, XY } from './types';
+export declare const renderSheet: (context: CanvasRenderingContext2D, cellLayout: CellLayout, visibleCells: VisibleLayout, sheetStyle: InternalSheetStyle, cellStyle: CellPropertyFunction<Style>, selection: Rectangle, secondarySelections: Selection[], isFocused: boolean, knobPosition: XY | null, knobArea: Rectangle | null, dragIndices: [number[] | null, number[] | null], dragOffset: XY | null, dropTarget: Rectangle | null, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, displayData: CellPropertyStyledFunction<CellContentType>, columnGroupKeys: RowOrColumnPropertyFunction<string | number | null>, rowGroupKeys: RowOrColumnPropertyFunction<string | number | null>, selectedColumnGroups: Set<string | number | null> | null, selectedRowGroups: Set<string | number | null> | null, dataOffset: XY) => Clickable[];
+export declare const renderCell: (context: CanvasRenderingContext2D, cellContent: CellContentType, style: Required<Style>, xCoord: number, yCoord: number, cellWidth: number, cellHeight: number) => Clickable[];

package/dist/sheet.d.ts

@@ -1,5 +1,5 @@
 import React, { KeyboardEventHandler, ReactElement } from 'react';
-import { XY, Rectangle, CellLayout, CellProperty, CellContentType, RowOrColumnProperty, Selection, Change, SheetPointerEvent, InputStyle, SheetStyle, Style, VisibleLayout } from './types';
+import { XY, Rectangle, CellLayout, CellProperty, CellPropertyStyled, CellContentType, ClipboardPayload, RowOrColumnPropertyStyled, RowOrColumnProperty, Selection, Change, SheetPointerEvent, InputStyle, SheetStyle, Style, VisibleLayout } from './types';
 export declare type SheetInputProps = {
     value: string;
     autoFocus: boolean;
@@ -16,7 +16,7 @@ export declare type SheetRenderProps = {
 export declare type SheetProps = {
     cellWidth?: RowOrColumnProperty<number>;
     cellHeight?: RowOrColumnProperty<number>;
-    columnHeaders?: RowOrColumnProperty<CellContentType>;
+    columnHeaders?: RowOrColumnPropertyStyled<CellContentType>;
     columnHeaderStyle?: RowOrColumnProperty<Style>;
     cellStyle?: CellProperty<Style>;
     readOnly?: CellProperty<boolean>;
@@ -27,7 +27,7 @@ export declare type SheetProps = {
     columnGroupKeys?: RowOrColumnProperty<string | number | null>;
     rowGroupKeys?: RowOrColumnProperty<string | number | null>;
     sourceData?: CellProperty<string | number | null>;
-    displayData?: CellProperty<CellContentType>;
+    displayData?: CellPropertyStyled<CellContentType>;
     editData?: CellProperty<string>;
     editKeys?: CellProperty<string>;
     sheetStyle?: SheetStyle;
@@ -38,6 +38,7 @@ export declare type SheetProps = {
     cacheLayout?: boolean | number;
     dontCommitEditOnSelectionChange?: boolean;
     dontChangeSelectionOnOrderChange?: boolean;
+    autoFocus?: boolean;
     inputComponent?: (x: number, y: number, props: SheetInputProps, commitEditingCell?: (value?: string | number | null) => void) => ReactElement | undefined;
     renderInside?: (props: SheetRenderProps) => React.ReactNode;
     renderOutside?: (props: SheetRenderProps) => React.ReactNode;
@@ -46,12 +47,17 @@ export declare type SheetProps = {
     onChange?: (changes: Array<Change>) => void;
     onColumnOrderChange?: (indices: number[], order: number) => void;
     onRowOrderChange?: (indices: number[], order: number) => void;
-    onCellWidthChange?: (indices: number[], value: number) => void;
-    onCellHeightChange?: (indices: number[], value: number) => void;
+    onCellWidthChange?: (indices: number[], values: number[]) => void;
+    onCellHeightChange?: (indices: number[], values: number[]) => void;
     onScrollChange?: (visibleRows: number[], visibleColumns: number[]) => void;
+    onCopy?: (selection: Rectangle, cells: string[][]) => ClipboardPayload<any> | null | undefined;
+    onPaste?: (selection: Rectangle, cells: string[][], payload: ClipboardPayload<any>) => boolean | null | undefined | Promise<boolean | null | undefined>;
 };
 export declare type SheetRef = CellLayout & {
     startEditingCell: (editCell: XY, arrowKeyCommitMode?: boolean) => void;
+    copySelection: (selection: Rectangle, cut?: boolean) => Promise<void>;
+    pasteSelection: (selection: Rectangle) => Promise<void>;
+    canPasteSelection: () => boolean;
 };
 declare const Sheet: React.ForwardRefExoticComponent<SheetProps & React.RefAttributes<SheetRef>>;
 export default Sheet;

package/dist/style.d.ts

@@ -1,4 +1,3 @@
 import { InternalSheetStyle, SheetStyle, Style } from './types';
 export declare const resolveSheetStyle: (sheetStyle?: SheetStyle | undefined) => InternalSheetStyle;
-export declare const resolveCellStyle: (optionalStyle: Style, defaultStyle: Required<Style>) => Required<Style>;
 export declare const applyAlignment: (start: number, cellSize: number, style: Required<Style>, imageWidth: number, alignment?: 'left' | 'center' | 'right') => number;

package/dist/types.d.ts

@@ -1,7 +1,11 @@
 import { MouseEvent, PointerEvent, CSSProperties } from 'react';
 export declare type PropTypes = string | number | boolean | Style | CellContentType;
+export declare type CellPropertyStyledFunction<T extends PropTypes> = (x: number, y: number, style: Required<Style>) => T;
+export declare type RowOrColumnPropertyStyledFunction<T extends PropTypes> = (rowOrColIndex: number, style: Required<Style>) => T;
 export declare type CellPropertyFunction<T extends PropTypes> = (x: number, y: number) => T;
 export declare type RowOrColumnPropertyFunction<T extends PropTypes> = (rowOrColIndex: number) => T;
+export declare type CellPropertyStyled<T extends PropTypes> = T | T[][] | CellPropertyStyledFunction<T>;
+export declare type RowOrColumnPropertyStyled<T extends PropTypes> = T | T[] | RowOrColumnPropertyStyledFunction<T>;
 export declare type CellProperty<T extends PropTypes> = T | T[][] | CellPropertyFunction<T>;
 export declare type RowOrColumnProperty<T extends PropTypes> = T | T[] | RowOrColumnPropertyFunction<T>;
 export declare type CellContentType = null | number | string | CellContent;
@@ -65,6 +69,12 @@ export declare type Resizable = {
     size: number;
     indices: number[];
 };
+export declare type ClipboardPayload<T> = {
+    cut: boolean;
+    data: T;
+    origin: string;
+    version: number;
+};
 export declare type Change = {
     x: number;
     y: number;
@@ -74,10 +84,6 @@ export declare type Change = {
         y: number;
     };
 };
-export declare type ParsedChange = {
-    selection: Rectangle;
-    changes: Change[];
-};
 export declare type SheetMouseEvent = MouseEvent & {
     cellX: number;
     cellY: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheet-happens",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "React Spreadsheet",
   "author": "Luka-M",
   "license": "MIT",