@primer/components 0.0.0-2021821193917 → 0.0.0-2021823142332

Sign up to get free protection for your applications and to get access to all the features.
Files changed (234) hide show
  1. package/CHANGELOG.md +34 -2
  2. package/dist/browser.esm.js +665 -619
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +432 -386
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Divider.js +1 -1
  7. package/lib/ActionList/Header.js +2 -2
  8. package/lib/ActionList/Item.js +13 -13
  9. package/lib/ActionList/List.js +1 -1
  10. package/lib/AnchoredOverlay/AnchoredOverlay.js +2 -2
  11. package/lib/Avatar.d.ts +4 -0
  12. package/lib/AvatarPair.js +1 -1
  13. package/lib/AvatarStack.js +1 -1
  14. package/lib/BranchName.js +1 -1
  15. package/lib/Breadcrumb.js +2 -2
  16. package/lib/Button/Button.d.ts +0 -1
  17. package/lib/Button/Button.js +1 -1
  18. package/lib/Button/ButtonClose.d.ts +1 -2
  19. package/lib/Button/ButtonClose.js +1 -1
  20. package/lib/Button/ButtonDanger.d.ts +0 -1
  21. package/lib/Button/ButtonInvisible.d.ts +0 -1
  22. package/lib/Button/ButtonInvisible.js +1 -1
  23. package/lib/Button/ButtonOutline.d.ts +0 -1
  24. package/lib/Button/ButtonPrimary.d.ts +0 -1
  25. package/lib/Button/ButtonTableList.js +1 -1
  26. package/lib/CircleBadge.js +1 -1
  27. package/lib/CircleOcticon.d.ts +0 -1
  28. package/lib/CircleOcticon.js +1 -1
  29. package/lib/CounterLabel.js +2 -2
  30. package/lib/Dialog/ConfirmationDialog.js +1 -1
  31. package/lib/Dialog/Dialog.js +9 -9
  32. package/lib/Dialog.d.ts +2 -3
  33. package/lib/Dialog.js +4 -4
  34. package/lib/Dropdown.d.ts +0 -4
  35. package/lib/Dropdown.js +2 -2
  36. package/lib/DropdownMenu/DropdownButton.d.ts +1 -2
  37. package/lib/DropdownStyles.js +6 -6
  38. package/lib/FilterList.d.ts +0 -1
  39. package/lib/FilterList.js +1 -1
  40. package/lib/FilteredActionList/FilteredActionList.js +5 -5
  41. package/lib/Flash.js +1 -1
  42. package/lib/Label.js +2 -2
  43. package/lib/Link.js +1 -1
  44. package/lib/Overlay.d.ts +1 -2
  45. package/lib/Overlay.js +6 -11
  46. package/lib/Pagehead.js +1 -1
  47. package/lib/Pagination/Pagination.js +1 -1
  48. package/lib/Popover.js +1 -1
  49. package/lib/Position.d.ts +4 -4
  50. package/lib/ProgressBar.js +1 -1
  51. package/lib/SelectMenu/SelectMenu.d.ts +15 -337
  52. package/lib/SelectMenu/SelectMenuDivider.js +1 -1
  53. package/lib/SelectMenu/SelectMenuFilter.d.ts +1 -1
  54. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  55. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  56. package/lib/SelectMenu/SelectMenuHeader.js +2 -2
  57. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  58. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  59. package/lib/SelectMenu/SelectMenuList.js +1 -1
  60. package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  61. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  62. package/lib/SelectMenu/SelectMenuModal.js +2 -2
  63. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  64. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  65. package/lib/SelectPanel/SelectPanel.js +3 -2
  66. package/lib/SideNav.js +5 -5
  67. package/lib/StateLabel.js +1 -1
  68. package/lib/SubNav.js +1 -1
  69. package/lib/TabNav.js +2 -2
  70. package/lib/TextInput.d.ts +6 -6
  71. package/lib/TextInput.js +21 -16
  72. package/lib/Timeline.d.ts +0 -1
  73. package/lib/Timeline.js +16 -19
  74. package/lib/Tooltip.js +1 -1
  75. package/lib/UnderlineNav.js +2 -2
  76. package/lib/hooks/useOverlay.d.ts +1 -2
  77. package/lib/hooks/useOverlay.js +6 -11
  78. package/lib/index.d.ts +1 -0
  79. package/lib/index.js +14 -0
  80. package/lib/theme-preval.d.ts +12 -6
  81. package/lib/theme-preval.js +940 -0
  82. package/lib/utils/ssr.d.ts +1 -0
  83. package/lib/utils/ssr.js +19 -0
  84. package/lib/utils/testing.d.ts +1854 -0
  85. package/lib/utils/uniqueId.js +1 -0
  86. package/lib-esm/ActionList/Divider.js +1 -1
  87. package/lib-esm/ActionList/Header.js +2 -2
  88. package/lib-esm/ActionList/Item.js +14 -14
  89. package/lib-esm/ActionList/List.js +1 -1
  90. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -3
  91. package/lib-esm/Avatar.d.ts +4 -0
  92. package/lib-esm/AvatarPair.js +1 -1
  93. package/lib-esm/AvatarStack.js +1 -1
  94. package/lib-esm/BranchName.js +1 -1
  95. package/lib-esm/Breadcrumb.js +2 -2
  96. package/lib-esm/Button/Button.d.ts +0 -1
  97. package/lib-esm/Button/Button.js +1 -1
  98. package/lib-esm/Button/ButtonClose.d.ts +1 -2
  99. package/lib-esm/Button/ButtonClose.js +1 -1
  100. package/lib-esm/Button/ButtonDanger.d.ts +0 -1
  101. package/lib-esm/Button/ButtonInvisible.d.ts +0 -1
  102. package/lib-esm/Button/ButtonInvisible.js +1 -1
  103. package/lib-esm/Button/ButtonOutline.d.ts +0 -1
  104. package/lib-esm/Button/ButtonPrimary.d.ts +0 -1
  105. package/lib-esm/Button/ButtonTableList.js +1 -1
  106. package/lib-esm/CircleBadge.js +1 -1
  107. package/lib-esm/CircleOcticon.d.ts +0 -1
  108. package/lib-esm/CircleOcticon.js +1 -1
  109. package/lib-esm/CounterLabel.js +2 -2
  110. package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
  111. package/lib-esm/Dialog/Dialog.js +8 -8
  112. package/lib-esm/Dialog.d.ts +2 -3
  113. package/lib-esm/Dialog.js +4 -4
  114. package/lib-esm/Dropdown.d.ts +0 -4
  115. package/lib-esm/Dropdown.js +2 -2
  116. package/lib-esm/DropdownMenu/DropdownButton.d.ts +1 -2
  117. package/lib-esm/DropdownStyles.js +6 -6
  118. package/lib-esm/FilterList.d.ts +0 -1
  119. package/lib-esm/FilterList.js +1 -1
  120. package/lib-esm/FilteredActionList/FilteredActionList.js +5 -5
  121. package/lib-esm/Flash.js +1 -1
  122. package/lib-esm/Label.js +2 -2
  123. package/lib-esm/Link.js +1 -1
  124. package/lib-esm/Overlay.d.ts +1 -2
  125. package/lib-esm/Overlay.js +6 -9
  126. package/lib-esm/Pagehead.js +1 -1
  127. package/lib-esm/Pagination/Pagination.js +1 -1
  128. package/lib-esm/Popover.js +1 -1
  129. package/lib-esm/Position.d.ts +4 -4
  130. package/lib-esm/ProgressBar.js +1 -1
  131. package/lib-esm/SelectMenu/SelectMenu.d.ts +15 -337
  132. package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
  133. package/lib-esm/SelectMenu/SelectMenuFilter.d.ts +1 -1
  134. package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
  135. package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
  136. package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
  137. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  138. package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
  139. package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
  140. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  141. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  142. package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
  143. package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
  144. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
  145. package/lib-esm/SelectPanel/SelectPanel.js +3 -2
  146. package/lib-esm/SideNav.js +5 -5
  147. package/lib-esm/StateLabel.js +1 -1
  148. package/lib-esm/SubNav.js +1 -1
  149. package/lib-esm/TabNav.js +2 -2
  150. package/lib-esm/TextInput.d.ts +6 -6
  151. package/lib-esm/TextInput.js +22 -16
  152. package/lib-esm/Timeline.d.ts +0 -1
  153. package/lib-esm/Timeline.js +12 -17
  154. package/lib-esm/Tooltip.js +1 -1
  155. package/lib-esm/UnderlineNav.js +2 -2
  156. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  157. package/lib-esm/hooks/useOverlay.js +6 -11
  158. package/lib-esm/index.d.ts +1 -0
  159. package/lib-esm/index.js +2 -1
  160. package/lib-esm/theme-preval.d.ts +12 -6
  161. package/lib-esm/theme-preval.js +940 -0
  162. package/lib-esm/utils/ssr.d.ts +1 -0
  163. package/lib-esm/utils/ssr.js +1 -0
  164. package/lib-esm/utils/testing.d.ts +1854 -0
  165. package/lib-esm/utils/uniqueId.js +1 -0
  166. package/package.json +9 -9
  167. package/lib/Autocomplete/Autocomplete.d.ts +0 -36
  168. package/lib/Autocomplete/Autocomplete.js +0 -55
  169. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -13
  170. package/lib/Autocomplete/AutocompleteContext.js +0 -14
  171. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  172. package/lib/Autocomplete/AutocompleteInput.js +0 -128
  173. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -54
  174. package/lib/Autocomplete/AutocompleteMenu.js +0 -268
  175. package/lib/Autocomplete/index.d.ts +0 -2
  176. package/lib/Autocomplete/index.js +0 -15
  177. package/lib/Badge/Badge.d.ts +0 -8
  178. package/lib/Badge/Badge.js +0 -59
  179. package/lib/Badge/BadgeState.d.ts +0 -13
  180. package/lib/Badge/BadgeState.js +0 -51
  181. package/lib/Badge/_badgeStyleUtils.d.ts +0 -3
  182. package/lib/Badge/_badgeStyleUtils.js +0 -39
  183. package/lib/TextInputTokens.d.ts +0 -32
  184. package/lib/TextInputTokens.js +0 -241
  185. package/lib/TextInputWithTokens.d.ts +0 -41
  186. package/lib/TextInputWithTokens.js +0 -396
  187. package/lib/Token/Token.d.ts +0 -7
  188. package/lib/Token/Token.js +0 -69
  189. package/lib/Token/TokenBase.d.ts +0 -16
  190. package/lib/Token/TokenBase.js +0 -76
  191. package/lib/Token/TokenLabel.d.ts +0 -10
  192. package/lib/Token/TokenLabel.js +0 -115
  193. package/lib/Token/TokenProfile.d.ts +0 -7
  194. package/lib/Token/TokenProfile.js +0 -45
  195. package/lib/Token/_AddTokenButton.d.ts +0 -3
  196. package/lib/Token/_AddTokenButton.js +0 -42
  197. package/lib/Token/_RemoveTokenButton.d.ts +0 -3
  198. package/lib/Token/_RemoveTokenButton.js +0 -42
  199. package/lib/Token/_tokenButtonUtils.d.ts +0 -8
  200. package/lib/Token/_tokenButtonUtils.js +0 -42
  201. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -36
  202. package/lib-esm/Autocomplete/Autocomplete.js +0 -36
  203. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -13
  204. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -5
  205. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  206. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -109
  207. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -54
  208. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -244
  209. package/lib-esm/Autocomplete/index.d.ts +0 -2
  210. package/lib-esm/Autocomplete/index.js +0 -1
  211. package/lib-esm/Badge/Badge.d.ts +0 -8
  212. package/lib-esm/Badge/Badge.js +0 -44
  213. package/lib-esm/Badge/BadgeState.d.ts +0 -13
  214. package/lib-esm/Badge/BadgeState.js +0 -40
  215. package/lib-esm/Badge/_badgeStyleUtils.d.ts +0 -3
  216. package/lib-esm/Badge/_badgeStyleUtils.js +0 -29
  217. package/lib-esm/TextInputTokens.d.ts +0 -32
  218. package/lib-esm/TextInputTokens.js +0 -211
  219. package/lib-esm/TextInputWithTokens.d.ts +0 -41
  220. package/lib-esm/TextInputWithTokens.js +0 -361
  221. package/lib-esm/Token/Token.d.ts +0 -7
  222. package/lib-esm/Token/Token.js +0 -49
  223. package/lib-esm/Token/TokenBase.d.ts +0 -16
  224. package/lib-esm/Token/TokenBase.js +0 -56
  225. package/lib-esm/Token/TokenLabel.d.ts +0 -10
  226. package/lib-esm/Token/TokenLabel.js +0 -99
  227. package/lib-esm/Token/TokenProfile.d.ts +0 -7
  228. package/lib-esm/Token/TokenProfile.js +0 -28
  229. package/lib-esm/Token/_AddTokenButton.d.ts +0 -3
  230. package/lib-esm/Token/_AddTokenButton.js +0 -27
  231. package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -3
  232. package/lib-esm/Token/_RemoveTokenButton.js +0 -27
  233. package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -8
  234. package/lib-esm/Token/_tokenButtonUtils.js +0 -26
