• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1//// [jsxComplexSignatureHasApplicabilityError.tsx]
2/// <reference path="/.lib/react16.d.ts" />
3
4import * as React from "react";
5
6
7interface Props<T extends OptionValues> {
8    value?: Option<T> | T;
9    onChange?(value: Option<T> | undefined): void;
10}
11
12type ExtractValueType<T> = T extends ReactSelectProps<infer U> ? U : never;
13
14export type ReactSingleSelectProps<
15    WrappedProps extends ReactSelectProps<any>
16> = Overwrite<
17    Omit<WrappedProps, "multi">,
18    Props<ExtractValueType<WrappedProps>>
19>;
20
21export function createReactSingleSelect<
22    WrappedProps extends ReactSelectProps<any>
23>(
24    WrappedComponent: React.ComponentType<WrappedProps>
25): React.ComponentType<ReactSingleSelectProps<WrappedProps>> {
26    return (props) => {
27        return (
28            <ReactSelectClass<ExtractValueType<WrappedProps>>
29                {...props}
30                multi={false}
31                autosize={false}
32                value={props.value}
33                onChange={(value) => {
34                    if (props.onChange) {
35                        props.onChange(value === null ? undefined : value);
36                    }
37                }}
38            />
39        );
40    };
41}
42
43
44// Copied from "type-zoo" version 3.4.0
45export type Omit<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
46export type Overwrite<T, U> = Omit<T, keyof T & keyof U> & U;
47
48// Everything below here copied from "@types/react-select" version 1.3.4
49declare class ReactSelectClass<TValue = OptionValues> extends React.Component<ReactSelectProps<TValue>> {
50    focus(): void;
51    setValue(value: Option<TValue>): void;
52}
53
54export type OptionComponentType<TValue = OptionValues> = React.ComponentType<OptionComponentProps<TValue>>;
55export type ValueComponentType<TValue = OptionValues> =  React.ComponentType<ValueComponentProps<TValue>>;
56
57export type HandlerRendererResult = JSX.Element | null | false;
58
59// Handlers
60export type FocusOptionHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
61export type SelectValueHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
62export type ArrowRendererHandler = (props: ArrowRendererProps) => HandlerRendererResult;
63export type ClearRendererHandler = () => HandlerRendererResult;
64export type FilterOptionHandler<TValue = OptionValues> = (option: Option<TValue>, filter: string) => boolean;
65export type FilterOptionsHandler<TValue = OptionValues> = (options: Options<TValue>, filter: string, currentValues: Options<TValue>) => Options<TValue>;
66export type InputRendererHandler = (props: { [key: string]: any }) => HandlerRendererResult;
67export type MenuRendererHandler<TValue = OptionValues> = (props: MenuRendererProps<TValue>) => HandlerRendererResult;
68export type OnCloseHandler = () => void;
69export type OnInputChangeHandler = (inputValue: string) => string;
70export type OnInputKeyDownHandler = React.KeyboardEventHandler<HTMLDivElement | HTMLInputElement>;
71export type OnMenuScrollToBottomHandler = () => void;
72export type OnOpenHandler = () => void;
73export type OnFocusHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
74export type OnBlurHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
75export type OptionRendererHandler<TValue = OptionValues> = (option: Option<TValue>) => HandlerRendererResult;
76export type ValueRendererHandler<TValue = OptionValues> = (option: Option<TValue>, index?: number) => HandlerRendererResult;
77export type OnValueClickHandler<TValue = OptionValues> = (option: Option<TValue>, event: React.MouseEvent<HTMLAnchorElement>) => void;
78export type IsOptionUniqueHandler<TValue = OptionValues> = (arg: { option: Option<TValue>, options: Options<TValue>, labelKey: string, valueKey: string }) => boolean;
79export type IsValidNewOptionHandler = (arg: { label: string }) => boolean;
80export type NewOptionCreatorHandler<TValue = OptionValues> = (arg: { label: string, labelKey: string, valueKey: string }) => Option<TValue>;
81export type PromptTextCreatorHandler = (filterText: string) => string;
82export type ShouldKeyDownEventCreateNewOptionHandler = (arg: { keyCode: number }) => boolean;
83
84export type OnChangeSingleHandler<TValue = OptionValues> = OnChangeHandler<TValue, Option<TValue>>;
85export type OnChangeMultipleHandler<TValue = OptionValues> = OnChangeHandler<TValue, Options<TValue>>;
86export type OnChangeHandler<TValue = OptionValues, TOption = Option<TValue> | Options<TValue>> = (newValue: TOption | null) => void;
87export type OnNewOptionClickHandler<TValue = OptionValues> = (option: Option<TValue>) => void;
88
89export type LoadOptionsHandler<TValue = OptionValues> = LoadOptionsAsyncHandler<TValue> | LoadOptionsLegacyHandler<TValue>;
90export type LoadOptionsAsyncHandler<TValue = OptionValues> = (input: string) => Promise<AutocompleteResult<TValue>>;
91export type LoadOptionsLegacyHandler<TValue = OptionValues> = (input: string, callback: (err: any, result: AutocompleteResult<TValue>) => void) => void;
92
93export interface AutocompleteResult<TValue = OptionValues> {
94    /** The search-results to be displayed  */
95    options: Options<TValue>;
96    /**
97     * Should be set to true, if and only if a longer query with the same prefix
98     * would return a subset of the results
99     * If set to true, more specific queries will not be sent to the server.
100     */
101    complete: boolean;
102}
103
104export type Options<TValue = OptionValues> = Array<Option<TValue>>;
105
106export interface Option<TValue = OptionValues> {
107    /** Text for rendering */
108    label?: string;
109    /** Value for searching */
110    value?: TValue;
111    /**
112     * Allow this option to be cleared
113     * @default true
114     */
115    clearableValue?: boolean;
116    /**
117     * Do not allow this option to be selected
118     * @default false
119     */
120    disabled?: boolean;
121    /**
122     * In the event that a custom menuRenderer is provided, Option should be able
123     * to accept arbitrary key-value pairs. See react-virtualized-select.
124     */
125    [property: string]: any;
126}
127
128export type OptionValues = string | number | boolean;
129
130export interface MenuRendererProps<TValue = OptionValues> {
131    /**
132     * The currently focused option; should be visible in the menu by default.
133     * default {}
134     */
135    focusedOption: Option<TValue>;
136
137    /**
138     * Callback to focus a new option; receives the option as a parameter.
139     */
140    focusOption: FocusOptionHandler<TValue>;
141
142    /**
143     * Option labels are accessible with this string key.
144     */
145    labelKey: string;
146
147    /**
148     * Ordered array of options to render.
149     */
150    options: Options<TValue>;
151
152    /**
153     * Callback to select a new option; receives the option as a parameter.
154     */
155    selectValue: SelectValueHandler<TValue>;
156
157    /**
158     * Array of currently selected options.
159     */
160    valueArray: Options<TValue>;
161
162    /**
163     * Callback to remove selection from option; receives the option as a parameter.
164     */
165    removeValue: SelectValueHandler<TValue>;
166
167    /**
168     * function which returns a custom way to render the options in the menu
169     */
170    optionRenderer: OptionRendererHandler<TValue>;
171}
172
173export interface OptionComponentProps<TValue = OptionValues> {
174    /**
175     * Classname(s) to apply to the option component.
176     */
177    className?: string;
178
179    /**
180     * Currently focused option.
181     */
182    focusOption?: Option<TValue>;
183
184    inputValue?: string;
185    instancePrefix?: string;
186
187    /**
188     * True if this option is disabled.
189     */
190    isDisabled?: boolean;
191
192    /**
193     * True if this option is focused.
194     */
195    isFocused?: boolean;
196
197    /**
198     * True if this option is selected.
199     */
200    isSelected?: boolean;
201
202    /**
203     * Callback to be invoked when this option is focused.
204     */
205    onFocus?: (option: Option<TValue>, event: any) => void;
206
207    /**
208     * Callback to be invoked when this option is selected.
209     */
210    onSelect?: (option: Option<TValue>, event: any) => void;
211
212    /**
213     * Option to be rendered by this component.
214     */
215    option: Option<TValue>;
216
217    /**
218     * Index of the option being rendered in the list
219     */
220    optionIndex?: number;
221
222    /**
223     * Callback to invoke when removing an option from a multi-selection. (Not necessarily the one
224     * being rendered)
225     */
226    removeValue?: (value: TValue | TValue[]) => void;
227
228    /**
229     * Callback to invoke to select an option. (Not necessarily the one being rendered)
230     */
231    selectValue?: (value: TValue | TValue[]) => void;
232}
233
234export interface ArrowRendererProps {
235    /**
236     * Arrow mouse down event handler.
237     */
238    onMouseDown: React.MouseEventHandler<any>;
239
240    /**
241     * whether the Select is open or not.
242     */
243    isOpen: boolean;
244}
245
246export interface ValueComponentProps<TValue = OptionValues> {
247    disabled: ReactSelectProps<TValue>['disabled'];
248    id: string;
249    instancePrefix: string;
250    onClick: OnValueClickHandler<TValue> | null;
251    onRemove?: SelectValueHandler<TValue>;
252    placeholder: ReactSelectProps<TValue>['placeholder'];
253    value: Option<TValue>;
254    values?: Array<Option<TValue>>;
255}
256
257export interface ReactSelectProps<TValue = OptionValues> extends React.Props<ReactSelectClass<TValue>> {
258    /**
259     * text to display when `allowCreate` is true.
260     * @default 'Add "{label}"?'
261     */
262    addLabelText?: string;
263    /**
264     * renders a custom drop-down arrow to be shown in the right-hand side of the select.
265     * @default undefined
266     */
267    arrowRenderer?: ArrowRendererHandler | null;
268    /**
269     * blurs the input element after a selection has been made. Handy for lowering the keyboard on mobile devices.
270     * @default false
271     */
272    autoBlur?: boolean;
273    /**
274     * autofocus the component on mount
275     * @deprecated. Use autoFocus instead
276     * @default false
277     */
278    autofocus?: boolean;
279    /**
280     * autofocus the component on mount
281     * @default false
282     */
283    autoFocus?: boolean;
284    /**
285     *  If enabled, the input will expand as the length of its value increases
286     */
287    autosize?: boolean;
288    /**
289     * whether pressing backspace removes the last item when there is no input value
290     * @default true
291     */
292    backspaceRemoves?: boolean;
293    /**
294     * Message to use for screenreaders to press backspace to remove the current item
295     * {label} is replaced with the item label
296     * @default "Press backspace to remove..."
297     */
298    backspaceToRemoveMessage?: string;
299    /**
300     * CSS className for the outer element
301     */
302    className?: string;
303    /**
304     * Prefix prepended to element default className if no className is defined
305     */
306    classNamePrefix?: string;
307    /**
308     * title for the "clear" control when `multi` is true
309     * @default "Clear all"
310     */
311    clearAllText?: string;
312    /**
313     * Renders a custom clear to be shown in the right-hand side of the select when clearable true
314     * @default undefined
315     */
316    clearRenderer?: ClearRendererHandler;
317    /**
318     * title for the "clear" control
319     * @default "Clear value"
320     */
321    clearValueText?: string;
322    /**
323     * whether to close the menu when a value is selected
324     * @default true
325     */
326    closeOnSelect?: boolean;
327    /**
328     * whether it is possible to reset value. if enabled, an X button will appear at the right side.
329     * @default true
330     */
331    clearable?: boolean;
332    /**
333     * whether backspace removes an item if there is no text input
334     * @default true
335     */
336    deleteRemoves?: boolean;
337    /**
338     * delimiter to use to join multiple values
339     * @default ","
340     */
341    delimiter?: string;
342    /**
343     * whether the Select is disabled or not
344     * @default false
345     */
346    disabled?: boolean;
347    /**
348     * whether escape clears the value when the menu is closed
349     * @default true
350     */
351    escapeClearsValue?: boolean;
352    /**
353     * method to filter a single option
354     */
355    filterOption?: FilterOptionHandler<TValue>;
356    /**
357     * method to filter the options array
358     */
359    filterOptions?: FilterOptionsHandler<TValue>;
360    /**
361     * id for the underlying HTML input element
362     * @default undefined
363     */
364    id?: string;
365    /**
366     * whether to strip diacritics when filtering
367     * @default true
368     */
369    ignoreAccents?: boolean;
370    /**
371     * whether to perform case-insensitive filtering
372     * @default true
373     */
374    ignoreCase?: boolean;
375    /**
376     * custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
377     * @default {}
378     */
379    inputProps?: { [key: string]: any };
380    /**
381     * renders a custom input
382     */
383    inputRenderer?: InputRendererHandler;
384    /**
385     * allows for synchronization of component id's on server and client.
386     * @see https://github.com/JedWatson/react-select/pull/1105
387     */
388    instanceId?: string;
389    /**
390     * whether the Select is loading externally or not (such as options being loaded).
391     * if true, a loading spinner will be shown at the right side.
392     * @default false
393     */
394    isLoading?: boolean;
395    /**
396     * (legacy mode) joins multiple values into a single form field with the delimiter
397     * @default false
398     */
399    joinValues?: boolean;
400    /**
401     * the option property to use for the label
402     * @default "label"
403     */
404    labelKey?: string;
405    /**
406     * (any, start) match the start or entire string when filtering
407     * @default "any"
408     */
409    matchPos?: string;
410    /**
411     * (any, label, value) which option property to filter on
412     * @default "any"
413     */
414    matchProp?: string;
415    /**
416     * buffer of px between the base of the dropdown and the viewport to shift if menu doesnt fit in viewport
417     * @default 0
418     */
419    menuBuffer?: number;
420    /**
421     * optional style to apply to the menu container
422     */
423    menuContainerStyle?: React.CSSProperties;
424    /**
425     * renders a custom menu with options
426     */
427    menuRenderer?: MenuRendererHandler<TValue>;
428    /**
429     * optional style to apply to the menu
430     */
431    menuStyle?: React.CSSProperties;
432    /**
433     * multi-value input
434     * @default false
435     */
436    multi?: boolean;
437    /**
438     * field name, for hidden `<input>` tag
439     */
440    name?: string;
441    /**
442     * placeholder displayed when there are no matching search results or a falsy value to hide it
443     * @default "No results found"
444     */
445    noResultsText?: string | JSX.Element;
446    /**
447     * onBlur handler: function (event) {}
448     */
449    onBlur?: OnBlurHandler;
450    /**
451     * whether to clear input on blur or not
452     * @default true
453     */
454    onBlurResetsInput?: boolean;
455    /**
456     * whether the input value should be reset when options are selected.
457     * Also input value will be set to empty if 'onSelectResetsInput=true' and
458     * Select will get new value that not equal previous value.
459     * @default true
460     */
461    onSelectResetsInput?: boolean;
462    /**
463     * whether to clear input when closing the menu through the arrow
464     * @default true
465     */
466    onCloseResetsInput?: boolean;
467    /**
468     * onChange handler: function (newValue) {}
469     */
470    onChange?: OnChangeHandler<TValue>;
471    /**
472     * fires when the menu is closed
473     */
474    onClose?: OnCloseHandler;
475    /**
476     * onFocus handler: function (event) {}
477     */
478    onFocus?: OnFocusHandler;
479    /**
480     * onInputChange handler: function (inputValue) {}
481     */
482    onInputChange?: OnInputChangeHandler;
483    /**
484     * onInputKeyDown handler: function (keyboardEvent) {}
485     */
486    onInputKeyDown?: OnInputKeyDownHandler;
487    /**
488     * fires when the menu is scrolled to the bottom; can be used to paginate options
489     */
490    onMenuScrollToBottom?: OnMenuScrollToBottomHandler;
491    /**
492     * fires when the menu is opened
493     */
494    onOpen?: OnOpenHandler;
495    /**
496     * boolean to enable opening dropdown when focused
497     * @default false
498     */
499    openOnClick?: boolean;
500    /**
501     * open the options menu when the input gets focus (requires searchable = true)
502     * @default true
503     */
504    openOnFocus?: boolean;
505    /**
506     * className to add to each option component
507     */
508    optionClassName?: string;
509    /**
510     * option component to render in dropdown
511     */
512    optionComponent?: OptionComponentType<TValue>;
513    /**
514     * function which returns a custom way to render the options in the menu
515     */
516    optionRenderer?: OptionRendererHandler<TValue>;
517    /**
518     * array of Select options
519     * @default false
520     */
521    options?: Options<TValue>;
522    /**
523     * number of options to jump when using page up/down keys
524     * @default 5
525     */
526    pageSize?: number;
527    /**
528     * field placeholder, displayed when there's no value
529     * @default "Select..."
530     */
531    placeholder?: string | JSX.Element;
532    /**
533     * whether the selected option is removed from the dropdown on multi selects
534     * @default true
535     */
536    removeSelected?: boolean;
537    /**
538     * applies HTML5 required attribute when needed
539     * @default false
540     */
541    required?: boolean;
542    /**
543     * value to use when you clear the control
544     */
545    resetValue?: any;
546    /**
547     * use react-select in right-to-left direction
548     * @default false
549     */
550    rtl?: boolean;
551    /**
552     * whether the viewport will shift to display the entire menu when engaged
553     * @default true
554     */
555    scrollMenuIntoView?: boolean;
556    /**
557     * whether to enable searching feature or not
558     * @default true;
559     */
560    searchable?: boolean;
561    /**
562     * whether to select the currently focused value when the  [tab]  key is pressed
563     */
564    tabSelectsValue?: boolean;
565    /**
566     * initial field value
567     */
568    value?: Option<TValue> | Options<TValue> | string | string[] | number | number[] | boolean;
569    /**
570     * the option property to use for the value
571     * @default "value"
572     */
573    valueKey?: string;
574    /**
575     * function which returns a custom way to render the value selected
576     * @default false
577     */
578    valueRenderer?: ValueRendererHandler<TValue>;
579    /**
580     *  optional style to apply to the control
581     */
582    style?: React.CSSProperties;
583
584    /**
585     *  optional tab index of the control
586     */
587    tabIndex?: string | number;
588
589    /**
590     *  value component to render
591     */
592    valueComponent?: ValueComponentType<TValue>;
593
594    /**
595     *  optional style to apply to the component wrapper
596     */
597    wrapperStyle?: React.CSSProperties;
598
599    /**
600     * onClick handler for value labels: function (value, event) {}
601     */
602    onValueClick?: OnValueClickHandler<TValue>;
603
604    /**
605     *  pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
606     */
607    simpleValue?: boolean;
608}
609
610
611//// [jsxComplexSignatureHasApplicabilityError.js]
612"use strict";
613/// <reference path="react16.d.ts" />
614var __assign = (this && this.__assign) || function () {
615    __assign = Object.assign || function(t) {
616        for (var s, i = 1, n = arguments.length; i < n; i++) {
617            s = arguments[i];
618            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
619                t[p] = s[p];
620        }
621        return t;
622    };
623    return __assign.apply(this, arguments);
624};
625exports.__esModule = true;
626exports.createReactSingleSelect = void 0;
627var React = require("react");
628function createReactSingleSelect(WrappedComponent) {
629    return function (props) {
630        return (React.createElement(ReactSelectClass, __assign({}, props, { multi: false, autosize: false, value: props.value, onChange: function (value) {
631                if (props.onChange) {
632                    props.onChange(value === null ? undefined : value);
633                }
634            } })));
635    };
636}
637exports.createReactSingleSelect = createReactSingleSelect;
638