@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/FormControl/textInputStyles.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+import { FieldBorderState } from './fieldBorderState';
+import { useStyles } from './FormControl.styles';
+type Styles = ReturnType<typeof useStyles>;
+export type InputFrameState = FieldBorderState & {
+    focus: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    multiline?: boolean | null;
+};
+/**
+ * Le cadre visible du champ : bordure, fond, et etat. Les deux composants de saisie, celui
+ * qui ecrit sur place et le miroir qui ouvre une modale, doivent presenter exactement le
+ * meme cadre : sans ce point unique, la modale et la saisie inline divergeraient au premier
+ * ajustement.
+ *
+ * Les deux annulations de rembourrage liees aux ornements n'ont aucun effet visible, le
+ * cadre portant deja `padding: 0` et le retrait reel vivant sur le champ enfant, ou il
+ * suit l'echelle de controle (`control('md').paddingInline`, 12 desktop / 16 mobile). Elles
+ * sont conservees telles quelles : les retirer ne changerait rien, les corriger
+ * deplacerait le texte de tous les champs a ornement. Cf. le test qui fige ce constat.
+ */
+export declare const inputFrameStyle: (styles: Styles, state: InputFrameState) => {
+    paddingTop?: number | undefined;
+    paddingLeft?: number | undefined;
+    paddingRight?: number | undefined;
+    borderColor: string;
+    display: "flex";
+    flexDirection: "row";
+    gap: string | number;
+    padding: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    backgroundColor: "#FFFFFF";
+    overflow: "hidden";
+    width: "100%";
+    minHeight: number;
+};
+/** Centrer le texte n'a de sens qu'encadre des deux cotes, sinon il fuit vers l'ornement. */
+export declare const inputTextStyle: (styles: Styles, { startAdornment, endAdornment }: Pick<InputFrameState, "startAdornment" | "endAdornment">) => StyleProp<TextStyle>;
+export {};
+//# sourceMappingURL=textInputStyles.d.ts.map

package/dist/ui/FormControl/textInputStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textInputStyles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/textInputStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAoB,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAE/C,KAAK,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,EAAE,OAAO,eAAe;;;;;;;;;;;;;;;CAMpE,CAAC;AAEH,6FAA6F;AAC7F,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EACd,kCAAkC,IAAI,CAAC,eAAe,EAAE,gBAAgB,GAAG,cAAc,CAAC,yBAKxF,CAAC"}

package/dist/ui/FormControl/textInputStyles.js

@@ -0,0 +1,26 @@
+import { versStyleNatif } from '../../core/styleNatif/versStyleNatif';
+import { fieldBorderState } from './fieldBorderState';
+/**
+ * Le cadre visible du champ : bordure, fond, et etat. Les deux composants de saisie, celui
+ * qui ecrit sur place et le miroir qui ouvre une modale, doivent presenter exactement le
+ * meme cadre : sans ce point unique, la modale et la saisie inline divergeraient au premier
+ * ajustement.
+ *
+ * Les deux annulations de rembourrage liees aux ornements n'ont aucun effet visible, le
+ * cadre portant deja `padding: 0` et le retrait reel vivant sur le champ enfant, ou il
+ * suit l'echelle de controle (`control('md').paddingInline`, 12 desktop / 16 mobile). Elles
+ * sont conservees telles quelles : les retirer ne changerait rien, les corriger
+ * deplacerait le texte de tous les champs a ornement. Cf. le test qui fige ce constat.
+ */
+export const inputFrameStyle = (styles, state) => ({
+    ...styles.inputInner,
+    ...fieldBorderState(styles, state),
+    ...(state.endAdornment ? { paddingRight: 0 } : {}),
+    ...(state.startAdornment ? { paddingLeft: 0 } : {}),
+    ...(state.multiline ? { paddingTop: 8 } : {}),
+});
+/** Centrer le texte n'a de sens qu'encadre des deux cotes, sinon il fuit vers l'ornement. */
+export const inputTextStyle = (styles, { startAdornment, endAdornment }) => versStyleNatif({
+    ...styles.input,
+    ...(startAdornment && endAdornment ? { textAlign: 'center' } : {}),
+});

package/dist/ui/FormControl/useChoixDeFichier.d.ts

