@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.
- package/CHANGELOG.md +1 -1
- package/dist/browser.esm.js +254 -253
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +332 -331
- package/dist/browser.umd.js.map +1 -1
- package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
- package/lib/AnchoredOverlay/AnchoredOverlay.js +3 -11
- package/lib/FilteredActionList/FilteredActionList.js +31 -5
- package/lib/Overlay.d.ts +1 -2
- package/lib/Overlay.js +5 -10
- package/lib/Token/TokenBase.d.ts +15 -1
- package/lib/hooks/useOpenAndCloseFocus.d.ts +1 -2
- package/lib/hooks/useOpenAndCloseFocus.js +2 -7
- package/lib/hooks/useOverlay.d.ts +1 -2
- package/lib/hooks/useOverlay.js +2 -4
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -8
- package/lib/utils/types/index.d.ts +0 -1
- package/lib/utils/types/index.js +0 -13
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -11
- package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
- package/lib-esm/Overlay.d.ts +1 -2
- package/lib-esm/Overlay.js +5 -8
- package/lib-esm/Token/TokenBase.d.ts +15 -1
- package/lib-esm/hooks/useOpenAndCloseFocus.d.ts +1 -2
- package/lib-esm/hooks/useOpenAndCloseFocus.js +2 -7
- package/lib-esm/hooks/useOverlay.d.ts +1 -2
- package/lib-esm/hooks/useOverlay.js +2 -4
- package/lib-esm/index.d.ts +0 -1
- package/lib-esm/index.js +0 -1
- package/lib-esm/utils/types/index.d.ts +0 -1
- package/lib-esm/utils/types/index.js +1 -2
- package/package.json +1 -1
- package/lib/Autocomplete/Autocomplete.d.ts +0 -40
- package/lib/Autocomplete/Autocomplete.js +0 -68
- package/lib/Autocomplete/AutocompleteContext.d.ts +0 -17
- package/lib/Autocomplete/AutocompleteContext.js +0 -11
- package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib/Autocomplete/AutocompleteInput.js +0 -150
- package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -71
- package/lib/Autocomplete/AutocompleteMenu.js +0 -223
- package/lib/Autocomplete/AutocompleteOverlay.d.ts +0 -17
- package/lib/Autocomplete/AutocompleteOverlay.js +0 -74
- package/lib/Autocomplete/index.d.ts +0 -2
- package/lib/Autocomplete/index.js +0 -15
- package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
- package/lib/utils/scrollIntoViewingArea.js +0 -39
- package/lib/utils/types/MandateProps.d.ts +0 -3
- package/lib/utils/types/MandateProps.js +0 -1
- package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -40
- package/lib-esm/Autocomplete/Autocomplete.js +0 -47
- package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -17
- package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib-esm/Autocomplete/AutocompleteInput.js +0 -131
- package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -71
- package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -204
- package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +0 -17
- package/lib-esm/Autocomplete/AutocompleteOverlay.js +0 -56
- package/lib-esm/Autocomplete/index.d.ts +0 -2
- package/lib-esm/Autocomplete/index.js +0 -1
- package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
- package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
- package/lib-esm/utils/types/MandateProps.d.ts +0 -3
- 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;
|