@axa-fr/design-system-slash-react 1.2.1-alpha.91 → 1.2.1-alpha.98

package/dist/Divider/Divider.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-slash-css/dist/Divider/Divider.css";
+type DividerProps = {
+    mode?: "horizontal" | "vertical";
+    classModifier?: string;
+};
+export declare const Divider: ({ mode, classModifier, }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Divider/Divider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import "@axa-fr/design-system-slash-css/dist/Divider/Divider.css";
+export const Divider = ({ mode = "horizontal", classModifier, }) => {
+    const componentClassName = classnames("af-divider", classModifier, {
+        "af-divider--horizontal": mode === "horizontal",
+        "af-divider--vertical": mode === "vertical",
+    });
+    return _jsx("hr", { className: componentClassName });
+};

package/dist/Form/MultiSelect/FormatOptionLabel.d.ts

@@ -0,0 +1,4 @@
+import { type FormatOptionLabelMeta } from "react-select";
+import { Option } from "./MultiSelect";
+declare const formatOptionLabel: (data: Option, formatOptionLabelMeta: FormatOptionLabelMeta<Option>) => string | import("react/jsx-runtime").JSX.Element;
+export { formatOptionLabel };

package/dist/Form/MultiSelect/FormatOptionLabel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import checkIcon from "@material-symbols/svg-700/outlined/check.svg";
+import { Svg } from "../..";
+const formatOptionLabel = (data, formatOptionLabelMeta) => {
+    if (formatOptionLabelMeta.context === "value") {
+        return data.label;
+    }
+    const isChecked = formatOptionLabelMeta.selectValue.some((selectValue) => data.value === selectValue.value);
+    return (_jsxs("div", { className: "react-select__multi-option-label", children: [_jsx("div", { className: "checkbox-indicator", children: _jsx("span", { className: classNames("indicator", { "checkbox-checked": isChecked }), children: isChecked ? _jsx(Svg, { src: checkIcon }) : null }) }), data.label] }));
+};
+export { formatOptionLabel };

package/dist/Form/MultiSelect/MultiSelect.d.ts

@@ -1,5 +1,6 @@
-import { GroupBase } from "react-select";
+import { type GroupBase } from "react-select";
 import { AsyncProps } from "react-select/async";
+import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
 type Option = {
     value: string;
     label: string;
@@ -9,6 +10,8 @@ type Props = Omit<AsyncProps<Option, true, GroupBase<Option>>, "value" | "isDisa
     values?: string[] | null;
     value?: string;
     disabled?: boolean;
+    selectedLimit?: number;
+    selectedLimitLabel?: string;
 };
 type onChangeProps = {
     id: string;
@@ -16,5 +19,5 @@ type onChangeProps = {
     values?: string[];
     value?: string;
 };
-declare const MultiSelect: ({ id, name, loadOptions, values, options, value, onChange, onBlur, placeholder, className, disabled, loadingMessage, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
-export { MultiSelect };
+declare const MultiSelect: ({ id, name, loadOptions, values, options, value, onChange, onBlur, placeholder, className, disabled, loadingMessage, isMulti, selectedLimit, selectedLimitLabel, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { MultiSelect, type Option };

package/dist/Form/MultiSelect/MultiSelect.js

@@ -1,8 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import ReactSelect from "react-select";
-import ReactSelectAsync from "react-select/async";
-const MultiSelect = ({ id, name, loadOptions, values, options, value, onChange, onBlur, placeholder = "Select", className = "react-select", disabled, loadingMessage = () => "Chargement...", ...otherProps }) => {
+import Select from "react-select";
+import AsyncSelect from "react-select/async";
+import { ValueContainer } from "./ValueContainer";
+import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
+import { formatOptionLabel } from "./FormatOptionLabel";
+import { useMultiSelectStyle } from "./useMultiSelectStyle";
+import { noOptionsMessage } from "./NoOptionsMessage";
+const MultiSelect = ({ id, name, loadOptions, values, options, value, onChange, onBlur, placeholder = "- Sélectionner -", className = "react-select", disabled, loadingMessage = () => "Chargement...", isMulti, selectedLimit, selectedLimitLabel, ...otherProps }) => {
+    const { styles } = useMultiSelectStyle();
     const generatedId = useId();
     const inputId = id || generatedId;
     const handleOnChange = (newValue) => {
@@ -37,11 +43,25 @@ const MultiSelect = ({ id, name, loadOptions, values, options, value, onChange,
         options,
         valueKey: "value",
         labelKey: "label",
+        styles,
+        isMulti,
+        noOptionsMessage,
+        isClearable: true,
+        hideSelectedOptions: false,
+        components: { ValueContainer },
+        closeMenuOnSelect: !values,
         ...otherProps,
     };
     if (values) {
         const newValues = options.filter((opt) => values.includes(opt.value));
-        return loadOptions ? (_jsx(ReactSelectAsync, { ...commonProps, isMulti: true, value: newValues, loadOptions: loadOptions, loadingMessage: loadingMessage })) : (_jsx(ReactSelect, { ...commonProps, isMulti: true, value: newValues }));
+        const commonValuesProps = {
+            ...commonProps,
+            value: newValues,
+            formatOptionLabel,
+            selectedLimit,
+            selectedLimitLabel,
+        };
+        return loadOptions ? (_jsx(AsyncSelect, { ...commonValuesProps, loadOptions: loadOptions, loadingMessage: loadingMessage, isMulti: true })) : (_jsx(Select, { ...commonValuesProps, isMulti: true }));
     }
     const newValue = options.find((o) => o.value === value);
     const commonValueProps = {
@@ -49,6 +69,6 @@ const MultiSelect = ({ id, name, loadOptions, values, options, value, onChange,
         multi: false,
         value: newValue,
     };
-    return loadOptions ? (_jsx(ReactSelectAsync, { ...commonValueProps, loadOptions: loadOptions, loadingMessage: loadingMessage })) : (_jsx(ReactSelect, { ...commonValueProps }));
+    return loadOptions ? (_jsx(AsyncSelect, { ...commonValueProps, loadOptions: loadOptions, loadingMessage: loadingMessage })) : (_jsx(Select, { ...commonValueProps }));
 };
 export { MultiSelect };

package/dist/Form/MultiSelect/NoOptionsMessage.d.ts

@@ -0,0 +1,3 @@
+export declare const noOptionsMessage: ({ inputValue }: {
+    inputValue: string;
+}) => string;

package/dist/Form/MultiSelect/NoOptionsMessage.js

@@ -0,0 +1 @@
+export const noOptionsMessage = ({ inputValue }) => `Pas de résultats pour "${inputValue}"`;

package/dist/Form/MultiSelect/ValueContainer.d.ts

@@ -0,0 +1,4 @@
+import { type GroupBase, type ValueContainerProps } from "react-select";
+import { Option } from "./MultiSelect";
+declare const ValueContainer: ({ children, ...props }: ValueContainerProps<Option, boolean, GroupBase<Option>>) => import("react/jsx-runtime").JSX.Element;
+export { ValueContainer };

package/dist/Form/MultiSelect/ValueContainer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { components, } from "react-select";
+const ValueContainer = ({ children, ...props }) => {
+    const { selectProps, getStyles, innerProps } = props;
+    const { selectedLimit, selectedLimitLabel, value: selectedOptions, isMulti, } = selectProps;
+    if (!isMulti) {
+        return (_jsx(components.ValueContainer, { ...props, children: children }));
+    }
+    const [values, input] = children;
+    const visibleOptions = React.Children.toArray(values).slice(0, selectedLimit);
+    const extraCount = Array.isArray(selectedOptions) && selectedLimit !== undefined
+        ? selectedOptions.length - selectedLimit
+        : 0;
+    // On est obligé de sortir le borderRadius ici pour ne pas devoir ajouter un important dans le fichier scss
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { borderRadius, ...multiValueLabelStyles } = getStyles("multiValueLabel", props);
+    return (_jsxs(components.ValueContainer, { ...props, children: [extraCount > 0 ? (_jsxs(_Fragment, { children: [visibleOptions, _jsxs("div", { ...innerProps, style: multiValueLabelStyles, className: "multi-value-limit", children: ["+ ", extraCount, " ", selectedLimitLabel || ""] })] })) : (values), input] }));
+};
+export { ValueContainer };

package/dist/Form/MultiSelect/useMultiSelectStyle.d.ts

@@ -0,0 +1,5 @@
+import { type GroupBase, type StylesConfig } from "react-select";
+import { Option } from "./MultiSelect";
+export declare const useMultiSelectStyle: () => {
+    styles: StylesConfig<Option, boolean, GroupBase<Option>>;
+};

package/dist/Form/MultiSelect/useMultiSelectStyle.js

@@ -0,0 +1,81 @@
+export const useMultiSelectStyle = () => {
+    // The recommended way to provide custom styles to react-select is to use the styles prop
+    // https://react-select.com/styles#the-styles-prop
+    const styles = {
+        container: () => ({
+            width: "100%",
+        }),
+        control: (provided, state) => ({
+            ...provided,
+            whiteSpace: "normal",
+            borderRadius: "0",
+            borderColor: state.isFocused ? "var(--axablue80)" : provided.borderColor,
+            boxShadow: state.isFocused ? "0" : provided.boxShadow,
+            width: "100%",
+            cursor: state.isDisabled ? "not-allowed" : "pointer",
+            ":hover": {
+                borderColor: state.isFocused
+                    ? "var(--axablue80)"
+                    : provided.borderColor,
+            },
+        }),
+        menu: (provided) => ({
+            ...provided,
+            borderRadius: "0",
+        }),
+        menuList: (provided) => ({
+            ...provided,
+            padding: "0",
+        }),
+        option: (provided, state) => ({
+            ...provided,
+            backgroundColor: (state.isSelected && !state.isMulti) || state.isFocused
+                ? "var(--axablue30)"
+                : "var(--white)",
+            color: state.isSelected || state.isFocused
+                ? "var(--axablue80)"
+                : provided.color,
+            cursor: state.isDisabled ? "not-allowed" : "pointer",
+            padding: "0.406rem 0.75rem",
+            ":hover": {
+                backgroundColor: "var(--axablue30)",
+                color: "var(--axablue80)",
+            },
+        }),
+        singleValue: (provided) => ({
+            ...provided,
+            whiteSpace: "normal",
+        }),
+        multiValue: (provided) => ({
+            ...provided,
+            whiteSpace: "normal",
+            flexDirection: "row-reverse",
+            borderRadius: "0.25rem",
+        }),
+        multiValueLabel: (provided, state) => ({
+            ...provided,
+            whiteSpace: "normal",
+            backgroundColor: state.isDisabled
+                ? provided.backgroundColor
+                : "var(--axablue30)",
+            color: state.isDisabled ? provided.backgroundColor : "var(--axablue80)",
+            padding: "0.125rem 0.375rem 0.125rem 0.375rem",
+            borderRadius: "0 0.25rem 0.25rem 0",
+        }),
+        multiValueRemove: (provided, state) => ({
+            ...provided,
+            backgroundColor: state.isDisabled
+                ? provided.backgroundColor
+                : "var(--axablue30)",
+            color: state.isDisabled ? provided.color : "var(--axablue80)",
+            //   borderRadius: "0.25rem 0 0 0.25rem",
+            ":hover": {
+                backgroundColor: state.isDisabled
+                    ? provided.backgroundColor
+                    : "var(--axablue40)",
+                color: state.isDisabled ? provided.color : "var(--axablue80)",
+            },
+        }),
+    };
+    return { styles };
+};

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { Action } from "./Action/Action";
 export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";
 export { Card } from "./Card/Card";
+export { Divider } from "./Divider/Divider";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
 export { LegacyField as Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";

package/dist/index.js

@@ -7,6 +7,7 @@ export { Action } from "./Action/Action";
 export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";
 export { Card } from "./Card/Card";
+export { Divider } from "./Divider/Divider";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
 export { LegacyField as Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.91",
+  "version": "1.2.1-alpha.98",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.2.1-alpha.91",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.98",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -59,12 +59,13 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.8",
     "@fontsource/source-sans-pro": "^5.2.5",
+    "@material-symbols/svg-700": ">= 0.19.0",
     "@tanem/svg-injector": "^10.1.68",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",
     "rc-slider": "^11.1.7",
     "react-dropzone": "^11.5.3",
-    "react-select": "^5.9.0"
+    "react-select": "^5.10.1"
   },
   "devDependencies": {
     "@axa-fr/design-system-slash-css": "*",