@skbkontur/react-ui 5.4.0 → 5.4.2

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.
Files changed (81) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/cjs/components/Autocomplete/Autocomplete.d.ts +10 -2
  3. package/cjs/components/Autocomplete/Autocomplete.js +18 -2
  4. package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
  5. package/cjs/components/Button/Button.d.ts +23 -13
  6. package/cjs/components/Button/Button.js +13 -3
  7. package/cjs/components/Button/Button.js.map +1 -1
  8. package/cjs/components/CurrencyInput/CurrencyInput.d.ts +11 -22
  9. package/cjs/components/CurrencyInput/CurrencyInput.js +10 -17
  10. package/cjs/components/CurrencyInput/CurrencyInput.js.map +1 -1
  11. package/cjs/components/FxInput/FxInput.d.ts +23 -16
  12. package/cjs/components/FxInput/FxInput.js +142 -65
  13. package/cjs/components/FxInput/FxInput.js.map +1 -1
  14. package/cjs/components/Input/Input.d.ts +27 -37
  15. package/cjs/components/Input/Input.js +9 -19
  16. package/cjs/components/Input/Input.js.map +1 -1
  17. package/cjs/components/Link/Link.d.ts +10 -10
  18. package/cjs/components/Link/Link.js +1 -1
  19. package/cjs/components/Link/Link.js.map +1 -1
  20. package/cjs/components/MaskedInput/ColorableInputElement/ColorableInputElement.d.ts +1 -0
  21. package/cjs/components/MaskedInput/ColorableInputElement/ColorableInputElement.js +107 -78
  22. package/cjs/components/MaskedInput/ColorableInputElement/ColorableInputElement.js.map +1 -1
  23. package/cjs/components/MaskedInput/MaskedInput.js +5 -3
  24. package/cjs/components/MaskedInput/MaskedInput.js.map +1 -1
  25. package/cjs/components/PasswordInput/PasswordInput.d.ts +5 -6
  26. package/cjs/components/PasswordInput/PasswordInput.js +4 -5
  27. package/cjs/components/PasswordInput/PasswordInput.js.map +1 -1
  28. package/cjs/components/__stories__/Form.js +95 -0
  29. package/cjs/components/__stories__/Form.js.map +1 -0
  30. package/cjs/internal/CommonWrapper/types.d.ts +1 -1
  31. package/cjs/internal/CommonWrapper/types.js.map +1 -1
  32. package/cjs/lib/featureFlagsContext/FeatureFlagsHelpers.d.ts +1 -0
  33. package/cjs/lib/featureFlagsContext/ReactUIFeatureFlagsContext.d.ts +1 -0
  34. package/cjs/lib/featureFlagsContext/ReactUIFeatureFlagsContext.js +2 -0
  35. package/cjs/lib/featureFlagsContext/ReactUIFeatureFlagsContext.js.map +1 -1
  36. package/cjs/lib/utils.d.ts +5 -1
  37. package/cjs/lib/utils.js +20 -4
  38. package/cjs/lib/utils.js.map +1 -1
  39. package/cjs/test-setup.d.ts +1 -0
  40. package/cjs/vitest.config.d.ts +2 -0
  41. package/components/Autocomplete/Autocomplete/Autocomplete.js +10 -2
  42. package/components/Autocomplete/Autocomplete/Autocomplete.js.map +1 -1
  43. package/components/Autocomplete/Autocomplete.d.ts +10 -2
  44. package/components/Button/Button/Button.js +4 -2
  45. package/components/Button/Button/Button.js.map +1 -1
  46. package/components/Button/Button.d.ts +23 -13
  47. package/components/CurrencyInput/CurrencyInput/CurrencyInput.js +6 -17
  48. package/components/CurrencyInput/CurrencyInput/CurrencyInput.js.map +1 -1
  49. package/components/CurrencyInput/CurrencyInput.d.ts +11 -22
  50. package/components/FxInput/FxInput/FxInput.js +122 -71
  51. package/components/FxInput/FxInput/FxInput.js.map +1 -1
  52. package/components/FxInput/FxInput.d.ts +23 -16
  53. package/components/Input/Input/Input.js +8 -16
  54. package/components/Input/Input/Input.js.map +1 -1
  55. package/components/Input/Input.d.ts +27 -37
  56. package/components/Link/Link/Link.js +1 -1
  57. package/components/Link/Link/Link.js.map +1 -1
  58. package/components/Link/Link.d.ts +10 -10
  59. package/components/MaskedInput/ColorableInputElement/ColorableInputElement/ColorableInputElement.js +81 -66
  60. package/components/MaskedInput/ColorableInputElement/ColorableInputElement/ColorableInputElement.js.map +1 -1
  61. package/components/MaskedInput/ColorableInputElement/ColorableInputElement.d.ts +1 -0
  62. package/components/MaskedInput/MaskedInput/MaskedInput.js +4 -2
  63. package/components/MaskedInput/MaskedInput/MaskedInput.js.map +1 -1
  64. package/components/PasswordInput/PasswordInput/PasswordInput.js +4 -5
  65. package/components/PasswordInput/PasswordInput/PasswordInput.js.map +1 -1
  66. package/components/PasswordInput/PasswordInput.d.ts +5 -6
  67. package/components/__stories__/Form/Form.js +98 -0
  68. package/components/__stories__/Form/Form.js.map +1 -0
  69. package/components/__stories__/Form/package.json +6 -0
  70. package/internal/CommonWrapper/types/types.js.map +1 -1
  71. package/internal/CommonWrapper/types.d.ts +1 -1
  72. package/lib/featureFlagsContext/FeatureFlagsHelpers.d.ts +1 -0
  73. package/lib/featureFlagsContext/ReactUIFeatureFlagsContext/ReactUIFeatureFlagsContext.js +1 -0
  74. package/lib/featureFlagsContext/ReactUIFeatureFlagsContext/ReactUIFeatureFlagsContext.js.map +1 -1
  75. package/lib/featureFlagsContext/ReactUIFeatureFlagsContext.d.ts +1 -0
  76. package/lib/utils/utils.js +18 -2
  77. package/lib/utils/utils.js.map +1 -1
  78. package/lib/utils.d.ts +5 -1
  79. package/package.json +8 -14
  80. package/test-setup.d.ts +1 -0
  81. package/vitest.config.d.ts +2 -0
