@glideapps/glide-data-grid - npm Package Compare versions

Comparing version 5.2.1 to 5.2.2-beta1

dist/ts/common/utils.d.ts

@@ -5,2 +5,7 @@ import * as React from "react";
 export declare function degreesToRadians(degrees: number): number;
+/**
+ * The input provided to a sprite function.
+ *
+ * @category Columns
+ */
 export interface SpriteProps {
@@ -7,0 +12,0 @@ fgColor: string;

dist/ts/data-editor/data-editor-fns.d.ts

@@ -6,3 +6,5 @@ import type { DataGridSearchProps } from "../data-grid-search/data-grid-search";
 export declare function decodeHTML(tableEl: HTMLTableElement): string[][] | undefined;
+export declare function formatCell(cell: GridCell, index: number, raw: boolean, columnIndexes: readonly number[]): string;
+export declare function formatForCopy(cells: readonly (readonly GridCell[])[], columnIndexes: readonly number[]): string;
 export declare function copyToClipboard(cells: readonly (readonly GridCell[])[], columnIndexes: readonly number[], e?: ClipboardEvent): void;
 //# sourceMappingURL=data-editor-fns.d.ts.map

dist/ts/data-editor/data-editor.d.ts

 import * as React from "react";
-import { EditableGridCell, GridCell, GridSelection, Rectangle, ProvideEditorCallback, DrawCustomCellCallback, GridColumn, GroupHeaderClickedEventArgs, HeaderClickedEventArgs, CellClickedEventArgs, Item, ValidatedGridCell, ImageEditorType, CustomCell } from "../data-grid/data-grid-types";
+import { EditableGridCell, GridCell, GridSelection, Rectangle, CompactSelection, ProvideEditorCallback, DrawCustomCellCallback, GridColumn, GroupHeaderClickedEventArgs, HeaderClickedEventArgs, CellClickedEventArgs, Item, ValidatedGridCell, ImageEditorType, CustomCell } from "../data-grid/data-grid-types";
 import { DataGridSearchProps } from "../data-grid-search/data-grid-search";
@@ -128,7 +128,14 @@ import { Theme } from "../common/styles";
     readonly rows: number;
-    /** Determins if row markers should be automatically added to the grid.
+    /** Determines if row markers should be automatically added to the grid.
+     * Interactive row markers allow the user to select a row.
+     *
+     * - "clickable-number" renders a number that can be clicked to
+     *   select the row
+     * - "both" causes the row marker to show up as a number but
+     *   reveal a checkbox when the marker is hovered.
+     *
      * @defaultValue `none`
      * @group Style
      */
-    readonly rowMarkers?: "checkbox" | "number" | "clickable-number" | "both" | "none";
+    readonly rowMarkers?: "checkbox" | "number" | "clickable-number" | "checkbox-visible" | "both" | "none";
     /**
@@ -274,2 +281,4 @@ * Sets the width of row markers in pixels, if unset row markers will automatically size.
      * The current selection of the data grid. Contains all selected cells, ranges, rows, and columns.
+     * Used in conjunction with {@link onGridSelectionChange}
+     * method to implement a controlled selection.
      * @group Selection
@@ -279,3 +288,7 @@ */
     /**
-     * Emitted whenever the grid selection changes.
+     * Emitted whenever the grid selection changes. Specifying
+     * this function will make the grid’s selection controlled, so
+     * so you will need to specify {@link gridSelection} as well. See
+     * the "Controlled Selection" example for details.
+     *
      * @param newSelection The new gridSelection as created by user input.
@@ -419,3 +432,3 @@ * @group Selection
      */
-    appendRow: (col: number) => Promise<void>;
+    appendRow: (col: number, openOverlay: boolean) => Promise<void>;
     /**
@@ -441,2 +454,6 @@ * Triggers cells to redraw.
     scrollTo: ScrollToFn;
+    /**
+     * Causes the columns in the selection to have their natural size recomputed and re-emitted as a resize event.
+     */
+    remeasureColumns: (cols: CompactSelection) => void;
 }
