@primer/components 0.0.0-2021828205225 → 0.0.0-2021828205354

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 (256) hide show
  1. package/CHANGELOG.md +44 -2
  2. package/dist/browser.esm.js +663 -629
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +427 -393
  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 +14 -14
  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/Breadcrumbs.d.ts +40 -0
  16. package/lib/{Breadcrumb.js → Breadcrumbs.js} +33 -23
  17. package/lib/Button/Button.d.ts +2 -4
  18. package/lib/Button/Button.js +2 -6
  19. package/lib/Button/ButtonBase.d.ts +5 -8
  20. package/lib/Button/ButtonBase.js +1 -5
  21. package/lib/Button/ButtonClose.d.ts +2 -46
  22. package/lib/Button/ButtonClose.js +1 -1
  23. package/lib/Button/ButtonDanger.d.ts +2 -4
  24. package/lib/Button/ButtonDanger.js +2 -6
  25. package/lib/Button/ButtonInvisible.d.ts +2 -4
  26. package/lib/Button/ButtonInvisible.js +2 -6
  27. package/lib/Button/ButtonOutline.d.ts +2 -4
  28. package/lib/Button/ButtonOutline.js +2 -6
  29. package/lib/Button/ButtonPrimary.d.ts +2 -4
  30. package/lib/Button/ButtonPrimary.js +2 -6
  31. package/lib/Button/ButtonTableList.d.ts +1 -2
  32. package/lib/Button/ButtonTableList.js +1 -1
  33. package/lib/CircleBadge.js +1 -1
  34. package/lib/CircleOcticon.d.ts +0 -1
  35. package/lib/CircleOcticon.js +1 -1
  36. package/lib/CounterLabel.js +2 -2
  37. package/lib/Dialog/ConfirmationDialog.js +1 -1
  38. package/lib/Dialog/Dialog.js +9 -9
  39. package/lib/Dialog.d.ts +2 -3
  40. package/lib/Dialog.js +4 -4
  41. package/lib/Dropdown.d.ts +2 -94
  42. package/lib/Dropdown.js +2 -2
  43. package/lib/DropdownMenu/DropdownButton.d.ts +2 -47
  44. package/lib/DropdownStyles.js +6 -6
  45. package/lib/FilterList.d.ts +0 -1
  46. package/lib/FilterList.js +1 -1
  47. package/lib/FilteredActionList/FilteredActionList.js +34 -8
  48. package/lib/Flash.js +1 -1
  49. package/lib/Label.js +2 -2
  50. package/lib/Link.js +1 -1
  51. package/lib/Overlay.d.ts +1 -2
  52. package/lib/Overlay.js +6 -11
  53. package/lib/Pagehead.js +1 -1
  54. package/lib/Pagination/Pagination.js +1 -1
  55. package/lib/Popover.js +1 -1
  56. package/lib/Position.d.ts +4 -4
  57. package/lib/ProgressBar.js +1 -1
  58. package/lib/SelectMenu/SelectMenu.d.ts +15 -344
  59. package/lib/SelectMenu/SelectMenuDivider.js +1 -1
  60. package/lib/SelectMenu/SelectMenuFilter.d.ts +1 -1
  61. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  62. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  63. package/lib/SelectMenu/SelectMenuHeader.js +2 -2
  64. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  65. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  66. package/lib/SelectMenu/SelectMenuList.js +1 -1
  67. package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  68. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  69. package/lib/SelectMenu/SelectMenuModal.js +2 -2
  70. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  71. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  72. package/lib/SelectPanel/SelectPanel.js +3 -2
  73. package/lib/SideNav.js +5 -5
  74. package/lib/StateLabel.js +1 -1
  75. package/lib/SubNav.js +1 -1
  76. package/lib/TabNav.js +2 -2
  77. package/lib/TextInput.d.ts +7 -10
  78. package/lib/TextInput.js +29 -24
  79. package/lib/Timeline.d.ts +0 -1
  80. package/lib/Timeline.js +16 -19
  81. package/lib/Tooltip.js +1 -1
  82. package/lib/UnderlineNav.js +2 -2
  83. package/lib/hooks/useOverlay.d.ts +1 -2
  84. package/lib/hooks/useOverlay.js +6 -11
  85. package/lib/index.d.ts +3 -2
  86. package/lib/index.js +22 -2
  87. package/lib/theme-preval.d.ts +12 -6
  88. package/lib/theme-preval.js +940 -0
  89. package/lib/utils/ssr.d.ts +1 -0
  90. package/lib/utils/ssr.js +19 -0
  91. package/lib/utils/testing.d.ts +1854 -1
  92. package/lib/utils/types.d.ts +0 -3
  93. package/lib/utils/uniqueId.js +1 -0
  94. package/lib-esm/ActionList/Divider.js +1 -1
  95. package/lib-esm/ActionList/Header.js +2 -2
  96. package/lib-esm/ActionList/Item.js +15 -15
  97. package/lib-esm/ActionList/List.js +1 -1
  98. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -3
  99. package/lib-esm/Avatar.d.ts +4 -0
  100. package/lib-esm/AvatarPair.js +1 -1
  101. package/lib-esm/AvatarStack.js +1 -1
  102. package/lib-esm/BranchName.js +1 -1
  103. package/lib-esm/Breadcrumbs.d.ts +40 -0
  104. package/lib-esm/{Breadcrumb.js → Breadcrumbs.js} +30 -21
  105. package/lib-esm/Button/Button.d.ts +2 -4
  106. package/lib-esm/Button/Button.js +2 -2
  107. package/lib-esm/Button/ButtonBase.d.ts +5 -8
  108. package/lib-esm/Button/ButtonBase.js +1 -3
  109. package/lib-esm/Button/ButtonClose.d.ts +2 -46
  110. package/lib-esm/Button/ButtonClose.js +2 -2
  111. package/lib-esm/Button/ButtonDanger.d.ts +2 -4
  112. package/lib-esm/Button/ButtonDanger.js +2 -2
  113. package/lib-esm/Button/ButtonInvisible.d.ts +2 -4
  114. package/lib-esm/Button/ButtonInvisible.js +2 -2
  115. package/lib-esm/Button/ButtonOutline.d.ts +2 -4
  116. package/lib-esm/Button/ButtonOutline.js +2 -2
  117. package/lib-esm/Button/ButtonPrimary.d.ts +2 -4
  118. package/lib-esm/Button/ButtonPrimary.js +2 -2
  119. package/lib-esm/Button/ButtonTableList.d.ts +1 -2
  120. package/lib-esm/Button/ButtonTableList.js +2 -2
  121. package/lib-esm/CircleBadge.js +1 -1
  122. package/lib-esm/CircleOcticon.d.ts +0 -1
  123. package/lib-esm/CircleOcticon.js +1 -1
  124. package/lib-esm/CounterLabel.js +2 -2
  125. package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
  126. package/lib-esm/Dialog/Dialog.js +8 -8
  127. package/lib-esm/Dialog.d.ts +2 -3
  128. package/lib-esm/Dialog.js +4 -4
  129. package/lib-esm/Dropdown.d.ts +2 -94
  130. package/lib-esm/Dropdown.js +2 -2
  131. package/lib-esm/DropdownMenu/DropdownButton.d.ts +2 -47
  132. package/lib-esm/DropdownStyles.js +6 -6
  133. package/lib-esm/FilterList.d.ts +0 -1
  134. package/lib-esm/FilterList.js +1 -1
  135. package/lib-esm/FilteredActionList/FilteredActionList.js +34 -6
  136. package/lib-esm/Flash.js +1 -1
  137. package/lib-esm/Label.js +2 -2
  138. package/lib-esm/Link.js +1 -1
  139. package/lib-esm/Overlay.d.ts +1 -2
  140. package/lib-esm/Overlay.js +6 -9
  141. package/lib-esm/Pagehead.js +1 -1
  142. package/lib-esm/Pagination/Pagination.js +1 -1
  143. package/lib-esm/Popover.js +1 -1
  144. package/lib-esm/Position.d.ts +4 -4
  145. package/lib-esm/ProgressBar.js +1 -1
  146. package/lib-esm/SelectMenu/SelectMenu.d.ts +15 -344
  147. package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
  148. package/lib-esm/SelectMenu/SelectMenuFilter.d.ts +1 -1
  149. package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
  150. package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
  151. package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
  152. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  153. package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
  154. package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
  155. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  156. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  157. package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
  158. package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
  159. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
  160. package/lib-esm/SelectPanel/SelectPanel.js +3 -2
  161. package/lib-esm/SideNav.js +5 -5
  162. package/lib-esm/StateLabel.js +1 -1
  163. package/lib-esm/SubNav.js +1 -1
  164. package/lib-esm/TabNav.js +2 -2
  165. package/lib-esm/TextInput.d.ts +7 -10
  166. package/lib-esm/TextInput.js +29 -23
  167. package/lib-esm/Timeline.d.ts +0 -1
  168. package/lib-esm/Timeline.js +12 -17
  169. package/lib-esm/Tooltip.js +1 -1
  170. package/lib-esm/UnderlineNav.js +2 -2
  171. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  172. package/lib-esm/hooks/useOverlay.js +6 -11
  173. package/lib-esm/index.d.ts +3 -2
  174. package/lib-esm/index.js +3 -2
  175. package/lib-esm/theme-preval.d.ts +12 -6
  176. package/lib-esm/theme-preval.js +940 -0
  177. package/lib-esm/utils/ssr.d.ts +1 -0
  178. package/lib-esm/utils/ssr.js +1 -0
  179. package/lib-esm/utils/testing.d.ts +1854 -1
  180. package/lib-esm/utils/types.d.ts +0 -3
  181. package/lib-esm/utils/uniqueId.js +1 -0
  182. package/package.json +14 -14
  183. package/lib/Autocomplete/Autocomplete.d.ts +0 -26
  184. package/lib/Autocomplete/Autocomplete.js +0 -55
  185. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -13
  186. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  187. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  188. package/lib/Autocomplete/AutocompleteInput.js +0 -134
  189. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -70
  190. package/lib/Autocomplete/AutocompleteMenu.js +0 -244
  191. package/lib/Autocomplete/index.d.ts +0 -2
  192. package/lib/Autocomplete/index.js +0 -15
  193. package/lib/Badge/Badge.d.ts +0 -8
  194. package/lib/Badge/Badge.js +0 -59
  195. package/lib/Badge/BadgeState.d.ts +0 -13
  196. package/lib/Badge/BadgeState.js +0 -51
  197. package/lib/Badge/_badgeStyleUtils.d.ts +0 -3
  198. package/lib/Badge/_badgeStyleUtils.js +0 -39
  199. package/lib/Breadcrumb.d.ts +0 -23
  200. package/lib/TextInputTokens.d.ts +0 -43
  201. package/lib/TextInputTokens.js +0 -231
  202. package/lib/TextInputWithTokens.d.ts +0 -41
  203. package/lib/TextInputWithTokens.js +0 -396
  204. package/lib/Token/Token.d.ts +0 -10
  205. package/lib/Token/Token.js +0 -63
  206. package/lib/Token/TokenBase.d.ts +0 -16
  207. package/lib/Token/TokenBase.js +0 -76
  208. package/lib/Token/TokenLabel.d.ts +0 -10
  209. package/lib/Token/TokenLabel.js +0 -121
  210. package/lib/Token/TokenProfile.d.ts +0 -7
  211. package/lib/Token/TokenProfile.js +0 -50
  212. package/lib/Token/_RemoveTokenButton.d.ts +0 -3
  213. package/lib/Token/_RemoveTokenButton.js +0 -43
  214. package/lib/Token/_tokenButtonUtils.d.ts +0 -9
  215. package/lib/Token/_tokenButtonUtils.js +0 -42
  216. package/lib/_UnstyledTextInput.d.ts +0 -2
  217. package/lib/_UnstyledTextInput.js +0 -20
  218. package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
  219. package/lib/utils/scrollIntoViewingArea.js +0 -39
  220. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -26
  221. package/lib-esm/Autocomplete/Autocomplete.js +0 -36
  222. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -13
  223. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  224. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  225. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -115
  226. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -70
  227. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -218
  228. package/lib-esm/Autocomplete/index.d.ts +0 -2
  229. package/lib-esm/Autocomplete/index.js +0 -1
  230. package/lib-esm/Badge/Badge.d.ts +0 -8
  231. package/lib-esm/Badge/Badge.js +0 -44
  232. package/lib-esm/Badge/BadgeState.d.ts +0 -13
  233. package/lib-esm/Badge/BadgeState.js +0 -40
  234. package/lib-esm/Badge/_badgeStyleUtils.d.ts +0 -3
  235. package/lib-esm/Badge/_badgeStyleUtils.js +0 -29
  236. package/lib-esm/Breadcrumb.d.ts +0 -23
  237. package/lib-esm/TextInputTokens.d.ts +0 -43
  238. package/lib-esm/TextInputTokens.js +0 -204
  239. package/lib-esm/TextInputWithTokens.d.ts +0 -41
  240. package/lib-esm/TextInputWithTokens.js +0 -361
  241. package/lib-esm/Token/Token.d.ts +0 -10
  242. package/lib-esm/Token/Token.js +0 -44
  243. package/lib-esm/Token/TokenBase.d.ts +0 -16
  244. package/lib-esm/Token/TokenBase.js +0 -56
  245. package/lib-esm/Token/TokenLabel.d.ts +0 -10
  246. package/lib-esm/Token/TokenLabel.js +0 -101
  247. package/lib-esm/Token/TokenProfile.d.ts +0 -7
  248. package/lib-esm/Token/TokenProfile.js +0 -29
  249. package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -3
  250. package/lib-esm/Token/_RemoveTokenButton.js +0 -28
  251. package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -9
  252. package/lib-esm/Token/_tokenButtonUtils.js +0 -26
  253. package/lib-esm/_UnstyledTextInput.d.ts +0 -2
  254. package/lib-esm/_UnstyledTextInput.js +0 -7
  255. package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
  256. package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
