@ovotech/element-native 5.3.0-canary-9e22bfd-413 → 5.3.0-canary-7e7bf5d-415

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "5.3.0-canary-9e22bfd-413",
+  "version": "5.3.0-canary-7e7bf5d-415",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.14.0",
-    "@ovotech/element-core": "4.2.0-canary-9e22bfd-413",
+    "@ovotech/element-core": "4.2.0-canary-7e7bf5d-415",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
     "react-native-error-boundary": "^3.0.0",