WIP

packages/cells/src/cell.stories.tsx

@@ -2,23 +2,23 @@ import { styled } from "@linaria/react";
 import * as React from "react";
 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";
+import type { StarCell } from "./cells/star-cell.js";
+import type { SparklineCell } from "./cells/sparkline-cell.js";
 import range from "lodash/range.js";
 import uniq from "lodash/uniq.js";
-import type { TagsCell } from "./cells/tags-cell";
-import type { UserProfileCell } from "./cells/user-profile-cell";
-import type { DropdownCell } from "./cells/dropdown-cell";
-import type { ArticleCell } from "./cells/article-cell-types";
-import type { RangeCell } from "./cells/range-cell";
-import type { SpinnerCell } from "./cells/spinner-cell";
+import type { TagsCell } from "./cells/tags-cell.js";
+import type { UserProfileCell } from "./cells/user-profile-cell.js";
+import type { DropdownCell } from "./cells/dropdown-cell.js";
+import type { ArticleCell } from "./cells/article-cell-types.js";
+import type { RangeCell } from "./cells/range-cell.js";
+import type { SpinnerCell } from "./cells/spinner-cell.js";
 import { useResizeDetector } from "react-resize-detector";
 
 import "@toast-ui/editor/dist/toastui-editor.css";
 import "@glideapps/glide-data-grid/dist/index.css";
