@ornikar/kitt-universal 7.5.0 → 7.6.0

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

@@ -5,16 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const kittIcons = require('@ornikar/kitt-icons');
 const reactNative = require('react-native');
 const styled = require('styled-components/native');
-const react = require('react');
+const React = require('react');
 const jsxRuntime = require('react/jsx-runtime');
 const Animated = require('react-native-reanimated');
 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$1 = require('@linaria/react');
+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');
 const reactNative$1 = require('@floating-ui/react-native');
 const addons = require('@storybook/addons');
@@ -22,6 +23,7 @@ const addons = require('@storybook/addons');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
 const DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
 const Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
@@ -45,7 +47,7 @@ function Icon({
   align,
   color
 }) {
-  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
+  const clonedIcon = /*#__PURE__*/React.cloneElement(icon, {
     color
   });
   return /*#__PURE__*/jsxRuntime.jsx(IconContainer$1, {
@@ -104,10 +106,10 @@ const KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-const IsHeaderTypographyContext = /*#__PURE__*/react.createContext(undefined);
-const TypographyColorContext = /*#__PURE__*/react.createContext('black');
+const IsHeaderTypographyContext = /*#__PURE__*/React.createContext(undefined);
+const TypographyColorContext = /*#__PURE__*/React.createContext('black');
 function useTypographyColor() {
-  return react.useContext(TypographyColorContext);
+  return React.useContext(TypographyColorContext);
 }
 const getTypographyTypeConfigKey = theme => {
   const isMediumOrAbove = theme.responsive.matchWindowSize({
@@ -133,7 +135,12 @@ function getTypographyTypeConfig(type, theme) {
 const StyledTypography = /*#__PURE__*/styled__default.Text.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "kitt-universal__sc-1dz700q-0"
-})(["", " ", ""], ({
+})(["", ";", " ", ""], ({
+  $textAlign
+}) => {
+  if (!$textAlign) return undefined;
+  return styled.css(["text-align:", ";"], $textAlign);
+}, ({
   theme,
   $isHeader,
   $typeForCurrentWindowSize,
@@ -144,18 +151,7 @@ const StyledTypography = /*#__PURE__*/styled__default.Text.withConfig({
     bodies
   } = theme.kitt.typography.types;
   const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return `
-      /* type */
-      ${!$typeForCurrentWindowSize ? '' : `
-  font-family: ${$isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant]};
-  font-size: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize}px;
-  line-height: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight}px;
-    `}
-
-    /* variant */
-    font-weight: ${$isHeader ? headers.fontWeight : bodies.fontWeight[$variant]};
-    font-style: ${$isHeader ? headers.fontStyle : bodies.fontStyle[$variant]};
-  `;
+  return styled.css(["", " font-weight:", ";font-style:", ";"], !$typeForCurrentWindowSize ? '' : styled.css(["font-family:", ";font-size:", "px;line-height:", "px;"], $isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant], $isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize, $isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight), $isHeader ? headers.fontWeight : bodies.fontWeight[$variant], $isHeader ? headers.fontStyle : bodies.fontStyle[$variant]);
 }, ({
   theme,
   $color
@@ -194,9 +190,10 @@ function Typography({
   large,
   variant,
   color,
+  textAlign,
   ...otherProps
 }) {
-  const isHeaderTypographyInContext = react.useContext(IsHeaderTypographyContext);
+  const isHeaderTypographyInContext = React.useContext(IsHeaderTypographyContext);
   const hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
   const {
     base: baseOrDefaultToBody,
@@ -208,22 +205,21 @@ function Typography({
   const typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(baseOrDefaultToBody, small, medium, large);
   const isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
   const nonNullableVariant = variant ?? (isHeader ? 'bold' : 'regular');
-  const content = baseOrDefaultToBody ? /*#__PURE__*/jsxRuntime.jsx(IsHeaderTypographyContext.Provider, {
-    value: isHeader,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
-      $color: colorOrDefaultToBlack,
-      $isHeader: isHeader,
-      $typeForCurrentWindowSize: typeForCurrentWindowSize,
-      $variant: nonNullableVariant,
-      accessibilityRole: accessibilityRole || undefined,
-      ...otherProps
-    })
-  }) : /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
+  const sharedProps = {
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
     accessibilityRole: accessibilityRole || undefined,
+    $textAlign: textAlign,
     ...otherProps
+  };
+  const content = baseOrDefaultToBody ? /*#__PURE__*/jsxRuntime.jsx(IsHeaderTypographyContext.Provider, {
+    value: isHeader,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTypography, { ...sharedProps,
+      $typeForCurrentWindowSize: typeForCurrentWindowSize,
+      ...otherProps
+    })
+  }) : /*#__PURE__*/jsxRuntime.jsx(StyledTypography, { ...sharedProps
   });
   return color ? /*#__PURE__*/jsxRuntime.jsx(TypographyColorContext.Provider, {
     value: color,
@@ -395,7 +391,7 @@ const StyledAnimatedView = /*#__PURE__*/styled__default(Animated__default.View).
 })(["border-radius:", "px;"], ({
   theme
 }) => theme.kitt.button.borderRadius);
-const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
+const AnimatedButtonPressable = /*#__PURE__*/React.forwardRef(({
   children,
   disabled,
   accessibilityRole,
@@ -747,7 +743,7 @@ const StyledDisabled = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.button.borderRadius);
 
 const allowedGhostTypes = ['primary', 'default'];
-const Button = /*#__PURE__*/react.forwardRef(({
+const Button = /*#__PURE__*/React.forwardRef(({
   children,
   type = 'default',
   variant = 'default',
@@ -837,7 +833,7 @@ function Emoji({
   size,
   style
 }) {
-  const [emojiData] = react.useMemo(() => twemojiParser.parse(emoji, {
+  const [emojiData] = React.useMemo(() => twemojiParser.parse(emoji, {
     // on native plaforms, you can't display svg as Image
     assetType: reactNative.Platform.OS === 'web' ? 'svg' : 'png'
   }), [emoji]);
@@ -1371,6 +1367,30 @@ const pageLoader = {
   }
 };
 
+const picker = {
+  ios: {
+    default: {
+      fontFamily: typography.types.bodies.fontFamily.regular,
+      ...typography.types.bodies.configs.body.baseAndSmall,
+      fontSize: 16,
+      color: typography.colors['black-light']
+    },
+    selected: {
+      color: typography.colors.primary
+    }
+  },
+  android: {
+    padding: '12px 24px',
+    default: {
+      backgroundColor: colors.transparent
+    },
+    selected: {
+      backgroundColor: colors.primary,
+      color: typography.colors.white
+    }
+  }
+};
+
 const shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1470,6 +1490,7 @@ const theme = {
   iconButton,
   listItem,
   pageLoader,
+  picker,
   shadows,
   skeleton,
   tag,
@@ -1528,7 +1549,7 @@ function createWindowSizeHelper(dimensions) {
 
 function useKittTheme() {
   const dimensions = reactNative.useWindowDimensions();
-  return react.useMemo(() => {
+  return React.useMemo(() => {
     return {
       kitt: theme,
       responsive: createWindowSizeHelper(dimensions)
@@ -1878,7 +1899,7 @@ function StyleWebWrapper({
 // }
 function withTheme(WrappedComponent) {
   // eslint-disable-next-line prefer-arrow-callback
-  return /*#__PURE__*/react.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.forwardRef(function (props, ref) {
     const theme = /*#__PURE__*/styled.useTheme();
     return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
       ref: ref,
@@ -1888,7 +1909,7 @@ function withTheme(WrappedComponent) {
   });
 }
 
-const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("div")({
+const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react.styled("div")({
   name: "PressableIconButtonWebWrapper",
   class: "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
   vars: {
@@ -2143,7 +2164,7 @@ function IconButton({
   });
 }
 
-const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
+const OnCloseContext = /*#__PURE__*/React.createContext(() => {});
 
 const HeaderView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Header__HeaderView",
@@ -2177,7 +2198,7 @@ function ModalHeader({
   right,
   children
 }) {
-  const onClose = react.useContext(OnCloseContext);
+  const onClose = React.useContext(OnCloseContext);
   const isIconLeft = !!left;
   return /*#__PURE__*/jsxRuntime.jsxs(HeaderView, {
     children: [isIconLeft && /*#__PURE__*/jsxRuntime.jsx(LeftIconView, {
@@ -2293,7 +2314,7 @@ function ModalPlatformDateTimePicker({
   onChange,
   ...props
 }) {
-  const [currentValue, setCurrentValue] = react.useState(value); // Prevent unsynced value between the modal and its parent state
+  const [currentValue, setCurrentValue] = React.useState(value); // Prevent unsynced value between the modal and its parent state
 
   return /*#__PURE__*/jsxRuntime.jsx(Modal, {
     visible: Boolean(isVisible),
@@ -2342,9 +2363,9 @@ function DatePicker({
   pickerDefaultDate,
   ...props
 }) {
-  const [isPickerUIVisible, setIsPickerUIVisible] = react.useState(false);
-  const [isFocused, setIsFocused] = react.useState(false);
-  const [currentValue, setCurrentValue] = react.useState(value);
+  const [isPickerUIVisible, setIsPickerUIVisible] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [currentValue, setCurrentValue] = React.useState(value);
 
   if (reactNative.Platform.OS === 'android') {
     return /*#__PURE__*/jsxRuntime.jsx(DatePickerAndroid, {
@@ -2422,7 +2443,7 @@ const RightInputContainer = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "InputText__RightInputContainer",
   componentId: "kitt-universal__sc-uke279-1"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
-const InputText = /*#__PURE__*/react.forwardRef(({
+const InputText = /*#__PURE__*/React.forwardRef(({
   id,
   right,
   minHeight,
@@ -2440,7 +2461,7 @@ const InputText = /*#__PURE__*/react.forwardRef(({
   ...props
 }, ref) => {
   const theme = /*#__PURE__*/styled.useTheme();
-  const [isFocused, setIsFocused] = react.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
   const state = internalForceState || getInputUIState({
     isFocused,
     isDisabled: disabled,
@@ -2592,7 +2613,7 @@ function InputPassword({
   right,
   ...props
 }) {
-  const [isVisible, setIsVisible] = react.useState(Boolean(isPasswordDefaultVisible));
+  const [isVisible, setIsVisible] = React.useState(Boolean(isPasswordDefaultVisible));
   return /*#__PURE__*/jsxRuntime.jsx(InputText, { ...props,
     textContentType: "password",
     autoCompleteType: "password",
@@ -2876,8 +2897,8 @@ function FullScreenModalHeader({
     top
   } = reactNativeSafeAreaContext.useSafeAreaInsets();
   const dimensions = reactNative.useWindowDimensions();
-  const [leftWidth, setLeftWidth] = react.useState(0);
-  const [rightWidth, setRightWidth] = react.useState(0);
+  const [leftWidth, setLeftWidth] = React.useState(0);
+  const [rightWidth, setRightWidth] = React.useState(0);
 
   const handleLayoutChange = (event, side) => {
     // Prevents react to nullify event on rerenders
@@ -2933,15 +2954,15 @@ function SpinningIcon({
     throw new Error(`Invalid color passed to SpinningIcon: ${String(color)}`);
   }
 
-  const clonedIcon = /*#__PURE__*/react.cloneElement(icon, {
+  const clonedIcon = /*#__PURE__*/React.cloneElement(icon, {
     color
   });
-  const animationRef = react.useRef(new reactNative.Animated.Value(0));
+  const animationRef = React.useRef(new reactNative.Animated.Value(0));
   const rotation = animationRef.current.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '360deg']
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (process.env.NODE_ENV === 'test') return undefined;
     const animation = reactNative.Animated.loop(reactNative.Animated.timing(animationRef.current, {
       toValue: 1,
@@ -3060,7 +3081,7 @@ function ListItem({
   onPress,
   ...rest
 }) {
-  const Wrapper = onPress ? reactNative.Pressable : react.Fragment;
+  const Wrapper = onPress ? reactNative.Pressable : React.Fragment;
   const wrapperProps = onPress ? {
     accessibilityRole: 'button',
     onPress,
@@ -3333,7 +3354,7 @@ function AnimatedBackgroundCircle() {
     colors,
     size
   } = theme.kitt.pageLoader;
-  react.useEffect(() => {
+  React.useEffect(() => {
     const {
       delay,
       circleBackgroundFillDuration,
@@ -3366,7 +3387,7 @@ function AnimatedFillCircleContainer({
   const {
     animation
   } = theme.kitt.pageLoader;
-  react.useEffect(() => {
+  React.useEffect(() => {
     const {
       delay
     } = animation;
@@ -3412,7 +3433,7 @@ function AnimatedFilledCircle() {
     animation,
     colors
   } = theme.kitt.pageLoader;
-  react.useEffect(() => {
+  React.useEffect(() => {
     const {
       delay,
       filledCircleFillDuration,
@@ -3455,6 +3476,97 @@ function PageLoader() {
   });
 }
 
+const ContainerPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "PickerItem__ContainerPressable",
+  componentId: "kitt-universal__sc-w7n3sn-0"
+})(["padding:", ";background-color:", ";"], ({
+  theme
+}) => theme.kitt.picker.android.padding, ({
+  theme,
+  $isSelected
+}) => $isSelected ? theme.kitt.picker.android.selected.backgroundColor : theme.kitt.picker.android.default.backgroundColor); // This item is for Android only, iOS uses its own implementation and web is not supported yet
+
+function PickerItem({
+  label,
+  value,
+  isSelected,
+  onPress
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(ContainerPressable, {
+    accessibilityRole: "button",
+    accessibilityState: {
+      selected: isSelected
+    },
+    $isSelected: isSelected,
+    onPress: onPress ? () => onPress(value) : undefined,
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body",
+      color: isSelected ? 'white' : undefined,
+      children: label
+    })
+  });
+}
+
+function Picker({
+  children,
+  isVisible,
+  title,
+  initialValue,
+  validateButtonLabel,
+  testID,
+  onValueSelected,
+  onClose
+}) {
+  const [value, setValue] = React.useState(initialValue);
+  return /*#__PURE__*/jsxRuntime.jsxs(Modal, {
+    visible: isVisible,
+    onClose: onClose,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+        base: "body",
+        variant: "bold",
+        children: title
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+      children: reactNative.Platform.OS === 'ios' ? /*#__PURE__*/jsxRuntime.jsx(picker$1.Picker, {
+        testID: testID,
+        selectedValue: value,
+        itemStyle: theme.picker.ios.default,
+        onValueChange: itemValue => setValue(itemValue),
+        children: React__default.Children.map(children, child => {
+          const item = child; // iOS Picker doesn't support a custom Item component, we need to override its props manually for the selected one
+
+          return /*#__PURE__*/React.cloneElement(item, {
+            color: item.props.value === value ? theme.picker.ios.selected.color : undefined
+          });
+        })
+      }) : /*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
+        testID: testID,
+        children: React__default.Children.map(children, child => {
+          const item = child;
+          return /*#__PURE__*/React.cloneElement(item, {
+            onPress: newValue => setValue(newValue),
+            isSelected: item.props.value === value
+          });
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Modal.Footer, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+        stretch: true,
+        type: "primary",
+        onPress: () => {
+          onValueSelected(value);
+          onClose();
+        },
+        children: validateButtonLabel || /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
+          id: "kitt-universal.Picker.validate"
+        })
+      })
+    })]
+  });
+}
+Picker.Item = PickerItem;
+
 const Container$2 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "SkeletonContent__Container",
   componentId: "kitt-universal__sc-1u3chjb-0"
@@ -3470,7 +3582,7 @@ function SkeletonContent({
 }) {
   const theme = /*#__PURE__*/styled.useTheme();
   const sharedX = Animated.useSharedValue(0);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isLoading) {
       sharedX.value = Animated.withRepeat(Animated.withTiming(1, {
         duration: theme.kitt.skeleton.animationDuration,
@@ -3526,7 +3638,7 @@ function Skeleton({
   isLoading,
   style
 }) {
-  const [width, setWidth] = react.useState(0);
+  const [width, setWidth] = React.useState(0);
   return /*#__PURE__*/jsxRuntime.jsx(SkeletonContainer, {
     style: style,
     onLayout: ({
@@ -3612,10 +3724,10 @@ const getTypographyColorFromBlockColor = (color = 'transparent') => {
   }
 };
 
-const StoryBlockBackgroundContext = /*#__PURE__*/react.createContext('transparent');
-const StoryBlockColorContext = /*#__PURE__*/react.createContext('black');
+const StoryBlockBackgroundContext = /*#__PURE__*/React.createContext('transparent');
+const StoryBlockColorContext = /*#__PURE__*/React.createContext('black');
 const useStoryBlockColor = color => {
-  const storyBlockColor = react.useContext(StoryBlockColorContext);
+  const storyBlockColor = React.useContext(StoryBlockColorContext);
   return color || storyBlockColor;
 };
 const StyledStoryBlockView = /*#__PURE__*/styled__default.View.withConfig({
@@ -3870,14 +3982,14 @@ function StoryGridRow({
 
   if (width < breakpointValue) {
     return /*#__PURE__*/jsxRuntime.jsx(SmallScreenRow, {
-      children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(SmallScreenCol, {
+      children: React.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(SmallScreenCol, {
         children: child
       }))
     });
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(FlexRow, {
-    children: react.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(FlexCol, {
+    children: React.Children.map(children, child => /*#__PURE__*/jsxRuntime.jsx(FlexCol, {
       children: child
     }))
   });
@@ -3992,7 +4104,7 @@ function ModalDateTimePicker({
   onChange,
   onClose
 }) {
-  const [currentValue, setCurrentValue] = react.useState(value); // Prevent unsynced value between the modal and its parent state
+  const [currentValue, setCurrentValue] = React.useState(value); // Prevent unsynced value between the modal and its parent state
 
   return /*#__PURE__*/jsxRuntime.jsx(Modal, {
     visible: Boolean(visible),
@@ -4036,8 +4148,8 @@ const timePickerPlaceholder = '--:--';
 const formatNumberToTimeString = time => `${String(time).padStart(2, '0')}`;
 const formatDateToTimeString = date => `${formatNumberToTimeString(date.getHours())}:${formatNumberToTimeString(date.getMinutes())}`;
 const useTimePicker = (value, onChange, onBlur, disabled, defaultValue) => {
-  const [isTimePickerModalVisible, setIsTimePickerModalVisible] = react.useState(false);
-  const todayAtNoon = react.useMemo(() => {
+  const [isTimePickerModalVisible, setIsTimePickerModalVisible] = React.useState(false);
+  const todayAtNoon = React.useMemo(() => {
     const now = new Date(2000, 0, 1, 12);
     return new Date(now.getFullYear(), now.getMonth(), now.getDay(), 12);
   }, []);
@@ -4229,7 +4341,7 @@ function Tooltip({
       padding
     })]
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!onUpdate) return;
     onUpdate({
       x,
@@ -4307,7 +4419,7 @@ function TypographyEmoji({
   });
 }
 
-const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react$1.styled("span")({
+const TypographyLinkWebWrapper = withTheme( /*#__PURE__*/react.styled("span")({
   name: "TypographyLinkWebWrapper",
   class: "kitt-u_TypographyLinkWebWrapper_tcwz3nt",
   vars: {
@@ -4440,6 +4552,7 @@ exports.Modal = Modal;
 exports.Notification = Notification;
 exports.Overlay = Overlay;
 exports.PageLoader = PageLoader;
+exports.Picker = Picker;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
 exports.Skeleton = Skeleton;