@ovotech/element-native 2.1.0 → 2.2.0-canary-ea79e4d-74

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 (147) hide show
  1. package/dist/components/Accordion/Accordion.js +20 -19
  2. package/dist/components/Accordion/Icon.js +7 -10
  3. package/dist/components/Accordion/styles.d.ts +688 -46
  4. package/dist/components/Accordion/styles.js +56 -49
  5. package/dist/components/Badge/Badge.d.ts +237 -8
  6. package/dist/components/Badge/Badge.js +35 -16
  7. package/dist/components/CTAButton/CTAButton.d.ts +7 -12
  8. package/dist/components/CTAButton/CTAButton.js +18 -19
  9. package/dist/components/CTALink/CTALink.d.ts +3 -3
  10. package/dist/components/Card/Card.d.ts +228 -5
  11. package/dist/components/Card/Card.js +5 -25
  12. package/dist/components/Checkbox/Checkbox.js +14 -19
  13. package/dist/components/DataTable/DataTable.d.ts +3 -12
  14. package/dist/components/DataTable/DataTable.js +8 -71
  15. package/dist/components/DataTable/TableRow.d.ts +2 -0
  16. package/dist/components/DataTable/TableRow.js +33 -0
  17. package/dist/components/DataTable/index.d.ts +2 -0
  18. package/dist/components/DataTable/index.js +16 -0
  19. package/dist/components/DataTable/styles.d.ts +2517 -0
  20. package/dist/components/DataTable/styles.js +77 -0
  21. package/dist/components/DataTable/types.d.ts +15 -0
  22. package/dist/components/DataTable/types.js +2 -0
  23. package/dist/components/DateField/DateField.js +9 -9
  24. package/dist/components/DescriptionList/DescriptionList.d.ts +10 -0
  25. package/dist/components/DescriptionList/DescriptionList.js +66 -0
  26. package/dist/components/DescriptionList/index.d.ts +1 -0
  27. package/dist/components/DescriptionList/index.js +6 -0
  28. package/dist/components/DescriptionList/styled.d.ts +241 -0
  29. package/dist/components/DescriptionList/styled.js +88 -0
  30. package/dist/components/Disclosure/Disclosure.js +7 -10
  31. package/dist/components/ErrorSummaryNotification/ErrorSummaryNotification.d.ts +1 -1
  32. package/dist/components/ErrorText/ErrorText.d.ts +228 -1
  33. package/dist/components/ErrorText/ErrorText.js +1 -1
  34. package/dist/components/Field/Field.js +3 -3
  35. package/dist/components/Grid/Col.d.ts +228 -1
  36. package/dist/components/Grid/Row.d.ts +228 -1
  37. package/dist/components/Heading/Heading.js +8 -24
  38. package/dist/components/HintText/HintText.d.ts +228 -1
  39. package/dist/components/HintText/HintText.js +1 -1
  40. package/dist/components/Icon/Icon.d.ts +2 -3
  41. package/dist/components/Icon/Icon.js +2 -2
  42. package/dist/components/Input/Input.d.ts +1 -1
  43. package/dist/components/Input/Input.js +13 -16
  44. package/dist/components/Input/PasswordInput.styled.d.ts +228 -1
  45. package/dist/components/Input/PasswordInput.styled.js +2 -5
  46. package/dist/components/Input/PasswordVisibilityToggle.js +2 -5
  47. package/dist/components/Input/{TelInput.d.ts → PhoneInput.d.ts} +2 -2
  48. package/dist/components/Input/{TelInput.js → PhoneInput.js} +3 -3
  49. package/dist/components/Input/TextareaInput.js +11 -9
  50. package/dist/components/Input/index.d.ts +1 -1
  51. package/dist/components/Input/index.js +3 -3
  52. package/dist/components/LabelText/LabelText.d.ts +228 -1
  53. package/dist/components/LabelText/LabelText.js +1 -1
  54. package/dist/components/List/List.d.ts +706 -3
  55. package/dist/components/List/List.js +18 -5
  56. package/dist/components/Margin/Margin.d.ts +228 -1
  57. package/dist/components/NavHeader/NavHeader.js +4 -4
  58. package/dist/components/Notification/Notification.d.ts +466 -20
  59. package/dist/components/Notification/Notification.js +32 -44
  60. package/dist/components/Radio/Radio.js +13 -29
  61. package/dist/components/SelectField/Select.d.ts +244 -0
  62. package/dist/components/SelectField/Select.js +101 -0
  63. package/dist/components/SelectField/SelectField.d.ts +7 -0
  64. package/dist/components/SelectField/SelectField.js +38 -0
  65. package/dist/components/SelectField/index.d.ts +1 -0
  66. package/dist/components/SelectField/index.js +5 -0
  67. package/dist/components/SkeletonLoading/Skeleton.d.ts +228 -1
  68. package/dist/components/SubLabelText/SubLabelText.d.ts +228 -1
  69. package/dist/components/SubLabelText/SubLabelText.js +1 -1
  70. package/dist/components/SummaryList/SummaryList.d.ts +4 -0
  71. package/dist/components/SummaryList/SummaryList.js +5 -0
  72. package/dist/components/Tabs/Tab.js +22 -19
  73. package/dist/components/Tabs/TabList.d.ts +11 -1
  74. package/dist/components/Tabs/TabList.js +19 -16
  75. package/dist/components/Tabs/TabPanel.js +32 -6
  76. package/dist/components/Tabs/Tabs.d.ts +8 -6
  77. package/dist/components/Tabs/Tabs.js +10 -6
  78. package/dist/components/Text/Text.d.ts +1140 -5
  79. package/dist/components/Text/Text.js +6 -10
  80. package/dist/components/TextField/PhoneField.d.ts +10 -0
  81. package/dist/components/TextField/PhoneField.js +56 -0
  82. package/dist/components/TextField/TelField.d.ts +4 -0
  83. package/dist/components/TextField/TelField.js +7 -2
  84. package/dist/components/TextField/index.d.ts +1 -0
  85. package/dist/components/TextField/index.js +3 -1
  86. package/dist/components/TextLink/TextLink.js +2 -2
  87. package/dist/components/index.d.ts +2 -0
  88. package/dist/components/index.js +2 -0
  89. package/dist/esm/components/Accordion/Accordion.js +23 -22
  90. package/dist/esm/components/Accordion/Icon.js +8 -8
  91. package/dist/esm/components/Accordion/styles.js +29 -48
  92. package/dist/esm/components/Badge/Badge.js +35 -16
  93. package/dist/esm/components/CTAButton/CTAButton.js +20 -21
  94. package/dist/esm/components/Card/Card.js +5 -25
  95. package/dist/esm/components/Checkbox/Checkbox.js +12 -20
  96. package/dist/esm/components/DataTable/DataTable.js +3 -66
  97. package/dist/esm/components/DataTable/TableRow.js +26 -0
  98. package/dist/esm/components/DataTable/index.js +2 -0
  99. package/dist/esm/components/DataTable/styles.js +51 -0
  100. package/dist/esm/components/DataTable/types.js +1 -0
  101. package/dist/esm/components/DateField/DateField.js +9 -9
  102. package/dist/esm/components/DescriptionList/DescriptionList.js +39 -0
  103. package/dist/esm/components/DescriptionList/index.js +1 -0
  104. package/dist/esm/components/DescriptionList/styled.js +57 -0
  105. package/dist/esm/components/Disclosure/Disclosure.js +9 -12
  106. package/dist/esm/components/ErrorText/ErrorText.js +1 -1
  107. package/dist/esm/components/Field/Field.js +3 -3
  108. package/dist/esm/components/Heading/Heading.js +8 -24
  109. package/dist/esm/components/HintText/HintText.js +1 -1
  110. package/dist/esm/components/Icon/Icon.js +2 -2
  111. package/dist/esm/components/Input/Input.js +15 -18
  112. package/dist/esm/components/Input/PasswordInput.styled.js +2 -5
  113. package/dist/esm/components/Input/PasswordVisibilityToggle.js +3 -6
  114. package/dist/esm/components/Input/{TelInput.js → PhoneInput.js} +2 -2
  115. package/dist/esm/components/Input/TextareaInput.js +11 -9
  116. package/dist/esm/components/Input/index.js +1 -1
  117. package/dist/esm/components/LabelText/LabelText.js +1 -1
  118. package/dist/esm/components/List/List.js +17 -5
  119. package/dist/esm/components/NavHeader/NavHeader.js +4 -4
  120. package/dist/esm/components/Notification/Notification.js +34 -46
  121. package/dist/esm/components/Radio/Radio.js +13 -29
  122. package/dist/esm/components/SelectField/Select.js +74 -0
  123. package/dist/esm/components/SelectField/SelectField.js +31 -0
  124. package/dist/esm/components/SelectField/index.js +1 -0
  125. package/dist/esm/components/SubLabelText/SubLabelText.js +1 -1
  126. package/dist/esm/components/SummaryList/SummaryList.js +5 -0
  127. package/dist/esm/components/Tabs/Tab.js +22 -16
  128. package/dist/esm/components/Tabs/TabList.js +18 -16
  129. package/dist/esm/components/Tabs/TabPanel.js +9 -6
  130. package/dist/esm/components/Tabs/Tabs.js +9 -6
  131. package/dist/esm/components/Text/Text.js +6 -10
  132. package/dist/esm/components/TextField/PhoneField.js +30 -0
  133. package/dist/esm/components/TextField/TelField.js +7 -2
  134. package/dist/esm/components/TextField/index.js +1 -0
  135. package/dist/esm/components/TextLink/TextLink.js +2 -2
  136. package/dist/esm/components/index.js +2 -0
  137. package/dist/esm/providers/icons/Logo.js +6 -3
  138. package/dist/esm/theme/create-theme.js +2 -176
  139. package/dist/esm/theme/index.js +13 -2
  140. package/dist/providers/icons/Logo.js +5 -2
  141. package/dist/styled.native.d.ts +1363 -1
  142. package/dist/theme/create-theme.d.ts +1 -1
  143. package/dist/theme/create-theme.js +2 -176
  144. package/dist/theme/index.d.ts +228 -2
  145. package/dist/theme/index.js +13 -2
  146. package/dist/theme/theme.d.ts +1 -110
  147. package/package.json +9 -6
@@ -1,8 +1,4 @@
1
1
  "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
2
  var __assign = (this && this.__assign) || function () {
7
3
  __assign = Object.assign || function(t) {
8
4
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -56,33 +52,23 @@ exports.Radio = void 0;
56
52
  var react_1 = __importStar(require("react"));
57
53
  var react_native_1 = require("react-native");
58
54
  var styled_native_1 = __importDefault(require("../../styled.native"));
59
- var utils_1 = require("../../utils");
60
55
  var HintText_1 = require("../HintText");
61
56
  var LabelText_1 = require("../LabelText");
62
57
  var StyledRadioInputWrapper = styled_native_1.default.View(function (_a) {
63
- var radio = _a.theme.radio;
64
- var radioSize = (0, utils_1.pxToNumber)(radio.size);
65
- var gap = (0, utils_1.pxToNumber)(radio.gap);
66
- return "\n width: ".concat(radioSize + gap, "px;\n height: ").concat(radio.touchSize, ";\n ");
58
+ var core = _a.theme.core;
59
+ return "\n width: ".concat(core.space[6], ";\n height: ").concat(core.space[6], ";\n margin-right: 10px;\n ");
67
60
  });
68
61
  var StyledRadioInput = styled_native_1.default.View(function (_a) {
69
- var radio = _a.theme.radio, invalid = _a.invalid, checked = _a.checked;
70
- var touchSize = (0, utils_1.pxToNumber)(radio.touchSize);
71
- var radioSize = (0, utils_1.pxToNumber)(radio.size);
72
- var radioDistance = (touchSize - radioSize) / 2;
73
- return "\n width: ".concat(radio.size, ";\n height: ").concat(radio.size, ";\n border: ").concat(radio.borderWidth, " solid;\n margin-top: ").concat(radioDistance, "px;\n border-radius: ").concat(radioSize / 2, "px;\n border-color: ").concat(invalid
74
- ? radio.errorColor
62
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
63
+ return "\n width: ".concat(core.space[6], ";\n height: ").concat(core.space[6], ";\n border: ").concat(core.borderWidth.small, " solid;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n border-color: ").concat(invalid
64
+ ? semantic.error.border
75
65
  : checked
76
- ? radio.dotColor
77
- : radio.borderColor, ";\n background: ").concat(radio.background, ";\n background: ").concat(checked ? radio.checkedBackground : radio.background, ";\n ");
66
+ ? core.color.blue.dark
67
+ : semantic.border.functional, ";\n background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n ");
78
68
  });
79
69
  var StyledRadioInputDot = styled_native_1.default.View(function (_a) {
80
- var radio = _a.theme.radio, checked = _a.checked;
81
- var radioSize = (0, utils_1.pxToNumber)(radio.size);
82
- var dotSize = (0, utils_1.pxToNumber)(radio.dotSize);
83
- var borderWidth = (0, utils_1.pxToNumber)(radio.borderWidth);
84
- var dotDistance = (radioSize - dotSize) / 2 - borderWidth;
85
- return "\n width: ".concat(radio.dotSize, ";\n height: ").concat(radio.dotSize, ";\n margin: ").concat(dotDistance, "px;\n border-radius: ").concat(radioSize / 2, "px;\n background: ").concat(radio.dotColor, ";\n opacity: ").concat(checked ? 1 : 0, ";\n ");
70
+ var core = _a.theme.core, checked = _a.checked;
71
+ return "\n width: ".concat(core.space[3], ";\n height: ").concat(core.space[3], ";\n border-radius: 50%;\n background: ").concat(core.color.blue.dark, ";\n opacity: ").concat(checked ? 1 : 0, ";\n ");
86
72
  });
87
73
  var Input = function (_a) {
88
74
  var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
@@ -90,11 +76,10 @@ var Input = function (_a) {
90
76
  react_1.default.createElement(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID },
91
77
  react_1.default.createElement(StyledRadioInputDot, { checked: checked }))));
92
78
  };
