@axa-fr/design-system-slash-react 1.2.1-alpha.71 → 1.2.1-alpha.72

package/dist/Form/Choice/Choice.d.ts

@@ -8,6 +8,7 @@ type Props = Omit<ComponentProps<typeof Radio>, "options" | "value"> & {
         value: boolean;
     }>;
     value?: boolean | string;
+    classModifier?: string;
 };
 declare const Choice: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { Choice };

package/dist/Form/Choice/Choice.js

@@ -12,7 +12,7 @@ const Choice = forwardRef(({ children, value, options = defaultOptions, name, ..
         value: `${o.value}`,
     })));
     const generatedId = useId();
-    return (_jsx(Radio, { ...otherProps, ref: inputRef, name: name ?? `choice_${generatedId}`, value: value?.toString(), options: choiceOptions, children: children }));
+    return (_jsx(Radio, { ...otherProps, mode: "default", ref: inputRef, name: name ?? `choice_${generatedId}`, value: value?.toString(), options: choiceOptions, children: children }));
 });
 Choice.displayName = "Choice";
 export { Choice };

package/dist/Form/Radio/Radio.d.ts

@@ -1,31 +1,26 @@
-import { ComponentPropsWithoutRef } from "react";
 import type { Option } from "../core";
-import { RadioCardGroup } from "./RadioCardGroup";
 export declare enum RadioModes {
     classic = "classic",
     default = "default",
     inline = "inline",
     card = "card"
 }
-declare const Radio: import("react").ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
-    classModifier?: string;
-    optionClassName?: string;
-    label?: import("react").ReactNode;
-    isChecked?: boolean;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "className" | "id" | "label"> & {
+declare const Radio: import("react").ForwardRefExoticComponent<(({
     options: Option[];
-} & {
-    mode?: "classic" | "default" | "inline";
-}, "ref"> | Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
+} & Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    options: Option[];
+    orientation?: "horizontal" | "vertical";
+    error?: boolean;
+}, "ref"> & {
+    mode: "card";
+}) | Omit<{
+    options: Option[];
+} & Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
     classModifier?: string;
     optionClassName?: string;
     label?: import("react").ReactNode;
     isChecked?: boolean;
 }, "ref"> & import("react").RefAttributes<HTMLInputElement>, "className" | "id" | "label"> & {
-    options: Option[];
-} & {
-    mode: "card";
-    className?: string;
-    orientation?: ComponentPropsWithoutRef<typeof RadioCardGroup>["orientation"];
+    mode?: "classic" | "default" | "inline";
 }, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
 export { Radio };

package/dist/Form/Radio/Radio.js

@@ -22,15 +22,13 @@ const getClassNameMode = (mode) => {
             return "af-form__radio-custom";
     }
 };
