kelt-ui-kit-react 2.0.8 → 2.0.9

package/src/form/input/Input.tsx

@@ -1,106 +1,146 @@
-import { forwardRef, useState } from "react";
-import { Icon } from "../../icon/Icon";
-import { TypeInputEnum } from "../form.enum";
-import "./input.css";
-
-export interface InputProps {
-  id: string; // obligatoire pour le label for
-  name: string;
-  type?: TypeInputEnum;
-  onInvalid?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  value?: string | number;
-  placeholder?: string;
-  className?: string;
-  inputMode?: "text" | "numeric" | "decimal" | "email" | "tel" | "search";
-  disabled?: boolean;
-  autoFocus?: boolean;
-  required?: boolean;
-  minLength?: number;
-  maxLength?: number;
-  autoComplete?: string;
-  step?: string;
-  tabIndex?: number;
-  checked?: boolean;
-  handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      id,
-      name,
-      type = TypeInputEnum.TEXT,
-      value,
-      onInvalid,
-      placeholder,
-      className,
-      inputMode,
-      minLength,
-      maxLength,
-      autoFocus = false,
-      disabled = false,
-      required = false,
-      autoComplete,
-      tabIndex = 0,
-      step,
-      checked,
-      onChange,
-      onBlur,
-      onClick,
-      handleKeyDown,
-    },
-    ref
-  ) => {
-    // Si le type est password, on utilise l'input de type password
-    const [showPassword, setShowPassword] = useState(false);
-
-    return (
-      <div className={`input-container ${`input-container-${type}`} `}>
-        <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
-
-        <input
-          ref={ref} // 👈 le vrai ref est bien transmis au HTMLInputElement
-          id={id}
-          name={name}
-          inputMode={inputMode ?? (type === "number" ? "numeric" : "text")}
-          type={showPassword ? TypeInputEnum.TEXT : type}
-          spellCheck="false"
-          value={value}
-          placeholder={placeholder}
-          disabled={disabled}
-          required={required}
-          autoComplete={autoComplete ?? "new-password"}
-          step={step}
-          tabIndex={tabIndex}
-          autoFocus={autoFocus}
-          minLength={minLength}
-          maxLength={maxLength}
-          onChange={onChange}
-          checked={checked}
-          onKeyDown={handleKeyDown}
-          onBlur={onBlur}
-          onClick={(e) => {
-            e.stopPropagation();
-            onClick && onClick(e);
-          }}
-          className={`input-field ${className ?? ""}`}
-          onInvalid={onInvalid}
-        />
-
-        {type === TypeInputEnum.PASSWORD && (
-          <div
-            onClick={() => setShowPassword(!showPassword)}
-            className="input-password-icon"
-          >
-            <Icon classIcon={showPassword ? "bi-eye-slash" : "bi-eye"} />
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-Input.displayName = "Input";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { Icon } from "../../icon/Icon";
+import { TypeInputEnum } from "../form.enum";
+import "./input.css";
+
+export interface InputProps {
+  id: string; // obligatoire pour le label for
+  name: string;
+  type?: TypeInputEnum;
+  onInvalid?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  value?: string | number;
+  placeholder?: string;
+  className?: string;
+  inputMode?: "text" | "numeric" | "decimal" | "email" | "tel" | "search";
+  disabled?: boolean;
+  autoFocus?: boolean;
+  required?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  autoComplete?: string;
+  step?: string;
+  tabIndex?: number;
+  checked?: boolean;
+  handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+  width?: string;
+  disabledDebounce?: boolean;
+  showClearButton?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      id,
+      name,
+      type = TypeInputEnum.TEXT,
+      value,
+      onInvalid,
+      placeholder,
+      className,
+      inputMode,
+      minLength,
+      maxLength,
+      autoFocus = false,
+      disabled = false,
+      required = false,
+      autoComplete,
+      tabIndex = 0,
+      step,
+      checked,
+      onChange,
+      onBlur,
+      onClick,
+      handleKeyDown,
+      width,
+      disabledDebounce = true,
+      showClearButton = false,
+    },
+    ref
+  ) => {
+    // Si le type est password, on utilise l'input de type password
+    const [showPassword, setShowPassword] = useState(false);
+    const [localValue, setLocalValue] = useState(value ?? "");
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const timerRef = useRef<ReturnType<typeof setTimeout>>();
+    useEffect(() => {
+      clearTimeout(timerRef.current);
+      setLocalValue(value ?? "");
+    }, [value]);
+    useEffect(() => () => clearTimeout(timerRef.current), []);
+
+    return (
+      <div className={`input-container ${`input-container-${type}`} `} style={{ width }}>
+        <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
+
+        <input
+          ref={(element) => {
+            inputRef.current = element;
+            if (typeof ref === "function") ref(element);
+            else if (ref) ref.current = element;
+          }}
+          id={id}
+          name={name}
+          inputMode={inputMode ?? (type === "number" ? "numeric" : "text")}
+          type={showPassword ? TypeInputEnum.TEXT : type}
+          spellCheck="false"
+          value={disabledDebounce ? value : localValue}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          autoComplete={autoComplete ?? "new-password"}
+          step={step}
+          tabIndex={tabIndex}
+          autoFocus={autoFocus}
+          minLength={minLength}
+          maxLength={maxLength}
+          onChange={(event) => {
+            clearTimeout(timerRef.current);
+            if (disabledDebounce || type === TypeInputEnum.CHECKBOX || type === TypeInputEnum.RADIO) {
+              onChange?.(event);
+            } else {
+              setLocalValue(event.target.value);
+              timerRef.current = setTimeout(() => onChange?.(event), 300);
+            }
+          }}
+          checked={checked}
+          onKeyDown={handleKeyDown}
+          onBlur={onBlur}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick && onClick(e);
+          }}
+          className={`input-field ${className ?? ""}`}
+          onInvalid={onInvalid}
+        />
+        {showClearButton && !disabled && String(value ?? localValue).length > 0 && (
+          <button type="button" className="input-clear-btn" aria-label={`Effacer ${name}`}
+            onClick={(event) => {
+              event.stopPropagation();
+              clearTimeout(timerRef.current);
+              const input = inputRef.current;
+              if (!input) return;
+              const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+              if (!setter) throw new Error("HTMLInputElement value setter is unavailable");
+              setter.call(input, "");
+              input.dispatchEvent(new Event("input", { bubbles: true }));
+              input.focus();
+            }}><Icon classIcon="bi-x" /></button>
+        )}
+
+        {type === TypeInputEnum.PASSWORD && (
+          <div
+            onClick={() => setShowPassword(!showPassword)}
+            className="input-password-icon"
+          >
+            <Icon classIcon={showPassword ? "bi-eye-slash" : "bi-eye"} />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";

package/src/form/input/input.css

@@ -1,30 +1,40 @@
-.input-container {
-  position: relative;
-  min-width: 250px;
-  width: 100%;
-
-  &.input-container-radio,
-  &.input-container-checkbox {
-    min-width: 10px;
-    width: 10px;
-
-    input {
-      width: 20px;
-      min-width: 10px;
-    }
-  }
-
-  .input-password-icon {
-    position: absolute;
-    right: 10px;
-    height: 100%;
-    top: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  input {
-    width: 100%;
-    font-size: 0.8rem;
-  }
+.input-container {
+  position: relative;
+  min-width: 250px;
+  width: 100%;
+
+  &.input-container-radio,
+  &.input-container-checkbox {
+    min-width: 10px;
+    width: 10px;
+
+    input {
+      width: 20px;
+      min-width: 10px;
+    }
+  }
+
+  .input-password-icon {
+    position: absolute;
+    right: 10px;
+    height: 100%;
+    top: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  input {
+    width: 100%;
+    font-size: 0.8rem;
+  }
+}
+.input-container .input-clear-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  min-width: 0;
+  padding: 2px;
+  background: transparent;
+  color: inherit;
 }

package/src/form/inputNumber/InputNumber.tsx

@@ -1,132 +1,132 @@
-import { forwardRef, useCallback } from "react";
-import { TypeInputEnum } from "../form.enum";
-import "../input/input.css";
-
-export type InputNumberProps = {
-  id: string;
-  name: string;
-  value?: string; // ⚠️ string pour gérer la saisie manuelle
-  placeholder?: string;
-  className?: string;
-  pattern?: string; // regex pour validation (ex: "^-?\\d*[.,]?\\d*$" pour nombre décimal)
-  disabled?: boolean;
-  required?: boolean;
-  inputMode?: "numeric" | "decimal";
-  autoFocus?: boolean;
-  maxLength?: number;
-  autoComplete?: string;
-  tabIndex?: number;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onChange?: (
-    e: React.ChangeEvent<HTMLInputElement>,
-    valueFormat?: string,
-  ) => void;
-  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
-  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
-};
-
-export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
-  (
-    {
-      id,
-      name,
-      value = "",
-      placeholder,
-      className,
-      disabled = false,
-      required = false,
-      autoFocus = false,
-      maxLength = 10,
-      autoComplete = "off",
-      tabIndex = 0,
-      inputMode = "numeric",
-      pattern,
-      onChange,
-      onBlur,
-      onClick,
-      onKeyDown,
-      onFocus,
-    },
-    ref,
-  ) => {
-    const handleChange = useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        let newValue = e.target.value.replace(",", ".");
-
-        // ✅ Autoriser les chiffres, . , et - (mais - seulement au début)
-        if (!/^-?\d*[.,]?\d*$/.test(newValue) && newValue !== "") {
-          return; // saisie invalide → on ignore
-        }
-
-        // ✅ Empêcher plus de maxLength
-        if (maxLength && newValue.length > maxLength) {
-          return;
-        }
-
-        onChange?.(e, newValue);
-      },
-      [onChange, maxLength],
-    );
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (onKeyDown) {
-        onKeyDown(e);
-      }
-      // ✅ Autoriser chiffres, contrôle, ., , et -
-      const allowed =
-        /[0-9]|Backspace|Delete|ArrowLeft|ArrowRight|Tab|Enter|Home|End/.test(
-          e.key,
-        ) ||
-        e.key === "." ||
-        e.key === "," ||
-        e.key === "-";
-
-      if (!allowed) {
-        e.preventDefault();
-        return;
-      }
-
-      // ❌ Interdire plusieurs "-" ou "-" ailleurs que début
-      if (e.key === "-") {
-        const cursorPos = (e.target as HTMLInputElement).selectionStart ?? 0;
-        if (cursorPos !== 0 || value.includes("-")) {
-          e.preventDefault();
-        }
-      }
-    };
-
-    return (
-      <div className="input-container input-container-number">
-        <input
-          ref={ref}
-          id={id}
-          name={name}
-          type={TypeInputEnum.TEXT} // reste en text pour éviter les comportements natifs bizarres
-          value={value}
-          placeholder={placeholder}
-          disabled={disabled}
-          required={required}
-          autoFocus={autoFocus}
-          autoComplete={autoComplete}
-          pattern={pattern}
-          tabIndex={tabIndex}
-          inputMode={inputMode} // mobile keyboard adaptatif
-          spellCheck="false"
-          className={`input-field ${className ?? ""}`}
-          onChange={handleChange}
-          onWheel={(e) => e.currentTarget.blur()}
-          onKeyDown={handleKeyDown}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onClick={(e) => {
-            e.stopPropagation();
-            onClick?.(e);
-          }}
-        />
-      </div>
-    );
-  },
-);
-
-InputNumber.displayName = "InputNumber";
+import { forwardRef, useCallback } from "react";
+import { TypeInputEnum } from "../form.enum";
+import "../input/input.css";
+
+export type InputNumberProps = {
+  id: string;
+  name: string;
+  value?: string; // ⚠️ string pour gérer la saisie manuelle
+  placeholder?: string;
+  className?: string;
+  pattern?: string; // regex pour validation (ex: "^-?\\d*[.,]?\\d*$" pour nombre décimal)
+  disabled?: boolean;
+  required?: boolean;
+  inputMode?: "numeric" | "decimal";
+  autoFocus?: boolean;
+  maxLength?: number;
+  autoComplete?: string;
+  tabIndex?: number;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange?: (
+    e: React.ChangeEvent<HTMLInputElement>,
+    valueFormat?: string,
+  ) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+};
+
+export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
+  (
+    {
+      id,
+      name,
+      value = "",
+      placeholder,
+      className,
+      disabled = false,
+      required = false,
+      autoFocus = false,
+      maxLength = 10,
+      autoComplete = "off",
+      tabIndex = 0,
+      inputMode = "numeric",
+      pattern,
+      onChange,
+      onBlur,
+      onClick,
+      onKeyDown,
+      onFocus,
+    },
+    ref,
+  ) => {
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        let newValue = e.target.value.replace(",", ".");
+
+        // ✅ Autoriser les chiffres, . , et - (mais - seulement au début)
+        if (!/^-?\d*[.,]?\d*$/.test(newValue) && newValue !== "") {
+          return; // saisie invalide → on ignore
+        }
+
+        // ✅ Empêcher plus de maxLength
+        if (maxLength && newValue.length > maxLength) {
+          return;
+        }
+
+        onChange?.(e, newValue);
+      },
+      [onChange, maxLength],
+    );
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+      // ✅ Autoriser chiffres, contrôle, ., , et -
+      const allowed =
+        /[0-9]|Backspace|Delete|ArrowLeft|ArrowRight|Tab|Enter|Home|End/.test(
+          e.key,
+        ) ||
+        e.key === "." ||
+        e.key === "," ||
+        e.key === "-";
+
+      if (!allowed) {
+        e.preventDefault();
+        return;
+      }
+
+      // ❌ Interdire plusieurs "-" ou "-" ailleurs que début
+      if (e.key === "-") {
+        const cursorPos = (e.target as HTMLInputElement).selectionStart ?? 0;
+        if (cursorPos !== 0 || value.includes("-")) {
+          e.preventDefault();
+        }
+      }
+    };
+
+    return (
+      <div className="input-container input-container-number">
+        <input
+          ref={ref}
+          id={id}
+          name={name}
+          type={TypeInputEnum.TEXT} // reste en text pour éviter les comportements natifs bizarres
+          value={value}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
+          pattern={pattern}
+          tabIndex={tabIndex}
+          inputMode={inputMode} // mobile keyboard adaptatif
+          spellCheck="false"
+          className={`input-field ${className ?? ""}`}
+          onChange={handleChange}
+          onWheel={(e) => e.currentTarget.blur()}
+          onKeyDown={handleKeyDown}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick?.(e);
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+InputNumber.displayName = "InputNumber";

package/src/form/inputNumber/InputNumber.view.tsx

@@ -1,15 +1,15 @@
-import { useState } from "react";
-import { InputNumber } from "./InputNumber";
-
-export const InputNumberView = () => {
-  const [value, setValue] = useState("");
-  return (
-    <InputNumber
-      id="input-number-example"
-      name="inputNumber"
-      placeholder="Enter a number"
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-    />
-  );
-};
+import { useState } from "react";
+import { InputNumber } from "./InputNumber";
+
+export const InputNumberView = () => {
+  const [value, setValue] = useState("");
+  return (
+    <InputNumber
+      id="input-number-example"
+      name="inputNumber"
+      placeholder="Enter a number"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};