Merge 2a7a3c7 into 0ea52f3

glideapps · Oct 2, 2023 · 7485d68 · 7485d68
2 parents 0ea52f3 + 2a7a3c7
commit 7485d68
Show file tree

Hide file tree

Showing 101 changed files with 7,544 additions and 5,187 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "root",
-    "version": "5.3.0",
+    "version": "5.3.1-alpha3",
     "scripts": {
         "start": "npm run storybook",
         "version": "./update-version.sh",
@@ -31,12 +31,12 @@
         "@babel/preset-react": "^7.8.3",
         "@babel/preset-typescript": "^7.9.0",
         "@faker-js/faker": "^7.6.0",
-        "@linaria/babel-preset": "^4.1.3",
-        "@linaria/core": "^4.1.3",
-        "@linaria/esbuild": "^4.1.3",
-        "@linaria/react": "^4.1.3",
-        "@linaria/shaker": "^4.1.3",
-        "@linaria/webpack-loader": "^4.1.3",
+        "@linaria/babel-preset": "^4.5.3",
+        "@linaria/core": "^4.5.3",
+        "@linaria/esbuild": "^4.5.3",
+        "@linaria/react": "^4.5.3",
+        "@linaria/shaker": "^4.5.3",
+        "@linaria/webpack-loader": "^4.5.3",
         "@storybook/addon-actions": "^6.5.12",
         "@storybook/addon-controls": "^6.5.12",
         "@storybook/addon-links": "^6.5.12",
@@ -50,7 +50,7 @@
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^13.5.0",
         "@types/cheerio": "^0.22.30",
-        "@types/jest": "^28.1.8",
+        "@types/jest": "^29.5.4",
         "@types/lodash": "^4.14.177",
         "@types/marked": "^4.0.2",
         "@types/node": "^18.7.13",
@@ -63,9 +63,10 @@
         "@types/react-syntax-highlighter": "^15.5.5",
         "@types/testing-library__jest-dom": "^5.14.2",
         "@typescript-eslint/eslint-plugin": "^5.30.5",
-        "@typescript-eslint/parser": "^5.30.5",
+        "@typescript-eslint/parser": "^6.4.1",
         "@typescript-eslint/typescript-estree": "^5.30.5",
         "babel-loader": "^8.1.0",
+        "esbuild": "^0.19.2",
         "eslint": "^8.19.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-react": "^7.30.1",
@@ -74,18 +75,20 @@
         "eslint-plugin-unicorn": "^43.0.1",
         "http-server": "^14.1.1",
         "jest-canvas-mock": "^2.3.1",
+        "jest-environment-jsdom": "^29.6.4",
         "lodash": "^4.17.21",
         "marked": "^4.0.10",
         "mini-css-extract-plugin": "^2.6.1",
+        "prettier": "^3.0.2",
         "react": "^16.12.0 || 17.x",
         "react-dom": "^16.12.0 || 17.x",
         "react-laag": "^2.0.3",
         "react-responsive-carousel": "^3.2.7",
         "react-syntax-highlighter": "^15.4.5",
-        "ts-jest": "^27.0.7",
+        "ts-jest": "^29.1.1",
         "tsc-esm-fix": "^2.7.8",
         "typedoc": "^0.23.13",
-        "typescript": "^4.8.2",
+        "typescript": "^5.1.6",
         "webpack": "^5.73.0"
     }
 }
diff --git a/packages/cells/build.cjs b/packages/cells/build.cjs
@@ -1,6 +1,6 @@
 const { build } = require("esbuild");
 const glob = require("glob");
-const linaria = require("@linaria/esbuild/lib/index").default;
+const linaria = require("@linaria/esbuild").default;
 const { dependencies, peerDependencies } = require("./package.json");
 const fs = require("fs");
 

