{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "data-cell", "title": "Data Cell", "description": "A lightweight editable cell for scalar document data: text, numbers, booleans, dates, times, and date-times.", "dependencies": [ "@chenglou/pretext@^0.0.8", "lucide-react@^0.460.0" ], "registryDependencies": [ "@retab/calendar", "@retab/input", "popover", "select", "@retab/utils", "@retab/use-keyed-layout-effect", "@retab/use-mount-effect" ], "files": [ { "path": "registry/new-york-v4/ui/data-cell.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { flushSync } from \"react-dom\";\n\nimport {\n useDataCellActivationClickTail,\n type DataCellActivationSource,\n} from \"@/components/ui/data-cell-activation\";\nimport { DataCellControl } from \"@/components/ui/data-cell-control\";\nimport {\n createDataCellControlState,\n getDataCellClickControlAction,\n getDataCellKeyControlAction,\n getDataCellPointerControlAction,\n} from \"@/components/ui/data-cell-control-actions\";\nimport type { DataCellControlAction } from \"@/components/ui/data-cell-control-contract\";\nimport { DataCellDisplay } from \"@/components/ui/data-cell-display\";\nimport { createDataCellDisplayProps } from \"@/components/ui/data-cell-display-model\";\nimport { createDataCellEditModel } from \"@/components/ui/data-cell-edit-model\";\nimport type { DataCellProps } from \"@/components/ui/data-cell-types\";\n\nexport type {\n DataCellCommitValue,\n DataCellDateTimeZone,\n DataCellKind,\n DataCellProps,\n DataCellSelectOption,\n DataCellValue,\n DataCellValueMeta,\n} from \"@/components/ui/data-cell-types\";\nexport {\n formatDataCellDisplayValue,\n parseDataCellNumberInput,\n} from \"@/components/ui/data-cell-format\";\nexport { DataCellDisplay };\n\nfunction storeDataCellActivationSource(\n sourceRef: React.MutableRefObject,\n setSource: React.Dispatch<\n React.SetStateAction\n >,\n source: DataCellActivationSource,\n) {\n // Activation source must be visible to the first active control render so\n // pointer caret placement and opening-event dismissal see the original event.\n flushSync(() => {\n sourceRef.current = source;\n setSource(source);\n });\n}\n\nfunction hasDataCellKeyboardModifier(event: React.KeyboardEvent) {\n const isAltGraph =\n event.getModifierState(\"AltGraph\") ||\n event.nativeEvent.getModifierState?.(\"AltGraph\") ||\n (event.ctrlKey &&\n event.altKey &&\n event.key.length === 1 &&\n !/^[\\x00-\\x7F]$/.test(event.key));\n return (\n event.metaKey ||\n (event.ctrlKey && !isAltGraph) ||\n (event.altKey && !isAltGraph) ||\n event.nativeEvent.isComposing\n );\n}\n\nexport function DataCell(props: DataCellProps) {\n const {\n active,\n editable = false,\n disabled = false,\n onActiveChange,\n onEditingEnd,\n onClick,\n onKeyDown,\n onPointerDown,\n } = props;\n const displayRef = React.useRef(null);\n const activationClickTail = useDataCellActivationClickTail();\n const activationSourceRef = React.useRef<\n DataCellActivationSource | undefined\n >(undefined);\n const [uncontrolledActive, setUncontrolledActive] = React.useState(false);\n const [activationSource, setActivationSource] =\n React.useState();\n const isControlledActive = active !== undefined;\n const isActive = active ?? uncontrolledActive;\n const canSelfActivate = editable && !disabled;\n\n const setActive = React.useCallback(\n (nextActive: boolean) => {\n if (!isControlledActive) setUncontrolledActive(nextActive);\n onActiveChange?.(nextActive);\n },\n [isControlledActive, onActiveChange],\n );\n\n const endEditing = React.useCallback(() => {\n activationSourceRef.current = undefined;\n setActive(false);\n onEditingEnd?.();\n }, [onEditingEnd, setActive]);\n\n const controlState = createDataCellControlState(props, { disabled });\n\n const applyControlAction = React.useCallback(\n (\n action: DataCellControlAction,\n event:\n | React.PointerEvent\n | React.MouseEvent\n | React.KeyboardEvent,\n markClickTail: boolean,\n ) => {\n if (action.kind === \"none\") return;\n if (action.shouldPreventDefault) event.preventDefault();\n event.stopPropagation();\n if (action.kind === \"command\") {\n action.commit();\n if (markClickTail) activationClickTail.arm();\n return;\n }\n storeDataCellActivationSource(\n activationSourceRef,\n setActivationSource,\n action.activationSource,\n );\n if (markClickTail) activationClickTail.arm();\n setActive(true);\n },\n [activationClickTail, setActive],\n );\n\n const activateFromPointer = React.useCallback(\n (event: React.PointerEvent) => {\n onPointerDown?.(event);\n if (event.defaultPrevented || !canSelfActivate || event.button !== 0) {\n return;\n }\n\n applyControlAction(\n getDataCellPointerControlAction({\n controlState,\n clientX: event.clientX,\n clientY: event.clientY,\n detail: event.detail,\n displayElement: displayRef.current,\n event: event.nativeEvent,\n }),\n event,\n true,\n );\n },\n [applyControlAction, canSelfActivate, controlState, onPointerDown],\n );\n\n const activateFromClick = React.useCallback(\n (event: React.MouseEvent) => {\n onClick?.(event);\n if (activationClickTail.consume()) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n if (event.defaultPrevented || !canSelfActivate) return;\n\n applyControlAction(\n getDataCellClickControlAction({\n controlState,\n clientX: event.clientX,\n clientY: event.clientY,\n detail: event.detail,\n displayElement: displayRef.current,\n event: event.nativeEvent,\n }),\n event,\n false,\n );\n },\n [\n activationClickTail,\n applyControlAction,\n canSelfActivate,\n controlState,\n onClick,\n ],\n );\n\n const activateFromKey = React.useCallback(\n (event: React.KeyboardEvent) => {\n onKeyDown?.(event);\n if (event.defaultPrevented || !canSelfActivate) return;\n\n if (hasDataCellKeyboardModifier(event)) return;\n\n applyControlAction(\n getDataCellKeyControlAction({\n controlState,\n key: event.key,\n }),\n event,\n false,\n );\n },\n [applyControlAction, canSelfActivate, controlState, onKeyDown],\n );\n\n if (isActive) {\n const editModel = createDataCellEditModel(props, {\n disabled,\n activationSource: activationSource ?? activationSourceRef.current,\n autoFocus: props.autoFocus ?? canSelfActivate,\n onEditingEnd: endEditing,\n });\n return ;\n }\n\n return (\n \n );\n}\n", "type": "registry:ui", "target": "@ui/data-cell.tsx" }, { "path": "registry/new-york-v4/ui/data-cell-activation.ts", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\nimport { useKeyedLayoutEffect } from \"@/hooks/use-keyed-layout-effect\";\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\nlet dataCellActivationTokenId = 0;\n\nexport type DataCellActivationToken = {\n id: string;\n ownsEvent: (event: Event | undefined) => boolean;\n release: () => void;\n};\n\nexport type DataCellShellActivationRelease = \"microtask\" | \"click-tail\";\n\nexport type DataCellActivationSource =\n | {\n kind: \"pointer\";\n token: DataCellActivationToken;\n clientX: number;\n clientY: number;\n detail: number;\n selectionOffset?: number;\n }\n | {\n kind: \"keyboard\";\n key: string;\n }\n | {\n kind: \"shell\";\n token: DataCellActivationToken;\n release: DataCellShellActivationRelease;\n };\n\nexport type DataCellDismissCause =\n | {\n kind: \"outside-pointer\";\n event: PointerEvent;\n }\n | {\n kind: \"trigger-press\";\n event?: Event;\n }\n | {\n kind: \"focus-out\";\n event?: Event;\n }\n | {\n kind: \"cancel-open\";\n event?: Event;\n }\n | {\n kind: \"escape\";\n event: KeyboardEvent;\n }\n | {\n kind: \"unknown\";\n event?: Event;\n };\n\nexport type DataCellOpeningContext = {\n source: DataCellActivationSource | undefined;\n isOpening: () => boolean;\n shouldCancelDismiss: (cause: DataCellDismissCause) => boolean;\n release: () => void;\n};\n\nexport function createDataCellPointerActivationSource({\n clientX,\n clientY,\n detail,\n event,\n}: {\n clientX: number;\n clientY: number;\n detail: number;\n event?: Event;\n}): Extract {\n return {\n kind: \"pointer\",\n token: createDataCellActivationToken(event, {\n ownUntilReleasedWhenEventMissing: true,\n ownOpeningTailUntilReleasedWhenEventMissing: event === undefined,\n }),\n clientX,\n clientY,\n detail,\n };\n}\n\nexport function createDataCellKeyboardActivationSource(\n key: string,\n): Extract {\n return {\n kind: \"keyboard\",\n key,\n };\n}\n\nexport function createDataCellShellActivationSource(\n event?: Event,\n): Extract {\n return {\n kind: \"shell\",\n token: createDataCellActivationToken(event, {\n ownUntilReleasedWhenEventMissing: true,\n }),\n release: event?.type === \"click\" ? \"microtask\" : \"click-tail\",\n };\n}\n\nexport function createDataCellActivationToken(\n openingEvent?: Event,\n {\n ownUntilReleasedWhenEventMissing = false,\n ownOpeningTailUntilReleasedWhenEventMissing = false,\n }: {\n ownUntilReleasedWhenEventMissing?: boolean;\n ownOpeningTailUntilReleasedWhenEventMissing?: boolean;\n } = {},\n): DataCellActivationToken {\n const id = `data-cell-activation-${++dataCellActivationTokenId}`;\n let isReleased = false;\n const openingPoint = openingEvent\n ? getDataCellEventPoint(openingEvent)\n : null;\n\n return {\n id,\n ownsEvent(event) {\n if (isReleased) return false;\n if (!event) return ownUntilReleasedWhenEventMissing;\n if (openingEvent && event === openingEvent) return true;\n if (!openingEvent && ownOpeningTailUntilReleasedWhenEventMissing) {\n return isDataCellOpeningTailEvent(event);\n }\n if (openingPoint && isDataCellOpeningEventTail(event, openingPoint)) {\n return true;\n }\n return false;\n },\n release() {\n isReleased = true;\n },\n };\n}\n\nexport function useDataCellOpeningContext(\n activationSource: DataCellActivationSource | undefined,\n {\n enabled,\n releaseAfterMicrotask = false,\n }: {\n enabled: boolean;\n releaseAfterMicrotask?: boolean;\n },\n): DataCellOpeningContext {\n const openingSourceRef = React.useRef(\n undefined,\n );\n const releaseOpeningRef = React.useRef<(() => void) | null>(null);\n\n const release = React.useCallback(() => {\n openingSourceRef.current = undefined;\n releaseOpeningRef.current?.();\n releaseOpeningRef.current = null;\n }, []);\n\n useKeyedLayoutEffect(\n joinEffectKey([activationSource, enabled, release, releaseAfterMicrotask]),\n () => {\n release();\n if (\n !enabled ||\n !activationSource ||\n activationSource.kind === \"keyboard\"\n ) {\n return;\n }\n\n openingSourceRef.current = activationSource;\n releaseOpeningRef.current = holdDataCellActivationThroughOpeningEvent(\n activationSource,\n {\n releaseAfterMicrotask:\n releaseAfterMicrotask ||\n shouldReleaseDataCellOpeningAfterMicrotask(activationSource),\n },\n );\n },\n );\n\n useKeyedMountEffect(joinEffectKey([release]), () => release);\n\n return React.useMemo(\n () => ({\n source: activationSource,\n isOpening: () => openingSourceRef.current !== undefined,\n shouldCancelDismiss: (cause) =>\n shouldCancelDataCellOpeningDismiss(openingSourceRef.current, cause),\n release,\n }),\n [activationSource, release],\n );\n}\n\nexport function useDataCellActivationClickTail() {\n const isArmedRef = React.useRef(false);\n\n return React.useMemo(\n () => ({\n arm() {\n isArmedRef.current = true;\n },\n consume() {\n if (!isArmedRef.current) return false;\n isArmedRef.current = false;\n return true;\n },\n }),\n [],\n );\n}\n\nfunction holdDataCellActivationThroughOpeningEvent(\n activation: DataCellActivationSource | undefined,\n {\n releaseAfterMicrotask = false,\n }: {\n releaseAfterMicrotask?: boolean;\n } = {},\n) {\n if (!activation || activation.kind === \"keyboard\") return () => {};\n\n const release = () => activation.token.release();\n const releaseAfterDocumentClick = () => queueMicrotask(release);\n const releaseBeforeNewPointer = (event: PointerEvent) => {\n if (!activation.token.ownsEvent(event)) release();\n };\n if (typeof document !== \"undefined\") {\n document.addEventListener(\"pointerdown\", releaseBeforeNewPointer);\n document.addEventListener(\"click\", releaseAfterDocumentClick, {\n once: true,\n });\n }\n if (releaseAfterMicrotask) queueMicrotask(release);\n\n return () => {\n activation.token.release();\n if (typeof document !== \"undefined\") {\n document.removeEventListener(\"pointerdown\", releaseBeforeNewPointer);\n document.removeEventListener(\"click\", releaseAfterDocumentClick);\n }\n };\n}\n\nfunction shouldCancelDataCellOpeningDismiss(\n activationSource: DataCellActivationSource | undefined,\n cause: DataCellDismissCause,\n) {\n if (!activationSource || activationSource.kind === \"keyboard\") return false;\n if (!isDataCellOpeningDismissCause(activationSource, cause)) return false;\n\n return (\n activationSource.token.ownsEvent(cause.event) ||\n (isDataCellEventlessOpeningDismissCause(cause) &&\n activationSource.token.ownsEvent(undefined))\n );\n}\n\nfunction isDataCellOpeningDismissCause(\n activationSource: Exclude,\n cause: DataCellDismissCause,\n) {\n if (cause.kind === \"escape\") return false;\n if (activationSource.kind === \"shell\") return true;\n return (\n cause.kind === \"outside-pointer\" ||\n cause.kind === \"trigger-press\" ||\n cause.kind === \"focus-out\" ||\n cause.kind === \"cancel-open\"\n );\n}\n\nfunction isDataCellEventlessOpeningDismissCause(cause: DataCellDismissCause) {\n return (\n cause.kind === \"trigger-press\" ||\n cause.kind === \"focus-out\" ||\n cause.kind === \"cancel-open\" ||\n cause.kind === \"unknown\"\n );\n}\n\nfunction shouldReleaseDataCellOpeningAfterMicrotask(\n activationSource: DataCellActivationSource,\n) {\n return (\n activationSource.kind === \"shell\" &&\n activationSource.release === \"microtask\"\n );\n}\n\nfunction getDataCellEventPoint(event: Event) {\n if (\n !(\"clientX\" in event) ||\n !(\"clientY\" in event) ||\n typeof event.clientX !== \"number\" ||\n typeof event.clientY !== \"number\"\n ) {\n return null;\n }\n return {\n clientX: event.clientX,\n clientY: event.clientY,\n };\n}\n\nfunction isDataCellOpeningEventTail(\n event: Event,\n openingPoint: { clientX: number; clientY: number },\n) {\n if (!isDataCellOpeningTailEvent(event)) return false;\n const eventPoint = getDataCellEventPoint(event);\n return (\n eventPoint !== null &&\n eventPoint.clientX === openingPoint.clientX &&\n eventPoint.clientY === openingPoint.clientY\n );\n}\n\nfunction isDataCellOpeningTailEvent(event: Event) {\n return (\n event.type === \"click\" ||\n event.type === \"pointerup\" ||\n event.type === \"mouseup\"\n );\n}\n", "type": "registry:ui", "target": "@ui/data-cell-activation.ts" }, { "path": "registry/new-york-v4/ui/data-cell-boolean-control.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n dataCellBooleanDisplayClass,\n dataCellCheckboxDisplayClass,\n} from \"@/components/ui/data-cell-classes\";\nimport {\n dataCellBooleanValueMeta,\n nextDataCellBooleanValue,\n} from \"@/components/ui/data-cell-boolean-value\";\nimport type { DataCellBooleanControlProps } from \"@/components/ui/data-cell-control-contract\";\n\nexport function DataCellBooleanIndicator({ checked }: { checked: boolean }) {\n return (\n \n {checked ? (\n \n ) : (\n \n )}\n \n );\n}\n\nexport function DataCellBooleanControl({\n kind,\n value,\n disabled = false,\n name,\n className,\n autoFocus,\n session,\n onFocus,\n onBlur,\n onKeyDown,\n onClick,\n onDoubleClick,\n ...props\n}: DataCellBooleanControlProps) {\n const checked = Boolean(value);\n const {\n id,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n ...rootProps\n } = props;\n\n return (\n \n {\n event.stopPropagation();\n if (disabled) return;\n const nextValue = nextDataCellBooleanValue(value);\n session.commit(nextValue, dataCellBooleanValueMeta(nextValue), {\n endEditing: false,\n markFinished: false,\n });\n onClick?.(event);\n }}\n onFocus={onFocus}\n onBlur={(event) => {\n session.end();\n onBlur?.(event);\n }}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (event.defaultPrevented || event.key !== \"Escape\") return;\n session.end();\n event.currentTarget.blur();\n event.preventDefault();\n }}\n onDoubleClick={onDoubleClick}\n >\n \n \n \n );\n}\n", "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": "export const dataCellDisplayClass =\n \"relative inline-flex w-full rounded-lg bg-transparent text-base text-foreground ring-ring/24 transition-shadow sm:text-sm\";\n\nexport const dataCellDisplayValueClass =\n \"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\";\n\nexport const dataCellPickerTriggerClass =\n \"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\";\n\nexport const dataCellBooleanDisplayClass =\n \"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\";\n\nexport const dataCellCheckboxDisplayClass =\n \"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\";\n", "type": "registry:ui", "target": "@ui/data-cell-classes.ts" }, { "path": "registry/new-york-v4/ui/data-cell-control.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n dataCellBooleanControlProps,\n dataCellInputControlProps,\n dataCellPickerControlProps,\n dataCellSelectControlProps,\n} from \"@/components/ui/data-cell-control-props\";\nimport { dataCellControlByKind } from \"@/components/ui/data-cell-control-registry\";\nimport type {\n DataCellEditModel,\n DataCellEditModelByKind,\n} from \"@/components/ui/data-cell-edit-model\";\nimport {\n useDataCellPrimitiveSession,\n type DataCellPrimitiveSession,\n} from \"@/components/ui/data-cell-session\";\nimport type {\n DataCellCommitValue,\n DataCellValueMeta,\n} from \"@/components/ui/data-cell-types\";\n\nexport function DataCellControl({ model }: { model: DataCellEditModel }) {\n const session = useDataCellEditModelSession(model);\n\n if (model.kind === \"text\") {\n const Control = dataCellControlByKind.text;\n return ;\n }\n if (model.kind === \"number\") {\n const Control = dataCellControlByKind.number;\n return ;\n }\n if (model.kind === \"integer\") {\n const Control = dataCellControlByKind.integer;\n return ;\n }\n if (model.kind === \"boolean\") {\n const Control = dataCellControlByKind.boolean;\n return (\n \n );\n }\n if (model.kind === \"select\") {\n const Control = dataCellControlByKind.select;\n return ;\n }\n\n return renderDataCellPickerControl(model, session);\n}\n\nfunction useDataCellEditModelSession(model: DataCellEditModel) {\n const onCommit = React.useCallback(\n (value: DataCellCommitValue, meta: DataCellValueMeta) => {\n model.onCommit?.(value, meta);\n },\n [model.onCommit],\n );\n\n return useDataCellPrimitiveSession({\n onCommit,\n onEditingEnd: model.onEditingEnd,\n });\n}\n\nfunction renderDataCellPickerControl(\n model: DataCellEditModelByKind[\"date\" | \"time\" | \"date-time\"],\n session: DataCellPrimitiveSession,\n) {\n const Control = dataCellControlByKind[model.kind];\n return ;\n}\n", "type": "registry:ui", "target": "@ui/data-cell-control.tsx" }, { "path": "registry/new-york-v4/ui/data-cell-control-actions.ts", "content": "import {\n createDataCellKeyboardActivationSource,\n createDataCellPointerActivationSource,\n} from \"@/components/ui/data-cell-activation\";\nimport { commitDataCellBooleanToggle } from \"@/components/ui/data-cell-boolean-value\";\nimport {\n commandDataCellControlAction,\n editDataCellControlAction,\n noneDataCellControlAction,\n type DataCellControlAction,\n type DataCellControlKeyActionArgs,\n type DataCellControlPointerActionArgs,\n type DataCellControlState,\n type DataCellControlStateByKind,\n} from \"@/components/ui/data-cell-control-contract\";\nimport { getDataCellTextPointerActivationSource } from \"@/components/ui/data-cell-text-activation\";\nimport type { DataCellKind } from \"@/components/ui/data-cell-types\";\n\nconst dataCellOpenKeys = new Set([\"Enter\", \"F2\", \" \"]);\nconst dataCellNumberKeyPattern = /^[0-9.+-]$/;\n\ntype DataCellNonBooleanKind = Exclude;\n\ntype DataCellBooleanCommitHandler = Extract<\n DataCellControlState,\n { kind: \"boolean\" }\n>[\"commitBoolean\"];\n\ntype DataCellNoBooleanCommitInput = Record;\n\ntype DataCellControlStateInputByKind = {\n [Kind in DataCellKind]: Omit<\n DataCellControlStateByKind[Kind],\n \"commitBoolean\" | \"disabled\"\n > &\n (Kind extends \"boolean\"\n ? { onCommit?: DataCellBooleanCommitHandler }\n : DataCellNoBooleanCommitInput);\n};\n\ntype DataCellControlStateInput = DataCellControlStateInputByKind[DataCellKind];\ntype DataCellNonBooleanControlStateInput =\n DataCellControlStateInputByKind[DataCellNonBooleanKind];\ntype DataCellNonBooleanControlState =\n DataCellControlStateByKind[DataCellNonBooleanKind];\n\nexport function createDataCellControlState(\n props: DataCellControlStateInput,\n { disabled }: { disabled: boolean },\n): DataCellControlState {\n if (props.kind === \"boolean\") {\n return {\n kind: props.kind,\n value: props.value,\n disabled,\n commitBoolean: props.onCommit,\n };\n }\n\n return createDataCellNonBooleanControlState(props, { disabled });\n}\n\nfunction createDataCellNonBooleanControlState(\n props: DataCellNonBooleanControlStateInput,\n { disabled }: { disabled: boolean },\n): DataCellNonBooleanControlState {\n return { ...props, disabled };\n}\n\nexport function getDataCellPointerControlAction(\n args: DataCellControlPointerActionArgs,\n): DataCellControlAction {\n const { controlState } = args;\n if (controlState.kind === \"text\") {\n return editDataCellControlAction(\n getDataCellTextPointerActivationSource({\n clientX: args.clientX,\n clientY: args.clientY,\n detail: args.detail,\n displayElement: args.displayElement,\n event: args.event,\n value: controlState.value,\n }),\n { shouldPreventDefault: true },\n );\n }\n if (controlState.kind === \"boolean\") {\n return commandDataCellControlAction(\n () =>\n commitDataCellBooleanToggle(\n controlState.value,\n controlState.commitBoolean,\n ),\n { shouldPreventDefault: true },\n );\n }\n if (controlState.kind === \"select\") {\n return noneDataCellControlAction();\n }\n return createDefaultPointerEditAction(args);\n}\n\nexport function getDataCellClickControlAction(\n args: DataCellControlPointerActionArgs,\n): DataCellControlAction {\n const { controlState } = args;\n if (controlState.kind === \"text\") {\n return editDataCellControlAction(\n getDataCellTextPointerActivationSource({\n clientX: args.clientX,\n clientY: args.clientY,\n detail: args.detail,\n displayElement: args.displayElement,\n event: args.event,\n value: controlState.value,\n }),\n { shouldPreventDefault: false },\n );\n }\n if (controlState.kind === \"boolean\") {\n return commandDataCellControlAction(\n () =>\n commitDataCellBooleanToggle(\n controlState.value,\n controlState.commitBoolean,\n ),\n { shouldPreventDefault: false },\n );\n }\n return createDefaultClickEditAction(args);\n}\n\nexport function getDataCellKeyControlAction(\n args: DataCellControlKeyActionArgs,\n): DataCellControlAction {\n if (!canActivateDataCellControlFromKey(args.controlState.kind, args.key)) {\n return noneDataCellControlAction();\n }\n\n if (args.controlState.kind === \"boolean\" && args.key === \" \") {\n const booleanState = args.controlState;\n return commandDataCellControlAction(\n () =>\n commitDataCellBooleanToggle(\n booleanState.value,\n booleanState.commitBoolean,\n ),\n { shouldPreventDefault: true },\n );\n }\n\n return editDataCellControlAction(\n createDataCellKeyboardActivationSource(args.key),\n { shouldPreventDefault: true },\n );\n}\n\nfunction canActivateDataCellControlFromKey(kind: DataCellKind, key: string) {\n if (kind === \"text\") {\n return key === \"Enter\" || key === \"F2\" || key.length === 1;\n }\n if (kind === \"number\" || kind === \"integer\") {\n return canActivateDataCellNumberFromKey(kind, key);\n }\n if (kind === \"boolean\") return key === \"Enter\" || key === \"F2\" || key === \" \";\n return dataCellOpenKeys.has(key);\n}\n\nfunction canActivateDataCellNumberFromKey(\n kind: \"number\" | \"integer\",\n key: string,\n) {\n if (key === \"Enter\" || key === \"F2\") return true;\n if (key.length !== 1) return false;\n if (kind === \"integer\") return /^[+-]$|^\\d$/.test(key);\n return dataCellNumberKeyPattern.test(key);\n}\n\nfunction createDefaultPointerEditAction({\n clientX,\n clientY,\n detail,\n event,\n}: DataCellControlPointerActionArgs): DataCellControlAction {\n return editDataCellControlAction(\n createDataCellPointerActivationSource({ clientX, clientY, detail, event }),\n { shouldPreventDefault: true },\n );\n}\n\nfunction createDefaultClickEditAction({\n clientX,\n clientY,\n detail,\n event,\n}: DataCellControlPointerActionArgs): DataCellControlAction {\n return editDataCellControlAction(\n createDataCellPointerActivationSource({ clientX, clientY, detail, event }),\n { shouldPreventDefault: false },\n );\n}\n", "type": "registry:ui", "target": "@ui/data-cell-control-actions.ts" }, { "path": "registry/new-york-v4/ui/data-cell-control-contract.ts", "content": "import type * as React from \"react\";\n\nimport type { DataCellActivationSource } from \"@/components/ui/data-cell-activation\";\nimport type { DataCellEditorProps } from \"@/components/ui/data-cell-edit-model\";\nimport type { DataCellPrimitiveSession } from \"@/components/ui/data-cell-session\";\nimport type {\n DataCellDateTimeZone,\n DataCellKind,\n DataCellSelectOption,\n DataCellValueForKind,\n DataCellValueMeta,\n} from \"@/components/ui/data-cell-types\";\n\nexport type DataCellDraftControl = {\n value?: string;\n onChange?: (value: string, meta: DataCellValueMeta) => void;\n};\n\nexport type DataCellOpenControl = {\n value?: boolean;\n onChange?: (open: boolean) => void;\n};\n\ntype DataCellInputControlBaseProps<\n Kind extends DataCellKind,\n Value,\n> = DataCellEditorProps & {\n kind: Kind;\n value?: Value;\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n className?: string;\n autoFocus?: boolean;\n activationSource?: DataCellActivationSource;\n session: DataCellPrimitiveSession;\n draft?: DataCellDraftControl;\n};\n\nexport type DataCellTextInputControlProps = DataCellInputControlBaseProps<\n \"text\",\n string | null\n>;\n\nexport type DataCellNumberInputControlProps = DataCellInputControlBaseProps<\n \"number\" | \"integer\",\n number | string | null\n>;\n\nexport type DataCellInputControlProps =\n | DataCellTextInputControlProps\n | DataCellNumberInputControlProps;\n\nexport type DataCellBooleanControlProps = DataCellEditorProps & {\n kind: \"boolean\";\n value?: boolean | null;\n disabled?: boolean;\n name?: string;\n className?: string;\n autoFocus?: boolean;\n id?: string;\n \"aria-label\"?: string;\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean | \"false\" | \"true\" | \"grammar\" | \"spelling\";\n session: DataCellPrimitiveSession;\n};\n\nexport type DataCellSelectFormatValue = (\n value: string | null | undefined,\n meta: { kind: \"select\" },\n) => React.ReactNode;\n\nexport type DataCellSelectControlProps = DataCellEditorProps & {\n kind: \"select\";\n value?: string | null;\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n className?: string;\n formatValue?: DataCellSelectFormatValue;\n autoFocus?: boolean;\n activationSource?: DataCellActivationSource;\n options: DataCellSelectOption[];\n session: DataCellPrimitiveSession;\n openState?: DataCellOpenControl;\n};\n\nexport type DataCellPickerControlProps = DataCellEditorProps & {\n kind: \"date\" | \"time\" | \"date-time\";\n value?: string | null;\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n dateTimeZone?: DataCellDateTimeZone;\n showPickerIcon?: boolean;\n className?: string;\n formatValue?: (\n value: string | null | undefined,\n meta: { kind: \"date\" | \"time\" | \"date-time\" },\n ) => React.ReactNode;\n autoFocus?: boolean;\n activationSource?: DataCellActivationSource;\n session: DataCellPrimitiveSession;\n draft?: DataCellDraftControl;\n openState?: DataCellOpenControl;\n};\n\nexport type DataCellControlPropsByKind = {\n text: DataCellTextInputControlProps;\n number: DataCellNumberInputControlProps;\n integer: DataCellNumberInputControlProps;\n boolean: DataCellBooleanControlProps;\n select: DataCellSelectControlProps;\n date: DataCellPickerControlProps;\n time: DataCellPickerControlProps;\n \"date-time\": DataCellPickerControlProps;\n};\n\nexport type DataCellControlStaticPropsByKind = {\n [Kind in DataCellKind]: Omit;\n};\n\ntype DataCellBooleanCommitHandler = (\n value: boolean,\n meta: DataCellValueMeta,\n) => void;\n\ntype DataCellNoExtraState = Record;\n\ntype DataCellControlStateForKind = {\n kind: Kind;\n value?: DataCellValueForKind;\n disabled: boolean;\n} & (Kind extends \"boolean\"\n ? { commitBoolean?: DataCellBooleanCommitHandler }\n : DataCellNoExtraState);\n\nexport type DataCellControlStateByKind = {\n [Kind in DataCellKind]: DataCellControlStateForKind;\n};\n\nexport type DataCellControlState = DataCellControlStateByKind[DataCellKind];\n\nexport type DataCellControlPointerActionArgs<\n Kind extends DataCellKind = DataCellKind,\n> = {\n controlState: Extract;\n clientX: number;\n clientY: number;\n detail: number;\n displayElement: HTMLElement | null;\n event?: Event;\n};\n\nexport type DataCellControlKeyActionArgs<\n Kind extends DataCellKind = DataCellKind,\n> = {\n controlState: Extract;\n key: string;\n};\n\nexport type DataCellControlAction =\n | {\n kind: \"none\";\n }\n | {\n kind: \"edit\";\n activationSource: DataCellActivationSource;\n shouldPreventDefault: boolean;\n }\n | {\n kind: \"command\";\n commit: () => void;\n shouldPreventDefault: boolean;\n };\n\nexport function noneDataCellControlAction(): DataCellControlAction {\n return { kind: \"none\" };\n}\n\nexport function editDataCellControlAction(\n activationSource: DataCellActivationSource,\n { shouldPreventDefault }: { shouldPreventDefault: boolean },\n): DataCellControlAction {\n return {\n kind: \"edit\",\n activationSource,\n shouldPreventDefault,\n };\n}\n\nexport function commandDataCellControlAction(\n commit: () => void,\n { shouldPreventDefault }: { shouldPreventDefault: boolean },\n): DataCellControlAction {\n return {\n kind: \"command\",\n commit,\n shouldPreventDefault,\n };\n}\n", "type": "registry:ui", "target": "@ui/data-cell-control-contract.ts" }, { "path": "registry/new-york-v4/ui/data-cell-control-props.ts", "content": "import type {\n DataCellControlStaticPropsByKind,\n DataCellInputControlProps,\n} from \"@/components/ui/data-cell-control-contract\";\nimport type { DataCellEditModelByKind } from \"@/components/ui/data-cell-edit-model\";\n\ntype DataCellInputKind = \"text\" | \"number\" | \"integer\";\ntype DataCellInputControlStaticProps = Omit<\n DataCellInputControlProps,\n \"session\"\n>;\n\nexport function dataCellInputControlProps(\n model: DataCellEditModelByKind[\"text\"],\n): DataCellControlStaticPropsByKind[\"text\"];\nexport function dataCellInputControlProps(\n model: DataCellEditModelByKind[\"number\"],\n): DataCellControlStaticPropsByKind[\"number\"];\nexport function dataCellInputControlProps(\n model: DataCellEditModelByKind[\"integer\"],\n): DataCellControlStaticPropsByKind[\"integer\"];\nexport function dataCellInputControlProps(\n model: DataCellEditModelByKind[DataCellInputKind],\n): DataCellInputControlStaticProps {\n return {\n ...model.editorProps,\n kind: model.kind,\n value: model.value,\n disabled: model.disabled,\n name: model.name,\n placeholder: model.placeholder,\n className: model.className,\n autoFocus: model.autoFocus,\n activationSource: model.activationSource,\n draft: model.draft,\n };\n}\n\nexport function dataCellBooleanControlProps(\n model: DataCellEditModelByKind[\"boolean\"],\n): DataCellControlStaticPropsByKind[\"boolean\"] {\n return {\n ...model.editorProps,\n kind: model.kind,\n value: model.value,\n disabled: model.disabled,\n name: model.name,\n className: model.className,\n autoFocus: model.autoFocus,\n };\n}\n\nexport function dataCellSelectControlProps(\n model: DataCellEditModelByKind[\"select\"],\n): DataCellControlStaticPropsByKind[\"select\"] {\n return {\n ...model.editorProps,\n kind: model.kind,\n value: model.value,\n disabled: model.disabled,\n name: model.name,\n placeholder: model.placeholder,\n className: model.className,\n formatValue: model.formatValue,\n autoFocus: model.autoFocus,\n activationSource: model.activationSource,\n options: model.options,\n openState: model.openState,\n };\n}\n\nexport function dataCellPickerControlProps(\n model: DataCellEditModelByKind[\"date\" | \"time\" | \"date-time\"],\n): DataCellControlStaticPropsByKind[\"date\" | \"time\" | \"date-time\"] {\n return {\n ...model.editorProps,\n kind: model.kind,\n value: model.value,\n disabled: model.disabled,\n name: model.name,\n placeholder: model.placeholder,\n dateTimeZone: model.dateTimeZone,\n showPickerIcon: model.showPickerIcon,\n className: model.className,\n formatValue: model.formatValue,\n autoFocus: model.autoFocus,\n activationSource: model.activationSource,\n draft: model.draft,\n openState: model.openState,\n };\n}\n", "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": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { DataCellBooleanIndicator } from \"@/components/ui/data-cell-boolean-control\";\nimport {\n dataCellBooleanDisplayClass,\n dataCellCheckboxDisplayClass,\n dataCellDisplayClass,\n dataCellDisplayValueClass,\n dataCellPickerTriggerClass,\n} from \"@/components/ui/data-cell-classes\";\nimport { formatDataCellDisplayValue } from \"@/components/ui/data-cell-format\";\nimport { DataCellPickerIcon } from \"@/components/ui/data-cell-picker-icon\";\nimport type {\n DataCellKind,\n DataCellValueForKind,\n} from \"@/components/ui/data-cell-types\";\n\ntype DataCellDisplayNativeProps = Omit<\n React.HTMLAttributes,\n \"children\" | \"defaultValue\" | \"onChange\"\n>;\n\ntype DataCellDisplayFormatValue = (\n value: DataCellValueForKind | undefined,\n meta: { kind: Kind },\n) => React.ReactNode;\n\ntype DataCellDisplayBaseProps =\n DataCellDisplayNativeProps & {\n kind: Kind;\n value?: DataCellValueForKind;\n editable?: boolean;\n disabled?: boolean;\n className?: string;\n };\n\ntype DataCellDisplayPlaceholderProps = {\n placeholder?: string;\n};\n\ntype DataCellDisplayPickerProps = {\n showPickerIcon?: boolean;\n};\n\ntype DataCellDisplayFormatProps = {\n formatValue?: DataCellDisplayFormatValue;\n};\n\ntype DataCellPickerKind = \"date\" | \"time\" | \"date-time\";\ntype DataCellScalarKind = \"text\" | \"number\" | \"integer\" | \"select\";\ntype DataCellNoExtraDisplayProps = Record;\n\ntype DataCellDisplayPropsForKind =\n DataCellDisplayBaseProps &\n (Kind extends \"boolean\"\n ? DataCellNoExtraDisplayProps\n : DataCellDisplayPlaceholderProps & DataCellDisplayFormatProps) &\n (Kind extends DataCellPickerKind\n ? DataCellDisplayPickerProps\n : DataCellNoExtraDisplayProps);\n\nexport type DataCellDisplayPropsByKind = {\n [Kind in DataCellKind]: DataCellDisplayPropsForKind;\n};\n\ntype DataCellScalarDisplayProps =\n DataCellDisplayPropsByKind[DataCellScalarKind];\n\ntype DataCellPickerDisplayProps =\n DataCellDisplayPropsByKind[DataCellPickerKind];\n\nexport type DataCellDisplayProps = DataCellDisplayPropsByKind[DataCellKind];\n\nexport const DataCellDisplay = React.forwardRef<\n HTMLDivElement,\n DataCellDisplayProps\n>(function DataCellDisplay(displayProps, ref) {\n if (displayProps.kind === \"boolean\") {\n const {\n kind,\n value,\n editable = false,\n disabled = false,\n className,\n ...props\n } = displayProps;\n\n return (\n \n \n \n \n \n );\n }\n\n if (\n displayProps.kind === \"date\" ||\n displayProps.kind === \"time\" ||\n displayProps.kind === \"date-time\"\n ) {\n return ;\n }\n\n if (!isDataCellScalarDisplayProps(displayProps)) {\n return null;\n }\n\n const {\n kind,\n value,\n editable = false,\n disabled = false,\n placeholder,\n className,\n formatValue: _formatValue,\n ...props\n } = displayProps;\n const content = dataCellScalarDisplayContent(displayProps);\n const isEmpty = content === \"\";\n\n return (\n \n \n \n {isEmpty ? (placeholder ?? \"—\") : content}\n \n \n \n );\n});\nDataCellDisplay.displayName = \"DataCellDisplay\";\n\nfunction dataCellScalarDisplayContent(props: DataCellScalarDisplayProps) {\n if (props.kind === \"text\") {\n return (\n props.formatValue?.(props.value, { kind: props.kind }) ??\n formatDataCellDisplayValue(props.kind, props.value)\n );\n }\n\n if (props.kind === \"select\") {\n return (\n props.formatValue?.(props.value, { kind: props.kind }) ??\n formatDataCellDisplayValue(props.kind, props.value)\n );\n }\n\n if (props.kind === \"number\") {\n return (\n props.formatValue?.(props.value, { kind: props.kind }) ??\n formatDataCellDisplayValue(props.kind, props.value)\n );\n }\n\n return (\n props.formatValue?.(props.value, { kind: props.kind }) ??\n formatDataCellDisplayValue(props.kind, props.value)\n );\n}\n\nfunction isDataCellScalarDisplayProps(\n props: DataCellDisplayProps,\n): props is DataCellScalarDisplayProps {\n return (\n props.kind === \"text\" ||\n props.kind === \"number\" ||\n props.kind === \"integer\" ||\n props.kind === \"select\"\n );\n}\n\nconst DataCellPickerDisplay = React.forwardRef<\n HTMLDivElement,\n DataCellPickerDisplayProps\n>(function DataCellPickerDisplay(pickerProps, ref) {\n const content = dataCellPickerDisplayContent(pickerProps);\n const {\n kind,\n value,\n editable,\n disabled,\n placeholder,\n formatValue,\n showPickerIcon = true,\n className,\n ...props\n } = pickerProps;\n const isEmpty = content === \"\";\n\n return (\n \n \n {isEmpty ? (placeholder ?? \"—\") : content}\n \n {showPickerIcon ? : null}\n \n );\n});\n\nfunction dataCellPickerDisplayContent(props: DataCellPickerDisplayProps) {\n if (props.kind === \"date\") {\n return (\n props.formatValue?.(props.value, { kind: props.kind }) ??\n formatDataCellDisplayValue(props.kind, props.value)\n );\n }\n if (props.kind === \"time\") {\n return (\n props.formatValue?.(props.value, { kind: props.kind }) ??\n formatDataCellDisplayValue(props.kind, props.value)\n );\n }\n return (\n props.formatValue?.(props.value, { kind: props.kind }) ??\n formatDataCellDisplayValue(props.kind, props.value)\n );\n}\n", "type": "registry:ui", "target": "@ui/data-cell-display.tsx" }, { "path": "registry/new-york-v4/ui/data-cell-display-model.ts", "content": "import type * as React from \"react\";\n\nimport type { DataCellDisplayProps } from \"@/components/ui/data-cell-display\";\nimport type { DataCellProps } from \"@/components/ui/data-cell-types\";\n\nexport type DataCellDisplayShellProps = Pick<\n DataCellDisplayProps,\n | \"disabled\"\n | \"editable\"\n | \"onClick\"\n | \"onKeyDown\"\n | \"onPointerDown\"\n | \"tabIndex\"\n>;\n\nexport function createDataCellDisplayProps(\n props: DataCellProps,\n shellProps: DataCellDisplayShellProps,\n): DataCellDisplayProps {\n switch (props.kind) {\n case \"text\": {\n const {\n kind,\n value,\n placeholder,\n className,\n formatValue,\n editable,\n active,\n disabled,\n name,\n draftValue,\n autoFocus,\n onDraftValueChange,\n onCommit,\n onEditingEnd,\n onActiveChange,\n onClick,\n onKeyDown,\n onPointerDown,\n ...surfaceDomProps\n } = props;\n return {\n ...surfaceDomProps,\n ...shellProps,\n kind,\n value,\n placeholder,\n className,\n formatValue,\n };\n }\n case \"number\": {\n const {\n kind,\n value,\n placeholder,\n className,\n formatValue,\n editable,\n active,\n disabled,\n name,\n draftValue,\n autoFocus,\n onDraftValueChange,\n onCommit,\n onEditingEnd,\n onActiveChange,\n onClick,\n onKeyDown,\n onPointerDown,\n ...surfaceDomProps\n } = props;\n return {\n ...surfaceDomProps,\n ...shellProps,\n kind,\n value,\n placeholder,\n className,\n formatValue,\n };\n }\n case \"integer\": {\n const {\n kind,\n value,\n placeholder,\n className,\n formatValue,\n editable,\n active,\n disabled,\n name,\n draftValue,\n autoFocus,\n onDraftValueChange,\n onCommit,\n onEditingEnd,\n onActiveChange,\n onClick,\n onKeyDown,\n onPointerDown,\n ...surfaceDomProps\n } = props;\n return {\n ...surfaceDomProps,\n ...shellProps,\n kind,\n value,\n placeholder,\n className,\n formatValue,\n };\n }\n case \"boolean\": {\n const {\n kind,\n value,\n className,\n editable,\n active,\n disabled,\n name,\n autoFocus,\n onCommit,\n onEditingEnd,\n onActiveChange,\n onClick,\n onKeyDown,\n onPointerDown,\n ...surfaceDomProps\n } = props;\n return {\n ...surfaceDomProps,\n ...shellProps,\n kind,\n value,\n className,\n };\n }\n case \"select\": {\n const {\n kind,\n value,\n placeholder,\n className,\n formatValue,\n editable,\n active,\n disabled,\n name,\n selectOptions,\n open,\n autoFocus,\n onCommit,\n onEditingEnd,\n onActiveChange,\n onOpenChange,\n onClick,\n onKeyDown,\n onPointerDown,\n ...surfaceDomProps\n } = props;\n return {\n ...surfaceDomProps,\n ...shellProps,\n kind,\n value,\n placeholder,\n className,\n formatValue,\n };\n }\n case \"date\": {\n const {\n kind,\n value,\n placeholder,\n className,\n showPickerIcon,\n formatValue,\n editable,\n active,\n disabled,\n name,\n dateTimeZone,\n open,\n draftValue,\n autoFocus,\n onDraftValueChange,\n onCommit,\n onEditingEnd,\n onActiveChange,\n onOpenChange,\n onClick,\n onKeyDown,\n onPointerDown,\n ...surfaceDomProps\n } = props;\n return {\n ...surfaceDomProps,\n ...shellProps,\n kind,\n value,\n placeholder,\n className,\n formatValue,\n showPickerIcon: showPickerIcon ?? true,\n };\n }\n case \"time\": {\n const {\n kind,\n value,\n placeholder,\n className,\n showPickerIcon,\n formatValue,\n editable,\n active,\n disabled,\n name,\n dateTimeZone,\n open,\n draftValue,\n autoFocus,\n onDraftValueChange,\n onCommit,\n onEditingEnd,\n onActiveChange,\n onOpenChange,\n onClick,\n onKeyDown,\n onPointerDown,\n ...surfaceDomProps\n } = props;\n return {\n ...surfaceDomProps,\n ...shellProps,\n kind,\n value,\n placeholder,\n className,\n formatValue,\n showPickerIcon: showPickerIcon ?? true,\n };\n }\n case \"date-time\": {\n const {\n kind,\n value,\n placeholder,\n className,\n showPickerIcon,\n formatValue,\n editable,\n active,\n disabled,\n name,\n dateTimeZone,\n open,\n draftValue,\n autoFocus,\n onDraftValueChange,\n onCommit,\n onEditingEnd,\n onActiveChange,\n onOpenChange,\n onClick,\n onKeyDown,\n onPointerDown,\n ...surfaceDomProps\n } = props;\n return {\n ...surfaceDomProps,\n ...shellProps,\n kind,\n value,\n placeholder,\n className,\n formatValue,\n showPickerIcon: showPickerIcon ?? true,\n };\n }\n }\n}\n", "type": "registry:ui", "target": "@ui/data-cell-display-model.ts" }, { "path": "registry/new-york-v4/ui/data-cell-edit-model.ts", "content": "import type * as React from \"react\";\n\nimport type { DataCellActivationSource } from \"@/components/ui/data-cell-activation\";\nimport type {\n DataCellCommitHandler,\n DataCellCommitValue,\n DataCellCommitValueForKind,\n DataCellDateTimeZone,\n DataCellKind,\n DataCellProps,\n DataCellPropsForKind,\n DataCellSelectOption,\n DataCellValueForKind,\n DataCellValueMeta,\n} from \"@/components/ui/data-cell-types\";\n\ntype DataCellPickerKind = \"date\" | \"time\" | \"date-time\";\ntype DataCellDraftKind = \"text\" | \"number\" | \"integer\" | DataCellPickerKind;\ntype DataCellFormatKind = Exclude;\n\ntype DataCellEditShellState = {\n disabled: boolean;\n autoFocus?: boolean;\n activationSource?: DataCellActivationSource;\n onEditingEnd?: () => void;\n};\n\ntype DataCellResolvedShellState = Required<\n Pick\n> &\n Omit;\n\ntype DataCellDataAttributeValue = string | number | boolean | undefined;\ntype DataCellDataAttributes = {\n [Attribute in `data-${string}`]?: DataCellDataAttributeValue;\n};\ntype DataCellAriaAttributeName = Extract<\n keyof React.AriaAttributes,\n `aria-${string}`\n>;\ntype DataCellDataAttributeName = keyof DataCellDataAttributes &\n `data-${string}`;\n\ntype DataCellEditorEventProps = Pick<\n React.HTMLAttributes,\n \"onBlur\" | \"onClick\" | \"onDoubleClick\" | \"onFocus\" | \"onKeyDown\" | \"onMouseUp\"\n>;\n\nexport type DataCellEditorProps = React.AriaAttributes &\n DataCellDataAttributes &\n Pick<\n React.HTMLAttributes,\n \"id\" | \"role\" | \"tabIndex\" | \"title\"\n > &\n DataCellEditorEventProps;\n\ntype DataCellDraftHandler = NonNullable<\n DataCellPropsForKind[\"onDraftValueChange\"]\n>;\n\ntype DataCellTypedCommitHandler = (\n value: Value,\n meta: DataCellValueMeta,\n) => void;\n\ntype DataCellCommitGuard = (\n value: DataCellCommitValue,\n) => value is DataCellCommitValueForKind;\n\ntype DataCellTypedPropsForKind =\n DataCellPropsForKind & {\n kind: Kind;\n onCommit?:\n | DataCellTypedCommitHandler>\n | undefined;\n };\n\ntype DataCellDraftEditState = {\n value?: string;\n onChange?: DataCellDraftHandler;\n};\n\ntype DataCellOpenEditState = {\n value?: boolean;\n onChange?: (open: boolean) => void;\n};\n\ntype DataCellFormatValue = NonNullable<\n DataCellPropsForKind[\"formatValue\"]\n>;\n\ntype DataCellPickerFormatValue = (\n value: string | null | undefined,\n meta: { kind: DataCellPickerKind },\n) => React.ReactNode;\n\nexport type DataCellEditModelByKind = {\n text: DataCellTextEditModel;\n number: DataCellNumberEditModel;\n integer: DataCellIntegerEditModel;\n boolean: DataCellBooleanEditModel;\n select: DataCellSelectEditModel;\n date: DataCellDateEditModel;\n time: DataCellTimeEditModel;\n \"date-time\": DataCellDateTimeEditModel;\n};\n\nexport type DataCellEditModel =\n DataCellEditModelByKind[keyof DataCellEditModelByKind];\n\ntype DataCellEditModelBase = {\n kind: Kind;\n value?: DataCellValueForKind;\n disabled: boolean;\n name?: string;\n className?: string;\n autoFocus?: boolean;\n activationSource?: DataCellActivationSource;\n onEditingEnd?: () => void;\n onCommit?: DataCellCommitHandler;\n editorProps: DataCellEditorProps;\n};\n\nexport type DataCellTextEditModel = DataCellEditModelBase<\"text\"> & {\n placeholder?: string;\n draft?: DataCellDraftEditState<\"text\">;\n};\n\ntype DataCellNumericEditModel =\n DataCellEditModelBase & {\n placeholder?: string;\n draft?: DataCellDraftEditState;\n };\n\nexport type DataCellNumberEditModel = DataCellNumericEditModel<\"number\">;\n\nexport type DataCellIntegerEditModel = DataCellNumericEditModel<\"integer\">;\n\nexport type DataCellBooleanEditModel = DataCellEditModelBase<\"boolean\">;\n\nexport type DataCellSelectEditModel = DataCellEditModelBase<\"select\"> & {\n placeholder?: string;\n formatValue?: DataCellFormatValue<\"select\">;\n openState?: DataCellOpenEditState;\n options: DataCellSelectOption[];\n};\n\ntype DataCellPickerEditModelForKind =\n DataCellEditModelBase & {\n placeholder?: string;\n dateTimeZone?: DataCellDateTimeZone;\n showPickerIcon?: boolean;\n formatValue?: DataCellPickerFormatValue;\n draft?: DataCellDraftEditState;\n openState?: DataCellOpenEditState;\n };\n\nexport type DataCellDateEditModel = DataCellPickerEditModelForKind<\"date\">;\n\nexport type DataCellTimeEditModel = DataCellPickerEditModelForKind<\"time\">;\n\nexport type DataCellDateTimeEditModel =\n DataCellPickerEditModelForKind<\"date-time\">;\n\nexport type DataCellPickerEditModel =\n | DataCellDateEditModel\n | DataCellTimeEditModel\n | DataCellDateTimeEditModel;\n\nexport function createDataCellEditModel(\n props: DataCellProps,\n shellState: DataCellEditShellState,\n): DataCellEditModel {\n if (props.kind === \"text\")\n return createDataCellTextEditModel(props, shellState);\n if (props.kind === \"number\") {\n return createDataCellNumberEditModel(props, shellState);\n }\n if (props.kind === \"integer\") {\n return createDataCellIntegerEditModel(props, shellState);\n }\n if (props.kind === \"boolean\") {\n return createDataCellBooleanEditModel(props, shellState);\n }\n if (props.kind === \"select\") {\n return createDataCellSelectEditModel(props, shellState);\n }\n if (props.kind === \"date\") {\n return createDataCellDateEditModel(props, shellState);\n }\n if (props.kind === \"time\") {\n return createDataCellTimeEditModel(props, shellState);\n }\n if (props.kind === \"date-time\") {\n return createDataCellDateTimeEditModel(props, shellState);\n }\n return unsupportedDataCellProps(props);\n}\n\nfunction unsupportedDataCellProps(_props: never): never {\n throw new Error(\"Unsupported DataCell kind\");\n}\n\nfunction dataCellCommitHandler(\n onCommit: DataCellTypedCommitHandler | undefined,\n isValue: (value: DataCellCommitValue) => value is Value,\n): DataCellCommitHandler | undefined {\n if (!onCommit) return undefined;\n return (value, meta) => {\n if (!isValue(value)) {\n throw new Error(`Invalid ${meta.kind} commit value`);\n }\n onCommit(value, meta);\n };\n}\n\nfunction isDataCellStringCommitValue(\n value: DataCellCommitValue,\n): value is string | null {\n return typeof value === \"string\" || value === null;\n}\n\nfunction isDataCellNumberCommitValue(\n value: DataCellCommitValue,\n): value is number | null {\n return typeof value === \"number\" || value === null;\n}\n\nfunction isDataCellBooleanCommitValue(\n value: DataCellCommitValue,\n): value is boolean {\n return typeof value === \"boolean\";\n}\n\nfunction dataCellEditShellState(\n props: DataCellProps,\n shellState: DataCellEditShellState,\n): DataCellResolvedShellState {\n return {\n disabled: shellState.disabled,\n autoFocus: shellState.autoFocus ?? props.autoFocus,\n activationSource: shellState.activationSource,\n onEditingEnd: shellState.onEditingEnd ?? props.onEditingEnd,\n };\n}\n\nfunction dataCellEditorProps(props: DataCellProps): DataCellEditorProps {\n const editorProps: DataCellEditorProps = {\n id: props.id,\n role: props.role,\n tabIndex: props.tabIndex,\n title: props.title,\n onBlur: props.onBlur,\n onClick: props.onClick,\n onDoubleClick: props.onDoubleClick,\n onFocus: props.onFocus,\n onKeyDown: props.onKeyDown,\n onMouseUp: props.onMouseUp,\n };\n\n for (const propName in props) {\n if (isDataCellAriaAttributeName(propName)) {\n assignDataCellAriaAttribute(editorProps, propName, props[propName]);\n }\n\n if (isDataCellDataAttributeName(propName)) {\n const propValue = Reflect.get(props, propName);\n if (isDataCellDataAttributeValue(propValue)) {\n assignDataCellDataAttribute(editorProps, propName, propValue);\n }\n }\n }\n\n return editorProps;\n}\n\nfunction dataCellEditModelBase(\n props: DataCellTypedPropsForKind,\n shellState: DataCellEditShellState,\n isCommitValue: DataCellCommitGuard,\n): DataCellEditModelBase {\n const editState = dataCellEditShellState(props, shellState);\n return {\n kind: props.kind,\n value: props.value,\n disabled: editState.disabled,\n name: props.name,\n className: props.className,\n autoFocus: editState.autoFocus,\n activationSource: editState.activationSource,\n onCommit: dataCellCommitHandler(props.onCommit, isCommitValue),\n onEditingEnd: editState.onEditingEnd,\n editorProps: dataCellEditorProps(props),\n };\n}\n\nfunction assignDataCellAriaAttribute(\n editorProps: React.AriaAttributes,\n propName: Name,\n propValue: React.AriaAttributes[Name],\n) {\n editorProps[propName] = propValue;\n}\n\nfunction assignDataCellDataAttribute(\n editorProps: DataCellDataAttributes,\n propName: DataCellDataAttributeName,\n propValue: DataCellDataAttributeValue,\n) {\n editorProps[propName] = propValue;\n}\n\nfunction isDataCellAriaAttributeName(\n propName: string,\n): propName is DataCellAriaAttributeName {\n return propName.startsWith(\"aria-\");\n}\n\nfunction isDataCellDataAttributeName(\n propName: string,\n): propName is DataCellDataAttributeName {\n return propName.startsWith(\"data-\");\n}\n\nfunction isDataCellDataAttributeValue(\n value: unknown,\n): value is DataCellDataAttributeValue {\n return (\n value === undefined ||\n typeof value === \"string\" ||\n typeof value === \"number\" ||\n typeof value === \"boolean\"\n );\n}\n\nfunction createDataCellTextEditModel(\n props: DataCellPropsForKind<\"text\">,\n shellState: DataCellEditShellState,\n): DataCellTextEditModel {\n return {\n ...dataCellEditModelBase(props, shellState, isDataCellStringCommitValue),\n placeholder: props.placeholder,\n draft: {\n value: props.draftValue,\n onChange: props.onDraftValueChange,\n },\n };\n}\n\nfunction createDataCellNumberEditModel(\n props: DataCellPropsForKind<\"number\">,\n shellState: DataCellEditShellState,\n): DataCellNumberEditModel {\n return {\n ...dataCellEditModelBase(props, shellState, isDataCellNumberCommitValue),\n placeholder: props.placeholder,\n draft: {\n value: props.draftValue,\n onChange: props.onDraftValueChange,\n },\n };\n}\n\nfunction createDataCellIntegerEditModel(\n props: DataCellPropsForKind<\"integer\">,\n shellState: DataCellEditShellState,\n): DataCellIntegerEditModel {\n return {\n ...dataCellEditModelBase(props, shellState, isDataCellNumberCommitValue),\n placeholder: props.placeholder,\n draft: {\n value: props.draftValue,\n onChange: props.onDraftValueChange,\n },\n };\n}\n\nfunction createDataCellBooleanEditModel(\n props: DataCellPropsForKind<\"boolean\">,\n shellState: DataCellEditShellState,\n): DataCellBooleanEditModel {\n return dataCellEditModelBase(props, shellState, isDataCellBooleanCommitValue);\n}\n\nfunction createDataCellSelectEditModel(\n props: DataCellPropsForKind<\"select\">,\n shellState: DataCellEditShellState,\n): DataCellSelectEditModel {\n return {\n ...dataCellEditModelBase(props, shellState, isDataCellStringCommitValue),\n placeholder: props.placeholder,\n formatValue: props.formatValue,\n openState: {\n value: props.open,\n onChange: props.onOpenChange,\n },\n options: props.selectOptions,\n };\n}\n\nfunction createDataCellDateEditModel(\n props: DataCellPropsForKind<\"date\">,\n shellState: DataCellEditShellState,\n): DataCellDateEditModel {\n return {\n ...dataCellEditModelBase(props, shellState, isDataCellStringCommitValue),\n placeholder: props.placeholder,\n dateTimeZone: props.dateTimeZone,\n showPickerIcon: props.showPickerIcon,\n formatValue: props.formatValue\n ? (value) => props.formatValue?.(value, { kind: \"date\" })\n : undefined,\n draft: {\n value: props.draftValue,\n onChange: props.onDraftValueChange,\n },\n openState: {\n value: props.open,\n onChange: props.onOpenChange,\n },\n };\n}\n\nfunction createDataCellTimeEditModel(\n props: DataCellPropsForKind<\"time\">,\n shellState: DataCellEditShellState,\n): DataCellTimeEditModel {\n return {\n ...dataCellEditModelBase(props, shellState, isDataCellStringCommitValue),\n placeholder: props.placeholder,\n dateTimeZone: props.dateTimeZone,\n showPickerIcon: props.showPickerIcon,\n formatValue: props.formatValue\n ? (value) => props.formatValue?.(value, { kind: \"time\" })\n : undefined,\n draft: {\n value: props.draftValue,\n onChange: props.onDraftValueChange,\n },\n openState: {\n value: props.open,\n onChange: props.onOpenChange,\n },\n };\n}\n\nfunction createDataCellDateTimeEditModel(\n props: DataCellPropsForKind<\"date-time\">,\n shellState: DataCellEditShellState,\n): DataCellDateTimeEditModel {\n return {\n ...dataCellEditModelBase(props, shellState, isDataCellStringCommitValue),\n placeholder: props.placeholder,\n dateTimeZone: props.dateTimeZone,\n showPickerIcon: props.showPickerIcon,\n formatValue: props.formatValue\n ? (value) => props.formatValue?.(value, { kind: \"date-time\" })\n : undefined,\n draft: {\n value: props.draftValue,\n onChange: props.onDraftValueChange,\n },\n openState: {\n value: props.open,\n onChange: props.onOpenChange,\n },\n };\n}\n", "type": "registry:ui", "target": "@ui/data-cell-edit-model.ts" }, { "path": "registry/new-york-v4/ui/data-cell-format.ts", "content": "import type {\n DataCellCommitValue,\n DataCellCommitValueForKind,\n DataCellDateTimeZone,\n DataCellKind,\n DataCellValue,\n DataCellValueMeta,\n} from \"@/components/ui/data-cell-types\";\n\nconst dataCellIntegerInputPattern = /^[+-]?\\d+$/;\nconst dataCellNumberInputPattern =\n /^[+-]?(?:(?:\\d+\\.?\\d*)|(?:\\d*\\.\\d+))(?:e[+-]?\\d+)?$/i;\nconst dataCellNativeNumberDisplayPattern = /^([+-]?\\d+)\\.(\\d+)$/;\nconst dataCellDateDisplayPattern = /^(\\d{4})-(\\d{2})-(\\d{2})/;\nconst dataCellDateTimeDisplayPattern =\n /^(\\d{4})-(\\d{2})-(\\d{2})T(\\d{2}):(\\d{2})/;\nconst dataCellTimeDisplayPattern = /^(\\d{2}):(\\d{2})(?::(\\d{2})(?:\\.\\d+)?)?/;\nconst dataCellDateValuePattern = /^\\d{4}-\\d{2}-\\d{2}/;\nconst dataCellExactDateValuePattern = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\nconst dataCellTimeValuePattern = /\\d{2}:\\d{2}(?::\\d{2}(?:\\.\\d+)?)?/;\nconst dataCellDateTimeInputPattern =\n /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}(?::\\d{2}(?:\\.\\d+)?)?/;\nconst dataCellDateTimeZoneSuffixPattern = /(?:Z|[+-]\\d{2}:\\d{2})$/;\n\nexport function parseDataCellNumberInput({\n kind,\n value,\n}: {\n kind: \"number\" | \"integer\";\n value: string;\n}): { value: number | null; isEmpty: boolean; isValid: boolean } {\n const rawValue = value.trim();\n if (rawValue === \"\") return { value: null, isEmpty: true, isValid: true };\n if (kind === \"integer\" && !dataCellIntegerInputPattern.test(rawValue)) {\n return { value: null, isEmpty: false, isValid: false };\n }\n if (kind === \"number\" && !dataCellNumberInputPattern.test(rawValue)) {\n return { value: null, isEmpty: false, isValid: false };\n }\n const parsed = Number(rawValue);\n return Number.isFinite(parsed)\n ? { value: parsed, isEmpty: false, isValid: true }\n : { value: null, isEmpty: false, isValid: false };\n}\n\nexport function formatDataCellDisplayValue(\n kind: DataCellKind,\n value: unknown,\n): string {\n if (value === null || value === undefined || value === \"\") return \"\";\n const text = String(value);\n if (kind === \"number\" || kind === \"integer\") {\n return formatNativeNumberDisplayValue(text);\n }\n if (kind === \"date-time\") return formatDateTimeDisplayValue(text);\n if (kind === \"date\") return formatDateDisplayValue(text);\n if (kind === \"time\") return formatTimeDisplayValue(text);\n return text;\n}\n\nexport function parseDataCellInputValue({\n kind,\n value,\n dateTimeZone,\n previousValue,\n}: {\n kind: \"text\" | \"number\" | \"integer\";\n value: string;\n dateTimeZone: DataCellDateTimeZone;\n previousValue: DataCellValue;\n}): DataCellCommitValueForKind<\"text\" | \"number\" | \"integer\">;\nexport function parseDataCellInputValue({\n kind,\n value,\n dateTimeZone,\n previousValue,\n}: {\n kind: \"date\" | \"time\" | \"date-time\";\n value: string;\n dateTimeZone: DataCellDateTimeZone;\n previousValue: DataCellValue;\n}): DataCellCommitValueForKind<\"date\" | \"time\" | \"date-time\">;\nexport function parseDataCellInputValue({\n kind,\n value,\n dateTimeZone,\n previousValue,\n}: {\n kind: DataCellKind;\n value: string;\n dateTimeZone: DataCellDateTimeZone;\n previousValue: DataCellValue;\n}): DataCellCommitValue {\n if (kind === \"number\" || kind === \"integer\") {\n return parseDataCellNumberInput({ kind, value }).value;\n }\n if (kind === \"date-time\") {\n if (value === \"\") return null;\n if (dateTimeZone === \"utc\") return `${value}Z`;\n if (dateTimeZone === \"preserve\") {\n return `${value}${dateTimeSuffix(previousValue)}`;\n }\n }\n return value === \"\" ? null : value;\n}\n\nexport function getDataCellValueMeta({\n kind,\n value,\n isBadInput = false,\n}: {\n kind: DataCellKind;\n value: string;\n isBadInput?: boolean;\n}): DataCellValueMeta {\n if (kind === \"number\" || kind === \"integer\") {\n if (isBadInput) {\n return {\n kind,\n rawValue: value,\n isEmpty: false,\n isValid: false,\n };\n }\n const parsed = parseDataCellNumberInput({ kind, value });\n return {\n kind,\n rawValue: value,\n isEmpty: parsed.isEmpty,\n isValid: parsed.isValid,\n };\n }\n return {\n kind,\n rawValue: value,\n isEmpty: value === \"\",\n isValid: true,\n };\n}\n\nexport function formatDataCellEditValue(\n kind: DataCellKind,\n value: DataCellValue,\n) {\n if (value === null || value === undefined) return \"\";\n const text = String(value);\n if (kind === \"date-time\") return dateTimeInputValue(text);\n if (kind === \"date\") return text.match(dataCellDateValuePattern)?.[0] ?? text;\n if (kind === \"time\") {\n return text.match(dataCellTimeDisplayPattern)?.[0] ?? text;\n }\n return text;\n}\n\nexport function dateFromPickerValue(\n kind: \"date\" | \"time\" | \"date-time\",\n value: string,\n): Date | undefined {\n if (kind === \"time\" || value === \"\") return undefined;\n const dateValue =\n kind === \"date-time\" ? value.match(dataCellDateValuePattern)?.[0] : value;\n if (!dateValue) return undefined;\n const match = dateValue.match(dataCellExactDateValuePattern);\n if (!match) return undefined;\n const year = Number(match[1]);\n const monthIndex = Number(match[2]) - 1;\n const day = Number(match[3]);\n const date = new Date(year, monthIndex, day);\n return date.getFullYear() === year &&\n date.getMonth() === monthIndex &&\n date.getDate() === day\n ? date\n : undefined;\n}\n\nexport function timeFromPickerValue(\n kind: \"date\" | \"time\" | \"date-time\",\n value: string,\n): string {\n if (kind === \"date\") return \"\";\n return value.match(dataCellTimeValuePattern)?.[0] ?? \"\";\n}\n\nexport function pickerValueWithDate(\n kind: \"date\" | \"date-time\",\n value: string,\n date: Date,\n): string {\n const dateValue = formatPickerDateValue(date);\n if (kind === \"date\") return dateValue;\n return `${dateValue}T${timeFromPickerValue(\"date-time\", value) || \"00:00\"}`;\n}\n\nexport function pickerValueWithTime(\n kind: \"time\" | \"date-time\",\n value: string,\n time: string,\n): string {\n if (kind === \"time\") return time;\n const dateValue =\n value.match(dataCellDateValuePattern)?.[0] ??\n formatPickerDateValue(new Date());\n return `${dateValue}T${time || \"00:00\"}`;\n}\n\nfunction formatNativeNumberDisplayValue(value: string): string {\n return value.replace(dataCellNativeNumberDisplayPattern, \"$1,$2\");\n}\n\nfunction formatDateDisplayValue(value: string): string {\n const match = value.match(dataCellDateDisplayPattern);\n if (!match) return value;\n return `${match[3]}/${match[2]}/${match[1]}`;\n}\n\nfunction formatDateTimeDisplayValue(value: string): string {\n const inputValue = dateTimeInputValue(value);\n const match = inputValue.match(dataCellDateTimeDisplayPattern);\n if (!match) return inputValue || value;\n return `${match[3]}/${match[2]}/${match[1]}, ${match[4]}:${match[5]}`;\n}\n\nfunction formatTimeDisplayValue(value: string): string {\n const match = value.match(dataCellTimeDisplayPattern);\n if (!match) return value;\n return [match[1], match[2], match[3]].filter(Boolean).join(\":\");\n}\n\nfunction formatPickerDateValue(date: Date): string {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, \"0\");\n const day = String(date.getDate()).padStart(2, \"0\");\n return `${year}-${month}-${day}`;\n}\n\nfunction dateTimeInputValue(value: string): string {\n const withoutTimezone = value\n .trim()\n .replace(dataCellDateTimeZoneSuffixPattern, \"\");\n return withoutTimezone.match(dataCellDateTimeInputPattern)?.[0] ?? value;\n}\n\nfunction dateTimeSuffix(value: DataCellValue): string {\n if (typeof value !== \"string\") return \"\";\n return value.trim().match(dataCellDateTimeZoneSuffixPattern)?.[0] ?? \"\";\n}\n", "type": "registry:ui", "target": "@ui/data-cell-format.ts" }, { "path": "registry/new-york-v4/ui/data-cell-picker-control.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n useDataCellOpeningContext,\n type DataCellDismissCause,\n} from \"@/components/ui/data-cell-activation\";\nimport { dataCellPickerTriggerClass } from \"@/components/ui/data-cell-classes\";\nimport type { DataCellPickerControlProps } from \"@/components/ui/data-cell-control-contract\";\nimport {\n dateFromPickerValue,\n formatDataCellDisplayValue,\n formatDataCellEditValue,\n getDataCellValueMeta,\n parseDataCellInputValue,\n pickerValueWithDate,\n pickerValueWithTime,\n timeFromPickerValue,\n} from \"@/components/ui/data-cell-format\";\nimport { DataCellPickerIcon } from \"@/components/ui/data-cell-picker-icon\";\nimport { getDataCellPickerPopupStyleFromAnchor } from \"@/components/ui/data-cell-picker-position\";\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\nimport { useKeyedLayoutEffect } from \"@/hooks/use-keyed-layout-effect\";\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\nfunction dataCellOutsidePointerDismissCause(\n event: PointerEvent,\n): DataCellDismissCause {\n return {\n kind: \"outside-pointer\",\n event,\n };\n}\n\nfunction dataCellTriggerPressDismissCause(event: Event): DataCellDismissCause {\n return {\n kind: \"trigger-press\",\n event,\n };\n}\n\nfunction dataCellEscapeDismissCause(\n event: KeyboardEvent,\n): DataCellDismissCause {\n return {\n kind: \"escape\",\n event,\n };\n}\n\nexport function DataCellPickerControl({\n kind,\n value,\n disabled = false,\n name,\n placeholder,\n dateTimeZone = \"local\",\n showPickerIcon = true,\n className,\n formatValue,\n autoFocus,\n activationSource,\n session,\n draft,\n openState,\n onFocus,\n onBlur,\n onKeyDown,\n onClick,\n onDoubleClick,\n ...props\n}: DataCellPickerControlProps) {\n const initialPickerValue = formatDataCellEditValue(kind, value);\n const [uncontrolledDraftValue, setUncontrolledDraftValue] =\n React.useState(initialPickerValue);\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\n const triggerRef = React.useRef(null);\n const popupRef = React.useRef(null);\n const popupStyleRef = React.useRef(null);\n const openingContext = useDataCellOpeningContext(activationSource, {\n enabled: Boolean(autoFocus),\n });\n const [popupStyle, setPopupStyle] =\n React.useState(null);\n const popupId = React.useId();\n const controlledOpen = openState?.value;\n const open = controlledOpen ?? uncontrolledOpen;\n const pickerValue = draft?.value ?? uncontrolledDraftValue;\n const selectedDate = dateFromPickerValue(kind, pickerValue);\n const timeValue = timeFromPickerValue(kind, pickerValue);\n const content =\n formatValue?.(pickerValue, { kind }) ??\n formatDataCellDisplayValue(kind, pickerValue);\n const isEmpty = content === \"\";\n const setOpen = React.useCallback(\n (open: boolean) => {\n if (!open) {\n popupStyleRef.current = null;\n setPopupStyle(null);\n }\n if (controlledOpen === undefined) setUncontrolledOpen(open);\n openState?.onChange?.(open);\n },\n [controlledOpen, openState],\n );\n\n useKeyedMountEffect(joinEffectKey([draft?.value, kind, value]), () => {\n if (draft?.value !== undefined) return;\n setUncontrolledDraftValue(formatDataCellEditValue(kind, value));\n });\n\n const closePopup = React.useCallback(() => {\n openingContext.release();\n setOpen(false);\n session.end();\n }, [openingContext, session, setOpen]);\n\n const measurePopupStyle = React.useCallback(() => {\n const trigger = triggerRef.current;\n if (!trigger) return null;\n\n return getDataCellPickerPopupStyleFromAnchor({\n anchor: trigger,\n kind,\n });\n }, [kind]);\n\n const openPopup = React.useCallback(() => {\n if (!popupStyleRef.current) {\n popupStyleRef.current = measurePopupStyle();\n }\n if (!popupStyleRef.current) return;\n\n setPopupStyle(popupStyleRef.current);\n setOpen(true);\n }, [measurePopupStyle, setOpen]);\n\n useKeyedLayoutEffect(joinEffectKey([autoFocus, openPopup]), () => {\n if (!autoFocus) return;\n triggerRef.current?.focus({ preventScroll: true });\n openPopup();\n });\n\n useKeyedLayoutEffect(joinEffectKey([measurePopupStyle, open]), () => {\n if (!open || popupStyleRef.current) return;\n popupStyleRef.current = measurePopupStyle();\n if (popupStyleRef.current) setPopupStyle(popupStyleRef.current);\n });\n\n useKeyedMountEffect(joinEffectKey([closePopup, open, openingContext]), () => {\n if (!open) return;\n\n const handlePointerDown = (event: PointerEvent) => {\n const target = event.target;\n if (!(target instanceof Node)) return;\n if (\n openingContext.shouldCancelDismiss(\n dataCellOutsidePointerDismissCause(event),\n )\n ) {\n return;\n }\n if (triggerRef.current?.contains(target)) return;\n if (popupRef.current?.contains(target)) return;\n closePopup();\n };\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== \"Escape\") return;\n openingContext.release();\n if (\n !openingContext.shouldCancelDismiss(dataCellEscapeDismissCause(event))\n ) {\n closePopup();\n }\n };\n const handleViewportChange = () => closePopup();\n\n globalThis.document.addEventListener(\"pointerdown\", handlePointerDown);\n globalThis.document.addEventListener(\"keydown\", handleKeyDown);\n window.addEventListener(\"resize\", handleViewportChange);\n window.addEventListener(\"scroll\", handleViewportChange, true);\n return () => {\n globalThis.document.removeEventListener(\"pointerdown\", handlePointerDown);\n globalThis.document.removeEventListener(\"keydown\", handleKeyDown);\n window.removeEventListener(\"resize\", handleViewportChange);\n window.removeEventListener(\"scroll\", handleViewportChange, true);\n };\n });\n\n const updatePickerValue = (nextValue: string, commit = false) => {\n if (draft?.value === undefined) setUncontrolledDraftValue(nextValue);\n const meta = getDataCellValueMeta({ kind, value: nextValue });\n draft?.onChange?.(nextValue, meta);\n if (commit) {\n const commitValue = parseDataCellInputValue({\n kind,\n value: nextValue,\n dateTimeZone,\n previousValue: value,\n });\n session.commit(commitValue, meta, {\n endEditing: false,\n markFinished: false,\n });\n }\n };\n\n const pickerPopup =\n open && popupStyle && typeof globalThis.document !== \"undefined\"\n ? createPortal(\n \n {\n if (kind === \"time\") return;\n if (!nextDate) return;\n const nextValue = pickerValueWithDate(\n kind,\n pickerValue,\n nextDate,\n );\n updatePickerValue(nextValue, true);\n if (kind === \"date\") closePopup();\n }}\n onTimeChange={(nextTime) => {\n if (kind === \"date\") return;\n updatePickerValue(\n pickerValueWithTime(kind, pickerValue, nextTime),\n true,\n );\n }}\n />\n ,\n globalThis.document.body,\n )\n : null;\n\n return (\n <>\n {\n const relatedTarget = event.relatedTarget;\n if (\n relatedTarget instanceof Node &&\n popupRef.current?.contains(relatedTarget)\n ) {\n return;\n }\n onBlur?.(event);\n }}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n onClick?.(event);\n if (event.defaultPrevented || disabled) return;\n if (\n openingContext.shouldCancelDismiss(\n dataCellTriggerPressDismissCause(event.nativeEvent),\n )\n ) {\n return;\n }\n if (open) closePopup();\n else openPopup();\n }}\n onDoubleClick={onDoubleClick}\n >\n \n {isEmpty ? (placeholder ?? \"—\") : content}\n \n {showPickerIcon ? : null}\n \n {pickerPopup}\n \n );\n}\n\nfunction DataCellPickerPopupContent({\n kind,\n selectedDate,\n timeValue,\n onDateSelect,\n onTimeChange,\n}: {\n kind: \"date\" | \"time\" | \"date-time\";\n selectedDate: Date | undefined;\n timeValue: string;\n onDateSelect: (date: Date | undefined) => void;\n onTimeChange: (time: string) => void;\n}) {\n return (\n <>\n {(kind === \"date\" || kind === \"date-time\") && (\n \n )}\n {(kind === \"time\" || kind === \"date-time\") && (\n
\n onTimeChange(event.currentTarget.value)}\n />\n
\n )}\n \n );\n}\n", "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": "import type * as React from \"react\";\n\nexport function getDataCellPickerPopupStyleFromAnchor({\n anchor,\n kind,\n}: {\n anchor: HTMLElement;\n kind: \"date\" | \"time\" | \"date-time\";\n}): React.CSSProperties {\n return getDataCellPickerPopupStyle({\n kind,\n rect: anchor.getBoundingClientRect(),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n}\n\nexport function getDataCellPickerPopupStyle({\n kind,\n rect,\n viewportWidth,\n viewportHeight,\n}: {\n kind: \"date\" | \"time\" | \"date-time\";\n rect: DOMRect;\n viewportWidth: number;\n viewportHeight: number;\n}): React.CSSProperties {\n const margin = 8;\n const estimatedWidth = kind === \"time\" ? 220 : 330;\n const estimatedHeight = kind === \"time\" ? 80 : kind === \"date\" ? 330 : 390;\n const left = Math.min(\n Math.max(margin, rect.left),\n Math.max(margin, viewportWidth - estimatedWidth - margin),\n );\n const top =\n rect.bottom + margin + estimatedHeight > viewportHeight\n ? Math.max(margin, rect.top - estimatedHeight - 4)\n : rect.bottom + 4;\n\n return { position: \"fixed\", top, left, zIndex: 50 };\n}\n", "type": "registry:ui", "target": "@ui/data-cell-picker-position.ts" }, { "path": "registry/new-york-v4/ui/data-cell-select-activation.ts", "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n useDataCellOpeningContext,\n type DataCellActivationSource,\n type DataCellDismissCause,\n} from \"@/components/ui/data-cell-activation\";\nimport { useKeyedLayoutEffect } from \"@/hooks/use-keyed-layout-effect\";\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\nexport function useDataCellSelectActivation({\n activationSource,\n autoFocus,\n triggerRef,\n openEditor,\n closeEditor,\n keepOpen,\n}: {\n activationSource?: DataCellActivationSource;\n autoFocus?: boolean;\n triggerRef: React.RefObject;\n openEditor: () => void;\n closeEditor: () => void;\n keepOpen: () => void;\n}) {\n const openingContext = useDataCellOpeningContext(activationSource, {\n enabled: Boolean(autoFocus),\n });\n\n const shouldCancelDismiss = React.useCallback(\n (kind: DataCellDismissCause[\"kind\"], event: Event | undefined) => {\n if (\n !openingContext.shouldCancelDismiss(\n dataCellSelectDismissCause(kind, event),\n )\n ) {\n return false;\n }\n\n event?.preventDefault();\n keepOpen();\n return true;\n },\n [keepOpen, openingContext],\n );\n\n const closeActivatedEditor = React.useCallback(() => {\n openingContext.release();\n closeEditor();\n }, [closeEditor, openingContext]);\n\n const openActivatedEditor = React.useCallback(() => {\n openEditor();\n }, [openEditor]);\n\n useKeyedLayoutEffect(\n joinEffectKey([autoFocus, openActivatedEditor, triggerRef]),\n () => {\n if (!autoFocus) return;\n triggerRef.current?.focus({ preventScroll: true });\n openActivatedEditor();\n },\n );\n\n return {\n shouldCancelDismiss,\n closeEditor: closeActivatedEditor,\n openEditor: openActivatedEditor,\n release: openingContext.release,\n };\n}\n\nfunction dataCellSelectDismissCause(\n kind: DataCellDismissCause[\"kind\"],\n event: Event | undefined,\n): DataCellDismissCause {\n if (kind === \"outside-pointer\" && event instanceof PointerEvent) {\n return { kind, event };\n }\n if (kind === \"escape\" && event instanceof KeyboardEvent) {\n return { kind, event };\n }\n if (kind === \"trigger-press\") return { kind, event };\n if (kind === \"focus-out\") return { kind, event };\n if (kind === \"cancel-open\") return { kind, event };\n return { kind: \"unknown\", event };\n}\n", "type": "registry:ui", "target": "@ui/data-cell-select-activation.ts" }, { "path": "registry/new-york-v4/ui/data-cell-select-control.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { dataCellPickerTriggerClass } from \"@/components/ui/data-cell-classes\";\nimport type { DataCellSelectControlProps } from \"@/components/ui/data-cell-control-contract\";\nimport { useDataCellSelectActivation } from \"@/components/ui/data-cell-select-activation\";\nimport { useDataCellSelectKeyboard } from \"@/components/ui/data-cell-select-keyboard\";\nimport { DataCellSelectPopup } from \"@/components/ui/data-cell-select-popup\";\nimport { useDataCellSelectState } from \"@/components/ui/data-cell-select-state\";\n\nexport function DataCellSelectControl({\n kind,\n value,\n disabled = false,\n name,\n placeholder = \"Select...\",\n className,\n formatValue,\n autoFocus,\n activationSource,\n session,\n openState,\n options,\n onFocus,\n onBlur,\n onKeyDown,\n onClick,\n onDoubleClick,\n ...props\n}: DataCellSelectControlProps) {\n const triggerRef = React.useRef(null);\n const popupId = React.useId();\n const select = useDataCellSelectState({\n popupId,\n value,\n placeholder,\n formatValue,\n openState,\n selectOptions: options,\n session,\n });\n const openEditor = React.useCallback(() => {\n select.openEditor(triggerRef.current);\n }, [select.openEditor]);\n const activation = useDataCellSelectActivation({\n activationSource,\n autoFocus,\n triggerRef,\n openEditor,\n closeEditor: select.closeEditor,\n keepOpen: select.keepOpen,\n });\n const {\n shouldCancelDismiss,\n closeEditor: closeActivatedEditor,\n openEditor: openActivatedEditor,\n release,\n } = activation;\n const commitValue = React.useCallback(\n (nextValue: string) => {\n release();\n select.commitValue(nextValue);\n },\n [release, select.commitValue],\n );\n const selectOnKeyDown = useDataCellSelectKeyboard({\n activeOption: select.activeOption,\n open: select.open,\n options,\n openEditor: openActivatedEditor,\n closeEditor: closeActivatedEditor,\n commitValue,\n setActiveOptionIndex: select.setActiveOptionIndex,\n shouldCancelDismiss,\n });\n\n return (\n <>\n {\n onBlur?.(event);\n const nextFocusTarget = event.relatedTarget;\n const isUnknownPopupFocusTarget =\n select.open && nextFocusTarget === null;\n const isPopupFocus =\n nextFocusTarget instanceof Node &&\n document.getElementById(popupId)?.contains(nextFocusTarget);\n if (\n !isPopupFocus &&\n !isUnknownPopupFocusTarget &&\n !shouldCancelDismiss(\"focus-out\", undefined)\n ) {\n closeActivatedEditor();\n }\n }}\n onClick={(event) => {\n onClick?.(event);\n if (event.defaultPrevented) return;\n if (!select.open) {\n openActivatedEditor();\n return;\n }\n if (!shouldCancelDismiss(\"trigger-press\", event.nativeEvent)) {\n closeActivatedEditor();\n }\n }}\n onDoubleClick={onDoubleClick}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) return;\n selectOnKeyDown(event);\n }}\n >\n \n {select.isEmpty ? select.placeholder : select.displayValue}\n \n \n \n {select.open && triggerRef.current && select.popupPosition ? (\n {\n if (shouldCancelDismiss(\"outside-pointer\", event)) {\n return;\n }\n closeActivatedEditor();\n }}\n />\n ) : null}\n \n );\n}\n", "type": "registry:ui", "target": "@ui/data-cell-select-control.tsx" }, { "path": "registry/new-york-v4/ui/data-cell-select-keyboard.ts", "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n firstEnabledDataCellSelectOptionIndex,\n lastEnabledDataCellSelectOptionIndex,\n nextEnabledDataCellSelectOptionIndex,\n} from \"@/components/ui/data-cell-select-navigation\";\nimport type { DataCellSelectOption } from \"@/components/ui/data-cell-types\";\n\nexport function useDataCellSelectKeyboard({\n activeOption,\n open,\n options,\n openEditor,\n closeEditor,\n commitValue,\n setActiveOptionIndex,\n shouldCancelDismiss,\n}: {\n activeOption: DataCellSelectOption | undefined;\n open: boolean;\n options: DataCellSelectOption[];\n openEditor: () => void;\n closeEditor: () => void;\n commitValue: (value: string) => void;\n setActiveOptionIndex: React.Dispatch>;\n shouldCancelDismiss: (kind: \"escape\", event: Event | undefined) => boolean;\n}) {\n return React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n if (!shouldCancelDismiss(\"escape\", event.nativeEvent)) closeEditor();\n return;\n }\n\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n if (!open) {\n openEditor();\n return;\n }\n setActiveOptionIndex((currentIndex) =>\n nextEnabledDataCellSelectOptionIndex({\n options,\n currentIndex,\n direction: event.key === \"ArrowDown\" ? 1 : -1,\n }),\n );\n return;\n }\n\n if (event.key === \"Home\" || event.key === \"End\") {\n event.preventDefault();\n if (!open) {\n openEditor();\n return;\n }\n setActiveOptionIndex(\n event.key === \"Home\"\n ? firstEnabledDataCellSelectOptionIndex(options)\n : lastEnabledDataCellSelectOptionIndex(options),\n );\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n if (!open) {\n openEditor();\n return;\n }\n if (activeOption && !activeOption.disabled) {\n commitValue(activeOption.value);\n }\n }\n },\n [\n activeOption,\n closeEditor,\n commitValue,\n open,\n openEditor,\n options,\n setActiveOptionIndex,\n shouldCancelDismiss,\n ],\n );\n}\n", "type": "registry:ui", "target": "@ui/data-cell-select-keyboard.ts" }, { "path": "registry/new-york-v4/ui/data-cell-select-navigation.ts", "content": "import type { DataCellSelectOption } from \"@/components/ui/data-cell-types\";\n\nexport function firstEnabledDataCellSelectOptionIndex(\n options: DataCellSelectOption[],\n) {\n return options.findIndex((option) => !option.disabled);\n}\n\nexport function lastEnabledDataCellSelectOptionIndex(\n options: DataCellSelectOption[],\n) {\n for (let index = options.length - 1; index >= 0; index -= 1) {\n if (!options[index]?.disabled) return index;\n }\n\n return -1;\n}\n\nexport function nextEnabledDataCellSelectOptionIndex({\n options,\n currentIndex,\n direction,\n}: {\n options: DataCellSelectOption[];\n currentIndex: number;\n direction: 1 | -1;\n}) {\n if (options.length === 0) return -1;\n\n for (let offset = 1; offset <= options.length; offset += 1) {\n const index =\n (currentIndex + direction * offset + options.length) % options.length;\n if (!options[index]?.disabled) return index;\n }\n\n return -1;\n}\n\nexport function selectedDataCellSelectOptionIndex({\n options,\n value,\n}: {\n options: DataCellSelectOption[];\n value: string | null;\n}) {\n const selectedIndex = options.findIndex((option) => option.value === value);\n if (selectedIndex >= 0 && !options[selectedIndex]?.disabled) {\n return selectedIndex;\n }\n\n return firstEnabledDataCellSelectOptionIndex(options);\n}\n", "type": "registry:ui", "target": "@ui/data-cell-select-navigation.ts" }, { "path": "registry/new-york-v4/ui/data-cell-select-popup-dismissal.ts", "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\nexport function useDataCellSelectPopupDismissal({\n anchor,\n popupRef,\n onCancel,\n onOutsidePointerDown,\n}: {\n anchor: HTMLElement;\n popupRef: React.RefObject;\n onCancel: () => void;\n onOutsidePointerDown: (event: PointerEvent) => void;\n}) {\n useKeyedMountEffect(\n joinEffectKey([anchor, onOutsidePointerDown, popupRef]),\n () => {\n const handlePointerDown = (event: PointerEvent) => {\n const target = event.target;\n if (!(target instanceof Node)) return;\n if (anchor.contains(target) || popupRef.current?.contains(target))\n return;\n\n onOutsidePointerDown(event);\n };\n\n document.addEventListener(\"pointerdown\", handlePointerDown, true);\n return () =>\n document.removeEventListener(\"pointerdown\", handlePointerDown, true);\n },\n );\n\n useKeyedMountEffect(joinEffectKey([onCancel, popupRef]), () => {\n const handleViewportChange = (event: Event) => {\n const target = event.target;\n if (target instanceof Node && popupRef.current?.contains(target)) return;\n onCancel();\n };\n\n window.addEventListener(\"resize\", handleViewportChange);\n window.addEventListener(\"scroll\", handleViewportChange, true);\n return () => {\n window.removeEventListener(\"resize\", handleViewportChange);\n window.removeEventListener(\"scroll\", handleViewportChange, true);\n };\n });\n}\n", "type": "registry:ui", "target": "@ui/data-cell-select-popup-dismissal.ts" }, { "path": "registry/new-york-v4/ui/data-cell-select-popup-position.ts", "content": "export type DataCellSelectPopupPosition = {\n left: number;\n top: number;\n width: number;\n maxHeight: number;\n};\n\nexport type DataCellSelectPopupRect = Pick<\n DOMRect,\n \"bottom\" | \"left\" | \"top\" | \"width\"\n>;\n\nexport type DataCellSelectPopupViewport = {\n width: number;\n height: number;\n};\n\nconst popupGapPx = 4;\nconst viewportMarginPx = 8;\nconst minimumPopupHeightPx = 64;\n\nexport function getDataCellSelectPopupPosition({\n anchorRect,\n viewport,\n}: {\n anchorRect: DataCellSelectPopupRect;\n viewport: DataCellSelectPopupViewport;\n}): DataCellSelectPopupPosition {\n const availableBelow = viewport.height - anchorRect.bottom - viewportMarginPx;\n const availableAbove = anchorRect.top - viewportMarginPx;\n const shouldPlaceAbove =\n availableBelow < minimumPopupHeightPx && availableAbove > availableBelow;\n const maxHeight = Math.max(\n minimumPopupHeightPx,\n shouldPlaceAbove\n ? availableAbove - popupGapPx\n : availableBelow - popupGapPx,\n );\n const top = shouldPlaceAbove\n ? Math.max(viewportMarginPx, anchorRect.top - popupGapPx - maxHeight)\n : Math.min(\n anchorRect.bottom + popupGapPx,\n viewport.height - viewportMarginPx,\n );\n const left = Math.min(\n Math.max(viewportMarginPx, anchorRect.left),\n Math.max(\n viewportMarginPx,\n viewport.width - anchorRect.width - viewportMarginPx,\n ),\n );\n\n return {\n left,\n top,\n width: anchorRect.width,\n maxHeight,\n };\n}\n", "type": "registry:ui", "target": "@ui/data-cell-select-popup-position.ts" }, { "path": "registry/new-york-v4/ui/data-cell-select-popup.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useDataCellSelectPopupDismissal } from \"@/components/ui/data-cell-select-popup-dismissal\";\nimport type { DataCellSelectPopupPosition } from \"@/components/ui/data-cell-select-popup-position\";\nimport type { DataCellSelectOption } from \"@/components/ui/data-cell-types\";\n\nexport type DataCellSelectPopupProps = {\n anchor: HTMLElement;\n id: string;\n position: DataCellSelectPopupPosition;\n activeDescendantId: string | undefined;\n value: string | null;\n activeIndex: number;\n options: DataCellSelectOption[];\n onActiveIndexChange: (index: number) => void;\n onCommit: (value: string) => void;\n onCancel: () => void;\n onOutsidePointerDown: (event: PointerEvent) => void;\n};\n\nexport function DataCellSelectPopup({\n anchor,\n id,\n position,\n activeDescendantId,\n value,\n activeIndex,\n options,\n onActiveIndexChange,\n onCommit,\n onCancel,\n onOutsidePointerDown,\n}: DataCellSelectPopupProps) {\n const popupRef = React.useRef(null);\n\n useDataCellSelectPopupDismissal({\n anchor,\n popupRef,\n onCancel,\n onOutsidePointerDown,\n });\n\n return createPortal(\n \n {options.map((option, index) => {\n const isSelected = option.value === value;\n const isActive = index === activeIndex;\n return (\n {\n if (!option.disabled) onActiveIndexChange(index);\n }}\n onPointerDown={(event) => event.preventDefault()}\n onClick={() => {\n if (!option.disabled) onCommit(option.value);\n }}\n >\n \n {isSelected ? (\n \n \n \n ) : null}\n \n {option.label}\n \n );\n })}\n ,\n document.body,\n );\n}\n", "type": "registry:ui", "target": "@ui/data-cell-select-popup.tsx" }, { "path": "registry/new-york-v4/ui/data-cell-select-state.ts", "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { selectedDataCellSelectOptionIndex } from \"@/components/ui/data-cell-select-navigation\";\nimport {\n getDataCellSelectPopupPosition,\n type DataCellSelectPopupPosition,\n} from \"@/components/ui/data-cell-select-popup-position\";\nimport type { DataCellPrimitiveSession } from \"@/components/ui/data-cell-session\";\nimport type { DataCellOpenControl } from \"@/components/ui/data-cell-control-contract\";\nimport type {\n DataCellSelectOption,\n DataCellValueMeta,\n} from \"@/components/ui/data-cell-types\";\n\ntype DataCellSelectFormatValue = (\n value: string | null | undefined,\n meta: { kind: \"select\" },\n) => React.ReactNode;\n\nexport type DataCellSelectState = {\n activeDescendantId: string | undefined;\n activeOption: DataCellSelectOption | undefined;\n activeOptionIndex: number;\n closeEditor: () => void;\n commitValue: (nextValue: string) => void;\n displayValue: React.ReactNode;\n isEmpty: boolean;\n keepOpen: () => void;\n open: boolean;\n openEditor: (trigger: HTMLElement | null) => void;\n placeholder: string;\n popupPosition: DataCellSelectPopupPosition | null;\n selectedValue: string | null;\n setActiveOptionIndex: React.Dispatch>;\n};\n\nexport function useDataCellSelectState({\n popupId,\n value,\n placeholder = \"Select...\",\n formatValue,\n openState,\n selectOptions,\n session,\n}: {\n popupId: string;\n value?: string | null;\n placeholder?: string;\n formatValue?: DataCellSelectFormatValue;\n openState?: DataCellOpenControl;\n selectOptions: DataCellSelectOption[];\n session: DataCellPrimitiveSession;\n}): DataCellSelectState {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\n const [activeOptionIndex, setActiveOptionIndex] = React.useState(-1);\n const popupPositionRef = React.useRef(\n null,\n );\n const [popupPosition, setPopupPosition] =\n React.useState(null);\n const lastCommittedValueRef = React.useRef(null);\n\n const controlledOpen = openState?.value;\n const open = controlledOpen ?? uncontrolledOpen;\n const selectedValue = value ?? null;\n const selectedOption = selectOptions.find((option) => option.value === value);\n const activeOption = selectOptions[activeOptionIndex];\n const activeDescendantId =\n open && activeOptionIndex >= 0\n ? `${popupId}-option-${activeOptionIndex}`\n : undefined;\n const displayValue =\n formatValue?.(selectedValue, { kind: \"select\" }) ??\n selectedOption?.label ??\n \"\";\n const isEmpty = displayValue === \"\";\n\n const setOpen = React.useCallback(\n (nextOpen: boolean) => {\n if (!nextOpen) {\n popupPositionRef.current = null;\n setPopupPosition(null);\n }\n if (controlledOpen === undefined) setUncontrolledOpen(nextOpen);\n openState?.onChange?.(nextOpen);\n },\n [controlledOpen, openState],\n );\n\n const keepOpen = React.useCallback(() => {\n if (controlledOpen === undefined) setUncontrolledOpen(true);\n openState?.onChange?.(true);\n }, [controlledOpen, openState]);\n\n const closeEditor = React.useCallback(() => {\n setOpen(false);\n session.end();\n }, [session, setOpen]);\n\n const openEditor = React.useCallback(\n (trigger: HTMLElement | null) => {\n if (!trigger) return;\n if (!popupPositionRef.current) {\n popupPositionRef.current = getDataCellSelectPopupPosition({\n anchorRect: trigger.getBoundingClientRect(),\n viewport: {\n width: window.innerWidth,\n height: window.innerHeight,\n },\n });\n }\n setPopupPosition(popupPositionRef.current);\n setActiveOptionIndex(\n selectedDataCellSelectOptionIndex({\n options: selectOptions,\n value: selectedValue,\n }),\n );\n lastCommittedValueRef.current = null;\n session.reset();\n setOpen(true);\n },\n [selectOptions, selectedValue, session, setOpen],\n );\n\n const commitValue = React.useCallback(\n (nextValue: string) => {\n if (selectedValue === nextValue) {\n closeEditor();\n return;\n }\n if (lastCommittedValueRef.current === nextValue) return;\n lastCommittedValueRef.current = nextValue;\n setOpen(false);\n session.commit(nextValue, selectValueMeta(nextValue));\n },\n [closeEditor, selectedValue, session, setOpen],\n );\n\n return {\n activeDescendantId,\n activeOption,\n activeOptionIndex,\n closeEditor,\n commitValue,\n displayValue,\n isEmpty,\n keepOpen,\n open,\n openEditor,\n placeholder,\n popupPosition,\n selectedValue,\n setActiveOptionIndex,\n };\n}\n\nfunction selectValueMeta(value: string | null): DataCellValueMeta {\n return {\n kind: \"select\",\n rawValue: value ?? \"\",\n isEmpty: value === null || value === \"\",\n isValid: true,\n };\n}\n", "type": "registry:ui", "target": "@ui/data-cell-select-state.ts" }, { "path": "registry/new-york-v4/ui/data-cell-session.ts", "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport type {\n DataCellCommitValue,\n DataCellValueMeta,\n} from \"@/components/ui/data-cell-types\";\n\ntype DataCellSessionCommitOptions = {\n endEditing?: boolean;\n markFinished?: boolean;\n shouldCommit?: () => boolean;\n};\n\ntype DataCellSessionEndOptions = {\n markFinished?: boolean;\n};\n\nexport type DataCellSessionCommit = (\n value: DataCellCommitValue,\n meta: DataCellValueMeta,\n options?: DataCellSessionCommitOptions,\n) => void;\n\nexport type DataCellPrimitiveSession = {\n commit: DataCellSessionCommit;\n cancel: () => void;\n end: (options?: DataCellSessionEndOptions) => void;\n reset: () => void;\n};\n\nexport function useDataCellPrimitiveSession({\n onCommit,\n onEditingEnd,\n}: {\n onCommit?: (value: DataCellCommitValue, meta: DataCellValueMeta) => void;\n onEditingEnd?: () => void;\n}): DataCellPrimitiveSession {\n const didFinishRef = React.useRef(false);\n\n const reset = React.useCallback(() => {\n didFinishRef.current = false;\n }, []);\n\n const end = React.useCallback(\n ({ markFinished = true }: DataCellSessionEndOptions = {}) => {\n if (didFinishRef.current) return;\n if (markFinished) didFinishRef.current = true;\n onEditingEnd?.();\n },\n [onEditingEnd],\n );\n\n const commit = React.useCallback(\n (\n value,\n meta,\n {\n endEditing = true,\n markFinished = true,\n shouldCommit,\n }: DataCellSessionCommitOptions = {},\n ) => {\n if (didFinishRef.current) return;\n if (shouldCommit && !shouldCommit()) return;\n if (markFinished) didFinishRef.current = true;\n onCommit?.(value, meta);\n if (endEditing) onEditingEnd?.();\n },\n [onCommit, onEditingEnd],\n );\n\n const cancel = React.useCallback(() => {\n end();\n }, [end]);\n\n return {\n commit,\n cancel,\n end,\n reset,\n };\n}\n", "type": "registry:ui", "target": "@ui/data-cell-session.ts" }, { "path": "registry/new-york-v4/ui/data-cell-input-control.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { useMountEffect } from \"@/hooks/use-mount-effect\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n useDataCellOpeningContext,\n type DataCellActivationSource,\n} from \"@/components/ui/data-cell-activation\";\nimport { dataCellDisplayClass } from \"@/components/ui/data-cell-classes\";\nimport type { DataCellInputControlProps } from \"@/components/ui/data-cell-control-contract\";\nimport {\n formatDataCellEditValue,\n getDataCellValueMeta,\n parseDataCellInputValue,\n} from \"@/components/ui/data-cell-format\";\nimport { getDataCellTextSelectionOffset } from \"@/components/ui/data-cell-text-hit-test\";\nimport type {\n DataCellKind,\n DataCellValue,\n DataCellValueMeta,\n} from \"@/components/ui/data-cell-types\";\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\nimport { useKeyedLayoutEffect } from \"@/hooks/use-keyed-layout-effect\";\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\nfunction focusDataCellTextInput(\n input: HTMLInputElement | null,\n activationSource: DataCellActivationSource | undefined,\n) {\n if (!input) return null;\n input.focus({ preventScroll: true });\n\n if (input.type !== \"text\" && input.type !== \"search\") return;\n\n const selectionIndex =\n activationSource?.kind === \"pointer\"\n ? (activationSource.selectionOffset ??\n getDataCellTextSelectionOffset({\n clientX: activationSource.clientX,\n input,\n value: input.value,\n }))\n : input.value.length;\n input.setSelectionRange(selectionIndex, selectionIndex);\n}\n\nfunction initialInputValueForActivation({\n activationSource,\n kind,\n value,\n}: {\n activationSource: DataCellActivationSource | undefined;\n kind: DataCellKind;\n value: DataCellValue;\n}) {\n if (\n activationSource?.kind !== \"keyboard\" ||\n activationSource.key.length !== 1\n ) {\n return formatDataCellEditValue(kind, value);\n }\n if (kind === \"text\") return activationSource.key;\n if (\n (kind === \"number\" || kind === \"integer\") &&\n /^[0-9.+-]$/.test(activationSource.key)\n ) {\n return activationSource.key;\n }\n return formatDataCellEditValue(kind, value);\n}\n\nexport function DataCellInputControl({\n kind,\n value,\n disabled = false,\n name,\n placeholder,\n className,\n draft,\n autoFocus,\n activationSource,\n session,\n onFocus,\n onBlur,\n onKeyDown,\n onClick,\n onMouseUp,\n onDoubleClick,\n ...props\n}: DataCellInputControlProps) {\n const initialInputValue = initialInputValueForActivation({\n activationSource,\n kind,\n value,\n });\n const [uncontrolledDraftValue, setUncontrolledDraftValue] =\n React.useState(initialInputValue);\n const inputRef = React.useRef(null);\n const initialInputValueRef = React.useRef(initialInputValue);\n const lastInputValueRef = React.useRef(initialInputValue);\n const inputValue = draft?.value ?? uncontrolledDraftValue;\n const openingContext = useDataCellOpeningContext(activationSource, {\n enabled: activationSource?.kind === \"pointer\",\n releaseAfterMicrotask: true,\n });\n const isDirty = React.useCallback(\n () => lastInputValueRef.current !== initialInputValueRef.current,\n [],\n );\n\n useKeyedMountEffect(\n joinEffectKey([activationSource, draft?.value, kind, value]),\n () => {\n if (draft?.value !== undefined) return;\n setUncontrolledDraftValue(\n initialInputValueForActivation({\n activationSource,\n kind,\n value,\n }),\n );\n },\n );\n\n useKeyedMountEffect(joinEffectKey([inputValue]), () => {\n lastInputValueRef.current = inputValue;\n });\n\n useKeyedLayoutEffect(joinEffectKey([activationSource, autoFocus]), () => {\n if (!autoFocus && !activationSource) return;\n focusDataCellTextInput(inputRef.current, activationSource);\n });\n\n const commitCurrentInputValue = React.useCallback(\n (\n input: HTMLInputElement | null,\n {\n endEditing = true,\n markFinished = true,\n onlyIfChanged = false,\n }: {\n endEditing?: boolean;\n markFinished?: boolean;\n onlyIfChanged?: boolean;\n } = {},\n ) => {\n const rawValue = input?.value ?? lastInputValueRef.current;\n const commitValue = parseDataCellInputValue({\n kind,\n value: rawValue,\n dateTimeZone: \"local\",\n previousValue: value,\n });\n session.commit(\n commitValue,\n getDataCellValueMeta({\n kind,\n value: rawValue,\n isBadInput: input?.validity.badInput ?? false,\n }),\n {\n endEditing,\n markFinished,\n shouldCommit: onlyIfChanged ? isDirty : undefined,\n },\n );\n },\n [isDirty, kind, session, value],\n );\n const commitCurrentInputValueRef = React.useRef(commitCurrentInputValue);\n\n useKeyedMountEffect(joinEffectKey([commitCurrentInputValue]), () => {\n commitCurrentInputValueRef.current = commitCurrentInputValue;\n });\n\n useMountEffect(() => () => {\n commitCurrentInputValueRef.current(inputRef.current, {\n endEditing: false,\n markFinished: false,\n onlyIfChanged: true,\n });\n });\n\n const inputType = inputTypeForDataCell(kind);\n const {\n id,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n ...rootProps\n } = props;\n\n return (\n {\n const nextValue = event.currentTarget.value;\n lastInputValueRef.current = nextValue;\n if (draft?.value === undefined) setUncontrolledDraftValue(nextValue);\n draft?.onChange?.(\n nextValue,\n getDataCellValueMeta({\n kind,\n value: nextValue,\n isBadInput: event.currentTarget.validity.badInput,\n }),\n );\n }}\n onFocus={onFocus}\n onBlur={(event) => {\n const rawValue = event.currentTarget.value;\n if (\n openingContext.shouldCancelDismiss({ kind: \"focus-out\" }) &&\n rawValue === initialInputValueRef.current\n ) {\n onBlur?.(event);\n return;\n }\n commitCurrentInputValue(event.currentTarget);\n onBlur?.(event);\n }}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) return;\n if (event.key === \"Enter\") {\n commitCurrentInputValue(event.currentTarget);\n event.currentTarget.blur();\n event.preventDefault();\n return;\n }\n if (event.key === \"Escape\") {\n session.cancel();\n event.currentTarget.blur();\n event.preventDefault();\n return;\n }\n }}\n onMouseUp={(event) => {\n onMouseUp?.(event);\n }}\n onClick={(event) => {\n onClick?.(event);\n }}\n onDoubleClick={onDoubleClick}\n />\n );\n}\n\nfunction inputTypeForDataCell(\n kind: DataCellKind,\n): React.HTMLInputTypeAttribute {\n if (kind === \"number\" || kind === \"integer\") return \"number\";\n return \"text\";\n}\n", "type": "registry:ui", "target": "@ui/data-cell-input-control.tsx" }, { "path": "registry/new-york-v4/ui/data-cell-text-activation.ts", "content": "import {\n createDataCellPointerActivationSource,\n type DataCellActivationSource,\n} from \"@/components/ui/data-cell-activation\";\nimport { getDataCellDisplayTextSelectionOffset } from \"@/components/ui/data-cell-text-hit-test\";\n\nexport function getDataCellTextPointerActivationSource({\n clientX,\n clientY,\n detail,\n displayElement,\n event,\n value,\n}: {\n clientX: number;\n clientY: number;\n detail: number;\n displayElement: HTMLElement | null;\n event?: Event;\n value: string | null | undefined;\n}): Extract {\n const activationSource = createDataCellPointerActivationSource({\n clientX,\n clientY,\n detail,\n event,\n });\n const textElement = displayElement?.querySelector(\n '[data-slot=\"data-cell-value\"]',\n );\n if (!textElement) return activationSource;\n activationSource.selectionOffset = getDataCellDisplayTextSelectionOffset({\n clientX,\n clientY,\n textElement,\n value: value === null || value === undefined ? \"\" : String(value),\n });\n return activationSource;\n}\n", "type": "registry:ui", "target": "@ui/data-cell-text-activation.ts" }, { "path": "registry/new-york-v4/ui/data-cell-text-hit-test.ts", "content": "import { measureNaturalWidth, prepareWithSegments } from \"@chenglou/pretext\";\n\ntype MeasurePrefixWidth = (value: string) => number;\ntype CachedTextMeasurement = {\n widthsByOffset: Map;\n};\n\nconst TEXT_MEASUREMENT_CACHE_LIMIT = 500;\nconst textMeasurementCache = new Map();\n\nexport function getMeasuredTextSelectionOffset({\n measurePrefixWidth,\n targetX,\n value,\n}: {\n measurePrefixWidth: MeasurePrefixWidth;\n targetX: number;\n value: string;\n}): number {\n if (value.length === 0) return 0;\n\n const boundaries = graphemeBoundaries(value);\n const lastIndex = boundaries.length - 1;\n const measuredWidths = new Map();\n const widthAtBoundary = (index: number) => {\n const offset = boundaries[index] ?? value.length;\n const cached = measuredWidths.get(offset);\n if (cached !== undefined) return cached;\n const width = safeMeasuredWidth(() =>\n measurePrefixWidth(value.slice(0, offset)),\n );\n measuredWidths.set(offset, width);\n return width;\n };\n const fullWidth = widthAtBoundary(lastIndex);\n if (targetX <= 0 || fullWidth <= 0) return 0;\n if (targetX >= fullWidth) return value.length;\n\n let low = 0;\n let high = lastIndex;\n while (low < high) {\n const mid = Math.floor((low + high) / 2);\n const width = widthAtBoundary(mid);\n if (width < targetX) low = mid + 1;\n else high = mid;\n }\n\n const nextIndex = low;\n const previousIndex = Math.max(0, nextIndex - 1);\n const previousWidth = widthAtBoundary(previousIndex);\n const nextWidth = widthAtBoundary(nextIndex);\n\n return targetX - previousWidth <= nextWidth - targetX\n ? (boundaries[previousIndex] ?? 0)\n : (boundaries[nextIndex] ?? value.length);\n}\n\nexport function getDataCellTextSelectionOffset({\n clientX,\n input,\n value,\n}: {\n clientX: number;\n input: HTMLInputElement;\n value: string;\n}): number {\n const valueLength = value.length;\n if (valueLength === 0) return 0;\n\n const rect = input.getBoundingClientRect();\n if (rect.width <= 0) return valueLength;\n\n const styles = globalThis.getComputedStyle(input);\n const paddingLeft = numericCssPixels(styles.paddingLeft);\n const paddingRight = numericCssPixels(styles.paddingRight);\n const contentLeft = rect.left + paddingLeft;\n const contentWidth = Math.max(1, rect.width - paddingLeft - paddingRight);\n const targetX = clientX - contentLeft + input.scrollLeft;\n\n if (!canUsePretextHitTest(styles)) {\n return getLinearTextSelectionOffset({\n contentWidth,\n targetX,\n valueLength,\n });\n }\n\n const font = styles.font;\n const letterSpacing = numericCssPixels(styles.letterSpacing);\n\n try {\n return getPretextTextSelectionOffset({\n font,\n letterSpacing,\n targetX,\n value,\n });\n } catch {\n return getLinearTextSelectionOffset({\n contentWidth,\n targetX,\n valueLength,\n });\n }\n}\n\nexport function getDataCellDisplayTextSelectionOffset({\n clientX,\n clientY: _clientY,\n textElement,\n value,\n}: {\n clientX: number;\n clientY: number;\n textElement: HTMLElement;\n value: string;\n}): number {\n return getDataCellTextSelectionOffsetFromElement({\n clientX,\n element: textElement,\n value,\n });\n}\n\nfunction getDataCellTextSelectionOffsetFromElement({\n clientX,\n element,\n value,\n}: {\n clientX: number;\n element: HTMLElement;\n value: string;\n}): number {\n const valueLength = value.length;\n if (valueLength === 0) return 0;\n\n const rect = element.getBoundingClientRect();\n if (rect.width <= 0) return valueLength;\n\n const styles = globalThis.getComputedStyle(element);\n const paddingLeft = numericCssPixels(styles.paddingLeft);\n const paddingRight = numericCssPixels(styles.paddingRight);\n const contentLeft = rect.left + paddingLeft;\n const contentWidth = Math.max(1, rect.width - paddingLeft - paddingRight);\n const targetX = clientX - contentLeft;\n\n if (!canUsePretextHitTest(styles)) {\n return getLinearTextSelectionOffset({\n contentWidth,\n targetX,\n valueLength,\n });\n }\n\n const font = styles.font;\n const letterSpacing = numericCssPixels(styles.letterSpacing);\n\n try {\n return getPretextTextSelectionOffset({\n font,\n letterSpacing,\n targetX,\n value,\n });\n } catch {\n return getLinearTextSelectionOffset({\n contentWidth,\n targetX,\n valueLength,\n });\n }\n}\n\nfunction getPretextTextSelectionOffset({\n font,\n letterSpacing,\n targetX,\n value,\n}: {\n font: string;\n letterSpacing: number;\n targetX: number;\n value: string;\n}): number {\n const measurement = cachedTextMeasurement({\n font,\n letterSpacing,\n value,\n });\n\n return getMeasuredTextSelectionOffset({\n value,\n targetX,\n measurePrefixWidth: (prefix) => {\n const offset = prefix.length;\n const cached = measurement.widthsByOffset.get(offset);\n if (cached !== undefined) return cached;\n const width = measureNaturalWidth(\n prepareWithSegments(prefix, font, {\n letterSpacing,\n whiteSpace: \"pre-wrap\",\n }),\n );\n measurement.widthsByOffset.set(offset, width);\n return width;\n },\n });\n}\n\nfunction cachedTextMeasurement({\n font,\n letterSpacing,\n value,\n}: {\n font: string;\n letterSpacing: number;\n value: string;\n}): CachedTextMeasurement {\n const key = `${font}\\n${letterSpacing}\\n${value}`;\n const cached = textMeasurementCache.get(key);\n if (cached) {\n textMeasurementCache.delete(key);\n textMeasurementCache.set(key, cached);\n return cached;\n }\n\n const measurement: CachedTextMeasurement = {\n widthsByOffset: new Map(),\n };\n textMeasurementCache.set(key, measurement);\n if (textMeasurementCache.size > TEXT_MEASUREMENT_CACHE_LIMIT) {\n const oldestKey = textMeasurementCache.keys().next().value;\n if (oldestKey !== undefined) textMeasurementCache.delete(oldestKey);\n }\n return measurement;\n}\n\nfunction getLinearTextSelectionOffset({\n contentWidth,\n targetX,\n valueLength,\n}: {\n contentWidth: number;\n targetX: number;\n valueLength: number;\n}): number {\n const ratio = Math.min(1, Math.max(0, targetX / contentWidth));\n return Math.min(valueLength, Math.max(0, Math.round(ratio * valueLength)));\n}\n\nfunction canUsePretextHitTest(styles: CSSStyleDeclaration): boolean {\n const direction = styles.direction || \"ltr\";\n const textAlign = styles.textAlign || \"start\";\n return (\n !isJsdomEnvironment() &&\n direction === \"ltr\" &&\n (textAlign === \"left\" || textAlign === \"start\" || textAlign === \"\") &&\n styles.font !== \"\"\n );\n}\n\nfunction isJsdomEnvironment(): boolean {\n return (\n globalThis.navigator?.userAgent.toLowerCase().includes(\"jsdom\") ?? false\n );\n}\n\nfunction graphemeBoundaries(value: string): number[] {\n if (typeof Intl !== \"undefined\" && \"Segmenter\" in Intl) {\n const boundaries = [0];\n const segmenter = new Intl.Segmenter(undefined, {\n granularity: \"grapheme\",\n });\n for (const segment of segmenter.segment(value)) {\n boundaries.push(segment.index + segment.segment.length);\n }\n return boundaries;\n }\n\n const boundaries = [0];\n let offset = 0;\n for (const codePoint of Array.from(value)) {\n offset += codePoint.length;\n boundaries.push(offset);\n }\n return boundaries;\n}\n\nfunction numericCssPixels(value: string): number {\n const parsed = Number.parseFloat(value);\n return Number.isFinite(parsed) ? parsed : 0;\n}\n\nfunction safeMeasuredWidth(measure: () => number): number {\n const width = measure();\n return Number.isFinite(width) ? Math.max(0, width) : 0;\n}\n", "type": "registry:ui", "target": "@ui/data-cell-text-hit-test.ts" }, { "path": "registry/new-york-v4/ui/data-cell-types.ts", "content": "import type * as React from \"react\";\n\nexport type DataCellKindModel = {\n text: {\n value: string | null;\n commitValue: string | null;\n };\n number: {\n value: number | string | null;\n commitValue: number | null;\n };\n integer: {\n value: number | string | null;\n commitValue: number | null;\n };\n boolean: {\n value: boolean | null;\n commitValue: boolean;\n };\n select: {\n value: string | null;\n commitValue: string | null;\n };\n date: {\n value: string | null;\n commitValue: string | null;\n };\n time: {\n value: string | null;\n commitValue: string | null;\n };\n \"date-time\": {\n value: string | null;\n commitValue: string | null;\n };\n};\n\nexport type DataCellKind = keyof DataCellKindModel;\n\nexport type DataCellValueForKind =\n DataCellKindModel[Kind][\"value\"];\nexport type DataCellCommitValueForKind =\n DataCellKindModel[Kind][\"commitValue\"];\nexport type DataCellValue = DataCellValueForKind | undefined;\nexport type DataCellCommitValue = DataCellCommitValueForKind;\nexport type DataCellDateTimeZone = \"local\" | \"preserve\" | \"utc\";\n\nexport type DataCellValueMeta = {\n kind: DataCellKind;\n rawValue: string;\n isEmpty: boolean;\n isValid: boolean;\n};\n\nexport type DataCellSelectOption = {\n value: string;\n label: React.ReactNode;\n disabled?: boolean;\n className?: string;\n};\n\nexport type DataCellCommitHandler = (\n value: DataCellCommitValue,\n meta: DataCellValueMeta,\n) => void;\n\ntype DataCellNativeProps = Omit<\n React.HTMLAttributes,\n \"children\" | \"defaultValue\" | \"onChange\"\n>;\n\ntype DataCellBaseProps = DataCellNativeProps & {\n kind: Kind;\n value?: DataCellValueForKind;\n editable?: boolean;\n active?: boolean;\n disabled?: boolean;\n name?: string;\n autoFocus?: boolean;\n onEditingEnd?: () => void;\n onActiveChange?: (active: boolean) => void;\n};\n\ntype DataCellPlaceholderProps = {\n placeholder?: string;\n};\n\ntype DataCellDraftProps = {\n draftValue?: string;\n onDraftValueChange?: (value: string, meta: DataCellValueMeta) => void;\n};\n\ntype DataCellOpenProps = {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n};\n\ntype DataCellFormatProps = {\n formatValue?: (\n value: DataCellValueForKind | undefined,\n meta: { kind: Kind },\n ) => React.ReactNode;\n};\n\ntype DataCellCommitProps = {\n onCommit?: (\n value: DataCellCommitValueForKind,\n meta: DataCellValueMeta,\n ) => void;\n};\n\ntype DataCellTextProps = DataCellBaseProps<\"text\"> &\n DataCellPlaceholderProps &\n DataCellDraftProps &\n DataCellFormatProps<\"text\"> &\n DataCellCommitProps<\"text\">;\n\ntype DataCellNumberProps = DataCellBaseProps<\"number\"> &\n DataCellPlaceholderProps &\n DataCellDraftProps &\n DataCellFormatProps<\"number\"> &\n DataCellCommitProps<\"number\">;\n\ntype DataCellIntegerProps = DataCellBaseProps<\"integer\"> &\n DataCellPlaceholderProps &\n DataCellDraftProps &\n DataCellFormatProps<\"integer\"> &\n DataCellCommitProps<\"integer\">;\n\ntype DataCellBooleanProps = DataCellBaseProps<\"boolean\"> &\n DataCellCommitProps<\"boolean\">;\n\ntype DataCellSelectProps = DataCellBaseProps<\"select\"> &\n DataCellPlaceholderProps &\n DataCellOpenProps &\n DataCellFormatProps<\"select\"> & {\n selectOptions: DataCellSelectOption[];\n } & DataCellCommitProps<\"select\">;\n\ntype DataCellPickerProps =\n DataCellBaseProps &\n DataCellPlaceholderProps &\n DataCellDraftProps &\n DataCellOpenProps &\n DataCellFormatProps & {\n dateTimeZone?: DataCellDateTimeZone;\n showPickerIcon?: boolean;\n } & DataCellCommitProps;\n\nexport type DataCellPropsByKind = {\n text: DataCellTextProps;\n number: DataCellNumberProps;\n integer: DataCellIntegerProps;\n boolean: DataCellBooleanProps;\n select: DataCellSelectProps;\n date: DataCellPickerProps<\"date\">;\n time: DataCellPickerProps<\"time\">;\n \"date-time\": DataCellPickerProps<\"date-time\">;\n};\n\nexport type DataCellPropsForKind =\n DataCellPropsByKind[Kind];\n\nexport type DataCellProps = DataCellPropsByKind[DataCellKind];\n", "type": "registry:ui", "target": "@ui/data-cell-types.ts" } ], "type": "registry:ui" }