allaw-ui 1.0.99 → 1.0.103

package/dist/components/atoms/buttons/IconButton.js

@@ -8,8 +8,8 @@ var IconButton = function (_a) {
             "--custom-background-color": color,
         }
         : {};
-    return (React.createElement("button", { className: "icon-button ".concat(style, " ").concat(color ? "custom-color" : ""), onClick: onClick, style: customStyle },
-        React.createElement("i", { className: "icon ".concat(iconName) })));
+    return (React.createElement("button", { className: "icon-button ".concat(style), onClick: onClick, style: customStyle },
+        React.createElement("i", { className: "icon ".concat(iconName), style: { color: color ? color : "inherit" } })));
 };
 IconButton.defaultProps = {
     style: "smallFilled",

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

@@ -25,6 +25,7 @@ function Select(_a, ref) {
         left: 0,
         width: 0,
     }), listPosition = _l[0], setListPosition = _l[1];
+    var _m = useState("bottom"), placement = _m[0], setPlacement = _m[1];
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
     }, [selectedItem, multiple]);
@@ -64,20 +65,32 @@ function Select(_a, ref) {
         return !errorMessage;
     };
     var updateListPosition = function () {
-        if (selectRef.current) {
-            var rect = selectRef.current.getBoundingClientRect();
+        if (selectRef.current && listRef.current) {
+            var selectRect = selectRef.current.getBoundingClientRect();
+            var listHeight = listRef.current.getBoundingClientRect().height;
+            var windowHeight = window.innerHeight;
+            var spaceBelow = windowHeight - selectRect.bottom;
+            var shouldShowBelow = spaceBelow >= listHeight;
+            setPlacement(shouldShowBelow ? "bottom" : "top");
             setListPosition({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-                width: rect.width,
+                top: shouldShowBelow
+                    ? selectRect.bottom
+                    : selectRect.top - listHeight - 5,
+                left: selectRect.left,
+                width: selectRect.width,
             });
         }
     };
     var toggleOpen = function () {
         if (!isOpen) {
-            updateListPosition();
+            setIsOpen(true);
+            requestAnimationFrame(function () {
+                updateListPosition();
+            });
+        }
+        else {
+            setIsOpen(false);
         }
-        setIsOpen(!isOpen);
     };
     var handleClickOutside = function (event) {
         if (selectRef.current &&
@@ -98,10 +111,24 @@ function Select(_a, ref) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    var renderList = function () { return (React.createElement("div", { ref: listRef, className: "select-list ".concat(isOpen ? "visible" : ""), style: {
+    useEffect(function () {
+        if (isOpen) {
+            var handleScroll_1 = function () {
+                updateListPosition();
+            };
+            window.addEventListener("scroll", handleScroll_1, true);
+            return function () {
+                window.removeEventListener("scroll", handleScroll_1, true);
+            };
+        }
+        return function () { };
+    }, [isOpen]);
+    var renderList = function () { return (React.createElement("div", { ref: listRef, className: "select-list ".concat(isOpen ? "visible" : "", " ").concat(placement), style: {
+            position: "fixed",
             top: "".concat(listPosition.top, "px"),
             left: "".concat(listPosition.left, "px"),
             width: "".concat(listPosition.width, "px"),
+            margin: placement === "bottom" ? "4px 0 0 0" : "0 0 4px 0",
         } }, 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 && item.value === selectedItem ? "highlighted" : "", " ").concat(!multiple ? "single-select" : ""), onClick: function () { return handleSelect(item); } },

package/dist/components/molecules/documentCard/DocumentCard.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import "./DocumentCard.css";
 export interface DocumentCardProps {
-    type: "document" | "note" | "invoice" | "waiting" | undefined;
+    type: "document" | "note" | "invoice" | "waiting" | "payment" | undefined;
     title: string;
     date: Date | undefined;
     status: "sent" | "received" | "internal";

package/dist/components/molecules/documentCard/DocumentCard.js

@@ -15,6 +15,8 @@ var DocumentCard = function (_a) {
                 return "allaw-icon-file";
             case "waiting":
                 return "allaw-icon-clock";
+            case "payment":
+                return "allaw-icon-prestation";
             default:
                 return "allaw-icon-document";
         }
@@ -38,6 +40,9 @@ var DocumentCard = function (_a) {
         if (type === "invoice") {
             return "FACTURE";
         }
+        if (type === "payment") {
+            return "PAIEMENT";
+        }
         return type.toUpperCase();
     };
     var formatDate = function (date) {
@@ -67,7 +72,7 @@ var DocumentCard = function (_a) {
     }
     return (React.createElement("div", { className: "document-card", onClick: function () { return onCardClick && onCardClick(); }, style: { cursor: onCardClick ? "pointer" : "default" } },
         React.createElement("div", { className: "document-card-left" },
-            React.createElement(IconButton, { style: "largeFilled", iconName: getIconName() }),
+            React.createElement(IconButton, { style: "largeFilled", iconName: getIconName(), color: type == "payment" ? "#25BEEB" : "inherit" }),
             React.createElement("div", { className: "document-card-info" },
                 React.createElement("span", { className: "document-card-type" }, getDisplayType(type)),
                 React.createElement(Paragraph, { text: title, variant: "semiBold", size: "default", maxLines: 1, color: "noir" }),
@@ -75,7 +80,7 @@ var DocumentCard = function (_a) {
         React.createElement("div", { className: "document-card-right" },
             React.createElement("div", { className: "document-card-status" },
                 React.createElement(OtherStatusTag, { type: "information", label: getStatusName() })),
-            React.createElement("div", { className: "document-card-icon-eye" },
+            type != "payment" && React.createElement("div", { className: "document-card-icon-eye" },
                 React.createElement("i", { className: "allaw-icon-eye" })))));
 };
 export default DocumentCard;

package/package.json

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