kelt-ui-kit-react 1.3.4 → 1.3.6

package/package.json

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

package/src/dataTable/DataTable.tsx

@@ -70,7 +70,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
     };
   }, [onLoadMore, hasMore]);
   return (
-    <div>
+    <div className="data-table-container">
       {name && <h2 className="mb-2">{name}</h2>}
       {element}
       <table className={`data-table ${className ? className : ""}`} id={id}>

package/src/dataTable/dataTable.css

@@ -1,17 +1,20 @@
-.data-table {
-  width: 100%;
-  border-spacing: 5px;
-  font-size: 14px;
-  color: #333;
+.data-table-container {
+  overflow: auto;
+  .data-table {
+    width: 100%;
+    border-spacing: 5px;
+    font-size: 14px;
+    color: #333;
 
-  thead {
-    margin-bottom: 1rem;
-    position : sticky;
-    top : 0;
-    background-color: #fff;
-    th {
-      color: #bdbaba;
-      min-width: 100px;
+    thead {
+      margin-bottom: 1rem;
+      position: sticky;
+      top: 0;
+      background-color: #fff;
+      th {
+        color: #bdbaba;
+        min-width: 100px;
+      }
     }
   }
 }

package/src/form/Form.view.tsx

@@ -37,6 +37,18 @@ export const FormView = (): JSX.Element => {
       label: "Password",
       type: TypeInputEnum.PASSWORD,
     },
+    {
+      value: "",
+      name: "selectOption",
+      label: "Select Option",
+      placeholder: "Choose an option",
+      type: TypeInputEnum.SELECT,
+      options: [
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+        { value: "option3", label: "Option 3" },
+      ],
+    },
   ];
 
   // Fonction qui sera appelée lors de la soumission du formulaire

package/src/select/Select.tsx

@@ -1,4 +1,5 @@
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
+import { Icon } from "../icon/Icon";
 import "./select.css";
 import { SelectOptionInterface } from "./selectOption.interface";
 
@@ -49,12 +50,23 @@ export const Select = ({
       }
     }
   };
-
+  const resetValue = useCallback(() => {
+    if (onChange) {
+      onChange("");
+    }
+  }, [onChange]);
   return (
     <div id={id} className={`select-container ${className ? className : ""}`}>
-      {label && <label className="select-container-label">{label}</label>}
+      {label && (
+        <label htmlFor={`select-${id}`} className="select-container-label">
+          {label}
+        </label>
+      )}
       <select
+        defaultValue=""
+        required
         disabled={disabled}
+        id={`select-${id}`}
         className="select-container-select"
         value={value ?? defaultValue ?? (multiple ? [] : "")}
         onChange={handleChange}
@@ -62,7 +74,9 @@ export const Select = ({
         ref={(el) => (inputRefs.current[id ?? "select"] = el)}
       >
         {placeholder && !defaultValue && !multiple && (
-          <option value="">{placeholder}</option>
+          <option selected disabled hidden value="">
+            {placeholder}
+          </option>
         )}
         {options.map((option, index) => (
           <option key={index} value={option.value}>
@@ -70,6 +84,15 @@ export const Select = ({
           </option>
         ))}
       </select>
+      {value !== "" && placeholder && (
+        <div
+          className="clear-btn"
+          onClick={resetValue}
+          aria-label="Réinitialiser"
+        >
+          <Icon classIcon="bi-x" />
+        </div>
+      )}
     </div>
   );
 };

package/src/select/Select.view.tsx

@@ -64,7 +64,7 @@ export const SelectView = () => {
   return (
     <>
       {selectData.map((data) => (
-        <Select {...data} />
+        <Select key={data.id} {...data} />
       ))}
     </>
   );

package/src/select/select.css

@@ -8,7 +8,23 @@
     right: 1rem;
     pointer-events: none;
   }
-
+  select:invalid {
+    color: gray;
+  }
+  option {
+    color: #000;
+  }
+  .clear-btn {
+    position: absolute;
+    top: 2px;
+    display: flex;
+    align-items: center;
+    z-index: 5;
+    justify-content: center;
+    bottom: 0;
+    right: 30px;
+    cursor: pointer;
+  }
   &::before {
     border-left: var(--size) solid transparent;
     border-right: var(--size) solid transparent;