allaw-ui 3.3.3 → 3.3.5

package/dist/components/atoms/filters/SingleFilter.d.ts

@@ -1,4 +1,3 @@
-import "./SingleFilter.css";
 import React from "react";
 export type SingleFilterProps = {
     defaultSelectedValue?: string;

package/dist/components/atoms/filters/SingleFilter.js

@@ -20,19 +20,39 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import "./SingleFilter.css";
+import styles from "./SingleFilter.module.css";
 import { FilterButtonPrimary, PrimaryButton } from "../buttons";
 import { TinyInfo } from "../typography";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 var SingleFilter = function (_a) {
     var _b = _a.showNumIndic, showNumIndic = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? true : _c, defaultSelectedValue = _a.defaultSelectedValue, filterData = _a.filterData, setFilter = _a.setFilter, _d = _a.showBackdrop, showBackdrop = _d === void 0 ? false : _d, children = _a.children, props = __rest(_a, ["showNumIndic", "required", "defaultSelectedValue", "filterData", "setFilter", "showBackdrop", "children"]);
     var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
     var _f = useState(defaultSelectedValue || ""), selectedValue = _f[0], setSelectedValue = _f[1];
+    var filterRef = useRef(null);
     useEffect(function () {
         if (selectedValue) {
             setFilter(selectedValue);
         }
     }, [selectedValue, setFilter]);
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (filterRef.current &&
+                event.target instanceof Node &&
+                !filterRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            var timeoutId_1 = setTimeout(function () {
+                document.addEventListener("mousedown", handleClickOutside);
+            }, 0);
+            return function () {
+                clearTimeout(timeoutId_1);
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+        return undefined;
+    }, [isOpen]);
     var handleClose = function () {
         setIsOpen(false);
     };
@@ -41,41 +61,39 @@ var SingleFilter = function (_a) {
     };
     var Item = function (_a) {
         var name = _a.name, value = _a.value;
-        return (React.createElement("button", { className: "item", onClick: function () {
+        return (React.createElement("button", { className: styles.item, onClick: function () {
                 setSelectedValue(value);
                 handleClose();
             } },
-            React.createElement("div", { className: "round" },
-                React.createElement("div", { className: selectedValue === value ? "selected" : "notSelected" })),
+            React.createElement("div", { className: styles.round },
+                React.createElement("div", { className: selectedValue === value ? styles.selected : styles.notSelected })),
             React.createElement("span", null, name)));
     };
     var SmallItem = function (_a) {
         var name = _a.name, value = _a.value;
-        return (React.createElement("button", { className: "smallItem", onClick: function () {
+        return (React.createElement("button", { className: styles.smallItem, onClick: function () {
                 setSelectedValue(value);
             } },
-            React.createElement("div", { className: "round" },
-                React.createElement("div", { className: selectedValue === value ? "selected" : "notSelected" })),
+            React.createElement("div", { className: styles.round },
+                React.createElement("div", { className: selectedValue === value ? styles.selected : styles.notSelected })),
             React.createElement("span", null, name)));
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", __assign({ className: "baseFilter" }, props),
-            React.createElement(FilterButtonPrimary, { onClick: handleButtonTap },
-                children,
-                React.createElement("p", { style: { color: "#25BEEB", fontWeight: "600" } }, showNumIndic && "(".concat(selectedValue.length, ")"))),
-            isOpen && (React.createElement("div", { className: "options" }, filterData &&
+    return (React.createElement("div", __assign({ className: styles.baseFilter, ref: filterRef }, props),
+        React.createElement(FilterButtonPrimary, { onClick: handleButtonTap },
+            children,
+            React.createElement("p", { style: { color: "#25BEEB", fontWeight: "600" } }, showNumIndic && "(".concat(selectedValue.length, ")"))),
+        isOpen && (React.createElement("div", { className: styles.options }, filterData &&
+            filterData.length > 0 &&
+            filterData.map(function (item, idx) { return (React.createElement(Item, { name: item.name, value: item.value, key: idx })); }))),
+        React.createElement("div", { className: styles.optionsSmall, style: { bottom: isOpen ? "0" : "-100%" } },
+            React.createElement("div", { className: styles.row },
+                React.createElement("div", { style: { minWidth: "20px" } }),
+                React.createElement(TinyInfo, { text: children, variant: "bold14", color: "noir" }),
+                React.createElement("button", { className: styles.closeButton, onClick: handleClose },
+                    React.createElement("i", { className: "allaw-icon-close" }))),
+            React.createElement("div", { className: styles.choices }, filterData &&
                 filterData.length > 0 &&
-                filterData.map(function (item, idx) { return (React.createElement(Item, { name: item.name, value: item.value, key: idx })); }))),
-            React.createElement("div", { className: "optionsSmall", style: { bottom: isOpen ? "0" : "-100%" } },
-                React.createElement("div", { className: "row" },
-                    React.createElement("div", { style: { minWidth: "20px" } }),
-                    React.createElement(TinyInfo, { text: children, variant: "bold14", color: "noir" }),
-                    React.createElement("button", { className: "closeButton", onClick: handleClose },
-                        React.createElement("i", { className: "allaw-icon-close" }))),
-                React.createElement("div", { className: "choices" }, filterData &&
-                    filterData.length > 0 &&
-                    filterData.map(function (item, idx) { return (React.createElement(SmallItem, { name: item.name, value: item.value, key: idx })); })),
-                React.createElement(PrimaryButton, { label: "Voir les r\u00E9sultats", onClick: handleClose }))),
-        isOpen && React.createElement("div", { className: "backdrop", onClick: handleClose })));
+                filterData.map(function (item, idx) { return (React.createElement(SmallItem, { name: item.name, value: item.value, key: idx })); })),
+            React.createElement(PrimaryButton, { label: "Voir les r\u00E9sultats", onClick: handleClose }))));
 };
 export default SingleFilter;

package/dist/components/atoms/filters/{SingleFilter.css → SingleFilter.module.css}

@@ -1,16 +1,6 @@
-.backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100vw;
-  z-index: 4500;
-}
-
 .baseFilter {
   position: relative;
   width: fit-content;
-  /* z-index: 4501; */
 }
 
 .smallOpenFilter {
@@ -27,7 +17,7 @@
   border-radius: 4px;
   background-color: #ffffff;
   box-shadow: rgba(9, 30, 66, 0.15) 0px 8px 12px 0px;
-  z-index: 5000;
+  z-index: 10;
   padding: 0.4rem 0rem;
 }
 
@@ -162,15 +152,7 @@
   }
 
   .optionsSmall {
-    z-index: 5000;
+    z-index: 10;
     display: flex;
   }
-
-  .backdrop {
-    background: linear-gradient(
-      180deg,
-      rgba(26, 50, 56, 0) 0%,
-      rgba(2, 9, 11, 0.45) 100%
-    );
-  }
 }

package/dist/components/atoms/filters/SingleFilter.stories.d.ts

@@ -4,4 +4,4 @@ declare namespace _default {
 }
 export default _default;
 export const Default: any;
-import SingleFilter from './SingleFilter';
+import SingleFilter from "./SingleFilter";

package/dist/components/atoms/filters/SingleFilter.stories.js

@@ -9,24 +9,23 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React from 'react';
-import SingleFilter from './SingleFilter'; // Ajustez le chemin selon votre structure de projet
-import './SingleFilter'; // Assurez-vous que le chemin est correct
+import React from "react";
+import SingleFilter from "./SingleFilter"; // Ajustez le chemin selon votre structure de projet
 export default {
-    title: 'Components/Atoms/Filters/SingleFilter',
+    title: "Components/Atoms/Filters/SingleFilter",
     component: SingleFilter,
 };
 var Template = function (args) { return React.createElement(SingleFilter, __assign({}, args)); };
 export var Default = Template.bind({});
 Default.args = {
-    defaultSelectedValue: 'Option 1',
+    defaultSelectedValue: "Option 1",
     filterData: [
-        { value: 'option1', name: 'Option 1' },
-        { value: 'option2', name: 'Option 2' },
-        { value: 'option3', name: 'Option 3' },
+        { value: "option1", name: "Option 1" },
+        { value: "option2", name: "Option 2" },
+        { value: "option3", name: "Option 3" },
     ],
-    setFilter: function (selectedValue) { return console.log('Selected value:', selectedValue); },
-    children: 'Filter',
+    setFilter: function (selectedValue) { return console.log("Selected value:", selectedValue); },
+    children: "Filter",
     required: true,
     showNumIndic: true,
     showBackdrop: true,

package/dist/components/molecules/proCard/ProCard.css

@@ -20,6 +20,7 @@
   justify-content: center;
   align-items: flex-start;
   gap: 18px;
+  max-width: 100%;
   align-self: stretch;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "3.3.3",
+  "version": "3.3.5",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",