@@ -1 +1 @@
1
- {"version":3,"names":["React","globalObject","resetButton","keyListener","ThemeContext","isExternalLink","CommonWrapper","cx","rootNode","createPropsGetter","ThemeFactory","getVisualStateDataAttributes","styles","LinkIcon","LINK_DEFAULT_COMPONENT","LinkDataTids","root","Link","_class","_Link","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","state","focusedByTab","getTabIndex","_ref","nonInteractive","_ref$tabIndex","tabIndex","getRel","isAnchorProps","props","_this$props","rel","href","undefined","renderMain","_cx","disabled","icon","rightIcon","use","loading","_button","_buttonOpened","Root","component","_props$focused","focused","error","warning","theme","rest","_objectWithoutPropertiesLoose","_excluded","arrow","createElement","className","isFocused","leftIconElement","position","rightIconElement","hasBothIcons","getUseStyles","danger","success","grayed","getUseLineFocusStyles","lineFocus","lineFocusDanger","lineFocusSuccess","lineFocusGrayed","rootProps","_extends","focus","useGrayedFocus","button","buttonOpened","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","buttonOnlyProps","children","requestAnimationFrame","isTabPressed","setState","event","_this$props2","preventDefault","stopPropagation","_inheritsLoose","_proto","prototype","render","_this2","Consumer","create","rootNodeRef","setRootNode","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Link.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport type { ButtonLinkAllowedValues } from '../../lib/types/button-link';\nimport { resetButton } from '../../lib/styles/Mixins';\nimport type { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component';\nimport { keyListener } from '../../lib/events/keyListener';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isExternalLink } from '../../lib/utils';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport type { DefaultizedProps } from '../../lib/createPropsGetter';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { styles } from './Link.styles';\nimport { LinkIcon } from './LinkIcon';\n\nexport interface LinkInnerProps extends CommonProps {\n /** Делает компонент недоступным. */\n disabled?: boolean;\n\n /** Добавляет иконку слева. */\n icon?: React.ReactElement;\n\n /** Добавляет иконку справа. */\n rightIcon?: React.ReactElement;\n\n /** Задает тему ссылки. */\n use?: 'default' | 'success' | 'danger' | 'grayed';\n\n /** @ignore */\n _button?: boolean;\n\n /** @ignore */\n _buttonOpened?: boolean;\n\n /** Задает HTML-атрибут `tabindex`. */\n tabIndex?: number;\n\n /** Переводит кнопку в состояние загрузки. */\n loading?: boolean;\n\n /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n theme?: ThemeIn;\n\n /** Задает состояние фокуса.\n * @ignore */\n focused?: boolean;\n\n /** Переводит контрол в состояние валидации \"ошибка\". */\n error?: boolean;\n\n /** Переводит контрол в состояние валидации \"предупреждение\". */\n warning?: boolean;\n}\n\nconst LINK_DEFAULT_COMPONENT = 'a';\n\nexport type LinkProps<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> = PolymorphicPropsWithoutRef<\n LinkInnerProps,\n C\n>;\nexport interface LinkState {\n focusedByTab: boolean;\n}\n\nexport const LinkDataTids = {\n root: 'Link__root',\n} as const;\n\ntype DefaultProps = Required<Pick<LinkProps<ButtonLinkAllowedValues>, 'use' | 'component'>>;\ntype DefaultizedLinkProps = DefaultizedProps<LinkProps<ButtonLinkAllowedValues>, DefaultProps>;\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> extends React.Component<\n LinkProps<C>,\n LinkState\n> {\n public static __KONTUR_REACT_UI__ = 'Link';\n public static displayName = 'Link';\n\n public static defaultProps: DefaultProps = {\n use: 'default',\n component: LINK_DEFAULT_COMPONENT,\n };\n\n private getProps = createPropsGetter(Link.defaultProps);\n\n public state: LinkState = {\n focusedByTab: false,\n };\n\n private theme!: Theme;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, 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 private getTabIndex = ({\n nonInteractive,\n tabIndex = 0,\n }: {\n nonInteractive: boolean | undefined;\n tabIndex: number | undefined;\n }) => {\n return nonInteractive ? -1 : tabIndex;\n };\n\n private getRel = () => {\n if (isAnchorProps(this.props)) {\n const { rel, href } = this.props;\n if (!rel && href) {\n return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n }\n return rel;\n }\n\n return undefined;\n };\n\n private renderMain = (props: CommonWrapperRestProps<DefaultizedLinkProps>) => {\n const {\n disabled,\n icon,\n rightIcon,\n use,\n loading,\n _button,\n _buttonOpened,\n component: Root,\n focused = false,\n error,\n warning,\n tabIndex,\n theme,\n ...rest\n } = props;\n\n let arrow = null;\n if (_button) {\n arrow = <span className={styles.arrow()} />;\n }\n\n const isFocused = !disabled && (this.state.focusedByTab || focused);\n\n const leftIconElement = icon && <LinkIcon icon={icon} loading={loading} position=\"left\" />;\n const rightIconElement = rightIcon && (\n <LinkIcon hasBothIcons={!!icon && !!rightIcon} icon={rightIcon} loading={loading} position=\"right\" />\n );\n const nonInteractive = disabled || loading;\n const getUseStyles = () => {\n switch (use) {\n case 'default':\n return styles.default(this.theme);\n case 'danger':\n return styles.danger(this.theme);\n case 'success':\n return styles.success(this.theme);\n case 'grayed':\n return styles.grayed(this.theme);\n }\n };\n const getUseLineFocusStyles = () => {\n switch (use) {\n case 'default':\n return styles.lineFocus(this.theme);\n case 'danger':\n return styles.lineFocusDanger(this.theme);\n case 'success':\n return styles.lineFocusSuccess(this.theme);\n case 'grayed':\n return styles.lineFocusGrayed(this.theme);\n }\n };\n\n const rootProps = {\n ...rest,\n className: cx({\n [styles.root(this.theme)]: true,\n [resetButton()]: Root === 'button',\n [styles.focus(this.theme)]: isFocused,\n [styles.disabled(this.theme)]: disabled || loading,\n [getUseStyles()]: true,\n [styles.useGrayedFocus(this.theme)]: use === 'grayed' && focused,\n [styles.button(this.theme)]: !!_button,\n [styles.buttonOpened(this.theme)]: !!_buttonOpened,\n [styles.warning(this.theme)]: warning,\n [styles.error(this.theme)]: error,\n [getUseLineFocusStyles()]: isFocused,\n }),\n onClick: this.handleClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n tabIndex: this.getTabIndex({ nonInteractive, tabIndex }),\n rel: this.getRel(),\n };\n\n const buttonOnlyProps = Root === 'button' ? { disabled: nonInteractive } : {};\n\n return (\n <Root\n data-tid={LinkDataTids.root}\n {...rootProps}\n {...buttonOnlyProps}\n {...getVisualStateDataAttributes({ disabled })}\n >\n {leftIconElement}\n {this.props.children}\n {rightIconElement}\n {arrow}\n </Root>\n );\n };\n\n private handleFocus = () => {\n if (!this.props.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n }\n };\n\n private handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n\n private handleClick = (event: React.MouseEvent) => {\n const { onClick, disabled, loading } = this.props;\n\n if (disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (onClick && !disabled && !loading) {\n onClick(event);\n }\n };\n}\n\nconst isAnchorProps = (props: LinkProps<any>): props is LinkProps<'a'> => {\n return props.component === 'a';\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","globalObject","resetButton","keyListener","ThemeContext","isExternalLink","CommonWrapper","cx","rootNode","createPropsGetter","ThemeFactory","getVisualStateDataAttributes","styles","LinkIcon","LINK_DEFAULT_COMPONENT","LinkDataTids","root","Link","_class","_Link","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","state","focusedByTab","getTabIndex","_ref","nonInteractive","_ref$tabIndex","tabIndex","getRel","isAnchorProps","props","_this$props","rel","href","undefined","renderMain","_cx","disabled","icon","rightIcon","use","loading","_button","_buttonOpened","Root","component","_props$focused","focused","error","warning","theme","rest","_objectWithoutPropertiesLoose","_excluded","arrow","createElement","className","isFocused","leftIconElement","position","rightIconElement","hasBothIcons","getUseStyles","danger","success","grayed","getUseLineFocusStyles","lineFocus","lineFocusDanger","lineFocusSuccess","lineFocusGrayed","rootProps","_extends","focus","useGrayedFocus","button","buttonOpened","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","buttonOnlyProps","children","requestAnimationFrame","isTabPressed","setState","event","_this$props2","preventDefault","stopPropagation","_inheritsLoose","_proto","prototype","render","_this2","Consumer","create","rootNodeRef","setRootNode","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Link.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport type { ButtonLinkAllowedValues } from '../../lib/types/button-link';\nimport { resetButton } from '../../lib/styles/Mixins';\nimport type { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component';\nimport { keyListener } from '../../lib/events/keyListener';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isExternalLink } from '../../lib/utils';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport type { DefaultizedProps } from '../../lib/createPropsGetter';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { styles } from './Link.styles';\nimport { LinkIcon } from './LinkIcon';\n\nexport interface LinkInnerProps extends CommonProps {\n /** Ссылка меняет цвет на серый и становится недоступна для нажатия. */\n disabled?: boolean;\n\n /** Добавляет иконку слева от ссылки. */\n icon?: React.ReactElement;\n\n /** Добавляет иконку справа от ссылки. */\n rightIcon?: React.ReactElement;\n\n /** Задаёт стиль ссылки. */\n use?: 'default' | 'success' | 'danger' | 'grayed';\n\n /** @ignore */\n _button?: boolean;\n\n /** @ignore */\n _buttonOpened?: boolean;\n\n /** Задаёт HTML-атрибут `tabindex`. */\n tabIndex?: number;\n\n /** Переводит ссылку в состояние загрузки. */\n loading?: boolean;\n\n /** Задаёт объект с переменными темы. */\n theme?: ThemeIn;\n\n /** Задает состояние фокуса.\n * @ignore */\n focused?: boolean;\n\n /** Переводит ссылку в состояние валидации \"Ошибка\". */\n error?: boolean;\n\n /** Переводит ссылку в состояние валидации \"Предупреждение\". */\n warning?: boolean;\n}\n\nconst LINK_DEFAULT_COMPONENT = 'a';\n\nexport type LinkProps<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> = PolymorphicPropsWithoutRef<\n LinkInnerProps,\n C\n>;\nexport interface LinkState {\n focusedByTab: boolean;\n}\n\nexport const LinkDataTids = {\n root: 'Link__root',\n} as const;\n\ntype DefaultProps = Required<Pick<LinkProps<ButtonLinkAllowedValues>, 'use' | 'component'>>;\ntype DefaultizedLinkProps = DefaultizedProps<LinkProps<ButtonLinkAllowedValues>, DefaultProps>;\n\n/**\n * С помощью ссылки пользователь может перейти на другую страницу, раздел приложения или внешний URL.\n */\n@rootNode\nexport class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> extends React.Component<\n LinkProps<C>,\n LinkState\n> {\n public static __KONTUR_REACT_UI__ = 'Link';\n public static displayName = 'Link';\n\n public static defaultProps: DefaultProps = {\n use: 'default',\n component: LINK_DEFAULT_COMPONENT,\n };\n\n private getProps = createPropsGetter(Link.defaultProps);\n\n public state: LinkState = {\n focusedByTab: false,\n };\n\n private theme!: Theme;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, 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 private getTabIndex = ({\n nonInteractive,\n tabIndex = 0,\n }: {\n nonInteractive: boolean | undefined;\n tabIndex: number | undefined;\n }) => {\n return nonInteractive ? -1 : tabIndex;\n };\n\n private getRel = () => {\n if (isAnchorProps(this.props)) {\n const { rel, href } = this.props;\n if (!rel && href) {\n return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n }\n return rel;\n }\n\n return undefined;\n };\n\n private renderMain = (props: CommonWrapperRestProps<DefaultizedLinkProps>) => {\n const {\n disabled,\n icon,\n rightIcon,\n use,\n loading,\n _button,\n _buttonOpened,\n component: Root,\n focused = false,\n error,\n warning,\n tabIndex,\n theme,\n ...rest\n } = props;\n\n let arrow = null;\n if (_button) {\n arrow = <span className={styles.arrow()} />;\n }\n\n const isFocused = !disabled && (this.state.focusedByTab || focused);\n\n const leftIconElement = icon && <LinkIcon icon={icon} loading={loading} position=\"left\" />;\n const rightIconElement = rightIcon && (\n <LinkIcon hasBothIcons={!!icon && !!rightIcon} icon={rightIcon} loading={loading} position=\"right\" />\n );\n const nonInteractive = disabled || loading;\n const getUseStyles = () => {\n switch (use) {\n case 'default':\n return styles.default(this.theme);\n case 'danger':\n return styles.danger(this.theme);\n case 'success':\n return styles.success(this.theme);\n case 'grayed':\n return styles.grayed(this.theme);\n }\n };\n const getUseLineFocusStyles = () => {\n switch (use) {\n case 'default':\n return styles.lineFocus(this.theme);\n case 'danger':\n return styles.lineFocusDanger(this.theme);\n case 'success':\n return styles.lineFocusSuccess(this.theme);\n case 'grayed':\n return styles.lineFocusGrayed(this.theme);\n }\n };\n\n const rootProps = {\n ...rest,\n className: cx({\n [styles.root(this.theme)]: true,\n [resetButton()]: Root === 'button',\n [styles.focus(this.theme)]: isFocused,\n [styles.disabled(this.theme)]: disabled || loading,\n [getUseStyles()]: true,\n [styles.useGrayedFocus(this.theme)]: use === 'grayed' && focused,\n [styles.button(this.theme)]: !!_button,\n [styles.buttonOpened(this.theme)]: !!_buttonOpened,\n [styles.warning(this.theme)]: warning,\n [styles.error(this.theme)]: error,\n [getUseLineFocusStyles()]: isFocused,\n }),\n onClick: this.handleClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n tabIndex: this.getTabIndex({ nonInteractive, tabIndex }),\n rel: this.getRel(),\n };\n\n const buttonOnlyProps = Root === 'button' ? { disabled: nonInteractive } : {};\n\n return (\n <Root\n data-tid={LinkDataTids.root}\n {...rootProps}\n {...buttonOnlyProps}\n {...getVisualStateDataAttributes({ disabled })}\n >\n {leftIconElement}\n {this.props.children}\n {rightIconElement}\n {arrow}\n </Root>\n );\n };\n\n private handleFocus = () => {\n if (!this.props.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n }\n };\n\n private handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n\n private handleClick = (event: React.MouseEvent) => {\n const { onClick, disabled, loading } = this.props;\n\n if (disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (onClick && !disabled && !loading) {\n onClick(event);\n }\n };\n}\n\nconst isAnchorProps = (props: LinkProps<any>): props is LinkProps<'a'> => {\n return props.component === 'a';\n};\n"],"mappings":"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","ignoreList":[]}
@@ -5,30 +5,30 @@ import type { ThemeIn } from '../../lib/theming/Theme';
5
5
  import type { CommonProps } from '../../internal/CommonWrapper';
