@vkontakte/vkui 5.6.1 → 5.6.2

package/dist/cjs/components/Alert/Alert.js

@@ -16,6 +16,7 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+var _useId = require("../../hooks/useId");
 var _usePlatform = require("../../hooks/usePlatform");
 var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
 var _platform = require("../../lib/platform");
@@ -117,6 +118,9 @@ var Alert = function(_param) {
         "onClose",
         "dismissLabel"
     ]);
+    var generatedId = (0, _useId.useId)();
+    var headerId = "vkui-alert-".concat(generatedId, "-header");
+    var textId = "vkui-alert-".concat(generatedId, "-text");
     var platform = (0, _usePlatform.usePlatform)();
     var isDesktop = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().isDesktop;
     var waitTransitionFinish = (0, _useWaitTransitionFinish.useWaitTransitionFinish)().waitTransitionFinish;
@@ -170,14 +174,14 @@ var Alert = function(_param) {
         className: (0, _vkjs.classNames)("vkuiAlert", platform === _platform.Platform.IOS && "vkuiAlert--ios", platform === _platform.Platform.VKCOM && "vkuiAlert--vkcom", resolvedActionsLayout === "vertical" ? "vkuiAlert--v" : "vkuiAlert--h", closing && "vkuiAlert--closing", isDesktop && "vkuiAlert--desktop"),
         role: "alertdialog",
         "aria-modal": true,
-        "aria-labelledby": "vkui--alert--title",
-        "aria-describedby": "vkui--alert--desc"
+        "aria-labelledby": headerId,
+        "aria-describedby": textId
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiAlert__content"
     }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(AlertHeader, {
-        id: "vkui--alert--title"
+        id: headerId
     }, header), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(AlertText, {
-        id: "vkui--alert--desc"
+        id: textId
     }, text), children), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiAlert__actions"
     }, actions.map(function(action, i) {

package/dist/cjs/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly, HasChildren } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id=\"vkui--alert--desc\">{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["Alert","AlertHeader","props","platform","usePlatform","Platform","IOS","Title","className","weight","level","AlertText","VKCOM","Footnote","Caption","Text","Component","AlertAction","action","onItemClick","restProps","handleItemClick","React","useCallback","title","actionProp","autoClose","mode","restActionProps","Tappable","href","classNames","onClick","Button","size","target","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","isDesktop","useAdaptivityWithJSMediaQueries","waitTransitionFinish","useWaitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","useScrollLock","PopoutWrapper","FocusTrap","getRootRef","stopPropagation","role","aria-modal","aria-labelledby","aria-describedby","div","hasReactNode","id","map","i","key","ModalDismissButton","aria-label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly, HasChildren } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const generatedId = useId();\n\n  const headerId = `vkui-alert-${generatedId}-header`;\n  const textId = `vkui-alert-${generatedId}-text`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby={headerId}\n        aria-describedby={textId}\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id={headerId}>{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id={textId}>{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["Alert","AlertHeader","props","platform","usePlatform","Platform","IOS","Title","className","weight","level","AlertText","VKCOM","Footnote","Caption","Text","Component","AlertAction","action","onItemClick","restProps","handleItemClick","React","useCallback","title","actionProp","autoClose","mode","restActionProps","Tappable","href","classNames","onClick","Button","size","target","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","generatedId","useId","headerId","textId","isDesktop","useAdaptivityWithJSMediaQueries","waitTransitionFinish","useWaitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","useScrollLock","PopoutWrapper","FocusTrap","getRootRef","stopPropagation","role","aria-modal","aria-labelledby","aria-describedby","div","hasReactNode","id","map","i","key","ModalDismissButton","aria-label"],"mappings":"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"}

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -25,6 +25,7 @@ var _platform = require("../../lib/platform");
 var _warnOnce = require("../../lib/warnOnce");
 var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
+var _Text = require("../Typography/Text/Text");
 var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var _obj;
 var sizeYClassNames = (_obj = {
@@ -136,7 +137,7 @@ var Checkbox = function(_param) {
         className: "vkuiCheckbox__content"
     }, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiCheckbox__title"
-    }, /*#__PURE__*/ _react.createElement("span", null, children), /*#__PURE__*/ _react.createElement("div", {
+    }, /*#__PURE__*/ _react.createElement(_Text.Text, null, children), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiCheckbox__titleAfter"
     }, titleAfter)), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiCheckbox__description"

package/dist/cjs/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <span>{children}</span>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Checkbox","sizeYClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Tappable","Component","classNames","Platform","VKCOM","hasReactNode","disabled","activeEffectDelay","IOS","ACTIVE_EFFECT_DELAY","VisuallyHidden","type","div","Icon20CheckBoxOn","Fragment","compact","regular","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","width","height","span","Footnote"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <Text>{children}</Text>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Checkbox","sizeYClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Tappable","Component","classNames","Platform","VKCOM","hasReactNode","disabled","activeEffectDelay","IOS","ACTIVE_EFFECT_DELAY","VisuallyHidden","type","div","Icon20CheckBoxOn","Fragment","compact","regular","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","width","height","Text","Footnote"],"mappings":"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"}

package/dist/cjs/components/DateInput/DateInput.js

@@ -27,6 +27,7 @@ var _IconButton = require("../IconButton/IconButton");
 var _InputLike = require("../InputLike/InputLike");
 var _InputLikeDivider = require("../InputLike/InputLikeDivider");
 var _Popper = require("../Popper/Popper");
+var _Text = require("../Typography/Text/Text");
 var sizeYClassNames = _define_property._({
     none: "vkuiDateInput--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiDateInput--sizeY-compact");
@@ -203,7 +204,7 @@ var DateInput = function(_param) {
         type: "hidden",
         name: name,
         value: value ? (0, _date.format)(value, enableTime ? "DD.MM.YYYYTHH:mm" : "DD.MM.YYYY") : ""
-    }), /*#__PURE__*/ _react.createElement("span", {
+    }), /*#__PURE__*/ _react.createElement(_Text.Text, {
         className: "vkuiDateInput__input",
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ _react.createElement(_InputLike.InputLike, {

package/dist/cjs/components/DateInput/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateInput--sizeY-compact'],\n};\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'doneButtonText'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursAriaLabel'\n      | 'changeMinutesAriaLabel'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  showNeighboringMonth,\n  size,\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  changeDayAriaLabel = 'Изменить день',\n  changeHoursAriaLabel = 'Изменить час',\n  changeMinutesAriaLabel = 'Изменить минуту',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateInputProps) => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'DD.MM.YYYY';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        onChange?.(parse(formattedValue, mask, value ?? new Date()));\n      }\n    },\n    [enableTime, maxElement, onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      onChange?.(value);\n      if (closeOnChange && !enableTime) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, removeFocusFromField, closeOnChange, enableTime],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''}\n      />\n      <span className={styles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeYearAriaLabel}\n        />\n        {enableTime && (\n          <React.Fragment>\n            <InputLikeDivider className={styles['DateInput__input--time-divider']}>\n              {' '}\n            </InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={hoursRef}\n              index={3}\n              onElementSelect={setFocusedElement}\n              value={internalValue[3]}\n              aria-label={changeHoursAriaLabel}\n            />\n            <InputLikeDivider>:</InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={minutesRef}\n              index={4}\n              onElementSelect={setFocusedElement}\n              value={internalValue[4]}\n              aria-label={changeMinutesAriaLabel}\n            />\n          </React.Fragment>\n        )}\n      </span>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            disablePickers={disablePickers}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            size={size}\n            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["DateInput","sizeYClassNames","none","SizeType","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","enableTime","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","doneButtonText","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","showNeighboringMonth","size","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","changeHoursAriaLabel","changeMinutesAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysRef","React","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","isMatch","parse","Date","refs","useMemo","useDateInput","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useAdaptivity","sizeY","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","REGULAR","after","IconButton","hoverMode","aria-label","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","span","onKeyDown","InputLike","onElementSelect","InputLikeDivider","Fragment","Popper","targetRef","offsetDistance","placement","Calendar","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateInput--sizeY-compact'],\n};\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'doneButtonText'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursAriaLabel'\n      | 'changeMinutesAriaLabel'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  showNeighboringMonth,\n  size,\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  changeDayAriaLabel = 'Изменить день',\n  changeHoursAriaLabel = 'Изменить час',\n  changeMinutesAriaLabel = 'Изменить минуту',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateInputProps) => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'DD.MM.YYYY';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        onChange?.(parse(formattedValue, mask, value ?? new Date()));\n      }\n    },\n    [enableTime, maxElement, onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      onChange?.(value);\n      if (closeOnChange && !enableTime) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, removeFocusFromField, closeOnChange, enableTime],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''}\n      />\n      <Text className={styles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeYearAriaLabel}\n        />\n        {enableTime && (\n          <React.Fragment>\n            <InputLikeDivider className={styles['DateInput__input--time-divider']}>\n              {' '}\n            </InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={hoursRef}\n              index={3}\n              onElementSelect={setFocusedElement}\n              value={internalValue[3]}\n              aria-label={changeHoursAriaLabel}\n            />\n            <InputLikeDivider>:</InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={minutesRef}\n              index={4}\n              onElementSelect={setFocusedElement}\n              value={internalValue[4]}\n              aria-label={changeMinutesAriaLabel}\n            />\n          </React.Fragment>\n        )}\n      </Text>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            disablePickers={disablePickers}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            size={size}\n            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["DateInput","sizeYClassNames","none","SizeType","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","enableTime","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","doneButtonText","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","showNeighboringMonth","size","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","changeHoursAriaLabel","changeMinutesAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysRef","React","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","isMatch","parse","Date","refs","useMemo","useDateInput","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useAdaptivity","sizeY","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","REGULAR","after","IconButton","hoverMode","aria-label","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","Text","onKeyDown","InputLike","onElementSelect","InputLikeDivider","Fragment","Popper","targetRef","offsetDistance","placement","Calendar","onClose"],"mappings":"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"}

package/dist/cjs/components/DateRangeInput/DateRangeInput.js

@@ -27,6 +27,7 @@ var _IconButton = require("../IconButton/IconButton");
 var _InputLike = require("../InputLike/InputLike");
 var _InputLikeDivider = require("../InputLike/InputLikeDivider");
 var _Popper = require("../Popper/Popper");
+var _Text = require("../Typography/Text/Text");
 var sizeYClassNames = _define_property._({
     none: "vkuiDateRangeInput--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiDateRangeInput--sizeY-compact");
@@ -222,7 +223,7 @@ var DateRangeInput = function(_param) {
         type: "hidden",
         name: name,
         value: value ? "".concat(value[0] ? (0, _date.format)(value[0], "DD.MM.YYYY") : "", " - ").concat(value[1] ? (0, _date.format)(value[1], "DD.MM.YYYY") : "") : ""
-    }), /*#__PURE__*/ _react.createElement("span", {
+    }), /*#__PURE__*/ _react.createElement(_Text.Text, {
         className: "vkuiDateInput__input",
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ _react.createElement(_InputLike.InputLike, {

package/dist/cjs/components/DateRangeInput/DateRangeInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  changeStartDayAriaLabel?: string;\n  changeStartMonthAriaLabel?: string;\n  changeStartYearAriaLabel?: string;\n  changeEndDayAriaLabel?: string;\n  changeEndMonthAriaLabel?: string;\n  changeEndYearAriaLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeDayAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeStartDayAriaLabel = 'Изменить день начала',\n  changeStartMonthAriaLabel = 'Изменить месяц начала',\n  changeStartYearAriaLabel = 'Изменить год начала',\n  changeEndDayAriaLabel = 'Изменить день окончания',\n  changeEndMonthAriaLabel = 'Изменить месяц окончания',\n  changeEndYearAriaLabel = 'Изменить год окончания',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateRangeInputProps) => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'DD.MM.YYYY';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue?: Array<Date | null> | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n                value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n              }`\n            : ''\n        }\n      />\n      <span className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeStartDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeStartMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeStartYearAriaLabel}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          aria-label={changeEndDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          aria-label={changeEndMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          aria-label={changeEndYearAriaLabel}\n        />\n      </span>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["DateRangeInput","sizeYClassNames","none","SizeType","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","changeDayAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeStartDayAriaLabel","changeStartMonthAriaLabel","changeStartYearAriaLabel","changeEndDayAriaLabel","changeEndMonthAriaLabel","changeEndYearAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysStartRef","React","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","isMatch","valueExists","Array","isArray","now","Date","start","parse","end","isAfter","refs","useMemo","useDateInput","maxElement","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useAdaptivity","sizeY","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","REGULAR","after","IconButton","hoverMode","aria-label","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","span","onKeyDown","InputLike","onElementSelect","InputLikeDivider","Popper","targetRef","offsetDistance","placement","CalendarRange","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  changeStartDayAriaLabel?: string;\n  changeStartMonthAriaLabel?: string;\n  changeStartYearAriaLabel?: string;\n  changeEndDayAriaLabel?: string;\n  changeEndMonthAriaLabel?: string;\n  changeEndYearAriaLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeDayAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeStartDayAriaLabel = 'Изменить день начала',\n  changeStartMonthAriaLabel = 'Изменить месяц начала',\n  changeStartYearAriaLabel = 'Изменить год начала',\n  changeEndDayAriaLabel = 'Изменить день окончания',\n  changeEndMonthAriaLabel = 'Изменить месяц окончания',\n  changeEndYearAriaLabel = 'Изменить год окончания',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateRangeInputProps) => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'DD.MM.YYYY';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue?: Array<Date | null> | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n                value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n              }`\n            : ''\n        }\n      />\n      <Text className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeStartDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeStartMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeStartYearAriaLabel}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          aria-label={changeEndDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          aria-label={changeEndMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          aria-label={changeEndYearAriaLabel}\n        />\n      </Text>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["DateRangeInput","sizeYClassNames","none","SizeType","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","changeDayAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeStartDayAriaLabel","changeStartMonthAriaLabel","changeStartYearAriaLabel","changeEndDayAriaLabel","changeEndMonthAriaLabel","changeEndYearAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysStartRef","React","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","isMatch","valueExists","Array","isArray","now","Date","start","parse","end","isAfter","refs","useMemo","useDateInput","maxElement","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useAdaptivity","sizeY","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","REGULAR","after","IconButton","hoverMode","aria-label","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","Text","onKeyDown","InputLike","onElementSelect","InputLikeDivider","Popper","targetRef","offsetDistance","placement","CalendarRange","onClose"],"mappings":"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"}

package/dist/cjs/components/Radio/Radio.js

@@ -21,6 +21,7 @@ var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
+var _Text = require("../Typography/Text/Text");
 var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var sizeYClassNames = _define_property._({
     none: "vkuiRadio--sizeY-none"
@@ -77,7 +78,7 @@ var Radio = function(_param) {
         className: "vkuiRadio__content"
     }, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiRadio__title"
-    }, /*#__PURE__*/ _react.createElement("span", null, children), /*#__PURE__*/ _react.createElement("div", {
+    }, /*#__PURE__*/ _react.createElement(_Text.Text, null, children), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiRadio__titleAfter"
     }, titleAfter)), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiRadio__description"

package/dist/cjs/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        getRootRef={getRef}\n        className={styles['Radio__input']}\n      />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__title']}>\n            <span>{children}</span>\n            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n          </div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Radio","sizeYClassNames","none","SizeType","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","usePlatform","useAdaptivity","sizeY","Tappable","Component","classNames","REGULAR","activeEffectDelay","Platform","IOS","ACTIVE_EFFECT_DELAY","disabled","VisuallyHidden","type","div","span","hasReactNode","Footnote"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;;;+DArCU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBAEqB;wBACrB;8BACM;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAGnB,IAAMC,YAAY,SAACC;IACjB,qBACE,qBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;OAAgBJ,sBAC1E,qBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,qBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,SAAS;QAAwBD,MAAK;;AAG5E;AAaO,IAAMjB,QAAQ;QACnBmB,kBAAAA,UACAC,qBAAAA,aACAC,eAAAA,OACAH,mBAAAA,WACAI,oBAAAA,YACAC,oBAAAA,YACAC,gBAAAA,QACGC;QAPHN;QACAC;QACAC;QACAH;QACAI;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ;QACPC,WAAU;QACVV,OAAOA;QACPH,WAAWc,IAAAA,gBAAU,eAEnBH,UAAU1B,oBAAQ,CAAC8B,OAAO,IAAIhC,eAAe,CAAC4B,MAAM,EACpDX;QAEFgB,mBAAmBR,aAAaS,kBAAQ,CAACC,GAAG,GAAG,MAAMC,6BAAmB;QACxEC,UAAUb,UAAUa,QAAQ;QAC5BhB,YAAYA;qBAEZ,qBAACiB,8BAAc,8CACTd;QACJM,WAAU;QACVS,MAAK;QACLlB,YAAYE;QACZN,SAAS;uBAEX,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACb;QAAUa,SAAS;sBACpB,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACwB,cAAMvB,yBACP,qBAACsB;QAAIvB,SAAS;OAAgCK,cAE/CoB,IAAAA,kBAAY,EAACvB,8BACZ,qBAACwB,kBAAQ;QAAC1B,SAAS;OAAiCE;AAMhE"}
+{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        getRootRef={getRef}\n        className={styles['Radio__input']}\n      />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__title']}>\n            <Text>{children}</Text>\n            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n          </div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Radio","sizeYClassNames","none","SizeType","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","usePlatform","useAdaptivity","sizeY","Tappable","Component","classNames","REGULAR","activeEffectDelay","Platform","IOS","ACTIVE_EFFECT_DELAY","disabled","VisuallyHidden","type","div","Text","hasReactNode","Footnote"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;;+DAtCU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBAEqB;wBACrB;oBACJ;8BACU;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAGnB,IAAMC,YAAY,SAACC;IACjB,qBACE,qBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;OAAgBJ,sBAC1E,qBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,qBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,SAAS;QAAwBD,MAAK;;AAG5E;AAaO,IAAMjB,QAAQ;QACnBmB,kBAAAA,UACAC,qBAAAA,aACAC,eAAAA,OACAH,mBAAAA,WACAI,oBAAAA,YACAC,oBAAAA,YACAC,gBAAAA,QACGC;QAPHN;QACAC;QACAC;QACAH;QACAI;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ;QACPC,WAAU;QACVV,OAAOA;QACPH,WAAWc,IAAAA,gBAAU,eAEnBH,UAAU1B,oBAAQ,CAAC8B,OAAO,IAAIhC,eAAe,CAAC4B,MAAM,EACpDX;QAEFgB,mBAAmBR,aAAaS,kBAAQ,CAACC,GAAG,GAAG,MAAMC,6BAAmB;QACxEC,UAAUb,UAAUa,QAAQ;QAC5BhB,YAAYA;qBAEZ,qBAACiB,8BAAc,8CACTd;QACJM,WAAU;QACVS,MAAK;QACLlB,YAAYE;QACZN,SAAS;uBAEX,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACb;QAAUa,SAAS;sBACpB,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACuB;QAAIvB,SAAS;qBACZ,qBAACwB,UAAI,QAAEvB,yBACP,qBAACsB;QAAIvB,SAAS;OAAgCK,cAE/CoB,IAAAA,kBAAY,EAACvB,8BACZ,qBAACwB,kBAAQ;QAAC1B,SAAS;OAAiCE;AAMhE"}

package/dist/cjs/components/Search/Search.js

@@ -85,7 +85,7 @@ var Search = function(_param) {
         inputRef
     ]);
     return /*#__PURE__*/ _react.createElement("div", {
-        className: (0, _vkjs.classNames)("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === _adaptivity.SizeType.COMPACT && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
+        className: (0, _vkjs.classNames)("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === _adaptivity.SizeType.COMPACT && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", inputProps.disabled && "vkuiSearch--disabled", className),
         style: style
     }, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiSearch__field"

package/dist/cjs/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n    },\n    [inputRef],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","useExternRef","useBooleanState","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useEnsuredControl","useAdaptivity","sizeY","platform","usePlatform","onFocus","e","onBlur","onCancel","React","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","classNames","SizeType","COMPACT","label","Headline","Component","type","level","weight","getRootRef","IconButton","hoverMode","onStart","aria-label","onClick","Platform","IOS","Icon16Clear","Icon24Cancel","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n    },\n    [inputRef],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        inputProps.disabled && styles['Search--disabled'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","useExternRef","useBooleanState","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useEnsuredControl","useAdaptivity","sizeY","platform","usePlatform","onFocus","e","onBlur","onCancel","React","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","classNames","SizeType","COMPACT","disabled","label","Headline","Component","type","level","weight","getRootRef","IconButton","hoverMode","onStart","aria-label","onClick","Platform","IOS","Icon16Clear","Icon24Cancel","Button","mode","size","focusVisibleMode","span"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;;;+DApCU;qBACwC;oBAC9B;6BACH;+BACE;iCACE;4BACL;2BACD;0BACH;wBACA;sBAGF;0BACI;wBAEF;AAqBlB,IAAMA,SAAS;+BACpBC,QAAAA,kDAAS,qBAACC,0BAAmB,yBAC7BC,mBAAAA,wCACAC,cAAAA,gDAAe,sDACfC,aAAAA,8CAAc,oDACdC,OAAAA,kCAAQ,yBACRC,gBAAAA,QACAC,cAAAA,kCACAC,aAAAA,8CAAcC,UAAI,uBAClBC,eAAAA,oCACAC,cAAAA,gDAAe,6BACfC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACAE,uBAAAA,8CACAC,gBAAAA,oDAAiB,oCACdC;QAdHlB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAE;QACAE;QACAC;;IAGA,IAAME,WAAWC,IAAAA,0BAAY,EAACd;IAC9B,IAIIe,oBAAAA,IAAAA,gCAAe,EAAC,QAHlBP,AAAOQ,YAGLD,kBAHFP,OACAS,AAASC,iBAEPH,kBAFFE,SACAE,AAAUC,kBACRL,kBADFI;IAGF,IAA0BE,yCAAAA,IAAAA,oCAAiB,EAAC;QAC1CxB,cAAAA;QACAS,UAAUC;QACVC,OAAOC;IACT,QAJOD,QAAmBa,wBAAZf,WAAYe;IAK1B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,UAAU,SAACC;QACfT;QACAN,WAAWc,OAAO,IAAId,WAAWc,OAAO,CAACC;IAC3C;IAEA,IAAMC,SAAS,SAACD;QACdP;QACAR,WAAWgB,MAAM,IAAIhB,WAAWgB,MAAM,CAACD;IACzC;IAEA,IAAME,WAAWC,OAAMC,WAAW,CAAC;YAEFC,kCAI/BC,yBAGApB;QARA,6DAA6D;QAC7D,IAAMoB,0BAAyBD,mCAAAA,OAAOE,wBAAwB,CAC5DC,iBAAiBC,SAAS,EAC1B,sBAF6BJ,uDAAAA,iCAG5BK,GAAG;SACNJ,0BAAAA,oCAAAA,8CAAAA,wBAAwBK,IAAI,CAACzB,SAAS0B,OAAO,EAAE;QAE/C,IAAMC,MAAM,IAAIC,MAAM,SAAS;YAAEC,SAAS;QAAK;SAC/C7B,oBAAAA,SAAS0B,OAAO,cAAhB1B,wCAAAA,kBAAkB8B,aAAa,CAACH;IAClC,GAAG;QAAC3B;KAAS;IAEb,IAAM+B,mBAAmBd,OAAMC,WAAW,CACxC,SAACJ;eAAkBzB,YAAYyB,EAAEkB,aAAa;OAC9C;QAAC3C;KAAY;IAGf,IAAM4C,yBAAyBhB,OAAMC,WAAW,CAC9C,SAACJ;YAECd;QADAc,EAAEkB,aAAa,CAACE,cAAc;SAC9BlC,oBAAAA,SAAS0B,OAAO,cAAhB1B,wCAAAA,kBAAkBmC,KAAK;IACzB,GACA;QAACnC;KAAS;IAGZ,qBACE,qBAACoC;QACCrD,WAAWsD,IAAAA,gBAAU,EACnB,oCAEA3B,UAAU,oCACVA,UAAU4B,oBAAQ,CAACC,OAAO,iCAC1BpC,oCACAR,kCACAT,kCACAE,gCACAW,WAAWyC,QAAQ,4BACnBzD;QAEFQ,OAAOA;qBAEP,qBAAC6C;QAAIrD,SAAS;qBACZ,qBAAC0D;QAAM1D,SAAS;OACbF,sBACD,qBAAC6D,kBAAQ;QACPC,WAAU;QACVC,MAAK;QACLC,OAAM;QACNC,QAAO;OACH/C;QACJd,aAAaA;QACbO,cAAcA;QACduD,YAAY/C;QACZjB,SAAS;QACT8B,SAASA;QACTE,QAAQA;QACRtB,UAAUA;QACVE,OAAOA;wBAGX,qBAACyC;QAAIrD,SAAS;OACXK,sBACC,qBAAC4D,sBAAU;QACTC,WAAU;QACVC,SAASnB;QACThD,SAAS;QACT8B,SAASR;QACTU,QAAQR;QACR4C,cAAYtD;OAEXT,OAGJ,CAAC,CAACO,uBACD,qBAACqD,sBAAU;QACTC,WAAU;QACVC,SAASjB;QACTmB,SAASpC;QACTjC,SAAS;QACToE,cAAYrD;OAEXa,aAAa0C,kBAAQ,CAACC,GAAG,iBAAG,qBAACC,kBAAW,wBAAM,qBAACC,mBAAY,YAKnE7C,aAAa0C,kBAAQ,CAACC,GAAG,IAAIpE,uBAC5B,qBAACuE,cAAM;QACLC,MAAK;QACLC,MAAK;QACL5E,SAAS;QACT6E,kBAAiB;QACjBR,SAASpC;QACTH,SAASR;QACTU,QAAQR;qBAER,qBAACsD;QAAK9E,SAAS;OAAgCG;AAKzD"}

package/dist/cjs/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js

@@ -8,22 +8,17 @@ Object.defineProperty(exports, "SegmentedControlOption", {
         return SegmentedControlOption;
     }
 });
