@skbkontur/react-ui 6.1.1 → 6.1.2-bea94.0
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/components/Input/Input.d.ts +1 -1
- package/components/Input/Input.js.map +1 -1
- package/components/TimePicker/TimeClockIcon.d.ts +3 -0
- package/components/TimePicker/TimeClockIcon.js +11 -0
- package/components/TimePicker/TimeClockIcon.js.map +1 -0
- package/components/TimePicker/TimeFragmentsView.d.ts +15 -0
- package/components/TimePicker/TimeFragmentsView.js +72 -0
- package/components/TimePicker/TimeFragmentsView.js.map +1 -0
- package/components/TimePicker/TimeFragmentsView.styles.d.ts +12 -0
- package/components/TimePicker/TimeFragmentsView.styles.js +43 -0
- package/components/TimePicker/TimeFragmentsView.styles.js.map +1 -0
- package/components/TimePicker/TimeInput.d.ts +22 -0
- package/components/TimePicker/TimeInput.js +103 -0
- package/components/TimePicker/TimeInput.js.map +1 -0
- package/components/TimePicker/TimePicker.d.ts +70 -0
- package/components/TimePicker/TimePicker.js +506 -0
- package/components/TimePicker/TimePicker.js.map +1 -0
- package/components/TimePicker/TimePicker.styles.d.ts +14 -0
- package/components/TimePicker/TimePicker.styles.js +45 -0
- package/components/TimePicker/TimePicker.styles.js.map +1 -0
- package/components/TimePicker/TimePickerMobilePopup.d.ts +38 -0
- package/components/TimePicker/TimePickerMobilePopup.js +21 -0
- package/components/TimePicker/TimePickerMobilePopup.js.map +1 -0
- package/components/TimePicker/TimePickerPopup.d.ts +20 -0
- package/components/TimePicker/TimePickerPopup.js +18 -0
- package/components/TimePicker/TimePickerPopup.js.map +1 -0
- package/components/TimePicker/TimePickerSlots.d.ts +17 -0
- package/components/TimePicker/TimePickerSlots.js +80 -0
- package/components/TimePicker/TimePickerSlots.js.map +1 -0
- package/components/TimePicker/helpers/TimePicker.constants.d.ts +22 -0
- package/components/TimePicker/helpers/TimePicker.constants.js +31 -0
- package/components/TimePicker/helpers/TimePicker.constants.js.map +1 -0
- package/components/TimePicker/helpers/TimePicker.editing.d.ts +23 -0
- package/components/TimePicker/helpers/TimePicker.editing.js +101 -0
- package/components/TimePicker/helpers/TimePicker.editing.js.map +1 -0
- package/components/TimePicker/helpers/TimePicker.layout.d.ts +6 -0
- package/components/TimePicker/helpers/TimePicker.layout.js +49 -0
- package/components/TimePicker/helpers/TimePicker.layout.js.map +1 -0
- package/components/TimePicker/helpers/TimePicker.selection.d.ts +5 -0
- package/components/TimePicker/helpers/TimePicker.selection.js +23 -0
- package/components/TimePicker/helpers/TimePicker.selection.js.map +1 -0
- package/components/TimePicker/helpers/TimePicker.shared.d.ts +47 -0
- package/components/TimePicker/helpers/TimePicker.shared.js +70 -0
- package/components/TimePicker/helpers/TimePicker.shared.js.map +1 -0
- package/components/TimePicker/helpers/TimePicker.value.d.ts +23 -0
- package/components/TimePicker/helpers/TimePicker.value.js +71 -0
- package/components/TimePicker/helpers/TimePicker.value.js.map +1 -0
- package/components/TimePicker/helpers/scrollSelectedSlotIntoView.d.ts +4 -0
- package/components/TimePicker/helpers/scrollSelectedSlotIntoView.js +24 -0
- package/components/TimePicker/helpers/scrollSelectedSlotIntoView.js.map +1 -0
- package/components/TimePicker/hooks/useTimePickerDropdown.d.ts +17 -0
- package/components/TimePicker/hooks/useTimePickerDropdown.js +62 -0
- package/components/TimePicker/hooks/useTimePickerDropdown.js.map +1 -0
- package/components/TimePicker/hooks/useTimePickerSelection.d.ts +18 -0
- package/components/TimePicker/hooks/useTimePickerSelection.js +66 -0
- package/components/TimePicker/hooks/useTimePickerSelection.js.map +1 -0
- package/components/TimePicker/hooks/useTimePickerValue.d.ts +18 -0
- package/components/TimePicker/hooks/useTimePickerValue.js +58 -0
- package/components/TimePicker/hooks/useTimePickerValue.js.map +1 -0
- package/components/TimePicker/index.d.ts +2 -0
- package/components/TimePicker/index.js +2 -0
- package/components/TimePicker/index.js.map +1 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/internal/NativeTimeInput/NativeTimeInput.d.ts +16 -0
- package/internal/NativeTimeInput/NativeTimeInput.js +25 -0
- package/internal/NativeTimeInput/NativeTimeInput.js.map +1 -0
- package/internal/NativeTimeInput/NativeTimeInput.styles.d.ts +3 -0
- package/internal/NativeTimeInput/NativeTimeInput.styles.js +15 -0
- package/internal/NativeTimeInput/NativeTimeInput.styles.js.map +1 -0
- package/internal/NativeTimeInput/NativeTimeInput.utils.d.ts +7 -0
- package/internal/NativeTimeInput/NativeTimeInput.utils.js +28 -0
- package/internal/NativeTimeInput/NativeTimeInput.utils.js.map +1 -0
- package/internal/NativeTimeInput/index.d.ts +1 -0
- package/internal/NativeTimeInput/index.js +2 -0
- package/internal/NativeTimeInput/index.js.map +1 -0
- package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.d.ts +2 -0
- package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js +20 -0
- package/internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js.map +1 -0
- package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.d.ts +2 -0
- package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js +20 -0
- package/internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js.map +1 -0
- package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.d.ts +2 -0
- package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js +20 -0
- package/internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js.map +1 -0
- package/internal/themes/BasicTheme.d.ts +34 -0
- package/internal/themes/BasicTheme.js +96 -0
- package/internal/themes/BasicTheme.js.map +1 -1
- package/package.json +5 -1
|
@@ -18,7 +18,7 @@ export declare const calculateClearCrossShowedState: ({ showClearIcon, notEmptyV
|
|
|
18
18
|
focused?: boolean;
|
|
19
19
|
hovered?: boolean;
|
|
20
20
|
}) => boolean;
|
|
21
|
-
export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label'>, Override<React.InputHTMLAttributes<HTMLInputElement>, {
|
|
21
|
+
export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-haspopup' | 'aria-expanded' | 'aria-activedescendant' | 'aria-placeholder'>, Override<React.InputHTMLAttributes<HTMLInputElement>, {
|
|
22
22
|
/** Показывает иконку очистки значения в заполненном поле.
|
|
23
23
|
* @default never */
|
|
24
24
|
showClearIcon?: ShowClearIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport invariant from 'invariant';\nimport type { AriaAttributes, ClassAttributes, HTMLAttributes, JSX, ReactElement, ReactNode } from 'react';\nimport React, { createRef } from 'react';\nimport warning from 'warning';\n\nimport { ClearCrossIcon } from '../../internal/ClearCrossIcon/ClearCrossIcon.js';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { RenderLayer } from '../../internal/RenderLayer/index.js';\nimport { blink } from '../../lib/blink.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isKeyBackspace, isKeyDelete, someKeys } from '../../lib/events/keyboard/identifiers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { catchUnreachableWarning } from '../../lib/typeGuards.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Override } from '../../typings/utility-types.js';\nimport { getStyles } from './Input.styles.js';\nimport type { InputElement, InputElementProps } from './Input.typings.js';\nimport { InputLayout } from './InputLayout/InputLayout.js';\n\nexport const inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'] as const;\n\nexport type InputAlign = 'left' | 'center' | 'right';\nexport type ShowClearIcon = 'auto' | 'always' | 'never';\nexport type InputType = (typeof inputTypes)[number];\nexport type InputIconType = React.ReactNode | (() => React.ReactNode);\n\nexport const selectionAllowedTypes: InputType[] = ['text', 'password', 'tel', 'search', 'url'];\nexport const selectionErrorMessage = (type: InputType, allowedTypes: InputType[] = selectionAllowedTypes): string => {\n return `<Input />. Selection is not supported by the type \"${type}\". Types that support selection: ${allowedTypes\n .map((i) => `\"${i}\"`)\n .join(', ')}. Reason: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange.`;\n};\n\nexport const calculateClearCrossShowedState = ({\n showClearIcon,\n notEmptyValue,\n focused,\n hovered,\n}: {\n showClearIcon: ShowClearIcon;\n notEmptyValue: boolean;\n focused?: boolean;\n hovered?: boolean;\n}): boolean => {\n switch (showClearIcon) {\n case 'always':\n return notEmptyValue;\n case 'auto':\n return Boolean((focused || hovered) && notEmptyValue);\n case 'never':\n return false;\n default:\n return catchUnreachableWarning(showClearIcon, false);\n }\n};\n\nexport interface InputProps\n extends\n CommonProps,\n Pick<HTMLAttributes<unknown>, 'role'>,\n Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label'>,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /** Показывает иконку очистки значения в заполненном поле.\n * @default never */\n showClearIcon?: ShowClearIcon;\n\n /** Добавляет иконку слева.\n * При использовании `ReactNode` применяются дефолтные стили для иконки.\n * При использовании `() => ReactNode` применяются только стили для позиционирования. */\n leftIcon?: InputIconType;\n\n /** Добавляет иконку справа.\n * При использовании `ReactNode` применяются дефолтные стили для иконки.\n * При использовании `() => ReactNode` применяются только стили для позиционирования. */\n rightIcon?: InputIconType;\n\n /** Переводит поле в состояние ошибки. */\n error?: boolean;\n\n /** Переводит поле в состояние предупреждения. */\n warning?: boolean;\n\n /** Убирает обводку поля. */\n borderless?: boolean;\n\n /** Выравнивает контент внутри поля. */\n align?: InputAlign;\n\n /** Размер поля.\n * @default small\n */\n size?: SizeProp;\n\n /** Событие изменения значения `value` в поле. */\n onValueChange?: (value: string) => void;\n\n /** @ignore */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** @ignore */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** @ignore */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** Тип поля ввода. */\n type?: InputType;\n\n /** Значение внутри поля. */\n value?: string;\n\n /** Устанавливает префикс `ReactNode` перед значением, но после иконки. */\n prefix?: React.ReactNode;\n\n /** Устанавливает суффикс `ReactNode` после значения, но перед правой иконкой. */\n suffix?: React.ReactNode;\n\n /** Выделяет введённое значение при фокусе в поле. Работает с типами `text`, `password`, `tel`, `search`, `url`. */\n selectAllOnFocus?: boolean;\n\n /** Отображает счётчик введённых символов. */\n showLengthCounter?: boolean;\n\n /** Допустимое количество символов в поле. Отображается в счётчике символов.\n * @default maxLength */\n lengthCounter?: number;\n\n /** Подсказка для счётчика символов.\n *\n * Если передать `ReactNode`, рисует тултип со встроенной иконкой.\n * Если передать функцию, рисует произвольный элемент.\n * @example\n * ```\n * counterHelp={() => <Hint text=\"...\"><Icon /></Hint>}\n * ``` */\n counterHelp?: ReactNode | (() => ReactNode);\n\n /** Устанавливает обработчик на случай некорректного ввода.\n * Если передан onUnexpectedInput, он будет вызван при ошибке, а эффект мигания можно запустить вручную через публичный метод blink.\n * @param {string} value - значение поля. */\n onUnexpectedInput?: (value: string) => void;\n\n /** Устанавливает радиус скруглений углов.\n * @ignore */\n corners?: Partial<\n Pick<\n React.CSSProperties,\n 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopLeftRadius'\n >\n >;\n\n /** Устанавливает элемент, заменяющий нативный input. Должен иметь пропсы `InputElementProps` и тип `InputElement`. */\n element?: ReactElement<InputElementProps>;\n }\n > {}\n\nexport interface InputState {\n focused: boolean;\n hovered: boolean;\n clearCrossShowed: boolean;\n isCounterVisible: boolean;\n}\n\nexport const InputDataTids = {\n root: 'Input__root',\n clearCross: 'Input__clearCross',\n counter: 'Input__counter',\n counterHelpIcon: 'Input__counterHelpIcon',\n} as const;\n\ntype DefaultProps = Required<Pick<InputProps, 'type' | 'showClearIcon'>>;\n\n/**\n * Поле ввода позволяет ввести или отредактировать значение.\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Input extends React.Component<InputProps, InputState> {\n public static __KONTUR_REACT_UI__ = 'Input';\n public static displayName = 'Input';\n\n public static defaultProps: DefaultProps = {\n type: 'text',\n showClearIcon: 'never',\n };\n private size!: SizeProp;\n\n private getProps = createPropsGetter(Input.defaultProps);\n\n private selectAllId: number | null = null;\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n public input: HTMLInputElement | null = null;\n public labelRef = createRef<HTMLLabelElement>();\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n private getClearCrossShowed = ({\n focused,\n hovered,\n hasInitialValue,\n }: {\n focused?: boolean;\n hovered?: boolean;\n hasInitialValue?: boolean;\n }): boolean => {\n if (this.props.disabled) {\n return false;\n }\n return calculateClearCrossShowedState({\n showClearIcon: this.getProps().showClearIcon,\n notEmptyValue: Boolean(this.input?.value || hasInitialValue),\n focused,\n hovered,\n });\n };\n\n public state: InputState = {\n focused: false,\n hovered: false,\n isCounterVisible: false,\n clearCrossShowed: this.getClearCrossShowed({\n focused: false,\n hasInitialValue: Boolean(this.props.value || this.props.defaultValue),\n }),\n };\n\n public componentWillUnmount() {\n this.cancelDelayedSelectAll();\n }\n\n /** Программно устанавливает фокус на поле.\n * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.\n * @public\n */\n public focus(): void {\n invariant(this.input, 'Cannot call \"focus\" because Input is not mounted');\n this.input.focus();\n }\n\n /** Программно снимает фокус с поля.\n * @public\n */\n public blur(): void {\n invariant(this.input, 'Cannot call \"blur\" because Input is not mounted');\n this.input.blur();\n }\n\n /** Возвращает DOM-узел поля ввода.\n * @public\n */\n public getNode(): HTMLInputElement | null {\n return this.input;\n }\n\n /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.\n * @public\n */\n public blink(): void {\n blink({ el: this.labelRef.current, blinkColor: this.theme.inputBlinkColor });\n }\n\n /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.\n * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)\n * @public\n * @param {number} start\n * @param {number} end\n */\n public setSelectionRange(start: number, end: number): void {\n // https://github.com/facebook/react/issues/7769\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange\n if (!selectionAllowedTypes.includes(this.getProps().type)) {\n warning(false, selectionErrorMessage(this.getProps().type));\n\n return;\n }\n\n if (!this.input) {\n warning(false, 'Cannot call \"setSelectionRange\" on unmounted Input');\n return;\n }\n\n if (this.globalObject.document?.activeElement !== this.input) {\n this.focus();\n }\n\n this.input?.setSelectionRange(start, end);\n }\n\n public render(): JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n {this.renderMain}\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * Переводит фокус в поле (если ещё не в фокусе) и выделяет весь текст в нём.\n * Работает с типами `text`, `password`, `tel`, `search`, `url`.\n * @public\n */\n public selectAll = (): void => this._selectAll();\n\n public delaySelectAll = (): number | null => {\n return (this.selectAllId = this.globalObject.requestAnimationFrame?.(this._selectAll) ?? null);\n };\n\n private _selectAll = (): void => {\n if (this.input) {\n this.setSelectionRange(0, this.input.value.length);\n }\n };\n\n private cancelDelayedSelectAll = (): void => {\n if (this.selectAllId) {\n this.globalObject.cancelAnimationFrame?.(this.selectAllId);\n this.selectAllId = null;\n }\n };\n\n private getInput = (inputProps: InputElementProps & ClassAttributes<HTMLInputElement>) => {\n if (this.props.element) {\n return React.cloneElement(this.props.element, inputProps);\n }\n\n return React.createElement('input', inputProps);\n };\n\n private renderMain = (props: CommonWrapperRestProps<InputProps>) => {\n const {\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onKeyPress,\n onValueChange,\n width,\n error,\n role,\n warning,\n leftIcon,\n rightIcon,\n borderless,\n value,\n align,\n type,\n size,\n placeholder,\n selectAllOnFocus,\n showLengthCounter,\n lengthCounter,\n counterHelp,\n disabled,\n onUnexpectedInput,\n prefix,\n suffix,\n corners,\n 'aria-describedby': ariaDescribedby,\n 'aria-controls': ariaControls,\n 'aria-label': ariaLabel,\n element,\n showClearIcon,\n ...rest\n } = props;\n\n const { focused, isCounterVisible } = this.state;\n\n const labelProps = {\n className: this.cx(this.styles.root(this.theme), this.getSizeClassName(), {\n [this.styles.focus(this.theme)]: focused && !warning && !error,\n [this.styles.hovering(this.theme)]: !focused && !disabled && !warning && !error && !borderless,\n [this.styles.borderless()]: borderless && !focused,\n [this.styles.disabled(this.theme)]: disabled,\n [this.styles.warning(this.theme)]: warning,\n [this.styles.error(this.theme)]: error,\n }),\n 'aria-controls': ariaControls,\n style: { width, ...corners },\n onMouseEnter: this.handleMouseEnter,\n onMouseLeave: this.handleMouseLeave,\n onMouseOver,\n ref: this.labelRef,\n };\n\n const inputProps: InputElementProps & ClassAttributes<HTMLInputElement> = {\n ...rest,\n className: this.cx(this.styles.input(this.theme), {\n [this.styles.inputFocus(this.theme)]: focused,\n [this.styles.inputDisabled(this.theme)]: disabled,\n }),\n value,\n role,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onKeyDown: this.handleKeyDown,\n onKeyPress: this.handleKeyPress,\n onBlur: this.handleBlur,\n style: { textAlign: align },\n ref: this.refInput,\n type,\n placeholder,\n disabled,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n };\n\n const input = (\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>{this.getInput(inputProps)}</FocusControlWrapper>\n );\n\n const getRightIcon = () => {\n return this.state.clearCrossShowed ? (\n <ClearCrossIcon data-tid={InputDataTids.clearCross} size={this.size} onClick={this.handleClearInput} />\n ) : (\n rightIcon\n );\n };\n return (\n <RenderLayer\n onFocusOutside={this.handleCloseCounterHelp}\n onClickOutside={this.handleCloseCounterHelp}\n active={isCounterVisible}\n >\n <InputLayout\n leftIcon={leftIcon}\n rightIcon={getRightIcon()}\n prefix={prefix}\n suffix={suffix}\n value={value}\n showLengthCounter={showLengthCounter}\n isCounterVisible={isCounterVisible}\n lengthCounter={lengthCounter}\n counterHelp={counterHelp}\n onCloseCounterHelp={this.handleCloseCounterHelp}\n maxLength={this.props.maxLength}\n size={this.size}\n labelProps={labelProps}\n context={{ disabled: Boolean(disabled), focused, size: this.size }}\n >\n {input}\n </InputLayout>\n </RenderLayer>\n );\n };\n\n private handleCloseCounterHelp = () => this.setState({ isCounterVisible: false });\n\n private getSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.cx({\n [this.styles.sizeLarge(this.theme)]: true,\n });\n case 'medium':\n return this.cx({\n [this.styles.sizeMedium(this.theme)]: true,\n });\n case 'small':\n default:\n return this.cx({\n [this.styles.sizeSmall(this.theme)]: true,\n });\n }\n }\n\n private refInput = (element: HTMLInputElement | InputElement | null) => {\n if (element && 'input' in element) {\n this.input = element.input;\n } else {\n this.input = element;\n }\n };\n\n private handleClearInput = () => {\n if (this.input) {\n this.input.value = '';\n }\n\n this.setState({ clearCrossShowed: false });\n\n if (this.props.onValueChange) {\n this.props.onValueChange('');\n }\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.value);\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n\n const clearCrossShowed = this.getClearCrossShowed({ focused: this.state.focused, hovered: this.state.hovered });\n\n if (this.state.clearCrossShowed !== clearCrossShowed) {\n this.setState({\n clearCrossShowed,\n });\n }\n };\n\n private handleMouseEnter = (e: React.MouseEvent<HTMLLabelElement, MouseEvent>) => {\n this.setState({\n hovered: true,\n clearCrossShowed: this.getClearCrossShowed({ focused: this.state.focused, hovered: true }),\n });\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(e);\n }\n };\n private handleMouseLeave = (e: React.MouseEvent<HTMLLabelElement, MouseEvent>) => {\n this.setState({\n hovered: false,\n clearCrossShowed: this.getClearCrossShowed({ focused: this.state.focused, hovered: false }),\n });\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({\n focused: true,\n isCounterVisible: true,\n clearCrossShowed: this.getClearCrossShowed({ focused: true, hovered: this.state.hovered }),\n });\n\n if (this.props.selectAllOnFocus) {\n this.input && this.selectAll();\n }\n\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n }\n\n const isDeleteKey = someKeys(isKeyBackspace, isKeyDelete)(e);\n\n if (!e.currentTarget.value && isDeleteKey && !e.repeat) {\n this.handleUnexpectedInput();\n }\n };\n\n private handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyPress) {\n this.props.onKeyPress(event);\n }\n\n if (this.props.maxLength === event.currentTarget.value.length) {\n this.handleUnexpectedInput(event.currentTarget.value);\n }\n };\n\n private handleUnexpectedInput = (value: string = this.props.value || '') => {\n if (this.props.onUnexpectedInput) {\n this.props.onUnexpectedInput(value);\n } else {\n this.blink();\n }\n };\n\n private resetFocus = () => this.setState({ focused: false });\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const showClearIcon = this.props.showClearIcon;\n if (showClearIcon && getRootNode(this)?.contains(event.relatedTarget)) {\n this.setState({ focused: false });\n } else {\n const clearCrossShowed = this.getClearCrossShowed({ focused: false, hovered: this.state.hovered });\n this.setState({\n focused: false,\n clearCrossShowed,\n });\n this.props.onBlur?.(event);\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,SAAS,MAAM,WAAW,CAAC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AAEjF,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAEjG,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,MAAM,CAAC,IAAM,UAAU,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAU,CAAC;AAOnH,MAAM,CAAC,IAAM,qBAAqB,GAAgB,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AAC/F,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,IAAe,EAAE,YAAiD;IAAjD,6BAAA,EAAA,oCAAiD;IACtG,OAAO,8DAAsD,IAAI,+CAAoC,YAAY;SAC9G,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,YAAI,CAAC,OAAG,EAAR,CAAQ,CAAC;SACpB,IAAI,CAAC,IAAI,CAAC,mGAAgG,CAAC;AAChH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,8BAA8B,GAAG,UAAC,EAU9C;QATC,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,OAAO,aAAA;IAOP,QAAQ,aAAa,EAAE,CAAC;QACtB,KAAK,QAAQ;YACX,OAAO,aAAa,CAAC;QACvB,KAAK,MAAM;YACT,OAAO,OAAO,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,aAAa,CAAC,CAAC;QACxD,KAAK,OAAO;YACV,OAAO,KAAK,CAAC;QACf;YACE,OAAO,uBAAuB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC;AACH,CAAC,CAAC;AAwHF,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,aAAa;IACnB,UAAU,EAAE,mBAAmB;IAC/B,OAAO,EAAE,gBAAgB;IACzB,eAAe,EAAE,wBAAwB;CACjC,CAAC;AAIX;;GAEG;AAIH;IAA2B,yBAAuC;IAAlE;;QAUU,cAAQ,GAAG,iBAAiB,CAAC,OAAK,CAAC,YAAY,CAAC,CAAC;QAEjD,iBAAW,GAAkB,IAAI,CAAC;QAMnC,WAAK,GAA4B,IAAI,CAAC;QACtC,cAAQ,GAAG,SAAS,EAAoB,CAAC;QAIxC,yBAAmB,GAAG,UAAC,EAQ9B;;gBAPC,OAAO,aAAA,EACP,OAAO,aAAA,EACP,eAAe,qBAAA;YAMf,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,OAAO,KAAK,CAAC;YACf,CAAC;YACD,OAAO,8BAA8B,CAAC;gBACpC,aAAa,EAAE,KAAI,CAAC,QAAQ,EAAE,CAAC,aAAa;gBAC5C,aAAa,EAAE,OAAO,CAAC,CAAA,MAAA,KAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,eAAe,CAAC;gBAC5D,OAAO,SAAA;gBACP,OAAO,SAAA;aACR,CAAC,CAAC;QACL,CAAC,CAAC;QAEK,WAAK,GAAe;YACzB,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,gBAAgB,EAAE,KAAK;YACvB,gBAAgB,EAAE,KAAI,CAAC,mBAAmB,CAAC;gBACzC,OAAO,EAAE,KAAK;gBACd,eAAe,EAAE,OAAO,CAAC,KAAI,CAAC,KAAK,CAAC,KAAK,IAAI,KAAI,CAAC,KAAK,CAAC,YAAY,CAAC;aACtE,CAAC;SACH,CAAC;QAiFF;;;;WAIG;QACI,eAAS,GAAG,cAAY,OAAA,KAAI,CAAC,UAAU,EAAE,EAAjB,CAAiB,CAAC;QAE1C,oBAAc,GAAG;;YACtB,OAAO,CAAC,KAAI,CAAC,WAAW,GAAG,MAAA,MAAA,MAAA,KAAI,CAAC,YAAY,EAAC,qBAAqB,mDAAG,KAAI,CAAC,UAAU,CAAC,mCAAI,IAAI,CAAC,CAAC;QACjG,CAAC,CAAC;QAEM,gBAAU,GAAG;YACnB,IAAI,KAAI,CAAC,KAAK,EAAE,CAAC;gBACf,KAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACrD,CAAC;QACH,CAAC,CAAC;QAEM,4BAAsB,GAAG;;YAC/B,IAAI,KAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,MAAA,MAAA,KAAI,CAAC,YAAY,EAAC,oBAAoB,mDAAG,KAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,KAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC;QAEM,cAAQ,GAAG,UAAC,UAAiE;YACnF,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACvB,OAAO,KAAK,CAAC,YAAY,CAAC,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;YAC5D,CAAC;YAED,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;QAClD,CAAC,CAAC;QAEM,gBAAU,GAAG,UAAC,KAAyC;;YAE3D,IAAA,YAAY,GAiCV,KAAK,aAjCK,EACZ,YAAY,GAgCV,KAAK,aAhCK,EACZ,WAAW,GA+BT,KAAK,YA/BI,EACX,SAAS,GA8BP,KAAK,UA9BE,EACT,UAAU,GA6BR,KAAK,WA7BG,EACV,aAAa,GA4BX,KAAK,cA5BM,EACb,KAAK,GA2BH,KAAK,MA3BF,EACL,KAAK,GA0BH,KAAK,MA1BF,EACL,IAAI,GAyBF,KAAK,KAzBH,EACJ,OAAO,GAwBL,KAAK,QAxBA,EACP,QAAQ,GAuBN,KAAK,SAvBC,EACR,SAAS,GAsBP,KAAK,UAtBE,EACT,UAAU,GAqBR,KAAK,WArBG,EACV,KAAK,GAoBH,KAAK,MApBF,EACL,KAAK,GAmBH,KAAK,MAnBF,EACL,IAAI,GAkBF,KAAK,KAlBH,EACJ,IAAI,GAiBF,KAAK,KAjBH,EACJ,WAAW,GAgBT,KAAK,YAhBI,EACX,gBAAgB,GAed,KAAK,iBAfS,EAChB,iBAAiB,GAcf,KAAK,kBAdU,EACjB,aAAa,GAaX,KAAK,cAbM,EACb,WAAW,GAYT,KAAK,YAZI,EACX,QAAQ,GAWN,KAAK,SAXC,EACR,iBAAiB,GAUf,KAAK,kBAVU,EACjB,MAAM,GASJ,KAAK,OATD,EACN,MAAM,GAQJ,KAAK,OARD,EACN,OAAO,GAOL,KAAK,QAPA,EACa,eAAe,GAMjC,KAAK,oBAN4B,EAClB,YAAY,GAK3B,KAAK,iBALsB,EACf,SAAS,GAIrB,KAAK,cAJgB,EACvB,OAAO,GAGL,KAAK,QAHA,EACP,aAAa,GAEX,KAAK,cAFM,EACV,IAAI,UACL,KAAK,EAlCH,gbAkCL,CADQ,CACC;YAEJ,IAAA,KAAgC,KAAI,CAAC,KAAK,EAAxC,OAAO,aAAA,EAAE,gBAAgB,sBAAe,CAAC;YAEjD,IAAM,UAAU,GAAG;gBACjB,SAAS,EAAE,KAAI,CAAC,EAAE,CAAC,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,EAAE,KAAI,CAAC,gBAAgB,EAAE;oBACtE,GAAC,KAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;oBAC9D,GAAC,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,CAAC,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU;oBAC9F,GAAC,KAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAG,UAAU,IAAI,CAAC,OAAO;oBAClD,GAAC,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,QAAQ;oBAC5C,GAAC,KAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,OAAO;oBAC1C,GAAC,KAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAK;wBACtC;gBACF,eAAe,EAAE,YAAY;gBAC7B,KAAK,aAAI,KAAK,OAAA,IAAK,OAAO,CAAE;gBAC5B,YAAY,EAAE,KAAI,CAAC,gBAAgB;gBACnC,YAAY,EAAE,KAAI,CAAC,gBAAgB;gBACnC,WAAW,aAAA;gBACX,GAAG,EAAE,KAAI,CAAC,QAAQ;aACnB,CAAC;YAEF,IAAM,UAAU,yBACX,IAAI,KACP,SAAS,EAAE,KAAI,CAAC,EAAE,CAAC,KAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAI,CAAC,KAAK,CAAC;oBAC9C,GAAC,KAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,OAAO;oBAC7C,GAAC,KAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,QAAQ;wBACjD,EACF,KAAK,OAAA,EACL,IAAI,MAAA,EACJ,QAAQ,EAAE,KAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,KAAI,CAAC,WAAW,EACzB,SAAS,EAAE,KAAI,CAAC,aAAa,EAC7B,UAAU,EAAE,KAAI,CAAC,cAAc,EAC/B,MAAM,EAAE,KAAI,CAAC,UAAU,EACvB,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAC3B,GAAG,EAAE,KAAI,CAAC,QAAQ,EAClB,IAAI,MAAA,EACJ,WAAW,aAAA,EACX,QAAQ,UAAA,EACR,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,SAAS,GACxB,CAAC;YAEF,IAAM,KAAK,GAAG,CACZ,oBAAC,mBAAmB,IAAC,kBAAkB,EAAE,KAAI,CAAC,UAAU,IAAG,KAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAuB,CAC5G,CAAC;YAEF,IAAM,YAAY,GAAG;gBACnB,OAAO,KAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CACnC,oBAAC,cAAc,gBAAW,aAAa,CAAC,UAAU,EAAE,IAAI,EAAE,KAAI,CAAC,IAAI,EAAE,OAAO,EAAE,KAAI,CAAC,gBAAgB,GAAI,CACxG,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;YACJ,CAAC,CAAC;YACF,OAAO,CACL,oBAAC,WAAW,IACV,cAAc,EAAE,KAAI,CAAC,sBAAsB,EAC3C,cAAc,EAAE,KAAI,CAAC,sBAAsB,EAC3C,MAAM,EAAE,gBAAgB;gBAExB,oBAAC,WAAW,IACV,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,YAAY,EAAE,EACzB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,KAAI,CAAC,sBAAsB,EAC/C,SAAS,EAAE,KAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,IAAI,EAAE,KAAI,CAAC,IAAI,EACf,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,OAAO,SAAA,EAAE,IAAI,EAAE,KAAI,CAAC,IAAI,EAAE,IAEjE,KAAK,CACM,CACF,CACf,CAAC;QACJ,CAAC,CAAC;QAEM,4BAAsB,GAAG,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,EAA1C,CAA0C,CAAC;QAoB1E,cAAQ,GAAG,UAAC,OAA+C;YACjE,IAAI,OAAO,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;gBAClC,KAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,KAAI,CAAC,KAAK,GAAG,OAAO,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEM,sBAAgB,GAAG;YACzB,IAAI,KAAI,CAAC,KAAK,EAAE,CAAC;gBACf,KAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YACxB,CAAC;YAED,KAAI,CAAC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAAC;YAE3C,IAAI,KAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;gBAC7B,KAAI,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;QAEM,kBAAY,GAAG,UAAC,KAA0C;YAChE,IAAI,KAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;gBAC7B,KAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/C,CAAC;YAED,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;YAED,IAAM,gBAAgB,GAAG,KAAI,CAAC,mBAAmB,CAAC,EAAE,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;YAEhH,IAAI,KAAI,CAAC,KAAK,CAAC,gBAAgB,KAAK,gBAAgB,EAAE,CAAC;gBACrD,KAAI,CAAC,QAAQ,CAAC;oBACZ,gBAAgB,kBAAA;iBACjB,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEM,sBAAgB,GAAG,UAAC,CAAiD;YAC3E,KAAI,CAAC,QAAQ,CAAC;gBACZ,OAAO,EAAE,IAAI;gBACb,gBAAgB,EAAE,KAAI,CAAC,mBAAmB,CAAC,EAAE,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;aAC3F,CAAC,CAAC;YACH,IAAI,KAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC5B,KAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;QACM,sBAAgB,GAAG,UAAC,CAAiD;YAC3E,KAAI,CAAC,QAAQ,CAAC;gBACZ,OAAO,EAAE,KAAK;gBACd,gBAAgB,EAAE,KAAI,CAAC,mBAAmB,CAAC,EAAE,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;aAC5F,CAAC,CAAC;YACH,IAAI,KAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC5B,KAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;QAEM,iBAAW,GAAG,UAAC,KAAyC;YAC9D,KAAI,CAAC,QAAQ,CAAC;gBACZ,OAAO,EAAE,IAAI;gBACb,gBAAgB,EAAE,IAAI;gBACtB,gBAAgB,EAAE,KAAI,CAAC,mBAAmB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;aAC3F,CAAC,CAAC;YAEH,IAAI,KAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAChC,KAAI,CAAC,KAAK,IAAI,KAAI,CAAC,SAAS,EAAE,CAAC;YACjC,CAAC;YAED,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACvB,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC,CAAC;QAEM,mBAAa,GAAG,UAAC,CAAwC;YAC/D,IAAI,KAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;gBACzB,KAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YAC1B,CAAC;YAED,IAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;YAE7D,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,IAAI,WAAW,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;gBACvD,KAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;QAEM,oBAAc,GAAG,UAAC,KAA4C;YACpE,IAAI,KAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;gBAC1B,KAAI,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAC/B,CAAC;YAED,IAAI,KAAI,CAAC,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC9D,KAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxD,CAAC;QACH,CAAC,CAAC;QAEM,2BAAqB,GAAG,UAAC,KAAsC;YAAtC,sBAAA,EAAA,QAAgB,KAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE;YACrE,IAAI,KAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBACjC,KAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC;iBAAM,CAAC;gBACN,KAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC;QAEM,gBAAU,GAAG,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAjC,CAAiC,CAAC;QAErD,gBAAU,GAAG,UAAC,KAAyC;;YAC7D,IAAM,aAAa,GAAG,KAAI,CAAC,KAAK,CAAC,aAAa,CAAC;YAC/C,IAAI,aAAa,KAAI,MAAA,WAAW,CAAC,KAAI,CAAC,0CAAE,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA,EAAE,CAAC;gBACtE,KAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;YACpC,CAAC;iBAAM,CAAC;gBACN,IAAM,gBAAgB,GAAG,KAAI,CAAC,mBAAmB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;gBACnG,KAAI,CAAC,QAAQ,CAAC;oBACZ,OAAO,EAAE,KAAK;oBACd,gBAAgB,kBAAA;iBACjB,CAAC,CAAC;gBACH,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,MAAM,mDAAG,KAAK,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;;IACJ,CAAC;cAnaY,KAAK;IAqDT,oCAAoB,GAA3B;QACE,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED;;;OAGG;IACI,qBAAK,GAAZ;QACE,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,kDAAkD,CAAC,CAAC;QAC1E,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACI,oBAAI,GAAX;QACE,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,iDAAiD,CAAC,CAAC;QACzE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED;;OAEG;IACI,uBAAO,GAAd;QACE,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED;;OAEG;IACI,qBAAK,GAAZ;QACE,KAAK,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC;IAC/E,CAAC;IAED;;;;;OAKG;IACI,iCAAiB,GAAxB,UAAyB,KAAa,EAAE,GAAW;;QACjD,gDAAgD;QAChD,sFAAsF;QACtF,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1D,OAAO,CAAC,KAAK,EAAE,qBAAqB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;YAE5D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,CAAC,KAAK,EAAE,oDAAoD,CAAC,CAAC;YACrE,OAAO;QACT,CAAC;QAED,IAAI,CAAA,MAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,0CAAE,aAAa,MAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YAC7D,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;QAED,MAAA,IAAI,CAAC,KAAK,0CAAE,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC5C,CAAC;IAEM,sBAAM,GAAb;QAAA,iBAeC;QAdC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,QAAQ,EAAE,GAC9D,KAAI,CAAC,UAAU,CACF,CACjB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAyJO,gCAAgB,GAAxB;;QACE,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,EAAE;oBACZ,GAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;wBACzC,CAAC;YACL,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,EAAE;oBACZ,GAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;wBAC1C,CAAC;YACL,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,EAAE;oBACZ,GAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;wBACzC,CAAC;QACP,CAAC;IACH,CAAC;;IA1Sa,yBAAmB,GAAG,OAAO,AAAV,CAAW;IAC9B,iBAAW,GAAG,OAAO,AAAV,CAAW;IAEtB,kBAAY,GAAiB;QACzC,IAAI,EAAE,MAAM;QACZ,aAAa,EAAE,OAAO;KACvB,AAHyB,CAGxB;IAPS,KAAK;QAHjB,qBAAqB;QACrB,QAAQ;QACR,QAAQ;OACI,KAAK,CAmajB;IAAD,YAAC;CAAA,AAnaD,CAA2B,KAAK,CAAC,SAAS,GAmazC;SAnaY,KAAK","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport invariant from 'invariant';\nimport type { AriaAttributes, ClassAttributes, HTMLAttributes, JSX, ReactElement, ReactNode } from 'react';\nimport React, { createRef } from 'react';\nimport warning from 'warning';\n\nimport { ClearCrossIcon } from '../../internal/ClearCrossIcon/ClearCrossIcon.js';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { RenderLayer } from '../../internal/RenderLayer/index.js';\nimport { blink } from '../../lib/blink.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isKeyBackspace, isKeyDelete, someKeys } from '../../lib/events/keyboard/identifiers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { catchUnreachableWarning } from '../../lib/typeGuards.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Override } from '../../typings/utility-types.js';\nimport { getStyles } from './Input.styles.js';\nimport type { InputElement, InputElementProps } from './Input.typings.js';\nimport { InputLayout } from './InputLayout/InputLayout.js';\n\nexport const inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'] as const;\n\nexport type InputAlign = 'left' | 'center' | 'right';\nexport type ShowClearIcon = 'auto' | 'always' | 'never';\nexport type InputType = (typeof inputTypes)[number];\nexport type InputIconType = React.ReactNode | (() => React.ReactNode);\n\nexport const selectionAllowedTypes: InputType[] = ['text', 'password', 'tel', 'search', 'url'];\nexport const selectionErrorMessage = (type: InputType, allowedTypes: InputType[] = selectionAllowedTypes): string => {\n return `<Input />. Selection is not supported by the type \"${type}\". Types that support selection: ${allowedTypes\n .map((i) => `\"${i}\"`)\n .join(', ')}. Reason: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange.`;\n};\n\nexport const calculateClearCrossShowedState = ({\n showClearIcon,\n notEmptyValue,\n focused,\n hovered,\n}: {\n showClearIcon: ShowClearIcon;\n notEmptyValue: boolean;\n focused?: boolean;\n hovered?: boolean;\n}): boolean => {\n switch (showClearIcon) {\n case 'always':\n return notEmptyValue;\n case 'auto':\n return Boolean((focused || hovered) && notEmptyValue);\n case 'never':\n return false;\n default:\n return catchUnreachableWarning(showClearIcon, false);\n }\n};\n\nexport interface InputProps\n extends\n CommonProps,\n Pick<HTMLAttributes<unknown>, 'role'>,\n Pick<\n AriaAttributes,\n | 'aria-describedby'\n | 'aria-controls'\n | 'aria-label'\n | 'aria-haspopup'\n | 'aria-expanded'\n | 'aria-activedescendant'\n | 'aria-placeholder'\n >,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /** Показывает иконку очистки значения в заполненном поле.\n * @default never */\n showClearIcon?: ShowClearIcon;\n\n /** Добавляет иконку слева.\n * При использовании `ReactNode` применяются дефолтные стили для иконки.\n * При использовании `() => ReactNode` применяются только стили для позиционирования. */\n leftIcon?: InputIconType;\n\n /** Добавляет иконку справа.\n * При использовании `ReactNode` применяются дефолтные стили для иконки.\n * При использовании `() => ReactNode` применяются только стили для позиционирования. */\n rightIcon?: InputIconType;\n\n /** Переводит поле в состояние ошибки. */\n error?: boolean;\n\n /** Переводит поле в состояние предупреждения. */\n warning?: boolean;\n\n /** Убирает обводку поля. */\n borderless?: boolean;\n\n /** Выравнивает контент внутри поля. */\n align?: InputAlign;\n\n /** Размер поля.\n * @default small\n */\n size?: SizeProp;\n\n /** Событие изменения значения `value` в поле. */\n onValueChange?: (value: string) => void;\n\n /** @ignore */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** @ignore */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** @ignore */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** Тип поля ввода. */\n type?: InputType;\n\n /** Значение внутри поля. */\n value?: string;\n\n /** Устанавливает префикс `ReactNode` перед значением, но после иконки. */\n prefix?: React.ReactNode;\n\n /** Устанавливает суффикс `ReactNode` после значения, но перед правой иконкой. */\n suffix?: React.ReactNode;\n\n /** Выделяет введённое значение при фокусе в поле. Работает с типами `text`, `password`, `tel`, `search`, `url`. */\n selectAllOnFocus?: boolean;\n\n /** Отображает счётчик введённых символов. */\n showLengthCounter?: boolean;\n\n /** Допустимое количество символов в поле. Отображается в счётчике символов.\n * @default maxLength */\n lengthCounter?: number;\n\n /** Подсказка для счётчика символов.\n *\n * Если передать `ReactNode`, рисует тултип со встроенной иконкой.\n * Если передать функцию, рисует произвольный элемент.\n * @example\n * ```\n * counterHelp={() => <Hint text=\"...\"><Icon /></Hint>}\n * ``` */\n counterHelp?: ReactNode | (() => ReactNode);\n\n /** Устанавливает обработчик на случай некорректного ввода.\n * Если передан onUnexpectedInput, он будет вызван при ошибке, а эффект мигания можно запустить вручную через публичный метод blink.\n * @param {string} value - значение поля. */\n onUnexpectedInput?: (value: string) => void;\n\n /** Устанавливает радиус скруглений углов.\n * @ignore */\n corners?: Partial<\n Pick<\n React.CSSProperties,\n 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopLeftRadius'\n >\n >;\n\n /** Устанавливает элемент, заменяющий нативный input. Должен иметь пропсы `InputElementProps` и тип `InputElement`. */\n element?: ReactElement<InputElementProps>;\n }\n > {}\n\nexport interface InputState {\n focused: boolean;\n hovered: boolean;\n clearCrossShowed: boolean;\n isCounterVisible: boolean;\n}\n\nexport const InputDataTids = {\n root: 'Input__root',\n clearCross: 'Input__clearCross',\n counter: 'Input__counter',\n counterHelpIcon: 'Input__counterHelpIcon',\n} as const;\n\ntype DefaultProps = Required<Pick<InputProps, 'type' | 'showClearIcon'>>;\n\n/**\n * Поле ввода позволяет ввести или отредактировать значение.\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Input extends React.Component<InputProps, InputState> {\n public static __KONTUR_REACT_UI__ = 'Input';\n public static displayName = 'Input';\n\n public static defaultProps: DefaultProps = {\n type: 'text',\n showClearIcon: 'never',\n };\n private size!: SizeProp;\n\n private getProps = createPropsGetter(Input.defaultProps);\n\n private selectAllId: number | null = null;\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n public input: HTMLInputElement | null = null;\n public labelRef = createRef<HTMLLabelElement>();\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n private getClearCrossShowed = ({\n focused,\n hovered,\n hasInitialValue,\n }: {\n focused?: boolean;\n hovered?: boolean;\n hasInitialValue?: boolean;\n }): boolean => {\n if (this.props.disabled) {\n return false;\n }\n return calculateClearCrossShowedState({\n showClearIcon: this.getProps().showClearIcon,\n notEmptyValue: Boolean(this.input?.value || hasInitialValue),\n focused,\n hovered,\n });\n };\n\n public state: InputState = {\n focused: false,\n hovered: false,\n isCounterVisible: false,\n clearCrossShowed: this.getClearCrossShowed({\n focused: false,\n hasInitialValue: Boolean(this.props.value || this.props.defaultValue),\n }),\n };\n\n public componentWillUnmount() {\n this.cancelDelayedSelectAll();\n }\n\n /** Программно устанавливает фокус на поле.\n * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.\n * @public\n */\n public focus(): void {\n invariant(this.input, 'Cannot call \"focus\" because Input is not mounted');\n this.input.focus();\n }\n\n /** Программно снимает фокус с поля.\n * @public\n */\n public blur(): void {\n invariant(this.input, 'Cannot call \"blur\" because Input is not mounted');\n this.input.blur();\n }\n\n /** Возвращает DOM-узел поля ввода.\n * @public\n */\n public getNode(): HTMLInputElement | null {\n return this.input;\n }\n\n /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.\n * @public\n */\n public blink(): void {\n blink({ el: this.labelRef.current, blinkColor: this.theme.inputBlinkColor });\n }\n\n /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.\n * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)\n * @public\n * @param {number} start\n * @param {number} end\n */\n public setSelectionRange(start: number, end: number): void {\n // https://github.com/facebook/react/issues/7769\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange\n if (!selectionAllowedTypes.includes(this.getProps().type)) {\n warning(false, selectionErrorMessage(this.getProps().type));\n\n return;\n }\n\n if (!this.input) {\n warning(false, 'Cannot call \"setSelectionRange\" on unmounted Input');\n return;\n }\n\n if (this.globalObject.document?.activeElement !== this.input) {\n this.focus();\n }\n\n this.input?.setSelectionRange(start, end);\n }\n\n public render(): JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n {this.renderMain}\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * Переводит фокус в поле (если ещё не в фокусе) и выделяет весь текст в нём.\n * Работает с типами `text`, `password`, `tel`, `search`, `url`.\n * @public\n */\n public selectAll = (): void => this._selectAll();\n\n public delaySelectAll = (): number | null => {\n return (this.selectAllId = this.globalObject.requestAnimationFrame?.(this._selectAll) ?? null);\n };\n\n private _selectAll = (): void => {\n if (this.input) {\n this.setSelectionRange(0, this.input.value.length);\n }\n };\n\n private cancelDelayedSelectAll = (): void => {\n if (this.selectAllId) {\n this.globalObject.cancelAnimationFrame?.(this.selectAllId);\n this.selectAllId = null;\n }\n };\n\n private getInput = (inputProps: InputElementProps & ClassAttributes<HTMLInputElement>) => {\n if (this.props.element) {\n return React.cloneElement(this.props.element, inputProps);\n }\n\n return React.createElement('input', inputProps);\n };\n\n private renderMain = (props: CommonWrapperRestProps<InputProps>) => {\n const {\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onKeyPress,\n onValueChange,\n width,\n error,\n role,\n warning,\n leftIcon,\n rightIcon,\n borderless,\n value,\n align,\n type,\n size,\n placeholder,\n selectAllOnFocus,\n showLengthCounter,\n lengthCounter,\n counterHelp,\n disabled,\n onUnexpectedInput,\n prefix,\n suffix,\n corners,\n 'aria-describedby': ariaDescribedby,\n 'aria-controls': ariaControls,\n 'aria-label': ariaLabel,\n element,\n showClearIcon,\n ...rest\n } = props;\n\n const { focused, isCounterVisible } = this.state;\n\n const labelProps = {\n className: this.cx(this.styles.root(this.theme), this.getSizeClassName(), {\n [this.styles.focus(this.theme)]: focused && !warning && !error,\n [this.styles.hovering(this.theme)]: !focused && !disabled && !warning && !error && !borderless,\n [this.styles.borderless()]: borderless && !focused,\n [this.styles.disabled(this.theme)]: disabled,\n [this.styles.warning(this.theme)]: warning,\n [this.styles.error(this.theme)]: error,\n }),\n 'aria-controls': ariaControls,\n style: { width, ...corners },\n onMouseEnter: this.handleMouseEnter,\n onMouseLeave: this.handleMouseLeave,\n onMouseOver,\n ref: this.labelRef,\n };\n\n const inputProps: InputElementProps & ClassAttributes<HTMLInputElement> = {\n ...rest,\n className: this.cx(this.styles.input(this.theme), {\n [this.styles.inputFocus(this.theme)]: focused,\n [this.styles.inputDisabled(this.theme)]: disabled,\n }),\n value,\n role,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onKeyDown: this.handleKeyDown,\n onKeyPress: this.handleKeyPress,\n onBlur: this.handleBlur,\n style: { textAlign: align },\n ref: this.refInput,\n type,\n placeholder,\n disabled,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n };\n\n const input = (\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>{this.getInput(inputProps)}</FocusControlWrapper>\n );\n\n const getRightIcon = () => {\n return this.state.clearCrossShowed ? (\n <ClearCrossIcon data-tid={InputDataTids.clearCross} size={this.size} onClick={this.handleClearInput} />\n ) : (\n rightIcon\n );\n };\n return (\n <RenderLayer\n onFocusOutside={this.handleCloseCounterHelp}\n onClickOutside={this.handleCloseCounterHelp}\n active={isCounterVisible}\n >\n <InputLayout\n leftIcon={leftIcon}\n rightIcon={getRightIcon()}\n prefix={prefix}\n suffix={suffix}\n value={value}\n showLengthCounter={showLengthCounter}\n isCounterVisible={isCounterVisible}\n lengthCounter={lengthCounter}\n counterHelp={counterHelp}\n onCloseCounterHelp={this.handleCloseCounterHelp}\n maxLength={this.props.maxLength}\n size={this.size}\n labelProps={labelProps}\n context={{ disabled: Boolean(disabled), focused, size: this.size }}\n >\n {input}\n </InputLayout>\n </RenderLayer>\n );\n };\n\n private handleCloseCounterHelp = () => this.setState({ isCounterVisible: false });\n\n private getSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.cx({\n [this.styles.sizeLarge(this.theme)]: true,\n });\n case 'medium':\n return this.cx({\n [this.styles.sizeMedium(this.theme)]: true,\n });\n case 'small':\n default:\n return this.cx({\n [this.styles.sizeSmall(this.theme)]: true,\n });\n }\n }\n\n private refInput = (element: HTMLInputElement | InputElement | null) => {\n if (element && 'input' in element) {\n this.input = element.input;\n } else {\n this.input = element;\n }\n };\n\n private handleClearInput = () => {\n if (this.input) {\n this.input.value = '';\n }\n\n this.setState({ clearCrossShowed: false });\n\n if (this.props.onValueChange) {\n this.props.onValueChange('');\n }\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.value);\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n\n const clearCrossShowed = this.getClearCrossShowed({ focused: this.state.focused, hovered: this.state.hovered });\n\n if (this.state.clearCrossShowed !== clearCrossShowed) {\n this.setState({\n clearCrossShowed,\n });\n }\n };\n\n private handleMouseEnter = (e: React.MouseEvent<HTMLLabelElement, MouseEvent>) => {\n this.setState({\n hovered: true,\n clearCrossShowed: this.getClearCrossShowed({ focused: this.state.focused, hovered: true }),\n });\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(e);\n }\n };\n private handleMouseLeave = (e: React.MouseEvent<HTMLLabelElement, MouseEvent>) => {\n this.setState({\n hovered: false,\n clearCrossShowed: this.getClearCrossShowed({ focused: this.state.focused, hovered: false }),\n });\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({\n focused: true,\n isCounterVisible: true,\n clearCrossShowed: this.getClearCrossShowed({ focused: true, hovered: this.state.hovered }),\n });\n\n if (this.props.selectAllOnFocus) {\n this.input && this.selectAll();\n }\n\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n }\n\n const isDeleteKey = someKeys(isKeyBackspace, isKeyDelete)(e);\n\n if (!e.currentTarget.value && isDeleteKey && !e.repeat) {\n this.handleUnexpectedInput();\n }\n };\n\n private handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyPress) {\n this.props.onKeyPress(event);\n }\n\n if (this.props.maxLength === event.currentTarget.value.length) {\n this.handleUnexpectedInput(event.currentTarget.value);\n }\n };\n\n private handleUnexpectedInput = (value: string = this.props.value || '') => {\n if (this.props.onUnexpectedInput) {\n this.props.onUnexpectedInput(value);\n } else {\n this.blink();\n }\n };\n\n private resetFocus = () => this.setState({ focused: false });\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const showClearIcon = this.props.showClearIcon;\n if (showClearIcon && getRootNode(this)?.contains(event.relatedTarget)) {\n this.setState({ focused: false });\n } else {\n const clearCrossShowed = this.getClearCrossShowed({ focused: false, hovered: this.state.hovered });\n this.setState({\n focused: false,\n clearCrossShowed,\n });\n this.props.onBlur?.(event);\n }\n };\n}\n"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const TimeClockIcon: import("../../lib/forwardRefAndName.js").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon.js").IconProps, "size"> & {
|
|
2
|
+
size?: import("../../internal/icons2022/BaseIcon.js").IconProps["size"] | import("../../internal/icons2022/iconConstants.js").IconSizeAliases;
|
|
3
|
+
}>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { iconSizer } from '../../internal/icons2022/iconSizer.js';
|
|
3
|
+
import { TimeClockIcon16Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js';
|
|
4
|
+
import { TimeClockIcon20Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js';
|
|
5
|
+
import { TimeClockIcon24Regular } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js';
|
|
6
|
+
export var TimeClockIcon = iconSizer({
|
|
7
|
+
small: function () { return React.createElement(TimeClockIcon16Light, null); },
|
|
8
|
+
medium: function () { return React.createElement(TimeClockIcon20Light, null); },
|
|
9
|
+
large: function () { return React.createElement(TimeClockIcon24Regular, null); },
|
|
10
|
+
}, 'TimeClockIcon');
|
|
11
|
+
//# sourceMappingURL=TimeClockIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeClockIcon.js","sourceRoot":"","sources":["TimeClockIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,kEAAkE,CAAC;AAE1G,MAAM,CAAC,IAAM,aAAa,GAAG,SAAS,CACpC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB;IACrC,MAAM,EAAE,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB;IACtC,KAAK,EAAE,cAAM,OAAA,oBAAC,sBAAsB,OAAG,EAA1B,CAA0B;CACxC,EACD,eAAe,CAChB,CAAC","sourcesContent":["import React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer.js';\nimport { TimeClockIcon16Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js';\nimport { TimeClockIcon20Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js';\nimport { TimeClockIcon24Regular } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js';\n\nexport const TimeClockIcon = iconSizer(\n {\n small: () => <TimeClockIcon16Light />,\n medium: () => <TimeClockIcon20Light />,\n large: () => <TimeClockIcon24Regular />,\n },\n 'TimeClockIcon',\n);\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SizeProp } from '../../lib/types/props.js';
|
|
3
|
+
import type { TimeFormat, TimeSegment } from './helpers/TimePicker.shared.js';
|
|
4
|
+
export interface TimeFragmentsViewRef {
|
|
5
|
+
isFragment(el: HTMLElement | EventTarget | null): boolean;
|
|
6
|
+
getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
|
|
7
|
+
getRootNode(): HTMLSpanElement | null;
|
|
8
|
+
}
|
|
9
|
+
export interface TimeFragmentsViewProps {
|
|
10
|
+
value: string;
|
|
11
|
+
format: TimeFormat;
|
|
12
|
+
size: SizeProp;
|
|
13
|
+
onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;
|
|
14
|
+
}
|
|
15
|
+
export declare const TimeFragmentsView: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimeFragmentsViewRef, TimeFragmentsViewProps> & Record<never, never>;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';
|
|
2
|
+
import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
|
|
3
|
+
import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
|
|
4
|
+
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
|
|
5
|
+
import { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from './helpers/TimePicker.constants.js';
|
|
6
|
+
import { getDisplaySegments, getTimeSegments } from './helpers/TimePicker.shared.js';
|
|
7
|
+
import { getStyles } from './TimeFragmentsView.styles.js';
|
|
8
|
+
var getSeparatorSizeClassName = function (styles, theme, size) {
|
|
9
|
+
switch (size) {
|
|
10
|
+
case 'large':
|
|
11
|
+
return styles.separatorLarge(theme);
|
|
12
|
+
case 'medium':
|
|
13
|
+
return styles.separatorMedium(theme);
|
|
14
|
+
case 'small':
|
|
15
|
+
default:
|
|
16
|
+
return styles.separatorSmall(theme);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
export var TimeFragmentsView = forwardRefAndName('TimeFragmentsView', function (props, ref) {
|
|
20
|
+
var value = props.value, format = props.format, size = props.size, onSelectSegment = props.onSelectSegment;
|
|
21
|
+
var theme = useContext(ThemeContext);
|
|
22
|
+
var cx = useEmotion().cx;
|
|
23
|
+
var styles = useStyles(getStyles);
|
|
24
|
+
var rootRef = useRef(null);
|
|
25
|
+
var rootClassName = cx(styles.root(), styles.selected(theme));
|
|
26
|
+
var maskClassName = styles.mask(theme);
|
|
27
|
+
var separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);
|
|
28
|
+
var getSegment = useCallback(function (el) {
|
|
29
|
+
var _a;
|
|
30
|
+
var rootNode = rootRef.current;
|
|
31
|
+
if (!rootNode || !el) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
var fragments = Array.from(rootNode.querySelectorAll('[data-fragment]'));
|
|
35
|
+
var segments = getTimeSegments(format);
|
|
36
|
+
var index = fragments.findIndex(function (fragment) { return fragment === el || fragment.contains(el); });
|
|
37
|
+
return index >= 0 ? ((_a = segments[index]) !== null && _a !== void 0 ? _a : null) : null;
|
|
38
|
+
}, [format]);
|
|
39
|
+
var isFragment = useCallback(function (el) {
|
|
40
|
+
return getSegment(el) !== null;
|
|
41
|
+
}, [getSegment]);
|
|
42
|
+
useImperativeHandle(ref, function () { return ({
|
|
43
|
+
isFragment: isFragment,
|
|
44
|
+
getSegment: getSegment,
|
|
45
|
+
getRootNode: function () { return rootRef.current; },
|
|
46
|
+
}); }, [getSegment, isFragment]);
|
|
47
|
+
var segments = getTimeSegments(format);
|
|
48
|
+
var displaySegments = getDisplaySegments(value, format);
|
|
49
|
+
return (React.createElement("span", { ref: rootRef, className: rootClassName }, value
|
|
50
|
+
? segments.flatMap(function (segment, index) {
|
|
51
|
+
var _a;
|
|
52
|
+
var _b;
|
|
53
|
+
var segmentValue = (_b = displaySegments[index]) !== null && _b !== void 0 ? _b : '';
|
|
54
|
+
var valueMask = Array.from(segmentValue)
|
|
55
|
+
.filter(function (char) { return char !== TIME_PLACEHOLDER_CHAR; })
|
|
56
|
+
.join('');
|
|
57
|
+
var placeholderLength = segmentValue.length - valueMask.length;
|
|
58
|
+
var nodes = [
|
|
59
|
+
React.createElement("span", { key: segment, "data-fragment": '', className: styles.segment(), onMouseUp: function (event) { return onSelectSegment === null || onSelectSegment === void 0 ? void 0 : onSelectSegment(segment, event); } },
|
|
60
|
+
valueMask,
|
|
61
|
+
React.createElement("span", { className: maskClassName }, Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join(''))),
|
|
62
|
+
];
|
|
63
|
+
if (index < segments.length - 1) {
|
|
64
|
+
nodes.push(React.createElement("span", { key: "separator-".concat(index), className: cx(maskClassName, styles.separator(), separatorSizeClassName, (_a = {},
|
|
65
|
+
_a[styles.separatorFilled()] = !segmentValue.includes(TIME_PLACEHOLDER_CHAR),
|
|
66
|
+
_a)) }, TIME_SEPARATOR));
|
|
67
|
+
}
|
|
68
|
+
return nodes;
|
|
69
|
+
})
|
|
70
|
+
: null));
|
|
71
|
+
});
|
|
72
|
+
//# sourceMappingURL=TimeFragmentsView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeFragmentsView.js","sourceRoot":"","sources":["TimeFragmentsView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from './helpers/TimePicker.constants.js';\nimport type { TimeFormat, TimeSegment } from './helpers/TimePicker.shared.js';\nimport { getDisplaySegments, getTimeSegments } from './helpers/TimePicker.shared.js';\nimport { getStyles } from './TimeFragmentsView.styles.js';\n\nexport interface TimeFragmentsViewRef {\n isFragment(el: HTMLElement | EventTarget | null): boolean;\n\n getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n\n getRootNode(): HTMLSpanElement | null;\n}\n\nexport interface TimeFragmentsViewProps {\n value: string;\n format: TimeFormat;\n size: SizeProp;\n\n onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nconst getSeparatorSizeClassName = (styles: ReturnType<typeof getStyles>, theme: Theme, size: SizeProp): string => {\n switch (size) {\n case 'large':\n return styles.separatorLarge(theme);\n case 'medium':\n return styles.separatorMedium(theme);\n case 'small':\n default:\n return styles.separatorSmall(theme);\n }\n};\n\nexport const TimeFragmentsView = forwardRefAndName<TimeFragmentsViewRef, TimeFragmentsViewProps>(\n 'TimeFragmentsView',\n (props, ref) => {\n const { value, format, size, onSelectSegment } = props;\n\n const theme = useContext(ThemeContext);\n\n const { cx } = useEmotion();\n\n const styles = useStyles(getStyles);\n\n const rootRef = useRef<HTMLSpanElement>(null);\n\n const rootClassName = cx(styles.root(), styles.selected(theme));\n const maskClassName = styles.mask(theme);\n const separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);\n\n const getSegment = useCallback(\n (el: HTMLElement | EventTarget | null): TimeSegment | null => {\n const rootNode = rootRef.current;\n\n if (!rootNode || !el) {\n return null;\n }\n\n const fragments: HTMLSpanElement[] = Array.from(rootNode.querySelectorAll('[data-fragment]'));\n const segments = getTimeSegments(format);\n\n const index = fragments.findIndex((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n\n return index >= 0 ? (segments[index] ?? null) : null;\n },\n [format],\n );\n\n const isFragment = useCallback(\n (el: HTMLElement | EventTarget | null): boolean => {\n return getSegment(el) !== null;\n },\n [getSegment],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n isFragment,\n getSegment,\n getRootNode: () => rootRef.current,\n }),\n [getSegment, isFragment],\n );\n\n const segments = getTimeSegments(format);\n const displaySegments = getDisplaySegments(value, format);\n\n return (\n <span ref={rootRef} className={rootClassName}>\n {value\n ? segments.flatMap((segment, index) => {\n const segmentValue = displaySegments[index] ?? '';\n\n const valueMask = Array.from(segmentValue)\n .filter((char) => char !== TIME_PLACEHOLDER_CHAR)\n .join('');\n\n const placeholderLength = segmentValue.length - valueMask.length;\n\n const nodes = [\n <span\n key={segment}\n data-fragment={''}\n className={styles.segment()}\n onMouseUp={(event) => onSelectSegment?.(segment, event)}\n >\n {valueMask}\n <span className={maskClassName}>{Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join('')}</span>\n </span>,\n ];\n\n if (index < segments.length - 1) {\n nodes.push(\n <span\n key={`separator-${index}`}\n className={cx(maskClassName, styles.separator(), separatorSizeClassName, {\n [styles.separatorFilled()]: !segmentValue.includes(TIME_PLACEHOLDER_CHAR),\n })}\n >\n {TIME_SEPARATOR}\n </span>,\n );\n }\n\n return nodes;\n })\n : null}\n </span>\n );\n },\n);\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Theme } from '../../lib/theming/Theme.js';
|
|
2
|
+
export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
|
|
3
|
+
root(): string;
|
|
4
|
+
selected(t: Theme): string;
|
|
5
|
+
segment(): string;
|
|
6
|
+
separator(): string;
|
|
7
|
+
separatorSmall(t: Theme): string;
|
|
8
|
+
separatorMedium(t: Theme): string;
|
|
9
|
+
separatorLarge(t: Theme): string;
|
|
10
|
+
mask(t: Theme): string;
|
|
11
|
+
separatorFilled(): string;
|
|
12
|
+
}>;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
|
|
6
|
+
export var getStyles = memoizeGetStyles(function (_a) {
|
|
7
|
+
var css = _a.css;
|
|
8
|
+
return ({
|
|
9
|
+
root: function () {
|
|
10
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: text;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n "], ["\n cursor: text;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n "])));
|
|
11
|
+
},
|
|
12
|
+
selected: function (t) {
|
|
13
|
+
var getSelection = function (background, color) {
|
|
14
|
+
return (background || color) &&
|
|
15
|
+
"& ::selection {\n background: ".concat(background, ";\n color: ").concat(color, ";\n }");
|
|
16
|
+
};
|
|
17
|
+
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: text;\n ", "\n "], ["\n cursor: text;\n ", "\n "])), getSelection(t.timePickerSelectedBgColor, t.timePickerSelectedTextColor));
|
|
18
|
+
},
|
|
19
|
+
segment: function () {
|
|
20
|
+
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: inline;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n "], ["\n display: inline;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n "])));
|
|
21
|
+
},
|
|
22
|
+
separator: function () {
|
|
23
|
+
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline;\n position: relative;\n "], ["\n display: inline;\n position: relative;\n "])));
|
|
24
|
+
},
|
|
25
|
+
separatorSmall: function (t) {
|
|
26
|
+
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n top: ", ";\n padding-left: ", ";\n padding-right: ", ";\n "], ["\n top: ", ";\n padding-left: ", ";\n padding-right: ", ";\n "])), t.timePickerSeparatorOffsetTopSmall, t.timePickerSeparatorPaddingXSmall, t.timePickerSeparatorPaddingXSmall);
|
|
27
|
+
},
|
|
28
|
+
separatorMedium: function (t) {
|
|
29
|
+
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n top: ", ";\n padding-left: ", ";\n padding-right: ", ";\n "], ["\n top: ", ";\n padding-left: ", ";\n padding-right: ", ";\n "])), t.timePickerSeparatorOffsetTopMedium, t.timePickerSeparatorPaddingXMedium, t.timePickerSeparatorPaddingXMedium);
|
|
30
|
+
},
|
|
31
|
+
separatorLarge: function (t) {
|
|
32
|
+
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n top: ", ";\n padding-left: ", ";\n padding-right: ", ";\n "], ["\n top: ", ";\n padding-left: ", ";\n padding-right: ", ";\n "])), t.timePickerSeparatorOffsetTopLarge, t.timePickerSeparatorPaddingXLarge, t.timePickerSeparatorPaddingXLarge);
|
|
33
|
+
},
|
|
34
|
+
mask: function (t) {
|
|
35
|
+
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), t.timePickerMaskColor);
|
|
36
|
+
},
|
|
37
|
+
separatorFilled: function () {
|
|
38
|
+
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: inherit;\n "], ["\n color: inherit;\n "])));
|
|
39
|
+
},
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
43
|
+
//# sourceMappingURL=TimeFragmentsView.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeFragmentsView.styles.js","sourceRoot":"","sources":["TimeFragmentsView.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,uKAAA,oGAIT,KAAC;QACJ,CAAC;QAED,QAAQ,YAAC,CAAQ;YACf,IAAM,YAAY,GAAG,UAAC,UAAkB,EAAE,KAAa;gBACrD,OAAA,CAAC,UAAU,IAAI,KAAK,CAAC;oBACrB,+CACgB,UAAU,+BACf,KAAK,eACd;YAJF,CAIE,CAAC;YAEL,OAAO,GAAG,4GAAA,+BAEN,EAAwE,QAC3E,KADG,YAAY,CAAC,CAAC,CAAC,yBAAyB,EAAE,CAAC,CAAC,2BAA2B,CAAC,EAC1E;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,uKAAA,oGAIT,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,8HAAA,2DAGT,KAAC;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,oJAAA,eACD,EAAmC,yBAC1B,EAAkC,0BACjC,EAAkC,SACpD,KAHQ,CAAC,CAAC,iCAAiC,EAC1B,CAAC,CAAC,gCAAgC,EACjC,CAAC,CAAC,gCAAgC,EACnD;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,oJAAA,eACD,EAAoC,yBAC3B,EAAmC,0BAClC,EAAmC,SACrD,KAHQ,CAAC,CAAC,kCAAkC,EAC3B,CAAC,CAAC,iCAAiC,EAClC,CAAC,CAAC,iCAAiC,EACpD;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,oJAAA,eACD,EAAmC,yBAC1B,EAAkC,0BACjC,EAAkC,SACpD,KAHQ,CAAC,CAAC,iCAAiC,EAC1B,CAAC,CAAC,gCAAgC,EACjC,CAAC,CAAC,gCAAgC,EACnD;QACJ,CAAC;QAED,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,+FAAA,iBACC,EAAqB,SAC/B,KADU,CAAC,CAAC,mBAAmB,EAC9B;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,kGAAA,+BAET,KAAC;QACJ,CAAC;KACF,CAAC;AAzE8D,CAyE9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n cursor: text;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n `;\n },\n\n selected(t: Theme) {\n const getSelection = (background: string, color: string) =>\n (background || color) &&\n `& ::selection {\n background: ${background};\n color: ${color};\n }`;\n\n return css`\n cursor: text;\n ${getSelection(t.timePickerSelectedBgColor, t.timePickerSelectedTextColor)}\n `;\n },\n\n segment() {\n return css`\n display: inline;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n `;\n },\n\n separator() {\n return css`\n display: inline;\n position: relative;\n `;\n },\n\n separatorSmall(t: Theme) {\n return css`\n top: ${t.timePickerSeparatorOffsetTopSmall};\n padding-left: ${t.timePickerSeparatorPaddingXSmall};\n padding-right: ${t.timePickerSeparatorPaddingXSmall};\n `;\n },\n\n separatorMedium(t: Theme) {\n return css`\n top: ${t.timePickerSeparatorOffsetTopMedium};\n padding-left: ${t.timePickerSeparatorPaddingXMedium};\n padding-right: ${t.timePickerSeparatorPaddingXMedium};\n `;\n },\n\n separatorLarge(t: Theme) {\n return css`\n top: ${t.timePickerSeparatorOffsetTopLarge};\n padding-left: ${t.timePickerSeparatorPaddingXLarge};\n padding-right: ${t.timePickerSeparatorPaddingXLarge};\n `;\n },\n\n mask(t: Theme) {\n return css`\n color: ${t.timePickerMaskColor};\n `;\n },\n\n separatorFilled() {\n return css`\n color: inherit;\n `;\n },\n}));\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { InputProps } from '../Input/index.js';
|
|
3
|
+
import { type TimeFormat, type TimeSegment } from './helpers/TimePicker.shared.js';
|
|
4
|
+
export interface TimeInputRef {
|
|
5
|
+
focus(): void;
|
|
6
|
+
blur(): void;
|
|
7
|
+
blink(): void;
|
|
8
|
+
isFragment(el: HTMLElement | EventTarget | null): boolean;
|
|
9
|
+
isAllSelected(): boolean;
|
|
10
|
+
getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
|
|
11
|
+
selectSegment(segment: TimeSegment): void;
|
|
12
|
+
selectAll(): void;
|
|
13
|
+
getNode(): HTMLElement | null;
|
|
14
|
+
}
|
|
15
|
+
export interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'inputMode'> {
|
|
16
|
+
hasDropdown?: boolean;
|
|
17
|
+
format: TimeFormat;
|
|
18
|
+
value: string;
|
|
19
|
+
'aria-placeholder'?: string;
|
|
20
|
+
onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;
|
|
21
|
+
}
|
|
22
|
+
export declare const TimeInput: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimeInputRef, TimeInputProps> & Record<never, never>;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';
|
|
24
|
+
import { InputLikeText } from '../../internal/InputLikeText/index.js';
|
|
25
|
+
import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
|
|
26
|
+
import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
|
|
27
|
+
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
|
|
28
|
+
import { getTimePickerInputMinWidth, getTimePickerSuffixMargin } from './helpers/TimePicker.layout.js';
|
|
29
|
+
import { getTimeSegments } from './helpers/TimePicker.shared.js';
|
|
30
|
+
import { TimeClockIcon } from './TimeClockIcon.js';
|
|
31
|
+
import { TimeFragmentsView } from './TimeFragmentsView.js';
|
|
32
|
+
import { getStyles } from './TimePicker.styles.js';
|
|
33
|
+
export var TimeInput = forwardRefAndName('TimeInput', function (props, ref) {
|
|
34
|
+
var _a;
|
|
35
|
+
var _b = props.hasDropdown, hasDropdown = _b === void 0 ? false : _b, _c = props.size, size = _c === void 0 ? 'small' : _c, disabled = props.disabled, autoFocus = props.autoFocus, suffix = props.suffix, style = props.style, width = props.width, rightIcon = props.rightIcon, format = props.format, value = props.value, onSelectSegment = props.onSelectSegment, rest = __rest(props, ["hasDropdown", "size", "disabled", "autoFocus", "suffix", "style", "width", "rightIcon", "format", "value", "onSelectSegment"]);
|
|
36
|
+
var theme = useContext(ThemeContext);
|
|
37
|
+
var cx = useEmotion().cx;
|
|
38
|
+
var styles = useStyles(getStyles);
|
|
39
|
+
var inputLikeTextRef = useRef(null);
|
|
40
|
+
var fragmentsViewRef = useRef(null);
|
|
41
|
+
useImperativeHandle(ref, function () { return ({
|
|
42
|
+
focus: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
|
|
43
|
+
blur: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
|
|
44
|
+
blink: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blink(); },
|
|
45
|
+
getNode: function () { var _a, _b; return (_b = (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.getNode()) !== null && _b !== void 0 ? _b : null; },
|
|
46
|
+
isFragment: function (el) { var _a, _b; return (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.isFragment(el)) !== null && _b !== void 0 ? _b : false; },
|
|
47
|
+
getSegment: function (el) { var _a, _b; return (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getSegment(el)) !== null && _b !== void 0 ? _b : null; },
|
|
48
|
+
selectAll: function () {
|
|
49
|
+
var _a, _b, _c;
|
|
50
|
+
var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
|
|
51
|
+
if (!rootNode) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
(_c = inputLikeTextRef.current) === null || _c === void 0 ? void 0 : _c.selectInnerNode(rootNode, 0, rootNode.childNodes.length);
|
|
55
|
+
},
|
|
56
|
+
isAllSelected: function () {
|
|
57
|
+
var _a, _b, _c, _d, _e;
|
|
58
|
+
var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
|
|
59
|
+
if (!rootNode) {
|
|
60
|
+
return false;
|
|
61
|
+
}
|
|
62
|
+
var selection = (_d = (_c = rootNode.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.getSelection()) !== null && _d !== void 0 ? _d : null;
|
|
63
|
+
if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
|
|
64
|
+
return false;
|
|
65
|
+
}
|
|
66
|
+
var range = selection.getRangeAt(0);
|
|
67
|
+
var text = (_e = rootNode.textContent) !== null && _e !== void 0 ? _e : '';
|
|
68
|
+
return (range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer));
|
|
69
|
+
},
|
|
70
|
+
selectSegment: function (segment) {
|
|
71
|
+
var _a, _b, _c;
|
|
72
|
+
var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
|
|
73
|
+
if (!rootNode) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
var segmentIndex = getTimeSegments(format).indexOf(segment);
|
|
77
|
+
var start = segmentIndex < 0 ? 0 : segmentIndex * 2;
|
|
78
|
+
var end = start + 1;
|
|
79
|
+
(_c = inputLikeTextRef.current) === null || _c === void 0 ? void 0 : _c.selectInnerNode(rootNode, start, end);
|
|
80
|
+
},
|
|
81
|
+
}); }, [format]);
|
|
82
|
+
useEffect(function () {
|
|
83
|
+
if (!autoFocus || disabled) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
var timer = setTimeout(function () {
|
|
87
|
+
var _a;
|
|
88
|
+
(_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
89
|
+
}, 0);
|
|
90
|
+
return function () {
|
|
91
|
+
clearTimeout(timer);
|
|
92
|
+
};
|
|
93
|
+
}, []);
|
|
94
|
+
var resolvedRightIcon = rightIcon === undefined ? (React.createElement("span", { className: cx(styles.rightIcon(), styles.rightIconDefault(theme), (_a = {},
|
|
95
|
+
_a[styles.rightIconInteractive()] = hasDropdown && !disabled,
|
|
96
|
+
_a)) },
|
|
97
|
+
React.createElement(TimeClockIcon, { size: size }))) : (rightIcon);
|
|
98
|
+
var suffixMarginLeft = getTimePickerSuffixMargin(size, theme);
|
|
99
|
+
var inputMinWidth = getTimePickerInputMinWidth(size, format, resolvedRightIcon !== null, theme);
|
|
100
|
+
return (React.createElement(InputLikeText, __assign({ ref: inputLikeTextRef }, rest, { takeContentWidth: true, disabled: disabled, size: size, inputMode: 'numeric', width: width !== null && width !== void 0 ? width : 'auto', suffix: suffix && React.createElement("span", { style: { marginLeft: suffixMarginLeft } }, suffix), style: __assign(__assign({}, style), { minWidth: inputMinWidth }), rightIcon: resolvedRightIcon, value: value }),
|
|
101
|
+
React.createElement(TimeFragmentsView, { ref: fragmentsViewRef, format: format, size: size, value: value, onSelectSegment: onSelectSegment })));
|
|
102
|
+
});
|
|
103
|
+
//# sourceMappingURL=TimeInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { InputLikeText } from '../../internal/InputLikeText/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { InputProps } from '../Input/index.js';\nimport { getTimePickerInputMinWidth, getTimePickerSuffixMargin } from './helpers/TimePicker.layout.js';\nimport { getTimeSegments, type TimeFormat, type TimeSegment } from './helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from './TimeClockIcon.js';\nimport type { TimeFragmentsViewRef } from './TimeFragmentsView.js';\nimport { TimeFragmentsView } from './TimeFragmentsView.js';\nimport { getStyles } from './TimePicker.styles.js';\n\nexport interface TimeInputRef {\n focus(): void;\n\n blur(): void;\n\n blink(): void;\n\n isFragment(el: HTMLElement | EventTarget | null): boolean;\n\n isAllSelected(): boolean;\n\n getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n\n selectSegment(segment: TimeSegment): void;\n\n selectAll(): void;\n\n getNode(): HTMLElement | null;\n}\n\nexport interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'inputMode'> {\n hasDropdown?: boolean;\n format: TimeFormat;\n value: string;\n 'aria-placeholder'?: string;\n onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n const {\n hasDropdown = false,\n size = 'small',\n disabled,\n autoFocus,\n suffix,\n style,\n width,\n rightIcon,\n format,\n value,\n onSelectSegment,\n ...rest\n } = props;\n\n const theme = useContext(ThemeContext);\n\n const { cx } = useEmotion();\n\n const styles = useStyles(getStyles);\n\n const inputLikeTextRef = useRef<InputLikeText>(null);\n const fragmentsViewRef = useRef<TimeFragmentsViewRef>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputLikeTextRef.current?.focus(),\n blur: () => inputLikeTextRef.current?.blur(),\n blink: () => inputLikeTextRef.current?.blink(),\n getNode: () => inputLikeTextRef.current?.getNode() ?? null,\n isFragment: (el) => fragmentsViewRef.current?.isFragment(el) ?? false,\n getSegment: (el) => fragmentsViewRef.current?.getSegment(el) ?? null,\n selectAll: () => {\n const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return;\n }\n\n inputLikeTextRef.current?.selectInnerNode(rootNode, 0, rootNode.childNodes.length);\n },\n\n isAllSelected: () => {\n const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return false;\n }\n\n const selection = rootNode.ownerDocument.defaultView?.getSelection() ?? null;\n\n if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {\n return false;\n }\n\n const range = selection.getRangeAt(0);\n const text = rootNode.textContent ?? '';\n\n return (\n range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer)\n );\n },\n\n selectSegment: (segment) => {\n const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return;\n }\n\n const segmentIndex = getTimeSegments(format).indexOf(segment);\n const start = segmentIndex < 0 ? 0 : segmentIndex * 2;\n const end = start + 1;\n\n inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n },\n }),\n [format],\n );\n\n useEffect(() => {\n if (!autoFocus || disabled) {\n return;\n }\n\n const timer = setTimeout(() => {\n inputLikeTextRef.current?.focus();\n }, 0);\n\n return () => {\n clearTimeout(timer);\n };\n }, []);\n\n const resolvedRightIcon =\n rightIcon === undefined ? (\n <span\n className={cx(styles.rightIcon(), styles.rightIconDefault(theme), {\n [styles.rightIconInteractive()]: hasDropdown && !disabled,\n })}\n >\n <TimeClockIcon size={size} />\n </span>\n ) : (\n rightIcon\n );\n const suffixMarginLeft = getTimePickerSuffixMargin(size, theme);\n const inputMinWidth = getTimePickerInputMinWidth(size, format, resolvedRightIcon !== null, theme);\n\n return (\n <InputLikeText\n ref={inputLikeTextRef}\n {...rest}\n takeContentWidth\n disabled={disabled}\n size={size}\n inputMode={'numeric'}\n width={width ?? 'auto'}\n suffix={suffix && <span style={{ marginLeft: suffixMarginLeft }}>{suffix}</span>}\n style={{ ...style, minWidth: inputMinWidth }}\n rightIcon={resolvedRightIcon}\n value={value}\n >\n <TimeFragmentsView\n ref={fragmentsViewRef}\n format={format}\n size={size}\n value={value}\n onSelectSegment={onSelectSegment}\n />\n </InputLikeText>\n );\n});\n"]}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { AriaAttributes, HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import type { CommonProps } from '../../internal/CommonWrapper/index.js';
|
|
4
|
+
import type { SizeProp } from '../../lib/types/props.js';
|
|
5
|
+
import type { TimeFormat, TimeSlot } from './helpers/TimePicker.shared.js';
|
|
6
|
+
export interface TimePickerProps extends CommonProps, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'> {
|
|
7
|
+
/** Устанавливает формат времени @default minute */
|
|
8
|
+
format?: TimeFormat;
|
|
9
|
+
/** Определяет массив объектов со слотами в формате TimeSlot */
|
|
10
|
+
slots?: TimeSlot[];
|
|
11
|
+
/** Задает нижнюю границу времени. Слоты за границей становятся disabled */
|
|
12
|
+
minTime?: string;
|
|
13
|
+
/** Задает верхнюю границу времени. Слоты за границей становятся disabled */
|
|
14
|
+
maxTime?: string;
|
|
15
|
+
/** Значение поля @param value 'hh:mm:[:ss]' */
|
|
16
|
+
value?: string;
|
|
17
|
+
/** Устанавливает фокус на поле ввода после окончания загрузки страницы @default false */
|
|
18
|
+
autoFocus?: boolean;
|
|
19
|
+
/** Делает компонент недоступным. */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** Переводит контрол в состояние валидации 'ошибка'. */
|
|
22
|
+
error?: boolean;
|
|
23
|
+
/** Переводит контрол в состояние валидации 'предупреждение'. */
|
|
24
|
+
warning?: boolean;
|
|
25
|
+
/** Включает нативный системный выбор времени на мобильных устройствах */
|
|
26
|
+
useMobileNativeTimePicker?: boolean;
|
|
27
|
+
/** Расположение выпадающего меню */
|
|
28
|
+
menuPos?: 'top' | 'bottom';
|
|
29
|
+
/** Выравнивание выпадающего меню */
|
|
30
|
+
menuAlign?: 'left' | 'right';
|
|
31
|
+
/** Ширина выпадающего меню. По умолчанию — минимум ширина поля ввода, расширяется по контенту. */
|
|
32
|
+
menuWidth?: string | number;
|
|
33
|
+
/** Задает ширину поля. */
|
|
34
|
+
width?: string | number;
|
|
35
|
+
/** Переопределяет иконку или скрывает, если передать `null`. */
|
|
36
|
+
rightIcon?: React.ReactNode | (() => React.ReactNode);
|
|
37
|
+
/** Устанавливает суффикс после значения и перед иконкой. */
|
|
38
|
+
suffix?: ReactNode;
|
|
39
|
+
/** Размер поля ввода и выпадающего меню */
|
|
40
|
+
size?: SizeProp;
|
|
41
|
+
/** Задает функцию, которая вызывается при клике на контрол. */
|
|
42
|
+
onClick?(event: React.MouseEvent<HTMLElement>): void;
|
|
43
|
+
/** Событие изменения значения `value` в поле @param value - 'hh:mm:[:ss]' */
|
|
44
|
+
onValueChange?(value: string): void;
|
|
45
|
+
/** Задает функцию, которая вызывается при потере фокуса. */
|
|
46
|
+
onBlur?(event: React.FocusEvent<HTMLElement>): void;
|
|
47
|
+
/** Задает функцию, которая вызывается при получении фокуса. */
|
|
48
|
+
onFocus?(event: React.FocusEvent<HTMLElement>): void;
|
|
49
|
+
/** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */
|
|
50
|
+
onKeyDown?(event: React.KeyboardEvent<HTMLElement>): void;
|
|
51
|
+
/** Задает функцию, которая вызывается при вставке значения. */
|
|
52
|
+
onPaste?(event: React.ClipboardEvent<HTMLElement>): void;
|
|
53
|
+
}
|
|
54
|
+
export interface TimePickerRef {
|
|
55
|
+
/** Устанавливает фокус на поле ввода */
|
|
56
|
+
focus(): void;
|
|
57
|
+
/** Снимает фокус с поля ввода */
|
|
58
|
+
blur(): void;
|
|
59
|
+
/** Закрывает выпадающее меню */
|
|
60
|
+
close(): void;
|
|
61
|
+
/** Запускает анимацию blink у поля ввода времени */
|
|
62
|
+
blink(): void;
|
|
63
|
+
/** Возвращает DOM-узел поля ввода */
|
|
64
|
+
getNode(): HTMLElement | null;
|
|
65
|
+
/** Возвращает корневой DOM-узел компонента */
|
|
66
|
+
getRootNode(): HTMLElement | null;
|
|
67
|
+
}
|
|
68
|
+
export type TimePicker = TimePickerRef;
|
|
69
|
+
/** Поле с временем помогает вводить время с клавиатуры или выбирать его с помощью мыши */
|
|
70
|
+
export declare const TimePicker: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimePickerRef, TimePickerProps> & Record<never, never>;
|