@primer/components 0.0.0-202181722217 → 0.0.0-202181723821

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