@@ -443,0 +460,0 @@ /**

dist/ts/data-editor/stories/utils.d.ts

 import * as React from "react";
-import { CellArray, EditableGridCell, GridCell, GridColumn, Item, Rectangle } from "../../data-grid/data-grid-types";
+import { EditableGridCell, GridCell, GridColumn, Item } from "../../data-grid/data-grid-types";
+import type { DataEditorProps } from "../data-editor";
 /**
@@ -30,2 +31,3 @@ * Attempts to copy data between grid cells of any kind.
     className?: string;
+    scale?: string;
 }
@@ -43,6 +45,16 @@ export declare const BeautifulWrapper: React.FC<BeautifulProps>;
     setCellValue: ([col, row]: Item, val: GridCell) => void;
-    getCellsForSelection: (selection: Rectangle) => CellArray;
     setCellValueRaw: ([col, row]: Item, val: GridCell) => void;
 };
+export declare const KeyName: import("@linaria/react").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & Record<string, unknown> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const defaultProps: Partial<DataEditorProps>;
+export declare function clearCell(cell: GridCell): GridCell;
+export declare function useAllMockedKinds(): {
+    cols: GridColumn[];
+    getCellContent: ([col, row]: Item) => GridCell;
+    onColumnResize: (column: GridColumn, newSize: number) => void;
+    setCellValue: ([col, row]: Item, val: GridCell, noDisplay?: boolean, forceUpdate?: boolean) => void;
+};
 export {};
 //# sourceMappingURL=utils.d.ts.map

dist/ts/data-editor/use-cells-for-selection.d.ts

@@ -5,4 +5,4 @@ import type { DataGridSearchProps } from "../data-grid-search/data-grid-search";
 declare type CellsForSelectionCallback = NonNullable<DataGridSearchProps["getCellsForSelection"]>;
-export declare function useCellsForSelection(getCellsForSelectionIn: CellsForSelectionCallback | true | undefined, getCellContent: DataEditorProps["getCellContent"], rowMarkerOffset: number, abortController: AbortController): readonly [((selection: import("../data-grid/data-grid-types").Rectangle, abortSignal: AbortSignal) => import("../data-grid/data-grid-types").GetCellsThunk | CellArray) | undefined, ((selection: import("../data-grid/data-grid-types").Rectangle, abortSignal: AbortSignal) => import("../data-grid/data-grid-types").GetCellsThunk | CellArray) | undefined];
+export declare function useCellsForSelection(getCellsForSelectionIn: CellsForSelectionCallback | true | undefined, getCellContent: DataEditorProps["getCellContent"], rowMarkerOffset: number, abortController: AbortController, rows: number): readonly [((selection: import("../data-grid/data-grid-types").Rectangle, abortSignal: AbortSignal) => import("../data-grid/data-grid-types").GetCellsThunk | CellArray) | undefined, ((selection: import("../data-grid/data-grid-types").Rectangle, abortSignal: AbortSignal) => import("../data-grid/data-grid-types").GetCellsThunk | CellArray) | undefined];
 export {};
 //# sourceMappingURL=use-cells-for-selection.d.ts.map

dist/ts/data-grid-overlay-editor/private/number-overlay-editor.d.ts

@@ -5,7 +5,9 @@ import * as React from "react";
 interface Props {
-    value: number | undefined;
-    disabled?: boolean;
-    onChange: (values: NumberFormatValues) => void;
-    highlight: boolean;
-    validatedSelection?: SelectionRange;
+    readonly value: number | undefined;
+    readonly disabled?: boolean;
+    readonly onChange: (values: NumberFormatValues) => void;
+    readonly highlight: boolean;
+    readonly validatedSelection?: SelectionRange;
+    readonly fixedDecimals?: number;
+    readonly allowNegative?: boolean;
 }
@@ -12,0 +14,0 @@ declare const NumberOverlayEditor: React.FunctionComponent<Props>;

dist/ts/data-grid-overlay-editor/private/uri-overlay-editor.d.ts

@@ -8,2 +8,3 @@ import * as React from "react";
     readonly readonly: boolean;
+    readonly preview: string;
     readonly validatedSelection?: SelectionRange;
@@ -10,0 +11,0 @@ }

dist/ts/data-grid/data-grid-lib.d.ts

@@ -34,11 +34,11 @@ import type { Theme } from "../common/styles";
 export declare function drawNewRowCell(args: BaseDrawArgs, data: string, icon?: string): void;
-export declare function drawCheckbox(ctx: CanvasRenderingContext2D, theme: Theme, checked: boolean | BooleanEmpty | BooleanIndeterminate, x: number, y: number, width: number, height: number, highlighted: boolean, hoverX?: number, hoverY?: number): void;
+export declare function drawCheckbox(ctx: CanvasRenderingContext2D, theme: Theme, checked: boolean | BooleanEmpty | BooleanIndeterminate, x: number, y: number, width: number, height: number, highlighted: boolean, hoverX?: number, hoverY?: number, maxSize?: number): void;
 export declare function prepMarkerRowCell(args: BaseDrawArgs, lastPrep: PrepResult | undefined): Partial<PrepResult>;
 export declare function deprepMarkerRowCell(args: Pick<BaseDrawArgs, "ctx">): void;
-export declare function drawMarkerRowCell(args: BaseDrawArgs, index: number, checked: boolean, markerKind: "checkbox" | "both" | "number", drawHandle: boolean): void;
+export declare function drawMarkerRowCell(args: BaseDrawArgs, index: number, checked: boolean, markerKind: "checkbox" | "both" | "number" | "checkbox-visible", drawHandle: boolean): void;
 export declare function drawProtectedCell(args: BaseDrawArgs): void;
-export declare function drawBoolean(args: BaseDrawArgs, data: boolean | BooleanEmpty | BooleanIndeterminate, canEdit: boolean): void;
+export declare function drawBoolean(args: BaseDrawArgs, data: boolean | BooleanEmpty | BooleanIndeterminate, canEdit: boolean, maxSize?: number): void;
 export declare function drawBubbles(args: BaseDrawArgs, data: readonly string[]): void;
 export declare function drawDrilldownCell(args: BaseDrawArgs, data: readonly DrilldownCellData[]): void;
-export declare function drawImage(args: BaseDrawArgs, data: readonly string[], rounding?: number): void;
+export declare function drawImage(args: BaseDrawArgs, data: readonly string[], rounding?: number, contentAlign?: BaseGridCell["contentAlign"]): void;
 interface Point {
@@ -45,0 +45,0 @@ x: number;

dist/ts/data-grid/data-grid-sprites.d.ts

 import type { Theme } from "../common/styles";
+import type { SpriteProps } from "../common/utils";
 import { HeaderIconMap } from "./sprites";
-declare type HeaderIcon = keyof HeaderIconMap;
-declare type Sprite = HeaderIconMap["headerArray"];
-/** @category Columns */
+/**
+ * A known icon identifier
+ *
+ * @category Columns
+ */
+export declare type HeaderIcon = keyof HeaderIconMap;
+/**
+ * A method that produces an SVG array from
+ * an SVG icon configuration.
+ *
+ * @category Columns
+ */
+export declare type Sprite = (props: SpriteProps) => string;
+/**
+ * A method that maps from icon names to functions
+ * that return SVG strings.
+ *
+ * @category Columns
+ */
 export declare type SpriteMap = Record<string | HeaderIcon, Sprite>;