@@ -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
- isMenuDirectlyActivated?: boolean | undefined;
8
- setAutocompleteSuggestion?: import("react").Dispatch<import("react").SetStateAction<string>> | undefined;
9
- setInputValue?: import("react").Dispatch<import("react").SetStateAction<string>> | undefined;
10
- setIsMenuDirectlyActivated?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
11
- setShowMenu?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
12
- showMenu?: boolean | undefined;
13
- }>;
@@ -1,2 +0,0 @@
1
- import { createContext } from 'react';
2
- 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,115 +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
- onBlur,
11
- onChange,
12
- onKeyDown,
13
- onKeyPress,
14
- value,
15
- ...props
16
- }, forwardedRef) => {
17
- const {
18
- activeDescendantRef,
19
- autocompleteSuggestion = '',
20
- inputRef,
21
- inputValue = '',
22
- isMenuDirectlyActivated,
23
- setInputValue,
24
- setShowMenu,
25
- showMenu
26
- } = useContext(AutocompleteContext);
27
- const combinedInputRef = useCombinedRefs(inputRef, forwardedRef);
28
- const [highlightRemainingText, setHighlightRemainingText] = useState(true);
29
-
30
- const handleInputFocus = e => {
31
- onFocus && onFocus(e);
32
- setShowMenu && setShowMenu(true);
33
- };
34
-
35
- const handleInputBlur = e => {
36
- onBlur && onBlur(e); // 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
- // COLEHELP
40
-
41
- setTimeout(() => {
42
- if (document.activeElement !== combinedInputRef.current) {
43
- setShowMenu && setShowMenu(false);
44
- }
45
- }, 0);
46
- };
47
-
48
- const handleInputChange = e => {
49
- onChange && onChange(e);
50
- setInputValue && setInputValue(e.currentTarget.value);
51
-
52
- if (!showMenu) {
53
- setShowMenu && setShowMenu(true);
54
- }
55
- };
56
-
57
- const handleInputKeyDown = e => {
58
- if (e.key === 'Backspace') {
59
- setHighlightRemainingText(false);
60
- }
61
- };
62
-
63
- const handleInputKeyUp = e => {
64
- if (e.key === 'Backspace') {
65
- setHighlightRemainingText(true);
66
- }
67
- };
68
-
69
- const onInputKeyPress = useCallback(event => {
70
- if (activeDescendantRef && event.key === 'Enter' && activeDescendantRef.current) {
71
- event.preventDefault();
72
- event.nativeEvent.stopImmediatePropagation(); // Forward Enter key press to active descendant so that item gets activated
73
-
74
- const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
75
- activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
76
- }
77
- }, [activeDescendantRef]);
78
- useEffect(() => {
79
- if (!(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
80
- return;
81
- } // resets input value to being empty after a selection has been made
82
-
83
-
84
- if (!autocompleteSuggestion) {
85
- inputRef.current.value = inputValue;
86
- } // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text
87
- // is the same as what I'm typing
88
- // e.g.: typing 'tw' highights 'two', but when I 'two', the text input change does not get triggered
89
- // COLEHELP
90
-
91
-
92
- if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
93
- inputRef.current.value = autocompleteSuggestion;
94
-
95
- if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
96
- inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
97
- }
98
- }
99
- }, [autocompleteSuggestion, inputValue]);
100
- useEffect(() => {
101
- if (value) {
102
- setInputValue && setInputValue(value.toString());
103
- }
104
- }, [value]);
105
- return /*#__PURE__*/React.createElement(Component, _extends({
106
- onFocus: handleInputFocus,
107
- onBlur: handleInputBlur,
108
- onChange: handleInputChange,
109
- onKeyDown: handleInputKeyDown,
110
- onKeyPress: onInputKeyPress,
111
- onKeyUp: handleInputKeyUp,
112
- ref: combinedInputRef
113
- }, props));
114
- });
115
- export default AutocompleteInput;
@@ -1,70 +0,0 @@
1
- import React from 'react';
2
- import { ItemProps } from '../ActionList';
3
- import { OverlayProps } from '../Overlay';
4
- import { ComponentProps, MandateProps } from '../utils/types';
5
- declare type OnAction<T> = (item: T, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
6
- declare type AutocompleteItemProps<T = Record<string, any>> = MandateProps<ItemProps, 'id'> & {
7
- metadata?: T;
8
- };
9
- declare type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
10
- /**
11
- * A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop.
12
- * This menu item gets appended to the end of the list of options.
13
- */
14
- addNewItem?: Omit<T, 'onAction' | 'leadingVisual' | 'id'> & {
15
- handleAddItem: (item: Omit<T, 'onAction' | 'leadingVisual'>) => void;
16
- };
17
- /**
18
- * The text that appears in the menu when there are no options in the array passed to the `items` prop.
19
- */
20
- emptyStateText?: React.ReactNode | false;
21
- /**
22
- * A custom function used to filter the options in the array passed to the `items` prop.
23
- * By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive.
24
- */
25
- filterFn?: (item: T, i: number) => boolean;
26
- /**
27
- * The options for field values that are displayed in the dropdown menu.
28
- * One or more may be selected depending on the value of the `selectionVariant` prop.
29
- */
30
- items: T[];
31
- /**
32
- * The function that is called when an item in the list is de-selected
33
- */
34
- onItemDeselect?: OnAction<T>;
35
- /**
36
- * The function that is called when an item in the list is selected
37
- */
38
- onItemSelect?: OnAction<T>;
39
- /**
40
- * Whether the data is loaded for the menu items
41
- */
42
- loading?: boolean;
43
- /**
44
- * The IDs of the selected items
45
- */
46
- selectedItemIds: Array<string | number>;
47
- /**
48
- * The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu.
49
- * By default, selected items are sorted to the top after the user closes the menu.
50
- */
51
- sortOnCloseFn?: (itemIdA: string | number, itemIdB: string | number) => number;
52
- /**
53
- * Whether there can be one item selected from the menu or multiple items selected from the menu
54
- */
55
- selectionVariant?: 'single' | 'multiple';
56
- /**
57
- * The ref of the element that the position of the menu is based on. By default, the menu is positioned based on the text input
58
- */
59
- menuAnchorRef?: React.RefObject<Element>;
60
- };
61
- declare function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T> & Pick<OverlayProps, 'width' | 'height' | 'maxHeight'>): JSX.Element;
62
- declare namespace AutocompleteMenu {
63
- var defaultProps: {
64
- emptyStateText: string;
65
- selectionVariant: string;
66
- };
67
- var displayName: string;
68
- }
69
- export declare type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>;
70
- export default AutocompleteMenu;
@@ -1,218 +0,0 @@
1
- import React, { useContext, useEffect, useRef, useState } from 'react';
2
- import { ActionList } from '../ActionList';
3
- import { useAnchoredPosition } from '../hooks';
4
- import { useFocusZone } from '../hooks/useFocusZone';
5
- import Overlay from '../Overlay';
6
- import { Box, Spinner } from '../';
7
- import { registerPortalRoot } from '../Portal';
8
- import { AutocompleteContext } from './AutocompleteContext';
9
- import { useCombinedRefs } from '../hooks/useCombinedRefs';
10
- import { PlusIcon } from '@primer/octicons-react';
11
- import { uniqueId } from '../utils/uniqueId';
12
- import { scrollIntoViewingArea } from '../utils/scrollIntoViewingArea';
13
- const DROPDOWN_PORTAL_CONTAINER_NAME = '__listcontainerportal__';
14
-
15
- const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
16
-
17
- function getDefaultItemFilter(filterValue) {
18
- return function (item, _i) {
19
- var _item$text;
20
-
21
- return Boolean((_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.toLowerCase().startsWith(filterValue.toLowerCase()));
22
- };
23
- }
24
-
25
- function getDefaultOnItemSelectFn(setInputValueFn) {
26
- if (setInputValueFn) {
27
- return function ({
28
- text = ''
29
- }) {
30
- setInputValueFn(text);
31
- };
32
- }
33
-
34
- return ({
35
- text
36
- }) => {
37
- console.error(`getDefaultOnItemSelectFn could not be called with ${text} because a function to set the text input was undefined`);
38
- };
39
- }
40
-
41
- function AutocompleteMenu(props) {
42
- const {
43
- activeDescendantRef,
44
- inputRef,
45
- inputValue = '',
46
- setAutocompleteSuggestion,
47
- setShowMenu,
48
- setInputValue,
49
- setIsMenuDirectlyActivated,
50
- showMenu
51
- } = useContext(AutocompleteContext);
52
- const {
53
- items,
54
- selectedItemIds,
55
- sortOnCloseFn,
56
- onItemSelect = getDefaultOnItemSelectFn(setInputValue),
57
- onItemDeselect,
58
- emptyStateText,
59
- addNewItem,
60
- loading,
61
- selectionVariant,
62
- filterFn = getDefaultItemFilter(inputValue),
63
- width,
64
- height,
65
- maxHeight,
66
- menuAnchorRef
67
- } = props;
68
- const listContainerRef = useRef(null);
69
- const scrollContainerRef = useRef(null);
70
- const [highlightedItem, setHighlightedItem] = useState();
71
- const [sortedItemIds, setSortedItemIds] = useState(items.map(({
72
- id
73
- }) => id));
74
- const {
75
- floatingElementRef,
76
- position
77
- } = useAnchoredPosition({
78
- side: 'outside-bottom',
79
- align: 'start',
80
- anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef
81
- }, [showMenu, selectedItemIds]);
82
- const combinedOverlayRef = useCombinedRefs(scrollContainerRef, floatingElementRef);
83
-
84
- const closeOptionList = () => {
85
- setShowMenu && setShowMenu(false);
86
- };
87
-
88
- const isItemSelected = itemId => selectedItemIds.includes(itemId);
89
-
90
- const selectableItems = items.map(selectableItem => ({ ...selectableItem,
91
- id: selectableItem.id,
92
- selected: selectionVariant === 'multiple' ? isItemSelected(selectableItem.id) : undefined,
93
- onAction: (item, e) => {
94
- const handleItemSelection = () => {
95
- onItemSelect(item, e);
96
-
97
- if (selectionVariant === 'multiple') {
98
- setInputValue && setInputValue('');
99
- setAutocompleteSuggestion && setAutocompleteSuggestion('');
100
- }
101
- };
102
-
103
- if (item.selected) {
104
- onItemDeselect && onItemDeselect(item, e);
105
- } else {
106
- handleItemSelection();
107
- }
108
-
109
- if (selectionVariant === 'single') {
110
- var _inputRef$current;
111
-
112
- setShowMenu && setShowMenu(false);
113
- inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
114
- }
115
- }
116
- }));
117
- const itemSortOrderData = sortedItemIds.reduce((acc, curr, i) => {
118
- acc[curr] = i;
119
- return acc;
120
- }, {});
121
- const sortedAndFilteredItemsToRender = selectableItems.filter((item, i) => filterFn(item, i)).sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]);
122
- const allItemsToRender = [// sorted and filtered selectable items
123
- ...sortedAndFilteredItemsToRender, // menu item used for creating a token from whatever is in the text input
124
- ...(addNewItem ? [{ ...addNewItem,
125
- leadingVisual: () => /*#__PURE__*/React.createElement(PlusIcon, null),
126
- onAction: (item, e) => {
127
- // TODO: make it possible to pass a leadingVisual when using `addNewItem`
128
- addNewItem.handleAddItem({ ...item,
129
- id: item.id || uniqueId(),
130
- leadingVisual: undefined
131
- });
132
-
133
- if (selectionVariant === 'multiple') {
134
- setInputValue && setInputValue('');
135
- setAutocompleteSuggestion && setAutocompleteSuggestion('');
136
- }
137
- }
138
- }] : [])];
139
- useFocusZone({
140
- containerRef: listContainerRef,
141
- focusOutBehavior: 'wrap',
142
- focusableElementFilter: element => {
143
- return !(element instanceof HTMLInputElement);
144
- },
145
- activeDescendantFocus: inputRef,
146
- onActiveDescendantChanged: (current, _previous, directlyActivated) => {
147
- if (activeDescendantRef) {
148
- activeDescendantRef.current = current || null;
149
- }
150
-
151
- if (current) {
152
- const selectedItem = selectableItems.find(item => item.id.toString() === (current === null || current === void 0 ? void 0 : current.dataset.id));
153
- setHighlightedItem(selectedItem);
154
- setIsMenuDirectlyActivated && setIsMenuDirectlyActivated(directlyActivated);
155
- }
156
-
157
- if (current && scrollContainerRef.current && directlyActivated) {
158
- scrollIntoViewingArea(current, scrollContainerRef.current);
159
- }
160
- }
161
- });
162
- useEffect(() => {
163
- var _highlightedItem$text;
164
-
165
- if (!setAutocompleteSuggestion) {
166
- return;
167
- }
168
-
169
- if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
170
- setAutocompleteSuggestion(highlightedItem.text);
171
- } else {
172
- setAutocompleteSuggestion('');
173
- }
174
- }, [highlightedItem, inputValue]);
175
- useEffect(() => {
176
- setSortedItemIds([...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn(isItemSelected)));
177
- }, [showMenu]);
178
-
179
- if (listContainerRef.current) {
180
- registerPortalRoot(listContainerRef.current, DROPDOWN_PORTAL_CONTAINER_NAME);
181
- }
182
-
183
- return /*#__PURE__*/React.createElement(Overlay, {
184
- returnFocusRef: inputRef,
185
- preventFocusOnOpen: true,
186
- onClickOutside: closeOptionList,
187
- onEscape: closeOptionList,
188
- ref: combinedOverlayRef,
189
- top: position === null || position === void 0 ? void 0 : position.top,
190
- left: position === null || position === void 0 ? void 0 : position.left,
191
- width: width,
192
- height: height,
193
- maxHeight: maxHeight,
194
- visibility: showMenu ? 'visible' : 'hidden'
195
- }, loading ? /*#__PURE__*/React.createElement(Box, {
196
- p: 3,
197
- display: "flex",
198
- justifyContent: "center"
199
- }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement("div", {
200
- ref: listContainerRef
201
- }, allItemsToRender.length ? /*#__PURE__*/React.createElement(ActionList, {
202
- selectionVariant: "multiple" // have to typecast to `ItemProps` because we have an extra property
203
- // on `items` for Autocomplete: `metadata`
204
- ,
205
- items: allItemsToRender,
206
- role: "listbox"
207
- }) : /*#__PURE__*/React.createElement(Box, {
208
- p: 3
209
- }, emptyStateText)));
210
- }
211
-
212
- AutocompleteMenu.displayName = "AutocompleteMenu";
213
- AutocompleteMenu.defaultProps = {
214
- emptyStateText: 'No selectable options',
215
- selectionVariant: 'single'
216
- };
217
- AutocompleteMenu.displayName = 'AutocompleteMenu';
218
- export default AutocompleteMenu;
@@ -1,2 +0,0 @@
1
- export { default } from './Autocomplete';
2
- export type { AutocompleteMenuProps, AutocompleteInputProps, } from './Autocomplete';
@@ -1 +0,0 @@
1
- export { default } from './Autocomplete';
@@ -1,8 +0,0 @@
1
- import { BadgeSizeKeys } from './_badgeStyleUtils';
2
- declare type BadgeColorOptions = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
3
- interface Props {
4
- color?: BadgeColorOptions;
5
- variant?: BadgeSizeKeys;
6
- }
7
- declare const Badge: import("styled-components").StyledComponent<"span", any, Props, never>;
8
- export default Badge;
@@ -1,44 +0,0 @@
1
- import styled from 'styled-components';
2
- import { get } from '../constants';
3
- import { badgeVariants } from './_badgeStyleUtils';
4
- const badgeColorMap = {
5
- default: {
6
- borderColor: get('colors.border.default')
7
- },
8
- primary: {
9
- borderColor: get('colors.fg.default')
10
- },
11
- secondary: {
12
- borderColor: get('colors.border.muted'),
13
- textColor: get('colors.fg.muted')
14
- },
15
- info: {
16
- borderColor: get('colors.accent.fg'),
17
- textColor: get('colors.accent.fg')
18
- },
19
- success: {
20
- borderColor: get('colors.success.fg'),
21
- textColor: get('colors.success.emphasis')
22
- },
23
- warning: {
24
- borderColor: get('colors.attention.fg'),
25
- textColor: get('colors.attention.emphasis')
26
- },
27
- danger: {
28
- borderColor: get('colors.danger.fg'),
29
- textColor: get('colors.danger.emphasis')
30
- }
31
- };
32
- const Badge = styled.span.withConfig({
33
- displayName: "Badge",
34
- componentId: "sc-15t9m5z-0"
35
- })(["align-items:center;background-color:transparent;border-width:1px;border-radius:999px;border-style:solid;border-color:", ";color:", ";display:inline-flex;font-weight:", ";line-height:1;white-space:nowrap;", ";"], ({
36
- color = 'default'
37
- }) => badgeColorMap[color].borderColor, ({
38
- color = 'default'
39
- }) => badgeColorMap[color].textColor, get('fontWeights.bold'), badgeVariants);
40
- Badge.defaultProps = {
41
- variant: 'sm',
42
- color: 'default'
43
- };
44
- export default Badge;
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- import { IconProps } from '@primer/octicons-react';
3
- import { BadgeSizeKeys } from './_badgeStyleUtils';
4
- declare type BadgeStateColorOptions = 'default' | 'open' | 'merged' | 'closed';
5
- interface Props {
6
- color?: BadgeStateColorOptions;
7
- icon?: React.ComponentType<{
8
- size?: IconProps['size'];
9
- }>;
10
- variant?: BadgeSizeKeys;
11
- }
12
- declare const BadgeState: React.FC<Props>;
13
- export default BadgeState;
@@ -1,40 +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 styled from 'styled-components';
4
- import { get } from '../constants';
5
- import { badgeVariants } from './_badgeStyleUtils'; // TODO: consider making these a little less specific by using:
6
- // 'default' | 'success' | 'done' | 'danger'
7
-
8
- const badgeStateColorMap = {
9
- default: get('colors.neutral.emphasis'),
10
- open: get('colors.success.emphasis'),
11
- merged: get('colors.done.emphasis'),
12
- closed: get('colors.danger.emphasis')
13
- }; // const badgeStateIconSizeMap: Record<BadgeSizeKeys, number> = {
14
- // 'sm':
15
- // };
16
-
17
- const StyledBadgeState = styled.span.withConfig({
18
- displayName: "BadgeState__StyledBadgeState",
19
- componentId: "sc-5hwzjt-0"
20
- })(["align-items:center;background-color:", ";border-radius:999px;color:", ";display:inline-flex;font-weight:", ";gap:", ";line-height:1;white-space:nowrap;", ";"], ({
21
- color = 'default'
22
- }) => badgeStateColorMap[color], get('colors.fg.onEmphasis'), get('fontWeights.bold'), get('space.1'), badgeVariants);
23
-
24
- const BadgeState = ({
25
- children,
26
- icon: IconComponent,
27
- variant,
28
- ...rest
29
- }) => /*#__PURE__*/React.createElement(StyledBadgeState, _extends({
30
- variant: variant
31
- }, rest), IconComponent ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconComponent, {
32
- size: variant === 'sm' ? 12 : 'small'
33
- }), children) : children);
34
-
35
- BadgeState.displayName = "BadgeState";
36
- BadgeState.defaultProps = {
37
- variant: 'lg',
38
- color: 'default'
39
- };
40
- export default BadgeState;
@@ -1,3 +0,0 @@
1
- export declare type BadgeSizeKeys = 'sm' | 'md' | 'lg';
2
- export declare const badgeSizes: Record<BadgeSizeKeys, number>;
3
- export declare const badgeVariants: (...args: any[]) => any;
@@ -1,29 +0,0 @@
1
- import { variant } from 'styled-system';
2
- // TODO: consider moving to Primitives
3
- export const badgeSizes = {
4
- sm: 20,
5
- md: 24,
6
- lg: 32
7
- };
8
- export const badgeVariants = variant({
9
- variants: {
10
- sm: {
11
- fontSize: 0,
12
- height: `${badgeSizes.sm}px`,
13
- paddingLeft: 2,
14
- paddingRight: 2
15
- },
16
- md: {
17
- fontSize: 0,
18
- height: `${badgeSizes.md}px`,
19
- paddingLeft: 2,
20
- paddingRight: 2
21
- },
22
- lg: {
23
- fontSize: 1,
24
- height: `${badgeSizes.lg}px`,
25
- paddingLeft: 3,
26
- paddingRight: 3
27
- }
28
- }
29
- });
@@ -1,23 +0,0 @@
1
- import * as History from 'history';
2
- import React from 'react';
3
- import { SystemCommonProps, SystemFlexProps } from './constants';
4
- import { SxProp } from './sx';
5
- import { ComponentProps } from './utils/types';
6
- declare const BreadcrumbBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
7
- export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbBase>;
8
- declare function Breadcrumb({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbProps>): JSX.Element;
9
- declare namespace Breadcrumb {
10
- var displayName: string;
11
- }
12
- declare const BreadcrumbItem: import("styled-components").StyledComponent<"a", any, {
13
- to?: History.LocationDescriptor<unknown> | undefined;
14
- selected?: boolean | undefined;
15
- } & SystemCommonProps & SxProp, never>;
16
- export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>;
17
- declare const _default: typeof Breadcrumb & {
18
- Item: import("styled-components").StyledComponent<"a", any, {
19
- to?: History.LocationDescriptor<unknown> | undefined;
20
- selected?: boolean | undefined;
21
- } & SystemCommonProps & SxProp, never>;
22
- };
23
- export default _default;