@axa-fr/design-system-look-and-feel-react 0.3.0-ci.311 → 0.3.0-ci.317

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,9 +7,10 @@ import { forwardRef, useId } from "react";
7
7
  import classNames from "classnames";
8
8
  import { Svg } from "../../Svg";
9
9
  const Checkbox = forwardRef(({ label, errorMessage, className, ...inputProps }, ref) => {
10
+ const idError = useId();
10
11
  let inputId = useId();
11
12
  inputId = inputProps.id || inputId;
12
- return (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-invalid": !!errorMessage }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
13
+ return (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-errormessage": idError, "aria-invalid": !!errorMessage }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", id: idError, children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
13
14
  });
14
15
  Checkbox.displayName = "Checkbox";
15
16
  export { Checkbox };
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { useId } from "react";
2
3
  import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
3
4
  import visibility from "@material-symbols/svg-400/outlined/visibility-fill.svg";
4
5
  import close from "@material-symbols/svg-400/outlined/close-fill.svg";
@@ -23,6 +24,7 @@ function getReadableFileSizeString(fileSizeInBytes) {
23
24
  return Math.max(fileSizeInBytesCopy, 0.1).toFixed(1) + byteUnits[i];
24
25
  }
25
26
  const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }) => {
27
+ const idError = useId();
26
28
  const getIcon = (isInError, isLoading) => {
27
29
  if (isInError) {
28
30
  return (_jsx(Svg, { src: error, className: "af-form__file-title-container-icon-error" }));
@@ -32,7 +34,7 @@ const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription,
32
34
  }
33
35
  return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
34
36
  };
35
- return (_jsxs(_Fragment, { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
37
+ return (_jsxs(_Fragment, { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
36
38
  const effectiveSize = getReadableFileSizeString(size);
37
39
  const isInError = errors.some((fileError) => fileError.id === fileId);
38
40
  const errorMessage = errors.find((fileError) => fileError.id === fileId)?.message;
@@ -8,7 +8,8 @@ import { InputError } from "../InputError";
8
8
  const Radio = forwardRef(({ label, errorMessage, ...inputProps }, ref) => {
9
9
  let inputId = useId();
10
10
  inputId = inputProps.id || inputId;
11
- return (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && _jsx(InputError, { message: errorMessage })] }));
11
+ const idError = useId();
12
+ return (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), "aria-errormessage": idError, children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && _jsx(InputError, { id: idError, message: errorMessage })] }));
12
13
  });
13
14
  Radio.displayName = "Radio";
14
15
  export { Radio };
@@ -16,5 +16,5 @@ type RadioSelectProps = {
16
16
  value?: string;
17
17
  isDisabled?: boolean;
18
18
  } & Omit<ComponentPropsWithRef<"div">, "className" | "aria-invalid">;
19
- export declare const RadioSelect: React.ForwardRefExoticComponent<Omit<RadioSelectProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
19
+ export declare const RadioSelect: React.ForwardRefExoticComponent<Omit<RadioSelectProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
20
20
  export {};
@@ -2,15 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
3
3
  import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
4
4
  import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
5
- import { forwardRef, useId, } from "react";
5
+ import { forwardRef, useCallback, useId, } from "react";
6
6
  import { Svg } from "../../Svg";
7
7
  import { InputError } from "../InputError";
