@axa-fr/design-system-apollo-react 1.0.5-alpha.398 → 1.0.5-alpha.403

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.d.ts

@@ -1,6 +1,2 @@
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss";
-export declare const Checkbox: import("react").ForwardRefExoticComponent<{
-    errorId?: string;
-    hasError?: boolean;
-    className?: string;
-} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "disabled"> & import("react").RefAttributes<HTMLInputElement>>;
+export { Checkbox } from "./CheckboxCommon";

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.js

@@ -1,7 +1,2 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss";
-import checkBoxIcon from "@material-symbols/svg-400/rounded/check_small.svg";
-import { CheckboxCommon } from "./CheckboxCommon";
-export const Checkbox = forwardRef((props, ref) => (_jsx(CheckboxCommon, { ...props, ref: ref, checkBoxIcon: checkBoxIcon })));
-Checkbox.displayName = "Checkbox";
+export { Checkbox } from "./CheckboxCommon";

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.d.ts

@@ -1,14 +1,8 @@
-import { type InputHTMLAttributes } from "react";
+import { type ComponentProps } from "react";
 export type CheckboxProps = {
+    /** @deprecated Use `aria-errormessage` instead */
     errorId?: string;
+    /** @deprecated Use `aria-invalid` instead */
     hasError?: boolean;
-    className?: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "disabled">;
-declare const CheckboxCommon: import("react").ForwardRefExoticComponent<{
-    errorId?: string;
-    hasError?: boolean;
-    className?: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "disabled"> & {
-    checkBoxIcon: string;
-} & import("react").RefAttributes<HTMLInputElement>>;
-export { CheckboxCommon };
+} & Omit<ComponentProps<"input">, "disabled" | "type">;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.js

@@ -1,6 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Svg } from "../../../Svg/Svg";
-const CheckboxCommon = forwardRef(({ errorId, checkBoxIcon, hasError, ...inputProps }, ref) => (_jsxs("span", { className: "af-checkbox", children: [_jsx(Svg, { src: checkBoxIcon, "aria-hidden": true }), _jsx("input", { ...inputProps, ref: ref, type: "checkbox", "aria-errormessage": errorId, "aria-invalid": hasError, disabled: false })] })));
-CheckboxCommon.displayName = "CheckboxCommon";
-export { CheckboxCommon };
+export const Checkbox = forwardRef(({ errorId, hasError, className, ...inputProps }, ref) => (_jsx("input", { "aria-errormessage": errorId, "aria-invalid": hasError, ...inputProps, className: ["af-checkbox", className].filter(Boolean).join(" "), ref: ref, type: "checkbox" })));
+Checkbox.displayName = "Checkbox";

package/dist/Form/Checkbox/Checkbox/CheckboxLF.d.ts

@@ -1,6 +1,2 @@
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxLF.scss";
-export declare const Checkbox: import("react").ForwardRefExoticComponent<{
-    errorId?: string;
-    hasError?: boolean;
-    className?: string;
-} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "disabled"> & import("react").RefAttributes<HTMLInputElement>>;
+export { Checkbox } from "./CheckboxCommon";

package/dist/Form/Checkbox/Checkbox/CheckboxLF.js

@@ -1,7 +1,2 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxLF.scss";
-import checkBoxIcon from "@material-symbols/svg-400/rounded/check.svg";
-import { CheckboxCommon } from "./CheckboxCommon";
-export const Checkbox = forwardRef((props, ref) => (_jsx(CheckboxCommon, { ...props, ref: ref, checkBoxIcon: checkBoxIcon })));
-Checkbox.displayName = "Checkbox";
+export { Checkbox } from "./CheckboxCommon";

package/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.d.ts

@@ -1,5 +1,3 @@
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss";
-export declare const CheckboxText: import("react").ForwardRefExoticComponent<{
-    label: string | import("react").ReactNode;
-    errorMessage?: string;
-} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "disabled"> & import("react").RefAttributes<HTMLInputElement>>;
+import { type CheckboxTextProps } from "./CheckboxTextCommon";
+export declare const CheckboxText: import("react").ForwardRefExoticComponent<Omit<CheckboxTextProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/Checkbox/CheckboxText/CheckboxTextCommon.d.ts

