From 2484c8d385ad79a27c7f4abecd6641625c4b3154 Mon Sep 17 00:00:00 2001
From: Victor Gaiva <13839490+VictorGaiva@users.noreply.github.com>
Date: Tue, 30 Jan 2024 11:01:33 -0300
Subject: [PATCH 1/2] feat: Adds option type parameter to IndicatorProps

---
 src/types.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/types.ts b/src/types.ts
index fa47a46af..b8845647c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -161,11 +161,11 @@ export type HeaderRowProps = React.PropsWithChildren<{}>;
 export type HeaderRowComponent = React.ComponentType<HeaderRowProps>;
 
 /** Type of the Spreadsheet RowIndicator component props */
-export type RowIndicatorProps = {
+export type RowIndicatorProps<Label = React.ReactNode | null> = {
   /** The row the indicator indicates */
   row: number;
   /** A custom label for the indicator as provided in rowLabels */
-  label?: React.ReactNode | null;
+  label?: Label;
   /** Whether the entire row is selected */
   selected: boolean;
   /** Callback to be called when the row is selected */
@@ -173,14 +173,15 @@ export type RowIndicatorProps = {
 };
 
 /** Type of the RowIndicator component */
-export type RowIndicatorComponent = React.ComponentType<RowIndicatorProps>;
+export type RowIndicatorComponent<Label = React.ReactNode | null> =
+  React.ComponentType<RowIndicatorProps<Label>>;
 
 /** Type of the Spreadsheet ColumnIndicator component props */
-export type ColumnIndicatorProps = {
+export type ColumnIndicatorProps<Label = React.ReactNode | null> = {
   /** The column the indicator indicates */
   column: number;
   /** A custom label for the indicator as provided in columnLabels */
-  label?: React.ReactNode | null;
+  label?: Label;
   /** Whether the entire column in selected */
   selected: boolean;
   /** Callback to be called when the column is selected */
@@ -188,8 +189,8 @@ export type ColumnIndicatorProps = {
 };
 
 /** Type of the ColumnIndicator component */
-export type ColumnIndicatorComponent =
-  React.ComponentType<ColumnIndicatorProps>;
+export type ColumnIndicatorComponent<Label = React.ReactNode | null> =
+  React.ComponentType<ColumnIndicatorProps<Label>>;
 
 /** Type of the Spreadsheet CornerIndicator component props */
 export type CornerIndicatorProps = {

From 1a90cad446f56b7eed6cb453fbf79521ee244425 Mon Sep 17 00:00:00 2001
From: Victor Gaiva <13839490+VictorGaiva@users.noreply.github.com>
Date: Tue, 30 Jan 2024 13:40:54 -0300
Subject: [PATCH 2/2] feat: Typecheck props passed to SpreadSheet

---
 src/ColumnIndicator.tsx | 10 ++++++----
 src/RowIndicator.tsx    |  8 ++++----
 src/Spreadsheet.tsx     | 36 +++++++++++++++++++++++++++---------
 src/types.ts            | 31 +++++++++++++++++++++++--------
 src/util.ts             |  9 ++++++---
 5 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/src/ColumnIndicator.tsx b/src/ColumnIndicator.tsx
index d9941c6b9..1105e6370 100644
--- a/src/ColumnIndicator.tsx
+++ b/src/ColumnIndicator.tsx
@@ -5,7 +5,7 @@ import * as Actions from "./actions";
 import useDispatch from "./use-dispatch";
 import useSelector from "./use-selector";
 
-const ColumnIndicator: Types.ColumnIndicatorComponent = ({
+const ColumnIndicator: Types.ColumnIndicatorComponent<string> = ({
   column,
   label,
   selected,
@@ -32,9 +32,11 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
 
 export default ColumnIndicator;
 
-export const enhance = (
-  ColumnIndicatorComponent: Types.ColumnIndicatorComponent
-): React.FC<Omit<Types.ColumnIndicatorProps, "selected" | "onSelect">> => {
+export const enhance = <Label,>(
+  ColumnIndicatorComponent: Types.ColumnIndicatorComponent<Label>
+): React.FC<
+  Omit<Types.ColumnIndicatorProps<Label>, "selected" | "onSelect">
+> => {
   return function ColumnIndicatorWrapper(props) {
     const dispatch = useDispatch();
     const selectEntireColumn = React.useCallback(
diff --git a/src/RowIndicator.tsx b/src/RowIndicator.tsx
index 20f605727..98873f2f2 100644
--- a/src/RowIndicator.tsx
+++ b/src/RowIndicator.tsx
@@ -5,7 +5,7 @@ import * as Types from "./types";
 import useDispatch from "./use-dispatch";
 import useSelector from "./use-selector";
 
-const RowIndicator: Types.RowIndicatorComponent = ({
+const RowIndicator: Types.RowIndicatorComponent<string> = ({
   row,
   label,
   selected,
@@ -33,9 +33,9 @@ const RowIndicator: Types.RowIndicatorComponent = ({
 
 export default RowIndicator;
 
-export const enhance = (
-  RowIndicatorComponent: Types.RowIndicatorComponent
-): React.FC<Omit<Types.RowIndicatorProps, "selected" | "onSelect">> => {
+export const enhance = <Label,>(
+  RowIndicatorComponent: Types.RowIndicatorComponent<Label>
+): React.FC<Omit<Types.RowIndicatorProps<Label>, "selected" | "onSelect">> => {
   return function RowIndicatorWrapper(props) {
     const dispatch = useDispatch();
     const selected = useSelector((state) =>
diff --git a/src/Spreadsheet.tsx b/src/Spreadsheet.tsx
index 6fa224dfa..b67dd74a6 100644
--- a/src/Spreadsheet.tsx
+++ b/src/Spreadsheet.tsx
@@ -40,7 +40,11 @@ import Copied from "./Copied";
 import "./Spreadsheet.css";
 
 /** The Spreadsheet component props */
-export type Props<CellType extends Types.CellBase> = {
+export type Props<
+  CellType extends Types.CellBase,
+  RowIndicatorLabel = string,
+  ColumnIndicatorLabel = string
+> = Types.IndicatorLabelValidator<RowIndicatorLabel, ColumnIndicatorLabel> & {
   /** The spreadsheet's data */
   data: Matrix.Matrix<CellType>;
   /** Class name to be added to the spreadsheet's root element */
@@ -64,12 +68,12 @@ export type Props<CellType extends Types.CellBase> = {
    * Labels to use in column indicators.
    * @defaultValue alphabetical labels.
    */
-  columnLabels?: string[];
+  columnLabels?: ColumnIndicatorLabel[];
   /**
    * Labels to use in row indicators.
    * @defaultValue row index labels.
    */
-  rowLabels?: string[];
+  rowLabels?: RowIndicatorLabel[];
   /**
    * If set to true, hides the row indicators of the spreadsheet.
    * @defaultValue `false`.
@@ -84,11 +88,11 @@ export type Props<CellType extends Types.CellBase> = {
   selected?: Selection;
   // Custom Components
   /** Component rendered above each column. */
-  ColumnIndicator?: Types.ColumnIndicatorComponent;
+  ColumnIndicator?: unknown;
   /** Component rendered in the corner of row and column indicators. */
   CornerIndicator?: Types.CornerIndicatorComponent;
   /** Component rendered next to each row. */
-  RowIndicator?: Types.RowIndicatorComponent;
+  RowIndicator?: unknown;
   /** The Spreadsheet's table component. */
   Table?: Types.TableComponent;
   /** The Spreadsheet's row component. */
@@ -124,8 +128,12 @@ export type Props<CellType extends Types.CellBase> = {
 /**
  * The Spreadsheet component
  */
-const Spreadsheet = <CellType extends Types.CellBase>(
-  props: Props<CellType>
+const Spreadsheet = <
+  CellType extends Types.CellBase,
+  RowIndicatorLabel = React.ReactNode,
+  ColumnIndicatorLabel = React.ReactNode
+>(
+  props: Props<CellType, RowIndicatorLabel, ColumnIndicatorLabel>
 ): React.ReactElement => {
   const {
     className,
@@ -426,13 +434,23 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   );
 
   const RowIndicator = React.useMemo(
-    () => enhanceRowIndicator(props.RowIndicator || DefaultRowIndicator),
+    () =>
+      enhanceRowIndicator<RowIndicatorLabel>(
+        props.RowIndicator ||
+          (DefaultRowIndicator as Types.RowIndicatorComponent<RowIndicatorLabel>)
+      ),
     [props.RowIndicator]
   );
 
   const ColumnIndicator = React.useMemo(
     () =>
-      enhanceColumnIndicator(props.ColumnIndicator || DefaultColumnIndicator),
+      enhanceColumnIndicator<ColumnIndicatorLabel>(
+        props.ColumnIndicator ||
+          // We typecheck that a ColumnIndicator is required when the Label type is not a string,
+          // so if it is not defined we can safely assume that the Label type is a string, so we cast
+          // the default component to the correct type.
+          (DefaultColumnIndicator as Types.ColumnIndicatorComponent<ColumnIndicatorLabel>)
+      ),
     [props.ColumnIndicator]
   );
 
diff --git a/src/types.ts b/src/types.ts
index b8845647c..986a9c4fc 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -161,11 +161,11 @@ export type HeaderRowProps = React.PropsWithChildren<{}>;
 export type HeaderRowComponent = React.ComponentType<HeaderRowProps>;
 
 /** Type of the Spreadsheet RowIndicator component props */
-export type RowIndicatorProps<Label = React.ReactNode | null> = {
+export type RowIndicatorProps<Label = string> = {
   /** The row the indicator indicates */
   row: number;
   /** A custom label for the indicator as provided in rowLabels */
-  label?: Label;
+  label?: Label | null;
   /** Whether the entire row is selected */
   selected: boolean;
   /** Callback to be called when the row is selected */
@@ -173,15 +173,16 @@ export type RowIndicatorProps<Label = React.ReactNode | null> = {
 };
 
 /** Type of the RowIndicator component */
-export type RowIndicatorComponent<Label = React.ReactNode | null> =
-  React.ComponentType<RowIndicatorProps<Label>>;
+export type RowIndicatorComponent<Label = string> = React.ComponentType<
+  RowIndicatorProps<Label>
+>;
 
 /** Type of the Spreadsheet ColumnIndicator component props */
-export type ColumnIndicatorProps<Label = React.ReactNode | null> = {
+export type ColumnIndicatorProps<Label = string> = {
   /** The column the indicator indicates */
   column: number;
   /** A custom label for the indicator as provided in columnLabels */
-  label?: Label;
+  label?: Label | null;
   /** Whether the entire column in selected */
   selected: boolean;
   /** Callback to be called when the column is selected */
@@ -189,8 +190,9 @@ export type ColumnIndicatorProps<Label = React.ReactNode | null> = {
 };
 
 /** Type of the ColumnIndicator component */
-export type ColumnIndicatorComponent<Label = React.ReactNode | null> =
-  React.ComponentType<ColumnIndicatorProps<Label>>;
+export type ColumnIndicatorComponent<Label = string> = React.ComponentType<
+  ColumnIndicatorProps<Label>
+>;
 
 /** Type of the Spreadsheet CornerIndicator component props */
 export type CornerIndicatorProps = {
@@ -200,6 +202,19 @@ export type CornerIndicatorProps = {
   onSelect: () => void;
 };
 
+export type IndicatorLabelValidator<RowIndicatorLabel, ColumnIndicatorLabel> =
+  RowLabelValidator<RowIndicatorLabel> &
+    ColumnLabelValidator<ColumnIndicatorLabel>;
+
+type RowLabelValidator<RowIndicatorLabel> = RowIndicatorLabel extends string
+  ? { RowIndicator?: RowIndicatorComponent<RowIndicatorLabel> }
+  : { RowIndicator: RowIndicatorComponent<RowIndicatorLabel> };
+
+type ColumnLabelValidator<ColumnIndicatorLabel> =
+  ColumnIndicatorLabel extends string
+    ? { ColumnIndicator?: ColumnIndicatorComponent<ColumnIndicatorLabel> }
+    : { ColumnIndicator: ColumnIndicatorComponent<ColumnIndicatorLabel> };
+
 /** Type of the CornerIndicator component */
 export type CornerIndicatorComponent =
   React.ComponentType<CornerIndicatorProps>;
diff --git a/src/util.ts b/src/util.ts
index fa8c18c7d..aee75b257 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -144,10 +144,13 @@ export function getCSV(data: Matrix.Matrix<Types.CellBase>): string {
  * @param columnLabels - the spreadsheet's column labels (if defined)
  * @returns the rows and columns counts of a spreadsheet
  */
-export function calculateSpreadsheetSize(
+export function calculateSpreadsheetSize<
+  RowIndicatorLabel = React.ReactNode,
+  ColumnIndicatorLabel = React.ReactNode
+>(
   data: Matrix.Matrix<unknown>,
-  rowLabels?: string[],
-  columnLabels?: string[]
+  rowLabels?: RowIndicatorLabel[],
+  columnLabels?: ColumnIndicatorLabel[]
 ): Matrix.Size {
   const { columns, rows } = Matrix.getSize(data);
   return {