@axa-fr/design-system-apollo-react 1.0.5-alpha.463 → 1.0.5-alpha.465

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

@@ -10,6 +10,7 @@ export declare const InputDate: import("react").ForwardRefExoticComponent<Omit<O
     helper?: string;
     error?: string;
     success?: string;
+    hidePicker?: boolean;
     label: ComponentProps<typeof import("../ItemLabel/ItemLabelCommon").ItemLabel>["label"];
     ItemLabelComponent: import("react").ComponentType<Omit<ComponentProps<typeof import("../ItemLabel/ItemLabelCommon").ItemLabel>, "ButtonComponent">>;
     ItemMessageComponent: import("react").ComponentType<ComponentProps<typeof ItemMessage>>;

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

@@ -10,6 +10,7 @@ type InputDateProps = Omit<ComponentPropsWithRef<"input">, "value" | "min" | "ma
     helper?: string;
     error?: string;
     success?: string;
+    hidePicker?: boolean;
     label: ComponentProps<typeof ItemLabel>["label"];
     ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabel>, "ButtonComponent">>;
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;

package/dist/Form/InputDate/InputDateCommon.js

@@ -1,14 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, } from "react";
+import { forwardRef, useEffect, useId, } from "react";
 import { getComponentClassName } from "../../utilities/getComponentClassName";
 import { formatInputDateValue } from "./InputDate.helper";
-const InputDate = forwardRef(({ className, classModifier = "", defaultValue, value, helper, error, success, label, description, buttonLabel, onButtonClick, ItemLabelComponent, ItemMessageComponent, required, "aria-errormessage": ariaErrormessage, min, max, ...otherProps }, inputRef) => {
-    const componentClassName = getComponentClassName("af-form__input-date", className ?? "", classModifier + (error || ariaErrormessage ? " error" : ""));
+const InputDate = forwardRef(({ className, classModifier = "", defaultValue, value, helper, error, success, label, description, buttonLabel, onButtonClick, ItemLabelComponent, ItemMessageComponent, required, "aria-errormessage": ariaErrormessage, min, max, hidePicker, ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName("af-form__input-date", className ?? "", `${classModifier}${hidePicker ? " no-picker" : ""}`);
     let inputId = useId();
     inputId = otherProps.id ?? inputId;
     const idMessage = useId();
     const idHelp = useId();
     const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
+    /* Stop keydown (space and enter) and click events for Firefox when picker is disabled */
+    useEffect(() => {
+        function handleKeydown(event) {
+            if (hidePicker && (event.keyCode === 13 || event.keyCode === 32)) {
+                event.preventDefault();
+            }
+        }
+        function handleClick(event) {
+            if (hidePicker) {
+                event.preventDefault();
+            }
+        }
+        window.addEventListener("keydown", handleKeydown);
+        window.addEventListener("click", handleClick);
+        return () => {
+            window.removeEventListener("keydown", handleKeydown);
+            window.removeEventListener("click", handleClick);
+        };
+    }, [hidePicker]);
     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": ariaErrormessage ?? (error ? idMessage : undefined), "aria-invalid": Boolean(error ?? ariaErrormessage), "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: error || success, messageType: error ? "error" : "success" })] }));
 });
 InputDate.displayName = "InputDate";

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

@@ -10,6 +10,7 @@ export declare const InputDate: import("react").ForwardRefExoticComponent<Omit<O
     helper?: string;
     error?: string;
     success?: string;
+    hidePicker?: boolean;
     label: ComponentProps<typeof import("../ItemLabel/ItemLabelCommon").ItemLabel>["label"];
     ItemLabelComponent: import("react").ComponentType<Omit<ComponentProps<typeof import("../ItemLabel/ItemLabelCommon").ItemLabel>, "ButtonComponent">>;
     ItemMessageComponent: import("react").ComponentType<ComponentProps<typeof ItemMessage>>;

package/package.json

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