@primer/components 0.0.0-20219815255 → 0.0.0-202198182351

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,326 +0,0 @@
1
- import React from 'react';
2
- import { ComponentProps } from './utils/types';
3
- import { TokenSizeKeys } from './Token/TokenBase';
4
- declare type AnyReactComponent = React.ComponentType<any>;
5
- declare type TextInputWithTokensInternalProps<TokenComponentType extends AnyReactComponent> = {
6
- /**
7
- * The array of tokens to render
8
- */
9
- tokens: TokenComponentType extends React.ComponentType<infer TokenProps> ? TokenProps[] : never;
10
- /**
11
- * The function that gets called when a token is removed
12
- */
13
- onTokenRemove: (tokenId: string | number) => void;
14
- /**
15
- * The component used to render each token
16
- */
17
- tokenComponent?: TokenComponentType;
18
- /**
19
- * The maximum height of the component. If the content in the input exceeds this height,
20
- * it will scroll vertically
21
- */
22
- maxHeight?: React.CSSProperties['maxHeight'];
23
- /**
24
- * Whether tokens should render inline horizontally. By default, tokens wrap to new lines.
25
- */
26
- preventTokenWrapping?: boolean;
27
- /**
28
- * The size of the tokens
29
- */
30
- size?: TokenSizeKeys;
31
- /**
32
- * Whether the remove buttons should be rendered in the tokens
33
- */
34
- hideTokenRemoveButtons?: boolean;
35
- };
36
- declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<TextInputWithTokensInternalProps<AnyReactComponent> & Omit<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
37
- ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
38
- }, string | number | symbol> & Omit<Pick<{
39
- [x: string]: any;
40
- [x: number]: any;
41
- } & {
42
- theme?: any;
43
- } & {
44
- as?: string | React.ComponentType<any> | undefined;
45
- forwardedAs?: string | React.ComponentType<any> | undefined;
46
- }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast" | "wrapperRef"> & {
47
- className?: string | undefined;
48
- icon?: React.ComponentType<{
49
- className?: string | undefined;
50
- }> | undefined;
51
- wrapperRef?: React.RefObject<HTMLSpanElement> | undefined;
52
- } & Pick<{
53
- color?: string | undefined;
54
- maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
55
- minWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
56
- translate?: "yes" | "no" | undefined;
57
- width?: import("styled-system").ResponsiveValue<import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
58
- hidden?: boolean | undefined;
59
- children?: React.ReactNode;
60
- ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
61
- slot?: string | undefined;
62
- style?: React.CSSProperties | undefined;
63
- title?: string | undefined;
64
- key?: React.Key | null | undefined;
65
- defaultChecked?: boolean | undefined;
66
- defaultValue?: string | number | readonly string[] | undefined;
67
- suppressContentEditableWarning?: boolean | undefined;
68
- suppressHydrationWarning?: boolean | undefined;
69
- accessKey?: string | undefined;
70
- className?: string | undefined;
71
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
72
- contextMenu?: string | undefined;
73
- dir?: string | undefined;
74
- draggable?: (boolean | "true" | "false") | undefined;
75
- id?: string | undefined;
76
- lang?: string | undefined;
77
- placeholder?: string | undefined;
78
- spellCheck?: (boolean | "true" | "false") | undefined;
79
- tabIndex?: number | undefined;
80
- radioGroup?: string | undefined;
81
- role?: React.AriaRole | undefined;
82
- about?: string | undefined;
83
- datatype?: string | undefined;
84
- inlist?: any;
85
- prefix?: string | undefined;
86
- property?: string | undefined;
87
- resource?: string | undefined;
88
- typeof?: string | undefined;
89
- vocab?: string | undefined;
90
- autoCapitalize?: string | undefined;
91
- autoCorrect?: string | undefined;
92
- autoSave?: string | undefined;
93
- itemProp?: string | undefined;
94
- itemScope?: boolean | undefined;
95
- itemType?: string | undefined;
96
- itemID?: string | undefined;
97
- itemRef?: string | undefined;
98
- results?: number | undefined;
99
- security?: string | undefined;
100
- unselectable?: "on" | "off" | undefined;
101
- inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
102
- is?: string | undefined;
103
- 'aria-activedescendant'?: string | undefined;
104
- 'aria-atomic'?: boolean | "true" | "false" | undefined;
105
- 'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
106
- 'aria-busy'?: boolean | "true" | "false" | undefined;
107
- 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
108
- 'aria-colcount'?: number | undefined;
109
- 'aria-colindex'?: number | undefined;
110
- 'aria-colspan'?: number | undefined;
111
- 'aria-controls'?: string | undefined;
112
- 'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
113
- 'aria-describedby'?: string | undefined;
114
- 'aria-details'?: string | undefined;
115
- 'aria-disabled'?: boolean | "true" | "false" | undefined;
116
- 'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
117
- 'aria-errormessage'?: string | undefined;
118
- 'aria-expanded'?: boolean | "true" | "false" | undefined;
119
- 'aria-flowto'?: string | undefined;
120
- 'aria-grabbed'?: boolean | "true" | "false" | undefined;
121
- 'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
122
- 'aria-hidden'?: boolean | "true" | "false" | undefined;
123
- 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
124
- 'aria-keyshortcuts'?: string | undefined;
125
- 'aria-label'?: string | undefined;
126
- 'aria-labelledby'?: string | undefined;
127
- 'aria-level'?: number | undefined;
128
- 'aria-live'?: "off" | "assertive" | "polite" | undefined;
129
- 'aria-modal'?: boolean | "true" | "false" | undefined;
130
- 'aria-multiline'?: boolean | "true" | "false" | undefined;
131
- 'aria-multiselectable'?: boolean | "true" | "false" | undefined;
132
- 'aria-orientation'?: "horizontal" | "vertical" | undefined;
133
- 'aria-owns'?: string | undefined;
134
- 'aria-placeholder'?: string | undefined;
135
- 'aria-posinset'?: number | undefined;
136
- 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
137
- 'aria-readonly'?: boolean | "true" | "false" | undefined;
138
- 'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
139
- 'aria-required'?: boolean | "true" | "false" | undefined;
140
- 'aria-roledescription'?: string | undefined;
141
- 'aria-rowcount'?: number | undefined;
142
- 'aria-rowindex'?: number | undefined;
143
- 'aria-rowspan'?: number | undefined;
144
- 'aria-selected'?: boolean | "true" | "false" | undefined;
145
- 'aria-setsize'?: number | undefined;
146
- 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
147
- 'aria-valuemax'?: number | undefined;
148
- 'aria-valuemin'?: number | undefined;
149
- 'aria-valuenow'?: number | undefined;
150
- 'aria-valuetext'?: string | undefined;
151
- dangerouslySetInnerHTML?: {
152
- __html: string;
153
- } | undefined;
154
- onCopy?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
155
- onCopyCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
156
- onCut?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
157
- onCutCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
158
- onPaste?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
159
- onPasteCapture?: React.ClipboardEventHandler<HTMLSpanElement> | undefined;
160
- onCompositionEnd?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
161
- onCompositionEndCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
162
- onCompositionStart?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
163
- onCompositionStartCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
164
- onCompositionUpdate?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
165
- onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLSpanElement> | undefined;
166
- onFocus?: React.FocusEventHandler<HTMLSpanElement> | undefined;
167
- onFocusCapture?: React.FocusEventHandler<HTMLSpanElement> | undefined;
168
- onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
169
- onBlurCapture?: React.FocusEventHandler<HTMLSpanElement> | undefined;
170
- onChange?: React.FormEventHandler<HTMLSpanElement> | undefined;
171
- onChangeCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
172
- onBeforeInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
173
- onBeforeInputCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
174
- onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
175
- onInputCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
176
- onReset?: React.FormEventHandler<HTMLSpanElement> | undefined;
177
- onResetCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
178
- onSubmit?: React.FormEventHandler<HTMLSpanElement> | undefined;
179
- onSubmitCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
180
- onInvalid?: React.FormEventHandler<HTMLSpanElement> | undefined;
181
- onInvalidCapture?: React.FormEventHandler<HTMLSpanElement> | undefined;
182
- onLoad?: React.ReactEventHandler<HTMLSpanElement> | undefined;
183
- onLoadCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
184
- onError?: React.ReactEventHandler<HTMLSpanElement> | undefined;
185
- onErrorCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
186
- onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
187
- onKeyDownCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
188
- onKeyPress?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
189
- onKeyPressCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
190
- onKeyUp?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
191
- onKeyUpCapture?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
192
- onAbort?: React.ReactEventHandler<HTMLSpanElement> | undefined;
193
- onAbortCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
194
- onCanPlay?: React.ReactEventHandler<HTMLSpanElement> | undefined;
195
- onCanPlayCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
196
- onCanPlayThrough?: React.ReactEventHandler<HTMLSpanElement> | undefined;
197
- onCanPlayThroughCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
198
- onDurationChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
199
- onDurationChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
200
- onEmptied?: React.ReactEventHandler<HTMLSpanElement> | undefined;
201
- onEmptiedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
202
- onEncrypted?: React.ReactEventHandler<HTMLSpanElement> | undefined;
203
- onEncryptedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
204
- onEnded?: React.ReactEventHandler<HTMLSpanElement> | undefined;
205
- onEndedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
206
- onLoadedData?: React.ReactEventHandler<HTMLSpanElement> | undefined;
207
- onLoadedDataCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
208
- onLoadedMetadata?: React.ReactEventHandler<HTMLSpanElement> | undefined;
209
- onLoadedMetadataCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
210
- onLoadStart?: React.ReactEventHandler<HTMLSpanElement> | undefined;
211
- onLoadStartCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
212
- onPause?: React.ReactEventHandler<HTMLSpanElement> | undefined;
213
- onPauseCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
214
- onPlay?: React.ReactEventHandler<HTMLSpanElement> | undefined;
215
- onPlayCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
216
- onPlaying?: React.ReactEventHandler<HTMLSpanElement> | undefined;
217
- onPlayingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
218
- onProgress?: React.ReactEventHandler<HTMLSpanElement> | undefined;
219
- onProgressCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
220
- onRateChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
221
- onRateChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
222
- onSeeked?: React.ReactEventHandler<HTMLSpanElement> | undefined;
223
- onSeekedCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
224
- onSeeking?: React.ReactEventHandler<HTMLSpanElement> | undefined;
225
- onSeekingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
226
- onStalled?: React.ReactEventHandler<HTMLSpanElement> | undefined;
227
- onStalledCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
228
- onSuspend?: React.ReactEventHandler<HTMLSpanElement> | undefined;
229
- onSuspendCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
230
- onTimeUpdate?: React.ReactEventHandler<HTMLSpanElement> | undefined;
231
- onTimeUpdateCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
232
- onVolumeChange?: React.ReactEventHandler<HTMLSpanElement> | undefined;
233
- onVolumeChangeCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
234
- onWaiting?: React.ReactEventHandler<HTMLSpanElement> | undefined;
235
- onWaitingCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
236
- onAuxClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
237
- onAuxClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
238
- onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
239
- onClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
240
- onContextMenu?: React.MouseEventHandler<HTMLSpanElement> | undefined;
241
- onContextMenuCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
242
- onDoubleClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
243
- onDoubleClickCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
244
- onDrag?: React.DragEventHandler<HTMLSpanElement> | undefined;
245
- onDragCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
246
- onDragEnd?: React.DragEventHandler<HTMLSpanElement> | undefined;
247
- onDragEndCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
248
- onDragEnter?: React.DragEventHandler<HTMLSpanElement> | undefined;
249
- onDragEnterCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
250
- onDragExit?: React.DragEventHandler<HTMLSpanElement> | undefined;
251
- onDragExitCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
252
- onDragLeave?: React.DragEventHandler<HTMLSpanElement> | undefined;
253
- onDragLeaveCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
254
- onDragOver?: React.DragEventHandler<HTMLSpanElement> | undefined;
255
- onDragOverCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
256
- onDragStart?: React.DragEventHandler<HTMLSpanElement> | undefined;
257
- onDragStartCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
258
- onDrop?: React.DragEventHandler<HTMLSpanElement> | undefined;
259
- onDropCapture?: React.DragEventHandler<HTMLSpanElement> | undefined;
260
- onMouseDown?: React.MouseEventHandler<HTMLSpanElement> | undefined;
261
- onMouseDownCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
262
- onMouseEnter?: React.MouseEventHandler<HTMLSpanElement> | undefined;
263
- onMouseLeave?: React.MouseEventHandler<HTMLSpanElement> | undefined;
264
- onMouseMove?: React.MouseEventHandler<HTMLSpanElement> | undefined;
265
- onMouseMoveCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
266
- onMouseOut?: React.MouseEventHandler<HTMLSpanElement> | undefined;
267
- onMouseOutCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
268
- onMouseOver?: React.MouseEventHandler<HTMLSpanElement> | undefined;
269
- onMouseOverCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
270
- onMouseUp?: React.MouseEventHandler<HTMLSpanElement> | undefined;
271
- onMouseUpCapture?: React.MouseEventHandler<HTMLSpanElement> | undefined;
272
- onSelect?: React.ReactEventHandler<HTMLSpanElement> | undefined;
273
- onSelectCapture?: React.ReactEventHandler<HTMLSpanElement> | undefined;
274
- onTouchCancel?: React.TouchEventHandler<HTMLSpanElement> | undefined;
275
- onTouchCancelCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
276
- onTouchEnd?: React.TouchEventHandler<HTMLSpanElement> | undefined;
277
- onTouchEndCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
278
- onTouchMove?: React.TouchEventHandler<HTMLSpanElement> | undefined;
279
- onTouchMoveCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
280
- onTouchStart?: React.TouchEventHandler<HTMLSpanElement> | undefined;
281
- onTouchStartCapture?: React.TouchEventHandler<HTMLSpanElement> | undefined;
282
- onPointerDown?: React.PointerEventHandler<HTMLSpanElement> | undefined;
283
- onPointerDownCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
284
- onPointerMove?: React.PointerEventHandler<HTMLSpanElement> | undefined;
285
- onPointerMoveCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
286
- onPointerUp?: React.PointerEventHandler<HTMLSpanElement> | undefined;
287
- onPointerUpCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
288
- onPointerCancel?: React.PointerEventHandler<HTMLSpanElement> | undefined;
289
- onPointerCancelCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
290
- onPointerEnter?: React.PointerEventHandler<HTMLSpanElement> | undefined;
291
- onPointerEnterCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
292
- onPointerLeave?: React.PointerEventHandler<HTMLSpanElement> | undefined;
293
- onPointerLeaveCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
294
- onPointerOver?: React.PointerEventHandler<HTMLSpanElement> | undefined;
295
- onPointerOverCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
296
- onPointerOut?: React.PointerEventHandler<HTMLSpanElement> | undefined;
297
- onPointerOutCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
298
- onGotPointerCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
299
- onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
300
- onLostPointerCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
301
- onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLSpanElement> | undefined;
302
- onScroll?: React.UIEventHandler<HTMLSpanElement> | undefined;
303
- onScrollCapture?: React.UIEventHandler<HTMLSpanElement> | undefined;
304
- onWheel?: React.WheelEventHandler<HTMLSpanElement> | undefined;
305
- onWheelCapture?: React.WheelEventHandler<HTMLSpanElement> | undefined;
306
- onAnimationStart?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
307
- onAnimationStartCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
308
- onAnimationEnd?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
309
- onAnimationEndCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
310
- onAnimationIteration?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
311
- onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
312
- onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
313
- onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
314
- block?: boolean | undefined;
315
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
316
- disabled?: boolean | undefined;
317
- variant?: "large" | "small" | undefined;
318
- hasIcon?: boolean | undefined;
319
- contrast?: boolean | undefined;
320
- } & {
321
- theme?: any;
322
- }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast"> & {
323
- as?: "input" | undefined;
324
- }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
325
- export declare type TextInputWithTokensProps = ComponentProps<typeof TextInputWithTokens>;
326
- export default TextInputWithTokens;
@@ -1,244 +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;"]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
40
-
41
-
42
- // The inner contents of `TextInputWithTokens` are separated so they may be passed to the `as`
43
- // prop of the `TextInput` component
44
- function TextInputWithTokensInnerComponent({
45
- tokens,
46
- onTokenRemove,
47
- tokenComponent: TokenComponent,
48
- size,
49
- hideTokenRemoveButtons,
50
- selectedTokenIndex,
51
- setSelectedTokenIndex,
52
- ...rest
53
- }, externalRef) {
54
- const ref = (0, _hooks.useProvidedRefOrCreate)(externalRef);
55
- const {
56
- onFocus,
57
- onKeyDown,
58
- ...inputPropsRest
59
- } = (0, _props.omit)(rest);
60
-
61
- const handleTokenFocus = tokenIndex => () => {
62
- setSelectedTokenIndex(tokenIndex);
63
- };
64
-
65
- const handleTokenBlur = () => {
66
- setSelectedTokenIndex(undefined);
67
- };
68
-
69
- const handleTokenKeyUp = event => {
70
- if (event.key === 'Escape') {
71
- var _ref$current;
72
-
73
- (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
74
- }
75
- };
76
-
77
- const handleInputFocus = event => {
78
- onFocus && onFocus(event);
79
- setSelectedTokenIndex(undefined);
80
- };
81
-
82
- const handleInputKeyDown = event => {
83
- var _ref$current2;
84
-
85
- if (onKeyDown) {
86
- onKeyDown(event);
87
- }
88
-
89
- if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
90
- return;
91
- }
92
-
93
- const lastToken = tokens[tokens.length - 1];
94
-
95
- if (event.key === 'Backspace' && lastToken) {
96
- onTokenRemove(lastToken.id);
97
-
98
- if (ref.current) {
99
- // TODO: eliminate the first hack by making changes to the Autocomplete component
100
- //
101
- // HACKS:
102
- // 1. Directly setting `ref.current.value` instead of updating state because the autocomplete
103
- // highlight behavior doesn't work correctly if we update the value with a setState action in onChange
104
- // 2. Adding an extra space so that when I backspace, it doesn't delete the last letter
105
- ref.current.value = `${lastToken.text} `;
106
- } // HACK: for some reason we need to wait a tick for `.select()` to work
107
-
108
-
109
- setTimeout(() => {
110
- var _ref$current3;
111
-
112
- (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
113
- }, 0);
114
- }
115
- };
116
-
117
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(InputWrapper, {
118
- key: "inputWrapper"
119
- }, /*#__PURE__*/_react.default.createElement(_UnstyledTextInput.default, _extends({
120
- ref: ref,
121
- onFocus: handleInputFocus,
122
- onKeyDown: handleInputKeyDown,
123
- type: "text",
124
- sx: {
125
- height: '100%'
126
- }
127
- }, inputPropsRest))), tokens.length && TokenComponent ? tokens.map(({
128
- id,
129
- ...tokenRest
130
- }, i) => /*#__PURE__*/_react.default.createElement(TokenComponent, _extends({
131
- key: id,
132
- onFocus: handleTokenFocus(i),
133
- onBlur: handleTokenBlur,
134
- onKeyUp: handleTokenKeyUp,
135
- isSelected: selectedTokenIndex === i,
136
- onRemove: () => {
137
- onTokenRemove(id);
138
- },
139
- hideRemoveButton: hideTokenRemoveButtons,
140
- size: size,
141
- tabIndex: 0
142
- }, tokenRest))) : null);
143
- } // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
144
-
145
-
146
- const TextInputWithTokensInnerComponentWithRef = /*#__PURE__*/_react.default.forwardRef(TextInputWithTokensInnerComponent);
147
-
148
- function TextInputWithTokensComponent({
149
- tokens,
150
- onTokenRemove,
151
- sx: sxProp,
152
- ...props
153
- }, ref) {
154
- const localInputRef = (0, _react.useRef)(null);
155
- const combinedInputRef = (0, _useCombinedRefs.useCombinedRefs)(localInputRef, ref);
156
- const [selectedTokenIndex, setSelectedTokenIndex] = (0, _react.useState)();
157
- const {
158
- containerRef
159
- } = (0, _useFocusZone.useFocusZone)({
160
- focusOutBehavior: 'wrap',
161
- bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
162
- focusableElementFilter: element => {
163
- return !element.getAttributeNames().includes('aria-hidden');
164
- },
165
- getNextFocusable: direction => {
166
- var _containerRef$current;
167
-
168
- if (!selectedTokenIndex && selectedTokenIndex !== 0) {
169
- return undefined;
170
- }
171
-
172
- let nextIndex = selectedTokenIndex + 1; // "+ 1" accounts for the first element: the text input
173
-
174
- if (direction === 'next') {
175
- nextIndex += 1;
176
- }
177
-
178
- if (direction === 'previous') {
179
- nextIndex -= 1;
180
- }
181
-
182
- if (nextIndex > tokens.length || nextIndex < 1) {
183
- return combinedInputRef.current || undefined;
184
- }
185
-
186
- return (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[nextIndex];
187
- }
188
- }, [selectedTokenIndex]);
189
-
190
- const handleTokenRemove = tokenId => {
191
- onTokenRemove(tokenId);
192
-
193
- if (selectedTokenIndex) {
194
- var _containerRef$current2;
195
-
196
- const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
197
- nextElementToFocus.focus();
198
- }
199
- };
200
-
201
- return /*#__PURE__*/_react.default.createElement(_TextInput.default, _extends({
202
- ref: combinedInputRef,
203
- wrapperRef: containerRef,
204
- as: TextInputWithTokensInnerComponentWithRef,
205
- selectedTokenIndex: selectedTokenIndex,
206
- setSelectedTokenIndex: setSelectedTokenIndex,
207
- tokens: tokens,
208
- onTokenRemove: handleTokenRemove,
209
- sx: {
210
- alignItems: 'center',
211
- flexWrap: props.preventTokenWrapping ? 'nowrap' : 'wrap',
212
- gap: '0.25rem',
213
- '> *': {
214
- flexShrink: 0
215
- },
216
- ...(props.block ? {
217
- display: 'flex',
218
- width: '100%'
219
- } : {}),
220
- ...(props.maxHeight ? {
221
- maxHeight: props.maxHeight,
222
- overflow: 'auto'
223
- } : {}),
224
- ...(props.preventTokenWrapping ? {
225
- overflow: 'auto'
226
- } : {}),
227
- ...sxProp
228
- }
229
- }, props));
230
- }
231
-
232
- TextInputWithTokensComponent.displayName = "TextInputWithTokensComponent";
233
-
234
- // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
235
- const TextInputWithTokens = /*#__PURE__*/_react.default.forwardRef(TextInputWithTokensComponent);
236
-
237
- TextInputWithTokens.defaultProps = {
238
- tokenComponent: _Token.default,
239
- size: 'xlarge',
240
- hideTokenRemoveButtons: false
241
- };
242
- TextInputWithTokens.displayName = 'TextInputWithTokens';
243
- var _default = TextInputWithTokens;
244
- exports.default = _default;
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { TokenBaseProps } from './TokenBase';
3
- export interface ProfileTokenProps extends TokenBaseProps {
4
- avatarSrc: string;
5
- }
6
- declare const ProfileToken: React.ForwardRefExoticComponent<Pick<ProfileTokenProps, "sizes" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "text" | "list" | "default" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "start" | "step" | "size" | "wrap" | "open" | "max" | "media" | "method" | "min" | "target" | "crossOrigin" | "href" | "classID" | "useMap" | "wmode" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "kind" | "srcLang" | "poster" | "onRemove" | "isSelected" | "avatarSrc"> & React.RefAttributes<HTMLElement>>;
7
- export default ProfileToken;
@@ -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;