@ovotech/element-native 5.3.0 → 5.4.0

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

@@ -1,67 +1,97 @@
 import { numToPx } from '@ovotech/element-core';
 import Animated from 'react-native-reanimated';
 import styled, { css } from '../../styled.native';
-const Z_INDEX = 1000;
-export const NavWrapper = styled(Animated.View)(({ theme, collapsed }) => css `
+import { SkeletonButton } from '../SkeletonButton';
+import { SkeletonHeading } from '../SkeletonHeading';
+import { NavButton } from './NavHeaderComponents/NavButton';
+export const ShadowContainer = styled(Animated.View)(({ theme }) => css `
+    shadow-color: ${theme.color.neutral.black};
+    shadow-offset: 0 ${numToPx(theme.space[100])};
+    shadow-radius: ${numToPx(theme.space[200])};
+  `);
+export const NavContainer = styled(Animated.View)(({ theme, layer, isCollapsed, breakpoints }) => css `
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
     width: 100%;
-    position: absolute;
-
-    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */
-    z-index: ${Z_INDEX};
-    background-color: ${theme.color.surface.surface};
+    padding-top: ${layer === 0 && !isCollapsed
+    ? numToPx(theme.space[2000])
+    : numToPx(theme.space[1800])};
 
-    ${collapsed
-    ? css `
-          border-bottom-width: ${numToPx(theme.border.width.sm)};
-          border-bottom-style: solid;
-          border-bottom-color: ${theme.color.input.borderDim};
-        `
-    : ''}
+    padding-left: ${breakpoints.largeAndUp
+    ? numToPx(theme.space[2000])
+    : breakpoints.mediumAndUp
+        ? numToPx(theme.space[800])
+        : numToPx(theme.space[400])};
+    padding-right: ${breakpoints.largeAndUp
+    ? numToPx(theme.space[2000])
+    : breakpoints.mediumAndUp
+        ? numToPx(theme.space[800])
+        : numToPx(theme.space[400])};
+    padding-bottom: ${layer === 0 || layer === 1
+    ? numToPx(theme.space[400])
+    : 0};
+    background-color: ${layer < 2
+    ? theme.color.brand.brand
+    : theme.color.surface.bright};
+    overflow: hidden;
   `);
-export const NavContainer = styled.View(({ theme, topOffset, hasTitle }) => css `
-    position: absolute;
-
-    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */
-    z-index: ${Z_INDEX + 1};
-    width: 100%;
+export const HeaderContainer = styled(Animated.View)(({ theme }) => css `
+    display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    width: 100%;
     align-items: center;
-    flex-wrap: wrap;
-    padding-top: ${topOffset
-    ? numToPx(topOffset)
-    : numToPx(theme.space[hasTitle ? 200 : 400])};
-    padding-bottom: ${numToPx(theme.space[hasTitle ? 200 : 400])};
-    padding-left: ${numToPx(theme.space[400])};
-    padding-right: ${numToPx(theme.space[400])};
+    gap: ${numToPx(theme.space[100])};
   `);
-export const ExpandedTitle = styled(Animated.Text)(({ theme, hasBackButton, hasRightAction, hasTitle }) => css `
-    width: ${hasRightAction ? '100%' : '65%'};
-    font-family: ${theme.native.font.family.bold};
-    font-size: ${numToPx(theme.font.size['4xl'].mediaQuery[hasBackButton ? 'sm' : 'lg'])};
-    line-height: ${numToPx(hasBackButton
-    ? theme.font.lineHeight['4xl'].mediaQuery.sm
-    : theme.space[1300])};
-    color: ${theme.color.brand.brand};
-    ${!hasTitle && 'height: 0;'};
+export const SkeletonNavHeading = styled(SkeletonHeading)(({}) => css `
+    min-width: 70%;
+    height: 100%;
   `);
-export const CollapsedTitleWrapper = styled(Animated.View) `
-  width: 33.3%;
-  align-items: center;
-`;
-export const CollapsedTitle = styled.Text(({ theme }) => css `
-    font-family: ${theme.native.font.family.bold};
-    font-size: ${numToPx(theme.font.size.xl.mediaQuery.sm)};
-    line-height: ${numToPx(theme.font.lineHeight.xl.mediaQuery.sm)};
-    color: ${theme.color.brand.brand};
+export const SkeletonNavButton = styled(SkeletonButton)(({ theme }) => css `
+    width: ${numToPx(theme.space[1000])};
+    height: ${numToPx(theme.space[1000])};
   `);
-export const HeaderGap = styled.View(({ hasRightAction }) => css `
-    width: ${hasRightAction ? '20%' : '33.3%'};
+export const SideContainer = styled.View(({ theme, side, flex = 1 }) => css `
+    display: flex;
+    gap: ${side === 'end' ? numToPx(theme.space[200]) : 0};
+    flex-direction: row;
+    flex: ${flex};
+    flex-basis: 0;
+    justify-content: ${side === 'start' ? 'flex-start' : 'flex-end'};
+    max-height: ${numToPx(theme.space[1000])};
   `);
-export const BackActionWrapper = styled(Animated.View)(({ theme, collapsed, hasBackButton }) => css `
-    margin-bottom: ${collapsed ? '0' : numToPx(theme.space[400])};
-    width: ${collapsed ? '33.3%' : '100%'};
-
-    /* Important for maintaining white space above the title on main app screens */
-    height: ${hasBackButton ? numToPx(theme.space[1000]) : undefined};
+export const TitleContainer = styled.View(({ theme, layer, isIOS }) => css `
+    display: flex;
+    flex-direction: column;
+    align-items: ${isIOS && layer > 1 ? 'center' : 'flex-start'};
+    max-height: ${numToPx(theme.space[1000])};
+    min-width: ${numToPx(theme.space[1000])};
+  `);
+export const StepCounterBar = styled.View(({ theme, count, currentStep }) => css `
+    flex-grow: 1;
+    height: 2px;
+    max-width: 50%;
+    min-width: 10%;
+    background-color: ${count <= currentStep
+    ? theme.color.brand.brand
+    : theme.color.surface.dim};
+  `);
+export const SkeletonStepCounterBar = styled(SkeletonButton)(({ theme }) => css `
+    min-width: 100%;
+    height: ${numToPx(theme.space[50])};
+  `);
+export const StepCounterContainer = styled.View(({ theme }) => css `
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    gap: ${numToPx(theme.space[100])};
+    padding-bottom: ${numToPx(theme.space[100])};
+    padding-top: ${numToPx(theme.space[200])};
+    max-height: ${numToPx(theme.space[100])};
+    min-width: 100%;
+  `);
+export const NavBackButton = styled(NavButton)(({ theme }) => css `
+    margin-left: -${numToPx(theme.space[300])};
   `);

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

@@ -0,0 +1,3 @@
+import { Layer, NavHeaderProps } from '../NavHeader';
+export type ActionButtonsProps<L extends Layer> = Required<Pick<NavHeaderProps<L>, 'layer' | 'actionButtons' | 'loading'>>;
+export declare const ActionButtons: <L extends Layer>(props: ActionButtonsProps<L>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SkeletonNavButton } from '../NavHeader.styles';
+import { checkHasAccount } from '../utils';
+import { NavButton } from './NavButton';
+export const ActionButtons = (props) => {
+    const variant = props.layer > 1 ? 'dim' : 'bright';
+    const inverted = props.layer < 2;
+    return (_jsxs(_Fragment, { children: [checkHasAccount(props) &&
+                props.actionButtons.account?.onPress &&
+                (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.account.onPress, iconLeft: props.actionButtons.account.icon || 'user' }))), !!props.actionButtons.help?.onPress &&
+                (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.help.onPress, iconLeft: props.actionButtons.help.icon || 'message' })))] }));
+};

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

