visually-hidden-input

1"use client";
2 
3import * as React from "react";
4 
5type InputValue = string[] | string;
6 
7interface VisuallyHiddenInputProps<T = InputValue>
8  extends Omit<
9    React.InputHTMLAttributes<HTMLInputElement>,
10    "value" | "checked" | "onReset"
11  > {
12  value?: T;
13  checked?: boolean;
14  control: HTMLElement | null;
15  bubbles?: boolean;
16}
17 
18function VisuallyHiddenInput<T = InputValue>(
19  props: VisuallyHiddenInputProps<T>,
20) {
21  const {
22    control,
23    value,
24    checked,
25    bubbles = true,
26    type = "hidden",
27    style,
28    ...inputProps
29  } = props;
30 
31  const isCheckInput = React.useMemo(
32    () => type === "checkbox" || type === "radio" || type === "switch",
33    [type],
34  );
35  const inputRef = React.useRef<HTMLInputElement>(null);
36 
37  const prevValueRef = React.useRef<{
38    value: T | boolean | undefined;
39    previous: T | boolean | undefined;
40  }>({
41    value: isCheckInput ? checked : value,
42    previous: isCheckInput ? checked : value,
43  });
44 
45  const prevValue = React.useMemo(() => {
46    const currentValue = isCheckInput ? checked : value;
47    if (prevValueRef.current.value !== currentValue) {
48      prevValueRef.current.previous = prevValueRef.current.value;
49      prevValueRef.current.value = currentValue;
50    }
51    return prevValueRef.current.previous;
52  }, [isCheckInput, value, checked]);
53 
54  const [controlSize, setControlSize] = React.useState<{
55    width?: number;
56    height?: number;
57  }>({});
58 
59  React.useLayoutEffect(() => {
60    if (!control) {
61      setControlSize({});
62      return;
63    }
64 
65    setControlSize({
66      width: control.offsetWidth,
67      height: control.offsetHeight,
68    });
69 
70    if (typeof window === "undefined") return;
71 
72    const resizeObserver = new ResizeObserver((entries) => {
73      if (!Array.isArray(entries) || !entries.length) return;
74 
75      const entry = entries[0];
76      if (!entry) return;
77 
78      let width: number;
79      let height: number;
80 
81      if ("borderBoxSize" in entry) {
82        const borderSizeEntry = entry.borderBoxSize;
83        const borderSize = Array.isArray(borderSizeEntry)
84          ? borderSizeEntry[0]
85          : borderSizeEntry;
86        width = borderSize.inlineSize;
87        height = borderSize.blockSize;
88      } else {
89        width = control.offsetWidth;
90        height = control.offsetHeight;
91      }
92 
93      setControlSize({ width, height });
94    });
95 
96    resizeObserver.observe(control, { box: "border-box" });
97    return () => {
98      resizeObserver.disconnect();
99    };
100  }, [control]);
101 
102// … truncated