aplance-ui 1.4.0 → 1.5.0

package/registry/components/ui/input-fields/input/input.tsx

@@ -1,348 +1,348 @@
-import {
-  type ComponentProps,
-  useCallback,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from "react";
-import clsx from "clsx";
-import {
-  IconKey,
-  IconKeyOff,
-  IconSearch,
-  IconX,
-  IconCalendar,
-  IconClock,
-} from "@tabler/icons-react";
-import sCommon from "../common/input-field-common.module.css";
-import sButton from "../../button/button.module.css";
-import s from "../common/input-field-native.module.css";
-import { FieldMessage } from "../common/field-message/field-message";
-import { Icon } from "../../../primitives/icon/icon";
-import type { BaseInputFieldProps } from "../common/types";
-
-export type InputType =
-  | "text"
-  | "email"
-  | "tel"
-  | "url"
-  | "password"
-  | "search"
-  | "number"
-  | "file"
-  | "radio"
-  | "date"
-  | "month"
-  | "week"
-  | "time"
-  | "datetime-local"
-  | "checkbox"
-  | "color"
-  | "range";
-
-const styledInputTypes: readonly InputType[] = [
-  "text",
-  "email",
-  "tel",
-  "url",
-  "password",
-  "search",
-  "number",
-  "file",
-  "date",
-  "month",
-  "week",
-  "time",
-  "datetime-local",
-] as const;
-
-const clearableInputTypes: readonly InputType[] = [
-  "text",
-  "email",
-  "tel",
-  "url",
-  "password",
-  "search",
-  "number",
-  "file",
-] as const;
-
-const fitWidthInputTypes: readonly InputType[] = [
-  "checkbox",
-  "radio",
-  "color",
-] as const;
-const dateInputTypes: readonly InputType[] = [
-  "date",
-  "month",
-  "week",
-  "datetime-local",
-] as const;
-
-type BaseProps = BaseInputFieldProps & {
-  type?: InputType;
-  onClear?: () => void;
-  showClear?: boolean;
-};
-
-export type InputProps = Omit<ComponentProps<"input">, "type"> & BaseProps;
-
-export const Input = ({
-  type = "text",
-  label,
-  errors,
-  info,
-  className,
-  style,
-  value,
-  layout = "default",
-  layoutDirection = "default",
-  ref,
-  onClear,
-  showClear = false,
-  onChange,
-  buttonStyle = "none",
-  iconStart,
-  iconEnd,
-  ...props
-}: InputProps) => {
-  const [eyeVisible, setEyeVisible] = useState(false);
-
-  // Derive initial hasValue from controlled value or defaultValue.
-  // IMPORTANT: do NOT call setHasValue inside a ref callback - it triggers
-  // a re-render which creates a new ref callback, which React treats as a
-  // changed ref, repeating the cycle indefinitely (infinite loop).
-  const [hasValue, setHasValue] = useState(() => {
-    if (value !== undefined && value !== null && value !== "") return true;
-    const dv = props.defaultValue;
-    if (dv !== undefined && dv !== null && dv !== "") return true;
-    return false;
-  });
-
-  // Sync hasValue when controlled value changes externally (e.g. form reset)
-  useEffect(() => {
-    if (value !== undefined) {
-      setHasValue(String(value).length > 0);
-    }
-  }, [value]);
-
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const isPassword = type === "password";
-  const isSearch = type === "search";
-
-  const inputType = isPassword && eyeVisible ? "text" : type;
-  // useId() guarantees a stable, unique id per Input instance. Falling back
-  // to `name` previously broke radio/checkbox siblings (they share a name,
-  // so every label's htmlFor pointed to the first input in the DOM).
-  const generatedId = useId();
-  const inputId = props.id ?? generatedId;
-
-  const showPasswordToggle = isPassword && hasValue;
-  const showClearButton =
-    showClear && hasValue && clearableInputTypes.includes(type);
-
-  const stylesToApplyFields = styledInputTypes.includes(type);
-  const stylesFitWidth = fitWidthInputTypes.includes(type);
-  const hasButtonStyle = buttonStyle !== "none";
-  const buttonToneClass = hasButtonStyle
-    ? sButton[`tone_${buttonStyle}`]
-    : undefined;
-
-  const isDateFamily = dateInputTypes.includes(type);
-  const isTimeFamily = type === "time";
-
-  const showDateCalendarIcon = isDateFamily && !iconEnd;
-  const showTimeClockIcon = isTimeFamily && !iconEnd;
-
-  const startActionCount = iconStart ? 1 : isSearch ? 1 : 0;
-  const endActionCount = [
-    showClearButton,
-    showPasswordToggle,
-    showDateCalendarIcon,
-    showTimeClockIcon,
-    iconEnd,
-  ].filter(Boolean).length;
-
-  const dynamicInputStyle = {
-    ...style,
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setHasValue(e.target.value.length > 0);
-    onChange?.(e);
-  };
-
-  // A programmatic value set (e.g. react-hook-form populating a field on reset)
-  // sets the DOM value via the ref WITHOUT firing onChange, so `hasValue` can lag
-  // the real value and the reveal/clear actions stay hidden on a pre-filled
-  // field. Re-sync from the actual value on focus so they appear as soon as the
-  // field is interacted with.
-  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-    setHasValue(e.target.value.length > 0);
-    props.onFocus?.(e);
-  };
-
-  const handleClear = () => {
-    const element = inputRef.current;
-    if (!element) return;
-
-    if (onClear) {
-      onClear();
-      return;
-    }
-
-    if (onChange) {
-      element.value = "";
-      setHasValue(false);
-      const event = {
-        target: element,
-        currentTarget: element,
-      } as React.ChangeEvent<HTMLInputElement>;
-      onChange(event);
-      element.focus();
-      return;
-    }
-
-    element.value = "";
-    setHasValue(false);
-    element.focus();
-  };
-
-  // Stable ref callback - memoized so React doesn't treat it as a new ref
-  // on every render. Does NOT call setState (would cause infinite loop).
-  const refCallback = useCallback(
-    (element: HTMLInputElement | null) => {
-      inputRef.current = element;
-      if (ref) {
-        if (typeof ref === "function") {
-          ref(element);
-        } else {
-          ref.current = element;
-        }
-      }
-    },
-    [ref],
-  );
-
-  return (
-    <div className={clsx(sCommon.container, className)} style={style}>
-      <div
-        className={clsx(
-          sCommon.field_container,
-          layout !== "default" && sCommon[layout],
-          layout !== "default" &&
-            layoutDirection !== "default" &&
-            sCommon[layoutDirection],
-        )}
-      >
-        {label && (
-          <label className={sCommon.label} htmlFor={inputId}>
-            {label}
-          </label>
-        )}
-        <div
-          className={clsx(
-            sCommon.field_wrapper,
-            s.native_field_wrapper,
-            hasButtonStyle && sCommon.field_wrapper_variant,
-            hasButtonStyle && buttonToneClass,
-            stylesFitWidth && sCommon.field_wrapper_fit,
-          )}
-          data-start-actions={
-            startActionCount > 0 ? startActionCount : undefined
-          }
-          data-end-actions={
-            endActionCount > 0 ? Math.min(3, endActionCount) : undefined
-          }
-        >
-          {iconStart ? (
-            <div className={clsx(sCommon.icon_start)}>{iconStart}</div>
-          ) : isSearch ? (
-            <Icon className={clsx(sCommon.icon_start)}>
-              <IconSearch />
-            </Icon>
-          ) : null}
-
-          <input
-            id={inputId}
-            name={props.name}
-            type={inputType}
-            value={value}
-            ref={refCallback}
-            className={clsx(
-              stylesToApplyFields &&
-                buttonStyle === "none" &&
-                sCommon.field_default,
-              stylesToApplyFields &&
-                hasButtonStyle && [
-                  sCommon.field_full_width,
-                  sCommon.field_cursor_text,
-                  sCommon.field_button_variant,
-                  buttonToneClass,
-                  sButton.base,
-                  sButton[buttonStyle],
-                  sButton.input_focus,
-                ],
-            )}
-            style={dynamicInputStyle}
-            {...props}
-            onChange={handleInputChange}
-            onFocus={handleFocus}
-          />
-
-          <div className={clsx(sCommon.action_end_wrapper)}>
-            {showClearButton && (
-              <Icon onClick={handleClear} aria-label="Clear input">
-                <IconX />
-              </Icon>
-            )}
-            {showPasswordToggle && (
-              <Icon
-                onClick={(e) => {
-                  e.preventDefault();
-                  setEyeVisible((v) => !v);
-                }}
-                aria-label={eyeVisible ? "Hide password" : "Show password"}
-              >
-                {eyeVisible ? <IconKeyOff /> : <IconKey />}
-              </Icon>
-            )}
-            {showDateCalendarIcon && (
-              <Icon
-                onClick={() => {
-                  try {
-                    inputRef.current?.showPicker();
-                  } catch {
-                    // showPicker is not supported in all browsers.
-                  }
-                }}
-                clickable
-              >
-                <IconCalendar />
-              </Icon>
-            )}
-            {showTimeClockIcon && (
-              <Icon
-                onClick={() => {
-                  try {
-                    inputRef.current?.showPicker();
-                  } catch {
-                    // showPicker is not supported in all browsers.
-                  }
-                }}
-                clickable
-              >
-                <IconClock />
-              </Icon>
-            )}
-            {iconEnd}
-          </div>
-        </div>
-      </div>
-
-      <FieldMessage errors={errors} info={info} />
-    </div>
-  );
-};
+import {
+  type ComponentProps,
+  useCallback,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import clsx from "clsx";
+import {
+  IconKey,
+  IconKeyOff,
+  IconSearch,
+  IconX,
+  IconCalendar,
+  IconClock,
+} from "@tabler/icons-react";
+import sCommon from "../common/input-field-common.module.css";
+import sButton from "../../button/button.module.css";
+import s from "../common/input-field-native.module.css";
+import { FieldMessage } from "../common/field-message/field-message";
+import { Icon } from "../../../primitives/icon/icon";
+import type { BaseInputFieldProps } from "../common/types";
+
+export type InputType =
+  | "text"
+  | "email"
+  | "tel"
+  | "url"
+  | "password"
+  | "search"
+  | "number"
+  | "file"
+  | "radio"
+  | "date"
+  | "month"
+  | "week"
+  | "time"
+  | "datetime-local"
+  | "checkbox"
+  | "color"
+  | "range";
+
+const styledInputTypes: readonly InputType[] = [
+  "text",
+  "email",
+  "tel",
+  "url",
+  "password",
+  "search",
+  "number",
+  "file",
+  "date",
+  "month",
+  "week",
+  "time",
+  "datetime-local",
+] as const;
+
+const clearableInputTypes: readonly InputType[] = [
+  "text",
+  "email",
+  "tel",
+  "url",
+  "password",
+  "search",
+  "number",
+  "file",
+] as const;
+
+const fitWidthInputTypes: readonly InputType[] = [
+  "checkbox",
+  "radio",
+  "color",
+] as const;
+const dateInputTypes: readonly InputType[] = [
+  "date",
+  "month",
+  "week",
+  "datetime-local",
+] as const;
+
+type BaseProps = BaseInputFieldProps & {
+  type?: InputType;
+  onClear?: () => void;
+  showClear?: boolean;
+};
+
+export type InputProps = Omit<ComponentProps<"input">, "type"> & BaseProps;
+
+export const Input = ({
+  type = "text",
+  label,
+  errors,
+  info,
+  className,
+  style,
+  value,
+  layout = "default",
+  layoutDirection = "default",
+  ref,
+  onClear,
+  showClear = false,
+  onChange,
+  buttonStyle = "none",
+  iconStart,
+  iconEnd,
+  ...props
+}: InputProps) => {
+  const [eyeVisible, setEyeVisible] = useState(false);
+
+  // Derive initial hasValue from controlled value or defaultValue.
+  // IMPORTANT: do NOT call setHasValue inside a ref callback - it triggers
+  // a re-render which creates a new ref callback, which React treats as a
+  // changed ref, repeating the cycle indefinitely (infinite loop).
+  const [hasValue, setHasValue] = useState(() => {
+    if (value !== undefined && value !== null && value !== "") return true;
+    const dv = props.defaultValue;
+    if (dv !== undefined && dv !== null && dv !== "") return true;
+    return false;
+  });
+
+  // Sync hasValue when controlled value changes externally (e.g. form reset),
+  // in the render that sees the change.
+  const [seenValue, setSeenValue] = useState(value);
+  if (!Object.is(value, seenValue)) {
+    setSeenValue(value);
+    setHasValue(value !== undefined && String(value).length > 0);
+  }
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const isPassword = type === "password";
+  const isSearch = type === "search";
+
+  const inputType = isPassword && eyeVisible ? "text" : type;
+  // useId() guarantees a stable, unique id per Input instance. Falling back
+  // to `name` previously broke radio/checkbox siblings (they share a name,
+  // so every label's htmlFor pointed to the first input in the DOM).
+  const generatedId = useId();
+  const inputId = props.id ?? generatedId;
+
+  const showPasswordToggle = isPassword && hasValue;
+  const showClearButton =
+    showClear && hasValue && clearableInputTypes.includes(type);
+
+  const stylesToApplyFields = styledInputTypes.includes(type);
+  const stylesFitWidth = fitWidthInputTypes.includes(type);
+  const hasButtonStyle = buttonStyle !== "none";
+  const buttonToneClass = hasButtonStyle
+    ? sButton[`tone_${buttonStyle}`]
+    : undefined;
+
+  const isDateFamily = dateInputTypes.includes(type);
+  const isTimeFamily = type === "time";
+
+  const showDateCalendarIcon = isDateFamily && !iconEnd;
+  const showTimeClockIcon = isTimeFamily && !iconEnd;
+
+  const startActionCount = iconStart ? 1 : isSearch ? 1 : 0;
+  const endActionCount = [
+    showClearButton,
+    showPasswordToggle,
+    showDateCalendarIcon,
+    showTimeClockIcon,
+    iconEnd,
+  ].filter(Boolean).length;
+
+  const dynamicInputStyle = {
+    ...style,
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setHasValue(e.target.value.length > 0);
+    onChange?.(e);
+  };
+
+  // A programmatic value set (e.g. react-hook-form populating a field on reset)
+  // sets the DOM value via the ref WITHOUT firing onChange, so `hasValue` can lag
+  // the real value and the reveal/clear actions stay hidden on a pre-filled
+  // field. Re-sync from the actual value on focus so they appear as soon as the
+  // field is interacted with.
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    setHasValue(e.target.value.length > 0);
+    props.onFocus?.(e);
+  };
+
+  const handleClear = () => {
+    const element = inputRef.current;
+    if (!element) return;
+
+    if (onClear) {
+      onClear();
+      return;
+    }
+
+    if (onChange) {
+      element.value = "";
+      setHasValue(false);
+      const event = {
+        target: element,
+        currentTarget: element,
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange(event);
+      element.focus();
+      return;
+    }
+
+    element.value = "";
+    setHasValue(false);
+    element.focus();
+  };
+
+  // Stable ref callback - memoized so React doesn't treat it as a new ref
+  // on every render. Does NOT call setState (would cause infinite loop).
+  const refCallback = useCallback(
+    (element: HTMLInputElement | null) => {
+      inputRef.current = element;
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(element);
+        } else {
+          ref.current = element;
+        }
+      }
+    },
+    [ref],
+  );
+
+  return (
+    <div className={clsx(sCommon.container, className)} style={style}>
+      <div
+        className={clsx(
+          sCommon.field_container,
+          layout !== "default" && sCommon[layout],
+          layout !== "default" &&
+            layoutDirection !== "default" &&
+            sCommon[layoutDirection],
+        )}
+      >
+        {label && (
+          <label className={sCommon.label} htmlFor={inputId}>
+            {label}
+          </label>
+        )}
+        <div
+          className={clsx(
+            sCommon.field_wrapper,
+            s.native_field_wrapper,
+            hasButtonStyle && sCommon.field_wrapper_variant,
+            hasButtonStyle && buttonToneClass,
+            stylesFitWidth && sCommon.field_wrapper_fit,
+          )}
+          data-start-actions={
+            startActionCount > 0 ? startActionCount : undefined
+          }
+          data-end-actions={
+            endActionCount > 0 ? Math.min(3, endActionCount) : undefined
+          }
+        >
+          {iconStart ? (
+            <div className={clsx(sCommon.icon_start)}>{iconStart}</div>
+          ) : isSearch ? (
+            <Icon className={clsx(sCommon.icon_start)}>
+              <IconSearch />
+            </Icon>
+          ) : null}
+
+          <input
+            id={inputId}
+            name={props.name}
+            type={inputType}
+            value={value}
+            ref={refCallback}
+            className={clsx(
+              stylesToApplyFields &&
+                buttonStyle === "none" &&
+                sCommon.field_default,
+              stylesToApplyFields &&
+                hasButtonStyle && [
+                  sCommon.field_full_width,
+                  sCommon.field_cursor_text,
+                  sCommon.field_button_variant,
+                  buttonToneClass,
+                  sButton.base,
+                  sButton[buttonStyle],
+                  sButton.input_focus,
+                ],
+            )}
+            style={dynamicInputStyle}
+            {...props}
+            onChange={handleInputChange}
+            onFocus={handleFocus}
+          />
+
+          <div className={clsx(sCommon.action_end_wrapper)}>
+            {showClearButton && (
+              <Icon onClick={handleClear} aria-label="Clear input">
+                <IconX />
+              </Icon>
+            )}
+            {showPasswordToggle && (
+              <Icon
+                onClick={(e) => {
+                  e.preventDefault();
+                  setEyeVisible((v) => !v);
+                }}
+                aria-label={eyeVisible ? "Hide password" : "Show password"}
+              >
+                {eyeVisible ? <IconKeyOff /> : <IconKey />}
+              </Icon>
+            )}
+            {showDateCalendarIcon && (
+              <Icon
+                onClick={() => {
+                  try {
+                    inputRef.current?.showPicker();
+                  } catch {
+                    // showPicker is not supported in all browsers.
+                  }
+                }}
+                clickable
+              >
+                <IconCalendar />
+              </Icon>
+            )}
+            {showTimeClockIcon && (
+              <Icon
+                onClick={() => {
+                  try {
+                    inputRef.current?.showPicker();
+                  } catch {
+                    // showPicker is not supported in all browsers.
+                  }
+                }}
+                clickable
+              >
+                <IconClock />
+              </Icon>
+            )}
+            {iconEnd}
+          </div>
+        </div>
+      </div>
+
+      <FieldMessage errors={errors} info={info} />
+    </div>
+  );
+};