@telus-uds/components-base 1.0.1 → 1.3.0

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 (193) hide show
  1. package/.storybook/main.js +4 -0
  2. package/.storybook/preview.js +37 -0
  3. package/.turbo/turbo-build.log +5 -0
  4. package/CHANGELOG.md +32 -0
  5. package/README.md +1 -1
  6. package/__fixtures__/Accessible.js +4 -2
  7. package/__fixtures__/Accessible.native.js +5 -2
  8. package/__fixtures__/testTheme.js +9 -0
  9. package/__tests__/FlexGrid/Col.test.jsx +6 -10
  10. package/__tests__/HorizontalScroll/HorizontalScroll.test.jsx +1 -0
  11. package/__tests__/ToggleSwitch/ToggleSwitch.test.jsx +10 -0
  12. package/__tests__/ToggleSwitch/ToggleSwitchGroup.test.jsx +192 -0
  13. package/__tests__/utils/props.test.js +36 -0
  14. package/__tests__/utils/semantics.test.jsx +1 -10
  15. package/babel.config.js +9 -16
  16. package/component-docs.json +10142 -0
  17. package/generate-component-docs.js +59 -0
  18. package/lib/A11yText/index.js +2 -2
  19. package/lib/ActivityIndicator/index.js +3 -3
  20. package/lib/Box/Box.js +4 -4
  21. package/lib/Button/Button.js +2 -2
  22. package/lib/Button/ButtonBase.js +20 -6
  23. package/lib/Button/ButtonGroup.js +10 -12
  24. package/lib/Button/ButtonLink.js +4 -4
  25. package/lib/Button/propTypes.js +4 -2
  26. package/lib/Card/Card.js +2 -2
  27. package/lib/Card/CardBase.js +6 -9
  28. package/lib/Card/PressableCardBase.js +12 -6
  29. package/lib/Checkbox/Checkbox.js +3 -5
  30. package/lib/Divider/Divider.js +2 -2
  31. package/lib/FlexGrid/FlexGrid.js +4 -4
  32. package/lib/FlexGrid/helpers/index.js +1 -4
  33. package/lib/IconButton/IconButton.js +11 -6
  34. package/lib/Link/LinkBase.js +19 -12
  35. package/lib/List/List.js +4 -5
  36. package/lib/List/ListItem.js +14 -27
  37. package/lib/List/index.js +15 -0
  38. package/lib/Pagination/PageButton.js +4 -8
  39. package/lib/Pagination/Pagination.js +16 -4
  40. package/lib/Pagination/SideButton.js +3 -1
  41. package/lib/Progress/Progress.js +2 -2
  42. package/lib/Progress/ProgressBar.js +2 -2
  43. package/lib/Radio/Radio.js +3 -5
  44. package/lib/Spacer/Spacer.js +2 -2
  45. package/lib/StackView/StackWrap.js +9 -5
  46. package/lib/StackView/getStackedContent.js +1 -1
  47. package/lib/StepTracker/StepTracker.js +2 -2
  48. package/lib/Tabs/Tabs.js +12 -4
  49. package/lib/Tabs/TabsItem.js +12 -6
  50. package/lib/Tags/Tags.js +9 -9
  51. package/lib/ThemeProvider/useThemeTokens.js +3 -3
  52. package/lib/ThemeProvider/utils/theme-tokens.js +3 -3
  53. package/lib/ToggleSwitch/ToggleSwitch.js +105 -43
  54. package/lib/ToggleSwitch/ToggleSwitchGroup.js +230 -0
  55. package/lib/ToggleSwitch/index.js +14 -4
  56. package/lib/index.js +28 -9
  57. package/lib/utils/a11y/semantics.js +4 -3
  58. package/lib/utils/index.js +14 -5
  59. package/lib/utils/pressability.js +2 -2
  60. package/lib/utils/props/a11yProps.js +153 -0
  61. package/lib/utils/props/clickProps.js +36 -0
  62. package/lib/utils/props/componentPropType.js +70 -0
  63. package/lib/utils/props/copyPropTypes.js +14 -0
  64. package/lib/utils/props/getPropSelector.js +13 -0
  65. package/lib/utils/props/hrefAttrsProp.js +41 -0
  66. package/lib/utils/props/index.js +149 -0
  67. package/lib/utils/props/linkProps.js +64 -0
  68. package/lib/utils/props/paddingProp.js +20 -0
  69. package/lib/utils/props/pressProps.js +57 -0
  70. package/lib/utils/props/rectProp.js +20 -0
  71. package/lib/utils/props/responsiveProps.js +40 -0
  72. package/lib/utils/props/selectSystemProps.js +31 -0
  73. package/lib/utils/props/spacingProps.js +71 -0
  74. package/lib/utils/props/tokens.js +145 -0
  75. package/lib/utils/props/variantProp.js +28 -0
  76. package/lib/utils/props/viewProps.js +34 -0
  77. package/lib/utils/useResponsiveProp.js +1 -1
  78. package/lib/utils/useSpacingScale.js +4 -4
  79. package/lib/utils/withLinkRouter.js +98 -0
  80. package/package.json +9 -5
  81. package/release-context.json +4 -4
  82. package/src/A11yText/index.jsx +1 -1
  83. package/src/ActivityIndicator/index.jsx +1 -1
  84. package/src/Box/Box.jsx +5 -4
  85. package/src/Button/Button.jsx +1 -1
  86. package/src/Button/ButtonBase.jsx +11 -4
  87. package/src/Button/ButtonGroup.jsx +17 -8
  88. package/src/Button/ButtonLink.jsx +1 -1
  89. package/src/Button/propTypes.js +2 -1
  90. package/src/Card/Card.jsx +1 -1
  91. package/src/Card/CardBase.jsx +6 -5
  92. package/src/Card/PressableCardBase.jsx +7 -5
  93. package/src/Checkbox/Checkbox.jsx +1 -3
  94. package/src/Divider/Divider.jsx +2 -2
  95. package/src/FlexGrid/FlexGrid.jsx +11 -5
  96. package/src/FlexGrid/helpers/index.js +1 -3
  97. package/src/IconButton/IconButton.jsx +7 -5
  98. package/src/Link/LinkBase.jsx +7 -5
  99. package/src/List/List.jsx +2 -4
  100. package/src/List/ListItem.jsx +11 -26
  101. package/src/List/index.js +5 -0
  102. package/src/Pagination/PageButton.jsx +5 -8
  103. package/src/Pagination/Pagination.jsx +29 -2
  104. package/src/Pagination/SideButton.jsx +2 -2
  105. package/src/Progress/Progress.jsx +1 -1
  106. package/src/Progress/ProgressBar.jsx +1 -1
  107. package/src/Radio/Radio.jsx +1 -3
  108. package/src/Spacer/Spacer.jsx +2 -2
  109. package/src/StackView/StackWrap.jsx +7 -6
  110. package/src/StackView/getStackedContent.jsx +1 -1
  111. package/src/StepTracker/StepTracker.jsx +1 -1
  112. package/src/Tabs/Tabs.jsx +49 -22
  113. package/src/Tabs/TabsItem.jsx +11 -7
  114. package/src/Tags/Tags.jsx +1 -7
  115. package/src/ThemeProvider/useThemeTokens.js +3 -3
  116. package/src/ThemeProvider/utils/theme-tokens.js +3 -3
  117. package/src/ToggleSwitch/ToggleSwitch.jsx +93 -41
  118. package/src/ToggleSwitch/ToggleSwitchGroup.jsx +203 -0
  119. package/src/ToggleSwitch/index.js +2 -1
  120. package/src/index.js +2 -2
  121. package/src/utils/a11y/semantics.js +3 -2
  122. package/src/utils/index.js +2 -1
  123. package/src/utils/pressability.js +1 -1
  124. package/src/utils/props/a11yProps.js +151 -0
  125. package/src/utils/props/clickProps.js +31 -0
  126. package/src/utils/props/componentPropType.js +67 -0
  127. package/src/utils/props/copyPropTypes.js +3 -0
  128. package/src/utils/props/getPropSelector.js +14 -0
  129. package/src/utils/props/hrefAttrsProp.js +25 -0
  130. package/src/utils/props/index.js +15 -0
  131. package/src/utils/props/linkProps.js +43 -0
  132. package/src/utils/props/paddingProp.js +10 -0
  133. package/src/utils/props/pressProps.js +45 -0
  134. package/src/utils/props/rectProp.js +10 -0
  135. package/src/utils/props/responsiveProps.js +30 -0
  136. package/src/utils/props/selectSystemProps.js +25 -0
  137. package/src/utils/props/spacingProps.js +58 -0
  138. package/src/utils/props/tokens.js +150 -0
  139. package/src/utils/props/variantProp.js +20 -0
  140. package/src/utils/props/viewProps.js +23 -0
  141. package/src/utils/useResponsiveProp.js +1 -1
  142. package/src/utils/useSpacingScale.js +4 -4
  143. package/src/utils/withLinkRouter.jsx +68 -0
  144. package/stories/A11yText/A11yText.stories.jsx +1 -1
  145. package/stories/ActivityIndicator/ActivityIndicator.stories.jsx +1 -1
  146. package/stories/Box/Box.stories.jsx +1 -1
  147. package/stories/Button/Button.stories.jsx +1 -1
  148. package/stories/Button/ButtonGroup.stories.jsx +1 -1
  149. package/stories/Button/ButtonLink.stories.jsx +1 -1
  150. package/stories/Card/Card.stories.jsx +1 -1
  151. package/stories/Checkbox/Checkbox.stories.jsx +1 -1
  152. package/stories/Divider/Divider.stories.jsx +1 -1
  153. package/stories/ExpandCollapse/ExpandCollapse.stories.jsx +1 -1
  154. package/stories/Feedback/Feedback.stories.jsx +1 -1
  155. package/stories/FlexGrid/01 FlexGrid.stories.jsx +1 -1
  156. package/stories/FlexGrid/02 Row.stories.jsx +1 -1
  157. package/stories/FlexGrid/03 Col.stories.jsx +1 -1
  158. package/stories/Icon/Icon.stories.jsx +1 -1
  159. package/stories/IconButton/IconButton.stories.jsx +1 -1
  160. package/stories/InputLabel/InputLabel.stories.jsx +1 -1
  161. package/stories/Link/ChevronLink.stories.jsx +1 -1
  162. package/stories/Link/Link.stories.jsx +1 -1
  163. package/stories/Link/TextButton.stories.jsx +1 -1
  164. package/stories/List/List.stories.jsx +1 -1
  165. package/stories/Modal/Modal.stories.jsx +1 -1
  166. package/stories/Notification/Notification.stories.jsx +1 -1
  167. package/stories/Pagination/Pagination.stories.jsx +1 -1
  168. package/stories/Progress/Progress.stories.jsx +1 -1
  169. package/stories/Radio/Radio.stories.jsx +1 -1
  170. package/stories/RadioCard/RadioCard.stories.jsx +1 -1
  171. package/stories/Search/Search.stories.jsx +1 -1
  172. package/stories/Select/Select.stories.jsx +1 -1
  173. package/stories/SideNav/SideNav.stories.jsx +1 -1
  174. package/stories/SideNav/SideNavItem.stories.jsx +1 -1
  175. package/stories/SideNav/SideNavItemsGroup.stories.jsx +1 -1
  176. package/stories/Skeleton/Skeleton.stories.jsx +1 -1
  177. package/stories/Spacer/Spacer.stories.jsx +1 -1
  178. package/stories/StackView/StackView.stories.jsx +1 -1
  179. package/stories/StackView/StackWrap.stories.jsx +1 -1
  180. package/stories/StepTracker/StepTracker.stories.jsx +1 -1
  181. package/stories/Tabs/Tabs.stories.jsx +1 -1
  182. package/stories/Tags/Tags.stories.jsx +1 -1
  183. package/stories/TextInput/TextArea.stories.jsx +2 -1
  184. package/stories/TextInput/TextInput.stories.jsx +1 -1
  185. package/stories/ToggleSwitch/ToggleSwitch.stories.jsx +6 -2
  186. package/stories/ToggleSwitch/ToggleSwitchGroup.stories.jsx +81 -0
  187. package/stories/Tooltip/Tooltip.stories.jsx +1 -1
  188. package/stories/TooltipButton/TooltipButton.stories.jsx +1 -1
  189. package/stories/Typography/Typography.stories.jsx +1 -1
  190. package/stories/supports.jsx +2 -3
  191. package/.ultra.cache.json +0 -1
  192. package/lib/utils/propTypes.js +0 -623
  193. package/src/utils/propTypes.js +0 -640
