kelt-ui-kit-react 1.6.7 → 1.6.8

package/package.json

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

package/src/button/Button.view.tsx

@@ -1,12 +1,29 @@
 import { useMemo } from "react";
+import { TypeInputEnum } from "../form/form.enum";
+import { FormInterface } from "../form/form.interface";
 import { Button } from "./Button";
 import { ButtonInterface } from "./button.interface";
 import {
   ButtonActions,
   ButtonActionsProps,
 } from "./buttonActions/ButtonActions";
+import { ButtonFilters } from "./buttonFilters/ButtonFilters";
 
 export const ButtonView = (): JSX.Element => {
+  const initialValues: FormInterface[] = [
+    {
+      value: false,
+      name: "test1",
+      label: "test 1",
+      type: TypeInputEnum.CHECKBOX,
+    },
+    {
+      value: false,
+      name: "test2",
+      label: "test 2",
+      type: TypeInputEnum.CHECKBOX,
+    },
+  ];
   const mockButtonItems: ButtonInterface[] = [
     {
       title: "Envoyer",
@@ -56,6 +73,13 @@ export const ButtonView = (): JSX.Element => {
         </div>
       ))}
       <ButtonActions {...mockButtonAction} />
+      <div className="ml-2">
+        <ButtonFilters
+          classIcon="bi-send"
+          {...mockButtonAction}
+          dataForm={initialValues}
+        />
+      </div>
     </div>
   );
 };

package/src/button/buttonActions/ButtonActions.tsx

@@ -39,7 +39,7 @@ export const ButtonActions = ({
       e.stopPropagation();
       if (actions) setOpenOverlay(!openOverlay);
     },
-    [openOverlay, setOpenOverlay]
+    [openOverlay, setOpenOverlay],
   );
   const overlayMenu: MenuInterface[] = useMemo(() => {
     if (!actions) return [];

package/src/button/buttonFilters/ButtonFilters.tsx

@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { DynamicForm } from "../../form/Form";
+import { FormInterface, FormValuesInterface } from "../../form/form.interface";
+import { Icon } from "../../icon/Icon";
+import { IconSizeEnum } from "../../icon/iconSize.enum";
+import "./buttonFilters.css";
+export type ButtonActionsProps<
+  T extends { [key: string]: string | number | boolean | Date | string[] },
+> = {
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  title: string;
+  classIcon?: string;
+  sizeIcon?: IconSizeEnum;
+  dataForm: FormInterface[];
+  onChange?: (values: FormValuesInterface<T>) => void;
+  disabled?: boolean;
+  id?: string;
+};
+export const ButtonFilters = <
+  T extends { [key: string]: string | number | boolean | Date | string[] },
+>({
+  className,
+  onClick,
+  title,
+  classIcon,
+  sizeIcon,
+  disabled = false,
+  id,
+  dataForm,
+  onChange,
+}: ButtonActionsProps<T>) => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const [openFilters, setOpenFilters] = useState(false);
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setOpenFilters(!openFilters);
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setOpenFilters(false);
+      }
+    },
+    [setOpenFilters],
+  );
+
+  useEffect(() => {
+    if (openFilters) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [openFilters, handleClickOutside]);
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        id={id ?? ""}
+        disabled={disabled}
+        type="button"
+        onClick={(e) => handleClick(e)}
+        className={` ${className} button--filters button--transparent `}
+      >
+        {classIcon && (
+          <span>
+            <Icon
+              classIcon={classIcon}
+              size={sizeIcon || IconSizeEnum.EXTRA_SMALL}
+            />
+          </span>
+        )}
+        <span className=" flex-1">{title}</span>
+        {openFilters && (
+          <div
+            className="button--filters-overlay"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="button--filters-overlay-content">
+              <DynamicForm
+                onChange={onChange as any}
+                initialForm={dataForm}
+                hideSubmit
+              />
+            </div>
+          </div>
+        )}
+      </button>
+    </>
+  );
+};

package/src/button/buttonFilters/buttonFilters.css

@@ -0,0 +1,22 @@
+.button--filters {
+  position: relative;
+  .button--filters-overlay {
+    position: absolute;
+    margin-top: 0.25rem;
+    top: 100%;
+    left: 0;
+    background-color: white;
+    border: 1px solid #ccc;
+    padding: 10px;
+    z-index: 1000;
+    border-radius: 4px;
+    width: 100%;
+    .button--filters-overlay-content {
+      display: flex;
+      gap: 0.5rem;
+      label {
+        color: #333;
+      }
+    }
+  }
+}

package/src/modal/Modal.tsx

@@ -13,6 +13,7 @@ interface ModalProps {
   title?: string;
   styleContainer?: React.CSSProperties;
   classNameContainer?: string;
+  closeOnOverlayClick?: boolean;
 }
 
 export const Modal: React.FC<ModalProps> = ({
@@ -24,11 +25,16 @@ export const Modal: React.FC<ModalProps> = ({
   title,
   styleContainer = {},
   classNameContainer = "",
+  closeOnOverlayClick = true,
 }) => {
   if (!isOpen) return null;
-
+  const handleOverlayMouseDown = () => {
+    if (closeOnOverlayClick) {
+      onClose();
+    }
+  };
   return createPortal(
-    <div className="modal-overlay" onMouseDown={onClose}>
+    <div className="modal-overlay" onMouseDown={handleOverlayMouseDown}>
       <div
         className={`modal-container ${classNameContainer}`}
         style={styleContainer}
@@ -48,6 +54,6 @@ export const Modal: React.FC<ModalProps> = ({
         )}
       </div>
     </div>,
-    document.body
+    document.body,
   );
 };

package/src/modal/Modal.view.tsx

@@ -15,6 +15,7 @@ export const ModalView = (): JSX.Element => {
         onSubmit={() => setIsOpen(false)}
         title={"test"}
         titleButton="Submit"
+        closeOnOverlayClick={false}
         onClose={() => setIsOpen(false)}
         isOpen={isOpen}
       >