@primer/components 0.0.0-20219819465 → 0.0.0-202198201647

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 (66) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/dist/browser.esm.js +254 -253
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +332 -331
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  7. package/lib/AnchoredOverlay/AnchoredOverlay.js +3 -11
  8. package/lib/FilteredActionList/FilteredActionList.js +31 -5
  9. package/lib/Overlay.d.ts +1 -2
  10. package/lib/Overlay.js +5 -10
  11. package/lib/Token/TokenBase.d.ts +15 -1
  12. package/lib/hooks/useOpenAndCloseFocus.d.ts +1 -2
  13. package/lib/hooks/useOpenAndCloseFocus.js +2 -7
  14. package/lib/hooks/useOverlay.d.ts +1 -2
  15. package/lib/hooks/useOverlay.js +2 -4
  16. package/lib/index.d.ts +0 -1
  17. package/lib/index.js +0 -8
  18. package/lib/utils/types/index.d.ts +0 -1
  19. package/lib/utils/types/index.js +0 -13
  20. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  21. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -11
  22. package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
  23. package/lib-esm/Overlay.d.ts +1 -2
  24. package/lib-esm/Overlay.js +5 -8
  25. package/lib-esm/Token/TokenBase.d.ts +15 -1
  26. package/lib-esm/hooks/useOpenAndCloseFocus.d.ts +1 -2
  27. package/lib-esm/hooks/useOpenAndCloseFocus.js +2 -7
  28. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  29. package/lib-esm/hooks/useOverlay.js +2 -4
  30. package/lib-esm/index.d.ts +0 -1
  31. package/lib-esm/index.js +0 -1
  32. package/lib-esm/utils/types/index.d.ts +0 -1
  33. package/lib-esm/utils/types/index.js +1 -2
  34. package/package.json +1 -1
  35. package/lib/Autocomplete/Autocomplete.d.ts +0 -40
  36. package/lib/Autocomplete/Autocomplete.js +0 -68
  37. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -17
  38. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  39. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  40. package/lib/Autocomplete/AutocompleteInput.js +0 -150
  41. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -71
  42. package/lib/Autocomplete/AutocompleteMenu.js +0 -223
  43. package/lib/Autocomplete/AutocompleteOverlay.d.ts +0 -17
  44. package/lib/Autocomplete/AutocompleteOverlay.js +0 -74
  45. package/lib/Autocomplete/index.d.ts +0 -2
  46. package/lib/Autocomplete/index.js +0 -15
  47. package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
  48. package/lib/utils/scrollIntoViewingArea.js +0 -39
  49. package/lib/utils/types/MandateProps.d.ts +0 -3
  50. package/lib/utils/types/MandateProps.js +0 -1
  51. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -40
  52. package/lib-esm/Autocomplete/Autocomplete.js +0 -47
  53. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -17
  54. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  55. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  56. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -131
  57. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -71
  58. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -204
  59. package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +0 -17
  60. package/lib-esm/Autocomplete/AutocompleteOverlay.js +0 -56
  61. package/lib-esm/Autocomplete/index.d.ts +0 -2
  62. package/lib-esm/Autocomplete/index.js +0 -1
  63. package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
  64. package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
  65. package/lib-esm/utils/types/MandateProps.d.ts +0 -3
  66. package/lib-esm/utils/types/MandateProps.js +0 -1
