allaw-ui 4.4.6 → 4.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/molecules/phoneNumberField/CountrySelect.d.ts +1 -0
  2. package/dist/components/molecules/phoneNumberField/CountrySelect.js +30 -27
  3. package/package.json +1 -1
package/dist/components/molecules/phoneNumberField/CountrySelect.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface CountrySelectProps {
16
16
  onSelect?: (value: string) => void;
17
17
  onError?: (msg: string) => void;
18
18
  disableAutofill?: boolean;
19
+ disablePortal?: boolean;
19
20
  }
20
21
  declare const CountrySelect: React.FC<CountrySelectProps>;
21
22
  export default CountrySelect;
package/dist/components/molecules/phoneNumberField/CountrySelect.js CHANGED
@@ -9,12 +9,12 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
- import React, { useState, useRef, useEffect } from "react";
12
+ import React, { useEffect, useRef, useState } from "react";
13
13
  import ReactDOM from "react-dom";
14
- import styles from "./countrySelect.module.css";
15
14
  import selectStyles from "../../atoms/selects/Select.module.css";
15
+ import styles from "./countrySelect.module.css";
16
16
  var CountrySelect = function (_a) {
17
- 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;
17
+ 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;
18
18
  var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
19
19
  var _f = useState(defaultCountry || ""), selected = _f[0], setSelected = _f[1];
20
20
  var _g = useState(""), search = _g[0], setSearch = _g[1];
@@ -100,31 +100,34 @@ var CountrySelect = function (_a) {
100
100
  };
101
101
  var selectedItem = items.find(function (i) { return i.value === selected; });
102
102
  // Liste en portal, position fixed, centrée sous le bouton, décalée si besoin
103
+ var dropdown = (React.createElement("div", { className: selectStyles.selectList + " " + styles.listOpen, style: {
104
+ position: disablePortal ? "absolute" : "fixed",
105
+ top: listPos.top,
106
+ left: listPos.left,
107
+ width: listPos.width,
108
+ zIndex: 9999,
109
+ }, role: "listbox", tabIndex: -1, onKeyDown: handleKeyDown },
110
+ React.createElement("div", { className: styles.searchWrapper },
111
+ React.createElement("i", { className: "allaw-icon-search" }),
112
+ 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 && {
113
+ autoComplete: "off",
114
+ "data-form-type": "other",
115
+ "data-lpignore": "true",
116
+ "data-1p-ignore": true,
117
+ })))),
118
+ filtered.map(function (item, idx) { return (React.createElement("div", { key: item.value, className: selectStyles.selectItem +
119
+ (item.value === selected || idx === highlighted
120
+ ? " " + selectStyles.highlighted
121
+ : "") +
122
+ (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); } },
123
+ item.flagUrl ? (React.createElement("img", { src: item.flagUrl, alt: "", className: styles.flag })) : item.flagEmoji ? (React.createElement("span", { className: styles.flag }, item.flagEmoji)) : null,
124
+ React.createElement("span", { className: styles.label }, item.label),
125
+ React.createElement("span", { className: styles.code }, item.code))); }),
126
+ filtered.length === 0 && (React.createElement("div", { className: selectStyles.selectItem, style: { opacity: 0.6 } }, "Aucun r\u00E9sultat"))));
103
127
  var list = isOpen && !disabled
104
- ? ReactDOM.createPortal(React.createElement("div", { className: selectStyles.selectList + " " + styles.listOpen, style: {
105
- position: "fixed",
106
- top: listPos.top,
107
- left: listPos.left,
108
- width: listPos.width,
109
- zIndex: 9999,
110
- }, role: "listbox", tabIndex: -1, onKeyDown: handleKeyDown },
111
- React.createElement("div", { className: styles.searchWrapper },
112
- React.createElement("i", { className: "allaw-icon-search" }),
113
- 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 && {
114
- autoComplete: "off",
115
- "data-form-type": "other",
116
- "data-lpignore": "true",
117
- "data-1p-ignore": true,
118
- })))),
119
- filtered.map(function (item, idx) { return (React.createElement("div", { key: item.value, className: selectStyles.selectItem +
120
- (item.value === selected || idx === highlighted
121
- ? " " + selectStyles.highlighted
122
- : "") +
123
- (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); } },
124
- item.flagUrl ? (React.createElement("img", { src: item.flagUrl, alt: "", className: styles.flag })) : item.flagEmoji ? (React.createElement("span", { className: styles.flag }, item.flagEmoji)) : null,
125
- React.createElement("span", { className: styles.label }, item.label),
126
- React.createElement("span", { className: styles.code }, item.code))); }),
127
- filtered.length === 0 && (React.createElement("div", { className: selectStyles.selectItem, style: { opacity: 0.6 } }, "Aucun r\u00E9sultat"))), document.body)
128
+ ? disablePortal
129
+ ? dropdown
130
+ : ReactDOM.createPortal(dropdown, document.body)
128
131
  : null;
129
132
  return (React.createElement("div", { className: styles.wrapper },
130
133
  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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "4.4.6",
3
+ "version": "4.4.7",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",