@@ -0,0 +1,11 @@
+import { IconName } from '../../../providers';
+import { ButtonBase } from '../../Button/Button';
+import { Layer } from '../NavHeader';
+export type NavButtonVariantName = 'bright' | 'dim';
+export type NavButtonProps = Omit<ButtonBase, 'variant'> & {
+    variant: NavButtonVariantName;
+    layer?: Layer;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+};
+export declare const NavButton: ({ layer, iconLeft, iconRight, fullWidth, variant, inverted, size, ...rest }: NavButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from '../../../styled.native';
+import { DEFAULT_BUTTON_VARIANT } from '../../Button/Button';
+import { StyledButtonIcon, StyledButtonWrapper, StyledInner, } from '../../Button/Button.styles';
+const ButtonWrapper = ({ children, accessibilityRole = 'button', activeOpacity = 0.8, ...rest }) => (_jsx(StyledButtonWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ...rest, children: children }));
+const NavStyledButtonInner = styled(StyledInner)(({ theme, navVariant }) => {
+    const backgroundAndBorderColor = navVariant === 'bright'
+        ? theme.color.surface.bright
+        : theme.color.surface.dim;
+    return css `
+    background-color: ${backgroundAndBorderColor};
+    border-color: ${backgroundAndBorderColor};
+    color: ${theme.button.surface.color.fgInverted};
+  `;
+});
+const NavStyledButtonIcon = styled(StyledButtonIcon)(({ theme, navVariant }) => css `
+    color: ${navVariant === 'bright' || navVariant === 'dim'
+    ? theme.button.surface.color.fgInverted
+    : 'transparent'};
+  `);
+export const NavButton = ({ layer, iconLeft, iconRight, fullWidth = false, variant = 'bright', inverted = true, size = 'default', ...rest }) => {
+    return (_jsx(ButtonWrapper, { ...rest, children: _jsxs(NavStyledButtonInner, { fullWidth: fullWidth, variant: DEFAULT_BUTTON_VARIANT, navVariant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: true, layer: layer, children: [iconLeft && (_jsx(NavStyledButtonIcon, { iconLeft: true, iconOnly: true, name: iconLeft, inverted: inverted, navVariant: variant, variant: DEFAULT_BUTTON_VARIANT, size: 20 })), iconRight && (_jsx(NavStyledButtonIcon, { iconRight: true, iconOnly: true, name: iconRight, inverted: inverted, navVariant: variant, variant: DEFAULT_BUTTON_VARIANT, size: 20 }))] }) }));
+};

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

