@primer/components 0.0.0-202194204247 → 0.0.0-20219421241

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 (78) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/dist/browser.esm.js +294 -298
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +364 -368
  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/SelectMenu/SelectMenu.d.ts +2 -8
  12. package/lib/TextInput.d.ts +3 -6
  13. package/lib/TextInput.js +10 -9
  14. package/lib/Token/Token.js +1 -1
  15. package/lib/Token/TokenBase.js +3 -3
  16. package/lib/Token/TokenLabel.js +3 -3
  17. package/lib/Token/_tokenButtonUtils.d.ts +1 -1
  18. package/lib/hooks/useOverlay.d.ts +1 -2
  19. package/lib/hooks/useOverlay.js +6 -11
  20. package/lib/index.d.ts +0 -2
  21. package/lib/index.js +0 -16
  22. package/lib/utils/types.d.ts +0 -3
  23. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  24. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -11
  25. package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
  26. package/lib-esm/Overlay.d.ts +1 -2
  27. package/lib-esm/Overlay.js +5 -8
  28. package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -8
  29. package/lib-esm/TextInput.d.ts +3 -6
  30. package/lib-esm/TextInput.js +9 -8
  31. package/lib-esm/Token/Token.js +1 -1
  32. package/lib-esm/Token/TokenBase.js +3 -3
  33. package/lib-esm/Token/TokenLabel.js +3 -3
  34. package/lib-esm/Token/_RemoveTokenButton.js +1 -1
  35. package/lib-esm/Token/_tokenButtonUtils.d.ts +1 -1
  36. package/lib-esm/Token/_tokenButtonUtils.js +1 -1
  37. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  38. package/lib-esm/hooks/useOverlay.js +6 -11
  39. package/lib-esm/index.d.ts +0 -2
  40. package/lib-esm/index.js +0 -2
  41. package/lib-esm/utils/types.d.ts +0 -3
  42. package/package.json +1 -1
  43. package/lib/Autocomplete/Autocomplete.d.ts +0 -40
  44. package/lib/Autocomplete/Autocomplete.js +0 -68
  45. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -17
  46. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  47. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  48. package/lib/Autocomplete/AutocompleteInput.js +0 -142
  49. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -71
  50. package/lib/Autocomplete/AutocompleteMenu.js +0 -223
  51. package/lib/Autocomplete/AutocompleteOverlay.d.ts +0 -17
  52. package/lib/Autocomplete/AutocompleteOverlay.js +0 -69
  53. package/lib/Autocomplete/index.d.ts +0 -2
  54. package/lib/Autocomplete/index.js +0 -15
  55. package/lib/TextInputWithTokens.d.ts +0 -43
  56. package/lib/TextInputWithTokens.js +0 -236
  57. package/lib/_UnstyledTextInput.d.ts +0 -2
  58. package/lib/_UnstyledTextInput.js +0 -20
  59. package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
  60. package/lib/utils/scrollIntoViewingArea.js +0 -39
  61. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -40
  62. package/lib-esm/Autocomplete/Autocomplete.js +0 -47
  63. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -17
  64. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  65. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  66. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -123
  67. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -71
  68. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -204
  69. package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +0 -17
  70. package/lib-esm/Autocomplete/AutocompleteOverlay.js +0 -51
  71. package/lib-esm/Autocomplete/index.d.ts +0 -2
  72. package/lib-esm/Autocomplete/index.js +0 -1
  73. package/lib-esm/TextInputWithTokens.d.ts +0 -43
  74. package/lib-esm/TextInputWithTokens.js +0 -209
  75. package/lib-esm/_UnstyledTextInput.d.ts +0 -2
  76. package/lib-esm/_UnstyledTextInput.js +0 -7
  77. package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
  78. package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
