@primer/components 0.0.0-202181722217 → 0.0.0-202181723821

Sign up to get free protection for your applications and to get access to all the features.
Files changed (202) hide show
  1. package/CHANGELOG.md +23 -1
  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.js +1 -1
  17. package/lib/Button/ButtonClose.js +1 -1
  18. package/lib/Button/ButtonInvisible.js +1 -1
  19. package/lib/Button/ButtonTableList.js +1 -1
  20. package/lib/CircleBadge.js +1 -1
  21. package/lib/CircleOcticon.js +1 -1
  22. package/lib/CounterLabel.js +2 -2
  23. package/lib/Dialog/ConfirmationDialog.js +1 -1
  24. package/lib/Dialog/Dialog.js +9 -9
  25. package/lib/Dialog.js +4 -4
  26. package/lib/Dropdown.js +2 -2
  27. package/lib/DropdownStyles.js +6 -6
  28. package/lib/FilterList.js +1 -1
  29. package/lib/FilteredActionList/FilteredActionList.js +5 -5
  30. package/lib/Flash.js +1 -1
  31. package/lib/Label.js +2 -2
  32. package/lib/Link.js +1 -1
  33. package/lib/Overlay.d.ts +1 -2
  34. package/lib/Overlay.js +6 -11
  35. package/lib/Pagehead.js +1 -1
  36. package/lib/Pagination/Pagination.js +1 -1
  37. package/lib/Popover.js +1 -1
  38. package/lib/ProgressBar.js +1 -1
  39. package/lib/SelectMenu/SelectMenu.d.ts +11 -327
  40. package/lib/SelectMenu/SelectMenuDivider.js +1 -1
  41. package/lib/SelectMenu/SelectMenuFilter.d.ts +1 -1
  42. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  43. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  44. package/lib/SelectMenu/SelectMenuHeader.js +2 -2
  45. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  46. package/lib/SelectMenu/SelectMenuList.js +1 -1
  47. package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  48. package/lib/SelectMenu/SelectMenuModal.js +2 -2
  49. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  50. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  51. package/lib/SideNav.js +5 -5
  52. package/lib/StateLabel.js +1 -1
  53. package/lib/SubNav.js +1 -1
  54. package/lib/TabNav.js +2 -2
  55. package/lib/TextInput.d.ts +6 -6
  56. package/lib/TextInput.js +21 -16
  57. package/lib/Timeline.js +16 -19
  58. package/lib/Tooltip.js +1 -1
  59. package/lib/UnderlineNav.js +2 -2
  60. package/lib/hooks/useOverlay.d.ts +1 -2
  61. package/lib/hooks/useOverlay.js +6 -11
  62. package/lib/index.d.ts +1 -0
  63. package/lib/index.js +14 -0
  64. package/lib/theme-preval.d.ts +12 -6
  65. package/lib/theme-preval.js +940 -0
  66. package/lib/utils/ssr.d.ts +1 -0
  67. package/lib/utils/ssr.js +19 -0
  68. package/lib/utils/testing.d.ts +1854 -0
  69. package/lib/utils/uniqueId.js +1 -0
  70. package/lib-esm/ActionList/Divider.js +1 -1
  71. package/lib-esm/ActionList/Header.js +2 -2
  72. package/lib-esm/ActionList/Item.js +14 -14
  73. package/lib-esm/ActionList/List.js +1 -1
  74. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -3
  75. package/lib-esm/Avatar.d.ts +4 -0
  76. package/lib-esm/AvatarPair.js +1 -1
  77. package/lib-esm/AvatarStack.js +1 -1
  78. package/lib-esm/BranchName.js +1 -1
  79. package/lib-esm/Breadcrumb.js +2 -2
  80. package/lib-esm/Button/Button.js +1 -1
  81. package/lib-esm/Button/ButtonClose.js +1 -1
  82. package/lib-esm/Button/ButtonInvisible.js +1 -1
  83. package/lib-esm/Button/ButtonTableList.js +1 -1
  84. package/lib-esm/CircleBadge.js +1 -1
  85. package/lib-esm/CircleOcticon.js +1 -1
  86. package/lib-esm/CounterLabel.js +2 -2
  87. package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
  88. package/lib-esm/Dialog/Dialog.js +8 -8
  89. package/lib-esm/Dialog.js +4 -4
  90. package/lib-esm/Dropdown.js +2 -2
  91. package/lib-esm/DropdownStyles.js +6 -6
  92. package/lib-esm/FilterList.js +1 -1
  93. package/lib-esm/FilteredActionList/FilteredActionList.js +5 -5
  94. package/lib-esm/Flash.js +1 -1
  95. package/lib-esm/Label.js +2 -2
  96. package/lib-esm/Link.js +1 -1
  97. package/lib-esm/Overlay.d.ts +1 -2
  98. package/lib-esm/Overlay.js +6 -9
  99. package/lib-esm/Pagehead.js +1 -1
  100. package/lib-esm/Pagination/Pagination.js +1 -1
  101. package/lib-esm/Popover.js +1 -1
  102. package/lib-esm/ProgressBar.js +1 -1
  103. package/lib-esm/SelectMenu/SelectMenu.d.ts +11 -327
  104. package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
  105. package/lib-esm/SelectMenu/SelectMenuFilter.d.ts +1 -1
  106. package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
  107. package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
  108. package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
  109. package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
  110. package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
  111. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  112. package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
  113. package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
  114. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
  115. package/lib-esm/SideNav.js +5 -5
  116. package/lib-esm/StateLabel.js +1 -1
  117. package/lib-esm/SubNav.js +1 -1
  118. package/lib-esm/TabNav.js +2 -2
  119. package/lib-esm/TextInput.d.ts +6 -6
  120. package/lib-esm/TextInput.js +22 -16
  121. package/lib-esm/Timeline.js +12 -17
  122. package/lib-esm/Tooltip.js +1 -1
  123. package/lib-esm/UnderlineNav.js +2 -2
  124. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  125. package/lib-esm/hooks/useOverlay.js +6 -11
  126. package/lib-esm/index.d.ts +1 -0
  127. package/lib-esm/index.js +2 -1
  128. package/lib-esm/theme-preval.d.ts +12 -6
  129. package/lib-esm/theme-preval.js +940 -0
  130. package/lib-esm/utils/ssr.d.ts +1 -0
  131. package/lib-esm/utils/ssr.js +1 -0
  132. package/lib-esm/utils/testing.d.ts +1854 -0
  133. package/lib-esm/utils/uniqueId.js +1 -0
  134. package/package.json +5 -6
  135. package/lib/Autocomplete/Autocomplete.d.ts +0 -36
  136. package/lib/Autocomplete/Autocomplete.js +0 -55
  137. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -13
  138. package/lib/Autocomplete/AutocompleteContext.js +0 -14
  139. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  140. package/lib/Autocomplete/AutocompleteInput.js +0 -123
  141. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -20
  142. package/lib/Autocomplete/AutocompleteMenu.js +0 -268
  143. package/lib/Autocomplete/index.d.ts +0 -2
  144. package/lib/Autocomplete/index.js +0 -15
  145. package/lib/Badge/Badge.d.ts +0 -8
  146. package/lib/Badge/Badge.js +0 -59
  147. package/lib/Badge/BadgeState.d.ts +0 -13
  148. package/lib/Badge/BadgeState.js +0 -51
  149. package/lib/Badge/_badgeStyleUtils.d.ts +0 -3
  150. package/lib/Badge/_badgeStyleUtils.js +0 -39
  151. package/lib/TextInputTokens.d.ts +0 -32
  152. package/lib/TextInputTokens.js +0 -241
  153. package/lib/TextInputWithTokens.d.ts +0 -41
  154. package/lib/TextInputWithTokens.js +0 -396
  155. package/lib/Token/Token.d.ts +0 -7
  156. package/lib/Token/Token.js +0 -66
  157. package/lib/Token/TokenBase.d.ts +0 -16
  158. package/lib/Token/TokenBase.js +0 -76
  159. package/lib/Token/TokenLabel.d.ts +0 -8
  160. package/lib/Token/TokenLabel.js +0 -116
  161. package/lib/Token/TokenProfile.d.ts +0 -7
  162. package/lib/Token/TokenProfile.js +0 -45
  163. package/lib/Token/_AddTokenButton.d.ts +0 -3
  164. package/lib/Token/_AddTokenButton.js +0 -42
  165. package/lib/Token/_RemoveTokenButton.d.ts +0 -3
  166. package/lib/Token/_RemoveTokenButton.js +0 -42
  167. package/lib/Token/_tokenButtonUtils.d.ts +0 -8
  168. package/lib/Token/_tokenButtonUtils.js +0 -42
  169. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -36
  170. package/lib-esm/Autocomplete/Autocomplete.js +0 -36
  171. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -13
  172. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -5
  173. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  174. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -104
  175. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -20
  176. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -244
  177. package/lib-esm/Autocomplete/index.d.ts +0 -2
  178. package/lib-esm/Autocomplete/index.js +0 -1
  179. package/lib-esm/Badge/Badge.d.ts +0 -8
  180. package/lib-esm/Badge/Badge.js +0 -44
  181. package/lib-esm/Badge/BadgeState.d.ts +0 -13
  182. package/lib-esm/Badge/BadgeState.js +0 -40
  183. package/lib-esm/Badge/_badgeStyleUtils.d.ts +0 -3
  184. package/lib-esm/Badge/_badgeStyleUtils.js +0 -29
  185. package/lib-esm/TextInputTokens.d.ts +0 -32
  186. package/lib-esm/TextInputTokens.js +0 -211
  187. package/lib-esm/TextInputWithTokens.d.ts +0 -41
  188. package/lib-esm/TextInputWithTokens.js +0 -361
  189. package/lib-esm/Token/Token.d.ts +0 -7
  190. package/lib-esm/Token/Token.js +0 -46
  191. package/lib-esm/Token/TokenBase.d.ts +0 -16
  192. package/lib-esm/Token/TokenBase.js +0 -56
  193. package/lib-esm/Token/TokenLabel.d.ts +0 -8
  194. package/lib-esm/Token/TokenLabel.js +0 -100
  195. package/lib-esm/Token/TokenProfile.d.ts +0 -7
  196. package/lib-esm/Token/TokenProfile.js +0 -28
  197. package/lib-esm/Token/_AddTokenButton.d.ts +0 -3
  198. package/lib-esm/Token/_AddTokenButton.js +0 -27
  199. package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -3
  200. package/lib-esm/Token/_RemoveTokenButton.js +0 -27
  201. package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -8
  202. package/lib-esm/Token/_tokenButtonUtils.js +0 -26