@@ -18,3 +35,2 @@ /** @category Columns */
 }
-export {};
 //# sourceMappingURL=data-grid-sprites.d.ts.map

dist/ts/data-grid/data-grid-types.d.ts

@@ -196,3 +196,13 @@ import type { Theme } from "../common/styles";
 export declare type CellArray = readonly (readonly GridCell[])[];
-/** @category Types */
+/**
+ * This type is used to specify the coordinates of
+ * a cell or header within the dataset: positive row
+ * numbers identify cells.
+ *
+ * - `-1`: Header
+ * - `-2`: Group header
+ * - `0 and higher`: Row index
+ *
+ * @category Types
+ */
 export declare type Item = readonly [col: number, row: number];
@@ -282,2 +292,3 @@ /** @category Types */
     readonly cursor?: CSSProperties["cursor"];
+    readonly copyData?: string;
 }
@@ -306,2 +317,4 @@ /** @category Cells */
     readonly readonly?: boolean;
+    readonly fixedDecimals?: number;
+    readonly allowNegative?: boolean;
 }
@@ -380,2 +393,3 @@ /** @category Cells */
     readonly allowOverlay: false;
+    readonly maxSize?: number;
 }
@@ -400,2 +414,3 @@ /** @category Cells */
     readonly data: string;
+    readonly displayData?: string;
     readonly readonly?: boolean;
@@ -422,3 +437,3 @@ }
     readonly checked: boolean;
