@axa-fr/design-system-slash-react 1.1.1-alpha.237 → 1.1.1-alpha.239

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

@@ -1,9 +1,10 @@
 import "@axa-fr/design-system-slash-css/dist/Form/Choice/Choice.scss";
 import { type ComponentProps } from "react";
 import { Radio } from "../Radio";
-import type { Option } from "../core";
+import { type Option } from "../core";
 type Props = Omit<ComponentProps<typeof Radio>, "options"> & {
     id: string;
+    name?: string;
     options?: Array<Omit<Option, "value"> & {
         value: boolean;
     }>;

package/dist/Form/Choice/Choice.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Form/Choice/Choice.scss";
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 import { Radio } from "../Radio";
+import { useOptionsWithId } from "../core";
 const defaultOptions = [
-    { label: "Oui", value: true, id: "radioItemTrue" },
-    { label: "Non", value: false, id: "radioItemFalse" },
+    { label: "Oui", value: true },
+    { label: "Non", value: false },
 ];
-const Choice = forwardRef(({ children, value, options = defaultOptions, ...otherProps }, inputRef) => {
-    const choiceOptions = options.map((option) => ({
-        ...option,
-        value: `${option.value}`,
-    }));
-    return (_jsx(Radio, { ...otherProps, ref: inputRef, value: value?.toString(), options: choiceOptions, children: children }));
+const Choice = forwardRef(({ children, value, options = defaultOptions, name, ...otherProps }, inputRef) => {
+    const choiceOptions = useOptionsWithId(options.map((o) => ({
+        ...o,
+        value: `${o.value}`,
+    })));
+    const generatedId = useId();
+    return (_jsx(Radio, { ...otherProps, ref: inputRef, name: name ?? `choice_${generatedId}`, value: value?.toString(), options: choiceOptions, children: children }));
 });
 Choice.displayName = "Choice";
 export { Choice };

package/dist/Form/Choice/ChoiceInput.js

@@ -4,12 +4,15 @@ import { LegacyField, useInputClassModifier, useOptionsWithId } from "../core";
 import { Choice } from "./Choice";
 import { useAriaInvalid } from "../core/useAriaInvalid";
 const defaultOptions = [
-    { label: "Oui", value: true, id: "radioItemTrue" },
-    { label: "Non", value: false, id: "radioItemFalse" },
+    { label: "Oui", value: true },
+    { label: "Non", value: false },
 ];
-const ChoiceInput = forwardRef(({ id, messageType, message, className, classModifier, isVisible, classNameContainerLabel, classNameContainerInput, label, forceDisplayMessage, options = defaultOptions, disabled, required, ...otherProps }, inputRef) => {
+const ChoiceInput = forwardRef(({ id, name, messageType, message, className, classModifier, isVisible, classNameContainerLabel, classNameContainerInput, label, forceDisplayMessage, options = defaultOptions, disabled, required, ...otherProps }, inputRef) => {
     const errorUseId = useId();
-    const newOptions = useOptionsWithId(options.map((o) => ({ ...o, value: `${o.value}` })), id);
+    const newOptions = useOptionsWithId(options.map((o) => ({
+        ...o,
+        value: `${o.value}`,
+    })));
     const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier ?? "", disabled ?? false, false, required);
     const firstId = newOptions?.[0]?.id ?? "";
     const choiceOptions = newOptions.map((o) => ({
@@ -17,7 +20,7 @@ const ChoiceInput = forwardRef(({ id, messageType, message, className, classModi
         value: o.value === "true",
     }));
     const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsx(LegacyField, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: _jsx(Choice, { ...otherProps, id: id, ref: inputRef, classModifier: inputClassModifier, options: options ? choiceOptions : undefined, required: required, disabled: disabled, "aria-describedby": errorUseId, "aria-invalid": isInvalid }) }));
+    return (_jsx(LegacyField, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: _jsx(Choice, { ...otherProps, id: id, name: name, ref: inputRef, classModifier: inputClassModifier, options: options ? choiceOptions : undefined, required: required, disabled: disabled, "aria-describedby": errorUseId, "aria-invalid": isInvalid }) }));
 });
 ChoiceInput.displayName = "ChoiceInput";
 export { ChoiceInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.1.1-alpha.237",
+  "version": "1.1.1-alpha.239",
   "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.1.1-alpha.237",
+    "@axa-fr/design-system-slash-css": "1.1.1-alpha.239",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },