@axa-fr/canopee-react 2.0.0-alpha.82 → 2.0.0-alpha.83

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.
@@ -1,6 +1,5 @@
1
1
  type DividerProps = {
2
2
  className?: string;
3
- classModifier?: string;
4
3
  };
5
- export declare const Divider: ({ className, classModifier }: DividerProps) => import("react/jsx-runtime").JSX.Element;
4
+ export declare const Divider: ({ className }: DividerProps) => import("react/jsx-runtime").JSX.Element;
6
5
  export {};
@@ -1,11 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useMemo } from "react";
3
3
  import { getClassName } from "../utilities/getClassName";
4
- export const Divider = ({ className, classModifier }) => {
5
- const componentClassName = useMemo(() => getClassName({
6
- baseClassName: "af-divider",
7
- className,
8
- modifiers: classModifier?.split(" ").filter(Boolean) ?? [],
9
- }), [className, classModifier]);
4
+ export const Divider = ({ className }) => {
5
+ const componentClassName = useMemo(() => getClassName({ baseClassName: "af-divider", className }), [className]);
10
6
  return _jsx("hr", { className: componentClassName });
11
7
  };
@@ -4,7 +4,6 @@ import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelComm
4
4
  import { type ItemMessageProps } from "../ItemMessage/ItemMessage";
5
5
  export type DropdownProps = ComponentPropsWithRef<"select"> & {
6
6
  id?: string;
7
- classModifier?: string;
8
7
  label?: ItemLabelProps["children"];
9
8
  placeholder?: string;
10
9
  description?: string;
@@ -4,7 +4,6 @@ import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelComm
4
4
  import { type ItemMessageProps } from "../ItemMessage/ItemMessage";
5
5
  import { type InputDateAtomProps } from "./InputDateAtom";
6
6
  export type InputDateProps = Omit<ComponentPropsWithRef<"input">, "value" | "min" | "max"> & {
7
- classModifier?: string;
8
7
  defaultValue?: Date | string;
9
8
  value?: Date | string;
10
9
  min?: InputDateAtomProps["min"];
@@ -19,7 +18,7 @@ type InputDateCommonProps = InputDateProps & {
19
18
  ItemMessageComponent: ComponentType<ItemMessageProps>;
20
19
  };
21
20
  declare const InputDateCommon: {
22
- ({ className, classModifier, helper, message, messageType, label, description, moreButtonLabel, onMoreButtonClick, ItemLabelComponent, ItemMessageComponent, required, hidePicker, max, min, containerProps, ...otherProps }: InputDateCommonProps): import("react/jsx-runtime").JSX.Element;
21
+ ({ className, helper, message, messageType, label, description, moreButtonLabel, onMoreButtonClick, ItemLabelComponent, ItemMessageComponent, required, hidePicker, max, min, containerProps, ...otherProps }: InputDateCommonProps): import("react/jsx-runtime").JSX.Element;
23
22
  displayName: string;
24
23
  };
25
24
  export { InputDateCommon };
@@ -5,7 +5,7 @@ import { ItemLabelCommon, } from "../ItemLabel/ItemLabelCommon";
5
5
  import {} from "../ItemMessage/ItemMessage";
6
6
  import { InputDateAtom } from "./InputDateAtom";
7
7
  import { InputDateTextAtom } from "./InputDateTextAtom";
8
- const InputDateCommon = ({ className, classModifier = "", helper, message, messageType = "error", label, description, moreButtonLabel, onMoreButtonClick, ItemLabelComponent, ItemMessageComponent, required, hidePicker, max, min, containerProps, ...otherProps }) => {
8
+ const InputDateCommon = ({ className, helper, message, messageType = "error", label, description, moreButtonLabel, onMoreButtonClick, ItemLabelComponent, ItemMessageComponent, required, hidePicker, max, min, containerProps, ...otherProps }) => {
9
9
  let inputId = useId();
10
10
  inputId = otherProps.id ?? inputId;
11
11
  const idMessage = useId();
@@ -23,7 +23,7 @@ const InputDateCommon = ({ className, classModifier = "", helper, message, messa
23
23
  const hasWarning = Boolean(message) && messageType === "warning" && !hasError;
24
24
  const componentClassName = getClassName({
25
25
  baseClassName: "af-form__input-date",
26
- modifiers: [...classModifier.split(" "), hasWarning && "warning"],
26
+ modifiers: [hasWarning && "warning"],
27
27
  className,
28
28
  });
29
29
  return (_jsxs("div", { className: "af-form__input-container", ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel, onMoreButtonClick: onMoreButtonClick, required: required, htmlFor: inputId, children: label }), hidePicker ? (_jsx(InputDateTextAtom, { ...otherProps, id: inputId, className: componentClassName, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required })) : (_jsx(InputDateAtom, { ...otherProps, id: inputId, className: componentClassName, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required, max: max, min: min })), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message, messageType: messageType })] }));
@@ -7,7 +7,6 @@ import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelComm
7
7
  import { type ItemMessageProps } from "../ItemMessage/ItemMessage";
8
8
  import { type OptionType } from "./InputPhone.types";
9
9
  export type InputPhoneProps = ComponentPropsWithRef<"input"> & {
10
- classModifier?: string;
11
10
  helper?: string;
12
11
  defaultCountry?: string;
13
12
  showSelect?: boolean;
@@ -26,7 +25,7 @@ type InputPhoneCommonProps = InputPhoneProps & {
26
25
  IconComponent: ComponentType<ComponentProps<typeof Icon>>;
27
26
  };
28
27
  declare const InputPhoneCommon: {
29
- ({ className, classModifier, helper, message, messageType, defaultCountry, showSelect, disabled, label, description, moreButtonLabel, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, countryCodeOptions, onChangeSelect, onChangeInput, mask, ItemLabelComponent, ItemMessageComponent, InputTextComponent, IconComponent, "aria-errormessage": ariaErrormessage, containerProps, ...otherProps }: InputPhoneCommonProps): import("react/jsx-runtime").JSX.Element;
28
+ ({ className, helper, message, messageType, defaultCountry, showSelect, disabled, label, description, moreButtonLabel, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, countryCodeOptions, onChangeSelect, onChangeInput, mask, ItemLabelComponent, ItemMessageComponent, InputTextComponent, IconComponent, "aria-errormessage": ariaErrormessage, containerProps, ...otherProps }: InputPhoneCommonProps): import("react/jsx-runtime").JSX.Element;
30
29
  displayName: string;
31
30
  };
32
31
  export { InputPhoneCommon };
@@ -7,7 +7,7 @@ import {} from "../ItemMessage/ItemMessage";
7
7
  import { CountryCodeSelect } from "./CountryCodeSelect";
8
8
  import {} from "./InputPhone.types";
9
9
  import { maskFrenchPhoneNumber } from "./maskFrenchPhoneNumber";
10
- const InputPhoneCommon = ({ className, classModifier = "", helper, message, messageType = "error", defaultCountry, showSelect, disabled, label, description, moreButtonLabel, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, countryCodeOptions = [], onChangeSelect, onChangeInput, mask = maskFrenchPhoneNumber, ItemLabelComponent, ItemMessageComponent, InputTextComponent, IconComponent, "aria-errormessage": ariaErrormessage, containerProps, ...otherProps }) => {
10
+ const InputPhoneCommon = ({ className, helper, message, messageType = "error", defaultCountry, showSelect, disabled, label, description, moreButtonLabel, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, countryCodeOptions = [], onChangeSelect, onChangeInput, mask = maskFrenchPhoneNumber, ItemLabelComponent, ItemMessageComponent, InputTextComponent, IconComponent, "aria-errormessage": ariaErrormessage, containerProps, ...otherProps }) => {
11
11
  let inputId = useId();
12
12
  inputId = otherProps.id || inputId;
13
13
  const idMessage = useId();
@@ -35,7 +35,7 @@ const InputPhoneCommon = ({ className, classModifier = "", helper, message, mess
35
35
  };
36
36
  return (_jsxs("div", { className: "af-form__input-phone-container", ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel, onMoreButtonClick: onMoreButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsxs("div", { className: "af-form__input-phone-fields", children: [showSelect ? (_jsx("div", { className: "af-form__country-code-wrapper", children: _jsx(CountryCodeSelect, { options: countryCodeOptions, defaultCountry: defaultCountry, onChangeSelect: onChangeSelect, IconComponent: IconComponent, disabled: disabled }) })) : null, _jsx(InputTextComponent, { ...otherProps, className: ["af-form__input-phone", className]
37
37
  .filter(Boolean)
38
- .join(" "), classModifier: classModifier, error: hasError ? messageType : undefined, warning: hasWarning ? "warning" : undefined, type: "tel", required: required, placeholder: otherProps.placeholder, "aria-errormessage": ariaErrormessage, value: otherProps.value, onChange: handleChangeNumber, disabled: disabled, idMessage: hasError ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, id: inputId })] }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-phone-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message, messageType: messageType })] }));
38
+ .join(" "), error: hasError ? messageType : undefined, warning: hasWarning ? "warning" : undefined, type: "tel", required: required, placeholder: otherProps.placeholder, "aria-errormessage": ariaErrormessage, value: otherProps.value, onChange: handleChangeNumber, disabled: disabled, idMessage: hasError ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, id: inputId })] }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-phone-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message, messageType: messageType })] }));
39
39
  };