@@ -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,47 +0,0 @@
1
- import React, { useRef, useState } from 'react';
2
- import { uniqueId } from '../utils/uniqueId';
3
- import { AutocompleteContext } from './AutocompleteContext';
4
- import AutocompleteInput from './AutocompleteInput';
5
- import AutocompleteMenu from './AutocompleteMenu';
6
- import AutocompleteOverlay from './AutocompleteOverlay';
7
-
8
- const Autocomplete = ({
9
- children,
10
- id: idProp
11
- }) => {
12
- const activeDescendantRef = useRef(null);
13
- const scrollContainerRef = useRef(null);
14
- const inputRef = useRef(null);
15
- const [inputValue, setInputValue] = useState('');
16
- const [showMenu, setShowMenu] = useState(false);
17
- const [autocompleteSuggestion, setAutocompleteSuggestion] = useState('');
18
- const [isMenuDirectlyActivated, setIsMenuDirectlyActivated] = useState(false);
19
- const [selectedItemLength, setSelectedItemLength] = useState();
20
- const id = idProp || uniqueId();
21
- return /*#__PURE__*/React.createElement(AutocompleteContext.Provider, {
22
- value: {
23
- activeDescendantRef,
24
- autocompleteSuggestion,
25
- id,
26
- inputRef,
27
- inputValue,
28
- isMenuDirectlyActivated,
29
- scrollContainerRef,
30
- selectedItemLength,
31
- setAutocompleteSuggestion,
32
- setInputValue,
33
- setIsMenuDirectlyActivated,
34
- setShowMenu,
35
- setSelectedItemLength,
36
- showMenu
37
- }
38
- }, children);
39
- };
40
-
41
- Autocomplete.displayName = "Autocomplete";
42
- export default Object.assign(Autocomplete, {
43
- AutocompleteContext,
44
- Input: AutocompleteInput,
45
- Menu: AutocompleteMenu,
46
- Overlay: AutocompleteOverlay
47
- });
@@ -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,2 +0,0 @@
1
- import { createContext } from 'react';
2
- export const AutocompleteContext = /*#__PURE__*/createContext({});
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import type * as Polymorphic from "@radix-ui/react-polymorphic";
3
- import { ComponentProps } from '../utils/types';
4
- declare type InternalAutocompleteInputProps = {
5
- as?: React.ComponentType<any>;
6
- };
7
- declare const AutocompleteInput: Polymorphic.ForwardRefComponent<"input", InternalAutocompleteInputProps>;
8
- export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
9
- export default AutocompleteInput;
@@ -1,123 +0,0 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- import React, { useCallback, useContext, useEffect, useState } from 'react';
4
- import { AutocompleteContext } from './AutocompleteContext';
5
- import TextInput from '../TextInput';
6
- import { useCombinedRefs } from '../hooks/useCombinedRefs';
7
- const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
8
- as: Component = TextInput,
9
- onFocus,
10
- onBlur,
11
- onChange,
12
- onKeyDown,
13
- onKeyPress,
14
- value,
15
- ...props
16
- }, forwardedRef) => {
17
- const {
18
- activeDescendantRef,
19
- autocompleteSuggestion = '',
20
- id,
21
- inputRef,
22
- inputValue = '',
23
- isMenuDirectlyActivated,
24
- setInputValue,
25
- setShowMenu,
26
- showMenu
27
- } = useContext(AutocompleteContext);
28
- const combinedInputRef = useCombinedRefs(inputRef, forwardedRef);
29
- const [highlightRemainingText, setHighlightRemainingText] = useState(true);
30
- const handleInputFocus = useCallback(e => {
31
- onFocus && onFocus(e);
32
- setShowMenu && setShowMenu(true);
33
- }, [onFocus, setShowMenu]);
34
- const handleInputBlur = useCallback(e => {
35
- onBlur && onBlur(e); // HACK: wait a tick and check the focused element before hiding the autocomplete menu
36
- // this prevents the menu from hiding when the user is clicking an option in the Autoselect.Menu,
37
- // but still hides the menu when the user blurs the input by tabbing out or clicking somewhere else on the page
38
-
39
- setTimeout(() => {
40
- if (document.activeElement !== combinedInputRef.current) {
41
- setShowMenu && setShowMenu(false);
42
- }
43
- }, 0);
44
- }, [onBlur, setShowMenu]);
45
- const handleInputChange = useCallback(e => {
46
- onChange && onChange(e);
47
- setInputValue && setInputValue(e.currentTarget.value);
48
-
49
- if (!showMenu) {
50
- setShowMenu && setShowMenu(true);
51
- }
52
- }, [onChange, setInputValue, setShowMenu, showMenu]);
53
- const handleInputKeyDown = useCallback(e => () => {
54
- var _inputRef$current;
55
-
56
- if (e.key === 'Backspace') {
57
- setHighlightRemainingText(false);
58
- }
59
-
60
- if (e.key === 'Escape' && inputRef !== null && inputRef !== void 0 && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) {
61
- setInputValue && setInputValue('');
62
- inputRef.current.value = '';
63
- }
64
- }, [setInputValue]);
65
-
66
- const handleInputKeyUp = e => {
67
- if (e.key === 'Backspace') {
68
- setHighlightRemainingText(true);
69
- }
70
- };
71
-
72
- const onInputKeyPress = useCallback(event => {
73
- if (activeDescendantRef && event.key === 'Enter' && activeDescendantRef.current) {
74
- event.preventDefault();
75
- event.nativeEvent.stopImmediatePropagation(); // Forward Enter key press to active descendant so that item gets activated
76
-
77
- const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
78
- activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
79
- }
80
- }, [activeDescendantRef]);
81
- useEffect(() => {
82
- if (!(inputRef !== null && inputRef !== void 0 && inputRef.current)) {
83
- return;
84
- } // resets input value to being empty after a selection has been made
85
-
86
-
87
- if (!autocompleteSuggestion) {
88
- inputRef.current.value = inputValue;
89
- } // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text
90
- // is the same as what I'm typing
91
- // e.g.: typing 'tw' highights 'two', but when I 'two', the text input change does not get triggered
92
-
93
-
94
- if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
95
- inputRef.current.value = autocompleteSuggestion;
96
-
97
- if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
98
- inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
99
- }
100
- }
101
- }, [autocompleteSuggestion, inputValue]);
102
- useEffect(() => {
103
- if (value) {
104
- setInputValue && setInputValue(value.toString());
105
- }
106
- }, [value]);
107
- return /*#__PURE__*/React.createElement(Component, _extends({
108
- onFocus: handleInputFocus,
109
- onBlur: handleInputBlur,
110
- onChange: handleInputChange,
111
- onKeyDown: handleInputKeyDown,
112
- onKeyPress: onInputKeyPress,
113
- onKeyUp: handleInputKeyUp,
114
- ref: combinedInputRef,
115
- "aria-controls": `${id}-listbox`,
116
- "aria-autocomplete": "both",
117
- role: "combobox",
118
- "aria-expanded": showMenu,
119
- "aria-haspopup": "listbox",
120
- "aria-owns": `${id}-listbox`
121
- }, props));
122
- });
123
- export default AutocompleteInput;
@@ -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
- 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,204 +0,0 @@
1
- import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
2
- import { ActionList } from '../ActionList';
3
- import { useFocusZone } from '../hooks/useFocusZone';
4
- import { Box, Spinner } from '../';
5
- import { AutocompleteContext } from './AutocompleteContext';
6
- import { PlusIcon } from '@primer/octicons-react';
7
- import { uniqueId } from '../utils/uniqueId';
8
- import { scrollIntoViewingArea } from '../utils/scrollIntoViewingArea';
9
-
10
- const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
11
-
12
- function getDefaultItemFilter(filterValue) {
13
- return function (item, _i) {
14
- var _item$text;
15
-
16
- return Boolean((_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.toLowerCase().startsWith(filterValue.toLowerCase()));
17
- };
18
- }
19
-
20
- function getDefaultOnSelectionChange(setInputValueFn) {
21
- return function (itemOrItems) {
22
- const {
23
- text = ''
24
- } = Array.isArray(itemOrItems) ? itemOrItems.slice(-1)[0] : itemOrItems;
25
- setInputValueFn && setInputValueFn(text);
26
- };
27
- }
28
-
29
- const isItemSelected = (itemId, selectedItemIds) => selectedItemIds.includes(itemId);
30
-
31
- function getItemById(itemId, items) {
32
- return items.find(item => item.id === itemId);
33
- }
34
-
35
- ;
36
-
37
- // TODO: consider making 'aria-labelledby' required
38
- function AutocompleteMenu(props) {
39
- const {
40
- activeDescendantRef,
41
- id,
42
- inputRef,
43
- inputValue = '',
44
- scrollContainerRef,
45
- setAutocompleteSuggestion,
46
- setShowMenu,
47
- setInputValue,
48
- setIsMenuDirectlyActivated,
49
- setSelectedItemLength,
50
- showMenu
51
- } = useContext(AutocompleteContext);
52
- const {
53
- items,
54
- selectedItemIds,
55
- sortOnCloseFn,
56
- emptyStateText,
57
- addNewItem,
58
- loading,
59
- selectionVariant,
60
- filterFn = getDefaultItemFilter(inputValue),
61
- "aria-labelledby": ariaLabelledBy,
62
- onOpenChange,
63
- onSelectedChange = getDefaultOnSelectionChange(setInputValue),
64
- customScrollContainerRef
65
- } = props;
66
- const listContainerRef = useRef(null);
67
- const [highlightedItem, setHighlightedItem] = useState();
68
- const [sortedItemIds, setSortedItemIds] = useState(items.map(({
69
- id
70
- }) => id));
71
- const selectableItems = useMemo(() => items.map(selectableItem => {
72
- return { ...selectableItem,
73
- role: "option",
74
- id: selectableItem.id,
75
- selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined,
76
- onAction: item => {
77
- const otherSelectedItemIds = selectedItemIds.filter(selectedItemId => selectedItemId !== item.id);
78
- const newSelectedItemIds = selectedItemIds.includes(item.id) ? otherSelectedItemIds : [...otherSelectedItemIds, item.id];
79
- onSelectedChange && onSelectedChange(newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId, items)));
80
-
81
- if (selectionVariant === 'multiple') {
82
- setInputValue && setInputValue('');
83
- setAutocompleteSuggestion && setAutocompleteSuggestion('');
84
- } else {
85
- var _inputRef$current;
86
-
87
- setShowMenu && setShowMenu(false);
88
- 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);
89
- }
90
- }
91
- };
92
- }), [items, selectedItemIds]);
93
- const itemSortOrderData = useMemo(() => sortedItemIds.reduce((acc, curr, i) => {
94
- acc[curr] = i;
95
- return acc;
96
- }, {}), [sortedItemIds]);
97
- const sortedAndFilteredItemsToRender = useMemo(() => selectableItems.filter((item, i) => filterFn(item, i)).sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]), [selectableItems]);
98
- const allItemsToRender = useMemo(() => [// sorted and filtered selectable items
99
- ...sortedAndFilteredItemsToRender, // menu item used for creating a token from whatever is in the text input
100
- ...(addNewItem ? [{ ...addNewItem,
101
- leadingVisual: () => /*#__PURE__*/React.createElement(PlusIcon, null),
102
- onAction: (item, e) => {
103
- // TODO: make it possible to pass a leadingVisual when using `addNewItem`
104
- addNewItem.handleAddItem({ ...item,
105
- id: item.id || uniqueId(),
106
- leadingVisual: undefined
107
- });
108
-
109
- if (selectionVariant === 'multiple') {
110
- setInputValue && setInputValue('');
111
- setAutocompleteSuggestion && setAutocompleteSuggestion('');
112
- }
113
- }
114
- }] : [])], [sortedAndFilteredItemsToRender, addNewItem]);
115
- useFocusZone({
116
- containerRef: listContainerRef,
117
- focusOutBehavior: 'wrap',
118
- focusableElementFilter: element => {
119
- return !(element instanceof HTMLInputElement);
120
- },
121
- activeDescendantFocus: inputRef,
122
- onActiveDescendantChanged: (current, _previous, directlyActivated) => {
123
- if (activeDescendantRef) {
124
- activeDescendantRef.current = current || null;
125
- }
126
-
127
- if (current) {
128
- const selectedItem = selectableItems.find(item => item.id.toString() === (current === null || current === void 0 ? void 0 : current.dataset.id));
129
- setHighlightedItem(selectedItem);
130
- setIsMenuDirectlyActivated && setIsMenuDirectlyActivated(directlyActivated);
131
- }
132
-
133
- if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
134
- scrollIntoViewingArea(current, customScrollContainerRef.current);
135
- } else if (current && scrollContainerRef && scrollContainerRef.current && directlyActivated) {
136
- scrollIntoViewingArea(current, scrollContainerRef.current);
137
- }
138
- }
139
- }, [loading]);
140
- useEffect(() => {
141
- var _highlightedItem$text;
142
-
143
- if (!setAutocompleteSuggestion) {
144
- return;
145
- }
146
-
147
- if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
148
- setAutocompleteSuggestion(highlightedItem.text);
149
- } else {
150
- setAutocompleteSuggestion('');
151
- }
152
- }, [highlightedItem, inputValue]);
153
- useEffect(() => {
154
- if (showMenu === false) {
155
- setSortedItemIds([...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn(itemId => isItemSelected(itemId, selectedItemIds))));
156
- }
157
-
158
- onOpenChange && onOpenChange(Boolean(showMenu));
159
- }, [showMenu]);
160
- useEffect(() => {
161
- if (selectedItemIds.length) {
162
- setSelectedItemLength && setSelectedItemLength(selectedItemIds.length);
163
- }
164
- }, [selectedItemIds]);
165
- console.log('AutocompleteMenu re-rendering');
166
- return /*#__PURE__*/React.createElement(Box, {
167
- sx: !showMenu ? {
168
- // visually hides this label for sighted users
169
- position: 'absolute',
170
- width: '1px',
171
- height: '1px',
172
- padding: '0',
173
- margin: '-1px',
174
- overflow: 'hidden',
175
- clip: 'rect(0, 0, 0, 0)',
176
- whiteSpace: 'nowrap',
177
- borderWidth: '0'
178
- } : {}
179
- }, loading ? /*#__PURE__*/React.createElement(Box, {
180
- p: 3,
181
- display: "flex",
182
- justifyContent: "center"
183
- }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement("div", {
184
- ref: listContainerRef
185
- }, allItemsToRender.length ? /*#__PURE__*/React.createElement(ActionList, {
186
- selectionVariant: "multiple" // have to typecast to `ItemProps` because we have an extra property
187
- // on `items` for Autocomplete: `metadata`
188
- ,
189
- items: allItemsToRender,
190
- role: "listbox",
191
- id: `${id}-listbox`,
192
- "aria-labelledby": ariaLabelledBy
193
- }) : /*#__PURE__*/React.createElement(Box, {
194
- p: 3
195
- }, emptyStateText)));
196
- }
197
-
198
- AutocompleteMenu.displayName = "AutocompleteMenu";
199
- AutocompleteMenu.defaultProps = {
200
- emptyStateText: 'No selectable options',
201
- selectionVariant: 'single'
202
- };
203
- AutocompleteMenu.displayName = 'AutocompleteMenu';
204
- export default AutocompleteMenu;
@@ -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,51 +0,0 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- import React, { useCallback, useContext } from 'react';
4
- import { useAnchoredPosition } from '../hooks';
5
- import Overlay from '../Overlay';
6
- import { AutocompleteContext } from './AutocompleteContext';
7
- import { useCombinedRefs } from '../hooks/useCombinedRefs';
8
-
9
- // TODO: consider making 'aria-labelledby' required
10
- const AutocompleteOverlay = ({
11
- menuAnchorRef,
12
- overlayProps,
13
- children
14
- }) => {
15
- const {
16
- inputRef,
17
- scrollContainerRef,
18
- selectedItemLength,
19
- setShowMenu,
20
- showMenu = false
21
- } = useContext(AutocompleteContext);
22
- const {
23
- floatingElementRef,
24
- position
25
- } = useAnchoredPosition({
26
- side: 'outside-bottom',
27
- align: 'start',
28
- anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef
29
- }, [showMenu, selectedItemLength]);
30
- const combinedOverlayRef = useCombinedRefs(scrollContainerRef, floatingElementRef);
31
- const closeOptionList = useCallback(() => {
32
- setShowMenu && setShowMenu(false);
33
- }, [setShowMenu]);
34
- return /*#__PURE__*/React.createElement(Overlay, _extends({
35
- returnFocusRef: inputRef,
36
- preventFocusOnOpen: true,
37
- onClickOutside: closeOptionList,
38
- onEscape: closeOptionList,
39
- ref: combinedOverlayRef,
40
- top: position === null || position === void 0 ? void 0 : position.top,
41
- left: position === null || position === void 0 ? void 0 : position.left,
42
- visibility: showMenu ? 'visible' : 'hidden',
43
- sx: {
44
- overflow: "auto"
45
- }
46
- }, overlayProps), children);
47
- };
48
-
49
- AutocompleteOverlay.displayName = "AutocompleteOverlay";
50
- AutocompleteOverlay.displayName = 'AutocompleteOverlay';
51
- export default AutocompleteOverlay;
@@ -1,2 +0,0 @@
1
- export { default } from './Autocomplete';
2
- export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps, } from './Autocomplete';
@@ -1 +0,0 @@
1
- export { default } from './Autocomplete';
@@ -1,43 +0,0 @@
1
- import React, { ComponentPropsWithoutRef } from 'react';
2
- import { ComponentProps, MandateProps } from './utils/types';
3
- import Token, { TokenProps } from './Token/Token';
4
- import TokenLabel, { TokenLabelProps } from './Token/TokenLabel';
5
- import TokenProfile, { TokenProfileProps } from './Token/TokenProfile';
6
- import { TokenSizeKeys } from './Token/TokenBase';
7
- import { TextInputProps } from './TextInput';
8
- declare type AnyTokenProps = Partial<TokenProps & TokenLabelProps & TokenProfileProps>;
9
- declare type TokenDatum = MandateProps<AnyTokenProps, 'id' | 'text'>;
10
- declare type TextInputWithTokensInternalProps = {
11
- /**
12
- * The array of tokens to render
13
- */
14
- tokens: TokenDatum[];
15
- /**
16
- * The function that gets called when a token is removed
17
- */
18
- onTokenRemove: (tokenId: string | number) => void;
19
- /**
20
- * The component used to render each token
21
- */
22
- tokenComponent?: React.ComponentType<ComponentPropsWithoutRef<typeof Token> | ComponentPropsWithoutRef<typeof TokenLabel> | ComponentPropsWithoutRef<typeof TokenProfile>>;
23
- /**
24
- * The maximum height of the component. If the content in the input exceeds this height,
25
- * it will scroll vertically
26
- */
27
- maxHeight?: React.CSSProperties['maxHeight'];
28
- /**
29
- * Whether tokens should render inline horizontally. By default, tokens wrap to new lines.
30
- */
31
- preventTokenWrapping?: boolean;
32
- /**
33
- * The size of the tokens
34
- */
35
- tokenSizeVariant?: TokenSizeKeys;
36
- /**
37
- * Whether the remove buttons should be rendered in the tokens
38
- */
39
- hideTokenRemoveButtons?: boolean;
40
- } & TextInputProps;
41
- declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<TextInputWithTokensInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
42
- export declare type TextInputWithTokensProps = ComponentProps<typeof TextInputWithTokens>;
43
- export default TextInputWithTokens;