kelt-ui-kit-react 1.2.8 → 1.3.1

package/dist/search/Search.d.ts

@@ -13,7 +13,7 @@ interface SearchProps {
 }
 interface FormData {
     recherche: string;
-    [key: string]: string | number | boolean | Date;
+    [key: string]: string | number | boolean | Date | string[];
 }
 export declare const Search: import('react').ForwardRefExoticComponent<SearchProps & import('react').RefAttributes<{
     clearInput: (name: string) => void;

package/dist/select/Select.d.ts

@@ -5,11 +5,13 @@ export interface SelectProps {
     label?: string;
     title?: string;
     disabled?: boolean;
-    defaultValue?: string;
-    value?: string;
+    defaultValue?: string | string[];
+    multiple?: boolean;
+    value?: string | string[];
     className?: string;
     options: SelectOptionInterface[];
+    onChangeMultiple?: (value: string[]) => void;
     onChange?: (value: string) => void;
     placeholder?: string;
 }
-export declare const Select: ({ id, label, options, className, disabled, defaultValue, onChange, value, placeholder, }: SelectProps) => JSX.Element;
+export declare const Select: ({ id, label, options, className, disabled, multiple, defaultValue, onChange, onChangeMultiple, value, placeholder, }: SelectProps) => JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.2.8",
+  "version": "1.3.1",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/form/Form.tsx

@@ -7,11 +7,13 @@ import React, {
 } from "react";
 import { Button } from "../button/Button";
 import { Icon } from "../icon/Icon";
+import { Select } from "../select/Select"; // <--- ton composant
 import "./form.css";
 import { FormInterface, FormValuesInterface } from "./form.interface";
+import { Input } from "./input/Input";
 
 export type FormProps<
-  T extends { [key: string]: string | number | boolean | Date }
+  T extends { [key: string]: string | number | boolean | Date | string[] }
 > = {
   className?: string;
   title?: string;
@@ -22,7 +24,7 @@ export type FormProps<
 };
 
 export const DynamicForm = forwardRef(
-  <T extends { [key: string]: string | number | boolean | Date }>(
+  <T extends { [key: string]: string | number | boolean | Date | string[] }>(
     {
       initialForm,
       title,
@@ -48,27 +50,44 @@ export const DynamicForm = forwardRef(
       return initialValues;
     });
 
-    // Stocker les références des inputs
     const inputRefs = useRef<{ [key: string]: HTMLInputElement | null }>({});
 
-    const handleChange = useCallback(
+    /** Gestion des <input> */
+    const handleChangeInput = useCallback(
       (
         event: React.ChangeEvent<HTMLInputElement>,
         forminterface: FormInterface
       ) => {
-        const { name, value, type, checked } = event.target;
+        const { name, type, checked, value } = event.target;
+        const newValue = type === "checkbox" ? checked : value;
+
         if (forminterface.onChange) {
-          forminterface.onChange(value, name);
+          forminterface.onChange(newValue, name);
         }
+
         setValues((prevValues) => {
-          const currentValues = prevValues || {};
-          const updatedValues = {
-            ...currentValues,
-            [name]: type === "checkbox" ? checked : value,
-          };
-          if (onChange) {
-            onChange(updatedValues);
-          }
+          const updatedValues = { ...prevValues, [name]: newValue };
+          if (onChange) onChange(updatedValues);
+          return updatedValues;
+        });
+      },
+      [onChange]
+    );
+
+    /** Gestion des <select> */
+    const handleChangeSelect = useCallback(
+      (
+        newValue: string | string[],
+        name: string,
+        forminterface: FormInterface
+      ) => {
+        if (forminterface.onChange) {
+          forminterface.onChange(newValue, name);
+        }
+
+        setValues((prevValues) => {
+          const updatedValues = { ...prevValues, [name]: newValue };
+          if (onChange) onChange(updatedValues);
           return updatedValues;
         });
       },
@@ -103,7 +122,6 @@ export const DynamicForm = forwardRef(
       }));
     }, []);
 
-    // Fonction pour donner le focus à l'élément qui devait initialement l'avoir
     const focusInitialElement = () => {
       const focusedField = initialForm.find((field) => field.focus);
       if (focusedField && inputRefs.current[focusedField.name]) {
@@ -112,7 +130,9 @@ export const DynamicForm = forwardRef(
         }, 500);
       }
     };
+
     const getValues = () => values;
+
     const updateFormValue: (values: FormValuesInterface<T>) => void = (
       values
     ) => {
@@ -121,6 +141,7 @@ export const DynamicForm = forwardRef(
         ...values,
       }));
     };
