@primer/components 0.0.0-202194183411 → 0.0.0-202194215436
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 +295 -299
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +358 -362
- 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/SelectMenu/SelectMenu.d.ts +2 -8
- package/lib/TextInput.d.ts +3 -6
- package/lib/TextInput.js +10 -9
- package/{lib-esm/Token/TokenLabel.d.ts → lib/Token/LabelToken.d.ts} +3 -3
- package/lib/Token/{TokenLabel.js → LabelToken.js} +23 -23
- package/lib/Token/Token.d.ts +2 -2
- package/lib/Token/Token.js +13 -13
- package/lib/Token/TokenBase.d.ts +3 -3
- package/lib/Token/TokenBase.js +17 -16
- package/lib/Token/TokenProfile.d.ts +1 -1
- package/lib/Token/TokenProfile.js +3 -3
- package/lib/Token/_RemoveTokenButton.d.ts +7 -1
- package/lib/Token/_RemoveTokenButton.js +40 -11
- package/lib/Token/index.d.ts +1 -1
- package/lib/Token/index.js +3 -3
- package/lib/hooks/useOverlay.d.ts +1 -2
- package/lib/hooks/useOverlay.js +6 -11
- package/lib/index.d.ts +1 -3
- package/lib/index.js +2 -18
- package/lib/utils/types.d.ts +0 -3
- 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/SelectMenu/SelectMenu.d.ts +2 -8
- package/lib-esm/TextInput.d.ts +3 -6
- package/lib-esm/TextInput.js +9 -8
- package/{lib/Token/TokenLabel.d.ts → lib-esm/Token/LabelToken.d.ts} +3 -3
- package/lib-esm/Token/{TokenLabel.js → LabelToken.js} +23 -23
- package/lib-esm/Token/Token.d.ts +2 -2
- package/lib-esm/Token/Token.js +13 -13
- package/lib-esm/Token/TokenBase.d.ts +3 -3
- package/lib-esm/Token/TokenBase.js +17 -16
- package/lib-esm/Token/TokenProfile.d.ts +1 -1
- package/lib-esm/Token/TokenProfile.js +3 -3
- package/lib-esm/Token/_RemoveTokenButton.d.ts +7 -1
- package/lib-esm/Token/_RemoveTokenButton.js +36 -10
- package/lib-esm/Token/index.d.ts +1 -1
- package/lib-esm/Token/index.js +1 -1
- package/lib-esm/hooks/useOverlay.d.ts +1 -2
- package/lib-esm/hooks/useOverlay.js +6 -11
- package/lib-esm/index.d.ts +1 -3
- package/lib-esm/index.js +1 -3
- package/lib-esm/utils/types.d.ts +0 -3
- 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 -146
- 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 -71
- package/lib/Autocomplete/index.d.ts +0 -2
- package/lib/Autocomplete/index.js +0 -15
- package/lib/TextInputWithTokens.d.ts +0 -43
- package/lib/TextInputWithTokens.js +0 -236
- package/lib/Token/_tokenButtonUtils.d.ts +0 -10
- package/lib/Token/_tokenButtonUtils.js +0 -42
- package/lib/_UnstyledTextInput.d.ts +0 -2
- package/lib/_UnstyledTextInput.js +0 -20
- package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
- package/lib/utils/scrollIntoViewingArea.js +0 -39
- 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 -127
- package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -71
- package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -202
- package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +0 -17
- package/lib-esm/Autocomplete/AutocompleteOverlay.js +0 -53
- package/lib-esm/Autocomplete/index.d.ts +0 -2
- package/lib-esm/Autocomplete/index.js +0 -1
- package/lib-esm/TextInputWithTokens.d.ts +0 -43
- package/lib-esm/TextInputWithTokens.js +0 -209
- package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -10
- package/lib-esm/Token/_tokenButtonUtils.js +0 -26
- package/lib-esm/_UnstyledTextInput.d.ts +0 -2
- package/lib-esm/_UnstyledTextInput.js +0 -7
- package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
- package/lib-esm/utils/scrollIntoViewingArea.js +0 -30
@@ -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,71 +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
|
-
|
49
|
-
const closeOptionList = () => {
|
50
|
-
setShowMenu && setShowMenu(false);
|
51
|
-
};
|
52
|
-
|
53
|
-
return /*#__PURE__*/_react.default.createElement(_Overlay.default, _extends({
|
54
|
-
returnFocusRef: inputRef,
|
55
|
-
preventFocusOnOpen: true,
|
56
|
-
onClickOutside: closeOptionList,
|
57
|
-
onEscape: closeOptionList,
|
58
|
-
ref: combinedOverlayRef,
|
59
|
-
top: position === null || position === void 0 ? void 0 : position.top,
|
60
|
-
left: position === null || position === void 0 ? void 0 : position.left,
|
61
|
-
visibility: showMenu ? 'visible' : 'hidden',
|
62
|
-
sx: {
|
63
|
-
overflow: "auto"
|
64
|
-
}
|
65
|
-
}, overlayProps), children);
|
66
|
-
};
|
67
|
-
|
68
|
-
AutocompleteOverlay.displayName = "AutocompleteOverlay";
|
69
|
-
AutocompleteOverlay.displayName = 'AutocompleteOverlay';
|
70
|
-
var _default = AutocompleteOverlay;
|
71
|
-
exports.default = _default;
|
@@ -1,15 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
Object.defineProperty(exports, "default", {
|
7
|
-
enumerable: true,
|
8
|
-
get: function () {
|
9
|
-
return _Autocomplete.default;
|
10
|
-
}
|
11
|
-
});
|
12
|
-
|
13
|
-
var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
|
14
|
-
|
15
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
@@ -1,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;
|
@@ -1,236 +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 _props = require("@styled-system/props");
|
11
|
-
|
12
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
13
|
-
|
14
|
-
var _focusZone = require("./behaviors/focusZone");
|
15
|
-
|
16
|
-
var _useCombinedRefs = require("./hooks/useCombinedRefs");
|
17
|
-
|
18
|
-
var _useFocusZone = require("./hooks/useFocusZone");
|
19
|
-
|
20
|
-
var _Token = _interopRequireDefault(require("./Token/Token"));
|
21
|
-
|
22
|
-
var _TextInput = _interopRequireDefault(require("./TextInput"));
|
23
|
-
|
24
|
-
var _hooks = require("./hooks");
|
25
|
-
|
26
|
-
var _UnstyledTextInput = _interopRequireDefault(require("./_UnstyledTextInput"));
|
27
|
-
|
28
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
29
|
-
|
30
|
-
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); }
|
31
|
-
|
32
|
-
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; }
|
33
|
-
|
34
|
-
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); }
|
35
|
-
|
36
|
-
const InputWrapper = _styledComponents.default.div.withConfig({
|
37
|
-
displayName: "TextInputWithTokens__InputWrapper",
|
38
|
-
componentId: "sc-8z94t5-0"
|
39
|
-
})(["order:1;flex-grow:1;"]);
|
40
|
-
|
41
|
-
// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
|
42
|
-
const TextInputWithTokensComponent = /*#__PURE__*/_react.default.forwardRef(({
|
43
|
-
icon: IconComponent,
|
44
|
-
contrast,
|
45
|
-
className,
|
46
|
-
block,
|
47
|
-
disabled,
|
48
|
-
theme,
|
49
|
-
sx: sxProp,
|
50
|
-
tokens,
|
51
|
-
onTokenRemove,
|
52
|
-
tokenComponent: TokenComponent,
|
53
|
-
preventTokenWrapping,
|
54
|
-
tokenSizeVariant,
|
55
|
-
hideTokenRemoveButtons,
|
56
|
-
selectedTokenIdx,
|
57
|
-
setSelectedTokenIdx,
|
58
|
-
...rest
|
59
|
-
}, externalRef) => {
|
60
|
-
const ref = (0, _hooks.useProvidedRefOrCreate)(externalRef);
|
61
|
-
const {
|
62
|
-
onFocus,
|
63
|
-
onKeyDown,
|
64
|
-
...inputPropsRest
|
65
|
-
} = (0, _props.omit)(rest);
|
66
|
-
|
67
|
-
const handleTokenFocus = tokenIdx => () => {
|
68
|
-
setSelectedTokenIdx(tokenIdx);
|
69
|
-
};
|
70
|
-
|
71
|
-
const handleTokenBlur = () => {
|
72
|
-
setSelectedTokenIdx(undefined);
|
73
|
-
};
|
74
|
-
|
75
|
-
const handleTokenKeyUp = e => {
|
76
|
-
if (e.key === 'Escape') {
|
77
|
-
var _ref$current;
|
78
|
-
|
79
|
-
ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
|
80
|
-
}
|
81
|
-
};
|
82
|
-
|
83
|
-
const handleInputFocus = e => {
|
84
|
-
onFocus && onFocus(e);
|
85
|
-
setSelectedTokenIdx(undefined);
|
86
|
-
};
|
87
|
-
|
88
|
-
const handleInputKeyDown = e => {
|
89
|
-
var _ref$current2;
|
90
|
-
|
91
|
-
if (onKeyDown) {
|
92
|
-
onKeyDown(e);
|
93
|
-
}
|
94
|
-
|
95
|
-
if (ref !== null && ref !== void 0 && (_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
|
96
|
-
return;
|
97
|
-
}
|
98
|
-
|
99
|
-
const lastToken = tokens[tokens.length - 1];
|
100
|
-
|
101
|
-
if (e.key === 'Backspace' && lastToken) {
|
102
|
-
onTokenRemove(lastToken.id);
|
103
|
-
|
104
|
-
if (ref !== null && ref !== void 0 && ref.current) {
|
105
|
-
// TODO: eliminate the first hack by making changes to the Autocomplete component
|
106
|
-
//
|
107
|
-
// HACKS:
|
108
|
-
// 1. Directly setting `ref.current.value` instead of updating state because the autocomplete
|
109
|
-
// highlight behavior doesn't work correctly if we update the value with a setState action in onChange
|
110
|
-
// 2. Adding an extra space so that when I backspace, it doesn't delete the last letter
|
111
|
-
ref.current.value = `${lastToken.text} `;
|
112
|
-
} // HACK: for some reason we need to wait a tick for `.select()` to work
|
113
|
-
|
114
|
-
|
115
|
-
setTimeout(() => {
|
116
|
-
var _ref$current3;
|
117
|
-
|
118
|
-
ref === null || ref === void 0 ? void 0 : (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
|
119
|
-
}, 1);
|
120
|
-
}
|
121
|
-
};
|
122
|
-
|
123
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(InputWrapper, {
|
124
|
-
key: "inputWrapper"
|
125
|
-
}, /*#__PURE__*/_react.default.createElement(_UnstyledTextInput.default, _extends({
|
126
|
-
ref: ref,
|
127
|
-
disabled: disabled,
|
128
|
-
onFocus: handleInputFocus,
|
129
|
-
onKeyDown: handleInputKeyDown,
|
130
|
-
type: "text",
|
131
|
-
sx: {
|
132
|
-
height: '100%'
|
133
|
-
}
|
134
|
-
}, inputPropsRest))), tokens !== null && tokens !== void 0 && tokens.length && TokenComponent ? tokens.map(({
|
135
|
-
id,
|
136
|
-
...tokenRest
|
137
|
-
}, i) => /*#__PURE__*/_react.default.createElement(TokenComponent, _extends({
|
138
|
-
key: id,
|
139
|
-
onFocus: handleTokenFocus(i),
|
140
|
-
onBlur: handleTokenBlur,
|
141
|
-
onKeyUp: handleTokenKeyUp,
|
142
|
-
isSelected: selectedTokenIdx === i,
|
143
|
-
handleRemove: () => {
|
144
|
-
onTokenRemove(id);
|
145
|
-
},
|
146
|
-
hideRemoveButton: hideTokenRemoveButtons,
|
147
|
-
variant: tokenSizeVariant,
|
148
|
-
tabIndex: 0
|
149
|
-
}, tokenRest))) : null);
|
150
|
-
});
|
151
|
-
|
152
|
-
const TextInputWithTokens = /*#__PURE__*/_react.default.forwardRef(({
|
153
|
-
tokens,
|
154
|
-
onTokenRemove,
|
155
|
-
sx: sxProp,
|
156
|
-
...props
|
157
|
-
}, ref) => {
|
158
|
-
const localInputRef = (0, _react.useRef)(null);
|
159
|
-
const combinedInputRef = (0, _useCombinedRefs.useCombinedRefs)(localInputRef, ref);
|
160
|
-
const [selectedTokenIdx, setSelectedTokenIdx] = (0, _react.useState)();
|
161
|
-
const {
|
162
|
-
containerRef
|
163
|
-
} = (0, _useFocusZone.useFocusZone)({
|
164
|
-
focusOutBehavior: 'wrap',
|
165
|
-
bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
|
166
|
-
focusableElementFilter: element => {
|
167
|
-
return !element.getAttributeNames().includes('aria-hidden');
|
168
|
-
},
|
169
|
-
getNextFocusable: direction => {
|
170
|
-
var _containerRef$current;
|
171
|
-
|
172
|
-
if (!selectedTokenIdx && selectedTokenIdx !== 0) {
|
173
|
-
return undefined;
|
174
|
-
}
|
175
|
-
|
176
|
-
let nextIndex = selectedTokenIdx + 1; // "+ 1" accounts for the first element: the text input
|
177
|
-
|
178
|
-
if (direction === 'next') {
|
179
|
-
nextIndex += 1;
|
180
|
-
}
|
181
|
-
|
182
|
-
if (direction === 'previous') {
|
183
|
-
nextIndex -= 1;
|
184
|
-
}
|
185
|
-
|
186
|
-
if (nextIndex > tokens.length || nextIndex < 1) {
|
187
|
-
return combinedInputRef.current || undefined;
|
188
|
-
}
|
189
|
-
|
190
|
-
return containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[nextIndex];
|
191
|
-
}
|
192
|
-
}, [selectedTokenIdx]);
|
193
|
-
|
194
|
-
const handleTokenRemove = tokenId => {
|
195
|
-
onTokenRemove(tokenId);
|
196
|
-
|
197
|
-
if (selectedTokenIdx) {
|
198
|
-
var _containerRef$current2;
|
199
|
-
|
200
|
-
const nextElementToFocus = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIdx];
|
201
|
-
nextElementToFocus.focus();
|
202
|
-
}
|
203
|
-
};
|
204
|
-
|
205
|
-
return /*#__PURE__*/_react.default.createElement(_TextInput.default, _extends({
|
206
|
-
ref: combinedInputRef,
|
207
|
-
wrapperRef: containerRef,
|
208
|
-
as: TextInputWithTokensComponent,
|
209
|
-
selectedTokenIdx: selectedTokenIdx,
|
210
|
-
setSelectedTokenIdx: setSelectedTokenIdx,
|
211
|
-
tokens: tokens,
|
212
|
-
onTokenRemove: handleTokenRemove,
|
213
|
-
sx: {
|
214
|
-
'alignItems': 'center',
|
215
|
-
'flexWrap': props.preventTokenWrapping ? 'nowrap' : 'wrap',
|
216
|
-
'gap': '0.25rem',
|
217
|
-
'> *': {
|
218
|
-
'flexShrink': 0
|
219
|
-
},
|
220
|
-
...(props.block ? {
|
221
|
-
display: 'flex',
|
222
|
-
width: '100%'
|
223
|
-
} : {}),
|
224
|
-
...sxProp
|
225
|
-
}
|
226
|
-
}, props));
|
227
|
-
});
|
228
|
-
|
229
|
-
TextInputWithTokens.defaultProps = {
|
230
|
-
tokenComponent: _Token.default,
|
231
|
-
tokenSizeVariant: "xl",
|
232
|
-
hideTokenRemoveButtons: false
|
233
|
-
};
|
234
|
-
TextInputWithTokens.displayName = 'TextInputWithTokens';
|
235
|
-
var _default = TextInputWithTokens;
|
236
|
-
exports.default = _default;
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import { TokenSizeKeys } from "./TokenBase";
|
2
|
-
export interface TokenButtonProps {
|
3
|
-
borderOffset?: number;
|
4
|
-
parentTokenTag: 'span' | 'button' | 'a';
|
5
|
-
variant?: TokenSizeKeys;
|
6
|
-
parentTokenIsInteractive?: boolean;
|
7
|
-
}
|
8
|
-
export declare const variants: (...args: any[]) => any;
|
9
|
-
export declare const tokenButtonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
10
|
-
export declare const getTokenButtonIconSize: (variant?: TokenSizeKeys | undefined) => number;
|
@@ -1,42 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.getTokenButtonIconSize = exports.tokenButtonStyles = exports.variants = void 0;
|
7
|
-
|
8
|
-
var _styledComponents = require("styled-components");
|
9
|
-
|
10
|
-
var _styledSystem = require("styled-system");
|
11
|
-
|
12
|
-
var _constants = require("../constants");
|
13
|
-
|
14
|
-
var _TokenBase = require("./TokenBase");
|
15
|
-
|
16
|
-
const variants = (0, _styledSystem.variant)({
|
17
|
-
variants: {
|
18
|
-
sm: {
|
19
|
-
height: `${_TokenBase.tokenSizes.sm}px`,
|
20
|
-
width: `${_TokenBase.tokenSizes.sm}px`
|
21
|
-
},
|
22
|
-
md: {
|
23
|
-
height: `${_TokenBase.tokenSizes.md}px`,
|
24
|
-
width: `${_TokenBase.tokenSizes.md}px`
|
25
|
-
},
|
26
|
-
lg: {
|
27
|
-
height: `${_TokenBase.tokenSizes.lg}px`,
|
28
|
-
width: `${_TokenBase.tokenSizes.lg}px`
|
29
|
-
},
|
30
|
-
xl: {
|
31
|
-
height: `${_TokenBase.tokenSizes.xl}px`,
|
32
|
-
width: `${_TokenBase.tokenSizes.xl}px`
|
33
|
-
}
|
34
|
-
}
|
35
|
-
});
|
36
|
-
exports.variants = variants;
|
37
|
-
const tokenButtonStyles = (0, _styledComponents.css)(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}"], (0, _constants.get)('colors.fade.fg10'), (0, _constants.get)('colors.fade.fg15'));
|
38
|
-
exports.tokenButtonStyles = tokenButtonStyles;
|
39
|
-
|
40
|
-
const getTokenButtonIconSize = variant => _TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize] * 0.75;
|
41
|
-
|
42
|
-
exports.getTokenButtonIconSize = getTokenButtonIconSize;
|
@@ -1,20 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
9
|
-
|
10
|
-
var _sx = _interopRequireDefault(require("./sx"));
|
11
|
-
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
|
-
|
14
|
-
const UnstyledTextInput = _styledComponents.default.input.withConfig({
|
15
|
-
displayName: "_UnstyledTextInput__UnstyledTextInput",
|
16
|
-
componentId: "sc-1jgl33s-0"
|
17
|
-
})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], _sx.default);
|
18
|
-
|
19
|
-
var _default = UnstyledTextInput;
|
20
|
-
exports.default = _default;
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const scrollIntoViewingArea: (child: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical', startMargin?: number, endMargin?: number, behavior?: ScrollBehavior) => void;
|
@@ -1,39 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.scrollIntoViewingArea = void 0;
|
7
|
-
|
8
|
-
const scrollIntoViewingArea = (child, container, direction = 'vertical', startMargin = 8, endMargin = 0, behavior = 'smooth') => {
|
9
|
-
const startSide = direction === 'vertical' ? 'top' : 'left';
|
10
|
-
const endSide = direction === 'vertical' ? 'bottom' : 'right';
|
11
|
-
const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
|
12
|
-
const {
|
13
|
-
[startSide]: childStart,
|
14
|
-
[endSide]: childEnd
|
15
|
-
} = child.getBoundingClientRect();
|
16
|
-
const {
|
17
|
-
[startSide]: containerStart,
|
18
|
-
[endSide]: containerEnd
|
19
|
-
} = container.getBoundingClientRect();
|
20
|
-
const isChildStartAboveViewingArea = childStart < containerStart + endMargin;
|
21
|
-
const isChildBottomBelowViewingArea = childEnd > containerEnd - startMargin;
|
22
|
-
|
23
|
-
if (isChildStartAboveViewingArea) {
|
24
|
-
const scrollHeightToChildStart = childStart - containerStart + container[scrollSide];
|
25
|
-
container.scrollTo({
|
26
|
-
behavior,
|
27
|
-
[startSide]: scrollHeightToChildStart - endMargin
|
28
|
-
});
|
29
|
-
} else if (isChildBottomBelowViewingArea) {
|
30
|
-
const scrollHeightToChildBottom = childEnd - containerEnd + container[scrollSide];
|
31
|
-
container.scrollTo({
|
32
|
-
behavior,
|
33
|
-
[startSide]: scrollHeightToChildBottom + startMargin
|
34
|
-
});
|
35
|
-
} // either completely in view or outside viewing area on both ends, don't scroll
|
36
|
-
|
37
|
-
};
|
38
|
-
|
39
|
-
exports.scrollIntoViewingArea = scrollIntoViewingArea;
|
@@ -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,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;
|