-import type { DatePickerCell } from "./cells/date-picker-cell";
-import type { LinksCell } from "./cells/links-cell";
-import type { ButtonCell } from "./cells/button-cell";
+import type { DatePickerCell } from "./cells/date-picker-cell.js";
+import type { LinksCell } from "./cells/links-cell.js";
+import type { ButtonCell } from "./cells/button-cell.js";
 
 const SimpleWrapper = styled.div`
     text-rendering: optimizeLegibility;

packages/cells/src/cells/article-cell-editor.tsx

@@ -2,7 +2,7 @@ import type { ProvideEditorComponent } from "@glideapps/glide-data-grid";
 import * as React from "react";
 import { Editor } from "@toast-ui/react-editor";
 import { styled } from "@linaria/react";
-import type { ArticleCell } from "./article-cell-types";
+import type { ArticleCell } from "./article-cell-types.js";
 
 const Wrapper = styled.div`
     .footer {

packages/cells/src/cells/article-cell.tsx

@@ -1,4 +1,4 @@
-import type { ArticleCell } from "./article-cell-types";
+import type { ArticleCell } from "./article-cell-types.js";
 import * as React from "react";
 import { type CustomRenderer, getMiddleCenterBias, GridCellKind } from "@glideapps/glide-data-grid";
 

packages/cells/src/cells/button-cell.tsx

@@ -5,7 +5,7 @@ import {
     GridCellKind,
     interpolateColors,
 } from "@glideapps/glide-data-grid";
-import { roundedRect } from "../draw-fns";
+import { roundedRect } from "../draw-fns.js";
 
 type PackedColor = string | readonly [normal: string, hover: string];
 

packages/cells/src/cells/range-cell.tsx

@@ -6,7 +6,7 @@ import {
     GridCellKind,
 } from "@glideapps/glide-data-grid";
 import * as React from "react";
-import { roundedRect } from "../draw-fns";
+import { roundedRect } from "../draw-fns.js";
 
 interface RangeCellProps {
     readonly kind: "range-cell";

packages/cells/src/cells/tags-cell.tsx

@@ -8,7 +8,7 @@ import {
 } from "@glideapps/glide-data-grid";
 import { styled } from "@linaria/react";
 import * as React from "react";
-import { roundedRect } from "../draw-fns";
+import { roundedRect } from "../draw-fns.js";
 
 interface TagsCellProps {
     readonly kind: "tags-cell";

packages/cells/src/index.ts

@@ -1,16 +1,16 @@
 import { useCustomCells } from "@glideapps/glide-data-grid";
-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, { 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";
+import StarCellRenderer, { type StarCell } from "./cells/star-cell.js";
+import SparklineCellRenderer, { type SparklineCell } from "./cells/sparkline-cell.js";
+import TagsCellRenderer, { type TagsCell } from "./cells/tags-cell.js";
+import UserProfileCellRenderer, { type UserProfileCell } from "./cells/user-profile-cell.js";
+import DropdownCellRenderer, { type DropdownCell } from "./cells/dropdown-cell.js";
+import ArticleCellRenderer from "./cells/article-cell.js";
+import type { ArticleCell } from "./cells/article-cell-types.js";
+import RangeCellRenderer, { type RangeCell } from "./cells/range-cell.js";
+import SpinnerCellRenderer, { type SpinnerCell } from "./cells/spinner-cell.js";
+import DatePickerRenderer, { type DatePickerCell } from "./cells/date-picker-cell.js";
+import LinksCellRenderer, { type LinksCell } from "./cells/links-cell.js";
+import ButtonCellRenderer, { type ButtonCell } from "./cells/button-cell.js";
 
 const cells = [
     StarCellRenderer,

packages/cells/test/date-picker-cell.test.tsx

@@ -2,8 +2,11 @@ import * as React from "react";
 import { fireEvent, render } from "@testing-library/react";
 
 import { GridCellKind } from "@glideapps/glide-data-grid";
-import renderer, { type DateKind, type DatePickerCell, formatValueForHTMLInput } from "../src/cells/date-picker-cell";
-
+import renderer, {
+    type DateKind,
+    type DatePickerCell,
+    formatValueForHTMLInput,
+} from "../src/cells/date-picker-cell.js";
 describe("formatValueForHTMLInput", () => {
     it.each([
         ["date", new Date("1970-01-01T00:00:00.100Z"), "1970-01-01"],

packages/cells/test/index.test.ts

@@ -1,4 +1,4 @@
-import { useExtraCells } from "../src/index";
+import { useExtraCells } from "../src/index.js";
 import { renderHook } from "@testing-library/react-hooks";
 
 describe("useExtraCells", () => {

packages/core/src/common/image-window-loader.ts

@@ -1,4 +1,4 @@
-import type { ImageWindowLoader, Item, Rectangle } from "../data-grid/data-grid-types";
+import type { ImageWindowLoader, Item, Rectangle } from "../data-grid/data-grid-types.js";
 import throttle from "lodash/throttle.js";
 
 interface LoadResult {

packages/core/src/common/is-hotkey.ts

@@ -1,5 +1,5 @@
-import type { GridKeyEventArgs } from "../data-grid/data-grid-types";
-import { browserIsOSX } from "./browser-detect";
+import type { GridKeyEventArgs } from "../data-grid/data-grid-types.js";
+import { browserIsOSX } from "./browser-detect.js";
 
 // brain dead syntax, find your deps, and make buggy replacements with 5 times the effort
 // all lower case

packages/core/src/data-editor/copy-paste.ts

@@ -1,6 +1,6 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { assertNever } from "../common/support";
-import { GridCellKind, type GridCell, BooleanEmpty, BooleanIndeterminate } from "../data-grid/data-grid-types";
+import { assertNever } from "../common/support.js";
+import { GridCellKind, type GridCell, BooleanEmpty, BooleanIndeterminate } from "../data-grid/data-grid-types.js";
 
 type StringArrayCellBuffer = {
     formatted: string[];

packages/core/src/data-editor/data-editor-fns.ts

@@ -1,6 +1,6 @@
-import type { DataGridSearchProps } from "../data-grid-search/data-grid-search";
-import { type GridCell, type GridSelection, type Rectangle } from "../data-grid/data-grid-types";
-import { getCopyBufferContents, type CopyBuffer } from "./copy-paste";
+import type { DataGridSearchProps } from "../data-grid-search/data-grid-search.js";
+import { type GridCell, type GridSelection, type Rectangle } from "../data-grid/data-grid-types.js";
+import { getCopyBufferContents, type CopyBuffer } from "./copy-paste.js";
 
 export function expandSelection(
     newVal: GridSelection,

packages/core/src/data-editor/data-editor.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import * as React from "react";
-import { assert, assertNever, maybe } from "../common/support";
+import { assert, assertNever, maybe } from "../common/support.js";
 import clamp from "lodash/clamp.js";
 import uniq from "lodash/uniq.js";
 import flatten from "lodash/flatten.js";
 import range from "lodash/range.js";
 import debounce from "lodash/debounce.js";
-import DataGridOverlayEditor from "../data-grid-overlay-editor/data-grid-overlay-editor";
+import DataGridOverlayEditor from "../data-grid-overlay-editor/data-grid-overlay-editor.js";
 import {
     type EditableGridCell,
     type GridCell,
@@ -45,26 +45,26 @@ import {
     gridSelectionHasItem,
     BooleanEmpty,
     BooleanIndeterminate,
-} from "../data-grid/data-grid-types";
-import DataGridSearch, { type DataGridSearchProps } from "../data-grid-search/data-grid-search";
-import { browserIsOSX } from "../common/browser-detect";
-import { getDataEditorTheme, makeCSSStyle, type Theme, ThemeContext } from "../common/styles";
-import type { DataGridRef } from "../data-grid/data-grid";
-import { getScrollBarWidth, useEventListener, useStateWithReactiveInput, whenDefined } from "../common/utils";
-import { isGroupEqual } from "../data-grid/data-grid-lib";
-import { GroupRename } from "./group-rename";
-import { measureColumn, useColumnSizer } from "./use-column-sizer";
-import { isHotkey } from "../common/is-hotkey";
-import { type SelectionBlending, useSelectionBehavior } from "../data-grid/use-selection-behavior";
-import { useCellsForSelection } from "./use-cells-for-selection";
-import { unquote, expandSelection, copyToClipboard } from "./data-editor-fns";
-import { DataEditorContainer } from "../data-editor-container/data-grid-container";
-import { toggleBoolean } from "../data-grid/cells/boolean-cell";
-import { useAutoscroll } from "./use-autoscroll";
-import type { CustomRenderer, CellRenderer } from "../data-grid/cells/cell-types";
-import { CellRenderers } from "../data-grid/cells";
-import { decodeHTML, type CopyBuffer } from "./copy-paste";
-import { useRemAdjuster } from "./use-rem-adjuster";
+} from "../data-grid/data-grid-types.js";
+import DataGridSearch, { type DataGridSearchProps } from "../data-grid-search/data-grid-search.js";
+import { browserIsOSX } from "../common/browser-detect.js";
+import { getDataEditorTheme, makeCSSStyle, type Theme, ThemeContext } from "../common/styles.js";
+import type { DataGridRef } from "../data-grid/data-grid.js";
+import { getScrollBarWidth, useEventListener, useStateWithReactiveInput, whenDefined } from "../common/utils.js";
+import { isGroupEqual } from "../data-grid/data-grid-lib.js";
+import { GroupRename } from "./group-rename.js";
+import { measureColumn, useColumnSizer } from "./use-column-sizer.js";
+import { isHotkey } from "../common/is-hotkey.js";
+import { type SelectionBlending, useSelectionBehavior } from "../data-grid/use-selection-behavior.js";
+import { useCellsForSelection } from "./use-cells-for-selection.js";
+import { unquote, expandSelection, copyToClipboard } from "./data-editor-fns.js";
+import { DataEditorContainer } from "../data-editor-container/data-grid-container.js";
+import { toggleBoolean } from "../data-grid/cells/boolean-cell.js";
+import { useAutoscroll } from "./use-autoscroll.js";
+import type { CustomRenderer, CellRenderer } from "../data-grid/cells/cell-types.js";
+import { CellRenderers } from "../data-grid/cells/index.js";
+import { decodeHTML, type CopyBuffer } from "./copy-paste.js";
+import { useRemAdjuster } from "./use-rem-adjuster.js";
 
 let idCounter = 0;
 
@@ -3440,23 +3440,22 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 return gridRef.current?.damage(damageList);
             },
             getBounds: (col, row) => {
-
                 if (canvasRef?.current === null || scrollRef?.current === null) {
-                    return undefined
+                    return undefined;
                 }
 
                 if (col === undefined && row === undefined) {
                     // Return the bounds of the entire scroll area:
-                    const rect = canvasRef.current.getBoundingClientRect()
-                    const scale = rect.width / scrollRef.current.clientWidth
-                    return {   
-                         x: rect.x - scrollRef.current.scrollLeft * scale,
-                         y: rect.y - scrollRef.current.scrollTop * scale,
-                         width: scrollRef.current.scrollWidth * scale,
-                         height: scrollRef.current.scrollHeight * scale,
-                     };
+                    const rect = canvasRef.current.getBoundingClientRect();
+                    const scale = rect.width / scrollRef.current.clientWidth;
+                    return {
+                        x: rect.x - scrollRef.current.scrollLeft * scale,
+                        y: rect.y - scrollRef.current.scrollTop * scale,
+                        width: scrollRef.current.scrollWidth * scale,
+                        height: scrollRef.current.scrollHeight * scale,
+                    };
                 }
-                return gridRef.current?.getBounds( col ?? 0 + rowMarkerOffset, row);
+                return gridRef.current?.getBounds(col ?? 0 + rowMarkerOffset, row);
             },
             focus: () => gridRef.current?.focus(),
             emit: async e => {

packages/core/src/data-editor/group-rename.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { styled } from "@linaria/react";
 import { css } from "@linaria/core";
-import ClickOutsideContainer from "../click-outside-container/click-outside-container";
-import type { Rectangle } from "../data-grid/data-grid-types";
+import ClickOutsideContainer from "../click-outside-container/click-outside-container.js";
+import type { Rectangle } from "../data-grid/data-grid-types.js";
 
 interface Props {
     readonly bounds: Rectangle;

packages/core/src/data-editor/stories/data-editor-async.stories.tsx

@@ -8,10 +8,10 @@ import {
     type Rectangle,
     type Item,
     type CellArray,
-} from "../../data-grid/data-grid-types";
-import { SimpleThemeWrapper } from "../../stories/story-utils";
-import { DataEditor, type DataEditorProps, type DataEditorRef } from "../data-editor";
-import { BeautifulWrapper, Description } from "./utils";
+} from "../../data-grid/data-grid-types.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import { DataEditor, type DataEditorProps, type DataEditorRef } from "../data-editor.js";
+import { BeautifulWrapper, Description } from "./utils.js";
 import range from "lodash/range.js";
 import chunk from "lodash/chunk.js";
 

packages/core/src/data-editor/stories/data-editor-repros.stories.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 
 import { useState, useMemo } from "@storybook/addons";
-import { BuilderThemeWrapper } from "../../stories/story-utils";
-
-import { type GridCell, GridCellKind, type Item } from "../../data-grid/data-grid-types";
-import { DataEditor } from "../data-editor";
+import { BuilderThemeWrapper } from "../../stories/story-utils.js";
+import { type GridCell, GridCellKind, type Item } from "../../data-grid/data-grid-types.js";
+import { DataEditor } from "../data-editor.js";
 import { styled } from "@linaria/react";
 
 export default {

packages/core/src/data-editor/stories/data-editor.stories.tsx

@@ -2,8 +2,7 @@
 import * as React from "react";
 
 import { useState, useCallback, useMemo } from "@storybook/addons";
-import { BuilderThemeWrapper } from "../../stories/story-utils";
-
+import { BuilderThemeWrapper } from "../../stories/story-utils.js";
 import {
     CompactSelection,
     type EditableGridCell,
@@ -12,8 +11,8 @@ import {
     type GridColumn,
     type GridSelection,
     type Item,
-} from "../../data-grid/data-grid-types";
-import { DataEditor } from "../data-editor";
+} from "../../data-grid/data-grid-types.js";
+import { DataEditor } from "../data-editor.js";
 
 export default {
     title: "Tests/TestCases",

packages/core/src/data-editor/stories/utils.tsx

@@ -10,15 +10,14 @@ import {
     isEditableGridCell,
     isTextEditableGridCell,
     type Item,
-} from "../../data-grid/data-grid-types";
-
+} from "../../data-grid/data-grid-types.js";
 import { faker } from "@faker-js/faker";
 import { styled } from "@linaria/react";
 import isArray from "lodash/isArray.js";
-import { assertNever } from "../../common/support";
-import { browserIsFirefox } from "../../common/browser-detect";
+import { assertNever } from "../../common/support.js";
+import { browserIsFirefox } from "../../common/browser-detect.js";
 import { useResizeDetector } from "react-resize-detector";
-import type { DataEditorProps } from "../data-editor";
+import type { DataEditorProps } from "../data-editor.js";
 import noop from "lodash/noop.js";
 
 faker.seed(1337);

packages/core/src/data-editor/use-autoscroll.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { GridMouseCellEventArgs } from "../data-grid/data-grid-types";
+import type { GridMouseCellEventArgs } from "../data-grid/data-grid-types.js";
 
 const maxPxPerMs = 2;
 const msToFullSpeed = 1300;

packages/core/src/data-editor/use-cells-for-selection.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import type { DataGridSearchProps } from "../data-grid-search/data-grid-search";
-import { type CellArray, type GridCell, GridCellKind } from "../data-grid/data-grid-types";
-import type { DataEditorProps } from "./data-editor";
+import type { DataGridSearchProps } from "../data-grid-search/data-grid-search.js";
+import { type CellArray, type GridCell, GridCellKind } from "../data-grid/data-grid-types.js";
+import type { DataEditorProps } from "./data-editor.js";
 
 type CellsForSelectionCallback = NonNullable<DataGridSearchProps["getCellsForSelection"]>;
 export function useCellsForSelection(

packages/core/src/data-editor/use-column-sizer.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
-import type { Theme } from "../common/styles";
-import type { DataGridSearchProps } from "../data-grid-search/data-grid-search";
-import type { GetCellRendererCallback } from "../data-grid/cells/cell-types";
+import type { Theme } from "../common/styles.js";
+import type { DataGridSearchProps } from "../data-grid-search/data-grid-search.js";
+import type { GetCellRendererCallback } from "../data-grid/cells/cell-types.js";
+
 import {
     type CellArray,
     type GridCell,
@@ -10,8 +11,7 @@ import {
     isSizedGridColumn,
     resolveCellsThunk,
     type SizedGridColumn,
-} from "../data-grid/data-grid-types";
-
+} from "../data-grid/data-grid-types.js";
 const defaultSize = 150;
 
 function measureCell(

packages/core/src/data-editor/use-custom-cells.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import type { CustomRenderer } from "../data-grid/cells/cell-types";
-import { type CustomCell, GridCellKind } from "../data-grid/data-grid-types";
-import type { DataEditorProps } from "./data-editor";
+import type { CustomRenderer } from "../data-grid/cells/cell-types.js";
+import { type CustomCell, GridCellKind } from "../data-grid/data-grid-types.js";
+import type { DataEditorProps } from "./data-editor.js";
 
 /**
  * @category Renderers

packages/core/src/data-editor/use-rem-adjuster.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { getDataEditorTheme, type Theme } from "../common/styles";
+import { getDataEditorTheme, type Theme } from "../common/styles.js";
 
 interface DataEditorDimensions {
     rowHeight: number | ((n: number) => number);