@ornikar/kitt-universal 23.3.0 → 23.4.0

package/dist/index-node-20.10.es.mjs

@@ -1,4 +1,4 @@
-import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, useCallback, Fragment as Fragment$1, createElement } from 'react';
+import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, Fragment as Fragment$1, useCallback, createElement } from 'react';
 import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useSx, Text, Input, useBreakpointValue as useBreakpointValue$1, NativeBaseProvider, extendTheme, useMediaQuery } from 'native-base';
 export { useClipboard, useMediaQuery, useSx, useToken } from 'native-base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -7,7 +7,7 @@ import { Platform, Animated as Animated$1, Easing, StyleSheet, Modal, ScrollView
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { ArcIcon, UserIcon, MapPinIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, RotateCCWIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import { BottomSheetScrollView, BottomSheetView, useBottomSheetDynamicSnapPoints, BottomSheetModal, BottomSheetHandle, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { BottomSheetScrollView, BottomSheetView, useBottomSheetDynamicSnapPoints, BottomSheetModal, BottomSheetHandle, BottomSheetBackdrop, useBottomSheetModal } from '@gorhom/bottom-sheet';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { parse } from 'twemoji-parser';
 import * as WebBrowser from 'expo-web-browser';
@@ -15,6 +15,8 @@ import { CaretUpFillIcon, CaretDownFillIcon, EyeClosedRegularIcon, EyeRegularIco
 import Downshift from 'downshift';
 import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
 import { FormattedMessage } from 'react-intl';
+import { getDocumentAsync } from 'expo-document-picker';
+import { launchImageLibraryAsync } from 'expo-image-picker';
 import { useDebouncedCallback } from 'use-debounce';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
@@ -5308,6 +5310,232 @@ const DatePicker = /*#__PURE__*/forwardRef(({
   });
 });
 
+function DocumentPicker({
+  onDocumentUpload,
+  children,
+  disabled,
+  documentPickerOptions
+}) {
+  const childElement = Children.only(children);
+  return /*#__PURE__*/cloneElement(childElement, {
+    // ensure that the press event is not prevented by Button component
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    onPress: async () => {
+      if (disabled) return;
+      childElement.props.onPress?.();
+      const result = await getDocumentAsync({
+        ...documentPickerOptions,
+        multiple: false
+      });
+      if (!result.canceled && result.assets[0].file) {
+        onDocumentUpload(result.assets[0].file);
+      }
+    },
+    disabled
+  });
+}
+
+function ImagePicker({
+  onImageSelected,
+  children,
+  disabled,
+  imagePickerOptions
+}) {
+  const childElement = Children.only(children);
+  return /*#__PURE__*/jsx(View, {
+    children: /*#__PURE__*/cloneElement(childElement, {
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      onPress: async () => {
+        if (disabled) return;
+        childElement.props.onPress?.();
+
+        // No permissions request is necessary for launching the image library
+        const result = await launchImageLibraryAsync({
+          ...imagePickerOptions,
+          allowsMultipleSelection: false
+        });
+        if (!result.canceled) {
+          onImageSelected(result.assets[0]);
+        }
+      },
+      disabled
+    })
+  });
+}
+
+function ListItemContent({
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/jsx(View, {
+    alignSelf: "center",
+    flexBasis: "0%",
+    flexGrow: 1,
+    flexShrink: 0,
+    ...rest,
+    children: children
+  });
+}
+
+// Handles the vertical alignment of the side elements of the list item
+function ListItemSideContainer({
+  children,
+  side = 'left',
+  ...rest
+}) {
+  return /*#__PURE__*/jsx(View, {
+    flexDirection: "row",
+    marginLeft: side === 'right' ? 'kitt.2' : undefined,
+    marginRight: side === 'left' ? 'kitt.2' : undefined,
+    ...rest,
+    children: children
+  });
+}
+function ListItemSideContent({
+  children,
+  align = 'auto',
+  ...rest
+}) {
+  return /*#__PURE__*/jsx(View, {
+    alignSelf: align,
+    ...rest,
+    children: children
+  });
+}
+
+function ListItem({
+  children,
+  withPadding,
+  borders,
+  left,
+  right,
+  onPress,
+  ...rest
+}) {
+  const Wrapper = onPress ? Pressable$2 : Fragment$1;
+  const wrapperProps = onPress ? {
+    accessibilityRole: 'button',
+    onPress,
+    ...rest
+  } : undefined;
+  const containerProps = onPress ? undefined : rest;
+  return /*#__PURE__*/jsx(Wrapper, {
+    ...wrapperProps,
+    children: /*#__PURE__*/jsxs(View, {
+      flexDirection: "row",
+      paddingX: withPadding ? 'kitt.listItem.horizontalPadding' : undefined,
+      paddingY: withPadding ? 'kitt.listItem.verticalPadding' : undefined,
+      borderColor: "kitt.listItem.borderColor",
+      backgroundColor: "kitt.uiBackgroundLight",
+      borderTopWidth: borders === 'top' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
+      borderBottomWidth: borders === 'bottom' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
+      ...containerProps,
+      children: [left ? /*#__PURE__*/jsx(ListItemSideContainer, {
+        side: "left",
+        children: left
+      }) : null, /*#__PURE__*/jsx(ListItemContent, {
+        children: children
+      }), right ? /*#__PURE__*/jsx(ListItemSideContainer, {
+        side: "right",
+        children: right
+      }) : null]
+    })
+  });
+}
+ListItem.Content = ListItemContent;
+ListItem.SideContent = ListItemSideContent;
+ListItem.SideContainer = ListItemSideContainer;
+
+function BottomSheetActionsItem({
+  title,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Pressable$2, {
+    ...props,
+    children: /*#__PURE__*/jsx(ListItem, {
+      withPadding: true,
+      children: /*#__PURE__*/jsx(Typography.Text, {
+        variant: "bold",
+        base: "body",
+        children: title
+      })
+    })
+  });
+}
+
+function BottomSheetActions({
+  onBottomSheetActionsChange,
+  imagePickerOptions,
+  documentPickerOptions,
+  disabled
+}) {
+  const isPlatformIOS = Platform.OS === 'ios';
+  return /*#__PURE__*/jsxs(VStack, {
+    marginBottom: "kitt.8",
+    children: [/*#__PURE__*/jsx(ImagePicker, {
+      imagePickerOptions: imagePickerOptions,
+      disabled: disabled,
+      onImageSelected: onBottomSheetActionsChange,
+      children: /*#__PURE__*/jsx(BottomSheetActionsItem, {
+        title: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "account.BottomSheetActions.openLibrary",
+          values: {
+            isPlatformIOS
+          }
+        })
+      })
+    }), /*#__PURE__*/jsx(DocumentPicker, {
+      disabled: disabled,
+      documentPickerOptions: documentPickerOptions,
+      onDocumentUpload: onBottomSheetActionsChange,
+      children: /*#__PURE__*/jsx(BottomSheetActionsItem, {
+        title: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "account.BottomSheetActions.openFileExplorer",
+          values: {
+            isPlatformIOS
+          }
+        })
+      })
+    })]
+  });
+}
+
+function FilePicker({
+  onFileSelected,
+  children,
+  disabled,
+  imagePickerOptions,
+  documentPickerOptions
+}) {
+  const childElement = Children.only(children);
+  const {
+    bottomSheetRef,
+    BottomSheet
+  } = useStaticBottomSheet(BottomSheetActions);
+  const {
+    dismissAll
+  } = useBottomSheetModal();
+  const handleBottomSheetActionsChange = file => {
+    dismissAll();
+    onFileSelected(file);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/cloneElement(childElement, {
+      // ensure that the press event is not prevented by Button component
+      onPress: () => {
+        if (disabled) return;
+        childElement.props.onPress?.();
+        bottomSheetRef.current?.present({
+          onBottomSheetActionsChange: handleBottomSheetActionsChange,
+          imagePickerOptions,
+          documentPickerOptions
+        });
+      },
+      disabled
+    }), /*#__PURE__*/jsx(BottomSheet, {})]
+  });
+}
+
 const GoogleMapsApiKeyContext = /*#__PURE__*/createContext(undefined);
 function GoogleMapsApiKeyProvider({
   children,
@@ -7100,89 +7328,6 @@ function useKittMapConfig() {
   return context;
 }
 
-function ListItemContent({
-  children,
-  ...rest
-}) {
-  return /*#__PURE__*/jsx(View, {
-    alignSelf: "center",
-    flexBasis: "0%",
-    flexGrow: 1,
-    flexShrink: 0,
-    ...rest,
-    children: children
-  });
-}
-
-// Handles the vertical alignment of the side elements of the list item
-function ListItemSideContainer({
-  children,
-  side = 'left',
-  ...rest
-}) {
-  return /*#__PURE__*/jsx(View, {
-    flexDirection: "row",
-    marginLeft: side === 'right' ? 'kitt.2' : undefined,
-    marginRight: side === 'left' ? 'kitt.2' : undefined,
-    ...rest,
-    children: children
-  });
-}
-function ListItemSideContent({
-  children,
-  align = 'auto',
-  ...rest
-}) {
-  return /*#__PURE__*/jsx(View, {
-    alignSelf: align,
-    ...rest,
-    children: children
-  });
-}
-
-function ListItem({
-  children,
-  withPadding,
-  borders,
-  left,
-  right,
-  onPress,
-  ...rest
-}) {
-  const Wrapper = onPress ? Pressable$2 : Fragment$1;
-  const wrapperProps = onPress ? {
-    accessibilityRole: 'button',
-    onPress,
-    ...rest
-  } : undefined;
-  const containerProps = onPress ? undefined : rest;
-  return /*#__PURE__*/jsx(Wrapper, {
-    ...wrapperProps,
-    children: /*#__PURE__*/jsxs(View, {
-      flexDirection: "row",
-      paddingX: withPadding ? 'kitt.listItem.horizontalPadding' : undefined,
-      paddingY: withPadding ? 'kitt.listItem.verticalPadding' : undefined,
-      borderColor: "kitt.listItem.borderColor",
-      backgroundColor: "kitt.uiBackgroundLight",
-      borderTopWidth: borders === 'top' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
-      borderBottomWidth: borders === 'bottom' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
-      ...containerProps,
-      children: [left ? /*#__PURE__*/jsx(ListItemSideContainer, {
-        side: "left",
-        children: left
-      }) : null, /*#__PURE__*/jsx(ListItemContent, {
-        children: children
-      }), right ? /*#__PURE__*/jsx(ListItemSideContainer, {
-        side: "right",
-        children: right
-      }) : null]
-    })
-  });
-}
-ListItem.Content = ListItemContent;
-ListItem.SideContent = ListItemSideContent;
-ListItem.SideContainer = ListItemSideContainer;
-
 const SvgMarkerLargeinline = props => /*#__PURE__*/jsxs("svg", {
   fill: "currentColor",
   viewBox: "0 0 54 56",
@@ -11281,5 +11426,5 @@ function VerticalSteps({
 }
 VerticalSteps.Step = ExternalStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, HStack, Highlight, Icon, IconButton, Image, InputAddress, InputEmail, InputFeedback, InputField, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InputAddress, InputEmail, InputFeedback, InputField, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index-node-20.10.es.mjs.map