@axa-fr/canopee-react 1.1.0 → 1.1.1-alpha.2

package/dist/prospect-client/Form/Dropdown/DropdownCommon.d.ts

@@ -4,7 +4,7 @@ import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCo
 export type DropdownProps = ComponentPropsWithRef<"select"> & {
     id?: string;
     classModifier?: string;
-    label?: ItemLabelProps["label"];
+    label?: ItemLabelProps["children"];
     /**
      * @deprecated Use `message` and messageType instead.
      */
@@ -14,10 +14,9 @@ export type DropdownProps = ComponentPropsWithRef<"select"> & {
      */
     success?: string;
     placeholder?: string;
-    buttonLabel?: string;
     description?: string;
     helper?: string;
-} & Partial<ItemLabelProps & ItemMessageProps>;
+} & Pick<ItemLabelProps, "buttonLabel" | "moreButtonLabel" | "onButtonClick" | "onMoreButtonClick" | "sideButtonLabel" | "onSideButtonClick"> & Pick<ItemMessageProps, "message" | "messageType">;
 type DropdownCommonProps = DropdownProps & {
     ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;

package/dist/prospect-client/Form/Dropdown/DropdownCommon.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, } from "react";
 import classNames from "classnames";
-const DropdownCommon = forwardRef(({ id, required, label, error, placeholder, children, helper, success, message, messageType, description, buttonLabel, onButtonClick, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, ...otherProps }, inputRef) => {
+import { forwardRef, useId, } from "react";
+const DropdownCommon = forwardRef(({ id, required, label, error, placeholder, children, helper, success, message, messageType, description, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, ...otherProps }, inputRef) => {
     const idMessage = useId();
     let inputId = useId();
     inputId = id || inputId;
     const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
     const classname = classNames("af-form__dropdown-input", hasError && "af-form__dropdown-input--error");
-    return (_jsxs("div", { className: "af-form__dropdown-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsxs("select", { className: classname, ...otherProps, ref: inputRef, id: inputId, children: [Boolean(placeholder) && _jsx("option", { value: "", children: placeholder }), children] }), helper ? (_jsx("span", { className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
+    return (_jsxs("div", { className: "af-form__dropdown-container", children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsxs("select", { className: classname, ...otherProps, ref: inputRef, id: inputId, children: [Boolean(placeholder) && _jsx("option", { value: "", children: placeholder }), children] }), helper ? (_jsx("span", { className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
 });
 DropdownCommon.displayName = "Dropdown";
 export { DropdownCommon };

package/dist/prospect-client/Form/InputDate/InputDate.helper.d.ts

@@ -1,4 +1,4 @@
-export declare const formatInputDateValue: (value?: Date | string) => string | undefined;
+export declare const formatInputDateValue: (value?: Date | string | number) => string | number | undefined;
 export declare const isValidDayDecimal: (char: string, index: number) => boolean;
 export declare const isValidDay: (day: number, index: number) => boolean;
 export declare const isValidMonthDecimal: (char: string, index: number) => boolean;

package/dist/prospect-client/Form/InputDate/InputDateAtom.d.ts

@@ -1,9 +1,9 @@
-import { type ComponentPropsWithRef } from "react";
+import { type ComponentProps, type ComponentPropsWithRef } from "react";
 export type InputDateAtomProps = Omit<ComponentPropsWithRef<"input">, "value" | "min" | "max"> & {
     defaultValue?: Date | string;
     value?: Date | string;
-    min?: Date | string;
-    max?: Date | string;
+    min?: ComponentProps<"input">["min"] | Date;
+    max?: ComponentProps<"input">["max"] | Date;
 };
 declare const InputDateAtom: import("react").ForwardRefExoticComponent<Omit<InputDateAtomProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { InputDateAtom };

package/dist/prospect-client/Form/InputDate/InputDateAtom.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, } from "react";
 import { formatInputDateValue } from "./InputDate.helper";
 const InputDateAtom = forwardRef(({ defaultValue, value, min, max, ...otherProps }, inputRef) => (_jsx("input", { ...otherProps, type: "date", ref: inputRef, defaultValue: formatInputDateValue(defaultValue), value: formatInputDateValue(value), min: formatInputDateValue(min), max: formatInputDateValue(max) })));
 InputDateAtom.displayName = "InputDateAtom";

package/dist/prospect-client/Form/InputDate/InputDateCommon.d.ts

@@ -1,12 +1,13 @@
 import { type ComponentProps, type ComponentPropsWithRef, type ComponentType } from "react";
 import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelCommon";
 import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCommon";
+import { type InputDateAtomProps } from "./InputDateAtom";
 export type InputDateProps = Omit<ComponentPropsWithRef<"input">, "value" | "min" | "max"> & {
     classModifier?: string;
     defaultValue?: Date | string;
     value?: Date | string;
-    min?: Date | string;
-    max?: Date | string;
+    min?: InputDateAtomProps["min"];
+    max?: InputDateAtomProps["max"];
     helper?: string;
     /**
      * @deprecated Use `message` and messageType instead.

package/dist/prospect-client/Form/InputDate/InputDateCommon.js

@@ -24,7 +24,7 @@ const InputDateCommon = forwardRef(({ className, classModifier = "", helper, err
     const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
     const ariaErrormessage = hasError ? idMessage : undefined;
     const ariaInvalid = hasError || undefined;
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: buttonLabel || moreButtonLabel, onMoreButtonClick: onButtonClick || onMoreButtonClick, required: required, htmlFor: inputId, children: label }), hidePicker ? (_jsx(InputDateTextAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required })) : (_jsx(InputDateAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "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 || error || success, messageType: messageType || (error ? "error" : "success") })] }));
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, required: required, htmlFor: inputId, children: label }), hidePicker ? (_jsx(InputDateTextAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required })) : (_jsx(InputDateAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "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 || error || success, messageType: messageType || (error ? "error" : "success") })] }));
 });
 InputDateCommon.displayName = "InputDate";
 export { InputDateCommon };

package/dist/prospect-client/Form/InputPhone/InputPhoneCommon.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentProps, type ComponentPropsWithRef, type ComponentType } from "react";
 import { SingleValue } from "react-select";
+import { Icon } from "../../Icon/IconCommon";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
 import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelCommon";
 import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCommon";
-import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
-import { Icon } from "../../Icon/IconCommon";
 import { type OptionType } from "./InputPhone.types";
 export type InputPhoneProps = ComponentPropsWithRef<"input"> & {
     classModifier?: string;
@@ -23,8 +23,8 @@ export type InputPhoneProps = ComponentPropsWithRef<"input"> & {
     onChangeSelect?: (value: SingleValue<OptionType>) => void;
     onChangeInput?: (value: string) => void;
     mask?: (value: string) => string;
-    label: ItemLabelProps["label"];
-} & Partial<ItemLabelProps & ItemMessageProps>;
+    label: ItemLabelProps["children"];
+} & Pick<ItemLabelProps, "description" | "moreButtonLabel" | "buttonLabel" | "onMoreButtonClick" | "onButtonClick" | "sideButtonLabel" | "onSideButtonClick"> & Pick<ItemMessageProps, "message" | "messageType">;
 type InputPhoneCommonProps = InputPhoneProps & {
     ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;

package/dist/prospect-client/Form/InputPhone/InputPhoneCommon.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
 import { CountryCodeSelect } from "./CountryCodeSelect";
 import { maskFrenchPhoneNumber } from "./maskFrenchPhoneNumber";
-const InputPhoneCommon = forwardRef(({ className, classModifier = "", helper, error, success, message, messageType, defaultCountry, showSelect, disabled, label, description, buttonLabel, onButtonClick, required, sideButtonLabel, onSideButtonClick, countryCodeOptions = [], onChangeSelect, onChangeInput, mask = maskFrenchPhoneNumber, ItemLabelComponent, ItemMessageComponent, InputTextComponent, IconComponent, "aria-errormessage": ariaErrormessage, ...otherProps }, inputRef) => {
+const InputPhoneCommon = forwardRef(({ className, classModifier = "", helper, error, success, message, messageType, defaultCountry, showSelect, disabled, label, description, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, countryCodeOptions = [], onChangeSelect, onChangeInput, mask = maskFrenchPhoneNumber, ItemLabelComponent, ItemMessageComponent, InputTextComponent, IconComponent, "aria-errormessage": ariaErrormessage, ...otherProps }, inputRef) => {
     let inputId = useId();
     inputId = otherProps.id || inputId;
     const idMessage = useId();
@@ -24,7 +24,7 @@ const InputPhoneCommon = forwardRef(({ className, classModifier = "", helper, er
         const maskedValue = mask(rawValue);
         onChangeInput?.(maskedValue);
     };
-    return (_jsxs("div", { className: "af-form__input-phone-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _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]
+    return (_jsxs("div", { className: "af-form__input-phone-container", children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, 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]
                             .filter(Boolean)
                             .join(" "), classModifier: classModifier, ref: inputRef, error: hasError ? messageType || error : 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 || error || success, messageType: messageType || (error ? "error" : "success") })] }));
 });

package/dist/prospect-client/Form/InputText/InputTextCommon.d.ts

@@ -5,6 +5,7 @@ import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCo
 export type InputTextProps = ComponentPropsWithRef<"input"> & {
     unit?: ReactNode;
     classModifier?: string;
+    label?: ItemLabelProps["children"];
     helper?: string;
     /**
      * @deprecated Use `message` and messageType instead.
@@ -14,7 +15,7 @@ export type InputTextProps = ComponentPropsWithRef<"input"> & {
      * @deprecated Use `message` and messageType instead.
      */
     success?: string;
-} & Partial<ItemLabelProps & ItemMessageProps>;
+} & Pick<ItemLabelProps, "description" | "moreButtonLabel" | "buttonLabel" | "onMoreButtonClick" | "onButtonClick" | "sideButtonLabel" | "onSideButtonClick"> & Pick<ItemMessageProps, "message" | "messageType">;
 type InputTextCommonProps = InputTextProps & {
     ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;

package/dist/prospect-client/Form/InputText/InputTextCommon.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
-const InputTextCommon = forwardRef(({ unit, className, classModifier = "", helper, error, success, message, messageType, label, description, buttonLabel, onButtonClick, required, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, InputTextAtomComponent, ...otherProps }, inputRef) => {
+const InputTextCommon = forwardRef(({ unit, className, classModifier = "", helper, error, success, message, messageType, label, description, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, InputTextAtomComponent, ...otherProps }, inputRef) => {
     let inputId = useId();
     inputId = otherProps.id || inputId;
     const idMessage = useId();
     const idHelp = useId();
     const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
-    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(InputTextAtomComponent, { id: inputId, ref: inputRef, unit: unit, className: className, classModifier: classModifier, error: (message && messageType === "error") || Boolean(error)
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx(InputTextAtomComponent, { id: inputId, ref: inputRef, unit: unit, className: className, classModifier: classModifier, error: (message && messageType === "error") || Boolean(error)
                     ? messageType || error
                     : undefined, required: required, idMessage: message || error ? 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 || error || success, messageType: messageType || (error ? "error" : "success") })] }));
 });

package/dist/prospect-client/Form/TextArea/TextAreaCommon.d.ts

@@ -1,14 +1,14 @@
-import { type ComponentProps, ComponentPropsWithRef, type ComponentType, MouseEventHandler } from "react";
+import { type ComponentProps, ComponentPropsWithRef, type ComponentType } from "react";
 import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelCommon";
 import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCommon";
 export type TextAreaProps = ComponentPropsWithRef<"textarea"> & {
+    label?: ItemLabelProps["children"];
     helper?: string;
     /**
      * @deprecated Use `message` and messageType instead.
      */
     error?: string;
-    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
-} & Partial<ItemMessageProps & ItemLabelProps>;
+} & Pick<ItemLabelProps, "description" | "moreButtonLabel" | "buttonLabel" | "onMoreButtonClick" | "onButtonClick" | "sideButtonLabel" | "onSideButtonClick"> & Pick<ItemMessageProps, "message" | "messageType">;
 type TextAreaCommonProps = TextAreaProps & {
     ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;

package/dist/prospect-client/Form/TextArea/TextAreaCommon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
-const TextAreaCommon = forwardRef(({ id, className, label, description, helper, error, message, messageType, buttonLabel, onButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", ...inputProps }, inputRef) => {
+const TextAreaCommon = forwardRef(({ id, className, label, description, helper, error, message, messageType, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", ...inputProps }, inputRef) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
@@ -8,7 +8,7 @@ const TextAreaCommon = forwardRef(({ id, className, label, description, helper,
     const hasError = (Boolean(message) && messageType === "error") || Boolean(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__textarea", ref: inputRef, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": hasError || undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
+            .join(" "), children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx("textarea", { id: inputId, className: "af-form__textarea", ref: inputRef, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": hasError || undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
 });
 TextAreaCommon.displayName = "TextArea";
 export { TextAreaCommon };

package/dist/prospect-client/Heading/types.d.ts

@@ -1,6 +1,6 @@
 import type { TagProps } from "../Tag/TagCommon";
 import type { HeadingCommonProps } from "./HeadingCommon";
-export type HeadingLevel = 1 | 2 | 3;
+export type HeadingLevel = 1 | 2 | 3 | 4;
 export type HeadingProps = HeadingCommonProps & {
     tagProps?: Omit<TagProps, "children">;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.1.0",
+  "version": "1.1.1-alpha.2",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.1.0",
+    "@axa-fr/canopee-css": "1.1.1-alpha.2",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"