Remove Data Grid alpha and export more internals (#3256)

.changeset/beige-students-accept.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/data-grid": patch
+---
+
+Exported `EditorContext` and `CellFrame` to create custom cell and cell editors

.yarn/patches/@changesets-assemble-release-plan-npm-6.0.2-d74b7b2762.patch

@@ -6,7 +6,7 @@ index 60427457c887f2d72168fecec83d79088c68e3a4..b2f9655ac07d6adbc29b5c7e46c5d7af
    }
 
    let version = semverInc__default["default"](release.oldVersion, release.type);
-+  if (release.name === "@salt-ds/lab" || release.name === "@salt-ds/data-grid") {
++  if (release.name === "@salt-ds/lab") {
 +    version = semverInc__default["default"](release.oldVersion, "prerelease")
 +  }
 
@@ -29,7 +29,7 @@ index f6583cf3f639e1fe4df764a015689dea74127236..318ecb08e2c58e8d3ac4ef11f659a5cd
    }
 
    let version = semverInc(release.oldVersion, release.type);
-+  if (release.name === "@salt-ds/lab" || release.name === "@salt-ds/data-grid") {
++  if (release.name === "@salt-ds/lab") {
 +    version = semverInc(release.oldVersion, "prerelease");
 +  }
 

packages/data-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/data-grid",
-  "version": "1.0.4-alpha.10",
+  "version": "1.0.4",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -25,7 +25,6 @@
   },
   "publishConfig": {
     "directory": "../../dist/salt-ds-data-grid",
-    "tag": "next",
     "provenance": true
   }
 }

packages/data-grid/src/BaseCell.tsx

@@ -1,12 +1,13 @@
-import { clsx } from "clsx";
 import { makePrefixer } from "@salt-ds/core";
-import { useWindow } from "@salt-ds/window";
 import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
 
-import { GridCellProps } from "./GridColumn";
-import { GridColumnModel } from "./Grid";
-import { Cell, Cursor, useFocusableContent } from "./internal";
+import { CellFrame } from "./CellFrame";
 import { CornerTag } from "./CornerTag";
+import { GridColumnModel } from "./Grid";
+import { GridCellProps } from "./GridColumn";
+import { Cursor, useFocusableContent } from "./internal";
 import {
   CellErrorIcon,
   CellSuccessIcon,
@@ -59,7 +60,7 @@ export function BaseCell<T>(props: GridCellProps<T>) {
   const hasValidationMessage = !!validationMessage || hasValidation;
   const validationMessageId = `${cellId}-statusMessage`;
   return (
-    <Cell
+    <CellFrame
       ref={ref}
       id={cellId}
       data-row-index={row.index}
@@ -106,6 +107,6 @@ export function BaseCell<T>(props: GridCellProps<T>) {
       ) : null}
       {isFocused && isEditable && <CornerTag focusOnly={true} />}
       {isFocused && !isFocusableContent && <Cursor />}
-    </Cell>
+    </CellFrame>
   );
 }

packages/data-grid/src/internal/Cell.tsx → packages/data-grid/src/CellFrame.tsx

@@ -4,19 +4,21 @@ import { useComponentCssInjection } from "@salt-ds/styles";
 import { forwardRef, HTMLAttributes } from "react";
 import { clsx } from "clsx";
 
-import { ColumnSeparatorType } from "../Grid";
+import { ColumnSeparatorType } from "./Grid";
 
-import cellCss from "./Cell.css";
+import cellCss from "./CellFrame.css";
 
 export interface CellProps extends HTMLAttributes<HTMLTableCellElement> {
   isSelected?: boolean;
   isEditable?: boolean;
   separator?: ColumnSeparatorType;
 }
 
+// TODO: rename the prefix in next major version to match component name.
 const withBaseName = makePrefixer("saltGridCell");
 
