@axa-fr/canopee-react 2.0.0-alpha.79 → 2.0.0-alpha.80

package/dist/distributeur/Form/Experimental/DateInput.d.ts

@@ -0,0 +1,31 @@
+import { type ComponentProps } from "react";
+import { Input } from "./Input";
+import type { InputBaseProps } from "./types";
+export type DateInputProps = Omit<ComponentProps<typeof Input>, "children" | "type" | "value" | "defaultValue" | "min" | "max"> & InputBaseProps & {
+    /**
+     * The value of the date input, as a `Date` or an ISO date string (`YYYY-MM-DD`).
+     */
+    value?: Date | string;
+    /**
+     * The default value of the date input, as a `Date` or an ISO date string (`YYYY-MM-DD`).
+     */
+    defaultValue?: Date | string;
+    /**
+     * The earliest selectable date, as a `Date` or an ISO date string (`YYYY-MM-DD`).
+     */
+    min?: Date | string;
+    /**
+     * The latest selectable date, as a `Date` or an ISO date string (`YYYY-MM-DD`).
+     */
+    max?: Date | string;
+};
+/**
+ * This component renders a label, a date input field and optionnally help and error messages.
+ * It can be customized to render the label on top, or on the left of the input.
+ * It also supports adding a unit on the right of the input.
+ */
+declare const DateInput: {
+    ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, value, defaultValue, min, max, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DateInput };

package/dist/distributeur/Form/Experimental/DateInput.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { formatDateInputValue } from "../../utilities/helpers/date";
+import { Input } from "./Input";
+import { InputContainer } from "./InputContainer";
+import { InputUnit } from "./InputUnit";
+import { ItemMessage } from "./ItemMessage";
+import { Label } from "./Label";
+import { useInput } from "./useInput.hook";
+/**
+ * This component renders a label, a date input field and optionnally help and error messages.
+ * It can be customized to render the label on top, or on the left of the input.
+ * It also supports adding a unit on the right of the input.
+ */
+const DateInput = ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, value, defaultValue, min, max, ...props }) => {
+    const { describedBy, errorId, helperId, inputClassName, inputId, isContainerVertical, isInvalid, labelClassName, } = useInput({
+        id,
+        labelPosition,
+        inputClassName: inputClassNameProp,
+        labelClassName: labelClassNameProp,
+        errorMessage,
+        helpMessage,
+    });
+    return (_jsxs(InputContainer, { vertical: isContainerVertical, className: containerClassName, children: [_jsx(Label, { htmlFor: inputId, required: required, className: labelClassName, children: label }), _jsx(Input, { ...props, type: "date", value: formatDateInputValue(value), defaultValue: formatDateInputValue(defaultValue), min: formatDateInputValue(min), max: formatDateInputValue(max), className: inputClassName, id: inputId, "aria-describedby": describedBy, "aria-invalid": isInvalid }), contentRight ? _jsx(InputUnit, { children: contentRight }) : null, helpMessage ? (_jsx(ItemMessage, { id: helperId, children: helpMessage })) : null, errorMessage ? (_jsx(ItemMessage, { variant: "error", id: errorId, children: errorMessage })) : null] }));
+};
+DateInput.displayName = "DateInput";
+export { DateInput };

package/dist/distributeur/Form/Experimental/Select.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Input.css";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Select.css";
+import { type ComponentPropsWithRef } from "react";
+declare const Select: {
+    ({ className, children, ...otherProps }: ComponentPropsWithRef<"select">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Select };

package/dist/distributeur/Form/Experimental/Select.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Input.css";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Select.css";
+import {} from "react";
+import icon from "@material-symbols/svg-700/rounded/arrow_drop_down-fill.svg";
+import { getClassName } from "../../utilities/helpers/getClassName";
+import { Svg } from "../../Svg";
+const Select = ({ className, children, ...otherProps }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-input__input",
+        className,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("select", { className: componentClassName, ...otherProps, children: children }), _jsx(Svg, { className: "af-input__select-icon", src: icon })] }));
+};
+Select.displayName = "Select";
+export { Select };

