50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1a7e,"use client"; import * as React from "react"; import { flushSync } from "react-dom"; import { useDataCellActivationClickTail, type DataCellActivationSource, } from "@/components/ui/data-cell-activation"; import { DataCellControl } from "@/components/ui/data-cell-control"; import { createDataCellControlState, getDataCellClickControlAction, getDataCellKeyControlAction, getDataCellPointerControlAction, } from "@/components/ui/data-cell-control-actions"; import type { DataCellControlAction } from "@/components/ui/data-cell-control-contract"; import { DataCellDisplay } from "@/components/ui/data-cell-display"; import { createDataCellDisplayProps } from "@/components/ui/data-cell-display-model"; import { createDataCellEditModel } from "@/components/ui/data-cell-edit-model"; import type { DataCellProps } from "@/components/ui/data-cell-types"; export type { DataCellCommitValue, DataCellDateTimeZone, DataCellKind, DataCellProps, DataCellSelectOption, DataCellValue, DataCellValueMeta, } from "@/components/ui/data-cell-types"; export { formatDataCellDisplayValue, parseDataCellNumberInput, } from "@/components/ui/data-cell-format"; export { DataCellDisplay }; function storeDataCellActivationSource( sourceRef: React.MutableRefObject, setSource: React.Dispatch< React.SetStateAction >, source: DataCellActivationSource, ) { // Activation source must be visible to the first active control render so // pointer caret placement and opening-event dismissal see the original event. flushSync(() => { sourceRef.current = source; setSource(source); }); } function hasDataCellKeyboardModifier(event: React.KeyboardEvent) { const isAltGraph = event.getModifierState("AltGraph") || event.nativeEvent.getModifierState?.("AltGraph") || (event.ctrlKey && event.altKey && event.key.length === 1 && !/^[\x00-\x7F]$/.test(event.key)); return ( event.metaKey || (event.ctrlKey && !isAltGraph) || (event.altKey && !isAltGraph) || event.nativeEvent.isComposing ); } export function DataCell(props: DataCellProps) { const { active, editable = false, disabled = false, onActiveChange, onEditingEnd, onClick, onKeyDown, onPointerDown, } = props; const displayRef = React.useRef(null); const activationClickTail = useDataCellActivationClickTail(); const activationSourceRef = React.useRef< DataCellActivationSource | undefined >(undefined); const [uncontrolledActive, setUncontrolledActive] = React.useState(false); const [activationSource, setActivationSource] = React.useState(); const isControlledActive = active !== undefined; const isActive = active ?? uncontrolledActive; const canSelfActivate = editable && !disabled; const setActive = React.useCallback( (nextActive: boolean) => { if (!isControlledActive) setUncontrolledActive(nextActive); onActiveChange?.(nextActive); }, [isControlledActive, onActiveChange], ); const endEditing = React.useCallback(() => { activationSourceRef.current = undefined; setActive(false); onEditingEnd?.(); }, [onEditingEnd, setActive]); const controlState = createDataCellControlState(props, { disabled }); const applyControlAction = React.useCallback( ( action: DataCellControlAction, event: | React.PointerEvent | React.MouseEvent | React.KeyboardEvent, markClickTail: boolean, ) => { if (action.kind === "none") return; if (action.shouldPreventDefault) event.preventDefault(); event.stopPropagation(); if (action.kind === "command") { action.commit(); if (markClickTail) activationClickTail.arm(); return; } storeDataCellActivationSource( activationSourceRef, setActivationSource, action.activationSource, ); if (markClickTail) activationClickTail.arm(); setActive(true); }, [activationClickTail, setActive], ); const activateFromPointer = React.useCallback( (event: React.PointerEvent) => { onPointerDown?.(event); if (event.defaultPrevented || !canSelfActivate || event.button !== 0) { return; } applyControlAction( getDataCellPointerControlAction({ controlState, clientX: event.clientX, clientY: event.clientY, detail: event.detail, displayElement: displayRef.current, event: event.nativeEvent, }), event, true, ); }, [applyControlAction, canSelfActivate, controlState, onPointerDown], ); const activateFromClick = React.useCallback( (event: React.MouseEvent) => { onClick?.(event); if (activationClickTail.consume()) { event.preventDefault(); event.stopPropagation(); return; } if (event.defaultPrevented || !canSelfActivate) return; applyControlAction( getDataCellClickControlAction({ controlState, clientX: event.clientX, clientY: event.clientY, detail: event.detail, displayElement: displayRef.current, event: event.nativeEvent, }), event, false, ); }, [ activationClickTail, applyControlAction, canSelfActivate, controlState, onClick, ], ); const activateFromKey = React.useCallback( (event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented || !canSelfActivate) return; if (hasDataCellKeyboardModifier(event)) return; applyControlAction( getDataCellKeyControlAction({ controlState, key: event.key, }), event, false, ); }, [applyControlAction, canSelfActivate, controlState, onKeyDown], ); if (isActive) { const editModel = createDataCellEditModel(props, { disabled, activationSource: activationSource ?? activationSourceRef.current, autoFocus: props.autoFocus ?? canSelfActivate, onEditingEnd: endEditing, }); return ; } return ( ); } 53:T21b9,"use client"; import * as React from "react"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { useKeyedLayoutEffect } from "@/hooks/use-keyed-layout-effect"; import { joinEffectKey } from "@/lib/effect-key"; let dataCellActivationTokenId = 0; export type DataCellActivationToken = { id: string; ownsEvent: (event: Event | undefined) => boolean; release: () => void; }; export type DataCellShellActivationRelease = "microtask" | "click-tail"; export type DataCellActivationSource = | { kind: "pointer"; token: DataCellActivationToken; clientX: number; clientY: number; detail: number; selectionOffset?: number; } | { kind: "keyboard"; key: string; } | { kind: "shell"; token: DataCellActivationToken; release: DataCellShellActivationRelease; }; export type DataCellDismissCause = | { kind: "outside-pointer"; event: PointerEvent; } | { kind: "trigger-press"; event?: Event; } | { kind: "focus-out"; event?: Event; } | { kind: "cancel-open"; event?: Event; } | { kind: "escape"; event: KeyboardEvent; } | { kind: "unknown"; event?: Event; }; export type DataCellOpeningContext = { source: DataCellActivationSource | undefined; isOpening: () => boolean; shouldCancelDismiss: (cause: DataCellDismissCause) => boolean; release: () => void; }; export function createDataCellPointerActivationSource({ clientX, clientY, detail, event, }: { clientX: number; clientY: number; detail: number; event?: Event; }): Extract { return { kind: "pointer", token: createDataCellActivationToken(event, { ownUntilReleasedWhenEventMissing: true, ownOpeningTailUntilReleasedWhenEventMissing: event === undefined, }), clientX, clientY, detail, }; } export function createDataCellKeyboardActivationSource( key: string, ): Extract { return { kind: "keyboard", key, }; } export function createDataCellShellActivationSource( event?: Event, ): Extract { return { kind: "shell", token: createDataCellActivationToken(event, { ownUntilReleasedWhenEventMissing: true, }), release: event?.type === "click" ? "microtask" : "click-tail", }; } export function createDataCellActivationToken( openingEvent?: Event, { ownUntilReleasedWhenEventMissing = false, ownOpeningTailUntilReleasedWhenEventMissing = false, }: { ownUntilReleasedWhenEventMissing?: boolean; ownOpeningTailUntilReleasedWhenEventMissing?: boolean; } = {}, ): DataCellActivationToken { const id = `data-cell-activation-${++dataCellActivationTokenId}`; let isReleased = false; const openingPoint = openingEvent ? getDataCellEventPoint(openingEvent) : null; return { id, ownsEvent(event) { if (isReleased) return false; if (!event) return ownUntilReleasedWhenEventMissing; if (openingEvent && event === openingEvent) return true; if (!openingEvent && ownOpeningTailUntilReleasedWhenEventMissing) { return isDataCellOpeningTailEvent(event); } if (openingPoint && isDataCellOpeningEventTail(event, openingPoint)) { return true; } return false; }, release() { isReleased = true; }, }; } export function useDataCellOpeningContext( activationSource: DataCellActivationSource | undefined, { enabled, releaseAfterMicrotask = false, }: { enabled: boolean; releaseAfterMicrotask?: boolean; }, ): DataCellOpeningContext { const openingSourceRef = React.useRef( undefined, ); const releaseOpeningRef = React.useRef<(() => void) | null>(null); const release = React.useCallback(() => { openingSourceRef.current = undefined; releaseOpeningRef.current?.(); releaseOpeningRef.current = null; }, []); useKeyedLayoutEffect( joinEffectKey([activationSource, enabled, release, releaseAfterMicrotask]), () => { release(); if ( !enabled || !activationSource || activationSource.kind === "keyboard" ) { return; } openingSourceRef.current = activationSource; releaseOpeningRef.current = holdDataCellActivationThroughOpeningEvent( activationSource, { releaseAfterMicrotask: releaseAfterMicrotask || shouldReleaseDataCellOpeningAfterMicrotask(activationSource), }, ); }, ); useKeyedMountEffect(joinEffectKey([release]), () => release); return React.useMemo( () => ({ source: activationSource, isOpening: () => openingSourceRef.current !== undefined, shouldCancelDismiss: (cause) => shouldCancelDataCellOpeningDismiss(openingSourceRef.current, cause), release, }), [activationSource, release], ); } export function useDataCellActivationClickTail() { const isArmedRef = React.useRef(false); return React.useMemo( () => ({ arm() { isArmedRef.current = true; }, consume() { if (!isArmedRef.current) return false; isArmedRef.current = false; return true; }, }), [], ); } function holdDataCellActivationThroughOpeningEvent( activation: DataCellActivationSource | undefined, { releaseAfterMicrotask = false, }: { releaseAfterMicrotask?: boolean; } = {}, ) { if (!activation || activation.kind === "keyboard") return () => {}; const release = () => activation.token.release(); const releaseAfterDocumentClick = () => queueMicrotask(release); const releaseBeforeNewPointer = (event: PointerEvent) => { if (!activation.token.ownsEvent(event)) release(); }; if (typeof document !== "undefined") { document.addEventListener("pointerdown", releaseBeforeNewPointer); document.addEventListener("click", releaseAfterDocumentClick, { once: true, }); } if (releaseAfterMicrotask) queueMicrotask(release); return () => { activation.token.release(); if (typeof document !== "undefined") { document.removeEventListener("pointerdown", releaseBeforeNewPointer); document.removeEventListener("click", releaseAfterDocumentClick); } }; } function shouldCancelDataCellOpeningDismiss( activationSource: DataCellActivationSource | undefined, cause: DataCellDismissCause, ) { if (!activationSource || activationSource.kind === "keyboard") return false; if (!isDataCellOpeningDismissCause(activationSource, cause)) return false; return ( activationSource.token.ownsEvent(cause.event) || (isDataCellEventlessOpeningDismissCause(cause) && activationSource.token.ownsEvent(undefined)) ); } function isDataCellOpeningDismissCause( activationSource: Exclude, cause: DataCellDismissCause, ) { if (cause.kind === "escape") return false; if (activationSource.kind === "shell") return true; return ( cause.kind === "outside-pointer" || cause.kind === "trigger-press" || cause.kind === "focus-out" || cause.kind === "cancel-open" ); } function isDataCellEventlessOpeningDismissCause(cause: DataCellDismissCause) { return ( cause.kind === "trigger-press" || cause.kind === "focus-out" || cause.kind === "cancel-open" || cause.kind === "unknown" ); } function shouldReleaseDataCellOpeningAfterMicrotask( activationSource: DataCellActivationSource, ) { return ( activationSource.kind === "shell" && activationSource.release === "microtask" ); } function getDataCellEventPoint(event: Event) { if ( !("clientX" in event) || !("clientY" in event) || typeof event.clientX !== "number" || typeof event.clientY !== "number" ) { return null; } return { clientX: event.clientX, clientY: event.clientY, }; } function isDataCellOpeningEventTail( event: Event, openingPoint: { clientX: number; clientY: number }, ) { if (!isDataCellOpeningTailEvent(event)) return false; const eventPoint = getDataCellEventPoint(event); return ( eventPoint !== null && eventPoint.clientX === openingPoint.clientX && eventPoint.clientY === openingPoint.clientY ); } function isDataCellOpeningTailEvent(event: Event) { return ( event.type === "click" || event.type === "pointerup" || event.type === "mouseup" ); } 54:Tb4f,"use client"; import * as React from "react"; import { CheckIcon, XIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { dataCellBooleanDisplayClass, dataCellCheckboxDisplayClass, } from "@/components/ui/data-cell-classes"; import { dataCellBooleanValueMeta, nextDataCellBooleanValue, } from "@/components/ui/data-cell-boolean-value"; import type { DataCellBooleanControlProps } from "@/components/ui/data-cell-control-contract"; export function DataCellBooleanIndicator({ checked }: { checked: boolean }) { return ( {checked ? ( ) : ( )} ); } export function DataCellBooleanControl({ kind, value, disabled = false, name, className, autoFocus, session, onFocus, onBlur, onKeyDown, onClick, onDoubleClick, ...props }: DataCellBooleanControlProps) { const checked = Boolean(value); const { id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rootProps } = props; return (

); } 55:T68f,export const dataCellDisplayClass = "relative inline-flex w-full rounded-lg bg-transparent text-base text-foreground ring-ring/24 transition-shadow sm:text-sm"; export const dataCellDisplayValueClass = "flex h-8.5 w-full min-w-0 items-center rounded-[inherit] px-3 leading-8.5 sm:h-7.5 sm:leading-7.5"; export const dataCellPickerTriggerClass = "relative inline-flex h-8.5 w-full min-w-0 shrink-0 cursor-pointer items-center justify-between gap-2 overflow-hidden rounded-lg bg-transparent px-3 text-base font-normal whitespace-nowrap text-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:h-7.5 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4"; export const dataCellBooleanDisplayClass = "flex h-8 w-full min-w-0 items-center overflow-hidden rounded-lg bg-transparent px-3 text-sm text-foreground ring-ring/24 transition-shadow"; export const dataCellCheckboxDisplayClass = "peer bg-transparent data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 size-4 shrink-0 rounded-[4px] transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"; 56:T8f6,"use client"; import * as React from "react"; import { dataCellBooleanControlProps, dataCellInputControlProps, dataCellPickerControlProps, dataCellSelectControlProps, } from "@/components/ui/data-cell-control-props"; import { dataCellControlByKind } from "@/components/ui/data-cell-control-registry"; import type { DataCellEditModel, DataCellEditModelByKind, } from "@/components/ui/data-cell-edit-model"; import { useDataCellPrimitiveSession, type DataCellPrimitiveSession, } from "@/components/ui/data-cell-session"; import type { DataCellCommitValue, DataCellValueMeta, } from "@/components/ui/data-cell-types"; export function DataCellControl({ model }: { model: DataCellEditModel }) { const session = useDataCellEditModelSession(model); if (model.kind === "text") { const Control = dataCellControlByKind.text; return ; } if (model.kind === "number") { const Control = dataCellControlByKind.number; return ; } if (model.kind === "integer") { const Control = dataCellControlByKind.integer; return ; } if (model.kind === "boolean") { const Control = dataCellControlByKind.boolean; return ( ); } if (model.kind === "select") { const Control = dataCellControlByKind.select; return ; } return renderDataCellPickerControl(model, session); } function useDataCellEditModelSession(model: DataCellEditModel) { const onCommit = React.useCallback( (value: DataCellCommitValue, meta: DataCellValueMeta) => { model.onCommit?.(value, meta); }, [model.onCommit], ); return useDataCellPrimitiveSession({ onCommit, onEditingEnd: model.onEditingEnd, }); } function renderDataCellPickerControl( model: DataCellEditModelByKind["date" | "time" | "date-time"], session: DataCellPrimitiveSession, ) { const Control = dataCellControlByKind[model.kind]; return ; } 57:T177a,import { createDataCellKeyboardActivationSource, createDataCellPointerActivationSource, } from "@/components/ui/data-cell-activation"; import { commitDataCellBooleanToggle } from "@/components/ui/data-cell-boolean-value"; import { commandDataCellControlAction, editDataCellControlAction, noneDataCellControlAction, type DataCellControlAction, type DataCellControlKeyActionArgs, type DataCellControlPointerActionArgs, type DataCellControlState, type DataCellControlStateByKind, } from "@/components/ui/data-cell-control-contract"; import { getDataCellTextPointerActivationSource } from "@/components/ui/data-cell-text-activation"; import type { DataCellKind } from "@/components/ui/data-cell-types"; const dataCellOpenKeys = new Set(["Enter", "F2", " "]); const dataCellNumberKeyPattern = /^[0-9.+-]$/; type DataCellNonBooleanKind = Exclude; type DataCellBooleanCommitHandler = Extract< DataCellControlState, { kind: "boolean" } >["commitBoolean"]; type DataCellNoBooleanCommitInput = Record; type DataCellControlStateInputByKind = { [Kind in DataCellKind]: Omit< DataCellControlStateByKind[Kind], "commitBoolean" | "disabled" > & (Kind extends "boolean" ? { onCommit?: DataCellBooleanCommitHandler } : DataCellNoBooleanCommitInput); }; type DataCellControlStateInput = DataCellControlStateInputByKind[DataCellKind]; type DataCellNonBooleanControlStateInput = DataCellControlStateInputByKind[DataCellNonBooleanKind]; type DataCellNonBooleanControlState = DataCellControlStateByKind[DataCellNonBooleanKind]; export function createDataCellControlState( props: DataCellControlStateInput, { disabled }: { disabled: boolean }, ): DataCellControlState { if (props.kind === "boolean") { return { kind: props.kind, value: props.value, disabled, commitBoolean: props.onCommit, }; } return createDataCellNonBooleanControlState(props, { disabled }); } function createDataCellNonBooleanControlState( props: DataCellNonBooleanControlStateInput, { disabled }: { disabled: boolean }, ): DataCellNonBooleanControlState { return { ...props, disabled }; } export function getDataCellPointerControlAction( args: DataCellControlPointerActionArgs, ): DataCellControlAction { const { controlState } = args; if (controlState.kind === "text") { return editDataCellControlAction( getDataCellTextPointerActivationSource({ clientX: args.clientX, clientY: args.clientY, detail: args.detail, displayElement: args.displayElement, event: args.event, value: controlState.value, }), { shouldPreventDefault: true }, ); } if (controlState.kind === "boolean") { return commandDataCellControlAction( () => commitDataCellBooleanToggle( controlState.value, controlState.commitBoolean, ), { shouldPreventDefault: true }, ); } if (controlState.kind === "select") { return noneDataCellControlAction(); } return createDefaultPointerEditAction(args); } export function getDataCellClickControlAction( args: DataCellControlPointerActionArgs, ): DataCellControlAction { const { controlState } = args; if (controlState.kind === "text") { return editDataCellControlAction( getDataCellTextPointerActivationSource({ clientX: args.clientX, clientY: args.clientY, detail: args.detail, displayElement: args.displayElement, event: args.event, value: controlState.value, }), { shouldPreventDefault: false }, ); } if (controlState.kind === "boolean") { return commandDataCellControlAction( () => commitDataCellBooleanToggle( controlState.value, controlState.commitBoolean, ), { shouldPreventDefault: false }, ); } return createDefaultClickEditAction(args); } export function getDataCellKeyControlAction( args: DataCellControlKeyActionArgs, ): DataCellControlAction { if (!canActivateDataCellControlFromKey(args.controlState.kind, args.key)) { return noneDataCellControlAction(); } if (args.controlState.kind === "boolean" && args.key === " ") { const booleanState = args.controlState; return commandDataCellControlAction( () => commitDataCellBooleanToggle( booleanState.value, booleanState.commitBoolean, ), { shouldPreventDefault: true }, ); } return editDataCellControlAction( createDataCellKeyboardActivationSource(args.key), { shouldPreventDefault: true }, ); } function canActivateDataCellControlFromKey(kind: DataCellKind, key: string) { if (kind === "text") { return key === "Enter" || key === "F2" || key.length === 1; } if (kind === "number" || kind === "integer") { return canActivateDataCellNumberFromKey(kind, key); } if (kind === "boolean") return key === "Enter" || key === "F2" || key === " "; return dataCellOpenKeys.has(key); } function canActivateDataCellNumberFromKey( kind: "number" | "integer", key: string, ) { if (key === "Enter" || key === "F2") return true; if (key.length !== 1) return false; if (kind === "integer") return /^[+-]$|^\d$/.test(key); return dataCellNumberKeyPattern.test(key); } function createDefaultPointerEditAction({ clientX, clientY, detail, event, }: DataCellControlPointerActionArgs): DataCellControlAction { return editDataCellControlAction( createDataCellPointerActivationSource({ clientX, clientY, detail, event }), { shouldPreventDefault: true }, ); } function createDefaultClickEditAction({ clientX, clientY, detail, event, }: DataCellControlPointerActionArgs): DataCellControlAction { return editDataCellControlAction( createDataCellPointerActivationSource({ clientX, clientY, detail, event }), { shouldPreventDefault: false }, ); } 58:T14b7,import type * as React from "react"; import type { DataCellActivationSource } from "@/components/ui/data-cell-activation"; import type { DataCellEditorProps } from "@/components/ui/data-cell-edit-model"; import type { DataCellPrimitiveSession } from "@/components/ui/data-cell-session"; import type { DataCellDateTimeZone, DataCellKind, DataCellSelectOption, DataCellValueForKind, DataCellValueMeta, } from "@/components/ui/data-cell-types"; export type DataCellDraftControl = { value?: string; onChange?: (value: string, meta: DataCellValueMeta) => void; }; export type DataCellOpenControl = { value?: boolean; onChange?: (open: boolean) => void; }; type DataCellInputControlBaseProps< Kind extends DataCellKind, Value, > = DataCellEditorProps & { kind: Kind; value?: Value; disabled?: boolean; name?: string; placeholder?: string; className?: string; autoFocus?: boolean; activationSource?: DataCellActivationSource; session: DataCellPrimitiveSession; draft?: DataCellDraftControl; }; export type DataCellTextInputControlProps = DataCellInputControlBaseProps< "text", string | null >; export type DataCellNumberInputControlProps = DataCellInputControlBaseProps< "number" | "integer", number | string | null >; export type DataCellInputControlProps = | DataCellTextInputControlProps | DataCellNumberInputControlProps; export type DataCellBooleanControlProps = DataCellEditorProps & { kind: "boolean"; value?: boolean | null; disabled?: boolean; name?: string; className?: string; autoFocus?: boolean; id?: string; "aria-label"?: string; "aria-describedby"?: string; "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling"; session: DataCellPrimitiveSession; }; export type DataCellSelectFormatValue = ( value: string | null | undefined, meta: { kind: "select" }, ) => React.ReactNode; export type DataCellSelectControlProps = DataCellEditorProps & { kind: "select"; value?: string | null; disabled?: boolean; name?: string; placeholder?: string; className?: string; formatValue?: DataCellSelectFormatValue; autoFocus?: boolean; activationSource?: DataCellActivationSource; options: DataCellSelectOption[]; session: DataCellPrimitiveSession; openState?: DataCellOpenControl; }; export type DataCellPickerControlProps = DataCellEditorProps & { kind: "date" | "time" | "date-time"; value?: string | null; disabled?: boolean; name?: string; placeholder?: string; dateTimeZone?: DataCellDateTimeZone; showPickerIcon?: boolean; className?: string; formatValue?: ( value: string | null | undefined, meta: { kind: "date" | "time" | "date-time" }, ) => React.ReactNode; autoFocus?: boolean; activationSource?: DataCellActivationSource; session: DataCellPrimitiveSession; draft?: DataCellDraftControl; openState?: DataCellOpenControl; }; export type DataCellControlPropsByKind = { text: DataCellTextInputControlProps; number: DataCellNumberInputControlProps; integer: DataCellNumberInputControlProps; boolean: DataCellBooleanControlProps; select: DataCellSelectControlProps; date: DataCellPickerControlProps; time: DataCellPickerControlProps; "date-time": DataCellPickerControlProps; }; export type DataCellControlStaticPropsByKind = { [Kind in DataCellKind]: Omit; }; type DataCellBooleanCommitHandler = ( value: boolean, meta: DataCellValueMeta, ) => void; type DataCellNoExtraState = Record; type DataCellControlStateForKind = { kind: Kind; value?: DataCellValueForKind; disabled: boolean; } & (Kind extends "boolean" ? { commitBoolean?: DataCellBooleanCommitHandler } : DataCellNoExtraState); export type DataCellControlStateByKind = { [Kind in DataCellKind]: DataCellControlStateForKind; }; export type DataCellControlState = DataCellControlStateByKind[DataCellKind]; export type DataCellControlPointerActionArgs< Kind extends DataCellKind = DataCellKind, > = { controlState: Extract; clientX: number; clientY: number; detail: number; displayElement: HTMLElement | null; event?: Event; }; export type DataCellControlKeyActionArgs< Kind extends DataCellKind = DataCellKind, > = { controlState: Extract; key: string; }; export type DataCellControlAction = | { kind: "none"; } | { kind: "edit"; activationSource: DataCellActivationSource; shouldPreventDefault: boolean; } | { kind: "command"; commit: () => void; shouldPreventDefault: boolean; }; export function noneDataCellControlAction(): DataCellControlAction { return { kind: "none" }; } export function editDataCellControlAction( activationSource: DataCellActivationSource, { shouldPreventDefault }: { shouldPreventDefault: boolean }, ): DataCellControlAction { return { kind: "edit", activationSource, shouldPreventDefault, }; } export function commandDataCellControlAction( commit: () => void, { shouldPreventDefault }: { shouldPreventDefault: boolean }, ): DataCellControlAction { return { kind: "command", commit, shouldPreventDefault, }; } 59:Ta9b,import type { DataCellControlStaticPropsByKind, DataCellInputControlProps, } from "@/components/ui/data-cell-control-contract"; import type { DataCellEditModelByKind } from "@/components/ui/data-cell-edit-model"; type DataCellInputKind = "text" | "number" | "integer"; type DataCellInputControlStaticProps = Omit< DataCellInputControlProps, "session" >; export function dataCellInputControlProps( model: DataCellEditModelByKind["text"], ): DataCellControlStaticPropsByKind["text"]; export function dataCellInputControlProps( model: DataCellEditModelByKind["number"], ): DataCellControlStaticPropsByKind["number"]; export function dataCellInputControlProps( model: DataCellEditModelByKind["integer"], ): DataCellControlStaticPropsByKind["integer"]; export function dataCellInputControlProps( model: DataCellEditModelByKind[DataCellInputKind], ): DataCellInputControlStaticProps { return { ...model.editorProps, kind: model.kind, value: model.value, disabled: model.disabled, name: model.name, placeholder: model.placeholder, className: model.className, autoFocus: model.autoFocus, activationSource: model.activationSource, draft: model.draft, }; } export function dataCellBooleanControlProps( model: DataCellEditModelByKind["boolean"], ): DataCellControlStaticPropsByKind["boolean"] { return { ...model.editorProps, kind: model.kind, value: model.value, disabled: model.disabled, name: model.name, className: model.className, autoFocus: model.autoFocus, }; } export function dataCellSelectControlProps( model: DataCellEditModelByKind["select"], ): DataCellControlStaticPropsByKind["select"] { return { ...model.editorProps, kind: model.kind, value: model.value, disabled: model.disabled, name: model.name, placeholder: model.placeholder, className: model.className, formatValue: model.formatValue, autoFocus: model.autoFocus, activationSource: model.activationSource, options: model.options, openState: model.openState, }; } export function dataCellPickerControlProps( model: DataCellEditModelByKind["date" | "time" | "date-time"], ): DataCellControlStaticPropsByKind["date" | "time" | "date-time"] { return { ...model.editorProps, kind: model.kind, value: model.value, disabled: model.disabled, name: model.name, placeholder: model.placeholder, dateTimeZone: model.dateTimeZone, showPickerIcon: model.showPickerIcon, className: model.className, formatValue: model.formatValue, autoFocus: model.autoFocus, activationSource: model.activationSource, draft: model.draft, openState: model.openState, }; } 5a:T1da3,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { DataCellBooleanIndicator } from "@/components/ui/data-cell-boolean-control"; import { dataCellBooleanDisplayClass, dataCellCheckboxDisplayClass, dataCellDisplayClass, dataCellDisplayValueClass, dataCellPickerTriggerClass, } from "@/components/ui/data-cell-classes"; import { formatDataCellDisplayValue } from "@/components/ui/data-cell-format"; import { DataCellPickerIcon } from "@/components/ui/data-cell-picker-icon"; import type { DataCellKind, DataCellValueForKind, } from "@/components/ui/data-cell-types"; type DataCellDisplayNativeProps = Omit< React.HTMLAttributes, "children" | "defaultValue" | "onChange" >; type DataCellDisplayFormatValue = ( value: DataCellValueForKind | undefined, meta: { kind: Kind }, ) => React.ReactNode; type DataCellDisplayBaseProps = DataCellDisplayNativeProps & { kind: Kind; value?: DataCellValueForKind; editable?: boolean; disabled?: boolean; className?: string; }; type DataCellDisplayPlaceholderProps = { placeholder?: string; }; type DataCellDisplayPickerProps = { showPickerIcon?: boolean; }; type DataCellDisplayFormatProps = { formatValue?: DataCellDisplayFormatValue; }; type DataCellPickerKind = "date" | "time" | "date-time"; type DataCellScalarKind = "text" | "number" | "integer" | "select"; type DataCellNoExtraDisplayProps = Record; type DataCellDisplayPropsForKind = DataCellDisplayBaseProps & (Kind extends "boolean" ? DataCellNoExtraDisplayProps : DataCellDisplayPlaceholderProps & DataCellDisplayFormatProps) & (Kind extends DataCellPickerKind ? DataCellDisplayPickerProps : DataCellNoExtraDisplayProps); export type DataCellDisplayPropsByKind = { [Kind in DataCellKind]: DataCellDisplayPropsForKind; }; type DataCellScalarDisplayProps = DataCellDisplayPropsByKind[DataCellScalarKind]; type DataCellPickerDisplayProps = DataCellDisplayPropsByKind[DataCellPickerKind]; export type DataCellDisplayProps = DataCellDisplayPropsByKind[DataCellKind]; export const DataCellDisplay = React.forwardRef< HTMLDivElement, DataCellDisplayProps >(function DataCellDisplay(displayProps, ref) { if (displayProps.kind === "boolean") { const { kind, value, editable = false, disabled = false, className, ...props } = displayProps; return (

); } if ( displayProps.kind === "date" || displayProps.kind === "time" || displayProps.kind === "date-time" ) { return ; } if (!isDataCellScalarDisplayProps(displayProps)) { return null; } const { kind, value, editable = false, disabled = false, placeholder, className, formatValue: _formatValue, ...props } = displayProps; const content = dataCellScalarDisplayContent(displayProps); const isEmpty = content === ""; return (

{isEmpty ? (placeholder ?? "—") : content}

); }); DataCellDisplay.displayName = "DataCellDisplay"; function dataCellScalarDisplayContent(props: DataCellScalarDisplayProps) { if (props.kind === "text") { return ( props.formatValue?.(props.value, { kind: props.kind }) ?? formatDataCellDisplayValue(props.kind, props.value) ); } if (props.kind === "select") { return ( props.formatValue?.(props.value, { kind: props.kind }) ?? formatDataCellDisplayValue(props.kind, props.value) ); } if (props.kind === "number") { return ( props.formatValue?.(props.value, { kind: props.kind }) ?? formatDataCellDisplayValue(props.kind, props.value) ); } return ( props.formatValue?.(props.value, { kind: props.kind }) ?? formatDataCellDisplayValue(props.kind, props.value) ); } function isDataCellScalarDisplayProps( props: DataCellDisplayProps, ): props is DataCellScalarDisplayProps { return ( props.kind === "text" || props.kind === "number" || props.kind === "integer" || props.kind === "select" ); } const DataCellPickerDisplay = React.forwardRef< HTMLDivElement, DataCellPickerDisplayProps >(function DataCellPickerDisplay(pickerProps, ref) { const content = dataCellPickerDisplayContent(pickerProps); const { kind, value, editable, disabled, placeholder, formatValue, showPickerIcon = true, className, ...props } = pickerProps; const isEmpty = content === ""; return (

{isEmpty ? (placeholder ?? "—") : content} {showPickerIcon ? : null}

); }); function dataCellPickerDisplayContent(props: DataCellPickerDisplayProps) { if (props.kind === "date") { return ( props.formatValue?.(props.value, { kind: props.kind }) ?? formatDataCellDisplayValue(props.kind, props.value) ); } if (props.kind === "time") { return ( props.formatValue?.(props.value, { kind: props.kind }) ?? formatDataCellDisplayValue(props.kind, props.value) ); } return ( props.formatValue?.(props.value, { kind: props.kind }) ?? formatDataCellDisplayValue(props.kind, props.value) ); } 5b:T15b6,import type * as React from "react"; import type { DataCellDisplayProps } from "@/components/ui/data-cell-display"; import type { DataCellProps } from "@/components/ui/data-cell-types"; export type DataCellDisplayShellProps = Pick< DataCellDisplayProps, | "disabled" | "editable" | "onClick" | "onKeyDown" | "onPointerDown" | "tabIndex" >; export function createDataCellDisplayProps( props: DataCellProps, shellProps: DataCellDisplayShellProps, ): DataCellDisplayProps { switch (props.kind) { case "text": { const { kind, value, placeholder, className, formatValue, editable, active, disabled, name, draftValue, autoFocus, onDraftValueChange, onCommit, onEditingEnd, onActiveChange, onClick, onKeyDown, onPointerDown, ...surfaceDomProps } = props; return { ...surfaceDomProps, ...shellProps, kind, value, placeholder, className, formatValue, }; } case "number": { const { kind, value, placeholder, className, formatValue, editable, active, disabled, name, draftValue, autoFocus, onDraftValueChange, onCommit, onEditingEnd, onActiveChange, onClick, onKeyDown, onPointerDown, ...surfaceDomProps } = props; return { ...surfaceDomProps, ...shellProps, kind, value, placeholder, className, formatValue, }; } case "integer": { const { kind, value, placeholder, className, formatValue, editable, active, disabled, name, draftValue, autoFocus, onDraftValueChange, onCommit, onEditingEnd, onActiveChange, onClick, onKeyDown, onPointerDown, ...surfaceDomProps } = props; return { ...surfaceDomProps, ...shellProps, kind, value, placeholder, className, formatValue, }; } case "boolean": { const { kind, value, className, editable, active, disabled, name, autoFocus, onCommit, onEditingEnd, onActiveChange, onClick, onKeyDown, onPointerDown, ...surfaceDomProps } = props; return { ...surfaceDomProps, ...shellProps, kind, value, className, }; } case "select": { const { kind, value, placeholder, className, formatValue, editable, active, disabled, name, selectOptions, open, autoFocus, onCommit, onEditingEnd, onActiveChange, onOpenChange, onClick, onKeyDown, onPointerDown, ...surfaceDomProps } = props; return { ...surfaceDomProps, ...shellProps, kind, value, placeholder, className, formatValue, }; } case "date": { const { kind, value, placeholder, className, showPickerIcon, formatValue, editable, active, disabled, name, dateTimeZone, open, draftValue, autoFocus, onDraftValueChange, onCommit, onEditingEnd, onActiveChange, onOpenChange, onClick, onKeyDown, onPointerDown, ...surfaceDomProps } = props; return { ...surfaceDomProps, ...shellProps, kind, value, placeholder, className, formatValue, showPickerIcon: showPickerIcon ?? true, }; } case "time": { const { kind, value, placeholder, className, showPickerIcon, formatValue, editable, active, disabled, name, dateTimeZone, open, draftValue, autoFocus, onDraftValueChange, onCommit, onEditingEnd, onActiveChange, onOpenChange, onClick, onKeyDown, onPointerDown, ...surfaceDomProps } = props; return { ...surfaceDomProps, ...shellProps, kind, value, placeholder, className, formatValue, showPickerIcon: showPickerIcon ?? true, }; } case "date-time": { const { kind, value, placeholder, className, showPickerIcon, formatValue, editable, active, disabled, name, dateTimeZone, open, draftValue, autoFocus, onDraftValueChange, onCommit, onEditingEnd, onActiveChange, onOpenChange, onClick, onKeyDown, onPointerDown, ...surfaceDomProps } = props; return { ...surfaceDomProps, ...shellProps, kind, value, placeholder, className, formatValue, showPickerIcon: showPickerIcon ?? true, }; } } } 5c:T3450,import type * as React from "react"; import type { DataCellActivationSource } from "@/components/ui/data-cell-activation"; import type { DataCellCommitHandler, DataCellCommitValue, DataCellCommitValueForKind, DataCellDateTimeZone, DataCellKind, DataCellProps, DataCellPropsForKind, DataCellSelectOption, DataCellValueForKind, DataCellValueMeta, } from "@/components/ui/data-cell-types"; type DataCellPickerKind = "date" | "time" | "date-time"; type DataCellDraftKind = "text" | "number" | "integer" | DataCellPickerKind; type DataCellFormatKind = Exclude; type DataCellEditShellState = { disabled: boolean; autoFocus?: boolean; activationSource?: DataCellActivationSource; onEditingEnd?: () => void; }; type DataCellResolvedShellState = Required< Pick > & Omit; type DataCellDataAttributeValue = string | number | boolean | undefined; type DataCellDataAttributes = { [Attribute in `data-${string}`]?: DataCellDataAttributeValue; }; type DataCellAriaAttributeName = Extract< keyof React.AriaAttributes, `aria-${string}` >; type DataCellDataAttributeName = keyof DataCellDataAttributes & `data-${string}`; type DataCellEditorEventProps = Pick< React.HTMLAttributes, "onBlur" | "onClick" | "onDoubleClick" | "onFocus" | "onKeyDown" | "onMouseUp" >; export type DataCellEditorProps = React.AriaAttributes & DataCellDataAttributes & Pick< React.HTMLAttributes, "id" | "role" | "tabIndex" | "title" > & DataCellEditorEventProps; type DataCellDraftHandler = NonNullable< DataCellPropsForKind["onDraftValueChange"] >; type DataCellTypedCommitHandler = ( value: Value, meta: DataCellValueMeta, ) => void; type DataCellCommitGuard = ( value: DataCellCommitValue, ) => value is DataCellCommitValueForKind; type DataCellTypedPropsForKind = DataCellPropsForKind & { kind: Kind; onCommit?: | DataCellTypedCommitHandler> | undefined; }; type DataCellDraftEditState = { value?: string; onChange?: DataCellDraftHandler; }; type DataCellOpenEditState = { value?: boolean; onChange?: (open: boolean) => void; }; type DataCellFormatValue = NonNullable< DataCellPropsForKind["formatValue"] >; type DataCellPickerFormatValue = ( value: string | null | undefined, meta: { kind: DataCellPickerKind }, ) => React.ReactNode; export type DataCellEditModelByKind = { text: DataCellTextEditModel; number: DataCellNumberEditModel; integer: DataCellIntegerEditModel; boolean: DataCellBooleanEditModel; select: DataCellSelectEditModel; date: DataCellDateEditModel; time: DataCellTimeEditModel; "date-time": DataCellDateTimeEditModel; }; export type DataCellEditModel = DataCellEditModelByKind[keyof DataCellEditModelByKind]; type DataCellEditModelBase = { kind: Kind; value?: DataCellValueForKind; disabled: boolean; name?: string; className?: string; autoFocus?: boolean; activationSource?: DataCellActivationSource; onEditingEnd?: () => void; onCommit?: DataCellCommitHandler; editorProps: DataCellEditorProps; }; export type DataCellTextEditModel = DataCellEditModelBase<"text"> & { placeholder?: string; draft?: DataCellDraftEditState<"text">; }; type DataCellNumericEditModel = DataCellEditModelBase & { placeholder?: string; draft?: DataCellDraftEditState; }; export type DataCellNumberEditModel = DataCellNumericEditModel<"number">; export type DataCellIntegerEditModel = DataCellNumericEditModel<"integer">; export type DataCellBooleanEditModel = DataCellEditModelBase<"boolean">; export type DataCellSelectEditModel = DataCellEditModelBase<"select"> & { placeholder?: string; formatValue?: DataCellFormatValue<"select">; openState?: DataCellOpenEditState; options: DataCellSelectOption[]; }; type DataCellPickerEditModelForKind = DataCellEditModelBase & { placeholder?: string; dateTimeZone?: DataCellDateTimeZone; showPickerIcon?: boolean; formatValue?: DataCellPickerFormatValue; draft?: DataCellDraftEditState; openState?: DataCellOpenEditState; }; export type DataCellDateEditModel = DataCellPickerEditModelForKind<"date">; export type DataCellTimeEditModel = DataCellPickerEditModelForKind<"time">; export type DataCellDateTimeEditModel = DataCellPickerEditModelForKind<"date-time">; export type DataCellPickerEditModel = | DataCellDateEditModel | DataCellTimeEditModel | DataCellDateTimeEditModel; export function createDataCellEditModel( props: DataCellProps, shellState: DataCellEditShellState, ): DataCellEditModel { if (props.kind === "text") return createDataCellTextEditModel(props, shellState); if (props.kind === "number") { return createDataCellNumberEditModel(props, shellState); } if (props.kind === "integer") { return createDataCellIntegerEditModel(props, shellState); } if (props.kind === "boolean") { return createDataCellBooleanEditModel(props, shellState); } if (props.kind === "select") { return createDataCellSelectEditModel(props, shellState); } if (props.kind === "date") { return createDataCellDateEditModel(props, shellState); } if (props.kind === "time") { return createDataCellTimeEditModel(props, shellState); } if (props.kind === "date-time") { return createDataCellDateTimeEditModel(props, shellState); } return unsupportedDataCellProps(props); } function unsupportedDataCellProps(_props: never): never { throw new Error("Unsupported DataCell kind"); } function dataCellCommitHandler( onCommit: DataCellTypedCommitHandler | undefined, isValue: (value: DataCellCommitValue) => value is Value, ): DataCellCommitHandler | undefined { if (!onCommit) return undefined; return (value, meta) => { if (!isValue(value)) { throw new Error(`Invalid ${meta.kind} commit value`); } onCommit(value, meta); }; } function isDataCellStringCommitValue( value: DataCellCommitValue, ): value is string | null { return typeof value === "string" || value === null; } function isDataCellNumberCommitValue( value: DataCellCommitValue, ): value is number | null { return typeof value === "number" || value === null; } function isDataCellBooleanCommitValue( value: DataCellCommitValue, ): value is boolean { return typeof value === "boolean"; } function dataCellEditShellState( props: DataCellProps, shellState: DataCellEditShellState, ): DataCellResolvedShellState { return { disabled: shellState.disabled, autoFocus: shellState.autoFocus ?? props.autoFocus, activationSource: shellState.activationSource, onEditingEnd: shellState.onEditingEnd ?? props.onEditingEnd, }; } function dataCellEditorProps(props: DataCellProps): DataCellEditorProps { const editorProps: DataCellEditorProps = { id: props.id, role: props.role, tabIndex: props.tabIndex, title: props.title, onBlur: props.onBlur, onClick: props.onClick, onDoubleClick: props.onDoubleClick, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onMouseUp: props.onMouseUp, }; for (const propName in props) { if (isDataCellAriaAttributeName(propName)) { assignDataCellAriaAttribute(editorProps, propName, props[propName]); } if (isDataCellDataAttributeName(propName)) { const propValue = Reflect.get(props, propName); if (isDataCellDataAttributeValue(propValue)) { assignDataCellDataAttribute(editorProps, propName, propValue); } } } return editorProps; } function dataCellEditModelBase( props: DataCellTypedPropsForKind, shellState: DataCellEditShellState, isCommitValue: DataCellCommitGuard, ): DataCellEditModelBase { const editState = dataCellEditShellState(props, shellState); return { kind: props.kind, value: props.value, disabled: editState.disabled, name: props.name, className: props.className, autoFocus: editState.autoFocus, activationSource: editState.activationSource, onCommit: dataCellCommitHandler(props.onCommit, isCommitValue), onEditingEnd: editState.onEditingEnd, editorProps: dataCellEditorProps(props), }; } function assignDataCellAriaAttribute( editorProps: React.AriaAttributes, propName: Name, propValue: React.AriaAttributes[Name], ) { editorProps[propName] = propValue; } function assignDataCellDataAttribute( editorProps: DataCellDataAttributes, propName: DataCellDataAttributeName, propValue: DataCellDataAttributeValue, ) { editorProps[propName] = propValue; } function isDataCellAriaAttributeName( propName: string, ): propName is DataCellAriaAttributeName { return propName.startsWith("aria-"); } function isDataCellDataAttributeName( propName: string, ): propName is DataCellDataAttributeName { return propName.startsWith("data-"); } function isDataCellDataAttributeValue( value: unknown, ): value is DataCellDataAttributeValue { return ( value === undefined || typeof value === "string" || typeof value === "number" || typeof value === "boolean" ); } function createDataCellTextEditModel( props: DataCellPropsForKind<"text">, shellState: DataCellEditShellState, ): DataCellTextEditModel { return { ...dataCellEditModelBase(props, shellState, isDataCellStringCommitValue), placeholder: props.placeholder, draft: { value: props.draftValue, onChange: props.onDraftValueChange, }, }; } function createDataCellNumberEditModel( props: DataCellPropsForKind<"number">, shellState: DataCellEditShellState, ): DataCellNumberEditModel { return { ...dataCellEditModelBase(props, shellState, isDataCellNumberCommitValue), placeholder: props.placeholder, draft: { value: props.draftValue, onChange: props.onDraftValueChange, }, }; } function createDataCellIntegerEditModel( props: DataCellPropsForKind<"integer">, shellState: DataCellEditShellState, ): DataCellIntegerEditModel { return { ...dataCellEditModelBase(props, shellState, isDataCellNumberCommitValue), placeholder: props.placeholder, draft: { value: props.draftValue, onChange: props.onDraftValueChange, }, }; } function createDataCellBooleanEditModel( props: DataCellPropsForKind<"boolean">, shellState: DataCellEditShellState, ): DataCellBooleanEditModel { return dataCellEditModelBase(props, shellState, isDataCellBooleanCommitValue); } function createDataCellSelectEditModel( props: DataCellPropsForKind<"select">, shellState: DataCellEditShellState, ): DataCellSelectEditModel { return { ...dataCellEditModelBase(props, shellState, isDataCellStringCommitValue), placeholder: props.placeholder, formatValue: props.formatValue, openState: { value: props.open, onChange: props.onOpenChange, }, options: props.selectOptions, }; } function createDataCellDateEditModel( props: DataCellPropsForKind<"date">, shellState: DataCellEditShellState, ): DataCellDateEditModel { return { ...dataCellEditModelBase(props, shellState, isDataCellStringCommitValue), placeholder: props.placeholder, dateTimeZone: props.dateTimeZone, showPickerIcon: props.showPickerIcon, formatValue: props.formatValue ? (value) => props.formatValue?.(value, { kind: "date" }) : undefined, draft: { value: props.draftValue, onChange: props.onDraftValueChange, }, openState: { value: props.open, onChange: props.onOpenChange, }, }; } function createDataCellTimeEditModel( props: DataCellPropsForKind<"time">, shellState: DataCellEditShellState, ): DataCellTimeEditModel { return { ...dataCellEditModelBase(props, shellState, isDataCellStringCommitValue), placeholder: props.placeholder, dateTimeZone: props.dateTimeZone, showPickerIcon: props.showPickerIcon, formatValue: props.formatValue ? (value) => props.formatValue?.(value, { kind: "time" }) : undefined, draft: { value: props.draftValue, onChange: props.onDraftValueChange, }, openState: { value: props.open, onChange: props.onOpenChange, }, }; } function createDataCellDateTimeEditModel( props: DataCellPropsForKind<"date-time">, shellState: DataCellEditShellState, ): DataCellDateTimeEditModel { return { ...dataCellEditModelBase(props, shellState, isDataCellStringCommitValue), placeholder: props.placeholder, dateTimeZone: props.dateTimeZone, showPickerIcon: props.showPickerIcon, formatValue: props.formatValue ? (value) => props.formatValue?.(value, { kind: "date-time" }) : undefined, draft: { value: props.draftValue, onChange: props.onDraftValueChange, }, openState: { value: props.open, onChange: props.onOpenChange, }, }; } 5d:T1d15,import type { DataCellCommitValue, DataCellCommitValueForKind, DataCellDateTimeZone, DataCellKind, DataCellValue, DataCellValueMeta, } from "@/components/ui/data-cell-types"; const dataCellIntegerInputPattern = /^[+-]?\d+$/; const dataCellNumberInputPattern = /^[+-]?(?:(?:\d+\.?\d*)|(?:\d*\.\d+))(?:e[+-]?\d+)?$/i; const dataCellNativeNumberDisplayPattern = /^([+-]?\d+)\.(\d+)$/; const dataCellDateDisplayPattern = /^(\d{4})-(\d{2})-(\d{2})/; const dataCellDateTimeDisplayPattern = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/; const dataCellTimeDisplayPattern = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?/; const dataCellDateValuePattern = /^\d{4}-\d{2}-\d{2}/; const dataCellExactDateValuePattern = /^(\d{4})-(\d{2})-(\d{2})$/; const dataCellTimeValuePattern = /\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?/; const dataCellDateTimeInputPattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?/; const dataCellDateTimeZoneSuffixPattern = /(?:Z|[+-]\d{2}:\d{2})$/; export function parseDataCellNumberInput({ kind, value, }: { kind: "number" | "integer"; value: string; }): { value: number | null; isEmpty: boolean; isValid: boolean } { const rawValue = value.trim(); if (rawValue === "") return { value: null, isEmpty: true, isValid: true }; if (kind === "integer" && !dataCellIntegerInputPattern.test(rawValue)) { return { value: null, isEmpty: false, isValid: false }; } if (kind === "number" && !dataCellNumberInputPattern.test(rawValue)) { return { value: null, isEmpty: false, isValid: false }; } const parsed = Number(rawValue); return Number.isFinite(parsed) ? { value: parsed, isEmpty: false, isValid: true } : { value: null, isEmpty: false, isValid: false }; } export function formatDataCellDisplayValue( kind: DataCellKind, value: unknown, ): string { if (value === null || value === undefined || value === "") return ""; const text = String(value); if (kind === "number" || kind === "integer") { return formatNativeNumberDisplayValue(text); } if (kind === "date-time") return formatDateTimeDisplayValue(text); if (kind === "date") return formatDateDisplayValue(text); if (kind === "time") return formatTimeDisplayValue(text); return text; } export function parseDataCellInputValue({ kind, value, dateTimeZone, previousValue, }: { kind: "text" | "number" | "integer"; value: string; dateTimeZone: DataCellDateTimeZone; previousValue: DataCellValue; }): DataCellCommitValueForKind<"text" | "number" | "integer">; export function parseDataCellInputValue({ kind, value, dateTimeZone, previousValue, }: { kind: "date" | "time" | "date-time"; value: string; dateTimeZone: DataCellDateTimeZone; previousValue: DataCellValue; }): DataCellCommitValueForKind<"date" | "time" | "date-time">; export function parseDataCellInputValue({ kind, value, dateTimeZone, previousValue, }: { kind: DataCellKind; value: string; dateTimeZone: DataCellDateTimeZone; previousValue: DataCellValue; }): DataCellCommitValue { if (kind === "number" || kind === "integer") { return parseDataCellNumberInput({ kind, value }).value; } if (kind === "date-time") { if (value === "") return null; if (dateTimeZone === "utc") return `${value}Z`; if (dateTimeZone === "preserve") { return `${value}${dateTimeSuffix(previousValue)}`; } } return value === "" ? null : value; } export function getDataCellValueMeta({ kind, value, isBadInput = false, }: { kind: DataCellKind; value: string; isBadInput?: boolean; }): DataCellValueMeta { if (kind === "number" || kind === "integer") { if (isBadInput) { return { kind, rawValue: value, isEmpty: false, isValid: false, }; } const parsed = parseDataCellNumberInput({ kind, value }); return { kind, rawValue: value, isEmpty: parsed.isEmpty, isValid: parsed.isValid, }; } return { kind, rawValue: value, isEmpty: value === "", isValid: true, }; } export function formatDataCellEditValue( kind: DataCellKind, value: DataCellValue, ) { if (value === null || value === undefined) return ""; const text = String(value); if (kind === "date-time") return dateTimeInputValue(text); if (kind === "date") return text.match(dataCellDateValuePattern)?.[0] ?? text; if (kind === "time") { return text.match(dataCellTimeDisplayPattern)?.[0] ?? text; } return text; } export function dateFromPickerValue( kind: "date" | "time" | "date-time", value: string, ): Date | undefined { if (kind === "time" || value === "") return undefined; const dateValue = kind === "date-time" ? value.match(dataCellDateValuePattern)?.[0] : value; if (!dateValue) return undefined; const match = dateValue.match(dataCellExactDateValuePattern); if (!match) return undefined; const year = Number(match[1]); const monthIndex = Number(match[2]) - 1; const day = Number(match[3]); const date = new Date(year, monthIndex, day); return date.getFullYear() === year && date.getMonth() === monthIndex && date.getDate() === day ? date : undefined; } export function timeFromPickerValue( kind: "date" | "time" | "date-time", value: string, ): string { if (kind === "date") return ""; return value.match(dataCellTimeValuePattern)?.[0] ?? ""; } export function pickerValueWithDate( kind: "date" | "date-time", value: string, date: Date, ): string { const dateValue = formatPickerDateValue(date); if (kind === "date") return dateValue; return `${dateValue}T${timeFromPickerValue("date-time", value) || "00:00"}`; } export function pickerValueWithTime( kind: "time" | "date-time", value: string, time: string, ): string { if (kind === "time") return time; const dateValue = value.match(dataCellDateValuePattern)?.[0] ?? formatPickerDateValue(new Date()); return `${dateValue}T${time || "00:00"}`; } function formatNativeNumberDisplayValue(value: string): string { return value.replace(dataCellNativeNumberDisplayPattern, "$1,$2"); } function formatDateDisplayValue(value: string): string { const match = value.match(dataCellDateDisplayPattern); if (!match) return value; return `${match[3]}/${match[2]}/${match[1]}`; } function formatDateTimeDisplayValue(value: string): string { const inputValue = dateTimeInputValue(value); const match = inputValue.match(dataCellDateTimeDisplayPattern); if (!match) return inputValue || value; return `${match[3]}/${match[2]}/${match[1]}, ${match[4]}:${match[5]}`; } function formatTimeDisplayValue(value: string): string { const match = value.match(dataCellTimeDisplayPattern); if (!match) return value; return [match[1], match[2], match[3]].filter(Boolean).join(":"); } function formatPickerDateValue(date: Date): string { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, "0"); const day = String(date.getDate()).padStart(2, "0"); return `${year}-${month}-${day}`; } function dateTimeInputValue(value: string): string { const withoutTimezone = value .trim() .replace(dataCellDateTimeZoneSuffixPattern, ""); return withoutTimezone.match(dataCellDateTimeInputPattern)?.[0] ?? value; } function dateTimeSuffix(value: DataCellValue): string { if (typeof value !== "string") return ""; return value.trim().match(dataCellDateTimeZoneSuffixPattern)?.[0] ?? ""; } 5e:T282b,"use client"; import * as React from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; import { Calendar } from "@/components/ui/calendar"; import { Input } from "@/components/ui/input"; import { useDataCellOpeningContext, type DataCellDismissCause, } from "@/components/ui/data-cell-activation"; import { dataCellPickerTriggerClass } from "@/components/ui/data-cell-classes"; import type { DataCellPickerControlProps } from "@/components/ui/data-cell-control-contract"; import { dateFromPickerValue, formatDataCellDisplayValue, formatDataCellEditValue, getDataCellValueMeta, parseDataCellInputValue, pickerValueWithDate, pickerValueWithTime, timeFromPickerValue, } from "@/components/ui/data-cell-format"; import { DataCellPickerIcon } from "@/components/ui/data-cell-picker-icon"; import { getDataCellPickerPopupStyleFromAnchor } from "@/components/ui/data-cell-picker-position"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { useKeyedLayoutEffect } from "@/hooks/use-keyed-layout-effect"; import { joinEffectKey } from "@/lib/effect-key"; function dataCellOutsidePointerDismissCause( event: PointerEvent, ): DataCellDismissCause { return { kind: "outside-pointer", event, }; } function dataCellTriggerPressDismissCause(event: Event): DataCellDismissCause { return { kind: "trigger-press", event, }; } function dataCellEscapeDismissCause( event: KeyboardEvent, ): DataCellDismissCause { return { kind: "escape", event, }; } export function DataCellPickerControl({ kind, value, disabled = false, name, placeholder, dateTimeZone = "local", showPickerIcon = true, className, formatValue, autoFocus, activationSource, session, draft, openState, onFocus, onBlur, onKeyDown, onClick, onDoubleClick, ...props }: DataCellPickerControlProps) { const initialPickerValue = formatDataCellEditValue(kind, value); const [uncontrolledDraftValue, setUncontrolledDraftValue] = React.useState(initialPickerValue); const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false); const triggerRef = React.useRef(null); const popupRef = React.useRef(null); const popupStyleRef = React.useRef(null); const openingContext = useDataCellOpeningContext(activationSource, { enabled: Boolean(autoFocus), }); const [popupStyle, setPopupStyle] = React.useState(null); const popupId = React.useId(); const controlledOpen = openState?.value; const open = controlledOpen ?? uncontrolledOpen; const pickerValue = draft?.value ?? uncontrolledDraftValue; const selectedDate = dateFromPickerValue(kind, pickerValue); const timeValue = timeFromPickerValue(kind, pickerValue); const content = formatValue?.(pickerValue, { kind }) ?? formatDataCellDisplayValue(kind, pickerValue); const isEmpty = content === ""; const setOpen = React.useCallback( (open: boolean) => { if (!open) { popupStyleRef.current = null; setPopupStyle(null); } if (controlledOpen === undefined) setUncontrolledOpen(open); openState?.onChange?.(open); }, [controlledOpen, openState], ); useKeyedMountEffect(joinEffectKey([draft?.value, kind, value]), () => { if (draft?.value !== undefined) return; setUncontrolledDraftValue(formatDataCellEditValue(kind, value)); }); const closePopup = React.useCallback(() => { openingContext.release(); setOpen(false); session.end(); }, [openingContext, session, setOpen]); const measurePopupStyle = React.useCallback(() => { const trigger = triggerRef.current; if (!trigger) return null; return getDataCellPickerPopupStyleFromAnchor({ anchor: trigger, kind, }); }, [kind]); const openPopup = React.useCallback(() => { if (!popupStyleRef.current) { popupStyleRef.current = measurePopupStyle(); } if (!popupStyleRef.current) return; setPopupStyle(popupStyleRef.current); setOpen(true); }, [measurePopupStyle, setOpen]); useKeyedLayoutEffect(joinEffectKey([autoFocus, openPopup]), () => { if (!autoFocus) return; triggerRef.current?.focus({ preventScroll: true }); openPopup(); }); useKeyedLayoutEffect(joinEffectKey([measurePopupStyle, open]), () => { if (!open || popupStyleRef.current) return; popupStyleRef.current = measurePopupStyle(); if (popupStyleRef.current) setPopupStyle(popupStyleRef.current); }); useKeyedMountEffect(joinEffectKey([closePopup, open, openingContext]), () => { if (!open) return; const handlePointerDown = (event: PointerEvent) => { const target = event.target; if (!(target instanceof Node)) return; if ( openingContext.shouldCancelDismiss( dataCellOutsidePointerDismissCause(event), ) ) { return; } if (triggerRef.current?.contains(target)) return; if (popupRef.current?.contains(target)) return; closePopup(); }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key !== "Escape") return; openingContext.release(); if ( !openingContext.shouldCancelDismiss(dataCellEscapeDismissCause(event)) ) { closePopup(); } }; const handleViewportChange = () => closePopup(); globalThis.document.addEventListener("pointerdown", handlePointerDown); globalThis.document.addEventListener("keydown", handleKeyDown); window.addEventListener("resize", handleViewportChange); window.addEventListener("scroll", handleViewportChange, true); return () => { globalThis.document.removeEventListener("pointerdown", handlePointerDown); globalThis.document.removeEventListener("keydown", handleKeyDown); window.removeEventListener("resize", handleViewportChange); window.removeEventListener("scroll", handleViewportChange, true); }; }); const updatePickerValue = (nextValue: string, commit = false) => { if (draft?.value === undefined) setUncontrolledDraftValue(nextValue); const meta = getDataCellValueMeta({ kind, value: nextValue }); draft?.onChange?.(nextValue, meta); if (commit) { const commitValue = parseDataCellInputValue({ kind, value: nextValue, dateTimeZone, previousValue: value, }); session.commit(commitValue, meta, { endEditing: false, markFinished: false, }); } }; const pickerPopup = open && popupStyle && typeof globalThis.document !== "undefined" ? createPortal( , globalThis.document.body, ) : null; return ( <> {pickerPopup} ); } function DataCellPickerPopupContent({ kind, selectedDate, timeValue, onDateSelect, onTimeChange, }: { kind: "date" | "time" | "date-time"; selectedDate: Date | undefined; timeValue: string; onDateSelect: (date: Date | undefined) => void; onTimeChange: (time: string) => void; }) { return ( <> {(kind === "date" || kind === "date-time") && ( )} {(kind === "time" || kind === "date-time") && (

onTimeChange(event.currentTarget.value)} />

)} ); } 5f:T456,import type * as React from "react"; export function getDataCellPickerPopupStyleFromAnchor({ anchor, kind, }: { anchor: HTMLElement; kind: "date" | "time" | "date-time"; }): React.CSSProperties { return getDataCellPickerPopupStyle({ kind, rect: anchor.getBoundingClientRect(), viewportWidth: window.innerWidth, viewportHeight: window.innerHeight, }); } export function getDataCellPickerPopupStyle({ kind, rect, viewportWidth, viewportHeight, }: { kind: "date" | "time" | "date-time"; rect: DOMRect; viewportWidth: number; viewportHeight: number; }): React.CSSProperties { const margin = 8; const estimatedWidth = kind === "time" ? 220 : 330; const estimatedHeight = kind === "time" ? 80 : kind === "date" ? 330 : 390; const left = Math.min( Math.max(margin, rect.left), Math.max(margin, viewportWidth - estimatedWidth - margin), ); const top = rect.bottom + margin + estimatedHeight > viewportHeight ? Math.max(margin, rect.top - estimatedHeight - 4) : rect.bottom + 4; return { position: "fixed", top, left, zIndex: 50 }; } 60:T910,"use client"; import * as React from "react"; import { useDataCellOpeningContext, type DataCellActivationSource, type DataCellDismissCause, } from "@/components/ui/data-cell-activation"; import { useKeyedLayoutEffect } from "@/hooks/use-keyed-layout-effect"; import { joinEffectKey } from "@/lib/effect-key"; export function useDataCellSelectActivation({ activationSource, autoFocus, triggerRef, openEditor, closeEditor, keepOpen, }: { activationSource?: DataCellActivationSource; autoFocus?: boolean; triggerRef: React.RefObject; openEditor: () => void; closeEditor: () => void; keepOpen: () => void; }) { const openingContext = useDataCellOpeningContext(activationSource, { enabled: Boolean(autoFocus), }); const shouldCancelDismiss = React.useCallback( (kind: DataCellDismissCause["kind"], event: Event | undefined) => { if ( !openingContext.shouldCancelDismiss( dataCellSelectDismissCause(kind, event), ) ) { return false; } event?.preventDefault(); keepOpen(); return true; }, [keepOpen, openingContext], ); const closeActivatedEditor = React.useCallback(() => { openingContext.release(); closeEditor(); }, [closeEditor, openingContext]); const openActivatedEditor = React.useCallback(() => { openEditor(); }, [openEditor]); useKeyedLayoutEffect( joinEffectKey([autoFocus, openActivatedEditor, triggerRef]), () => { if (!autoFocus) return; triggerRef.current?.focus({ preventScroll: true }); openActivatedEditor(); }, ); return { shouldCancelDismiss, closeEditor: closeActivatedEditor, openEditor: openActivatedEditor, release: openingContext.release, }; } function dataCellSelectDismissCause( kind: DataCellDismissCause["kind"], event: Event | undefined, ): DataCellDismissCause { if (kind === "outside-pointer" && event instanceof PointerEvent) { return { kind, event }; } if (kind === "escape" && event instanceof KeyboardEvent) { return { kind, event }; } if (kind === "trigger-press") return { kind, event }; if (kind === "focus-out") return { kind, event }; if (kind === "cancel-open") return { kind, event }; return { kind: "unknown", event }; } 61:T130b,"use client"; import * as React from "react"; import { ChevronDown } from "lucide-react"; import { cn } from "@/lib/utils"; import { dataCellPickerTriggerClass } from "@/components/ui/data-cell-classes"; import type { DataCellSelectControlProps } from "@/components/ui/data-cell-control-contract"; import { useDataCellSelectActivation } from "@/components/ui/data-cell-select-activation"; import { useDataCellSelectKeyboard } from "@/components/ui/data-cell-select-keyboard"; import { DataCellSelectPopup } from "@/components/ui/data-cell-select-popup"; import { useDataCellSelectState } from "@/components/ui/data-cell-select-state"; export function DataCellSelectControl({ kind, value, disabled = false, name, placeholder = "Select...", className, formatValue, autoFocus, activationSource, session, openState, options, onFocus, onBlur, onKeyDown, onClick, onDoubleClick, ...props }: DataCellSelectControlProps) { const triggerRef = React.useRef(null); const popupId = React.useId(); const select = useDataCellSelectState({ popupId, value, placeholder, formatValue, openState, selectOptions: options, session, }); const openEditor = React.useCallback(() => { select.openEditor(triggerRef.current); }, [select.openEditor]); const activation = useDataCellSelectActivation({ activationSource, autoFocus, triggerRef, openEditor, closeEditor: select.closeEditor, keepOpen: select.keepOpen, }); const { shouldCancelDismiss, closeEditor: closeActivatedEditor, openEditor: openActivatedEditor, release, } = activation; const commitValue = React.useCallback( (nextValue: string) => { release(); select.commitValue(nextValue); }, [release, select.commitValue], ); const selectOnKeyDown = useDataCellSelectKeyboard({ activeOption: select.activeOption, open: select.open, options, openEditor: openActivatedEditor, closeEditor: closeActivatedEditor, commitValue, setActiveOptionIndex: select.setActiveOptionIndex, shouldCancelDismiss, }); return ( <> {select.open && triggerRef.current && select.popupPosition ? ( { if (shouldCancelDismiss("outside-pointer", event)) { return; } closeActivatedEditor(); }} /> ) : null} ); } 62:T932,"use client"; import * as React from "react"; import { firstEnabledDataCellSelectOptionIndex, lastEnabledDataCellSelectOptionIndex, nextEnabledDataCellSelectOptionIndex, } from "@/components/ui/data-cell-select-navigation"; import type { DataCellSelectOption } from "@/components/ui/data-cell-types"; export function useDataCellSelectKeyboard({ activeOption, open, options, openEditor, closeEditor, commitValue, setActiveOptionIndex, shouldCancelDismiss, }: { activeOption: DataCellSelectOption | undefined; open: boolean; options: DataCellSelectOption[]; openEditor: () => void; closeEditor: () => void; commitValue: (value: string) => void; setActiveOptionIndex: React.Dispatch>; shouldCancelDismiss: (kind: "escape", event: Event | undefined) => boolean; }) { return React.useCallback( (event: React.KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); if (!shouldCancelDismiss("escape", event.nativeEvent)) closeEditor(); return; } if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); if (!open) { openEditor(); return; } setActiveOptionIndex((currentIndex) => nextEnabledDataCellSelectOptionIndex({ options, currentIndex, direction: event.key === "ArrowDown" ? 1 : -1, }), ); return; } if (event.key === "Home" || event.key === "End") { event.preventDefault(); if (!open) { openEditor(); return; } setActiveOptionIndex( event.key === "Home" ? firstEnabledDataCellSelectOptionIndex(options) : lastEnabledDataCellSelectOptionIndex(options), ); return; } if (event.key === "Enter" || event.key === " ") { event.preventDefault(); if (!open) { openEditor(); return; } if (activeOption && !activeOption.disabled) { commitValue(activeOption.value); } } }, [ activeOption, closeEditor, commitValue, open, openEditor, options, setActiveOptionIndex, shouldCancelDismiss, ], ); } 63:T50a,import type { DataCellSelectOption } from "@/components/ui/data-cell-types"; export function firstEnabledDataCellSelectOptionIndex( options: DataCellSelectOption[], ) { return options.findIndex((option) => !option.disabled); } export function lastEnabledDataCellSelectOptionIndex( options: DataCellSelectOption[], ) { for (let index = options.length - 1; index >= 0; index -= 1) { if (!options[index]?.disabled) return index; } return -1; } export function nextEnabledDataCellSelectOptionIndex({ options, currentIndex, direction, }: { options: DataCellSelectOption[]; currentIndex: number; direction: 1 | -1; }) { if (options.length === 0) return -1; for (let offset = 1; offset <= options.length; offset += 1) { const index = (currentIndex + direction * offset + options.length) % options.length; if (!options[index]?.disabled) return index; } return -1; } export function selectedDataCellSelectOptionIndex({ options, value, }: { options: DataCellSelectOption[]; value: string | null; }) { const selectedIndex = options.findIndex((option) => option.value === value); if (selectedIndex >= 0 && !options[selectedIndex]?.disabled) { return selectedIndex; } return firstEnabledDataCellSelectOptionIndex(options); } 64:T61e,"use client"; import type * as React from "react"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { joinEffectKey } from "@/lib/effect-key"; export function useDataCellSelectPopupDismissal({ anchor, popupRef, onCancel, onOutsidePointerDown, }: { anchor: HTMLElement; popupRef: React.RefObject; onCancel: () => void; onOutsidePointerDown: (event: PointerEvent) => void; }) { useKeyedMountEffect( joinEffectKey([anchor, onOutsidePointerDown, popupRef]), () => { const handlePointerDown = (event: PointerEvent) => { const target = event.target; if (!(target instanceof Node)) return; if (anchor.contains(target) || popupRef.current?.contains(target)) return; onOutsidePointerDown(event); }; document.addEventListener("pointerdown", handlePointerDown, true); return () => document.removeEventListener("pointerdown", handlePointerDown, true); }, ); useKeyedMountEffect(joinEffectKey([onCancel, popupRef]), () => { const handleViewportChange = (event: Event) => { const target = event.target; if (target instanceof Node && popupRef.current?.contains(target)) return; onCancel(); }; window.addEventListener("resize", handleViewportChange); window.addEventListener("scroll", handleViewportChange, true); return () => { window.removeEventListener("resize", handleViewportChange); window.removeEventListener("scroll", handleViewportChange, true); }; }); } 65:T5b0,export type DataCellSelectPopupPosition = { left: number; top: number; width: number; maxHeight: number; }; export type DataCellSelectPopupRect = Pick< DOMRect, "bottom" | "left" | "top" | "width" >; export type DataCellSelectPopupViewport = { width: number; height: number; }; const popupGapPx = 4; const viewportMarginPx = 8; const minimumPopupHeightPx = 64; export function getDataCellSelectPopupPosition({ anchorRect, viewport, }: { anchorRect: DataCellSelectPopupRect; viewport: DataCellSelectPopupViewport; }): DataCellSelectPopupPosition { const availableBelow = viewport.height - anchorRect.bottom - viewportMarginPx; const availableAbove = anchorRect.top - viewportMarginPx; const shouldPlaceAbove = availableBelow < minimumPopupHeightPx && availableAbove > availableBelow; const maxHeight = Math.max( minimumPopupHeightPx, shouldPlaceAbove ? availableAbove - popupGapPx : availableBelow - popupGapPx, ); const top = shouldPlaceAbove ? Math.max(viewportMarginPx, anchorRect.top - popupGapPx - maxHeight) : Math.min( anchorRect.bottom + popupGapPx, viewport.height - viewportMarginPx, ); const left = Math.min( Math.max(viewportMarginPx, anchorRect.left), Math.max( viewportMarginPx, viewport.width - anchorRect.width - viewportMarginPx, ), ); return { left, top, width: anchorRect.width, maxHeight, }; } 66:Te1b,"use client"; import * as React from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; import { useDataCellSelectPopupDismissal } from "@/components/ui/data-cell-select-popup-dismissal"; import type { DataCellSelectPopupPosition } from "@/components/ui/data-cell-select-popup-position"; import type { DataCellSelectOption } from "@/components/ui/data-cell-types"; export type DataCellSelectPopupProps = { anchor: HTMLElement; id: string; position: DataCellSelectPopupPosition; activeDescendantId: string | undefined; value: string | null; activeIndex: number; options: DataCellSelectOption[]; onActiveIndexChange: (index: number) => void; onCommit: (value: string) => void; onCancel: () => void; onOutsidePointerDown: (event: PointerEvent) => void; }; export function DataCellSelectPopup({ anchor, id, position, activeDescendantId, value, activeIndex, options, onActiveIndexChange, onCommit, onCancel, onOutsidePointerDown, }: DataCellSelectPopupProps) { const popupRef = React.useRef(null); useDataCellSelectPopupDismissal({ anchor, popupRef, onCancel, onOutsidePointerDown, }); return createPortal( , document.body, ); } 67:T130a,"use client"; import * as React from "react"; import { selectedDataCellSelectOptionIndex } from "@/components/ui/data-cell-select-navigation"; import { getDataCellSelectPopupPosition, type DataCellSelectPopupPosition, } from "@/components/ui/data-cell-select-popup-position"; import type { DataCellPrimitiveSession } from "@/components/ui/data-cell-session"; import type { DataCellOpenControl } from "@/components/ui/data-cell-control-contract"; import type { DataCellSelectOption, DataCellValueMeta, } from "@/components/ui/data-cell-types"; type DataCellSelectFormatValue = ( value: string | null | undefined, meta: { kind: "select" }, ) => React.ReactNode; export type DataCellSelectState = { activeDescendantId: string | undefined; activeOption: DataCellSelectOption | undefined; activeOptionIndex: number; closeEditor: () => void; commitValue: (nextValue: string) => void; displayValue: React.ReactNode; isEmpty: boolean; keepOpen: () => void; open: boolean; openEditor: (trigger: HTMLElement | null) => void; placeholder: string; popupPosition: DataCellSelectPopupPosition | null; selectedValue: string | null; setActiveOptionIndex: React.Dispatch>; }; export function useDataCellSelectState({ popupId, value, placeholder = "Select...", formatValue, openState, selectOptions, session, }: { popupId: string; value?: string | null; placeholder?: string; formatValue?: DataCellSelectFormatValue; openState?: DataCellOpenControl; selectOptions: DataCellSelectOption[]; session: DataCellPrimitiveSession; }): DataCellSelectState { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false); const [activeOptionIndex, setActiveOptionIndex] = React.useState(-1); const popupPositionRef = React.useRef( null, ); const [popupPosition, setPopupPosition] = React.useState(null); const lastCommittedValueRef = React.useRef(null); const controlledOpen = openState?.value; const open = controlledOpen ?? uncontrolledOpen; const selectedValue = value ?? null; const selectedOption = selectOptions.find((option) => option.value === value); const activeOption = selectOptions[activeOptionIndex]; const activeDescendantId = open && activeOptionIndex >= 0 ? `${popupId}-option-${activeOptionIndex}` : undefined; const displayValue = formatValue?.(selectedValue, { kind: "select" }) ?? selectedOption?.label ?? ""; const isEmpty = displayValue === ""; const setOpen = React.useCallback( (nextOpen: boolean) => { if (!nextOpen) { popupPositionRef.current = null; setPopupPosition(null); } if (controlledOpen === undefined) setUncontrolledOpen(nextOpen); openState?.onChange?.(nextOpen); }, [controlledOpen, openState], ); const keepOpen = React.useCallback(() => { if (controlledOpen === undefined) setUncontrolledOpen(true); openState?.onChange?.(true); }, [controlledOpen, openState]); const closeEditor = React.useCallback(() => { setOpen(false); session.end(); }, [session, setOpen]); const openEditor = React.useCallback( (trigger: HTMLElement | null) => { if (!trigger) return; if (!popupPositionRef.current) { popupPositionRef.current = getDataCellSelectPopupPosition({ anchorRect: trigger.getBoundingClientRect(), viewport: { width: window.innerWidth, height: window.innerHeight, }, }); } setPopupPosition(popupPositionRef.current); setActiveOptionIndex( selectedDataCellSelectOptionIndex({ options: selectOptions, value: selectedValue, }), ); lastCommittedValueRef.current = null; session.reset(); setOpen(true); }, [selectOptions, selectedValue, session, setOpen], ); const commitValue = React.useCallback( (nextValue: string) => { if (selectedValue === nextValue) { closeEditor(); return; } if (lastCommittedValueRef.current === nextValue) return; lastCommittedValueRef.current = nextValue; setOpen(false); session.commit(nextValue, selectValueMeta(nextValue)); }, [closeEditor, selectedValue, session, setOpen], ); return { activeDescendantId, activeOption, activeOptionIndex, closeEditor, commitValue, displayValue, isEmpty, keepOpen, open, openEditor, placeholder, popupPosition, selectedValue, setActiveOptionIndex, }; } function selectValueMeta(value: string | null): DataCellValueMeta { return { kind: "select", rawValue: value ?? "", isEmpty: value === null || value === "", isValid: true, }; } 68:T756,"use client"; import * as React from "react"; import type { DataCellCommitValue, DataCellValueMeta, } from "@/components/ui/data-cell-types"; type DataCellSessionCommitOptions = { endEditing?: boolean; markFinished?: boolean; shouldCommit?: () => boolean; }; type DataCellSessionEndOptions = { markFinished?: boolean; }; export type DataCellSessionCommit = ( value: DataCellCommitValue, meta: DataCellValueMeta, options?: DataCellSessionCommitOptions, ) => void; export type DataCellPrimitiveSession = { commit: DataCellSessionCommit; cancel: () => void; end: (options?: DataCellSessionEndOptions) => void; reset: () => void; }; export function useDataCellPrimitiveSession({ onCommit, onEditingEnd, }: { onCommit?: (value: DataCellCommitValue, meta: DataCellValueMeta) => void; onEditingEnd?: () => void; }): DataCellPrimitiveSession { const didFinishRef = React.useRef(false); const reset = React.useCallback(() => { didFinishRef.current = false; }, []); const end = React.useCallback( ({ markFinished = true }: DataCellSessionEndOptions = {}) => { if (didFinishRef.current) return; if (markFinished) didFinishRef.current = true; onEditingEnd?.(); }, [onEditingEnd], ); const commit = React.useCallback( ( value, meta, { endEditing = true, markFinished = true, shouldCommit, }: DataCellSessionCommitOptions = {}, ) => { if (didFinishRef.current) return; if (shouldCommit && !shouldCommit()) return; if (markFinished) didFinishRef.current = true; onCommit?.(value, meta); if (endEditing) onEditingEnd?.(); }, [onCommit, onEditingEnd], ); const cancel = React.useCallback(() => { end(); }, [end]); return { commit, cancel, end, reset, }; } 69:T1e4c,"use client"; import * as React from "react"; import { useMountEffect } from "@/hooks/use-mount-effect"; import { cn } from "@/lib/utils"; import { Input } from "@/components/ui/input"; import { useDataCellOpeningContext, type DataCellActivationSource, } from "@/components/ui/data-cell-activation"; import { dataCellDisplayClass } from "@/components/ui/data-cell-classes"; import type { DataCellInputControlProps } from "@/components/ui/data-cell-control-contract"; import { formatDataCellEditValue, getDataCellValueMeta, parseDataCellInputValue, } from "@/components/ui/data-cell-format"; import { getDataCellTextSelectionOffset } from "@/components/ui/data-cell-text-hit-test"; import type { DataCellKind, DataCellValue, DataCellValueMeta, } from "@/components/ui/data-cell-types"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { useKeyedLayoutEffect } from "@/hooks/use-keyed-layout-effect"; import { joinEffectKey } from "@/lib/effect-key"; function focusDataCellTextInput( input: HTMLInputElement | null, activationSource: DataCellActivationSource | undefined, ) { if (!input) return null; input.focus({ preventScroll: true }); if (input.type !== "text" && input.type !== "search") return; const selectionIndex = activationSource?.kind === "pointer" ? (activationSource.selectionOffset ?? getDataCellTextSelectionOffset({ clientX: activationSource.clientX, input, value: input.value, })) : input.value.length; input.setSelectionRange(selectionIndex, selectionIndex); } function initialInputValueForActivation({ activationSource, kind, value, }: { activationSource: DataCellActivationSource | undefined; kind: DataCellKind; value: DataCellValue; }) { if ( activationSource?.kind !== "keyboard" || activationSource.key.length !== 1 ) { return formatDataCellEditValue(kind, value); } if (kind === "text") return activationSource.key; if ( (kind === "number" || kind === "integer") && /^[0-9.+-]$/.test(activationSource.key) ) { return activationSource.key; } return formatDataCellEditValue(kind, value); } export function DataCellInputControl({ kind, value, disabled = false, name, placeholder, className, draft, autoFocus, activationSource, session, onFocus, onBlur, onKeyDown, onClick, onMouseUp, onDoubleClick, ...props }: DataCellInputControlProps) { const initialInputValue = initialInputValueForActivation({ activationSource, kind, value, }); const [uncontrolledDraftValue, setUncontrolledDraftValue] = React.useState(initialInputValue); const inputRef = React.useRef(null); const initialInputValueRef = React.useRef(initialInputValue); const lastInputValueRef = React.useRef(initialInputValue); const inputValue = draft?.value ?? uncontrolledDraftValue; const openingContext = useDataCellOpeningContext(activationSource, { enabled: activationSource?.kind === "pointer", releaseAfterMicrotask: true, }); const isDirty = React.useCallback( () => lastInputValueRef.current !== initialInputValueRef.current, [], ); useKeyedMountEffect( joinEffectKey([activationSource, draft?.value, kind, value]), () => { if (draft?.value !== undefined) return; setUncontrolledDraftValue( initialInputValueForActivation({ activationSource, kind, value, }), ); }, ); useKeyedMountEffect(joinEffectKey([inputValue]), () => { lastInputValueRef.current = inputValue; }); useKeyedLayoutEffect(joinEffectKey([activationSource, autoFocus]), () => { if (!autoFocus && !activationSource) return; focusDataCellTextInput(inputRef.current, activationSource); }); const commitCurrentInputValue = React.useCallback( ( input: HTMLInputElement | null, { endEditing = true, markFinished = true, onlyIfChanged = false, }: { endEditing?: boolean; markFinished?: boolean; onlyIfChanged?: boolean; } = {}, ) => { const rawValue = input?.value ?? lastInputValueRef.current; const commitValue = parseDataCellInputValue({ kind, value: rawValue, dateTimeZone: "local", previousValue: value, }); session.commit( commitValue, getDataCellValueMeta({ kind, value: rawValue, isBadInput: input?.validity.badInput ?? false, }), { endEditing, markFinished, shouldCommit: onlyIfChanged ? isDirty : undefined, }, ); }, [isDirty, kind, session, value], ); const commitCurrentInputValueRef = React.useRef(commitCurrentInputValue); useKeyedMountEffect(joinEffectKey([commitCurrentInputValue]), () => { commitCurrentInputValueRef.current = commitCurrentInputValue; }); useMountEffect(() => () => { commitCurrentInputValueRef.current(inputRef.current, { endEditing: false, markFinished: false, onlyIfChanged: true, }); }); const inputType = inputTypeForDataCell(kind); const { id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rootProps } = props; return ( { const nextValue = event.currentTarget.value; lastInputValueRef.current = nextValue; if (draft?.value === undefined) setUncontrolledDraftValue(nextValue); draft?.onChange?.( nextValue, getDataCellValueMeta({ kind, value: nextValue, isBadInput: event.currentTarget.validity.badInput, }), ); }} onFocus={onFocus} onBlur={(event) => { const rawValue = event.currentTarget.value; if ( openingContext.shouldCancelDismiss({ kind: "focus-out" }) && rawValue === initialInputValueRef.current ) { onBlur?.(event); return; } commitCurrentInputValue(event.currentTarget); onBlur?.(event); }} onKeyDown={(event) => { onKeyDown?.(event); if (event.defaultPrevented) return; if (event.key === "Enter") { commitCurrentInputValue(event.currentTarget); event.currentTarget.blur(); event.preventDefault(); return; } if (event.key === "Escape") { session.cancel(); event.currentTarget.blur(); event.preventDefault(); return; } }} onMouseUp={(event) => { onMouseUp?.(event); }} onClick={(event) => { onClick?.(event); }} onDoubleClick={onDoubleClick} /> ); } function inputTypeForDataCell( kind: DataCellKind, ): React.HTMLInputTypeAttribute { if (kind === "number" || kind === "integer") return "number"; return "text"; } 6a:T42b,import { createDataCellPointerActivationSource, type DataCellActivationSource, } from "@/components/ui/data-cell-activation"; import { getDataCellDisplayTextSelectionOffset } from "@/components/ui/data-cell-text-hit-test"; export function getDataCellTextPointerActivationSource({ clientX, clientY, detail, displayElement, event, value, }: { clientX: number; clientY: number; detail: number; displayElement: HTMLElement | null; event?: Event; value: string | null | undefined; }): Extract { const activationSource = createDataCellPointerActivationSource({ clientX, clientY, detail, event, }); const textElement = displayElement?.querySelector( '[data-slot="data-cell-value"]', ); if (!textElement) return activationSource; activationSource.selectionOffset = getDataCellDisplayTextSelectionOffset({ clientX, clientY, textElement, value: value === null || value === undefined ? "" : String(value), }); return activationSource; } 6b:T1d6f,import { measureNaturalWidth, prepareWithSegments } from "@chenglou/pretext"; type MeasurePrefixWidth = (value: string) => number; type CachedTextMeasurement = { widthsByOffset: Map; }; const TEXT_MEASUREMENT_CACHE_LIMIT = 500; const textMeasurementCache = new Map(); export function getMeasuredTextSelectionOffset({ measurePrefixWidth, targetX, value, }: { measurePrefixWidth: MeasurePrefixWidth; targetX: number; value: string; }): number { if (value.length === 0) return 0; const boundaries = graphemeBoundaries(value); const lastIndex = boundaries.length - 1; const measuredWidths = new Map(); const widthAtBoundary = (index: number) => { const offset = boundaries[index] ?? value.length; const cached = measuredWidths.get(offset); if (cached !== undefined) return cached; const width = safeMeasuredWidth(() => measurePrefixWidth(value.slice(0, offset)), ); measuredWidths.set(offset, width); return width; }; const fullWidth = widthAtBoundary(lastIndex); if (targetX <= 0 || fullWidth <= 0) return 0; if (targetX >= fullWidth) return value.length; let low = 0; let high = lastIndex; while (low < high) { const mid = Math.floor((low + high) / 2); const width = widthAtBoundary(mid); if (width < targetX) low = mid + 1; else high = mid; } const nextIndex = low; const previousIndex = Math.max(0, nextIndex - 1); const previousWidth = widthAtBoundary(previousIndex); const nextWidth = widthAtBoundary(nextIndex); return targetX - previousWidth <= nextWidth - targetX ? (boundaries[previousIndex] ?? 0) : (boundaries[nextIndex] ?? value.length); } export function getDataCellTextSelectionOffset({ clientX, input, value, }: { clientX: number; input: HTMLInputElement; value: string; }): number { const valueLength = value.length; if (valueLength === 0) return 0; const rect = input.getBoundingClientRect(); if (rect.width <= 0) return valueLength; const styles = globalThis.getComputedStyle(input); const paddingLeft = numericCssPixels(styles.paddingLeft); const paddingRight = numericCssPixels(styles.paddingRight); const contentLeft = rect.left + paddingLeft; const contentWidth = Math.max(1, rect.width - paddingLeft - paddingRight); const targetX = clientX - contentLeft + input.scrollLeft; if (!canUsePretextHitTest(styles)) { return getLinearTextSelectionOffset({ contentWidth, targetX, valueLength, }); } const font = styles.font; const letterSpacing = numericCssPixels(styles.letterSpacing); try { return getPretextTextSelectionOffset({ font, letterSpacing, targetX, value, }); } catch { return getLinearTextSelectionOffset({ contentWidth, targetX, valueLength, }); } } export function getDataCellDisplayTextSelectionOffset({ clientX, clientY: _clientY, textElement, value, }: { clientX: number; clientY: number; textElement: HTMLElement; value: string; }): number { return getDataCellTextSelectionOffsetFromElement({ clientX, element: textElement, value, }); } function getDataCellTextSelectionOffsetFromElement({ clientX, element, value, }: { clientX: number; element: HTMLElement; value: string; }): number { const valueLength = value.length; if (valueLength === 0) return 0; const rect = element.getBoundingClientRect(); if (rect.width <= 0) return valueLength; const styles = globalThis.getComputedStyle(element); const paddingLeft = numericCssPixels(styles.paddingLeft); const paddingRight = numericCssPixels(styles.paddingRight); const contentLeft = rect.left + paddingLeft; const contentWidth = Math.max(1, rect.width - paddingLeft - paddingRight); const targetX = clientX - contentLeft; if (!canUsePretextHitTest(styles)) { return getLinearTextSelectionOffset({ contentWidth, targetX, valueLength, }); } const font = styles.font; const letterSpacing = numericCssPixels(styles.letterSpacing); try { return getPretextTextSelectionOffset({ font, letterSpacing, targetX, value, }); } catch { return getLinearTextSelectionOffset({ contentWidth, targetX, valueLength, }); } } function getPretextTextSelectionOffset({ font, letterSpacing, targetX, value, }: { font: string; letterSpacing: number; targetX: number; value: string; }): number { const measurement = cachedTextMeasurement({ font, letterSpacing, value, }); return getMeasuredTextSelectionOffset({ value, targetX, measurePrefixWidth: (prefix) => { const offset = prefix.length; const cached = measurement.widthsByOffset.get(offset); if (cached !== undefined) return cached; const width = measureNaturalWidth( prepareWithSegments(prefix, font, { letterSpacing, whiteSpace: "pre-wrap", }), ); measurement.widthsByOffset.set(offset, width); return width; }, }); } function cachedTextMeasurement({ font, letterSpacing, value, }: { font: string; letterSpacing: number; value: string; }): CachedTextMeasurement { const key = `${font}\n${letterSpacing}\n${value}`; const cached = textMeasurementCache.get(key); if (cached) { textMeasurementCache.delete(key); textMeasurementCache.set(key, cached); return cached; } const measurement: CachedTextMeasurement = { widthsByOffset: new Map(), }; textMeasurementCache.set(key, measurement); if (textMeasurementCache.size > TEXT_MEASUREMENT_CACHE_LIMIT) { const oldestKey = textMeasurementCache.keys().next().value; if (oldestKey !== undefined) textMeasurementCache.delete(oldestKey); } return measurement; } function getLinearTextSelectionOffset({ contentWidth, targetX, valueLength, }: { contentWidth: number; targetX: number; valueLength: number; }): number { const ratio = Math.min(1, Math.max(0, targetX / contentWidth)); return Math.min(valueLength, Math.max(0, Math.round(ratio * valueLength))); } function canUsePretextHitTest(styles: CSSStyleDeclaration): boolean { const direction = styles.direction || "ltr"; const textAlign = styles.textAlign || "start"; return ( !isJsdomEnvironment() && direction === "ltr" && (textAlign === "left" || textAlign === "start" || textAlign === "") && styles.font !== "" ); } function isJsdomEnvironment(): boolean { return ( globalThis.navigator?.userAgent.toLowerCase().includes("jsdom") ?? false ); } function graphemeBoundaries(value: string): number[] { if (typeof Intl !== "undefined" && "Segmenter" in Intl) { const boundaries = [0]; const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme", }); for (const segment of segmenter.segment(value)) { boundaries.push(segment.index + segment.segment.length); } return boundaries; } const boundaries = [0]; let offset = 0; for (const codePoint of Array.from(value)) { offset += codePoint.length; boundaries.push(offset); } return boundaries; } function numericCssPixels(value: string): number { const parsed = Number.parseFloat(value); return Number.isFinite(parsed) ? parsed : 0; } function safeMeasuredWidth(measure: () => number): number { const width = measure(); return Number.isFinite(width) ? Math.max(0, width) : 0; } 6c:T1079,import type * as React from "react"; export type DataCellKindModel = { text: { value: string | null; commitValue: string | null; }; number: { value: number | string | null; commitValue: number | null; }; integer: { value: number | string | null; commitValue: number | null; }; boolean: { value: boolean | null; commitValue: boolean; }; select: { value: string | null; commitValue: string | null; }; date: { value: string | null; commitValue: string | null; }; time: { value: string | null; commitValue: string | null; }; "date-time": { value: string | null; commitValue: string | null; }; }; export type DataCellKind = keyof DataCellKindModel; export type DataCellValueForKind = DataCellKindModel[Kind]["value"]; export type DataCellCommitValueForKind = DataCellKindModel[Kind]["commitValue"]; export type DataCellValue = DataCellValueForKind | undefined; export type DataCellCommitValue = DataCellCommitValueForKind; export type DataCellDateTimeZone = "local" | "preserve" | "utc"; export type DataCellValueMeta = { kind: DataCellKind; rawValue: string; isEmpty: boolean; isValid: boolean; }; export type DataCellSelectOption = { value: string; label: React.ReactNode; disabled?: boolean; className?: string; }; export type DataCellCommitHandler = ( value: DataCellCommitValue, meta: DataCellValueMeta, ) => void; type DataCellNativeProps = Omit< React.HTMLAttributes, "children" | "defaultValue" | "onChange" >; type DataCellBaseProps = DataCellNativeProps & { kind: Kind; value?: DataCellValueForKind; editable?: boolean; active?: boolean; disabled?: boolean; name?: string; autoFocus?: boolean; onEditingEnd?: () => void; onActiveChange?: (active: boolean) => void; }; type DataCellPlaceholderProps = { placeholder?: string; }; type DataCellDraftProps = { draftValue?: string; onDraftValueChange?: (value: string, meta: DataCellValueMeta) => void; }; type DataCellOpenProps = { open?: boolean; onOpenChange?: (open: boolean) => void; }; type DataCellFormatProps = { formatValue?: ( value: DataCellValueForKind | undefined, meta: { kind: Kind }, ) => React.ReactNode; }; type DataCellCommitProps = { onCommit?: ( value: DataCellCommitValueForKind, meta: DataCellValueMeta, ) => void; }; type DataCellTextProps = DataCellBaseProps<"text"> & DataCellPlaceholderProps & DataCellDraftProps & DataCellFormatProps<"text"> & DataCellCommitProps<"text">; type DataCellNumberProps = DataCellBaseProps<"number"> & DataCellPlaceholderProps & DataCellDraftProps & DataCellFormatProps<"number"> & DataCellCommitProps<"number">; type DataCellIntegerProps = DataCellBaseProps<"integer"> & DataCellPlaceholderProps & DataCellDraftProps & DataCellFormatProps<"integer"> & DataCellCommitProps<"integer">; type DataCellBooleanProps = DataCellBaseProps<"boolean"> & DataCellCommitProps<"boolean">; type DataCellSelectProps = DataCellBaseProps<"select"> & DataCellPlaceholderProps & DataCellOpenProps & DataCellFormatProps<"select"> & { selectOptions: DataCellSelectOption[]; } & DataCellCommitProps<"select">; type DataCellPickerProps = DataCellBaseProps & DataCellPlaceholderProps & DataCellDraftProps & DataCellOpenProps & DataCellFormatProps & { dateTimeZone?: DataCellDateTimeZone; showPickerIcon?: boolean; } & DataCellCommitProps; export type DataCellPropsByKind = { text: DataCellTextProps; number: DataCellNumberProps; integer: DataCellIntegerProps; boolean: DataCellBooleanProps; select: DataCellSelectProps; date: DataCellPickerProps<"date">; time: DataCellPickerProps<"time">; "date-time": DataCellPickerProps<"date-time">; }; export type DataCellPropsForKind = DataCellPropsByKind[Kind]; export type DataCellProps = DataCellPropsByKind[DataCellKind]; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@chenglou/pretext@^0.0.8",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40chenglou%2Fpretext","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@chenglou/pretext@^0.0.8"}]]}]}],["$","li","lucide-react@^0.460.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^0.460.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@retab","registryDependencies":["@retab/calendar","@retab/input","popover","select","@retab/utils","@retab/use-keyed-layout-effect","@retab/use-mount-effect"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york-v4/ui/data-cell.tsx","content":"$52","type":"registry:ui","target":"@ui/data-cell.tsx"},{"path":"registry/new-york-v4/ui/data-cell-activation.ts","content":"$53","type":"registry:ui","target":"@ui/data-cell-activation.ts"},{"path":"registry/new-york-v4/ui/data-cell-boolean-control.tsx","content":"$54","type":"registry:ui","target":"@ui/data-cell-boolean-control.tsx"},{"path":"registry/new-york-v4/ui/data-cell-boolean-value.ts","content":"import type { DataCellValueMeta } from \"@/components/ui/data-cell-types\";\n\nexport type DataCellBooleanCommitHandler = (\n value: boolean,\n meta: DataCellValueMeta,\n) => void;\n\nexport function commitDataCellBooleanToggle(\n value: boolean | null | undefined,\n onCommit: DataCellBooleanCommitHandler | undefined,\n) {\n const nextValue = nextDataCellBooleanValue(value);\n onCommit?.(nextValue, dataCellBooleanValueMeta(nextValue));\n}\n\nexport function nextDataCellBooleanValue(value: boolean | null | undefined) {\n return !Boolean(value);\n}\n\nexport function dataCellBooleanValueMeta(value: boolean): DataCellValueMeta {\n return {\n kind: \"boolean\",\n rawValue: String(value),\n isEmpty: false,\n isValid: true,\n };\n}\n","type":"registry:ui","target":"@ui/data-cell-boolean-value.ts"},{"path":"registry/new-york-v4/ui/data-cell-classes.ts","content":"$55","type":"registry:ui","target":"@ui/data-cell-classes.ts"},{"path":"registry/new-york-v4/ui/data-cell-control.tsx","content":"$56","type":"registry:ui","target":"@ui/data-cell-control.tsx"},{"path":"registry/new-york-v4/ui/data-cell-control-actions.ts","content":"$57","type":"registry:ui","target":"@ui/data-cell-control-actions.ts"},{"path":"registry/new-york-v4/ui/data-cell-control-contract.ts","content":"$58","type":"registry:ui","target":"@ui/data-cell-control-contract.ts"},{"path":"registry/new-york-v4/ui/data-cell-control-props.ts","content":"$59","type":"registry:ui","target":"@ui/data-cell-control-props.ts"},{"path":"registry/new-york-v4/ui/data-cell-control-registry.tsx","content":"import type * as React from \"react\";\n\nimport { DataCellBooleanControl } from \"@/components/ui/data-cell-boolean-control\";\nimport type { DataCellControlPropsByKind } from \"@/components/ui/data-cell-control-contract\";\nimport { DataCellPickerControl } from \"@/components/ui/data-cell-picker-control\";\nimport { DataCellSelectControl } from \"@/components/ui/data-cell-select-control\";\nimport { DataCellInputControl } from \"@/components/ui/data-cell-input-control\";\n\ntype DataCellControlComponentByKind = {\n [Kind in keyof DataCellControlPropsByKind]: React.ComponentType<\n DataCellControlPropsByKind[Kind]\n >;\n};\n\nexport const dataCellControlByKind = {\n text: DataCellInputControl,\n number: DataCellInputControl,\n integer: DataCellInputControl,\n boolean: DataCellBooleanControl,\n select: DataCellSelectControl,\n date: DataCellPickerControl,\n time: DataCellPickerControl,\n \"date-time\": DataCellPickerControl,\n} satisfies DataCellControlComponentByKind;\n","type":"registry:ui","target":"@ui/data-cell-control-registry.tsx"},{"path":"registry/new-york-v4/ui/data-cell-display.tsx","content":"$5a","type":"registry:ui","target":"@ui/data-cell-display.tsx"},{"path":"registry/new-york-v4/ui/data-cell-display-model.ts","content":"$5b","type":"registry:ui","target":"@ui/data-cell-display-model.ts"},{"path":"registry/new-york-v4/ui/data-cell-edit-model.ts","content":"$5c","type":"registry:ui","target":"@ui/data-cell-edit-model.ts"},{"path":"registry/new-york-v4/ui/data-cell-format.ts","content":"$5d","type":"registry:ui","target":"@ui/data-cell-format.ts"},{"path":"registry/new-york-v4/ui/data-cell-picker-control.tsx","content":"$5e","type":"registry:ui","target":"@ui/data-cell-picker-control.tsx"},{"path":"registry/new-york-v4/ui/data-cell-picker-icon.tsx","content":"\"use client\";\n\nimport { CalendarIcon, ClockIcon } from \"lucide-react\";\n\nimport type { DataCellKind } from \"@/components/ui/data-cell-types\";\n\nexport function DataCellPickerIcon({ kind }: { kind: DataCellKind }) {\n if (kind === \"time\") return ;\n return ;\n}\n","type":"registry:ui","target":"@ui/data-cell-picker-icon.tsx"},{"path":"registry/new-york-v4/ui/data-cell-picker-position.ts","content":"$5f","type":"registry:ui","target":"@ui/data-cell-picker-position.ts"},{"path":"registry/new-york-v4/ui/data-cell-select-activation.ts","content":"$60","type":"registry:ui","target":"@ui/data-cell-select-activation.ts"},{"path":"registry/new-york-v4/ui/data-cell-select-control.tsx","content":"$61","type":"registry:ui","target":"@ui/data-cell-select-control.tsx"},{"path":"registry/new-york-v4/ui/data-cell-select-keyboard.ts","content":"$62","type":"registry:ui","target":"@ui/data-cell-select-keyboard.ts"},{"path":"registry/new-york-v4/ui/data-cell-select-navigation.ts","content":"$63","type":"registry:ui","target":"@ui/data-cell-select-navigation.ts"},{"path":"registry/new-york-v4/ui/data-cell-select-popup-dismissal.ts","content":"$64","type":"registry:ui","target":"@ui/data-cell-select-popup-dismissal.ts"},{"path":"registry/new-york-v4/ui/data-cell-select-popup-position.ts","content":"$65","type":"registry:ui","target":"@ui/data-cell-select-popup-position.ts"},{"path":"registry/new-york-v4/ui/data-cell-select-popup.tsx","content":"$66","type":"registry:ui","target":"@ui/data-cell-select-popup.tsx"},{"path":"registry/new-york-v4/ui/data-cell-select-state.ts","content":"$67","type":"registry:ui","target":"@ui/data-cell-select-state.ts"},{"path":"registry/new-york-v4/ui/data-cell-session.ts","content":"$68","type":"registry:ui","target":"@ui/data-cell-session.ts"},{"path":"registry/new-york-v4/ui/data-cell-input-control.tsx","content":"$69","type":"registry:ui","target":"@ui/data-cell-input-control.tsx"},{"path":"registry/new-york-v4/ui/data-cell-text-activation.ts","content":"$6a","type":"registry:ui","target":"@ui/data-cell-text-activation.ts"},{"path":"registry/new-york-v4/ui/data-cell-text-hit-test.ts","content":"$6b","type":"registry:ui","target":"@ui/data-cell-text-hit-test.ts"},{"path":"registry/new-york-v4/ui/data-cell-types.ts","content":"$6c","type":"registry:ui","target":"@ui/data-cell-types.ts"}],"className":"h-[70svh] min-h-80"}]]}]