@@ -0,0 +1,7 @@
+type StepCounterProps = {
+    totalSteps: number;
+    currentStep: number;
+    loading?: boolean;
+};
+export declare const StepCounterBars: ({ totalSteps, currentStep, loading, }: StepCounterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SkeletonStepCounterBar, StepCounterBar, StepCounterContainer, } from '../NavHeader.styles';
+export const StepCounterBars = ({ totalSteps, currentStep, loading = false, }) => {
+    return (_jsx(StepCounterContainer, { children: loading ? (_jsx(SkeletonStepCounterBar, {})) : (Array.from({ length: totalSteps }).map((_, index) => (_jsx(StepCounterBar, { count: index + 1, currentStep: currentStep }, index + 1)))) }));
+};

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

@@ -0,0 +1,9 @@
+import { Layer } from './NavHeader';
+import { ActionButtonsProps } from './NavHeaderComponents/ActionButtons';
+export declare const checkHasAccount: (props: ActionButtonsProps<Layer>) => props is ActionButtonsProps<0 | 1>;
+type TitleLengthProps = {
+    layer: Layer;
+    title?: string;
+};
+export declare const getTitleLength: ({ layer, title }: TitleLengthProps) => string | undefined;
+export {};

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

@@ -0,0 +1,23 @@
+export const checkHasAccount = (props) => {
+    return props.layer === 0 || props.layer === 1;
+};
+export const getTitleLength = ({ layer, title }) => {
+    const TITLE_HOME_MAX_LENGTH = 14;
+    const TITLE_LAYER_1_MAX_LENGTH = 21;
+    const TITLE_LAYER_2_PLUS_MAX_LENGTH = 28;
+    if (layer === 0) {
+        return title.length > TITLE_HOME_MAX_LENGTH
+            ? title.slice(0, TITLE_HOME_MAX_LENGTH) + '...'
+            : title;
+    }
+    if (layer === 1) {
+        return title.length > TITLE_LAYER_1_MAX_LENGTH
+            ? title.slice(0, TITLE_LAYER_1_MAX_LENGTH)
+            : title;
+    }
+    if (layer > 1) {
+        return title.length > TITLE_LAYER_2_PLUS_MAX_LENGTH
+            ? title.slice(0, TITLE_LAYER_2_PLUS_MAX_LENGTH) + '...'
+            : title;
+    }
+};

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

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

package/dist/src/components/PasswordField/PasswordField.js

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

package/dist/src/components/PasswordInput/PasswordInput.js

@@ -3,6 +3,6 @@ import { Input } from '../Input/Input';
 import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
 const PasswordInput = (props) => {
     const { isPasswordVisible, handlePasswordVisibility } = useTogglePasswordVisibility();
-    return (_jsx(Input, { rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, blurOnSubmit: false, secureTextEntry: !isPasswordVisible, ...props }));
+    return (_jsx(Input, { rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, submitBehavior: "submit", secureTextEntry: !isPasswordVisible, ...props }));
 };
 export { PasswordInput };

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

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

