@ovotech/element-native 4.4.6 → 4.4.7-canary-07b38e7-329

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/ActionList/ActionList.d.ts +2 -0
  2. package/dist/components/ActionList/ActionList.js +4 -4
  3. package/dist/components/FilterSelect/FilterSelect.js +5 -5
  4. package/dist/components/SegmentedControls/SegmentedControls.js +2 -6
  5. package/dist/components/SegmentedControls/components/SegmentButton.js +27 -10
  6. package/dist/components/SelectField/Select.js +1 -1
  7. package/dist/esm/components/ActionList/ActionList.js +4 -4
  8. package/dist/esm/components/FilterSelect/FilterSelect.js +6 -6
  9. package/dist/esm/components/SegmentedControls/SegmentedControls.js +2 -6
  10. package/dist/esm/components/SegmentedControls/components/SegmentButton.js +28 -11
  11. package/dist/esm/components/SelectField/Select.js +1 -1
  12. package/package.json +3 -3
package/dist/components/ActionList/ActionList.d.ts CHANGED
@@ -5,6 +5,8 @@ import { StyledActionList } from './styled';
5
5
  type ActionListProps = ComponentProps<typeof StyledActionList>;
6
6
  type ActionProps = PropsWithChildren<ViewProps & {
7
7
  accessibilityRole?: AccessibilityRole;
8
+ accessibilityLabel?: string;
9
+ accessibilityHint?: string;
8
10
  iconLeft?: IconName;
9
11
  iconRight?: IconName;
10
12
  inverted?: boolean;
package/dist/components/ActionList/ActionList.js CHANGED
@@ -47,12 +47,12 @@ var ActionList = function (_a) {
47
47
  };
48
48
  exports.ActionList = ActionList;
49
49
  var ActionWrapper = (0, react_1.forwardRef)(function (_a, ref) {
50
- var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
51
- return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
50
+ var children = _a.children, accessibilityRole = _a.accessibilityRole, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
51
+ return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
52
52
  });
53
53
  var Action = (0, react_1.forwardRef)(function (_a, ref) {
54
- var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
54
+ var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
55
55
  var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
56
- return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
56
+ return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
57
57
  });
58
58
  exports.Action = Action;
package/dist/components/FilterSelect/FilterSelect.js CHANGED
@@ -78,11 +78,11 @@ var FilterSelect = function (_a) {
78
78
  });
79
79
  }, accessible: true, accessibilityRole: "combobox", accessibilityHint: accessibilityHint, children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default'
80
80
  ? ''
81
- : (_b = selected.collapsedLabel) !== null && _b !== void 0 ? _b : selected.label }) }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [" ", rightText] }) : null, (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, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: {
82
- top: measure === null || measure === void 0 ? void 0 : measure.top,
83
- left: dropdownDirection === 'right' ? measure === null || measure === void 0 ? void 0 : measure.left : undefined,
84
- right: dropdownDirection === 'left' ? measure === null || measure === void 0 ? void 0 : measure.right : undefined,
85
- }, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { nestedScrollEnabled: true, children: options.map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SelectOption, { accessible: true, accessibilityRole: "button", onPress: function () { return handleOptionPress(option); }, children: (0, jsx_runtime_1.jsx)(Margin_1.Margin, { vertical: 3, children: (0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }) }) }), i === options.length - 1 ? null : ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { type: "differentiated" }))] }, option.label)); }) }) }) }) })] }));
81
+ : (_b = selected.collapsedLabel) !== null && _b !== void 0 ? _b : selected.label }) }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [" ", rightText] }) : null, (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)(react_native_1.TouchableWithoutFeedback, { onPress: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: {
82
+ top: measure === null || measure === void 0 ? void 0 : measure.top,
83
+ left: dropdownDirection === 'right' ? measure === null || measure === void 0 ? void 0 : measure.left : undefined,
84
+ right: dropdownDirection === 'left' ? measure === null || measure === void 0 ? void 0 : measure.right : undefined,
85
+ }, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { nestedScrollEnabled: true, children: options.map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SelectOption, { accessible: true, accessibilityRole: "button", onPress: function () { return handleOptionPress(option); }, children: (0, jsx_runtime_1.jsx)(Margin_1.Margin, { vertical: 3, children: (0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }) }) }), i === options.length - 1 ? null : ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { type: "differentiated" }))] }, option.label)); }) }) }) }) }) })] }));
86
86
  };
