kelt-ui-kit-react 1.8.3 → 1.8.4

package/src/form/Form.tsx

@@ -14,7 +14,7 @@ import { Input } from "./input/Input";
 import { TextArea } from "./textArea/TextArea";
 
 export type FormProps<
-  T extends { [key: string]: string | number | boolean | Date | string[] },
+  T extends { [key: string]: string | number | boolean | Date | string[] }
 > = {
   id?: string;
   className?: string;
@@ -49,7 +49,7 @@ export const DynamicForm = forwardRef(
       getValues?: () => FormValuesInterface<T>;
       updateFormValue?: (values: FormValuesInterface<T>) => void;
       setBtnDisabledSubmit?: (disabled: boolean) => void;
-    }>,
+    }>
   ) => {
     const [btnDisabledSubmit, setBtnDisabledSubmit] = useState(disabledSubmit);
     const [values, setValues] = useState<FormValuesInterface<T>>(() => {
@@ -67,7 +67,7 @@ export const DynamicForm = forwardRef(
     const handleChangeInput = useCallback(
       (
         event: React.ChangeEvent<HTMLInputElement>,
-        forminterface: FormInterface,
+        forminterface: FormInterface
       ) => {
         const { name, type, checked, value } = event.target;
         const newValue = type === "checkbox" ? checked : value;
@@ -84,7 +84,7 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange],
+      [onChange]
     );
     const handleChangeTextArea = useCallback(
       (name: string, value: string, forminterface: FormInterface) => {
@@ -100,14 +100,14 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange],
+      [onChange]
     );
     /** Gestion des <select> */
     const handleChangeSelect = useCallback(
       (
         newValue: string | string[],
         name: string,
-        forminterface: FormInterface,
+        forminterface: FormInterface
       ) => {
         if (forminterface.onChange) {
           forminterface.onChange(newValue, name);
@@ -119,7 +119,7 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange],
+      [onChange]
     );
 
     const handleSubmit = useCallback(
@@ -129,7 +129,7 @@ export const DynamicForm = forwardRef(
           onSubmit(values);
         }
       },
-      [onSubmit, values],
+      [onSubmit, values]
     );
 
     const resetForm = () => {
@@ -162,7 +162,7 @@ export const DynamicForm = forwardRef(
     const getValues = () => values;
 
     const updateFormValue: (values: FormValuesInterface<T>) => void = (
-      values,
+      values
     ) => {
       setValues((prevValues) => ({
         ...prevValues,
@@ -189,10 +189,10 @@ export const DynamicForm = forwardRef(
           {initialForm.map((v, key) => {
             const required = v.onRequired
               ? v.onRequired(v.value)
-              : (v.required ?? false);
+              : v.required ?? false;
             const disabled = v.onDisabled
               ? v.onDisabled(v.value)
-              : (v.disabled ?? false);
+              : v.disabled ?? false;
 
             return (
               <div
@@ -249,7 +249,6 @@ export const DynamicForm = forwardRef(
                     autoFocus={v.focus ?? false}
                     required={required}
                     step={v.step ?? "0.01"}
-                    disabledDebounce={true}
                     value={values[v.name] as string | number}
                     checked={
                       v.type === "checkbox" ? !!values[v.name] : undefined
@@ -276,5 +275,5 @@ export const DynamicForm = forwardRef(
         </div>
       </form>
     );
-  },
+  }
 );

package/src/form/form.css

@@ -4,12 +4,10 @@ input {
   border-radius: 4px;
   margin: 0.25rem 0 0.25rem 0;
   min-width: 250px;
-
   &:focus-visible {
-    outline: 0px;
+    outline: 1px solid #9696a7;
   }
 }
-
 input[type="checkbox"],
 input[type="radio"] {
   min-width: auto;
@@ -18,46 +16,38 @@ input[type="radio"] {
   height: 18px;
   width: 18px;
 }
-
 form {
   &.form-row {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
-
     .form-group {
       margin-right: 1rem;
       flex: 1;
       padding: 0;
-
       .input-container {
         min-width: auto;
-
         input {
           min-width: auto;
         }
       }
     }
   }
-
   label {
     font-weight: 600;
     font-size: 0.85rem;
     padding-bottom: 0.15rem;
   }
-
   .form-group-checkbox {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-top: 0.5rem;
-
     label {
       margin-right: 1rem;
       padding: 0;
     }
-
     input {
       min-width: auto;
       padding: 0;
@@ -66,8 +56,7 @@ form {
       width: 18px;
     }
   }
-
   button {
     margin-top: 1rem;
   }
-}
+}

package/src/form/form.enum.ts

@@ -8,7 +8,6 @@ export enum TypeInputEnum {
   CHECKBOX = "checkbox",
   RADIO = "radio",
   DATE = "date",
-  DATERANGE = "daterange",
   SELECT = "select",
   TEXTAREA = "textarea",
 }

package/src/form/input/Input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useState } from "react";
+import { forwardRef, useState } from "react";
 import { Icon } from "../../icon/Icon";
 import { TypeInputEnum } from "../form.enum";
 import "./input.css";
@@ -15,15 +15,12 @@ export interface InputProps {
   disabled?: boolean;
   autoFocus?: boolean;
   required?: boolean;
-  disabledDebounce?: boolean;
   minLength?: number;
   maxLength?: number;
-  width?: string;
   autoComplete?: string;
   step?: string;
   tabIndex?: number;
   checked?: boolean;
-  showClearButton?: boolean;
   handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
@@ -37,13 +34,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       name,
       type = TypeInputEnum.TEXT,
       value,
-      width,
       onInvalid,
       placeholder,
       className,
       inputMode,
       minLength,
-      disabledDebounce = false,
       maxLength,
       autoFocus = false,
       disabled = false,
@@ -52,61 +47,18 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       tabIndex = 0,
       step,
       checked,
-      showClearButton = false,
       onChange,
       onBlur,
       onClick,
       handleKeyDown,
     },
-    ref,
+    ref
   ) => {
     // Si le type est password, on utilise l'input de type password
     const [showPassword, setShowPassword] = useState(false);
-    const [localValue, setLocalValue] = useState(value ?? "");
-    const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    const triggerOnChange = (nextValue: string) => {
-      if (!onChange) return;
-
-      const syntheticEvent = {
-        target: { value: nextValue, name, id },
-        currentTarget: { value: nextValue, name, id },
-      } as unknown as React.ChangeEvent<HTMLInputElement>;
-
-      onChange(syntheticEvent);
-    };
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value; // 👈 capturer avant le setTimeout
-      setLocalValue(value);
-      if (!onChange) return;
-      if (disabledDebounce) {
-        onChange(e);
-        return;
-      }
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => {
-        onChange({ ...e, target: { ...e.target, value } }); // 👈 passer la valeur capturée
-      }, 300);
-    };
-
-    const handleClear = (e: React.MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation();
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      setLocalValue("");
-      triggerOnChange("");
-    };
-
-    const hasValue = String(localValue ?? "").length > 0;
-    const hasClearButtonSlot = showClearButton && type === TypeInputEnum.TEXT;
-    const canShowClearButton =
-      showClearButton && hasValue && !disabled && type === TypeInputEnum.TEXT;
 
     return (
-      <div
-        className={`input-container ${`input-container-${type}`} `}
-        style={{ width }}
-      >
+      <div className={`input-container ${`input-container-${type}`} `}>
         <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
 
         <input
@@ -116,7 +68,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           inputMode={inputMode ?? (type === "number" ? "numeric" : "text")}
           type={showPassword ? TypeInputEnum.TEXT : type}
           spellCheck="false"
-          value={localValue}
+          value={value}
           placeholder={placeholder}
           disabled={disabled}
           required={required}
@@ -126,7 +78,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           autoFocus={autoFocus}
           minLength={minLength}
           maxLength={maxLength}
-          onChange={handleChange}
+          onChange={onChange}
           checked={checked}
           onKeyDown={handleKeyDown}
           onBlur={onBlur}
@@ -134,16 +86,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             e.stopPropagation();
             onClick && onClick(e);
           }}
-          className={`input-field ${hasClearButtonSlot ? "with-clear-button" : ""} ${className ?? ""}`}
+          className={`input-field ${className ?? ""}`}
           onInvalid={onInvalid}
         />
 
-        {canShowClearButton && (
-          <div onClick={handleClear} className="input-clear-icon" role="button">
-            <Icon classIcon="bi-x-circle" />
-          </div>
-        )}
-
         {type === TypeInputEnum.PASSWORD && (
           <div
             onClick={() => setShowPassword(!showPassword)}
@@ -154,7 +100,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         )}
       </div>
     );
-  },
+  }
 );
 
 Input.displayName = "Input";

package/src/form/input/input.css

@@ -2,18 +2,15 @@
   position: relative;
   min-width: 250px;
   width: 100%;
-
   &.input-container-radio,
   &.input-container-checkbox {
     min-width: 10px;
     width: 10px;
-
     input {
       width: 10px;
       min-width: 10px;
     }
   }
-
   .input-password-icon {
     position: absolute;
     right: 10px;
@@ -22,27 +19,8 @@
     display: flex;
     align-items: center;
   }
-
-  .input-clear-icon {
-    position: absolute;
-    right: 8px;
-    width: 24px;
-    height: 100%;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 2;
-  }
-
-  .with-clear-button {
-    padding-right: 40px;
-  }
-
   input {
     width: 100%;
     font-size: 0.8rem;
-    box-sizing: border-box;
   }
-}
+}

package/src/form/inputNumber/InputNumber.tsx

@@ -8,8 +8,10 @@ export type InputNumberProps = {
   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;
@@ -17,7 +19,7 @@ export type InputNumberProps = {
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onChange?: (
     e: React.ChangeEvent<HTMLInputElement>,
-    valueFormat?: string
+    valueFormat?: string,
   ) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
@@ -38,13 +40,15 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       maxLength = 10,
       autoComplete = "off",
       tabIndex = 0,
+      inputMode = "numeric",
+      pattern,
       onChange,
       onBlur,
       onClick,
       onKeyDown,
       onFocus,
     },
-    ref
+    ref,
   ) => {
     const handleChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -62,7 +66,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
 
         onChange?.(e, newValue);
       },
-      [onChange, maxLength]
+      [onChange, maxLength],
     );
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -72,7 +76,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       // ✅ 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 === "," ||
@@ -105,8 +109,9 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
           required={required}
           autoFocus={autoFocus}
           autoComplete={autoComplete}
+          pattern={pattern}
           tabIndex={tabIndex}
-          inputMode="numeric" // mobile keyboard adaptatif
+          inputMode={inputMode} // mobile keyboard adaptatif
           spellCheck="false"
           className={`input-field ${className ?? ""}`}
           onChange={handleChange}
@@ -121,7 +126,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
         />
       </div>
     );
-  }
+  },
 );
 
 InputNumber.displayName = "InputNumber";

