@primer/components 0.0.0-2021821193917 → 0.0.0-2021823142332

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 (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;