@@ -1,3 +1,4 @@
1
+ // Note: uniqueId may be unsafe in SSR contexts if it is used create DOM IDs or otherwise cause a hydration warning. Use useSSRSafeId instead.
1
2
  let idSeed = 10000;
2
3
  export function uniqueId() {
3
4
  return `__primer_id_${idSeed++}`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-202181722217",
3
+ "version": "0.0.0-202181723821",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -45,7 +45,7 @@
45
45
  "dependencies": {
46
46
  "@primer/octicons-react": "^13.0.0",
47
47
  "@primer/primitives": "4.7.1",
48
- "@radix-ui/react-polymorphic": "0.0.14",
48
+ "@react-aria/ssr": "3.1.0",
49
49
  "@styled-system/css": "5.1.5",
50
50
  "@styled-system/props": "5.1.5",
51
51
  "@styled-system/theme-get": "5.1.2",
@@ -56,9 +56,9 @@
56
56
  "@types/styled-system__theme-get": "5.0.1",
57
57
  "classnames": "2.3.1",
58
58
  "deepmerge": "4.2.2",
59
+ "eslint-plugin-primer-react": "0.4.1",
59
60
  "focus-visible": "5.2.0",
60
- "styled-system": "5.1.5",
61
- "tinycolor2": "1.4.2"
61
+ "styled-system": "5.1.5"
62
62
  },
63
63
  "devDependencies": {
64
64
  "@babel/cli": "7.14.5",
@@ -90,7 +90,6 @@
90
90
  "@types/jest-axe": "3.5.1",
91
91
  "@types/lodash.isempty": "4.4.6",
92
92
  "@types/lodash.isobject": "3.0.6",
93
- "@types/tinycolor2": "1.4.3",
94
93
  "@typescript-eslint/eslint-plugin": "4.26.1",
95
94
  "@typescript-eslint/parser": "4.26.1",
96
95
  "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
@@ -124,7 +123,7 @@
124
123
  "react": "17.0.2",
125
124
  "react-dom": "17.0.2",
126
125
  "react-test-renderer": "17.0.2",
127
- "rollup": "2.51.2",
126
+ "rollup": "2.56.3",
128
127
  "rollup-plugin-babel": "4.4.0",
129
128
  "rollup-plugin-terser": "7.0.2",
130
129
  "rollup-plugin-visualizer": "5.5.0",
@@ -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
- items: import("../ActionList/List").ItemInput[];
25
- selectedItemIds: (string | number)[];
26
- selectedSortFn?: ((itemIdA: string | number, itemIdB: string | number) => number) | undefined;
27
- onItemSelect?: ((item: import("../ActionList").ItemProps, event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
28
- onItemDeselect?: ((item: import("../ActionList").ItemProps, event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
29
- emptyStateText?: React.ReactNode;
30
- addNewItem?: Omit<import("../ActionList/List").ItemInput, "onAction"> | undefined;
31
- loading?: boolean | undefined;
32
- selectionVariant?: "multiple" | "single" | undefined;
33
- filterFn?: ((item: import("../ActionList/List").ItemInput, i: number) => boolean) | undefined;
34
- } & Pick<import("..").OverlayProps, "height" | "maxHeight" | "width"> & React.RefAttributes<HTMLInputElement>>;
35
- };
36
- export default _default;
@@ -1,55 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _AutocompleteContext = require("./AutocompleteContext");
11
-
12
- var _AutocompleteInput = _interopRequireDefault(require("./AutocompleteInput"));
13
-
14
- var _AutocompleteMenu = _interopRequireDefault(require("./AutocompleteMenu"));
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
-
20
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
-
22
- const Autocomplete = ({
23
- children
24
- }) => {
25
- const activeDescendantRef = (0, _react.useRef)(null);
26
- const inputRef = (0, _react.useRef)(null);
27
- const [inputValue, setInputValue] = (0, _react.useState)('');
28
- const [showMenu, setShowMenu] = (0, _react.useState)(false);
29
- const [autocompleteSuggestion, setAutocompleteSuggestion] = (0, _react.useState)('');
30
- const [isMenuDirectlyActivated, setIsMenuDirectlyActivated] = (0, _react.useState)(false);
31
- return /*#__PURE__*/_react.default.createElement(_AutocompleteContext.AutocompleteContext.Provider, {
32
- value: {
33
- activeDescendantRef,
34
- autocompleteSuggestion,
35
- inputRef,
36
- inputValue,
37
- isMenuDirectlyActivated,
38
- setAutocompleteSuggestion,
39
- setInputValue,
40
- setIsMenuDirectlyActivated,
41
- setShowMenu,
42
- showMenu
43
- }
44
- }, children);
45
- };
46
-
47
- Autocomplete.displayName = "Autocomplete";
48
-
49
- var _default = Object.assign(Autocomplete, {
50
- AutocompleteContext: _AutocompleteContext.AutocompleteContext,
51
- Input: _AutocompleteInput.default,
52
- Menu: _AutocompleteMenu.default
53
- });
54
-
55
- exports.default = _default;
@@ -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,14 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.AutocompleteContext = void 0;
7
-
8
- var _react = require("react");
9
-
10
- // TODO:
11
- // - figure out how we can make all of these properties required without having to define them when calling `createContext`
12
- // - figure out how we can reduce the number of properties that need to be passed
13
- const AutocompleteContext = /*#__PURE__*/(0, _react.createContext)({});
14
- exports.AutocompleteContext = AutocompleteContext;
@@ -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,123 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _AutocompleteContext = require("./AutocompleteContext");
11
-
12
- var _TextInput = _interopRequireDefault(require("../TextInput"));
13
-
14
- var _useCombinedRefs = require("../hooks/useCombinedRefs");
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
-
20
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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 AutocompleteInput = /*#__PURE__*/_react.default.forwardRef(({
25
- as: Component = _TextInput.default,
26
- onFocus,
27
- onChange,
28
- onKeyDown,
29
- onKeyPress,
30
- value,
31
- ...props
32
- }, forwardedRef) => {
33
- const {
34
- activeDescendantRef,
35
- autocompleteSuggestion = '',
36
- inputRef,
37
- inputValue = '',
38
- isMenuDirectlyActivated,
39
- setInputValue,
40
- setShowMenu,
41
- showMenu
42
- } = (0, _react.useContext)(_AutocompleteContext.AutocompleteContext);
43
- const combinedInputRef = (0, _useCombinedRefs.useCombinedRefs)(inputRef, forwardedRef);
44
- const [highlightRemainingText, setHighlightRemainingText] = (0, _react.useState)(true);
45
-
46
- const handleInputFocus = () => {
47
- if (setShowMenu) {
48
- setShowMenu(true);
49
- }
50
- };
51
-
52
- const handleInputBlur = () => {
53
- if (setShowMenu) {
54
- setShowMenu(false);
55
- }
56
- };
57
-
58
- const handleInputChange = e => {
59
- if (setInputValue) {
60
- setInputValue(e.currentTarget.value);
61
- }
62
-
63
- if (setShowMenu && !showMenu) {
64
- setShowMenu(true);
65
- }
66
- };
67
-
68
- const handleInputKeyDown = e => {
69
- if (e.key === 'Backspace') {
70
- setHighlightRemainingText(false);
71
- }
72
- };
73
-
74
- const handleInputKeyUp = e => {
75
- if (e.key === 'Backspace') {
76
- setHighlightRemainingText(true);
77
- }
78
- };
79
-
80
- const onInputKeyPress = (0, _react.useCallback)(event => {
81
- if (activeDescendantRef && event.key === 'Enter' && activeDescendantRef.current) {
82
- event.preventDefault();
83
- event.nativeEvent.stopImmediatePropagation(); // Forward Enter key press to active descendant so that item gets activated
84
-
85
- const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
86
- activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
87
- }
88
- }, [activeDescendantRef]);
89
- (0, _react.useEffect)(() => {
90
- if (!(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
91
- return;
92
- }
93
-
94
- if (!autocompleteSuggestion) {
95
- inputRef.current.value = inputValue;
96
- }
97
-
98
- if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
99
- inputRef.current.value = autocompleteSuggestion;
100
-
101
- if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
102
- inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
103
- }
104
- }
105
- }, [autocompleteSuggestion, inputValue]);
106
- (0, _react.useEffect)(() => {
107
- if (value && setInputValue) {
108
- setInputValue(value.toString());
109
- }
110
- }, [value]);
111
- return /*#__PURE__*/_react.default.createElement(Component, _extends({
112
- onFocus: handleInputFocus,
113
- onBlur: handleInputBlur,
114
- onChange: handleInputChange,
115
- onKeyDown: handleInputKeyDown,
116
- onKeyPress: onInputKeyPress,
117
- onKeyUp: handleInputKeyUp,
118
- ref: combinedInputRef
119
- }, props));
120
- });
121
-
122
- var _default = AutocompleteInput;
123
- exports.default = _default;
@@ -1,20 +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
- items: ItemInput[];
8
- selectedItemIds: Array<string | number>;
9
- selectedSortFn?: (itemIdA: string | number, itemIdB: string | number) => number;
10
- onItemSelect?: NonNullable<ItemProps['onAction']>;
11
- onItemDeselect?: NonNullable<ItemProps['onAction']>;
12
- emptyStateText?: React.ReactNode | false;
13
- addNewItem?: Omit<ItemInput, 'onAction'>;
14
- loading?: boolean;
15
- selectionVariant?: 'single' | 'multiple';
16
- filterFn?: (item: ItemInput, i: number) => boolean;
17
- };
18
- declare const AutocompleteMenu: React.ForwardRefExoticComponent<AutocompleteMenuInternalProps & Pick<OverlayProps, "height" | "maxHeight" | "width"> & React.RefAttributes<HTMLInputElement>>;
19
- export declare type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>;
20
- export default AutocompleteMenu;
@@ -1,268 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _ActionList = require("../ActionList");
11
-
12
- var _hooks = require("../hooks");
13
-
14
- var _useFocusZone = require("../hooks/useFocusZone");
15
-
16
- var _Overlay = _interopRequireDefault(require("../Overlay"));
17
-
18
- var _ = require("../");
19
-
20
- var _Portal = require("../Portal");
21
-
22
- var _AutocompleteContext = require("./AutocompleteContext");
23
-
24
- var _useCombinedRefs = require("../hooks/useCombinedRefs");
25
-
26
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
-
28
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
-
30
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
-
32
- const DROPDOWN_PORTAL_CONTAINER_NAME = '__listcontainerportal__';
33
-
34
- const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
35
-
36
- function scrollIntoViewingArea(child, container, margin = 8, behavior = 'smooth') {
37
- const {
38
- top: childTop,
39
- bottom: childBottom
40
- } = child.getBoundingClientRect();
41
- const {
42
- top: containerTop,
43
- bottom: containerBottom
44
- } = container.getBoundingClientRect();
45
- const isChildTopAboveViewingArea = childTop < containerTop + margin;
46
- const isChildBottomBelowViewingArea = childBottom > containerBottom - margin;
47
-
48
- if (isChildTopAboveViewingArea) {
49
- const scrollHeightToChildTop = childTop - containerTop + container.scrollTop;
50
- container.scrollTo({
51
- behavior,
52
- top: scrollHeightToChildTop - margin
53
- });
54
- } else if (isChildBottomBelowViewingArea) {
55
- const scrollHeightToChildBottom = childBottom - containerBottom + container.scrollTop;
56
- container.scrollTo({
57
- behavior,
58
- top: scrollHeightToChildBottom + margin
59
- });
60
- } // either completely in view or outside viewing area on both ends, don't scroll
61
-
62
- }
63
-
64
- const defaultItemFilter = filterValue => (item, _i) => {
65
- var _item$text;
66
-
67
- return Boolean(item === null || item === void 0 ? void 0 : (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.toLowerCase().startsWith(filterValue.toLowerCase()));
68
- }; // TODO:
69
- // insteaad of using `forwardRef`, just use a regular Functional Component
70
- // get rid of unused props
71
-
72
-
73
- const AutocompleteMenu = /*#__PURE__*/_react.default.forwardRef(({
74
- items,
75
- selectedItemIds,
76
- selectedSortFn,
77
- onItemSelect,
78
- onItemDeselect,
79
- emptyStateText,
80
- addNewItem,
81
- loading,
82
- selectionVariant,
83
- filterFn: externalFilterFn,
84
- width,
85
- height,
86
- maxHeight
87
- }, ref) => {
88
- const {
89
- activeDescendantRef,
90
- inputRef,
91
- inputValue = '',
92
- setAutocompleteSuggestion,
93
- setShowMenu,
94
- setInputValue,
95
- setIsMenuDirectlyActivated,
96
- showMenu
97
- } = (0, _react.useContext)(_AutocompleteContext.AutocompleteContext);
98
- const filterFn = externalFilterFn ? externalFilterFn : defaultItemFilter(inputValue);
99
- const listContainerRef = (0, _react.useRef)(null);
100
- const scrollContainerRef = (0, _react.useRef)(null);
101
- const [highlightedItem, setHighlightedItem] = (0, _react.useState)(); // TODO: clean up this mess by making id required on ItemProps
102
-
103
- const [sortedItemIds, setSortedItemIds] = (0, _react.useState)(items.map(({
104
- id
105
- }) => id || id === 0 ? id : ''));
106
- const {
107
- floatingElementRef,
108
- position
109
- } = (0, _hooks.useAnchoredPosition)({
110
- side: 'outside-bottom',
111
- align: 'start',
112
- anchorElementRef: inputRef
113
- }, [showMenu, selectedItemIds]);
114
- const combinedOverlayRef = (0, _useCombinedRefs.useCombinedRefs)(scrollContainerRef, floatingElementRef);
115
-
116
- const closeOptionList = () => {
117
- if (setShowMenu) {
118
- setShowMenu(false);
119
- }
120
- };
121
-
122
- const isItemSelected = itemId => {
123
- var _items$find;
124
-
125
- return ((_items$find = items.find(selectableItem => selectableItem.id === itemId)) === null || _items$find === void 0 ? void 0 : _items$find.selected) || selectedItemIds.includes(itemId);
126
- };
127
-
128
- const itemsToRender = [// selectable tokens
129
- ...items.map(selectableItem => {
130
- return { ...selectableItem,
131
- //TODO: just make `id` required
132
- selected: selectionVariant === 'multiple' ? isItemSelected(selectableItem.id) : undefined,
133
- onAction: (item, e) => {
134
- // TODO: clean up all of these `if/else` statements
135
- if (item.selected) {
136
- // TODO: make `onItemDeselect` optional
137
- if (onItemDeselect) {
138
- onItemDeselect(item, e);
139
- }
140
- } else {
141
- // TODO: make `onItemSelect` optional
142
- if (onItemSelect) {
143
- onItemSelect(item, e);
144
- }
145
-
146
- if (selectionVariant === 'multiple') {
147
- if (setInputValue) {
148
- setInputValue('');
149
- }
150
-
151
- if (setAutocompleteSuggestion) {
152
- setAutocompleteSuggestion('');
153
- }
154
- }
155
- }
156
-
157
- if (selectionVariant === 'single') {
158
- if (setShowMenu) {
159
- setShowMenu(false);
160
- }
161
-
162
- if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
163
- inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
164
- }
165
- }
166
- }
167
- };
168
- }), // menu item used for creating a token from whatever is in the text input
169
- ...(addNewItem ? [{ ...addNewItem,
170
- onAction: onItemSelect ? (_item, e) => {
171
- onItemSelect({
172
- text: inputValue,
173
- id: `randomlyGeneratedId-${inputValue}`
174
- }, e);
175
- } : undefined
176
- }] : [])];
177
- (0, _useFocusZone.useFocusZone)({
178
- containerRef: listContainerRef,
179
- focusOutBehavior: 'wrap',
180
- focusableElementFilter: element => {
181
- return !(element instanceof HTMLInputElement);
182
- },
183
- activeDescendantFocus: inputRef,
184
- onActiveDescendantChanged: (current, _previous, directlyActivated) => {
185
- if (activeDescendantRef) {
186
- activeDescendantRef.current = current || null;
187
- }
188
-
189
- if (current) {
190
- const selectedItem = itemsToRender.find(item => {
191
- var _item$id;
192
-
193
- return ((_item$id = item.id) === null || _item$id === void 0 ? void 0 : _item$id.toString()) === (current === null || current === void 0 ? void 0 : current.dataset.id);
194
- });
195
- setHighlightedItem({ ...selectedItem,
196
- isDirectlyActivated: directlyActivated
197
- });
198
-
199
- if (setIsMenuDirectlyActivated) {
200
- setIsMenuDirectlyActivated(directlyActivated);
201
- }
202
- }
203
-
204
- if (current && scrollContainerRef.current && directlyActivated) {
205
- scrollIntoViewingArea(current, scrollContainerRef.current);
206
- }
207
- }
208
- });
209
- (0, _react.useEffect)(() => {
210
- var _highlightedItem$text;
211
-
212
- if (!setAutocompleteSuggestion) {
213
- return;
214
- }
215
-
216
- if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(inputValue || '')) {
217
- setAutocompleteSuggestion(highlightedItem.text);
218
- } else {
219
- setAutocompleteSuggestion('');
220
- }
221
- }, [highlightedItem, inputValue]);
222
- (0, _react.useEffect)(() => {
223
- setSortedItemIds([...sortedItemIds].sort(selectedSortFn ? selectedSortFn : getDefaultSortFn(isItemSelected)));
224
- }, [showMenu]);
225
-
226
- if (listContainerRef.current) {
227
- (0, _Portal.registerPortalRoot)(listContainerRef.current, DROPDOWN_PORTAL_CONTAINER_NAME);
228
- }
229
-
230
- const itemSortOrderData = sortedItemIds.reduce((acc, curr, i) => {
231
- acc[curr] = i;
232
- return acc;
233
- }, {});
234
- const sortedAndFilteredItemsToRender = [...(filterFn ? itemsToRender.filter(filterFn) : itemsToRender)].sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]);
235
- return /*#__PURE__*/_react.default.createElement("div", {
236
- ref: listContainerRef
237
- }, showMenu && emptyStateText ? /*#__PURE__*/_react.default.createElement(_Overlay.default, {
238
- returnFocusRef: inputRef,
239
- portalContainerName: DROPDOWN_PORTAL_CONTAINER_NAME,
240
- preventFocusOnOpen: true,
241
- onClickOutside: closeOptionList,
242
- onEscape: closeOptionList,
243
- ref: combinedOverlayRef,
244
- top: position === null || position === void 0 ? void 0 : position.top,
245
- left: position === null || position === void 0 ? void 0 : position.left,
246
- width: width,
247
- height: height,
248
- maxHeight: maxHeight
249
- }, loading ? /*#__PURE__*/_react.default.createElement(_.Box, {
250
- p: 3,
251
- display: "flex",
252
- justifyContent: "center"
253
- }, /*#__PURE__*/_react.default.createElement(_.Spinner, null)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sortedAndFilteredItemsToRender.length ? /*#__PURE__*/_react.default.createElement(_ActionList.ActionList, {
254
- selectionVariant: "multiple",
255
- items: sortedAndFilteredItemsToRender,
256
- role: "listbox"
257
- }) : /*#__PURE__*/_react.default.createElement(_.Box, {
258
- p: 3
259
- }, emptyStateText))) : null);
260
- });
261
-
262
- AutocompleteMenu.defaultProps = {
263
- emptyStateText: 'No selectable options',
264
- selectionVariant: 'single'
265
- };
266
- AutocompleteMenu.displayName = 'AutocompleteMenu';
267
- var _default = AutocompleteMenu;
268
- exports.default = _default;
@@ -1,2 +0,0 @@
1
- export { default } from './Autocomplete';
2
- export type { AutocompleteMenuProps, AutocompleteInputProps, } from './Autocomplete';
@@ -1,15 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "default", {
7
- enumerable: true,
8
- get: function () {
9
- return _Autocomplete.default;
10
- }
11
- });
12
-
13
- var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
14
-
15
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -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;