kelt-ui-kit-react 1.8.2 → 1.8.3

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,6 +249,7 @@ 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
@@ -275,5 +276,5 @@ export const DynamicForm = forwardRef(
         </div>
       </form>
     );
-  }
+  },
 );

package/src/form/form.css

@@ -4,10 +4,12 @@ input {
   border-radius: 4px;
   margin: 0.25rem 0 0.25rem 0;
   min-width: 250px;
+
   &:focus-visible {
-    outline: 1px solid #9696a7;
+    outline: 0px;
   }
 }
+
 input[type="checkbox"],
 input[type="radio"] {
   min-width: auto;
@@ -16,38 +18,46 @@ 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;
@@ -56,7 +66,8 @@ form {
       width: 18px;
     }
   }
+
   button {
     margin-top: 1rem;
   }
-}
+}

package/src/form/form.enum.ts

@@ -8,6 +8,7 @@ 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, useState } from "react";
+import { forwardRef, useRef, useState } from "react";
 import { Icon } from "../../icon/Icon";
 import { TypeInputEnum } from "../form.enum";
 import "./input.css";
@@ -15,12 +15,15 @@ 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;
@@ -34,11 +37,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       name,
       type = TypeInputEnum.TEXT,
       value,
+      width,
       onInvalid,
       placeholder,
       className,
       inputMode,
       minLength,
+      disabledDebounce = false,
       maxLength,
       autoFocus = false,
       disabled = false,
@@ -47,18 +52,61 @@ 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}`} `}>
+      <div
+        className={`input-container ${`input-container-${type}`} `}
+        style={{ width }}
+      >
         <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
 
         <input
@@ -68,7 +116,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           inputMode={inputMode ?? (type === "number" ? "numeric" : "text")}
           type={showPassword ? TypeInputEnum.TEXT : type}
           spellCheck="false"
-          value={value}
+          value={localValue}
           placeholder={placeholder}
           disabled={disabled}
           required={required}
@@ -78,7 +126,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           autoFocus={autoFocus}
           minLength={minLength}
           maxLength={maxLength}
-          onChange={onChange}
+          onChange={handleChange}
           checked={checked}
           onKeyDown={handleKeyDown}
           onBlur={onBlur}
@@ -86,10 +134,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             e.stopPropagation();
             onClick && onClick(e);
           }}
-          className={`input-field ${className ?? ""}`}
+          className={`input-field ${hasClearButtonSlot ? "with-clear-button" : ""} ${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)}
@@ -100,7 +154,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 Input.displayName = "Input";

package/src/form/input/input.css

@@ -2,15 +2,18 @@
   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;
@@ -19,8 +22,27 @@
     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,10 +8,8 @@ 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;
@@ -19,7 +17,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;
@@ -40,15 +38,13 @@ 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>) => {
@@ -66,7 +62,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
 
         onChange?.(e, newValue);
       },
-      [onChange, maxLength],
+      [onChange, maxLength]
     );
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -76,7 +72,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 === "," ||
@@ -109,9 +105,8 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
           required={required}
           autoFocus={autoFocus}
           autoComplete={autoComplete}
-          pattern={pattern}
           tabIndex={tabIndex}
-          inputMode={inputMode} // mobile keyboard adaptatif
+          inputMode="numeric" // mobile keyboard adaptatif
           spellCheck="false"
           className={`input-field ${className ?? ""}`}
           onChange={handleChange}
@@ -126,7 +121,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,12 +31,10 @@ 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,6 +1,10 @@
 import "./icon.css";
 import { IconInterface } from "./icon.interface";
 
-export const Icon = ({ classIcon, size }: IconInterface): JSX.Element => {
-  return <i className={`bi ${classIcon} ${size ?? "sm"}`} />;
+export const Icon = ({
+  classIcon,
+  size,
+  onClick,
+}: IconInterface): JSX.Element => {
+  return <i className={`bi ${classIcon} ${size ?? "sm"}`} onClick={onClick} />;
 };

package/src/icon/icon.interface.tsx

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

package/src/index.ts

@@ -19,11 +19,13 @@ 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,13 +23,15 @@ export type PositionOverlay =
   | "bottomRight";
 
 export type OverlayPanelProps = {
-  referenceElement?: HTMLElement;
+  referenceElement?: HTMLElement | HTMLTableElement;
   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(
@@ -40,17 +42,19 @@ 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();
@@ -147,7 +151,7 @@ export const OverlayPanel = forwardRef(
           closeOverlay(false);
         }
       },
-      [closeOverlay, setActiveOverlay]
+      [closeOverlay, setActiveOverlay],
     );
     useEffect(() => {
       const handleClickOutside = (event: MouseEvent) => {
@@ -172,10 +176,10 @@ export const OverlayPanel = forwardRef(
 
     if (!isShow) return null;
 
-    return ReactDOM.createPortal(
+    const overlayContent = (
       <OverlayPanelStyled ref={boxRef} $top={coords.top} $left={coords.left}>
         <div
-          className={`overlayPanel ${
+          className={`overlayPanel ${className ? className : ""} ${
             coords.top > 0 || coords.left > 0 ? "visible" : "hide"
           }`}
         >
@@ -186,10 +190,19 @@ export const OverlayPanel = forwardRef(
           >
             <Icon classIcon="bi-x-lg" />
           </button>
-          {children}
+          <div onClick={(e) => e.stopPropagation()}>{children}</div>
         </div>
-      </OverlayPanelStyled>,
-      document.body
+      </OverlayPanelStyled>
     );
-  }
+
+    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,6 +7,11 @@ interface OverlayContextType {
 
 const OverlayContext = createContext<OverlayContextType | undefined>(undefined);
 
+const defaultOverlayContext: OverlayContextType = {
+  activeOverlayId: null,
+  setActiveOverlay: () => {},
+};
+
 export const OverlayProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
@@ -21,8 +26,5 @@ export const OverlayProvider: React.FC<{ children: React.ReactNode }> = ({
 
 export const useOverlayContext = () => {
   const context = useContext(OverlayContext);
-  if (!context) {
-    throw new Error("useOverlayContext must be used within an OverlayProvider");
-  }
-  return context;
+  return context ?? defaultOverlayContext;
 };

package/src/overlayPanel/overlayPanel.css

@@ -1,17 +1,26 @@
 .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;
@@ -32,4 +41,4 @@
       font-size: 1rem;
     }
   }
-}
+}