87
87
  exports.FilterSelect = FilterSelect;
88
88
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -86,11 +86,7 @@ var SegmentedControls = function (_a) {
86
86
  }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
87
87
  if (activeSegment.key === segment.key) {
88
88
  animatedX.value = x;
89
- // (adrian.pop) - I couldn't figure out how to make the positioning work once the
90
- // choices go on the second row. The only way I could get it to work
91
- // was to hardcode the denominator to 3 for the single row ones
92
- // and 1.1 for the multiple row ones.
93
- animatedY.value = y - height / (multipleRows ? 1.1 : 3);
89
+ animatedY.value = y;
94
90
  animatedHeight.value = height;
95
91
  animatedWidth.value = width;
96
92
  }
@@ -100,5 +96,5 @@ var SegmentedControls = function (_a) {
100
96
  exports.SegmentedControls = SegmentedControls;
101
97
  var SegmentsContainer = styled_native_1.default.View(function (_a) {
102
98
  var _b = _a.theme, core = _b.core, semantic = _b.semantic, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
103
- return "\n flex-direction: row;\n flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n justify-content: ").concat($multipleRows ? 'space-between' : 'space-apart', ";\n align-items: center;\n width: ").concat($inline ? 'auto' : '100%', ";\n align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n padding: ").concat(core.space[1], "px;\n background-color: ").concat(semantic.surface.cutout, ";\n border-radius: ").concat(core.radius.max, "px;\n");
99
+ return "\n flex-direction: row;\n flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n justify-content: ").concat($multipleRows ? 'space-between' : 'space-around', ";\n align-items: center;\n width: ").concat($inline ? 'auto' : '100%', ";\n align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n padding: ").concat(core.space[1], "px;\n background-color: ").concat(semantic.surface.cutout, ";\n border-radius: ").concat(core.radius.max, "px;\n");
104
100
  });
package/dist/components/SegmentedControls/components/SegmentButton.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
14
  if (k2 === undefined) k2 = k;
4
15
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,6 +45,12 @@ var react_native_reanimated_1 = __importStar(require("react-native-reanimated"))
34
45
  var styled_native_1 = __importDefault(require("../../../styled.native"));
35
46
  var P_1 = require("../../P");
36
47
  var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
48
+ var textSizeProps = {
49
+ numberOfLines: 1,
50
+ adjustsFontSizeToFit: true,
51
+ minimumFontScale: 0.95,
52
+ maxFontSizeMultiplier: 1.75,
53
+ };
37
54
  var SegmentButton = function (_a) {
38
55
  var accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, setAnimatedValues = _a.setAnimatedValues, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
39
56
  var xRef = (0, react_1.useRef)(0);
@@ -41,6 +58,7 @@ var SegmentButton = function (_a) {
41
58
  var widthRef = (0, react_1.useRef)(0);
42
59
  var heightRef = (0, react_1.useRef)(0);
43
60
  var hitslopVal = size === 'small' ? 8 : 4;
61
+ var fontScale = (0, react_native_1.useWindowDimensions)().fontScale;
44
62
  var fontWeightAnim = (0, react_native_reanimated_1.useSharedValue)(isSelected ? 1 : 0);
45
63
  var animatedStyleNormal = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
46
64
  return {
@@ -61,20 +79,19 @@ var SegmentButton = function (_a) {
61
79
  if (!isSelected) {
62
80
  return;
63
81
  }
64
- setAnimatedValues(xRef.current,
65
- // (adrian.pop) - I couldn't figure out how to make the positioning work once the
66
- // choices go on the second row. The only way I could get it to work
67
- // was to hardcode the denominator to 3 for the single row ones
68
- // and 1.1 for the multiple row ones.
69
- yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
82
+ setAnimatedValues(xRef.current, yRef.current, widthRef.current);
70
83
  }, [isSelected]);
71
84
  var handleLayout = function (event) {
72
85
  var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
73
86
  xRef.current = x;
74
- yRef.current = y;
87
+ // (adrian.pop) - I couldn't figure out how to make the positioning work once the
88
+ // choices go on the second row. The only way I could get it to work
89
+ // was to hardcode the denominator to 3 for the single row ones
90
+ // and 1.1 for the multiple row ones.
91
+ yRef.current = y - height / (multipleRows ? 1.1 : 3 * fontScale);
75
92
  heightRef.current = height;
76
93
  widthRef.current = width;
77
- onLayout(width, height, x, y);
94
+ onLayout(width, height, x, yRef.current);
78
95
  };
79
96
  return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
80
97
  top: hitslopVal,
@@ -82,10 +99,10 @@ var SegmentButton = function (_a) {
82
99
  }, style: {
83
100
  flexGrow: inline || multipleRows ? undefined : 1,
84
101
  width: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
85
- }, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [(0, jsx_runtime_1.jsx)(SSegmentText, { style: {
102
+ }, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [(0, jsx_runtime_1.jsx)(SSegmentText, __assign({ style: {
86
103
  opacity: 0,
87
104
  fontWeight: '900',
88
- }, "$isSelected": false, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
105
+ }, "$isSelected": false }, textSizeProps, { children: label })), (0, jsx_runtime_1.jsx)(SSegmentText, __assign({ style: animatedStyleNormal, "$isSelected": false }, textSizeProps, { children: label })), (0, jsx_runtime_1.jsx)(SSegmentText, __assign({ style: animatedStyleBold, "$isSelected": true }, textSizeProps, { children: label }))] }) }));
89
106
  };
90
107
  exports.SegmentButton = SegmentButton;
91
108
  var SSegmentsWrapper = styled_native_1.default.View(function (_a) {
package/dist/components/SelectField/Select.js CHANGED
@@ -43,7 +43,7 @@ var Strong_1 = require("../Strong");
43
43
  var SelectInput = styled_native_1.default.TouchableOpacity(function (_a) {
44
44
  var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
45
45
  return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-direction: row;\n align-items: center;\n background-color: transparent;\n border-color: ", ";\n border-width: ", ";\n border-radius: ", ";\n padding: ", ";\n padding-right: 14px;\n height: 44px;\n "], ["\n flex-direction: row;\n align-items: center;\n background-color: transparent;\n border-color: ", ";\n border-width: ", ";\n border-radius: ", ";\n padding: ", ";\n padding-right: 14px;\n height: 44px;\n "])), hasError
46
- ? semantic.error.border
46
+ ? semantic.error.message
47
47
  : semantic.border.functional, (0, element_core_1.numToPx)(core.borderWidth.small), (0, element_core_1.numToPx)(core.radius.small), (0, element_core_1.numToPx)(core.space[2]));
48
48
  });
49
49
  var DropdownWrapper = styled_native_1.default.View(function (_a) {
package/dist/esm/components/ActionList/ActionList.js CHANGED
@@ -43,12 +43,12 @@ var ActionList = function (_a) {
43
43
  }) })));
44
44
  };
45
45
  var ActionWrapper = forwardRef(function (_a, ref) {
46
- var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
47
- return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
46
+ var children = _a.children, accessibilityRole = _a.accessibilityRole, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
47
+ return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
48
48
  });
49
49
  var Action = forwardRef(function (_a, ref) {
50
- var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
50
+ var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
51
51
  var smallAndUp = useBreakpoint().smallAndUp;
52
- return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
52
+ return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
53
53
  });
54
54
  export { ActionList, Action };
package/dist/esm/components/FilterSelect/FilterSelect.js CHANGED
@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
5
5
  import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
6
6
  import { numToPx } from '@ovotech/element-core';
7
7
  import { Fragment, useRef, useState } from 'react';
8
- import { Dimensions, Modal, ScrollView, View, } from 'react-native';
8
+ import { Dimensions, Modal, ScrollView, TouchableWithoutFeedback, View, } from 'react-native';
9
9
  import styled, { css, useTheme } from '../../styled.native';
10
10
  import { Divider } from '../Divider';
11
11
  import { Icon } from '../Icon';
@@ -52,10 +52,10 @@ export var FilterSelect = function (_a) {
52
52
  });
53
53
  }, accessible: true, accessibilityRole: "combobox", accessibilityHint: accessibilityHint, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
54
54
  ? ''