@@ -1,40 +0,0 @@
1
- import React from 'react';
2
- import { ComponentProps } from '../utils/types';
3
- import AutocompleteMenu from './AutocompleteMenu';
4
- declare const Autocomplete: React.FC<{
5
- id?: string;
6
- }>;
7
- export declare type AutocompleteProps = ComponentProps<typeof Autocomplete>;
8
- export type { AutocompleteInputProps } from './AutocompleteInput';
9
- export type { AutocompleteMenuProps } from './AutocompleteMenu';
10
- export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
11
- declare const _default: React.FC<{
12
- id?: string | undefined;
13
- }> & {
14
- AutocompleteContext: React.Context<{
15
- activeDescendantRef?: React.MutableRefObject<HTMLElement | null> | undefined;
16
- autocompleteSuggestion?: string | undefined;
17
- id?: string | undefined;
18
- inputRef?: React.MutableRefObject<HTMLInputElement | null> | undefined;
19
- inputValue?: string | undefined;
20
- isMenuDirectlyActivated?: boolean | undefined;
21
- scrollContainerRef?: React.MutableRefObject<HTMLElement | null> | undefined;
22
- selectedItemLength?: number | undefined;
23
- setAutocompleteSuggestion?: React.Dispatch<React.SetStateAction<string>> | undefined;
24
- setInputValue?: React.Dispatch<React.SetStateAction<string>> | undefined;
25
- setIsMenuDirectlyActivated?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
26
- setSelectedItemLength?: React.Dispatch<React.SetStateAction<number | undefined>> | undefined;
27
- setShowMenu?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
28
- showMenu?: boolean | undefined;
29
- }>;
30
- Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<"input", {
31
- as?: React.ComponentType<any> | undefined;
32
- }>;
33
- Menu: typeof AutocompleteMenu;
34
- Overlay: React.FC<{
35
- menuAnchorRef?: React.RefObject<HTMLElement> | undefined;
36
- overlayProps?: Partial<import("..").OverlayProps> | undefined;
37
- children?: React.ReactNode;
38
- } & Pick<React.AriaAttributes, "aria-labelledby">>;
39
- };
40
- export default _default;
@@ -1,68 +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 _uniqueId = require("../utils/uniqueId");
11
-
12
- var _AutocompleteContext = require("./AutocompleteContext");
13
-
14
- var _AutocompleteInput = _interopRequireDefault(require("./AutocompleteInput"));
15
-
16
- var _AutocompleteMenu = _interopRequireDefault(require("./AutocompleteMenu"));
17
-
18
- var _AutocompleteOverlay = _interopRequireDefault(require("./AutocompleteOverlay"));
19
-
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
- 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); }
23
-
24
- 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; }
25
-
26
- const Autocomplete = ({
27
- children,
28
- id: idProp
29
- }) => {
30
- const activeDescendantRef = (0, _react.useRef)(null);
31
- const scrollContainerRef = (0, _react.useRef)(null);
32
- const inputRef = (0, _react.useRef)(null);
33
- const [inputValue, setInputValue] = (0, _react.useState)('');
34
- const [showMenu, setShowMenu] = (0, _react.useState)(false);
35
- const [autocompleteSuggestion, setAutocompleteSuggestion] = (0, _react.useState)('');
36
- const [isMenuDirectlyActivated, setIsMenuDirectlyActivated] = (0, _react.useState)(false);
37
- const [selectedItemLength, setSelectedItemLength] = (0, _react.useState)();
38
- const id = idProp || (0, _uniqueId.uniqueId)();
39
- return /*#__PURE__*/_react.default.createElement(_AutocompleteContext.AutocompleteContext.Provider, {
40
- value: {
41
- activeDescendantRef,
42
- autocompleteSuggestion,
43
- id,
44
- inputRef,
45
- inputValue,
46
- isMenuDirectlyActivated,
47
- scrollContainerRef,
48
- selectedItemLength,
49
- setAutocompleteSuggestion,
50
- setInputValue,
51
- setIsMenuDirectlyActivated,
52
- setShowMenu,
53
- setSelectedItemLength,
54
- showMenu
55
- }
56
- }, children);
57
- };
58
-
59
- Autocomplete.displayName = "Autocomplete";
60
-
61
- var _default = Object.assign(Autocomplete, {
62
- AutocompleteContext: _AutocompleteContext.AutocompleteContext,
63
- Input: _AutocompleteInput.default,
64
- Menu: _AutocompleteMenu.default,
65
- Overlay: _AutocompleteOverlay.default
66
- });
67
-
68
- exports.default = _default;
@@ -1,17 +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
- id?: string | undefined;
6
- inputRef?: import("react").MutableRefObject<HTMLInputElement | null> | undefined;
7
- inputValue?: string | undefined;
8
- isMenuDirectlyActivated?: boolean | undefined;
9
- scrollContainerRef?: import("react").MutableRefObject<HTMLElement | null> | undefined;
10
- selectedItemLength?: number | undefined;
11
- setAutocompleteSuggestion?: import("react").Dispatch<import("react").SetStateAction<string>> | undefined;
12
- setInputValue?: import("react").Dispatch<import("react").SetStateAction<string>> | undefined;
13
- setIsMenuDirectlyActivated?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
14
- setSelectedItemLength?: import("react").Dispatch<import("react").SetStateAction<number | undefined>> | undefined;
15
- setShowMenu?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
16
- showMenu?: boolean | undefined;
17
- }>;
@@ -1,11 +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
- const AutocompleteContext = /*#__PURE__*/(0, _react.createContext)({});
11
- exports.AutocompleteContext = AutocompleteContext;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { ForwardRefComponent as PolymorphicForwardRefComponent } 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: PolymorphicForwardRefComponent<"input", InternalAutocompleteInputProps>;
8
- export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
9
- export default AutocompleteInput;
@@ -1,150 +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
- onBlur,
28
- onChange,
29
- onKeyDown,
30
- onKeyUp,
31
- onKeyPress,
32
- value,
33
- ...props
34
- }, forwardedRef) => {
35
- const {
36
- activeDescendantRef,
37
- autocompleteSuggestion = '',
38
- id,
39
- inputRef,
40
- inputValue = '',
41
- isMenuDirectlyActivated,
42
- setInputValue,
43
- setShowMenu,
44
- showMenu
45
- } = (0, _react.useContext)(_AutocompleteContext.AutocompleteContext);
46
- const combinedInputRef = (0, _useCombinedRefs.useCombinedRefs)(inputRef, forwardedRef);
47
- const [highlightRemainingText, setHighlightRemainingText] = (0, _react.useState)(true);
48
- const handleInputFocus = (0, _react.useCallback)(event => {
49
- onFocus && onFocus(event);
50
- setShowMenu && setShowMenu(true);
51
- }, [onFocus, setShowMenu]);
52
- const handleInputBlur = (0, _react.useCallback)(event => {
53
- onBlur && onBlur(event); // HACK: wait a tick and check the focused element before hiding the autocomplete menu
54
- // this prevents the menu from hiding when the user is clicking an option in the Autoselect.Menu,
55
- // but still hides the menu when the user blurs the input by tabbing out or clicking somewhere else on the page
56
-
57
- setTimeout(() => {
58
- if (document.activeElement !== combinedInputRef.current) {
59
- setShowMenu && setShowMenu(false);
60
- }
61
- }, 0);
62
- }, [onBlur, setShowMenu, combinedInputRef]);
63
- const handleInputChange = (0, _react.useCallback)(event => {
64
- onChange && onChange(event);
65
- setInputValue && setInputValue(event.currentTarget.value);
66
-
67
- if (!showMenu) {
68
- setShowMenu && setShowMenu(true);
69
- }
70
- }, [onChange, setInputValue, setShowMenu, showMenu]);
71
- const handleInputKeyDown = (0, _react.useCallback)(event => {
72
- var _inputRef$current;
73
-
74
- onKeyDown && onKeyDown(event);
75
-
76
- if (event.key === 'Backspace') {
77
- setHighlightRemainingText(false);
78
- }
79
-
80
- if (event.key === 'Escape' && inputRef !== null && inputRef !== void 0 && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) {
81
- setInputValue && setInputValue('');
82
- inputRef.current.value = '';
83
- }
84
- }, [inputRef, setInputValue, setHighlightRemainingText, onKeyDown]);
85
- const handleInputKeyUp = (0, _react.useCallback)(event => {
86
- onKeyUp && onKeyUp(event);
87
-
88
- if (event.key === 'Backspace') {
89
- setHighlightRemainingText(true);
90
- }
91
- }, [setHighlightRemainingText, onKeyUp]);
92
- const onInputKeyPress = (0, _react.useCallback)(event => {
93
- onKeyPress && onKeyPress(event);
94
-
95
- if (showMenu && activeDescendantRef && event.key === 'Enter' && activeDescendantRef.current) {
96
- event.preventDefault();
97
- event.nativeEvent.stopImmediatePropagation(); // Forward Enter key press to active descendant so that item gets activated
98
-
99
- const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
100
- activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
101
- }
102
- }, [activeDescendantRef, showMenu, onKeyPress]);
103
- (0, _react.useEffect)(() => {
104
- if (!(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
105
- return;
106
- } // resets input value to being empty after a selection has been made
107
-
108
-
109
- if (!autocompleteSuggestion) {
110
- inputRef.current.value = inputValue;
111
- } // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text
112
- // is the same as what I'm typing
113
- // e.g.: typing 'tw' highights 'two', but when I 'two', the text input change does not get triggered
114
-
115
-
116
- if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
117
- inputRef.current.value = autocompleteSuggestion;
118
-
119
- if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
120
- inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
121
- }
122
- } // calling this useEffeect when `highlightRemainingText` changes breaks backspace functionality
123
- // eslint-disable-next-line react-hooks/exhaustive-deps
124
-
125
- }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated]);
126
- (0, _react.useEffect)(() => {
127
- if (value) {
128
- setInputValue && setInputValue(value.toString());
129
- }
130
- }, [value, setInputValue]);
131
- return /*#__PURE__*/_react.default.createElement(Component, _extends({
132
- onFocus: handleInputFocus,
133
- onBlur: handleInputBlur,
134
- onChange: handleInputChange,
135
- onKeyDown: handleInputKeyDown,
136
- onKeyPress: onInputKeyPress,
137
- onKeyUp: handleInputKeyUp,
138
- ref: combinedInputRef,
139
- "aria-controls": `${id}-listbox`,
140
- "aria-autocomplete": "both",
141
- role: "combobox",
142
- "aria-expanded": showMenu,
143
- "aria-haspopup": "listbox",
144
- "aria-owns": `${id}-listbox`,
145
- autocomplete: "off"
146
- }, props));
147
- });
148
-
149
- var _default = AutocompleteInput;
150
- exports.default = _default;
@@ -1,71 +0,0 @@
1
- import React from 'react';
2
- import { ItemProps } from '../ActionList';
3
- import { ComponentProps, MandateProps } from '../utils/types';
4
- declare type OnSelectedChange<T> = (item: T | T[]) => void;
5
- declare type AutocompleteItemProps<T = Record<string, any>> = MandateProps<ItemProps, 'id'> & {
6
- metadata?: T;
7
- };
8
- export declare type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
9
- /**
10
- * A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop.
11
- * This menu item gets appended to the end of the list of options.
12
- */
13
- addNewItem?: Omit<T, 'onAction' | 'leadingVisual' | 'id'> & {
14
- handleAddItem: (item: Omit<T, 'onAction' | 'leadingVisual'>) => void;
15
- };
16
- /**
17
- * The text that appears in the menu when there are no options in the array passed to the `items` prop.
18
- */
19
- emptyStateText?: React.ReactNode | false;
20
- /**
21
- * A custom function used to filter the options in the array passed to the `items` prop.
22
- * By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive.
23
- */
24
- filterFn?: (item: T, i: number) => boolean;
25
- /**
26
- * The options for field values that are displayed in the dropdown menu.
27
- * One or more may be selected depending on the value of the `selectionVariant` prop.
28
- */
29
- items: T[];
30
- /**
31
- * Whether the data is loaded for the menu items
32
- */
33
- loading?: boolean;
34
- /**
35
- * The IDs of the selected items
36
- */
37
- selectedItemIds: Array<string | number>;
38
- /**
39
- * The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu.
40
- * By default, selected items are sorted to the top after the user closes the menu.
41
- */
42
- sortOnCloseFn?: (itemIdA: string | number, itemIdB: string | number) => number;
43
- /**
44
- * Whether there can be one item selected from the menu or multiple items selected from the menu
45
- */
46
- selectionVariant?: 'single' | 'multiple';
47
- /**
48
- * Function that gets called when the menu is opened or closed
49
- */
50
- onOpenChange?: (open: boolean) => void;
51
- /**
52
- * The function that is called when an item in the list is selected or deselected
53
- */
54
- onSelectedChange?: OnSelectedChange<T>;
55
- /**
56
- * If the menu is rendered in a scrolling element other than the `Autocomplete.Overlay` component,
57
- * pass the ref of that element to `customScrollContainerRef` to ensure the container automatically
58
- * scrolls when the user highlights an item in the menu that is outside the scroll container
59
- */
60
- customScrollContainerRef?: React.MutableRefObject<HTMLElement | null>;
61
- } & Pick<React.AriaAttributes, 'aria-labelledby'>;
62
- declare function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T>): JSX.Element;
63
- declare namespace AutocompleteMenu {
64
- var defaultProps: {
65
- emptyStateText: string;
66
- selectionVariant: string;
67
- };
68
- var displayName: string;
69
- }
70
- export declare type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>;
71
- export default AutocompleteMenu;
@@ -1,223 +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 _useFocusZone = require("../hooks/useFocusZone");
13
-
14
- var _ = require("../");
15
-
16
- var _AutocompleteContext = require("./AutocompleteContext");
17
-
18
- var _octiconsReact = require("@primer/octicons-react");
19
-
20
- var _uniqueId = require("../utils/uniqueId");
21
-
22
- var _scrollIntoViewingArea = require("../utils/scrollIntoViewingArea");
23
-
24
- 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); }
25
-
26
- 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; }
27
-
28
- const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
29
-
30
- function getDefaultItemFilter(filterValue) {
31
- return function (item, _i) {
32
- var _item$text;
33
-
34
- return Boolean((_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.toLowerCase().startsWith(filterValue.toLowerCase()));
35
- };
36
- }
37
-
38
- function getDefaultOnSelectionChange(setInputValueFn) {
39
- return function (itemOrItems) {
40
- const {
41
- text = ''
42
- } = Array.isArray(itemOrItems) ? itemOrItems.slice(-1)[0] : itemOrItems;
43
- setInputValueFn && setInputValueFn(text);
44
- };
45
- }
46
-
47
- const isItemSelected = (itemId, selectedItemIds) => selectedItemIds.includes(itemId);
48
-
49
- function getItemById(itemId, items) {
50
- return items.find(item => item.id === itemId);
51
- } // eslint-disable-next-line @typescript-eslint/no-explicit-any
52
-
53
-
54
- function AutocompleteMenu(props) {
55
- const {
56
- activeDescendantRef,
57
- id,
58
- inputRef,
59
- inputValue = '',
60
- scrollContainerRef,
61
- setAutocompleteSuggestion,
62
- setShowMenu,
63
- setInputValue,
64
- setIsMenuDirectlyActivated,
65
- setSelectedItemLength,
66
- showMenu
67
- } = (0, _react.useContext)(_AutocompleteContext.AutocompleteContext);
68
- const {
69
- items,
70
- selectedItemIds,
71
- sortOnCloseFn,
72
- emptyStateText,
73
- addNewItem,
74
- loading,
75
- selectionVariant,
76
- filterFn = getDefaultItemFilter(inputValue),
77
- 'aria-labelledby': ariaLabelledBy,
78
- onOpenChange,
79
- onSelectedChange = getDefaultOnSelectionChange(setInputValue),
80
- customScrollContainerRef
81
- } = props;
82
- const listContainerRef = (0, _react.useRef)(null);
83
- const [highlightedItem, setHighlightedItem] = (0, _react.useState)();
84
- const [sortedItemIds, setSortedItemIds] = (0, _react.useState)(items.map(({
85
- id: itemId
86
- }) => itemId));
87
- const selectableItems = (0, _react.useMemo)(() => items.map(selectableItem => {
88
- return { ...selectableItem,
89
- role: 'option',
90
- id: selectableItem.id,
91
- selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined,
92
- onAction: item => {
93
- const otherSelectedItemIds = selectedItemIds.filter(selectedItemId => selectedItemId !== item.id);
94
- const newSelectedItemIds = selectedItemIds.includes(item.id) ? otherSelectedItemIds : [...otherSelectedItemIds, item.id];
95
- onSelectedChange && onSelectedChange(newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId, items)));
96
-
97
- if (selectionVariant === 'multiple') {
98
- setInputValue && setInputValue('');
99
- setAutocompleteSuggestion && setAutocompleteSuggestion('');
100
- } else {
101
- var _inputRef$current;
102
-
103
- setShowMenu && setShowMenu(false);
104
- 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);
105
- }
106
- }
107
- };
108
- }), [items, selectedItemIds, inputRef, onSelectedChange, selectionVariant, setAutocompleteSuggestion, setInputValue, setShowMenu]);
109
- const itemSortOrderData = (0, _react.useMemo)(() => sortedItemIds.reduce((acc, curr, i) => {
110
- acc[curr] = i;
111
- return acc;
112
- }, {}), [sortedItemIds]);
113
- const sortedAndFilteredItemsToRender = (0, _react.useMemo)(() => selectableItems.filter(filterFn).sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]), [selectableItems, itemSortOrderData, filterFn]);
114
- const allItemsToRender = (0, _react.useMemo)(() => [// sorted and filtered selectable items
115
- ...sortedAndFilteredItemsToRender, // menu item used for creating a token from whatever is in the text input
116
- ...(addNewItem ? [{ ...addNewItem,
117
- leadingVisual: () => /*#__PURE__*/_react.default.createElement(_octiconsReact.PlusIcon, null),
118
- onAction: item => {
119
- // TODO: make it possible to pass a leadingVisual when using `addNewItem`
120
- addNewItem.handleAddItem({ ...item,
121
- id: item.id || (0, _uniqueId.uniqueId)(),
122
- leadingVisual: undefined
123
- });
124
-
125
- if (selectionVariant === 'multiple') {
126
- setInputValue && setInputValue('');
127
- setAutocompleteSuggestion && setAutocompleteSuggestion('');
128
- }
129
- }
130
- }] : [])], [sortedAndFilteredItemsToRender, addNewItem, setAutocompleteSuggestion, selectionVariant, setInputValue]);
131
- (0, _useFocusZone.useFocusZone)({
132
- containerRef: listContainerRef,
133
- focusOutBehavior: 'wrap',
134
- focusableElementFilter: element => {
135
- return !(element instanceof HTMLInputElement);
136
- },
137
- activeDescendantFocus: inputRef,
138
- onActiveDescendantChanged: (current, _previous, directlyActivated) => {
139
- if (activeDescendantRef) {
140
- activeDescendantRef.current = current || null;
141
- }
142
-
143
- if (current) {
144
- const selectedItem = selectableItems.find(item => item.id.toString() === current.getAttribute('data-id'));
145
- setHighlightedItem(selectedItem);
146
- setIsMenuDirectlyActivated && setIsMenuDirectlyActivated(directlyActivated);
147
- }
148
-
149
- if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
150
- (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, customScrollContainerRef.current);
151
- } else if (current && scrollContainerRef && scrollContainerRef.current && directlyActivated) {
152
- (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, scrollContainerRef.current);
153
- }
154
- }
155
- }, [loading]);
156
- (0, _react.useEffect)(() => {
157
- var _highlightedItem$text;
158
-
159
- if (!setAutocompleteSuggestion) {
160
- return;
161
- }
162
-
163
- if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
164
- setAutocompleteSuggestion(highlightedItem.text);
165
- } else {
166
- setAutocompleteSuggestion('');
167
- }
168
- }, [highlightedItem, inputValue, selectedItemIds, setAutocompleteSuggestion]);
169
- (0, _react.useEffect)(() => {
170
- const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn(itemId => isItemSelected(itemId, selectedItemIds)));
171
- const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length && itemIdSortResult.every((element, index) => element === sortedItemIds[index]);
172
-
173
- if (showMenu === false && !sortResultMatchesState) {
174
- setSortedItemIds(itemIdSortResult);
175
- }
176
-
177
- onOpenChange && onOpenChange(Boolean(showMenu));
178
- }, [showMenu, onOpenChange, selectedItemIds, sortOnCloseFn, sortedItemIds]);
179
- (0, _react.useEffect)(() => {
180
- if (selectedItemIds.length) {
181
- setSelectedItemLength && setSelectedItemLength(selectedItemIds.length);
182
- }
183
- }, [selectedItemIds, setSelectedItemLength]);
184
- return /*#__PURE__*/_react.default.createElement(_.Box, {
185
- sx: !showMenu ? {
186
- // visually hides this label for sighted users
187
- position: 'absolute',
188
- width: '1px',
189
- height: '1px',
190
- padding: '0',
191
- margin: '-1px',
192
- overflow: 'hidden',
193
- clip: 'rect(0, 0, 0, 0)',
194
- whiteSpace: 'nowrap',
195
- borderWidth: '0'
196
- } : {}
197
- }, loading ? /*#__PURE__*/_react.default.createElement(_.Box, {
198
- p: 3,
199
- display: "flex",
200
- justifyContent: "center"
201
- }, /*#__PURE__*/_react.default.createElement(_.Spinner, null)) : /*#__PURE__*/_react.default.createElement("div", {
202
- ref: listContainerRef
203
- }, allItemsToRender.length ? /*#__PURE__*/_react.default.createElement(_ActionList.ActionList, {
204
- selectionVariant: "multiple" // have to typecast to `ItemProps` because we have an extra property
205
- // on `items` for Autocomplete: `metadata`
206
- ,
207
- items: allItemsToRender,
208
- role: "listbox",
209
- id: `${id}-listbox`,
210
- "aria-labelledby": ariaLabelledBy
211
- }) : /*#__PURE__*/_react.default.createElement(_.Box, {
212
- p: 3
213
- }, emptyStateText)));
214
- }
215
-
216
- AutocompleteMenu.displayName = "AutocompleteMenu";
217
- AutocompleteMenu.defaultProps = {
218
- emptyStateText: 'No selectable options',
219
- selectionVariant: 'single'
220
- };
221
- AutocompleteMenu.displayName = 'AutocompleteMenu';
222
- var _default = AutocompleteMenu;
223
- exports.default = _default;
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- import { OverlayProps } from '../Overlay';
3
- import { ComponentProps } from '../utils/types';
4
- declare type AutocompleteOverlayInternalProps = {
5
- /**
6
- * 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
7
- */
8
- menuAnchorRef?: React.RefObject<HTMLElement>;
9
- /**
10
- * Props to be spread on the internal `Overlay` component.
11
- */
12
- overlayProps?: Partial<OverlayProps>;
13
- children?: React.ReactNode;
14
- } & Pick<React.AriaAttributes, 'aria-labelledby'>;
15
- declare const AutocompleteOverlay: React.FC<AutocompleteOverlayInternalProps>;
16
- export declare type AutocompleteOverlayProps = ComponentProps<typeof AutocompleteOverlay>;
17
- export default AutocompleteOverlay;