@@ -1,19 +1,12 @@
-import React, { type ReactNode, type ComponentProps, type ComponentType } from "react";
-import { ItemMessage } from "../../ItemMessage/ItemMessageCommon";
-import { CheckboxCommon } from "../Checkbox/CheckboxCommon";
+import { type ReactNode, type ComponentType } from "react";
+import type { ItemMessageProps } from "../../ItemMessage/ItemMessageCommon";
+import type { CheckboxProps } from "../Checkbox/CheckboxCommon";
 export type CheckboxTextProps = {
     label: string | ReactNode;
     errorMessage?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled">;
+} & Omit<CheckboxProps, "aria-errormessage" | "aria-invalid">;
 export type CheckboxTextCommonProps = CheckboxTextProps & {
-    CheckboxComponent: ComponentType<Omit<ComponentProps<typeof CheckboxCommon>, "checkBoxIcon">>;
-    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
+    CheckboxComponent: ComponentType<Omit<CheckboxProps, "checkBoxIcon">>;
+    ItemMessageComponent: ComponentType<ItemMessageProps>;
 };
-declare const CheckboxTextCommon: React.ForwardRefExoticComponent<{
-    label: string | ReactNode;
-    errorMessage?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled"> & {
-    CheckboxComponent: ComponentType<Omit<ComponentProps<typeof CheckboxCommon>, "checkBoxIcon">>;
-    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
-} & React.RefAttributes<HTMLInputElement>>;
-export { CheckboxTextCommon };
+export declare const CheckboxTextCommon: import("react").ForwardRefExoticComponent<Omit<CheckboxTextCommonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/Checkbox/CheckboxText/CheckboxTextCommon.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, forwardRef, } from "react";
-const CheckboxTextCommon = forwardRef(({ label, errorMessage, CheckboxComponent, ItemMessageComponent, ...inputProps }, ref) => {
-    const errorId = useId();
-    let inputId = useId();
-    inputId = inputProps.id || inputId;
-    return (_jsxs("div", { className: "af-checkbox-text", children: [_jsx(CheckboxComponent, { id: inputId, errorId: errorId, hasError: Boolean(errorMessage), ...inputProps, ref: ref }), _jsx("label", { htmlFor: inputId, children: _jsx("span", { children: label }) }, inputProps.name), _jsx(ItemMessageComponent, { message: errorMessage })] }));
+import { useId, forwardRef } from "react";
+export const CheckboxTextCommon = forwardRef(({ label, errorMessage, id, CheckboxComponent, ItemMessageComponent, ...inputProps }, ref) => {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const errorId = `${inputId}-error`;
+    return (_jsxs("div", { className: "af-checkbox-text", children: [_jsxs("label", { htmlFor: inputId, children: [_jsx(CheckboxComponent, { id: inputId, ...inputProps, "aria-errormessage": errorMessage ? errorId : undefined, "aria-invalid": errorMessage ? true : undefined, ref: ref }), _jsx("span", { className: "af-checkbox-text__label-content", children: label })] }), _jsx(ItemMessageComponent, { message: errorMessage, id: errorId })] }));
 });
 CheckboxTextCommon.displayName = "CheckboxTextCommon";
-export { CheckboxTextCommon };

package/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.d.ts

@@ -1,5 +1,3 @@
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.scss";
-export declare const CheckboxText: import("react").ForwardRefExoticComponent<{
-    label: string | import("react").ReactNode;
-    errorMessage?: string;
-} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "disabled"> & import("react").RefAttributes<HTMLInputElement>>;
+import { CheckboxTextProps } from "./CheckboxTextCommon";
+export declare const CheckboxText: import("react").ForwardRefExoticComponent<Omit<CheckboxTextProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/ItemMessage/ItemMessageCommon.d.ts

@@ -1,8 +1,7 @@
 import type { ReactNode } from "react";
-type ItemMessageProps = {
+export type ItemMessageProps = {
     message?: ReactNode;
     id?: string;
     messageType?: "error" | "success";
 };
 export declare const ItemMessage: ({ message, id, messageType, }: ItemMessageProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/Form/TextArea/TextAreaApollo.d.ts

@@ -18,8 +18,4 @@ export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Om
     ItemLabelComponent: import("react").ComponentType<Omit<ComponentProps<typeof import("../ItemLabel/ItemLabelCommon").ItemLabel>, "ButtonComponent">>;
     ItemMessageComponent: import("react").ComponentType<ComponentProps<typeof ItemMessage>>;
     onButtonClick?: import("react").MouseEventHandler<HTMLButtonElement>;
-} & Partial<{
-    message?: import("react").ReactNode;
-    id?: string;
-    messageType?: "error" | "success";
-}>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>, "ItemMessageComponent" | "ItemLabelComponent">, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & Partial<import("../ItemMessage/ItemMessageCommon").ItemMessageProps>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>, "ItemMessageComponent" | "ItemLabelComponent">, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Form/TextArea/TextAreaCommon.d.ts

@@ -2,6 +2,7 @@ import { type ComponentProps, ComponentPropsWithRef, type ComponentType, MouseEv
 import { ItemLabel } from "../ItemLabel/ItemLabelCommon";
 import { ItemMessage } from "../ItemMessage/ItemMessageCommon";
 type Props = ComponentPropsWithRef<"textarea"> & Pick<ComponentProps<typeof ItemLabel>, "label" | "description" | "buttonLabel" | "sideButtonLabel" | "onSideButtonClick"> & {
+    /** @deprecated Use `className` instead */
     classModifier?: string;
     helper?: string;
     error?: string;
@@ -9,5 +10,5 @@ type Props = ComponentPropsWithRef<"textarea"> & Pick<ComponentProps<typeof Item
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
 } & Partial<ComponentPropsWithRef<typeof ItemMessage>>;
-declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
-export { TextArea };
+export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/Form/TextArea/TextAreaCommon.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
-import { getComponentClassName } from "../../utilities/getComponentClassName";
-const TextArea = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, ...otherProps }, inputRef) => {
-    const componentClassName = getComponentClassName("af-form__input-textarea", className, classModifier);
-    let inputId = useId();
-    inputId = otherProps.id || inputId;
-    const idHelp = useId();
-    const idError = useId();
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsx("textarea", { id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": error ? idError : undefined, "aria-describedby": helper ? idHelp : undefined, "aria-invalid": Boolean(error), ...otherProps }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idError, message: error })] }));
+export const TextArea = forwardRef(({ id, className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", ...inputProps }, inputRef) => {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const helperId = `${inputId}-helper`;
+    const errorId = `${inputId}-error`;
+    return (_jsxs("div", { className: ["af-form__input-container", className]
+            .filter(Boolean)
+            .join(" "), children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsx("textarea", { id: inputId, className: "af-form__input-textarea", ref: inputRef, "aria-errormessage": error ? errorId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": Boolean(error) || classModifier.includes("error") ? true : undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: errorId, message: error })] }));
 });
 TextArea.displayName = "TextArea";
-export { TextArea };

package/dist/Form/TextArea/TextAreaLF.d.ts

@@ -18,8 +18,4 @@ export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Om
     ItemLabelComponent: import("react").ComponentType<Omit<ComponentProps<typeof import("../ItemLabel/ItemLabelCommon").ItemLabel>, "ButtonComponent">>;
     ItemMessageComponent: import("react").ComponentType<ComponentProps<typeof ItemMessage>>;
     onButtonClick?: import("react").MouseEventHandler<HTMLButtonElement>;
-} & Partial<{
-    message?: import("react").ReactNode;
-    id?: string;
-    messageType?: "error" | "success";
-}>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>, "ItemMessageComponent" | "ItemLabelComponent">, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & Partial<import("../ItemMessage/ItemMessageCommon").ItemMessageProps>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>, "ItemMessageComponent" | "ItemLabelComponent">, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.5-alpha.398",
+  "version": "1.0.5-alpha.403",
   "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.398",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.398",
+    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.403",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.403",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },