@ornikar/kitt-universal 9.12.2 → 9.13.0

package/dist/index-node-14.17.cjs.js

@@ -9,12 +9,13 @@ const Animated = require('react-native-reanimated');
 const styled = require('styled-components/native');
 const jsxRuntime = require('react/jsx-runtime');
 const kittIcons = require('@ornikar/kitt-icons');
+const bottomSheet$1 = require('@gorhom/bottom-sheet');
+const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const twemojiParser = require('twemoji-parser');
 const WebBrowser = require('expo-web-browser');
 const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactIntl = require('react-intl');
 const react = require('@linaria/react');
-const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const Svg = require('react-native-svg');
 const picker$1 = require('@react-native-picker/picker');
 const expoLinearGradient = require('expo-linear-gradient');
@@ -1005,6 +1006,83 @@ function Avatar({
   });
 }
 
+const BottomSheetContainerView = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "BottomSheet__BottomSheetContainerView",
+  componentId: "kitt-universal__sc-12w4qg8-0"
+})(["padding:", ";"], ({
+  theme
+}) => `${theme.kitt.bottomSheet.container.padding}px`);
+
+function BottomSheetComp({
+  children: Content,
+  hasScrollView = false,
+  hasBackdrop = true,
+  hasHandle = true
+}, ref) {
+  const Wrapper = React.useMemo(() => hasScrollView ? bottomSheet$1.BottomSheetScrollView : bottomSheet$1.BottomSheetView, [hasScrollView]);
+  const theme = /*#__PURE__*/styled.useTheme();
+  const initialSnapPoints = React.useMemo(() => ['CONTENT_HEIGHT'], []);
+  const {
+    animatedHandleHeight,
+    animatedSnapPoints,
+    animatedContentHeight,
+    handleContentLayout
+  } = bottomSheet$1.useBottomSheetDynamicSnapPoints(initialSnapPoints);
+  return /*#__PURE__*/jsxRuntime.jsx(bottomSheet$1.BottomSheetModal, {
+    ref: ref,
+    enablePanDownToClose: true,
+    snapPoints: animatedSnapPoints,
+    index: 0,
+    handleHeight: animatedHandleHeight,
+    handleIndicatorStyle: {
+      width: 40,
+      height: 4,
+      borderRadius: 4,
+      backgroundColor: theme.kitt.bottomSheet.handle.backgroundColor
+    },
+    handleComponent: props => hasHandle ? /*#__PURE__*/jsxRuntime.jsx(bottomSheet$1.BottomSheetHandle, { ...props
+    }) : null,
+    backdropComponent: props => hasBackdrop ? /*#__PURE__*/jsxRuntime.jsx(bottomSheet$1.BottomSheetBackdrop, { ...props,
+      opacity: 0.25,
+      appearsOnIndex: 0,
+      disappearsOnIndex: -1
+    }) : null,
+    contentHeight: animatedContentHeight,
+    children: ({
+      data
+    }) => /*#__PURE__*/jsxRuntime.jsx(reactNativeSafeAreaContext.SafeAreaView, {
+      edges: ['bottom'],
+      onLayout: handleContentLayout,
+      children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
+        children: typeof Content === 'function' ? /*#__PURE__*/jsxRuntime.jsx(Content, { ...data
+        }) : Content
+      })
+    })
+  });
+}
+
+const BottomSheet = /*#__PURE__*/React.forwardRef(BottomSheetComp);
+BottomSheet.View = BottomSheetContainerView;
+
+function useBottomSheet() {
+  const ref = React.useRef(null);
+  return ref;
+}
+
+function useStaticBottomSheet(Content) {
+  const bottomSheetRef = React.useRef(null);
+  const BottomSheetMemoized = React.useMemo(() => function (props) {
+    return /*#__PURE__*/jsxRuntime.jsx(BottomSheet, { ...props,
+      ref: bottomSheetRef,
+      children: Content
+    });
+  }, [Content]);
+  return {
+    bottomSheetRef,
+    BottomSheet: BottomSheetMemoized
+  };
+}
+
 const Container$5 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
@@ -1977,6 +2055,17 @@ const avatar = {
   }
 };
 
+const spacing = 4;
+
+const bottomSheet = {
+  container: {
+    padding: spacing * 4
+  },
+  handle: {
+    backgroundColor: lateOceanColorPalette.black200
+  }
+};
+
 const button = {
   borderRadius: 30,
   borderWidth: {
@@ -2402,8 +2491,6 @@ const fullScreenModal = {
   }
 };
 
-const spacing = 4;
-
 const highlight = {
   borderRadius: {
     base: spacing * 5
@@ -2613,6 +2700,7 @@ const theme = {
   avatar,
   breakpoints,
   button,
+  bottomSheet,
   card,
   choices,
   dialogModal,
@@ -6276,6 +6364,7 @@ function MatchWindowSize({
 exports.useWindowSize = reactNative.useWindowDimensions;
 exports.Actions = Actions;
 exports.Avatar = Avatar;
+exports.BottomSheet = BottomSheet;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
@@ -6348,8 +6437,10 @@ exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;
 exports.styledTextInputMixin = styledTextInputMixin;
 exports.theme = theme;
+exports.useBottomSheet = useBottomSheet;
 exports.useKittTheme = useKittTheme;
 exports.useMatchWindowSize = useMatchWindowSize;
+exports.useStaticBottomSheet = useStaticBottomSheet;
 exports.useStoryBlockColor = useStoryBlockColor;
 exports.withTheme = withTheme;
 Object.keys(kittIcons).forEach(function (k) {