8
8
  export const RadioSelect = forwardRef(({ id, label, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
9
9
  const generatedId = useId();
10
10
  const optionId = id || generatedId;
11
- return (_jsxs("div", { className: "af-radio__container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { ref: ref, ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-describedby": errorMessage ? `${optionId}-error` : undefined, children: options.map(({ label: inputLabel, description, subtitle, icon, disabled: inputDisabled, ...inputProps }) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, ...(value && {
11
+ const getRef = useCallback((index, reference, val, inputVal) => {
12
+ if ((!val && index === 0) || val === inputVal) {
13
+ return reference;
14
+ }
15
+ return null;
16
+ }, []);
17
+ return (_jsxs("div", { className: "af-radio__container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description, subtitle, icon, disabled: inputDisabled, ...inputProps }, idx) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, ...(value && {
12
18
  "aria-checked": value === inputProps.value,
13
19
  checked: value === inputProps.value,
14
- }) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
20
+ }), ref: getRef(idx, ref, value, inputProps.value) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
15
21
  });
16
22
  RadioSelect.displayName = "RadioSelect";
@@ -7,7 +7,7 @@ import { DropdownIndicator } from "./DropdownIndicator";
7
7
  import { Svg } from "../../Svg";
8
8
  import { CustomOption } from "./CustomOption";
9
9
  const Select = ({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }) => {
10
- return (_jsxs(_Fragment, { children: [label && (_jsxs("label", { id: `${id}__label`, htmlFor: `${id}__input`, className: "af-form__select-label", children: [label, required && _jsx("span", { children: " *" })] })), _jsx(ReactSelect, { inputId: `${id}__input`, "aria-labelledby": `${id}__label`, unstyled: true, isDisabled: disabled, noOptionsMessage: () => noOptionsMessage || "Aucun résultat", components: {
10
+ return (_jsxs(_Fragment, { children: [label && (_jsxs("label", { id: `${id}__label`, htmlFor: `${id}__input`, className: "af-form__select-label", children: [label, required && _jsx("span", { children: " *" })] })), _jsx(ReactSelect, { inputId: `${id}__input`, "aria-labelledby": `${id}__label`, "aria-errormessage": `${id}__error`, "aria-invalid": Boolean(errorLabel), unstyled: true, isDisabled: disabled, noOptionsMessage: () => noOptionsMessage || "Aucun résultat", components: {
11
11
  DropdownIndicator,
12
12
  Option: CustomOption,
13
13
  }, classNames: {
@@ -21,7 +21,7 @@ const Select = ({ id, required, disabled, label, errorLabel, noOptionsMessage, .
21
21
  option: ({ isSelected, isFocused, }) => classNames("af-form__input-select-menu-options", isSelected && "af-form__input-select-menu-options-selected", isFocused && "af-form__input-select-menu-options-focused"),
22
22
  singleValue: ({ isDisabled, }) => classNames("af-form__select-single-value", isDisabled && "af-form__select-single-value-disabled"),
23
23
  dropdownIndicator: () => "af-form__select-dropdown-indicator",
24
- }, className: "af-form__input-select", ...otherProps }), errorLabel && (_jsxs("div", { className: "af-form__select-error", children: [_jsx(Svg, { src: ErrorOutline, width: 16, className: "af-form__select-error-icon" }), errorLabel] }))] }));
24
+ }, className: "af-form__input-select", ...otherProps }), errorLabel && (_jsxs("div", { id: `${id}__error`, className: "af-form__select-error", "aria-live": "assertive", children: [_jsx(Svg, { src: ErrorOutline, width: 16, className: "af-form__select-error-icon" }), errorLabel] }))] }));
25
25
  };
26
26
  Select.displayName = "Select";
27
27
  export { Select };
@@ -1,16 +1,18 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
3
- import { forwardRef } from "react";
3
+ import { forwardRef, useId, } from "react";
4
4
  import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
5
5
  import { Button } from "../..";
6
6
  import { Variants } from "../../Button/Button";
7
7
  import { Svg } from "../../Svg";
8
8
  import { getComponentClassName } from "../../utilities";
9
9
  import { InputError } from "../InputError";
10
- const Text = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, ...otherProps }, inputRef) => {
10
+ const Text = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, ...otherProps }, inputRef) => {
11
11
  const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
12
- const { id, required } = otherProps;
13
- return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: id, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel })), _jsx("input", { className: componentClassName, type: "text", ref: inputRef, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined, ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: `${id}-error`, message: error })] }));
12
+ let inputId = useId();
13
+ inputId = otherProps.id || inputId;
14
+ const idError = useId();
15
+ return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: inputId, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel })), _jsx("input", { id: inputId, className: componentClassName, type: "text", ref: inputRef, "aria-errormessage": idError, "aria-invalid": Boolean(error), ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: idError, message: error })] }));
14
16
  });
15
17
  Text.displayName = "Text";
16
18
  export { Text };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axa-fr/design-system-look-and-feel-react",
3
- "version": "0.3.0-ci.311",
3
+ "version": "0.3.0-ci.317",
4
4
  "description": "",
5
5
  "exports": {
6
6
  ".": {
@@ -45,7 +45,7 @@
45
45
  },
46
46
  "homepage": "https://github.com/AxaFrance/design-system#readme",
47
47
  "peerDependencies": {
48
- "@axa-fr/design-system-look-and-feel-css": "0.3.0-ci.311",
48
+ "@axa-fr/design-system-look-and-feel-css": "0.3.0-ci.317",
49
49
  "@material-symbols/svg-400": ">= 0.19.0",
50
50
  "react": ">= 18"
51
51
  },