@vkontakte/vkui 5.6.0 → 5.6.2

package/dist/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":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height","span"],"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":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","Text","VisuallyHidden","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height"],"mappings":"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"}

package/dist/components/DateInput/DateInput.js

@@ -16,6 +16,7 @@ import { IconButton } from "../IconButton/IconButton";
 import { InputLike } from "../InputLike/InputLike";
 import { InputLikeDivider } from "../InputLike/InputLikeDivider";
 import { Popper } from "../Popper/Popper";
+import { Text } from "../Typography/Text/Text";
 var sizeYClassNames = _define_property({
     none: "vkuiDateInput--sizeY-none"
 }, SizeType.COMPACT, "vkuiDateInput--sizeY-compact");
@@ -194,7 +195,7 @@ var getInternalValue = function(value) {
         type: "hidden",
         name: name,
         value: value ? format(value, enableTime ? "DD.MM.YYYYTHH:mm" : "DD.MM.YYYY") : ""
-    }), /*#__PURE__*/ React.createElement("span", {
+    }), /*#__PURE__*/ React.createElement(Text, {
         className: "vkuiDateInput__input",
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ React.createElement(InputLike, {

package/dist/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":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isMatch","parse","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","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","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","span","onKeyDown","onElementSelect","Fragment","targetRef","offsetDistance","placement","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":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isMatch","parse","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","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","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","onKeyDown","onElementSelect","Fragment","targetRef","offsetDistance","placement","onClose"],"mappings":"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"}

package/dist/components/DateRangeInput/DateRangeInput.js

@@ -16,6 +16,7 @@ import { IconButton } from "../IconButton/IconButton";
 import { InputLike } from "../InputLike/InputLike";
 import { InputLikeDivider } from "../InputLike/InputLikeDivider";
 import { Popper } from "../Popper/Popper";
+import { Text } from "../Typography/Text/Text";
 var sizeYClassNames = _define_property({
     none: "vkuiDateRangeInput--sizeY-none"
 }, SizeType.COMPACT, "vkuiDateRangeInput--sizeY-compact");
@@ -213,7 +214,7 @@ var getInternalValue = function(value) {
         type: "hidden",
         name: name,
         value: value ? "".concat(value[0] ? format(value[0], "DD.MM.YYYY") : "", " - ").concat(value[1] ? format(value[1], "DD.MM.YYYY") : "") : ""
-    }), /*#__PURE__*/ React.createElement("span", {
+    }), /*#__PURE__*/ React.createElement(Text, {
         className: "vkuiDateInput__input",
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ React.createElement(InputLike, {

package/dist/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":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","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","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","maxElement","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","span","onKeyDown","onElementSelect","targetRef","offsetDistance","placement","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":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","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","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","maxElement","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","onKeyDown","onElementSelect","targetRef","offsetDistance","placement","onClose"],"mappings":"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"}

package/dist/components/FormItem/FormItem.d.ts

@@ -4,6 +4,12 @@ import { RemovableProps } from '../Removable/Removable';
 export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, RemovableProps {
     top?: React.ReactNode;
     bottom?: React.ReactNode;
+    /**
+     * Передаётся при использовании `bottom`.
+     *
+     * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.
+     */
+    bottomId?: string;
     status?: 'default' | 'error' | 'valid';
     /**
      * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
@@ -15,4 +21,4 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
-export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, htmlFor, ...restProps }: FormItemProps) => React.JSX.Element;
+export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, htmlFor, bottomId, ...restProps }: FormItemProps) => React.JSX.Element;

package/dist/components/FormItem/FormItem.js

@@ -16,7 +16,7 @@ var sizeYClassNames = _define_property({
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */ export var FormItem = function(_param) {
-    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, htmlFor = _param.htmlFor, restProps = _object_without_properties(_param, [
+    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, htmlFor = _param.htmlFor, bottomId = _param.bottomId, restProps = _object_without_properties(_param, [
         "children",
         "top",
         "bottom",
@@ -27,7 +27,8 @@ var sizeYClassNames = _define_property({
         "removePlaceholder",
         "getRootRef",
         "className",
-        "htmlFor"
+        "htmlFor",
+        "bottomId"
     ]);
     var rootEl = useExternRef(getRootRef);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
@@ -36,7 +37,9 @@ var sizeYClassNames = _define_property({
         Component: htmlFor ? "label" : "h5",
         htmlFor: htmlFor
     }, top), children, hasReactNode(bottom) && /*#__PURE__*/ React.createElement(Footnote, {
-        className: "vkuiFormItem__bottom"
+        className: "vkuiFormItem__bottom",
+        id: bottomId,
+        role: status === "error" ? "alert" : undefined
     }, bottom));
     return /*#__PURE__*/ React.createElement(Component, _object_spread_props(_object_spread({}, restProps), {
         ref: rootEl,

package/dist/components/FormItem/FormItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","htmlFor","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,kBAEJ;IADAC,MAAMV,uCAA2C;GAChDK,SAASM,OAAO,EAAGX,0CAElB;AAoBJ;;CAEC,GACD,OAAO,IAAMY,WAAW;QACtBC,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWjB,0DACXkB,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,SAASrB,aAAaiB;IAC5B,IAA2BlB,iBAAAA,wCAAAA,eAAnBuB,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,oBAAC5B,MAAM6B,QAAQ,QACZ3B,aAAaa,sBACZ,oBAACN;QACCc,SAAS;QACTL,WAAWM,UAAU,UAAU;QAC/BA,SAASA;OAERT,MAGJD,UACAZ,aAAac,yBAAW,oBAACR;QAASe,SAAS;OAA+BP;IAI/E,qBACE,oBAACE,mDACKO;QACJK,KAAKJ;QACLH,WAAWtB,2BAET,wBACAgB,WAAW,aACT,CAAA;YACEc,OAAO9B,yCAEL;YAEF+B,OAAO/B,yCAEL;QAEJ,CAAA,CAAC,CAACgB,OAAO,EACXU,UAAUrB,SAAS2B,OAAO,IAAIvB,eAAe,CAACiB,MAAM,EACpDzB,aAAaa,QACXd,oCAAwC,kCAC1CkB,aAAalB,sCAA0C,oCACvDsB;QAGDJ,0BACC,oBAACZ;QACC2B,OAAM;QACNd,UAAU,SAACe;gBACLT;YAAJ,KAAIA,UAAAA,oBAAAA,8BAAAA,QAAQU,OAAO,EAAE;gBACnBhB,SAASe,GAAGT,OAAOU,OAAO;YAC5B;QACF;QACAf,mBAAmBA;QACnBgB,QAAQlB,cAAc;qBAEtB,oBAACmB;QACCf,WAAWtB,sCAA0C;OAEpD2B,oBAILA;AAIR,EAAE"}
+{"version":3,"sources":["../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  bottomId,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","htmlFor","bottomId","restProps","rootEl","sizeY","wrappedChildren","Fragment","id","role","undefined","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,kBAEJ;IADAC,MAAMV,uCAA2C;GAChDK,SAASM,OAAO,EAAGX,0CAElB;AA0BJ;;CAEC,GACD,OAAO,IAAMY,WAAW;QACtBC,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWjB,0DACXkB,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACGC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,SAAStB,aAAaiB;IAC5B,IAA2BlB,iBAAAA,wCAAAA,eAAnBwB,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,oBAAC7B,MAAM8B,QAAQ,QACZ5B,aAAaa,sBACZ,oBAACN;QACCc,SAAS;QACTL,WAAWM,UAAU,UAAU;QAC/BA,SAASA;OAERT,MAGJD,UACAZ,aAAac,yBACZ,oBAACR;QACCe,SAAS;QACTQ,IAAIN;QACJO,MAAMf,WAAW,UAAU,UAAUgB;OAEpCjB;IAMT,qBACE,oBAACE,mDACKQ;QACJQ,KAAKP;QACLJ,WAAWtB,2BAET,wBACAgB,WAAW,aACT,CAAA;YACEkB,OAAOlC,yCAEL;YAEFmC,OAAOnC,yCAEL;QAEJ,CAAA,CAAC,CAACgB,OAAO,EACXW,UAAUtB,SAAS+B,OAAO,IAAI3B,eAAe,CAACkB,MAAM,EACpD1B,aAAaa,QACXd,oCAAwC,kCAC1CkB,aAAalB,sCAA0C,oCACvDsB;QAGDJ,0BACC,oBAACZ;QACC+B,OAAM;QACNlB,UAAU,SAACmB;gBACLZ;YAAJ,KAAIA,UAAAA,oBAAAA,8BAAAA,QAAQa,OAAO,EAAE;gBACnBpB,SAASmB,GAAGZ,OAAOa,OAAO;YAC5B;QACF;QACAnB,mBAAmBA;QACnBoB,QAAQtB,cAAc;qBAEtB,oBAACuB;QACCnB,WAAWtB,sCAA0C;OAEpD4B,oBAILA;AAIR,EAAE"}

package/dist/components/Radio/Radio.js

@@ -10,6 +10,7 @@ import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
 import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
 import { Footnote } from "../Typography/Footnote/Footnote";
+import { Text } from "../Typography/Text/Text";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
 var sizeYClassNames = _define_property({
     none: "vkuiRadio--sizeY-none"
@@ -68,7 +69,7 @@ var RadioIcon = function(props) {
         className: "vkuiRadio__content"
     }, /*#__PURE__*/ React.createElement("div", {
         className: "vkuiRadio__title"
-    }, /*#__PURE__*/ React.createElement("span", null, children), /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(Text, null, children), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiRadio__titleAfter"
     }, titleAfter)), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
         className: "vkuiRadio__description"

package/dist/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":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","sizeYClassNames","none","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","Radio","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","sizeY","Component","REGULAR","activeEffectDelay","IOS","disabled","type","div","span"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,uBAAuB;AACrE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,IAAMC;IACJC,IAAI;GACHP,SAASQ,OAAO;AAGnB,IAAMC,YAAY,SAACC;IACjB,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;OAAgBJ,sBAC1E,oBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,oBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,SAAS;QAAwBD,MAAK;;AAG5E;AAUA;;CAEC,GACD,OAAO,IAAME,QAAQ;QACnBC,kBAAAA,UACAC,qBAAAA,aACAC,eAAAA,OACAJ,mBAAAA,WACAK,oBAAAA,YACAC,oBAAAA,YACAC,gBAAAA,QACGC;QAPHN;QACAC;QACAC;QACAJ;QACAK;QACAC;QACAC;;IAGA,IAAME,WAAWhC;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBkC,OAAAA,0CAAQ;IAEhB,qBACE,oBAAC7B;QACC8B,WAAU;QACVP,OAAOA;QACPJ,WAAW1B,wBAEToC,UAAUhC,SAASkC,OAAO,IAAI5B,eAAe,CAAC0B,MAAM,EACpDV;QAEFa,mBAAmBJ,aAAa9B,SAASmC,GAAG,GAAG,MAAMlC;QACrDmC,UAAUP,UAAUO,QAAQ;QAC5BV,YAAYA;qBAEZ,oBAACtB,wDACKyB;QACJG,WAAU;QACVK,MAAK;QACLX,YAAYE;QACZP,SAAS;uBAEX,oBAACiB;QAAIjB,SAAS;qBACZ,oBAACb;QAAUa,SAAS;sBACpB,oBAACiB;QAAIjB,SAAS;qBACZ,oBAACiB;QAAIjB,SAAS;qBACZ,oBAACkB,cAAMhB,yBACP,oBAACe;QAAIjB,SAAS;OAAgCM,cAE/C/B,aAAa4B,8BACZ,oBAACrB;QAASkB,SAAS;OAAiCG;AAMhE,EAAE"}
+{"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":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","Text","VisuallyHidden","sizeYClassNames","none","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","Radio","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","sizeY","Component","REGULAR","activeEffectDelay","IOS","disabled","type","div"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,uBAAuB;AACrE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,IAAMC;IACJC,IAAI;GACHR,SAASS,OAAO;AAGnB,IAAMC,YAAY,SAACC;IACjB,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;OAAgBJ,sBAC1E,oBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,oBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,SAAS;QAAwBD,MAAK;;AAG5E;AAUA;;CAEC,GACD,OAAO,IAAME,QAAQ;QACnBC,kBAAAA,UACAC,qBAAAA,aACAC,eAAAA,OACAJ,mBAAAA,WACAK,oBAAAA,YACAC,oBAAAA,YACAC,gBAAAA,QACGC;QAPHN;QACAC;QACAC;QACAJ;QACAK;QACAC;QACAC;;IAGA,IAAME,WAAWjC;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBmC,OAAAA,0CAAQ;IAEhB,qBACE,oBAAC9B;QACC+B,WAAU;QACVP,OAAOA;QACPJ,WAAW3B,wBAETqC,UAAUjC,SAASmC,OAAO,IAAI5B,eAAe,CAAC0B,MAAM,EACpDV;QAEFa,mBAAmBJ,aAAa/B,SAASoC,GAAG,GAAG,MAAMnC;QACrDoC,UAAUP,UAAUO,QAAQ;QAC5BV,YAAYA;qBAEZ,oBAACtB,wDACKyB;QACJG,WAAU;QACVK,MAAK;QACLX,YAAYE;QACZP,SAAS;uBAEX,oBAACiB;QAAIjB,SAAS;qBACZ,oBAACb;QAAUa,SAAS;sBACpB,oBAACiB;QAAIjB,SAAS;qBACZ,oBAACiB;QAAIjB,SAAS;qBACZ,oBAAClB,YAAMoB,yBACP,oBAACe;QAAIjB,SAAS;OAAgCM,cAE/ChC,aAAa6B,8BACZ,oBAACtB;QAASmB,SAAS;OAAiCG;AAMhE,EAAE"}

package/dist/components/Search/Search.js

@@ -72,13 +72,11 @@ import { Headline } from "../Typography/Headline/Headline";
         var _inputRef_current;
         e.originalEvent.preventDefault();
         (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
-        onCancel();
     }, [
-        inputRef,
-        onCancel
+        inputRef
     ]);
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === SizeType.COMPACT && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
+        className: classNames("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === 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/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      onCancel();\n    },\n    [inputRef, onCancel],\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":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Button","IconButton","Headline","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","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":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Button","IconButton","Headline","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","disabled","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"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"}

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

@@ -1,18 +1,13 @@
-import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
-import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { useFocusVisible } from "../../../hooks/useFocusVisible";
-import { SizeType } from "../../../lib/adaptivity";
 import { callMultiple } from "../../../lib/callMultiple";
 import { FocusVisible } from "../../FocusVisible/FocusVisible";
+import { Headline } from "../../Typography/Headline/Headline";
 import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden";
-var sizeYClassNames = _define_property({
-    none: "vkuiSegmentedControlOption__content--sizeY-none"
-}, SizeType.COMPACT, "vkuiSegmentedControlOption__content--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */ export var SegmentedControlOption = function(_param) {
@@ -23,7 +18,6 @@ var sizeYClassNames = _define_property({
         "children"
     ]);
     var _useFocusVisible = useFocusVisible(), focusVisible = _useFocusVisible.focusVisible, onBlur = _useFocusVisible.onBlur, onFocus = _useFocusVisible.onFocus;
-    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     return /*#__PURE__*/ React.createElement("label", {
         className: classNames("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", className),
         style: style
@@ -33,8 +27,10 @@ var sizeYClassNames = _define_property({
         type: "radio",
         onBlur: callMultiple(onBlur, restProps.onBlur),
         onFocus: callMultiple(onFocus, restProps.onFocus)
-    })), /*#__PURE__*/ React.createElement("span", {
-        className: classNames("vkuiSegmentedControlOption__content", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY])
+    })), /*#__PURE__*/ React.createElement(Headline, {
+        className: "vkuiSegmentedControlOption__content",
+        level: "2",
+        weight: "2"
     }, children), /*#__PURE__*/ React.createElement(FocusVisible, {
         visible: focusVisible,
         mode: "inside"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControlOption__content--sizeY-none'],\n  [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","SizeType","callMultiple","FocusVisible","VisuallyHidden","sizeYClassNames","none","COMPACT","SegmentedControlOption","getRef","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","label","checked","Component","getRootRef","type","span","REGULAR","visible","mode"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,cAAc,QAAQ,sCAAsC;AAGrE,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AAOnB;;CAEC,GACD,OAAO,IAAMC,yBAAyB;QACpCC,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0CZ,mBAAAA,mBAAlCc,eAAkCd,iBAAlCc,cAAcC,SAAoBf,iBAApBe,QAAQC,UAAYhB,iBAAZgB;IAC9B,IAA2BjB,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC;QACCR,WAAWZ,yCAETe,UAAUM,OAAO,2CACjBT;QAEFC,OAAOA;qBAEP,oBAACP,wDACKS;QACJO,WAAU;QACVC,YAAYZ;QACZa,MAAK;QACLP,QAAQb,aAAaa,QAAQF,UAAUE,MAAM;QAC7CC,SAASd,aAAac,SAASH,UAAUG,OAAO;uBAElD,oBAACO;QACCb,WAAWZ,kDAETmB,UAAUhB,SAASuB,OAAO,IAAInB,eAAe,CAACY,MAAM;OAGrDL,yBAEH,oBAACT;QAAasB,SAASX;QAAcY,MAAK;;AAGhD,EAAE"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <Headline className={styles['SegmentedControlOption__content']} level=\"2\" weight=\"2\">\n        {children}\n      </Headline>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useFocusVisible","callMultiple","FocusVisible","Headline","VisuallyHidden","SegmentedControlOption","getRef","className","style","children","restProps","focusVisible","onBlur","onFocus","label","checked","Component","getRootRef","type","level","weight","visible","mode"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AAOrE;;CAEC,GACD,OAAO,IAAMC,yBAAyB;QACpCC,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0CT,mBAAAA,mBAAlCW,eAAkCX,iBAAlCW,cAAcC,SAAoBZ,iBAApBY,QAAQC,UAAYb,iBAAZa;IAE9B,qBACE,oBAACC;QACCP,WAAWR,yCAETW,UAAUK,OAAO,2CACjBR;QAEFC,OAAOA;qBAEP,oBAACJ,wDACKM;QACJM,WAAU;QACVC,YAAYX;QACZY,MAAK;QACLN,QAAQX,aAAaW,QAAQF,UAAUE,MAAM;QAC7CC,SAASZ,aAAaY,SAASH,UAAUG,OAAO;uBAElD,oBAACV;QAASI,SAAS;QAA6CY,OAAM;QAAIC,QAAO;OAC9EX,yBAEH,oBAACP;QAAamB,SAASV;QAAcW,MAAK;;AAGhD,EAAE"}

package/dist/components/SelectTypography/SelectTypography.d.ts

@@ -7,4 +7,4 @@ export interface SelectTypographyProps extends React.HTMLAttributes<HTMLSpanElem
 /**
  * @private
  */
-export declare const SelectTypography: ({ selectType, children, className, ...restProps }: SelectTypographyProps) => React.JSX.Element;
+export declare const SelectTypography: ({ selectType, children, ...restProps }: SelectTypographyProps) => React.JSX.Element;