kelt-ui-kit-react 2.0.1 → 2.0.3

package/src/expands/expands.css

@@ -39,12 +39,10 @@
       height: 300px;
       flex: 1;
       min-height: 200px;
-
       .expand-header {
-        background-color: color-mix(in srgb, var(--primary-color), white 5%);
+        background-color: #1d3758;
         color: #fff;
       }
-
       .expand-header-custom {
         .expand-header--children {
           display: flex;
@@ -67,7 +65,6 @@
       padding: 15px;
       color: #333;
       background-color: #fff;
-
       &.expand-header-custom {
         margin-bottom: 1rem;
       }
@@ -80,15 +77,13 @@
       .expand-header-title-left {
         margin-right: 0.5rem;
         text-transform: uppercase;
-        font-size: 18px;
+        font-size: 14px;
         font-weight: 500;
       }
     }
-
     & .expand-footer {
       padding: 15px;
     }
-
     & .expand-body {
       display: none;
       flex: 1;
@@ -99,4 +94,4 @@
       flex-direction: column;
     }
   }
-}
+}

package/src/form/Form.tsx

@@ -9,38 +9,12 @@ import { Button } from "../button/Button";
 import { Icon } from "../icon/Icon";
 import { Select } from "../select/Select"; // <--- ton composant
 import "./form.css";
-import {
-  FormInterface,
-  FormMode,
-  FormValuesInterface,
-} from "./form.interface";
+import { FormInterface, FormValuesInterface } from "./form.interface";
 import { Input } from "./input/Input";
-import { InputPrice } from "./inputPrice/InputPrice";
 import { TextArea } from "./textArea/TextArea";
-import { Col } from "../grid/col/Col";
-import { Row } from "../grid/row/Row";
-import { TypeInputEnum } from "./form.enum";
-
-const euroFormatter = new Intl.NumberFormat("fr-FR", {
-  style: "currency",
-  currency: "EUR",
-});
-
-type FormFieldContainerProps = {
-  field: FormInterface;
-  gridEnabled: boolean;
-  children: React.ReactNode;
-};
-
-const FormFieldContainer = ({
-  field,
-  gridEnabled,
-  children,
-}: FormFieldContainerProps) =>
-  gridEnabled ? <Col {...field.col}>{children}</Col> : <>{children}</>;
 
 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;
@@ -50,7 +24,6 @@ export type FormProps<
   children?: React.ReactNode;
   initialForm: FormInterface[];
   disabledSubmit?: boolean;
-  mode?: FormMode;
   onSubmit?: (values: FormValuesInterface<T>) => void;
   onChange?: (values: FormValuesInterface<T>) => void;
 };
@@ -67,7 +40,6 @@ export const DynamicForm = forwardRef(
       onChange,
       hideSubmit,
       disabledSubmit = false,
-      mode = "edit",
       className,
     }: FormProps<T>,
     ref: React.Ref<{
@@ -77,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>>(() => {
@@ -95,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;
@@ -112,7 +84,7 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange]
+      [onChange],
     );
     const handleChangeTextArea = useCallback(
       (name: string, value: string, forminterface: FormInterface) => {
@@ -128,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);
@@ -147,7 +119,7 @@ export const DynamicForm = forwardRef(
           return updatedValues;
         });
       },
-      [onChange]
+      [onChange],
     );
 
     const handleSubmit = useCallback(
@@ -157,7 +129,7 @@ export const DynamicForm = forwardRef(
           onSubmit(values);
         }
       },
