@primer/components 0.0.0-202196125110 → 0.0.0-202196141044

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