6
6
  import type { TGetRootNode } from '../../lib/rootNode';
7
7
  export interface LinkInnerProps extends CommonProps {
8
- /** Делает компонент недоступным. */
8
+ /** Ссылка меняет цвет на серый и становится недоступна для нажатия. */
9
9
  disabled?: boolean;
10
- /** Добавляет иконку слева. */
10
+ /** Добавляет иконку слева от ссылки. */
11
11
  icon?: React.ReactElement;
12
- /** Добавляет иконку справа. */
12
+ /** Добавляет иконку справа от ссылки. */
13
13
  rightIcon?: React.ReactElement;
14
- /** Задает тему ссылки. */
14
+ /** Задаёт стиль ссылки. */
15
15
  use?: 'default' | 'success' | 'danger' | 'grayed';
16
16
  /** @ignore */
17
17
  _button?: boolean;
18
18
  /** @ignore */
19
19
  _buttonOpened?: boolean;
20
- /** Задает HTML-атрибут `tabindex`. */
20
+ /** Задаёт HTML-атрибут `tabindex`. */
21
21
  tabIndex?: number;
22
- /** Переводит кнопку в состояние загрузки. */
22
+ /** Переводит ссылку в состояние загрузки. */
23
23
  loading?: boolean;
24
- /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
24
+ /** Задаёт объект с переменными темы. */
25
25
  theme?: ThemeIn;
26
26
  /** Задает состояние фокуса.
27
27
  * @ignore */
28
28
  focused?: boolean;
29
- /** Переводит контрол в состояние валидации "ошибка". */
29
+ /** Переводит ссылку в состояние валидации "Ошибка". */
30
30
  error?: boolean;
31
- /** Переводит контрол в состояние валидации "предупреждение". */
31
+ /** Переводит ссылку в состояние валидации "Предупреждение". */
32
32
  warning?: boolean;
33
33
  }
34
34
  declare const LINK_DEFAULT_COMPONENT = "a";
@@ -41,7 +41,7 @@ export declare const LinkDataTids: {
41
41
  };
42
42
  type DefaultProps = Required<Pick<LinkProps<ButtonLinkAllowedValues>, 'use' | 'component'>>;
43
43
  /**
44
- * Элемент ссылки из HTML.
44
+ * С помощью ссылки пользователь может перейти на другую страницу, раздел приложения или внешний URL.
45
45
  */
46
46
  export declare class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> extends React.Component<LinkProps<C>, LinkState> {
47
47
  static __KONTUR_REACT_UI__: string;
@@ -1,13 +1,13 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- var _excluded = ["children", "onInput", "onFocus", "onBlur", "showOnFocus"]; /* eslint react-hooks/exhaustive-deps: 2 */
3
+ var _excluded = ["children", "onInput", "onFocus", "onBlur", "showOnFocus", "alwaysShowMask"]; /* eslint react-hooks/exhaustive-deps: 2 */
4
4
 
5
- import React, { useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';
6
- import { globalObject, isBrowser } from '@skbkontur/global-object';
5
+ import React, { useEffect, useContext, useImperativeHandle, useRef, useCallback, useState } from 'react';
7
6
  import debounce from 'lodash.debounce';
8
7
  import { ThemeContext } from "../../../../lib/theming/ThemeContext";
9
8
  import { forwardRefAndName } from "../../../../lib/forwardRefAndName";
10
9
  import { cx } from "../../../../lib/theming/Emotion";
10
+ import { isDocument, isWindow, tryGetDocument, tryGetWindow } from "../../../../lib/utils";
11
11
  import { globalClasses } from "../ColorableInputElement.styles";
12
12
 
13
13
  // Возможно придётся включить.
@@ -16,12 +16,13 @@ import { globalClasses } from "../ColorableInputElement.styles";
16
16
  // setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);
17
17
 
18
18
  export var ColorableInputElement = forwardRefAndName('ColorableInputElement', function ColorableInputElement(props, ref) {
19
+ var _props$style3;
19
20
  var inputRef = useRef(null);
20
21
  var spanRef = useRef(null);
21
22
  var focused = useRef(false);
22
- var inputStyle = React.useRef();
23
+ var updateActiveTimer = useRef();
23
24
  var theme = useContext(ThemeContext);
24
- var _useState = useState(true),
25
+ var _useState = useState(Boolean(props.alwaysShowMask || !props.placeholder && (props.value || props.defaultValue))),
25
26
  active = _useState[0],
26
27
  setActive = _useState[1];
27
28
  var children = props.children,
@@ -29,40 +30,63 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
29
30
  onFocus = props.onFocus,
30
31
  onBlur = props.onBlur,
31
32
  showOnFocus = props.showOnFocus,
33
+ alwaysShowMask = props.alwaysShowMask,
32
34
  inputProps = _objectWithoutPropertiesLoose(props, _excluded);
33
- useImperativeHandle(ref, function () {
34
- return {
35
- input: inputRef.current,
36
- getRootNode: function getRootNode() {
37
- return inputRef.current;
38
- }
39
- };
35
+ var stopUpdateActive = useCallback(function () {
36
+ clearTimeout(updateActiveTimer.current);
40
37
  }, []);
41
- useEffect(updateActive, []);
38
+ var updateActive = useCallback(function () {
39
+ stopUpdateActive();
40
+ updateActiveTimer.current = setTimeout(function () {
41
+ var nextActive = true;
42
+ if (inputRef.current) {
43
+ var _inputRef$current2;
44
+ var _inputRef$current = inputRef.current,
45
+ clientWidth = _inputRef$current.clientWidth,
46
+ scrollWidth = _inputRef$current.scrollWidth;
47
+ var scrollable = scrollWidth > clientWidth;
48
+ var placeholderShown = (_inputRef$current2 = inputRef.current) == null || (_inputRef$current2 = _inputRef$current2.parentElement) == null ? void 0 : _inputRef$current2.querySelector(':placeholder-shown');
49
+ nextActive = !(scrollable || placeholderShown);
50
+ }
51
+ setActive(nextActive);
52
+ }, 0);
53
+ }, [stopUpdateActive]);
42
54
  var paintText = useCallback(function () {
43
- var _inputRef$current, _shadow;
44
- if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {
55
+ var _inputRef$current4, _shadow, _shadow2, _props$style, _props$style2;
56
+ var win = tryGetWindow(inputRef.current);
57
+ var doc = tryGetDocument(inputRef.current);
58
+ if (!spanRef.current || !inputRef.current || !isWindow(win) || !isDocument(doc) || !active) {
59
+ var _inputRef$current3;
60
+ inputRef.current && (inputRef.current.style.backgroundImage = '');
61
+ (_inputRef$current3 = inputRef.current) == null || _inputRef$current3.classList.remove(globalClasses.input);
45
62
  return;
46
63
  }
47
- (_inputRef$current = inputRef.current) == null || _inputRef$current.classList.add(globalClasses.input);
64
+ (_inputRef$current4 = inputRef.current) == null || _inputRef$current4.classList.add(globalClasses.input);
48
65
  var shadow = spanRef.current.shadowRoot;
49
- var typedValueElement = (_shadow = shadow) == null ? void 0 : _shadow.getElementById('span');
50
- if (!typedValueElement) {
66
+ var typedValueElement = (_shadow = shadow) == null ? void 0 : _shadow.getElementById('typed-value');
67
+ var fullValueElement = (_shadow2 = shadow) == null ? void 0 : _shadow2.getElementById('full-value');
68
+ if (!typedValueElement || !fullValueElement) {
51
69
  shadow = spanRef.current.attachShadow({
52
70
  mode: 'open'
53
71
  });
54
- typedValueElement = globalObject.document.createElement('span');
55
- typedValueElement.setAttribute('id', 'span');
56
- shadow.appendChild(typedValueElement);
72
+ typedValueElement = doc.createElement('span');
73
+ fullValueElement = doc.createElement('span');
74
+ typedValueElement.setAttribute('id', 'typed-value');
75
+ fullValueElement.setAttribute('id', 'full-value');
76
+ shadow.append(typedValueElement, fullValueElement);
57
77
  }
58
- var style = inputStyle.current;
78
+ var style = getComputedStyle(inputRef.current);
59
79
  typedValueElement.textContent = (inputRef.current.getAttribute('data-unmasked-value') || focused.current) && inputRef.current.getAttribute('data-typed-value') || '';
80
+ fullValueElement.textContent = inputRef.current.value || inputRef.current.defaultValue || '';
60
81
  var inputRect = inputRef.current.getBoundingClientRect();
61
- var filledRect = spanRef.current.getBoundingClientRect();
62
- var threshold = filledRect.width / (inputRect.width / 100);
82
+ var typedValueRect = typedValueElement.getBoundingClientRect();
83
+ var fullValueRect = fullValueElement.getBoundingClientRect();
84
+ var threshold = typedValueRect.width / (inputRect.width / 100);
63
85
  var degree = style.fontStyle === 'italic' ? 100 : 90;
86
+ var restValueWidth = 1 - Math.min(fullValueRect.width / inputRect.width, 1);
64
87
  var typedValueColor = theme.inputTextColor;
65
88
  var maskColor = theme.inputPlaceholderColor;
89
+ var indent = 0;
66
90
  if (props.disabled) {
67
91
  typedValueColor = theme.inputTextColorDisabled;
68
92
  maskColor = theme.inputTextColorDisabled;
@@ -70,30 +94,44 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
70
94
  if (props.showOnFocus) {
71
95
  maskColor = focused.current ? maskColor : 'transparent';
72
96
  }
73
- inputRef.current.style.backgroundImage = "\n linear-gradient(\n " + degree + "deg,\n " + typedValueColor + " " + threshold + "%,\n " + maskColor + " " + threshold + "%\n )";
74
- }, [props.showOnFocus, props.disabled, theme.inputTextColor, theme.inputPlaceholderColor, theme.inputTextColorDisabled]);
97
+ if (((_props$style = props.style) == null ? void 0 : _props$style.textAlign) === 'right') {
98
+ indent = 100 * restValueWidth;
99
+ }
100
+ if (((_props$style2 = props.style) == null ? void 0 : _props$style2.textAlign) === 'center') {
101
+ indent = 50 * restValueWidth;
102
+ }
103
+ inputRef.current.style.backgroundImage = "\n linear-gradient(\n " + degree + "deg,\n " + typedValueColor + " " + (threshold + indent) + "%,\n " + maskColor + " " + (threshold + indent) + "%\n )";
104
+ }, [active, props.showOnFocus, props.disabled, theme.inputTextColor, theme.inputPlaceholderColor, theme.inputTextColorDisabled, (_props$style3 = props.style) == null ? void 0 : _props$style3.textAlign]);
75
105
  var debouncedPaintText = useCallback(function () {
76
106
  return debounce(paintText);
77
107
  }, [paintText])();
78
- var activation = useCallback(function () {
79
- if (active) {
80
- debouncedPaintText();
81
- } else {
82
- var _inputRef$current2;
83
- debouncedPaintText.cancel();
84
- inputRef.current && (inputRef.current.style.backgroundImage = '');
85
- (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.classList.remove(globalClasses.input);
86
- }
87
- }, [debouncedPaintText, active]);
88
- useEffect(function () {
89
- activation();
108
+ var handleInput = useCallback(function (e) {
109
+ debouncedPaintText();
110
+ onInput == null || onInput(e);
111
+ }, [debouncedPaintText, onInput]);
112
+ var handleFocus = useCallback(function (e) {
113
+ updateActive();
114
+ focused.current = true;
115
+ onFocus == null || onFocus(e);
116
+ }, [onFocus, updateActive]);
117
+ var handleBlur = useCallback(function (e) {
90
118
  updateActive();
91
- }, [props.value, props.defaultValue, theme, activation]);
119
+ focused.current = false;
120
+ onBlur == null || onBlur(e);
121
+ }, [onBlur, updateActive]);
122
+ useImperativeHandle(ref, function () {
123
+ return {
124
+ input: inputRef.current,
125
+ getRootNode: function getRootNode() {
126
+ return inputRef.current;
127
+ }
128
+ };
129
+ }, []);
92
130
  useEffect(function () {
93
- if (inputRef.current) {
94
- inputStyle.current = getComputedStyle(inputRef.current);
95
- }
96
- });
131
+ debouncedPaintText();
132
+ updateActive();
133
+ return stopUpdateActive;
134
+ }, [updateActive, props.value, props.defaultValue, theme, debouncedPaintText, stopUpdateActive]);
97
135
  return /*#__PURE__*/(
98
136
  React.createElement(React.Fragment, null, /*#__PURE__*/
99
137
  React.cloneElement(children, _extends({}, inputProps, {
@@ -111,27 +149,4 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
111
149
  ref: spanRef
112
150
  }))
113
151
  );
114
- function handleInput(e) {
115
- var _inputRef$current3;
116
- var isActive = !((_inputRef$current3 = inputRef.current) != null && (_inputRef$current3 = _inputRef$current3.parentElement) != null && _inputRef$current3.querySelector(':placeholder-shown'));
117
- setActive(isActive);
118
- activation();
119
- onInput == null || onInput(e);
120
- }
121
- function handleFocus(e) {
122
- setTimeout(updateActive);
123
- focused.current = true;
124
- onFocus == null || onFocus(e);
125
- }
126
- function handleBlur(e) {
127
- updateActive();
128
- focused.current = false;
129
- onBlur == null || onBlur(e);
130
- }
131
- function updateActive() {
132
- setTimeout(function () {
133
- var _inputRef$current4;
134
- setActive(!((_inputRef$current4 = inputRef.current) != null && (_inputRef$current4 = _inputRef$current4.parentElement) != null && _inputRef$current4.querySelector(':placeholder-shown')));
135
- });
136
- }
137
152
  });
@@ -1 +1 @@
1
- {"version":3,"names":["React","useContext","useEffect","useImperativeHandle","useRef","useCallback","useState","globalObject","isBrowser","debounce","ThemeContext","forwardRefAndName","cx","globalClasses","ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","theme","_useState","active","setActive","children","onInput","onFocus","onBlur","showOnFocus","inputProps","_objectWithoutPropertiesLoose","_excluded","input","current","getRootNode","updateActive","paintText","_inputRef$current","_shadow","classList","add","shadow","shadowRoot","typedValueElement","getElementById","attachShadow","mode","document","createElement","setAttribute","appendChild","style","textContent","getAttribute","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","disabled","inputTextColorDisabled","backgroundImage","debouncedPaintText","activation","_inputRef$current2","cancel","remove","value","defaultValue","getComputedStyle","Fragment","cloneElement","_extends","handleInput","handleFocus","handleBlur","className","visibility","position","whiteSpace","e","_inputRef$current3","isActive","parentElement","querySelector","setTimeout","_inputRef$current4"],"sources":["ColorableInputElement.tsx"],"sourcesContent":["/* eslint react-hooks/exhaustive-deps: 2 */\nimport type { ForwardedRef } from 'react';\nimport React, { useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport debounce from 'lodash.debounce';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport type { InputElement, InputElementProps } from '../../Input';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport { cx } from '../../../lib/theming/Emotion';\n\nimport { globalClasses } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n showOnFocus?: boolean;\n children: React.ReactElement;\n};\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);\n\nexport const ColorableInputElement = forwardRefAndName(\n 'ColorableInputElement',\n function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n const inputRef = useRef<HTMLInputElement | null>(null);\n const spanRef = useRef<HTMLSpanElement | null>(null);\n const focused = useRef(false);\n const inputStyle = React.useRef<CSSStyleDeclaration>();\n const theme = useContext(ThemeContext);\n const [active, setActive] = useState(true);\n\n const { children, onInput, onFocus, onBlur, showOnFocus, ...inputProps } = props;\n\n useImperativeHandle(\n ref,\n () => ({\n input: inputRef.current,\n getRootNode: () => inputRef.current,\n }),\n [],\n );\n\n useEffect(updateActive, []);\n\n const paintText = useCallback(() => {\n if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {\n return;\n }\n\n inputRef.current?.classList.add(globalClasses.input);\n\n let shadow = spanRef.current.shadowRoot;\n let typedValueElement = shadow?.getElementById('span');\n\n if (!typedValueElement) {\n shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n typedValueElement = globalObject.document.createElement('span');\n typedValueElement.setAttribute('id', 'span');\n\n shadow.appendChild(typedValueElement);\n }\n\n const style = inputStyle.current;\n\n typedValueElement.textContent =\n ((inputRef.current.getAttribute('data-unmasked-value') || focused.current) &&\n inputRef.current.getAttribute('data-typed-value')) ||\n '';\n\n const inputRect = inputRef.current.getBoundingClientRect();\n const filledRect = spanRef.current.getBoundingClientRect();\n\n const threshold = filledRect.width / (inputRect.width / 100);\n const degree = style.fontStyle === 'italic' ? 100 : 90;\n\n let typedValueColor = theme.inputTextColor;\n let maskColor = theme.inputPlaceholderColor;\n if (props.disabled) {\n typedValueColor = theme.inputTextColorDisabled;\n maskColor = theme.inputTextColorDisabled;\n }\n if (props.showOnFocus) {\n maskColor = focused.current ? maskColor : 'transparent';\n }\n\n inputRef.current.style.backgroundImage = `\n linear-gradient(\n ${degree}deg,\n ${typedValueColor} ${threshold}%,\n ${maskColor} ${threshold}%\n )`;\n }, [\n props.showOnFocus,\n props.disabled,\n theme.inputTextColor,\n theme.inputPlaceholderColor,\n theme.inputTextColorDisabled,\n ]);\n\n const debouncedPaintText = useCallback(() => debounce(paintText), [paintText])();\n\n const activation = useCallback(() => {\n if (active) {\n debouncedPaintText();\n } else {\n debouncedPaintText.cancel();\n inputRef.current && (inputRef.current.style.backgroundImage = '');\n inputRef.current?.classList.remove(globalClasses.input);\n }\n }, [debouncedPaintText, active]);\n\n useEffect(() => {\n activation();\n updateActive();\n }, [props.value, props.defaultValue, theme, activation]);\n\n useEffect(() => {\n if (inputRef.current) {\n inputStyle.current = getComputedStyle(inputRef.current);\n }\n });\n\n return (\n <>\n {React.cloneElement(children, {\n ...inputProps,\n onInput: handleInput,\n onFocus: handleFocus,\n onBlur: handleBlur,\n inputRef,\n className: cx(props.className, active && globalClasses.input),\n })}\n {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n </>\n );\n\n function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n const isActive = !inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n setActive(isActive);\n\n activation();\n\n onInput?.(e);\n }\n\n function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n setTimeout(updateActive);\n\n focused.current = true;\n\n onFocus?.(e);\n }\n\n function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n updateActive();\n\n focused.current = false;\n\n onBlur?.(e);\n }\n\n function updateActive() {\n setTimeout(() => {\n setActive(!inputRef.current?.parentElement?.querySelector(':placeholder-shown'));\n });\n }\n },\n);\n"],"mappings":"2OAAA;;AAEA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACxG,SAASC,YAAY,EAAEC,SAAS,QAAQ,0BAA0B;AAClE,OAAOC,QAAQ,MAAM,iBAAiB;;AAEtC,SAASC,YAAY,QAAQ,mCAAmC;;AAEhE,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,EAAE,QAAQ,8BAA8B;;AAEjD,SAASC,aAAa,QAAQ,gCAAgC;;;;;;;AAO9D;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,qBAAqB,GAAGH,iBAAiB;EACpD,uBAAuB;EACvB,SAASG,qBAAqBA,CAACC,KAAiC,EAAEC,GAA+B,EAAE;IACjG,IAAMC,QAAQ,GAAGb,MAAM,CAA0B,IAAI,CAAC;IACtD,IAAMc,OAAO,GAAGd,MAAM,CAAyB,IAAI,CAAC;IACpD,IAAMe,OAAO,GAAGf,MAAM,CAAC,KAAK,CAAC;IAC7B,IAAMgB,UAAU,GAAGpB,KAAK,CAACI,MAAM,CAAsB,CAAC;IACtD,IAAMiB,KAAK,GAAGpB,UAAU,CAACS,YAAY,CAAC;IACtC,IAAAY,SAAA,GAA4BhB,QAAQ,CAAC,IAAI,CAAC,CAAnCiB,MAAM,GAAAD,SAAA,IAAEE,SAAS,GAAAF,SAAA;;IAExB,IAAQG,QAAQ,GAA2DV,KAAK,CAAxEU,QAAQ,CAAEC,OAAO,GAAkDX,KAAK,CAA9DW,OAAO,CAAEC,OAAO,GAAyCZ,KAAK,CAArDY,OAAO,CAAEC,MAAM,GAAiCb,KAAK,CAA5Ca,MAAM,CAAEC,WAAW,GAAoBd,KAAK,CAApCc,WAAW,CAAKC,UAAU,GAAAC,6BAAA,CAAKhB,KAAK,EAAAiB,SAAA;;IAEhF7B,mBAAmB;MACjBa,GAAG;MACH,oBAAO;UACLiB,KAAK,EAAEhB,QAAQ,CAACiB,OAAO;UACvBC,WAAW,EAAE,SAAAA,YAAA,UAAMlB,QAAQ,CAACiB,OAAO;QACrC,CAAC,EAAC;MACF;IACF,CAAC;;IAEDhC,SAAS,CAACkC,YAAY,EAAE,EAAE,CAAC;;IAE3B,IAAMC,SAAS,GAAGhC,WAAW,CAAC,YAAM,KAAAiC,iBAAA,EAAAC,OAAA;MAClC,IAAI,CAACrB,OAAO,CAACgB,OAAO,IAAI,CAACjB,QAAQ,CAACiB,OAAO,IAAI,CAACd,UAAU,CAACc,OAAO,IAAI,CAAC1B,SAAS,CAACD,YAAY,CAAC,EAAE;QAC5F;MACF;;MAEA,CAAA+B,iBAAA,GAAArB,QAAQ,CAACiB,OAAO,aAAhBI,iBAAA,CAAkBE,SAAS,CAACC,GAAG,CAAC5B,aAAa,CAACoB,KAAK,CAAC;;MAEpD,IAAIS,MAAM,GAAGxB,OAAO,CAACgB,OAAO,CAACS,UAAU;MACvC,IAAIC,iBAAiB,IAAAL,OAAA,GAAGG,MAAM,qBAANH,OAAA,CAAQM,cAAc,CAAC,MAAM,CAAC;;MAEtD,IAAI,CAACD,iBAAiB,EAAE;QACtBF,MAAM,GAAGxB,OAAO,CAACgB,OAAO,CAACY,YAAY,CAAC,EAAEC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;;QAEvDH,iBAAiB,GAAGrC,YAAY,CAACyC,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC;QAC/DL,iBAAiB,CAACM,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC;;QAE5CR,MAAM,CAACS,WAAW,CAACP,iBAAiB,CAAC;MACvC;;MAEA,IAAMQ,KAAK,GAAGhC,UAAU,CAACc,OAAO;;MAEhCU,iBAAiB,CAACS,WAAW;MAC1B,CAACpC,QAAQ,CAACiB,OAAO,CAACoB,YAAY,CAAC,qBAAqB,CAAC,IAAInC,OAAO,CAACe,OAAO;MACvEjB,QAAQ,CAACiB,OAAO,CAACoB,YAAY,CAAC,kBAAkB,CAAC;MACnD,EAAE;;MAEJ,IAAMC,SAAS,GAAGtC,QAAQ,CAACiB,OAAO,CAACsB,qBAAqB,CAAC,CAAC;MAC1D,IAAMC,UAAU,GAAGvC,OAAO,CAACgB,OAAO,CAACsB,qBAAqB,CAAC,CAAC;;MAE1D,IAAME,SAAS,GAAGD,UAAU,CAACE,KAAK,IAAIJ,SAAS,CAACI,KAAK,GAAG,GAAG,CAAC;MAC5D,IAAMC,MAAM,GAAGR,KAAK,CAACS,SAAS,KAAK,QAAQ,GAAG,GAAG,GAAG,EAAE;;MAEtD,IAAIC,eAAe,GAAGzC,KAAK,CAAC0C,cAAc;MAC1C,IAAIC,SAAS,GAAG3C,KAAK,CAAC4C,qBAAqB;MAC3C,IAAIlD,KAAK,CAACmD,QAAQ,EAAE;QAClBJ,eAAe,GAAGzC,KAAK,CAAC8C,sBAAsB;QAC9CH,SAAS,GAAG3C,KAAK,CAAC8C,sBAAsB;MAC1C;MACA,IAAIpD,KAAK,CAACc,WAAW,EAAE;QACrBmC,SAAS,GAAG7C,OAAO,CAACe,OAAO,GAAG8B,SAAS,GAAG,aAAa;MACzD;;MAEA/C,QAAQ,CAACiB,OAAO,CAACkB,KAAK,CAACgB,eAAe;;MAEhCR,MAAM;MACNE,eAAe,SAAIJ,SAAS;MAC5BM,SAAS,SAAIN,SAAS,eAC1B;;IACJ,CAAC,EAAE;IACD3C,KAAK,CAACc,WAAW;IACjBd,KAAK,CAACmD,QAAQ;IACd7C,KAAK,CAAC0C,cAAc;IACpB1C,KAAK,CAAC4C,qBAAqB;IAC3B5C,KAAK,CAAC8C,sBAAsB;IAC7B,CAAC;;IAEF,IAAME,kBAAkB,GAAGhE,WAAW,CAAC,oBAAMI,QAAQ,CAAC4B,SAAS,CAAC,IAAE,CAACA,SAAS,CAAC,CAAC,CAAC,CAAC;;IAEhF,IAAMiC,UAAU,GAAGjE,WAAW,CAAC,YAAM;MACnC,IAAIkB,MAAM,EAAE;QACV8C,kBAAkB,CAAC,CAAC;MACtB,CAAC,MAAM,KAAAE,kBAAA;QACLF,kBAAkB,CAACG,MAAM,CAAC,CAAC;QAC3BvD,QAAQ,CAACiB,OAAO,KAAKjB,QAAQ,CAACiB,OAAO,CAACkB,KAAK,CAACgB,eAAe,GAAG,EAAE,CAAC;QACjE,CAAAG,kBAAA,GAAAtD,QAAQ,CAACiB,OAAO,aAAhBqC,kBAAA,CAAkB/B,SAAS,CAACiC,MAAM,CAAC5D,aAAa,CAACoB,KAAK,CAAC;MACzD;IACF,CAAC,EAAE,CAACoC,kBAAkB,EAAE9C,MAAM,CAAC,CAAC;;IAEhCrB,SAAS,CAAC,YAAM;MACdoE,UAAU,CAAC,CAAC;MACZlC,YAAY,CAAC,CAAC;IAChB,CAAC,EAAE,CAACrB,KAAK,CAAC2D,KAAK,EAAE3D,KAAK,CAAC4D,YAAY,EAAEtD,KAAK,EAAEiD,UAAU,CAAC,CAAC;;IAExDpE,SAAS,CAAC,YAAM;MACd,IAAIe,QAAQ,CAACiB,OAAO,EAAE;QACpBd,UAAU,CAACc,OAAO,GAAG0C,gBAAgB,CAAC3D,QAAQ,CAACiB,OAAO,CAAC;MACzD;IACF,CAAC,CAAC;;IAEF;MACElC,KAAA,CAAAiD,aAAA,CAAAjD,KAAA,CAAA6E,QAAA;MACG7E,KAAK,CAAC8E,YAAY,CAACrD,QAAQ,EAAAsD,QAAA;MACvBjD,UAAU;QACbJ,OAAO,EAAEsD,WAAW;QACpBrD,OAAO,EAAEsD,WAAW;QACpBrD,MAAM,EAAEsD,UAAU;QAClBjE,QAAQ,EAARA,QAAQ;QACRkE,SAAS,EAAEvE,EAAE,CAACG,KAAK,CAACoE,SAAS,EAAE5D,MAAM,IAAIV,aAAa,CAACoB,KAAK,CAAC;MAC9D,CAAC;MACDV,MAAM,iBAAIvB,KAAA,CAAAiD,aAAA,WAAMG,KAAK,EAAE,EAAEgC,UAAU,EAAE,QAAQ,EAAEC,QAAQ,EAAE,UAAU,EAAEC,UAAU,EAAE,KAAK,CAAC,CAAE,EAACtE,GAAG,EAAEE,OAAQ,EAAE;MAC1G,CAAC;;;IAGL,SAAS8D,WAAWA,CAACO,CAAsC,EAAE,KAAAC,kBAAA;MAC3D,IAAMC,QAAQ,GAAG,GAAAD,kBAAA,GAACvE,QAAQ,CAACiB,OAAO,cAAAsD,kBAAA,GAAhBA,kBAAA,CAAkBE,aAAa,aAA/BF,kBAAA,CAAiCG,aAAa,CAAC,oBAAoB,CAAC;MACtFnE,SAAS,CAACiE,QAAQ,CAAC;;MAEnBnB,UAAU,CAAC,CAAC;;MAEZ5C,OAAO,YAAPA,OAAO,CAAG6D,CAAC,CAAC;IACd;;IAEA,SAASN,WAAWA,CAACM,CAAqC,EAAE;MAC1DK,UAAU,CAACxD,YAAY,CAAC;;MAExBjB,OAAO,CAACe,OAAO,GAAG,IAAI;;MAEtBP,OAAO,YAAPA,OAAO,CAAG4D,CAAC,CAAC;IACd;;IAEA,SAASL,UAAUA,CAACK,CAAqC,EAAE;MACzDnD,YAAY,CAAC,CAAC;;MAEdjB,OAAO,CAACe,OAAO,GAAG,KAAK;;MAEvBN,MAAM,YAANA,MAAM,CAAG2D,CAAC,CAAC;IACb;;IAEA,SAASnD,YAAYA,CAAA,EAAG;MACtBwD,UAAU,CAAC,YAAM,KAAAC,kBAAA;QACfrE,SAAS,CAAC,GAAAqE,kBAAA,GAAC5E,QAAQ,CAACiB,OAAO,cAAA2D,kBAAA,GAAhBA,kBAAA,CAAkBH,aAAa,aAA/BG,kBAAA,CAAiCF,aAAa,CAAC,oBAAoB,CAAC,EAAC;MAClF,CAAC,CAAC;IACJ;EACF;AACF,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["React","useEffect","useContext","useImperativeHandle","useRef","useCallback","useState","debounce","ThemeContext","forwardRefAndName","cx","isDocument","isWindow","tryGetDocument","tryGetWindow","globalClasses","ColorableInputElement","props","ref","_props$style3","inputRef","spanRef","focused","updateActiveTimer","theme","_useState","Boolean","alwaysShowMask","placeholder","value","defaultValue","active","setActive","children","onInput","onFocus","onBlur","showOnFocus","inputProps","_objectWithoutPropertiesLoose","_excluded","stopUpdateActive","clearTimeout","current","updateActive","setTimeout","nextActive","_inputRef$current2","_inputRef$current","clientWidth","scrollWidth","scrollable","placeholderShown","parentElement","querySelector","paintText","_inputRef$current4","_shadow","_shadow2","_props$style","_props$style2","win","doc","_inputRef$current3","style","backgroundImage","classList","remove","input","add","shadow","shadowRoot","typedValueElement","getElementById","fullValueElement","attachShadow","mode","createElement","setAttribute","append","getComputedStyle","textContent","getAttribute","inputRect","getBoundingClientRect","typedValueRect","fullValueRect","threshold","width","degree","fontStyle","restValueWidth","Math","min","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","indent","disabled","inputTextColorDisabled","textAlign","debouncedPaintText","handleInput","e","handleFocus","handleBlur","getRootNode","Fragment","cloneElement","_extends","className","visibility","position","whiteSpace"],"sources":["ColorableInputElement.tsx"],"sourcesContent":["/* eslint react-hooks/exhaustive-deps: 2 */\nimport type { ForwardedRef } from 'react';\nimport React, { useEffect, useContext, useImperativeHandle, useRef, useCallback, useState } from 'react';\nimport debounce from 'lodash.debounce';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport type { InputElement, InputElementProps } from '../../Input';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { isDocument, isWindow, tryGetDocument, tryGetWindow } from '../../../lib/utils';\n\nimport { globalClasses } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n alwaysShowMask?: boolean;\n showOnFocus?: boolean;\n children: React.ReactElement;\n};\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);\n\nexport const ColorableInputElement = forwardRefAndName(\n 'ColorableInputElement',\n function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n const inputRef = useRef<HTMLInputElement | null>(null);\n const spanRef = useRef<HTMLSpanElement | null>(null);\n const focused = useRef(false);\n const updateActiveTimer = useRef<ReturnType<typeof setTimeout>>();\n const theme = useContext(ThemeContext);\n const [active, setActive] = useState(\n Boolean(props.alwaysShowMask || (!props.placeholder && (props.value || props.defaultValue))),\n );\n\n const { children, onInput, onFocus, onBlur, showOnFocus, alwaysShowMask, ...inputProps } = props;\n\n const stopUpdateActive = useCallback(() => {\n clearTimeout(updateActiveTimer.current);\n }, []);\n\n const updateActive = useCallback(() => {\n stopUpdateActive();\n updateActiveTimer.current = setTimeout(() => {\n let nextActive = true;\n if (inputRef.current) {\n const { clientWidth, scrollWidth } = inputRef.current;\n const scrollable = scrollWidth > clientWidth;\n\n const placeholderShown = inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n\n nextActive = !(scrollable || placeholderShown);\n }\n setActive(nextActive);\n }, 0);\n }, [stopUpdateActive]);\n\n const paintText = useCallback(() => {\n const win = tryGetWindow(inputRef.current);\n const doc = tryGetDocument(inputRef.current);\n if (!spanRef.current || !inputRef.current || !isWindow(win) || !isDocument(doc) || !active) {\n inputRef.current && (inputRef.current.style.backgroundImage = '');\n inputRef.current?.classList.remove(globalClasses.input);\n\n return;\n }\n\n inputRef.current?.classList.add(globalClasses.input);\n\n let shadow = spanRef.current.shadowRoot;\n let typedValueElement = shadow?.getElementById('typed-value');\n let fullValueElement = shadow?.getElementById('full-value');\n\n if (!typedValueElement || !fullValueElement) {\n shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n typedValueElement = doc.createElement('span');\n fullValueElement = doc.createElement('span');\n typedValueElement.setAttribute('id', 'typed-value');\n fullValueElement.setAttribute('id', 'full-value');\n\n shadow.append(typedValueElement, fullValueElement);\n }\n\n const style = getComputedStyle(inputRef.current);\n\n typedValueElement.textContent =\n ((inputRef.current.getAttribute('data-unmasked-value') || focused.current) &&\n inputRef.current.getAttribute('data-typed-value')) ||\n '';\n\n fullValueElement.textContent = inputRef.current.value || inputRef.current.defaultValue || '';\n\n const inputRect = inputRef.current.getBoundingClientRect();\n const typedValueRect = typedValueElement.getBoundingClientRect();\n const fullValueRect = fullValueElement.getBoundingClientRect();\n\n const threshold = typedValueRect.width / (inputRect.width / 100);\n const degree = style.fontStyle === 'italic' ? 100 : 90;\n const restValueWidth = 1 - Math.min(fullValueRect.width / inputRect.width, 1);\n\n let typedValueColor = theme.inputTextColor;\n let maskColor = theme.inputPlaceholderColor;\n let indent = 0;\n\n if (props.disabled) {\n typedValueColor = theme.inputTextColorDisabled;\n maskColor = theme.inputTextColorDisabled;\n }\n if (props.showOnFocus) {\n maskColor = focused.current ? maskColor : 'transparent';\n }\n if (props.style?.textAlign === 'right') {\n indent = 100 * restValueWidth;\n }\n if (props.style?.textAlign === 'center') {\n indent = 50 * restValueWidth;\n }\n\n inputRef.current.style.backgroundImage = `\n linear-gradient(\n ${degree}deg,\n ${typedValueColor} ${threshold + indent}%,\n ${maskColor} ${threshold + indent}%\n )`;\n }, [\n active,\n props.showOnFocus,\n props.disabled,\n theme.inputTextColor,\n theme.inputPlaceholderColor,\n theme.inputTextColorDisabled,\n props.style?.textAlign,\n ]);\n\n const debouncedPaintText = useCallback(() => debounce(paintText), [paintText])();\n\n const handleInput = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n debouncedPaintText();\n\n onInput?.(e);\n },\n [debouncedPaintText, onInput],\n );\n\n const handleFocus = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n updateActive();\n\n focused.current = true;\n\n onFocus?.(e);\n },\n [onFocus, updateActive],\n );\n\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n updateActive();\n\n focused.current = false;\n\n onBlur?.(e);\n },\n [onBlur, updateActive],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n input: inputRef.current,\n getRootNode: () => inputRef.current,\n }),\n [],\n );\n\n useEffect(() => {\n debouncedPaintText();\n updateActive();\n\n return stopUpdateActive;\n }, [updateActive, props.value, props.defaultValue, theme, debouncedPaintText, stopUpdateActive]);\n\n return (\n <>\n {React.cloneElement(children, {\n ...inputProps,\n onInput: handleInput,\n onFocus: handleFocus,\n onBlur: handleBlur,\n inputRef,\n className: cx(props.className, active && globalClasses.input),\n })}\n {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n </>\n );\n },\n);\n"],"mappings":"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","ignoreList":[]}
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import type { InputElement, InputElementProps } from '../../Input';
3
3
  export type ColorableInputElementProps = InputElementProps & {
4
+ alwaysShowMask?: boolean;
4
5
  showOnFocus?: boolean;
5
6
  children: React.ReactElement;
6
7
  };
