@ovotech/element-native 5.3.0 → 5.4.1

package/dist/src/components/Cards/IconDataCard/IconDataCard.styles.d.ts

@@ -3443,7 +3443,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
 }, {}, never>;
 export declare const Metric: import("styled-components").StyledComponent<(props: import("react").PropsWithChildren<import("react-native").TextProps & Omit<{
     inverted?: boolean;
-    level: "xl" | "2xl" | "3xl" | "4xl";
+    level: import("../../Heading/Heading").HeadingLevel;
     variant?: "brand" | "surface";
 }, "level">>) => import("react/jsx-runtime").JSX.Element, {
     color: {
@@ -4020,7 +4020,7 @@ export declare const Metric: import("styled-components").StyledComponent<(props:
 }, {}, never>;
 export declare const SubMetric: import("styled-components").StyledComponent<(props: import("react").PropsWithChildren<import("react-native").TextProps & Omit<{
     inverted?: boolean;
-    level: "xl" | "2xl" | "3xl" | "4xl";
+    level: import("../../Heading/Heading").HeadingLevel;
     variant?: "brand" | "surface";
 }, "level">>) => import("react/jsx-runtime").JSX.Element, {
     color: {

package/dist/src/components/Cards/LinkTextCard/LinkTextCard.styles.d.ts

@@ -2879,7 +2879,7 @@ export declare const ImageContent: import("styled-components").StyledComponent<t
 }, {}, never>;
 export declare const Title: import("styled-components").StyledComponent<(props: import("react").PropsWithChildren<import("react-native").TextProps & Omit<{
     inverted?: boolean;
-    level: "xl" | "2xl" | "3xl" | "4xl";
+    level: import("../../Heading/Heading").HeadingLevel;
     variant?: "brand" | "surface";
 }, "level">>) => import("react/jsx-runtime").JSX.Element, {
     color: {

package/dist/src/components/CurrencyField/CurrencyField.d.ts

@@ -1,5 +1,5 @@
 import { CurrencyInputProps } from '../CurrencyInput';
 import { FieldProps } from '../Field';
 type Props = Omit<FieldProps, 'children'> & CurrencyInputProps;
-export declare const CurrencyField: ({ ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const CurrencyField: ({ ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/CurrencyField/CurrencyField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CurrencyInput } from '../CurrencyInput';
 import { Field } from '../Field';
-export const CurrencyField = ({ ...props }) => {
-    return (_jsx(Field, { affixWidth: 40, ...props, children: _jsx(CurrencyInput, { ref: props.ref }) }));
+export const CurrencyField = ({ ref, ...props }) => {
+    return (_jsx(Field, { affixWidth: 40, ...props, children: _jsx(CurrencyInput, { ref: ref }) }));
 };

package/dist/src/components/EmailField/EmailField.d.ts

@@ -1,5 +1,5 @@
 import { FieldProps } from '../Field';
 import { InputProps } from '../Input/Input';
 type Props = Omit<FieldProps, 'children'> & InputProps;
-export declare const EmailField: ({ ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const EmailField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/EmailField/EmailField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { EmailInput } from '../EmailInput';
 import { Field } from '../Field';
-export const EmailField = ({ ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(EmailInput, {}) }));
+export const EmailField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(EmailInput, { ref: ref }) }));
 };

package/dist/src/components/Grid/Col.js

@@ -1,25 +1,27 @@
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
-const StyledCol = styled.View(({ theme, span = 12, small, medium, large, smallAndUp, mediumAndUp, largeAndUp, }) => {
+const StyledCol = styled.View(({ theme, span, xsmallAndUp, small, smallAndUp, medium, mediumAndUp }) => {
     const COLS = 12;
-    const gutter = mediumAndUp ? theme.space[800] : theme.space[400];
-    const percentage = (span / COLS) * 100;
+    const gutter = mediumAndUp ? theme.space[600] : theme.space[400];
+    const percentage = span ? (span / COLS) * 100 : 100;
     const smallPercentage = small ? (small / COLS) * 100 : percentage;
     const mediumPercentage = medium ? (medium / COLS) * 100 : smallPercentage;
-    const largePercentage = large ? (large / COLS) * 100 : mediumPercentage;
-    const maxWidth = largeAndUp
-        ? largePercentage
-        : mediumAndUp
-            ? mediumPercentage
-            : smallAndUp
-                ? smallPercentage
-                : percentage;
+    let maxWidth;
+    if (mediumAndUp) {
+        maxWidth = mediumPercentage;
+    }
+    else if (smallAndUp || xsmallAndUp) {
+        maxWidth = span ? 50 : 100;
+    }
+    else {
+        maxWidth = 100;
+    }
     return css `
       flex: 0 0 auto;
       padding-left: ${numToPx(gutter / 2)};
       padding-right: ${numToPx(gutter / 2)};
-      margin-bottom: ${numToPx(gutter)};
+      margin-bottom: ${numToPx(theme.space[smallAndUp ? 800 : 600])};
       max-width: ${maxWidth}%;
       width: 100%;
     `;

package/dist/src/components/Grid/Row.js

@@ -1,23 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
+import { numToPx } from '../..';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 const StyledRow = styled.View(({ theme, isNested, smallAndUp, mediumAndUp }) => {
-    const gutter = mediumAndUp ? theme.space[800] : theme.space[400];
-    const margin = smallAndUp ? theme.space[800] : theme.space[400];
-    /* We need to make up for the half gutter that is added to the left and right of a column, between the small and medium breakpoints */
-    const additionalMargin = smallAndUp ? (margin - gutter) / 2 : 0;
+    const rowGap = mediumAndUp || smallAndUp ? theme.space[800] : theme.space[600];
+    const colGap = mediumAndUp ? theme.space[600] : theme.space[400];
     return css `
-      padding-left: ${numToPx(margin / 2 + additionalMargin)};
-      padding-right: ${numToPx(margin / 2 + additionalMargin)};
       margin: 0 auto;
-      max-width: ${theme.breakpoint.large + margin}px;
+      max-width: ${theme.breakpoint.large + rowGap}px;
       width: 100%;
 
       ${isNested
         ? `
-      margin-left: -${numToPx(margin / 2)};
-      margin-right: -${numToPx(margin / 2)};
+      margin-left: -${numToPx(colGap / 2)};
+      margin-right: -${numToPx(colGap / 2)};
       width: auto;
       max-width: 200%; /* max width none not supported in RN */
     `

package/dist/src/components/Heading/Heading.d.ts

@@ -1,10 +1,12 @@
 import { PropsWithChildren } from 'react';
 import { TextProps } from 'react-native';
+export type HeadingLevel = 'xl' | '2xl' | '3xl' | '4xl';
 type HeadingProps = {
     inverted?: boolean;
-    level: 'xl' | '2xl' | '3xl' | '4xl';
+    level: HeadingLevel;
     variant?: 'brand' | 'surface';
 };
+export declare const Heading: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & HeadingProps>) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading1: (props: PropsWithChildren<TextProps & Omit<HeadingProps, "level">>) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading2: (props: PropsWithChildren<TextProps & Omit<HeadingProps, "level">>) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading3: (props: PropsWithChildren<TextProps & Omit<HeadingProps, "level">>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Heading/Heading.js

@@ -21,7 +21,7 @@ const StyledHeading = styled.Text(({ theme, smallAndUp, inverted, level, variant
       color: ${color};
     `;
 });
-const Heading = ({ accessibilityRole = 'header', ...rest }) => {
+export const Heading = ({ accessibilityRole = 'header', ...rest }) => {
     const breakpoints = useBreakpoint();
     return (_jsx(StyledHeading, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
 };

package/dist/src/components/NavHeader/NavHeader.d.ts

@@ -1,24 +1,27 @@
-import { IconNameExtended } from '../../providers';
-export type RightActionConfig = {
-    iconName?: IconNameExtended;
-    onActionPress?: () => void;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
+import { IconName } from '../../providers';
+export type Layer = 0 | 1 | 2 | 3 | 4;
+type ActionButton = {
+    icon?: IconName;
+    onPress: () => void;
 };
-export type NavHeaderProps = {
+type StepCounterProps = {
+    totalSteps: number;
+    currentStep: number;
+};
+export type ScrollState = 'initial' | 'scrollStart' | 'scrolling' | 'scrollBack';
+export type NavHeaderProps<L extends Layer> = {
+    layer: L;
     title?: string;
-    scrolled: boolean;
-    canGoBack?: boolean;
-    backButtonText?: string;
-    topOffset?: number;
-    rightActionConfig?: RightActionConfig;
-    onBackButtonPress?: () => void;
-    /**
-     * This callback is used to send the height of the NavContainer
-     * to the app side. It will be used to set content offset
-     * because NavHeader is absolutely positioned.
-     * @param height - height of the expanded NavHeader
-     */
-    onHeaderHeightChange?: (height: number) => void;
+    actionButtons?: L extends 0 | 1 ? {
+        account?: ActionButton;
+        help?: ActionButton;
+    } : {
+        help?: ActionButton;
+    };
+    onBackPress?: () => void;
+    stepCounter?: StepCounterProps;
+    scrollState: ScrollState;
+    loading?: boolean;
 };
-export declare const NavHeader: ({ title, scrolled, canGoBack, rightActionConfig, topOffset, backButtonText, onHeaderHeightChange, onBackButtonPress, }: NavHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavHeader: <L extends Layer>({ layer, onBackPress, actionButtons, title, stepCounter, scrollState, loading, }: NavHeaderProps<L>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/NavHeader/NavHeader.js

@@ -1,33 +1,130 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { Action } from '../ActionList';
-import { Button } from '../Button';
-import { BackActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, HeaderGap, NavContainer, NavWrapper, } from './NavHeader.styles';
-const FADE_ANIMATION_DURATION = 200;
-export const NavHeader = ({ title, scrolled, canGoBack, rightActionConfig, topOffset = 0, backButtonText = 'Back', onHeaderHeightChange, onBackButtonPress, }) => {
-    const hasRightAction = !!rightActionConfig;
-    const hasTitle = title !== undefined && title?.length > 0;
-    const layoutHeight = useSharedValue(0);
-    const animatedHeightStyle = useAnimatedStyle(() => {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { Platform } from 'react-native';
+import { ComplexAnimationBuilder, Easing, FadeInUp, LinearTransition, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useBreakpoint } from '../../hooks';
+import { Heading, Heading2, Heading3, Heading4, } from '../Heading/Heading';
+import { P } from '../P';
+import { Strong } from '../Strong';
+import { HeaderContainer, NavBackButton, NavContainer, ShadowContainer, SideContainer, SkeletonNavHeading, TitleContainer, } from './NavHeader.styles';
+import { ActionButtons } from './NavHeaderComponents/ActionButtons';
+import { StepCounterBars } from './NavHeaderComponents/StepCounterBars';
+import { getTitleLength } from './utils';
+const baseStyle = {
+    hasDropShadow: false,
+    isCollapsed: false,
+};
+const hasDropShadowOnly = {
+    hasDropShadow: true,
+    isCollapsed: false,
+};
+const isCollapsedAndDropShadow = {
+    hasDropShadow: true,
+    isCollapsed: true,
+};
+const scrollStyleMap = {
+    0: {
+        initial: baseStyle,
+        scrollStart: baseStyle,
+        scrolling: isCollapsedAndDropShadow,
+        scrollBack: hasDropShadowOnly,
+    },
+    1: {
+        initial: baseStyle,
+        scrollStart: hasDropShadowOnly,
+        scrolling: isCollapsedAndDropShadow,
+        scrollBack: hasDropShadowOnly,
+    },
+    2: {
+        initial: hasDropShadowOnly,
+        scrollStart: hasDropShadowOnly,
+        scrolling: hasDropShadowOnly,
+        scrollBack: hasDropShadowOnly,
+    },
+};
+const LayerHeadingMap = {
+    0: '3xl',
+    1: '2xl',
+    2: 'xl',
+    3: 'xl',
+    4: 'xl',
+};
+const ANIMATION_DURATION = 300;
+export const NavHeader = ({ layer, onBackPress, actionButtons, title, stepCounter, scrollState, loading = false, }) => {
+    const displayTitle = getTitleLength({ layer, title });
+    const platform = Platform.OS;
+    const titleIsCentreAligned = layer > 1 && platform === 'ios';
+    const { isCollapsed, hasDropShadow } = scrollStyleMap[Math.min(layer, 2)][scrollState];
+    const shadowOpacity = useSharedValue(0.5);
+    const elevation = useSharedValue(9);
+    const LT = LinearTransition.duration(ANIMATION_DURATION);
+    const FADE_IN_DISTANCE = layer === 0 ? -68 : -50;
+    const FADE_OUT_DISTANCE = layer === 0 ? -72 : -52;
+    const ExitAnimation = useMemo(() => {
+        var _a;
+        return _a = class FadeOutUp extends ComplexAnimationBuilder {
+                constructor() {
+                    super(...arguments);
+                    this.build = () => {
+                        const delayFunction = this.getDelayFunction();
+                        const [animation, config] = this.getAnimationAndConfig();
+                        const callback = this.callbackV;
+                        const initialValues = this.initialValues;
+                        const delay = this.getDelay();
+                        return () => {
+                            'worklet';
+                            return {
+                                animations: {
+                                    opacity: delayFunction(delay, animation(0, config)),
+                                    transform: [
+                                        {
+                                            translateY: delayFunction(delay, animation(FADE_OUT_DISTANCE, config)),
+                                        },
+                                    ],
+                                },
+                                initialValues: {
+                                    opacity: 1,
+                                    transform: [{ translateY: 0 }],
+                                    ...initialValues,
+                                },
+                                callback,
+                            };
+                        };
+                    };
+                }
+                static createInstance() {
+                    return new _a();
+                }
+            },
+            _a.presetName = 'FadeOutUp',
+            _a;
+    }, [layer]);
+    const FadingAnimation = {
+        Enter: FadeInUp.duration(ANIMATION_DURATION)
+            .easing(Easing.ease)
+            .withInitialValues({ transform: [{ translateY: FADE_IN_DISTANCE }] }),
+        Exit: ExitAnimation.duration(ANIMATION_DURATION).easing(Easing.linear),
+    };
+    useEffect(() => {
+        shadowOpacity.value = withTiming(hasDropShadow ? 0.5 : 0, {
+            duration: ANIMATION_DURATION,
+            easing: Easing.ease,
+        });
+        elevation.value = withTiming(hasDropShadow ? 9 : 0, {
+            duration: ANIMATION_DURATION,
+            easing: Easing.ease,
+        });
+    }, [scrollState, shadowOpacity, hasDropShadow, elevation, isCollapsed]);
+    const animatedShadowStyle = useAnimatedStyle(() => {
         return {
-            height: layoutHeight.value,
+            shadowOpacity: shadowOpacity.value,
+            elevation: elevation.value,
         };
     });
-    const onLayout = (e) => {
-        const { height } = e.nativeEvent.layout;
-        if (height === layoutHeight.value) {
-            return;
-        }
-        // we want to only update height of the expanded header to set content offset on the client side
-        if (!scrolled) {
-            onHeaderHeightChange?.(height);
-        }
-        layoutHeight.value = withTiming(height, {
-            duration: FADE_ANIMATION_DURATION,
-            easing: Easing.linear,
-        });
-    };
-    // NavWrapper will recieve height of the NavContainer and animate it
-    // content inside NavContainer is the only dynamic part of NavHeader
-    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, hasTitle: hasTitle, onLayout: onLayout, children: [_jsx(BackActionWrapper, { collapsed: scrolled, hasBackButton: canGoBack, children: canGoBack && (_jsx(Action, { standalone: true, iconLeft: "chevron-left-small", onPress: onBackButtonPress, children: backButtonText })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), children: _jsx(CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", children: title }) }), _jsx(HeaderGap, { hasRightAction: hasRightAction }), hasRightAction && (_jsx(_Fragment, { children: _jsx(Animated.View, { entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig?.accessibilityLabel, accessibilityHint: rightActionConfig?.accessibilityHint, children: _jsx(Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle, { hasRightAction: !hasRightAction, hasTitle: hasTitle, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), hasRightAction && (_jsx(Animated.View, { entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig?.accessibilityLabel, accessibilityHint: rightActionConfig?.accessibilityHint, children: _jsx(Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }))] }))] }) }));
+    const breakpoints = useBreakpoint();
+    return (_jsx(ShadowContainer, { style: [animatedShadowStyle], children: _jsx(NavContainer, { breakpoints: breakpoints, layer: layer, layout: LT, isCollapsed: isCollapsed, children: !isCollapsed && (_jsxs(_Fragment, { children: [_jsxs(HeaderContainer, { layout: LT, entering: FadingAnimation.Enter, exiting: FadingAnimation.Exit, children: [_jsx(SideContainer, { flex: titleIsCentreAligned ? 1 : 0, side: "start", children: layer > 1 && (_jsx(NavBackButton, { onPress: () => {
+                                        onBackPress && onBackPress();
+                                    }, variant: "bright", iconLeft: platform === 'ios' ? 'chevron-left' : 'arrow-left' })) }), _jsxs(TitleContainer, { layer: layer, isIOS: platform === 'ios', children: [loading ? (_jsx(SkeletonNavHeading, { size: "100%", headingComponent: layer === 0 ? Heading2 : layer === 1 ? Heading3 : Heading4 })) : layer < 2 ? (_jsx(Heading, { inverted: layer < 2, level: LayerHeadingMap[layer], children: displayTitle })) : (_jsx(P, { size: "md", children: _jsx(Strong, { maxLength: 23, children: displayTitle }) })), stepCounter && !loading && (_jsx(P, { size: "sm", children: `Step ${stepCounter.currentStep <= stepCounter.totalSteps
+                                            ? stepCounter.currentStep
+                                            : stepCounter.totalSteps} of ${stepCounter.totalSteps}` }))] }), _jsx(SideContainer, { side: "end", children: actionButtons && (_jsx(ActionButtons, { loading: loading, layer: layer, actionButtons: actionButtons })) })] }), stepCounter && (_jsx(StepCounterBars, { loading: loading, totalSteps: stepCounter.totalSteps, currentStep: stepCounter.currentStep }))] })) }) }));
 };