-export const Cell = forwardRef<HTMLTableCellElement, CellProps>(
+/** Cell frame used for creating custom cells and editors */
+export const CellFrame = forwardRef<HTMLTableCellElement, CellProps>(
   function CellFrame(props, ref) {
     const {
       children,
@@ -50,7 +52,7 @@ export const Cell = forwardRef<HTMLTableCellElement, CellProps>(
         )}
         {...tdProps}
       >
-        <div className={withBaseName("body")}>{props.children}</div>
+        <div className={withBaseName("body")}>{children}</div>
         <div className={withBaseName("columnSeparator")} />
         <div className={withBaseName("rowSeparator")} />
         <div className={withBaseName("topSeparator")} />

packages/data-grid/src/DropdownCellEditor.tsx

@@ -1,13 +1,13 @@
-import { useEffect, useRef } from "react";
 import { makePrefixer } from "@salt-ds/core";
-import { Dropdown, SelectionChangeHandler, SelectHandler } from "@salt-ds/lab";
-import { useWindow } from "@salt-ds/window";
+import { Dropdown, SelectHandler, SelectionChangeHandler } from "@salt-ds/lab";
 import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useEffect, useRef } from "react";
 
+import { CellFrame } from "./CellFrame";
+import { CornerTag } from "./CornerTag";
 import { useEditorContext } from "./EditorContext";
 import { GridColumnModel, GridRowModel } from "./Grid";
-import { CornerTag } from "./CornerTag";
-import { Cell } from "./internal";
 
 import dropdownCellEditorCss from "./DropdownCellEditor.css";
 
@@ -66,7 +66,7 @@ export function DropdownCellEditor<T>(props: DropdownCellEditorProps<T>) {
   );
 
   return (
-    <Cell separator={column?.separator} className={withBaseName()}>
+    <CellFrame separator={column?.separator} className={withBaseName()}>
       <div className={withBaseName("dropdownContainer")}>
         {options && options.length > 0 ? (
           <Dropdown
@@ -83,6 +83,6 @@ export function DropdownCellEditor<T>(props: DropdownCellEditorProps<T>) {
         )}
       </div>
       <CornerTag />
-    </Cell>
+    </CellFrame>
   );
 }

packages/data-grid/src/NumericColumn.tsx

@@ -1,3 +1,5 @@
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
 import {
   ChangeEventHandler,
   KeyboardEventHandler,
@@ -6,14 +8,12 @@ import {
   useRef,
   useState,
 } from "react";
-import { useWindow } from "@salt-ds/window";
-import { useComponentCssInjection } from "@salt-ds/styles";
 
-import { GridCellValueProps, GridColumn, GridColumnProps } from "./GridColumn";
-import { GridColumnModel, GridRowModel } from "./Grid";
-import { useEditorContext } from "./EditorContext";
+import { CellFrame } from "./CellFrame";
 import { CornerTag } from "./CornerTag";
-import { Cell } from "./internal";
+import { useEditorContext } from "./EditorContext";
+import { GridColumnModel, GridRowModel } from "./Grid";
+import { GridCellValueProps, GridColumn, GridColumnProps } from "./GridColumn";
 
 import numericColumnCss from "./NumericColumn.css";
 
@@ -104,7 +104,10 @@ export function NumericCellEditor<T>(props: NumericEditorProps<T>) {
   }, [endEditMode, editorText]);
 
   return (
-    <Cell separator={column?.separator} className="saltGridNumericCellEditor">
+    <CellFrame
+      separator={column?.separator}
+      className="saltGridNumericCellEditor"
+    >
       <div className="saltGridNumericCellEditor-inputContainer">
         <input
           ref={inputRef}
@@ -116,7 +119,7 @@ export function NumericCellEditor<T>(props: NumericEditorProps<T>) {
         />
       </div>
       <CornerTag />
-    </Cell>
+    </CellFrame>
   );
 }
 

packages/data-grid/src/TextCellEditor.tsx

@@ -1,18 +1,18 @@
+import { makePrefixer } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
 import {
   ChangeEventHandler,
   KeyboardEventHandler,
   useEffect,
   useRef,
   useState,
 } from "react";
-import { makePrefixer } from "@salt-ds/core";
-import { useWindow } from "@salt-ds/window";
-import { useComponentCssInjection } from "@salt-ds/styles";
 
+import { CellFrame } from "./CellFrame";
+import { CornerTag } from "./CornerTag";
 import { useEditorContext } from "./EditorContext";
 import { GridColumnModel, GridRowModel } from "./Grid";
-import { CornerTag } from "./CornerTag";
-import { Cell } from "./internal";
 
 import textCellEditorCss from "./TextCellEditor.css";
 
@@ -88,7 +88,7 @@ export function TextCellEditor<T>(props: TextCellEditorProps<T>) {
   }, [endEditMode, editorText]);
 
   return (
-    <Cell separator={column?.separator} className={withBaseName()}>
+    <CellFrame separator={column?.separator} className={withBaseName()}>
       <div className={withBaseName("inputContainer")}>
         <input
           data-testid="grid-cell-editor-input"
@@ -100,6 +100,6 @@ export function TextCellEditor<T>(props: TextCellEditorProps<T>) {
         />
       </div>
       <CornerTag />
-    </Cell>
+    </CellFrame>
   );
 }

packages/data-grid/src/index.ts

@@ -1,7 +1,9 @@
 export * from "./BaseCell";
 export * from "./ColumnGroup";
 export * from "./CellEditor";
+export * from "./CellFrame";
 export * from "./CornerTag";
+export * from "./EditorContext";
 export * from "./GroupHeaderCell";
 export * from "./GroupHeaderCellValue";
 export * from "./HeaderCell";

packages/data-grid/src/internal/FakeCell.tsx

@@ -2,8 +2,7 @@ import { useWindow } from "@salt-ds/window";
 import { useComponentCssInjection } from "@salt-ds/styles";
 
 import { GridCellProps } from "../GridColumn";
-
-import { Cell } from "./Cell";
+import { CellFrame } from "../CellFrame";
 
 import fakeCellCss from "./FakeCell.css";
 
@@ -24,7 +23,7 @@ export function FakeCell<T>(props: FakeCellProps<T>) {
   });
 
   return (
-    <Cell
+    <CellFrame
       className="saltGridFakeCell"
       data-row-index={row.index}
       data-column-index={-1}

packages/data-grid/src/internal/TableRow.tsx

@@ -130,10 +130,10 @@ export function TableRow<T>(props: TableRowProps<T>) {
 
         return (
           <RowValidationStatusContext.Provider
+            key={colKey}
             value={{ status: rowValidationStatus }}
           >
             <Cell
-              key={colKey}
               row={row}
               column={column}
               isFocused={isFocused}

packages/data-grid/src/internal/index.ts

@@ -1,4 +1,3 @@
-export * from "./Cell";
 export * from "./CellMeasure";
 export * from "./Cursor";
 export * from "./GroupHeaderRow";

yarn.lock

@@ -2407,7 +2407,7 @@ __metadata:
 
 "@changesets/assemble-release-plan@patch:@changesets/assemble-release-plan@npm%3A6.0.2#~/.yarn/patches/@changesets-assemble-release-plan-npm-6.0.2-d74b7b2762.patch":
   version: 6.0.2
-  resolution: "@changesets/assemble-release-plan@patch:@changesets/assemble-release-plan@npm%3A6.0.2#~/.yarn/patches/@changesets-assemble-release-plan-npm-6.0.2-d74b7b2762.patch::version=6.0.2&hash=be537f"
+  resolution: "@changesets/assemble-release-plan@patch:@changesets/assemble-release-plan@npm%3A6.0.2#~/.yarn/patches/@changesets-assemble-release-plan-npm-6.0.2-d74b7b2762.patch::version=6.0.2&hash=04ab95"
   dependencies:
     "@babel/runtime": "npm:^7.20.1"
     "@changesets/errors": "npm:^0.2.0"
@@ -2416,7 +2416,7 @@ __metadata:
     "@changesets/types": "npm:^6.0.0"
     "@manypkg/get-packages": "npm:^1.1.3"
     semver: "npm:^7.5.3"
-  checksum: 10/fbc83410602e1a315ec936c6a555aa99272c18628f20081406fcca26cfc8e80d812367f44af09b8460ff6640579b9a1d9b9b06292251f8a9a1609f89b5c19df4
+  checksum: 10/9a43988312b0aaaedb1f33c28179cf067edd2eb173112a1809cc8c9efd5c2f4af9ba128aa4fc00e0234f2c23ec7587e789541318f9d8ac34a07b36d582004744
   languageName: node
   linkType: hard