kelt-ui-kit-react 2.0.2 → 2.0.3

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/grid/col/Col.tsx

@@ -1,12 +1,14 @@
 import { ColStyled } from "./colStyled/ColStyled";
-import { GridBreakpoints } from "../grid.interface";
-
-type ColProps = GridBreakpoints & {
+type ColProps = {
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
   children: React.ReactNode;
 };
-export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children }) => {
+export const Col: React.FC<ColProps> = ({ xs, sm, md, lg, children }) => {
   return (
-    <ColStyled $xs={xs} $sm={sm} $md={md} $lg={lg} $xl={xl}>
+    <ColStyled $xs={xs} $sm={sm} $md={md} $lg={lg}>
       {children}
     </ColStyled>
   );

package/src/grid/col/colStyled/ColStyled.tsx

@@ -1,17 +1,12 @@
 import styled, { css } from "styled-components";
-import { GridColumnSpan } from "../../grid.interface";
-
 const getColWidth = (size = 12) => `${(size / 12) * 100}%`;
 type ColStyledProps = {
-  $xs?: GridColumnSpan;
-  $sm?: GridColumnSpan;
-  $md?: GridColumnSpan;
-  $lg?: GridColumnSpan;
-  $xl?: GridColumnSpan;
+  $xs?: number;
+  $sm?: number;
+  $md?: number;
+  $lg?: number;
 };
 export const ColStyled = styled.div<ColStyledProps>`
-  box-sizing: border-box;
-  min-width: 0;
   padding: 0 15px;
   flex: 0 0 ${({ $xs }) => getColWidth($xs)};
   max-width: ${({ $xs }) => getColWidth($xs)};
@@ -20,7 +15,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $sm }) =>
     $sm &&
     css`
-      @media (min-width: 576px) {
+      @container (min-width: 576px) {
         flex: 0 0 ${getColWidth($sm)};
         max-width: ${getColWidth($sm)};
       }
@@ -29,7 +24,7 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $md }) =>
     $md &&
     css`
-      @media (min-width: 768px) {
+      @container (min-width: 768px) {
         flex: 0 0 ${getColWidth($md)};
         max-width: ${getColWidth($md)};
       }
@@ -38,18 +33,9 @@ export const ColStyled = styled.div<ColStyledProps>`
   ${({ $lg }) =>
     $lg &&
     css`
-      @media (min-width: 992px) {
+      @container (min-width: 992px) {
         flex: 0 0 ${getColWidth($lg)};
         max-width: ${getColWidth($lg)};
       }
     `}
-
-  ${({ $xl }) =>
-    $xl &&
-    css`
-      @media (min-width: 1200px) {
-        flex: 0 0 ${getColWidth($xl)};
-        max-width: ${getColWidth($xl)};
-      }
-    `}
 `;

package/src/grid/grid.interface.tsx

@@ -1,13 +1,7 @@
-export type GridColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-export interface GridBreakpoints {
-  xs?: GridColumnSpan;
-  sm?: GridColumnSpan;
-  md?: GridColumnSpan;
-  lg?: GridColumnSpan;
-  xl?: GridColumnSpan;
-}
-
-export interface GridInterface extends GridBreakpoints {
+export interface GridInterface {
+  sm?: number;
+  xs?: number;
+  md?: number;
+  lg?: number;
   children: React.ReactNode;
 }

package/src/grid/row/row.css

@@ -1,7 +1,7 @@
 .grid-row {
   display: flex;
   flex-wrap: wrap;
-
+  margin: 0 -15px;
   &.scroll {
     overflow-x: auto;
     flex-wrap: nowrap;
@@ -15,4 +15,4 @@
       flex-wrap: wrap;
     }
   }
-}
+}

package/src/header/Header.tsx

@@ -11,7 +11,6 @@ export const Header = ({
   onClickMenu,
   userChildren,
   positionFixed,
-  overlayClassName,
   onClickLogo,
   showBackNavigation,
   onClickBackNavigation,
@@ -24,7 +23,7 @@ export const Header = ({
   return (
     <div className={`header ${positionFixed ? "header--fixed" : ""}`}>
       <div className="flex-1 d-flex align-items-center">
-        <span className="header-menu-btn" onClick={onClickMenu}>
+        <span onClick={onClickMenu}>
           <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-list"></Icon>
         </span>
         {showBackNavigation && (
@@ -40,7 +39,7 @@ export const Header = ({
           className={`header-logo ${onClickLogo && "cursor-pointer"} `}
           onClick={onClickLogo}
         >
-          {logo && logo}
+          {logo && <img src={logo} alt="logo" />}
         </span>
       </div>
       <div className="d-flex align-items-center">
@@ -50,7 +49,6 @@ export const Header = ({
         </div>
         {openOverlay && refButton.current && (
           <OverlayPanel
-            className={overlayClassName}
             position="bottomRight"
             show={openOverlay}
             closeOverlay={setOpenOverlay}

package/src/header/header.css

@@ -23,21 +23,4 @@
   .bi {
     cursor: pointer;
   }
-
-  .header-menu-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    cursor: pointer;
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: -15px;
-      bottom: -15px;
-      left: -15px;
-      right: -15px;
-    }
-  }
 }

package/src/header/header.interface.tsx

@@ -1,11 +1,10 @@
 export interface HeaderInterface {
-  logo?: React.ReactNode;
+  logo?: string;
   children?: React.ReactNode;
   positionFixed?: boolean;
   onClickMenu?: () => void;
   userChildren?: React.ReactNode;
   onClickLogo?: () => void;
-  overlayClassName?: string;
   showBackNavigation?: boolean;
   onClickBackNavigation?: () => void;
 }

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