@@ -1,623 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.copyPropTypes = exports.componentPropType = exports.spacingProps = exports.responsiveProps = exports.viewProps = exports.linkProps = exports.pressProps = exports.hrefAttrsProp = exports.a11yProps = exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = exports.variantProp = exports.rectProp = exports.paddingProp = void 0;
7
-
8
- var _propTypes = _interopRequireDefault(require("prop-types"));
9
-
10
- var _Linking = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Linking"));
11
-
12
- var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
13
-
14
- var _systemThemeTokens = require("@telus-uds/system-theme-tokens");
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- const paddingProp = {
19
- propType: _propTypes.default.shape({
20
- paddingBottom: _propTypes.default.number,
21
- paddingLeft: _propTypes.default.number,
22
- paddingRight: _propTypes.default.number,
23
- paddingTop: _propTypes.default.number
24
- })
25
- };
26
- exports.paddingProp = paddingProp;
27
- const rectProp = {
28
- propType: _propTypes.default.shape({
29
- bottom: _propTypes.default.number,
30
- left: _propTypes.default.number,
31
- right: _propTypes.default.number,
32
- top: _propTypes.default.number
33
- })
34
- };
35
- /**
36
- * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
37
- * @typedef {AppearanceSet} VariantProp
38
- */
39
-
40
- exports.rectProp = rectProp;
41
- const variantProp = {
42
- /**
43
- * 'variant' is an optional object prop on all themable components.
44
- *
45
- * Contains an object with keys that correspond to the current component theme's allowed
46
- * appearances and values that correspond to the allowed values of that component.
47
- *
48
- * Since the particular keys and values depend on which theme is currently active,
49
- * the exact shape of variant props is not enforced using PropTypes.
50
- */
51
- propType: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]))
52
- }; // Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
53
- // such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
54
- // or components (e.g. Icon tokens)
55
-
56
- exports.variantProp = variantProp;
57
-
58
- const tokenValue = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.elementType]);
59
-
60
- const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
61
-
62
- const getTokenNames = componentName => {
63
- const componentTokenSchema = _systemThemeTokens.components[componentName];
64
-
65
- if (!componentTokenSchema) {
66
- throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
67
- }
68
-
69
- return Object.keys(componentTokenSchema);
70
- };
71
- /**
72
- * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
73
- * or by a provided array of tokens. A prefix may be provided, for example:
74
- *
75
- * @example
76
- * ```jsx
77
- * // returns tokens from `themeTokens` that exist in the theme schema for `Button`.
78
- * selectTokens('Button', themeTokens)
79
- * ```
80
- *
81
- * @example
82
- * ```jsx
83
- * // returns `{ backgroundColor, width }` where the values of those keys come from
84
- * // the source object's `{ containerBackgroundColor, containerWidth }` properties.
85
- * selectTokens(['backgroundColor', 'width'], themeTokens, 'container')
86
- * ```
87
- *
88
- * @example
89
- * ```jsx
90
- * // returns tokens that are defined in the `Button` theme schema, from tokens with
91
- * // a prefix `'button'` e.g. a token `buttonBorderWidth` outputs as `borderWidth`.
92
- * selectTokens('Button', themeTokens, 'button')
93
- * ```
94
- *
95
- * @param {string[]|string} specifier - a name of a component in the theme schema, or an array of token names
96
- * @param {object} tokens - a source object of theme tokens
97
- * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
98
- * @returns {object} - subset of theme tokens
99
- */
100
-
101
-
102
- exports.getTokenNames = getTokenNames;
103
-
104
- const selectTokens = (specifier, tokens, prefix) => {
105
- const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
106
- const filteredTokens = tokenNames.reduce((validTokens, key) => {
107
- const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
108
- const token = tokens[prefixedKey];
109
- return token !== undefined ? { ...validTokens,
110
- [key]: token
111
- } : validTokens;
112
- }, {});
113
- return filteredTokens;
114
- };
115
- /**
116
- * @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
117
- * @typedef {{[key: string]: TokenValue}} TokensSet
118
- * @typedef {(AppearanceSet) => TokensSet} TokensGetter
119
- * @typedef {TokensSet|TokensGetter} TokensProp
120
- */
121
-
122
- /**
123
- * 'tokens' is an optional object prop on all themable components. Its keys must match the
124
- * token keys in the component's theme schema.
125
- *
126
- * This prop is intended to be used as an 'escape hatch' for difficult or exceptional cases
127
- * where the main theming system doesn't apply. It is intentionally permissive about values.
128
- *
129
- * @param {...string} componentsNames - one or more ComponentName, which tokens keys are accepted
130
- * @return {function} - a custom PropTypes validator
131
- *
132
- * @example
133
- * Component.propTypes = {
134
- * // accepts all tokens keys defined in Component schema
135
- * tokens: getTokensPropType('Component')
136
- * }
137
- *
138
- * Component.propTypes = {
139
- * // accepts all tokens keys defined in schemas for Component1 and Component2
140
- * tokens: getTokensPropType('Component1', 'Component2')
141
- * }
142
- */
143
-
144
-
145
- exports.selectTokens = selectTokens;
146
-
147
- const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
148
- _propTypes.default.checkPropTypes({
149
- [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
150
- }, props, propName, componentName);
151
-
152
- if (typeof props[propName] !== 'function') {
153
- _propTypes.default.checkPropTypes({
154
- [propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
155
- }, props, propName, componentName);
156
- }
157
- };
158
- /**
159
- * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
160
- *
161
- * For example, for a set of tokens used in a common style, or for a set of tokens required by
162
- * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
163
- *
164
- * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
165
- *
166
- * @param {string[]} componentTokenKeys - array of strings of token names
167
- * @param {object} [options]
168
- * @param {boolean} [options.partial] - if true, allows tokens to be undefined
169
- * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
170
- * @returns
171
- */
172
-
173
-
174
- exports.getTokensPropType = getTokensPropType;
175
-
176
- const getTokensSetPropType = (componentTokenKeys, {
177
- partial = false,
178
- allowFunction = false
179
- } = {}) => {
180
- const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
181
- (props, propName, ...args) => props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)])));
182
-
183
- return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
184
- };
185
-
186
- exports.getTokensSetPropType = getTokensSetPropType;
187
-
188
- function getPropSelector(propTypes, regexp) {
189
- const keys = Object.keys(propTypes);
190
- return props => Object.entries(props).reduce((items, [key, value]) => keys.includes(key) || regexp && regexp.test(key) ? { ...items,
191
- [key]: value
192
- } : items, {});
193
- } // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
194
- // so we have to define them ourselves.
195
-
196
-
197
- const a11yPropTypes = {
198
- accessible: _propTypes.default.bool,
199
- focusable: _propTypes.default.bool,
200
- accessibilityElementsHidden: _propTypes.default.bool,
201
- accessibilityHint: _propTypes.default.string,
202
- // react-native-web ignores `accessibilityHint`
203
- accessibilityIgnoresInvertColors: _propTypes.default.bool,
204
- accessibilityLabel: _propTypes.default.string,
205
- accessibilityRole: _propTypes.default.string,
206
- accessibilityActions: _propTypes.default.arrayOf(_propTypes.default.shape({
207
- name: _propTypes.default.string.isRequired,
208
- label: _propTypes.default.string
209
- })),
210
- accessibilityLiveRegion: _propTypes.default.oneOf(['none', 'polite', 'assertive']),
211
- accessibilityState: _propTypes.default.shape({
212
- disabled: _propTypes.default.bool,
213
- selected: _propTypes.default.bool,
214
- checked: _propTypes.default.oneOf([true, false, 'mixed']),
215
- busy: _propTypes.default.bool,
216
- expanded: _propTypes.default.bool
217
- }),
218
- accessibilityValue: _propTypes.default.shape({
219
- min: _propTypes.default.number,
220
- max: _propTypes.default.number,
221
- now: _propTypes.default.number,
222
- text: _propTypes.default.string
223
- }),
224
- accessibilityViewIsModal: _propTypes.default.bool,
225
- importantForAccessibility: _propTypes.default.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
226
- onAccessibilityAction: _propTypes.default.func,
227
- onAccessibilityEscape: _propTypes.default.func,
228
- onAccessibilityTap: _propTypes.default.func,
229
- ..._Platform.default.select({
230
- web: {
231
- // React Native Web adds many a11y props that alias aria-* attributes
232
- // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
233
- accessibilityActiveDescendant: _propTypes.default.string,
234
- accessibilityAtomic: _propTypes.default.bool,
235
- accessibilityAutoComplete: _propTypes.default.string,
236
- accessibilityBusy: _propTypes.default.bool,
237
- accessibilityChecked: _propTypes.default.oneOf([true, false, 'mixed']),
238
- accessibilityColumnCount: _propTypes.default.number,
239
- accessibilityColumnIndex: _propTypes.default.number,
240
- accessibilityColumnSpan: _propTypes.default.number,
241
- accessibilityControls: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
242
- accessibilityCurrent: _propTypes.default.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
243
- accessibilityDescribedBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
244
- accessibilityDetails: _propTypes.default.string,
245
- accessibilityDisabled: _propTypes.default.bool,
246
- accessibilityErrorMessage: _propTypes.default.string,
247
- accessibilityExpanded: _propTypes.default.bool,
248
- accessibilityFlowTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
249
- accessibilityHasPopup: _propTypes.default.string,
250
- accessibilityHidden: _propTypes.default.bool,
251
- accessibilityInvalid: _propTypes.default.bool,
252
- accessibilityKeyShortcuts: _propTypes.default.string,
253
- accessibilityLabelledBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
254
- accessibilityLevel: _propTypes.default.number,
255
- accessibilityModal: _propTypes.default.bool,
256
- accessibilityMultiline: _propTypes.default.bool,
257
- accessibilityMultiSelectable: _propTypes.default.bool,
258
- accessibilityOrientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
259
- accessibilityOwns: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
260
- accessibilityPlaceholder: _propTypes.default.string,
261
- accessibilityPosInSet: _propTypes.default.number,
262
- accessibilityPressed: _propTypes.default.bool,
263
- accessibilityReadOnly: _propTypes.default.bool,
264
- accessibilityRequired: _propTypes.default.bool,
265
- accessibilityRoleDescription: _propTypes.default.string,
266
- accessibilityRowCount: _propTypes.default.number,
267
- accessibilityRowIndex: _propTypes.default.number,
268
- accessibilityRowSpan: _propTypes.default.number,
269
- accessibilitySelected: _propTypes.default.bool,
270
- accessibilitySetSize: _propTypes.default.number,
271
- accessibilitySort: _propTypes.default.oneOf(['ascending', 'descending', 'none', 'other']),
272
- accessibilityValueMax: _propTypes.default.number,
273
- accessibilityValueMin: _propTypes.default.number,
274
- accessibilityValueNow: _propTypes.default.number,
275
- accessibilityValueText: _propTypes.default.string
276
- }
277
- })
278
- };
279
- const a11yProps = {
280
- /**
281
- * Proptypes for recognised React Native accessiblity (a11y) props.
282
- * Spread this in the propTypes of components that accept React Native a11y props.
283
- */
284
- types: a11yPropTypes,
285
-
286
- /**
287
- * Filters a props object, returning only recognised React Native accessiblity (a11y) props.
288
- *
289
- * Where components accept React Native a11y props, pass { ...rest } from its props to this,
290
- * then spread the returned object into the component's props (usually its outer container).
291
- */
292
- select: getPropSelector(a11yPropTypes, /^aria-/),
293
-
294
- /**
295
- * Use this to disable focus for elements which are visually hidden but still rendered.
296
- */
297
- nonFocusableProps: {
298
- focusable: false,
299
- // for android, and for keyboard nav in web
300
- ..._Platform.default.select({
301
- web: {
302
- accessibilityHidden: true // web screenreaders
303
-
304
- },
305
- android: {
306
- importantForAccessibility: 'no-hide-descendants'
307
- },
308
- ios: {
309
- accessibilityElementsHidden: true
310
- }
311
- })
312
- },
313
-
314
- /**
315
- * Generates an object of platform-appropriate a11y props describing an item that has an
316
- * ordered position in a set. Examples of usage by accessibility tools includes screenreaders
317
- * saying "Item X of Y" when this item is select.
318
- *
319
- * @param {number} itemsCount - the number of items in the set
320
- * @param {number} index - the current item's index in the set
321
- * @returns {object} - platform-applicable a11y props describing this position (if available)
322
- */
323
- getPositionInSet: (itemsCount, index) => _Platform.default.select({
324
- web: {
325
- // accessibilityPosInSet etc exists in React Native Web main branch
326
- // but not in a release compatible with Expo etc; just use `aria-*`
327
- 'aria-setsize': itemsCount,
328
- 'aria-posinset': index + 1
329
- },
330
- // No equivalents exist on the native side
331
- default: {}
332
- })
333
- }; // Props related to HTML <a> anchor link attributes.
334
-
335
- exports.a11yProps = a11yProps;
336
- const targetValues = ['_self', '_blank', '_parent', '_top'];
337
- const hrefAttrsProp = {
338
- types: {
339
- // React Native Web >= 0.15.0 supports hrefAttrs prop with only these properties
340
- // and passes them to <a> if an element has a href prop or accessibilityRole "link"
341
- download: _propTypes.default.string,
342
- rel: _propTypes.default.string,
343
- target: _propTypes.default.oneOf(targetValues)
344
- },
345
-
346
- /**
347
- * Takes a props object, bundles any hrefAttrs props present into one object
348
- * and returns that keyed as `hrefAttrs` and non-hrefAttrs props keyed as `rest`
349
- */
350
- bundle: ({
351
- download,
352
- rel,
353
- target,
354
- ...rest
355
- }) => ({
356
- hrefAttrs: {
357
- download,
358
- rel,
359
- target
360
- },
361
- rest
362
- })
363
- };
364
- exports.hrefAttrsProp = hrefAttrsProp;
365
- const pressHandlerPropTypes = {
366
- onPress: _propTypes.default.func,
367
- onPressIn: _propTypes.default.func,
368
- onPressOut: _propTypes.default.func,
369
- ..._Platform.default.select({
370
- web: {
371
- onMouseEnter: _propTypes.default.func,
372
- onMouseLeave: _propTypes.default.func,
373
- onFocus: _propTypes.default.func,
374
- onBlur: _propTypes.default.func
375
- },
376
- default: {
377
- onLongPress: _propTypes.default.func
378
- }
379
- })
380
- };
381
- const pressPropTypes = { ...pressHandlerPropTypes,
382
- disabled: _propTypes.default.bool,
383
- ..._Platform.default.select({
384
- web: {},
385
- default: {
386
- hitSlop: _propTypes.default.number,
387
- pressRetentionOffset: _propTypes.default.oneOfType([_propTypes.default.number, rectProp.propType])
388
- }
389
- })
390
- };
391
- const pressProps = {
392
- /**
393
- * Proptypes for clickable or pressable components, including web-only props
394
- */
395
- types: pressPropTypes,
396
-
397
- /**
398
- * Filters a props object, returning only the platform-relevant press props defined above
399
- */
400
- select: getPropSelector(pressPropTypes),
401
- selectHandlers: getPropSelector(pressHandlerPropTypes)
402
- };
403
- exports.pressProps = pressProps;
404
- const linkPropTypes = { ...pressPropTypes,
405
- href: _propTypes.default.string,
406
- hrefAttrs: _propTypes.default.shape(hrefAttrsProp.types),
407
- ...a11yPropTypes
408
- };
409
- const linkProps = {
410
- /**
411
- * Proptypes for components that, on Web, can output <a href="..."> link elements
412
- */
413
- types: linkPropTypes,
414
-
415
- /**
416
- * Filters a props object, returning only the platform-relevant link props defined above
417
- */
418
- select: getPropSelector(linkPropTypes),
419
-
420
- /**
421
- * Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
422
- *
423
- * @param {({ onPress?: () => void, href?: string })}
424
- * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
425
- * string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
426
- */
427
- handleHref: ({
428
- onPress,
429
- href
430
- }) => {
431
- if (!href && !onPress) {
432
- throw new Error('handleHref requires either href or onPress');
433
- }
434
-
435
- return _Platform.default.select({
436
- web: onPress,
437
- default: (...args) => {
438
- if (onPress) onPress(...args);
439
- if (href) _Linking.default.openURL(href);
440
- }
441
- });
442
- }
443
- };
444
- exports.linkProps = linkProps;
445
- const viewPropTypes = {
446
- pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
447
- onLayout: _propTypes.default.func,
448
- nativeID: _propTypes.default.string,
449
- testID: _propTypes.default.string,
450
- dataSet: _propTypes.default.object
451
- };
452
- const viewProps = {
453
- /**
454
- * Subset of `View` proptypes that could conceivably be needed on any component
455
- * that renders a single View.
456
- */
457
- types: viewPropTypes,
458
-
459
- /**
460
- * Filters a props object, returning only cross-platform View props that are potentially
461
- * relevant to any basic layout component that renders one View.
462
- */
463
- select: getPropSelector(viewPropTypes)
464
- };
465
- exports.viewProps = viewProps;
466
-
467
- const getByViewport = propType => ({
468
- xs: propType,
469
- sm: propType,
470
- md: propType,
471
- lg: propType,
472
- xl: propType
473
- });
474
- /**
475
- * Utilities for props that allow different values to be applied at different viewports.
476
- *
477
- * These should apply viewport inheritance such that if a viewport is undefined, the value is
478
- * taken from the next smallest viewport for which a value is available. For example, a
479
- * responsive prop { xs: 2, lg: 3 } should apply 2 at sizes sm and md, and 3 at size xl.
480
- *
481
- * @property {Function} getByViewport - returns an object where each each viewport has a key
482
- * containing the provided argument.
483
- * @property {Function} getTypeByViewport - returns a PropTypes shape validator for an object where
484
- * each viewport has a key containing the provided proptype.
485
- * @property {Function} getTypeOptionallyByViewport - returns a PropTypes validator that accepts
486
- * either the provided proptype on its own, or the output of getTypeByViewport
487
- */
488
-
489
-
490
- const responsiveProps = {
491
- getByViewport,
492
- getTypeByViewport: propType => _propTypes.default.shape(getByViewport(propType)),
493
- getTypeOptionallyByViewport: propType => _propTypes.default.oneOfType([propType, _propTypes.default.shape(getByViewport(propType))])
494
- };
495
- /**
496
- * @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
497
- *
498
- * @typedef SpacingOptions
499
- * @property {VariantProp} [SpacingOptions.variant] - optional theme scale variants e.g. compact, wide
500
- * @property {number} [SpacingOptions.size] - optional override to force a particular pixel size
501
- * @property {number} [SpacingOptions.subtract] - optional number to subtract from final pixel size
502
- *
503
- * @typedef SpacingObject
504
- * @property {SpacingIndex} [SpacingObject.xs] - space scale index to use above xs viewport
505
- * @property {SpacingIndex} [SpacingObject.sm] - space scale index to use above sm viewport
506
- * @property {SpacingIndex} [SpacingObject.md] - space scale index to use above md viewport
507
- * @property {SpacingIndex} [SpacingObject.lg] - space scale index to use above lg viewport
508
- * @property {SpacingIndex} [SpacingObject.xl] - space scale index to use above xl viewport
509
- * @property {SpacingIndex} [SpacingObject.space] - space scale index to use at all viewports
510
- * @property {SpacingOptions} [SpacingObject.options] - optional options for this spacing
511
- *
512
- * @typedef {SpacingIndex|SpacingObject} SpacingValue
513
- */
514
-
515
- exports.responsiveProps = responsiveProps;
516
- const spacingScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
517
-
518
- const spacingIndexPropType = _propTypes.default.oneOf(spacingScale);
519
-
520
- const spacingObjectPropType = _propTypes.default.shape({ ...responsiveProps.getByViewport(spacingIndexPropType),
521
- space: spacingIndexPropType,
522
- options: _propTypes.default.shape({
523
- variant: variantProp.propType,
524
- size: _propTypes.default.number
525
- })
526
- });
527
- /**
528
- * Components and utilities that assign fixed space between components use a theme-defined spacing scale.
529
- *
530
- * They typically take one or more props of the {@link SpacingValue} type and turn it into a pixel size value
531
- * using the hook `useSpacingScale`, which resolves any options or responsive behaviour and returns the
532
- * appropriate value from the theme spacing scale.
533
- *
534
- * - see /ADRs/inter-component-spacing/README.md - ADR on this structure
535
- * - see /src/utils/spacing/useSpacingScale.js - hook that processes spacing values
536
- * - @see {@link SpacingIndex} - themes provide spacing scales of up to 12 sizes with optional theme rules.
537
- * - @see {@link SpacingValue} - either a simple number referencing an index position on the spacing
538
- * scale, or an object with an optional `options` key and one or more spacing indexes keyed either by
539
- * viewports or `space` to apply at all viewports.
540
- */
541
-
542
-
543
- const spacingProps = {
544
- scale: spacingScale,
545
- types: {
546
- spacingIndex: spacingIndexPropType,
547
- spacingObject: spacingObjectPropType,
548
- // Most spacing components and utilities take this prop / arg type:
549
- spacingValue: _propTypes.default.oneOfType([spacingIndexPropType, spacingObjectPropType])
550
- }
551
- };
552
- /**
553
- * Returns a prop type validator which checks whether a prop is either a component or an array of
554
- * components of a given type, based on their `name` or `displayName` properties.
555
- * Use an array of strings for `passedName` to accept more than one component type.
556
- * For an array the validation fails on the first occurrence of an invalid element.
557
- *
558
- * @param {string|string[]} passedName
559
- * @return {function}
560
- */
561
-
562
- exports.spacingProps = spacingProps;
563
-
564
- const componentPropType = passedName => {
565
- const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
566
-
567
- const checkProp = (props, propName, componentName) => {
568
- var _props$propName$type, _props$propName$type2;
569
-
570
- if (props[propName] === undefined || props[propName] === null) {
571
- return undefined;
572
- }
573
-
574
- if (Array.isArray(props[propName])) {
575
- // Iterates through every child and try to find the first element that does not match the passed name
576
- // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
577
- return props[propName].map((_, index) => checkProp(props[propName], index, componentName)).find(Boolean);
578
- }
579
-
580
- const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
581
-
582
- if (!nameInProp || !passedNames.includes(nameInProp)) {
583
- const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
584
- return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
585
- }
586
-
587
- return undefined;
588
- };
589
-
590
- const checkRequired = (props, propName, componentName) => {
591
- if (props[propName] === undefined) {
592
- return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
593
- }
594
-
595
- return undefined;
596
- };
597
-
598
- const createValidate = isRequired => {
599
- if (isRequired) {
600
- return (props, propName, componentName) => {
601
- const checkForError = checkProp(props, propName, componentName);
602
-
603
- if (checkForError) {
604
- return checkForError;
605
- }
606
-
607
- return checkRequired(props, propName, componentName);
608
- };
609
- }
610
-
611
- return checkProp;
612
- };
613
-
614
- const validate = createValidate();
615
- validate.isRequired = createValidate(true);
616
- return validate;
617
- };
618
-
619
- exports.componentPropType = componentPropType;
620
-
621
- const copyPropTypes = _propTypes.default.oneOf(['en', 'fr']);
622
-
623
- exports.copyPropTypes = copyPropTypes;