@alveole/components 2.0.0-alpha.13 → 2.0.0-alpha.15

package/dist/generated/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.13";
+export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.15";
 //# sourceMappingURL=version.d.ts.map

package/dist/generated/version.js

@@ -1 +1 @@
-export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.13";
+export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.15";

package/dist/ui/FilterDate/FilterDate.js

@@ -3,7 +3,7 @@ import { format } from 'date-fns/format';
 import { enUS } from 'date-fns/locale/en-US';
 import { fr } from 'date-fns/locale/fr';
 import React from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 import { Box } from '../../core/Box';
 import { Grid } from '../../core/Grid';
 import { Typography } from '../../core/Typography';

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

@@ -1 +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"}
+{"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;AAmD3B,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,wBA6DjD,CAAC"}

package/dist/ui/FormControl/useChoixDeFichier.js

@@ -2,10 +2,17 @@ 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 { ActionSheetIOS, Platform } from 'react-native';
 import { Alert } from '../../core/Alert';
 import { ajoute, imagesSeulement, libelleDeLaSource, sourcesProposees, } from './fichiersDuChamp';
 import { valideLeType } from './valideLeType';
+const showActionSheetIOS = ({ sources, lancer, titre, labels, type, grandEcran }) => {
+    const options = [...sources.map(s => libelleDeLaSource(s, labels, { type, grandEcran })), labels.cancel];
+    ActionSheetIOS.showActionSheetWithOptions({ title: titre, options, cancelButtonIndex: options.length - 1 }, index => {
+        if (index < sources.length)
+            lancer(sources[index]);
+    });
+};
 const enFichier = (asset) => ({
     uri: asset.uri,
     name: asset.fileName ?? 'image.jpg',
@@ -56,16 +63,21 @@ export const useChoixDeFichier = (options) => {
     const ouvrirLaFeuille = React.useCallback(() => {
         const lancer = (source) => (source === 'document' ? choisirUnDocument() : choisirUneImage(source));
         const images = imagesSeulement(type);
+        const sources = sourcesProposees(type, grandEcran);
+        const titre = images ? labels.chooseImageTitle : labels.chooseDocumentTitle;
+        if (Platform.OS === 'ios')
+            return showActionSheetIOS({ sources, lancer, titre, labels, type, grandEcran });
         Alert.alert({
-            title: images ? labels.chooseImageTitle : labels.chooseDocumentTitle,
+            title: titre,
             message: images ? labels.chooseImageMessage : undefined,
             buttons: [
-                ...sourcesProposees(type, grandEcran).map(source => ({
+                ...sources.map(source => ({
                     text: libelleDeLaSource(source, labels, { type, grandEcran }),
                     onPress: () => lancer(source),
                 })),
                 { text: labels.cancel, style: 'cancel' },
             ],
+            options: { cancelable: true },
         });
     }, [type, labels, grandEcran, choisirUnDocument, choisirUneImage]);
     return React.useCallback(async () => {

package/dist/ui/Tabs/Tabs.d.ts

@@ -12,6 +12,12 @@ export type TabsProps = Omit<BoxProps, 'children' | 'onChange'> & {
         renderAction?: () => React.ReactNode;
     }[];
     defaultValue?: string;
+    /**
+     * L'onglet actif, impose par le parent : `Tabs` devient controle. Un clic sur un onglet appelle
+     * toujours `onChange`, au parent de mettre `value` a jour. Absent, `Tabs` garde l'onglet actif
+     * pour lui, a partir de `defaultValue`.
+     */
+    value?: string;
     onChange?: (index: number) => void;
     /**
      * Active l'Anchor Sync (voir ADR 0022) : au clic, l'onglet actif est ecrit dans l'etat

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAOrC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAChE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KACtC,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAkEpC,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAOrC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAChE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KACtC,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAkEpC,CAAC"}

package/dist/ui/Tabs/Tabs.js

@@ -9,10 +9,10 @@ import { TabsTab } from './TabsTab';
 import { useAnchorSync } from './useAnchorSync';
 import { useTabsState } from './useTabsState';
 export const Tabs = (props) => {
-    const { tabs, defaultValue = '', onChange, urlAnchorPrefix, style, ...boxProps } = props;
+    const { tabs, defaultValue = '', value, onChange, urlAnchorPrefix, style, ...boxProps } = props;
     const styles = useStyles();
     const initialValue = defaultValue || tabs[0]?.value || '';
-    const { currentTab, etatDeLOnglet, setCurrentTab, restoreCurrentTab, setHoverTab, handleOnInteraction } = useTabsState(initialValue, onChange);
+    const { currentTab, etatDeLOnglet, setCurrentTab, restoreCurrentTab, setHoverTab, handleOnInteraction } = useTabsState(initialValue, onChange, value);
     const { persist } = useAnchorSync(urlAnchorPrefix, anchor => {
         const tab = tabs.find(t => toSlug(t.label) === anchor);
         if (tab)

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

@@ -121,5 +121,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Example: () => React.JSX.Element;
+export declare const Controle: () => React.JSX.Element;
 export * as Sources from './Tabs.stories.sources';
 //# sourceMappingURL=Tabs.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAIF,eAAO,MAAM,QAAQ,yBAiBpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Tabs/Tabs.stories.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
 import { Tabs } from './Tabs';
 import { useStyles } from './Tabs.styles';
 export default {
@@ -27,4 +28,15 @@ export const Example = () => {
                 },
             ] }) }));
 };
+// `value` rend les Tabs controles : le parent choisit l'onglet actif, par exemple depuis un
+// bouton ou une carte cliquee, et le suit depuis `onChange` quand l'utilisateur clique un onglet.
+export const Controle = () => {
+    const onglets = [
+        { label: 'Onglet 1', value: 'onglet-1', content: _jsx(Typography, { children: "Contenu de onglet 1" }) },
+        { label: 'Onglet 2', value: 'onglet-2', content: _jsx(Typography, { children: "Contenu de onglet 2" }) },
+        { label: 'Onglet 3', value: 'onglet-3', content: _jsx(Typography, { children: "Contenu de onglet 3" }) },
+    ];
+    const [ongletActif, setOngletActif] = React.useState('onglet-1');
+    return (_jsxs(Box, { width: '100%', gap: 16, children: [_jsxs(Box, { flexDirection: "row", gap: 8, children: [_jsx(Button, { title: "Aller \u00E0 l\u2019onglet 1", variant: "secondary", onPress: () => setOngletActif('onglet-1') }), _jsx(Button, { title: "Aller \u00E0 l\u2019onglet 3", variant: "secondary", onPress: () => setOngletActif('onglet-3') })] }), _jsx(Tabs, { value: ongletActif, onChange: index => setOngletActif(onglets[index].value), tabs: onglets })] }));
+};
 export * as Sources from './Tabs.stories.sources';

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

@@ -1,6 +1,8 @@
 export declare const Example: () => string;
+export declare const Controle: () => string;
 export declare const storySources: {
     readonly Example: () => string;
+    readonly Controle: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=Tabs.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk1B,CAAC;AAEv2B,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Tabs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk1B,CAAC;AAEv2B,eAAO,MAAM,QAAQ,cAA44B,CAAC;AAEl6B,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Tabs/Tabs.stories.tsx
 export const Example = () => "export const Example = () => {\n  const [_activeTab, setActiveTab] = React.useState(0);\n\n  return (\n    <Box width={'100%'}>\n      <Tabs\n        defaultValue={'onglet-1'}\n        onChange={setActiveTab}\n        urlAnchorPrefix=\"tabs-story\"\n        tabs={[\n          { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n          { label: 'Onglet 2', counter: 12, value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n          { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n          {\n            label: 'Onglet 4',\n            leading: 'Settings',\n            value: 'onglet-4',\n            content: <Typography>Contenu de onglet 4</Typography>,\n          },\n        ]}\n      />\n    </Box>\n  );\n};";
+export const Controle = () => "export const Controle = () => {\n  const onglets = [\n    { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n    { label: 'Onglet 2', value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n    { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n  ];\n  const [ongletActif, setOngletActif] = React.useState('onglet-1');\n\n  return (\n    <Box width={'100%'} gap={16}>\n      <Box flexDirection=\"row\" gap={8}>\n        <Button title=\"Aller à l’onglet 1\" variant=\"secondary\" onPress={() => setOngletActif('onglet-1')} />\n        <Button title=\"Aller à l’onglet 3\" variant=\"secondary\" onPress={() => setOngletActif('onglet-3')} />\n      </Box>\n      <Tabs value={ongletActif} onChange={index => setOngletActif(onglets[index].value)} tabs={onglets} />\n    </Box>\n  );\n};";
 export const storySources = {
     Example,
+    Controle,
 };

package/dist/ui/Tabs/useTabsState.d.ts

@@ -1,6 +1,6 @@
 import { TabLayout } from 'tamagui';
 import { EtatDeLOnglet } from './Tabs.apparence';
-export declare const useTabsState: (initialValue: string, onChange?: (index: number) => void) => {
+export declare const useTabsState: (initialValue: string, onChange?: (index: number) => void, value?: string) => {
     currentTab: string;
     etatDeLOnglet: (tabValue: string) => EtatDeLOnglet;
     setCurrentTab: (currentTab: string, index: number) => void;

package/dist/ui/Tabs/useTabsState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/useTabsState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAgB,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAgBjD,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;8BA+BlD,MAAM,KAAG,aAAa;gCAtBpB,MAAM,SAAS,MAAM;oCAOjB,MAAM;4BAKd,MAAM,GAAG,IAAI;;CAuB7C,CAAC"}
+{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/useTabsState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAgB,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAkBjD,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAAE,QAAQ,MAAM;;8BAiClE,MAAM,KAAG,aAAa;gCAxBpB,MAAM,SAAS,MAAM;oCAOjB,MAAM;4BAKd,MAAM,GAAG,IAAI;;CAyB7C,CAAC"}

package/dist/ui/Tabs/useTabsState.js

@@ -5,7 +5,9 @@ import React from 'react';
 //
 // Le focus n'en fait pas partie : il est rendu par la regle CSS `:focus-visible` du theme, la
 // seule qui distingue le clavier de la souris. Suivi en React, il s'affichait aussi au clic.
-export const useTabsState = (initialValue, onChange) => {
+// `value`, quand le parent la donne, fait foi sur l'onglet retenu en interne : `Tabs` est alors
+// controle, et c'est au parent de la mettre a jour depuis `onChange`.
+export const useTabsState = (initialValue, onChange, value) => {
     const [tabState, setTabState] = React.useState({
         activeAt: null,
         currentTab: initialValue,
@@ -32,12 +34,13 @@ export const useTabsState = (initialValue, onChange) => {
             setTabState(state => ({ ...state, intentAt: layout }));
         }
     };
+    const currentTab = value ?? tabState.currentTab;
     const etatDeLOnglet = (tabValue) => ({
-        actif: tabState.currentTab === tabValue,
+        actif: currentTab === tabValue,
         survole: tabState.hoverTab === tabValue,
     });
     return {
-        currentTab: tabState.currentTab,
+        currentTab,
         etatDeLOnglet,
         setCurrentTab,
         restoreCurrentTab,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.15",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",