@wix/design-system
Version:
@wix/design-system
369 lines • 20.8 kB
TypeScript
export function DEFAULT_VALUE_PARSER(option: any): any;
export namespace DEFAULT_POPOVER_PROPS {
let appendTo: string;
let flip: boolean;
let fixed: boolean;
let placement: string;
let width: string;
let minWidth: number;
}
export default InputWithOptions;
declare class InputWithOptions extends React.Component<any, any, any> {
constructor(props: any);
inputClasses(): void;
dropdownClasses(): void;
dropdownAdditionalProps(): void;
inputAdditionalProps(): void;
rootAdditionalProps(): {};
/**
* An array of key codes that act as manual submit. Will be used within
* onKeyDown(event).
*
* @returns {KeyboardEvent.key[]}
*/
getManualSubmitKeys(): KeyboardEvent.key[];
state: {
inputValue: any;
showOptions: boolean;
lastOptionsShow: number;
isEditing: boolean;
};
uniqueId: string;
_onSelect(option: any, isSelectedOption: any): void;
_onFocus(e: any): void;
_onBlur(event: any): void;
_onChange(event: any): void;
_onKeyDown(event: any): void;
/**
* Sets focus on the input element
* @param {FocusOptions} options
*/
focus(options?: FocusOptions): void;
/**
* Removes focus on the input element
*/
blur(): void;
/**
* Selects all text in the input element
*/
select(): void;
/**
* Hides dropdown options
*/
hideOptions(): void;
/**
* Shows dropdown options
*/
showOptions(): void;
_onManuallyInput(inputValue?: string): void;
_renderDropdownLayout(): React.JSX.Element;
isDropdownLayoutVisible(): any;
_onInputClicked(event: any): void;
_onOpenChange(open: any, reason: any, doubleClickThreshold?: number): void;
closeOnSelect(): any;
onCompositionChange(isComposing: any): void;
componentDidUpdate(prevProps: any, prevState: any): void;
input: React.RefObject<any>;
renderInput(): React.DetailedReactHTMLElement<any, HTMLElement>;
_onOptionMarked: (option: any, optionElementId: any) => void;
dropdownLayout: import("../DropdownLayout/DropdownLayout").DropdownLayout | null | undefined;
_renderNativeSelect(): React.JSX.Element;
render(): React.JSX.Element;
get isReadOnly(): any;
/**
* Determine if the provided key should cause the dropdown to be opened.
*
* @param {KeyboardEvent.key}
* @returns {boolean}
*/
shouldOpenDropdown(key: any): boolean;
/**
* Determine if the provided key should delegate the keydown event to the
* DropdownLayout.
*
* @param {KeyboardEvent.key}
* @returns {boolean}
*/
shouldDelegateKeyDown(key: any): boolean;
/**
* Determine if the provided key should cause manual submit.
*
* @param {KeyboardEvent.key}
* @returns {boolean}
*/
shouldPerformManualSubmit(key: any): boolean;
_focused: boolean | undefined;
/** Checks if focus event is related to selecting an option */
_didSelectOption: (event: any) => boolean;
/**
* Clears the input.
*
* @param event delegated to the onClear call
*/
clear: (event: any) => void;
}
declare namespace InputWithOptions {
let defaultProps: {
onSelect: () => void;
options: never[];
closeOnSelect: boolean;
inputElement: React.JSX.Element;
valueParser: (option: any) => any;
dropdownWidth: null;
popoverProps: {
appendTo: string;
flip: boolean;
fixed: boolean;
placement: string;
width: string;
minWidth: number;
};
dropdownOffsetLeft: string;
showOptionsIfEmptyInput: boolean;
autocomplete: string;
native: boolean;
onClickOutside?: (e: TouchEvent | MouseEvent) => void;
overflow?: import("..").Overflow;
className?: string;
onMouseEnter?: React.MouseEventHandler<HTMLElement>;
onMouseLeave?: React.MouseEventHandler<HTMLElement>;
dataHook?: string;
tabIndex?: number;
visible?: boolean;
size?: "small" | "medium" | "large" | "tiny" | undefined;
scrollbar?: "overlay" | "fixed";
autoFocus?: boolean;
onMouseDown?: React.MouseEventHandler<HTMLElement>;
hasMore?: boolean;
loadMore?: (page: number) => void;
dropDirectionUp?: boolean;
focusOnSelectedOption?: boolean;
onClose?: () => void;
onOptionMarked?: (option: import("..").DropdownLayoutValueOption | null, optionElementId?: string) => void;
onOptionsNavigate?: (option: import("..").DropdownLayoutValueOption | null) => void;
selectedId?: string | number;
fixedHeader?: React.ReactNode;
fixedFooter?: React.ReactNode;
maxHeightPixels?: string | number;
minWidthPixels?: string | number;
withArrow?: boolean;
itemHeight?: import("..").DropdownLayoutItemHeight;
selectedHighlight?: boolean;
inContainer?: boolean;
infiniteScroll?: boolean;
markedOption?: boolean | string | number;
focusOnOption?: string | number;
scrollToOption?: string | number;
listType?: import("..").ListType;
listboxId?: string;
overlayScrollbarProps?: {
OverlayScrollbarHostElement: import("../providers/useOverlayScrollbar/useOverlayScrollbar").OverlayScrollbarHost;
OverlayScrollbarContentElement: import("../providers/useOverlayScrollbar/useOverlayScrollbar").OverlayScrollbarContent;
};
ref?: string | ((instance: import("../DropdownLayout/DropdownLayout").DropdownLayout | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<import("../DropdownLayout/DropdownLayout").DropdownLayout> | ((instance: import("../Input").InputImperativeActions | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<import("../Input").InputImperativeActions> | null | undefined;
key?: React.Key | null | undefined;
children?: React.ReactNode;
id?: string;
role?: string;
ariaControls?: string;
ariaDescribedby?: string;
ariaLabel?: string;
autoSelect?: boolean;
defaultValue?: import("../Input").InputValue;
disabled?: boolean;
status?: import("../Input").InputStatus;
statusMessage?: React.ReactNode;
statusMessageTooltipProps?: import("..").TooltipCommonProps;
hideStatusSuffix?: boolean;
forceFocus?: boolean;
forceHover?: boolean;
maxLength?: number;
menuArrow?: boolean;
clearButton?: boolean;
focusOnClearClick?: boolean;
name?: string;
border?: "standard" | "round" | "bottomLine" | "none";
noLeftBorderRadius?: boolean;
noRightBorderRadius?: boolean;
onBlur?: React.FocusEventHandler<HTMLInputElement>;
onChange?: React.ChangeEventHandler<HTMLInputElement>;
onClear?: (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
onCompositionChange?: (isComposing: boolean) => void;
onEnterPressed?: React.KeyboardEventHandler<HTMLInputElement>;
onEscapePressed?: React.KeyboardEventHandler<HTMLInputElement>;
onFocus?: React.FocusEventHandler<HTMLInputElement>;
onInputClicked?: React.MouseEventHandler<HTMLInputElement | HTMLDivElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
onCopy?: React.ClipboardEventHandler<HTMLInputElement>;
placeholder?: string;
prefix?: React.ReactNode;
readOnly?: boolean;
disableEditing?: boolean;
rtl?: boolean;
suffix?: React.ReactNode;
textOverflow?: "clip" | "ellipsis";
tooltipPlacement?: import("..").TooltipProps["placement"];
type?: string;
value?: string | number;
withSelection?: boolean;
required?: boolean;
min?: import("../Input").MinValue;
max?: import("../Input").MaxValue;
step?: number;
customInput?: React.ReactNode | Function;
pattern?: string;
inputRef?: (input: HTMLInputElement) => void;
inputmode?: string;
ariaRoledescription?: string;
clearButtonTooltipContent?: React.ReactNode;
clearButtonTooltipProps?: import("..").TooltipCommonProps;
clearButtonAriaLabel?: string;
inputElementRef?: any;
};
let propTypes: {
/** Use a customized input component instead of the default @wix/design-system `<Input/>` component */
inputElement: PropTypes.Requireable<PropTypes.ReactElementLike>;
/** Closes DropdownLayout on option selection */
closeOnSelect: PropTypes.Requireable<boolean>;
/** Node which is displayed in dropdown */
customDropdown: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/** A callback which is called when the user performs a Submit-Action.
* Submit-Action triggers are: "Enter", "Tab", [typing any defined delimiters], Paste action.
* `onManuallyInput(values: Array<string>): void - The array of strings is the result of splitting the input value by the given delimiters */
onManuallyInput: PropTypes.Requireable<(...args: any[]) => any>;
/** A callback which is called when options dropdown is shown */
onOptionsShow: PropTypes.Requireable<(...args: any[]) => any>;
/** A callback which is called when options dropdown is hidden */
onOptionsHide: PropTypes.Requireable<(...args: any[]) => any>;
/** Function that receives an option, and should return the value to be displayed. */
valueParser: PropTypes.Requireable<(...args: any[]) => any>;
/** Sets the width of the dropdown */
dropdownWidth: PropTypes.Requireable<string>;
/** Sets the offset of the dropdown from the left */
dropdownOffsetLeft: PropTypes.Requireable<string>;
/** Controls whether to show options if input is empty */
showOptionsIfEmptyInput: PropTypes.Requireable<boolean>;
/** Mark in bold word parts based on search pattern */
highlight: PropTypes.Requireable<boolean>;
/** Indicates whether to render using the native select element */
native: PropTypes.Requireable<boolean>;
/** common popover props */
popoverProps: PropTypes.Requireable<PropTypes.InferProps<{
appendTo: PropTypes.Requireable<string>;
maxWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
minWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
flip: PropTypes.Requireable<boolean>;
fixed: PropTypes.Requireable<boolean>;
placement: PropTypes.Requireable<string>;
dynamicWidth: PropTypes.Requireable<boolean>;
}>>;
onClickOutside?: React.Validator<((e: TouchEvent | MouseEvent) => void) | null | undefined> | undefined;
options?: React.Validator<import("..").DropdownLayoutOption[] | null | undefined> | undefined;
overflow?: React.Validator<import("..").Overflow | null | undefined> | undefined;
className?: React.Validator<string | null | undefined> | undefined;
onMouseEnter?: React.Validator<React.MouseEventHandler<HTMLElement> | null | undefined> | undefined;
onMouseLeave?: React.Validator<React.MouseEventHandler<HTMLElement> | null | undefined> | undefined;
dataHook?: React.Validator<string | null | undefined> | undefined;
tabIndex?: React.Validator<number | null | undefined> | undefined;
visible?: React.Validator<boolean | null | undefined> | undefined;
size?: React.Validator<import("../Input").InputSize | null | undefined> | undefined;
scrollbar?: React.Validator<"fixed" | "overlay" | null | undefined> | undefined;
autoFocus?: React.Validator<boolean | null | undefined> | undefined;
onMouseDown?: React.Validator<React.MouseEventHandler<HTMLElement> | null | undefined> | undefined;
onSelect?: React.Validator<((option: import("..").DropdownLayoutValueOption, sameOptionWasPicked: boolean) => void) | null | undefined> | undefined;
hasMore?: React.Validator<boolean | null | undefined> | undefined;
loadMore?: React.Validator<((page: number) => void) | null | undefined> | undefined;
dropDirectionUp?: React.Validator<boolean | null | undefined> | undefined;
focusOnSelectedOption?: React.Validator<boolean | null | undefined> | undefined;
onClose?: React.Validator<(() => void) | null | undefined> | undefined;
onOptionMarked?: React.Validator<((option: import("..").DropdownLayoutValueOption | null, optionElementId?: string) => void) | null | undefined> | undefined;
onOptionsNavigate?: React.Validator<((option: import("..").DropdownLayoutValueOption | null) => void) | null | undefined> | undefined;
selectedId?: React.Validator<string | number | null | undefined> | undefined;
fixedHeader?: React.Validator<React.ReactNode> | undefined;
fixedFooter?: React.Validator<React.ReactNode> | undefined;
maxHeightPixels?: React.Validator<string | number | null | undefined> | undefined;
minWidthPixels?: React.Validator<string | number | null | undefined> | undefined;
withArrow?: React.Validator<boolean | null | undefined> | undefined;
itemHeight?: React.Validator<import("..").DropdownLayoutItemHeight | null | undefined> | undefined;
selectedHighlight?: React.Validator<boolean | null | undefined> | undefined;
inContainer?: React.Validator<boolean | null | undefined> | undefined;
infiniteScroll?: React.Validator<boolean | null | undefined> | undefined;
markedOption?: React.Validator<string | number | boolean | null | undefined> | undefined;
focusOnOption?: React.Validator<string | number | null | undefined> | undefined;
scrollToOption?: React.Validator<string | number | null | undefined> | undefined;
listType?: React.Validator<import("..").ListType | null | undefined> | undefined;
listboxId?: React.Validator<string | null | undefined> | undefined;
overlayScrollbarProps?: React.Validator<{
OverlayScrollbarHostElement: import("../providers/useOverlayScrollbar/useOverlayScrollbar").OverlayScrollbarHost;
OverlayScrollbarContentElement: import("../providers/useOverlayScrollbar/useOverlayScrollbar").OverlayScrollbarContent;
} | null | undefined> | undefined;
ref?: React.Validator<React.LegacyRef<import("../Input").InputImperativeActions> | undefined> | React.Validator<React.LegacyRef<import("../DropdownLayout/DropdownLayout").DropdownLayout> | undefined> | undefined;
key?: React.Validator<React.Key | null | undefined> | undefined;
children?: React.Validator<React.ReactNode> | undefined;
id?: React.Validator<string | null | undefined> | undefined;
role?: React.Validator<string | null | undefined> | undefined;
ariaControls?: React.Validator<string | null | undefined> | undefined;
ariaDescribedby?: React.Validator<string | null | undefined> | undefined;
ariaLabel?: React.Validator<string | null | undefined> | undefined;
autoSelect?: React.Validator<boolean | null | undefined> | undefined;
autocomplete?: React.Validator<string | null | undefined> | undefined;
defaultValue?: React.Validator<import("../Input").InputValue | null> | undefined;
disabled?: React.Validator<boolean | null | undefined> | undefined;
status?: React.Validator<import("../Input").InputStatus | null | undefined> | undefined;
statusMessage?: React.Validator<React.ReactNode> | undefined;
statusMessageTooltipProps?: React.Validator<import("..").TooltipCommonProps | null | undefined> | undefined;
hideStatusSuffix?: React.Validator<boolean | null | undefined> | undefined;
forceFocus?: React.Validator<boolean | null | undefined> | undefined;
forceHover?: React.Validator<boolean | null | undefined> | undefined;
maxLength?: React.Validator<number | null | undefined> | undefined;
menuArrow?: React.Validator<boolean | null | undefined> | undefined;
clearButton?: React.Validator<boolean | null | undefined> | undefined;
focusOnClearClick?: React.Validator<boolean | null | undefined> | undefined;
name?: React.Validator<string | null | undefined> | undefined;
border?: React.Validator<"none" | "round" | "standard" | "bottomLine" | null | undefined> | undefined;
noLeftBorderRadius?: React.Validator<boolean | null | undefined> | undefined;
noRightBorderRadius?: React.Validator<boolean | null | undefined> | undefined;
onBlur?: React.Validator<React.FocusEventHandler<HTMLInputElement> | null | undefined> | undefined;
onChange?: React.Validator<React.ChangeEventHandler<HTMLInputElement> | null | undefined> | undefined;
onClear?: React.Validator<((event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void) | null | undefined> | undefined;
onCompositionChange?: React.Validator<((isComposing: boolean) => void) | null | undefined> | undefined;
onEnterPressed?: React.Validator<React.KeyboardEventHandler<HTMLInputElement> | null | undefined> | undefined;
onEscapePressed?: React.Validator<React.KeyboardEventHandler<HTMLInputElement> | null | undefined> | undefined;
onFocus?: React.Validator<React.FocusEventHandler<HTMLInputElement> | null | undefined> | undefined;
onInputClicked?: React.Validator<React.MouseEventHandler<HTMLDivElement | HTMLInputElement> | null | undefined> | undefined;
onKeyDown?: React.Validator<React.KeyboardEventHandler<HTMLInputElement> | null | undefined> | undefined;
onKeyUp?: React.Validator<React.KeyboardEventHandler<HTMLInputElement> | null | undefined> | undefined;
onPaste?: React.Validator<React.ClipboardEventHandler<HTMLInputElement> | null | undefined> | undefined;
onCopy?: React.Validator<React.ClipboardEventHandler<HTMLInputElement> | null | undefined> | undefined;
placeholder?: React.Validator<string | null | undefined> | undefined;
prefix?: React.Validator<React.ReactNode> | undefined;
readOnly?: React.Validator<boolean | null | undefined> | undefined;
disableEditing?: React.Validator<boolean | null | undefined> | undefined;
rtl?: React.Validator<boolean | null | undefined> | undefined;
suffix?: React.Validator<React.ReactNode> | undefined;
textOverflow?: React.Validator<"clip" | "ellipsis" | null | undefined> | undefined;
tooltipPlacement?: React.Validator<import("popper.js").default.Placement | null | undefined> | undefined;
type?: React.Validator<string | null | undefined> | undefined;
value?: React.Validator<string | number | null | undefined> | undefined;
withSelection?: React.Validator<boolean | null | undefined> | undefined;
required?: React.Validator<boolean | null | undefined> | undefined;
min?: React.Validator<import("../Input").MinValue | null> | undefined;
max?: React.Validator<import("../Input").MaxValue | null> | undefined;
step?: React.Validator<number | null | undefined> | undefined;
customInput?: React.Validator<Function | React.ReactNode> | undefined;
pattern?: React.Validator<string | null | undefined> | undefined;
inputRef?: React.Validator<((input: HTMLInputElement) => void) | null | undefined> | undefined;
inputmode?: React.Validator<string | null | undefined> | undefined;
ariaRoledescription?: React.Validator<string | null | undefined> | undefined;
clearButtonTooltipContent?: React.Validator<React.ReactNode> | undefined;
clearButtonTooltipProps?: React.Validator<import("..").TooltipCommonProps | null | undefined> | undefined;
clearButtonAriaLabel?: React.Validator<string | null | undefined> | undefined;
inputElementRef?: React.Validator<any> | undefined;
};
let displayName: string;
}
import React from 'react';
import PropTypes from 'prop-types';
//# sourceMappingURL=InputWithOptions.d.ts.map