package/dist/src/components/PhoneField/PhoneField.js

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

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

@@ -0,0 +1,5 @@
+type Props = {
+    children?: React.ReactNode;
+};
+export declare const ScreenView: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ScreenView/ScreenView.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWindowDimensions, View } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import styled, { useTheme } from '../../styled.native';
+const BackgroundWrapper = styled(View)({
+    width: '100%',
+    alignItems: 'center',
+});
+const ContentContainer = styled(View)(({ paddingHorizontal, minWidth, maxWidth }) => ({
+    width: '100%',
+    paddingHorizontal,
+    minWidth,
+    maxWidth,
+}));
+export const ScreenView = ({ children }) => {
+    const { xsmallAndUp, smallAndUp, mediumAndUp } = useBreakpoint();
+    const { width } = useWindowDimensions();
+    const theme = useTheme();
+    let maxWidth = width;
+    let paddingHorizontal = theme.space[400];
+    if (mediumAndUp) {
+        maxWidth = 1024;
+        paddingHorizontal = theme.space[800];
+    }
+    else if (smallAndUp || xsmallAndUp) {
+        maxWidth = 484;
+        paddingHorizontal = theme.space[500];
+    }
+    else if (width < 359) {
+        paddingHorizontal = theme.space[400];
+    }
+    return (_jsx(BackgroundWrapper, { children: _jsx(ContentContainer, { paddingHorizontal: paddingHorizontal, maxWidth: maxWidth, children: children }) }));
+};

package/dist/src/components/ScreenView/index.d.ts

@@ -0,0 +1 @@
+export * from './ScreenView';

package/dist/src/components/ScreenView/index.js

@@ -0,0 +1 @@
+export * from './ScreenView';

package/dist/src/components/SegmentedControls/components/SegmentButton.js

@@ -47,7 +47,7 @@ export const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, i
         // choices go on the second row. The only way I could get it to work
         // was to hardcode the denominator to 3 for the single row ones
         // and 1.1 for the multiple row ones.
-        yRef.current = y - height / (multipleRows ? 1.1 : 3 * fontScale);
+        yRef.current = y - height / (multipleRows ? 2.5 : 3 * fontScale);
         heightRef.current = height;
         widthRef.current = width;
         onLayout(width, height, x, yRef.current);

package/dist/src/components/SelectField/Select.d.ts

@@ -1,3 +1,4 @@
+import { TouchableOpacityProps } from 'react-native';
 type SelectOption = {
     label: string;
     value: string;
@@ -10,6 +11,7 @@ export type SelectProps = {
     hasError?: boolean;
     onSelected?(value: SelectOption): void;
     testID?: string;
+    ref?: React.RefObject<TouchableOpacityProps | null>;
 };
 declare const SelectOption: import("styled-components").StyledComponent<typeof import("react-native").TouchableOpacity, {
     color: {
@@ -586,5 +588,5 @@ declare const SelectOption: import("styled-components").StyledComponent<typeof i
 }, {
     isLastOption: boolean;
 }, never>;
-export declare const Select: ({ options, defaultSelected, noOptionMessage, onSelected, hasError, testID, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ options, defaultSelected, noOptionMessage, onSelected, hasError, testID, ref, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/SelectField/Select.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import groupBy from 'lodash.groupby';
 import { Fragment, useState } from 'react';
-import { Dimensions, Modal, ScrollView, View } from 'react-native';
+import { Dimensions, Modal, ScrollView, View, } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
 import { P } from '../P';
@@ -30,7 +31,7 @@ const DropdownWrapper = styled.TouchableOpacity(({ theme }) => css `
     /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
     background-color: ${theme.color.brand.dark}80;
   `);
-const DropdownContainer = styled.SafeAreaView(({ theme }) => css `
+const DropdownContainer = styled(SafeAreaView)(({ theme }) => css `
     width: 95%;
     max-height: 70%;
     border-radius: ${numToPx(theme.border.radius.sm)};
@@ -74,7 +75,7 @@ const StyledCategory = styled(P)(({ theme }) => css `
     background-color: ${theme.color.surface.surface};
     padding: ${numToPx(theme.space[100])} ${numToPx(theme.space[400])};
   `);
-export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', }) => {
+export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', ref, }) => {
     const [isOpen, setOpen] = useState(false);
     const [selected, setSelected] = useState(defaultSelected);
     const height = Dimensions.get('window').height;
@@ -89,5 +90,5 @@ export const Select = ({ options = [], defaultSelected = { label: '', value: 'de
         label: `-- ${noOptionMessage} --`,
         value: 'default',
     };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(DropdownWrapper, { onPress: () => setOpen(false), children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
+    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), ref: ref, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(DropdownWrapper, { onPress: () => setOpen(false), children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
 };

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

@@ -1,7 +1,10 @@
+import { RefObject } from 'react';
 import { FieldProps } from '../Field';
 import { SelectProps } from './Select';
+import { TouchableOpacityProps } from 'react-native';
 type SelectFieldProps = SelectProps & Omit<FieldProps, 'children'> & {
     testID?: string;
+    ref?: RefObject<TouchableOpacityProps | null>;
 };
-export declare const SelectField: ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ...rest }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectField: ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ref, ...rest }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/SelectField/SelectField.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { Select } from './Select';
-export const SelectField = ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ...rest }) => (_jsx(Field, { affixWidth: 20, error: error, ...rest, children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID }) }) }));
+export const SelectField = ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ref, ...rest }) => (_jsx(Field, { affixWidth: 20, error: error, ...rest, children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID, ref: ref }) }) }));

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

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

