@primer/components 0.0.0-2021109221452 → 0.0.0-2021109223232

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 (175) hide show
  1. package/CHANGELOG.md +5 -3
  2. package/dist/browser.esm.js +178 -178
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +179 -179
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/index.js +23 -12
  7. package/lib/AnchoredOverlay/index.js +12 -4
  8. package/lib/Autocomplete/index.js +14 -7
  9. package/lib/Button/index.js +70 -21
  10. package/lib/DropdownMenu/index.js +20 -6
  11. package/lib/DropdownStyles.js +26 -18
  12. package/lib/FilteredActionList/index.js +12 -4
  13. package/lib/Overlay.js +3 -1
  14. package/lib/Pagination/index.js +12 -6
  15. package/lib/Portal/Portal.js +3 -2
  16. package/lib/Portal/index.js +16 -5
  17. package/lib/SelectMenu/hooks/useKeyboardNav.js +96 -80
  18. package/lib/SelectMenu/index.js +14 -7
  19. package/lib/SelectPanel/index.js +12 -4
  20. package/lib/Token/index.js +30 -11
  21. package/lib/behaviors/anchoredPosition.js +234 -205
  22. package/lib/behaviors/focusTrap.js +157 -121
  23. package/lib/behaviors/focusZone.js +509 -434
  24. package/lib/behaviors/scrollIntoViewingArea.js +35 -18
  25. package/lib/constants.js +43 -39
  26. package/lib/hooks/index.js +60 -16
  27. package/lib/hooks/useAnchoredPosition.js +40 -31
  28. package/lib/hooks/useCombinedRefs.d.ts +2 -2
  29. package/lib/hooks/useCombinedRefs.js +35 -46
  30. package/lib/hooks/useDialog.js +96 -72
  31. package/lib/hooks/useFocusTrap.js +60 -43
  32. package/lib/hooks/useFocusZone.js +50 -54
  33. package/lib/hooks/useOnEscapePress.js +36 -25
  34. package/lib/hooks/useOpenAndCloseFocus.js +34 -22
  35. package/lib/hooks/useProvidedRefOrCreate.js +14 -10
  36. package/lib/hooks/useProvidedStateOrCreate.js +16 -13
  37. package/lib/hooks/useRenderForcingRef.js +17 -13
  38. package/lib/hooks/useResizeObserver.js +18 -15
  39. package/lib/hooks/useSafeTimeout.js +30 -22
  40. package/lib/hooks/useScrollFlash.js +23 -16
  41. package/lib/index.js +636 -161
  42. package/lib/polyfills/eventListenerSignal.js +45 -37
  43. package/lib/sx.js +14 -7
  44. package/lib/theme-preval.js +2945 -64
  45. package/lib/theme.js +12 -3
  46. package/lib/utils/iterateFocusableElements.js +85 -63
  47. package/lib/utils/theme.js +47 -33
  48. package/lib/utils/types/AriaRole.js +1 -2
  49. package/lib/utils/types/ComponentProps.js +1 -2
  50. package/lib/utils/types/Flatten.js +1 -2
  51. package/lib/utils/types/KeyPaths.js +1 -2
  52. package/lib/utils/types/MandateProps.js +1 -16
  53. package/lib/utils/types/Merge.js +1 -2
  54. package/lib/utils/types/index.js +69 -16
  55. package/lib/utils/uniqueId.js +8 -5
  56. package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  57. package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
  58. package/lib/utils/userAgent.js +12 -8
  59. package/lib-esm/Overlay.js +2 -1
  60. package/lib-esm/Portal/Portal.js +2 -1
  61. package/lib-esm/hooks/useAnchoredPosition.js +2 -1
  62. package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
  63. package/lib-esm/hooks/useCombinedRefs.js +3 -2
  64. package/lib-esm/hooks/useResizeObserver.js +2 -2
  65. package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  66. package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
  67. package/package.json +2 -3
  68. package/lib/ActionList/Divider.jsx +0 -29
  69. package/lib/ActionList/Group.jsx +0 -23
  70. package/lib/ActionList/Header.jsx +0 -66
  71. package/lib/ActionList/Item.jsx +0 -301
  72. package/lib/ActionList/List.jsx +0 -138
  73. package/lib/ActionMenu.jsx +0 -73
  74. package/lib/AnchoredOverlay/AnchoredOverlay.jsx +0 -100
  75. package/lib/Autocomplete/Autocomplete.jsx +0 -100
  76. package/lib/Autocomplete/AutocompleteContext.jsx +0 -5
  77. package/lib/Autocomplete/AutocompleteInput.jsx +0 -113
  78. package/lib/Autocomplete/AutocompleteMenu.jsx +0 -190
  79. package/lib/Autocomplete/AutocompleteOverlay.jsx +0 -55
  80. package/lib/Avatar.jsx +0 -34
  81. package/lib/AvatarPair.jsx +0 -29
  82. package/lib/AvatarStack.jsx +0 -151
  83. package/lib/BaseStyles.jsx +0 -65
  84. package/lib/BorderBox.jsx +0 -18
  85. package/lib/Box.jsx +0 -10
  86. package/lib/BranchName.jsx +0 -20
  87. package/lib/Breadcrumbs.jsx +0 -74
  88. package/lib/Button/Button.jsx +0 -60
  89. package/lib/Button/ButtonBase.jsx +0 -36
  90. package/lib/Button/ButtonClose.jsx +0 -55
  91. package/lib/Button/ButtonDanger.jsx +0 -63
  92. package/lib/Button/ButtonGroup.jsx +0 -55
  93. package/lib/Button/ButtonInvisible.jsx +0 -52
  94. package/lib/Button/ButtonOutline.jsx +0 -63
  95. package/lib/Button/ButtonPrimary.jsx +0 -62
  96. package/lib/Button/ButtonStyles.jsx +0 -37
  97. package/lib/Button/ButtonTableList.jsx +0 -49
  98. package/lib/Caret.jsx +0 -93
  99. package/lib/CircleBadge.jsx +0 -43
  100. package/lib/CircleOcticon.jsx +0 -21
  101. package/lib/CounterLabel.jsx +0 -44
  102. package/lib/Details.jsx +0 -21
  103. package/lib/Dialog/ConfirmationDialog.jsx +0 -146
  104. package/lib/Dialog/Dialog.jsx +0 -273
  105. package/lib/Dialog.jsx +0 -131
  106. package/lib/Dropdown.jsx +0 -134
  107. package/lib/DropdownMenu/DropdownButton.jsx +0 -14
  108. package/lib/DropdownMenu/DropdownMenu.jsx +0 -70
  109. package/lib/FilterList.jsx +0 -63
  110. package/lib/FilteredActionList/FilteredActionList.jsx +0 -100
  111. package/lib/FilteredSearch.jsx +0 -29
  112. package/lib/Flash.jsx +0 -70
  113. package/lib/Flex.jsx +0 -15
  114. package/lib/FormGroup.jsx +0 -25
  115. package/lib/Grid.jsx +0 -15
  116. package/lib/Header.jsx +0 -90
  117. package/lib/Heading.jsx +0 -21
  118. package/lib/Label.jsx +0 -84
  119. package/lib/LabelGroup.jsx +0 -19
  120. package/lib/Link.jsx +0 -38
  121. package/lib/Overlay.jsx +0 -155
  122. package/lib/Pagehead.jsx +0 -18
  123. package/lib/Pagination/Pagination.jsx +0 -163
  124. package/lib/Pagination/model.jsx +0 -174
  125. package/lib/PointerBox.jsx +0 -25
  126. package/lib/Popover.jsx +0 -210
  127. package/lib/Portal/Portal.jsx +0 -78
  128. package/lib/Position.jsx +0 -46
  129. package/lib/ProgressBar.jsx +0 -39
  130. package/lib/SelectMenu/SelectMenu.jsx +0 -114
  131. package/lib/SelectMenu/SelectMenuContext.jsx +0 -5
  132. package/lib/SelectMenu/SelectMenuDivider.jsx +0 -43
  133. package/lib/SelectMenu/SelectMenuFilter.jsx +0 -59
  134. package/lib/SelectMenu/SelectMenuFooter.jsx +0 -46
  135. package/lib/SelectMenu/SelectMenuHeader.jsx +0 -44
  136. package/lib/SelectMenu/SelectMenuItem.jsx +0 -143
  137. package/lib/SelectMenu/SelectMenuList.jsx +0 -60
  138. package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +0 -21
  139. package/lib/SelectMenu/SelectMenuModal.jsx +0 -119
  140. package/lib/SelectMenu/SelectMenuTab.jsx +0 -93
  141. package/lib/SelectMenu/SelectMenuTabPanel.jsx +0 -43
  142. package/lib/SelectMenu/SelectMenuTabs.jsx +0 -58
  143. package/lib/SelectPanel/SelectPanel.jsx +0 -105
  144. package/lib/SideNav.jsx +0 -177
  145. package/lib/Spinner.jsx +0 -35
  146. package/lib/StateLabel.jsx +0 -89
  147. package/lib/StyledOcticon.jsx +0 -20
  148. package/lib/SubNav.jsx +0 -104
  149. package/lib/TabNav.jsx +0 -60
  150. package/lib/Text.jsx +0 -14
  151. package/lib/TextInput.jsx +0 -23
  152. package/lib/TextInputWithTokens.jsx +0 -218
  153. package/lib/ThemeProvider.jsx +0 -130
  154. package/lib/Timeline.jsx +0 -124
  155. package/lib/Token/AvatarToken.jsx +0 -54
  156. package/lib/Token/IssueLabelToken.jsx +0 -125
  157. package/lib/Token/Token.jsx +0 -103
  158. package/lib/Token/TokenBase.jsx +0 -88
  159. package/lib/Token/_RemoveTokenButton.jsx +0 -108
  160. package/lib/Token/_TokenTextContainer.jsx +0 -49
  161. package/lib/Tooltip.jsx +0 -246
  162. package/lib/Truncate.jsx +0 -27
  163. package/lib/UnderlineNav.jsx +0 -90
  164. package/lib/_TextInputWrapper.jsx +0 -114
  165. package/lib/_UnstyledTextInput.jsx +0 -22
  166. package/lib/hooks/useDetails.jsx +0 -39
  167. package/lib/hooks/useOnOutsideClick.jsx +0 -61
  168. package/lib/hooks/useOverlay.jsx +0 -15
  169. package/lib/utils/deprecate.jsx +0 -59
  170. package/lib/utils/isNumeric.jsx +0 -7
  171. package/lib/utils/ssr.jsx +0 -6
  172. package/lib/utils/test-deprecations.jsx +0 -20
  173. package/lib/utils/test-helpers.jsx +0 -8
  174. package/lib/utils/test-matchers.jsx +0 -100
  175. package/lib/utils/testing.jsx +0 -206
@@ -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;