Function EditableCellInner

packages/@react-spectrum/s2/src/TableView.tsx:1626–1857

(
  props: EditableCellProps & {isFocusVisible: boolean; cellRef: RefObject<HTMLDivElement>}
)

]);

function EditableCellInner(
  props: EditableCellProps & {isFocusVisible: boolean; cellRef: RefObject<HTMLDivElement>}
) {
  let {
    children,
    align,
    renderEditing,
    isSaving,
    onSubmit,
    isFocusVisible,
    cellRef,
    action,
    onCancel
  } = props;
  let [isOpen, setIsOpen] = useState(false);
  let popoverRef = useRef<HTMLDivElement>(null);
  let formRef = useRef<HTMLFormElement>(null);
  let [triggerWidth, setTriggerWidth] = useState(0);
  let [tableWidth, setTableWidth] = useState(0);
  let [verticalOffset, setVerticalOffset] = useState(0);
  let tableVisualOptions = useContext(InternalTableContext);
  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
  let dialogRef = useRef<DOMRefValue<HTMLElement>>(null);

  let {density} = useContext(InternalTableContext);
  let size: 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = 'M';
  if (density === 'compact') {
    size = 'S';
  } else if (density === 'spacious') {
    size = 'L';
  }

  // Popover positioning
  useLayoutEffect(() => {
    if (!isOpen) {
      return;
    }
    let width = cellRef.current?.clientWidth || 0;
    let cell = cellRef.current;
    let boundingRect = cell?.parentElement?.getBoundingClientRect();
    let verticalOffset = (boundingRect?.top ?? 0) - (boundingRect?.bottom ?? 0);

    let tableWidth = cellRef.current?.closest('[role="grid"],[role="treegrid"]')?.clientWidth || 0;
    setTriggerWidth(width);
    setVerticalOffset(verticalOffset);
    setTableWidth(tableWidth);
  }, [cellRef, density, isOpen]);

  // Auto select the entire text range of the autofocused input on overlay opening
  // Maybe replace with FocusScope or one of those utilities
  useEffect(() => {
    if (isOpen) {
      let activeElement = getActiveElement(getOwnerDocument(formRef.current));
      if (
        activeElement &&
        nodeContains(formRef.current, activeElement) &&
        // not going to handle contenteditable https://stackoverflow.com/questions/6139107/programmatically-select-text-in-a-contenteditable-html-element
        // seems like an edge case anyways