@vincentgraul/react-components 1.0.31 → 1.0.32

package/build/country-selector/CountrySelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CountrySelector.d.ts","sourceRoot":"","sources":["../../src/country-selector/CountrySelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAI9D,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,KAAK,2CA6CnD"}
+{"version":3,"file":"CountrySelector.d.ts","sourceRoot":"","sources":["../../src/country-selector/CountrySelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAI9D,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,KAAK,2CA8CnD"}

package/build/country-selector/CountrySelector.js

@@ -14,6 +14,7 @@ import { capitalize } from "@vincentgraul/utils/word";
 export default function CountrySelector(props) {
     const { className, languages, onChange, flagWidth = "30px" } = props;
     const [options, setOptions] = useState(null);
+    const fileExtension = import.meta ? import.meta.env.STORYBOOK_SVG_FILE_EXTENSION : "js";
     const FlagStyle = {
         display: "block",
         width: flagWidth,
@@ -22,7 +23,7 @@ export default function CountrySelector(props) {
     };
     useEffect(() => {
         const fetchIcon = (name) => __awaiter(this, void 0, void 0, function* () {
-            const { default: Flag } = yield import(`./icons/${capitalize(name)}.js`);
+            const { default: Flag } = yield import(`./icons/${capitalize(name)}.${fileExtension}`);
             return Flag;
         });
         const prepareOptions = () => __awaiter(this, void 0, void 0, function* () {

package/build/modal/Modal.js

@@ -5,7 +5,7 @@ import useOutsideAlerter from "../outside-alerter/useOutsideAlerter";
 export default function Modal(props) {
     const { className, children, onClickedOutside } = props;
     const ref = useRef(null);
-    const hasClickedOutside = useOutsideAlerter(ref);
+    const { hasClickedOutside } = useOutsideAlerter(ref);
     useEffect(() => {
         if (onClickedOutside && hasClickedOutside) {
             onClickedOutside();

package/build/outside-alerter/useOutsideAlerter.js

@@ -4,20 +4,19 @@ export default function useOutsideAlerter(ref) {
     const handleOnReset = () => {
         setClickedOutside(false);
     };
-    const handleOnClickOutside = (event) => {
-        if (event.target && ref.current) {
-            if (!ref.current.contains(event.target)) {
-                setClickedOutside(true);
-            }
-        }
-    };
     useEffect(() => {
-        if (ref) {
-            document.addEventListener("mousedown", (event) => handleOnClickOutside(event));
-        }
+        const handleOnClickOutside = (event) => {
+            if (event.target && ref.current) {
+                const value = !ref.current.contains(event.target);
+                if (value !== hasClickedOutside) {
+                    setClickedOutside(value);
+                }
+            }
+        };
+        document.addEventListener("mousedown", handleOnClickOutside);
         return () => {
-            document.removeEventListener("mousedown", (event) => handleOnClickOutside(event));
+            document.removeEventListener("mousedown", handleOnClickOutside);
         };
-    }, [ref]);
+    }, [ref, hasClickedOutside]);
     return { hasClickedOutside, onReset: handleOnReset };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vincentgraul/react-components",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "exports": {
     "./match-device": {
       "import": "./build/match-device/useMatchDevice.js"