@primer/components 0.0.0-20211030175556 → 0.0.0-20211030182910

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 (272) hide show
  1. package/CHANGELOG.md +34 -2
  2. package/dist/browser.esm.js +186 -183
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +190 -187
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.js +3 -3
  7. package/lib/ActionList/index.js +23 -12
  8. package/lib/ActionList2/Item.js +3 -1
  9. package/lib/ActionList2/List.js +1 -2
  10. package/lib/ActionList2/Selection.js +3 -1
  11. package/lib/ActionList2/index.js +41 -23
  12. package/lib/AnchoredOverlay/index.js +12 -4
  13. package/lib/Autocomplete/Autocomplete.d.ts +1 -0
  14. package/lib/Autocomplete/AutocompleteInput.d.ts +1 -0
  15. package/lib/Autocomplete/index.js +14 -7
  16. package/lib/Avatar.d.ts +1 -2
  17. package/lib/Avatar.js +1 -1
  18. package/lib/BranchName.d.ts +1 -2
  19. package/lib/BranchName.js +1 -1
  20. package/lib/Button/Button.d.ts +1 -0
  21. package/lib/Button/ButtonClose.d.ts +2 -1
  22. package/lib/Button/ButtonDanger.d.ts +1 -0
  23. package/lib/Button/ButtonInvisible.d.ts +1 -0
  24. package/lib/Button/ButtonOutline.d.ts +1 -0
  25. package/lib/Button/ButtonPrimary.d.ts +1 -0
  26. package/lib/Button/index.js +70 -21
  27. package/lib/Checkbox.d.ts +29 -0
  28. package/lib/Checkbox.js +64 -0
  29. package/lib/CircleOcticon.d.ts +1 -0
  30. package/lib/Details.d.ts +1 -2
  31. package/lib/Details.js +1 -3
  32. package/lib/Dialog.d.ts +3 -2
  33. package/lib/Dropdown.d.ts +6 -66
  34. package/lib/DropdownMenu/DropdownButton.d.ts +2 -1
  35. package/lib/DropdownMenu/index.js +20 -6
  36. package/lib/DropdownStyles.js +26 -18
  37. package/lib/FilterList.d.ts +1 -0
  38. package/lib/FilteredActionList/index.js +12 -4
  39. package/lib/Heading.d.ts +1 -2
  40. package/lib/Heading.js +1 -6
  41. package/lib/NewButton/index.js +12 -5
  42. package/lib/NewButton/types.js +1 -2
  43. package/lib/Overlay.d.ts +5 -3
  44. package/lib/Pagination/index.js +12 -6
  45. package/lib/Portal/index.js +16 -5
  46. package/lib/Position.d.ts +4 -4
  47. package/lib/ProgressBar.d.ts +16 -11
  48. package/lib/ProgressBar.js +6 -10
  49. package/lib/SelectMenu/SelectMenu.d.ts +10 -4
  50. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  51. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  52. package/lib/SelectMenu/hooks/useKeyboardNav.js +96 -80
  53. package/lib/SelectMenu/index.js +14 -7
  54. package/lib/SelectPanel/index.js +12 -4
  55. package/lib/Spinner.d.ts +1 -2
  56. package/lib/Spinner.js +1 -3
  57. package/lib/TextInputWithTokens.d.ts +1 -0
  58. package/lib/Token/AvatarToken.d.ts +1 -1
  59. package/lib/Token/IssueLabelToken.d.ts +1 -1
  60. package/lib/Token/Token.d.ts +1 -1
  61. package/lib/Token/index.js +30 -11
  62. package/lib/behaviors/anchoredPosition.js +234 -205
  63. package/lib/behaviors/focusTrap.js +157 -121
  64. package/lib/behaviors/focusZone.js +509 -434
  65. package/lib/behaviors/scrollIntoViewingArea.js +35 -18
  66. package/lib/constants.js +43 -39
  67. package/lib/drafts.js +30 -20
  68. package/lib/hooks/index.js +60 -16
  69. package/lib/hooks/useAnchoredPosition.js +40 -32
  70. package/lib/hooks/useCombinedRefs.js +36 -32
  71. package/lib/hooks/useDialog.js +96 -72
  72. package/lib/hooks/useFocusTrap.js +60 -43
  73. package/lib/hooks/useFocusZone.js +50 -54
  74. package/lib/hooks/useOnEscapePress.js +36 -25
  75. package/lib/hooks/useOpenAndCloseFocus.js +34 -22
  76. package/lib/hooks/useProvidedRefOrCreate.js +14 -10
  77. package/lib/hooks/useProvidedStateOrCreate.js +16 -13
  78. package/lib/hooks/useRenderForcingRef.js +17 -13
  79. package/lib/hooks/useResizeObserver.js +18 -15
  80. package/lib/hooks/useSafeTimeout.js +30 -22
  81. package/lib/hooks/useScrollFlash.js +23 -16
  82. package/lib/index.d.ts +2 -0
  83. package/lib/index.js +652 -163
  84. package/lib/polyfills/eventListenerSignal.js +45 -37
  85. package/lib/sx.js +22 -10
  86. package/lib/theme-preval.js +3169 -64
  87. package/lib/theme.js +12 -3
  88. package/lib/utils/iterateFocusableElements.js +85 -63
  89. package/lib/utils/testing.d.ts +2 -1
  90. package/lib/utils/testing.js +29 -0
  91. package/lib/utils/theme.js +47 -33
  92. package/lib/utils/types/AriaRole.js +1 -2
  93. package/lib/utils/types/ComponentProps.js +1 -2
  94. package/lib/utils/types/Flatten.js +1 -2
  95. package/lib/utils/types/KeyPaths.js +1 -2
  96. package/lib/utils/types/MandateProps.js +1 -16
  97. package/lib/utils/types/Merge.js +1 -2
  98. package/lib/utils/types/index.js +69 -16
  99. package/lib/utils/uniqueId.js +8 -5
  100. package/lib/utils/use-force-update.js +14 -8
  101. package/lib/utils/useIsomorphicLayoutEffect.js +11 -8
  102. package/lib/utils/userAgent.js +12 -8
  103. package/lib-esm/ActionList/Item.js +3 -3
  104. package/lib-esm/ActionList2/Item.js +3 -1
  105. package/lib-esm/ActionList2/List.js +1 -2
  106. package/lib-esm/ActionList2/Selection.js +3 -1
  107. package/lib-esm/Autocomplete/Autocomplete.d.ts +1 -0
  108. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +1 -0
  109. package/lib-esm/Avatar.d.ts +1 -2
  110. package/lib-esm/Avatar.js +2 -2
  111. package/lib-esm/BranchName.d.ts +1 -2
  112. package/lib-esm/BranchName.js +2 -2
  113. package/lib-esm/Button/Button.d.ts +1 -0
  114. package/lib-esm/Button/ButtonClose.d.ts +2 -1
  115. package/lib-esm/Button/ButtonDanger.d.ts +1 -0
  116. package/lib-esm/Button/ButtonInvisible.d.ts +1 -0
  117. package/lib-esm/Button/ButtonOutline.d.ts +1 -0
  118. package/lib-esm/Button/ButtonPrimary.d.ts +1 -0
  119. package/lib-esm/Checkbox.d.ts +29 -0
  120. package/lib-esm/Checkbox.js +44 -0
  121. package/lib-esm/CircleOcticon.d.ts +1 -0
  122. package/lib-esm/Details.d.ts +1 -2
  123. package/lib-esm/Details.js +1 -2
  124. package/lib-esm/Dialog.d.ts +3 -2
  125. package/lib-esm/Dropdown.d.ts +6 -66
  126. package/lib-esm/DropdownMenu/DropdownButton.d.ts +2 -1
  127. package/lib-esm/FilterList.d.ts +1 -0
  128. package/lib-esm/Heading.d.ts +1 -2
  129. package/lib-esm/Heading.js +2 -6
  130. package/lib-esm/Overlay.d.ts +5 -3
  131. package/lib-esm/Position.d.ts +4 -4
  132. package/lib-esm/ProgressBar.d.ts +16 -11
  133. package/lib-esm/ProgressBar.js +7 -11
  134. package/lib-esm/SelectMenu/SelectMenu.d.ts +10 -4
  135. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  136. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  137. package/lib-esm/Spinner.d.ts +1 -2
  138. package/lib-esm/Spinner.js +1 -2
  139. package/lib-esm/TextInputWithTokens.d.ts +1 -0
  140. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  141. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  142. package/lib-esm/Token/Token.d.ts +1 -1
  143. package/lib-esm/index.d.ts +2 -0
  144. package/lib-esm/index.js +1 -0
  145. package/lib-esm/theme-preval.js +446 -0
  146. package/lib-esm/utils/testing.d.ts +2 -1
  147. package/lib-esm/utils/testing.js +24 -0
  148. package/package.json +4 -5
  149. package/lib/ActionList/Divider.jsx +0 -29
  150. package/lib/ActionList/Group.jsx +0 -23
  151. package/lib/ActionList/Header.jsx +0 -66
  152. package/lib/ActionList/Item.jsx +0 -288
  153. package/lib/ActionList/List.jsx +0 -138
  154. package/lib/ActionList2/Description.jsx +0 -29
  155. package/lib/ActionList2/Divider.jsx +0 -22
  156. package/lib/ActionList2/Group.jsx +0 -54
  157. package/lib/ActionList2/Header.d.ts +0 -26
  158. package/lib/ActionList2/Header.js +0 -55
  159. package/lib/ActionList2/Header.jsx +0 -36
  160. package/lib/ActionList2/Item.jsx +0 -174
  161. package/lib/ActionList2/LinkItem.jsx +0 -28
  162. package/lib/ActionList2/List.jsx +0 -41
  163. package/lib/ActionList2/Selection.jsx +0 -50
  164. package/lib/ActionList2/Visuals.jsx +0 -48
  165. package/lib/ActionMenu.jsx +0 -73
  166. package/lib/AnchoredOverlay/AnchoredOverlay.jsx +0 -100
  167. package/lib/Autocomplete/Autocomplete.jsx +0 -100
  168. package/lib/Autocomplete/AutocompleteContext.jsx +0 -5
  169. package/lib/Autocomplete/AutocompleteInput.jsx +0 -113
  170. package/lib/Autocomplete/AutocompleteMenu.jsx +0 -190
  171. package/lib/Autocomplete/AutocompleteOverlay.jsx +0 -55
  172. package/lib/Avatar.jsx +0 -34
  173. package/lib/AvatarPair.jsx +0 -29
  174. package/lib/AvatarStack.jsx +0 -151
  175. package/lib/BaseStyles.jsx +0 -65
  176. package/lib/BorderBox.jsx +0 -18
  177. package/lib/Box.jsx +0 -10
  178. package/lib/BranchName.jsx +0 -20
  179. package/lib/Breadcrumbs.jsx +0 -71
  180. package/lib/Button/Button.jsx +0 -40
  181. package/lib/Button/ButtonBase.jsx +0 -33
  182. package/lib/Button/ButtonClose.jsx +0 -53
  183. package/lib/Button/ButtonDanger.jsx +0 -43
  184. package/lib/Button/ButtonGroup.jsx +0 -55
  185. package/lib/Button/ButtonInvisible.jsx +0 -32
  186. package/lib/Button/ButtonOutline.jsx +0 -43
  187. package/lib/Button/ButtonPrimary.jsx +0 -42
  188. package/lib/Button/ButtonStyles.jsx +0 -37
  189. package/lib/Button/ButtonTableList.jsx +0 -46
  190. package/lib/Caret.jsx +0 -93
  191. package/lib/CircleBadge.jsx +0 -42
  192. package/lib/CircleOcticon.jsx +0 -21
  193. package/lib/CounterLabel.jsx +0 -43
  194. package/lib/Details.jsx +0 -21
  195. package/lib/Dialog/ConfirmationDialog.jsx +0 -146
  196. package/lib/Dialog/Dialog.jsx +0 -279
  197. package/lib/Dialog.jsx +0 -129
  198. package/lib/Dropdown.jsx +0 -131
  199. package/lib/DropdownMenu/DropdownButton.jsx +0 -14
  200. package/lib/DropdownMenu/DropdownMenu.jsx +0 -70
  201. package/lib/FilterList.jsx +0 -59
  202. package/lib/FilteredActionList/FilteredActionList.jsx +0 -100
  203. package/lib/FilteredSearch.jsx +0 -28
  204. package/lib/Flash.jsx +0 -69
  205. package/lib/Flex.jsx +0 -15
  206. package/lib/FormGroup.jsx +0 -22
  207. package/lib/Grid.jsx +0 -15
  208. package/lib/Header.jsx +0 -83
  209. package/lib/Heading.jsx +0 -21
  210. package/lib/Label.jsx +0 -82
  211. package/lib/LabelGroup.jsx +0 -18
  212. package/lib/Link.jsx +0 -36
  213. package/lib/NewButton/button-counter.jsx +0 -14
  214. package/lib/NewButton/button.jsx +0 -279
  215. package/lib/Overlay.jsx +0 -154
  216. package/lib/Pagehead.jsx +0 -17
  217. package/lib/Pagination/Pagination.jsx +0 -161
  218. package/lib/Pagination/model.jsx +0 -174
  219. package/lib/PointerBox.jsx +0 -25
  220. package/lib/Popover.jsx +0 -202
  221. package/lib/Portal/Portal.jsx +0 -79
  222. package/lib/Position.jsx +0 -46
  223. package/lib/ProgressBar.jsx +0 -39
  224. package/lib/SelectMenu/SelectMenu.jsx +0 -112
  225. package/lib/SelectMenu/SelectMenuContext.jsx +0 -5
  226. package/lib/SelectMenu/SelectMenuDivider.jsx +0 -42
  227. package/lib/SelectMenu/SelectMenuFilter.jsx +0 -58
  228. package/lib/SelectMenu/SelectMenuFooter.jsx +0 -45
  229. package/lib/SelectMenu/SelectMenuHeader.jsx +0 -42
  230. package/lib/SelectMenu/SelectMenuItem.jsx +0 -142
  231. package/lib/SelectMenu/SelectMenuList.jsx +0 -59
  232. package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +0 -22
  233. package/lib/SelectMenu/SelectMenuModal.jsx +0 -118
  234. package/lib/SelectMenu/SelectMenuTab.jsx +0 -92
  235. package/lib/SelectMenu/SelectMenuTabPanel.jsx +0 -42
  236. package/lib/SelectMenu/SelectMenuTabs.jsx +0 -57
  237. package/lib/SelectPanel/SelectPanel.jsx +0 -105
  238. package/lib/SideNav.jsx +0 -173
  239. package/lib/Spinner.jsx +0 -35
  240. package/lib/StateLabel.jsx +0 -93
  241. package/lib/StyledOcticon.jsx +0 -18
  242. package/lib/SubNav.jsx +0 -101
  243. package/lib/TabNav.jsx +0 -58
  244. package/lib/Text.jsx +0 -14
  245. package/lib/TextInput.jsx +0 -23
  246. package/lib/TextInputWithTokens.jsx +0 -218
  247. package/lib/ThemeProvider.jsx +0 -130
  248. package/lib/Timeline.jsx +0 -123
  249. package/lib/Token/AvatarToken.jsx +0 -54
  250. package/lib/Token/IssueLabelToken.jsx +0 -125
  251. package/lib/Token/Token.jsx +0 -103
  252. package/lib/Token/TokenBase.jsx +0 -88
  253. package/lib/Token/_RemoveTokenButton.jsx +0 -108
  254. package/lib/Token/_TokenTextContainer.jsx +0 -49
  255. package/lib/Tooltip.jsx +0 -246
  256. package/lib/Truncate.jsx +0 -24
  257. package/lib/UnderlineNav.jsx +0 -88
  258. package/lib/_TextInputWrapper.jsx +0 -120
  259. package/lib/_UnstyledTextInput.jsx +0 -22
  260. package/lib/hooks/useDetails.jsx +0 -39
  261. package/lib/hooks/useOnOutsideClick.jsx +0 -61
  262. package/lib/hooks/useOverlay.jsx +0 -15
  263. package/lib/utils/create-slots.jsx +0 -65
  264. package/lib/utils/deprecate.jsx +0 -59
  265. package/lib/utils/isNumeric.jsx +0 -7
  266. package/lib/utils/ssr.jsx +0 -6
  267. package/lib/utils/test-deprecations.jsx +0 -20
  268. package/lib/utils/test-helpers.jsx +0 -8
  269. package/lib/utils/test-matchers.jsx +0 -100
  270. package/lib/utils/testing.jsx +0 -206
  271. package/lib-esm/ActionList2/Header.d.ts +0 -26
  272. package/lib-esm/ActionList2/Header.js +0 -44
