kelt-ui-kit-react 1.9.9 → 2.0.1

package/src/index.ts

@@ -33,6 +33,7 @@ export { Expands } from "./expands/Expands";
 export { FilAriane } from "./filAriane/FilAriane";
 export { DynamicForm } from "./form/Form";
 export { TypeInputEnum } from "./form/form.enum";
+export type { FormMode } from "./form/form.interface";
 export { Input } from "./form/input/Input";
 export { InputNumber } from "./form/inputNumber/InputNumber";
 export { InputPrice } from "./form/inputPrice/InputPrice";

package/src/menus/Menus.tsx

@@ -22,6 +22,7 @@ export const Menus = (props: ExpandProps) => {
           <Menu
             item={item}
             onChange={onChange}
+            className={item.subMenu && item.subMenu.length > 0 ? "has-submenu" : ""}
             active={currentItem?.id === item.id}
           />
           {item.subMenu && item.subMenu.length > 0 && (

package/src/menus/menu/Menu.tsx

@@ -4,12 +4,13 @@ export type MenuProps = {
   active: boolean;
   item: MenuInterface;
   onChange: (item: MenuInterface) => void;
+  className?: string;
 };
 export const Menu = (props: MenuProps): JSX.Element => {
   return (
     <div
       onClick={() => props.onChange(props.item)}
-      className={props.active ? "expand expand--active" : "expand"}
+      className={`expand ${props.active ? "expand--active" : ""} ${props.className || ""}`}
     >
       {props.item.children}
     </div>

package/src/sidebar/Sidebar.tsx

@@ -193,6 +193,7 @@ export const Sidebar = ({
           transition: isDragging ? "none" : undefined,
         }}
         className={`sidebar ${isOpen ? "open" : "closed"} ${className ?? ""}`}
+        onClick={(event) => event.stopPropagation()}
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}

package/src/tabs/tabs.css

@@ -1,24 +1,30 @@
 .tabs-root {
   height: 100%;
+
   .tabs-header {
     display: flex;
     border-bottom: 1px solid #b2a1a1;
+
     .tab-button {
       padding: 0.5rem 0.75rem;
       border: 0px;
       outline: none;
       background-color: transparent;
-      color: #1e293b; /* slate-800 */
+      color: #1e293b;
+      /* slate-800 */
       cursor: pointer;
 
       &.tab-button--active {
-        border-bottom: 2px solid var(--primary-color); /* slate-800 */
+        border-bottom: 2px solid var(--primary-color);
+        /* slate-800 */
         border-radius: 0px;
+        font-weight: bold;
       }
+
       &.tab-button--disabled {
         opacity: 0.5;
         cursor: not-allowed;
       }
     }
   }
-}
+}

package/src/toaster/Toaster.tsx

@@ -34,9 +34,14 @@ export const Toaster = () => {
   return ReactDOM.createPortal(
     <div className={`toaster toaster-${severity}`}>
       {close && (
-        <div className="toaster--close" onClick={onClose}>
+        <button
+          type="button"
+          className="toaster--close"
+          onClick={onClose}
+          aria-label="Fermer la notification"
+        >
           <Icon classIcon="bi-x" />
-        </div>
+        </button>
       )}
       <div>
         {severity === "info" && <Icon classIcon="bi-info-circle" />}

package/src/toaster/Toaster.view.tsx

@@ -9,6 +9,7 @@ export const ToasterView = (): JSX.Element => {
       description: "This is a description for the toast message.",
       severity: "warning",
       duration: 10000,
+      close: true,
       children: <div>Additional content can go here.</div>,
     });
   }, [showToast]);

package/src/toaster/store/useToasterStore.tsx

@@ -15,6 +15,7 @@ type ToasterState = {
       severity?: "info" | "success" | "error" | "warning";
       duration?: number;
       children?: React.ReactNode;
+      close?: boolean;
     }
   ) => void;
   hideToast: () => void;
@@ -36,6 +37,7 @@ export const useToasterStore = create<ToasterState>((set) => ({
       duration: options.duration || 2500,
       visible: true,
       children: options.children || null,
+      close: options.close ?? true,
     })),
   hideToast: () => set(() => ({ visible: false })),
 }));

package/src/toaster/toaster.css

@@ -15,7 +15,12 @@
     position: absolute;
     top: 2px;
     right: 2px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
     color: #333;
+    min-width: auto;
     cursor: pointer;
     .bi {
       font-size: 1.2rem;
@@ -55,7 +60,7 @@
   }
   .title {
     font-weight: 500;
-    font-size: 16px;
+    font-size: 18px;
     &.title-info {
       color: var(--primary-color);
     }
@@ -70,7 +75,7 @@
     }
   }
   .subtitle {
-    font-size: 14px;
+    font-size: 16px;
   }
   .bi-info-circle {
     color: var(--primary-color);