@axa-fr/design-system-apollo-react 3.0.0 → 3.0.1-alpha.12

package/dist/Form/InputDate/InputDate.helper.d.ts

@@ -1 +1,8 @@
 export declare const formatInputDateValue: (value?: Date | string) => string | undefined;
+export declare const isValidDayDecimal: (char: string, index: number) => boolean;
+export declare const isValidDay: (day: number, index: number) => boolean;
+export declare const isValidMonthDecimal: (char: string, index: number) => boolean;
+export declare const isValidMonth: (month: number, index: number) => boolean;
+export declare const isValidMillennium: (char: string, index: number) => boolean;
+export declare const isValidDigit: (char: string, index: number, currentCleanValue: string[]) => boolean;
+export declare const formatDateTextValue: (value?: string) => string;

package/dist/Form/InputDate/InputDate.helper.js

@@ -1 +1,23 @@
 export const formatInputDateValue = (value) => value instanceof Date ? value.toISOString().split("T")[0] : value;
+export const isValidDayDecimal = (char, index) => (index === 0 && Number(char) <= 3) || index !== 0;
+export const isValidDay = (day, index) => (index === 1 && day <= 31 && day > 0) || index !== 1;
+export const isValidMonthDecimal = (char, index) => (index === 2 && Number(char) <= 1) || index !== 2;
+export const isValidMonth = (month, index) => (index === 3 && month <= 12 && month > 0) || index !== 3;
+export const isValidMillennium = (char, index) => (index === 4 && Number(char) > 0) || index !== 4;
+export const isValidDigit = (char, index, currentCleanValue) => Number.isInteger(Number(char)) &&
+    isValidDayDecimal(char, index) &&
+    isValidDay(Number(`${Number(currentCleanValue[0])}${Number(char)}`), index) &&
+    isValidMonthDecimal(char, index) &&
+    isValidMonth(Number(`${Number(currentCleanValue[2])}${Number(char)}`), index) &&
+    isValidMillennium(char, index);
+export const formatDateTextValue = (value) => {
+    if (!value) {
+        return "";
+    }
+    return value
+        .split("")
+        .filter((char) => char !== "/")
+        .filter((char, index, currentCleanValue) => isValidDigit(char, index, currentCleanValue))
+        .map((char, index) => (index === 2 || index === 4 ? `/${char}` : char))
+        .join("");
+};

package/dist/Form/InputDate/InputDateAtom.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithRef } from "react";
+export type InputDateAtomProps = Omit<ComponentPropsWithRef<"input">, "value" | "min" | "max"> & {
+    defaultValue?: Date | string;
+    value?: Date | string;
+    min?: Date | string;
+    max?: Date | string;
+};
+declare const InputDateAtom: import("react").ForwardRefExoticComponent<Omit<InputDateAtomProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { InputDateAtom };

package/dist/Form/InputDate/InputDateAtom.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { formatInputDateValue } from "./InputDate.helper";
+const InputDateAtom = forwardRef(({ defaultValue, value, min, max, ...otherProps }, inputRef) => (_jsx("input", { ...otherProps, type: "date", ref: inputRef, defaultValue: formatInputDateValue(defaultValue), value: formatInputDateValue(value), min: formatInputDateValue(min), max: formatInputDateValue(max) })));
+InputDateAtom.displayName = "InputDateAtom";
+export { InputDateAtom };

package/dist/Form/InputDate/InputDateCommon.d.ts

@@ -18,7 +18,7 @@ export type InputDateProps = Omit<ComponentPropsWithRef<"input">, "value" | "min
     success?: string;
     hidePicker?: boolean;
     label: ItemLabelProps["label"];
-} & Partial<ItemLabelProps & ItemMessageProps>;
+} & Partial<Omit<ItemLabelProps, "onChange"> & ItemMessageProps>;
 type InputDateCommonProps = InputDateProps & {
     ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;

package/dist/Form/InputDate/InputDateCommon.js

@@ -1,41 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useId, useImperativeHandle, useRef, } from "react";
+import { forwardRef, useId, } from "react";
 import { getComponentClassName } from "../../utilities/getComponentClassName";