@@ -1,59 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Deprecations = exports.useDeprecation = exports.deprecate = void 0;
4
- const react_1 = require("react");
5
- // eslint-disable-next-line @typescript-eslint/no-empty-function
6
- const noop = () => { };
7
- // eslint-disable-next-line import/no-mutable-exports
8
- let deprecate = noop;
9
- exports.deprecate = deprecate;
10
- if (__DEV__) {
11
- exports.deprecate = deprecate = ({ name, message, version }) => {
12
- Deprecations.deprecate({ name, message, version });
13
- };
14
- }
15
- // eslint-disable-next-line import/no-mutable-exports
16
- let useDeprecation = null;
17
- exports.useDeprecation = useDeprecation;
18
- if (__DEV__) {
19
- exports.useDeprecation = useDeprecation = ({ name, message, version }) => {
20
- const ref = react_1.useRef(false);
21
- const logDeprecation = react_1.useCallback(() => {
22
- if (!ref.current) {
23
- ref.current = true;
24
- deprecate({ name, message, version });
25
- }
26
- }, [name, message, version]);
27
- return logDeprecation;
28
- };
29
- }
30
- else {
31
- exports.useDeprecation = useDeprecation = () => {
32
- return noop;
33
- };
34
- }
35
- class Deprecations {
36
- constructor() {
37
- this.deprecations = [];
38
- }
39
- static get() {
40
- if (!Deprecations.instance) {
41
- Deprecations.instance = new Deprecations();
42
- }
43
- return Deprecations.instance;
44
- }
45
- static deprecate({ name, message, version }) {
46
- const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`;
47
- // eslint-disable-next-line no-console
48
- console.warn(msg);
49
- this.get().deprecations.push({ name, message, version });
50
- }
51
- static getDeprecations() {
52
- return this.get().deprecations;
53
- }
54
- static clearDeprecations() {
55
- this.get().deprecations.length = 0;
56
- }
57
- }
58
- exports.Deprecations = Deprecations;
59
- Deprecations.instance = null;
@@ -1,7 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
4
- function isNumeric(n) {
5
- return !isNaN(parseFloat(n)) && isFinite(n);
6
- }
7
- exports.default = isNumeric;
package/lib/utils/ssr.jsx DELETED
@@ -1,6 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useSSRSafeId = exports.SSRProvider = void 0;
4
- var ssr_1 = require("@react-aria/ssr");
5
- Object.defineProperty(exports, "SSRProvider", { enumerable: true, get: function () { return ssr_1.SSRProvider; } });
6
- Object.defineProperty(exports, "useSSRSafeId", { enumerable: true, get: function () { return ssr_1.useSSRSafeId; } });
@@ -1,20 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const semver_1 = __importDefault(require("semver"));
7
- const deprecate_1 = require("./deprecate");
8
- // eslint-disable-next-line @typescript-eslint/no-var-requires
9
- const ourVersion = require('../../package.json').version;
10
- beforeEach(() => {
11
- deprecate_1.Deprecations.clearDeprecations();
12
- });
13
- afterEach(() => {
14
- const deprecations = deprecate_1.Deprecations.getDeprecations();
15
- for (const dep of deprecations) {
16
- if (semver_1.default.gte(ourVersion, dep.version)) {
17
- throw new Error(`Found a deprecation that should be removed in ${dep.version}`);
18
- }
19
- }
20
- });
@@ -1,8 +0,0 @@
1
- "use strict";
2
- // JSDOM doesn't mock ResizeObserver
3
- global.ResizeObserver = jest.fn().mockImplementation(() => {
4
- return {
5
- observe: jest.fn(),
6
- disconnect: jest.fn()
7
- };
8
- });
@@ -1,100 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- require("jest-styled-components");
7
- const serializer_1 = require("jest-styled-components/serializer");
8
- const react_1 = __importDefault(require("react"));
9
- const testing_1 = require("./testing");
10
- expect.addSnapshotSerializer(serializer_1.styleSheetSerializer);
11
- const stringify = (d) => JSON.stringify(d, null, ' ');
12
- expect.extend({
13
- toMatchKeys(obj, values) {
14
- return {
15
- pass: Object.keys(values).every(key => this.equals(obj[key], values[key])),
16
- message: () => `Expected ${stringify(obj)} to have matching keys: ${stringify(values)}`
17
- };
18
- },
19
- toHaveClass(node, klass) {
20
- const classes = testing_1.getClasses(node);
21
- const pass = classes.includes(klass);
22
- return {
23
- pass,
24
- message: () => `expected ${stringify(classes)} to include: ${stringify(klass)}`
25
- };
26
- },
27
- toHaveClasses(node, klasses, only = false) {
28
- const classes = testing_1.getClasses(node);
29
- const pass = only
30
- ? this.equals(classes.sort(), klasses.sort())
31
- : klasses.every((klass) => classes.includes(klass));
32
- return {
33
- pass,
34
- message: () => `expected ${stringify(classes)} to include: ${stringify(klasses)}`
35
- };
36
- },
37
- toImplementSxBehavior(element) {
38
- const mediaKey = '@media (max-width:123px)';
39
- const sxPropValue = {
40
- [mediaKey]: {
41
- color: 'red.5'
42
- }
43
- };
44
- const elem = react_1.default.cloneElement(element, { sx: sxPropValue });
45
- function checkStylesDeep(rendered) {
46
- const className = rendered.props.className;
47
- const styles = testing_1.getComputedStyles(className);
48
- const mediaStyles = styles[mediaKey];
49
- if (mediaStyles && mediaStyles.color) {
50
- return true;
51
- }
52
- else if (rendered.children) {
53
- return rendered.children.some((child) => checkStylesDeep(child));
54
- }
55
- else {
56
- return false;
57
- }
58
- }
59
- return {
60
- pass: checkStylesDeep(testing_1.render(elem)),
61
- message: () => 'sx prop values did not change styles of component nor of any sub-components'
62
- };
63
- },
64
- toSetExports(mod, expectedExports) {
65
- if (!Object.keys(expectedExports).includes('default')) {
66
- return {
67
- pass: false,
68
- message: () => "You must specify the module's default export"
69
- };
70
- }
71
- const seen = new Set();
72
- for (const exp of Object.keys(expectedExports)) {
73
- seen.add(exp);
74
- if (mod[exp] !== expectedExports[exp]) {
75
- if (!mod[exp] && !expectedExports[exp]) {
76
- continue;
77
- }
78
- return {
79
- pass: false,
80
- message: () => `Module exported a different value from key '${exp}' than expected`
81
- };
82
- }
83
- }
84
- for (const exp of Object.keys(mod)) {
85
- if (seen.has(exp)) {
86
- continue;
87
- }
88
- if (mod[exp] !== expectedExports[exp]) {
89
- return {
90
- pass: false,
91
- message: () => `Module exported an unexpected value from key '${exp}'`
92
- };
93
- }
94
- }
95
- return {
96
- pass: true,
97
- message: () => ''
98
- };
99
- }
100
- });
@@ -1,206 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.checkExports = exports.behavesAsComponent = exports.unloadCSS = exports.loadCSS = exports.getClasses = exports.getClassName = exports.getProps = exports.getComputedStyles = exports.renderStyles = exports.percent = exports.px = exports.rendersClass = exports.renderClasses = exports.renderRoot = exports.render = exports.mount = exports.COMPONENT_DISPLAY_NAME_REGEX = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const util_1 = require("util");
9
- const react_test_renderer_1 = __importDefault(require("react-test-renderer"));
10
- const enzyme_1 = __importDefault(require("enzyme"));
11
- const enzyme_adapter_react_17_1 = __importDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
12
- const __1 = require("..");
13
- const theme_1 = __importDefault(require("../theme"));
14
- // eslint-disable-next-line @typescript-eslint/no-var-requires
15
- const readFile = util_1.promisify(require('fs').readFile);
16
- exports.COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/;
17
- enzyme_1.default.configure({ adapter: new enzyme_adapter_react_17_1.default() });
18
- function mount(component) {
19
- return enzyme_1.default.mount(component);
20
- }
21
- exports.mount = mount;
22
- /**
23
- * Render the component (a React.createElement() or JSX expression)
24
- * into its intermediate object representation with 'type',
25
- * 'props', and 'children' keys
26
- *
27
- * The returned object can be matched with expect().toEqual(), e.g.
28
- *
29
- * ```js
30
- * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
31
- * ```
32
- */
33
- function render(component, theme = theme_1.default) {
34
- return react_test_renderer_1.default
35
- .create(<__1.ThemeProvider theme={theme}>{component}</__1.ThemeProvider>)
36
- .toJSON();
37
- }
38
- exports.render = render;
39
- /**
40
- * Render the component (a React.createElement() or JSX expression)
41
- * using react-test-renderer and return the root node
42
- * ```
43
- */
44
- function renderRoot(component) {
45
- return react_test_renderer_1.default.create(component).root;
46
- }
47
- exports.renderRoot = renderRoot;
48
- /**
49
- * Get the HTML class names rendered by the component instance
50
- * as an array.
51
- *
52
- * ```js
53
- * expect(renderClasses(<div className='a b' />))
54
- * .toEqual(['a', 'b'])
55
- * ```
56
- */
57
- function renderClasses(component) {
58
- const { props: { className } } = render(component);
59
- return className ? className.trim().split(' ') : [];
60
- }
61
- exports.renderClasses = renderClasses;
62
- /**
63
- * Returns true if a node renders with a single class.
64
- */
65
- function rendersClass(node, klass) {
66
- return renderClasses(node).includes(klass);
67
- }
68
- exports.rendersClass = rendersClass;
69
- function px(value) {
70
- return typeof value === 'number' ? `${value}px` : value;
71
- }
72
- exports.px = px;
73
- function percent(value) {
74
- return typeof value === 'number' ? `${value}%` : value;
75
- }
76
- exports.percent = percent;
77
- function renderStyles(node) {
78
- const { props: { className } } = render(node);
79
- return getComputedStyles(className);
80
- }
81
- exports.renderStyles = renderStyles;
82
- function getComputedStyles(className) {
83
- const div = document.createElement('div');
84
- div.className = className;
85
- const computed = {};
86
- for (const sheet of document.styleSheets) {
87
- // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule
88
- for (const rule of sheet.cssRules) {
89
- if (rule instanceof CSSMediaRule) {
90
- readMedia(rule);
91
- }
92
- else if (rule instanceof CSSStyleRule) {
93
- readRule(rule, computed);
94
- }
95
- else {
96
- // console.warn('rule.type =', rule.type)
97
- }
98
- }
99
- }
100
- return computed;
101
- function matchesSafe(node, selector) {
102
- if (!selector) {
103
- return false;
104
- }
105
- try {
106
- return node.matches(selector);
107
- }
108
- catch (error) {
109
- return false;
110
- }
111
- }
112
- function readRule(rule, dest) {
113
- if (matchesSafe(div, rule.selectorText)) {
114
- const { style } = rule;
115
- for (let i = 0; i < style.length; i++) {
116
- const prop = style[i];
117
- dest[prop] = style.getPropertyValue(prop);
118
- }
119
- }
120
- else {
121
- // console.warn('no match:', rule.selectorText)
122
- }
123
- }
124
- function readMedia(mediaRule) {
125
- const key = `@media ${mediaRule.media[0]}`;
126
- // const dest = computed[key] || (computed[key] = {})
127
- const dest = {};
128
- for (const rule of mediaRule.cssRules) {
129
- if (rule instanceof CSSStyleRule) {
130
- readRule(rule, dest);
131
- }
132
- }
133
- // Don't add media rule to computed styles
134
- // if no styles were actually applied
135
- if (Object.keys(dest).length > 0) {
136
- computed[key] = dest;
137
- }
138
- }
139
- }
140
- exports.getComputedStyles = getComputedStyles;
141
- /**
142
- * This provides a layer of compatibility between the render() function from
143
- * react-test-renderer and Enzyme's mount()
144
- */
145
- function getProps(node) {
146
- return typeof node.props === 'function' ? node.props() : node.props;
147
- }
148
- exports.getProps = getProps;
149
- function getClassName(node) {
150
- return getProps(node).className;
151
- }
152
- exports.getClassName = getClassName;
153
- function getClasses(node) {
154
- const className = getClassName(node);
155
- return className ? className.trim().split(/ +/) : [];
156
- }
157
- exports.getClasses = getClasses;
158
- async function loadCSS(path) {
159
- const css = await readFile(require.resolve(path), 'utf8');
160
- const style = document.createElement('style');
161
- style.setAttribute('data-path', path);
162
- style.textContent = css;
163
- document.head.appendChild(style);
164
- return style;
165
- }
166
- exports.loadCSS = loadCSS;
167
- function unloadCSS(path) {
168
- const style = document.querySelector(`style[data-path="${path}"]`);
169
- if (style) {
170
- style.remove();
171
- return true;
172
- }
173
- }
174
- exports.unloadCSS = unloadCSS;
175
- function behavesAsComponent({ Component, toRender, options }) {
176
- options = options || {};
177
- const getElement = () => (toRender ? toRender() : <Component />);
178
- if (!options.skipSx) {
179
- it('implements sx prop behavior', () => {
180
- expect(getElement()).toImplementSxBehavior();
181
- });
182
- }
183
- if (!options.skipAs) {
184
- it('respects the as prop', () => {
185
- const As = react_1.default.forwardRef((_props, ref) => <div className="as-component" ref={ref}/>);
186
- const elem = react_1.default.cloneElement(getElement(), { as: As });
187
- expect(render(elem)).toEqual(render(<As />));
188
- });
189
- }
190
- it('sets a valid displayName', () => {
191
- expect(Component.displayName).toMatch(exports.COMPONENT_DISPLAY_NAME_REGEX);
192
- });
193
- it('renders consistently', () => {
194
- expect(render(getElement())).toMatchSnapshot();
195
- });
196
- }
197
- exports.behavesAsComponent = behavesAsComponent;
198
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
199
- function checkExports(path, exports) {
200
- it('has declared exports', () => {
201
- // eslint-disable-next-line @typescript-eslint/no-var-requires
202
- const mod = require(`../${path}`);
203
- expect(mod).toSetExports(exports);
204
- });
205
- }
206
- exports.checkExports = checkExports;
@@ -1,26 +0,0 @@
1
- /// <reference types="react" />
2
- import { SxProp } from '../sx';
3
- /**
4
- * Contract for props passed to the `Header` component.
5
- */
6
- export declare type HeaderProps = {
7
- /**
8
- * Style variations. Usage is discretionary.
9
- *
10
- * - `"filled"` - Superimposed on a background, offset from nearby content
11
- * - `"subtle"` - Relatively less offset from nearby content
12
- */
13
- variant?: 'subtle' | 'filled';
14
- /**
15
- * Primary text which names a `Group`.
16
- */
17
- title?: string;
18
- /**
19
- * Secondary text which provides additional information about a `Group`.
20
- */
21
- auxiliaryText?: string;
22
- } & SxProp;
23
- /**
24
- * Displays the name and description of a `Group`.
25
- */
26
- export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;
@@ -1,44 +0,0 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- import React from 'react';
4
- import Box from '../Box';
5
- import { ListContext } from './List';
6
- /**
7
- * Contract for props passed to the `Header` component.
8
- */
9
-
10
- /**
11
- * Displays the name and description of a `Group`.
12
- */
13
- export const Header = ({
14
- variant = 'subtle',
15
- title,
16
- auxiliaryText,
17
- sx = {},
18
- ...props
19
- }) => {
20
- const {
21
- variant: listVariant
22
- } = React.useContext(ListContext);
23
- const styles = {
24
- paddingY: '6px',
25
- paddingX: listVariant === 'full' ? 2 : 3,
26
- fontSize: 0,
27
- fontWeight: 'bold',
28
- color: 'fg.muted',
29
- ...(variant === 'filled' && {
30
- backgroundColor: 'canvas.subtle',
31
- marginX: 0,
32
- marginBottom: 2,
33
- borderTop: '1px solid',
34
- borderBottom: '1px solid',
35
- borderColor: 'neutral.muted'
36
- }),
37
- ...sx
38
- };
39
- return /*#__PURE__*/React.createElement(Box, _extends({
40
- sx: styles,
41
- role: "heading"
42
- }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
43
- };
44
- Header.displayName = "Header";