package/dist/distributeur/Form/Experimental/SelectInput.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { Select } from "./Select";
+import type { InputBaseProps } from "./types";
+export type SelectInputProps = Omit<ComponentProps<typeof Select>, "children"> & InputBaseProps & {
+    /**
+     * The content of the select, as JSX.
+     * This allows you to render `<option>` elements, and to group them with `<optgroup>`.
+     *
+     * @example
+     * ```tsx
+     * options={
+     *   <optgroup label="Europe">
+     *     <option value="FR">France</option>
+     *     <option value="ES">Spain</option>
+     *   </optgroup>
+     * }
+     * ```
+     */
+    options: ReactNode;
+    /**
+     * The text of the empty option rendered before the options, when no value is selected.
+     * Pass `null` to not render any placeholder option.
+     * @default "- Select -"
+     */
+    placeholder?: string | null;
+};
+/**
+ * This component renders a label, a select field and optionnally help and error messages.
+ * It can be customized to render the label on top, or on the left of the select.
+ * It also supports adding a unit on the right of the select.
+ */
+declare const SelectInput: {
+    ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, options, placeholder, ...props }: SelectInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SelectInput };

package/dist/distributeur/Form/Experimental/SelectInput.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { InputContainer } from "./InputContainer";
+import { InputUnit } from "./InputUnit";
+import { ItemMessage } from "./ItemMessage";
+import { Label } from "./Label";
+import { Select } from "./Select";
+import { useInput } from "./useInput.hook";
+/**
+ * This component renders a label, a select field and optionnally help and error messages.
+ * It can be customized to render the label on top, or on the left of the select.
+ * It also supports adding a unit on the right of the select.
+ */
+const SelectInput = ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, options, placeholder = "- Select -", ...props }) => {
+    const { describedBy, errorId, helperId, inputClassName, inputId, isContainerVertical, isInvalid, labelClassName, } = useInput({
+        id,
+        labelPosition,
+        inputClassName: inputClassNameProp,
+        labelClassName: labelClassNameProp,
+        errorMessage,
+        helpMessage,
+    });
+    return (_jsxs(InputContainer, { vertical: isContainerVertical, className: containerClassName, children: [_jsx(Label, { htmlFor: inputId, required: required, className: labelClassName, children: label }), _jsxs(Select, { ...props, className: inputClassName, id: inputId, "aria-describedby": describedBy, "aria-invalid": isInvalid, children: [placeholder === null ? null : _jsx("option", { value: "", children: placeholder }), options] }), contentRight ? _jsx(InputUnit, { children: contentRight }) : null, helpMessage ? (_jsx(ItemMessage, { id: helperId, children: helpMessage })) : null, errorMessage ? (_jsx(ItemMessage, { variant: "error", id: errorId, children: errorMessage })) : null] }));
+};
+SelectInput.displayName = "SelectInput";
+export { SelectInput };

package/dist/distributeur/Form/Experimental/index.d.ts

@@ -1,8 +1,13 @@
+export { DateInput } from "./DateInput";
+export type { DateInputProps } from "./DateInput";
 export { Input } from "./Input";
 export { InputContainer } from "./InputContainer";
 export { InputUnit } from "./InputUnit";
 export { ItemMessage } from "./ItemMessage";
 export { Label } from "./Label";
+export { Select } from "./Select";
+export { SelectInput } from "./SelectInput";
+export type { SelectInputProps } from "./SelectInput";
 export { TextInput } from "./TextInput";
 export type { TextInputProps } from "./TextInput";
 export type { InputBaseProps, LabelPosition, SingleLineLabelPosition, } from "./types";

package/dist/distributeur/Form/Experimental/index.js

@@ -1,8 +1,11 @@
+export { DateInput } from "./DateInput";
 export { Input } from "./Input";
 export { InputContainer } from "./InputContainer";
 export { InputUnit } from "./InputUnit";
 export { ItemMessage } from "./ItemMessage";
 export { Label } from "./Label";
+export { Select } from "./Select";
+export { SelectInput } from "./SelectInput";
 export { TextInput } from "./TextInput";
 export { useInput } from "./useInput.hook";
 export { RadioButton } from "./Radio/RadioButton";

package/package.json

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