@@ -1,115 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
- var _TokenBase = _interopRequireDefault(require("./TokenBase"));
13
-
14
- var _RemoveTokenButton = _interopRequireDefault(require("./_RemoveTokenButton"));
15
-
16
- var _tinycolor = _interopRequireDefault(require("tinycolor2"));
17
-
18
- var _ThemeProvider = require("../ThemeProvider");
19
-
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
- 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); }
23
-
24
- const colorModeConfig = {
25
- dark: {
26
- bgOpacity: 0.18,
27
- borderThreshold: 0,
28
- borderOpacity: 0.3,
29
- lightnessThreshold: 0.6
30
- },
31
- light: {
32
- bgOpacity: 1,
33
- borderThreshold: 0.96,
34
- borderOpacity: 1,
35
- lightnessThreshold: 0.453
36
- }
37
- };
38
- const tokenBorderWidthPx = 1; // TODO: do a nicer `isSelected` style
39
-
40
- const StyledTokenLabel = (0, _styledComponents.default)(_TokenBase.default).withConfig({
41
- displayName: "TokenLabel__StyledTokenLabel",
42
- componentId: "sc-1bdmgzv-0"
43
- })(["background-color:", ";border-width:", "px;border-style:solid;border-color:", ";box-shadow:", ";color:", ";overflow:hidden;padding-right:", ";position:relative;> ._TokenButton{color:currentColor;transform:translate(", "px,-", "px);}"], props => props.bgColor, tokenBorderWidthPx, props => props.borderColor, props => props.isSelected ? `0 0 0 2px ${props.bgColor}` : undefined, props => props.textColor, props => props.handleRemove ? 0 : undefined, tokenBorderWidthPx, tokenBorderWidthPx); // TODO: make this text truncate
44
-
45
- const TokenTextContainer = (0, _styledComponents.default)('span').withConfig({
46
- displayName: "TokenLabel__TokenTextContainer",
47
- componentId: "sc-1bdmgzv-1"
48
- })(["white-space:nowrap;z-index:1;"]);
49
-
50
- const TokenLabel = ({
51
- fillColor,
52
- isSelected,
53
- ...tokenBaseProps
54
- }) => {
55
- const {
56
- handleRemove,
57
- text,
58
- as,
59
- variant
60
- } = tokenBaseProps;
61
- const {
62
- colorScheme
63
- } = (0, _ThemeProvider.useTheme)(); // const colorScheme = 'dark';
64
-
65
- const {
66
- bgOpacity,
67
- borderOpacity,
68
- borderThreshold,
69
- lightnessThreshold
70
- } = colorModeConfig[colorScheme || 'light'];
71
- let bgColor = fillColor;
72
- let borderColor = fillColor;
73
- let textColor = '#FFF';
74
- const perceivedLightness = (0, _tinycolor.default)(fillColor).getLuminance();
75
- const isFillColorLight = perceivedLightness >= lightnessThreshold;
76
-
77
- if (colorScheme === 'dark') {
78
- const lightenBy = (perceivedLightness - lightnessThreshold) * 100 * (isFillColorLight ? 1 : 0);
79
- bgColor = isSelected ? (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity * 1.2).toRgbString() : (0, _tinycolor.default)(fillColor).setAlpha(bgOpacity).toRgbString();
80
- textColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy + 8).toString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).toString();
81
- borderColor = isSelected ? (0, _tinycolor.default)(fillColor).lighten(lightenBy).toRgbString() : (0, _tinycolor.default)(fillColor).lighten(lightenBy).setAlpha(borderOpacity).toRgbString();
82
- } else {
83
- const isFillColorDark = perceivedLightness < 0.1;
84
- borderColor = perceivedLightness >= borderThreshold ? (0, _tinycolor.default)(fillColor).darken(25).toString() : 'transparent';
85
-
86
- if (isFillColorLight) {
87
- textColor = '#000';
88
- }
89
-
90
- if (isSelected) {
91
- bgColor = isFillColorDark ? (0, _tinycolor.default)(fillColor).lighten(10).toString() : (0, _tinycolor.default)(fillColor).darken(10).toString();
92
- }
93
- }
94
-
95
- return /*#__PURE__*/_react.default.createElement(StyledTokenLabel, _extends({
96
- fillColor: fillColor,
97
- bgColor: bgColor,
98
- borderColor: borderColor,
99
- textColor: textColor,
100
- isSelected: isSelected
101
- }, tokenBaseProps), /*#__PURE__*/_react.default.createElement(TokenTextContainer, null, text), handleRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
102
- parentTokenTag: as || 'span',
103
- tabIndex: -1,
104
- onClick: handleRemove,
105
- variant: variant
106
- }) : null);
107
- };
108
-
109
- TokenLabel.displayName = "TokenLabel";
110
- TokenLabel.defaultProps = {
111
- fillColor: '#999' // TODO: pick a real color
112
-
113
- };
114
- var _default = TokenLabel;
115
- exports.default = _default;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { TokenBaseProps } from './TokenBase';
3
- interface Props extends TokenBaseProps {
4
- avatarSrc: string;
5
- }
6
- declare const TokenProfile: React.FC<Props>;
7
- export default TokenProfile;
@@ -1,45 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
- var _constants = require("../constants");
13
-
14
- var _primitives = _interopRequireDefault(require("@primer/primitives"));
15
-
16
- var _TokenBase = require("./TokenBase");
17
-
18
- var _Token = _interopRequireDefault(require("./Token"));
19
-
20
- var _ = require("..");
21
-
22
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
-
24
- 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); }
25
-
26
- const StyledToken = (0, _styledComponents.default)(_Token.default).withConfig({
27
- displayName: "TokenProfile__StyledToken",
28
- componentId: "sc-1vf9jhf-0"
29
- })(["padding-left:", ";"], (0, _constants.get)('space.1')); // ${get('space.1')}
30
-
31
- const TokenProfile = ({
32
- avatarSrc,
33
- variant,
34
- ...rest
35
- }) => /*#__PURE__*/_react.default.createElement(StyledToken, _extends({
36
- leadingVisual: () => /*#__PURE__*/_react.default.createElement(_.Avatar, {
37
- src: avatarSrc,
38
- size: _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] - parseInt(_primitives.default.spacing.normal.spacer[1], 10) * 2
39
- }),
40
- variant: variant
41
- }, rest));
42
-
43
- TokenProfile.displayName = "TokenProfile";
44
- var _default = TokenProfile;
45
- exports.default = _default;
@@ -1,3 +0,0 @@
1
- import { TokenButtonProps } from './_tokenButtonUtils';
2
- declare const AddTokenButton: import("styled-components").StyledComponent<"span", any, TokenButtonProps, never>;
3
- export default AddTokenButton;
@@ -1,42 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _octiconsReact = require("@primer/octicons-react");
9
-
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
- var _TokenBase = require("./TokenBase");
13
-
14
- var _tokenButtonUtils = require("./_tokenButtonUtils");
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- const AddTokenButton = _styledComponents.default.span.attrs(({
19
- parentTokenTag,
20
- variant,
21
- ...rest
22
- }) => {
23
- delete rest.children;
24
- return {
25
- as: parentTokenTag === 'span' ? 'button' : 'span',
26
- tabIndex: -1,
27
- className: '_TokenButton',
28
- children: /*#__PURE__*/React.createElement(_octiconsReact.PlusIcon, {
29
- size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
30
- }) // TODO: figure out how to set `size` using `fontSizes` from Primitives
31
-
32
- };
33
- }).withConfig({
34
- displayName: "_AddTokenButton__AddTokenButton",
35
- componentId: "elcc0o-0"
36
- })(["", " ", ""], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants);
37
-
38
- AddTokenButton.defaultProps = {
39
- variant: _TokenBase.defaultTokenSize
40
- };
41
- var _default = AddTokenButton;
42
- exports.default = _default;
@@ -1,3 +0,0 @@
1
- import { TokenButtonProps } from './_tokenButtonUtils';
2
- declare const RemoveTokenButton: import("styled-components").StyledComponent<"span", any, TokenButtonProps, never>;
3
- export default RemoveTokenButton;
@@ -1,42 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _octiconsReact = require("@primer/octicons-react");
9
-
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
- var _TokenBase = require("./TokenBase");
13
-
14
- var _tokenButtonUtils = require("./_tokenButtonUtils");
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- const RemoveTokenButton = _styledComponents.default.span.attrs(({
19
- parentTokenTag,
20
- variant,
21
- ...rest
22
- }) => {
23
- delete rest.children;
24
- return {
25
- as: parentTokenTag === 'span' ? 'button' : 'span',
26
- tabIndex: -1,
27
- className: '_TokenButton',
28
- children: /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
29
- size: (0, _tokenButtonUtils.getTokenButtonIconSize)(variant)
30
- }) // TODO: figure out how to set `size` using `fontSizes` from Primitives
31
-
32
- };
33
- }).withConfig({
34
- displayName: "_RemoveTokenButton__RemoveTokenButton",
35
- componentId: "sc-14lvcw1-0"
36
- })(["", " ", ""], _tokenButtonUtils.tokenButtonStyles, _tokenButtonUtils.variants);
37
-
38
- RemoveTokenButton.defaultProps = {
39
- variant: _TokenBase.defaultTokenSize
40
- };
41
- var _default = RemoveTokenButton;
42
- exports.default = _default;
@@ -1,8 +0,0 @@
1
- import { TokenSizeKeys } from "./TokenBase";
2
- export interface TokenButtonProps {
3
- parentTokenTag: 'span' | 'button' | 'a';
4
- variant?: TokenSizeKeys;
5
- }
6
- export declare const variants: (...args: any[]) => any;
7
- export declare const tokenButtonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
8
- export declare const getTokenButtonIconSize: (variant?: TokenSizeKeys | undefined) => number;
@@ -1,42 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.getTokenButtonIconSize = exports.tokenButtonStyles = exports.variants = void 0;
7
-
8
- var _styledComponents = require("styled-components");
9
-
10
- var _styledSystem = require("styled-system");
11
-
12
- var _constants = require("../constants");
13
-
14
- var _TokenBase = require("./TokenBase");
15
-
16
- const variants = (0, _styledSystem.variant)({
17
- variants: {
18
- sm: {
19
- height: `${_TokenBase.tokenSizes.sm}px`,
20
- width: `${_TokenBase.tokenSizes.sm}px`
21
- },
22
- md: {
23
- height: `${_TokenBase.tokenSizes.md}px`,
24
- width: `${_TokenBase.tokenSizes.md}px`
25
- },
26
- lg: {
27
- height: `${_TokenBase.tokenSizes.lg}px`,
28
- width: `${_TokenBase.tokenSizes.lg}px`
29
- },
30
- xl: {
31
- height: `${_TokenBase.tokenSizes.xl}px`,
32
- width: `${_TokenBase.tokenSizes.xl}px`
33
- }
34
- }
35
- });
36
- exports.variants = variants;
37
- const tokenButtonStyles = (0, _styledComponents.css)(["background-color:transparent;font-family:inherit;cursor:pointer;user-select:none;appearance:none;text-decoration:none;padding:0;align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}"], (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'));
38
- exports.tokenButtonStyles = tokenButtonStyles;
39
-
40
- const getTokenButtonIconSize = variant => _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] * 0.75;
41
-
42
- exports.getTokenButtonIconSize = getTokenButtonIconSize;
@@ -1,36 +0,0 @@
1
- import React from 'react';
2
- import { ComponentProps } from '../utils/types';
3
- declare const Autocomplete: React.FC;
4
- export declare type AutocompleteProps = ComponentProps<typeof Autocomplete>;
5
- export type { AutocompleteInputProps } from './AutocompleteInput';
6
- export type { AutocompleteMenuProps } from './AutocompleteMenu';
7
- declare const _default: React.FC<{}> & {
8
- AutocompleteContext: React.Context<{
9
- activeDescendantRef?: React.MutableRefObject<HTMLElement | null> | undefined;
10
- autocompleteSuggestion?: string | undefined;
11
- inputRef?: React.MutableRefObject<HTMLInputElement | null> | undefined;
12
- inputValue?: string | undefined;
13
- showMenu?: boolean | undefined;
14
- setAutocompleteSuggestion?: React.Dispatch<React.SetStateAction<string>> | undefined;
15
- setShowMenu?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
16
- setInputValue?: React.Dispatch<React.SetStateAction<string>> | undefined;
17
- isMenuDirectlyActivated?: boolean | undefined;
18
- setIsMenuDirectlyActivated?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
19
- }>;
20
- Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<"input", {
21
- as?: React.ComponentType<any> | undefined;
22
- }>;
23
- Menu: React.ForwardRefExoticComponent<{
24
- addNewItem?: Omit<import("../ActionList/List").ItemInput, "onAction"> | undefined;
25
- emptyStateText?: React.ReactNode;
26
- filterFn?: ((item: import("../ActionList/List").ItemInput, i: number) => boolean) | undefined;
27
- items: import("../ActionList/List").ItemInput[];
28
- onItemDeselect?: ((item: import("../ActionList").ItemProps, event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
29
- onItemSelect?: ((item: import("../ActionList").ItemProps, event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
30
- loading?: boolean | undefined;
31
- selectedItemIds: (string | number)[];
32
- selectedSortFn?: ((itemIdA: string | number, itemIdB: string | number) => number) | undefined;
33
- selectionVariant?: "multiple" | "single" | undefined;
34
- } & Pick<import("..").OverlayProps, "height" | "maxHeight" | "width"> & React.RefAttributes<HTMLInputElement>>;
35
- };
36
- export default _default;
@@ -1,36 +0,0 @@
1
- import React, { useRef, useState } from 'react';
2
- import { AutocompleteContext } from './AutocompleteContext';
3
- import AutocompleteInput from './AutocompleteInput';
4
- import AutocompleteMenu from './AutocompleteMenu';
5
-
6
- const Autocomplete = ({
7
- children
8
- }) => {
9
- const activeDescendantRef = useRef(null);
10
- const inputRef = useRef(null);
11
- const [inputValue, setInputValue] = useState('');
12
- const [showMenu, setShowMenu] = useState(false);
13
- const [autocompleteSuggestion, setAutocompleteSuggestion] = useState('');
14
- const [isMenuDirectlyActivated, setIsMenuDirectlyActivated] = useState(false);
15
- return /*#__PURE__*/React.createElement(AutocompleteContext.Provider, {
16
- value: {
17
- activeDescendantRef,
18
- autocompleteSuggestion,
19
- inputRef,
20
- inputValue,
21
- isMenuDirectlyActivated,
22
- setAutocompleteSuggestion,
23
- setInputValue,
24
- setIsMenuDirectlyActivated,
25
- setShowMenu,
26
- showMenu
27
- }
28
- }, children);
29
- };
30
-
31
- Autocomplete.displayName = "Autocomplete";
32
- export default Object.assign(Autocomplete, {
33
- AutocompleteContext,
34
- Input: AutocompleteInput,
35
- Menu: AutocompleteMenu
36
- });
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const AutocompleteContext: import("react").Context<{
3
- activeDescendantRef?: import("react").MutableRefObject<HTMLElement | null> | undefined;
4
- autocompleteSuggestion?: string | undefined;
5
- inputRef?: import("react").MutableRefObject<HTMLInputElement | null> | undefined;
6
- inputValue?: string | undefined;
7
- showMenu?: boolean | undefined;
8
- setAutocompleteSuggestion?: import("react").Dispatch<import("react").SetStateAction<string>> | undefined;
9
- setShowMenu?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
10
- setInputValue?: import("react").Dispatch<import("react").SetStateAction<string>> | undefined;
11
- isMenuDirectlyActivated?: boolean | undefined;
12
- setIsMenuDirectlyActivated?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
13
- }>;
@@ -1,5 +0,0 @@
1
- import { createContext } from 'react'; // TODO:
2
- // - figure out how we can make all of these properties required without having to define them when calling `createContext`
3
- // - figure out how we can reduce the number of properties that need to be passed
4
-
5
- export const AutocompleteContext = /*#__PURE__*/createContext({});
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import type * as Polymorphic from "@radix-ui/react-polymorphic";
3
- import { ComponentProps } from '../utils/types';
4
- declare type InternalAutocompleteInputProps = {
5
- as?: React.ComponentType<any>;
6
- };
7
- declare const AutocompleteInput: Polymorphic.ForwardRefComponent<"input", InternalAutocompleteInputProps>;
8
- export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
9
- export default AutocompleteInput;
@@ -1,109 +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, { useCallback, useContext, useEffect, useState } from 'react';
4
- import { AutocompleteContext } from './AutocompleteContext';
5
- import TextInput from '../TextInput';
6
- import { useCombinedRefs } from '../hooks/useCombinedRefs';
7
- const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
8
- as: Component = TextInput,
9
- onFocus,
10
- onChange,
11
- onKeyDown,
12
- onKeyPress,
13
- value,
14
- ...props
15
- }, forwardedRef) => {
16
- const {
17
- activeDescendantRef,
18
- autocompleteSuggestion = '',
19
- inputRef,
20
- inputValue = '',
21
- isMenuDirectlyActivated,
22
- setInputValue,
23
- setShowMenu,
24
- showMenu
25
- } = useContext(AutocompleteContext);
26
- const combinedInputRef = useCombinedRefs(inputRef, forwardedRef);
27
- const [highlightRemainingText, setHighlightRemainingText] = useState(true);
28
-
29
- const handleInputFocus = () => {
30
- if (setShowMenu) {
31
- setShowMenu(true);
32
- }
33
- };
34
-
35
- const handleInputBlur = e => {
36
- // HACK: wait a tick and check the focused element before hiding the autocomplete menu
37
- // this prevents the menu from hiding when the user is clicking an option in the Autoselect.Menu,
38
- // but still hides the menu when the user blurs the input by tabbing out or clicking somewhere else on the page
39
- setTimeout(() => {
40
- if (setShowMenu && document.activeElement !== combinedInputRef.current) {
41
- setShowMenu(false);
42
- }
43
- }, 0);
44
- };
45
-
46
- const handleInputChange = e => {
47
- if (setInputValue) {
48
- setInputValue(e.currentTarget.value);
49
- }
50
-
51
- if (setShowMenu && !showMenu) {
52
- setShowMenu(true);
53
- }
54
- };
55
-
56
- const handleInputKeyDown = e => {
57
- if (e.key === 'Backspace') {
58
- setHighlightRemainingText(false);
59
- }
60
- };
61
-
62
- const handleInputKeyUp = e => {
63
- if (e.key === 'Backspace') {
64
- setHighlightRemainingText(true);
65
- }
66
- };
67
-
68
- const onInputKeyPress = useCallback(event => {
69
- if (activeDescendantRef && event.key === 'Enter' && activeDescendantRef.current) {
70
- event.preventDefault();
71
- event.nativeEvent.stopImmediatePropagation(); // Forward Enter key press to active descendant so that item gets activated
72
-
73
- const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
74
- activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
75
- }
76
- }, [activeDescendantRef]);
77
- useEffect(() => {
78
- if (!(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
79
- return;
80
- }
81
-
82
- if (!autocompleteSuggestion) {
83
- inputRef.current.value = inputValue;
84
- }
85
-
86
- if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
87
- inputRef.current.value = autocompleteSuggestion;
88
-
89
- if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
90
- inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
91
- }
92
- }
93
- }, [autocompleteSuggestion, inputValue]);
94
- useEffect(() => {
95
- if (value && setInputValue) {
96
- setInputValue(value.toString());
97
- }
98
- }, [value]);
99
- return /*#__PURE__*/React.createElement(Component, _extends({
100
- onFocus: handleInputFocus,
101
- onBlur: handleInputBlur,
102
- onChange: handleInputChange,
103
- onKeyDown: handleInputKeyDown,
104
- onKeyPress: onInputKeyPress,
105
- onKeyUp: handleInputKeyUp,
106
- ref: combinedInputRef
107
- }, props));
108
- });
109
- export default AutocompleteInput;
@@ -1,54 +0,0 @@
1
- import React from 'react';
2
- import { ItemProps } from '../ActionList';
3
- import { ItemInput } from '../ActionList/List';
4
- import { OverlayProps } from '../Overlay';
5
- import { ComponentProps } from '../utils/types';
6
- declare type AutocompleteMenuInternalProps = {
7
- /**
8
- * A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop.
9
- * This menu item gets appended to the end of the list of options.
10
- */
11
- addNewItem?: Omit<ItemInput, 'onAction'>;
12
- /**
13
- * The text that appears in the menu when there are no options in the array passed to the `items` prop.
14
- */
15
- emptyStateText?: React.ReactNode | false;
16
- /**
17
- * A custom function used to filter the options in the array passed to the `items` prop.
18
- * By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive.
19
- */
20
- filterFn?: (item: ItemInput, i: number) => boolean;
21
- /**
22
- * The options for field values that are displayed in the dropdown menu.
23
- * One or more may be selected depending on the value of the `selectionVariant` prop.
24
- */
25
- items: ItemInput[];
26
- /**
27
- * The function that is called when an item in the list is de-selected
28
- */
29
- onItemDeselect?: NonNullable<ItemProps['onAction']>;
30
- /**
31
- * The function that is called when an item in the list is selected
32
- */
33
- onItemSelect?: NonNullable<ItemProps['onAction']>;
34
- /**
35
- * Whether the data is loaded for the menu items
36
- */
37
- loading?: boolean;
38
- /**
39
- * The IDs of the selected items
40
- */
41
- selectedItemIds: Array<string | number>;
42
- /**
43
- * The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu.
44
- * By default, selected items are sorted to the top after the user closes the menu.
45
- */
46
- selectedSortFn?: (itemIdA: string | number, itemIdB: string | number) => number;
47
- /**
48
- * Whether there can be one item selected from the menu or multiple items selected from the menu
49
- */
50
- selectionVariant?: 'single' | 'multiple';
51
- };
52
- declare const AutocompleteMenu: React.ForwardRefExoticComponent<AutocompleteMenuInternalProps & Pick<OverlayProps, "height" | "maxHeight" | "width"> & React.RefAttributes<HTMLInputElement>>;
53
- export declare type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>;
54
- export default AutocompleteMenu;