40
40
  InputPhoneCommon.displayName = "InputPhone";
41
41
  export { InputPhoneCommon };
@@ -5,7 +5,6 @@ import { type ItemMessageProps } from "../ItemMessage/ItemMessage";
5
5
  import type { GridContainerProps } from "../../utilities/types/GridContainerProps";
6
6
  export type InputTextProps = ComponentProps<"input"> & {
7
7
  unit?: ReactNode;
8
- classModifier?: string;
9
8
  label?: ItemLabelProps["children"];
10
9
  helper?: string;
11
10
  containerProps?: GridContainerProps;
@@ -16,7 +15,7 @@ type InputTextCommonProps = InputTextProps & {
16
15
  InputTextAtomComponent: ComponentType<ComponentProps<typeof InputTextAtom>>;
17
16
  };
18
17
  declare const InputTextCommon: {
19
- ({ unit, className, classModifier, helper, message, messageType, label, description, moreButtonLabel, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, InputTextAtomComponent, containerProps, ...otherProps }: InputTextCommonProps): import("react/jsx-runtime").JSX.Element;
18
+ ({ unit, className, helper, message, messageType, label, description, moreButtonLabel, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, InputTextAtomComponent, containerProps, ...otherProps }: InputTextCommonProps): import("react/jsx-runtime").JSX.Element;
20
19
  displayName: string;
21
20
  };
22
21
  export { InputTextCommon };
@@ -3,7 +3,7 @@ import { useId, } from "react";
3
3
  import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
4
4
  import { ItemLabelCommon, } from "../ItemLabel/ItemLabelCommon";
5
5
  import {} from "../ItemMessage/ItemMessage";
6
- const InputTextCommon = ({ unit, className, classModifier = "", helper, message, messageType = "error", label, description, moreButtonLabel, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, InputTextAtomComponent, containerProps, ...otherProps }) => {
6
+ const InputTextCommon = ({ unit, className, helper, message, messageType = "error", label, description, moreButtonLabel, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, InputTextAtomComponent, containerProps, ...otherProps }) => {
7
7
  let inputId = useId();
8
8
  inputId = otherProps.id || inputId;
9
9
  const idMessage = useId();
@@ -12,7 +12,7 @@ const InputTextCommon = ({ unit, className, classModifier = "", helper, message,
12
12
  helper && idHelp,
13
13
  message && messageType === "success" && idMessage,
14
14
  ].filter(Boolean);
15
- return (_jsxs("div", { className: "af-form__input-container", ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel, onMoreButtonClick: onMoreButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx(InputTextAtomComponent, { id: inputId, unit: unit, className: className, classModifier: classModifier, error: message && messageType === "error" ? messageType : undefined, warning: message && messageType === "warning" ? messageType : undefined, required: required, idMessage: message ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, ...otherProps }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message, messageType: messageType })] }));
15
+ return (_jsxs("div", { className: "af-form__input-container", ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel, onMoreButtonClick: onMoreButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx(InputTextAtomComponent, { id: inputId, unit: unit, className: className, error: message && messageType === "error" ? messageType : undefined, warning: message && messageType === "warning" ? messageType : undefined, required: required, idMessage: message ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, ...otherProps }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message, messageType: messageType })] }));
16
16
  };