-      [onSubmit, values]
+      [onSubmit, values],
     );
 
     const resetForm = () => {
@@ -190,7 +162,7 @@ export const DynamicForm = forwardRef(
     const getValues = () => values;
 
     const updateFormValue: (values: FormValuesInterface<T>) => void = (
-      values
+      values,
     ) => {
       setValues((prevValues) => ({
         ...prevValues,
@@ -207,52 +179,6 @@ export const DynamicForm = forwardRef(
       setBtnDisabledSubmit,
     }));
 
-    const gridEnabled = initialForm.some((field) => field.col !== undefined);
-    const FieldsContainer = gridEnabled ? Row : React.Fragment;
-    const getReadValue = (field: FormInterface): React.ReactNode => {
-      const value = values[field.name];
-
-      if (field.formatReadValue) {
-        return field.formatReadValue(value ?? "");
-      }
-
-      if (field.type === TypeInputEnum.SELECT) {
-        const selectedValues = Array.isArray(value) ? value : [value];
-        const labels = selectedValues
-          .map(
-            (selectedValue) =>
-              field.options?.find((option) => option.value === selectedValue)
-                ?.label ?? selectedValue,
-          )
-          .filter((selectedValue) => selectedValue !== undefined);
-
-        return labels.join(", ") || "-";
-      }
-
-      if (field.type === TypeInputEnum.PRICE) {
-        const amount = Number(value);
-        return value === "" || value === undefined || Number.isNaN(amount)
-          ? "-"
-          : euroFormatter.format(amount);
-      }
-
-      if (typeof value === "boolean") {
-        return value ? "Oui" : "Non";
-      }
-
-      if (value instanceof Date) {
-        return value.toLocaleDateString();
-      }
-
-      if (Array.isArray(value)) {
-        return value.join(", ") || "-";
-      }
-
-      return value === undefined || value === null || value === ""
-        ? "-"
-        : String(value);
-    };
-
     return (
       <form
         autoComplete={autoComplete ?? "off"}
@@ -260,36 +186,25 @@ export const DynamicForm = forwardRef(
         className={className ?? ""}
       >
         <div className="form-content">
-          <FieldsContainer>
           {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 (
-              <FormFieldContainer key={key} field={v} gridEnabled={gridEnabled}>
-                <div
-                  className={`d-flex flex-column ${
-                    v.className ?? ""
-                  } form-group form-group-${v.type}`}
-                >
+              <div
+                key={key}
+                className={`d-flex flex-column ${
+                  v.className ?? ""
+                } form-group form-group-${v.type}`}
+              >
                 {v.label && <label>{v.label}</label>}
                 {v.icon && <Icon classIcon={v.icon} />}
 
-                {mode === "read" ? (
-                  <div
-                    className={`form-read-value ${
-                      v.type === TypeInputEnum.TEXTAREA
-                        ? "form-read-value--textarea"
-                        : ""
-                    }`}
-                  >
-                    {getReadValue(v)}
-                  </div>
-                ) : v.type === "select" ? (
+                {v.type === "select" ? (
                   <Select
                     id={v.id ?? v.name}
                     label={undefined}
@@ -297,6 +212,8 @@ export const DynamicForm = forwardRef(
                     options={v.options ?? []}
                     disabled={disabled}
                     multiple={v.multiple}
+                    usePortal={v.usePortal}
+                    searchable={v.searchable}
                     value={values[v.name] as any}
                     required={required}
                     defaultValue={v.value as string | string[]}
@@ -321,22 +238,6 @@ export const DynamicForm = forwardRef(
                       handleChangeTextArea(name, value, v)
                     }
                   />
-                ) : v.type === TypeInputEnum.PRICE ? (
-                  <InputPrice
-                    id={v.id ?? v.name}
-                    ref={(el) => (inputRefs.current[v.name] = el)}
-                    name={v.name}
-                    placeholder={v.placeholder ?? ""}
-                    autoComplete={v.autoComplete}
-                    tabIndex={0}
-                    disabled={disabled}
-                    autoFocus={v.focus ?? false}
-                    required={required}
-                    value={String(values[v.name] ?? "")}
-                    onChange={(value) =>
-                      handleChangeTextArea(v.name, value, v)
-                    }
-                  />
                 ) : (
                   <Input
                     id={v.id ?? v.name}
@@ -350,6 +251,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
@@ -360,15 +262,13 @@ export const DynamicForm = forwardRef(
                     onInvalid={v.onInvalid ? v.onInvalid : undefined}
                   />
                 )}
-                </div>
-              </FormFieldContainer>
+              </div>
             );
           })}
           {children}
-          </FieldsContainer>
         </div>
         <div className="d-flex justify-content-end form-footer">
-          {mode === "edit" && !hideSubmit && (
+          {!hideSubmit && (
             <Button
               id={`button-${id}`}
               disabled={btnDisabledSubmit}
@@ -378,5 +278,5 @@ export const DynamicForm = forwardRef(
         </div>
       </form>
     );
-  }
+  },
 );

package/src/form/Form.view.tsx

@@ -18,14 +18,12 @@ export const FormView = (): JSX.Element => {
       name: "nom",
       type: TypeInputEnum.PASSWORD,
       required: true,
-      col: { xs: 12, md: 6 },
     },
     {
       value: 30,
       label: "Age",
       name: "age",
       type: TypeInputEnum.NUMBER,
-      col: { xs: 12, md: 6 },
     },
     {
       value: false,
@@ -57,11 +55,5 @@ export const FormView = (): JSX.Element => {
   const handleSubmit = (values: FormValuesInterface<FormData>) => {
     console.log("Form Submitted: ", values);
   };
-  return (
-    <DynamicForm
-      mode="edit"
-      onSubmit={handleSubmit}
-      initialForm={initialValues}
-    />
-  );
+  return <DynamicForm onSubmit={handleSubmit} initialForm={initialValues} />;
 };

package/src/form/form.css

@@ -6,7 +6,7 @@ input {
   min-width: 250px;
 
   &:focus-visible {
-    outline: 1px solid #9696a7;
+    outline: 0px;
   }
 }
 
@@ -70,41 +70,4 @@ form {
   button {
     margin-top: 1rem;
   }
-
-  .form-read-value {
-    width: 100%;
-    min-width: 250px;
-    min-height: calc(1em + 1rem + 2px);
-    box-sizing: border-box;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    margin: 0.25rem 0;
-    padding: 0.5rem 1rem;
-    font-size: 0.8rem;
-    line-height: normal;
-    overflow-wrap: anywhere;
-  }
-
-  .form-read-value--textarea {
-    min-height: 3.25rem;
-    white-space: pre-wrap;
-  }
-
-  .grid-row {
-
-    .form-group,
-    .input-container,
-    .select-container,
-    .form-read-value {
-      min-width: 0;
-    }
-
-    input:not([type="checkbox"]):not([type="radio"]),
-    .form-control-textarea,
-    .form-read-value {
-      box-sizing: border-box;
-      min-width: 0;
-      width: 100%;
-    }
-  }
 }

package/src/form/form.enum.ts

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

package/src/form/form.interface.tsx

@@ -1,7 +1,4 @@
 import { TypeInputEnum } from "./form.enum";
-import { GridBreakpoints } from "../grid/grid.interface";
-
-export type FormMode = "read" | "edit";
 
 export type FormValuesInterface<
   T extends { [key: string]: string | number | boolean | Date | string[] }
@@ -26,12 +23,10 @@ export interface FormInterface {
   condition?: FormCondition;
   icon?: string;
   multiple?: boolean;
+  usePortal?: boolean;
+  searchable?: boolean;
   options?: { value: string; label: string }[]; // <--- pour les <option>
   className?: string;
-  col?: GridBreakpoints;
-  formatReadValue?: (
-    value: string | number | boolean | Date | string[]
-  ) => React.ReactNode;
   autoComplete?: string;
   step?: string;
   onChange?: (

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;
   }
-}
+}