@ovotech/element-native 5.0.0 → 5.0.1-canary-2c95d85-344

package/dist/components/Link/Link.js

@@ -51,12 +51,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = exports.TextLink = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils/utils");
 var Button_1 = require("../Button");
 var Icon_1 = require("../Icon");
-var element_core_1 = require("@ovotech/element-core");
 var Link = (0, react_1.forwardRef)(function (props, ref) { return (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, props, { ref: ref })); });
 exports.Link = Link;
 var StyledText = styled_native_1.default.Text(function (_a) {

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

@@ -43,7 +43,7 @@ exports.NavWrapper = (0, styled_native_1.default)(react_native_reanimated_1.defa
 exports.NavContainer = styled_native_1.default.View(function (_a) {
     var theme = _a.theme, topOffset = _a.topOffset, hasTitle = _a.hasTitle;
     return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, topOffset
-        ? topOffset
+        ? (0, element_core_1.numToPx)(topOffset)
         : (0, element_core_1.numToPx)(theme.space[hasTitle ? 200 : 400]), (0, element_core_1.numToPx)(theme.space[hasTitle ? 200 : 400]), (0, element_core_1.numToPx)(theme.space[400]), (0, element_core_1.numToPx)(theme.space[400]));
 });
 exports.ExpandedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {

package/dist/components/SelectField/Select.js

@@ -80,6 +80,8 @@ var Select = function (_a) {
     var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.noOptionMessage, noOptionMessage = _d === void 0 ? 'No option selected' : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, _g = _a.testID, testID = _g === void 0 ? 'select' : _g;
     var _h = (0, react_1.useState)(false), isOpen = _h[0], setOpen = _h[1];
     var _j = (0, react_1.useState)(defaultSelected), selected = _j[0], setSelected = _j[1];
+    var height = react_native_1.Dimensions.get('window').height;
+    var dropdownContainerMaxHeight = height * 0.7;
     var handleOptionPress = function (val) {
         onSelected(val);
         setOpen(false);
@@ -90,7 +92,7 @@ var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { onPress: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { onPress: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
 };
 exports.Select = Select;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/esm/components/Link/Link.js

@@ -25,12 +25,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
 import { forwardRef } from 'react';
 import styled, { css } from '../../styled.native';
 import { getText } from '../../utils/utils';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
-import { numToPx } from '@ovotech/element-core';
 var Link = forwardRef(function (props, ref) { return _jsx(Button, __assign({}, props, { ref: ref })); });
 var StyledText = styled.Text(function (_a) {
     var theme = _a.theme;

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

@@ -14,7 +14,7 @@ export var NavWrapper = styled(Animated.View)(function (_a) {
 export var NavContainer = styled.View(function (_a) {
     var theme = _a.theme, topOffset = _a.topOffset, hasTitle = _a.hasTitle;
     return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, topOffset
-        ? topOffset
+        ? numToPx(topOffset)
         : numToPx(theme.space[hasTitle ? 200 : 400]), numToPx(theme.space[hasTitle ? 200 : 400]), numToPx(theme.space[400]), numToPx(theme.space[400]));
 });
 export var ExpandedTitle = styled(Animated.Text)(function (_a) {

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

@@ -6,7 +6,7 @@ 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 { Modal, ScrollView, View } from 'react-native';
+import { Dimensions, Modal, ScrollView, View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
 import { P } from '../P';
@@ -51,6 +51,8 @@ export var Select = function (_a) {
     var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.noOptionMessage, noOptionMessage = _d === void 0 ? 'No option selected' : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, _g = _a.testID, testID = _g === void 0 ? 'select' : _g;
     var _h = useState(false), isOpen = _h[0], setOpen = _h[1];
     var _j = useState(defaultSelected), selected = _j[0], setSelected = _j[1];
+    var height = Dimensions.get('window').height;
+    var dropdownContainerMaxHeight = height * 0.7;
     var handleOptionPress = function (val) {
         onSelected(val);
         setOpen(false);
@@ -61,6 +63,6 @@ export var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return 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: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { onPress: function () { return setOpen(false); }, children: _jsx(DropdownContainer, { children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return 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(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return 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: function () { return 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: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { onPress: function () { return setOpen(false); }, children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return 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(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return 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)); })] }) }) }) })] }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "5.0.0",
+  "version": "5.0.1-canary-2c95d85-344",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
+    "@ovotech/element-core": "4.0.0-canary-2c95d85-344",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "@ovotech/element-core": "4.0.0"
+    "react-native-reanimated-carousel": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",