@alveole/components 1.9.0 → 2.0.0-alpha

package/dist/ui/Select/selectStylesConfig.js

@@ -0,0 +1,45 @@
+import { selectControlStyle } from './selectControlStyle';
+import { SELECT_ROW_HEIGHT } from './SelectList.styles';
+// Au moins la largeur du champ, jusqu'au libelle le plus long : un champ etroit ne coupe plus les options.
+export const largeurDuPanneau = { width: 'max-content', minWidth: '100%' };
+/**
+ * La feuille de style que react-select attend. C'est une donnee, pas du rendu : la garder dans
+ * le corps du composant en occupait le tiers et la recreait a chaque frappe.
+ *
+ * Elle neutralise systematiquement ce que la bibliotheque poserait par-dessus nos composants :
+ * le fond des puces appartient a l'etiquette, l'espacement des options a SelectItem.
+ */
+export const selectStylesConfig = (selectStyles, listStyles, caption) => ({
+    control: (base, state) => ({
+        ...base,
+        ...selectControlStyle(selectStyles, {
+            isDisabled: state.isDisabled,
+            isFocused: state.isFocused,
+            error: caption.error,
+            success: caption.success,
+        }),
+    }),
+    valueContainer: base => ({ ...base, padding: 0, gap: 4, flexWrap: 'wrap' }),
+    singleValue: base => ({ ...base, ...selectStyles.value, margin: 0 }),
+    // La puce porte son propre fond : react-select ne doit pas le doubler.
+    multiValue: () => ({ display: 'flex', margin: 0, padding: 0, backgroundColor: 'transparent' }),
+    placeholder: base => ({ ...base, ...selectStyles.value, ...selectStyles.valuePlaceholder, margin: 0 }),
+    input: base => ({ ...base, margin: 0, padding: 0 }),
+    indicatorSeparator: () => ({ display: 'none' }),
+    dropdownIndicator: base => ({ ...base, padding: 0 }),
+    clearIndicator: base => ({ ...base, padding: 0 }),
+    menu: base => ({
+        ...base,
+        ...listStyles.panel,
+        ...largeurDuPanneau,
+        marginTop: 4,
+        overflow: 'hidden',
+    }),
+    menuList: base => ({ ...base, padding: 0, maxHeight: SELECT_ROW_HEIGHT * 9 }),
+    // Le fond et l'espacement appartiennent à SelectItem : react-select ne doit pas les doubler.
+    option: () => ({ padding: 0, backgroundColor: 'transparent' }),
+    group: base => ({ ...base, paddingTop: 0, paddingBottom: 0 }),
+    groupHeading: () => ({ ...listStyles.groupHeader, marginBottom: 0 }),
+    noOptionsMessage: base => ({ ...base, ...listStyles.emptyMessage }),
+    loadingMessage: base => ({ ...base, ...listStyles.emptyMessage }),
+});

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

@@ -0,0 +1,32 @@
+import { type FieldBorderState } from '../FormControl/fieldBorderState';
+import type { useStyles } from './Select.styles';
+type SelectStyles = ReturnType<typeof useStyles>;
+/** Hors web, c'est le panneau ouvert qui tient lieu de focus. */
+export type SelectTriggerState = Omit<FieldBorderState, 'focus'> & {
+    open: boolean;
+    multiple?: boolean;
+};
+/**
+ * Le cadre du selecteur natif, pendant de `selectControlStyle` : une donnee plutot que du
+ * rendu, pour que la regle se lise et s'eprouve sans moteur de mise en page (ADR 0027).
+ * L'etat de bordure vient en dernier : rien ne doit le recouvrir.
+ */
+export declare const selectTriggerStyle: (styles: SelectStyles, { open, multiple, ...state }: SelectTriggerState) => {
+    borderColor: string;
+    alignItems: "flex-start" | "center";
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    display: "flex";
+    flexDirection: "row";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: string;
+    width: "100%";
+};
+export {};
+//# sourceMappingURL=selectTriggerStyle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectTriggerStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectTriggerStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEjD,iEAAiE;AACjE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzG;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,EAAE,8BAA8B,kBAAkB;;;;;;;;;;;;;;;;CAIvG,CAAC"}

package/dist/ui/Select/selectTriggerStyle.js

@@ -0,0 +1,11 @@
+import { fieldBorderState } from '../FormControl/fieldBorderState';
+/**
+ * Le cadre du selecteur natif, pendant de `selectControlStyle` : une donnee plutot que du
+ * rendu, pour que la regle se lise et s'eprouve sans moteur de mise en page (ADR 0027).
+ * L'etat de bordure vient en dernier : rien ne doit le recouvrir.
+ */
+export const selectTriggerStyle = (styles, { open, multiple, ...state }) => ({
+    ...styles.inputInner,
+    ...(multiple ? styles.inputInnerMultiple : {}),
+    ...fieldBorderState(styles, { ...state, focus: open }),
+});

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

@@ -0,0 +1,12 @@
+import type { SelectProps } from './Select.types';
+/**
+ * Ramène la valeur au même tableau dans les deux modes. Prend `props` entier et
+ * non `value` seule : l'union n'est discriminée que sur l'objet, `multiple` et
+ * `value` déstructurés ne sont plus liés pour TypeScript.
+ */
+export declare const toSelectedValues: (props: SelectProps) => string[];
+/** Renvoie la sélection dans la forme attendue par l'appelant, mono ou multi. */
+export declare const emitSelectChange: (props: SelectProps, next: string[]) => void;
+/** Bascule une valeur en multi, la remplace en mono. */
+export declare const toggleSelectedValue: (props: SelectProps, value: string) => string[];
+//# sourceMappingURL=selectValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectValue.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,WAAW,KAAG,MAAM,EACa,CAAC;AAE1E,iFAAiF;AACjF,eAAO,MAAM,gBAAgB,GAAI,OAAO,WAAW,EAAE,MAAM,MAAM,EAAE,KAAG,IAGrE,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,mBAAmB,GAAI,OAAO,WAAW,EAAE,OAAO,MAAM,KAAG,MAAM,EAI7E,CAAC"}

package/dist/ui/Select/selectValue.js

@@ -0,0 +1,20 @@
+/**
+ * Ramène la valeur au même tableau dans les deux modes. Prend `props` entier et
+ * non `value` seule : l'union n'est discriminée que sur l'objet, `multiple` et
+ * `value` déstructurés ne sont plus liés pour TypeScript.
+ */
+export const toSelectedValues = (props) => props.multiple ? props.value : props.value != null ? [props.value] : [];
+/** Renvoie la sélection dans la forme attendue par l'appelant, mono ou multi. */
+export const emitSelectChange = (props, next) => {
+    if (props.multiple)
+        props.onChange?.(next);
+    else
+        props.onChange?.(next[0] ?? null);
+};
+/** Bascule une valeur en multi, la remplace en mono. */
+export const toggleSelectedValue = (props, value) => {
+    if (!props.multiple)
+        return [value];
+    const current = props.value;
+    return current.includes(value) ? current.filter(selected => selected !== value) : [...current, value];
+};

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

@@ -0,0 +1,9 @@
+/** Délai de stabilisation de la saisie de recherche, commun aux deux plateformes. */
+export declare const SEARCH_DEBOUNCE_MS = 300;
+/**
+ * Diffère l'appel tant que la saisie change. Le rappel n'est jamais émis au
+ * montage, contrairement à un `useEffect` sur la valeur : seule une invocation
+ * explicite arme le minuteur.
+ */
+export declare const useDebouncedCallback: <TArgs extends unknown[]>(callback: (...args: TArgs) => void, delay?: number) => (...args: TArgs) => void;
+//# sourceMappingURL=useDebouncedCallback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCallback.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/useDebouncedCallback.ts"],"names":[],"mappings":"AAEA,qFAAqF;AACrF,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,SAAS,OAAO,EAAE,EAC1D,UAAU,CAAC,GAAG,IAAI,EAAE,KAAK,KAAK,IAAI,EAClC,cAA0B,eAcd,KAAK,SAMlB,CAAC"}

package/dist/ui/Select/useDebouncedCallback.js

@@ -0,0 +1,23 @@
+import React from 'react';
+/** Délai de stabilisation de la saisie de recherche, commun aux deux plateformes. */
+export const SEARCH_DEBOUNCE_MS = 300;
+/**
+ * Diffère l'appel tant que la saisie change. Le rappel n'est jamais émis au
+ * montage, contrairement à un `useEffect` sur la valeur : seule une invocation
+ * explicite arme le minuteur.
+ */
+export const useDebouncedCallback = (callback, delay = SEARCH_DEBOUNCE_MS) => {
+    const timer = React.useRef(null);
+    // Le rappel est lu au déclenchement, pas capturé à l'armement : la fonction
+    // rendue reste stable même quand l'appelant en recrée une à chaque rendu.
+    const latest = React.useRef(callback);
+    React.useEffect(() => {
+        latest.current = callback;
+    });
+    React.useEffect(() => () => void (timer.current && clearTimeout(timer.current)), []);
+    return React.useCallback((...args) => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => latest.current(...args), delay);
+    }, [delay]);
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { LayoutChangeEvent, ScrollView } from 'react-native';
+/**
+ * Amene l'option deja selectionnee sous les yeux a l'ouverture du panneau, deux lignes plus bas
+ * que le haut de la liste pour qu'on voie ce qui la precede.
+ *
+ * Le defilement est declenche par la mise en page de cette option, et par rien d'autre : c'est
+ * le seul moment ou sa position est connue, l'animation d'ouverture du panneau la laissant
+ * indeterminee a la premiere frame.
+ */
+/**
+ * Ou amener la liste pour que l'option posee en `y` soit visible : deux lignes plus haut, de
+ * sorte qu'on voie ce qui la precede, et jamais au-dessus du haut de la liste.
+ */
+export declare const positionDeDefilement: (y: number) => number;
+export declare const useDefilementVersSelection: (open: boolean) => {
+    scrollRef: React.RefObject<ScrollView | null>;
+    onSelectedLayout: (event: LayoutChangeEvent) => void;
+};
+//# sourceMappingURL=useDefilementVersSelection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDefilementVersSelection.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/useDefilementVersSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG7D;;;;;;;GAOG;AACH;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,GAAG,MAAM,WAA2C,CAAC;AAE1F,eAAO,MAAM,0BAA0B,GAAI,MAAM,OAAO;;8BAWrB,iBAAiB;CASnD,CAAC"}

package/dist/ui/Select/useDefilementVersSelection.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { SELECT_ROW_HEIGHT } from './SelectList.styles';
+/**
+ * Amene l'option deja selectionnee sous les yeux a l'ouverture du panneau, deux lignes plus bas
+ * que le haut de la liste pour qu'on voie ce qui la precede.
+ *
+ * Le defilement est declenche par la mise en page de cette option, et par rien d'autre : c'est
+ * le seul moment ou sa position est connue, l'animation d'ouverture du panneau la laissant
+ * indeterminee a la premiere frame.
+ */
+/**
+ * Ou amener la liste pour que l'option posee en `y` soit visible : deux lignes plus haut, de
+ * sorte qu'on voie ce qui la precede, et jamais au-dessus du haut de la liste.
+ */
+export const positionDeDefilement = (y) => Math.max(0, y - 2 * SELECT_ROW_HEIGHT);
+export const useDefilementVersSelection = (open) => {
+    const scrollRef = React.useRef(null);
+    const dejaDefile = React.useRef(false);
+    // Le contenu du sheet est demonte a la fermeture : les `onLayout` se rejouent a chaque
+    // ouverture, il faut donc rearmer le defilement. Un changement de recherche ne le rearme
+    // pas, sinon la liste sauterait a chaque frappe.
+    React.useEffect(() => {
+        if (!open)
+            dejaDefile.current = false;
+    }, [open]);
+    const onSelectedLayout = (event) => {
+        if (dejaDefile.current)
+            return;
+        dejaDefile.current = true;
+        const y = positionDeDefilement(event.nativeEvent.layout.y);
+        requestAnimationFrame(() => scrollRef.current?.scrollTo({ y, animated: false }));
+    };
+    return { scrollRef, onSelectedLayout };
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { SelectProps, SelectRef } from './Select.types';
+/**
+ * L'etat du panneau natif : ouverture, recherche en cours, et la poignee imperative que le
+ * formulaire appelant utilise pour donner ou retirer le focus. Rien de tout cela ne se voit
+ * dans le rendu, qui ne lit que `open` et `query`.
+ */
+export declare const usePanneauSelect: ({ disabled, onFocus, onBlur, onSearchChange, }: Pick<SelectProps, "disabled" | "onFocus" | "onBlur" | "onSearchChange">, ref: React.ForwardedRef<SelectRef>) => {
+    open: boolean;
+    query: string;
+    ouvrir: () => void;
+    setOpen: (suivant: boolean) => void;
+    onQueryChange: (text: string) => void;
+};
+//# sourceMappingURL=usePanneauSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePanneauSelect.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/usePanneauSelect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG7D;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAC3B,gDAKG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,gBAAgB,CAAC,EAC1E,KAAK,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC;;;;uBA8BK,OAAO;0BACtB,MAAM;CAK/B,CAAC"}

package/dist/ui/Select/usePanneauSelect.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Keyboard } from 'react-native';
+import { useDebouncedCallback } from './useDebouncedCallback';
+/**
+ * L'etat du panneau natif : ouverture, recherche en cours, et la poignee imperative que le
+ * formulaire appelant utilise pour donner ou retirer le focus. Rien de tout cela ne se voit
+ * dans le rendu, qui ne lit que `open` et `query`.
+ */
+export const usePanneauSelect = ({ disabled, onFocus, onBlur, onSearchChange, }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState('');
+    const debouncedSearchChange = useDebouncedCallback((text) => onSearchChange?.(text));
+    const ouvrir = React.useCallback(() => {
+        if (disabled)
+            return;
+        // Le clavier d'un champ precedent recouvrirait le panneau qui monte.
+        if (Keyboard.isVisible())
+            Keyboard.dismiss();
+        setQuery('');
+        setOpen(true);
+        onFocus?.();
+    }, [disabled, onFocus]);
+    const fermer = React.useCallback(() => {
+        setOpen(false);
+        onBlur?.();
+    }, [onBlur]);
+    React.useImperativeHandle(ref, () => ({ focus: ouvrir, blur: fermer, open: ouvrir, close: fermer }), [
+        fermer,
+        ouvrir,
+    ]);
+    return {
+        open,
+        query,
+        ouvrir,
+        setOpen: React.useCallback((suivant) => (suivant ? ouvrir() : fermer()), [fermer, ouvrir]),
+        onQueryChange: (text) => {
+            setQuery(text);
+            debouncedSearchChange(text);
+        },
+    };
+};

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

@@ -0,0 +1,29 @@
+import type { SelectOption } from './Select.types';
+/** Une option prête à être rendue, précédée de son en-tête de groupe si elle ouvre une suite. */
+export type SelectRow = {
+    option: SelectOption;
+    groupHeader?: string;
+};
+export type UseSelectOptionsParams = {
+    options: SelectOption[];
+    /** Saisie de recherche courante. Chaîne vide quand le champ est absent. */
+    query: string;
+    /** Filtre les options sur le libellé. Par défaut : true. */
+    localFilter?: boolean;
+    creatable?: boolean;
+};
+export type UseSelectOptionsResult = {
+    rows: SelectRow[];
+    /** Vrai quand la saisie ne correspond à aucun libellé existant et mérite une entrée de création. */
+    canCreate: boolean;
+};
+/**
+ * Logique de liste partagée par les deux plateformes : filtrage, groupement et
+ * entrée de création. Sans plateforme ni rendu, elle s'éprouve seule.
+ *
+ * Le groupement ne rassemble que les options *consécutives* de même `group` :
+ * deux blocs non contigus portant le même nom produisent deux en-têtes. C'est
+ * le comportement historique, et il laisse l'ordre des options à l'appelant.
+ */
+export declare const useSelectOptions: (params: UseSelectOptionsParams) => UseSelectOptionsResult;
+//# sourceMappingURL=useSelectOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectOptions.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/useSelectOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,iGAAiG;AACjG,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,oGAAoG;IACpG,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAQ,sBAAsB,KAAG,sBA6BjE,CAAC"}

package/dist/ui/Select/useSelectOptions.js

@@ -0,0 +1,32 @@
+import React from 'react';
+/**
+ * Logique de liste partagée par les deux plateformes : filtrage, groupement et
+ * entrée de création. Sans plateforme ni rendu, elle s'éprouve seule.
+ *
+ * Le groupement ne rassemble que les options *consécutives* de même `group` :
+ * deux blocs non contigus portant le même nom produisent deux en-têtes. C'est
+ * le comportement historique, et il laisse l'ordre des options à l'appelant.
+ */
+export const useSelectOptions = (params) => {
+    const { options, query, localFilter = true, creatable = false } = params;
+    const trimmedQuery = query.trim();
+    const filtered = React.useMemo(() => {
+        if (!localFilter || trimmedQuery.length === 0)
+            return options;
+        const needle = trimmedQuery.toLowerCase();
+        return options.filter(option => option.label.toLowerCase().includes(needle));
+    }, [options, localFilter, trimmedQuery]);
+    const rows = React.useMemo(() => filtered.map((option, index) => ({
+        option,
+        groupHeader: option.group && option.group !== filtered[index - 1]?.group ? option.group : undefined,
+    })), [filtered]);
+    // La création se compare à *toutes* les options, pas aux seules filtrées : une
+    // recherche distante peut ne rien ramener alors que le libellé existe déjà.
+    const canCreate = React.useMemo(() => {
+        if (!creatable || trimmedQuery.length === 0)
+            return false;
+        const needle = trimmedQuery.toLowerCase();
+        return !options.some(option => option.label.toLowerCase() === needle);
+    }, [creatable, options, trimmedQuery]);
+    return { rows, canCreate };
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { GroupBase, SelectInstance } from 'react-select';
+import type { useStyles as useSelectStyles } from './Select.styles';
+import type { SelectOption, SelectProps, SelectRef } from './Select.types';
+type Group = GroupBase<SelectOption>;
+/**
+ * Tout ce que le selecteur web assemble avant de rendre quoi que ce soit : la feuille de style
+ * de react-select, ses composants de remplacement, la poignee imperative et la traduction de
+ * nos options. Le composant n'a plus qu'a choisir entre le selecteur ordinaire et le creable.
+ */
+export declare const useSelectWebField: (props: SelectProps, ref: React.ForwardedRef<SelectRef>, selectStyles: ReturnType<typeof useSelectStyles>) => {
+    fieldProps: import("react-select").Props<SelectOption, boolean, GroupBase<SelectOption>>;
+    instanceRef: React.RefObject<SelectInstance<SelectOption, boolean, Group> | null>;
+    createLabel: (query: string) => string;
+};
+export {};
+//# sourceMappingURL=useSelectWebField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectWebField.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/useSelectWebField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAU3E,KAAK,KAAK,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAgBrC;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAC5B,OAAO,WAAW,EAClB,KAAK,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAClC,cAAc,UAAU,CAAC,OAAO,eAAe,CAAC;;;;CAsDjD,CAAC"}

package/dist/ui/Select/useSelectWebField.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useSelectComponents } from './selectComponents';
+import { selectFieldProps } from './selectFieldProps';
+import { useStyles as useListStyles } from './SelectList.styles';
+import { textesDuPanneau } from './selectReglages';
+import { selectStylesConfig } from './selectStylesConfig';
+import { emitSelectChange, toSelectedValues } from './selectValue';
+import { useDebouncedCallback } from './useDebouncedCallback';
+import { useSelectOptions } from './useSelectOptions';
+/**
+ * Traduit les lignes de `useSelectOptions` dans la forme attendue par react-select.
+ * La regle de regroupement vit dans le hook : elle est commune aux deux plateformes.
+ */
+const toGroupedOptions = (rows) => {
+    if (!rows.some(row => row.option.group))
+        return rows.map(row => row.option);
+    return rows.reduce((groups, { option, groupHeader }) => {
+        if (groupHeader != null || groups.length === 0)
+            groups.push({ label: option.group ?? '', options: [] });
+        groups[groups.length - 1].options.push(option);
+        return groups;
+    }, []);
+};
+/**
+ * Tout ce que le selecteur web assemble avant de rendre quoi que ce soit : la feuille de style
+ * de react-select, ses composants de remplacement, la poignee imperative et la traduction de
+ * nos options. Le composant n'a plus qu'a choisir entre le selecteur ordinaire et le creable.
+ */
+export const useSelectWebField = (props, ref, selectStyles) => {
+    const { error, success, disabled, options, onSearchChange } = props;
+    const multiple = props.multiple === true;
+    const values = toSelectedValues(props);
+    const listStyles = useListStyles();
+    const instanceRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
+        focus: () => instanceRef.current?.focus(),
+        blur: () => instanceRef.current?.blur(),
+        open: () => instanceRef.current?.openMenu('first'),
+        close: () => instanceRef.current?.blur(),
+    }));
+    const onSearch = useDebouncedCallback((query) => onSearchChange?.(query));
+    // Le filtrage reste a react-select : le hook ne sert ici qu'au regroupement.
+    const { rows } = useSelectOptions({ options, query: '' });
+    const groupedOptions = React.useMemo(() => toGroupedOptions(rows), [rows]);
+    const components = useSelectComponents({
+        multiple,
+        disabled,
+        onRemoveValue: disabled
+            ? undefined
+            : value => emitSelectChange(props, values.filter(retenue => retenue !== value)),
+    });
+    const { loadingMessage, emptyMessage, createLabel } = textesDuPanneau(props);
+    const fieldProps = selectFieldProps({
+        props,
+        multiple,
+        // L'ordre suit celui de `value`, pas celui d'`options` : c'est la selection
+        // que l'appelant a construite.
+        selectedOptions: values
+            .map(value => options.find(option => option.value === value))
+            .filter(option => option != null),
+        groupedOptions,
+        styles: selectStylesConfig(selectStyles, listStyles, { error, success }),
+        components,
+        onSearch,
+        loadingMessage,
+        emptyMessage,
+    });
+    return { fieldProps, instanceRef, createLabel };
+};

package/dist/ui/Sidebar/Sidebar.d.ts

@@ -4,7 +4,8 @@ export declare const SidebarWidth = 286;
 export declare const SidebarHeight = 58;
 export type SidebarProps = React.PropsWithChildren & {
     controller?: SidebarController;
-    logo: React.ReactNode;
+    /** Logo affiché en haut de la barre. Sans lui, la version bureau n'a pas d'en-tête. */
+    logo?: React.ReactNode;
     footer?: React.ReactNode;
 };
 export declare const Sidebar: (props: SidebarProps) => React.JSX.Element;

package/dist/ui/Sidebar/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACnD,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAuCF,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,sBAI1C,CAAC"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACnD,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,uFAAuF;IACvF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAuCF,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,sBAI1C,CAAC"}

package/dist/ui/Sidebar/Sidebar.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { ScrollView } from 'react-native';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
+import { versStyleNatif } from '../../core/styleNatif/versStyleNatif';
 import { useStyles } from './Sidebar.styles';
 import { SidebarFooter } from './SidebarFooter';
 import { SidebarHeader } from './SidebarHeader';
@@ -11,7 +12,7 @@ export const SidebarHeight = 58;
 const SidebarDesktop = (props) => {
     const { children, controller, footer, logo } = props;
     const styles = useStyles();
-    return (_jsx(Box, { tag: "sidebar", width: SidebarWidth, style: styles.sidebar, children: _jsxs(Box, { style: styles.sidebarContent, children: [_jsx(SidebarHeader, { controller: controller, logo: logo }), _jsx(ScrollView, { style: styles.scrollView, children: children }), footer && _jsx(SidebarFooter, { children: footer })] }) }));
+    return (_jsx(Box, { tag: "nav", width: SidebarWidth, style: styles.sidebar, children: _jsxs(Box, { style: styles.sidebarContent, children: [_jsx(SidebarHeader, { controller: controller, logo: logo }), _jsx(ScrollView, { style: versStyleNatif(styles.scrollView), children: children }), footer && _jsx(SidebarFooter, { children: footer })] }) }));
 };
 const SidebarMobile = (props) => {
     const { children, controller, footer, logo } = props;
@@ -21,7 +22,7 @@ const SidebarMobile = (props) => {
             return '100%';
         return 0;
     }, [controller?.open]);
-    return (_jsx(Box, { tag: "sidebar", width: navWidth, style: styles.sidebar, children: _jsxs(Box, { style: styles.sidebarContent, pb: '3V', pr: '3V', pl: '3V', children: [_jsx(SidebarHeader, { controller: controller, logo: logo }), _jsx(ScrollView, { style: styles.scrollView, children: children }), footer && controller?.open && _jsx(SidebarFooter, { children: footer })] }) }));
+    return (_jsx(Box, { tag: "nav", width: navWidth, style: styles.sidebar, children: _jsxs(Box, { style: styles.sidebarContent, pb: '3V', pr: '3V', pl: '3V', children: [_jsx(SidebarHeader, { controller: controller, logo: logo }), _jsx(ScrollView, { style: versStyleNatif(styles.scrollView), children: children }), footer && controller?.open && _jsx(SidebarFooter, { children: footer })] }) }));
 };
 export const Sidebar = (props) => {
     const { isVariant } = useTheme();