+
     useImperativeHandle(ref, () => ({
       resetForm,
       clearInput,
@@ -138,6 +159,7 @@ export const DynamicForm = forwardRef(
           const disabled = v.onDisabled
             ? v.onDisabled(v.value)
             : v.disabled ?? false;
+
           return (
             <div
               key={key}
@@ -146,24 +168,44 @@ export const DynamicForm = forwardRef(
               {v.label && <label>{v.label}</label>}
               {v.icon && <Icon classIcon={v.icon} />}
 
-              <input
-                ref={(el) => (inputRefs.current[v.name] = el)}
-                name={v.name}
-                type={v.type}
-                placeholder={v.placeholder ?? ""}
-                autoComplete={v.autoComplete ?? "on"}
-                tabIndex={0}
-                disabled={disabled}
-                autoFocus={v.focus ?? false}
-                required={required}
-                step={v.step ?? "0.01"}
-                value={values && (values[v.name] as string | number)}
-                checked={v.type === "checkbox" ? !!values[v.name] : undefined}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  handleChange(e, v)
-                }
-                onInvalid={v.onInvalid ? v.onInvalid : undefined}
-              />
+              {v.type === "select" ? (
+                <Select
+                  id={v.name}
+                  label={undefined}
+                  options={v.options ?? []}
+                  disabled={disabled}
+                  multiple={v.multiple}
+                  value={values[v.name] as any}
+                  defaultValue={v.value as string | string[]}
+                  placeholder={v.placeholder}
+                  onChangeMultiple={(newValue) =>
+                    handleChangeSelect(newValue, v.name, v)
+                  }
+                  onChange={(newValue) =>
+                    handleChangeSelect(newValue, v.name, v)
+                  }
+                />
+              ) : (
+                <Input
+                  id={v.name}
+                  ref={(el) => (inputRefs.current[v.name] = el)}
+                  name={v.name}
+                  type={v.type}
+                  placeholder={v.placeholder ?? ""}
+                  autoComplete={v.autoComplete ?? "off"}
+                  tabIndex={0}
+                  disabled={disabled}
+                  autoFocus={v.focus ?? false}
+                  required={required}
+                  step={v.step ?? "0.01"}
+                  value={values[v.name] as string | number}
+                  checked={v.type === "checkbox" ? !!values[v.name] : undefined}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleChangeInput(e, v)
+                  }
+                  onInvalid={v.onInvalid ? v.onInvalid : undefined}
+                />
+              )}
             </div>
           );
         })}

package/src/form/Form.view.tsx

