allaw-ui 4.4.6 → 4.4.8

package/dist/components/molecules/phoneNumberField/CountrySelect.d.ts

@@ -16,6 +16,7 @@ export interface CountrySelectProps {
     onSelect?: (value: string) => void;
     onError?: (msg: string) => void;
     disableAutofill?: boolean;
+    disablePortal?: boolean;
 }
 declare const CountrySelect: React.FC<CountrySelectProps>;
 export default CountrySelect;

package/dist/components/molecules/phoneNumberField/CountrySelect.js

@@ -9,12 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useState, useRef, useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import styles from "./countrySelect.module.css";
 import selectStyles from "../../atoms/selects/Select.module.css";
+import styles from "./countrySelect.module.css";
 var CountrySelect = function (_a) {
-    var items = _a.items, defaultCountry = _a.defaultCountry, isRequired = _a.isRequired, disabled = _a.disabled, _b = _a.buttonWidth, buttonWidth = _b === void 0 ? 80 : _b, _c = _a.listWidth, listWidth = _c === void 0 ? 200 : _c, onSelect = _a.onSelect, onError = _a.onError, _d = _a.disableAutofill, disableAutofill = _d === void 0 ? true : _d;
+    var items = _a.items, defaultCountry = _a.defaultCountry, isRequired = _a.isRequired, disabled = _a.disabled, _b = _a.buttonWidth, buttonWidth = _b === void 0 ? 80 : _b, _c = _a.listWidth, listWidth = _c === void 0 ? 200 : _c, onSelect = _a.onSelect, onError = _a.onError, _d = _a.disableAutofill, disableAutofill = _d === void 0 ? true : _d, disablePortal = _a.disablePortal;
     var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
     var _f = useState(defaultCountry || ""), selected = _f[0], setSelected = _f[1];
     var _g = useState(""), search = _g[0], setSearch = _g[1];
@@ -100,31 +100,34 @@ var CountrySelect = function (_a) {
     };
     var selectedItem = items.find(function (i) { return i.value === selected; });
     // Liste en portal, position fixed, centrée sous le bouton, décalée si besoin
+    var dropdown = (React.createElement("div", { className: selectStyles.selectList + " " + styles.listOpen, style: {
+            position: disablePortal ? "absolute" : "fixed",
+            top: listPos.top,
+            left: listPos.left,
+            width: listPos.width,
+            zIndex: 9999,
+        }, role: "listbox", tabIndex: -1, onKeyDown: handleKeyDown },
+        React.createElement("div", { className: styles.searchWrapper },
+            React.createElement("i", { className: "allaw-icon-search" }),
+            React.createElement("input", __assign({ className: styles.search, placeholder: "Rechercher...", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoFocus: true, "aria-label": "Rechercher un pays", onBlur: handleBlur }, (disableAutofill && {
+                autoComplete: "off",
+                "data-form-type": "other",
+                "data-lpignore": "true",
+                "data-1p-ignore": true,
+            })))),
+        filtered.map(function (item, idx) { return (React.createElement("div", { key: item.value, className: selectStyles.selectItem +
+                (item.value === selected || idx === highlighted
+                    ? " " + selectStyles.highlighted
+                    : "") +
+                (item.value === selected ? " " + styles.selectedItem : ""), role: "option", "aria-selected": item.value === selected, tabIndex: -1, onMouseDown: function () { return handleSelect(item.value); }, onMouseEnter: function () { return setHighlighted(idx); } },
+            item.flagUrl ? (React.createElement("img", { src: item.flagUrl, alt: "", className: styles.flag })) : item.flagEmoji ? (React.createElement("span", { className: styles.flag }, item.flagEmoji)) : null,
+            React.createElement("span", { className: styles.label }, item.label),
+            React.createElement("span", { className: styles.code }, item.code))); }),
+        filtered.length === 0 && (React.createElement("div", { className: selectStyles.selectItem, style: { opacity: 0.6 } }, "Aucun r\u00E9sultat"))));
     var list = isOpen && !disabled
-        ? ReactDOM.createPortal(React.createElement("div", { className: selectStyles.selectList + " " + styles.listOpen, style: {
-                position: "fixed",
-                top: listPos.top,
-                left: listPos.left,
-                width: listPos.width,
-                zIndex: 9999,
-            }, role: "listbox", tabIndex: -1, onKeyDown: handleKeyDown },
-            React.createElement("div", { className: styles.searchWrapper },
-                React.createElement("i", { className: "allaw-icon-search" }),
-                React.createElement("input", __assign({ className: styles.search, placeholder: "Rechercher...", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoFocus: true, "aria-label": "Rechercher un pays", onBlur: handleBlur }, (disableAutofill && {
-                    autoComplete: "off",
-                    "data-form-type": "other",
-                    "data-lpignore": "true",
-                    "data-1p-ignore": true,
-                })))),
-            filtered.map(function (item, idx) { return (React.createElement("div", { key: item.value, className: selectStyles.selectItem +
-                    (item.value === selected || idx === highlighted
-                        ? " " + selectStyles.highlighted
-                        : "") +
-                    (item.value === selected ? " " + styles.selectedItem : ""), role: "option", "aria-selected": item.value === selected, tabIndex: -1, onMouseDown: function () { return handleSelect(item.value); }, onMouseEnter: function () { return setHighlighted(idx); } },
-                item.flagUrl ? (React.createElement("img", { src: item.flagUrl, alt: "", className: styles.flag })) : item.flagEmoji ? (React.createElement("span", { className: styles.flag }, item.flagEmoji)) : null,
-                React.createElement("span", { className: styles.label }, item.label),
-                React.createElement("span", { className: styles.code }, item.code))); }),
-            filtered.length === 0 && (React.createElement("div", { className: selectStyles.selectItem, style: { opacity: 0.6 } }, "Aucun r\u00E9sultat"))), document.body)
+        ? disablePortal
+            ? dropdown
+            : ReactDOM.createPortal(dropdown, document.body)
         : null;
     return (React.createElement("div", { className: styles.wrapper },
         React.createElement("button", { ref: buttonRef, type: "button", className: selectStyles.select + " " + styles.button, style: { width: buttonWidth }, "aria-haspopup": "listbox", "aria-expanded": isOpen, disabled: disabled, onClick: function () { return !disabled && setIsOpen(function (o) { return !o; }); }, tabIndex: 0, onBlur: handleBlur },

package/dist/components/molecules/phoneNumberField/PhoneNumberField.d.ts

@@ -20,6 +20,7 @@ export interface PhoneNumberFieldProps {
     onChange?: (country: string, number: string, isValid: boolean) => void;
     onError?: (msg: string) => void;
     title?: string;
+    disablePortal?: boolean;
 }
 declare const PhoneNumberField: React.FC<PhoneNumberFieldProps>;
 export default PhoneNumberField;

package/dist/components/molecules/phoneNumberField/PhoneNumberField.js

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
-import styles from "./PhoneNumberField.module.css";
-import CountrySelect from "./CountrySelect";
-import PhoneInput from "./PhoneInput";
 import Paragraph from "../../atoms/typography/Paragraph";
 import TinyInfo from "../../atoms/typography/TinyInfo";
+import CountrySelect from "./CountrySelect";
+import PhoneInput from "./PhoneInput";
+import styles from "./PhoneNumberField.module.css";
 var PhoneNumberField = function (_a) {
-    var countryItems = _a.countryItems, defaultCountry = _a.defaultCountry, defaultNumber = _a.defaultNumber, numberPlaceholder = _a.numberPlaceholder, validationPattern = _a.validationPattern, isRequired = _a.isRequired, disabled = _a.disabled, selectButtonWidth = _a.selectButtonWidth, selectListWidth = _a.selectListWidth, onChange = _a.onChange, onError = _a.onError, title = _a.title;
+    var countryItems = _a.countryItems, defaultCountry = _a.defaultCountry, defaultNumber = _a.defaultNumber, numberPlaceholder = _a.numberPlaceholder, validationPattern = _a.validationPattern, isRequired = _a.isRequired, disabled = _a.disabled, selectButtonWidth = _a.selectButtonWidth, selectListWidth = _a.selectListWidth, onChange = _a.onChange, onError = _a.onError, title = _a.title, disablePortal = _a.disablePortal;
     var _b = useState(defaultCountry || ""), country = _b[0], setCountry = _b[1];
     var _c = useState(defaultNumber || ""), number = _c[0], setNumber = _c[1];
     var _d = useState(""), error = _d[0], setError = _d[1];
@@ -54,7 +54,7 @@ var PhoneNumberField = function (_a) {
                 isRequired && React.createElement("span", { className: styles.required }, "*")) })),
         React.createElement("div", { className: styles.phoneNumberField },
             React.createElement("div", { className: styles.selectWrapper },
-                React.createElement(CountrySelect, { items: countryItems, defaultCountry: defaultCountry, buttonWidth: selectButtonWidth, listWidth: selectListWidth, isRequired: isRequired, disabled: disabled, onSelect: handleCountry, onError: setErrorMsg })),
+                React.createElement(CountrySelect, { items: countryItems, defaultCountry: defaultCountry, buttonWidth: selectButtonWidth, listWidth: selectListWidth, isRequired: isRequired, disabled: disabled, onSelect: handleCountry, onError: setErrorMsg, disablePortal: disablePortal })),
             React.createElement("div", { className: styles.inputWrapper },
                 React.createElement(PhoneInput, { defaultValue: defaultNumber, placeholder: numberPlaceholder, validationPattern: effectivePattern, isRequired: isRequired, disabled: disabled, onChange: handleNumber, onError: setErrorMsg, onBlur: handleInputBlur, isValid: isValid }))),
         isTouched && error && (React.createElement("div", { className: styles.errorMessage },

package/package.json

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