17
17
  InputTextCommon.displayName = "InputText";
18
18
  export { InputTextCommon };
@@ -1,14 +1,13 @@
1
1
  import { type ComponentPropsWithRef, type ReactNode } from "react";
2
2
  type InputTextAtomProps = ComponentPropsWithRef<"input"> & {
3
3
  unit?: ReactNode;
4
- classModifier?: string;
5
4
  error?: string;
6
5
  warning?: string;
7
6
  idMessage?: string;
8
7
  idHelp?: string;
9
8
  };
10
9
  declare const InputTextAtom: {
11
- ({ unit, className, classModifier, error, warning, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, "aria-describedby": ariaDescribedby, type, ...otherProps }: InputTextAtomProps): import("react/jsx-runtime").JSX.Element;
10
+ ({ unit, className, error, warning, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, "aria-describedby": ariaDescribedby, type, ...otherProps }: InputTextAtomProps): import("react/jsx-runtime").JSX.Element;
12
11
  displayName: string;
13
12
  };
14
13
  export { InputTextAtom };
@@ -1,11 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useId } from "react";
3
3
  import { getClassName } from "../../utilities/getClassName";
4
- const InputTextAtom = ({ unit, className, classModifier = "", error, warning, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, "aria-describedby": ariaDescribedby, type = "text", ...otherProps }) => {
4
+ const InputTextAtom = ({ unit, className, error, warning, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, "aria-describedby": ariaDescribedby, type = "text", ...otherProps }) => {
5
5
  const componentClassName = getClassName({
6
6
  baseClassName: "af-form__input-text",
7
7
  modifiers: [
8
- classModifier,
9
8
  error || ariaErrormessage ? "error" : "",
10
9
  !error && !ariaErrormessage && warning ? "warning" : "",
11
10
  ],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axa-fr/canopee-react",
3
- "version": "2.0.0-alpha.82",
3
+ "version": "2.0.0-alpha.83",
4
4
  "description": "Package React - Design System Canopée",
5
5
  "exports": {
6
6
  "./distributeur": {
@@ -53,7 +53,7 @@
53
53
  },
54
54
  "homepage": "https://github.com/AxaFrance/design-system#readme",
55
55
  "peerDependencies": {
56
- "@axa-fr/canopee-css": "2.0.0-alpha.82",
56
+ "@axa-fr/canopee-css": "2.0.0-alpha.83",
57
57
  "@material-symbols/svg-400": ">= 0.19.0",
58
58
  "@material-symbols/svg-700": ">= 0.19.0",
59
59
  "react": ">= 19"