@ovotech/element-native 4.4.4 → 4.4.5-canary-b086840-321

package/dist/components/FilterSelect/FilterSelect.d.ts

@@ -11,6 +11,7 @@ export type FilterSelect = {
     rightText?: string;
     leftText?: string;
     dropdownDirection?: 'left' | 'right';
+    accessibilityHint?: string;
 };
-export declare const FilterSelect: ({ options, defaultSelected, onSelected, testID, rightText, leftText, dropdownDirection, }: FilterSelect) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterSelect: ({ options, defaultSelected, onSelected, testID, rightText, leftText, dropdownDirection, accessibilityHint, }: FilterSelect) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FilterSelect/FilterSelect.js

@@ -56,7 +56,7 @@ var SelectOption = styled_native_1.default.TouchableOpacity(function (_a) {
 });
 var FilterSelect = function (_a) {
     var _b;
-    var _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.defaultSelected, defaultSelected = _d === void 0 ? { label: '', value: 'default' } : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.testID, testID = _f === void 0 ? 'select' : _f, rightText = _a.rightText, leftText = _a.leftText, _g = _a.dropdownDirection, dropdownDirection = _g === void 0 ? 'right' : _g;
+    var _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.defaultSelected, defaultSelected = _d === void 0 ? { label: '', value: 'default' } : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.testID, testID = _f === void 0 ? 'select' : _f, rightText = _a.rightText, leftText = _a.leftText, _g = _a.dropdownDirection, dropdownDirection = _g === void 0 ? 'right' : _g, accessibilityHint = _a.accessibilityHint;
     var theme = (0, styled_native_1.useTheme)();
     var selectRef = (0, react_1.useRef)(null);
     var _h = (0, react_1.useState)(false), isOpen = _h[0], setOpen = _h[1];
@@ -76,7 +76,7 @@ var FilterSelect = function (_a) {
                             right: react_native_1.Dimensions.get('window').width - (x + width),
                         });
                     });
-                }, accessibilityRole: "combobox", children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default'
+                }, 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'
                                 ? ''
                                 : (_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: {
                             top: measure === null || measure === void 0 ? void 0 : measure.top,

package/dist/components/SegmentedControls/SegmentedControls.d.ts

@@ -3,6 +3,7 @@ export type Segment = {
     key: string;
     label: string;
     accessibilityLabel?: string;
+    accessibilityHint?: string;
 };
 type SegmentedControlsProps = ViewProps & {
     activeSegment: Segment[][number];

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -79,12 +79,11 @@ var SegmentedControls = function (_a) {
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
     return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
                 var _a, _b;
-                return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
-                        setActiveSegment(segment);
+                return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: function (x, y, width) {
                         animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
                         animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
                         animatedWidth.value = width;
-                    }, onLayout: function (width, height, x, y) {
+                    }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
                         if (activeSegment.key === segment.key) {
                             animatedX.value = x;
                             // (adrian.pop) - I couldn't figure out how to make the positioning work once the

package/dist/components/SegmentedControls/components/SegmentButton.d.ts

@@ -1,14 +1,16 @@
 type SegmentButtonProps = {
     isSelected: boolean;
     label: string;
-    onPress: (x: number, y: number, width: number) => void;
+    setAnimatedValues: (x: number, y: number, width: number) => void;
+    onPress: (...args: any[]) => void;
     onLayout: (width: number, height: number, x: number, y: number) => void;
     accessibilityLabel?: string;
+    accessibilityHint?: string;
     inline?: boolean;
     multipleRows?: boolean;
     size?: 'small' | 'large';
     testID?: string;
     segmentCount: number;
 };
-export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, segmentCount, size, testID, }: SegmentButtonProps) => JSX.Element;
+export declare const SegmentButton: ({ accessibilityLabel, accessibilityHint, inline, isSelected, label, multipleRows, onLayout, onPress, setAnimatedValues, segmentCount, size, testID, }: SegmentButtonProps) => JSX.Element;
 export {};

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

@@ -35,7 +35,7 @@ var styled_native_1 = __importDefault(require("../../../styled.native"));
 var P_1 = require("../../P");
 var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
 var SegmentButton = function (_a) {
-    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
+    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;
     var xRef = (0, react_1.useRef)(0);
     var yRef = (0, react_1.useRef)(0);
     var widthRef = (0, react_1.useRef)(0);
@@ -57,6 +57,17 @@ var SegmentButton = function (_a) {
     (0, react_1.useEffect)(function () {
         fontWeightAnim.value = (0, react_native_reanimated_1.withTiming)(isSelected ? 1 : 0);
     }, [fontWeightAnim, isSelected]);
+    (0, react_1.useEffect)(function () {
+        if (!isSelected) {
+            return;
+        }
+        setAnimatedValues(xRef.current, 
+        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+        // 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 - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+    }, [isSelected]);
     var handleLayout = function (event) {
         var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
@@ -65,15 +76,7 @@ var SegmentButton = function (_a) {
         widthRef.current = width;
         onLayout(width, height, x, y);
     };
-    var handlePress = function () {
-        onPress(xRef.current, 
-        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-        // 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 - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
-    };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
+    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: {
             top: hitslopVal,
             bottom: hitslopVal,
         }, style: {

package/dist/esm/components/FilterSelect/FilterSelect.js

@@ -30,7 +30,7 @@ var SelectOption = styled.TouchableOpacity(function (_a) {
 });
 export var FilterSelect = function (_a) {
     var _b;
-    var _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.defaultSelected, defaultSelected = _d === void 0 ? { label: '', value: 'default' } : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.testID, testID = _f === void 0 ? 'select' : _f, rightText = _a.rightText, leftText = _a.leftText, _g = _a.dropdownDirection, dropdownDirection = _g === void 0 ? 'right' : _g;
+    var _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.defaultSelected, defaultSelected = _d === void 0 ? { label: '', value: 'default' } : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.testID, testID = _f === void 0 ? 'select' : _f, rightText = _a.rightText, leftText = _a.leftText, _g = _a.dropdownDirection, dropdownDirection = _g === void 0 ? 'right' : _g, accessibilityHint = _a.accessibilityHint;
     var theme = useTheme();
     var selectRef = useRef(null);
     var _h = useState(false), isOpen = _h[0], setOpen = _h[1];
@@ -50,7 +50,7 @@ export var FilterSelect = function (_a) {
                             right: Dimensions.get('window').width - (x + width),
                         });
                     });
-                }, accessibilityRole: "combobox", children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
+                }, accessible: true, accessibilityRole: "combobox", accessibilityHint: accessibilityHint, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
                                 ? ''
                                 : (_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: {
                             top: measure === null || measure === void 0 ? void 0 : measure.top,

package/dist/esm/components/SegmentedControls/SegmentedControls.js

@@ -53,12 +53,11 @@ export var SegmentedControls = function (_a) {
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
     return (_jsxs(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
                 var _a, _b;
-                return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
-                        setActiveSegment(segment);
+                return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: function (x, y, width) {
                         animatedX.value = withSpring(x, springSettings);
                         animatedY.value = withSpring(y, springSettings);
                         animatedWidth.value = width;
-                    }, onLayout: function (width, height, x, y) {
+                    }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
                         if (activeSegment.key === segment.key) {
                             animatedX.value = x;
                             // (adrian.pop) - I couldn't figure out how to make the positioning work once the

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

@@ -6,7 +6,7 @@ import styled from '../../../styled.native';
 import { P } from '../../P';
 var AnimatedP = Animated.createAnimatedComponent(P);
 export var SegmentButton = function (_a) {
-    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
+    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;
     var xRef = useRef(0);
     var yRef = useRef(0);
     var widthRef = useRef(0);
@@ -28,6 +28,17 @@ export var SegmentButton = function (_a) {
     useEffect(function () {
         fontWeightAnim.value = withTiming(isSelected ? 1 : 0);
     }, [fontWeightAnim, isSelected]);
+    useEffect(function () {
+        if (!isSelected) {
+            return;
+        }
+        setAnimatedValues(xRef.current, 
+        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+        // 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 - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+    }, [isSelected]);
     var handleLayout = function (event) {
         var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
@@ -36,15 +47,7 @@ export var SegmentButton = function (_a) {
         widthRef.current = width;
         onLayout(width, height, x, y);
     };
-    var handlePress = function () {
-        onPress(xRef.current, 
-        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-        // 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 - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
-    };
-    return (_jsx(Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
+    return (_jsx(Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
             top: hitslopVal,
             bottom: hitslopVal,
         }, style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.4.4",
+  "version": "4.4.5-canary-b086840-321",
   "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": "3.2.0-canary-b086840-321",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "@ovotech/element-core": "3.2.0"
+    "react-native-reanimated-carousel": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",