@@ -0,0 +1,15 @@
+import type { FileInputProps } from './FileInput';
+import { FileInputLabels } from './fichiersDuChamp';
+type Options = Pick<FileInputProps, 'value' | 'onChange' | 'type' | 'disabled' | 'onPickStart'> & {
+    multiple: boolean;
+    cameraQuality: number;
+    labels: FileInputLabels;
+};
+/**
+ * Tout ce que le bouton du champ declenche : le selecteur de documents sur le web ; sur natif, une
+ * feuille d'actions galerie / appareil photo / document, avec les demandes d'autorisation. Les
+ * fichiers recus passent le controle de type, puis s'ajoutent a la valeur.
+ */
+export declare const useChoixDeFichier: (options: Options) => () => Promise<void>;
+export {};
+//# sourceMappingURL=useChoixDeFichier.d.ts.map

package/dist/ui/FormControl/useChoixDeFichier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChoixDeFichier.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useChoixDeFichier.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAGL,eAAe,EAKhB,MAAM,mBAAmB,CAAC;AAmC3B,KAAK,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAChG,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,OAAO,wBAuDjD,CAAC"}

package/dist/ui/FormControl/useChoixDeFichier.js

@@ -0,0 +1,87 @@
+import { useTheme } from '@alveole/theme';
+import * as DocumentPicker from 'expo-document-picker';
+import * as ImagePicker from 'expo-image-picker';
+import React from 'react';
+import { Platform } from 'react-native';
+import { Alert } from '../../core/Alert';
+import { ajoute, imagesSeulement, libelleDeLaSource, sourcesProposees, } from './fichiersDuChamp';
+import { valideLeType } from './valideLeType';
+const enFichier = (asset) => ({
+    uri: asset.uri,
+    name: asset.fileName ?? 'image.jpg',
+    size: asset.fileSize ?? 0,
+    mimeType: asset.mimeType ?? 'image/jpeg',
+    lastModified: Date.now(),
+});
+/** Demande l'autorisation, puis ouvre la galerie ou l'appareil photo. Rend les fichiers choisis, ou aucun. */
+const prendreUneImage = async (source, { labels, cameraQuality, multiple }) => {
+    const camera = source === 'camera';
+    const demande = camera ? ImagePicker.requestCameraPermissionsAsync : ImagePicker.requestMediaLibraryPermissionsAsync;
+    const { status } = await demande();
+    if (status !== 'granted') {
+        const message = camera ? labels.cameraPermissionMessage : labels.galleryPermissionMessage;
+        Alert.alert({ title: labels.permissionRequired, message });
+        return [];
+    }
+    const result = camera
+        ? await ImagePicker.launchCameraAsync({ mediaTypes: ['images'], quality: cameraQuality })
+        : await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ['images'],
+            quality: 1,
+            allowsMultipleSelection: multiple,
+        });
+    return result.canceled ? [] : result.assets.map(enFichier);
+};
+/**
+ * Tout ce que le bouton du champ declenche : le selecteur de documents sur le web ; sur natif, une
+ * feuille d'actions galerie / appareil photo / document, avec les demandes d'autorisation. Les
+ * fichiers recus passent le controle de type, puis s'ajoutent a la valeur.
+ */
+export const useChoixDeFichier = (options) => {
+    const { value, onChange, type, disabled, onPickStart, multiple, cameraQuality, labels } = options;
+    const { isVariant } = useTheme();
+    const grandEcran = isVariant('desktop');
+    const isPickingRef = React.useRef(false);
+    const recevoir = React.useCallback((nouveaux) => {
+        if (nouveaux.length === 0)
+            return;
+        const transmettre = () => onChange(ajoute(value, nouveaux, multiple));
+        valideLeType({ type, onChange: transmettre })(multiple ? nouveaux : nouveaux[0]);
+    }, [onChange, value, multiple, type]);
+    const choisirUnDocument = React.useCallback(async () => {
+        const result = await DocumentPicker.getDocumentAsync({ copyToCacheDirectory: true, multiple, type });
+        recevoir(result.assets ?? []);
+    }, [multiple, type, recevoir]);
+    const choisirUneImage = React.useCallback(async (source) => recevoir(await prendreUneImage(source, { labels, cameraQuality, multiple })), [labels, cameraQuality, multiple, recevoir]);
+    const ouvrirLaFeuille = React.useCallback(() => {
+        const lancer = (source) => (source === 'document' ? choisirUnDocument() : choisirUneImage(source));
+        const images = imagesSeulement(type);
+        Alert.alert({
+            title: images ? labels.chooseImageTitle : labels.chooseDocumentTitle,
+            message: images ? labels.chooseImageMessage : undefined,
+            buttons: [
+                ...sourcesProposees(type, grandEcran).map(source => ({
+                    text: libelleDeLaSource(source, labels, { type, grandEcran }),
+                    onPress: () => lancer(source),
+                })),
+                { text: labels.cancel, style: 'cancel' },
+            ],
+        });
+    }, [type, labels, grandEcran, choisirUnDocument, choisirUneImage]);
+    return React.useCallback(async () => {
+        if (isPickingRef.current)
+            return;
+        onPickStart?.();
+        if (disabled)
+            return;
+        if (Platform.OS !== 'web')
+            return ouvrirLaFeuille();
+        isPickingRef.current = true;
+        try {
+            await choisirUnDocument();
+        }
+        finally {
+            isPickingRef.current = false;
+        }
+    }, [onPickStart, disabled, ouvrirLaFeuille, choisirUnDocument]);
+};

