odaptos_design_system 2.0.323 → 2.0.325

package/dist/index.cjs

@@ -63,6 +63,8 @@ let __mui_x_date_pickers = require("@mui/x-date-pickers");
 __mui_x_date_pickers = __toESM(__mui_x_date_pickers);
 let __mui_x_date_pickers_DatePicker = require("@mui/x-date-pickers/DatePicker");
 __mui_x_date_pickers_DatePicker = __toESM(__mui_x_date_pickers_DatePicker);
+let date_fns = require("date-fns");
+date_fns = __toESM(date_fns);
 let __mui_x_date_pickers_DesktopDateTimePicker = require("@mui/x-date-pickers/DesktopDateTimePicker");
 __mui_x_date_pickers_DesktopDateTimePicker = __toESM(__mui_x_date_pickers_DesktopDateTimePicker);
 let __mui_material_Modal = require("@mui/material/Modal");
@@ -15679,13 +15681,13 @@ const CssTextField$11 = (0, __mui_material_styles.styled)(__mui_material.TextFie
 		}
 	}
 });
-const NumberInput = ({ className, inputCode, inputNumber, isValid, userValue, setUserValue, setIsValid, maxElement, placeholder,...props$1 }) => {
+const NumberInput = ({ className, inputCode, inputNumber, isValid: isValid$1, userValue, setUserValue, setIsValid, maxElement, placeholder,...props$1 }) => {
 	const [value, setValue] = (0, react.useState)("");
 	return /* @__PURE__ */ react.default.createElement(CssTextField$11, {
 		value,
 		onKeyDown: (event) => {
 			if (event.key === "Backspace") {
-				let newValidity = [...isValid];
+				let newValidity = [...isValid$1];
 				setValue("");
 				let newUserValue = [...userValue];
 				newUserValue[inputNumber] = "";
@@ -15693,7 +15695,7 @@ const NumberInput = ({ className, inputCode, inputNumber, isValid, userValue, se
 				setIsValid([...newValidity]);
 			}
 			if (Number(event.key) || Number(event.key) === 0) {
-				let newValidity = [...isValid];
+				let newValidity = [...isValid$1];
 				setValue(event.key);
 				newValidity[inputNumber] = event.key === inputCode;
 				let newUserValue = [...userValue];
@@ -15713,13 +15715,13 @@ const NumberInput = ({ className, inputCode, inputNumber, isValid, userValue, se
 	});
 };
 /** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=131-253&mode=dev */
-const NumbersCode = ({ className, code, userValue, setUserValue, isValid, setIsValid, containerClassname, placeholder = "_", number = 6 }) => {
+const NumbersCode = ({ className, code, userValue, setUserValue, isValid: isValid$1, setIsValid, containerClassname, placeholder = "_", number = 6 }) => {
 	const children = [];
 	for (let i = 0; i < number; i += 1) children.push(/* @__PURE__ */ react.default.createElement(NumberInput, {
 		userValue,
 		setUserValue,
 		setIsValid,
-		isValid,
+		isValid: isValid$1,
 		inputCode: code ? code.charAt(i) : "",
 		className,
 		inputNumber: i,
@@ -73106,12 +73108,142 @@ style_inject_es_default(css_248z$19);
 
 //#endregion
 //#region src/Organisms/DatePicker/DatePicker.tsx
-const DatePicker = ({ className, label, topLabel, topLabelWeight, topLabelSize, value, format, disabled, disableFuture, disablePast, loading, locale = "enUS", maxDate, minDate, required, error, errorText, helperText, views = [
+const DatePicker = ({ className, label, topLabel, topLabelWeight, topLabelSize, value, format = "dd/MM/yyyy", disabled, disableFuture, disablePast, loading, locale = "enUS", maxDate, minDate, required, error, errorText, helperText, views = [
 	"day",
 	"month",
 	"year"
-], renderLoading, onChange, onBlur }) => {
-	return /* @__PURE__ */ react.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ react.default.createElement(__mui_x_date_pickers.LocalizationProvider, {
+], renderLoading, onChange, onBlur, isMobile }) => {
+	const [inputValue, setInputValue] = react.default.useState(() => {
+		if (value && value instanceof Date && (0, date_fns.isValid)(value)) return (0, date_fns.format)(value, format);
+		return "";
+	});
+	const formatInputValue = (value$1, dateFormat) => {
+		const limitedNumbers = value$1.replace(/\D/g, "").slice(0, 8);
+		const separator = (dateFormat.match(/[^dMy]/g) || [])[0] || "/";
+		const formatParts = dateFormat.split(/[^dMy]/);
+		const positions = [];
+		let currentPos = 0;
+		for (let i = 0; i < formatParts.length - 1; i++) {
+			currentPos += formatParts[i].length;
+			positions.push(currentPos);
+		}
+		let formatted = limitedNumbers;
+		for (let i = positions.length - 1; i >= 0; i--) {
+			const pos = positions[i];
+			if (limitedNumbers.length > pos) formatted = limitedNumbers.slice(0, pos) + separator + limitedNumbers.slice(pos);
+		}
+		return formatted;
+	};
+	const handleInputChange = (event) => {
+		const rawValue = event.target.value;
+		const formattedValue = formatInputValue(rawValue, format);
+		setInputValue(formattedValue);
+		try {
+			const parsedDate = (0, date_fns.parse)(formattedValue, format, /* @__PURE__ */ new Date());
+			if ((0, date_fns.isValid)(parsedDate)) onChange?.(parsedDate);
+			else if (formattedValue === "") onChange?.(null);
+		} catch (error$1) {}
+	};
+	react.default.useEffect(() => {
+		if (value && value instanceof Date && (0, date_fns.isValid)(value)) setInputValue((0, date_fns.format)(value, format));
+		else setInputValue("");
+	}, [value, format]);
+	return /* @__PURE__ */ react.default.createElement("div", { style: { width: "100%" } }, isMobile ? /* @__PURE__ */ react.default.createElement("div", { className: `${DatePicker_modules_default.date_picker} ${className ? className : void 0}` }, topLabel && /* @__PURE__ */ react.default.createElement(Text, {
+		text: `${topLabel ? topLabel : ""}`,
+		weight: topLabelWeight || "bold",
+		size: topLabelSize || "base",
+		className: DatePicker_modules_default.input_top_label,
+		required
+	}), /* @__PURE__ */ react.default.createElement(__mui_material.TextField, {
+		label: topLabel === void 0 ? label : "",
+		value: inputValue,
+		onChange: handleInputChange,
+		onBlur,
+		disabled,
+		required,
+		error,
+		fullWidth: true,
+		placeholder: format?.toUpperCase(),
+		inputProps: {
+			autoComplete: "off",
+			inputMode: "text"
+		},
+		InputLabelProps: {
+			required,
+			sx: { "& .MuiFormLabel-asterisk": { color: "#F54C4C" } }
+		},
+		sx: {
+			width: "100%",
+			"& .MuiFormControl-root": { width: "100%" },
+			"& .MuiTextField-root": { width: "100%" },
+			"& .MuiInputBase-root": { width: "100%" },
+			"& .MuiInputBase-input": {
+				color: "#26292E",
+				fontFamily: "Open Sans !important",
+				fontSize: "1rem"
+			},
+			"& .MuiInputBase-input.Mui-disabled": {
+				color: "#26292E",
+				fontFamily: "Open Sans !important",
+				fontSize: "1rem"
+			},
+			"& .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled": { WebkitTextFillColor: colors.neutral_600 },
+			"& .Mui-error": { color: "#26292E" },
+			"& .MuiFormHelperText-root": { color: "#F54C4C" },
+			"& .MuiFormLabel-asterisk": { color: "#F54C4C" },
+			"& .MuiOutlinedInput-root.Mui-disabled": {
+				cursor: "not-allowed",
+				color: "#26292E",
+				"& fieldset": { borderColor: "#BCBDBE" },
+				"&:hover fieldset": { borderColor: "#BCBDBE" }
+			},
+			"& label": {
+				color: "#26292E",
+				fontFamily: "Open Sans !important",
+				fontSize: "1rem",
+				transform: inputValue ? "translate(14px, -9px) scale(0.75)" : "translate(14px, 10px) scale(1)",
+				transformOrigin: "top left",
+				transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
+			},
+			"& label.Mui-disabled.Mui-error": {
+				color: "#26292E",
+				opacity: .5,
+				fontFamily: "Open Sans !important",
+				fontSize: "1rem"
+			},
+			"& label.Mui-focused": {
+				color: "#26292E",
+				fontFamily: "Open Sans",
+				fontSize: "1rem",
+				backgroundColor: "transparent",
+				marginRight: 5,
+				paddingRight: 5,
+				transform: "translate(14px, -9px) scale(0.75)",
+				transformOrigin: "top left"
+			},
+			"& .MuiOutlinedInput-root": {
+				fontFamily: "Open Sans",
+				"& fieldset": { borderColor: "#96989A" },
+				"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": { display: "none" },
+				"& input[type=number]": { MozAppearance: "textfield" },
+				"&:hover fieldset": { borderColor: "#0077FF" },
+				"&.Mui-focused fieldset": { borderColor: "#0077FF" },
+				"&.Mui-error fieldset": { borderColor: "#F54C4C" },
+				"&.Mui-disabled .Mui-focused fieldset": { borderColor: "rgba(0, 119, 255, 0.5)" }
+			}
+		}
+	}), error && errorText && /* @__PURE__ */ react.default.createElement(Text, {
+		size: "xs",
+		color: "#F54C4C",
+		italic: true,
+		text: errorText,
+		className: DatePicker_modules_default.text_below
+	}), helperText && /* @__PURE__ */ react.default.createElement(Text, {
+		size: "xs",
+		italic: true,
+		text: helperText,
+		className: DatePicker_modules_default.text_below
+	})) : /* @__PURE__ */ react.default.createElement(__mui_x_date_pickers.LocalizationProvider, {
 		dateAdapter: __mui_x_date_pickers_AdapterDateFnsV3.AdapterDateFns,
 		adapterLocale: locale === "enUS" ? date_fns_locale_en_US.enUS : locale === "fr" ? date_fns_locale_fr.fr : locale === "it" ? date_fns_locale_it.it : locale === "de" ? date_fns_locale_de.de : locale === "es" ? date_fns_locale_es.es : date_fns_locale_en_US.enUS
 	}, /* @__PURE__ */ react.default.createElement("div", { className: `${DatePicker_modules_default.date_picker} ${className ? className : void 0}` }, topLabel && /* @__PURE__ */ react.default.createElement(Text, {
@@ -73125,11 +73257,7 @@ const DatePicker = ({ className, label, topLabel, topLabelWeight, topLabelSize,
 		value,
 		views,
 		format,
-		open: false,
-		slots: {
-			openPickerIcon: () => null,
-			clearIcon: () => null
-		},
+		slots: { clearIcon: () => null },
 		slotProps: { textField: {
 			label: topLabel === void 0 ? label : "",
 			required,