93
- var RadioLabelText = (0, styled_native_1.default)(LabelText_1.LabelText)(function (_a) {
94
- var space = _a.theme.space;
95
- return "\n padding-top: ".concat(space[3], ";\n ");
79
+ var StyledWrapper = styled_native_1.default.View(function (_a) {
80
+ var core = _a.theme.core;
81
+ return "\n padding-top: ".concat(core.space[3], ";\n flex-direction: row;\n ");
96
82
  });
97
- var StyledWrapper = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-direction: row;\n"], ["\n flex-direction: row;\n"])));
98
83
  var Radio = (0, react_1.forwardRef)(function (_a, ref) {
99
84
  var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid,
100
85
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -105,8 +90,7 @@ var Radio = (0, react_1.forwardRef)(function (_a, ref) {
105
90
  react_1.default.createElement(StyledWrapper, null,
106
91
  react_1.default.createElement(Input, { checked: checked, invalid: invalid, testID: testID }),
107
92
  react_1.default.createElement(react_native_1.View, { style: { flexShrink: 1 } },
108
- react_1.default.createElement(RadioLabelText, null, label),
93
+ react_1.default.createElement(LabelText_1.LabelText, null, label),
109
94
  hint ? react_1.default.createElement(HintText_1.HintText, null, hint) : null))));
110
95
  });
111
96
  exports.Radio = Radio;
112
- var templateObject_1;
@@ -0,0 +1,244 @@
1
+ declare type SelectOption = {
2
+ label: string;
3
+ value: string;
4
+ };
5
+ export declare type SelectProps = {
6
+ defaultSelected?: SelectOption;
7
+ options: Array<SelectOption>;
8
+ noOptionMessage?: string;
9
+ hasError?: boolean;
10
+ onSelected?(value: SelectOption): void;
11
+ testID?: string;
12
+ };
13
+ declare const SelectOption: import("styled-components").StyledComponent<typeof import("react-native").TouchableOpacity, import("../../theme/theme").Theme & {
14
+ core: {
15
+ radius: Record<"small" | "medium" | "large" | "max", string>;
16
+ borderWidth: Record<"small" | "medium" | "large", string>;
17
+ breakpoint: Record<"small" | "medium" | "large", string | number>;
18
+ mediaQuery: Record<"small" | "medium" | "large", string>;
19
+ space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
20
+ transition: Record<"medium" | "slow" | "fast", string>;
21
+ opacity: Record<"solid" | "transparent" | "translucent", string | number>;
22
+ color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
23
+ lightest: string;
24
+ lighter: string;
25
+ light: string;
26
+ base: string;
27
+ dark: string;
28
+ darker: string;
29
+ darkest: string;
30
+ }> & {
31
+ brand: Record<string, string>;
32
+ };
33
+ fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
34
+ native: string;
35
+ web: string;
36
+ }>;
37
+ fontWeight: Record<"bold" | "book" | "black", string | number>;
38
+ fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
39
+ small: string | number;
40
+ large: string | number;
41
+ }>;
42
+ lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
43
+ small: string | number;
44
+ large: string | number;
45
+ }>;
46
+ letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
47
+ };
48
+ semantic: {
49
+ surface: Record<"base" | "cutout" | "elevated", string>;
50
+ message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
51
+ border: Record<"graphic" | "differentiated" | "functional", string>;
52
+ focus: Record<"surface" | "outline" | "hover", string>;
53
+ inverted: Record<"border" | "surface", string> & {
54
+ message: Record<"base" | "link" | "secondary" | "branded", string>;
55
+ };
56
+ success: {
57
+ border: string;
58
+ surface: string;
59
+ surfaceEmphasis: string;
60
+ message: string;
61
+ messageOnEmphasis: string;
62
+ };
63
+ warning: {
64
+ border: string;
65
+ surface: string;
66
+ surfaceEmphasis: string;
67
+ message: string;
68
+ messageOnEmphasis: string;
69
+ };
70
+ error: {
71
+ border: string;
72
+ surface: string;
73
+ surfaceEmphasis: string;
74
+ message: string;
75
+ messageOnEmphasis: string;
76
+ };
77
+ info: {
78
+ border: string;
79
+ surface: string;
80
+ surfaceEmphasis: string;
81
+ message: string;
82
+ messageOnEmphasis: string;
83
+ };
84
+ data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
85
+ };
86
+ component: {
87
+ heading1: {
88
+ fontFamily: string;
89
+ fontWeight: string | number;
90
+ fontSize: {
91
+ small: string | number;
92
+ large: string | number;
93
+ };
94
+ lineHeight: {
95
+ small: string | number;
96
+ large: string | number;
97
+ };
98
+ };
99
+ heading2: {
100
+ fontFamily: string;
101
+ fontWeight: string | number;
102
+ fontSize: {
103
+ small: string | number;
104
+ large: string | number;
105
+ };
106
+ lineHeight: {
107
+ small: string | number;
108
+ large: string | number;
109
+ };
110
+ };
111
+ heading3: {
112
+ fontFamily: string;
113
+ fontWeight: string | number;
114
+ fontSize: {
115
+ small: string | number;
116
+ large: string | number;
117
+ };
118
+ lineHeight: {
119
+ small: string | number;
120
+ large: string | number;
121
+ };
122
+ };
123
+ heading4: {
124
+ fontFamily: string;
125
+ fontWeight: string | number;
126
+ fontSize: {
127
+ small: string | number;
128
+ large: string | number;
129
+ };
130
+ lineHeight: {
131
+ small: string | number;
132
+ large: string | number;
133
+ };
134
+ };
135
+ lead: {
136
+ fontFamily: string;
137
+ fontWeight: string | number;
138
+ fontSize: {
139
+ small: string | number;
140
+ large: string | number;
141
+ };
142
+ lineHeight: {
143
+ small: string | number;
144
+ large: string | number;
145
+ };
146
+ };
147
+ body: {
148
+ fontFamily: string;
149
+ fontWeight: string | number;
150
+ fontSize: {
151
+ small: string | number;
152
+ large: string | number;
153
+ };
154
+ lineHeight: {
155
+ small: string | number;
156
+ large: string | number;
157
+ };
158
+ };
159
+ small: {
160
+ fontFamily: string;
161
+ fontWeight: string | number;
162
+ fontSize: {
163
+ small: string | number;
164
+ large: string | number;
165
+ };
166
+ lineHeight: {
167
+ small: string | number;
168
+ large: string | number;
169
+ };
170
+ };
171
+ label: {
172
+ fontFamily: string;
173
+ fontWeight: string | number;
174
+ fontSize: {
175
+ small: string | number;
176
+ large: string | number;
177
+ };
178
+ lineHeight: {
179
+ small: string | number;
180
+ large: string | number;
181
+ };
182
+ };
183
+ cta: {
184
+ primary: {
185
+ message: string;
186
+ surface: string;
187
+ messageHover: string;
188
+ surfaceHover: string;
189
+ messageFocused: string;
190
+ surfaceFocused: string;
191
+ outlineFocused: string;
192
+ backgroundFocused: string;
193
+ };
194
+ secondary: {
195
+ message: string;
196
+ surface: string;
197
+ messageHover: string;
198
+ surfaceHover: string;
199
+ messageFocused: string;
200
+ surfaceFocused: string;
201
+ outlineFocused: string;
202
+ backgroundFocused: string;
203
+ };
204
+ destructive: {
205
+ message: string;
206
+ surface: string;
207
+ messageHover: string;
208
+ surfaceHover: string;
209
+ messageFocused: string;
210
+ surfaceFocused: string;
211
+ outlineFocused: string;
212
+ backgroundFocused: string;
213
+ };
214
+ };
215
+ badge: {
216
+ variants: {
217
+ red: {
218
+ foreground: string;
219
+ background: string;
220
+ };
221
+ orange: {
222
+ foreground: string;
223
+ background: string;
224
+ };
225
+ yellow: {
226
+ foreground: string;
227
+ background: string;
228
+ };
229
+ green: {
230
+ foreground: string;
231
+ background: string;
232
+ };
233
+ blue: {
234
+ foreground: string;
235
+ background: string;
236
+ };
237
+ };
238
+ };
239
+ };
240
+ }, {
241
+ isLastOption: boolean;
242
+ }, never>;
243
+ export declare const Select: ({ options, defaultSelected, noOptionMessage, onSelected, hasError, testID, }: SelectProps) => JSX.Element;
244
+ export {};
@@ -0,0 +1,101 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
+ if (k2 === undefined) k2 = k;
8
+ var desc = Object.getOwnPropertyDescriptor(m, k);
9
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
10
+ desc = { enumerable: true, get: function() { return m[k]; } };
11
+ }
12
+ Object.defineProperty(o, k2, desc);
13
+ }) : (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ o[k2] = m[k];
16
+ }));
17
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
18
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
19
+ }) : function(o, v) {
20
+ o["default"] = v;
21
+ });
22
+ var __importStar = (this && this.__importStar) || function (mod) {
23
+ if (mod && mod.__esModule) return mod;
24
+ var result = {};
25
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
26
+ __setModuleDefault(result, mod);
27
+ return result;
28
+ };
29
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
30
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
31
+ if (ar || !(i in from)) {
32
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
33
+ ar[i] = from[i];
34
+ }
35
+ }
36
+ return to.concat(ar || Array.prototype.slice.call(from));
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ exports.Select = void 0;
40
+ var react_1 = __importStar(require("react"));
41
+ var react_native_1 = require("react-native");
42
+ var styled_native_1 = __importStar(require("../../styled.native"));
43
+ var Icon_1 = require("../Icon");
44
+ var Text_1 = require("../Text");
45
+ var SelectInput = styled_native_1.default.TouchableOpacity(function (_a) {
46
+ var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
47
+ return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-direction: row;\n align-items: center;\n background-color: ", ";\n border-color: ", ";\n border-width: ", "\n border-radius: ", ";\n padding-vertical: ", "\n padding-left: ", "\n padding-right: 14px;\n height: 44px;\n "], ["\n flex-direction: row;\n align-items: center;\n background-color: ", ";\n border-color: ", ";\n border-width: ", "\n border-radius: ", ";\n padding-vertical: ", "\n padding-left: ", "\n padding-right: 14px;\n height: 44px;\n "])), core.color.brand.white, hasError ? semantic.error.border : semantic.border.functional, core.borderWidth.small, core.radius.small, core.space[2], core.space[2]);
48
+ });
49
+ var DropdownWrapper = styled_native_1.default.View(function (_a) {
50
+ var core = _a.theme.core;
51
+ return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n justify-content: center;\n align-items: center;\n // 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4\n background-color: ", "40;\n "], ["\n flex: 1;\n justify-content: center;\n align-items: center;\n // 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4\n background-color: ", "40;\n "])), core.color.neutral.darkest);
52
+ });
53
+ var DropdownContainer = styled_native_1.default.SafeAreaView(function (_a) {
54
+ var core = _a.theme.core;
55
+ return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 95%;\n max-height: 70%;\n border-radius: ", ";\n background-color: ", ";\n "], ["\n width: 95%;\n max-height: 70%;\n border-radius: ", ";\n background-color: ", ";\n "])), core.radius.small, core.color.brand.white);
56
+ });
57
+ var SelectOption = styled_native_1.default.TouchableOpacity(function (_a) {
58
+ var _b = _a.theme, semantic = _b.semantic, core = _b.core, isLastOption = _a.isLastOption;
59
+ return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex-direction: row;\n align-items: center;\n border-bottom-color: ", ";\n border-bottom-width: ", "px;\n padding-horizontal: ", ";\n "], ["\n flex-direction: row;\n align-items: center;\n border-bottom-color: ", ";\n border-bottom-width: ", "px;\n padding-horizontal: ", ";\n "])), semantic.border.differentiated, isLastOption ? 0 : 1, core.space[4]);
60
+ });
61
+ var Radio = styled_native_1.default.View(function (_a) {
62
+ var _b = _a.theme, core = _b.core, semantic = _b.semantic, isChecked = _a.isChecked;
63
+ return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 24px;\n height: 24px;\n margin-left: auto;\n border-radius: 24px;\n border-width: ", ";\n border-color: ", ";\n "], ["\n width: 24px;\n height: 24px;\n margin-left: auto;\n border-radius: 24px;\n border-width: ", ";\n border-color: ", ";\n "])), core.borderWidth.small, isChecked
64
+ ? semantic.focus.outline
65
+ : semantic.border.functional);
66
+ });
67
+ var RadioDot = styled_native_1.default.View(function (_a) {
68
+ var semantic = _a.theme.semantic, isChecked = _a.isChecked;
69
+ return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n position: absolute;\n top: 5px;\n width: 12px;\n height: 12px;\n border-radius: 12px;\n align-self: center;\n opacity: ", ";\n "], ["\n background-color: ", ";\n position: absolute;\n top: 5px;\n width: 12px;\n height: 12px;\n border-radius: 12px;\n align-self: center;\n opacity: ", ";\n "])), semantic.focus.outline, isChecked ? 1 : 0);
70
+ });
71
+ var StyledP = (0, styled_native_1.default)(Text_1.P)(function (_a) {
72
+ var core = _a.theme.core;
73
+ return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: ", ";\n "], ["\n margin-top: ", ";\n "])), core.space[3]);
74
+ });
75
+ var Select = function (_a) {
76
+ 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;
77
+ var _h = (0, react_1.useState)(false), isOpen = _h[0], setOpen = _h[1];
78
+ var _j = (0, react_1.useState)(defaultSelected), selected = _j[0], setSelected = _j[1];
79
+ var handleOptionPress = function (val) {
80
+ onSelected(val);
81
+ setOpen(false);
82
+ setSelected(val);
83
+ };
84
+ var extendedOptions = __spreadArray([
85
+ { label: "-- ".concat(noOptionMessage, " --"), value: 'default' }
86
+ ], options, true);
87
+ return (react_1.default.createElement(react_native_1.View, null,
88
+ react_1.default.createElement(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); } },
89
+ react_1.default.createElement(Text_1.P, { style: { marginTop: 0, marginBottom: 0 } }, selected.value === 'default' ? '' : selected.label),
90
+ react_1.default.createElement(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })),
91
+ react_1.default.createElement(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } },
92
+ react_1.default.createElement(DropdownWrapper, null,
93
+ react_1.default.createElement(DropdownContainer, null,
94
+ react_1.default.createElement(react_native_1.ScrollView, { nestedScrollEnabled: true }, extendedOptions.map(function (option, i) { return (react_1.default.createElement(SelectOption, { key: option.label, accessibilityRole: "radio", isLastOption: i === extendedOptions.length - 1, onPress: function () { return handleOptionPress(option); } },
95
+ react_1.default.createElement(StyledP, null,
96
+ react_1.default.createElement(Text_1.Strong, null, option.label)),
97
+ react_1.default.createElement(Radio, { isChecked: selected.value === option.value },
98
+ react_1.default.createElement(RadioDot, { isChecked: selected.value === option.value })))); })))))));
99
+ };
100
+ exports.Select = Select;
101
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
@@ -0,0 +1,7 @@
1
+ import { FieldProps } from '../Field';
2
+ import { SelectProps } from './Select';
3
+ declare type SelectFieldProps = SelectProps & Omit<FieldProps, 'children'> & {
4
+ testID?: string;
5
+ };
6
+ export declare const SelectField: ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ...rest }: SelectFieldProps) => JSX.Element;
7
+ export {};
@@ -0,0 +1,38 @@
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
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ exports.SelectField = void 0;
29
+ var react_1 = __importDefault(require("react"));
30
+ var Field_1 = require("../Field");
31
+ var Select_1 = require("./Select");
32
+ var SelectField = function (_a) {
33
+ var error = _a.error, options = _a.options, onSelected = _a.onSelected, noOptionMessage = _a.noOptionMessage, defaultSelected = _a.defaultSelected, testID = _a.testID, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "testID"]);
34
+ return (react_1.default.createElement(Field_1.Field, __assign({ affixWidth: 20, error: error }, rest),
35
+ react_1.default.createElement(react_1.default.Fragment, null,
36
+ react_1.default.createElement(Select_1.Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID }))));
37
+ };
38
+ exports.SelectField = SelectField;
@@ -0,0 +1 @@
1
+ export { SelectField } from './SelectField';
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SelectField = void 0;
4
+ var SelectField_1 = require("./SelectField");
5
+ Object.defineProperty(exports, "SelectField", { enumerable: true, get: function () { return SelectField_1.SelectField; } });