@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.
Files changed (96) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/dist/browser.esm.js +295 -299
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +358 -362
  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-esm/Token/TokenLabel.d.ts → lib/Token/LabelToken.d.ts} +3 -3
  15. package/lib/Token/{TokenLabel.js → LabelToken.js} +23 -23
  16. package/lib/Token/Token.d.ts +2 -2
  17. package/lib/Token/Token.js +13 -13
  18. package/lib/Token/TokenBase.d.ts +3 -3
  19. package/lib/Token/TokenBase.js +17 -16
  20. package/lib/Token/TokenProfile.d.ts +1 -1
  21. package/lib/Token/TokenProfile.js +3 -3
  22. package/lib/Token/_RemoveTokenButton.d.ts +7 -1
  23. package/lib/Token/_RemoveTokenButton.js +40 -11
  24. package/lib/Token/index.d.ts +1 -1
  25. package/lib/Token/index.js +3 -3
  26. package/lib/hooks/useOverlay.d.ts +1 -2
  27. package/lib/hooks/useOverlay.js +6 -11
  28. package/lib/index.d.ts +1 -3
  29. package/lib/index.js +2 -18
  30. package/lib/utils/types.d.ts +0 -3
  31. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +1 -2
  32. package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -11
  33. package/lib-esm/FilteredActionList/FilteredActionList.js +31 -3
  34. package/lib-esm/Overlay.d.ts +1 -2
  35. package/lib-esm/Overlay.js +5 -8
  36. package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -8
  37. package/lib-esm/TextInput.d.ts +3 -6
  38. package/lib-esm/TextInput.js +9 -8
  39. package/{lib/Token/TokenLabel.d.ts → lib-esm/Token/LabelToken.d.ts} +3 -3
  40. package/lib-esm/Token/{TokenLabel.js → LabelToken.js} +23 -23
  41. package/lib-esm/Token/Token.d.ts +2 -2
  42. package/lib-esm/Token/Token.js +13 -13
  43. package/lib-esm/Token/TokenBase.d.ts +3 -3
  44. package/lib-esm/Token/TokenBase.js +17 -16
  45. package/lib-esm/Token/TokenProfile.d.ts +1 -1
  46. package/lib-esm/Token/TokenProfile.js +3 -3
  47. package/lib-esm/Token/_RemoveTokenButton.d.ts +7 -1
  48. package/lib-esm/Token/_RemoveTokenButton.js +36 -10
  49. package/lib-esm/Token/index.d.ts +1 -1
  50. package/lib-esm/Token/index.js +1 -1
  51. package/lib-esm/hooks/useOverlay.d.ts +1 -2
  52. package/lib-esm/hooks/useOverlay.js +6 -11
  53. package/lib-esm/index.d.ts +1 -3
  54. package/lib-esm/index.js +1 -3
  55. package/lib-esm/utils/types.d.ts +0 -3
  56. package/package.json +1 -1
  57. package/lib/Autocomplete/Autocomplete.d.ts +0 -40
  58. package/lib/Autocomplete/Autocomplete.js +0 -68
  59. package/lib/Autocomplete/AutocompleteContext.d.ts +0 -17
  60. package/lib/Autocomplete/AutocompleteContext.js +0 -11
  61. package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
  62. package/lib/Autocomplete/AutocompleteInput.js +0 -146
  63. package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -71
  64. package/lib/Autocomplete/AutocompleteMenu.js +0 -223
  65. package/lib/Autocomplete/AutocompleteOverlay.d.ts +0 -17
  66. package/lib/Autocomplete/AutocompleteOverlay.js +0 -71
  67. package/lib/Autocomplete/index.d.ts +0 -2
  68. package/lib/Autocomplete/index.js +0 -15
  69. package/lib/TextInputWithTokens.d.ts +0 -43
  70. package/lib/TextInputWithTokens.js +0 -236
  71. package/lib/Token/_tokenButtonUtils.d.ts +0 -10
  72. package/lib/Token/_tokenButtonUtils.js +0 -42
  73. package/lib/_UnstyledTextInput.d.ts +0 -2
  74. package/lib/_UnstyledTextInput.js +0 -20
  75. package/lib/utils/scrollIntoViewingArea.d.ts +0 -1
  76. package/lib/utils/scrollIntoViewingArea.js +0 -39
  77. package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -40
  78. package/lib-esm/Autocomplete/Autocomplete.js +0 -47
  79. package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -17
  80. package/lib-esm/Autocomplete/AutocompleteContext.js +0 -2
  81. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
  82. package/lib-esm/Autocomplete/AutocompleteInput.js +0 -127
  83. package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -71
  84. package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -202
  85. package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts +0 -17
  86. package/lib-esm/Autocomplete/AutocompleteOverlay.js +0 -53
  87. package/lib-esm/Autocomplete/index.d.ts +0 -2
  88. package/lib-esm/Autocomplete/index.js +0 -1
  89. package/lib-esm/TextInputWithTokens.d.ts +0 -43
  90. package/lib-esm/TextInputWithTokens.js +0 -209
  91. package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -10
  92. package/lib-esm/Token/_tokenButtonUtils.js +0 -26
  93. package/lib-esm/_UnstyledTextInput.d.ts +0 -2
  94. package/lib-esm/_UnstyledTextInput.js +0 -7
  95. package/lib-esm/utils/scrollIntoViewingArea.d.ts +0 -1
  96. 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,2 +0,0 @@
1
- export { default } from './Autocomplete';
2
- export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps, } from './Autocomplete';
@@ -1,15 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "default", {
7
- enumerable: true,
8
- get: function () {
9
- return _Autocomplete.default;
10
- }
11
- });
12
-
13
- var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
14
-
15
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -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,2 +0,0 @@
1
- declare const UnstyledTextInput: import("styled-components").StyledComponent<"input", any, import("./sx").SxProp, never>;
2
- export default UnstyledTextInput;
@@ -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,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;