-import { formatInputDateValue } from "./InputDate.helper";
-const InputDateCommon = forwardRef(({ className, classModifier = "", defaultValue, value, helper, error, success, message, messageType, label, description, buttonLabel, onButtonClick, ItemLabelComponent, ItemMessageComponent, required, min, max, hidePicker, ...otherProps }, ref) => {
-    const componentClassName = getComponentClassName("af-form__input-date", className ?? "", `${classModifier}${hidePicker ? " no-picker" : ""}`);
+import { InputDateAtom } from "./InputDateAtom";
+import { InputDateTextAtom } from "./InputDateTextAtom";
+const InputDateCommon = forwardRef(({ className, classModifier = "", helper, error, success, message, messageType, label, description, buttonLabel, onButtonClick, ItemLabelComponent, ItemMessageComponent, required, hidePicker, max, min, ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName("af-form__input-date", className ?? "", classModifier);
     let inputId = useId();
     inputId = otherProps.id ?? inputId;
     const idMessage = useId();
     const idHelp = useId();
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
-    const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
-    /* Stop space keydown, enter keydown for non webkit browsers and click events targeting the input element when picker is disabled */
-    useEffect(() => {
-        function handleKeydown(event) {
-            if (hidePicker &&
-                (event.keyCode === 32 ||
-                    (event.keyCode === 13 &&
-                        !window.navigator?.userAgent?.includes("WebKit"))) &&
-                event.target === inputRef.current) {
-                event.preventDefault();
-            }
-        }
-        function handleClick(event) {
-            if (hidePicker && event.target === inputRef.current) {
-                event.preventDefault();
-            }
-        }
-        window.addEventListener("keydown", handleKeydown);
-        window.addEventListener("click", handleClick);
-        return () => {
-            window.removeEventListener("keydown", handleKeydown);
-            window.removeEventListener("click", handleClick);
-        };
-    }, [hidePicker]);
+    const ariaDescribedbyIds = [
+        helper && idHelp,
+        ((Boolean(message) && messageType === "success") || Boolean(success)) &&
+            idMessage,
+    ].filter(Boolean);
+    const ariaDescribedby = ariaDescribedbyIds.length
+        ? ariaDescribedbyIds.join(" ")
+        : undefined;
     const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, required: required, inputId: inputId }), _jsx("input", { ...otherProps, id: inputId, className: componentClassName, type: "date", ref: inputRef, defaultValue: formatInputDateValue(defaultValue), value: formatInputDateValue(value), "aria-errormessage": hasError ? idMessage : undefined, "aria-invalid": hasError || undefined, "aria-describedby": ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, required: required, min: formatInputDateValue(min), max: formatInputDateValue(max) }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
+    const ariaErrormessage = hasError ? idMessage : undefined;
+    const ariaInvalid = hasError || undefined;
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, required: required, inputId: inputId }), hidePicker ? (_jsx(InputDateTextAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required })) : (_jsx(InputDateAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required, max: max, min: min })), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
 });
 InputDateCommon.displayName = "InputDate";
 export { InputDateCommon };

package/dist/Form/InputDate/InputDateTextAtom.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentProps } from "react";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
+export type InputDateTextAtomProps = Omit<ComponentProps<typeof InputTextAtom>, "value"> & {
+    value?: Date | string;
+    defaultValue?: Date | string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+declare const InputDateTextAtom: import("react").ForwardRefExoticComponent<Omit<InputDateTextAtomProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { InputDateTextAtom };

package/dist/Form/InputDate/InputDateTextAtom.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
+import { formatDateTextValue, formatInputDateValue } from "./InputDate.helper";
+const InputDateTextAtom = forwardRef(({ onChange, value, defaultValue, ...otherProps }, inputRef) => {
+    const handleChange = (e) => {
+        const formattedValue = formatDateTextValue(e.target.value);
+        onChange?.({
+            ...e,
+            target: { ...e.target, value: formattedValue },
+        });
+    };
+    return (_jsx(InputTextAtom, { pattern: "\\d{0,2}/?\\d{0,2}/?\\d{0,4}", maxLength: 10, ref: inputRef, inputMode: "numeric", onChange: handleChange, value: formatInputDateValue(value), defaultValue: formatInputDateValue(defaultValue), ...otherProps }));
+});
+InputDateTextAtom.displayName = "InputDateText";
+export { InputDateTextAtom };

package/dist/Form/InputTextAtom/InputTextAtomCommon.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
 import { getComponentClassName } from "../../utilities/getComponentClassName";
-const InputTextAtom = forwardRef(({ unit, className, classModifier = "", error, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, type = "text", ...otherProps }, inputRef) => {
+const InputTextAtom = forwardRef(({ unit, className, classModifier = "", error, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, "aria-describedby": ariaDescribedby, type = "text", ...otherProps }, inputRef) => {
     const componentClassName = getComponentClassName("af-form__input-text", className, classModifier + (error || ariaErrormessage ? " error" : ""));
     let inputId = useId();
     inputId = otherProps.id || inputId;
-    return (_jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: type, required: required, ref: inputRef, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error || ariaErrormessage), "aria-describedby": idHelp, ...otherProps }), unit] }));
+    return (_jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: type, required: required, ref: inputRef, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error || ariaErrormessage), "aria-describedby": ariaDescribedby ?? idHelp, ...otherProps }), unit] }));
 });
 InputTextAtom.displayName = "InputTextAtom";
 export { InputTextAtom };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "3.0.0",
+  "version": "3.0.1-alpha.12",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,10 +46,10 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "3.0.0",
+    "@axa-fr/design-system-apollo-css": "3.0.1-alpha.12",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18",
-    "@axa-fr/design-system-look-and-feel-css": "3.0.0"
+    "@axa-fr/design-system-look-and-feel-css": "3.0.1-alpha.12"
   },
   "peerDependenciesMeta": {
     "@material-symbols/svg-400": {