@primer/components 0.0.0-20219818220 → 0.0.0-202198182351

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 (92) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/dist/browser.esm.js +313 -297
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +387 -371
  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/TextInput.d.ts +12 -4
  12. package/lib/TextInput.js +46 -4
  13. package/lib/Token/AvatarToken.d.ts +7 -0
  14. package/lib/Token/{ProfileToken.js → AvatarToken.js} +4 -4
  15. package/lib/Token/_TokenTextContainer.js +3 -14
  16. package/lib/Token/index.d.ts +1 -1
  17. package/lib/Token/index.js +3 -3
  18. package/lib/hooks/useOpenAndCloseFocus.d.ts +1 -2
  19. package/lib/hooks/useOpenAndCloseFocus.js +2 -7
  20. package/lib/hooks/useOverlay.d.ts +1 -2
  21. package/lib/hooks/useOverlay.js +2 -4
  22. package/lib/index.d.ts +1 -3
  23. package/lib/index.js +2 -18
  24. package/lib/utils/types/index.d.ts +0 -1
  25. package/lib/utils/types/index.js +0 -13
  26. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  27. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -11
  28. package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
  29. package/lib-esm/Overlay.d.ts +1 -2
  30. package/lib-esm/Overlay.js +5 -8
  31. package/lib-esm/TextInput.d.ts +12 -4
  32. package/lib-esm/TextInput.js +37 -4
  33. package/lib-esm/Token/AvatarToken.d.ts +7 -0
  34. package/lib-esm/Token/{ProfileToken.js → AvatarToken.js} +4 -4
  35. package/lib-esm/Token/_TokenTextContainer.js +2 -11
  36. package/lib-esm/Token/index.d.ts +1 -1
  37. package/lib-esm/Token/index.js +1 -1
  38. package/lib-esm/hooks/useOpenAndCloseFocus.d.ts +1 -2
  39. package/lib-esm/hooks/useOpenAndCloseFocus.js +2 -7
  40. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  41. package/lib-esm/hooks/useOverlay.js +2 -4
  42. package/lib-esm/index.d.ts +1 -3
  43. package/lib-esm/index.js +1 -3
  44. package/lib-esm/utils/types/index.d.ts +0 -1
  45. package/lib-esm/utils/types/index.js +1 -2
  46. package/package.json +1 -1
  47. package/lib/Autocomplete/Autocomplete.d.ts +0 -40
  48. package/lib/Autocomplete/Autocomplete.js +0 -68
  49. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -17
  50. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  51. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  52. package/lib/Autocomplete/AutocompleteInput.js +0 -150
  53. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -71
  54. package/lib/Autocomplete/AutocompleteMenu.js +0 -223
  55. package/lib/Autocomplete/AutocompleteOverlay.d.ts +0 -17
  56. package/lib/Autocomplete/AutocompleteOverlay.js +0 -69
  57. package/lib/Autocomplete/index.d.ts +0 -2
  58. package/lib/Autocomplete/index.js +0 -15
  59. package/lib/TextInputWithTokens.d.ts +0 -323
  60. package/lib/TextInputWithTokens.js +0 -244
  61. package/lib/Token/ProfileToken.d.ts +0 -7
  62. package/lib/_TextInputWrapper.d.ts +0 -10
  63. package/lib/_TextInputWrapper.js +0 -51
  64. package/lib/_UnstyledTextInput.d.ts +0 -2
  65. package/lib/_UnstyledTextInput.js +0 -20
  66. package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
  67. package/lib/utils/scrollIntoViewingArea.js +0 -39
  68. package/lib/utils/types/MandateProps.d.ts +0 -3
  69. package/lib/utils/types/MandateProps.js +0 -1
  70. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -40
  71. package/lib-esm/Autocomplete/Autocomplete.js +0 -47
  72. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -17
  73. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  74. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  75. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -131
  76. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -71
  77. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -204
  78. package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +0 -17
  79. package/lib-esm/Autocomplete/AutocompleteOverlay.js +0 -51
  80. package/lib-esm/Autocomplete/index.d.ts +0 -2
  81. package/lib-esm/Autocomplete/index.js +0 -1
  82. package/lib-esm/TextInputWithTokens.d.ts +0 -323
  83. package/lib-esm/TextInputWithTokens.js +0 -219
  84. package/lib-esm/Token/ProfileToken.d.ts +0 -7
  85. package/lib-esm/_TextInputWrapper.d.ts +0 -10
  86. package/lib-esm/_TextInputWrapper.js +0 -31
  87. package/lib-esm/_UnstyledTextInput.d.ts +0 -2
  88. package/lib-esm/_UnstyledTextInput.js +0 -7
  89. package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
  90. package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
  91. package/lib-esm/utils/types/MandateProps.d.ts +0 -3
  92. package/lib-esm/utils/types/MandateProps.js +0 -1
@@ -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;
@@ -1,69 +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 _hooks = require("../hooks");
11
-
12
- var _Overlay = _interopRequireDefault(require("../Overlay"));
13
-
14
- var _AutocompleteContext = require("./AutocompleteContext");
15
-
16
- var _useCombinedRefs = require("../hooks/useCombinedRefs");
17
-
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
- 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); }
21
-
22
- 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; }
23
-
24
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
25
-
26
- // TODO: consider making 'aria-labelledby' required
27
- const AutocompleteOverlay = ({
28
- menuAnchorRef,
29
- overlayProps,
30
- children
31
- }) => {
32
- const {
33
- inputRef,
34
- scrollContainerRef,
35
- selectedItemLength,
36
- setShowMenu,
37
- showMenu = false
38
- } = (0, _react.useContext)(_AutocompleteContext.AutocompleteContext);
39
- const {
40
- floatingElementRef,
41
- position
42
- } = (0, _hooks.useAnchoredPosition)({
43
- side: 'outside-bottom',
44
- align: 'start',
45
- anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef
46
- }, [showMenu, selectedItemLength]);
47
- const combinedOverlayRef = (0, _useCombinedRefs.useCombinedRefs)(scrollContainerRef, floatingElementRef);
48
- const closeOptionList = (0, _react.useCallback)(() => {
49
- setShowMenu && setShowMenu(false);
50
- }, [setShowMenu]);
51
- return /*#__PURE__*/_react.default.createElement(_Overlay.default, _extends({
52
- returnFocusRef: inputRef,
53
- preventFocusOnOpen: true,
54
- onClickOutside: closeOptionList,
55
- onEscape: closeOptionList,
56
- ref: combinedOverlayRef,
57
- top: position === null || position === void 0 ? void 0 : position.top,
58
- left: position === null || position === void 0 ? void 0 : position.left,
59
- visibility: showMenu ? 'visible' : 'hidden',
60
- sx: {
61
- overflow: 'auto'
62
- }
63
- }, overlayProps), children);
64
- };
65
-
66
- AutocompleteOverlay.displayName = "AutocompleteOverlay";
67
- AutocompleteOverlay.displayName = 'AutocompleteOverlay';
68
- var _default = AutocompleteOverlay;
69
- exports.default = _default;
@@ -1,2 +0,0 @@
1
- export { default } from './Autocomplete';
2
- export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps } 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 }; }