@@ -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", "onBeforePasteValue", "element", "className"];
3
+ var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "colored", "imaskProps", "unmask", "onValueChange", "onUnexpectedInput", "onChange", "onBeforePasteValue", "element", "className", "maxLength"];
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";
@@ -48,6 +48,7 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
48
48
  onBeforePasteValue = props.onBeforePasteValue,
49
49
  element = props.element,
50
50
  className = props.className,
51
+ maxLength = props.maxLength,
51
52
  inputProps = _objectWithoutPropertiesLoose(props, _excluded);
52
53
  var theme = useContext(ThemeContext);
53
54
  var inputRef = useRef(null);
@@ -92,7 +93,8 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
92
93
  className: cx(globalClasses.root, uiFontGlobalClassesRoot, className, styles.root(theme)),
93
94
  element: colored ? /*#__PURE__*/
94
95
  React.createElement(ColorableInputElement, {
95
- showOnFocus: false
96
+ showOnFocus: false,
97
+ alwaysShowMask: alwaysShowMask
96
98
  }, /*#__PURE__*/
97
99
  React.createElement(FixedIMaskInput, _extends({}, imaskProps, {
98
100
  onAccept: handleAccept
@@ -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","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
+ {"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","maxLength","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 // @ts-expect-error: могут передавать игнорируя ошибку\n maxLength,\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} alwaysShowMask={alwaysShowMask}>\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":"oXAAA,OAAOA,KAAK,IAAIC,mBAAmB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,QAAQ,OAAO;;;;AAI3F,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,cAAc,EAAEC,WAAW,QAAQ,uCAAuC;AACnF,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,aAAa,EAAEC,MAAM,QAAQ,sBAAsB;AAC5D,SAASC,cAAc,EAAEC,WAAW,QAAQ,uBAAuB;AACnE,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,eAAe,QAAQ,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDnD,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,IAAgB,EAAgC;EACnF,IAAI,CAACA,IAAI,EAAE;IACT,OAAOA,IAAI;EACb;;EAEA,QAAQA,IAAI;IACV,KAAK,QAAQ;IACb,KAAK,MAAM;IACX,KAAK,MAAM;IACX,KAAK,UAAU;MACb,OAAO,MAAM;IACf;MACE,OAAOA,IAAI;EACf;AACF,CAAC;;;;;;;;;;;AAWD;AACA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAGd,iBAAiB;EAC1C,aAAa;EACb,SAASc,WAAWA,CAACC,KAAuB,EAAEC,GAAsB,EAAE;IACpE;MACEC,IAAI;;;;;;;;;;;;;;;;MAgBFF,KAAK,CAhBPE,IAAI,CACJC,QAAQ,GAeNH,KAAK,CAfPG,QAAQ,CACRC,WAAW,GAcTJ,KAAK,CAdPI,WAAW,CAAAC,qBAAA,GAcTL,KAAK,CAbPM,cAAc,CAAdA,cAAc,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA,CAAAE,cAAA,GAapBP,KAAK,CAZPQ,OAAO,CAAPA,OAAO,GAAAD,cAAA,cAAG,IAAI,GAAAA,cAAA,CAAAE,iBAAA,GAYZT,KAAK,CAXPU,UAAU,CAAEC,gBAAgB,GAAAF,iBAAA,cAAG,CAAC,CAAC,GAAAA,iBAAA,CAAAG,aAAA,GAW/BZ,KAAK,CAVPa,MAAM,CAANA,MAAM,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA,CACdE,aAAa,GASXd,KAAK,CATPc,aAAa,CACbC,iBAAiB,GAQff,KAAK,CARPe,iBAAiB,CACjBC,QAAQ,GAONhB,KAAK,CAPPgB,QAAQ,CACRC,kBAAkB,GAMhBjB,KAAK,CANPiB,kBAAkB,CAClBC,OAAO,GAKLlB,KAAK,CALPkB,OAAO,CACPC,SAAS,GAIPnB,KAAK,CAJPmB,SAAS,CAETC,SAAS,GAEPpB,KAAK,CAFPoB,SAAS,CACNC,UAAU,GAAAC,6BAAA,CACXtB,KAAK,EAAAuB,SAAA;IACT,IAAMC,KAAK,GAAGxC,UAAU,CAACM,YAAY,CAAC;;IAEtC,IAAMmC,QAAQ,GAAG5C,MAAM,CAAQ,IAAI,CAAC;;IAEpC,IAAA6C,SAAA,GAA8B5C,QAAQ,CAAC,KAAK,CAAC,CAAtC6C,OAAO,GAAAD,SAAA,IAAEE,UAAU,GAAAF,SAAA;IAC1B,IAAMG,SAAS,GAAGhD,MAAM,CAASmB,KAAK,CAAC8B,KAAK,IAAIC,MAAM,CAAC/B,KAAK,CAACgC,YAAY,CAAC,IAAI,EAAE,CAAC;IACjF,IAAMC,kBAAkB,GAAGpD,MAAM,CAAgB,IAAI,CAAC;;IAEtDD,mBAAmB;MACjBqB,GAAG;MACH;UACEwB,QAAQ,CAACS,OAAO;UAChBC,MAAM,CAACC,MAAM,CAACX,QAAQ,CAACS,OAAO,EAAE;YAC9BG,SAAS,EAAE,SAAAA,UAAA,EAAM,KAAAC,iBAAA,EAAAC,kBAAA;cACf,CAAAD,iBAAA,GAAAb,QAAQ,CAACS,OAAO,aAAhBI,iBAAA,CAAkBE,KAAK,CAAC,CAAC;cACzB,CAAAD,kBAAA,GAAAd,QAAQ,CAACS,OAAO,aAAhBK,kBAAA,CAAkBE,cAAc,CAAC,CAAC;YACpC;UACF,CAAC,CAAC;MACJ;IACF,CAAC;;IAED1D,SAAS,CAAC,YAAM,KAAA2D,kBAAA;MACd;MACA;MACA;MACA,KAAAA,kBAAA,GAAIjB,QAAQ,CAACS,OAAO,aAAhBQ,kBAAA,CAAkBC,KAAK,EAAE;QAC3Bd,SAAS,CAACK,OAAO,GAAGT,QAAQ,CAACS,OAAO,CAACS,KAAK,CAACb,KAAK;QAChDG,kBAAkB,CAACC,OAAO,GAAGT,QAAQ,CAACS,OAAO,CAACS,KAAK,CAACC,cAAc;MACpE;IACF,CAAC,EAAE,EAAE,CAAC;;IAEN,IAAMlC,UAAU,GAAGmC,uBAAuB,CAAC,CAAC;;IAE5C;IACA;IACA,IAAMC,uBAAuB,GAAG,uBAAuB;;IAEvD;MACEnE,KAAA,CAAAoE,aAAA,CAAC5D,KAAK,EAAA6D,QAAA;QACJ/C,GAAG,EAAEwB,QAAS;MACVJ,UAAU;QACd4B,OAAO,EAAEC,WAAY;QACrBC,MAAM,EAAEC,UAAW;QACnBC,OAAO,EAAEC,WAAY;QACrBC,SAAS,EAAEC,aAAc;QACzBC,OAAO,EAAEC,WAAY;QACrBvC,SAAS,EAAEjC,EAAE,CAACK,aAAa,CAACoE,IAAI,EAAEb,uBAAuB,EAAE3B,SAAS,EAAE3B,MAAM,CAACmE,IAAI,CAACnC,KAAK,CAAC,CAAE;QAC1FN,OAAO;QACLV,OAAO;QACL7B,KAAA,CAAAoE,aAAA,CAACpD,qBAAqB,IAACiE,WAAW,EAAE,KAAM,EAACtD,cAAc,EAAEA,cAAe;QACxE3B,KAAA,CAAAoE,aAAA,CAACnD,eAAe,EAAAoD,QAAA,KAAKtC,UAAU,IAAEmD,QAAQ,EAAEC,YAAa,GAAE;QACrC,CAAC;;QAExBnF,KAAA,CAAAoE,aAAA,CAACnD,eAAe,EAAAoD,QAAA,KAAKtC,UAAU,IAAEmD,QAAQ,EAAEC,YAAa,GAAE,CAE7D;;;MACF,CAAC;;;IAGJ,SAASJ,WAAWA,CAACK,KAA6C,EAAE;MAClE,IAAI9C,kBAAkB,IAAIH,aAAa,EAAE,KAAAkD,qBAAA,EAAAC,oBAAA;QACvCF,KAAK,CAACG,cAAc,CAAC,CAAC;QACtBpD,aAAa,YAAbA,aAAa,CAAGG,kBAAkB,EAAA+C,qBAAA,IAAAC,oBAAA,GAACF,KAAK,CAACI,aAAa,qBAAnBF,oBAAA,CAAqBG,OAAO,CAAC,MAAM,CAAC,YAAAJ,qBAAA,GAAI,EAAE,CAAC,CAAC;MACjF;;MAEAhE,KAAK,CAACyD,OAAO,YAAbzD,KAAK,CAACyD,OAAO,CAAGM,KAAK,CAAC;IACxB;;IAEA,SAASlB,uBAAuBA,CAAA,EAAsC;MACpE,OAAAG,QAAA;QACE9C,IAAI,EAAEA,IAAI,CAACmE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAQ;QACxCC,eAAe,EAAE5E,WAAW,CAACS,QAAQ,CAAC;QACtCoE,WAAW,EAAE9E,cAAc,CAACW,WAAW,CAAC;QACxC;QACAoE,KAAK,EAAE,QAAQ;QACfC,SAAS,EAAE,OAAO;QAClBC,IAAI,EAAE,CAACpE,cAAc,KAAKN,KAAK,CAAC2E,QAAQ,IAAI,CAAChD,OAAO,CAAC;QACrDd,MAAM,EAANA,MAAM;MACHF,gBAAgB;;IAEvB;;IAEA,SAASmD,YAAYA,CAAA,EAA+E,UAAAc,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAA3EC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;MAC3B,IAAOnD,KAAK,GAASiD,IAAI,IAATG,CAAC,GAAIH,IAAI;;MAEzB;MACA;MACA;MACA;MACA;MACAG,CAAC,KAAIpE,aAAa,oBAAbA,aAAa,CAAGgB,KAAK,CAAC;MAC3B,CAACoD,CAAC,KAAKrD,SAAS,CAACK,OAAO,GAAGJ,KAAK,CAAC;IACnC;;IAEA;AACJ;AACA;AACA;AACA;IACI,SAASwB,WAAWA,CAAC4B,CAAsC,EAAE;MAC3D,IAAAC,gBAAA,GAAkCD,CAAC,CAACE,aAAa,CAAzCtD,KAAK,GAAAqD,gBAAA,CAALrD,KAAK,CAAEc,cAAc,GAAAuC,gBAAA,CAAdvC,cAAc;;MAE7B;MACA;MACA,IAAIf,SAAS,CAACK,OAAO,KAAKJ,KAAK,IAAIc,cAAc,KAAKX,kBAAkB,CAACC,OAAO,EAAE;QAChFmD,qBAAqB,CAACvD,KAAK,CAAC;MAC9B;MACAD,SAAS,CAACK,OAAO,GAAGJ,KAAK;MACzBG,kBAAkB,CAACC,OAAO,GAAGU,cAAc;;MAE3C5C,KAAK,CAACqD,OAAO,YAAbrD,KAAK,CAACqD,OAAO,CAAG6B,CAAC,CAAC;IACpB;;IAEA,SAAShC,WAAWA,CAACgC,CAAqC,EAAE,KAAAI,kBAAA;MAC1D1D,UAAU,CAAC,IAAI,CAAC;MAChB5B,KAAK,CAACiD,OAAO,YAAbjD,KAAK,CAACiD,OAAO,CAAGiC,CAAC,CAAC;;MAElB;MACA;MACAlF,KAAK,CAACuF,gBAAgB,MAAAD,kBAAA,GAAI7D,QAAQ,CAACS,OAAO,qBAAhBoD,kBAAA,CAAkB7C,cAAc,CAAC,CAAC;IAC9D;;IAEA,SAAS4C,qBAAqBA,CAACvD,KAAa,EAAE,KAAA0D,kBAAA;MAC5C,IAAMC,KAAK,GAAG,EAAAD,kBAAA,GAAA/D,QAAQ,CAACS,OAAO,qBAAhBsD,kBAAA,CAAkBC,KAAK,CAACC,IAAI,CAACjE,QAAQ,CAACS,OAAO,CAAC,KAAK,oBAAMyD,SAAS,EAAC;MACjF5E,iBAAiB,GAAGA,iBAAiB,CAACe,KAAK,EAAE2D,KAAK,CAAC,GAAGA,KAAK,CAAC,CAAC;IAC/D;;IAEA,SAASrC,UAAUA,CAAC8B,CAAqC,EAAE;MACzDtD,UAAU,CAAC,KAAK,CAAC;MACjB5B,KAAK,CAACmD,MAAM,YAAZnD,KAAK,CAACmD,MAAM,CAAG+B,CAAC,CAAC;IACnB;;IAEA,SAAS1B,aAAaA,CAAC0B,CAAwC,EAAE;MAC/D,IAAAU,iBAAA,GAAgDV,CAAC,CAACE,aAAa,CAAvDtD,KAAK,GAAA8D,iBAAA,CAAL9D,KAAK,CAAEc,cAAc,GAAAgD,iBAAA,CAAdhD,cAAc,CAAEiD,YAAY,GAAAD,iBAAA,CAAZC,YAAY;;MAE3C;MACGzG,cAAc,CAAC8F,CAAC,CAAC,IAAItC,cAAc,KAAK,CAAC,IAAIiD,YAAY,KAAK,CAAC;MAC/DxG,WAAW,CAAC6F,CAAC,CAAC,IAAIjD,kBAAkB,CAACC,OAAO,KAAKJ,KAAK,CAACgD,MAAO;MAC/D;QACA;QACAO,qBAAqB,CAACvD,KAAK,CAAC;QAC5BD,SAAS,CAACK,OAAO,GAAGgD,CAAC,CAACE,aAAa,CAACtD,KAAK;MAC3C;MACAG,kBAAkB,CAACC,OAAO,GAAGU,cAAc;;MAE3C5C,KAAK,CAACuD,SAAS,YAAfvD,KAAK,CAACuD,SAAS,CAAG2B,CAAC,CAAC;IACtB;EACF;AACF,CAAC","ignoreList":[]}
@@ -26,9 +26,7 @@ export var PasswordInputDataTids = {
26
26
  };
27
27
 
28
28
  /**
29
- * `PasswordInput` — однострочное поле для ввода пароля, в котором символы заменяются на точки.
30
- *
31
- * Не используйте такое поле для ввода одноразовых кодов из смс. У них короткий срок действия и используются они только один раз.
29
+ * Однострочное поле для ввода пароля, в котором символы заменяются на точки.
32
30
  */
33
31
 
34
32
  export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHelper), rootNode(_class = _dec(_class = withSize(_class = (_PasswordInput = /*#__PURE__*/function (_React$PureComponent) {
@@ -45,7 +43,8 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
45
43
  };
46
44
  _this.getProps = createPropsGetter({});
47
45
 
48
- /**
46
+ /** Программно устанавливает фокус на поле.
47
+ * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
49
48
  * @public
50
49
  */
51
50
  _this.focus = function () {
@@ -54,7 +53,7 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
54
53
  }
55
54
  };
56
55
 
57
- /**
56
+ /** Программно снимает фокус с кнопки.
58
57
  * @public
59
58
  */
60
59
  _this.blur = function () {