@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
package/lib/Position.jsx DELETED
@@ -1,46 +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.Sticky = exports.Relative = exports.Fixed = exports.Absolute = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const styled_components_1 = __importDefault(require("styled-components"));
9
- const Box_1 = __importDefault(require("./Box"));
10
- /**
11
- * @deprecated Use the Box component instead (i.e. <Position> → <Box>)
12
- */
13
- const Position = styled_components_1.default(Box_1.default) ``;
14
- /**
15
- * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
16
- */
17
- exports.default = Position;
18
- /**
19
- * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
20
- */
21
- exports.Absolute = react_1.default.forwardRef((props, ref) => {
22
- return <Position {...props} position="absolute" ref={ref}/>;
23
- });
24
- exports.Absolute.displayName = 'Absolute';
25
- /**
26
- * @deprecated Use the Box component instead (i.e. <Fixed> → <Box position="fixed">)
27
- */
28
- exports.Fixed = react_1.default.forwardRef((props, ref) => {
29
- return <Position {...props} position="fixed" ref={ref}/>;
30
- });
31
- exports.Fixed.displayName = 'Fixed';
32
- /**
33
- * @deprecated Use the Box component instead (i.e. <Relative> → <Box position="relative">)
34
- */
35
- exports.Relative = react_1.default.forwardRef((props, ref) => {
36
- return <Position {...props} position="relative" ref={ref}/>;
37
- });
38
- exports.Relative.displayName = 'Relative';
39
- /**
40
- * @deprecated Use the Box component instead (i.e. <Sticky> → <Box position="sticky">)
41
- */
42
- exports.Sticky = react_1.default.forwardRef((props, ref) => {
43
- return <Position {...props} position="sticky" ref={ref}/>;
44
- });
45
- exports.Sticky.defaultProps = { top: 0, zIndex: 1 };
46
- exports.Sticky.displayName = 'Sticky';
@@ -1,39 +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 react_1 = __importDefault(require("react"));
7
- const styled_components_1 = __importDefault(require("styled-components"));
8
- const styled_system_1 = require("styled-system");
9
- const constants_1 = require("./constants");
10
- const sx_1 = __importDefault(require("./sx"));
11
- const Bar = styled_components_1.default.span `
12
- width: ${props => (props.progress ? `${props.progress}%` : 0)};
13
- ${constants_1.COMMON}
14
- `;
15
- const sizeMap = {
16
- small: '5px',
17
- large: '10px',
18
- default: '8px'
19
- };
20
- const ProgressContainer = styled_components_1.default.span `
21
- display: ${props => (props.inline ? 'inline-flex' : 'flex')};
22
- overflow: hidden;
23
- background-color: ${constants_1.get('colors.border.default')};
24
- border-radius: ${constants_1.get('radii.1')};
25
- height: ${props => sizeMap[props.barSize || 'default']};
26
- ${constants_1.COMMON}
27
- ${styled_system_1.width}
28
- ${sx_1.default};
29
- `;
30
- function ProgressBar({ progress, bg, theme, ...rest }) {
31
- return (<ProgressContainer theme={theme} {...rest}>
32
- <Bar progress={progress} bg={bg} theme={theme}/>
33
- </ProgressContainer>);
34
- }
35
- ProgressBar.defaultProps = {
36
- bg: 'success.emphasis',
37
- barSize: 'default'
38
- };
39
- exports.default = ProgressBar;
@@ -1,114 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
13
- });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- var __importDefault = (this && this.__importDefault) || function (mod) {
22
- return (mod && mod.__esModule) ? mod : { "default": mod };
23
- };
24
- Object.defineProperty(exports, "__esModule", { value: true });
25
- const react_1 = __importStar(require("react"));
26
- const styled_components_1 = __importDefault(require("styled-components"));
27
- const constants_1 = require("../constants");
28
- const sx_1 = __importDefault(require("../sx"));
29
- const useKeyboardNav_1 = __importDefault(require("./hooks/useKeyboardNav"));
30
- const SelectMenuContext_1 = require("./SelectMenuContext");
31
- const SelectMenuDivider_1 = __importDefault(require("./SelectMenuDivider"));
32
- const SelectMenuFilter_1 = __importDefault(require("./SelectMenuFilter"));
33
- const SelectMenuFooter_1 = __importDefault(require("./SelectMenuFooter"));
34
- const SelectMenuHeader_1 = __importDefault(require("./SelectMenuHeader"));
35
- const SelectMenuItem_1 = __importDefault(require("./SelectMenuItem"));
36
- const SelectMenuList_1 = __importDefault(require("./SelectMenuList"));
37
- const SelectMenuLoadingAnimation_1 = __importDefault(require("./SelectMenuLoadingAnimation"));
38
- const SelectMenuModal_1 = __importDefault(require("./SelectMenuModal"));
39
- const SelectMenuTab_1 = __importDefault(require("./SelectMenuTab"));
40
- const SelectMenuTabPanel_1 = __importDefault(require("./SelectMenuTabPanel"));
41
- const SelectMenuTabs_1 = __importDefault(require("./SelectMenuTabs"));
42
- const wrapperStyles = `
43
- // Remove marker added by the display: list-item browser default
44
- > summary {
45
- list-style: none;
46
- }
47
- // Remove marker added by details polyfill
48
- > summary::before {
49
- display: none;
50
- }
51
- // Remove marker added by Chrome
52
- > summary::-webkit-details-marker {
53
- display: none;
54
- }
55
- `;
56
- const StyledSelectMenu = styled_components_1.default.details `
57
- ${wrapperStyles}
58
- ${constants_1.COMMON}
59
- ${sx_1.default};
60
- `;
61
- // 'as' is spread out because we don't want users to be able to change the tag.
62
- const SelectMenu = react_1.default.forwardRef(({ children, initialTab = '', as: _ignoredAs, ...rest }, forwardedRef) => {
63
- const backupRef = react_1.useRef(null);
64
- const ref = forwardedRef ?? backupRef;
65
- const [selectedTab, setSelectedTab] = react_1.useState(initialTab);
66
- const [open, setOpen] = react_1.useState(false);
67
- const menuProviderValues = {
68
- selectedTab,
69
- setSelectedTab,
70
- setOpen,
71
- open,
72
- initialTab
73
- };
74
- const onClickOutside = react_1.useCallback(event => {
75
- if ('current' in ref && ref.current && !ref.current.contains(event.target)) {
76
- if (!event.defaultPrevented) {
77
- setOpen(false);
78
- }
79
- }
80
- }, [ref, setOpen]);
81
- // handles the overlay behavior - closing the menu when clicking outside of it
82
- react_1.useEffect(() => {
83
- if (open) {
84
- document.addEventListener('click', onClickOutside);
85
- return () => {
86
- document.removeEventListener('click', onClickOutside);
87
- };
88
- }
89
- }, [open, onClickOutside]);
90
- function toggle(event) {
91
- setOpen(event.target.open);
92
- }
93
- useKeyboardNav_1.default(ref, open, setOpen);
94
- return (<SelectMenuContext_1.MenuContext.Provider value={menuProviderValues}>
95
- <StyledSelectMenu ref={ref} {...rest} open={open} onToggle={toggle}>
96
- {children}
97
- </StyledSelectMenu>
98
- </SelectMenuContext_1.MenuContext.Provider>);
99
- });
100
- SelectMenu.displayName = 'SelectMenu';
101
- exports.default = Object.assign(SelectMenu, {
102
- MenuContext: SelectMenuContext_1.MenuContext,
103
- List: SelectMenuList_1.default,
104
- Divider: SelectMenuDivider_1.default,
105
- Filter: SelectMenuFilter_1.default,
106
- Footer: SelectMenuFooter_1.default,
107
- Item: SelectMenuItem_1.default,
108
- Modal: SelectMenuModal_1.default,
109
- Tabs: SelectMenuTabs_1.default,
110
- Tab: SelectMenuTab_1.default,
111
- TabPanel: SelectMenuTabPanel_1.default,
112
- Header: SelectMenuHeader_1.default,
113
- LoadingAnimation: SelectMenuLoadingAnimation_1.default
114
- });
@@ -1,5 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MenuContext = void 0;
4
- const react_1 = require("react");
5
- exports.MenuContext = react_1.createContext({});
@@ -1,43 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
13
- });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- var __importDefault = (this && this.__importDefault) || function (mod) {
22
- return (mod && mod.__esModule) ? mod : { "default": mod };
23
- };
24
- Object.defineProperty(exports, "__esModule", { value: true });
25
- const styled_components_1 = __importStar(require("styled-components"));
26
- const constants_1 = require("../constants");
27
- const sx_1 = __importDefault(require("../sx"));
28
- const dividerStyles = styled_components_1.css `
29
- padding: ${constants_1.get('space.1')} ${constants_1.get('space.3')};
30
- margin: 0;
31
- font-size: ${constants_1.get('fontSizes.0')};
32
- font-weight: ${constants_1.get('fontWeights.bold')};
33
- color: ${constants_1.get('colors.fg.muted')};
34
- background-color: ${constants_1.get('colors.canvas.subtle')};
35
- border-bottom: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
36
- `;
37
- const SelectMenuDivider = styled_components_1.default.div `
38
- ${dividerStyles}
39
- ${constants_1.COMMON}
40
- ${sx_1.default};
41
- `;
42
- SelectMenuDivider.displayName = 'SelectMenu.Divider';
43
- exports.default = SelectMenuDivider;
@@ -1,59 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
13
- });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- var __importDefault = (this && this.__importDefault) || function (mod) {
22
- return (mod && mod.__esModule) ? mod : { "default": mod };
23
- };
24
- Object.defineProperty(exports, "__esModule", { value: true });
25
- const react_1 = __importStar(require("react"));
26
- const styled_components_1 = __importDefault(require("styled-components"));
27
- const constants_1 = require("../constants");
28
- const sx_1 = __importDefault(require("../sx"));
29
- const TextInput_1 = __importDefault(require("../TextInput"));
30
- const SelectMenuContext_1 = require("./SelectMenuContext");
31
- const StyledForm = styled_components_1.default.form `
32
- padding: ${constants_1.get('space.3')};
33
- margin: 0;
34
- border-bottom: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
35
- background-color: ${constants_1.get('colors.canvas.overlay')};
36
- ${constants_1.COMMON};
37
-
38
- @media (min-width: ${constants_1.get('breakpoints.0')}) {
39
- padding: ${constants_1.get('space.2')};
40
- }
41
-
42
- ${sx_1.default};
43
- `;
44
- const SelectMenuFilter = react_1.forwardRef(({ theme, value, sx: sxProp, ...rest }, forwardedRef) => {
45
- const inputRef = react_1.useRef(null);
46
- const ref = forwardedRef ?? inputRef;
47
- const { open } = react_1.useContext(SelectMenuContext_1.MenuContext);
48
- // puts focus on the filter input when the menu is opened
49
- react_1.useEffect(() => {
50
- if (open) {
51
- inputRef.current?.focus();
52
- }
53
- }, [open]);
54
- return (<StyledForm theme={theme} sx={sxProp}>
55
- <TextInput_1.default theme={theme} ref={ref} width="100%" block value={value} contrast {...rest}/>
56
- </StyledForm>);
57
- });
58
- SelectMenuFilter.displayName = 'SelectMenu.Filter';
59
- exports.default = SelectMenuFilter;
@@ -1,46 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
13
- });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- var __importDefault = (this && this.__importDefault) || function (mod) {
22
- return (mod && mod.__esModule) ? mod : { "default": mod };
23
- };
24
- Object.defineProperty(exports, "__esModule", { value: true });
25
- const styled_components_1 = __importStar(require("styled-components"));
26
- const constants_1 = require("../constants");
27
- const sx_1 = __importDefault(require("../sx"));
28
- const footerStyles = styled_components_1.css `
29
- margin-top: -1px;
30
- padding: ${constants_1.get('space.2')} ${constants_1.get('space.3')};
31
- font-size: ${constants_1.get('fontSizes.0')};
32
- color: ${constants_1.get('colors.fg.muted')};
33
- text-align: center;
34
- border-top: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
35
-
36
- @media (min-width: ${constants_1.get('breakpoints.0')}) {
37
- padding: ${constants_1.get('space.1')} ${constants_1.get('space.2')};
38
- }
39
- `;
40
- const SelectMenuFooter = styled_components_1.default.footer `
41
- ${footerStyles}
42
- ${constants_1.COMMON}
43
- ${sx_1.default};
44
- `;
45
- SelectMenuFooter.displayName = 'SelectMenu.Footer';
46
- exports.default = SelectMenuFooter;
@@ -1,44 +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 react_1 = __importDefault(require("react"));
7
- const styled_components_1 = __importDefault(require("styled-components"));
8
- const constants_1 = require("../constants");
9
- const sx_1 = __importDefault(require("../sx"));
10
- // SelectMenu.Header is intentionally not exported, it's an internal component used in
11
- // SelectMenu.Modal
12
- const SelectMenuTitle = styled_components_1.default.h3 `
13
- color: ${constants_1.get('colors.fg.default')};
14
- flex: auto;
15
- font-size: ${constants_1.get('fontSizes.1')};
16
- font-weight: ${constants_1.get('fontWeights.bold')};
17
- margin: 0;
18
-
19
- @media (min-width: ${constants_1.get('breakpoints.0')}) {
20
- font-size: inherit;
21
- }
22
- `;
23
- const StyledHeader = styled_components_1.default.header `
24
- display: flex;
25
- flex: none; // fixes header from getting squeezed in Safari iOS
26
- padding: ${constants_1.get('space.3')};
27
- border-bottom: ${constants_1.get('borderWidths')} solid ${constants_1.get('colors.border.muted')};
28
- ${constants_1.COMMON}
29
- ${constants_1.TYPOGRAPHY}
30
-
31
- @media (min-width: ${constants_1.get('breakpoints.0')}) {
32
- padding-top: ${constants_1.get('space.2')};
33
- padding-bottom: ${constants_1.get('space.2')};
34
- }
35
-
36
- ${sx_1.default};
37
- `;
38
- const SelectMenuHeader = ({ children, theme, ...rest }) => {
39
- return (<StyledHeader theme={theme} {...rest}>
40
- <SelectMenuTitle theme={theme}>{children}</SelectMenuTitle>
41
- </StyledHeader>);
42
- };
43
- SelectMenuHeader.displayName = 'SelectMenu.Header';
44
- exports.default = SelectMenuHeader;
@@ -1,143 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
13
- });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- var __importDefault = (this && this.__importDefault) || function (mod) {
22
- return (mod && mod.__esModule) ? mod : { "default": mod };
23
- };
24
- Object.defineProperty(exports, "__esModule", { value: true });
25
- exports.listItemStyles = void 0;
26
- const octicons_react_1 = require("@primer/octicons-react");
27
- const react_1 = __importStar(require("react"));
28
- const styled_components_1 = __importStar(require("styled-components"));
29
- const constants_1 = require("../constants");
30
- const StyledOcticon_1 = __importDefault(require("../StyledOcticon"));
31
- const sx_1 = __importDefault(require("../sx"));
32
- const SelectMenuContext_1 = require("./SelectMenuContext");
33
- exports.listItemStyles = styled_components_1.css `
34
- display: flex;
35
- align-items: center;
36
- padding: ${constants_1.get('space.3')};
37
- overflow: hidden;
38
- text-align: left;
39
- cursor: pointer;
40
- background-color: ${constants_1.get('colors.canvas.overlay')};
41
- border: 0;
42
- border-bottom: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
43
- color: ${constants_1.get('colors.fg.muted')};
44
- text-decoration: none;
45
- font-size: ${constants_1.get('fontSizes.0')};
46
- font-family: inherit; // needed if user uses a "button" tag
47
- width: 100%;
48
-
49
- &:hover {
50
- text-decoration: none;
51
- }
52
- &:focus {
53
- outline: none;
54
- }
55
-
56
- &[hidden] {
57
- display: none !important;
58
- }
59
-
60
- @media (min-width: ${constants_1.get('breakpoints.0')}) {
61
- padding-top: ${constants_1.get('space.2')};
62
- padding-bottom: ${constants_1.get('space.2')};
63
- }
64
-
65
- .SelectMenu-icon {
66
- width: ${constants_1.get('space.3')};
67
- margin-right: ${constants_1.get('space.2')};
68
- flex-shrink: 0;
69
- }
70
-
71
- .SelectMenu-selected-icon {
72
- visibility: hidden;
73
- transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
74
- transform: scale(0);
75
- }
76
-
77
- // selected items
78
- &[aria-checked='true'] {
79
- font-weight: 500;
80
- color: ${constants_1.get('colors.fg.default')};
81
-
82
- .SelectMenu-selected-icon {
83
- visibility: visible;
84
- transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear;
85
- transform: scale(1);
86
- }
87
- }
88
-
89
- // can hover states
90
- @media (hover: hover) {
91
- &:hover,
92
- &:active,
93
- &:focus {
94
- background-color: ${constants_1.get('colors.neutral.subtle')};
95
- }
96
- }
97
-
98
- // Can not hover states
99
- //
100
- // For touch input
101
-
102
- @media (hover: none) {
103
- // Android
104
- &:focus,
105
- &:active {
106
- background-color: ${constants_1.get('colors.canvas.subtle')};
107
- }
108
-
109
- // iOS Safari
110
- // :active would work if ontouchstart is added to the button
111
- // Instead this tweaks the "native" highlight color
112
- -webkit-tap-highlight-color: ${constants_1.get('colors.selectMenu.tapHighlight')};
113
- }
114
- `;
115
- const StyledItem = styled_components_1.default.a.attrs(() => ({
116
- role: 'menuitemcheckbox'
117
- })) `
118
- ${exports.listItemStyles}
119
- ${constants_1.COMMON}
120
- ${sx_1.default};
121
- `;
122
- const SelectMenuItem = react_1.forwardRef(({ children, selected, theme, onClick, ...rest }, forwardedRef) => {
123
- const menuContext = react_1.useContext(SelectMenuContext_1.MenuContext);
124
- const backupRef = react_1.useRef(null);
125
- const itemRef = forwardedRef ?? backupRef;
126
- // close the menu when an item is clicked
127
- // this can be overriden if the user provides a `onClick` prop and prevents default in it
128
- const handleClick = (e) => {
129
- onClick && onClick(e);
130
- if (!e.defaultPrevented) {
131
- menuContext.setOpen?.(false);
132
- }
133
- };
134
- return (<StyledItem ref={itemRef} {...rest} theme={theme} onClick={handleClick} aria-checked={selected}>
135
- <StyledOcticon_1.default theme={theme} className="SelectMenu-icon SelectMenu-selected-icon" icon={octicons_react_1.CheckIcon}/>
136
- {children}
137
- </StyledItem>);
138
- });
139
- SelectMenuItem.defaultProps = {
140
- selected: false
141
- };
142
- SelectMenuItem.displayName = 'SelectMenu.Item';
143
- exports.default = SelectMenuItem;
@@ -1,60 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
13
- });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- var __importDefault = (this && this.__importDefault) || function (mod) {
22
- return (mod && mod.__esModule) ? mod : { "default": mod };
23
- };
24
- Object.defineProperty(exports, "__esModule", { value: true });
25
- const styled_components_1 = __importStar(require("styled-components"));
26
- const constants_1 = require("../constants");
27
- const sx_1 = __importDefault(require("../sx"));
28
- const listStyles = styled_components_1.css `
29
- position: relative;
30
- padding: 0;
31
- margin: 0;
32
- flex: auto;
33
- overflow-x: hidden;
34
- overflow-y: auto;
35
- background-color: ${constants_1.get('colors.canvas.overlay')};
36
- -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
37
-
38
- @media (hover: hover) {
39
- .SelectMenuTab:focus {
40
- background-color: ${constants_1.get('colors.selectMenu.tapFocusBg')};
41
- }
42
-
43
- .SelectMenuTab:not([aria-checked='true']):hover {
44
- color: ${constants_1.get('colors.fg.default')};
45
- background-color: ${constants_1.get('colors.canvas.subtle')};
46
- }
47
-
48
- .SelectMenuTab:not([aria-checked='true']):active {
49
- color: ${constants_1.get('colors.fg.default')};
50
- background-color: ${constants_1.get('colors.canvas.subtle')};
51
- }
52
- }
53
- `;
54
- const SelectMenuList = styled_components_1.default.div `
55
- ${listStyles}
56
- ${constants_1.COMMON}
57
- ${sx_1.default};
58
- `;
59
- SelectMenuList.displayName = 'SelectMenu.List';
60
- exports.default = SelectMenuList;
@@ -1,21 +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 react_1 = __importDefault(require("react"));
7
- const styled_components_1 = __importDefault(require("styled-components"));
8
- const constants_1 = require("../constants");
9
- const Spinner_1 = __importDefault(require("../Spinner"));
10
- const Animation = styled_components_1.default.div `
11
- padding: ${constants_1.get('space.6')} ${constants_1.get('space.4')};
12
- text-align: center;
13
- background-color: ${constants_1.get('colors.canvas.overlay')};
14
- ${constants_1.COMMON}
15
- `;
16
- const SelectMenuLoadingAnimation = (props) => {
17
- return (<Animation {...props}>
18
- <Spinner_1.default />
19
- </Animation>);
20
- };
21
- exports.default = SelectMenuLoadingAnimation;