diff --git a/packages/cells/jest.config.js b/packages/cells/jest.config.js
@@ -6,7 +6,7 @@ export default {
     setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
     testPathIgnorePatterns: ["/node_modules/", "/dist/"],
     transform: {
-        "^.+\\.(ts|tsx)?$": "ts-jest",
+        "^.+\\.(ts|tsx)?$": ["ts-jest", { isolatedModules: true, useESM: true }],
         "^.+\\.(js|jsx)$": "babel-jest",
     },
     globals: {

diff --git a/packages/cells/package.json b/packages/cells/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid-cells",
-    "version": "5.3.0",
+    "version": "5.3.1-alpha3",
     "description": "Extra cells for glide-data-grid",
     "sideEffects": [
         "**/*.css"
@@ -51,7 +51,7 @@
         "canvas"
     ],
     "dependencies": {
-        "@glideapps/glide-data-grid": "5.3.0",
+        "@glideapps/glide-data-grid": "5.3.1-alpha3",
         "@toast-ui/editor": "3.1.10",
         "@toast-ui/react-editor": "3.1.10",
         "react-select": "^5.2.2"
@@ -66,6 +66,6 @@
         "eslint-plugin-react-hooks": "^4.2.0",
         "react-resize-detector": "^7.1.2",
         "tsc-esm-fix": "^2.7.8",
-        "typescript": "^4.5.2"
+        "typescript": "^5.1.6"
     }
 }
diff --git a/packages/cells/src/cell.stories.tsx b/packages/cells/src/cell.stories.tsx
@@ -1,6 +1,6 @@
 import { styled } from "@linaria/react";
 import * as React from "react";
-import { DataEditor, DataEditorProps, GridCellKind } from "@glideapps/glide-data-grid";
+import { DataEditor, type DataEditorProps, GridCellKind } from "@glideapps/glide-data-grid";
 import { DropdownCell as DropdownRenderer, useExtraCells } from ".";
 import type { StarCell } from "./cells/star-cell";
 import type { SparklineCell } from "./cells/sparkline-cell";
@@ -79,7 +79,9 @@ const BeautifulStyle = styled.div`
         background-color: white;
 
         border-radius: 12px;
-        box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
+        box-shadow:
+            rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
+            rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
 
         .sizer-clip {
             border-radius: 12px;

diff --git a/packages/cells/src/cells/article-cell.tsx b/packages/cells/src/cells/article-cell.tsx
@@ -1,6 +1,6 @@
 import type { ArticleCell } from "./article-cell-types";
 import * as React from "react";
-import { CustomRenderer, getMiddleCenterBias, GridCellKind } from "@glideapps/glide-data-grid";
+import { type CustomRenderer, getMiddleCenterBias, GridCellKind } from "@glideapps/glide-data-grid";
 
 const ArticleCellEditor = React.lazy(async () => await import("./article-cell-editor"));
 

diff --git a/packages/cells/src/cells/button-cell.tsx b/packages/cells/src/cells/button-cell.tsx
@@ -1,6 +1,6 @@
 import {
-    CustomCell,
-    CustomRenderer,
+    type CustomCell,
+    type CustomRenderer,
     getMiddleCenterBias,
     GridCellKind,
     interpolateColors,
@@ -62,6 +62,8 @@ const renderer: CustomRenderer<ButtonCell> = {
         const width = Math.ceil(rect.width - theme.cellHorizontalPadding * 2 - 1);
         const height = Math.ceil(rect.height - theme.cellVerticalPadding * 2 - 1);
 
+        if (width <= 0 || height <= 0) return true;
+
         if (backgroundColor !== undefined) {
             ctx.beginPath();
             roundedRect(ctx, x, y, width, height, borderRadius ?? 0);

diff --git a/packages/cells/src/cells/date-picker-cell.tsx b/packages/cells/src/cells/date-picker-cell.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import { styled } from "@linaria/react";
 
 import {
-    CustomCell,
-    CustomRenderer,
+    type CustomCell,
+    type CustomRenderer,
     drawTextCell,
     GridCellKind,
-    ProvideEditorCallback,
+    type ProvideEditorCallback,
     TextCellEntry,
 } from "@glideapps/glide-data-grid";
 

diff --git a/packages/cells/src/cells/dropdown-cell.tsx b/packages/cells/src/cells/dropdown-cell.tsx
@@ -1,15 +1,15 @@
 import {
-    CustomCell,
-    ProvideEditorCallback,
-    CustomRenderer,
+    type CustomCell,
+    type ProvideEditorCallback,
+    type CustomRenderer,
     getMiddleCenterBias,
     useTheme,
     GridCellKind,
     TextCellEntry,
 } from "@glideapps/glide-data-grid";
 import { styled } from "@linaria/react";
 import * as React from "react";
-import Select, { MenuProps, components } from "react-select";
+import Select, { type MenuProps, components } from "react-select";
 
 interface CustomMenuProps extends MenuProps<any> {}
 

diff --git a/packages/cells/src/cells/links-cell.tsx b/packages/cells/src/cells/links-cell.tsx
@@ -1,7 +1,7 @@
 import {
-    CustomCell,
+    type CustomCell,
     measureTextCached,
-    CustomRenderer,
+    type CustomRenderer,
     getMiddleCenterBias,
     GridCellKind,
     blend,
@@ -267,7 +267,9 @@ const LinksCellEditorStyle = styled.div`
 
             cursor: pointer;
 
-            transition: background-color 200ms, color 200ms;
+            transition:
+                background-color 200ms,
+                color 200ms;
 
             color: var(--gdg-text-medium);
 

diff --git a/packages/cells/src/cells/range-cell.tsx b/packages/cells/src/cells/range-cell.tsx
@@ -1,7 +1,7 @@
 import {
-    CustomCell,
+    type CustomCell,
     measureTextCached,
-    CustomRenderer,
+    type CustomRenderer,
     getMiddleCenterBias,
     GridCellKind,
 } from "@glideapps/glide-data-grid";

diff --git a/packages/cells/src/cells/sparkline-cell.tsx b/packages/cells/src/cells/sparkline-cell.tsx
@@ -1,4 +1,4 @@
-import { CustomCell, parseToRgba, Item, CustomRenderer, GridCellKind } from "@glideapps/glide-data-grid";
+import { type CustomCell, parseToRgba, type Item, type CustomRenderer, GridCellKind } from "@glideapps/glide-data-grid";
 
 interface SparklineCellProps {
     readonly kind: "sparkline-cell";

diff --git a/packages/cells/src/cells/spinner-cell.tsx b/packages/cells/src/cells/spinner-cell.tsx
@@ -1,4 +1,4 @@
-import { CustomCell, CustomRenderer, GridCellKind } from "@glideapps/glide-data-grid";
+import { type CustomCell, type CustomRenderer, GridCellKind } from "@glideapps/glide-data-grid";
 
 interface SpinnerCellProps {
     readonly kind: "spinner-cell";

diff --git a/packages/cells/src/cells/star-cell.tsx b/packages/cells/src/cells/star-cell.tsx
@@ -1,4 +1,4 @@
-import { CustomCell, Item, CustomRenderer, GridCellKind } from "@glideapps/glide-data-grid";
+import { type CustomCell, type Item, type CustomRenderer, GridCellKind } from "@glideapps/glide-data-grid";
 import * as React from "react";
 import { styled } from "@linaria/react";
 

diff --git a/packages/cells/src/cells/tags-cell.tsx b/packages/cells/src/cells/tags-cell.tsx
@@ -1,8 +1,8 @@
 import {
-    CustomCell,
-    Rectangle,
+    type CustomCell,
+    type Rectangle,
     measureTextCached,
-    CustomRenderer,
+    type CustomRenderer,
     getMiddleCenterBias,
     GridCellKind,
 } from "@glideapps/glide-data-grid";

diff --git a/packages/cells/src/cells/user-profile-cell.tsx b/packages/cells/src/cells/user-profile-cell.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable react/display-name */
 import * as React from "react";
 import {
-    CustomCell,
+    type CustomCell,
     measureTextCached,
     TextCellEntry,
-    CustomRenderer,
+    type CustomRenderer,
     getMiddleCenterBias,
     GridCellKind,
 } from "@glideapps/glide-data-grid";

diff --git a/packages/cells/src/draw-fns.ts b/packages/cells/src/draw-fns.ts
@@ -13,7 +13,8 @@ export function roundedRect(
     height: number,
     radius: number | CornerRadius
 ) {
-    if (radius === 0) {
+    if (width <= 0 || height <= 0) return;
+    if (typeof radius === "number" && radius <= 0) {
         ctx.rect(x, y, width, height);
         return;
     }
@@ -29,6 +30,11 @@ export function roundedRect(
         br: Math.min(radius.br, height / 2, width / 2),
     };
 
+    radius.tl = Math.max(0, radius.tl);
+    radius.tr = Math.max(0, radius.tr);
+    radius.br = Math.max(0, radius.br);
+    radius.bl = Math.max(0, radius.bl);
+
     ctx.moveTo(x + radius.tl, y);
     ctx.arcTo(x + width, y, x + width, y + radius.tr, radius.tr);
     ctx.arcTo(x + width, y + height, x + width - radius.br, y + height, radius.br);

diff --git a/packages/cells/src/index.ts b/packages/cells/src/index.ts
@@ -1,16 +1,16 @@
 import { useCustomCells } from "@glideapps/glide-data-grid";
-import StarCellRenderer, { StarCell } from "./cells/star-cell";
-import SparklineCellRenderer, { SparklineCell } from "./cells/sparkline-cell";
-import TagsCellRenderer, { TagsCell } from "./cells/tags-cell";
-import UserProfileCellRenderer, { UserProfileCell } from "./cells/user-profile-cell";
-import DropdownCellRenderer, { DropdownCell } from "./cells/dropdown-cell";
+import StarCellRenderer, { type StarCell } from "./cells/star-cell";
+import SparklineCellRenderer, { type SparklineCell } from "./cells/sparkline-cell";
+import TagsCellRenderer, { type TagsCell } from "./cells/tags-cell";
+import UserProfileCellRenderer, { type UserProfileCell } from "./cells/user-profile-cell";
+import DropdownCellRenderer, { type DropdownCell } from "./cells/dropdown-cell";
 import ArticleCellRenderer from "./cells/article-cell";
 import type { ArticleCell } from "./cells/article-cell-types";
-import RangeCellRenderer, { RangeCell } from "./cells/range-cell";
-import SpinnerCellRenderer, { SpinnerCell } from "./cells/spinner-cell";
-import DatePickerRenderer, { DatePickerCell } from "./cells/date-picker-cell";
-import LinksCellRenderer, { LinksCell } from "./cells/links-cell";
-import ButtonCellRenderer, { ButtonCell } from "./cells/button-cell";
+import RangeCellRenderer, { type RangeCell } from "./cells/range-cell";
+import SpinnerCellRenderer, { type SpinnerCell } from "./cells/spinner-cell";
+import DatePickerRenderer, { type DatePickerCell } from "./cells/date-picker-cell";
+import LinksCellRenderer, { type LinksCell } from "./cells/links-cell";
+import ButtonCellRenderer, { type ButtonCell } from "./cells/button-cell";
 
 const cells = [
     StarCellRenderer,

diff --git a/packages/cells/test/date-picker-cell.test.tsx b/packages/cells/test/date-picker-cell.test.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { fireEvent, render } from "@testing-library/react";
 
 import { GridCellKind } from "@glideapps/glide-data-grid";
-import renderer, { DateKind, DatePickerCell, formatValueForHTMLInput } from "../src/cells/date-picker-cell";
+import renderer, { type DateKind, type DatePickerCell, formatValueForHTMLInput } from "../src/cells/date-picker-cell";
 
 describe("formatValueForHTMLInput", () => {
     it.each([

diff --git a/packages/core/build.cjs b/packages/core/build.cjs
@@ -1,5 +1,5 @@
 const { build } = require("esbuild");
-const linaria = require("@linaria/esbuild/lib/index").default;
+const linaria = require("@linaria/esbuild").default;
 const { dependencies, peerDependencies } = require("./package.json");
 const fs = require("fs");
 

diff --git a/packages/core/jest.config.js b/packages/core/jest.config.js
@@ -6,7 +6,7 @@ export default {
     setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
     testPathIgnorePatterns: ["/node_modules/", "/dist/"],
     transform: {
-        "^.+\\.(ts|tsx)?$": "ts-jest",
+        "^.+\\.(ts|tsx)?$": ["ts-jest", { isolatedModules: true, useESM: true }],
         "^.+\\.(js|jsx)$": "babel-jest",
     },
     globals: {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid",
-    "version": "5.3.0",
+    "version": "5.3.1-alpha3",
     "description": "React data grid for beautifully displaying and editing large amounts of data with amazing performance.",
     "sideEffects": [
         "**/*.css"
@@ -66,12 +66,11 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.16.0",
-        "@glideapps/ts-helper": "0.0.5",
+        "@glideapps/ts-helper": "5.0.0",
         "@skypack/package-check": "^0.2.2",
-        "@types/jest": "^28.1.8",
-        "esbuild": "^0.14.47",
+        "@types/jest": "^29.5.4",
         "eslint": "^8.19.0",
-        "jest": "^27.4.2",
+        "jest": "^29.6.4",
         "react-resize-detector": "^7.1.2",
         "tsc-esm-fix": "^2.7.8",
         "typedoc": "^0.23.13"

diff --git a/packages/core/src/common/resize-detector.ts b/packages/core/src/common/resize-detector.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
-import { useLayoutEffect, useState, useRef, MutableRefObject } from "react";
+import { useLayoutEffect, useState, useRef, type MutableRefObject } from "react";
 interface ReactResizeDetectorDimensions {
     height?: number;
     width?: number;

diff --git a/packages/core/src/common/utils.tsx b/packages/core/src/common/utils.tsx
@@ -254,3 +254,20 @@ export function useStateWithReactiveInput<T>(inputState: T): [T, React.Dispatch<
 
     return [inputStateRef.current[0] === empty ? state : inputStateRef.current[0], setStateOuter, onEmpty];
 }
+
+export function makeAccessibilityStringForArray(arr: readonly string[]): string {
+    // this is basically just .join(", ") but checks to make sure it is not going to allocate
+    // a string that is so large it might crash the browser
+    if (arr.length === 0) {
+        return "";
+    }
+
+    let index = 0;
+    let count = 0;
+    for (const str of arr) {
+        count += str.length;
+        if (count > 10_000) break;
+        index++;
+    }
+    return arr.slice(0, index).join(", ");
+}