package/src/form/inputPrice/InputPrice.tsx

@@ -18,7 +18,7 @@ export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
       onChange,
       ...props
     },
-    ref
+    ref,
   ) => {
     const handleBlur = useCallback(() => {
       if (onChange) {
@@ -31,10 +31,12 @@ export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
       <InputNumber
         {...props}
         ref={ref}
+        pattern="[0-9]*[.,]?[0-9]*"
+        inputMode="decimal" // mobile keyboard adaptatif
         value={value ?? ""}
         onChange={(e) => onChange?.(e.target.value)}
         onBlur={handleBlur} // Force le formatage à 2 décimales en sortie
       />
     );
-  }
+  },
 );

package/src/icon/Icon.tsx

@@ -1,10 +1,6 @@
 import "./icon.css";
 import { IconInterface } from "./icon.interface";
 
-export const Icon = ({
-  classIcon,
-  size,
-  onClick,
-}: IconInterface): JSX.Element => {
-  return <i className={`bi ${classIcon} ${size ?? "sm"}`} onClick={onClick} />;
+export const Icon = ({ classIcon, size }: IconInterface): JSX.Element => {
+  return <i className={`bi ${classIcon} ${size ?? "sm"}`} />;
 };

package/src/icon/icon.interface.tsx

@@ -3,5 +3,4 @@ import { IconSizeEnum } from "./iconSize.enum";
 export interface IconInterface {
   classIcon: string;
   size?: IconSizeEnum;
-  onClick?: (e: React.MouseEvent) => void;
 }

package/src/index.ts

@@ -19,13 +19,11 @@ export { useIsMobile } from "./_core/hooks/useIsMobile";
 export { useToken } from "./_core/hooks/useToken";
 export { useValidate } from "./_core/hooks/useValidate";
 export { WidgetSupport } from "./_core/hooks/widgetSupport";
-
 export { ButtonAction } from "./action/ButtonAction";
 export { Badge } from "./badge/Badge";
 export { Button } from "./button/Button";
 export { ButtonActions } from "./button/buttonActions/ButtonActions";
 export { ButtonFile } from "./button/buttonFile/ButtonFile";
-export { ButtonFilters } from "./button/buttonFilters/ButtonFilters";
 export { Card } from "./card/Card";
 export { Carousel } from "./carousel/Carousel";
 export { Damier } from "./damier/Damier";

package/src/overlayPanel/OverlayPanel.tsx

@@ -23,15 +23,13 @@ export type PositionOverlay =
   | "bottomRight";
 
 export type OverlayPanelProps = {
-  referenceElement?: HTMLElement | HTMLTableElement;
+  referenceElement?: HTMLElement;
   coordonnees?: { top: number; left: number };
   position?: PositionOverlay;
   children: React.ReactNode;
   show?: boolean;
   id?: string;
-  className?: string;
   closeOverlay?: (close: boolean) => void;
-  usePortal?: boolean;
 };
 
 export const OverlayPanel = forwardRef(
@@ -42,19 +40,17 @@ export const OverlayPanel = forwardRef(
       coordonnees,
       children,
       show,
-      className,
       id,
       closeOverlay,
-      usePortal = true,
     }: OverlayPanelProps,
     ref: React.Ref<{
       setCoords?: (coords: { top: number; left: number }) => void;
-    }>,
+    }>
   ) => {
     const { activeOverlayId, setActiveOverlay } = useOverlayContext();
     const [isShow, setIsShow] = useState(show || false);
     const [coords, setCoords] = useState<{ top: number; left: number }>(
-      coordonnees ?? { top: 0, left: 0 },
+      coordonnees ?? { top: 0, left: 0 }
     );
     const boxRef = useRef<HTMLDivElement>(null);
     const overlayId = useId();
@@ -151,7 +147,7 @@ export const OverlayPanel = forwardRef(
           closeOverlay(false);
         }
       },