package/dist/ui/FormControl/useFieldFocus.d.ts

@@ -0,0 +1,26 @@
+type Options<F, B> = {
+    disabled?: boolean | null;
+    readOnly?: boolean | null;
+    editable?: boolean | null;
+    onFocus?: (e: F) => void;
+    onBlur?: (e: B) => void;
+};
+/**
+ * L'etat de focus du champ, tenu par le composant et non laisse a la plateforme : c'est le
+ * cadre qui porte la bordure, et lui seul sait s'il doit la colorer.
+ *
+ * Un champ desactive ou en lecture seule n'entre jamais dans cet etat, meme quand le
+ * clavier l'atteint : il resterait atteignable sans pour autant se presenter comme
+ * modifiable. Les rappels de l'appelant partent quand meme, eux : c'est l'apparence qu'on
+ * retient, pas l'evenement.
+ *
+ * `editable={false}` compte au meme titre : c'est le mot de React Native pour « on n'ecrit
+ * pas ici », et un appelant qui l'emploie plutot que `readOnly` decrit le meme champ.
+ */
+export declare const useFieldFocus: <F = unknown, B = unknown>({ disabled, readOnly, editable, onFocus, onBlur, }: Options<F, B>) => {
+    focus: boolean;
+    handleFocus: (e: F) => void;
+    handleBlur: (e: B) => void;
+};
+export {};
+//# sourceMappingURL=useFieldFocus.d.ts.map

package/dist/ui/FormControl/useFieldFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldFocus.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useFieldFocus.ts"],"names":[],"mappings":"AAEA,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI;IAGnB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,oDAMrD,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;;qBAMK,CAAC;oBAIF,CAAC;CAKpB,CAAC"}

package/dist/ui/FormControl/useFieldFocus.js

@@ -0,0 +1,30 @@
+import React from 'react';
+/**
+ * L'etat de focus du champ, tenu par le composant et non laisse a la plateforme : c'est le
+ * cadre qui porte la bordure, et lui seul sait s'il doit la colorer.
+ *
+ * Un champ desactive ou en lecture seule n'entre jamais dans cet etat, meme quand le
+ * clavier l'atteint : il resterait atteignable sans pour autant se presenter comme
+ * modifiable. Les rappels de l'appelant partent quand meme, eux : c'est l'apparence qu'on
+ * retient, pas l'evenement.
+ *
+ * `editable={false}` compte au meme titre : c'est le mot de React Native pour « on n'ecrit
+ * pas ici », et un appelant qui l'emploie plutot que `readOnly` decrit le meme champ.
+ */
+export const useFieldFocus = ({ disabled, readOnly, editable, onFocus, onBlur, }) => {
+    const [focus, setFocus] = React.useState(false);
+    const inerte = disabled === true || readOnly === true || editable === false;
+    return {
+        focus,
+        handleFocus: (e) => {
+            if (!inerte)
+                setFocus(true);
+            onFocus?.(e);
+        },
+        handleBlur: (e) => {
+            if (!inerte)
+                setFocus(false);
+            onBlur?.(e);
+        },
+    };
+};