-var _define_property = require("@swc/helpers/_/_define_property");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _useAdaptivity = require("../../../hooks/useAdaptivity");
 var _useFocusVisible = require("../../../hooks/useFocusVisible");
-var _adaptivity = require("../../../lib/adaptivity");
 var _callMultiple = require("../../../lib/callMultiple");
 var _FocusVisible = require("../../FocusVisible/FocusVisible");
+var _Headline = require("../../Typography/Headline/Headline");
 var _VisuallyHidden = require("../../VisuallyHidden/VisuallyHidden");
-var sizeYClassNames = _define_property._({
-    none: "vkuiSegmentedControlOption__content--sizeY-none"
-}, _adaptivity.SizeType.COMPACT, "vkuiSegmentedControlOption__content--sizeY-compact");
 var SegmentedControlOption = function(_param) {
     var getRef = _param.getRef, className = _param.className, style = _param.style, children = _param.children, restProps = _object_without_properties._(_param, [
         "getRef",
@@ -32,7 +27,6 @@ var SegmentedControlOption = function(_param) {
         "children"
     ]);
     var _useFocusVisible1 = (0, _useFocusVisible.useFocusVisible)(), focusVisible = _useFocusVisible1.focusVisible, onBlur = _useFocusVisible1.onBlur, onFocus = _useFocusVisible1.onFocus;
-    var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     return /*#__PURE__*/ _react.createElement("label", {
         className: (0, _vkjs.classNames)("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", className),
         style: style
@@ -42,8 +36,10 @@ var SegmentedControlOption = function(_param) {
         type: "radio",
         onBlur: (0, _callMultiple.callMultiple)(onBlur, restProps.onBlur),
         onFocus: (0, _callMultiple.callMultiple)(onFocus, restProps.onFocus)
-    })), /*#__PURE__*/ _react.createElement("span", {
-        className: (0, _vkjs.classNames)("vkuiSegmentedControlOption__content", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY])
+    })), /*#__PURE__*/ _react.createElement(_Headline.Headline, {
+        className: "vkuiSegmentedControlOption__content",
+        level: "2",
+        weight: "2"
     }, children), /*#__PURE__*/ _react.createElement(_FocusVisible.FocusVisible, {
         visible: focusVisible,
         mode: "inside"