@ovotech/element-native 4.4.5 → 4.4.6-canary-26d4f20-323

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 (10) hide show
  1. package/dist/components/FilterSelect/FilterSelect.d.ts +2 -1
  2. package/dist/components/FilterSelect/FilterSelect.js +2 -2
  3. package/dist/components/SegmentedControls/SegmentedControls.d.ts +1 -0
  4. package/dist/components/SegmentedControls/SegmentedControls.js +1 -1
  5. package/dist/components/SegmentedControls/components/SegmentButton.d.ts +2 -1
  6. package/dist/components/SegmentedControls/components/SegmentButton.js +2 -2
  7. package/dist/esm/components/FilterSelect/FilterSelect.js +2 -2
  8. package/dist/esm/components/SegmentedControls/SegmentedControls.js +1 -1
  9. package/dist/esm/components/SegmentedControls/components/SegmentButton.js +2 -2
  10. package/package.json +3 -3
package/dist/components/FilterSelect/FilterSelect.d.ts CHANGED
@@ -11,6 +11,7 @@ export type FilterSelect = {
11
11
  rightText?: string;
12
12
  leftText?: string;
13
13
  dropdownDirection?: 'left' | 'right';
14
+ accessibilityHint?: string;
14
15
  };
15
- export declare const FilterSelect: ({ options, defaultSelected, onSelected, testID, rightText, leftText, dropdownDirection, }: FilterSelect) => import("react/jsx-runtime").JSX.Element;
16
+ export declare const FilterSelect: ({ options, defaultSelected, onSelected, testID, rightText, leftText, dropdownDirection, accessibilityHint, }: FilterSelect) => import("react/jsx-runtime").JSX.Element;
16
17
  export {};
package/dist/components/FilterSelect/FilterSelect.js CHANGED
@@ -56,7 +56,7 @@ var SelectOption = styled_native_1.default.TouchableOpacity(function (_a) {
56
56
  });
57
57
  var FilterSelect = function (_a) {
58
58
  var _b;
59
- 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;
59
+ 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;
60
60
  var theme = (0, styled_native_1.useTheme)();
61
61
  var selectRef = (0, react_1.useRef)(null);
62
62
  var _h = (0, react_1.useState)(false), isOpen = _h[0], setOpen = _h[1];
@@ -76,7 +76,7 @@ var FilterSelect = function (_a) {
76
76
  right: react_native_1.Dimensions.get('window').width - (x + width),
77
77
  });
78
78
  });
79
- }, accessibilityRole: "combobox", children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default'
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
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
82
  top: measure === null || measure === void 0 ? void 0 : measure.top,
package/dist/components/SegmentedControls/SegmentedControls.d.ts CHANGED
@@ -3,6 +3,7 @@ export type Segment = {
3
3
  key: string;
4
4
  label: string;
5
5
  accessibilityLabel?: string;
6
+ accessibilityHint?: string;
6
7
  };
7
8
  type SegmentedControlsProps = ViewProps & {
8
9
  activeSegment: Segment[][number];
package/dist/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -79,7 +79,7 @@ var SegmentedControls = function (_a) {
79
79
  }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
80
80
  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) {
81
81
  var _a, _b;
82
- return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, setAnimatedValues: function (x, y, width) {
82
+ 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) {
83
83
  animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
84
84
  animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
85
85
  animatedWidth.value = width;
package/dist/components/SegmentedControls/components/SegmentButton.d.ts CHANGED
@@ -5,11 +5,12 @@ type SegmentButtonProps = {
5
5
  onPress: (...args: any[]) => void;
6
6
  onLayout: (width: number, height: number, x: number, y: number) => void;
7
7
  accessibilityLabel?: string;
8
+ accessibilityHint?: string;
8
9
  inline?: boolean;
9
10
  multipleRows?: boolean;
10
11
  size?: 'small' | 'large';
11
12
  testID?: string;
12
13
  segmentCount: number;
13
14
  };
14
- export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, setAnimatedValues, segmentCount, size, testID, }: SegmentButtonProps) => JSX.Element;
15
+ export declare const SegmentButton: ({ accessibilityLabel, accessibilityHint, inline, isSelected, label, multipleRows, onLayout, onPress, setAnimatedValues, segmentCount, size, testID, }: SegmentButtonProps) => JSX.Element;
15
16
  export {};