-const Radio = forwardRef(({ classModifier, options, value = "", children, disabled, ...otherProps }, inputRef) => {
-    const classNameMode = getClassNameMode(otherProps.mode ?? "default");
-    // ICI - le if qui permet de rendre un autre composant
-    if (otherProps.mode === "card") {
-        return (_jsx(RadioCardGroup, { className: otherProps.className, options: options, error: classModifier === "error", disabled: disabled, orientation: otherProps.orientation, children: children }));
+const Radio = forwardRef(({ options, value = "", children, disabled, ...otherProps }, inputRef) => {
+    const { mode, ...onlyNecessaryProps } = otherProps;
+    const classNameMode = getClassNameMode(mode ?? "default");
+    if (mode === "card") {
+        return (_jsx(RadioCardGroup, { ...onlyNecessaryProps, options: options, disabled: disabled, value: value, children: children }));
     }
-    const onlyNecessaryProps = { ...otherProps };
-    delete onlyNecessaryProps.mode;
-    return options.map((option) => (_createElement(RadioItem, { ...onlyNecessaryProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, classModifier: classModifier, ref: inputRef, ...option }, children)));
+    return options.map((option) => (_createElement(RadioItem, { ...onlyNecessaryProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, ref: inputRef, ...option }, children)));
 });
 Radio.displayName = "EnhancedInputRadio";
 export { Radio };

package/dist/Form/Radio/RadioCardGroup.d.ts

@@ -1,12 +1,10 @@
 import "@axa-fr/design-system-slash-css/dist/Form/Radio/RadioCardGroup.css";
-import { PropsWithChildren } from "react";
+import { ComponentProps } from "react";
 import type { Option } from "../core";
-type Props = PropsWithChildren & {
+type Props = ComponentProps<"input"> & {
     options: Option[];
     orientation?: "horizontal" | "vertical";
     error?: boolean;
-    disabled?: boolean;
-    className?: string;
 };
-export declare const RadioCardGroup: ({ children, options, className, orientation, disabled, error, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioCardGroup: ({ children, options, className, value, orientation, disabled, error, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Radio/RadioCardGroup.js

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import { Svg } from "../../Svg";
 const DEFAULT_CLASSNAME = "af-card";
 const DEFAULT_CONTAINER_CLASSNAME = "af-form__radio-card-group";
-export const RadioCardGroup = ({ children, options, className, orientation = "vertical", disabled = false, error = false, }) => {
+export const RadioCardGroup = ({ children, options, className, value, orientation = "vertical", disabled = false, error = false, ...otherProps }) => {
     const idGenerated = useId();
     const radioGroupRef = useRef(null);
     return (_jsxs("div", { ref: radioGroupRef, role: "radiogroup", className: classNames([
@@ -13,7 +13,7 @@ export const RadioCardGroup = ({ children, options, className, orientation = "ve
             className,
             orientation === "horizontal" &&
                 `${DEFAULT_CONTAINER_CLASSNAME}--horizontal`,
-        ]), children: [options.map(({ name, icon, label, disabled: optionDisabled, checked, ...otherOptionProps }) => {
+        ]), children: [options.map(({ name, icon, label, disabled: optionDisabled, value: optionValue, ...otherOptionProps }) => {
                 const newName = name ?? idGenerated;
                 const allClassNames = classNames([
                     DEFAULT_CLASSNAME,
@@ -21,6 +21,6 @@ export const RadioCardGroup = ({ children, options, className, orientation = "ve
                     error && `${DEFAULT_CLASSNAME}--error`,
                 ]);
                 const isDisabled = disabled || optionDisabled;
-                return (_jsxs("label", { className: allClassNames, children: [_jsx("input", { type: "radio", name: newName, disabled: isDisabled, checked: isDisabled ? false : checked, ...otherOptionProps }), typeof icon === "string" ? _jsx(Svg, { src: icon }) : icon, label] }, otherOptionProps.value));
+                return (_jsxs("label", { className: allClassNames, children: [_jsx("input", { ...otherProps, type: "radio", name: newName, disabled: isDisabled, checked: isDisabled ? false : optionValue === value, value: optionValue, ...otherOptionProps }), typeof icon === "string" ? _jsx(Svg, { src: icon }) : icon, label] }, optionValue));
             }), children] }));
 };

package/dist/Form/Radio/RadioInput.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Field, useOptionsWithId } from "../core";
 import { Radio, RadioModes } from "./Radio";
-const RadioInput = forwardRef(({ label, mode, options, ...props }, inputRef) => {
+const RadioInput = forwardRef(({ label, mode = "default", options, ...props }, inputRef) => {
     const labelPosition = mode === RadioModes.classic ? "top" : "center";
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: "radiogroup", ...props, renderInput: ({ classModifier, ariaInvalid, errorId, ...radioProps }) => (_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...radioProps })) }));
+    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: mode !== "card" ? "radiogroup" : undefined, ...props, renderInput: ({ classModifier, ariaInvalid, errorId, ...radioProps }) => (_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...radioProps })) }));
 });
 RadioInput.displayName = "EnhancedInputRadio";
 export { RadioInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.71",
+  "version": "1.2.1-alpha.72",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.2.1-alpha.71",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.72",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },