@alveole/components 1.10.0 → 2.0.0-alpha

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

@@ -0,0 +1,34 @@
+import type { SelectOption } from './Select.types';
+/** Les reglages du panneau natif, partages par le sheet et la liste qu'il contient. */
+export type SelectPanelProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    title: string;
+    options: SelectOption[];
+    /** Toujours un tableau : `Select` normalise le mono en zéro ou une valeur. */
+    values: string[];
+    multiple?: boolean;
+    onSelect: (value: string) => void;
+    onClear: () => void;
+    clearable?: boolean;
+    clearLabel?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    query: string;
+    onQueryChange: (query: string) => void;
+    localFilter?: boolean;
+    creatable?: boolean;
+    onCreate?: (query: string) => void;
+    createLabel?: (query: string) => string;
+    loading?: boolean;
+    loadingMessage?: string;
+    emptyMessage?: string;
+};
+/**
+ * Le contenu deroulant du panneau : l'entree de creation, celle d'effacement, les options et
+ * le message de liste vide. Il decide aussi de la fermeture, parce qu'elle depend du choix
+ * qu'on vient de faire : en multi le panneau reste ouvert, la selection se construit par
+ * touches successives et se valide par le bouton de l'en-tete.
+ */
+export declare const SelectOptionsList: (props: SelectPanelProps) => import("react").JSX.Element;
+//# sourceMappingURL=SelectOptionsList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOptionsList.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectOptionsList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAWnD,uFAAuF;AACvF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,8EAA8E;IAC9E,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,gBAAgB,gCAgExD,CAAC"}

package/dist/ui/Select/SelectOptionsList.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, useWindowDimensions } from 'react-native';
+import { Sheet as TamaguiSheet } from 'tamagui';
+import { Typography } from '../../core/Typography';
+import { SelectItem } from './SelectItem';
+import { useStyles } from './SelectList.styles';
+import { SelectOptionRow } from './SelectOptionRow';
+import { textesDuPanneau } from './selectReglages';
+import { useDefilementVersSelection } from './useDefilementVersSelection';
+import { useSelectOptions } from './useSelectOptions';
+/** Part de la hauteur d'ecran au-dela de laquelle la liste defile. */
+const MAX_HEIGHT_RATIO = 0.7;
+/**
+ * Le contenu deroulant du panneau : l'entree de creation, celle d'effacement, les options et
+ * le message de liste vide. Il decide aussi de la fermeture, parce qu'elle depend du choix
+ * qu'on vient de faire : en multi le panneau reste ouvert, la selection se construit par
+ * touches successives et se valide par le bouton de l'en-tete.
+ */
+export const SelectOptionsList = (props) => {
+    const { values, multiple, setOpen, onSelect, onClear, onCreate, onQueryChange, clearable, query, loading } = props;
+    const styles = useStyles();
+    const { height } = useWindowDimensions();
+    const { rows, canCreate } = useSelectOptions(props);
+    const { scrollRef, onSelectedLayout } = useDefilementVersSelection(props.open);
+    const { clearLabel, loadingMessage, emptyMessage, createLabel } = textesDuPanneau(props);
+    const refermerSiMono = () => {
+        if (!multiple)
+            setOpen(false);
+    };
+    const handleClear = () => {
+        onClear();
+        refermerSiMono();
+    };
+    const handleSelect = (value) => {
+        onSelect(value);
+        refermerSiMono();
+    };
+    const handleCreate = () => {
+        onCreate?.(query.trim());
+        onQueryChange('');
+        refermerSiMono();
+    };
+    return (_jsxs(TamaguiSheet.ScrollView, { ref: scrollRef, keyboardShouldPersistTaps: "handled", style: { maxHeight: height * MAX_HEIGHT_RATIO }, children: [canCreate && (_jsx(Pressable, { testID: "select-create", accessibilityRole: "button", onPress: handleCreate, children: _jsx(SelectItem, { label: createLabel(query.trim()), leading: "Plus" }) })), clearable && values.length > 0 && (_jsx(Pressable, { testID: "select-clear", accessibilityRole: "button", onPress: handleClear, children: _jsx(SelectItem, { label: clearLabel, leading: "X" }) })), rows.map(({ option, groupHeader }) => (_jsx(SelectOptionRow, { option: option, groupHeader: groupHeader, selected: values.includes(option.value), multiple: multiple, onPress: handleSelect, onSelectedLayout: onSelectedLayout }, option.value))), rows.length === 0 && !canCreate && (_jsx(Typography, { style: styles.emptyMessage, children: loading ? loadingMessage : emptyMessage }))] }));
+};

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

@@ -0,0 +1,22 @@
+import type { SelectOption } from './Select.types';
+export type SelectTriggerProps = {
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    success?: string;
+    open: boolean;
+    multiple?: boolean;
+    /** Dans l'ordre de `value`, pas dans celui d'`options` : c'est la selection de l'appelant. */
+    selectedOptions: SelectOption[];
+    onPress: () => void;
+    /** Absent quand le champ est desactive : les puces perdent alors leur croix. */
+    onRemoveValue?: (value: string) => void;
+};
+/**
+ * Le champ lui-meme : ce qu'on voit et ce qu'on presse quand le panneau est ferme. Il portait
+ * a lui seul les deux tiers du composant `Select` et toutes ses branches d'affichage, alors
+ * qu'il n'a besoin de connaitre ni la recherche, ni la creation, ni le panneau.
+ */
+export declare const SelectTrigger: (props: SelectTriggerProps) => import("react").JSX.Element;
+//# sourceMappingURL=SelectTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectTrigger.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAMnD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8FAA8F;IAC9F,eAAe,EAAE,YAAY,EAAE,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gFAAgF;IAChF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AA6DF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCA2CtD,CAAC"}

package/dist/ui/Select/SelectTrigger.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import { Pressable } from 'react-native';
+import { Box } from '../../core/Box';
+import { versStyleNatif } from '../../core/styleNatif/versStyleNatif';
+import { Typography } from '../../core/Typography';
+import { LeadingSlot } from '../Leading';
+import { LucideIcon } from '../LucideIcon';
+import { Tag } from '../Tag';
+import { useStyles } from './Select.styles';
+import { selectTriggerStyle } from './selectTriggerStyle';
+/** Nombre de puces affichées avant de résumer le reste par « +N ». */
+const MAX_VISIBLE_TAGS = 3;
+const Puces = ({ options, onRemoveValue }) => {
+    const styles = useStyles();
+    const visibles = options.slice(0, MAX_VISIBLE_TAGS);
+    const restantes = options.length - visibles.length;
+    return (_jsxs(Box, { style: styles.tagList, children: [visibles.map(option => (_jsx(Tag, { size: "md", selected: true, leading: option.leading, closable: !!onRemoveValue, onClose: onRemoveValue && (() => onRemoveValue(option.value)), children: option.label }, option.value))), restantes > 0 && _jsx(Tag, { size: "md", children: `+${restantes}` })] }));
+};
+const ValeurSimple = ({ option, placeholder, disabled, }) => {
+    const styles = useStyles();
+    const { color } = useTheme();
+    return (_jsxs(_Fragment, { children: [_jsx(LeadingSlot, { contenu: option?.leading, apparence: {
+                    size: 'sm',
+                    color: disabled ? color.light.text['disabled-grey'] : color.light.text['default-grey'],
+                } }), _jsx(Typography, { style: {
+                    ...styles.value,
+                    ...(option ? {} : styles.valuePlaceholder),
+                    ...(disabled ? styles.valueDisabled : {}),
+                }, children: option?.label ?? placeholder ?? '' })] }));
+};
+/**
+ * Le champ lui-meme : ce qu'on voit et ce qu'on presse quand le panneau est ferme. Il portait
+ * a lui seul les deux tiers du composant `Select` et toutes ses branches d'affichage, alors
+ * qu'il n'a besoin de connaitre ni la recherche, ni la creation, ni le panneau.
+ */
+export const SelectTrigger = (props) => {
+    const { label, placeholder, disabled, error, success, open, multiple, selectedOptions, onPress, onRemoveValue } = props;
+    const styles = useStyles();
+    const { color } = useTheme();
+    return (_jsx(Box, { tag: "form-control-select-input", style: styles.inputContainer, children: _jsxs(Pressable, { testID: "select-trigger", accessibilityRole: "button", 
+            // Le lecteur d'écran annonce la sélection entière, que les puces résument.
+            accessibilityLabel: selectedOptions.length > 0 ? `${label} : ${selectedOptions.map(o => o.label).join(', ')}` : label, accessibilityState: { disabled: Boolean(disabled), expanded: open }, disabled: disabled, onPress: onPress, 
+            // `makeStyles` produit des CSSProperties (spacing renvoie une CSS var sur web) :
+            // le cast est le même que celui des autres champs, cf. FormControl/TextInput.
+            style: versStyleNatif(selectTriggerStyle(styles, { disabled, open, multiple, error, success })), children: [multiple && selectedOptions.length > 0 ? (_jsx(Puces, { options: selectedOptions, onRemoveValue: onRemoveValue })) : (_jsx(ValeurSimple, { option: multiple ? undefined : selectedOptions[0], placeholder: placeholder, disabled: disabled })), _jsx(LucideIcon, { size: "sm", name: "ChevronDown", color: disabled ? color.light.text['disabled-grey'] : color.light.text['default-grey'] })] }) }));
+};

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

@@ -1,7 +1,5 @@
-export { NativePicker } from './NativePicker';
-export type { NativePickerProps } from './NativePicker';
 export { Select } from './Select';
-export type { SelectOption, SelectProps } from './Select';
-export { SelectInput } from './SelectInput';
-export type { SelectInputProps } from './SelectInput';
+export type { SelectMultiValueProps, SelectOption, SelectProps, SelectRef, SelectSingleValueProps, } from './Select.types';
+export { SelectItem } from './SelectItem';
+export type { SelectItemProps } from './SelectItem';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,sBAAsB,GACvB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/ui/Select/index.js

@@ -1,3 +1,2 @@
-export { NativePicker } from './NativePicker';
 export { Select } from './Select';
-export { SelectInput } from './SelectInput';
+export { SelectItem } from './SelectItem';

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

@@ -0,0 +1,24 @@
+import { ClearIndicatorProps, DropdownIndicatorProps, GroupBase, MultiValueProps, OptionProps, SingleValueProps } from 'react-select';
+import type { SelectOption } from './Select.types';
+type Group = GroupBase<SelectOption>;
+export type SelectComponentsParams = {
+    multiple: boolean;
+    disabled?: boolean;
+    /** Absent quand le champ est désactivé : les puces perdent alors leur croix. */
+    onRemoveValue?: (value: string) => void;
+};
+/**
+ * Les pièces de react-select que le design system remplace. Elles vivent hors du
+ * composant pour le garder sous le cliquet de complexité, et parce qu'elles ne
+ * dépendent que de trois paramètres.
+ */
+export declare const useSelectComponents: ({ multiple, disabled, onRemoveValue }: SelectComponentsParams) => {
+    Option: (optionProps: OptionProps<SelectOption, boolean, Group>) => import("react").JSX.Element;
+    SingleValue: (singleValueProps: SingleValueProps<SelectOption, boolean, Group>) => import("react").JSX.Element;
+    MultiValue: (multiValueProps: MultiValueProps<SelectOption, boolean, Group>) => import("react").JSX.Element;
+    MultiValueRemove: () => null;
+    ClearIndicator: (indicatorProps: ClearIndicatorProps<SelectOption, boolean, Group>) => import("react").JSX.Element;
+    DropdownIndicator: (indicatorProps: DropdownIndicatorProps<SelectOption, boolean, Group>) => import("react").JSX.Element;
+};
+export {};
+//# sourceMappingURL=selectComponents.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectComponents.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectComponents.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,mBAAmB,EAEnB,sBAAsB,EACtB,SAAS,EACT,eAAe,EACf,WAAW,EACX,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,KAAK,KAAK,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAErC,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAaF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,uCAAuC,sBAAsB;0BAGlE,WAAW,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC;oCAa/B,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC;kCAYhD,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC;;qCAiB1C,mBAAmB,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC;wCAM9C,sBAAsB,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC;CAYhG,CAAC"}

package/dist/ui/Select/selectComponents.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import { components, } from 'react-select';
+import { LeadingSlot } from '../Leading';
+import { LucideIcon } from '../LucideIcon';
+import { Tag } from '../Tag';
+import { SelectItem } from './SelectItem';
+/**
+ * react-select pose en dur `role="option"` et `aria-selected` dans les `innerProps` qu'il
+ * remet a l'option ; il les etale en dernier, on les reecrit donc ici. En multi-selection,
+ * chaque ligne s'annonce comme la case a cocher qu'elle affiche.
+ */
+const optionInnerProps = ({ innerProps, isSelected }, multiple) => multiple ? { ...innerProps, role: 'checkbox', 'aria-checked': isSelected, 'aria-selected': undefined } : innerProps;
+/**
+ * Les pièces de react-select que le design system remplace. Elles vivent hors du
+ * composant pour le garder sous le cliquet de complexité, et parce qu'elles ne
+ * dépendent que de trois paramètres.
+ */
+export const useSelectComponents = ({ multiple, disabled, onRemoveValue }) => {
+    const { color } = useTheme();
+    const Option = (optionProps) => (_jsx(components.Option, { ...optionProps, innerProps: optionInnerProps(optionProps, multiple), children: _jsx(SelectItem, { label: optionProps.data.label, leading: optionProps.data.leading, selected: optionProps.isSelected, highlighted: optionProps.isFocused, disabled: optionProps.isDisabled, multiple: multiple }) }));
+    const SingleValue = (singleValueProps) => (_jsx(components.SingleValue, { ...singleValueProps, children: _jsxs("span", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8 }, children: [_jsx(LeadingSlot, { contenu: singleValueProps.data.leading, apparence: { size: 'sm', color: color.light.text['default-grey'] } }), singleValueProps.data.label] }) }));
+    const MultiValue = (multiValueProps) => (_jsx(components.MultiValue, { ...multiValueProps, children: _jsx(Tag, { size: "md", selected: true, leading: multiValueProps.data.leading, closable: !!onRemoveValue, onClose: onRemoveValue && (() => onRemoveValue(multiValueProps.data.value)), children: multiValueProps.data.label }) }));
+    // La croix reste `aria-hidden`, comme react-select la pose : c'est un raccourci
+    // à la souris, l'effacement au clavier passe par Retour arrière. La nommer
+    // exigerait un rôle, donc un vrai bouton — ce que ce conteneur n'est pas.
+    const ClearIndicator = (indicatorProps) => (_jsx(components.ClearIndicator, { ...indicatorProps, children: _jsx(LucideIcon, { name: "X", size: "sm", color: color.light.text['default-grey'] }) }));
+    const DropdownIndicator = (indicatorProps) => (_jsx(components.DropdownIndicator, { ...indicatorProps, children: _jsx(LucideIcon, { name: "ChevronDown", size: "sm", color: disabled ? color.light.text['disabled-grey'] : color.light.text['default-grey'] }) }));
+    // `MultiValueRemove` est neutralisé : la croix appartient à l'étiquette.
+    return { Option, SingleValue, MultiValue, MultiValueRemove: () => null, ClearIndicator, DropdownIndicator };
+};

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

@@ -0,0 +1,60 @@
+import type { useStyles } from './Select.styles';
+type SelectStyles = ReturnType<typeof useStyles>;
+export type SelectControlState = {
+    isDisabled: boolean;
+    isFocused: boolean;
+    error?: string;
+    success?: string;
+};
+/**
+ * Le cadre que react-select rend autour du selecteur. Il est sorti du composant parce que
+ * c'est une donnee, pas du rendu : la bibliotheque compose ses styles elle-meme, et jsdom
+ * n'evalue pas les pseudo-classes qu'elle emet. Ici, la regle se lit et s'eprouve.
+ *
+ * La bordure suit la priorite commune aux champs (ADR 0012), et rien ne s'ajoute autour du
+ * cadre : react-select pose sinon sa propre ombre et son propre contour au focus, qui
+ * doubleraient le trait.
+ */
+export declare const selectControlStyle: (styles: SelectStyles, state: SelectControlState) => {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: string;
+    cursor: "pointer";
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: string;
+    width: "100%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: string;
+    cursor: "not-allowed";
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: string;
+    width: "100%";
+};
+export {};
+//# sourceMappingURL=selectControlStyle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectControlStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectControlStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,EAAE,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBjF,CAAC"}

package/dist/ui/Select/selectControlStyle.js

@@ -0,0 +1,28 @@
+import { fieldBorderState } from '../FormControl/fieldBorderState';
+/**
+ * Le cadre que react-select rend autour du selecteur. Il est sorti du composant parce que
+ * c'est une donnee, pas du rendu : la bibliotheque compose ses styles elle-meme, et jsdom
+ * n'evalue pas les pseudo-classes qu'elle emet. Ici, la regle se lit et s'eprouve.
+ *
+ * La bordure suit la priorite commune aux champs (ADR 0012), et rien ne s'ajoute autour du
+ * cadre : react-select pose sinon sa propre ombre et son propre contour au focus, qui
+ * doubleraient le trait.
+ */
+export const selectControlStyle = (styles, state) => {
+    const bordure = fieldBorderState(styles, {
+        disabled: state.isDisabled,
+        focus: state.isFocused,
+        error: state.error,
+        success: state.success,
+    });
+    return {
+        ...styles.inputInner,
+        ...(state.isDisabled ? styles.inputCursorDisabled : styles.inputCursor),
+        ...bordure,
+        boxShadow: 'none',
+        outline: 'none',
+        // react-select repose la bordure de repos au survol. Sans cette reprise, un selecteur
+        // actif ou en erreur perd sa couleur des que la souris passe dessus.
+        ':hover': { borderColor: bordure.borderColor ?? styles.inputInner.borderColor },
+    };
+};

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

@@ -0,0 +1,24 @@
+import type { GroupBase, Props as ReactSelectProps } from 'react-select';
+import type { SelectOption, SelectProps } from './Select.types';
+type Group = GroupBase<SelectOption>;
+export type SelectFieldPropsParams = {
+    props: SelectProps;
+    multiple: boolean;
+    /** Options retenues, dans l'ordre de `value`. */
+    selectedOptions: SelectOption[];
+    /** Options proposées, déjà regroupées pour react-select. */
+    groupedOptions: SelectOption[] | Group[];
+    styles: ReactSelectProps<SelectOption, boolean, Group>['styles'];
+    components: ReactSelectProps<SelectOption, boolean, Group>['components'];
+    onSearch: (query: string) => void;
+    loadingMessage: string;
+    emptyMessage: string;
+};
+/**
+ * Traduit les props du design system en configuration react-select. Extrait du
+ * composant pour le garder sous le cliquet de complexité : c'est ici que se
+ * concentrent tous les défauts et tous les branchements du mode.
+ */
+export declare const selectFieldProps: (params: SelectFieldPropsParams) => ReactSelectProps<SelectOption, boolean, Group>;
+export {};
+//# sourceMappingURL=selectFieldProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectFieldProps.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectFieldProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGhE,KAAK,KAAK,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAErC,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,eAAe,EAAE,YAAY,EAAE,CAAC;IAChC,4DAA4D;IAC5D,cAAc,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,CAAC;IACzC,MAAM,EAAE,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE,UAAU,EAAE,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAQ,sBAAsB,KAAG,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAqC9G,CAAC"}

package/dist/ui/Select/selectFieldProps.js

@@ -0,0 +1,41 @@
+import { emitSelectChange } from './selectValue';
+/**
+ * Traduit les props du design system en configuration react-select. Extrait du
+ * composant pour le garder sous le cliquet de complexité : c'est ici que se
+ * concentrent tous les défauts et tous les branchements du mode.
+ */
+export const selectFieldProps = (params) => {
+    const { props, multiple, selectedOptions, groupedOptions, styles, components, onSearch } = params;
+    const { placeholder, clearable, disabled, searchable, localFilter, loading, onFocus, onBlur } = props;
+    return {
+        value: multiple ? selectedOptions : (selectedOptions[0] ?? null),
+        options: groupedOptions,
+        styles,
+        components,
+        placeholder: placeholder ?? '',
+        isMulti: multiple,
+        isSearchable: searchable ?? false,
+        isClearable: clearable,
+        isDisabled: disabled,
+        isLoading: loading,
+        isOptionDisabled: option => option.disabled === true,
+        closeMenuOnSelect: !multiple,
+        // Les options déjà retenues restent listées, comme dans le bottom sheet.
+        hideSelectedOptions: false,
+        filterOption: localFilter === false ? () => true : undefined,
+        loadingMessage: () => params.loadingMessage,
+        noOptionsMessage: () => params.emptyMessage,
+        // Le garde écarte les réinitialisations émises à la fermeture du menu, qui
+        // relanceraient une recherche distante avec une saisie vide.
+        onInputChange: (input, meta) => {
+            if (meta.action === 'input-change')
+                onSearch(input);
+        },
+        onFocus: () => onFocus?.(),
+        onBlur: () => onBlur?.(),
+        onChange: selected => {
+            const retenues = Array.isArray(selected) ? selected : selected ? [selected] : [];
+            emitSelectChange(props, retenues.map(option => option.value));
+        },
+    };
+};

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

@@ -0,0 +1,69 @@
+import type { useStyles } from './SelectList.styles';
+type SelectListStyles = ReturnType<typeof useStyles>;
+export type SelectItemState = {
+    selected?: boolean;
+    highlighted?: boolean;
+    disabled?: boolean;
+};
+/**
+ * Les quatre variations d'aspect d'une option : desactivee, selectionnee, survolee. Elles
+ * vivaient dans le rendu sous forme de ternaires empiles, qui n'y disaient rien de plus que
+ * ce que leur nom dit ici, et qui rendaient la fonction de rendu illisible a force de branches.
+ */
+export declare const selectItemStyle: (styles: SelectListStyles, couleurs: {
+    texte: string;
+    texteDesactive: string;
+    coche: string;
+}, { selected, highlighted, disabled }: SelectItemState) => {
+    item: {
+        cursor: "not-allowed" | "pointer";
+        position: "relative";
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "stretch";
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        minHeight: number;
+        width: "100%";
+    };
+    band: {
+        backgroundColor?: string | undefined;
+        flex: number;
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        borderRadius: import("@alveole/theme").Radius;
+    };
+    bandHover: {
+        backgroundColor: string;
+    } | undefined;
+    label: {
+        color: string;
+        flex: number;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    icone: string;
+    caseACocher: {
+        backgroundColor: string;
+        borderColor: string;
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        flexShrink: number;
+        height: import("@alveole/theme").Spacing;
+        width: import("@alveole/theme").Spacing;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderRadius: import("@alveole/theme").Radius;
+    };
+    coche: string;
+};
+export {};
+//# sourceMappingURL=selectItemStyle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectItemStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectItemStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,gBAAgB,EACxB,UAAU;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAClE,qCAAqC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUpD,CAAC"}

package/dist/ui/Select/selectItemStyle.js

@@ -0,0 +1,22 @@
+/**
+ * Les quatre variations d'aspect d'une option : desactivee, selectionnee, survolee. Elles
+ * vivaient dans le rendu sous forme de ternaires empiles, qui n'y disaient rien de plus que
+ * ce que leur nom dit ici, et qui rendaient la fonction de rendu illisible a force de branches.
+ */
+export const selectItemStyle = (styles, couleurs, { selected, highlighted, disabled }) => ({
+    item: { ...styles.item, ...(disabled ? styles.itemDisabled : {}) },
+    band: { ...styles.band, ...(highlighted ? styles.bandHighlighted : {}) },
+    // Le survol ne doit pas repondre sur une option qu'on ne peut pas choisir.
+    bandHover: disabled ? undefined : styles.bandHighlighted,
+    label: { ...styles.itemLabel, ...(disabled ? styles.itemLabelDisabled : {}) },
+    icone: disabled ? couleurs.texteDesactive : couleurs.texte,
+    caseACocher: caseACocherStyle(styles, { selected, disabled }),
+    coche: disabled ? couleurs.texte : couleurs.coche,
+});
+/** Memes tokens que la `Checkbox` taille sm, dont cette case n'est que le visuel. */
+const caseACocherStyle = (styles, { selected, disabled }) => ({
+    ...styles.checkbox,
+    ...(selected ? styles.checkboxChecked : {}),
+    ...(disabled ? styles.checkboxDisabled : {}),
+    ...(selected && disabled ? styles.checkboxCheckedDisabled : {}),
+});

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

@@ -0,0 +1,30 @@
+/**
+ * Libellés et réglages par défaut du panneau, communs aux deux plateformes.
+ * Ils vivent ici plutôt qu'en valeurs par défaut de déstructuration : dix `=`
+ * dans une signature comptent tous dans la complexité de la fonction, et le
+ * cliquet du dépôt la plafonne à 10.
+ */
+export declare const REGLAGES_PAR_DEFAUT: {
+    readonly clearLabel: "Effacer la sélection";
+    readonly searchPlaceholder: "Rechercher…";
+    readonly loadingMessage: "Recherche…";
+    readonly emptyMessage: "Aucune option";
+    readonly createLabel: (query: string) => string;
+};
+type Textes = {
+    clearLabel?: string;
+    searchPlaceholder?: string;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    createLabel?: (query: string) => string;
+};
+/** Complète les libellés laissés vides par l'appelant. */
+export declare const textesDuPanneau: (textes: Textes) => {
+    clearLabel: string;
+    searchPlaceholder: string;
+    loadingMessage: string;
+    emptyMessage: string;
+    createLabel: (query: string) => string;
+};
+export {};
+//# sourceMappingURL=selectReglages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectReglages.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectReglages.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;;;;kCAKT,MAAM;CACnB,CAAC;AAEX,KAAK,MAAM,GAAG;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM;gBAR/B,MAAM;uBACC,MAAM;oBACT,MAAM;kBACR,MAAM;yBAPA,MAAM;CAY4E,CAAC"}

package/dist/ui/Select/selectReglages.js

@@ -0,0 +1,18 @@
+/**
+ * Libellés et réglages par défaut du panneau, communs aux deux plateformes.
+ * Ils vivent ici plutôt qu'en valeurs par défaut de déstructuration : dix `=`
+ * dans une signature comptent tous dans la complexité de la fonction, et le
+ * cliquet du dépôt la plafonne à 10.
+ */
+export const REGLAGES_PAR_DEFAUT = {
+    clearLabel: 'Effacer la sélection',
+    searchPlaceholder: 'Rechercher…',
+    loadingMessage: 'Recherche…',
+    emptyMessage: 'Aucune option',
+    createLabel: (query) => `Ajouter « ${query} »`,
+};
+/** Complète les libellés laissés vides par l'appelant. */
+export const textesDuPanneau = (textes) => ({ ...REGLAGES_PAR_DEFAUT, ...sansIndefinis(textes) });
+// `{ ...defauts, ...textes }` écraserait un défaut avec `undefined` dès que la prop
+// est absente : les clés non renseignées sont retirées avant la fusion.
+const sansIndefinis = (textes) => Object.fromEntries(Object.entries(textes).filter(([, valeur]) => valeur !== undefined));

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

@@ -0,0 +1,22 @@
+import type { GroupBase, StylesConfig } from 'react-select';
+import type { useStyles as useSelectStyles } from './Select.styles';
+import type { SelectOption } from './Select.types';
+import { type useStyles as useListStyles } from './SelectList.styles';
+type Group = GroupBase<SelectOption>;
+export declare const largeurDuPanneau: {
+    readonly width: "max-content";
+    readonly 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 declare const selectStylesConfig: (selectStyles: ReturnType<typeof useSelectStyles>, listStyles: ReturnType<typeof useListStyles>, caption: {
+    error?: string;
+    success?: string;
+}) => StylesConfig<SelectOption, boolean, Group>;
+export {};
+//# sourceMappingURL=selectStylesConfig.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectStylesConfig.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectStylesConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,EAAqB,KAAK,SAAS,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzF,KAAK,KAAK,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAGrC,eAAO,MAAM,gBAAgB;;;CAAsD,CAAC;AAEpF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC7B,cAAc,UAAU,CAAC,OAAO,eAAe,CAAC,EAChD,YAAY,UAAU,CAAC,OAAO,aAAa,CAAC,EAC5C,SAAS;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5C,YAAY,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAiC1C,CAAC"}