@axa-fr/design-system-look-and-feel-react 1.0.5-ci.66 → 1.0.5-ci.68

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

@@ -1,24 +1,10 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Select/Select.scss";
-import ReactSelect, { ActionMeta, GroupBase, SelectInstance, SingleValue } from "react-select";
 import { ComponentPropsWithRef } from "react";
-type Option = {
-    label: string;
-    value: string | number;
-};
-type Props = Omit<ComponentPropsWithRef<ReactSelect>, "placeholder" | "noOptionsMessage"> & {
+type Props = ComponentPropsWithRef<"select"> & {
     id?: string;
     label?: string;
-    options: {
-        label: string;
-        value?: string | number | readonly string[];
-    }[];
-    value: Option | null;
     errorLabel?: string;
     placeholder?: string;
-    noOptionsMessage?: string;
-    onChange: (newValue: SingleValue<Option>, actionMeta: ActionMeta<string>) => void;
-    disabled?: boolean;
-    required?: boolean;
 };
-declare const Select: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<SelectInstance<unknown, boolean, GroupBase<unknown>>>>;
+declare const Select: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 export { Select };

package/dist/Form/Select/Select.js

@@ -1,31 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Select/Select.scss";
-import ReactSelect from "react-select";
 import { forwardRef, useId } from "react";
 import classNames from "classnames";
-import { DropdownIndicator } from "./DropdownIndicator";
-import { CustomOption } from "./CustomOption";
-import { defaultAriaLiveMessages } from "./arialiveMessagesDefault";
 import { InputError } from "../InputError";
-const Select = forwardRef(({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }, inputRef) => {
+const Select = forwardRef(({ id, required, label, errorLabel, placeholder, children, ...otherProps }, inputRef) => {
     const idError = useId();
     let inputId = useId();
     inputId = id || inputId;
-    return (_jsxs("div", { children: [label && (_jsxs("label", { htmlFor: inputId, className: "af-form__select-label", children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] })), _jsx(ReactSelect, { inputId: inputId, "aria-errormessage": idError, "aria-invalid": Boolean(errorLabel), ariaLiveMessages: defaultAriaLiveMessages, screenReaderStatus: ({ count }) => `${count} résultat${count > 1 ? "s" : ""} disponible${count > 1 ? "s" : ""}`, unstyled: true, isDisabled: disabled, noOptionsMessage: () => noOptionsMessage || "Aucun résultat", components: {
-                    DropdownIndicator,
-                    Option: CustomOption,
-                }, classNames: {
-                    control: () => "af-form__input-select",
-                    menu: () => "af-form__input-select-menu",
-                    menuList: () => "af-form__select-menu-list",
-                    container: ({ isFocused, isDisabled, selectProps: { menuIsOpen }, }) => classNames("af-form__input-select-container", isFocused && "af-form__input-select-container-focused", isDisabled && "af-form__input-select-container-disabled", errorLabel &&
-                        !isFocused &&
-                        !menuIsOpen &&
-                        "af-form__input-select-container-error"),
-                    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"),
-                    singleValue: ({ isDisabled, }) => classNames("af-form__select-single-value", isDisabled && "af-form__select-single-value-disabled"),
-                    dropdownIndicator: () => "af-form__select-dropdown-indicator",
-                }, className: "af-form__input-select", ...otherProps, ref: inputRef }), errorLabel && _jsx(InputError, { id: idError, message: errorLabel })] }));
+    const isShowingPlaceholder = otherProps.value === "";
+    const classname = classNames("af-form__select-input", errorLabel && "af-form__select-input--error", isShowingPlaceholder && "af-form__select-input-placeholder");
+    return (_jsxs("div", { children: [label && (_jsxs("label", { htmlFor: inputId, className: "af-form__select-label", children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] })), _jsxs("select", { className: classname, ...otherProps, ref: inputRef, id: inputId, children: [Boolean(placeholder) && (_jsx("option", { disabled: true, value: "", children: placeholder })), children] }), errorLabel && _jsx(InputError, { id: idError, message: errorLabel })] }));
 });
 Select.displayName = "Select";
 export { Select };

package/dist/List/ContentItemDuo/ContentItemDuo.d.ts

@@ -1,6 +1,7 @@
+import { type ReactNode } from "react";
 type ContentItemDuoProps = {
     label: string;
-    value: string;
+    value: ReactNode;
     isVertical?: boolean;
     className?: string;
     classModifier?: string;

package/dist/List/ContentItemDuo/ContentItemDuo.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import checkIcon from "@material-symbols/svg-400/outlined/check.svg";
 import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
 import { useMemo } from "react";
+import { Button, Svg } from "../..";
 import { Variants } from "../../Button/Button";
 import { getComponentClassName } from "../../utilities";
-import { Button, Svg } from "../..";
 export const ContentItemDuo = ({ label, value, isVertical = false, className, classModifier, isShowingDoneIcon = false, isShowingCloseIcon = false, buttonText, onButtonClick, }) => {
     const componentClassName = useMemo(() => {
         const classModifiers = [classModifier];
@@ -14,5 +14,5 @@ export const ContentItemDuo = ({ label, value, isVertical = false, className, cl
         return getComponentClassName("af-content-item-duo", className, classModifiers.filter(Boolean).join(" "));
     }, [classModifier, className, isVertical]);
     const iconContainerModifier = useMemo(() => ` af-content-item-duo__icon--${isShowingDoneIcon ? "done" : "close"}`, [isShowingDoneIcon]);
-    return (_jsxs("div", { className: componentClassName, children: [(isShowingDoneIcon || isShowingCloseIcon) && (_jsxs("div", { className: `af-content-item-duo__icon${iconContainerModifier}`, children: [isShowingDoneIcon && _jsx(Svg, { src: checkIcon }), isShowingCloseIcon && _jsx(Svg, { src: closeIcon })] })), _jsx("p", { className: "af-content-item-duo__label", children: label }), _jsx("p", { className: "af-content-item-duo__value", children: value }), buttonText && (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(Button, { variant: Variants.ghost, onClick: onButtonClick, children: buttonText }) }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [(isShowingDoneIcon || isShowingCloseIcon) && (_jsxs("div", { className: `af-content-item-duo__icon${iconContainerModifier}`, children: [isShowingDoneIcon && _jsx(Svg, { src: checkIcon }), isShowingCloseIcon && _jsx(Svg, { src: closeIcon })] })), _jsx("p", { className: "af-content-item-duo__label", children: label }), typeof value === "string" ? (_jsx("p", { className: "af-content-item-duo__value", children: value })) : (_jsx("div", { className: "af-content-item-duo__value", children: value })), buttonText && (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(Button, { variant: Variants.ghost, onClick: onButtonClick, children: buttonText }) }))] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-ci.66",
+  "version": "1.0.5-ci.68",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.66",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.68",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -58,8 +58,7 @@
     "@tanem/svg-injector": "^10.1.68",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",
-    "rc-slider": "^11.1.7",
-    "react-select": "^5.9.0"
+    "rc-slider": "^11.1.7"
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": "eslint --fix",

package/dist/Form/Select/CustomOption.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { OptionProps } from "react-select";
-declare const CustomOption: React.FC<OptionProps>;
-export { CustomOption };

package/dist/Form/Select/CustomOption.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { components } from "react-select";
-const CustomOption = ({ getValue, ...otherProps }) => {
-    const value = useMemo(() => getValue(), [getValue]);
-    return (_jsx(components.Option, { ...otherProps, getValue: getValue, "data-value": value }));
-};
-export { CustomOption };

package/dist/Form/Select/DropdownIndicator.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { DropdownIndicatorProps } from "react-select";
-declare const DropdownIndicator: React.FC<DropdownIndicatorProps>;
-export { DropdownIndicator };

package/dist/Form/Select/DropdownIndicator.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import arrowDropDown from "@material-symbols/svg-400/outlined/arrow_drop_down.svg";
-import arrowDropUp from "@material-symbols/svg-400/outlined/arrow_drop_up.svg";
-import { components } from "react-select";
-import classNames from "classnames";
-import { Svg } from "../../Svg";
-const DropdownIndicator = (props) => {
-    const { selectProps: { menuIsOpen, isDisabled }, } = props;
-    return (_jsx(components.DropdownIndicator, { ...props, children: _jsx(Svg, { src: menuIsOpen ? arrowDropUp : arrowDropDown, className: classNames(isDisabled && "af-form__input-select-container-icon-disabled") }) }));
-};
-export { DropdownIndicator };

package/dist/Form/Select/arialiveMessagesDefault.d.ts

@@ -1,7 +0,0 @@
-import { AriaGuidanceProps, AriaOnChangeProps, AriaOnFilterProps, AriaOnFocusProps, GroupBase } from "react-select";
-export declare const defaultAriaLiveMessages: {
-    guidance: (props: AriaGuidanceProps) => string;
-    onChange: <Option, IsMulti extends boolean>(props: AriaOnChangeProps<Option, IsMulti>) => string;
-    onFocus: <Option, Group extends GroupBase<Option>>(props: AriaOnFocusProps<Option, Group>) => string;
-    onFilter: (props: AriaOnFilterProps) => string;
-};

package/dist/Form/Select/arialiveMessagesDefault.js

@@ -1,53 +0,0 @@
-export const defaultAriaLiveMessages = {
-    guidance: (props) => {
-        const { isSearchable, isMulti, tabSelectsValue, context, isInitialFocus } = props;
-        switch (context) {
-            case "menu":
-                return `Utilisez les flèches Haut et Bas pour choisir des options, appuyez sur Entrée pour sélectionner l'option actuellement mise au point, appuyez sur Échap pour quitter le menu${tabSelectsValue ? ", appuyez sur Tab pour sélectionner l'option et quitter le menu" : ""}.`;
-            case "input":
-                return isInitialFocus
-                    ? `${props["aria-label"] || "Sélectionner"} est sélectionné ${isSearchable ? ", tapez du texte pour affiner la liste" : ""}, appuyez sur Bas pour ouvrir le menu, ${isMulti ? " appuyez sur Gauche pour mettre au point les valeurs sélectionnées" : ""}`
-                    : "";
-            case "value":
-                return "Utilisez les flèches Gauche et Droite pour basculer entre les valeurs sélectionnées, appuyez sur Retour arrière pour supprimer la valeur actuellement sélectionnée.";
-            default:
-                return "";
-        }
-    },
-    onChange: (props) => {
-        const { action, label = "", labels, isDisabled } = props;
-        switch (action) {
-            case "deselect-option":
-            case "pop-value":
-            case "remove-value":
-                return `option ${label}, désélectionnée.`;
-            case "clear":
-                return "Toutes les options sélectionnées ont été effacées.";
-            case "initial-input-focus":
-                return `${labels.length > 1 ? "les " : "l'"}option${labels.length > 1 ? "s" : ""} ${labels.join(",")} ${labels.length > 1 ? "sont" : "est"} sélectionnée${labels.length > 1 ? "s" : ""}.`;
-            case "select-option":
-                return isDisabled
-                    ? `l'option ${label} est désactivée. Sélectionnez une autre option.`
-                    : `l'option ${label} est sélectionnée.`;
-            default:
-                return "";
-        }
-    },
-    onFocus: (props) => {
-        const { context, focused, options, label = "", selectValue, isDisabled, isSelected, isAppleDevice, } = props;
-        const getArrayIndex = (arr, item) => arr && arr.length ? `${arr.indexOf(item) + 1} sur ${arr.length}` : "";
-        if (context === "value" && selectValue) {
-            return `la valeur ${label} est sélectionnée, ${getArrayIndex(selectValue, focused)}.`;
-        }
-        if (context === "menu" && isAppleDevice) {
-            const disabled = isDisabled ? " désactivé" : "";
-            const status = `${isSelected ? " sélectionné" : ""}${disabled}`;
-            return `${label}${status}, ${getArrayIndex(options, focused)}.`;
-        }
-        return "";
-    },
-    onFilter: (props) => {
-        const { inputValue, resultsMessage } = props;
-        return `${resultsMessage}${inputValue ? ` pour le terme de recherche : ${inputValue}` : ""}.`;
-    },
-};