package/dist/ui/FormControl/useSaisieHHMM.d.ts

@@ -0,0 +1,20 @@
+/** Deux chiffres d'heures, puis les minutes derriere un deux-points des le troisieme. */
+export declare const formaterHHMM: (chiffres: string) => string;
+type SaisieHHMM = {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    formater: (chiffres: string) => string;
+};
+/**
+ * La saisie au clavier d'un couple heures-minutes : ne garde que quatre chiffres, les met en
+ * forme a chaque frappe, et ne transmet la valeur qu'une fois complete (ou videe) et a la
+ * perte du focus. Seule la mise en forme change d'un champ a l'autre.
+ */
+export declare const useSaisieHHMM: ({ value, onChange, onBlur, formater }: SaisieHHMM) => {
+    localValue: string;
+    handleChangeText: (text: string) => void;
+    handleBlur: () => void;
+};
+export {};
+//# sourceMappingURL=useSaisieHHMM.d.ts.map

package/dist/ui/FormControl/useSaisieHHMM.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSaisieHHMM.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useSaisieHHMM.ts"],"names":[],"mappings":"AAEA,yFAAyF;AACzF,eAAO,MAAM,YAAY,GAAI,UAAU,MAAM,WACqC,CAAC;AAEnF,KAAK,UAAU,GAAG;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,uCAAuC,UAAU;;6BAW7C,MAAM;;CAevC,CAAC"}

package/dist/ui/FormControl/useSaisieHHMM.js

@@ -0,0 +1,31 @@
+import React from 'react';
+/** Deux chiffres d'heures, puis les minutes derriere un deux-points des le troisieme. */
+export const formaterHHMM = (chiffres) => chiffres.length <= 2 ? chiffres : `${chiffres.slice(0, 2)}:${chiffres.slice(2)}`;
+/**
+ * La saisie au clavier d'un couple heures-minutes : ne garde que quatre chiffres, les met en
+ * forme a chaque frappe, et ne transmet la valeur qu'une fois complete (ou videe) et a la
+ * perte du focus. Seule la mise en forme change d'un champ a l'autre.
+ */
+export const useSaisieHHMM = ({ value, onChange, onBlur, formater }) => {
+    const [localValue, setLocalValue] = React.useState(value ?? '');
+    const [valeurRecue, setValeurRecue] = React.useState(value);
+    // Une nouvelle valeur venue du parent remplace la saisie en cours. L'ajustement se fait
+    // pendant le rendu plutot que dans un effet, qui peindrait d'abord l'ancienne valeur.
+    if (value !== valeurRecue) {
+        setValeurRecue(value);
+        setLocalValue(value ?? '');
+    }
+    const handleChangeText = (text) => {
+        const chiffres = text.replace(/\D/g, '').slice(0, 4);
+        const formatted = formater(chiffres);
+        setLocalValue(formatted);
+        if (chiffres.length === 0 || chiffres.length === 4) {
+            onChange?.(formatted);
+        }
+    };
+    const handleBlur = () => {
+        onChange?.(localValue);
+        onBlur?.();
+    };
+    return { localValue, handleChangeText, handleBlur };
+};

package/dist/ui/FormControl/useTextInputModal.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { FocusEvent, TextInput as ReactNativeTextInput } from 'react-native';
+type Options = {
+    disabled?: boolean | null;
+    readOnly?: boolean | null;
+    onFocus?: (e: FocusEvent) => void;
+    onModalSubmit?: () => void;
+};
+/**
+ * La machine a etats de la saisie en modale. Deux etats distincts, et pas un seul : la
+ * modale est demandee (`isOpen`) bien avant d'etre affichee (`isReady`), et c'est la
+ * couche native qui signale le passage de l'un a l'autre. Agir entre les deux viserait
+ * un champ qui n'existe pas encore, d'ou le report de l'evenement de focus.
+ */
+export declare const useTextInputModal: ({ disabled, readOnly, onFocus, onModalSubmit }: Options) => {
+    isOpen: boolean;
+    inputRef: React.RefObject<ReactNativeTextInput | null>;
+    modalInputRef: React.RefObject<ReactNativeTextInput | null>;
+    open: () => void;
+    close: () => void;
+    submit: () => void;
+    handleShow: () => void;
+    handleDismiss: () => void;
+    handleModalFocus: (e: FocusEvent) => void;
+};
+export {};
+//# sourceMappingURL=useTextInputModal.d.ts.map

package/dist/ui/FormControl/useTextInputModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextInputModal.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useTextInputModal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAY,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEvF,KAAK,OAAO,GAAG;IACb,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,gDAAgD,OAAO;;;;;;;;;0BA6C1D,UAAU;CASxC,CAAC"}

package/dist/ui/FormControl/useTextInputModal.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Keyboard } from 'react-native';
+/**
+ * La machine a etats de la saisie en modale. Deux etats distincts, et pas un seul : la
+ * modale est demandee (`isOpen`) bien avant d'etre affichee (`isReady`), et c'est la
+ * couche native qui signale le passage de l'un a l'autre. Agir entre les deux viserait
+ * un champ qui n'existe pas encore, d'ou le report de l'evenement de focus.
+ */
+export const useTextInputModal = ({ disabled, readOnly, onFocus, onModalSubmit }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [isReady, setIsReady] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const modalInputRef = React.useRef(null);
+    const pendingFocusEventRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!isReady || !pendingFocusEventRef.current)
+            return;
+        const event = pendingFocusEventRef.current;
+        pendingFocusEventRef.current = null;
+        requestAnimationFrame(() => onFocus?.(event));
+    }, [isReady, onFocus]);
+    const open = () => {
+        if (disabled || readOnly || isOpen)
+            return;
+        setIsOpen(true);
+    };
+    const close = () => {
+        if (!isReady)
+            return;
+        Keyboard.dismiss();
+        modalInputRef.current?.blur();
+        setIsOpen(false);
+        inputRef.current?.blur();
+    };
+    const submit = () => {
+        if (!isReady)
+            return;
+        onModalSubmit?.();
+        close();
+    };
+    const handleShow = () => {
+        setIsReady(true);
+        requestAnimationFrame(() => modalInputRef.current?.focus());
+    };
+    const handleDismiss = () => {
+        setIsReady(false);
+        pendingFocusEventRef.current = null;
+        Keyboard.dismiss();
+    };
+    const handleModalFocus = (e) => {
+        if (!isReady) {
+            pendingFocusEventRef.current = e;
+            return;
+        }
+        onFocus?.(e);
+    };
+    return { isOpen, inputRef, modalInputRef, open, close, submit, handleShow, handleDismiss, handleModalFocus };
+};

package/dist/ui/FormControl/valideLeType.d.ts

@@ -0,0 +1,14 @@
+import type { FileInputProps } from './FileInput';
+/**
+ * Enveloppe un `onChange` de champ de fichier pour n'y laisser passer que les types autorises,
+ * et prevenir l'utilisateur sinon. Un fichier dont le type MIME est inconnu passe : c'est au
+ * selecteur, qui filtre deja, d'avoir eu le dernier mot.
+ *
+ * Les trois champs de fichier (l'ancien FileField, l'ancien DragAndDropFile natif et web) faisaient ce filtrage
+ * chacun dans son coin, et avaient deja diverge : FileField reconnaissait les types avec ses
+ * propres comparaisons de chaines, plus laches que celles des deux autres, et ne verifiait que
+ * le premier fichier d'une selection multiple. Un meme fichier pouvait donc etre accepte ici et
+ * refuse la.
+ */
+export declare const valideLeType: ({ type, onChange }: Pick<FileInputProps, "type" | "onChange">) => FileInputProps["onChange"];
+//# sourceMappingURL=valideLeType.d.ts.map

package/dist/ui/FormControl/valideLeType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"valideLeType.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/valideLeType.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAUlD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,GACtB,oBAAoB,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,UAAU,CAAC,KAAG,cAAc,CAAC,UAAU,CAYzF,CAAC"}

package/dist/ui/FormControl/valideLeType.js

@@ -0,0 +1,28 @@
+import { Alert } from '../../core/Alert';
+import { fichierCorrespondAuType } from './fichierCorrespondAuType';
+const refuser = (plusieurs) => Alert.alert({
+    title: 'Type de fichier incorrect',
+    message: plusieurs
+        ? 'Certains fichiers ne sont pas pris en charge'
+        : "Le format du fichier n'est pas pris en charge",
+});
+/**
+ * Enveloppe un `onChange` de champ de fichier pour n'y laisser passer que les types autorises,
+ * et prevenir l'utilisateur sinon. Un fichier dont le type MIME est inconnu passe : c'est au
+ * selecteur, qui filtre deja, d'avoir eu le dernier mot.
+ *
+ * Les trois champs de fichier (l'ancien FileField, l'ancien DragAndDropFile natif et web) faisaient ce filtrage
+ * chacun dans son coin, et avaient deja diverge : FileField reconnaissait les types avec ses
+ * propres comparaisons de chaines, plus laches que celles des deux autres, et ne verifiait que
+ * le premier fichier d'une selection multiple. Un meme fichier pouvait donc etre accepte ici et
+ * refuse la.
+ */
+export const valideLeType = ({ type, onChange }) => value => {
+    if (type == null || value == null)
+        return onChange(value);
+    const fichiers = Array.isArray(value) ? value : [value];
+    const tousValides = fichiers.every(fichier => fichier.mimeType == null || fichierCorrespondAuType(fichier.mimeType, fichier.name, type));
+    if (tousValides)
+        return onChange(value);
+    refuser(Array.isArray(value));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,IAAI,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kCAAwC,WAAW,sBAkBzE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,IAAI,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kCAAwC,WAAW,sBAwBzE,CAAC"}

package/dist/ui/Header/Header.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { A, Box, Typography } from '../../core';
+import { A } from '../../core/A';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { useStyles } from './Header.styles';
 export const Header = ({ logo, title, right, homeHref = '/' }) => {
     const styles = useStyles();
     const identity = (_jsxs(Box, { style: styles.identity, children: [logo, _jsx(Typography, { style: styles.titleText, children: title })] }));
-    return (_jsx(Box, { tag: "header", style: styles.container, children: _jsxs(Box, { style: styles.inner, children: [homeHref != null ? _jsx(A, { href: homeHref, children: identity }) : identity, right != null && _jsx(Box, { style: styles.right, children: right })] }) }));
+    return (_jsx(Box, { tag: "header", style: styles.container, children: _jsxs(Box, { style: styles.inner, children: [homeHref != null ? (_jsx(A, { href: homeHref, style: styles.identityLink, hoverStyle: styles.identityLinkHover, children: identity })) : (identity), right != null && _jsx(Box, { style: styles.right, children: right })] }) }));
 };

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

@@ -18,7 +18,7 @@ declare const _default: {
             top: number;
             zIndex: number;
             width: "100%";
-            shadowColor: import("@alveole/theme").Color;
+            shadowColor: string;
             shadowOffset: {
                 width: number;
                 height: number;
@@ -48,11 +48,10 @@ declare const _default: {
             flexDirection: "row";
             alignItems: "center";
             justifyContent: "space-between";
+            height: number;
             gap: string | number;
             paddingLeft: string | number;
             paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
         };
         identity: {
             display: "flex";
@@ -60,11 +59,21 @@ declare const _default: {
             alignItems: "center";
             gap: string | number;
         };
+        identityLink: {
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            borderRadius: import("@alveole/theme").Radius;
+        };
+        identityLinkHover: {
+            backgroundColor: string;
+        };
         titleText: {
             color: string;
             display: "flex" | "none";
-            fontSize: 14;
-            lineHeight: 20;
+            fontSize: 16;
+            lineHeight: 24;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];

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

@@ -1 +1 @@
-{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAUkB;AAqBlB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAAmE,CAAC;AAElG,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAUkB;AAqBlB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAAmE,CAAC;AAElG,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}

package/dist/ui/Header/Header.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
-import { Box, Typography } from '../../core';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { Button } from '../Button';
 import { Header } from './Header';
 import { useStyles } from './Header.styles';

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

@@ -10,7 +10,7 @@ export declare const useStyles: () => {
         top: number;
         zIndex: number;
         width: "100%";
-        shadowColor: import("@alveole/theme").Color;
+        shadowColor: string;
         shadowOffset: {
             width: number;
             height: number;
@@ -40,11 +40,10 @@ export declare const useStyles: () => {
         flexDirection: "row";
         alignItems: "center";
         justifyContent: "space-between";
+        height: number;
         gap: string | number;
         paddingLeft: string | number;
         paddingRight: string | number;
-        paddingTop: string | number;
-        paddingBottom: string | number;
     };
     identity: {
         display: "flex";
@@ -52,11 +51,21 @@ export declare const useStyles: () => {
         alignItems: "center";
         gap: string | number;
     };
+    identityLink: {
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        borderRadius: import("@alveole/theme").Radius;
+    };
+    identityLinkHover: {
+        backgroundColor: string;
+    };
     titleText: {
         color: string;
         display: "flex" | "none";
-        fontSize: 14;
-        lineHeight: 20;
+        fontSize: 16;
+        lineHeight: 24;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];

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

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCnB,CAAC"}
+{"version":3,"file":"Header.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Header/Header.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDnB,CAAC"}

package/dist/ui/Header/Header.styles.js

@@ -1,7 +1,10 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, text, spacing, isVariant, shadows }) => ({
+export const useStyles = makeStyles(({ color, text, spacing, spacingValue, radius, isVariant, shadows }) => ({
     container: {
-        backgroundColor: isVariant('mobile') ? color.light.background['default-grey'] : color.light.background['alt-grey'],
+        // Barre blanche, séparée du contenu par la seule hairline : c'est ce que font Primer
+        // et Atlassian. Un fond gris sur une page blanche ajoute un second séparateur au
+        // filet, et écrase tout ce qu'on pose dessus.
+        backgroundColor: color.light.background['default-grey'],
         ...(isVariant('mobile')
             ? shadows('raised')
             : { borderBottomWidth: 1, borderBottomColor: color.light.border['default-grey'] }),
@@ -15,11 +18,10 @@ export const useStyles = makeStyles(({ color, text, spacing, isVariant, shadows
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
+        height: isVariant('mobile') ? spacingValue('8W') - spacingValue('1W') : spacingValue('8W'),
         gap: spacing('3W'),
         paddingLeft: spacing('2W'),
         paddingRight: spacing('2W'),
-        paddingTop: spacing('2W'),
-        paddingBottom: spacing('2W'),
     },
     identity: {
         display: 'flex',
@@ -27,8 +29,21 @@ export const useStyles = makeStyles(({ color, text, spacing, isVariant, shadows
         alignItems: 'center',
         gap: spacing('1W'),
     },
+    // Le lien d'identité est cliquable sans rien qui le dise : le lavis neutre au survol lui
+    // donne la même affordance qu'aux items de navigation. Le padding fait respirer le lavis
+    // autour du logo, sinon il colle au carré.
+    identityLink: {
+        paddingTop: spacingValue('1W'),
+        paddingBottom: spacingValue('1W'),
+        paddingLeft: spacingValue('1W'),
+        paddingRight: spacingValue('1W'),
+        borderRadius: radius('sm'),
+    },
+    identityLinkHover: {
+        backgroundColor: color.light.background['transparent-hover'],
+    },
     titleText: {
-        ...text['Corps de texte'].SM.Bold,
+        ...text['Corps de texte'].MD.Bold,
         color: color.light.text['title-grey'],
         display: isVariant('mobile') ? 'none' : 'flex',
     },

package/dist/ui/InputButtonAdornment/InputButtonAdornment.d.ts

@@ -1,6 +1,8 @@
-import { IconProps } from '@alveole/components';
+import { IconProps } from '../LucideIcon';
 export type InputButtonAdornmentProps = {
     icon: IconProps['name'];
+    /** Exige de l'appelant : accole a un champ, ce bouton n'a aucun texte a lui. */
+    accessibilityLabel: string;
     position: 'start' | 'end';
     disabled?: boolean;
     onPress?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"InputButtonAdornment.d.ts","sourceRoot":"","sources":["../../../src/ui/InputButtonAdornment/InputButtonAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGjE,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,gCAqBpE,CAAC"}
+{"version":3,"file":"InputButtonAdornment.d.ts","sourceRoot":"","sources":["../../../src/ui/InputButtonAdornment/InputButtonAdornment.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,gFAAgF;IAChF,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,gCAsBpE,CAAC"}