@jielga/tmdatagrid 2.5.0 → 2.6.0

package/src/components/editors/TMDataGridMultiSelectEditor.tsx

@@ -1,4 +1,4 @@
-import { MultiSelect } from "@mantine/core";
+import { MultiSelect, type MultiSelectProps } from "@mantine/core";
 import type { TMDataGridEditorArgs } from "../../core/editEngine";
 import {
   optionsToComboboxData,
@@ -6,7 +6,35 @@ import {
 } from "../../core/columnOptions";
 import { getColumnLabel } from "../../core/columnUtils";
 import { useTMDataGridContext } from "../../TMDataGridContext";
-import { useFieldInvalid, useFieldValue } from "./editorShared";
+import {
+  useFieldInvalid,
+  useFieldValue,
+  type EditorDataAttributes,
+} from "./editorShared";
+
+export type TMDataGridMultiSelectEditorProps = TMDataGridEditorArgs & {
+  /**
+   * Props for the Mantine `MultiSelect`. The grid keeps `data`, the value,
+   * `onChange`, `error`, `size`, the accessible name and
+   * `comboboxProps.withinPortal`; `onBlur` runs after the grid's own.
+   */
+  inputProps?: Omit<
+    MultiSelectProps,
+    | "data"
+    | "value"
+    | "defaultValue"
+    | "onChange"
+    | "error"
+    | "size"
+    | "aria-label"
+    | "comboboxProps"
+  > & {
+    comboboxProps?: Omit<
+      NonNullable<MultiSelectProps["comboboxProps"]>,
+      "withinPortal"
+    >;
+  } & EditorDataAttributes;
+};
 
 /**
  * The built-in editor for `meta.type: "multiSelect"` - cells holding string
@@ -19,16 +47,18 @@ export function TMDataGridMultiSelectEditor({
   row,
   table,
   size,
-}: TMDataGridEditorArgs) {
+  inputProps,
+}: TMDataGridMultiSelectEditorProps) {
   const { labels } = useTMDataGridContext();
   const value = useFieldValue(field);
   const invalid = useFieldInvalid(field);
   return (
     <MultiSelect
-      size={size}
       w="100%"
       searchable
-      comboboxProps={{ withinPortal: false }}
+      {...inputProps}
+      size={size}
+      comboboxProps={{ ...inputProps?.comboboxProps, withinPortal: false }}
       aria-label={labels.editCell(getColumnLabel(column))}
       data-dg-part="editor-input"
       data={optionsToComboboxData(
@@ -36,7 +66,10 @@ export function TMDataGridMultiSelectEditor({
       )}
       value={Array.isArray(value) ? value.map(String) : []}
       onChange={(next) => field.handleChange(next)}
-      onBlur={field.handleBlur}
+      onBlur={(event) => {
+        field.handleBlur();
+        inputProps?.onBlur?.(event);
+      }}
       error={invalid}
     />
   );

package/src/components/editors/TMDataGridNumberEditor.tsx

@@ -1,17 +1,37 @@
-import { NumberInput } from "@mantine/core";
+import { NumberInput, type NumberInputProps } from "@mantine/core";
 import { useState } from "react";
 import type { TMDataGridEditorArgs } from "../../core/editEngine";
 import { getColumnLabel } from "../../core/columnUtils";
 import { useTMDataGridContext } from "../../TMDataGridContext";
 import {
+  mergeRefs,
   selectAllOnFocus,
   useCaretKeeper,
   useFieldInvalid,
   useFieldValue,
+  type EditorDataAttributes,
 } from "./editorShared";
 
+export type TMDataGridNumberEditorProps = TMDataGridEditorArgs & {
+  /**
+   * Props for the Mantine `NumberInput`. The grid keeps the value, `onChange`,
+   * `error`, `size` and the accessible name; `onFocus` and `onBlur` run after
+   * the grid's own, and `ref` receives the input beside the grid's ref.
+   */
+  inputProps?: Omit<
+    NumberInputProps,
+    "value" | "defaultValue" | "onChange" | "error" | "size" | "aria-label"
+  > &
+    EditorDataAttributes;
+};
+
 /** The built-in editor for `meta.type: "number"`. */