package/dist/src/components/TextField/TextField.js

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

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

@@ -1,6 +1,8 @@
+import { Ref } from 'react';
 import { TextInput as RNTextInput } from 'react-native';
 import { InputProps } from '../Input/Input';
-declare const TextInput: (props: InputProps & {
-    ref?: React.RefObject<RNTextInput>;
-}) => import("react/jsx-runtime").JSX.Element;
+type Props = InputProps & {
+    ref?: Ref<RNTextInput>;
+};
+declare const TextInput: ({ ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export { TextInput };

package/dist/src/components/TextInput/TextInput.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from '../Input/Input';
-const TextInput = (props) => _jsx(Input, { ...props, keyboardType: "default", ref: props.ref });
+const TextInput = ({ ref, ...props }) => (_jsx(Input, { ...props, keyboardType: "default", ref: ref }));
 export { TextInput };

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

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

package/dist/src/components/TextareaField/TextareaField.js

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

package/dist/src/components/Toggle/styles.js

@@ -16,7 +16,7 @@ export const StyledToggleInputWrapper = styled.View(({ theme, labelPosition }) =
         ? labelPosition === 'left'
             ? 'margin-left: 10px;'
             : 'margin-right: 10px;'
-        : null}
+        : ''}
     `;
 });
 export const StyledToggleInput = styled.View(({ theme, checked }) => {

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

@@ -36,6 +36,7 @@ export * from './PhoneInput';
 export * from './Pictogram';
 export * from './Radio';
 export * from './RadioCard';
+export * from './ScreenView';
 export * from './RemoteImage';
 export * from './SegmentedControls';
 export * from './SelectField';

package/dist/src/components/index.js

@@ -36,6 +36,7 @@ export * from './PhoneInput';
 export * from './Pictogram';
 export * from './Radio';
 export * from './RadioCard';
+export * from './ScreenView';
 export * from './RemoteImage';
 export * from './SegmentedControls';
 export * from './SelectField';

package/dist/src/hooks/index.d.ts

@@ -1,2 +1,2 @@
-export * from './use-breakpoint';
+export * from './use-breakpoint.native';
 export * from './use-full-width';

package/dist/src/hooks/index.js

@@ -1,2 +1,2 @@
-export * from './use-breakpoint';
+export * from './use-breakpoint.native';
 export * from './use-full-width';

package/dist/src/hooks/use-full-width.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useBreakpoint } from './use-breakpoint';
+import { useBreakpoint } from './use-breakpoint.native';
 export const useFullWidth = (fullWidth = 'small') => {
     const [isFullWidth, setIsfullWidth] = useState(true);
     const { smallAndUp } = useBreakpoint();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -26,6 +26,7 @@
     "@babel/plugin-transform-flow-strip-types": "^7.27.1",
     "@babel/plugin-transform-private-methods": "^7.27.1",
     "@react-native-masked-view/masked-view": "^0.3.2",
+    "@styled/typescript-styled-plugin": "^1.0.1",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.1.0",
     "@testing-library/react-native": "^13.3.3",