allaw-ui 1.0.24 → 1.0.25

package/dist/components/atoms/datepickers/Datepicker.d.ts

@@ -6,6 +6,7 @@ export interface DatepickerProps {
     value?: Date;
     onChange?: (date: Date) => void;
     placeholder?: string;
+    yearDropdownItemNumber?: number;
 }
 declare const Datepicker: React.FC<DatepickerProps>;
 export default Datepicker;

package/dist/components/atoms/datepickers/Datepicker.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React, { forwardRef, useState, useRef, useEffect } from "react";
 import ReactDatePicker from "react-datepicker";
 import ReactDOM from "react-dom";
@@ -8,24 +19,66 @@ import { fr } from "date-fns/locale";
 import { format } from "date-fns";
 var CustomInput = forwardRef(function (_a, ref) {
     var value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder;
+    var _b = useState(placeholder), displayedPlaceholder = _b[0], setDisplayedPlaceholder = _b[1];
+    var containerRef = useRef(null);
+    var testRef = useRef(null);
+    useEffect(function () {
+        var checkTextFit = function () {
+            if (containerRef.current && testRef.current && placeholder) {
+                // Élément de test invisible pour mesurer la largeur réelle du texte complet
+                testRef.current.style.visibility = "hidden";
+                testRef.current.style.position = "absolute";
+                testRef.current.textContent = placeholder;
+                var containerWidth = containerRef.current.offsetWidth;
+                var textWidth = testRef.current.offsetWidth;
+                // Ajouter une marge pour l'icône et le padding (40px)
+                setDisplayedPlaceholder(textWidth + 40 > containerWidth ? "Date" : placeholder);
+            }
+        };
+        checkTextFit();
+        window.addEventListener("resize", checkTextFit);
+        return function () { return window.removeEventListener("resize", checkTextFit); };
+    }, [placeholder]);
     return (React.createElement("button", { type: "button", className: "datepicker", onClick: onClick, ref: ref },
-        React.createElement("span", { className: "datepicker-text" }, value || placeholder),
-        React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" })));
+        React.createElement("span", { className: "datepicker-content", ref: containerRef },
+            React.createElement("span", { className: "datepicker-text" }, value || displayedPlaceholder),
+            React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" })),
+        React.createElement("span", { className: "datepicker-test-text", ref: testRef, "aria-hidden": "true" })));
 });
 CustomInput.displayName = "CustomInput";
 var Datepicker = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b;
-    var _c = useState(value), selectedDate = _c[0], setSelectedDate = _c[1];
-    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
-    var _e = useState({ top: 0, left: 0 }), position = _e[0], setPosition = _e[1];
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c;
+    var _d = useState(value), selectedDate = _d[0], setSelectedDate = _d[1];
+    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = useState({ top: 0, left: 0 }), position = _f[0], setPosition = _f[1];
     var buttonRef = useRef(null);
     var calendarRef = useRef(null);
+    var _g = useState("bottom"), placement = _g[0], setPlacement = _g[1];
     var updatePosition = function () {
         if (buttonRef.current) {
             var rect = buttonRef.current.getBoundingClientRect();
+            var windowHeight = window.innerHeight;
+            var calendarHeight = 380; // Hauteur approximative du calendrier
+            // Vérifier s'il y a assez d'espace en dessous
+            var spaceBelow = windowHeight - rect.bottom;
+            var shouldShowBelow = spaceBelow >= calendarHeight;
+            setPlacement(shouldShowBelow ? "bottom" : "top");
+            // Calcul de la position horizontale centrée
+            var buttonCenter = rect.left + rect.width / 2;
+            var calendarWidth = 300; // Largeur du calendrier (définie dans le CSS)
+            var leftPosition = buttonCenter - calendarWidth / 2;
+            // Ajuster si le calendrier dépasse de l'écran
+            if (leftPosition + calendarWidth > window.innerWidth) {
+                leftPosition = window.innerWidth - calendarWidth - 16;
+            }
+            if (leftPosition < 16) {
+                leftPosition = 16;
+            }
             setPosition({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
+                top: shouldShowBelow
+                    ? rect.bottom + window.scrollY
+                    : rect.top + window.scrollY,
+                left: leftPosition + window.scrollX,
             });
         }
     };
@@ -66,12 +119,10 @@ var Datepicker = function (_a) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    var renderCalendar = function () { return (React.createElement("div", { ref: calendarRef, className: "datepicker-portal", style: {
-            position: "absolute",
-            top: "".concat(position.top, "px"),
-            left: "".concat(position.left, "px"),
-        } },
-        React.createElement(ReactDatePicker, { selected: selectedDate, onChange: handleDateChange, locale: fr, inline: true, dateFormat: "dd MMMM yyyy", calendarClassName: "custom-calendar", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", yearItemNumber: 15, maxDate: new Date() }))); };
+    var renderCalendar = function () { return (React.createElement("div", { ref: calendarRef, className: "datepicker-portal ".concat(placement), style: __assign({ left: "".concat(position.left, "px") }, (placement === "bottom"
+            ? { top: "".concat(position.top, "px") }
+            : { top: "".concat(position.top, "px") })) },
+        React.createElement(ReactDatePicker, { selected: selectedDate, onChange: handleDateChange, locale: fr, inline: true, dateFormat: "dd MMMM yyyy", calendarClassName: "custom-calendar", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", maxDate: new Date(), minDate: new Date(new Date().setFullYear(new Date().getFullYear() - yearDropdownItemNumber)) }))); };
     return (React.createElement("div", { className: "datepicker-container", ref: buttonRef },
         React.createElement(CustomInput, { value: selectedDate
                 ? format(selectedDate, "dd MMMM yyyy", { locale: fr })

package/dist/components/atoms/datepickers/datepicker.css

@@ -7,15 +7,13 @@
   display: flex;
   height: 40px;
   padding: 8px 16px;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  gap: 8px;
-  align-self: stretch;
   border-radius: 8px;
   background: var(--Primary-Light-grey, #f4f7fb);
   border: none;
   cursor: pointer;
-  min-width: 200px;
+  min-width: 120px;
   width: 100%;
 }
 
@@ -23,6 +21,14 @@
   background: var(--grey-venom, #e6edf5);
 }
 
+.datepicker-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  justify-content: space-between;
+}
+
 .datepicker-text {
   color: var(--Primary-Mid-black, #171e25);
   font-family: "Open Sans";
@@ -33,12 +39,22 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  flex: 1;
 }
 
 .datepicker-icon {
   color: var(--Primary-Dark-grey, #456073);
   font-size: 16px;
-  padding-left: 6px;
+  flex-shrink: 0;
+}
+
+.datepicker-test-text {
+  visibility: hidden;
+  position: absolute;
+  white-space: nowrap;
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-weight: 700;
 }
 
 /* Customisation du calendrier */
@@ -147,6 +163,15 @@
   box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
 }
 
+.datepicker-portal.top {
+  bottom: 8px;
+  transform: translateY(-100%);
+}
+
+.datepicker-portal.bottom {
+  top: 8px;
+}
+
 /* Customisation des flèches de navigation */
 .react-datepicker__navigation {
   padding: 8px;

package/dist/components/molecules/contactCard/ContactCard.d.ts

@@ -12,6 +12,7 @@ export interface ContactCardProps {
     isEditable: boolean;
     onEdit: () => void;
     gender: "male" | "female";
+    actionIconName?: string;
 }
 declare const ContactCard: React.FC<ContactCardProps>;
 export default ContactCard;

package/dist/components/molecules/contactCard/ContactCard.js

@@ -5,7 +5,7 @@ import IconButton from "../../atoms/buttons/IconButton";
 import Image from "next/image";
 var NoPhoto = "/assets/NoPhoto.png";
 var ContactCard = function (_a) {
-    var size = _a.size, name = _a.name, birthDate = _a.birthDate, avatarUrl = _a.avatarUrl, status = _a.status, address = _a.address, phone = _a.phone, email = _a.email, onEdit = _a.onEdit, gender = _a.gender;
+    var size = _a.size, name = _a.name, birthDate = _a.birthDate, avatarUrl = _a.avatarUrl, status = _a.status, address = _a.address, phone = _a.phone, email = _a.email, onEdit = _a.onEdit, gender = _a.gender, _b = _a.actionIconName, actionIconName = _b === void 0 ? "allaw-icon-edit-2" : _b;
     var renderContent = function () {
         switch (size) {
             case "small":
@@ -73,7 +73,7 @@ var ContactCard = function (_a) {
                                     React.createElement("i", { className: "allaw-icon-mail info-icon" }),
                                     React.createElement("span", { className: "info-text contact" }, email))))),
                     React.createElement("div", { className: "action-button-container" },
-                        React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: onEdit }))));
+                        React.createElement(IconButton, { style: "largeFilled", iconName: actionIconName, onClick: onEdit }))));
         }
     };
     return React.createElement("div", { className: "contact-card ".concat(size) }, renderContent());

package/dist/components/molecules/datepickerForm/DatepickerForm.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import "react-datepicker/dist/react-datepicker.css";
 import "./datepickerForm.css";
 import "../../../styles/global.css";
 export interface DatepickerFormProps {
@@ -9,6 +8,7 @@ export interface DatepickerFormProps {
     text?: string;
     variant?: "bold" | "semiBold" | "medium";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+    yearDropdownItemNumber?: number;
 }
 declare const DatepickerForm: React.FC<DatepickerFormProps>;
 export default DatepickerForm;

package/dist/components/molecules/datepickerForm/DatepickerForm.js

@@ -1,84 +1,12 @@
-import React, { forwardRef, useState, useRef, useEffect } from "react";
-import ReactDatePicker from "react-datepicker";
-import ReactDOM from "react-dom";
-import "react-datepicker/dist/react-datepicker.css";
+import React from "react";
 import "./datepickerForm.css";
 import "../../../styles/global.css";
-import { fr } from "date-fns/locale";
-import { format } from "date-fns";
 import Paragraph from "../../atoms/typography/Paragraph";
-var CustomInput = forwardRef(function (_a, ref) {
-    var value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder;
-    return (React.createElement("button", { type: "button", className: "datepicker-form", onClick: onClick, ref: ref },
-        React.createElement("span", { className: "datepicker-form-text" }, value || placeholder),
-        React.createElement("i", { className: "datepicker-form-icon allaw-icon-calendar" })));
-});
-CustomInput.displayName = "CustomInput";
+import Datepicker from "../../atoms/datepickers/Datepicker";
 var DatepickerForm = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d;
-    var _e = useState(value), selectedDate = _e[0], setSelectedDate = _e[1];
-    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
-    var _g = useState({ top: 0, left: 0 }), position = _g[0], setPosition = _g[1];
-    var buttonRef = useRef(null);
-    var calendarRef = useRef(null);
-    var updatePosition = function () {
-        if (buttonRef.current) {
-            var rect = buttonRef.current.getBoundingClientRect();
-            setPosition({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-            });
-        }
-    };
-    useEffect(function () {
-        if (isOpen) {
-            updatePosition();
-            window.addEventListener("scroll", updatePosition);
-            window.addEventListener("resize", updatePosition);
-        }
-        return function () {
-            window.removeEventListener("scroll", updatePosition);
-            window.removeEventListener("resize", updatePosition);
-        };
-    }, [isOpen]);
-    var handleDateChange = function (date) {
-        if (date) {
-            setSelectedDate(date);
-            onChange === null || onChange === void 0 ? void 0 : onChange(date);
-            setIsOpen(false);
-        }
-    };
-    var handleClickOutside = function (event) {
-        if (buttonRef.current &&
-            !buttonRef.current.contains(event.target) &&
-            calendarRef.current &&
-            !calendarRef.current.contains(event.target)) {
-            setIsOpen(false);
-        }
-    };
-    useEffect(function () {
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        else {
-            document.removeEventListener("mousedown", handleClickOutside);
-        }
-        return function () {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen]);
-    var renderCalendar = function () { return (React.createElement("div", { ref: calendarRef, className: "datepicker-form-portal", style: {
-            position: "absolute",
-            top: "".concat(position.top, "px"),
-            left: "".concat(position.left, "px"),
-        } },
-        React.createElement(ReactDatePicker, { selected: selectedDate, onChange: handleDateChange, locale: fr, inline: true, dateFormat: "dd MMMM yyyy", calendarClassName: "custom-calendar", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", yearItemNumber: 15, maxDate: new Date() }))); };
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, _e = _a.yearDropdownItemNumber, yearDropdownItemNumber = _e === void 0 ? 10 : _e;
     return (React.createElement("div", { className: "datepicker-form-wrapper" },
         text && React.createElement(Paragraph, { text: text, variant: variant, color: color }),
-        React.createElement("div", { className: "datepicker-form-container", ref: buttonRef },
-            React.createElement(CustomInput, { value: selectedDate
-                    ? format(selectedDate, "dd MMMM yyyy", { locale: fr })
-                    : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder }),
-            isOpen && ReactDOM.createPortal(renderCalendar(), document.body))));
+        React.createElement(Datepicker, { value: value, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber })));
 };
 export default DatepickerForm;

package/dist/components/molecules/datepickerForm/datepickerForm.css

@@ -1,214 +1,3 @@
-.datepicker-form-container {
-  position: relative;
-  width: 100%;
-}
-
-.datepicker-form {
-  display: flex;
-  height: 40px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  align-self: stretch;
-  border-radius: 8px;
-  background: var(--Primary-Light-grey, #f4f7fb);
-  border: none;
-  cursor: pointer;
-  min-width: 200px;
-  width: 100%;
-}
-
-.datepicker-form:hover {
-  background: var(--grey-venom, #e6edf5);
-}
-
-.datepicker-form-text {
-  color: var(--Primary-Mid-black, #171e25);
-  font-family: "Open Sans";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.datepicker-form-icon {
-  color: var(--Primary-Dark-grey, #456073);
-  font-size: 16px;
-  padding-left: 6px;
-}
-
-/* Customisation du calendrier */
-.custom-calendar {
-  border: none !important;
-  font-family: "Open Sans";
-  font-size: 16px;
-  width: 300px !important;
-  padding: 16px;
-}
-
-.react-datepicker-form__month-container {
-  width: 100%;
-}
-
-.react-datepicker-form__header {
-  background: white;
-  border: none;
-  padding: 0;
-}
-
-.react-datepicker-form__day-names {
-  display: flex;
-  justify-content: space-between;
-  padding: 16px 8px;
-}
-
-.react-datepicker-form__day-name {
-  color: var(--Primary-Dark-grey, #456073);
-  font-weight: 600;
-  width: 36px;
-  margin: 0;
-}
-
-.react-datepicker-form__month {
-  margin: 0;
-  padding: 8px;
-}
-
-.react-datepicker-form__day {
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-  margin: 0;
-  border-radius: 18px;
-  color: var(--Primary-Dark-grey, #456073);
-  font-family: "Open Sans";
-}
-
-.react-datepicker-form__day:hover {
-  background: var(--grey-venom, #e6edf5);
-  border-radius: 18px;
-}
-
-.react-datepicker-form__day--selected {
-  background: var(--bleu-allaw, #1985e8) !important;
-  border-radius: 18px !important;
-  color: white !important;
-}
-
-.react-datepicker-form__day--keyboard-selected {
-  background: var(--grey-venom, #e6edf5);
-  border-radius: 18px;
-  color: var(--Primary-Mid-black, #171e25);
-}
-
-.react-datepicker-form__day--keyboard-selected:not(
-    [aria-disabled="true"]
-  ):hover,
-.react-datepicker-form__month-text--keyboard-selected:not(
-    [aria-disabled="true"]
-  ):hover,
-.react-datepicker-form__quarter-text--keyboard-selected:not(
-    [aria-disabled="true"]
-  ):hover,
-.react-datepicker-form__year-text--keyboard-selected:not(
-    [aria-disabled="true"]
-  ):hover {
-  background-color: var(--bleu-allaw, #25beeb);
-  color: white;
-  border-radius: 18px;
-}
-
-.custom-header {
-  margin-bottom: 16px;
-}
-
-.year-dropdown,
-.month-dropdown {
-  padding: 8px;
-  min-width: 100px;
-}
-
-/* Style pour mobile */
-@media (max-width: 768px) {
-  .datepicker-form {
-    width: 100%;
-    min-width: unset;
-  }
-}
-
-.datepicker-form-portal {
-  position: absolute;
-  z-index: 9999;
-  background: white;
-  border: 1px solid var(--grey-venom, #e6edf5);
-  border-radius: 8px;
-  box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
-}
-
-/* Customisation des flèches de navigation */
-.react-datepicker-form__navigation {
-  padding: 8px;
-  border-radius: 18px;
-  margin: 8px;
-}
-
-.react-datepicker-form__navigation--previous {
-  left: 1px;
-}
-
-.react-datepicker-form__navigation--next {
-  right: 1px;
-}
-
-.react-datepicker-form__navigation:hover {
-  background: var(--grey-venom, #e6edf5);
-  border-radius: 18px;
-}
-
-/* Padding pour le mois en cours */
-.react-datepicker-form__current-month {
-  padding-bottom: 18px;
-}
-
-.react-datepicker-form__current-month.react-datepicker-form__current-month--hasYearDropdown.react-datepicker-form__current-month--hasMonthDropdown {
-  padding-bottom: 16px;
-}
-
-.react-datepicker-form__month-select,
-.react-datepicker-form__year-select {
-  font-size: 16px;
-  font-family: "Open Sans";
-  padding: 6px 10px;
-  border-radius: 8px;
-  border: 1px solid var(--grey-venom, #e6edf5);
-  background-color: white;
-  cursor: pointer;
-}
-
-.react-datepicker-form__month-select:hover,
-.react-datepicker-form__year-select:hover {
-  background: var(--grey-venom, #e6edf5);
-}
-
-.react-datepicker-form__navigation-icon.react-datepicker-form__navigation-icon--previous {
-  left: 1px;
-}
-
-.react-datepicker-form__navigation-icon.react-datepicker-form__navigation-icon--next {
-  right: 1px;
-}
-
-.react-datepicker-form__day:not([aria-disabled="true"]):hover,
-.react-datepicker-form__month-text:not([aria-disabled="true"]):hover,
-.react-datepicker-form__quarter-text:not([aria-disabled="true"]):hover,
-.react-datepicker-form__year-text:not([aria-disabled="true"]):hover {
-  border-radius: 18px;
-}
-
 .datepicker-form-wrapper {
   display: flex;
   flex-direction: column;

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

@@ -63,6 +63,10 @@
   align-items: flex-end;
 }
 
+.document-card-icon-eye {
+  color: var(--Primary-Mid-black, var(--mid-grey, #728ea7));
+}
+
 /* Styles spécifiques pour le type "waiting" */
 .document-card.waiting {
   width: 425px;

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

@@ -67,6 +67,9 @@ var DocumentCard = function (_a) {
                 React.createElement(Paragraph, { text: title, variant: "semiBold", size: "default", maxLines: 1, color: "noir" }),
                 React.createElement("span", { className: "document-card-date" }, formatDate(date)))),
         React.createElement("div", { className: "document-card-right" },
-            React.createElement(OtherStatusTag, { type: "information", label: getStatusName() }))));
+            React.createElement("div", { className: "document-card-status" },
+                React.createElement(OtherStatusTag, { type: "information", label: getStatusName() })),
+            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.24",
+  "version": "1.0.25",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",