@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/Select/Select.js

@@ -1,28 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, LucideIcon, } from '@alveole/components';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Platform } from 'react-native';
-import { useStyles } from './Select.styles';
-import { SelectInput } from './SelectInput';
+import { useFieldLabel } from '../FormControl/FieldId';
+import { SelectBottomSheet } from './SelectBottomSheet';
+import { SelectTrigger } from './SelectTrigger';
+import { emitSelectChange, toSelectedValues, toggleSelectedValue } from './selectValue';
+import { usePanneauSelect } from './usePanneauSelect';
 export const Select = React.forwardRef(function Select(props, ref) {
-    const { value, label, labelRight, hint, error, success, disabled, options, placeholder, onChange, onBlur, onFocus } = props;
-    const styles = useStyles();
-    const [focus, setFocus] = React.useState(false);
-    const handleFocus = (e) => {
-        if (!disabled)
-            setFocus(true);
-        onFocus?.(e);
-    };
-    const handleBlur = (e) => {
-        if (!disabled)
-            setFocus(false);
-        onBlur?.(e);
-    };
-    return (_jsxs(FormControl, { style: styles.pickerContainer, children: [_jsxs(InputHeading, { children: [!!label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(Box, { tag: "form-control-text-input", style: styles.inputContainer, children: _jsxs(Box, { tag: "form-control-text-input-inner", style: {
-                        ...styles.inputInner,
-                        ...(disabled ? styles.inputDisabled : {}),
-                        ...(focus ? styles.inputFocused : {}),
-                        ...(error ? styles.inputError : {}),
-                        ...(success ? styles.inputSuccess : {}),
-                    }, children: [_jsx(SelectInput, { ref: ref, value: value, placeholder: placeholder, options: options, onChange: onChange, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, style: styles.picker }), Platform.OS === 'web' && (_jsx(LucideIcon, { style: { ...styles.indicator, ...(focus ? styles.indicatorFocus : {}) }, size: "sm", name: "ChevronDown" }))] }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    const { options, placeholder, sheetTitle, disabled, error, success } = props;
+    // `multiple`, `value` et `onChange` ne sont jamais déstructurés : l'union
+    // n'est discriminée que sur l'objet `props` entier.
+    const values = toSelectedValues(props);
+    const label = useFieldLabel();
+    const title = sheetTitle ?? label;
+    if (__DEV__ && title == null) {
+        console.warn('Warning:', 'Select sans nom : placez-le dans un FormControl ou passez-lui sheetTitle.');
+    }
+    const panneau = usePanneauSelect(props, ref);
+    // L'ordre suit celui de `value`, pas celui d'`options` : c'est la sélection
+    // que l'appelant a construite.
+    const selectedOptions = values
+        .map(value => options.find(option => option.value === value))
+        .filter(option => option != null);
+    const publier = (suivantes) => emitSelectChange(props, suivantes);
+    return (_jsxs(_Fragment, { children: [_jsx(SelectTrigger, { label: label, placeholder: placeholder, disabled: disabled, error: error, success: success, open: panneau.open, multiple: props.multiple, selectedOptions: selectedOptions, onPress: panneau.ouvrir, onRemoveValue: disabled ? undefined : value => publier(values.filter(retenue => retenue !== value)) }), _jsx(SelectBottomSheet, { ...props, open: panneau.open, setOpen: panneau.setOpen, title: title ?? '', values: values, multiple: props.multiple, onSelect: value => publier(toggleSelectedValue(props, value)), onClear: () => publier([]), query: panneau.query, onQueryChange: panneau.onQueryChange, onCreate: props.onCreateOption })] }));
 });

package/dist/ui/Select/Select.stories.d.ts

@@ -2,54 +2,56 @@ declare const _default: {
     title: string;
     tags: "ui"[];
     experimental: false;
+    figmaURL: string;
+    shortDescription: string;
     description: string;
-    component: import("react").ForwardRefExoticComponent<Partial<Pick<import("@react-native-picker/picker").PickerProps<import("@react-native-picker/picker/typings/Picker").ItemValue>, "onFocus" | "onBlur">> & {
-        label: string;
-        labelRight?: React.ReactNode;
-        optional?: boolean;
-        optionalText?: string;
-        disabled?: boolean;
-    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
-        value: string | null;
-        placeholder?: string;
-        options: import("./Select").SelectOption[];
-        onChange?: (value: string | null) => void;
-    } & import("react").RefAttributes<import("@react-native-picker/picker").Picker<string | number | object>>>;
+    component: import("react").ForwardRefExoticComponent<import("./Select.types").SelectProps & import("react").RefAttributes<import("./Select.types").SelectRef>>;
     styleFn: () => {
-        pickerContainer: {};
-        picker: {
-            width: "100%";
-            borderWidth: number;
-            backgroundColor: "transparent";
-            appearance: "none";
-            fontSize: 16;
-            lineHeight: 24;
+        value: {
+            color: string;
+            flex: number;
+            fontSize: 14;
+            lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            flex: number;
-            outline: string;
-            padding: number;
+        };
+        valuePlaceholder: {
+            color: string;
+        };
+        valueDisabled: {
+            color: string;
+        };
+        inputInnerMultiple: {
+            alignItems: "flex-start";
             paddingTop: string | number;
             paddingBottom: string | number;
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            color: string;
         };
+        tagList: {
+            flex: number;
+            display: "flex";
+            flexDirection: "row";
+            flexWrap: "wrap";
+            alignItems: "center";
+            gap: string | number;
+        };
+        pickerContainer: {};
         inputContainer: {
             width: "100%";
-            padding: number;
         };
         inputInner: {
             display: "flex";
             flexDirection: "row";
+            alignItems: "center";
             gap: string | number;
-            padding: number;
-            borderRadius: number;
+            paddingLeft: number;
+            paddingRight: number;
+            minHeight: number;
+            borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string | undefined;
-            backgroundColor: "#FFFFFF";
-            overflow: "hidden";
+            borderStyle: "solid";
+            borderColor: string;
+            backgroundColor: string;
             width: "100%";
         };
         inputError: {
@@ -61,22 +63,40 @@ declare const _default: {
         inputDisabled: {
             borderColor: string;
         };
-        inputFocused: {
-            outlineStyle: "solid";
-            outlineWidth: number;
-            outlineColor: string;
-            outlineOffset: number;
+        inputCursor: {
+            cursor: "pointer";
         };
-        indicator: {
-            position: "absolute";
-            right: string | number;
-            top: string | number;
+        inputCursorDisabled: {
+            cursor: "not-allowed";
         };
-        indicatorFocus: {};
+        inputFocused: import("@alveole/theme").FocusBorderStyle;
     };
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
 export declare const States: () => import("react").JSX.Element;
+export declare const WithIcons: () => import("react").JSX.Element;
+export declare const Grouped: () => import("react").JSX.Element;
+export declare const LongList: () => import("react").JSX.Element;
+export declare const Clearable: () => import("react").JSX.Element;
+/** `searchable` ajoute un champ de recherche au panneau et filtre les options sur leur libellé. */
+export declare const Searchable: () => import("react").JSX.Element;
+/**
+ * Recherche distante : `localFilter={false}` laisse le filtrage au serveur, et
+ * `onSearchChange` reçoit la saisie une fois stabilisée. Ici la « requête » est simulée.
+ */
+export declare const RemoteSearch: () => import("react").JSX.Element;
+/** `multiple` fait de la valeur un tableau. Les valeurs retenues s’affichent en puces retirables. */
+export declare const Multiple: () => import("react").JSX.Element;
+/**
+ * `creatable` propose d’ajouter la saisie à la liste. Le composant restant contrôlé,
+ * c’est l’appelant qui insère l’option puis met la valeur à jour.
+ */
+export declare const Creatable: () => import("react").JSX.Element;
+/**
+ * Champ adresse : recherche distante et saisie libre autorisée. Ce préréglage remplace
+ * l’ancien composant `AutocompleteAddress`.
+ */
+export declare const Address: () => import("react").JSX.Element;
 export * as Sources from './Select.stories.sources';
 //# sourceMappingURL=Select.stories.d.ts.map

package/dist/ui/Select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAQlB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAOlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAwCkB;AA2ClB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAelB,CAAC;AAEF,eAAO,MAAM,SAAS,mCASrB,CAAC;AAEF,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCASrB,CAAC;AAEF,mGAAmG;AACnG,eAAO,MAAM,UAAU,mCAStB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,mCAmCxB,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,mCAyBrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,mCAiCnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}

package/dist/ui/Select/Select.stories.js

@@ -1,13 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
+import { FormControl } from '../FormControl';
 import { Select } from './Select';
 import { useStyles } from './Select.styles';
 export default {
     title: 'Select',
     tags: ['ui'],
     experimental: false,
-    description: "Sélecteur mono-valeur natif avec label, hint et états d'erreur/succès.",
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=3663-520',
+    shortDescription: "Sélecteur d'une ou plusieurs options, nu : on le place dans un FormControl pour son libellé, son aide et sa validation.",
+    description: [
+        "Sélecteur d'une ou plusieurs options, nu : on le place dans un FormControl pour son libellé, son aide et sa validation.",
+        '',
+        'Le panneau est rendu par le design system sur les deux plateformes : liste déroulante au clavier sur web,',
+        'bottom sheet sur mobile. Chaque option peut porter une icône, et l’option sélectionnée est signalée par une',
+        'coche en tête de ligne. Les options partageant un même `group` sont regroupées sous un en-tête.',
+        '',
+        '`multiple` bascule la valeur de `string | null` à `string[]` : le type de `onChange` suit, sans générique.',
+        'Le composant reste **strictement contrôlé**, y compris pour la création d’option : `onCreateOption` reçoit',
+        'la saisie, à l’appelant d’ajouter l’option à `options` puis de mettre `value` à jour.',
+        '',
+        '### Migration depuis `Autocomplete`',
+        '',
+        // Cellules en texte brut : le rendu Markdown du catalogue échoue sur du code
+        // inline dans un tableau.
+        '| Autocomplete | Select |',
+        '| --- | --- |',
+        '| value: AutocompleteOption[] | value: string ou null (mono), string[] (multiple) |',
+        '| isMulti | multiple |',
+        '| isSearchable | searchable |',
+        '| disabledFilterSearch | localFilter={false} |',
+        '| allowEmpty | clearable |',
+        '| allowCreate | creatable |',
+        '| onCreateOption(option) | onCreateOption(query) |',
+        '| createOptionLabel | createLabel |',
+        '| createOptionValue | supprimé : l’appelant fabrique l’option |',
+        '| onChange(value, meta) | onChange(value) — le second argument disparaît |',
+        '',
+        '`AutocompleteAddress` se recompose avec `searchable localFilter={false} creatable` : `onPlaceSelected`',
+        'devient `onChange`, `onCustomAddress` devient `onCreateOption`, `onClear` devient `onChange(null)`.',
+    ].join('\n'),
     component: Select,
     styleFn: useStyles,
 };
@@ -16,9 +49,116 @@ const OPTIONS = [
     { label: 'Option B', value: 'b' },
     { label: 'Option C', value: 'c' },
 ];
+const ICON_OPTIONS = [
+    { label: 'Document', value: 'document', leading: 'File' },
+    { label: 'Contact', value: 'contact', leading: 'User' },
+    { label: 'Échéance', value: 'echeance', leading: 'Clock' },
+    { label: 'Dossier', value: 'dossier', leading: 'Folder' },
+];
+const GROUPED_OPTIONS = [
+    { label: 'Bail commercial', value: 'bail-commercial', group: 'Contrats' },
+    { label: 'Bail habitation', value: 'bail-habitation', group: 'Contrats' },
+    { label: 'Quittance', value: 'quittance', group: 'Documents' },
+    { label: 'État des lieux', value: 'edl', group: 'Documents' },
+];
+const CITY_OPTIONS = [
+    { label: 'Bordeaux', value: 'bordeaux' },
+    { label: 'Lille', value: 'lille' },
+    { label: 'Lyon', value: 'lyon' },
+    { label: 'Marseille', value: 'marseille' },
+    { label: 'Nantes', value: 'nantes' },
+    { label: 'Paris', value: 'paris' },
+    { label: 'Toulouse', value: 'toulouse' },
+];
+const ADDRESS_SUGGESTIONS = [
+    { label: '3 rue Robespierre, 75011 Paris', value: 'place-1' },
+    { label: '10 avenue de la République, 75011 Paris', value: 'place-2' },
+    { label: '5 boulevard Voltaire, 75011 Paris', value: 'place-3' },
+];
+const LONG_OPTIONS = Array.from({ length: 60 }, (_, index) => ({
+    label: `Option ${index + 1}`,
+    value: `option-${index + 1}`,
+}));
 export const Default = () => {
     const [value, setValue] = useState(null);
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(Select, { label: "S\u00E9lection", placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "S\u00E9lection", children: _jsx(Select, { placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue }) }) }));
+};
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Avec valeur", children: _jsx(Select, { options: OPTIONS, value: "b" }) }), _jsx(FormControl, { label: "Erreur", error: "Ce champ est requis", children: _jsx(Select, { options: OPTIONS, value: null, error: "Ce champ est requis" }) }), _jsx(FormControl, { label: "Succ\u00E8s", success: "Valide", children: _jsx(Select, { options: OPTIONS, value: "a", success: "Valide" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(Select, { options: OPTIONS, value: "a", disabled: true }) })] }));
+export const WithIcons = () => {
+    const [value, setValue] = useState('contact');
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Type de ressource", children: _jsx(Select, { options: ICON_OPTIONS, value: value, onChange: setValue }) }) }));
+};
+export const Grouped = () => {
+    const [value, setValue] = useState(null);
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Type de document", children: _jsx(Select, { placeholder: "Tous les types", options: GROUPED_OPTIONS, value: value, onChange: setValue }) }) }));
+};
+export const LongList = () => {
+    const [value, setValue] = useState('option-42');
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Liste d\u00E9filante", children: _jsx(Select, { options: LONG_OPTIONS, value: value, onChange: setValue }) }) }));
+};
+export const Clearable = () => {
+    const [value, setValue] = useState('b');
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Effa\u00E7able", children: _jsx(Select, { placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue, clearable: true }) }) }));
+};
+/** `searchable` ajoute un champ de recherche au panneau et filtre les options sur leur libellé. */
+export const Searchable = () => {
+    const [value, setValue] = useState(null);
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Ville", children: _jsx(Select, { placeholder: "Choisir...", searchable: true, options: CITY_OPTIONS, value: value, onChange: setValue }) }) }));
+};
+/**
+ * Recherche distante : `localFilter={false}` laisse le filtrage au serveur, et
+ * `onSearchChange` reçoit la saisie une fois stabilisée. Ici la « requête » est simulée.
+ */
+export const RemoteSearch = () => {
+    const [value, setValue] = useState(null);
+    const [options, setOptions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const search = (query) => {
+        if (query.length < 3) {
+            setOptions([]);
+            return;
+        }
+        setLoading(true);
+        setOptions([
+            { label: `${query} — résultat 1`, value: `${query}-1` },
+            { label: `${query} — résultat 2`, value: `${query}-2` },
+        ]);
+        setLoading(false);
+    };
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Recherche distante", children: _jsx(Select, { placeholder: "Saisir au moins 3 caract\u00E8res...", searchable: true, localFilter: false, loading: loading, emptyMessage: "Saisir au moins 3 caract\u00E8res", options: options, value: value, onChange: setValue, onSearchChange: search }) }) }));
+};
+/** `multiple` fait de la valeur un tableau. Les valeurs retenues s’affichent en puces retirables. */
+export const Multiple = () => {
+    const [values, setValues] = useState(['a']);
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "S\u00E9lection multiple", children: _jsx(Select, { placeholder: "Choisir...", multiple: true, clearable: true, options: OPTIONS, value: values, onChange: setValues }) }) }));
+};
+/**
+ * `creatable` propose d’ajouter la saisie à la liste. Le composant restant contrôlé,
+ * c’est l’appelant qui insère l’option puis met la valeur à jour.
+ */
+export const Creatable = () => {
+    const [options, setOptions] = useState(OPTIONS);
+    const [values, setValues] = useState([]);
+    const createOption = (query) => {
+        setOptions(current => [...current, { label: query, value: query }]);
+        setValues(current => [...current, query]);
+    };
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "\u00C9tiquettes", children: _jsx(Select, { placeholder: "Rechercher ou cr\u00E9er...", multiple: true, searchable: true, creatable: true, options: options, value: values, onChange: setValues, onCreateOption: createOption }) }) }));
+};
+/**
+ * Champ adresse : recherche distante et saisie libre autorisée. Ce préréglage remplace
+ * l’ancien composant `AutocompleteAddress`.
+ */
+export const Address = () => {
+    const [options, setOptions] = useState([]);
+    const [value, setValue] = useState(null);
+    const search = (query) => {
+        setOptions(query.length >= 3 ? ADDRESS_SUGGESTIONS : []);
+    };
+    const createAddress = (query) => {
+        setOptions(current => [...current, { label: query, value: query }]);
+        setValue(query);
+    };
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Adresse", children: _jsx(Select, { placeholder: "ex : 3 rue Robespierre", searchable: true, localFilter: false, creatable: true, clearable: true, emptyMessage: "Saisir au moins 3 caract\u00E8res", createLabel: query => `Utiliser « ${query} »`, options: options, value: value, onChange: setValue, onSearchChange: search, onCreateOption: createAddress }) }) }));
 };
-export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Select, { label: "Avec valeur", options: OPTIONS, value: "b" }), _jsx(Select, { label: "Erreur", options: OPTIONS, value: null, error: "Ce champ est requis" }), _jsx(Select, { label: "Succ\u00E8s", options: OPTIONS, value: "a", success: "Valide" }), _jsx(Select, { label: "D\u00E9sactiv\u00E9", options: OPTIONS, value: "a", disabled: true })] }));
 export * as Sources from './Select.stories.sources';