55
- : (_b = selected.collapsedLabel) !== null && _b !== void 0 ? _b : selected.label }) }), _jsx(Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? _jsxs(P, { children: [" ", rightText] }) : null, _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: {
56
- top: measure === null || measure === void 0 ? void 0 : measure.top,
57
- left: dropdownDirection === 'right' ? measure === null || measure === void 0 ? void 0 : measure.left : undefined,
58
- right: dropdownDirection === 'left' ? measure === null || measure === void 0 ? void 0 : measure.right : undefined,
59
- }, children: _jsx(ScrollView, { nestedScrollEnabled: true, children: options.map(function (option, i) { return (_jsxs(Fragment, { children: [_jsx(SelectOption, { accessible: true, accessibilityRole: "button", onPress: function () { return handleOptionPress(option); }, children: _jsx(Margin, { vertical: 3, children: _jsx(P, { children: _jsx(Strong, { children: option.label }) }) }) }), i === options.length - 1 ? null : (_jsx(Divider, { type: "differentiated" }))] }, option.label)); }) }) }) }) })] }));
55
+ : (_b = selected.collapsedLabel) !== null && _b !== void 0 ? _b : selected.label }) }), _jsx(Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? _jsxs(P, { children: [" ", rightText] }) : null, _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(TouchableWithoutFeedback, { onPress: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: {
56
+ top: measure === null || measure === void 0 ? void 0 : measure.top,
57
+ left: dropdownDirection === 'right' ? measure === null || measure === void 0 ? void 0 : measure.left : undefined,
58
+ right: dropdownDirection === 'left' ? measure === null || measure === void 0 ? void 0 : measure.right : undefined,
59
+ }, children: _jsx(ScrollView, { nestedScrollEnabled: true, children: options.map(function (option, i) { return (_jsxs(Fragment, { children: [_jsx(SelectOption, { accessible: true, accessibilityRole: "button", onPress: function () { return handleOptionPress(option); }, children: _jsx(Margin, { vertical: 3, children: _jsx(P, { children: _jsx(Strong, { children: option.label }) }) }) }), i === options.length - 1 ? null : (_jsx(Divider, { type: "differentiated" }))] }, option.label)); }) }) }) }) }) })] }));
60
60
  };
61
61
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/esm/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -60,11 +60,7 @@ export var SegmentedControls = function (_a) {
60
60
  }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
61
61
  if (activeSegment.key === segment.key) {
62
62
  animatedX.value = x;
63
- // (adrian.pop) - I couldn't figure out how to make the positioning work once the
64
- // choices go on the second row. The only way I could get it to work
65
- // was to hardcode the denominator to 3 for the single row ones
66
- // and 1.1 for the multiple row ones.
67
- animatedY.value = y - height / (multipleRows ? 1.1 : 3);
63
+ animatedY.value = y;
68
64
  animatedHeight.value = height;
69
65
  animatedWidth.value = width;
70
66
  }
@@ -73,5 +69,5 @@ export var SegmentedControls = function (_a) {
73
69
  };
74
70
  var SegmentsContainer = styled.View(function (_a) {
75
71
  var _b = _a.theme, core = _b.core, semantic = _b.semantic, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
76
- return "\n flex-direction: row;\n flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n justify-content: ").concat($multipleRows ? 'space-between' : 'space-apart', ";\n align-items: center;\n width: ").concat($inline ? 'auto' : '100%', ";\n align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n padding: ").concat(core.space[1], "px;\n background-color: ").concat(semantic.surface.cutout, ";\n border-radius: ").concat(core.radius.max, "px;\n");
72
+ return "\n flex-direction: row;\n flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n justify-content: ").concat($multipleRows ? 'space-between' : 'space-around', ";\n align-items: center;\n width: ").concat($inline ? 'auto' : '100%', ";\n align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n padding: ").concat(core.space[1], "px;\n background-color: ").concat(semantic.surface.cutout, ";\n border-radius: ").concat(core.radius.max, "px;\n");
77
73
  });
package/dist/esm/components/SegmentedControls/components/SegmentButton.js CHANGED
@@ -1,10 +1,27 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
1
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
13
  import { useEffect, useRef } from 'react';
3
- import { Pressable } from 'react-native';
14
+ import { Pressable, useWindowDimensions, } from 'react-native';
4
15
  import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
5
16
  import styled from '../../../styled.native';
6
17
  import { P } from '../../P';
7
18
  var AnimatedP = Animated.createAnimatedComponent(P);