@@ -7,7 +7,7 @@ interface FormData {
   age: number;
   validate: boolean;
   password: string;
-  [key: string]: string | number | boolean | Date; // Signature d'index ajoutée
+  [key: string]: string | number | boolean | Date | string[]; // Signature d'index ajoutée
 }
 export const FormView = (): JSX.Element => {
   const initialValues: FormInterface[] = [

package/src/form/form.enum.ts

@@ -8,4 +8,5 @@ export enum TypeInputEnum {
   CHECKBOX = "checkbox",
   RADIO = "radio",
   DATE = "date",
+  SELECT = "select",
 }

package/src/form/form.interface.tsx

@@ -1,7 +1,7 @@
 import { TypeInputEnum } from "./form.enum";
 
 export type FormValuesInterface<
-  T extends { [key: string]: string | number | boolean | Date }
+  T extends { [key: string]: string | number | boolean | Date | string[] }
 > = Partial<{
   [K in keyof T]: T[K];
 }>;
@@ -22,10 +22,15 @@ export interface FormInterface {
   required?: boolean;
   condition?: FormCondition;
   icon?: string;
+  multiple?: boolean;
+  options?: { value: string; label: string }[]; // <--- pour les <option>
   className?: string;
   autoComplete?: autoCompleteType;
   step?: string;
-  onChange?: (value: string | number | boolean | Date, name?: string) => void;
+  onChange?: (
+    value: string | number | boolean | Date | string[],
+    name?: string
+  ) => void;
   onRequired?: (value: string | number | boolean | Date) => boolean;
   onDisabled?: (value: string | number | boolean | Date) => boolean;
   onInvalid?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/src/form/input/Input.tsx

@@ -0,0 +1,76 @@
+import "./input.css";
+
+export interface InputProps {
+  id: string; // obligatoire pour le label for
+  name: string;
+  type?: string;
+  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?: "on" | "off";
+  ref?: React.Ref<HTMLInputElement>;
+  step?: string;
+  tabIndex?: number;
+  checked?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+export const Input = ({
+  id,
+  name,
+  type = "text",
+  value,
+  onInvalid,
+  placeholder,
+  className,
+  inputMode,
+  minLength,
+  maxLength,
+  autoFocus = false,
+  disabled = false,
+  required = false,
+  autoComplete = "off",
+  ref,
+  tabIndex = 0,
+  step,
+  checked,
+  onChange,
+  onBlur,
+}: InputProps) => {
+  return (
+    <>
+      <input type="text" style={{ display: "none" }} />
+      <input
+        ref={ref}
+        id={id}
+        name={name}
+        inputMode={inputMode ?? (type === "number" ? "numeric" : "text")}
+        type={type}
+        spellCheck="false"
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        autoComplete={autoComplete === "off" ? "fake" : autoComplete}
+        step={step}
+        tabIndex={tabIndex}
+        autoFocus={autoFocus}
+        minLength={minLength}
+        maxLength={maxLength}
+        onChange={onChange}
+        checked={checked}
+        onBlur={onBlur}
+        className={`input-field ${className ?? ""}`}
+        onInvalid={onInvalid}
+      />
+    </>
+  );
+};

package/src/index.ts

@@ -14,6 +14,7 @@ export { Expands } from "./expands/Expands";
 export { FilAriane } from "./filAriane/FilAriane";
 export { DynamicForm } from "./form/Form";
 export { TypeInputEnum } from "./form/form.enum";
+export { Input } from "./form/input/Input";
 export { TextArea } from "./form/textArea/TextArea";
 export { Grid } from "./grid/Grid";
 export { Header } from "./header/Header";

package/src/search/Search.tsx

@@ -27,7 +27,7 @@ interface SearchProps {
 
 interface FormData {
   recherche: string;
-  [key: string]: string | number | boolean | Date;
+  [key: string]: string | number | boolean | Date | string[]; // Signature d'index ajoutée
 }
 
 export const Search = forwardRef<

package/src/search/Search.view.tsx

@@ -2,7 +2,7 @@ import { FormValuesInterface } from "../form/form.interface";
 import { Search } from "./Search";
 interface FormData {
   recherche: string;
-  [key: string]: string | number | boolean | Date; // Signature d'index ajoutée
+  [key: string]: string | number | boolean | Date | string[]; // Signature d'index ajoutée
 }
 export const SearchView = (): JSX.Element => {
   const onChange = (values: FormValuesInterface<FormData>) => {

package/src/select/Select.tsx

@@ -1,14 +1,18 @@
+import { useRef } from "react";
 import "./select.css";
 import { SelectOptionInterface } from "./selectOption.interface";
+
 export interface SelectProps {
   id?: string;
   label?: string;
   title?: string;
   disabled?: boolean;
-  defaultValue?: string;
-  value?: string;
+  defaultValue?: string | string[];
+  multiple?: boolean;
+  value?: string | string[];
   className?: string;
   options: SelectOptionInterface[];
+  onChangeMultiple?: (value: string[]) => void;
   onChange?: (value: string) => void;
   placeholder?: string;
 }
@@ -19,27 +23,45 @@ export const Select = ({
   options,
   className,
   disabled,
+  multiple = false,
   defaultValue,
   onChange,
+  onChangeMultiple,
   value,
   placeholder,
 }: SelectProps): JSX.Element => {
+  const inputRefs = useRef<{ [key: string]: HTMLSelectElement | null }>({});
+
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedValue = event.target.value;
-    if (onChange) {
-      onChange(selectedValue);
+    let selectedValue: string | string[];
+    if (multiple) {
+      selectedValue = Array.from(
+        event.target.selectedOptions,
+        (opt) => opt.value
+      );
+      if (onChangeMultiple) {
+        onChangeMultiple(selectedValue as string[]);
+      }
+    } else {
+      selectedValue = event.target.value;
+      if (onChange) {
+        onChange(selectedValue);
+      }
     }
   };
+
   return (
     <div id={id} className={`select-container ${className ? className : ""}`}>
       {label && <label className="select-container-label">{label}</label>}
       <select
         disabled={disabled}
         className="select-container-select"
-        value={value ?? defaultValue ?? ""}
+        value={value ?? defaultValue ?? (multiple ? [] : "")}
         onChange={handleChange}
+        multiple={multiple}
+        ref={(el) => (inputRefs.current[id ?? "select"] = el)}
       >
-        {placeholder && !defaultValue && (
+        {placeholder && !defaultValue && !multiple && (
           <option value="">{placeholder}</option>
         )}
         {options.map((option, index) => (