-      [closeOverlay, setActiveOverlay],
+      [closeOverlay, setActiveOverlay]
     );
     useEffect(() => {
       const handleClickOutside = (event: MouseEvent) => {
@@ -176,10 +172,10 @@ export const OverlayPanel = forwardRef(
 
     if (!isShow) return null;
 
-    const overlayContent = (
+    return ReactDOM.createPortal(
       <OverlayPanelStyled ref={boxRef} $top={coords.top} $left={coords.left}>
         <div
-          className={`overlayPanel ${className ? className : ""} ${
+          className={`overlayPanel ${
             coords.top > 0 || coords.left > 0 ? "visible" : "hide"
           }`}
         >
@@ -190,19 +186,10 @@ export const OverlayPanel = forwardRef(
           >
             <Icon classIcon="bi-x-lg" />
           </button>
-          <div onClick={(e) => e.stopPropagation()}>{children}</div>
+          {children}
         </div>
-      </OverlayPanelStyled>
+      </OverlayPanelStyled>,
+      document.body
     );
-
-    if (!usePortal) {
-      return (
-        <div className={`overlayPanel overlayPanel--no-portal `} ref={boxRef}>
-          <div onClick={(e) => e.stopPropagation()}>{children}</div>
-        </div>
-      );
-    }
-
-    return ReactDOM.createPortal(overlayContent, document.body);
-  },
+  }
 );

package/src/overlayPanel/overlay.context.tsx

@@ -7,11 +7,6 @@ interface OverlayContextType {
 
 const OverlayContext = createContext<OverlayContextType | undefined>(undefined);
 
-const defaultOverlayContext: OverlayContextType = {
-  activeOverlayId: null,
-  setActiveOverlay: () => {},
-};
-
 export const OverlayProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
@@ -26,5 +21,8 @@ export const OverlayProvider: React.FC<{ children: React.ReactNode }> = ({
 
 export const useOverlayContext = () => {
   const context = useContext(OverlayContext);
-  return context ?? defaultOverlayContext;
+  if (!context) {
+    throw new Error("useOverlayContext must be used within an OverlayProvider");
+  }
+  return context;
 };

package/src/overlayPanel/overlayPanel.css

@@ -1,26 +1,17 @@
 .overlayPanel {
   position: relative;
 
-  &.overlayPanel--no-portal {
-    position: absolute;
-    z-index: 14 !important;
-    width: 100%;
-  }
-
   &.hide {
     visibility: hidden;
   }
-
   &.visible {
     visibility: visible !important;
   }
-
   button {
     span {
       text-align: left;
     }
   }
-
   .toggle-btn {
     display: flex;
     justify-content: flex-end;
@@ -41,4 +32,4 @@
       font-size: 1rem;
     }
   }
-}
+}