19
+ var textSizeProps = {
20
+ numberOfLines: 1,
21
+ adjustsFontSizeToFit: true,
22
+ minimumFontScale: 0.95,
23
+ maxFontSizeMultiplier: 1.75,
24
+ };
8
25
  export var SegmentButton = function (_a) {
9
26
  var accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, setAnimatedValues = _a.setAnimatedValues, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
10
27
  var xRef = useRef(0);
@@ -12,6 +29,7 @@ export var SegmentButton = function (_a) {
12
29
  var widthRef = useRef(0);
13
30
  var heightRef = useRef(0);
14
31
  var hitslopVal = size === 'small' ? 8 : 4;
32
+ var fontScale = useWindowDimensions().fontScale;
15
33
  var fontWeightAnim = useSharedValue(isSelected ? 1 : 0);
16
34
  var animatedStyleNormal = useAnimatedStyle(function () {
17
35
  return {
@@ -32,20 +50,19 @@ export var SegmentButton = function (_a) {
32
50
  if (!isSelected) {
33
51
  return;
34
52
  }
35
- setAnimatedValues(xRef.current,
36
- // (adrian.pop) - I couldn't figure out how to make the positioning work once the
37
- // choices go on the second row. The only way I could get it to work
38
- // was to hardcode the denominator to 3 for the single row ones
39
- // and 1.1 for the multiple row ones.
40
- yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
53
+ setAnimatedValues(xRef.current, yRef.current, widthRef.current);
41
54
  }, [isSelected]);
42
55
  var handleLayout = function (event) {
43
56
  var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
44
57
  xRef.current = x;
45
- yRef.current = y;
58
+ // (adrian.pop) - I couldn't figure out how to make the positioning work once the
59
+ // choices go on the second row. The only way I could get it to work
60
+ // was to hardcode the denominator to 3 for the single row ones
61
+ // and 1.1 for the multiple row ones.
62
+ yRef.current = y - height / (multipleRows ? 1.1 : 3 * fontScale);
46
63
  heightRef.current = height;
47
64
  widthRef.current = width;
48
- onLayout(width, height, x, y);
65
+ onLayout(width, height, x, yRef.current);
49
66
  };
50
67
  return (_jsx(Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
51
68
  top: hitslopVal,
@@ -53,10 +70,10 @@ export var SegmentButton = function (_a) {
53
70
  }, style: {
54
71
  flexGrow: inline || multipleRows ? undefined : 1,
55
72
  width: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
56
- }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [_jsx(SSegmentText, { style: {
73
+ }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [_jsx(SSegmentText, __assign({ style: {
57
74
  opacity: 0,
58
75
  fontWeight: '900',
59
- }, "$isSelected": false, children: label }), _jsx(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), _jsx(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
76
+ }, "$isSelected": false }, textSizeProps, { children: label })), _jsx(SSegmentText, __assign({ style: animatedStyleNormal, "$isSelected": false }, textSizeProps, { children: label })), _jsx(SSegmentText, __assign({ style: animatedStyleBold, "$isSelected": true }, textSizeProps, { children: label }))] }) }));
60
77
  };
61
78
  var SSegmentsWrapper = styled.View(function (_a) {
62
79
  var theme = _a.theme, $size = _a.$size, multiline = _a.multiline;
package/dist/esm/components/SelectField/Select.js CHANGED
@@ -14,7 +14,7 @@ import { Strong } from '../Strong';
14
14
  var SelectInput = styled.TouchableOpacity(function (_a) {
15
15
  var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
16
16
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-direction: row;\n align-items: center;\n background-color: transparent;\n border-color: ", ";\n border-width: ", ";\n border-radius: ", ";\n padding: ", ";\n padding-right: 14px;\n height: 44px;\n "], ["\n flex-direction: row;\n align-items: center;\n background-color: transparent;\n border-color: ", ";\n border-width: ", ";\n border-radius: ", ";\n padding: ", ";\n padding-right: 14px;\n height: 44px;\n "])), hasError
17
- ? semantic.error.border
17
+ ? semantic.error.message
18
18
  : semantic.border.functional, numToPx(core.borderWidth.small), numToPx(core.radius.small), numToPx(core.space[2]));
19
19
  });
20
20
  var DropdownWrapper = styled.View(function (_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ovotech/element-native",
3
- "version": "4.4.6",
3
+ "version": "4.4.7-canary-07b38e7-329",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@backpackapp-io/react-native-toast": "^0.10.0",
17
+ "@ovotech/element-core": "3.2.1-canary-07b38e7-329",
17
18
  "deepmerge": "^4.2.2",
18
19
  "lodash.groupby": "^4.6.0",
19
- "react-native-reanimated-carousel": "^3.5.1",
20
- "@ovotech/element-core": "3.2.0"
20
+ "react-native-reanimated-carousel": "^3.5.1"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@babel/core": "^7.11.5",