package/dist/ui/Select/Select.stories.sources.d.ts

@@ -1,8 +1,27 @@
 export declare const Default: () => string;
 export declare const States: () => string;
+export declare const WithIcons: () => string;
+export declare const Grouped: () => string;
+export declare const LongList: () => string;
+export declare const Clearable: () => string;
+export declare const Searchable: () => string;
+export declare const RemoteSearch: () => string;
+export declare const Multiple: () => string;
+export declare const Creatable: () => string;
+export declare const Address: () => string;
 export declare const storySources: {
     readonly Default: () => string;
     readonly States: () => string;
+    readonly WithIcons: () => string;
+    readonly Grouped: () => string;
+    readonly LongList: () => string;
+    readonly Clearable: () => string;
+    readonly Searchable: () => string;
+    readonly RemoteSearch: () => string;
+    readonly Multiple: () => string;
+    readonly Creatable: () => string;
+    readonly Address: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=Select.stories.sources.d.ts.map

package/dist/ui/Select/Select.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA0T,CAAC;AAE/U,eAAO,MAAM,MAAM,cAAib,CAAC;AAErc,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Select.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuW,CAAC;AAE5X,eAAO,MAAM,MAAM,cAA+oB,CAAC;AAEnqB,eAAO,MAAM,SAAS,cAAgW,CAAC;AAEvX,eAAO,MAAM,OAAO,cAA0X,CAAC;AAE/Y,eAAO,MAAM,QAAQ,cAA+V,CAAC;AAErX,eAAO,MAAM,SAAS,cAAkX,CAAC;AAEzY,eAAO,MAAM,UAAU,cAAsX,CAAC;AAE9Y,eAAO,MAAM,YAAY,cAAmiC,CAAC;AAE7jC,eAAO,MAAM,QAAQ,cAAoY,CAAC;AAE1Z,eAAO,MAAM,SAAS,cAAqwB,CAAC;AAE5xB,eAAO,MAAM,OAAO,cAA0gC,CAAC;AAE/hC,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAMtE,CAAC"}

package/dist/ui/Select/Select.stories.sources.js

@@ -1,8 +1,33 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Select/Select.stories.tsx
-export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <Select label=\"Sélection\" placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} />\n    </Box>\n  );\n};";
-export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <Select label=\"Avec valeur\" options={OPTIONS} value=\"b\" />\n    <Select label=\"Erreur\" options={OPTIONS} value={null} error=\"Ce champ est requis\" />\n    <Select label=\"Succès\" options={OPTIONS} value=\"a\" success=\"Valide\" />\n    <Select label=\"Désactivé\" options={OPTIONS} value=\"a\" disabled />\n  </Box>\n);";
+export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Sélection\">\n        <Select placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControl label=\"Avec valeur\">\n      <Select options={OPTIONS} value=\"b\" />\n    </FormControl>\n    <FormControl label=\"Erreur\" error=\"Ce champ est requis\">\n      <Select options={OPTIONS} value={null} error=\"Ce champ est requis\" />\n    </FormControl>\n    <FormControl label=\"Succès\" success=\"Valide\">\n      <Select options={OPTIONS} value=\"a\" success=\"Valide\" />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <Select options={OPTIONS} value=\"a\" disabled />\n    </FormControl>\n  </Box>\n);";
+export const WithIcons = () => "export const WithIcons = () => {\n  const [value, setValue] = useState<string | null>('contact');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Type de ressource\">\n        <Select options={ICON_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Grouped = () => "export const Grouped = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Type de document\">\n        <Select placeholder=\"Tous les types\" options={GROUPED_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const LongList = () => "export const LongList = () => {\n  const [value, setValue] = useState<string | null>('option-42');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Liste défilante\">\n        <Select options={LONG_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Clearable = () => "export const Clearable = () => {\n  const [value, setValue] = useState<string | null>('b');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Effaçable\">\n        <Select placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} clearable />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Searchable = () => "export const Searchable = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Ville\">\n        <Select placeholder=\"Choisir...\" searchable options={CITY_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const RemoteSearch = () => "export const RemoteSearch = () => {\n  const [value, setValue] = useState<string | null>(null);\n  const [options, setOptions] = useState<SelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const search = (query: string) => {\n    if (query.length < 3) {\n      setOptions([]);\n      return;\n    }\n    setLoading(true);\n    setOptions([\n      { label: `${query} — résultat 1`, value: `${query}-1` },\n      { label: `${query} — résultat 2`, value: `${query}-2` },\n    ]);\n    setLoading(false);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Recherche distante\">\n        <Select\n          placeholder=\"Saisir au moins 3 caractères...\"\n          searchable\n          localFilter={false}\n          loading={loading}\n          emptyMessage=\"Saisir au moins 3 caractères\"\n          options={options}\n          value={value}\n          onChange={setValue}\n          onSearchChange={search}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Multiple = () => "export const Multiple = () => {\n  const [values, setValues] = useState<string[]>(['a']);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Sélection multiple\">\n        <Select placeholder=\"Choisir...\" multiple clearable options={OPTIONS} value={values} onChange={setValues} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Creatable = () => "export const Creatable = () => {\n  const [options, setOptions] = useState<SelectOption[]>(OPTIONS);\n  const [values, setValues] = useState<string[]>([]);\n\n  const createOption = (query: string) => {\n    setOptions(current => [...current, { label: query, value: query }]);\n    setValues(current => [...current, query]);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Étiquettes\">\n        <Select\n          placeholder=\"Rechercher ou créer...\"\n          multiple\n          searchable\n          creatable\n          options={options}\n          value={values}\n          onChange={setValues}\n          onCreateOption={createOption}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Address = () => "export const Address = () => {\n  const [options, setOptions] = useState<SelectOption[]>([]);\n  const [value, setValue] = useState<string | null>(null);\n\n  const search = (query: string) => {\n    setOptions(query.length >= 3 ? ADDRESS_SUGGESTIONS : []);\n  };\n\n  const createAddress = (query: string) => {\n    setOptions(current => [...current, { label: query, value: query }]);\n    setValue(query);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Adresse\">\n        <Select\n          placeholder=\"ex : 3 rue Robespierre\"\n          searchable\n          localFilter={false}\n          creatable\n          clearable\n          emptyMessage=\"Saisir au moins 3 caractères\"\n          createLabel={query => `Utiliser « ${query} »`}\n          options={options}\n          value={value}\n          onChange={setValue}\n          onSearchChange={search}\n          onCreateOption={createAddress}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
 export const storySources = {
     Default,
     States,
+    WithIcons,
+    Grouped,
+    LongList,
+    Clearable,
+    Searchable,
+    RemoteSearch,
+    Multiple,
+    Creatable,
+    Address,
+};
+export const storyDescriptions = {
+    Searchable: "`searchable` ajoute un champ de recherche au panneau et filtre les options sur leur libellé.",
+    RemoteSearch: "Recherche distante : `localFilter={false}` laisse le filtrage au serveur, et\n`onSearchChange` reçoit la saisie une fois stabilisée. Ici la « requête » est simulée.",
+    Multiple: "`multiple` fait de la valeur un tableau. Les valeurs retenues s’affichent en puces retirables.",
+    Creatable: "`creatable` propose d’ajouter la saisie à la liste. Le composant restant contrôlé,\nc’est l’appelant qui insère l’option puis met la valeur à jour.",
+    Address: "Champ adresse : recherche distante et saisie libre autorisée. Ce préréglage remplace\nl’ancien composant `AutocompleteAddress`.",
 };

package/dist/ui/Select/Select.styles.d.ts

@@ -1,38 +1,50 @@
 export declare const useStyles: () => {
-    pickerContainer: {};
-    picker: {
-        width: "100%";
-        borderWidth: number;
-        backgroundColor: "transparent";
-        appearance: "none";
-        fontSize: 16;
-        lineHeight: 24;
+    value: {
+        color: string;
+        flex: number;
+        fontSize: 14;
+        lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        flex: number;
-        outline: string;
-        padding: number;
+    };
+    valuePlaceholder: {
+        color: string;
+    };
+    valueDisabled: {
+        color: string;
+    };
+    /** Les puces repassent à la ligne : le champ s'aligne en haut et respire verticalement. */
+    inputInnerMultiple: {
+        alignItems: "flex-start";
         paddingTop: string | number;
         paddingBottom: string | number;
-        paddingLeft: string | number;
-        paddingRight: string | number;
-        color: string;
     };
+    tagList: {
+        flex: number;
+        display: "flex";
+        flexDirection: "row";
+        flexWrap: "wrap";
+        alignItems: "center";
+        gap: string | number;
+    };
+    pickerContainer: {};
     inputContainer: {
         width: "100%";
-        padding: number;
     };
     inputInner: {
         display: "flex";
         flexDirection: "row";
+        alignItems: "center";
         gap: string | number;
-        padding: number;
-        borderRadius: number;
+        paddingLeft: number;
+        paddingRight: number;
+        minHeight: number;
+        borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
-        borderColor: string | undefined;
-        backgroundColor: "#FFFFFF";
-        overflow: "hidden";
+        borderStyle: "solid";
+        borderColor: string;
+        backgroundColor: string;
         width: "100%";
     };
     inputError: {
@@ -44,17 +56,18 @@ export declare const useStyles: () => {
     inputDisabled: {
         borderColor: string;
     };
-    inputFocused: {
-        outlineStyle: "solid";
-        outlineWidth: number;
-        outlineColor: string;
-        outlineOffset: number;
+    /** Web uniquement : `cursor` n'appartient pas aux styles React Native. */
+    inputCursor: {
+        cursor: "pointer";
     };
-    indicator: {
-        position: "absolute";
-        right: string | number;
-        top: string | number;
+    inputCursorDisabled: {
+        cursor: "not-allowed";
     };
-    indicatorFocus: {};
+    /**
+     * Le selecteur actif ne recoit pas d'anneau : c'est sa propre bordure qui change de
+     * couleur, selon la definition commune du theme (ADR 0012). Web et natif la partagent,
+     * et react-select n'en pose aucune autre par-dessus.
+     */
+    inputFocused: import("@alveole/theme").FocusBorderStyle;
 };
 //# sourceMappingURL=Select.styles.d.ts.map

package/dist/ui/Select/Select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDnB,CAAC"}
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.styles.ts"],"names":[],"mappings":"AAwFA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;IAhBlB,2FAA2F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA7B3F,0EAA0E;;;;;;;IAO1E;;;;OAIG;;CAkCsF,CAAC"}