Data Cell

1"use client";
2 
3import * as React from "react";
4import { flushSync } from "react-dom";
5 
6import {
7  useDataCellActivationClickTail,
8  type DataCellActivationSource,
9} from "@/components/ui/data-cell-activation";
10import { DataCellControl } from "@/components/ui/data-cell-control";
11import {
12  createDataCellControlState,
13  getDataCellClickControlAction,
14  getDataCellKeyControlAction,
15  getDataCellPointerControlAction,
16} from "@/components/ui/data-cell-control-actions";
17import type { DataCellControlAction } from "@/components/ui/data-cell-control-contract";
18import { DataCellDisplay } from "@/components/ui/data-cell-display";
19import { createDataCellDisplayProps } from "@/components/ui/data-cell-display-model";
20import { createDataCellEditModel } from "@/components/ui/data-cell-edit-model";
21import type { DataCellProps } from "@/components/ui/data-cell-types";
22 
23export type {
24  DataCellCommitValue,
25  DataCellDateTimeZone,
26  DataCellKind,
27  DataCellProps,
28  DataCellSelectOption,
29  DataCellValue,
30  DataCellValueMeta,
31} from "@/components/ui/data-cell-types";
32export {
33  formatDataCellDisplayValue,
34  parseDataCellNumberInput,
35} from "@/components/ui/data-cell-format";
36export { DataCellDisplay };
37 
38function storeDataCellActivationSource(
39  sourceRef: React.MutableRefObject<DataCellActivationSource | undefined>,
40  setSource: React.Dispatch<
41    React.SetStateAction<DataCellActivationSource | undefined>
42  >,
43  source: DataCellActivationSource,
44) {
45  // Activation source must be visible to the first active control render so
46  // pointer caret placement and opening-event dismissal see the original event.
47  flushSync(() => {
48    sourceRef.current = source;
49    setSource(source);
50  });
51}
52 
53function hasDataCellKeyboardModifier(event: React.KeyboardEvent<HTMLElement>) {
54  const isAltGraph =
55    event.getModifierState("AltGraph") ||
56    event.nativeEvent.getModifierState?.("AltGraph") ||
57    (event.ctrlKey &&
58      event.altKey &&
59      event.key.length === 1 &&
60      !/^[\x00-\x7F]$/.test(event.key));
61  return (
62    event.metaKey ||
63    (event.ctrlKey && !isAltGraph) ||
64    (event.altKey && !isAltGraph) ||
65    event.nativeEvent.isComposing
66  );
67}
68 
69export function DataCell(props: DataCellProps) {
70  const {
71    active,
72    editable = false,
73    disabled = false,
74    onActiveChange,
75    onEditingEnd,
76    onClick,
77    onKeyDown,
78    onPointerDown,
79  } = props;
80  const displayRef = React.useRef<HTMLDivElement>(null);
81  const activationClickTail = useDataCellActivationClickTail();
82// … truncated