@ovotech/element-native 4.2.0-canary-e4f69de-294 → 4.2.0-canary-6b3a56d-296

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 (8) hide show
  1. package/dist/components/ActionCard/ActionCard.js +23 -3
  2. package/dist/components/FilterSelect/FilterSelect.js +1 -1
  3. package/dist/components/NavHeader/IconButton.d.ts +2 -0
  4. package/dist/components/NavHeader/IconButton.js +1 -1
  5. package/dist/esm/components/ActionCard/ActionCard.js +23 -3
  6. package/dist/esm/components/FilterSelect/FilterSelect.js +1 -1
  7. package/dist/esm/components/NavHeader/IconButton.js +1 -1
  8. package/package.json +2 -2
package/dist/components/ActionCard/ActionCard.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);
@@ -36,7 +47,13 @@ var __1 = require("../");
36
47
  var styled_native_1 = __importStar(require("../../styled.native"));
37
48
  var P_1 = require("../P");
38
49
  var IndicatorIconShape_1 = require("./IndicatorIconShape");
39
- var StyledCard = styled_native_1.default.Pressable(function (_a) {
50
+ var StyledPressableCard = styled_native_1.default.Pressable(function (_a) {
51
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
52
+ var paddingVal = inline ? core.space[4] : core.space[6];
53
+ var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
54
+ return "\n border-radius: ".concat(inline ? (0, element_core_1.numToPx)(core.space[6]) : 0, ";\n background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n padding: ").concat((0, element_core_1.numToPx)(paddingVal), ";\n padding-bottom: ").concat((0, element_core_1.numToPx)(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n overflow: hidden;\n border-width: 0;\n width: 100%;\n ");
55
+ });
56
+ var StyledCard = styled_native_1.default.View(function (_a) {
40
57
  var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
41
58
  var paddingVal = inline ? core.space[4] : core.space[6];
42
59
  var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
@@ -58,6 +75,9 @@ var ActionCard = function (_a) {
58
75
  var cardAction = hasSingleAction
59
76
  ? onPressActionButton || onPressIndicator
60
77
  : null;
78
+ var RootContainer = hasSingleAction
79
+ ? StyledPressableCard
80
+ : StyledCard;
61
81
  (0, react_1.useEffect)(function () {
62
82
  if (onMount) {
63
83
  onMount();
@@ -66,7 +86,7 @@ var ActionCard = function (_a) {
66
86
  var Heading = inline ? __1.Heading3 : __1.Heading2;
67
87
  var cardPadding = core.space[inline ? 4 : 6];
68
88
  var negativeMarginAdjustment = -cardPadding;
69
- return ((0, jsx_runtime_1.jsxs)(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
89
+ return ((0, jsx_runtime_1.jsxs)(RootContainer, __assign({}, (cardAction ? { onPress: cardAction } : {}), { inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), accessibilityRole: cardAction ? 'button' : 'none', children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
70
90
  color: inverted
71
91
  ? semantic.inverted.message.link
72
92
  : semantic.message.branded,
@@ -106,6 +126,6 @@ var ActionCard = function (_a) {
106
126
  position: 'absolute',
107
127
  right: core.space[2],
108
128
  top: core.space[2],
109
- }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: (0, jsx_runtime_1.jsx)(CloseIconWrapper, { inverted: inverted, children: (0, jsx_runtime_1.jsx)(__1.Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
129
+ }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: (0, jsx_runtime_1.jsx)(CloseIconWrapper, { inverted: inverted, children: (0, jsx_runtime_1.jsx)(__1.Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] })));
110
130
  };
111
131
  exports.ActionCard = ActionCard;
package/dist/components/FilterSelect/FilterSelect.js CHANGED
@@ -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
- }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default'
79
+ }, accessibilityRole: "dropdown", 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/NavHeader/IconButton.d.ts CHANGED
@@ -3,6 +3,8 @@ import { IconNameExtended } from '../../providers';
3
3
  export type RightActionConfig = {
4
4
  iconName?: IconNameExtended;
5
5
  onActionPress?: () => void;
6
+ accessibilityLabel?: string;
7
+ accessibilityHint?: string;
6
8
  };
7
9
  type IconButtonProps = {
8
10
  size: 'small' | 'large';
package/dist/components/NavHeader/IconButton.js CHANGED
@@ -13,7 +13,7 @@ var IconButton = function (_a) {
13
13
  if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
14
14
  return null;
15
15
  }
16
- return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, children: function (_a) {
16
+ return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: function (_a) {
17
17
  var pressed = _a.pressed;
18
18
  return ((0, jsx_runtime_1.jsx)(ButtonStyled, { entering: animation, "$pressed": pressed, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) }));
19
19
  } }));
package/dist/esm/components/ActionCard/ActionCard.js CHANGED
@@ -1,3 +1,14 @@
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 { numToPx } from '@ovotech/element-core';
3
14
  import MaskedView from '@react-native-masked-view/masked-view';
@@ -7,7 +18,13 @@ import { Action, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../
7
18
  import styled, { ThemeContext } from '../../styled.native';
8
19
  import { P } from '../P';
9
20
  import { IndicatorIconShape } from './IndicatorIconShape';
10
- var StyledCard = styled.Pressable(function (_a) {
21
+ var StyledPressableCard = styled.Pressable(function (_a) {
22
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
23
+ var paddingVal = inline ? core.space[4] : core.space[6];
24
+ var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
25
+ return "\n border-radius: ".concat(inline ? numToPx(core.space[6]) : 0, ";\n background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n padding: ").concat(numToPx(paddingVal), ";\n padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n overflow: hidden;\n border-width: 0;\n width: 100%;\n ");
26
+ });
27
+ var StyledCard = styled.View(function (_a) {
11
28
  var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
12
29
  var paddingVal = inline ? core.space[4] : core.space[6];
13
30
  var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
@@ -29,6 +46,9 @@ export var ActionCard = function (_a) {
29
46
  var cardAction = hasSingleAction
30
47
  ? onPressActionButton || onPressIndicator
31
48
  : null;
49
+ var RootContainer = hasSingleAction
50
+ ? StyledPressableCard
51
+ : StyledCard;
32
52
  useEffect(function () {
33
53
  if (onMount) {
34
54
  onMount();
@@ -37,7 +57,7 @@ export var ActionCard = function (_a) {
37
57
  var Heading = inline ? Heading3 : Heading2;
38
58
  var cardPadding = core.space[inline ? 4 : 6];
39
59
  var negativeMarginAdjustment = -cardPadding;
40
- return (_jsxs(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
60
+ return (_jsxs(RootContainer, __assign({}, (cardAction ? { onPress: cardAction } : {}), { inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), accessibilityRole: cardAction ? 'button' : 'none', children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
41
61
  color: inverted
42
62
  ? semantic.inverted.message.link
43
63
  : semantic.message.branded,
@@ -77,5 +97,5 @@ export var ActionCard = function (_a) {
77
97
  position: 'absolute',
78
98
  right: core.space[2],
79
99
  top: core.space[2],
80
- }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
100
+ }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] })));
81
101
  };
package/dist/esm/components/FilterSelect/FilterSelect.js CHANGED
@@ -50,7 +50,7 @@ export var FilterSelect = function (_a) {
50
50
  right: Dimensions.get('window').width - (x + width),
51
51
  });
52
52
  });
53
- }, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
53
+ }, accessibilityRole: "dropdown", 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/NavHeader/IconButton.js CHANGED
@@ -10,7 +10,7 @@ export var IconButton = function (_a) {
10
10
  if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
11
11
  return null;
12
12
  }
13
- return (_jsx(Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, children: function (_a) {
13
+ return (_jsx(Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: function (_a) {
14
14
  var pressed = _a.pressed;
15
15
  return (_jsx(ButtonStyled, { entering: animation, "$pressed": pressed, children: _jsx(Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) }));
16
16
  } }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ovotech/element-native",
3
- "version": "4.2.0-canary-e4f69de-294",
3
+ "version": "4.2.0-canary-6b3a56d-296",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@backpackapp-io/react-native-toast": "^0.10.0",
17
- "@ovotech/element-core": "3.1.0-canary-e4f69de-294",
17
+ "@ovotech/element-core": "3.1.0-canary-6b3a56d-296",
18
18
  "deepmerge": "^4.2.2",
19
19
  "lodash.groupby": "^4.6.0",
20
20
  "react-native-reanimated-carousel": "^3.5.1"