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

Comparing version 5.0.0-beta1 to 5.0.0-beta2

API.md

@@ -106,3 +106,3 @@ # Basic Usage
 | [rightElement](#rightelement)               | A node which will be placed at the right edge of the data grid.         |
-| [rightElementSticky](#rightelement)         | Makes the right element sticky or not.                                  |
+| [rightElementProps](#rightelement)          | Changes how the right element renders.                                  |
 | [rowMarkerWidth](#rowmarkerwidth)           | The width of the row markers.                                           |
@@ -711,8 +711,13 @@ | [rowMarkerStartIndex](#rowmarkerstartindex) | The index of the first element in the grid                              |
 ```ts
-rightElementSticky?: boolean;
+rightElementProps?: {
+    readonly sticky?: boolean;
+    readonly fill?: boolean;
+};
 rightElement?: React.ReactNode;
 ```
 
-The right element is a DOM node which can be inserted at the end of the horizontal scroll region. This can be used to create a right handle panel, make a big add button, or display messages. If `rightElementSticky` is set to true the right element will be visible at all times, otherwise the user will need to scroll to the end to reveal it.
+The right element is a DOM node which can be inserted at the end of the horizontal scroll region. This can be used to create a right handle panel, make a big add button, or display messages. If `rightElementProps.sticky` is set to true the right element will be visible at all times, otherwise the user will need to scroll to the end to reveal it.
 
+If `rightElementProps.fill` is set, the right elements container will fill to consume all remaining space (if any) at the end of the grid. This does not play nice with growing columns.
+
 ---
@@ -719,0 +724,0 @@

CHANGELOG.md

@@ -0,1 +1,152 @@
+# 5.0.0 Release notes
+
+## 🚨🚨 Breaking changes and porting guide
+
+Glide Data Grid 5.0 no longer depends on `styled-components`! This means the Theme for your data grid is no longer provided via the `ThemeProvider` API.
+
+### Mandatory CSS file
+
+Because Glide Data Grid no longer uses a CSS-in-JS solution, the CSS must be imported by consumers. This is usually achieved by doing the following somewhere in your project source.
+
+```ts
+import "@glideapps/glide-data-grid/dist/index.css";
+```
+
+Your bundler will take care of packing this in with the rest of the CSS your project requires. This is tested working with both next-js and create-react-app. Examples can be found in the [test-projects](https://github.com/glideapps/glide-data-grid/tree/main/test-projects) folder.
+
+### Theme porting
+
+If you are not providing a custom theme to your data grid there is nothing to do. If you are using a custom theme you should replace:
+
+```tsx
+return (
+    <ThemeProvider theme={gridTheme}>
+        <DataEditor {...myEditorProps} />
+    </ThemeProvider>
+);
+```
+
+with:
+
+```tsx
+return <DataEditor theme={gridTheme} {...myEditorProps} />;
+```
+
+### Porting custom editors
+
+All theme variables can now be accessed as a CSS variable:
+
+```css
+.my-editor {
+    background-color: var(--gdg-bg-cell);
+    color: var(--gdg-text-dark);
+}
+```
+
+All variables except `lineHeight` are available in this manner. The full list includes
+
+```
+--gdg-accent-color
+--gdg-accent-fg
+--gdg-accent-light
+--gdg-text-dark
+--gdg-text-medium
+--gdg-text-light
+--gdg-text-bubble
+--gdg-bg-icon-header
+--gdg-fg-icon-header
+--gdg-text-header
+--gdg-text-group-header
+--gdg-text-header-selected
+--gdg-bg-cell
+--gdg-bg-cell-medium
+--gdg-bg-header
+--gdg-bg-header-has
+--gdg-bg-header-hovered
+--gdg-bg-bubble
+--gdg-bg-bubble-selected
+--gdg-bg-search-result
+--gdg-border-color
+--gdg-horizontal-border-color
+--gdg-drilldown-border
+--gdg-link-color
+--gdg-cell-horizontal-padding
+--gdg-cell-vertical-padding
+--gdg-header-font-style
+--gdg-base-font-style
+--gdg-font-family
+--gdg-editor-font-size
+```
+
+The theme can be accessed in JS by using the new `useTheme` hook:
+
+```tsx
+import { useTheme } from "@glideapps/glide-data-grid";
+
+const MyComponent: React.VFC = () => {
+    const dataGridTheme = useTheme();
+    alert(dataGridTheme.bgHeader);
+
+    // ...
+};
+```
+
+The theme object returned from `useTheme` may not be identical to the passed theme object if any theme overrides are in use or the passed theme object did not contain all required keys. The 4.2.0 series has also been updated to include CSS variables. This should allow any third party library of custom editors to support both 4.2 and 5.0 at the same time provided they don't need the theme in JS.
+
+### rightElementSticky replaced with rightElementProps
+
+Previously the `rightElement` of a data editor could be made sticky by doing:
+
+```tsx
+<DataEditor rightElement={el} rightElementSticky={true} />
+```
+
+This is now done by providing a rightElementProps
+
+```tsx
+<DataEditor
+    rightElement={el}
+    rightElementSticky={{
+        sticky: true,
+    }}
+/>
+```
+
+## ⚠️ Removal of deprecated API
+
+The following previously deprecated API's are no longer present
+
+-   `drawCustomCell` replaced by `drawCell`
+-   `onColumnResized` replaced by `onColumnResize`
+-   `BooleanCell.allowEdit` replaced by `BooleanCell.readonly`
+-   `BooleanCell.showUnchecked` no replacement has been defunct for a long time
+
+## 🥳 New features
+
+-   react-virtualized-autosizer no longer used as a dependency
+-   Vertical and horizontal scroll shadows now available and configurable
+-   Cursor now settable per cell
+-   `validateCell` now receives the previous cell to make validation easier.
+-   Row marker header column now draws a checkbox rather than silently accepting inputs
+-   `drawHeader` now receives the index of the drawn header
+-   Value coercion can now return the desired selected range post coercion.
+-   `rightElementProps` new API which allows for making the right element not only sticky but also grow to consume leftover space.
+-   `onCellsEdited` is now always called prior to calling `onCellEdited` allowing for implementing a single edit callback.
+-   `isDraggable` can now be set to `cell` or `header` to allow dragging on just one or the other
+
+## 🐞 Bug fixes
+
+-   Setting `gridSelection` externally will keep the newly selected selection in view.
+-   No longer crashes when calling `getBounds` with a cell that is not in the current range, and instead returns undefined.
+-   Drag scrolling now significantly smoother
+-   Headers now properly select with touch events
+-   Headers will not emit spurious click events when completing drag operations
+-   Copying in safari no longer beeps the browser
+-   Trailing row options theme now applies to the trailing row even if it is not sticky
+-   Many svg loading improvements
+-   `onCellsEdited` now correctly prevents `onCellEdited` from being emitted when requested
+-   Auto-sizing columns will no longer cause their headers to be truncated
+-   Context menus can now be correctly cancelled on all operating systems, not just Windows
+-   NextJS production builds no longer complain
+
 # 4.2.0 Release Notes
@@ -2,0 +153,0 @@

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

@@ -8,4 +8,8 @@ import * as React from "react";
 import { SelectionBlending } from "../data-grid/use-selection-behavior";
-declare type Props = Omit<DataGridSearchProps, "accessibilityHeight" | "canvasRef" | "cellXOffset" | "cellYOffset" | "className" | "clientSize" | "columns" | "disabledRows" | "drawCustomCell" | "enableGroups" | "firstColAccessible" | "firstColSticky" | "freezeColumns" | "getCellContent" | "getCellsForSelection" | "gridRef" | "groupHeaderHeight" | "headerHeight" | "isFilling" | "isFocused" | "lockColumns" | "maxColumnWidth" | "minColumnWidth" | "onCanvasBlur" | "onCanvasFocused" | "onCellFocused" | "onContextMenu" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseMove" | "onMouseUp" | "onSearchResultsChanged" | "onVisibleRegionChanged" | "rowHeight" | "scrollRef" | "searchColOffset" | "selectedColumns" | "selection" | "theme" | "trailingRowType" | "translateX" | "translateY" | "verticalBorder">;
+declare type Props = Omit<DataGridSearchProps, "accessibilityHeight" | "canvasRef" | "cellXOffset" | "cellYOffset" | "className" | "clientSize" | "columns" | "disabledRows" | "drawCustomCell" | "enableGroups" | "firstColAccessible" | "firstColSticky" | "freezeColumns" | "getCellContent" | "getCellsForSelection" | "gridRef" | "groupHeaderHeight" | "headerHeight" | "isFilling" | "isFocused" | "lockColumns" | "maxColumnWidth" | "minColumnWidth" | "onCanvasBlur" | "onCanvasFocused" | "onCellFocused" | "onContextMenu" | "onDragEnd" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseMove" | "onMouseUp" | "onSearchResultsChanged" | "onVisibleRegionChanged" | "rowHeight" | "scrollRef" | "searchColOffset" | "selectedColumns" | "selection" | "theme" | "trailingRowType" | "translateX" | "translateY" | "verticalBorder">;
 declare type ImageEditorType = React.ComponentType<OverlayImageEditorProps>;
+declare type EditListItem = {
+    location: Item;
+    value: EditableGridCell;
+};
 declare type ReplaceReturnType<T extends (...a: any) => any, TNewReturn> = (...a: Parameters<T>) => TNewReturn;
@@ -31,6 +35,3 @@ declare type EmitEvents = "copy" | "paste" | "delete" | "fill-right" | "fill-down";
     readonly onCellEdited?: (cell: Item, newValue: EditableGridCell) => void;
-    readonly onCellsEdited?: (newValues: readonly {
-        location: Item;
-        value: EditableGridCell;
-    }[]) => boolean | void;
+    readonly onCellsEdited?: (newValues: readonly EditListItem[]) => boolean | void;
     readonly onRowAppended?: () => Promise<"top" | "bottom" | number | undefined> | void;
@@ -37,0 +38,0 @@ readonly onHeaderClicked?: (colIndex: number, event: HeaderClickedEventArgs) => void;

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

@@ -11,2 +11,5 @@ import * as React from "react";
 export declare function getGridColumn(columnWithMock: GridColumnWithMockingInfo): GridColumn;
+export declare const ColumnAddButton: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<string, unknown> & {
+    as?: React.ElementType<any> | undefined;
+}>;
 export declare const BeautifulStyle: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<string, unknown> & {
@@ -13,0 +16,0 @@ as?: React.ElementType<any> | undefined;

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

@@ -41,2 +41,3 @@ /// <reference types="react" />
 export declare function getHeaderMenuBounds(x: number, y: number, width: number, height: number): Rectangle;
+export declare function drawHeader(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, c: MappedGridColumn, selected: boolean, theme: Theme, isHovered: boolean, hasSelectedCell: boolean, hoverAmount: number, spriteManager: SpriteManager, drawHeaderCallback: DrawHeaderCallback | undefined, touchMode: boolean): void;
 export interface DrawGridArg {
@@ -43,0 +44,0 @@ readonly canvas: HTMLCanvasElement;

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

@@ -41,2 +41,3 @@ import type { Theme } from "../common/styles";
     readonly button: number;
+    readonly scrollEdge: readonly [-1 | 0 | 1, -1 | 0 | 1];
 }
@@ -82,2 +83,4 @@ export interface GridMouseCellEventArgs extends BaseGridMouseEventArgs, PositionableMouseEventArgs {
     readonly setDragImage: (image: Element, x: number, y: number) => void;
+    readonly preventDefault: () => void;
+    readonly defaultPrevented: () => boolean;
 }
@@ -84,0 +87,0 @@ export declare type GridDragEventArgs = GridMouseEventArgs & DragHandler;

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

@@ -54,4 +54,5 @@ import * as React from "react";
     readonly verticalBorder: (col: number) => boolean;
-    readonly isDraggable?: boolean;
+    readonly isDraggable?: boolean | "cell" | "header";
     readonly onDragStart?: (args: GridDragEventArgs) => void;
+    readonly onDragEnd?: () => void;
     readonly onDragOverCell?: (cell: Item, dataTransfer: DataTransfer | null) => void;
@@ -58,0 +59,0 @@ readonly onDragLeave?: () => void;

dist/ts/scrolling-data-grid/infinite-scroller.d.ts

@@ -13,3 +13,6 @@ import type { Rectangle } from "..";
     readonly scrollToEnd?: boolean;
-    readonly rightElementSticky?: boolean;
+    readonly rightElementProps?: {
+        readonly sticky?: boolean;
+        readonly fill?: boolean;
+    };
     readonly rightElement?: React.ReactNode;
@@ -16,0 +19,0 @@ readonly minimap?: React.ReactNode;

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

@@ -14,3 +14,6 @@ import * as React from "react";
     readonly preventDiagonalScrolling?: boolean;
-    readonly rightElementSticky?: boolean;
+    readonly rightElementProps?: {
+        readonly sticky?: boolean;
+        readonly fill?: boolean;
+    };
     readonly rightElement?: React.ReactNode;
@@ -17,0 +20,0 @@ readonly showMinimap?: boolean;

package.json

 {
     "name": "@glideapps/glide-data-grid",
-    "version": "5.0.0-beta1",
+    "version": "5.0.0-beta2",
     "description": "Super fast, pure canvas Data Grid Editor",
@@ -5,0 +5,0 @@ "sideEffects": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

915991

increased by1.39%

Number of package files

79

increased by1.28%

Lines of code

21201

increased by0.72%

No dependency changes