-export function TMDataGridNumberEditor({ field, column, size }: TMDataGridEditorArgs) {
+export function TMDataGridNumberEditor({
+  field,
+  column,
+  size,
+  inputProps,
+}: TMDataGridNumberEditorProps) {
   const { labels } = useTMDataGridContext();
   const value = useFieldValue(field);
   const invalid = useFieldInvalid(field);
@@ -31,11 +51,15 @@ export function TMDataGridNumberEditor({ field, column, size }: TMDataGridEditor
     : value === null;
   return (
     <NumberInput
-      ref={inputRef}
-      size={size}
       w="100%"
-      onFocus={selectAllOnFocus}
       hideControls
+      {...inputProps}
+      ref={mergeRefs(inputRef, inputProps?.ref)}
+      size={size}
+      onFocus={(event) => {
+        selectAllOnFocus(event);
+        inputProps?.onFocus?.(event);
+      }}
       aria-label={labels.editCell(getColumnLabel(column))}
       data-dg-part="editor-input"
       value={
@@ -63,7 +87,10 @@ export function TMDataGridNumberEditor({ field, column, size }: TMDataGridEditor
           next !== "" && Number.isFinite(parsed) ? parsed : null,
         );
       }}
-      onBlur={field.handleBlur}
+      onBlur={(event) => {
+        field.handleBlur();
+        inputProps?.onBlur?.(event);
+      }}
       error={invalid}
     />
   );

package/src/components/editors/TMDataGridSelectEditor.tsx

@@ -1,4 +1,4 @@
-import { Select } from "@mantine/core";
+import { Select, type SelectProps } from "@mantine/core";
 import type { TMDataGridEditorArgs } from "../../core/editEngine";
 import {
   optionsToComboboxData,
@@ -6,7 +6,35 @@ import {
 } from "../../core/columnOptions";
 import { getColumnLabel } from "../../core/columnUtils";
 import { useTMDataGridContext } from "../../TMDataGridContext";
-import { useFieldInvalid, useFieldValue } from "./editorShared";
+import {
+  useFieldInvalid,
+  useFieldValue,
+  type EditorDataAttributes,
+} from "./editorShared";
+
+export type TMDataGridSelectEditorProps = TMDataGridEditorArgs & {
+  /**
+   * Props for the Mantine `Select`. The grid keeps `data`, the value,
+   * `onChange`, `error`, `size`, the accessible name and
+   * `comboboxProps.withinPortal`; `onBlur` runs after the grid's own.
+   */
+  inputProps?: Omit<
+    SelectProps,
+    | "data"
+    | "value"
+    | "defaultValue"
+    | "onChange"
+    | "error"
+    | "size"
+    | "aria-label"
+    | "comboboxProps"
+  > & {
+    comboboxProps?: Omit<
+      NonNullable<SelectProps["comboboxProps"]>,
+      "withinPortal"
+    >;
+  } & EditorDataAttributes;
+};
 
 /**
  * The built-in editor for `meta.type: "select"`. Options come from the same
@@ -20,18 +48,20 @@ export function TMDataGridSelectEditor({
   table,
   size,
   commit,
-}: TMDataGridEditorArgs) {
+  inputProps,
+}: TMDataGridSelectEditorProps) {
   const { labels, features } = useTMDataGridContext();
   const value = useFieldValue(field);
   const invalid = useFieldInvalid(field);
   return (
     <Select
-      size={size}
       w="100%"
       searchable
+      {...inputProps}
+      size={size}
       // Inside the cell, so picking an option is not a click-away - the same
       // reason the filter panel keeps its dropdowns unportalled.
-      comboboxProps={{ withinPortal: false }}
+      comboboxProps={{ ...inputProps?.comboboxProps, withinPortal: false }}
       aria-label={labels.editCell(getColumnLabel(column))}
       data-dg-part="editor-input"
       data={optionsToComboboxData(
@@ -44,7 +74,10 @@ export function TMDataGridSelectEditor({
         // The confirming modes leave the draft for their explicit commit.
         if (next !== null && features.editMode === "cell") void commit();
       }}
-      onBlur={field.handleBlur}
+      onBlur={(event) => {
+        field.handleBlur();
+        inputProps?.onBlur?.(event);
+      }}
       error={invalid}
     />
   );

package/src/components/editors/TMDataGridStringEditor.tsx

@@ -1,26 +1,50 @@
-import { TextInput } from "@mantine/core";
+import { TextInput, type TextInputProps } from "@mantine/core";
 import type { TMDataGridEditorArgs } from "../../core/editEngine";
 import { getColumnLabel } from "../../core/columnUtils";
 import { useTMDataGridContext } from "../../TMDataGridContext";
 import {
+  mergeRefs,
   selectAllOnFocus,
   useCaretKeeper,
   useFieldInvalid,
   useFieldValue,
+  type EditorDataAttributes,
 } from "./editorShared";
 
+export type TMDataGridStringEditorProps = TMDataGridEditorArgs & {
+  /**
+   * Props for the Mantine `TextInput`. The grid keeps the value, `onChange`,
+   * `error`, `size` and the accessible name; `onFocus` and `onBlur` run after
+   * the grid's own, and `ref` receives the input beside the grid's ref.
+   */
+  inputProps?: Omit<
+    TextInputProps,
+    "value" | "defaultValue" | "onChange" | "error" | "size" | "aria-label"
+  > &
+    EditorDataAttributes;
+};
+
 /** The built-in editor for `meta.type: "string"` (and the default). */
-export function TMDataGridStringEditor({ field, column, size }: TMDataGridEditorArgs) {
+export function TMDataGridStringEditor({
+  field,
+  column,
+  size,
+  inputProps,
+}: TMDataGridStringEditorProps) {
   const { labels } = useTMDataGridContext();
   const value = useFieldValue(field);
   const invalid = useFieldInvalid(field);
   const { inputRef, remember } = useCaretKeeper();
   return (
     <TextInput
-      ref={inputRef}
-      size={size}
       w="100%"
-      onFocus={selectAllOnFocus}
+      {...inputProps}
+      ref={mergeRefs(inputRef, inputProps?.ref)}
+      size={size}
+      onFocus={(event) => {
+        selectAllOnFocus(event);
+        inputProps?.onFocus?.(event);
+      }}
       aria-label={labels.editCell(getColumnLabel(column))}
       data-dg-part="editor-input"
       value={typeof value === "string" ? value : ""}
@@ -28,7 +52,10 @@ export function TMDataGridStringEditor({ field, column, size }: TMDataGridEditor
         remember(event.currentTarget);
         field.handleChange(event.currentTarget.value);
       }}
-      onBlur={field.handleBlur}
+      onBlur={(event) => {
+        field.handleBlur();
+        inputProps?.onBlur?.(event);
+      }}
       error={invalid}
     />
   );

package/src/components/editors/editorShared.ts

@@ -1,8 +1,34 @@
 import { useStore } from "@tanstack/react-form";
-import { useLayoutEffect, useRef, type RefObject } from "react";
+import {
+  useLayoutEffect,
+  useRef,
+  type Ref,
+  type RefCallback,
+  type RefObject,
+} from "react";
 import { isInputElement } from "../../core/dom";
 import { firstErrorText, type TMDataGridEditField } from "../../core/editEngine";
 
+/**
+ * `data-*` attributes for a built-in editor's `inputProps`. JSX accepts them
+ * on any element, but a props object literal only takes declared keys.
+ */
+export type EditorDataAttributes = {
+  [attribute: `data-${string}`]: string | number | boolean | undefined;
+};
+
+/** One ref callback feeding the grid's own ref and the consumer's. */
+export function mergeRefs<T>(
+  ...refs: Array<Ref<T> | undefined>
+): RefCallback<T> {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref !== null && ref !== undefined) ref.current = node;
+    }
+  };
+}
+
 /** The field's live value - one subscription, on the field's own store. */
 export function useFieldValue(field: TMDataGridEditField): unknown {
   return useStore(field.store, (state) => state.value as unknown);

package/src/index.ts

@@ -143,12 +143,30 @@ export { DgRangeSliderFilter } from "./components/filters/DgRangeSliderFilter";
 export { DgDateRangeFilter } from "./components/filters/DgDateRangeFilter";
 export { DgAutocompleteFilter } from "./components/filters/DgAutocompleteFilter";
 export { DgTriStateFilter } from "./components/filters/DgTriStateFilter";
-export { TMDataGridStringEditor } from "./components/editors/TMDataGridStringEditor";
-export { TMDataGridNumberEditor } from "./components/editors/TMDataGridNumberEditor";
-export { TMDataGridBooleanEditor } from "./components/editors/TMDataGridBooleanEditor";
-export { TMDataGridDateEditor } from "./components/editors/TMDataGridDateEditor";
-export { TMDataGridSelectEditor } from "./components/editors/TMDataGridSelectEditor";
-export { TMDataGridMultiSelectEditor } from "./components/editors/TMDataGridMultiSelectEditor";
+export {
+  TMDataGridStringEditor,
+  type TMDataGridStringEditorProps,
+} from "./components/editors/TMDataGridStringEditor";
+export {
+  TMDataGridNumberEditor,
+  type TMDataGridNumberEditorProps,
+} from "./components/editors/TMDataGridNumberEditor";
+export {
+  TMDataGridBooleanEditor,
+  type TMDataGridBooleanEditorProps,
+} from "./components/editors/TMDataGridBooleanEditor";
+export {
+  TMDataGridDateEditor,
+  type TMDataGridDateEditorProps,
+} from "./components/editors/TMDataGridDateEditor";
+export {
+  TMDataGridSelectEditor,
+  type TMDataGridSelectEditorProps,
+} from "./components/editors/TMDataGridSelectEditor";
+export {
+  TMDataGridMultiSelectEditor,
+  type TMDataGridMultiSelectEditorProps,
+} from "./components/editors/TMDataGridMultiSelectEditor";
 export {
   mergeLabels,
   TMDATAGRID_LABELS_EN,