kelt-ui-kit-react 1.3.7 → 1.3.9

package/package.json

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

package/src/App.tsx

@@ -14,7 +14,7 @@ const App: React.FC = () => (
       <Router>
         <div className="main-layout">
           <Toaster />
-          <Header />
+          <Header showBackNavigation={true} />
           <div className="d-flex h-100">
             <AppMenu />
             <div className="main-layout-content">

package/src/form/input/Input.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { forwardRef, useState } from "react";
 import { Icon } from "../../icon/Icon";
 import { TypeInputEnum } from "../form.enum";
 import "./input.css";
@@ -18,7 +18,6 @@ export interface InputProps {
   minLength?: number;
   maxLength?: number;
   autoComplete?: "on" | "off";
-  ref?: React.Ref<HTMLInputElement>;
   step?: string;
   tabIndex?: number;
   checked?: boolean;
@@ -26,58 +25,62 @@ export interface InputProps {
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
 }
 
-export const Input = ({
-  id,
-  name,
-  type = TypeInputEnum.TEXT,
-  value,
-  onInvalid,
-  placeholder,
-  className,
-  inputMode,
-  minLength,
-  maxLength,
-  autoFocus = false,
-  disabled = false,
-  required = false,
-  autoComplete = "off",
-  ref,
-  tabIndex = 0,
-  step,
-  checked,
-  onChange,
-  onBlur,
-}: InputProps) => {
-  // Si le type est password, on utilise l'input de type password
-  const [showPassword, setShowPassword] = useState(false);
-  return (
-    <div className="input-container">
-      <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      id,
+      name,
+      type = TypeInputEnum.TEXT,
+      value,
+      onInvalid,
+      placeholder,
+      className,
+      inputMode,
+      minLength,
+      maxLength,
+      autoFocus = false,
+      disabled = false,
+      required = false,
+      autoComplete = "off",
+      tabIndex = 0,
+      step,
+      checked,
+      onChange,
+      onBlur,
+    },
+    ref
+  ) => {
+    // Si le type est password, on utilise l'input de type password
+    const [showPassword, setShowPassword] = useState(false);
+
+    return (
+      <div className="input-container">
+        <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
+
+        <input
+          ref={ref} // 👈 le vrai ref est bien transmis au HTMLInputElement
+          id={id}
+          name={name}
+          inputMode={inputMode ?? (type === "number" ? "numeric" : "text")}
+          type={showPassword ? TypeInputEnum.TEXT : 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}
+        />
 
-      <input
-        ref={ref}
-        id={id}
-        name={name}
-        inputMode={inputMode ?? (type === "number" ? "numeric" : "text")}
-        type={showPassword ? TypeInputEnum.TEXT : 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}
-      />
-      <>
         {type === TypeInputEnum.PASSWORD && (
           <div
             onClick={() => setShowPassword(!showPassword)}
@@ -86,7 +89,9 @@ export const Input = ({
             <Icon classIcon={showPassword ? "bi-eye-slash" : "bi-eye"} />
           </div>
         )}
-      </>
-    </div>
-  );
-};
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";

package/src/header/Header.tsx

@@ -12,6 +12,8 @@ export const Header = ({
   userChildren,
   positionFixed,
   onClickLogo,
+  showBackNavigation,
+  onClickBackNavigation,
 }: HeaderInterface): JSX.Element => {
   const refButton = useRef<HTMLDivElement>(null);
   const [openOverlay, setOpenOverlay] = useState(false);
@@ -24,6 +26,15 @@ export const Header = ({
         <span onClick={onClickMenu}>
           <Icon size={IconSizeEnum.MEDIUM} classIcon="bi-list"></Icon>
         </span>
+        {showBackNavigation && (
+          <span className="chevron-back" onClick={onClickBackNavigation}>
+            <Icon
+              size={IconSizeEnum.EXTRA_SMALL}
+              classIcon="bi-caret-left-fill"
+            ></Icon>
+          </span>
+        )}
+
         <span
           className={`header-logo ${onClickLogo && "cursor-pointer"} `}
           onClick={onClickLogo}

package/src/header/Header.view.tsx

@@ -1,5 +1,5 @@
 import { Header } from "./Header";
 
 export const HeaderView = (): JSX.Element => {
-  return <Header />;
+  return <Header showBackNavigation={true} />;
 };

package/src/header/header.interface.tsx

@@ -5,4 +5,6 @@ export interface HeaderInterface {
   onClickMenu?: () => void;
   userChildren?: React.ReactNode;
   onClickLogo?: () => void;
+  showBackNavigation?: boolean;
+  onClickBackNavigation?: () => void;
 }

package/src/select/select.css

@@ -19,7 +19,7 @@
     top: 2px;
     display: flex;
     align-items: center;
-    z-index: 5;
+    z-index: 2;
     justify-content: center;
     bottom: 0;
     right: 30px;