allaw-ui 0.1.32 → 0.1.33

package/dist/components/atoms/selects/Select.css

@@ -109,3 +109,7 @@
   padding-top: 4px;
   padding-left: 14px;
 }
+
+.select-item.highlighted {
+  background-color: var(--venom-grey-dark, #d1dce8);
+}

package/dist/components/atoms/selects/Select.js

@@ -18,16 +18,19 @@ function Select(_a, ref) {
     var _j = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _j[0], setSelected = _j[1];
     var _k = useState(""), error = _k[0], setError = _k[1];
     var selectRef = useRef(null);
-    var selectedItemRef = useRef(null);
+    var listRef = useRef(null);
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
     }, [selectedItem, multiple]);
     useEffect(function () {
-        if (!multiple && selectedItem && isOpen && selectedItemRef.current) {
-            selectedItemRef.current.scrollIntoView({
-                behavior: "smooth",
-                block: "nearest",
-            });
+        if (!multiple && selectedItem && isOpen && listRef.current) {
+            var selectedItemElement = listRef.current.querySelector(".select-item[data-value=\"".concat(selectedItem, "\"]"));
+            if (selectedItemElement instanceof HTMLElement) {
+                var listHeight = listRef.current.offsetHeight;
+                var itemHeight = selectedItemElement.offsetHeight;
+                var scrollTop = selectedItemElement.offsetTop - listHeight / 2 + itemHeight / 2;
+                listRef.current.scrollTo({ top: scrollTop, behavior: "smooth" });
+            }
         }
     }, [isOpen, multiple, selectedItem]);
     var handleSelect = function (item) {
@@ -82,11 +85,9 @@ function Select(_a, ref) {
                     ? (_b = items.find(function (item) { return item.value === selected; })) === null || _b === void 0 ? void 0 : _b.label
                     : placeholder),
             React.createElement("span", { className: "select-icon ".concat(isOpen ? "allaw-icon-chevron-up" : "allaw-icon-chevron-down") })),
-        isOpen && (React.createElement("div", { className: "select-list", style: { width: "100%" } }, items.map(function (item) { return (React.createElement("div", { key: item.value, ref: !multiple && item.value === selectedItem
-                ? selectedItemRef
-                : null, className: "select-item ".concat(Array.isArray(selected) && selected.includes(item.value)
+        isOpen && (React.createElement("div", { ref: listRef, className: "select-list", style: { width: "100%" } }, items.map(function (item) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "select-item ".concat(Array.isArray(selected) && selected.includes(item.value)
                 ? "selected"
-                : "", " ").concat(!multiple ? "single-select" : ""), onClick: function () { return handleSelect(item); } },
+                : "", " ").concat(!multiple && item.value === selectedItem ? "highlighted" : "", " ").concat(!multiple ? "single-select" : ""), onClick: function () { return handleSelect(item); } },
             multiple && (React.createElement("span", { className: "select-item-icon allaw-icon-check" })),
             React.createElement("span", { className: "select-item-text" }, item.label))); }))),
         isRequired && showError && error && (React.createElement("div", { className: "error-message" },

package/package.json

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