-    readonly markerKind: "checkbox" | "number" | "both";
+    readonly markerKind: "checkbox" | "number" | "both" | "checkbox-visible";
 }
@@ -425,0 +440,0 @@ /** @category Selection */

dist/ts/data-grid/data-grid.d.ts

@@ -45,3 +45,3 @@ import * as React from "react";
     readonly eventTargetRef: React.MutableRefObject<HTMLDivElement | null> | undefined;
-    readonly getCellContent: (cell: Item) => InnerGridCell;
+    readonly getCellContent: (cell: Item, forceStrict?: boolean) => InnerGridCell;
     /**
@@ -107,2 +107,3 @@ * Provides additional details about groups to extend group functionality.
      * Determines what can be dragged using HTML drag and drop
+     * @defaultValue false
      * @group Drag and Drop
@@ -109,0 +110,0 @@ */

dist/ts/index.d.ts

 export type { OverlayImageEditorProps } from "./data-grid-overlay-editor/private/image-overlay-editor";
 export type { MarkdownDivProps } from "./markdown-div/markdown-div";
-export type { SpriteMap } from "./data-grid/data-grid-sprites";
+export type { SpriteMap, HeaderIcon, Sprite } from "./data-grid/data-grid-sprites";
+export type { SpriteProps } from "./common/utils";
 export type { Theme } from "./common/styles";
@@ -5,0 +6,0 @@ export type { CustomCellRenderer } from "./data-editor/use-custom-cells";

package.json

 {
     "name": "@glideapps/glide-data-grid",
-    "version": "5.2.1",
+    "version": "5.2.2-beta1",
     "description": "React data grid for beautifully displaying and editing large amounts of data with amazing performance.",
@@ -5,0 +5,0 @@ "sideEffects": [

README.md

@@ -17,3 +17,3 @@ <h1 align="center">
 [![React 16+](https://img.shields.io/badge/React-16+-00ADD8?style=for-the-badge&logo=react)](https://reactjs.org)
-[![Code Coverage](https://img.shields.io/coveralls/github/glideapps/glide-data-grid?color=457aba&label=Cover&style=for-the-badge)](https://coveralls.io/github/glideapps/glide-data-grid)
+[![Code Coverage](https://img.shields.io/coverallsCoverage/github/glideapps/glide-data-grid?color=457aba&label=Cover&style=for-the-badge)](https://coveralls.io/github/glideapps/glide-data-grid)
 [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@glideapps/glide-data-grid?color=success&label=bundle&style=for-the-badge)](https://bundlephobia.com/package/@glideapps/glide-data-grid)
@@ -84,3 +84,3 @@ [![License](https://img.shields.io/github/license/glideapps/glide-data-grid?color=red&style=for-the-badge)](https://github.com/glideapps/glide-data-grid/blob/main/LICENSE)
 function getData([col, row]: Item): GridCell {
-    const person = getData(row);
+    const person = data[row];
 
@@ -87,0 +87,0 @@ if (col === 0) {

test/data-editor-fns.test.ts

@@ -1,2 +0,3 @@
-import { decodeHTML } from "../src/data-editor/data-editor-fns";
+import { GridCellKind } from "../src";
+import { decodeHTML, formatCell } from "../src/data-editor/data-editor-fns";
 
@@ -26,2 +27,48 @@ describe("data-editor-fns", () => {
     });
+
+    test("format empty bubble cell", () => {
+        expect(
+            formatCell(
+                {
+                    kind: GridCellKind.Bubble,
+                    allowOverlay: true,
+                    data: [],
+                },
+                0,
+                false,
+                [0]
+            )
+        ).toEqual("");
+    });
+
+    test("format empty bubble cell with comma", () => {
+        expect(
+            formatCell(
+                {
+                    kind: GridCellKind.Bubble,
+                    allowOverlay: true,
+                    data: ["foo, bar", "baz"],
+                },
+                0,
+                false,
+                [0]
+            )
+        ).toEqual('"foo, bar",baz');
+    });
+
+    test("format respects copyData", () => {
+        expect(
+            formatCell(
+                {
+                    kind: GridCellKind.Bubble,
+                    allowOverlay: true,
+                    data: ["foo, bar", "baz"],
+                    copyData: "override",
+                },
+                0,
+                false,
+                [0]
+            )
+        ).toEqual("override");
+    });
 });

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3007742

increased by0.9%

Lines of code

28418

increased by0.78%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes