@vincentgraul/react-components 1.0.30 → 1.0.32

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

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 interface Props {
     languages: string[];
     onChange?: (option: Option) => void;
+    flagWidth?: string;
     className?: string;
 }
 interface Option {

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;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,2CAsCnD"}
+{"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

@@ -12,11 +12,18 @@ import { useEffect, useState } from "react";
 import Select from "../select/Select";
 import { capitalize } from "@vincentgraul/utils/word";
 export default function CountrySelector(props) {
-    const { className, languages, onChange } = 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,
+        margin: "auto",
+        borderRadius: "2px",
+    };
     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* () {
@@ -35,9 +42,3 @@ export default function CountrySelector(props) {
     }
     return (_jsx(Select, { className: `country-selector ${className}`, options: options, onChange: onChange }));
 }
-const FlagStyle = {
-    display: "block",
-    width: "30px",
-    margin: "auto",
-    borderRadius: "2px",
-};

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.30",
+  "version": "1.0.32",
   "exports": {
     "./match-device": {
       "import": "./build/match-device/useMatchDevice.js"