allaw-ui 1.0.50 → 1.0.52

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

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

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

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { forwardRef, useState, useRef, useEffect } from "react";
+import React, { forwardRef, useState, useRef, useEffect, useMemo } from "react";
 import ReactDatePicker from "react-datepicker";
 import ReactDOM from "react-dom";
 import "react-datepicker/dist/react-datepicker.css";
@@ -47,7 +47,7 @@ var CustomInput = forwardRef(function (_a, ref) {
 });
 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, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c;
+    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, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate;
     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];
@@ -121,14 +121,25 @@ var Datepicker = function (_a) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    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)) }))); };
+    // Calcul de la date minimale
+    var calculatedMinDate = useMemo(function () {
+        if (minDate)
+            return minDate;
+        if (maxDaysInPast) {
+            var date = new Date();
+            date.setDate(date.getDate() - maxDaysInPast);
+            return date;
+        }
+        return new Date(new Date().setFullYear(new Date().getFullYear() - yearDropdownItemNumber));
+    }, [minDate, maxDaysInPast, yearDropdownItemNumber]);
     return (React.createElement("div", { className: "datepicker-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)));
+        isOpen &&
+            ReactDOM.createPortal(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: calculatedMinDate })), document.body)));
 };
 export default Datepicker;

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

@@ -232,6 +232,7 @@
 .react-datepicker__day--disabled {
   color: var(--venom-grey-dark, #d1dce8) !important;
   cursor: not-allowed;
+  transition: all 0.2s ease;
 }
 
 .react-datepicker__day--disabled:hover {

package/dist/components/atoms/progressBars/ProgressBar.css

@@ -9,15 +9,7 @@
   gap: 4rem;
 }
 
-.progress-bar-background {
-  display: flex;
-  width: 100%;
-  height: 8px;
-  align-items: center;
-  border-radius: 8px;
-  background: var(--venom-grey, #e6edf5);
-  margin: 0 10px;
-}
+
 
 .progress-bar-background.hidden-content {
   visibility: hidden;
@@ -58,7 +50,7 @@
 .progress-bar-background {
   display: flex;
   width: 100%;
-  height: 8px;
+  height: 6px;
   align-items: center;
   border-radius: 8px;
   background: var(--venom-grey, #e6edf5);
@@ -66,7 +58,7 @@
 }
 
 .progress-bar-fill {
-  height: 8px;
+  height: 6px;
   border-radius: 8px;
   transition: width 0.35s ease;
 }

package/dist/components/atoms/progressBars/ProgressBar.js

@@ -7,9 +7,8 @@ var ProgressBar = function (_a) {
     var constrainedCurrentStep = Math.max(0, Math.min(currentStep, steps));
     var progressWidth = constrainedCurrentStep === 0 ? 0 : (constrainedCurrentStep / steps) * 100;
     return (React.createElement("div", { className: "progress-bar-container" },
-        startIcon && currentStep > 1 ? (React.createElement("div", { className: "progress-bar-icon-container" },
-            React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
-                React.createElement("i", { className: "allaw-icon-chevron-left" })))) : null,
+        React.createElement("div", { className: "progress-bar-icon-container" }, startIcon && currentStep > 1 ? (React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
+            React.createElement("i", { className: "allaw-icon-chevron-left" }))) : null),
         React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content") },
             React.createElement("div", { className: "progress-bar-fill progress-bar-fill-".concat(barColor), style: { width: "".concat(progressWidth, "%") } })),
         endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick },

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

@@ -82,7 +82,8 @@
 .combo-box-list {
   position: absolute;
   z-index: 9999;
-  background: var(--secondary-light-grey, #f4f7fb);
+  /* background: var(--secondary-light-grey, #f4f7fb); */
+  background: #fff;
   border-radius: 12px;
   padding: 3px 5px;
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
@@ -96,6 +97,7 @@
   border: 1px solid var(--grey-venom, #e6edf5);
   box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
   scroll-behavior: auto;
+  margin-top: 4px;
 }
 
 .combo-box-pressed .combo-box-list {
@@ -114,7 +116,7 @@
 }
 
 .combo-box-item:hover {
-  background: var(--venom-grey-dark, #d1dce8);
+  background: var(--grey-venom, #e6edf5);
   border-radius: 8px;
 }
 

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

@@ -50,7 +50,8 @@
   right: 0;
   display: flex;
   flex-direction: column;
-  background: var(--secondary-light-grey, #f4f7fb);
+  /* background: var(--secondary-light-grey, #f4f7fb); */
+  background: #fff;
   border-radius: 8px;
   padding: 8px 0;
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
@@ -65,6 +66,7 @@
   border: 1px solid var(--grey-venom, #e6edf5);
   box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
   scroll-behavior: auto;
+  margin-top: 4px;
 }
 
 .select-item {
@@ -76,7 +78,7 @@
 }
 
 .select-item:hover {
-  background: var(--venom-grey-dark, #d1dce8);
+  background: var(--grey-venom, #e6edf5);
 }
 
 .select-item .select-item-icon {

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

@@ -9,6 +9,8 @@ export interface DatepickerFormProps {
     variant?: "bold" | "semiBold" | "medium";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
     yearDropdownItemNumber?: number;
+    maxDaysInPast?: number;
+    minDate?: Date;
 }
 declare const DatepickerForm: React.FC<DatepickerFormProps>;
 export default DatepickerForm;

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

@@ -4,9 +4,9 @@ import "../../../styles/global.css";
 import Paragraph from "../../atoms/typography/Paragraph";
 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, _e = _a.yearDropdownItemNumber, yearDropdownItemNumber = _e === void 0 ? 10 : _e;
+    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, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate;
     return (React.createElement("div", { className: "datepicker-form-wrapper" },
         text && React.createElement(Paragraph, { text: text, variant: variant, color: color }),
-        React.createElement(Datepicker, { value: value, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber })));
+        React.createElement(Datepicker, { value: value, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber, maxDaysInPast: maxDaysInPast, minDate: minDate })));
 };
 export default DatepickerForm;

package/dist/components/molecules/selectForm/SelectForm.d.ts

@@ -7,6 +7,7 @@ export interface SelectFormProps {
     isRequired: boolean;
     options: SelectItem[];
     isMultiple: boolean;
+    placeHolder?: "";
     width?: number;
     selectedItem?: string | string[];
     onChange?: (selected: string | string[]) => void;

package/dist/components/molecules/selectForm/SelectForm.js

@@ -4,12 +4,12 @@ import "../../../styles/global.css";
 import Paragraph from "../../atoms/typography/Paragraph";
 import Select from "../../atoms/selects/Select";
 var SelectForm = function (_a) {
-    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.width, width = _b === void 0 ? 100 : _b, selectedItem = _a.selectedItem, onChange = _a.onChange, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d;
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.placeHolder, placeHolder = _b === void 0 ? "Selectionner une valeure" : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, selectedItem = _a.selectedItem, onChange = _a.onChange, _d = _a.variant, variant = _d === void 0 ? "medium" : _d, _e = _a.color, color = _e === void 0 ? "noir" : _e;
     return (React.createElement("div", { className: "select-form" },
         React.createElement(Paragraph, { variant: variant, color: color, text: React.createElement(React.Fragment, null,
                 label,
                 " ",
                 isRequired && React.createElement("span", { className: "select-form-required" }, "*")), size: "default" }),
-        React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, selectedItem: selectedItem, onChange: onChange })));
+        React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, placeholder: placeHolder, selectedItem: selectedItem, onChange: onChange })));
 };
 export default SelectForm;

package/package.json

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