allaw-ui 4.7.8 → 4.8.0

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

@@ -1,4 +1,3 @@
-"use client";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {

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

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from "next/link";
 import "./TertiaryButton.css";
 import "../../../styles/global.css";
 var TertiaryButton = function (_a) {
@@ -12,7 +11,7 @@ var TertiaryButton = function (_a) {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return href ? (React.createElement(Link, { href: href, className: buttonClass, onClick: handleClick },
+    return href ? (React.createElement("a", { href: href, className: buttonClass, onClick: handleClick },
         startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
         React.createElement("span", { className: "tertiary-button-label" }, label),
         endIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(endIcon) }))) : (React.createElement("button", { type: "button", className: buttonClass, onClick: handleClick, disabled: isDisabled },

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

@@ -13,6 +13,7 @@ export interface DatepickerProps {
     disableFutur?: Boolean;
     mode?: "button" | "input";
     onError?: (err: string) => void;
+    isPrefilled?: boolean;
 }
 declare const Datepicker: React.FC<DatepickerProps>;
 export default Datepicker;

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

@@ -20,8 +20,8 @@ import { fr } from "date-fns/locale";
 import { format } from "date-fns";
 import TinyInfo from "../typography/TinyInfo";
 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 value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder, _b = _a.isPrefilled, isPrefilled = _b === void 0 ? false : _b;
+    var _c = useState(placeholder), displayedPlaceholder = _c[0], setDisplayedPlaceholder = _c[1];
     var containerRef = useRef(null);
     var testRef = useRef(null);
     useEffect(function () {
@@ -41,7 +41,11 @@ var CustomInput = forwardRef(function (_a, ref) {
         window.addEventListener("resize", checkTextFit);
         return function () { return window.removeEventListener("resize", checkTextFit); };
     }, [placeholder]);
-    return (React.createElement("button", { type: "button", className: "datepicker", onClick: onClick, ref: ref },
+    return (React.createElement("button", { type: "button", className: "datepicker ".concat(isPrefilled
+            ? (value === null || value === void 0 ? void 0 : value.trim())
+                ? "datepicker-prefilled"
+                : "datepicker-prefilled-empty"
+            : ""), onClick: onClick, ref: ref },
         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" })),
@@ -49,10 +53,10 @@ var CustomInput = forwardRef(function (_a, ref) {
 });
 CustomInput.displayName = "CustomInput";
 var CustomInputField = forwardRef(function (_a, ref) {
-    var value = _a.value, onChange = _a.onChange, onCalendarClick = _a.onCalendarClick, placeholder = _a.placeholder, onBlur = _a.onBlur, error = _a.error, onError = _a.onError;
-    var _b = useState(value || ""), inputValue = _b[0], setInputValue = _b[1];
-    var _c = useState(false), isTouched = _c[0], setIsTouched = _c[1];
-    var _d = useState(error || ""), localError = _d[0], setLocalError = _d[1];
+    var value = _a.value, onChange = _a.onChange, onCalendarClick = _a.onCalendarClick, placeholder = _a.placeholder, onBlur = _a.onBlur, error = _a.error, onError = _a.onError, _b = _a.isPrefilled, isPrefilled = _b === void 0 ? false : _b;
+    var _c = useState(value || ""), inputValue = _c[0], setInputValue = _c[1];
+    var _d = useState(false), isTouched = _d[0], setIsTouched = _d[1];
+    var _e = useState(error || ""), localError = _e[0], setLocalError = _e[1];
     var inputRef = useRef(null);
     useEffect(function () {
         setInputValue(value || "");
@@ -104,7 +108,11 @@ var CustomInputField = forwardRef(function (_a, ref) {
             onError(err);
     };
     return (React.createElement("div", { style: { width: "100%" } },
-        React.createElement("div", { className: "datepicker-input-wrapper" },
+        React.createElement("div", { className: "datepicker-input-wrapper ".concat(isPrefilled
+                ? inputValue.trim()
+                    ? "datepicker-input-wrapper-prefilled"
+                    : "datepicker-input-wrapper-prefilled-empty"
+                : "") },
             React.createElement("input", { ref: inputRef, type: "text", inputMode: "numeric", pattern: "\\d{2}/\\d{2}/\\d{4}", maxLength: 10, className: "datepicker-input ".concat(localError && isTouched ? "datepicker-input-error" : ""), placeholder: placeholder, value: inputValue, onChange: handleInput, onBlur: handleBlur, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", "data-1p-ignore": true }),
             React.createElement("button", { type: "button", className: "datepicker-input-icon", tabIndex: -1, onClick: onCalendarClick },
                 React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" }))),
@@ -112,14 +120,14 @@ var CustomInputField = forwardRef(function (_a, ref) {
 });
 CustomInputField.displayName = "CustomInputField";
 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, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _d, _e = _a.mode, mode = _e === void 0 ? "button" : _e, onError = _a.onError;
-    var _f = useState(value), selectedDate = _f[0], setSelectedDate = _f[1];
-    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
-    var _h = useState({ top: 0, left: 0 }), position = _h[0], setPosition = _h[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, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _d, _e = _a.mode, mode = _e === void 0 ? "button" : _e, onError = _a.onError, _f = _a.isPrefilled, isPrefilled = _f === void 0 ? false : _f;
+    var _g = useState(value), selectedDate = _g[0], setSelectedDate = _g[1];
+    var _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = useState({ top: 0, left: 0 }), position = _j[0], setPosition = _j[1];
     var buttonRef = useRef(null);
     var calendarRef = useRef(null);
-    var _j = useState("bottom"), placement = _j[0], setPlacement = _j[1];
-    var _k = useState(""), inputError = _k[0], setInputError = _k[1];
+    var _k = useState("bottom"), placement = _k[0], setPlacement = _k[1];
+    var _l = useState(""), inputError = _l[0], setInputError = _l[1];
     useEffect(function () {
         setSelectedDate(value);
     }, [value]);
@@ -217,9 +225,9 @@ var Datepicker = function (_a) {
             }, onCalendarClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder, error: inputError, onBlur: function () {
                 if (!selectedDate)
                     setInputError("Date invalide");
-            }, onError: onError })) : (React.createElement(CustomInput, { value: selectedDate
+            }, onError: onError, isPrefilled: isPrefilled })) : (React.createElement(CustomInput, { value: selectedDate
                 ? format(selectedDate, "dd MMMM yyyy", { locale: fr })
-                : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder })),
+                : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder, isPrefilled: isPrefilled })),
         isOpen &&
             ReactDOM.createPortal(React.createElement("div", { ref: calendarRef, className: "datepicker-portal ".concat(placement, " datepicker-portal-animated"), style: __assign({ left: "".concat(position.left, "px") }, (placement === "bottom"
                     ? { top: "".concat(position.top, "px") }

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

@@ -50,6 +50,12 @@ declare namespace _default {
             let defaultValue_1: string;
             export { defaultValue_1 as defaultValue };
         }
+        namespace isPrefilled {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
     }
 }
 export default _default;
@@ -58,6 +64,8 @@ export namespace Default {
         export let placeholder: string;
         let yearDropdownItemNumber_1: number;
         export { yearDropdownItemNumber_1 as yearDropdownItemNumber };
+        let isPrefilled_1: boolean;
+        export { isPrefilled_1 as isPrefilled };
     }
 }
 export namespace WithValue {
@@ -108,4 +116,52 @@ export namespace InputMode {
     }
     export { args_5 as args };
 }
+export namespace PrefilledButton {
+    export namespace args_6 {
+        let value_1: Date;
+        export { value_1 as value };
+        let placeholder_6: string;
+        export { placeholder_6 as placeholder };
+        let mode_2: string;
+        export { mode_2 as mode };
+        let isPrefilled_2: boolean;
+        export { isPrefilled_2 as isPrefilled };
+    }
+    export { args_6 as args };
+}
+export namespace PrefilledButtonEmpty {
+    export namespace args_7 {
+        let placeholder_7: string;
+        export { placeholder_7 as placeholder };
+        let mode_3: string;
+        export { mode_3 as mode };
+        let isPrefilled_3: boolean;
+        export { isPrefilled_3 as isPrefilled };
+    }
+    export { args_7 as args };
+}
+export namespace PrefilledInput {
+    export namespace args_8 {
+        let value_2: Date;
+        export { value_2 as value };
+        let placeholder_8: string;
+        export { placeholder_8 as placeholder };
+        let mode_4: string;
+        export { mode_4 as mode };
+        let isPrefilled_4: boolean;
+        export { isPrefilled_4 as isPrefilled };
+    }
+    export { args_8 as args };
+}
+export namespace PrefilledInputEmpty {
+    export namespace args_9 {
+        let placeholder_9: string;
+        export { placeholder_9 as placeholder };
+        let mode_5: string;
+        export { mode_5 as mode };
+        let isPrefilled_5: boolean;
+        export { isPrefilled_5 as isPrefilled };
+    }
+    export { args_9 as args };
+}
 import Datepicker from "./Datepicker";

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

@@ -36,12 +36,17 @@ export default {
             description: "Mode d'affichage du sélecteur (bouton ou champ de saisie)",
             defaultValue: "button",
         },
+        isPrefilled: {
+            control: "boolean",
+            description: "Affiche une bordure bleue pour indiquer un champ pré-rempli",
+        },
     },
 };
 export var Default = {
     args: {
         placeholder: "Sélectionner une date",
         yearDropdownItemNumber: 10,
+        isPrefilled: false,
     },
 };
 export var WithValue = {
@@ -76,3 +81,33 @@ export var InputMode = {
         placeholder: "jj/mm/aaaa",
     },
 };
+export var PrefilledButton = {
+    args: {
+        value: new Date("2024-03-15"),
+        placeholder: "Sélectionner une date",
+        mode: "button",
+        isPrefilled: true,
+    },
+};
+export var PrefilledButtonEmpty = {
+    args: {
+        placeholder: "Champ pré-rempli vide",
+        mode: "button",
+        isPrefilled: true,
+    },
+};
+export var PrefilledInput = {
+    args: {
+        value: new Date("2024-03-15"),
+        placeholder: "jj/mm/aaaa",
+        mode: "input",
+        isPrefilled: true,
+    },
+};
+export var PrefilledInputEmpty = {
+    args: {
+        placeholder: "jj/mm/aaaa pré-rempli vide",
+        mode: "input",
+        isPrefilled: true,
+    },
+};

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

@@ -334,3 +334,47 @@
     transform: scale(1);
   }
 }
+
+/* Nouveaux styles pour la fonctionnalité isPrefilled */
+
+/* Style prefilled pour le mode button */
+.datepicker-prefilled {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-prefilled-empty {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-prefilled:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-prefilled-empty:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+/* Style prefilled pour le mode input */
+.datepicker-input-wrapper-prefilled {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-input-wrapper-prefilled-empty {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-input-wrapper-prefilled:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-input-wrapper-prefilled-empty:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-input-wrapper-prefilled:focus-within {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.datepicker-input-wrapper-prefilled-empty:focus-within {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}

package/dist/components/atoms/inputs/TextArea.css

@@ -176,3 +176,31 @@
   padding-top: 4px;
   padding-left: 14px;
 }
+
+/* Nouveaux styles pour la fonctionnalité isPrefilled */
+
+/* Style prefilled - champ rempli */
+.text-area-prefilled {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+/* Style prefilled - champ vide */
+.text-area-prefilled-empty {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.text-area-prefilled:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.text-area-prefilled-empty:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.text-area-prefilled:focus-within {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.text-area-prefilled-empty:focus-within {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}

package/dist/components/atoms/inputs/TextArea.d.ts

@@ -17,6 +17,7 @@ export interface TextAreaProps {
     variant?: "bold" | "semiBold" | "medium";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
     dataTestId?: string;
+    isPrefilled?: boolean;
 }
 export interface TextAreaRef {
     validate: () => boolean;

package/dist/components/atoms/inputs/TextArea.js

@@ -6,10 +6,10 @@ import Paragraph from "../typography/Paragraph";
 import TinyInfo from "../typography/TinyInfo";
 import "./TextArea.css";
 var TextArea = forwardRef(function (_a, ref) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, minHeight = _a.minHeight, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataTestId = _a.dataTestId;
-    var _g = useState(propValue || ""), value = _g[0], setValue = _g[1];
-    var _h = useState(propError || ""), error = _h[0], setError = _h[1];
-    var _j = useState(false), isTouched = _j[0], setIsTouched = _j[1];
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, minHeight = _a.minHeight, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataTestId = _a.dataTestId, _g = _a.isPrefilled, isPrefilled = _g === void 0 ? false : _g;
+    var _h = useState(propValue || ""), value = _h[0], setValue = _h[1];
+    var _j = useState(propError || ""), error = _j[0], setError = _j[1];
+    var _k = useState(false), isTouched = _k[0], setIsTouched = _k[1];
     var textareaRef = useRef(null);
     useEffect(function () {
         setValue(propValue || "");
@@ -79,7 +79,11 @@ var TextArea = forwardRef(function (_a, ref) {
                 "\u00A0",
                 "*"))),
         React.createElement("div", { className: "text-area-container" },
-            React.createElement("div", { className: "text-area-input", "data-testid": dataTestId || "text-area" },
+            React.createElement("div", { className: "text-area-input ".concat(isPrefilled
+                    ? value.trim()
+                        ? "text-area-prefilled"
+                        : "text-area-prefilled-empty"
+                    : ""), "data-testid": dataTestId || "text-area" },
                 React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: minHeight !== undefined
                         ? "text-area-placeholder no-transition"
                         : "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: textareaStyle, "data-testid": dataTestId || "text-area" })),

package/dist/components/atoms/selects/Select.d.ts

@@ -18,6 +18,7 @@ export interface SelectProps<T extends string | string[]> {
     onChange?: (selected: T) => void;
     onError?: (error: string) => void;
     maxLines?: false | number;
+    isPrefilled?: boolean;
 }
 export interface SelectRef {
     validate: () => boolean;

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

@@ -14,21 +14,21 @@ import "../../../styles/global.css";
 import TinyInfo from "../typography/TinyInfo";
 function Select(_a, ref) {
     var _b;
-    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Choisir..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, maxItems = _a.maxItems, _h = _a.requireAttention, requireAttention = _h === void 0 ? false : _h, _j = _a.disabledItems, disabledItems = _j === void 0 ? [] : _j, onChange = _a.onChange, onError = _a.onError, _k = _a.maxLines, maxLines = _k === void 0 ? false : _k;
-    var _l = useState(false), isOpen = _l[0], setIsOpen = _l[1];
-    var _m = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _m[0], setSelected = _m[1];
-    var _o = useState(""), error = _o[0], setError = _o[1];
+    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Choisir..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, maxItems = _a.maxItems, _h = _a.requireAttention, requireAttention = _h === void 0 ? false : _h, _j = _a.disabledItems, disabledItems = _j === void 0 ? [] : _j, onChange = _a.onChange, onError = _a.onError, _k = _a.maxLines, maxLines = _k === void 0 ? false : _k, _l = _a.isPrefilled, isPrefilled = _l === void 0 ? false : _l;
+    var _m = useState(false), isOpen = _m[0], setIsOpen = _m[1];
+    var _o = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _o[0], setSelected = _o[1];
+    var _p = useState(""), error = _p[0], setError = _p[1];
     var selectRef = useRef(null);
     var listRef = useRef(null);
     var tagContainerRef = useRef(null);
-    var _p = useState([]), visibleTags = _p[0], setVisibleTags = _p[1];
-    var _q = useState(0), hiddenCount = _q[0], setHiddenCount = _q[1];
-    var _r = useState({
+    var _q = useState([]), visibleTags = _q[0], setVisibleTags = _q[1];
+    var _r = useState(0), hiddenCount = _r[0], setHiddenCount = _r[1];
+    var _s = useState({
         top: 0,
         left: 0,
         width: 0,
-    }), listPosition = _r[0], setListPosition = _r[1];
-    var _s = useState("bottom"), placement = _s[0], setPlacement = _s[1];
+    }), listPosition = _s[0], setListPosition = _s[1];
+    var _t = useState("bottom"), placement = _t[0], setPlacement = _t[1];
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
     }, [selectedItem, multiple]);
@@ -233,7 +233,13 @@ function Select(_a, ref) {
         validate: function () { return validateSelect(selected); },
     }); });
     return (React.createElement("div", { ref: selectRef, className: "".concat(styles.selectContainer, " ").concat(isOpen ? styles.selectPressed : ""), style: { width: "".concat(width, "%") } },
-        React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault, " ").concat(multiple ? styles.selectMultiple : styles.selectSingle, " ").concat(requireAttention ? styles.selectRequireAttention : ""), onClick: toggleOpen, style: { width: "100%" } },
+        React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault, " ").concat(multiple ? styles.selectMultiple : styles.selectSingle, " ").concat(requireAttention ? styles.selectRequireAttention : "", " ").concat(isPrefilled
+                ? Array.isArray(selected) && selected.length > 0
+                    ? styles.selectPrefilled
+                    : !Array.isArray(selected) && selected
+                        ? styles.selectPrefilled
+                        : styles.selectPrefilledEmpty
+                : ""), onClick: toggleOpen, style: { width: "100%" } },
             React.createElement("span", { className: "".concat(styles.selectText, " ").concat(maxLines !== false ? styles.selectTextClamp : ""), style: maxLines !== false
                     ? { WebkitLineClamp: maxLines }
                     : undefined }, Array.isArray(selected) && selected.length > 0

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

@@ -240,3 +240,31 @@
     transform: scale(1);
   }
 }
+
+/* Nouveaux styles pour la fonctionnalité isPrefilled */
+
+/* Style prefilled - champ rempli */
+.selectPrefilled {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+/* Style prefilled - champ vide */
+.selectPrefilledEmpty {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.selectPrefilled:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.selectPrefilledEmpty:hover {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.selectPrefilled:focus {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}
+
+.selectPrefilledEmpty:focus {
+  border-color: var(--bleu-allaw, #25ceeb) !important;
+}

package/dist/components/atoms/selects/Select.stories.d.ts

@@ -88,6 +88,12 @@ declare namespace _default {
             export { control_9 as control };
             export let description: string;
         }
+        namespace isPrefilled {
+            let control_10: string;
+            export { control_10 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -122,4 +128,6 @@ export const RequireAttention: any;
 export const TwoLines: any;
 export const WithDisabledItems: any;
 export const MultipleWithDisabledItems: any;
+export const Prefilled: any;
+export const PrefilledEmpty: any;
 import Select from "./Select";

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

@@ -81,6 +81,10 @@ export default {
             },
             description: "Nombre de lignes max affichées (laisser vide pour 1 ligne)",
         },
+        isPrefilled: {
+            control: "boolean",
+            description: "Affiche une bordure bleue pour indiquer un champ pré-rempli",
+        },
     },
     parameters: {
         backgrounds: {
@@ -130,6 +134,7 @@ Default.args = {
     requireAttention: false,
     width: 100,
     maxLines: undefined,
+    isPrefilled: false,
 };
 export var Pressed = Template.bind({});
 Pressed.args = {
@@ -256,3 +261,39 @@ MultipleWithDisabledItems.args = {
     maxItems: 4,
     width: 100,
 };
+export var Prefilled = Template.bind({});
+Prefilled.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "mardi-13-aout",
+    placeholder: "Select...",
+    multiple: false,
+    isRequired: false,
+    requireAttention: false,
+    width: 100,
+    isPrefilled: true,
+};
+export var PrefilledEmpty = Template.bind({});
+PrefilledEmpty.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "",
+    placeholder: "Champ pré-rempli vide...",
+    multiple: false,
+    isRequired: false,
+    requireAttention: false,
+    width: 100,
+    isPrefilled: true,
+};

package/dist/components/atoms/typography/Heading.js

@@ -1,4 +1,3 @@
-"use client";
 import React, { useEffect, useState } from "react";
 import "./Heading.css";
 var Heading = function (_a) {

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

@@ -13,6 +13,7 @@ export interface DatepickerFormProps {
     minDate?: Date;
     mode?: "button" | "input";
     onError?: (err: string) => void;
+    isPrefilled?: boolean;
 }
 declare const DatepickerForm: React.FC<DatepickerFormProps>;
 export default DatepickerForm;

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

@@ -16,9 +16,9 @@ import Paragraph from "../../atoms/typography/Paragraph";
 import Datepicker from "../../atoms/datepickers/Datepicker";
 var DatepickerForm = function (_a) {
     // console.log("Valeur reçue dans DatepickerForm :", value);
-    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, mode = _a.mode, onError = _a.onError;
+    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, mode = _a.mode, onError = _a.onError, _f = _a.isPrefilled, isPrefilled = _f === void 0 ? false : _f;
     return (React.createElement("div", { className: "datepicker-form-wrapper" },
         text && React.createElement(Paragraph, { text: text, variant: variant, color: color }),
-        React.createElement(Datepicker, __assign({ value: value || undefined, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber, maxDaysInPast: maxDaysInPast, minDate: minDate }, (mode ? { mode: mode } : {}), (onError ? { onError: onError } : {})))));
+        React.createElement(Datepicker, __assign({ value: value || undefined, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber, maxDaysInPast: maxDaysInPast, minDate: minDate }, (mode ? { mode: mode } : {}), (onError ? { onError: onError } : {}), { isPrefilled: isPrefilled }))));
 };
 export default DatepickerForm;

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

@@ -80,6 +80,12 @@ declare namespace _default {
             let defaultValue_4: string;
             export { defaultValue_4 as defaultValue };
         }
+        namespace isPrefilled {
+            let control_7: string;
+            export { control_7 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
     }
 }
 export default _default;
@@ -94,6 +100,8 @@ export namespace Default {
         export { color_1 as color };
         let yearDropdownItemNumber_1: number;
         export { yearDropdownItemNumber_1 as yearDropdownItemNumber };
+        let isPrefilled_1: boolean;
+        export { isPrefilled_1 as isPrefilled };
     }
 }
 export namespace WithLabel {
@@ -208,4 +216,76 @@ export namespace ButtonMode {
     }
     export { args_7 as args };
 }
+export namespace PrefilledButton {
+    export namespace args_8 {
+        let text_9: string;
+        export { text_9 as text };
+        let value_1: Date;
+        export { value_1 as value };
+        let placeholder_8: string;
+        export { placeholder_8 as placeholder };
+        let variant_9: string;
+        export { variant_9 as variant };
+        let color_9: string;
+        export { color_9 as color };
+        let mode_3: string;
+        export { mode_3 as mode };
+        let isPrefilled_2: boolean;
+        export { isPrefilled_2 as isPrefilled };
+    }
+    export { args_8 as args };
+}
+export namespace PrefilledButtonEmpty {
+    export namespace args_9 {
+        let text_10: string;
+        export { text_10 as text };
+        let placeholder_9: string;
+        export { placeholder_9 as placeholder };
+        let variant_10: string;
+        export { variant_10 as variant };
+        let color_10: string;
+        export { color_10 as color };
+        let mode_4: string;
+        export { mode_4 as mode };
+        let isPrefilled_3: boolean;
+        export { isPrefilled_3 as isPrefilled };
+    }
+    export { args_9 as args };
+}
+export namespace PrefilledInput {
+    export namespace args_10 {
+        let text_11: string;
+        export { text_11 as text };
+        let value_2: Date;
+        export { value_2 as value };
+        let placeholder_10: string;
+        export { placeholder_10 as placeholder };
+        let variant_11: string;
+        export { variant_11 as variant };
+        let color_11: string;
+        export { color_11 as color };
+        let mode_5: string;
+        export { mode_5 as mode };
+        let isPrefilled_4: boolean;
+        export { isPrefilled_4 as isPrefilled };
+    }
+    export { args_10 as args };
+}
+export namespace PrefilledInputEmpty {
+    export namespace args_11 {
+        let text_12: string;
+        export { text_12 as text };
+        let placeholder_11: string;
+        export { placeholder_11 as placeholder };
+        let variant_12: string;
+        export { variant_12 as variant };
+        let color_12: string;
+        export { color_12 as color };
+        let mode_6: string;
+        export { mode_6 as mode };
+        let isPrefilled_5: boolean;
+        export { isPrefilled_5 as isPrefilled };
+    }
+    export { args_11 as args };
+}
 import DatepickerForm from "./DatepickerForm";