package/dist/components/SegmentedControls/components/SegmentButton.js CHANGED
@@ -35,7 +35,7 @@ var styled_native_1 = __importDefault(require("../../../styled.native"));
35
35
  var P_1 = require("../../P");
36
36
  var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
37
37
  var SegmentButton = function (_a) {
38
- var accessibilityLabel = _a.accessibilityLabel, 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;
38
+ 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
39
  var xRef = (0, react_1.useRef)(0);
40
40
  var yRef = (0, react_1.useRef)(0);
41
41
  var widthRef = (0, react_1.useRef)(0);
@@ -76,7 +76,7 @@ var SegmentButton = function (_a) {
76
76
  widthRef.current = width;
77
77
  onLayout(width, height, x, y);
78
78
  };
79
- return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
79
+ 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
80
  top: hitslopVal,
81
81
  bottom: hitslopVal,
82
82
  }, style: {
package/dist/esm/components/FilterSelect/FilterSelect.js CHANGED
@@ -30,7 +30,7 @@ var SelectOption = styled.TouchableOpacity(function (_a) {
30
30
  });
31
31
  export var FilterSelect = function (_a) {
32
32
  var _b;
33
- 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;
33
+ 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;
34
34
  var theme = useTheme();
35
35
  var selectRef = useRef(null);
36
36
  var _h = useState(false), isOpen = _h[0], setOpen = _h[1];
@@ -50,7 +50,7 @@ export var FilterSelect = function (_a) {
50
50
  right: Dimensions.get('window').width - (x + width),
51
51
  });
52
52
  });
53
- }, accessibilityRole: "combobox", children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
53
+ }, accessible: true, accessibilityRole: "combobox", accessibilityHint: accessibilityHint, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
54
54
  ? ''
55
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
56
  top: measure === null || measure === void 0 ? void 0 : measure.top,
package/dist/esm/components/SegmentedControls/SegmentedControls.js CHANGED
@@ -53,7 +53,7 @@ export var SegmentedControls = function (_a) {
53
53
  }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
54
54
  return (_jsxs(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
55
55
  var _a, _b;
56
- return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, setAnimatedValues: function (x, y, width) {
56
+ return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: function (x, y, width) {
57
57
  animatedX.value = withSpring(x, springSettings);
58
58
  animatedY.value = withSpring(y, springSettings);
59
59
  animatedWidth.value = width;
package/dist/esm/components/SegmentedControls/components/SegmentButton.js CHANGED
@@ -6,7 +6,7 @@ import styled from '../../../styled.native';
6
6
  import { P } from '../../P';
7
7
  var AnimatedP = Animated.createAnimatedComponent(P);
8
8
  export var SegmentButton = function (_a) {
9
- var accessibilityLabel = _a.accessibilityLabel, 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;
9
+ 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
10
  var xRef = useRef(0);
11
11
  var yRef = useRef(0);
12
12
  var widthRef = useRef(0);
@@ -47,7 +47,7 @@ export var SegmentButton = function (_a) {
47
47
  widthRef.current = width;
48
48
  onLayout(width, height, x, y);
49
49
  };
50
- return (_jsx(Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel || label, hitSlop: {
50
+ return (_jsx(Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
51
51
  top: hitslopVal,
52
52
  bottom: hitslopVal,
53
53
  }, style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ovotech/element-native",
3
- "version": "4.4.5",
3
+ "version": "4.4.6-canary-26d4f20-323",
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.0-canary-26d4f20-323",
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",