@skbkontur/react-ui 5.3.5 → 5.3.6
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.
- package/CHANGELOG.md +11 -0
- package/cjs/components/ComboBox/ComboBox.d.ts +4 -1
- package/cjs/components/ComboBox/ComboBox.js +5 -0
- package/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/cjs/components/MaskedInput/MaskedInput.d.ts +8 -0
- package/cjs/components/MaskedInput/MaskedInput.js +23 -2
- package/cjs/components/MaskedInput/MaskedInput.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.d.ts +3 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js +23 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.d.ts +3 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.js +8 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.js.map +1 -1
- package/components/ComboBox/ComboBox/ComboBox.js.map +1 -1
- package/components/ComboBox/ComboBox.d.ts +4 -1
- package/components/MaskedInput/MaskedInput/MaskedInput.js +11 -1
- package/components/MaskedInput/MaskedInput/MaskedInput.js.map +1 -1
- package/components/MaskedInput/MaskedInput.d.ts +8 -0
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +33 -12
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView.d.ts +3 -1
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js +4 -0
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox.d.ts +3 -1
- package/package.json +1 -1
|
@@ -20,6 +20,7 @@ var _rootNode = require("../../lib/rootNode");
|
|
|
20
20
|
|
|
21
21
|
var _featureFlagsContext = require("../../lib/featureFlagsContext");
|
|
22
22
|
|
|
23
|
+
|
|
23
24
|
var _CustomComboBoxTypes = require("./CustomComboBoxTypes");
|
|
24
25
|
|
|
25
26
|
var _CustomComboBoxReducer = require("./CustomComboBoxReducer");
|
|
@@ -91,6 +92,8 @@ var _tids = require("./tids");Object.keys(_tids).forEach(function (key) {if (key
|
|
|
91
92
|
|
|
92
93
|
|
|
93
94
|
|
|
95
|
+
|
|
96
|
+
|
|
94
97
|
|
|
95
98
|
|
|
96
99
|
|
|
@@ -366,6 +369,10 @@ CustomComboBox = exports.CustomComboBox = (0, _decorator.responsiveLayout)(_clas
|
|
|
366
369
|
|
|
367
370
|
|
|
368
371
|
|
|
372
|
+
|
|
373
|
+
|
|
374
|
+
|
|
375
|
+
|
|
369
376
|
|
|
370
377
|
|
|
371
378
|
|
|
@@ -475,6 +482,6 @@ CustomComboBox = exports.CustomComboBox = (0, _decorator.responsiveLayout)(_clas
|
|
|
475
482
|
* @public
|
|
476
483
|
*/;_proto.open = function open() {this.dispatch({ type: 'Open' });} /**
|
|
477
484
|
* @public
|
|
478
|
-
*/;_proto.close = function close() {this.dispatch({ type: 'Close' });};_proto.render = function render() {var _this3 = this;var viewProps = { align: this.props.align, borderless: this.props.borderless, disabled: this.props.disabled, disablePortal: this.props.disablePortal, editing: this.state.editing, error: this.props.error, items: this.state.items, loading: this.state.loading, opened: this.state.opened, drawArrow: this.props.drawArrow, menuPos: this.props.menuPos, menuAlign: this.props.menuAlign, placeholder: this.props.placeholder, size: this.props.size, textValue: this.state.textValue, totalCount: this.props.totalCount, value: this.props.value, showClearIcon: this.props.showClearIcon, warning: this.props.warning, 'aria-describedby': this.props['aria-describedby'], 'aria-label': this.props['aria-label'], id: this.props.id, width: this.props.width, maxLength: this.props.maxLength, maxMenuHeight: this.props.maxMenuHeight, leftIcon: this.props.leftIcon, rightIcon: this.props.rightIcon, inputMode: this.props.inputMode, onValueChange: this.handleValueChange, onClickOutside: this.handleClickOutside, onFocus: this.handleFocus, onMobileClose: this.handleMobileClose, onFocusOutside: this.handleBlur, onInputBlur: this.handleInputBlur, onInputValueChange: function onInputValueChange(value) {return _this3.dispatch({ type: 'TextChange', value: value });}, onInputFocus: this.handleFocus, onInputClick: this.handleInputClick, onClearCrossClick: function onClearCrossClick() {return _this3.dispatch({ type: 'ClearCrossClick' });}, onInputKeyDown: function onInputKeyDown(event) {event.persist();_this3.dispatch({ type: 'KeyPress', event: event });}, onMouseEnter: this.props.onMouseEnter, onMouseOver: this.props.onMouseOver, onMouseLeave: this.props.onMouseLeave, renderItem: this.props.renderItem, renderNotFound: this.props.renderNotFound, itemWrapper: this.props.itemWrapper, renderValue: this.props.renderValue, renderTotalCount: this.props.renderTotalCount, renderAddButton: this.props.renderAddButton, repeatRequest: this.state.repeatRequest, requestStatus: this.state.requestStatus, refInput: function refInput(input) {_this3.input = input;}, refMenu: function refMenu(menu) {_this3.menu = menu;}, refInputLikeText: function refInputLikeText(inputLikeText) {_this3.inputLikeText = inputLikeText;} };return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this3.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this3.props, /*#__PURE__*/_react.default.createElement(_ComboBoxView.ComboBoxView, (0, _extends2.default)({}, viewProps, { size: _this3.props.size, ref: _this3.setRootNode })));});};_proto.componentDidMount = function componentDidMount() {this.dispatch({ type: 'Mount' }, false);if (this.props.autoFocus) {this.focus();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {if (prevState.editing && !this.state.editing) {this.handleBlur();}this.dispatch({ type: 'DidUpdate', prevProps: prevProps, prevState: prevState, fixValueChange: this.featureFlags.comboBoxAllowValueChangeInEditingState }, false);} /**
|
|
485
|
+
*/;_proto.close = function close() {this.dispatch({ type: 'Close' });};_proto.render = function render() {var _this3 = this;var viewProps = { align: this.props.align, borderless: this.props.borderless, disabled: this.props.disabled, disablePortal: this.props.disablePortal, editing: this.state.editing, error: this.props.error, items: this.state.items, loading: this.state.loading, opened: this.state.opened, drawArrow: this.props.drawArrow, menuPos: this.props.menuPos, menuAlign: this.props.menuAlign, placeholder: this.props.placeholder, size: this.props.size, textValue: this.state.textValue, totalCount: this.props.totalCount, value: this.props.value, showClearIcon: this.props.showClearIcon, warning: this.props.warning, 'aria-describedby': this.props['aria-describedby'], 'aria-label': this.props['aria-label'], id: this.props.id, width: this.props.width, maxLength: this.props.maxLength, maxMenuHeight: this.props.maxMenuHeight, leftIcon: this.props.leftIcon, rightIcon: this.props.rightIcon, inputMode: this.props.inputMode, mask: this.props.mask, maskChar: this.props.maskChar, formatChars: this.props.formatChars, onBeforePasteInMask: this.props.onBeforePasteInMask, onValueChange: this.handleValueChange, onClickOutside: this.handleClickOutside, onFocus: this.handleFocus, onMobileClose: this.handleMobileClose, onFocusOutside: this.handleBlur, onInputBlur: this.handleInputBlur, onInputValueChange: function onInputValueChange(value) {return _this3.dispatch({ type: 'TextChange', value: value });}, onInputFocus: this.handleFocus, onInputClick: this.handleInputClick, onClearCrossClick: function onClearCrossClick() {return _this3.dispatch({ type: 'ClearCrossClick' });}, onInputKeyDown: function onInputKeyDown(event) {event.persist();_this3.dispatch({ type: 'KeyPress', event: event });}, onMouseEnter: this.props.onMouseEnter, onMouseOver: this.props.onMouseOver, onMouseLeave: this.props.onMouseLeave, renderItem: this.props.renderItem, renderNotFound: this.props.renderNotFound, itemWrapper: this.props.itemWrapper, renderValue: this.props.renderValue, renderTotalCount: this.props.renderTotalCount, renderAddButton: this.props.renderAddButton, repeatRequest: this.state.repeatRequest, requestStatus: this.state.requestStatus, refInput: function refInput(input) {_this3.input = input;}, refMenu: function refMenu(menu) {_this3.menu = menu;}, refInputLikeText: function refInputLikeText(inputLikeText) {_this3.inputLikeText = inputLikeText;} };return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this3.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this3.props, /*#__PURE__*/_react.default.createElement(_ComboBoxView.ComboBoxView, (0, _extends2.default)({}, viewProps, { size: _this3.props.size, ref: _this3.setRootNode })));});};_proto.componentDidMount = function componentDidMount() {this.dispatch({ type: 'Mount' }, false);if (this.props.autoFocus) {this.focus();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {if (prevState.editing && !this.state.editing) {this.handleBlur();}this.dispatch({ type: 'DidUpdate', prevProps: prevProps, prevState: prevState, fixValueChange: this.featureFlags.comboBoxAllowValueChangeInEditingState }, false);} /**
|
|
479
486
|
* @public
|
|
480
487
|
*/;_proto.reset = function reset() {this.dispatch({ type: 'Reset' });};return CustomComboBox;}(_react.default.PureComponent), _CustomComboBox.__KONTUR_REACT_UI__ = 'CustomComboBox', _CustomComboBox.displayName = 'CustomComboBox', _CustomComboBox)) || _class) || _class;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactDom","_globalObject","_utils","_fixClickFocusIE","_CommonWrapper","_decorator","_rootNode","_featureFlagsContext","_CustomComboBoxTypes","_CustomComboBoxReducer","_ComboBoxView","_tids","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","_class","_CustomComboBox","DELAY_BEFORE_SHOW_LOADER","LOADER_SHOW_TIME","DefaultState","inputChanged","editing","items","loading","opened","focused","textValue","repeatRequest","undefined","requestStatus","ComboBoxRequestStatus","Unknown","size","CustomComboBox","responsiveLayout","rootNode","_React$PureComponent","_this","_len","arguments","length","args","Array","_key","apply","concat","state","requestId","cancelationToken","canOpenPopup","reducer","cancelLoaderDelay","focus","opts","props","disabled","withoutOpenDropdown","input","inputLikeText","selectInputText","selectAll","blur","handleBlur","dispatch","action","sync","updateState","effects","nextState","setState","stateAndEffect","_ref","handleEffect","React","version","search","ReactDOM","flushSync","effect","getState","getProps","handleValueChange","value","type","keepFocus","isMobileLayout","handleFocus","searchOnFocus","handleMobileClose","handleInputBlur","handleClickOutside","e","fixClickFocusIE","close","globalObject","setTimeout","handleInputClick","_inheritsLoose2","default","_proto","_search","_asyncToGenerator2","_regenerator","mark","_callee","query","_this2","getItems","cancelPromise","expectingId","wrap","_callee$","_context","prev","next","Promise","_","reject","loaderShowDelay","resolve","cancelLoader","taskWithDelay","catch","race","sent","t0","code","finish","stop","_x","cancelSearch","CancelationError","open","render","_this3","viewProps","align","borderless","disablePortal","error","drawArrow","menuPos","menuAlign","placeholder","totalCount","showClearIcon","warning","id","width","maxLength","maxMenuHeight","leftIcon","rightIcon","inputMode","onValueChange","onClickOutside","onFocus","onMobileClose","onFocusOutside","onInputBlur","onInputValueChange","onInputFocus","onInputClick","onClearCrossClick","onInputKeyDown","event","persist","onMouseEnter","onMouseOver","onMouseLeave","renderItem","renderNotFound","itemWrapper","renderValue","renderTotalCount","renderAddButton","refInput","refMenu","menu","refInputLikeText","createElement","ReactUIFeatureFlagsContext","Consumer","flags","featureFlags","getFullReactUIFlagsContext","CommonWrapper","ComboBoxView","_extends2","ref","setRootNode","componentDidMount","autoFocus","componentDidUpdate","prevProps","prevState","fixValueChange","comboBoxAllowValueChangeInEditingState","reset","PureComponent","__KONTUR_REACT_UI__","displayName"],"sources":["CustomComboBox.tsx"],"sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport type { Nullable } from '../../typings/utility-types';\nimport type { InputIconType, Input, ShowClearIcon } from '../../components/Input';\nimport type { Menu } from '../Menu';\nimport type { InputLikeText } from '../InputLikeText';\nimport type { MenuItemState } from '../../components/MenuItem';\nimport { CancelationError, taskWithDelay } from '../../lib/utils';\nimport { fixClickFocusIE } from '../../lib/events/fixClickFocusIE';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport type { ComboBoxExtendedItem } from '../../components/ComboBox';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { ReactUIFeatureFlags } from '../../lib/featureFlagsContext';\nimport { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from '../../lib/featureFlagsContext';\n\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\nimport type { CustomComboBoxAction, CustomComboBoxEffect } from './CustomComboBoxReducer';\nimport { reducer } from './CustomComboBoxReducer';\nimport { ComboBoxView } from './ComboBoxView';\n\nexport * from './tids';\n\nexport interface CustomComboBoxProps<T>\n extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n CommonProps {\n align?: 'left' | 'center' | 'right';\n autoFocus?: boolean;\n borderless?: boolean;\n disablePortal?: boolean;\n disabled?: boolean;\n /**\n * Cостояние валидации при ошибке.\n */\n error?: boolean;\n maxLength?: number;\n /**\n * Позволяет вручную задать текущую позицию выпадающего окна\n */\n menuPos?: 'top' | 'bottom';\n menuAlign?: 'left' | 'right';\n drawArrow?: boolean;\n leftIcon?: InputIconType;\n rightIcon?: InputIconType;\n searchOnFocus?: boolean;\n onValueChange?: (value: T) => void;\n onInputValueChange?: (value: string) => Nullable<string> | void;\n onUnexpectedInput?: (value: string) => void | null | T;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseOver?: (e: React.MouseEvent) => void;\n onMouseLeave?: (e: React.MouseEvent) => void;\n onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n placeholder?: string;\n size?: SizeProp;\n totalCount?: number;\n value?: Nullable<T>;\n showClearIcon?: ShowClearIcon;\n /**\n * Cостояние валидации при предупреждении.\n */\n warning?: boolean;\n width?: string | number;\n maxMenuHeight?: number | string;\n renderNotFound?: () => React.ReactNode;\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n renderItem: (item: T, state?: MenuItemState) => React.ReactNode;\n itemWrapper?: (item: T) => React.ComponentType;\n renderValue: (value: T) => React.ReactNode;\n renderAddButton?: (query?: string) => React.ReactNode;\n valueToString: (value: T) => string;\n itemToValue: (item: T) => string | number;\n getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n}\n\nexport interface CustomComboBoxState<T> {\n editing: boolean;\n loading: boolean;\n opened: boolean;\n textValue: string;\n items: Nullable<Array<ComboBoxExtendedItem<T>>>;\n inputChanged: boolean;\n focused: boolean;\n repeatRequest: () => void;\n requestStatus: ComboBoxRequestStatus;\n}\n\nexport const DELAY_BEFORE_SHOW_LOADER = 300;\nexport const LOADER_SHOW_TIME = 1000;\n\nexport const DefaultState = {\n inputChanged: false,\n editing: false,\n items: null,\n loading: false,\n opened: false,\n focused: false,\n textValue: '',\n repeatRequest: () => undefined,\n requestStatus: ComboBoxRequestStatus.Unknown,\n size: 'small',\n};\n\n@responsiveLayout\n@rootNode\nexport class CustomComboBox<T> extends React.PureComponent<CustomComboBoxProps<T>, CustomComboBoxState<T>> {\n public static __KONTUR_REACT_UI__ = 'CustomComboBox';\n public static displayName = 'CustomComboBox';\n\n public state: CustomComboBoxState<T> = DefaultState;\n public input: Nullable<Input>;\n public menu: Nullable<Menu>;\n public inputLikeText: Nullable<InputLikeText>;\n public requestId = 0;\n public loaderShowDelay: Nullable<Promise<void>>;\n private focused = false;\n private cancelationToken: Nullable<(reason?: Error) => void> = null;\n private isMobileLayout!: boolean;\n private featureFlags!: ReactUIFeatureFlags;\n private canOpenPopup = true;\n\n private reducer = reducer;\n public cancelLoaderDelay: () => void = () => null;\n\n /**\n * @public\n */\n public focus = (opts?: { withoutOpenDropdown?: boolean }) => {\n if (this.props.disabled) {\n return;\n }\n\n if (opts?.withoutOpenDropdown) {\n this.canOpenPopup = false;\n }\n\n if (this.input) {\n this.input.focus();\n } else if (this.inputLikeText) {\n this.inputLikeText.focus();\n }\n };\n\n /**\n * @public\n */\n public selectInputText = () => {\n if (this.props.disabled) {\n return;\n }\n if (this.input) {\n this.input.selectAll();\n }\n };\n\n /**\n * @public\n */\n public blur = () => {\n if (this.props.disabled) {\n return;\n }\n\n this.handleBlur();\n };\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n /**\n * @public\n */\n public async search(query: string = this.state.textValue) {\n const { getItems } = this.props;\n\n const cancelPromise: Promise<never> = new Promise((_, reject) => (this.cancelationToken = reject));\n this.requestId += 1;\n const expectingId = this.requestId;\n\n if (!this.loaderShowDelay) {\n this.loaderShowDelay = new Promise<void>((resolve) => {\n const cancelLoader = taskWithDelay(() => {\n this.dispatch({ type: 'RequestItems' });\n globalObject.setTimeout(resolve, LOADER_SHOW_TIME);\n }, DELAY_BEFORE_SHOW_LOADER);\n\n cancelPromise.catch(() => cancelLoader());\n\n this.cancelLoaderDelay = () => {\n cancelLoader();\n resolve();\n };\n });\n }\n\n try {\n const items = await Promise.race([getItems(query), cancelPromise]);\n if (this.state.loading) {\n await Promise.race([this.loaderShowDelay, cancelPromise]);\n }\n if (expectingId === this.requestId) {\n this.dispatch({\n type: 'ReceiveItems',\n items,\n });\n }\n } catch (error) {\n if (error && error.code === 'CancelationError') {\n this.dispatch({ type: 'CancelRequest' });\n } else if (expectingId === this.requestId) {\n this.dispatch({\n type: 'RequestFailure',\n repeatRequest: () => {\n this.search(query);\n if (this.input) {\n this.input.focus();\n }\n },\n });\n }\n } finally {\n if (expectingId === this.requestId) {\n if (!this.state.loading) {\n this.cancelLoaderDelay();\n }\n this.cancelationToken = null;\n this.loaderShowDelay = null;\n }\n }\n }\n\n /**\n * @public\n */\n public cancelSearch() {\n if (this.cancelationToken) {\n this.cancelationToken(new CancelationError());\n }\n }\n\n /**\n * @public\n */\n public open() {\n this.dispatch({ type: 'Open' });\n }\n\n /**\n * @public\n */\n public close() {\n this.dispatch({ type: 'Close' });\n }\n\n public render() {\n const viewProps = {\n align: this.props.align,\n borderless: this.props.borderless,\n disabled: this.props.disabled,\n disablePortal: this.props.disablePortal,\n editing: this.state.editing,\n error: this.props.error,\n items: this.state.items,\n loading: this.state.loading,\n opened: this.state.opened,\n drawArrow: this.props.drawArrow,\n menuPos: this.props.menuPos,\n menuAlign: this.props.menuAlign,\n placeholder: this.props.placeholder,\n size: this.props.size,\n textValue: this.state.textValue,\n totalCount: this.props.totalCount,\n value: this.props.value,\n showClearIcon: this.props.showClearIcon,\n warning: this.props.warning,\n 'aria-describedby': this.props['aria-describedby'],\n 'aria-label': this.props['aria-label'],\n id: this.props.id,\n width: this.props.width,\n maxLength: this.props.maxLength,\n maxMenuHeight: this.props.maxMenuHeight,\n leftIcon: this.props.leftIcon,\n rightIcon: this.props.rightIcon,\n inputMode: this.props.inputMode,\n\n onValueChange: this.handleValueChange,\n onClickOutside: this.handleClickOutside,\n onFocus: this.handleFocus,\n onMobileClose: this.handleMobileClose,\n onFocusOutside: this.handleBlur,\n onInputBlur: this.handleInputBlur,\n onInputValueChange: (value: string) => this.dispatch({ type: 'TextChange', value }),\n onInputFocus: this.handleFocus,\n onInputClick: this.handleInputClick,\n onClearCrossClick: () => this.dispatch({ type: 'ClearCrossClick' }),\n onInputKeyDown: (event: React.KeyboardEvent) => {\n event.persist();\n this.dispatch({ type: 'KeyPress', event });\n },\n onMouseEnter: this.props.onMouseEnter,\n onMouseOver: this.props.onMouseOver,\n onMouseLeave: this.props.onMouseLeave,\n renderItem: this.props.renderItem,\n renderNotFound: this.props.renderNotFound,\n itemWrapper: this.props.itemWrapper,\n renderValue: this.props.renderValue,\n renderTotalCount: this.props.renderTotalCount,\n renderAddButton: this.props.renderAddButton,\n repeatRequest: this.state.repeatRequest,\n requestStatus: this.state.requestStatus,\n\n refInput: (input: Nullable<Input>) => {\n this.input = input;\n },\n refMenu: (menu: Nullable<Menu>) => {\n this.menu = menu;\n },\n refInputLikeText: (inputLikeText: Nullable<InputLikeText>) => {\n this.inputLikeText = inputLikeText;\n },\n };\n\n return (\n <ReactUIFeatureFlagsContext.Consumer>\n {(flags) => {\n this.featureFlags = getFullReactUIFlagsContext(flags);\n return (\n <CommonWrapper {...this.props}>\n <ComboBoxView {...viewProps} size={this.props.size} ref={this.setRootNode} />\n </CommonWrapper>\n );\n }}\n </ReactUIFeatureFlagsContext.Consumer>\n );\n }\n\n public componentDidMount() {\n this.dispatch({ type: 'Mount' }, false);\n if (this.props.autoFocus) {\n this.focus();\n }\n }\n\n public componentDidUpdate(prevProps: CustomComboBoxProps<T>, prevState: CustomComboBoxState<T>) {\n if (prevState.editing && !this.state.editing) {\n this.handleBlur();\n }\n this.dispatch(\n {\n type: 'DidUpdate',\n prevProps,\n prevState,\n fixValueChange: this.featureFlags.comboBoxAllowValueChangeInEditingState,\n },\n false,\n );\n }\n\n /**\n * @public\n */\n public reset() {\n this.dispatch({ type: 'Reset' });\n }\n\n private dispatch = (action: CustomComboBoxAction<T>, sync = true) => {\n const updateState = (action: CustomComboBoxAction<T>) => {\n let effects: Array<CustomComboBoxEffect<T>>;\n let nextState: Pick<CustomComboBoxState<T>, never>;\n\n this.setState(\n (state) => {\n const stateAndEffect = this.reducer(state, this.props, action);\n [nextState, effects] = stateAndEffect instanceof Array ? stateAndEffect : [stateAndEffect, []];\n return nextState;\n },\n () => {\n effects.forEach(this.handleEffect);\n },\n );\n };\n\n // Auto-batching React@18 creates problems that are fixed with flushSync\n // https://github.com/skbkontur/retail-ui/pull/3144#issuecomment-1535235366\n if (sync && React.version.search('18') === 0) {\n ReactDOM.flushSync(() => updateState(action));\n } else {\n updateState(action);\n }\n };\n\n private handleEffect = (effect: CustomComboBoxEffect<T>) => {\n effect(this.dispatch, this.getState, this.getProps, () => this);\n };\n\n private getProps = () => this.props;\n\n private getState = () => this.state;\n\n private handleValueChange = (value: T) => {\n this.dispatch({\n type: 'ValueChange',\n value,\n keepFocus: !this.isMobileLayout,\n });\n };\n\n private handleFocus = () => {\n if (this.focused) {\n return;\n }\n\n this.focused = true;\n this.dispatch({ type: 'Focus', searchOnFocus: this.canOpenPopup && this.props.searchOnFocus });\n\n if (!this.canOpenPopup) {\n this.canOpenPopup = true;\n }\n };\n\n private handleMobileClose = () => {\n this.handleInputBlur();\n };\n\n private handleClickOutside = (e: Event) => {\n fixClickFocusIE(e);\n this.handleBlur();\n };\n\n private handleBlur = () => {\n if (!this.focused) {\n if (this.state.opened) {\n this.close();\n }\n return;\n }\n\n this.focused = false;\n // workaround for the similar bug with focusout\n // in Firefox, Chrome and IE\n // https://bugzilla.mozilla.org/show_bug.cgi?id=1363964\n globalObject.setTimeout(() => {\n this.dispatch({ type: 'Blur' });\n }, 0);\n };\n\n private handleInputBlur = () => {\n // If menu opened, RenderLayer is active and\n // it would call handleFocusOutside\n // In that way handleBlur would be called\n\n if (this.state.opened && !this.isMobileLayout) {\n return;\n }\n this.handleBlur();\n };\n\n private handleInputClick = () => {\n if (!this.cancelationToken) {\n this.dispatch({ type: 'InputClick' });\n }\n };\n}\n"],"mappings":";AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;;;;;;;AAOA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;;AAEA,IAAAK,cAAA,GAAAL,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;;AAEA,IAAAO,SAAA,GAAAP,OAAA;;;;AAIA,IAAAQ,oBAAA,GAAAR,OAAA;;AAEA,IAAAS,oBAAA,GAAAT,OAAA;;AAEA,IAAAU,sBAAA,GAAAV,OAAA;AACA,IAAAW,aAAA,GAAAX,OAAA;;AAEA,IAAAY,KAAA,GAAAZ,OAAA,WAAAa,MAAA,CAAAC,IAAA,CAAAF,KAAA,EAAAG,OAAA,WAAAC,GAAA,OAAAA,GAAA,kBAAAA,GAAA,8BAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA,cAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,KAAA,CAAAI,GAAA,UAAAK,OAAA,CAAAL,GAAA,IAAAJ,KAAA,CAAAI,GAAA,KAAuB,IAAAM,MAAA,EAAAC,eAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEhB,IAAMC,wBAAwB,GAAAH,OAAA,CAAAG,wBAAA,GAAG,GAAG;AACpC,IAAMC,gBAAgB,GAAAJ,OAAA,CAAAI,gBAAA,GAAG,IAAI;;AAE7B,IAAMC,YAAY,GAAAL,OAAA,CAAAK,YAAA,GAAG;EAC1BC,YAAY,EAAE,KAAK;EACnBC,OAAO,EAAE,KAAK;EACdC,KAAK,EAAE,IAAI;EACXC,OAAO,EAAE,KAAK;EACdC,MAAM,EAAE,KAAK;EACbC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,EAAE;EACbC,aAAa,EAAE,SAAAA,cAAA,UAAMC,SAAS;EAC9BC,aAAa,EAAEC,0CAAqB,CAACC,OAAO;EAC5CC,IAAI,EAAE;AACR,CAAC,CAAC;;;;AAIWC,cAAc,GAAAnB,OAAA,CAAAmB,cAAA,OAF1BC,2BAAgB,EAAAnB,MAAA,OAChBoB,kBAAQ,EAAApB,MAAA,IAAAC,eAAA,0BAAAoB,oBAAA,YAAAH,eAAA,OAAAI,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,oBAAA,CAAAxB,IAAA,CAAAgC,KAAA,CAAAR,oBAAA,SAAAS,MAAA,CAAAJ,IAAA,WAAAJ,KAAA;;;;IAKAS,KAAK,GAA2B3B,YAAY,CAAAkB,KAAA;;;;IAI5CU,SAAS,GAAG,CAAC,CAAAV,KAAA;;IAEZZ,OAAO,GAAG,KAAK,CAAAY,KAAA;IACfW,gBAAgB,GAAuC,IAAI,CAAAX,KAAA;;;IAG3DY,YAAY,GAAG,IAAI,CAAAZ,KAAA;;IAEnBa,OAAO,GAAGA,8BAAO,CAAAb,KAAA;IAClBc,iBAAiB,GAAe,oBAAM,IAAI;;IAEjD;AACF;AACA,OAFEd,KAAA;IAGOe,KAAK,GAAG,UAACC,IAAwC,EAAK;MAC3D,IAAIhB,KAAA,CAAKiB,KAAK,CAACC,QAAQ,EAAE;QACvB;MACF;;MAEA,IAAIF,IAAI,YAAJA,IAAI,CAAEG,mBAAmB,EAAE;QAC7BnB,KAAA,CAAKY,YAAY,GAAG,KAAK;MAC3B;;MAEA,IAAIZ,KAAA,CAAKoB,KAAK,EAAE;QACdpB,KAAA,CAAKoB,KAAK,CAACL,KAAK,CAAC,CAAC;MACpB,CAAC,MAAM,IAAIf,KAAA,CAAKqB,aAAa,EAAE;QAC7BrB,KAAA,CAAKqB,aAAa,CAACN,KAAK,CAAC,CAAC;MAC5B;IACF,CAAC;;IAED;AACF;AACA,OAFEf,KAAA;IAGOsB,eAAe,GAAG,YAAM;MAC7B,IAAItB,KAAA,CAAKiB,KAAK,CAACC,QAAQ,EAAE;QACvB;MACF;MACA,IAAIlB,KAAA,CAAKoB,KAAK,EAAE;QACdpB,KAAA,CAAKoB,KAAK,CAACG,SAAS,CAAC,CAAC;MACxB;IACF,CAAC;;IAED;AACF;AACA,OAFEvB,KAAA;IAGOwB,IAAI,GAAG,YAAM;MAClB,IAAIxB,KAAA,CAAKiB,KAAK,CAACC,QAAQ,EAAE;QACvB;MACF;;MAEAlB,KAAA,CAAKyB,UAAU,CAAC,CAAC;IACnB,CAAC,CAAAzB,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwMO0B,QAAQ,GAAG,UAACC,MAA+B,EAAEC,IAAI,EAAY,KAAhBA,IAAI,cAAJA,IAAI,GAAG,IAAI;MAC9D,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIF,MAA+B,EAAK;QACvD,IAAIG,OAAuC;QAC3C,IAAIC,SAA8C;;QAElD/B,KAAA,CAAKgC,QAAQ;UACX,UAACvB,KAAK,EAAK;YACT,IAAMwB,cAAc,GAAGjC,KAAA,CAAKa,OAAO,CAACJ,KAAK,EAAET,KAAA,CAAKiB,KAAK,EAAEU,MAAM,CAAC,CAAC,IAAAO,IAAA;YACxCD,cAAc,YAAY5B,KAAK,GAAG4B,cAAc,GAAG,CAACA,cAAc,EAAE,EAAE,CAAC,CAA7FF,SAAS,GAAAG,IAAA,IAAEJ,OAAO,GAAAI,IAAA;YACnB,OAAOH,SAAS;UAClB,CAAC;UACD,YAAM;YACJD,OAAO,CAAC3D,OAAO,CAAC6B,KAAA,CAAKmC,YAAY,CAAC;UACpC;QACF,CAAC;MACH,CAAC;;MAED;MACA;MACA,IAAIP,IAAI,IAAIQ,cAAK,CAACC,OAAO,CAACC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;QAC5CC,iBAAQ,CAACC,SAAS,CAAC,oBAAMX,WAAW,CAACF,MAAM,CAAC,GAAC;MAC/C,CAAC,MAAM;QACLE,WAAW,CAACF,MAAM,CAAC;MACrB;IACF,CAAC,CAAA3B,KAAA;;IAEOmC,YAAY,GAAG,UAACM,MAA+B,EAAK;MAC1DA,MAAM,CAACzC,KAAA,CAAK0B,QAAQ,EAAE1B,KAAA,CAAK0C,QAAQ,EAAE1C,KAAA,CAAK2C,QAAQ,EAAE,oBAAA3C,KAAA,EAAU,CAAC;IACjE,CAAC,CAAAA,KAAA;;IAEO2C,QAAQ,GAAG,oBAAM3C,KAAA,CAAKiB,KAAK,GAAAjB,KAAA;;IAE3B0C,QAAQ,GAAG,oBAAM1C,KAAA,CAAKS,KAAK,GAAAT,KAAA;;IAE3B4C,iBAAiB,GAAG,UAACC,KAAQ,EAAK;MACxC7C,KAAA,CAAK0B,QAAQ,CAAC;QACZoB,IAAI,EAAE,aAAa;QACnBD,KAAK,EAALA,KAAK;QACLE,SAAS,EAAE,CAAC/C,KAAA,CAAKgD;MACnB,CAAC,CAAC;IACJ,CAAC,CAAAhD,KAAA;;IAEOiD,WAAW,GAAG,YAAM;MAC1B,IAAIjD,KAAA,CAAKZ,OAAO,EAAE;QAChB;MACF;;MAEAY,KAAA,CAAKZ,OAAO,GAAG,IAAI;MACnBY,KAAA,CAAK0B,QAAQ,CAAC,EAAEoB,IAAI,EAAE,OAAO,EAAEI,aAAa,EAAElD,KAAA,CAAKY,YAAY,IAAIZ,KAAA,CAAKiB,KAAK,CAACiC,aAAa,CAAC,CAAC,CAAC;;MAE9F,IAAI,CAAClD,KAAA,CAAKY,YAAY,EAAE;QACtBZ,KAAA,CAAKY,YAAY,GAAG,IAAI;MAC1B;IACF,CAAC,CAAAZ,KAAA;;IAEOmD,iBAAiB,GAAG,YAAM;MAChCnD,KAAA,CAAKoD,eAAe,CAAC,CAAC;IACxB,CAAC,CAAApD,KAAA;;IAEOqD,kBAAkB,GAAG,UAACC,CAAQ,EAAK;MACzC,IAAAC,gCAAe,EAACD,CAAC,CAAC;MAClBtD,KAAA,CAAKyB,UAAU,CAAC,CAAC;IACnB,CAAC,CAAAzB,KAAA;;IAEOyB,UAAU,GAAG,YAAM;MACzB,IAAI,CAACzB,KAAA,CAAKZ,OAAO,EAAE;QACjB,IAAIY,KAAA,CAAKS,KAAK,CAACtB,MAAM,EAAE;UACrBa,KAAA,CAAKwD,KAAK,CAAC,CAAC;QACd;QACA;MACF;;MAEAxD,KAAA,CAAKZ,OAAO,GAAG,KAAK;MACpB;MACA;MACA;MACAqE,0BAAY,CAACC,UAAU,CAAC,YAAM;QAC5B1D,KAAA,CAAK0B,QAAQ,CAAC,EAAEoB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;MACjC,CAAC,EAAE,CAAC,CAAC;IACP,CAAC,CAAA9C,KAAA;;IAEOoD,eAAe,GAAG,YAAM;MAC9B;MACA;MACA;;MAEA,IAAIpD,KAAA,CAAKS,KAAK,CAACtB,MAAM,IAAI,CAACa,KAAA,CAAKgD,cAAc,EAAE;QAC7C;MACF;MACAhD,KAAA,CAAKyB,UAAU,CAAC,CAAC;IACnB,CAAC,CAAAzB,KAAA;;IAEO2D,gBAAgB,GAAG,YAAM;MAC/B,IAAI,CAAC3D,KAAA,CAAKW,gBAAgB,EAAE;QAC1BX,KAAA,CAAK0B,QAAQ,CAAC,EAAEoB,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;MACvC;IACF,CAAC,QAAA9C,KAAA,MAAA4D,eAAA,CAAAC,OAAA,EAAAjE,cAAA,EAAAG,oBAAA,MAAA+D,MAAA,GAAAlE,cAAA,CAAAvB,SAAA,EApSD;AACF;AACA,KAFEyF,MAAA,CAGaxB,MAAM,iCAAAyB,OAAA,OAAAC,kBAAA,CAAAH,OAAA,gBAAAI,YAAA,CAAAJ,OAAA,CAAAK,IAAA,CAAnB,SAAAC,QAAoBC,KAAa,OAAAC,MAAA,YAAAC,QAAA,EAAAC,aAAA,EAAAC,WAAA,EAAAvF,KAAA,QAAAgF,YAAA,CAAAJ,OAAA,CAAAY,IAAA,UAAAC,SAAAC,QAAA,qBAAAA,QAAA,CAAAC,IAAA,GAAAD,QAAA,CAAAE,IAAA,cAAbT,KAAa,cAAbA,KAAa,GAAG,IAAI,CAAC3D,KAAK,CAACpB,SAAS,EAC9CiF,QAAQ,GAAK,IAAI,CAACrD,KAAK,CAAvBqD,QAAQ,CAEVC,aAA6B,GAAG,IAAIO,OAAO,CAAC,UAACC,CAAC,EAAEC,MAAM,UAAMX,MAAI,CAAC1D,gBAAgB,GAAGqE,MAAM,EAAC,CAAC,CAClG,IAAI,CAACtE,SAAS,IAAI,CAAC,CACb8D,WAAW,GAAG,IAAI,CAAC9D,SAAS,CAElC,IAAI,CAAC,IAAI,CAACuE,eAAe,EAAE,CACzB,IAAI,CAACA,eAAe,GAAG,IAAIH,OAAO,CAAO,UAACI,OAAO,EAAK,CACpD,IAAMC,YAAY,GAAG,IAAAC,oBAAa,EAAC,YAAM,CACvCf,MAAI,CAAC3C,QAAQ,CAAC,EAAEoB,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,CACvCW,0BAAY,CAACC,UAAU,CAACwB,OAAO,EAAErG,gBAAgB,CAAC,CACpD,CAAC,EAAED,wBAAwB,CAAC,CAE5B2F,aAAa,CAACc,KAAK,CAAC,oBAAMF,YAAY,CAAC,CAAC,GAAC,CAEzCd,MAAI,CAACvD,iBAAiB,GAAG,YAAM,CAC7BqE,YAAY,CAAC,CAAC,CACdD,OAAO,CAAC,CAAC,CACX,CAAC,CACH,CAAC,CAAC,CACJ,CAACP,QAAA,CAAAC,IAAA,KAAAD,QAAA,CAAAE,IAAA,YAGqBC,OAAO,CAACQ,IAAI,CAAC,CAAChB,QAAQ,CAACF,KAAK,CAAC,EAAEG,aAAa,CAAC,CAAC,QAA5DtF,KAAK,GAAA0F,QAAA,CAAAY,IAAA,MACP,IAAI,CAAC9E,KAAK,CAACvB,OAAO,GAAAyF,QAAA,CAAAE,IAAA,aAAAF,QAAA,CAAAE,IAAA,aACdC,OAAO,CAACQ,IAAI,CAAC,CAAC,IAAI,CAACL,eAAe,EAAEV,aAAa,CAAC,CAAC,SAE3D,IAAIC,WAAW,KAAK,IAAI,CAAC9D,SAAS,EAAE,CAClC,IAAI,CAACgB,QAAQ,CAAC,EACZoB,IAAI,EAAE,cAAc,EACpB7D,KAAK,EAALA,KAAK,CACP,CAAC,CAAC,CACJ,CAAC0F,QAAA,CAAAE,IAAA,oBAAAF,QAAA,CAAAC,IAAA,MAAAD,QAAA,CAAAa,EAAA,GAAAb,QAAA,aAED,IAAIA,QAAA,CAAAa,EAAA,IAASb,QAAA,CAAAa,EAAA,CAAMC,IAAI,KAAK,kBAAkB,EAAE,CAC9C,IAAI,CAAC/D,QAAQ,CAAC,EAAEoB,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,CAC1C,CAAC,MAAM,IAAI0B,WAAW,KAAK,IAAI,CAAC9D,SAAS,EAAE,CACzC,IAAI,CAACgB,QAAQ,CAAC,EACZoB,IAAI,EAAE,gBAAgB,EACtBxD,aAAa,EAAE,SAAAA,cAAA,EAAM,CACnB+E,MAAI,CAAC/B,MAAM,CAAC8B,KAAK,CAAC,CAClB,IAAIC,MAAI,CAACjD,KAAK,EAAE,CACdiD,MAAI,CAACjD,KAAK,CAACL,KAAK,CAAC,CAAC,CACpB,CACF,CAAC,CACH,CAAC,CAAC,CACJ,CAAC,QAAA4D,QAAA,CAAAC,IAAA,MAED,IAAIJ,WAAW,KAAK,IAAI,CAAC9D,SAAS,EAAE,CAClC,IAAI,CAAC,IAAI,CAACD,KAAK,CAACvB,OAAO,EAAE,CACvB,IAAI,CAAC4B,iBAAiB,CAAC,CAAC,CAC1B,CACA,IAAI,CAACH,gBAAgB,GAAG,IAAI,CAC5B,IAAI,CAACsE,eAAe,GAAG,IAAI,CAC7B,CAAC,OAAAN,QAAA,CAAAe,MAAA,+BAAAf,QAAA,CAAAgB,IAAA,OAAAxB,OAAA,4BAEJ,YAAA7B,OAAAsD,EAAA,UAAA7B,OAAA,CAAAxD,KAAA,OAAAL,SAAA,UAAAoC,MAAA,KAED;AACF;AACA,KAFE,CAAAwB,MAAA,CAGO+B,YAAY,GAAnB,SAAAA,aAAA,EAAsB,CACpB,IAAI,IAAI,CAAClF,gBAAgB,EAAE,CACzB,IAAI,CAACA,gBAAgB,CAAC,IAAImF,uBAAgB,CAAC,CAAC,CAAC,CAC/C,CACF,CAAC,CAED;AACF;AACA,KAFE,CAAAhC,MAAA,CAGOiC,IAAI,GAAX,SAAAA,KAAA,EAAc,CACZ,IAAI,CAACrE,QAAQ,CAAC,EAAEoB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CACjC,CAAC,CAED;AACF;AACA,KAFE,CAAAgB,MAAA,CAGON,KAAK,GAAZ,SAAAA,MAAA,EAAe,CACb,IAAI,CAAC9B,QAAQ,CAAC,EAAEoB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAClC,CAAC,CAAAgB,MAAA,CAEMkC,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA,QACd,IAAMC,SAAS,GAAG,EAChBC,KAAK,EAAE,IAAI,CAAClF,KAAK,CAACkF,KAAK,EACvBC,UAAU,EAAE,IAAI,CAACnF,KAAK,CAACmF,UAAU,EACjClF,QAAQ,EAAE,IAAI,CAACD,KAAK,CAACC,QAAQ,EAC7BmF,aAAa,EAAE,IAAI,CAACpF,KAAK,CAACoF,aAAa,EACvCrH,OAAO,EAAE,IAAI,CAACyB,KAAK,CAACzB,OAAO,EAC3BsH,KAAK,EAAE,IAAI,CAACrF,KAAK,CAACqF,KAAK,EACvBrH,KAAK,EAAE,IAAI,CAACwB,KAAK,CAACxB,KAAK,EACvBC,OAAO,EAAE,IAAI,CAACuB,KAAK,CAACvB,OAAO,EAC3BC,MAAM,EAAE,IAAI,CAACsB,KAAK,CAACtB,MAAM,EACzBoH,SAAS,EAAE,IAAI,CAACtF,KAAK,CAACsF,SAAS,EAC/BC,OAAO,EAAE,IAAI,CAACvF,KAAK,CAACuF,OAAO,EAC3BC,SAAS,EAAE,IAAI,CAACxF,KAAK,CAACwF,SAAS,EAC/BC,WAAW,EAAE,IAAI,CAACzF,KAAK,CAACyF,WAAW,EACnC/G,IAAI,EAAE,IAAI,CAACsB,KAAK,CAACtB,IAAI,EACrBN,SAAS,EAAE,IAAI,CAACoB,KAAK,CAACpB,SAAS,EAC/BsH,UAAU,EAAE,IAAI,CAAC1F,KAAK,CAAC0F,UAAU,EACjC9D,KAAK,EAAE,IAAI,CAAC5B,KAAK,CAAC4B,KAAK,EACvB+D,aAAa,EAAE,IAAI,CAAC3F,KAAK,CAAC2F,aAAa,EACvCC,OAAO,EAAE,IAAI,CAAC5F,KAAK,CAAC4F,OAAO,EAC3B,kBAAkB,EAAE,IAAI,CAAC5F,KAAK,CAAC,kBAAkB,CAAC,EAClD,YAAY,EAAE,IAAI,CAACA,KAAK,CAAC,YAAY,CAAC,EACtC6F,EAAE,EAAE,IAAI,CAAC7F,KAAK,CAAC6F,EAAE,EACjBC,KAAK,EAAE,IAAI,CAAC9F,KAAK,CAAC8F,KAAK,EACvBC,SAAS,EAAE,IAAI,CAAC/F,KAAK,CAAC+F,SAAS,EAC/BC,aAAa,EAAE,IAAI,CAAChG,KAAK,CAACgG,aAAa,EACvCC,QAAQ,EAAE,IAAI,CAACjG,KAAK,CAACiG,QAAQ,EAC7BC,SAAS,EAAE,IAAI,CAAClG,KAAK,CAACkG,SAAS,EAC/BC,SAAS,EAAE,IAAI,CAACnG,KAAK,CAACmG,SAAS,EAE/BC,aAAa,EAAE,IAAI,CAACzE,iBAAiB,EACrC0E,cAAc,EAAE,IAAI,CAACjE,kBAAkB,EACvCkE,OAAO,EAAE,IAAI,CAACtE,WAAW,EACzBuE,aAAa,EAAE,IAAI,CAACrE,iBAAiB,EACrCsE,cAAc,EAAE,IAAI,CAAChG,UAAU,EAC/BiG,WAAW,EAAE,IAAI,CAACtE,eAAe,EACjCuE,kBAAkB,EAAE,SAAAA,mBAAC9E,KAAa,UAAKoD,MAAI,CAACvE,QAAQ,CAAC,EAAEoB,IAAI,EAAE,YAAY,EAAED,KAAK,EAALA,KAAK,CAAC,CAAC,CAAC,IACnF+E,YAAY,EAAE,IAAI,CAAC3E,WAAW,EAC9B4E,YAAY,EAAE,IAAI,CAAClE,gBAAgB,EACnCmE,iBAAiB,EAAE,SAAAA,kBAAA,UAAM7B,MAAI,CAACvE,QAAQ,CAAC,EAAEoB,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,IACnEiF,cAAc,EAAE,SAAAA,eAACC,KAA0B,EAAK,CAC9CA,KAAK,CAACC,OAAO,CAAC,CAAC,CACfhC,MAAI,CAACvE,QAAQ,CAAC,EAAEoB,IAAI,EAAE,UAAU,EAAEkF,KAAK,EAALA,KAAK,CAAC,CAAC,CAAC,CAC5C,CAAC,EACDE,YAAY,EAAE,IAAI,CAACjH,KAAK,CAACiH,YAAY,EACrCC,WAAW,EAAE,IAAI,CAAClH,KAAK,CAACkH,WAAW,EACnCC,YAAY,EAAE,IAAI,CAACnH,KAAK,CAACmH,YAAY,EACrCC,UAAU,EAAE,IAAI,CAACpH,KAAK,CAACoH,UAAU,EACjCC,cAAc,EAAE,IAAI,CAACrH,KAAK,CAACqH,cAAc,EACzCC,WAAW,EAAE,IAAI,CAACtH,KAAK,CAACsH,WAAW,EACnCC,WAAW,EAAE,IAAI,CAACvH,KAAK,CAACuH,WAAW,EACnCC,gBAAgB,EAAE,IAAI,CAACxH,KAAK,CAACwH,gBAAgB,EAC7CC,eAAe,EAAE,IAAI,CAACzH,KAAK,CAACyH,eAAe,EAC3CpJ,aAAa,EAAE,IAAI,CAACmB,KAAK,CAACnB,aAAa,EACvCE,aAAa,EAAE,IAAI,CAACiB,KAAK,CAACjB,aAAa,EAEvCmJ,QAAQ,EAAE,SAAAA,SAACvH,KAAsB,EAAK,CACpC6E,MAAI,CAAC7E,KAAK,GAAGA,KAAK,CACpB,CAAC,EACDwH,OAAO,EAAE,SAAAA,QAACC,IAAoB,EAAK,CACjC5C,MAAI,CAAC4C,IAAI,GAAGA,IAAI,CAClB,CAAC,EACDC,gBAAgB,EAAE,SAAAA,iBAACzH,aAAsC,EAAK,CAC5D4E,MAAI,CAAC5E,aAAa,GAAGA,aAAa,CACpC,CAAC,CACH,CAAC,CAED,oBACEnE,MAAA,CAAA2G,OAAA,CAAAkF,aAAA,CAACnL,oBAAA,CAAAoL,0BAA0B,CAACC,QAAQ,QACjC,UAACC,KAAK,EAAK,CACVjD,MAAI,CAACkD,YAAY,GAAG,IAAAC,+CAA0B,EAACF,KAAK,CAAC,CACrD,oBACEhM,MAAA,CAAA2G,OAAA,CAAAkF,aAAA,CAACtL,cAAA,CAAA4L,aAAa,EAAKpD,MAAI,CAAChF,KAAK,eAC3B/D,MAAA,CAAA2G,OAAA,CAAAkF,aAAA,CAAChL,aAAA,CAAAuL,YAAY,MAAAC,SAAA,CAAA1F,OAAA,MAAKqC,SAAS,IAAEvG,IAAI,EAAEsG,MAAI,CAAChF,KAAK,CAACtB,IAAK,EAAC6J,GAAG,EAAEvD,MAAI,CAACwD,WAAY,GAAE,CAC/D,CAAC,CAEpB,CACmC,CAAC,CAE1C,CAAC,CAAA3F,MAAA,CAEM4F,iBAAiB,GAAxB,SAAAA,kBAAA,EAA2B,CACzB,IAAI,CAAChI,QAAQ,CAAC,EAAEoB,IAAI,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,CACvC,IAAI,IAAI,CAAC7B,KAAK,CAAC0I,SAAS,EAAE,CACxB,IAAI,CAAC5I,KAAK,CAAC,CAAC,CACd,CACF,CAAC,CAAA+C,MAAA,CAEM8F,kBAAkB,GAAzB,SAAAA,mBAA0BC,SAAiC,EAAEC,SAAiC,EAAE,CAC9F,IAAIA,SAAS,CAAC9K,OAAO,IAAI,CAAC,IAAI,CAACyB,KAAK,CAACzB,OAAO,EAAE,CAC5C,IAAI,CAACyC,UAAU,CAAC,CAAC,CACnB,CACA,IAAI,CAACC,QAAQ,CACX,EACEoB,IAAI,EAAE,WAAW,EACjB+G,SAAS,EAATA,SAAS,EACTC,SAAS,EAATA,SAAS,EACTC,cAAc,EAAE,IAAI,CAACZ,YAAY,CAACa,sCAAsC,CAC1E,CAAC,EACD,KACF,CAAC,CACH,CAAC,CAED;AACF;AACA,KAFE,CAAAlG,MAAA,CAGOmG,KAAK,GAAZ,SAAAA,MAAA,EAAe,CACb,IAAI,CAACvI,QAAQ,CAAC,EAAEoB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAClC,CAAC,QAAAlD,cAAA,GAjQoCwC,cAAK,CAAC8H,aAAa,GAAAvL,eAAA,CAC1CwL,mBAAmB,GAAG,gBAAgB,EAAAxL,eAAA,CACtCyL,WAAW,GAAG,gBAAgB,EAAAzL,eAAA,MAAAD,MAAA,KAAAA,MAAA","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactDom","_globalObject","_utils","_fixClickFocusIE","_CommonWrapper","_decorator","_rootNode","_featureFlagsContext","_CustomComboBoxTypes","_CustomComboBoxReducer","_ComboBoxView","_tids","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","_class","_CustomComboBox","DELAY_BEFORE_SHOW_LOADER","LOADER_SHOW_TIME","DefaultState","inputChanged","editing","items","loading","opened","focused","textValue","repeatRequest","undefined","requestStatus","ComboBoxRequestStatus","Unknown","size","CustomComboBox","responsiveLayout","rootNode","_React$PureComponent","_this","_len","arguments","length","args","Array","_key","apply","concat","state","requestId","cancelationToken","canOpenPopup","reducer","cancelLoaderDelay","focus","opts","props","disabled","withoutOpenDropdown","input","inputLikeText","selectInputText","selectAll","blur","handleBlur","dispatch","action","sync","updateState","effects","nextState","setState","stateAndEffect","_ref","handleEffect","React","version","search","ReactDOM","flushSync","effect","getState","getProps","handleValueChange","value","type","keepFocus","isMobileLayout","handleFocus","searchOnFocus","handleMobileClose","handleInputBlur","handleClickOutside","e","fixClickFocusIE","close","globalObject","setTimeout","handleInputClick","_inheritsLoose2","default","_proto","_search","_asyncToGenerator2","_regenerator","mark","_callee","query","_this2","getItems","cancelPromise","expectingId","wrap","_callee$","_context","prev","next","Promise","_","reject","loaderShowDelay","resolve","cancelLoader","taskWithDelay","catch","race","sent","t0","code","finish","stop","_x","cancelSearch","CancelationError","open","render","_this3","viewProps","align","borderless","disablePortal","error","drawArrow","menuPos","menuAlign","placeholder","totalCount","showClearIcon","warning","id","width","maxLength","maxMenuHeight","leftIcon","rightIcon","inputMode","mask","maskChar","formatChars","onBeforePasteInMask","onValueChange","onClickOutside","onFocus","onMobileClose","onFocusOutside","onInputBlur","onInputValueChange","onInputFocus","onInputClick","onClearCrossClick","onInputKeyDown","event","persist","onMouseEnter","onMouseOver","onMouseLeave","renderItem","renderNotFound","itemWrapper","renderValue","renderTotalCount","renderAddButton","refInput","refMenu","menu","refInputLikeText","createElement","ReactUIFeatureFlagsContext","Consumer","flags","featureFlags","getFullReactUIFlagsContext","CommonWrapper","ComboBoxView","_extends2","ref","setRootNode","componentDidMount","autoFocus","componentDidUpdate","prevProps","prevState","fixValueChange","comboBoxAllowValueChangeInEditingState","reset","PureComponent","__KONTUR_REACT_UI__","displayName"],"sources":["CustomComboBox.tsx"],"sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport type { Nullable } from '../../typings/utility-types';\nimport type { InputIconType, Input, ShowClearIcon } from '../../components/Input';\nimport type { Menu } from '../Menu';\nimport type { InputLikeText } from '../InputLikeText';\nimport type { MenuItemState } from '../../components/MenuItem';\nimport { CancelationError, taskWithDelay } from '../../lib/utils';\nimport { fixClickFocusIE } from '../../lib/events/fixClickFocusIE';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport type { ComboBoxExtendedItem } from '../../components/ComboBox';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { ReactUIFeatureFlags } from '../../lib/featureFlagsContext';\nimport { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from '../../lib/featureFlagsContext';\nimport type { MaskedInputOnBeforePasteValue, MaskedInputProps } from '../../components/MaskedInput';\n\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\nimport type { CustomComboBoxAction, CustomComboBoxEffect } from './CustomComboBoxReducer';\nimport { reducer } from './CustomComboBoxReducer';\nimport { ComboBoxView } from './ComboBoxView';\n\nexport * from './tids';\n\nexport interface CustomComboBoxProps<T>\n extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n CommonProps,\n Partial<Pick<MaskedInputProps, 'mask' | 'maskChar' | 'formatChars'>> {\n align?: 'left' | 'center' | 'right';\n autoFocus?: boolean;\n borderless?: boolean;\n disablePortal?: boolean;\n disabled?: boolean;\n /**\n * Cостояние валидации при ошибке.\n */\n error?: boolean;\n maxLength?: number;\n /**\n * Позволяет вручную задать текущую позицию выпадающего окна\n */\n menuPos?: 'top' | 'bottom';\n menuAlign?: 'left' | 'right';\n drawArrow?: boolean;\n leftIcon?: InputIconType;\n rightIcon?: InputIconType;\n searchOnFocus?: boolean;\n onValueChange?: (value: T) => void;\n onInputValueChange?: (value: string) => Nullable<string> | void;\n onUnexpectedInput?: (value: string) => void | null | T;\n onFocus?: () => void;\n onBlur?: () => void;\n onMouseEnter?: (e: React.MouseEvent) => void;\n onMouseOver?: (e: React.MouseEvent) => void;\n onMouseLeave?: (e: React.MouseEvent) => void;\n onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n placeholder?: string;\n size?: SizeProp;\n totalCount?: number;\n value?: Nullable<T>;\n showClearIcon?: ShowClearIcon;\n /**\n * Cостояние валидации при предупреждении.\n */\n warning?: boolean;\n width?: string | number;\n maxMenuHeight?: number | string;\n renderNotFound?: () => React.ReactNode;\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n renderItem: (item: T, state?: MenuItemState) => React.ReactNode;\n itemWrapper?: (item: T) => React.ComponentType;\n renderValue: (value: T) => React.ReactNode;\n renderAddButton?: (query?: string) => React.ReactNode;\n valueToString: (value: T) => string;\n itemToValue: (item: T) => string | number;\n getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n onBeforePasteInMask?: MaskedInputOnBeforePasteValue;\n}\n\nexport interface CustomComboBoxState<T> {\n editing: boolean;\n loading: boolean;\n opened: boolean;\n textValue: string;\n items: Nullable<Array<ComboBoxExtendedItem<T>>>;\n inputChanged: boolean;\n focused: boolean;\n repeatRequest: () => void;\n requestStatus: ComboBoxRequestStatus;\n}\n\nexport const DELAY_BEFORE_SHOW_LOADER = 300;\nexport const LOADER_SHOW_TIME = 1000;\n\nexport const DefaultState = {\n inputChanged: false,\n editing: false,\n items: null,\n loading: false,\n opened: false,\n focused: false,\n textValue: '',\n repeatRequest: () => undefined,\n requestStatus: ComboBoxRequestStatus.Unknown,\n size: 'small',\n};\n\n@responsiveLayout\n@rootNode\nexport class CustomComboBox<T> extends React.PureComponent<CustomComboBoxProps<T>, CustomComboBoxState<T>> {\n public static __KONTUR_REACT_UI__ = 'CustomComboBox';\n public static displayName = 'CustomComboBox';\n\n public state: CustomComboBoxState<T> = DefaultState;\n public input: Nullable<Input>;\n public menu: Nullable<Menu>;\n public inputLikeText: Nullable<InputLikeText>;\n public requestId = 0;\n public loaderShowDelay: Nullable<Promise<void>>;\n private focused = false;\n private cancelationToken: Nullable<(reason?: Error) => void> = null;\n private isMobileLayout!: boolean;\n private featureFlags!: ReactUIFeatureFlags;\n private canOpenPopup = true;\n\n private reducer = reducer;\n public cancelLoaderDelay: () => void = () => null;\n\n /**\n * @public\n */\n public focus = (opts?: { withoutOpenDropdown?: boolean }) => {\n if (this.props.disabled) {\n return;\n }\n\n if (opts?.withoutOpenDropdown) {\n this.canOpenPopup = false;\n }\n\n if (this.input) {\n this.input.focus();\n } else if (this.inputLikeText) {\n this.inputLikeText.focus();\n }\n };\n\n /**\n * @public\n */\n public selectInputText = () => {\n if (this.props.disabled) {\n return;\n }\n if (this.input) {\n this.input.selectAll();\n }\n };\n\n /**\n * @public\n */\n public blur = () => {\n if (this.props.disabled) {\n return;\n }\n\n this.handleBlur();\n };\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n /**\n * @public\n */\n public async search(query: string = this.state.textValue) {\n const { getItems } = this.props;\n\n const cancelPromise: Promise<never> = new Promise((_, reject) => (this.cancelationToken = reject));\n this.requestId += 1;\n const expectingId = this.requestId;\n\n if (!this.loaderShowDelay) {\n this.loaderShowDelay = new Promise<void>((resolve) => {\n const cancelLoader = taskWithDelay(() => {\n this.dispatch({ type: 'RequestItems' });\n globalObject.setTimeout(resolve, LOADER_SHOW_TIME);\n }, DELAY_BEFORE_SHOW_LOADER);\n\n cancelPromise.catch(() => cancelLoader());\n\n this.cancelLoaderDelay = () => {\n cancelLoader();\n resolve();\n };\n });\n }\n\n try {\n const items = await Promise.race([getItems(query), cancelPromise]);\n if (this.state.loading) {\n await Promise.race([this.loaderShowDelay, cancelPromise]);\n }\n if (expectingId === this.requestId) {\n this.dispatch({\n type: 'ReceiveItems',\n items,\n });\n }\n } catch (error) {\n if (error && error.code === 'CancelationError') {\n this.dispatch({ type: 'CancelRequest' });\n } else if (expectingId === this.requestId) {\n this.dispatch({\n type: 'RequestFailure',\n repeatRequest: () => {\n this.search(query);\n if (this.input) {\n this.input.focus();\n }\n },\n });\n }\n } finally {\n if (expectingId === this.requestId) {\n if (!this.state.loading) {\n this.cancelLoaderDelay();\n }\n this.cancelationToken = null;\n this.loaderShowDelay = null;\n }\n }\n }\n\n /**\n * @public\n */\n public cancelSearch() {\n if (this.cancelationToken) {\n this.cancelationToken(new CancelationError());\n }\n }\n\n /**\n * @public\n */\n public open() {\n this.dispatch({ type: 'Open' });\n }\n\n /**\n * @public\n */\n public close() {\n this.dispatch({ type: 'Close' });\n }\n\n public render() {\n const viewProps = {\n align: this.props.align,\n borderless: this.props.borderless,\n disabled: this.props.disabled,\n disablePortal: this.props.disablePortal,\n editing: this.state.editing,\n error: this.props.error,\n items: this.state.items,\n loading: this.state.loading,\n opened: this.state.opened,\n drawArrow: this.props.drawArrow,\n menuPos: this.props.menuPos,\n menuAlign: this.props.menuAlign,\n placeholder: this.props.placeholder,\n size: this.props.size,\n textValue: this.state.textValue,\n totalCount: this.props.totalCount,\n value: this.props.value,\n showClearIcon: this.props.showClearIcon,\n warning: this.props.warning,\n 'aria-describedby': this.props['aria-describedby'],\n 'aria-label': this.props['aria-label'],\n id: this.props.id,\n width: this.props.width,\n maxLength: this.props.maxLength,\n maxMenuHeight: this.props.maxMenuHeight,\n leftIcon: this.props.leftIcon,\n rightIcon: this.props.rightIcon,\n inputMode: this.props.inputMode,\n mask: this.props.mask,\n maskChar: this.props.maskChar,\n formatChars: this.props.formatChars,\n onBeforePasteInMask: this.props.onBeforePasteInMask,\n\n onValueChange: this.handleValueChange,\n onClickOutside: this.handleClickOutside,\n onFocus: this.handleFocus,\n onMobileClose: this.handleMobileClose,\n onFocusOutside: this.handleBlur,\n onInputBlur: this.handleInputBlur,\n onInputValueChange: (value: string) => this.dispatch({ type: 'TextChange', value }),\n onInputFocus: this.handleFocus,\n onInputClick: this.handleInputClick,\n onClearCrossClick: () => this.dispatch({ type: 'ClearCrossClick' }),\n onInputKeyDown: (event: React.KeyboardEvent) => {\n event.persist();\n this.dispatch({ type: 'KeyPress', event });\n },\n onMouseEnter: this.props.onMouseEnter,\n onMouseOver: this.props.onMouseOver,\n onMouseLeave: this.props.onMouseLeave,\n renderItem: this.props.renderItem,\n renderNotFound: this.props.renderNotFound,\n itemWrapper: this.props.itemWrapper,\n renderValue: this.props.renderValue,\n renderTotalCount: this.props.renderTotalCount,\n renderAddButton: this.props.renderAddButton,\n repeatRequest: this.state.repeatRequest,\n requestStatus: this.state.requestStatus,\n\n refInput: (input: Nullable<Input>) => {\n this.input = input;\n },\n refMenu: (menu: Nullable<Menu>) => {\n this.menu = menu;\n },\n refInputLikeText: (inputLikeText: Nullable<InputLikeText>) => {\n this.inputLikeText = inputLikeText;\n },\n };\n\n return (\n <ReactUIFeatureFlagsContext.Consumer>\n {(flags) => {\n this.featureFlags = getFullReactUIFlagsContext(flags);\n return (\n <CommonWrapper {...this.props}>\n <ComboBoxView {...viewProps} size={this.props.size} ref={this.setRootNode} />\n </CommonWrapper>\n );\n }}\n </ReactUIFeatureFlagsContext.Consumer>\n );\n }\n\n public componentDidMount() {\n this.dispatch({ type: 'Mount' }, false);\n if (this.props.autoFocus) {\n this.focus();\n }\n }\n\n public componentDidUpdate(prevProps: CustomComboBoxProps<T>, prevState: CustomComboBoxState<T>) {\n if (prevState.editing && !this.state.editing) {\n this.handleBlur();\n }\n this.dispatch(\n {\n type: 'DidUpdate',\n prevProps,\n prevState,\n fixValueChange: this.featureFlags.comboBoxAllowValueChangeInEditingState,\n },\n false,\n );\n }\n\n /**\n * @public\n */\n public reset() {\n this.dispatch({ type: 'Reset' });\n }\n\n private dispatch = (action: CustomComboBoxAction<T>, sync = true) => {\n const updateState = (action: CustomComboBoxAction<T>) => {\n let effects: Array<CustomComboBoxEffect<T>>;\n let nextState: Pick<CustomComboBoxState<T>, never>;\n\n this.setState(\n (state) => {\n const stateAndEffect = this.reducer(state, this.props, action);\n [nextState, effects] = stateAndEffect instanceof Array ? stateAndEffect : [stateAndEffect, []];\n return nextState;\n },\n () => {\n effects.forEach(this.handleEffect);\n },\n );\n };\n\n // Auto-batching React@18 creates problems that are fixed with flushSync\n // https://github.com/skbkontur/retail-ui/pull/3144#issuecomment-1535235366\n if (sync && React.version.search('18') === 0) {\n ReactDOM.flushSync(() => updateState(action));\n } else {\n updateState(action);\n }\n };\n\n private handleEffect = (effect: CustomComboBoxEffect<T>) => {\n effect(this.dispatch, this.getState, this.getProps, () => this);\n };\n\n private getProps = () => this.props;\n\n private getState = () => this.state;\n\n private handleValueChange = (value: T) => {\n this.dispatch({\n type: 'ValueChange',\n value,\n keepFocus: !this.isMobileLayout,\n });\n };\n\n private handleFocus = () => {\n if (this.focused) {\n return;\n }\n\n this.focused = true;\n this.dispatch({ type: 'Focus', searchOnFocus: this.canOpenPopup && this.props.searchOnFocus });\n\n if (!this.canOpenPopup) {\n this.canOpenPopup = true;\n }\n };\n\n private handleMobileClose = () => {\n this.handleInputBlur();\n };\n\n private handleClickOutside = (e: Event) => {\n fixClickFocusIE(e);\n this.handleBlur();\n };\n\n private handleBlur = () => {\n if (!this.focused) {\n if (this.state.opened) {\n this.close();\n }\n return;\n }\n\n this.focused = false;\n // workaround for the similar bug with focusout\n // in Firefox, Chrome and IE\n // https://bugzilla.mozilla.org/show_bug.cgi?id=1363964\n globalObject.setTimeout(() => {\n this.dispatch({ type: 'Blur' });\n }, 0);\n };\n\n private handleInputBlur = () => {\n // If menu opened, RenderLayer is active and\n // it would call handleFocusOutside\n // In that way handleBlur would be called\n\n if (this.state.opened && !this.isMobileLayout) {\n return;\n }\n this.handleBlur();\n };\n\n private handleInputClick = () => {\n if (!this.cancelationToken) {\n this.dispatch({ type: 'InputClick' });\n }\n };\n}\n"],"mappings":";AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;;;;;;;AAOA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;;AAEA,IAAAK,cAAA,GAAAL,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;;AAEA,IAAAO,SAAA,GAAAP,OAAA;;;;AAIA,IAAAQ,oBAAA,GAAAR,OAAA;;;AAGA,IAAAS,oBAAA,GAAAT,OAAA;;AAEA,IAAAU,sBAAA,GAAAV,OAAA;AACA,IAAAW,aAAA,GAAAX,OAAA;;AAEA,IAAAY,KAAA,GAAAZ,OAAA,WAAAa,MAAA,CAAAC,IAAA,CAAAF,KAAA,EAAAG,OAAA,WAAAC,GAAA,OAAAA,GAAA,kBAAAA,GAAA,8BAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA,cAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,KAAA,CAAAI,GAAA,UAAAK,OAAA,CAAAL,GAAA,IAAAJ,KAAA,CAAAI,GAAA,KAAuB,IAAAM,MAAA,EAAAC,eAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEhB,IAAMC,wBAAwB,GAAAH,OAAA,CAAAG,wBAAA,GAAG,GAAG;AACpC,IAAMC,gBAAgB,GAAAJ,OAAA,CAAAI,gBAAA,GAAG,IAAI;;AAE7B,IAAMC,YAAY,GAAAL,OAAA,CAAAK,YAAA,GAAG;EAC1BC,YAAY,EAAE,KAAK;EACnBC,OAAO,EAAE,KAAK;EACdC,KAAK,EAAE,IAAI;EACXC,OAAO,EAAE,KAAK;EACdC,MAAM,EAAE,KAAK;EACbC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,EAAE;EACbC,aAAa,EAAE,SAAAA,cAAA,UAAMC,SAAS;EAC9BC,aAAa,EAAEC,0CAAqB,CAACC,OAAO;EAC5CC,IAAI,EAAE;AACR,CAAC,CAAC;;;;AAIWC,cAAc,GAAAnB,OAAA,CAAAmB,cAAA,OAF1BC,2BAAgB,EAAAnB,MAAA,OAChBoB,kBAAQ,EAAApB,MAAA,IAAAC,eAAA,0BAAAoB,oBAAA,YAAAH,eAAA,OAAAI,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,oBAAA,CAAAxB,IAAA,CAAAgC,KAAA,CAAAR,oBAAA,SAAAS,MAAA,CAAAJ,IAAA,WAAAJ,KAAA;;;;IAKAS,KAAK,GAA2B3B,YAAY,CAAAkB,KAAA;;;;IAI5CU,SAAS,GAAG,CAAC,CAAAV,KAAA;;IAEZZ,OAAO,GAAG,KAAK,CAAAY,KAAA;IACfW,gBAAgB,GAAuC,IAAI,CAAAX,KAAA;;;IAG3DY,YAAY,GAAG,IAAI,CAAAZ,KAAA;;IAEnBa,OAAO,GAAGA,8BAAO,CAAAb,KAAA;IAClBc,iBAAiB,GAAe,oBAAM,IAAI;;IAEjD;AACF;AACA,OAFEd,KAAA;IAGOe,KAAK,GAAG,UAACC,IAAwC,EAAK;MAC3D,IAAIhB,KAAA,CAAKiB,KAAK,CAACC,QAAQ,EAAE;QACvB;MACF;;MAEA,IAAIF,IAAI,YAAJA,IAAI,CAAEG,mBAAmB,EAAE;QAC7BnB,KAAA,CAAKY,YAAY,GAAG,KAAK;MAC3B;;MAEA,IAAIZ,KAAA,CAAKoB,KAAK,EAAE;QACdpB,KAAA,CAAKoB,KAAK,CAACL,KAAK,CAAC,CAAC;MACpB,CAAC,MAAM,IAAIf,KAAA,CAAKqB,aAAa,EAAE;QAC7BrB,KAAA,CAAKqB,aAAa,CAACN,KAAK,CAAC,CAAC;MAC5B;IACF,CAAC;;IAED;AACF;AACA,OAFEf,KAAA;IAGOsB,eAAe,GAAG,YAAM;MAC7B,IAAItB,KAAA,CAAKiB,KAAK,CAACC,QAAQ,EAAE;QACvB;MACF;MACA,IAAIlB,KAAA,CAAKoB,KAAK,EAAE;QACdpB,KAAA,CAAKoB,KAAK,CAACG,SAAS,CAAC,CAAC;MACxB;IACF,CAAC;;IAED;AACF;AACA,OAFEvB,KAAA;IAGOwB,IAAI,GAAG,YAAM;MAClB,IAAIxB,KAAA,CAAKiB,KAAK,CAACC,QAAQ,EAAE;QACvB;MACF;;MAEAlB,KAAA,CAAKyB,UAAU,CAAC,CAAC;IACnB,CAAC,CAAAzB,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4MO0B,QAAQ,GAAG,UAACC,MAA+B,EAAEC,IAAI,EAAY,KAAhBA,IAAI,cAAJA,IAAI,GAAG,IAAI;MAC9D,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIF,MAA+B,EAAK;QACvD,IAAIG,OAAuC;QAC3C,IAAIC,SAA8C;;QAElD/B,KAAA,CAAKgC,QAAQ;UACX,UAACvB,KAAK,EAAK;YACT,IAAMwB,cAAc,GAAGjC,KAAA,CAAKa,OAAO,CAACJ,KAAK,EAAET,KAAA,CAAKiB,KAAK,EAAEU,MAAM,CAAC,CAAC,IAAAO,IAAA;YACxCD,cAAc,YAAY5B,KAAK,GAAG4B,cAAc,GAAG,CAACA,cAAc,EAAE,EAAE,CAAC,CAA7FF,SAAS,GAAAG,IAAA,IAAEJ,OAAO,GAAAI,IAAA;YACnB,OAAOH,SAAS;UAClB,CAAC;UACD,YAAM;YACJD,OAAO,CAAC3D,OAAO,CAAC6B,KAAA,CAAKmC,YAAY,CAAC;UACpC;QACF,CAAC;MACH,CAAC;;MAED;MACA;MACA,IAAIP,IAAI,IAAIQ,cAAK,CAACC,OAAO,CAACC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;QAC5CC,iBAAQ,CAACC,SAAS,CAAC,oBAAMX,WAAW,CAACF,MAAM,CAAC,GAAC;MAC/C,CAAC,MAAM;QACLE,WAAW,CAACF,MAAM,CAAC;MACrB;IACF,CAAC,CAAA3B,KAAA;;IAEOmC,YAAY,GAAG,UAACM,MAA+B,EAAK;MAC1DA,MAAM,CAACzC,KAAA,CAAK0B,QAAQ,EAAE1B,KAAA,CAAK0C,QAAQ,EAAE1C,KAAA,CAAK2C,QAAQ,EAAE,oBAAA3C,KAAA,EAAU,CAAC;IACjE,CAAC,CAAAA,KAAA;;IAEO2C,QAAQ,GAAG,oBAAM3C,KAAA,CAAKiB,KAAK,GAAAjB,KAAA;;IAE3B0C,QAAQ,GAAG,oBAAM1C,KAAA,CAAKS,KAAK,GAAAT,KAAA;;IAE3B4C,iBAAiB,GAAG,UAACC,KAAQ,EAAK;MACxC7C,KAAA,CAAK0B,QAAQ,CAAC;QACZoB,IAAI,EAAE,aAAa;QACnBD,KAAK,EAALA,KAAK;QACLE,SAAS,EAAE,CAAC/C,KAAA,CAAKgD;MACnB,CAAC,CAAC;IACJ,CAAC,CAAAhD,KAAA;;IAEOiD,WAAW,GAAG,YAAM;MAC1B,IAAIjD,KAAA,CAAKZ,OAAO,EAAE;QAChB;MACF;;MAEAY,KAAA,CAAKZ,OAAO,GAAG,IAAI;MACnBY,KAAA,CAAK0B,QAAQ,CAAC,EAAEoB,IAAI,EAAE,OAAO,EAAEI,aAAa,EAAElD,KAAA,CAAKY,YAAY,IAAIZ,KAAA,CAAKiB,KAAK,CAACiC,aAAa,CAAC,CAAC,CAAC;;MAE9F,IAAI,CAAClD,KAAA,CAAKY,YAAY,EAAE;QACtBZ,KAAA,CAAKY,YAAY,GAAG,IAAI;MAC1B;IACF,CAAC,CAAAZ,KAAA;;IAEOmD,iBAAiB,GAAG,YAAM;MAChCnD,KAAA,CAAKoD,eAAe,CAAC,CAAC;IACxB,CAAC,CAAApD,KAAA;;IAEOqD,kBAAkB,GAAG,UAACC,CAAQ,EAAK;MACzC,IAAAC,gCAAe,EAACD,CAAC,CAAC;MAClBtD,KAAA,CAAKyB,UAAU,CAAC,CAAC;IACnB,CAAC,CAAAzB,KAAA;;IAEOyB,UAAU,GAAG,YAAM;MACzB,IAAI,CAACzB,KAAA,CAAKZ,OAAO,EAAE;QACjB,IAAIY,KAAA,CAAKS,KAAK,CAACtB,MAAM,EAAE;UACrBa,KAAA,CAAKwD,KAAK,CAAC,CAAC;QACd;QACA;MACF;;MAEAxD,KAAA,CAAKZ,OAAO,GAAG,KAAK;MACpB;MACA;MACA;MACAqE,0BAAY,CAACC,UAAU,CAAC,YAAM;QAC5B1D,KAAA,CAAK0B,QAAQ,CAAC,EAAEoB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;MACjC,CAAC,EAAE,CAAC,CAAC;IACP,CAAC,CAAA9C,KAAA;;IAEOoD,eAAe,GAAG,YAAM;MAC9B;MACA;MACA;;MAEA,IAAIpD,KAAA,CAAKS,KAAK,CAACtB,MAAM,IAAI,CAACa,KAAA,CAAKgD,cAAc,EAAE;QAC7C;MACF;MACAhD,KAAA,CAAKyB,UAAU,CAAC,CAAC;IACnB,CAAC,CAAAzB,KAAA;;IAEO2D,gBAAgB,GAAG,YAAM;MAC/B,IAAI,CAAC3D,KAAA,CAAKW,gBAAgB,EAAE;QAC1BX,KAAA,CAAK0B,QAAQ,CAAC,EAAEoB,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;MACvC;IACF,CAAC,QAAA9C,KAAA,MAAA4D,eAAA,CAAAC,OAAA,EAAAjE,cAAA,EAAAG,oBAAA,MAAA+D,MAAA,GAAAlE,cAAA,CAAAvB,SAAA,EAxSD;AACF;AACA,KAFEyF,MAAA,CAGaxB,MAAM,iCAAAyB,OAAA,OAAAC,kBAAA,CAAAH,OAAA,gBAAAI,YAAA,CAAAJ,OAAA,CAAAK,IAAA,CAAnB,SAAAC,QAAoBC,KAAa,OAAAC,MAAA,YAAAC,QAAA,EAAAC,aAAA,EAAAC,WAAA,EAAAvF,KAAA,QAAAgF,YAAA,CAAAJ,OAAA,CAAAY,IAAA,UAAAC,SAAAC,QAAA,qBAAAA,QAAA,CAAAC,IAAA,GAAAD,QAAA,CAAAE,IAAA,cAAbT,KAAa,cAAbA,KAAa,GAAG,IAAI,CAAC3D,KAAK,CAACpB,SAAS,EAC9CiF,QAAQ,GAAK,IAAI,CAACrD,KAAK,CAAvBqD,QAAQ,CAEVC,aAA6B,GAAG,IAAIO,OAAO,CAAC,UAACC,CAAC,EAAEC,MAAM,UAAMX,MAAI,CAAC1D,gBAAgB,GAAGqE,MAAM,EAAC,CAAC,CAClG,IAAI,CAACtE,SAAS,IAAI,CAAC,CACb8D,WAAW,GAAG,IAAI,CAAC9D,SAAS,CAElC,IAAI,CAAC,IAAI,CAACuE,eAAe,EAAE,CACzB,IAAI,CAACA,eAAe,GAAG,IAAIH,OAAO,CAAO,UAACI,OAAO,EAAK,CACpD,IAAMC,YAAY,GAAG,IAAAC,oBAAa,EAAC,YAAM,CACvCf,MAAI,CAAC3C,QAAQ,CAAC,EAAEoB,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,CACvCW,0BAAY,CAACC,UAAU,CAACwB,OAAO,EAAErG,gBAAgB,CAAC,CACpD,CAAC,EAAED,wBAAwB,CAAC,CAE5B2F,aAAa,CAACc,KAAK,CAAC,oBAAMF,YAAY,CAAC,CAAC,GAAC,CAEzCd,MAAI,CAACvD,iBAAiB,GAAG,YAAM,CAC7BqE,YAAY,CAAC,CAAC,CACdD,OAAO,CAAC,CAAC,CACX,CAAC,CACH,CAAC,CAAC,CACJ,CAACP,QAAA,CAAAC,IAAA,KAAAD,QAAA,CAAAE,IAAA,YAGqBC,OAAO,CAACQ,IAAI,CAAC,CAAChB,QAAQ,CAACF,KAAK,CAAC,EAAEG,aAAa,CAAC,CAAC,QAA5DtF,KAAK,GAAA0F,QAAA,CAAAY,IAAA,MACP,IAAI,CAAC9E,KAAK,CAACvB,OAAO,GAAAyF,QAAA,CAAAE,IAAA,aAAAF,QAAA,CAAAE,IAAA,aACdC,OAAO,CAACQ,IAAI,CAAC,CAAC,IAAI,CAACL,eAAe,EAAEV,aAAa,CAAC,CAAC,SAE3D,IAAIC,WAAW,KAAK,IAAI,CAAC9D,SAAS,EAAE,CAClC,IAAI,CAACgB,QAAQ,CAAC,EACZoB,IAAI,EAAE,cAAc,EACpB7D,KAAK,EAALA,KAAK,CACP,CAAC,CAAC,CACJ,CAAC0F,QAAA,CAAAE,IAAA,oBAAAF,QAAA,CAAAC,IAAA,MAAAD,QAAA,CAAAa,EAAA,GAAAb,QAAA,aAED,IAAIA,QAAA,CAAAa,EAAA,IAASb,QAAA,CAAAa,EAAA,CAAMC,IAAI,KAAK,kBAAkB,EAAE,CAC9C,IAAI,CAAC/D,QAAQ,CAAC,EAAEoB,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,CAC1C,CAAC,MAAM,IAAI0B,WAAW,KAAK,IAAI,CAAC9D,SAAS,EAAE,CACzC,IAAI,CAACgB,QAAQ,CAAC,EACZoB,IAAI,EAAE,gBAAgB,EACtBxD,aAAa,EAAE,SAAAA,cAAA,EAAM,CACnB+E,MAAI,CAAC/B,MAAM,CAAC8B,KAAK,CAAC,CAClB,IAAIC,MAAI,CAACjD,KAAK,EAAE,CACdiD,MAAI,CAACjD,KAAK,CAACL,KAAK,CAAC,CAAC,CACpB,CACF,CAAC,CACH,CAAC,CAAC,CACJ,CAAC,QAAA4D,QAAA,CAAAC,IAAA,MAED,IAAIJ,WAAW,KAAK,IAAI,CAAC9D,SAAS,EAAE,CAClC,IAAI,CAAC,IAAI,CAACD,KAAK,CAACvB,OAAO,EAAE,CACvB,IAAI,CAAC4B,iBAAiB,CAAC,CAAC,CAC1B,CACA,IAAI,CAACH,gBAAgB,GAAG,IAAI,CAC5B,IAAI,CAACsE,eAAe,GAAG,IAAI,CAC7B,CAAC,OAAAN,QAAA,CAAAe,MAAA,+BAAAf,QAAA,CAAAgB,IAAA,OAAAxB,OAAA,4BAEJ,YAAA7B,OAAAsD,EAAA,UAAA7B,OAAA,CAAAxD,KAAA,OAAAL,SAAA,UAAAoC,MAAA,KAED;AACF;AACA,KAFE,CAAAwB,MAAA,CAGO+B,YAAY,GAAnB,SAAAA,aAAA,EAAsB,CACpB,IAAI,IAAI,CAAClF,gBAAgB,EAAE,CACzB,IAAI,CAACA,gBAAgB,CAAC,IAAImF,uBAAgB,CAAC,CAAC,CAAC,CAC/C,CACF,CAAC,CAED;AACF;AACA,KAFE,CAAAhC,MAAA,CAGOiC,IAAI,GAAX,SAAAA,KAAA,EAAc,CACZ,IAAI,CAACrE,QAAQ,CAAC,EAAEoB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CACjC,CAAC,CAED;AACF;AACA,KAFE,CAAAgB,MAAA,CAGON,KAAK,GAAZ,SAAAA,MAAA,EAAe,CACb,IAAI,CAAC9B,QAAQ,CAAC,EAAEoB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAClC,CAAC,CAAAgB,MAAA,CAEMkC,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA,QACd,IAAMC,SAAS,GAAG,EAChBC,KAAK,EAAE,IAAI,CAAClF,KAAK,CAACkF,KAAK,EACvBC,UAAU,EAAE,IAAI,CAACnF,KAAK,CAACmF,UAAU,EACjClF,QAAQ,EAAE,IAAI,CAACD,KAAK,CAACC,QAAQ,EAC7BmF,aAAa,EAAE,IAAI,CAACpF,KAAK,CAACoF,aAAa,EACvCrH,OAAO,EAAE,IAAI,CAACyB,KAAK,CAACzB,OAAO,EAC3BsH,KAAK,EAAE,IAAI,CAACrF,KAAK,CAACqF,KAAK,EACvBrH,KAAK,EAAE,IAAI,CAACwB,KAAK,CAACxB,KAAK,EACvBC,OAAO,EAAE,IAAI,CAACuB,KAAK,CAACvB,OAAO,EAC3BC,MAAM,EAAE,IAAI,CAACsB,KAAK,CAACtB,MAAM,EACzBoH,SAAS,EAAE,IAAI,CAACtF,KAAK,CAACsF,SAAS,EAC/BC,OAAO,EAAE,IAAI,CAACvF,KAAK,CAACuF,OAAO,EAC3BC,SAAS,EAAE,IAAI,CAACxF,KAAK,CAACwF,SAAS,EAC/BC,WAAW,EAAE,IAAI,CAACzF,KAAK,CAACyF,WAAW,EACnC/G,IAAI,EAAE,IAAI,CAACsB,KAAK,CAACtB,IAAI,EACrBN,SAAS,EAAE,IAAI,CAACoB,KAAK,CAACpB,SAAS,EAC/BsH,UAAU,EAAE,IAAI,CAAC1F,KAAK,CAAC0F,UAAU,EACjC9D,KAAK,EAAE,IAAI,CAAC5B,KAAK,CAAC4B,KAAK,EACvB+D,aAAa,EAAE,IAAI,CAAC3F,KAAK,CAAC2F,aAAa,EACvCC,OAAO,EAAE,IAAI,CAAC5F,KAAK,CAAC4F,OAAO,EAC3B,kBAAkB,EAAE,IAAI,CAAC5F,KAAK,CAAC,kBAAkB,CAAC,EAClD,YAAY,EAAE,IAAI,CAACA,KAAK,CAAC,YAAY,CAAC,EACtC6F,EAAE,EAAE,IAAI,CAAC7F,KAAK,CAAC6F,EAAE,EACjBC,KAAK,EAAE,IAAI,CAAC9F,KAAK,CAAC8F,KAAK,EACvBC,SAAS,EAAE,IAAI,CAAC/F,KAAK,CAAC+F,SAAS,EAC/BC,aAAa,EAAE,IAAI,CAAChG,KAAK,CAACgG,aAAa,EACvCC,QAAQ,EAAE,IAAI,CAACjG,KAAK,CAACiG,QAAQ,EAC7BC,SAAS,EAAE,IAAI,CAAClG,KAAK,CAACkG,SAAS,EAC/BC,SAAS,EAAE,IAAI,CAACnG,KAAK,CAACmG,SAAS,EAC/BC,IAAI,EAAE,IAAI,CAACpG,KAAK,CAACoG,IAAI,EACrBC,QAAQ,EAAE,IAAI,CAACrG,KAAK,CAACqG,QAAQ,EAC7BC,WAAW,EAAE,IAAI,CAACtG,KAAK,CAACsG,WAAW,EACnCC,mBAAmB,EAAE,IAAI,CAACvG,KAAK,CAACuG,mBAAmB,EAEnDC,aAAa,EAAE,IAAI,CAAC7E,iBAAiB,EACrC8E,cAAc,EAAE,IAAI,CAACrE,kBAAkB,EACvCsE,OAAO,EAAE,IAAI,CAAC1E,WAAW,EACzB2E,aAAa,EAAE,IAAI,CAACzE,iBAAiB,EACrC0E,cAAc,EAAE,IAAI,CAACpG,UAAU,EAC/BqG,WAAW,EAAE,IAAI,CAAC1E,eAAe,EACjC2E,kBAAkB,EAAE,SAAAA,mBAAClF,KAAa,UAAKoD,MAAI,CAACvE,QAAQ,CAAC,EAAEoB,IAAI,EAAE,YAAY,EAAED,KAAK,EAALA,KAAK,CAAC,CAAC,CAAC,IACnFmF,YAAY,EAAE,IAAI,CAAC/E,WAAW,EAC9BgF,YAAY,EAAE,IAAI,CAACtE,gBAAgB,EACnCuE,iBAAiB,EAAE,SAAAA,kBAAA,UAAMjC,MAAI,CAACvE,QAAQ,CAAC,EAAEoB,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,IACnEqF,cAAc,EAAE,SAAAA,eAACC,KAA0B,EAAK,CAC9CA,KAAK,CAACC,OAAO,CAAC,CAAC,CACfpC,MAAI,CAACvE,QAAQ,CAAC,EAAEoB,IAAI,EAAE,UAAU,EAAEsF,KAAK,EAALA,KAAK,CAAC,CAAC,CAAC,CAC5C,CAAC,EACDE,YAAY,EAAE,IAAI,CAACrH,KAAK,CAACqH,YAAY,EACrCC,WAAW,EAAE,IAAI,CAACtH,KAAK,CAACsH,WAAW,EACnCC,YAAY,EAAE,IAAI,CAACvH,KAAK,CAACuH,YAAY,EACrCC,UAAU,EAAE,IAAI,CAACxH,KAAK,CAACwH,UAAU,EACjCC,cAAc,EAAE,IAAI,CAACzH,KAAK,CAACyH,cAAc,EACzCC,WAAW,EAAE,IAAI,CAAC1H,KAAK,CAAC0H,WAAW,EACnCC,WAAW,EAAE,IAAI,CAAC3H,KAAK,CAAC2H,WAAW,EACnCC,gBAAgB,EAAE,IAAI,CAAC5H,KAAK,CAAC4H,gBAAgB,EAC7CC,eAAe,EAAE,IAAI,CAAC7H,KAAK,CAAC6H,eAAe,EAC3CxJ,aAAa,EAAE,IAAI,CAACmB,KAAK,CAACnB,aAAa,EACvCE,aAAa,EAAE,IAAI,CAACiB,KAAK,CAACjB,aAAa,EAEvCuJ,QAAQ,EAAE,SAAAA,SAAC3H,KAAsB,EAAK,CACpC6E,MAAI,CAAC7E,KAAK,GAAGA,KAAK,CACpB,CAAC,EACD4H,OAAO,EAAE,SAAAA,QAACC,IAAoB,EAAK,CACjChD,MAAI,CAACgD,IAAI,GAAGA,IAAI,CAClB,CAAC,EACDC,gBAAgB,EAAE,SAAAA,iBAAC7H,aAAsC,EAAK,CAC5D4E,MAAI,CAAC5E,aAAa,GAAGA,aAAa,CACpC,CAAC,CACH,CAAC,CAED,oBACEnE,MAAA,CAAA2G,OAAA,CAAAsF,aAAA,CAACvL,oBAAA,CAAAwL,0BAA0B,CAACC,QAAQ,QACjC,UAACC,KAAK,EAAK,CACVrD,MAAI,CAACsD,YAAY,GAAG,IAAAC,+CAA0B,EAACF,KAAK,CAAC,CACrD,oBACEpM,MAAA,CAAA2G,OAAA,CAAAsF,aAAA,CAAC1L,cAAA,CAAAgM,aAAa,EAAKxD,MAAI,CAAChF,KAAK,eAC3B/D,MAAA,CAAA2G,OAAA,CAAAsF,aAAA,CAACpL,aAAA,CAAA2L,YAAY,MAAAC,SAAA,CAAA9F,OAAA,MAAKqC,SAAS,IAAEvG,IAAI,EAAEsG,MAAI,CAAChF,KAAK,CAACtB,IAAK,EAACiK,GAAG,EAAE3D,MAAI,CAAC4D,WAAY,GAAE,CAC/D,CAAC,CAEpB,CACmC,CAAC,CAE1C,CAAC,CAAA/F,MAAA,CAEMgG,iBAAiB,GAAxB,SAAAA,kBAAA,EAA2B,CACzB,IAAI,CAACpI,QAAQ,CAAC,EAAEoB,IAAI,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,CACvC,IAAI,IAAI,CAAC7B,KAAK,CAAC8I,SAAS,EAAE,CACxB,IAAI,CAAChJ,KAAK,CAAC,CAAC,CACd,CACF,CAAC,CAAA+C,MAAA,CAEMkG,kBAAkB,GAAzB,SAAAA,mBAA0BC,SAAiC,EAAEC,SAAiC,EAAE,CAC9F,IAAIA,SAAS,CAAClL,OAAO,IAAI,CAAC,IAAI,CAACyB,KAAK,CAACzB,OAAO,EAAE,CAC5C,IAAI,CAACyC,UAAU,CAAC,CAAC,CACnB,CACA,IAAI,CAACC,QAAQ,CACX,EACEoB,IAAI,EAAE,WAAW,EACjBmH,SAAS,EAATA,SAAS,EACTC,SAAS,EAATA,SAAS,EACTC,cAAc,EAAE,IAAI,CAACZ,YAAY,CAACa,sCAAsC,CAC1E,CAAC,EACD,KACF,CAAC,CACH,CAAC,CAED;AACF;AACA,KAFE,CAAAtG,MAAA,CAGOuG,KAAK,GAAZ,SAAAA,MAAA,EAAe,CACb,IAAI,CAAC3I,QAAQ,CAAC,EAAEoB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAClC,CAAC,QAAAlD,cAAA,GArQoCwC,cAAK,CAACkI,aAAa,GAAA3L,eAAA,CAC1C4L,mBAAmB,GAAG,gBAAgB,EAAA5L,eAAA,CACtC6L,WAAW,GAAG,gBAAgB,EAAA7L,eAAA,MAAAD,MAAA,KAAAA,MAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","CustomComboBox","rootNode","createPropsGetter","ComboBox","_class","_ComboBox","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","comboboxElement","customComboBoxRef","element","setRootNode","_inheritsLoose","_proto","prototype","focus","opts","blur","search","query","cancelSearch","open","close","selectInputText","reset","render","createElement","_extends","size","props","ref","Component","__KONTUR_REACT_UI__","displayName","itemToValue","item","value","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow","showClearIcon"],"sources":["ComboBox.tsx"],"sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport { CustomComboBox } from '../../internal/CustomComboBox';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { MenuItemState } from '../MenuItem';\nimport type { ShowClearIcon, InputIconType } from '../Input';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport type { SizeProp } from '../../lib/types/props';\n\nexport interface ComboBoxProps<T>\n extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n CommonProps {\n /** Показывать иконку очистки значения в непустом поле:\n * - `always` — всегда показывать иконку\n * - `auto` — показывать иконку при hover/focus\n * - `never` — не показывать иконку\n * При одновременной настройке `showClearIcon` и `rightIcon` показывается иконка очистки.\n * @default never */\n showClearIcon?: ShowClearIcon;\n\n /** Задает выравнивание контента. */\n align?: 'left' | 'center' | 'right';\n\n /** Вызывает функцию поиска getItems при фокусе и очистке поля ввода. */\n searchOnFocus?: boolean;\n\n /** Отображает справа иконку в виде стрелки. */\n drawArrow?: boolean;\n\n /** Устанавливает фокус на контроле после окончания загрузки страницы. */\n autoFocus?: boolean;\n\n /** Убирает обводку. */\n borderless?: boolean;\n\n /** Отключает использование портала для рендеринга меню.\n * См. https://github.com/skbkontur/retail-ui/issues/15 */\n disablePortal?: boolean;\n\n /** Делает компонент недоступным. */\n disabled?: boolean;\n\n /** Переводит контрол в состояние валидации \"ошибка\". */\n error?: boolean;\n\n /** Добавляет иконку слева.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n leftIcon?: InputIconType;\n\n /** Добавляет иконку справа.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n rightIcon?: InputIconType;\n\n /** Задает функцию поиска элементов, которая должна возвращать Promise с массивом элементов.\n * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n * Элементы могут быть любого типа. В этом случае необходимо определить свойства `itemToValue`, `renderValue`, `renderItem`, `valueToString`. */\n getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n\n /** Задает функцию сравнения полученных результатов с value. */\n itemToValue?: (item: T) => string | number;\n\n /** Задает максимальную длину инпута. */\n maxLength?: number;\n\n /** Задает текущую позицию выпадающего окна вручную.\n */\n menuPos?: 'top' | 'bottom';\n\n /** Задает выравнивание выпадающего меню. */\n menuAlign?: 'left' | 'right';\n\n /** Задает функцию, которая вызывается при потере комбобоксом фокуса. */\n onBlur?: () => void;\n\n /** Вызывается при изменении `value` */\n onValueChange?: (value: T) => void;\n\n /** Задает функцию, которая вызывается при получении комбобоксом фокуса. */\n onFocus?: () => void;\n\n /** Задает функцию, которая вызывается при изменении текста в поле ввода, если результатом функции будет строка, то она станет следующим состоянием полем ввода. */\n onInputValueChange?: (value: string) => Nullable<string> | void;\n\n /** Задает функцию для обработки ввода строки в инпут и последующей потерей фокуса компонентом.\n * Функция срабатывает с аргументом инпута строки.\n * Если при потере фокуса в выпадающем списке будет только один элемент и результат valueToString с этим элементом будет совпадать со значение в текстовом поле, то сработает onValueChange со значением данного элемента.\n * Сама функция также может вернуть значение, неравное undefined, с которым будет вызван onValueChange. Если возвращаемое значение будет равно null, то сработает очистка текущего значения инпута, а в режиме редактирования токен будет удален. */\n onUnexpectedInput?: (value: string) => void | null | T;\n\n /** Задает текст, который отображается если не введено никакое значение. */\n placeholder?: string;\n\n /** Задает функцию отрисовки элементов результата поиска.\n * Не применяется если элемент является функцией или React-элементом\n * @default item => item.label\n * @param {T} item - элемент из результата поиска.\n * @param {MenuItemState} state? - состояние элемента.\n * @returns {React.ReactNode} React-элемент. */\n renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n /** Устанавливает компонент, заменяющий собой обёртку элементов результата поиска.\n * По умолчанию все элементы результата поиска оборачиваются в тег <button />.\n * @example\n * itemWrapper={(item) => {\n * if (item.value === 3) {\n * return (props) => {\n * return <a {...props} />\n * }\n * }\n * }}\n */\n itemWrapper?: (item: T) => React.ComponentType;\n\n /** Задает функцию, которая отображает сообщение о пустом результате поиска. При renderAddButton не работает. */\n renderNotFound?: () => React.ReactNode;\n\n /** Задает функцию, которая отображает сообщение об общем количестве элементов.\n * @param {number} found - количество элементов по результатам поиска. Учитывает только компонент MenuItem. Им \"оборачиваются\" элементы, возвращаемые getItems().\n * @param {number} total - количество всех элементов. */\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n /** Задает функцию, которая отображает выбранное значение.\n * @default item => item.label */\n renderValue?: (item: T) => React.ReactNode;\n\n /** Задает функцию отрисовки кнопки добавления в выпадающем списке. */\n renderAddButton?: (query?: string) => React.ReactNode;\n\n /** Определяет общее количество элементов. Необходим для работы renderTotalCount. */\n totalCount?: number;\n\n /** Устанавливает выбранное в комбобоксе значение. Тип `value` совпадает с типом элементов в массиве, возвращаемом в `getItems`. */\n value?: Nullable<T>;\n\n /** Задает функцию, которая возвращает строковое представление value. Необходимо при фокусировке. */\n valueToString?: (item: T) => string;\n\n /** Задает размер компонента. */\n size?: SizeProp;\n\n /** Переводит контрол в состояние валидации \"предупреждение\". */\n warning?: boolean;\n\n /** Задает длину комбобокса. */\n width?: string | number;\n\n /** Задает максимальную высоту меню. */\n maxMenuHeight?: number | string;\n\n /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */\n onMouseEnter?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */\n onMouseOver?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n onMouseLeave?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */\n onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n /** Задает типы вводимых данных. */\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n}\n\nexport interface ComboBoxItem {\n value: string;\n label: string;\n}\n\nexport type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;\n\ntype DefaultProps<T> = Required<\n Pick<\n ComboBoxProps<T>,\n | 'itemToValue'\n | 'valueToString'\n | 'renderValue'\n | 'renderItem'\n | 'menuAlign'\n | 'searchOnFocus'\n | 'drawArrow'\n | 'showClearIcon'\n >\n>;\n\n/**\n * `ComboBox` — это поле ввода со списком подсказок.\n *\n * `ComboBox` используют:\n * * для выбора значения из справочника.\n * * для добавления своего значения в справочник.\n *\n * `ComboBox` может работать в двух режимах — обычном и в режиме автокомплита.\n * Основное их отличие в том, что в режиме автокомплита список вариантов появляется только после ввода первого символа или изменении уже введенного значения.\n */\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n public static __KONTUR_REACT_UI__ = 'ComboBox';\n public static displayName = 'ComboBox';\n\n public static defaultProps: DefaultProps<any> = {\n itemToValue: (item: ComboBoxItem) => item.value,\n valueToString: (item: ComboBoxItem) => item.label,\n renderValue: (item: ComboBoxItem) => item.label,\n renderItem: (item: ComboBoxItem) => item.label,\n menuAlign: 'left',\n searchOnFocus: true,\n drawArrow: true,\n showClearIcon: 'never',\n };\n\n private getProps = createPropsGetter(ComboBox.defaultProps);\n\n private comboboxElement: Nullable<CustomComboBox<T>> = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n /**\n * @public\n */\n public focus(opts?: { withoutOpenDropdown?: boolean }) {\n if (this.comboboxElement) {\n this.comboboxElement.focus(opts);\n }\n }\n\n /**\n * @public\n */\n public blur() {\n if (this.comboboxElement) {\n this.comboboxElement.blur();\n }\n }\n\n /**\n * Открывает выпадающий список и запускает поиск элементов\n *\n * @public\n * @param {string} [query] Текст поиска. По умолчанию берется\n * текст из инпута или результат `valueToString(value)`\n */\n public search(query?: string) {\n if (this.comboboxElement) {\n this.comboboxElement.search(query);\n }\n }\n\n /**\n * @public\n */\n public cancelSearch() {\n if (this.comboboxElement) {\n this.comboboxElement.cancelSearch();\n }\n }\n\n /**\n * @public Открывает выпадающий список\n */\n public open() {\n if (this.comboboxElement) {\n this.comboboxElement.open();\n }\n }\n\n /**\n * @public Закрывает выпадающий список\n */\n public close() {\n if (this.comboboxElement) {\n this.comboboxElement.close();\n }\n }\n\n /**\n * Выделяет текст внутри input\n * @public\n */\n public selectInputText() {\n if (this.comboboxElement) {\n this.comboboxElement.selectInputText();\n }\n }\n\n /**\n * Сбрасывает введенное пользователем значение\n * @public\n */\n public reset() {\n if (this.comboboxElement) {\n this.comboboxElement.reset();\n }\n }\n\n public render() {\n return <CustomComboBox {...this.getProps()} size={this.props.size} ref={this.customComboBoxRef} />;\n }\n\n private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n this.setRootNode(element);\n this.comboboxElement = element;\n };\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","CustomComboBox","rootNode","createPropsGetter","ComboBox","_class","_ComboBox","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","comboboxElement","customComboBoxRef","element","setRootNode","_inheritsLoose","_proto","prototype","focus","opts","blur","search","query","cancelSearch","open","close","selectInputText","reset","render","createElement","_extends","size","props","ref","Component","__KONTUR_REACT_UI__","displayName","itemToValue","item","value","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow","showClearIcon"],"sources":["ComboBox.tsx"],"sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport { CustomComboBox } from '../../internal/CustomComboBox';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { MenuItemState } from '../MenuItem';\nimport type { ShowClearIcon, InputIconType } from '../Input';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { MaskedInputOnBeforePasteValue, MaskedInputProps } from '../MaskedInput';\n\nexport interface ComboBoxProps<T>\n extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\n Partial<Pick<MaskedInputProps, 'mask' | 'maskChar' | 'formatChars'>>,\n CommonProps {\n /** Показывать иконку очистки значения в непустом поле:\n * - `always` — всегда показывать иконку\n * - `auto` — показывать иконку при hover/focus\n * - `never` — не показывать иконку\n * При одновременной настройке `showClearIcon` и `rightIcon` показывается иконка очистки.\n * @default never */\n showClearIcon?: ShowClearIcon;\n\n /** Задает выравнивание контента. */\n align?: 'left' | 'center' | 'right';\n\n /** Вызывает функцию поиска getItems при фокусе и очистке поля ввода. */\n searchOnFocus?: boolean;\n\n /** Отображает справа иконку в виде стрелки. */\n drawArrow?: boolean;\n\n /** Устанавливает фокус на контроле после окончания загрузки страницы. */\n autoFocus?: boolean;\n\n /** Убирает обводку. */\n borderless?: boolean;\n\n /** Отключает использование портала для рендеринга меню.\n * См. https://github.com/skbkontur/retail-ui/issues/15 */\n disablePortal?: boolean;\n\n /** Делает компонент недоступным. */\n disabled?: boolean;\n\n /** Переводит контрол в состояние валидации \"ошибка\". */\n error?: boolean;\n\n /** Добавляет иконку слева.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n leftIcon?: InputIconType;\n\n /** Добавляет иконку справа.\n При использовании `ReactNode` применяются дефолтные стили для иконки.\n При использовании `() => ReactNode` применяются только стили для позиционирования. */\n rightIcon?: InputIconType;\n\n /** Задает функцию поиска элементов, которая должна возвращать Promise с массивом элементов.\n * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n * Элементы могут быть любого типа. В этом случае необходимо определить свойства `itemToValue`, `renderValue`, `renderItem`, `valueToString`. */\n getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n\n /** Задает функцию сравнения полученных результатов с value. */\n itemToValue?: (item: T) => string | number;\n\n /** Задает максимальную длину инпута. */\n maxLength?: number;\n\n /** Задает текущую позицию выпадающего окна вручную.\n */\n menuPos?: 'top' | 'bottom';\n\n /** Задает выравнивание выпадающего меню. */\n menuAlign?: 'left' | 'right';\n\n /** Задает функцию, которая вызывается при потере комбобоксом фокуса. */\n onBlur?: () => void;\n\n /** Вызывается при изменении `value` */\n onValueChange?: (value: T) => void;\n\n /** Задает функцию, которая вызывается при получении комбобоксом фокуса. */\n onFocus?: () => void;\n\n /** Задает функцию, которая вызывается при изменении текста в поле ввода, если результатом функции будет строка, то она станет следующим состоянием полем ввода. */\n onInputValueChange?: (value: string) => Nullable<string> | void;\n\n /** Задает функцию для обработки ввода строки в инпут и последующей потерей фокуса компонентом.\n * Функция срабатывает с аргументом инпута строки.\n * Если при потере фокуса в выпадающем списке будет только один элемент и результат valueToString с этим элементом будет совпадать со значение в текстовом поле, то сработает onValueChange со значением данного элемента.\n * Сама функция также может вернуть значение, неравное undefined, с которым будет вызван onValueChange. Если возвращаемое значение будет равно null, то сработает очистка текущего значения инпута, а в режиме редактирования токен будет удален. */\n onUnexpectedInput?: (value: string) => void | null | T;\n\n /** Задает текст, который отображается если не введено никакое значение. */\n placeholder?: string;\n\n /** Задает функцию отрисовки элементов результата поиска.\n * Не применяется если элемент является функцией или React-элементом\n * @default item => item.label\n * @param {T} item - элемент из результата поиска.\n * @param {MenuItemState} state? - состояние элемента.\n * @returns {React.ReactNode} React-элемент. */\n renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n /** Устанавливает компонент, заменяющий собой обёртку элементов результата поиска.\n * По умолчанию все элементы результата поиска оборачиваются в тег <button />.\n * @example\n * itemWrapper={(item) => {\n * if (item.value === 3) {\n * return (props) => {\n * return <a {...props} />\n * }\n * }\n * }}\n */\n itemWrapper?: (item: T) => React.ComponentType;\n\n /** Задает функцию, которая отображает сообщение о пустом результате поиска. При renderAddButton не работает. */\n renderNotFound?: () => React.ReactNode;\n\n /** Задает функцию, которая отображает сообщение об общем количестве элементов.\n * @param {number} found - количество элементов по результатам поиска. Учитывает только компонент MenuItem. Им \"оборачиваются\" элементы, возвращаемые getItems().\n * @param {number} total - количество всех элементов. */\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n /** Задает функцию, которая отображает выбранное значение.\n * @default item => item.label */\n renderValue?: (item: T) => React.ReactNode;\n\n /** Задает функцию отрисовки кнопки добавления в выпадающем списке. */\n renderAddButton?: (query?: string) => React.ReactNode;\n\n /** Определяет общее количество элементов. Необходим для работы renderTotalCount. */\n totalCount?: number;\n\n /** Устанавливает выбранное в комбобоксе значение. Тип `value` совпадает с типом элементов в массиве, возвращаемом в `getItems`. */\n value?: Nullable<T>;\n\n /** Задает функцию, которая возвращает строковое представление value. Необходимо при фокусировке. */\n valueToString?: (item: T) => string;\n\n /** Задает размер компонента. */\n size?: SizeProp;\n\n /** Переводит контрол в состояние валидации \"предупреждение\". */\n warning?: boolean;\n\n /** Задает длину комбобокса. */\n width?: string | number;\n\n /** Задает максимальную высоту меню. */\n maxMenuHeight?: number | string;\n\n /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */\n onMouseEnter?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */\n onMouseOver?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n onMouseLeave?: (e: React.MouseEvent) => void;\n\n /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */\n onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n /** Задает типы вводимых данных. */\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n\n /** Задает функцию, которая вызывается при вставке значения в инпут с маской. */\n onBeforePasteInMask?: MaskedInputOnBeforePasteValue;\n}\n\nexport interface ComboBoxItem {\n value: string;\n label: string;\n}\n\nexport type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;\n\ntype DefaultProps<T> = Required<\n Pick<\n ComboBoxProps<T>,\n | 'itemToValue'\n | 'valueToString'\n | 'renderValue'\n | 'renderItem'\n | 'menuAlign'\n | 'searchOnFocus'\n | 'drawArrow'\n | 'showClearIcon'\n >\n>;\n\n/**\n * `ComboBox` — это поле ввода со списком подсказок.\n *\n * `ComboBox` используют:\n * * для выбора значения из справочника.\n * * для добавления своего значения в справочник.\n *\n * `ComboBox` может работать в двух режимах — обычном и в режиме автокомплита.\n * Основное их отличие в том, что в режиме автокомплита список вариантов появляется только после ввода первого символа или изменении уже введенного значения.\n */\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n public static __KONTUR_REACT_UI__ = 'ComboBox';\n public static displayName = 'ComboBox';\n\n public static defaultProps: DefaultProps<any> = {\n itemToValue: (item: ComboBoxItem) => item.value,\n valueToString: (item: ComboBoxItem) => item.label,\n renderValue: (item: ComboBoxItem) => item.label,\n renderItem: (item: ComboBoxItem) => item.label,\n menuAlign: 'left',\n searchOnFocus: true,\n drawArrow: true,\n showClearIcon: 'never',\n };\n\n private getProps = createPropsGetter(ComboBox.defaultProps);\n\n private comboboxElement: Nullable<CustomComboBox<T>> = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n /**\n * @public\n */\n public focus(opts?: { withoutOpenDropdown?: boolean }) {\n if (this.comboboxElement) {\n this.comboboxElement.focus(opts);\n }\n }\n\n /**\n * @public\n */\n public blur() {\n if (this.comboboxElement) {\n this.comboboxElement.blur();\n }\n }\n\n /**\n * Открывает выпадающий список и запускает поиск элементов\n *\n * @public\n * @param {string} [query] Текст поиска. По умолчанию берется\n * текст из инпута или результат `valueToString(value)`\n */\n public search(query?: string) {\n if (this.comboboxElement) {\n this.comboboxElement.search(query);\n }\n }\n\n /**\n * @public\n */\n public cancelSearch() {\n if (this.comboboxElement) {\n this.comboboxElement.cancelSearch();\n }\n }\n\n /**\n * @public Открывает выпадающий список\n */\n public open() {\n if (this.comboboxElement) {\n this.comboboxElement.open();\n }\n }\n\n /**\n * @public Закрывает выпадающий список\n */\n public close() {\n if (this.comboboxElement) {\n this.comboboxElement.close();\n }\n }\n\n /**\n * Выделяет текст внутри input\n * @public\n */\n public selectInputText() {\n if (this.comboboxElement) {\n this.comboboxElement.selectInputText();\n }\n }\n\n /**\n * Сбрасывает введенное пользователем значение\n * @public\n */\n public reset() {\n if (this.comboboxElement) {\n this.comboboxElement.reset();\n }\n }\n\n public render() {\n return <CustomComboBox {...this.getProps()} size={this.props.size} ref={this.customComboBoxRef} />;\n }\n\n private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n this.setRootNode(element);\n this.comboboxElement = element;\n };\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,7 +6,8 @@ import type { ShowClearIcon, InputIconType } from '../Input';
|
|
|
6
6
|
import type { CommonProps } from '../../internal/CommonWrapper';
|
|
7
7
|
import type { TGetRootNode } from '../../lib/rootNode';
|
|
8
8
|
import type { SizeProp } from '../../lib/types/props';
|
|
9
|
-
|
|
9
|
+
import type { MaskedInputOnBeforePasteValue, MaskedInputProps } from '../MaskedInput';
|
|
10
|
+
export interface ComboBoxProps<T> extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, Partial<Pick<MaskedInputProps, 'mask' | 'maskChar' | 'formatChars'>>, CommonProps {
|
|
10
11
|
/** Показывать иконку очистки значения в непустом поле:
|
|
11
12
|
* - `always` — всегда показывать иконку
|
|
12
13
|
* - `auto` — показывать иконку при hover/focus
|
|
@@ -121,6 +122,8 @@ export interface ComboBoxProps<T> extends Pick<AriaAttributes, 'aria-describedby
|
|
|
121
122
|
onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
|
|
122
123
|
/** Задает типы вводимых данных. */
|
|
123
124
|
inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
|
|
125
|
+
/** Задает функцию, которая вызывается при вставке значения в инпут с маской. */
|
|
126
|
+
onBeforePasteInMask?: MaskedInputOnBeforePasteValue;
|
|
124
127
|
}
|
|
125
128
|
export interface ComboBoxItem {
|
|
126
129
|
value: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "colored", "imaskProps", "unmask", "onValueChange", "onUnexpectedInput", "onChange", "element", "className"];
|
|
3
|
+
var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "colored", "imaskProps", "unmask", "onValueChange", "onUnexpectedInput", "onChange", "onBeforePasteValue", "element", "className"];
|
|
4
4
|
import React, { useImperativeHandle, useRef, useState, useEffect, useContext } from 'react';
|
|
5
5
|
import { forwardRefAndName } from "../../../lib/forwardRefAndName";
|
|
6
6
|
import { cx } from "../../../lib/theming/Emotion";
|
|
@@ -45,6 +45,7 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
|
|
|
45
45
|
onValueChange = props.onValueChange,
|
|
46
46
|
onUnexpectedInput = props.onUnexpectedInput,
|
|
47
47
|
onChange = props.onChange,
|
|
48
|
+
onBeforePasteValue = props.onBeforePasteValue,
|
|
48
49
|
element = props.element,
|
|
49
50
|
className = props.className,
|
|
50
51
|
inputProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
@@ -87,6 +88,7 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
|
|
|
87
88
|
onBlur: handleBlur,
|
|
88
89
|
onInput: handleInput,
|
|
89
90
|
onKeyDown: handleKeyDown,
|
|
91
|
+
onPaste: handlePaste,
|
|
90
92
|
className: cx(globalClasses.root, uiFontGlobalClassesRoot, className, styles.root(theme)),
|
|
91
93
|
element: colored ? /*#__PURE__*/
|
|
92
94
|
React.createElement(ColorableInputElement, {
|
|
@@ -101,6 +103,14 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
|
|
|
101
103
|
}))
|
|
102
104
|
}))
|
|
103
105
|
);
|
|
106
|
+
function handlePaste(event) {
|
|
107
|
+
if (onBeforePasteValue && onValueChange) {
|
|
108
|
+
var _event$clipboardData$, _event$clipboardData;
|
|
109
|
+
event.preventDefault();
|
|
110
|
+
onValueChange == null || onValueChange(onBeforePasteValue((_event$clipboardData$ = (_event$clipboardData = event.clipboardData) == null ? void 0 : _event$clipboardData.getData('text')) != null ? _event$clipboardData$ : ''));
|
|
111
|
+
}
|
|
112
|
+
props.onPaste == null || props.onPaste(event);
|
|
113
|
+
}
|
|
104
114
|
function getCompatibleIMaskProps() {
|
|
105
115
|
return _extends({
|
|
106
116
|
mask: mask.replace(/0/g, '{\\0}'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useImperativeHandle","useRef","useState","useEffect","useContext","forwardRefAndName","cx","Input","isKeyBackspace","isKeyDelete","ThemeContext","globalClasses","styles","getDefinitions","getMaskChar","ColorableInputElement","FixedIMaskInput","getSafeMaskInputType","type","MaskedInput","props","ref","mask","maskChar","formatChars","_props$alwaysShowMask","alwaysShowMask","_props$colored","colored","_props$imaskProps","imaskProps","customIMaskProps","_props$unmask","unmask","onValueChange","onUnexpectedInput","onChange","element","className","inputProps","_objectWithoutPropertiesLoose","_excluded","theme","inputRef","_useState","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","current","Object","assign","selectAll","_inputRef$current","_inputRef$current2","focus","delaySelectAll","_inputRef$current3","input","selectionStart","getCompatibleIMaskProps","uiFontGlobalClassesRoot","createElement","_extends","onFocus","handleFocus","onBlur","handleBlur","onInput","handleInput","onKeyDown","handleKeyDown","root","showOnFocus","onAccept","handleAccept","replace","placeholderChar","definitions","eager","overwrite","lazy","disabled","_len","arguments","length","args","Array","_key","e","_e$currentTarget","currentTarget","handleUnexpectedInput","_inputRef$current4","selectAllOnFocus","_inputRef$current5","blink","bind","undefined","_e$currentTarget2","selectionEnd"],"sources":["MaskedInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState, useEffect, useContext } from 'react';\nimport type { IMaskInputProps } from '@skbkontur/react-imask';\nimport type { Ref } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { InputProps, InputType } from '../Input';\nimport { Input } from '../Input';\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { globalClasses, styles } from './MaskedInput.styles';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers';\nimport { ColorableInputElement } from './ColorableInputElement';\nimport { FixedIMaskInput } from './FixedIMaskInput';\n\nexport interface MaskedProps {\n /** Паттерн маски */\n mask: string;\n\n /** Устанавливает символ маски\n * @default _ */\n maskChar?: string;\n\n /** Задает словарь символов-регулярок для задания маски.\n * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' } */\n formatChars?: Record<string, string>;\n\n /** Включает показ символов маски.\n * @default false */\n alwaysShowMask?: boolean;\n\n /** Задает обработчик неправильного ввода.\n * Вторым агрументом будет передан метод вспыхивания акцентным цветом.\n *\n * Если обработчик не задан, то инпут вспыхивает по-умолчанию.\n * @param value значение инпута.\n * @param blink вспыхнуть акцентным цвтетом.\n */\n onUnexpectedInput?: (value: string, blink: () => void) => void;\n\n /** Убирает из value символы, не введённые пользователем\n * @default false */\n unmask?: boolean;\n\n /** Раскрашивает символы маски.\n * @default true\n * @ignore */\n colored?: boolean;\n\n /** Задает пропы для компонента `IMaskInput`. Необходимы для юнит-тестов\n * @ignore */\n imaskProps?: IMaskInputProps<HTMLInputElement>;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport const getSafeMaskInputType = (type?: InputType): MaskInputType | undefined => {\n if (!type) {\n return type;\n }\n\n switch (type) {\n case 'number':\n case 'date':\n case 'time':\n case 'password':\n return 'text';\n default:\n return type;\n }\n};\n\nexport interface MaskedInputProps\n extends MaskedProps,\n Omit<\n InputProps,\n 'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'\n > {\n type?: MaskInputType;\n}\n\n/**\n * Интерфейс пропсов наследуется от `Input`.\n * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.\n */\nexport const MaskedInput = forwardRefAndName(\n 'MaskedInput',\n function MaskedInput(props: MaskedInputProps, ref: Ref<Input | null>) {\n const {\n mask,\n maskChar,\n formatChars,\n alwaysShowMask = false,\n colored = true,\n imaskProps: customIMaskProps = {},\n unmask = false,\n onValueChange,\n onUnexpectedInput,\n onChange,\n element,\n className,\n ...inputProps\n } = props;\n const theme = useContext(ThemeContext);\n\n const inputRef = useRef<Input>(null);\n\n const [focused, setFocused] = useState(false);\n const prevValue = useRef<string>(props.value || String(props.defaultValue) || '');\n const prevSelectionStart = useRef<number | null>(null);\n\n useImperativeHandle(\n ref,\n () =>\n inputRef.current &&\n Object.assign(inputRef.current, {\n selectAll: () => {\n inputRef.current?.focus();\n inputRef.current?.delaySelectAll();\n },\n }),\n [],\n );\n\n useEffect(() => {\n // Для корректной работы onUnexpectedInput надо знать предыдущий value,\n // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.\n // Поэтому актуальный value при монтировании надо получать вручную\n if (inputRef.current?.input) {\n prevValue.current = inputRef.current.input.value;\n prevSelectionStart.current = inputRef.current.input.selectionStart;\n }\n }, []);\n\n const imaskProps = getCompatibleIMaskProps();\n\n // TODO: Удалить в следующем мажоре\n // Селекторы могут ожидать определённый порядок классов\n const uiFontGlobalClassesRoot = 'react-ui-ui-font-root';\n\n return (\n <Input\n ref={inputRef}\n {...inputProps}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onInput={handleInput}\n onKeyDown={handleKeyDown}\n className={cx(globalClasses.root, uiFontGlobalClassesRoot, className, styles.root(theme))}\n element={\n colored ? (\n <ColorableInputElement showOnFocus={false}>\n <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n </ColorableInputElement>\n ) : (\n <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n )\n }\n />\n );\n\n function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n return {\n mask: mask.replace(/0/g, '{\\\\0}') as any,\n placeholderChar: getMaskChar(maskChar),\n definitions: getDefinitions(formatChars),\n // FIXME: Должно быть eager=true, но в imask ломается удаление по delete\n eager: 'append',\n overwrite: 'shift',\n lazy: !alwaysShowMask && (props.disabled || !focused),\n unmask,\n ...customIMaskProps,\n } as IMaskInputProps<HTMLInputElement>;\n }\n\n function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n const [value, , e] = args;\n\n // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.\n // Но нативный input никогда не вызывает onChange при монтировании.\n // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,\n // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.\n // Он содержит нативное событие, вызвавшее изменение.\n e && onValueChange?.(value);\n !e && (prevValue.current = value);\n }\n\n /**\n * Отслеживаем неожиданные нажатия\n * handleAccept не вызывается когда значение с маской не меняется\n * Сначала вызывается handleAccept, затем handleInput\n */\n function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n const { value, selectionStart } = e.currentTarget;\n\n // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.\n // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.\n if (prevValue.current === value && selectionStart === prevSelectionStart.current) {\n handleUnexpectedInput(value);\n }\n prevValue.current = value;\n prevSelectionStart.current = selectionStart;\n\n props.onInput?.(e);\n }\n\n function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n setFocused(true);\n props.onFocus?.(e);\n\n // Если value из пропов отличается от value, которое получит input после обработки,\n // то imask будет ставить каретку за последним валидным символом.\n props.selectAllOnFocus && inputRef.current?.delaySelectAll();\n }\n\n function handleUnexpectedInput(value: string) {\n const blink = inputRef.current?.blink.bind(inputRef.current) || (() => undefined);\n onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();\n }\n\n function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n setFocused(false);\n props.onBlur?.(e);\n }\n\n function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n const { value, selectionStart, selectionEnd } = e.currentTarget;\n\n if (\n (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0) ||\n (isKeyDelete(e) && prevSelectionStart.current === value.length)\n ) {\n // Случаи, когда нажатие клавиш не тригерит `onInput`\n handleUnexpectedInput(value);\n prevValue.current = e.currentTarget.value;\n }\n prevSelectionStart.current = selectionStart;\n\n props.onKeyDown?.(e);\n }\n },\n);\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","useImperativeHandle","useRef","useState","useEffect","useContext","forwardRefAndName","cx","Input","isKeyBackspace","isKeyDelete","ThemeContext","globalClasses","styles","getDefinitions","getMaskChar","ColorableInputElement","FixedIMaskInput","getSafeMaskInputType","type","MaskedInput","props","ref","mask","maskChar","formatChars","_props$alwaysShowMask","alwaysShowMask","_props$colored","colored","_props$imaskProps","imaskProps","customIMaskProps","_props$unmask","unmask","onValueChange","onUnexpectedInput","onChange","onBeforePasteValue","element","className","inputProps","_objectWithoutPropertiesLoose","_excluded","theme","inputRef","_useState","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","current","Object","assign","selectAll","_inputRef$current","_inputRef$current2","focus","delaySelectAll","_inputRef$current3","input","selectionStart","getCompatibleIMaskProps","uiFontGlobalClassesRoot","createElement","_extends","onFocus","handleFocus","onBlur","handleBlur","onInput","handleInput","onKeyDown","handleKeyDown","onPaste","handlePaste","root","showOnFocus","onAccept","handleAccept","event","_event$clipboardData$","_event$clipboardData","preventDefault","clipboardData","getData","replace","placeholderChar","definitions","eager","overwrite","lazy","disabled","_len","arguments","length","args","Array","_key","e","_e$currentTarget","currentTarget","handleUnexpectedInput","_inputRef$current4","selectAllOnFocus","_inputRef$current5","blink","bind","undefined","_e$currentTarget2","selectionEnd"],"sources":["MaskedInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState, useEffect, useContext } from 'react';\nimport type { IMaskInputProps } from '@skbkontur/react-imask';\nimport type { Ref } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { InputProps, InputType } from '../Input';\nimport { Input } from '../Input';\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { globalClasses, styles } from './MaskedInput.styles';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers';\nimport { ColorableInputElement } from './ColorableInputElement';\nimport { FixedIMaskInput } from './FixedIMaskInput';\n\nexport type MaskedInputOnBeforePasteValue = (value: string) => string;\n\nexport interface MaskedProps {\n /** Паттерн маски */\n mask: string;\n\n /** Устанавливает символ маски\n * @default _ */\n maskChar?: string;\n\n /** Задает словарь символов-регулярок для задания маски.\n * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' } */\n formatChars?: Record<string, string>;\n\n /** Включает показ символов маски.\n * @default false */\n alwaysShowMask?: boolean;\n\n /** Задает обработчик неправильного ввода.\n * Вторым агрументом будет передан метод вспыхивания акцентным цветом.\n *\n * Если обработчик не задан, то инпут вспыхивает по-умолчанию.\n * @param value значение инпута.\n * @param blink вспыхнуть акцентным цвтетом.\n */\n onUnexpectedInput?: (value: string, blink: () => void) => void;\n\n /** Задает обработчик вставки значения в инпут.\n * В value будет передано значение из буфера обмена.\n * Возвращаемое значение будет использовано как значение инпута.\n * Используется для фильтрации значения при вставке из буфера обмена.\n * @param value значение вставки.\n */\n onBeforePasteValue?: MaskedInputOnBeforePasteValue;\n\n /** Убирает из value символы, не введённые пользователем\n * @default false */\n unmask?: boolean;\n\n /** Раскрашивает символы маски.\n * @default true\n * @ignore */\n colored?: boolean;\n\n /** Задает пропы для компонента `IMaskInput`. Необходимы для юнит-тестов\n * @ignore */\n imaskProps?: IMaskInputProps<HTMLInputElement>;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport const getSafeMaskInputType = (type?: InputType): MaskInputType | undefined => {\n if (!type) {\n return type;\n }\n\n switch (type) {\n case 'number':\n case 'date':\n case 'time':\n case 'password':\n return 'text';\n default:\n return type;\n }\n};\n\nexport interface MaskedInputProps\n extends MaskedProps,\n Omit<\n InputProps,\n 'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'\n > {\n type?: MaskInputType;\n}\n\n/**\n * Интерфейс пропсов наследуется от `Input`.\n * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.\n */\nexport const MaskedInput = forwardRefAndName(\n 'MaskedInput',\n function MaskedInput(props: MaskedInputProps, ref: Ref<Input | null>) {\n const {\n mask,\n maskChar,\n formatChars,\n alwaysShowMask = false,\n colored = true,\n imaskProps: customIMaskProps = {},\n unmask = false,\n onValueChange,\n onUnexpectedInput,\n onChange,\n onBeforePasteValue,\n element,\n className,\n ...inputProps\n } = props;\n const theme = useContext(ThemeContext);\n\n const inputRef = useRef<Input>(null);\n\n const [focused, setFocused] = useState(false);\n const prevValue = useRef<string>(props.value || String(props.defaultValue) || '');\n const prevSelectionStart = useRef<number | null>(null);\n\n useImperativeHandle(\n ref,\n () =>\n inputRef.current &&\n Object.assign(inputRef.current, {\n selectAll: () => {\n inputRef.current?.focus();\n inputRef.current?.delaySelectAll();\n },\n }),\n [],\n );\n\n useEffect(() => {\n // Для корректной работы onUnexpectedInput надо знать предыдущий value,\n // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.\n // Поэтому актуальный value при монтировании надо получать вручную\n if (inputRef.current?.input) {\n prevValue.current = inputRef.current.input.value;\n prevSelectionStart.current = inputRef.current.input.selectionStart;\n }\n }, []);\n\n const imaskProps = getCompatibleIMaskProps();\n\n // TODO: Удалить в следующем мажоре\n // Селекторы могут ожидать определённый порядок классов\n const uiFontGlobalClassesRoot = 'react-ui-ui-font-root';\n\n return (\n <Input\n ref={inputRef}\n {...inputProps}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onInput={handleInput}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n className={cx(globalClasses.root, uiFontGlobalClassesRoot, className, styles.root(theme))}\n element={\n colored ? (\n <ColorableInputElement showOnFocus={false}>\n <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n </ColorableInputElement>\n ) : (\n <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n )\n }\n />\n );\n\n function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n if (onBeforePasteValue && onValueChange) {\n event.preventDefault();\n onValueChange?.(onBeforePasteValue(event.clipboardData?.getData('text') ?? ''));\n }\n\n props.onPaste?.(event);\n }\n\n function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n return {\n mask: mask.replace(/0/g, '{\\\\0}') as any,\n placeholderChar: getMaskChar(maskChar),\n definitions: getDefinitions(formatChars),\n // FIXME: Должно быть eager=true, но в imask ломается удаление по delete\n eager: 'append',\n overwrite: 'shift',\n lazy: !alwaysShowMask && (props.disabled || !focused),\n unmask,\n ...customIMaskProps,\n } as IMaskInputProps<HTMLInputElement>;\n }\n\n function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n const [value, , e] = args;\n\n // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.\n // Но нативный input никогда не вызывает onChange при монтировании.\n // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,\n // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.\n // Он содержит нативное событие, вызвавшее изменение.\n e && onValueChange?.(value);\n !e && (prevValue.current = value);\n }\n\n /**\n * Отслеживаем неожиданные нажатия\n * handleAccept не вызывается когда значение с маской не меняется\n * Сначала вызывается handleAccept, затем handleInput\n */\n function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n const { value, selectionStart } = e.currentTarget;\n\n // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.\n // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.\n if (prevValue.current === value && selectionStart === prevSelectionStart.current) {\n handleUnexpectedInput(value);\n }\n prevValue.current = value;\n prevSelectionStart.current = selectionStart;\n\n props.onInput?.(e);\n }\n\n function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n setFocused(true);\n props.onFocus?.(e);\n\n // Если value из пропов отличается от value, которое получит input после обработки,\n // то imask будет ставить каретку за последним валидным символом.\n props.selectAllOnFocus && inputRef.current?.delaySelectAll();\n }\n\n function handleUnexpectedInput(value: string) {\n const blink = inputRef.current?.blink.bind(inputRef.current) || (() => undefined);\n onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();\n }\n\n function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n setFocused(false);\n props.onBlur?.(e);\n }\n\n function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n const { value, selectionStart, selectionEnd } = e.currentTarget;\n\n if (\n (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0) ||\n (isKeyDelete(e) && prevSelectionStart.current === value.length)\n ) {\n // Случаи, когда нажатие клавиш не тригерит `onInput`\n handleUnexpectedInput(value);\n prevValue.current = e.currentTarget.value;\n }\n prevSelectionStart.current = selectionStart;\n\n props.onKeyDown?.(e);\n }\n },\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { IMaskInputProps } from '@skbkontur/react-imask';
|
|
2
2
|
import type { InputProps, InputType } from '../Input';
|
|
3
3
|
import { Input } from '../Input';
|
|
4
|
+
export type MaskedInputOnBeforePasteValue = (value: string) => string;
|
|
4
5
|
export interface MaskedProps {
|
|
5
6
|
/** Паттерн маски */
|
|
6
7
|
mask: string;
|
|
@@ -21,6 +22,13 @@ export interface MaskedProps {
|
|
|
21
22
|
* @param blink вспыхнуть акцентным цвтетом.
|
|
22
23
|
*/
|
|
23
24
|
onUnexpectedInput?: (value: string, blink: () => void) => void;
|
|
25
|
+
/** Задает обработчик вставки значения в инпут.
|
|
26
|
+
* В value будет передано значение из буфера обмена.
|
|
27
|
+
* Возвращаемое значение будет использовано как значение инпута.
|
|
28
|
+
* Используется для фильтрации значения при вставке из буфера обмена.
|
|
29
|
+
* @param value значение вставки.
|
|
30
|
+
*/
|
|
31
|
+
onBeforePasteValue?: MaskedInputOnBeforePasteValue;
|
|
24
32
|
/** Убирает из value символы, не введённые пользователем
|
|
25
33
|
* @default false */
|
|
26
34
|
unmask?: boolean;
|
|
@@ -17,6 +17,9 @@ import { LoadingIcon } from "../../icons2022/LoadingIcon";
|
|
|
17
17
|
import { Popup } from "../../Popup";
|
|
18
18
|
import { getMenuPositions } from "../../../lib/getMenuPositions";
|
|
19
19
|
import { ZIndex } from "../../ZIndex";
|
|
20
|
+
import { MaskedInput } from "../../../components/MaskedInput";
|
|
21
|
+
import { styles as MaskedInputStyles } from "../../../components/MaskedInput/MaskedInput.styles";
|
|
22
|
+
import { cx } from "../../../lib/theming/Emotion";
|
|
20
23
|
import { ArrowDownIcon } from "../ArrowDownIcon";
|
|
21
24
|
import { ComboBoxMenu } from "../ComboBoxMenu";
|
|
22
25
|
import { ComboBoxRequestStatus } from "../CustomComboBoxTypes";
|
|
@@ -282,18 +285,19 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_ComboBox
|
|
|
282
285
|
size = _this$props5.size,
|
|
283
286
|
ariaDescribedby = _this$props5['aria-describedby'],
|
|
284
287
|
ariaLabel = _this$props5['aria-label'],
|
|
285
|
-
showClearIcon = _this$props5.showClearIcon
|
|
286
|
-
|
|
287
|
-
|
|
288
|
+
showClearIcon = _this$props5.showClearIcon,
|
|
289
|
+
mask = _this$props5.mask,
|
|
290
|
+
maskChar = _this$props5.maskChar,
|
|
291
|
+
formatChars = _this$props5.formatChars,
|
|
292
|
+
onBeforePasteInMask = _this$props5.onBeforePasteInMask;
|
|
288
293
|
var rightIcon = this.getRightIcon();
|
|
289
294
|
if (editing) {
|
|
290
|
-
|
|
295
|
+
var inputProps = {
|
|
291
296
|
id: id,
|
|
292
297
|
align: align,
|
|
293
298
|
borderless: borderless,
|
|
294
299
|
disabled: disabled,
|
|
295
300
|
error: error,
|
|
296
|
-
maxLength: this.props.maxLength,
|
|
297
301
|
onBlur: isMobile ? undefined : onInputBlur,
|
|
298
302
|
onValueChange: onInputValueChange,
|
|
299
303
|
onFocus: onInputFocus,
|
|
@@ -303,18 +307,34 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_ComboBox
|
|
|
303
307
|
value: textValue || '',
|
|
304
308
|
onKeyDown: onInputKeyDown,
|
|
305
309
|
placeholder: placeholder,
|
|
306
|
-
width:
|
|
310
|
+
width: '100%',
|
|
307
311
|
size: size,
|
|
308
|
-
ref: this.refInput,
|
|
309
312
|
warning: warning,
|
|
310
313
|
inputMode: inputMode,
|
|
311
|
-
autoComplete:
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
314
|
+
autoComplete: 'off',
|
|
315
|
+
'aria-describedby': ariaDescribedby,
|
|
316
|
+
'aria-controls': this.menuId,
|
|
317
|
+
'aria-label': ariaLabel,
|
|
315
318
|
showClearIcon: showClearIcon
|
|
316
|
-
}
|
|
319
|
+
};
|
|
320
|
+
if (mask) {
|
|
321
|
+
return /*#__PURE__*/React.createElement(MaskedInput, _extends({
|
|
322
|
+
ref: this.refInput
|
|
323
|
+
}, inputProps, {
|
|
324
|
+
type: "text",
|
|
325
|
+
mask: mask,
|
|
326
|
+
maskChar: maskChar,
|
|
327
|
+
formatChars: formatChars,
|
|
328
|
+
onBeforePasteValue: onBeforePasteInMask
|
|
329
|
+
}));
|
|
330
|
+
}
|
|
331
|
+
return /*#__PURE__*/React.createElement(Input, _extends({
|
|
332
|
+
ref: this.refInput,
|
|
333
|
+
maxLength: this.props.maxLength
|
|
334
|
+
}, inputProps));
|
|
317
335
|
}
|
|
336
|
+
var _this$getProps4 = this.getProps(),
|
|
337
|
+
renderValue = _this$getProps4.renderValue;
|
|
318
338
|
return /*#__PURE__*/React.createElement(InputLikeText, {
|
|
319
339
|
id: id,
|
|
320
340
|
align: align,
|
|
@@ -332,6 +352,7 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_ComboBox
|
|
|
332
352
|
"aria-describedby": ariaDescribedby,
|
|
333
353
|
"aria-controls": this.menuId,
|
|
334
354
|
showClearIcon: showClearIcon,
|
|
355
|
+
className: cx(mask && MaskedInputStyles.root(this.theme)),
|
|
335
356
|
onClearCrossClick: this.props.onClearCrossClick
|
|
336
357
|
}, isNonNullable(value) && renderValue ? renderValue(value) : null);
|
|
337
358
|
};
|