@vkontakte/vkui 8.1.2 → 8.2.0

package/dist/components/DateRangeInput/DateRangeInput.js

@@ -8,10 +8,10 @@ import { useDateInput } from "../../hooks/useDateInput.js";
 import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useGlobalEscKeyDown } from "../../hooks/useGlobalEscKeyDown.js";
+import { useLocale } from "../../hooks/useLocale.js";
 import { dateFormatter, isMatch, parse } from "../../lib/date.js";
 import { cacheDateTimeFormat } from "../../lib/intlCache.js";
 import { CalendarRange } from "../CalendarRange/CalendarRange.js";
-import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { FocusTrap } from "../FocusTrap/FocusTrap.js";
 import { FormField } from "../FormField/FormField.js";
 import { IconButton } from "../IconButton/IconButton.js";
@@ -182,7 +182,7 @@ const getInternalValue = (value)=>{
     // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался
     // на ней, пока помещается.
     const [calendarPlacement, setCalendarPlacement] = React.useState(calendarPlacementProp);
-    const { locale } = useConfigProvider();
+    const locale = useLocale();
     const currentDateLabel = React.useMemo(()=>{
         if (!value) {
             return null;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["'use client';\n\nimport * 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 { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { dateFormatter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { cacheDateTimeFormat } from '../../lib/intlCache';\nimport type { HasRootRef } from '../../types';\nimport {\n  CalendarRange,\n  type CalendarRangeProps,\n  type CalendarRangeTestsProps,\n  type DateRangeType,\n} from '../CalendarRange/CalendarRange';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { NumberInputLike } from '../NumberInputLike/NumberInputLike';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst labelDateTimeFormatOptions = {\n  weekday: 'long',\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n} as const;\n\nconst labelDateTimeFormat = /*#__PURE__*/ cacheDateTimeFormat();\n\nconst densityClassNames = {\n  none: dateInputStyles.densityNone,\n  compact: dateInputStyles.densityCompact,\n};\n\ntype DateTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для поля ввода дня.\n   */\n  day?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода месяца.\n   */\n  month?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода года.\n   */\n  year?: string | undefined;\n};\n\nexport type DateRangeInputTestsProps = {\n  /**\n   * Передает атрибуты `data-testid` для полей ввода начальной даты.\n   */\n  startDateTestsProps?: DateTestsProps | undefined;\n  /**\n   * Передает атрибуты `data-testid` для полей ввода конечной даты.\n   */\n  endDateTestsProps?: DateTestsProps | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки показа календаря.\n   */\n  showCalendarButtonTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки даты.\n   */\n  clearButtonTestId?: string | undefined;\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'value'\n      | 'defaultValue'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'renderDayContent'\n    >,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'>,\n    DateRangeInputTestsProps {\n  /**\n   * Обработчик изменения выбранного промежутка.\n   */\n  onChange?: ((value: DateRangeType | null) => void) | undefined;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в календаре.\n   */\n  calendarTestsProps?: CalendarRangeTestsProps | undefined;\n  /**\n   * Расположение календаря относительно поля ввода.\n   */\n  calendarPlacement?: PlacementWithAuto | undefined;\n  /**\n   * Автоматически закрывать календарь при изменениях.\n   */\n  closeOnChange?: boolean | undefined;\n  /**\n   * Обработчик изменения состояния открытия календаря.\n   */\n  onCalendarOpenChanged?: ((opened: boolean) => void) | undefined;\n  /**\n   * Label для календаря.\n   */\n  calendarLabel?: string | undefined;\n  /**\n   * Label для кнопки очистки. Делает доступным для ассистивных технологий.\n   */\n  clearFieldLabel?: string | undefined;\n  /**\n   * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.\n   */\n  showCalendarLabel?: string | undefined;\n  /**\n   * Label для ввода дня начальной даты. Делает доступным для ассистивных технологий.\n   */\n  changeStartDayLabel?: string | undefined;\n  /**\n   * Label для ввода месяца начальной даты. Делает доступным для ассистивных технологий.\n   */\n  changeStartMonthLabel?: string | undefined;\n  /**\n   * Label для ввода года начальной даты. Делает доступным для ассистивных технологий.\n   */\n  changeStartYearLabel?: string | undefined;\n  /**\n   * Label для ввода дня конечной даты. Делает доступным для ассистивных технологий.\n   */\n  changeEndDayLabel?: string | undefined;\n  /**\n   * Label для ввода месяца конечной даты. Делает доступным для ассистивных технологий.\n   */\n  changeEndMonthLabel?: string | undefined;\n  /**\n   * Label для ввода года конечной даты. Делает доступным для ассистивных технологий.\n   */\n  changeEndYearLabel?: string | undefined;\n  /**\n   * Отключение открытия календаря.\n   */\n  disableCalendar?: boolean | undefined;\n  /**\n   * Позволяет отключить захват фокуса при появлении календаря.\n   */\n  disableFocusTrap?: boolean | undefined;\n  /**\n   * Управление поведением возврата фокуса при закрытии всплывающего окна.\n   * @default true\n   */\n  restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;\n  /**\n   * @deprecated Since 8.0.0. Будет удалено в 9.0.0.\n   *\n   * Включает режим в котором DateRangeInput доступен\n   * для ассистивных технологий.\n   * В этом режиме:\n   * - календарь больше не открывает при фокусе на DateRangeInput;\n   * - иконка календаря видна всегда, чтобы пользователи\n   * ассистивных технологий могли открыть календарь по клику на иконку;\n   * - календарь при открытии получает фокус, клавиатурный\n   * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.\n   */\n  accessible?: boolean /* TODO [>=v9] удалить свойство */ | undefined;\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://vkui.io/components/date-range-input\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  'value': valueProp,\n  defaultValue,\n  onChange,\n  'calendarPlacement': calendarPlacementProp = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  disableFocusTrap,\n  restoreFocus,\n  calendarLabel = 'Календарь',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Месяц',\n  changeYearLabel = 'Год',\n  changeStartDayLabel = 'День начала',\n  changeStartMonthLabel = 'Месяц начала',\n  changeStartYearLabel = 'Год начала',\n  changeEndDayLabel = 'День окончания',\n  changeEndMonthLabel = 'Месяц окончания',\n  changeEndYearLabel = 'Год окончания',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  'aria-label': ariaLabel = '',\n  prevMonthIcon,\n  nextMonthIcon,\n  onCalendarOpenChanged,\n  renderDayContent,\n  calendarTestsProps,\n  startDateTestsProps,\n  endDateTestsProps,\n  clearButtonTestId,\n  showCalendarButtonTestId,\n  id,\n  accessible = true,\n  readOnly,\n  'disableCalendar': disableCalendarProp = false,\n  before,\n  ...props\n}: DateRangeInputProps): React.ReactNode => {\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  const focusTrapRootRef = React.useRef<HTMLDivElement | null>(null);\n\n  const disableCalendar = readOnly ? true : disableCalendarProp;\n\n  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null>({\n    value: valueProp,\n    defaultValue: defaultValue as DateRangeType | null,\n    onChange,\n  });\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 && end > start) {\n        updateValue([start, end]);\n      }\n    },\n    [updateValue, 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 onClear = React.useCallback(() => updateValue(null), [updateValue]);\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    toggleCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled: disabled || readOnly,\n    elementsConfig,\n    onClear,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n    onCalendarOpenChanged,\n    accessible,\n  });\n\n  const { density = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue: DateRangeType) => {\n      updateValue(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [updateValue, closeOnChange, value, removeFocusFromField],\n  );\n\n  // при переключении месяцев высота календаря может меняться,\n  // чтобы календарь не прыгал при переключении месяцев каждый раз на\n  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n  // на ней, пока помещается.\n  const [calendarPlacement, setCalendarPlacement] =\n    React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n  const { locale } = useConfigProvider();\n  const currentDateLabel = React.useMemo(() => {\n    if (!value) {\n      return null;\n    }\n    const [startDate, endDate] = value;\n    if (!startDate || !endDate) {\n      return null;\n    }\n    return [\n      labelDateTimeFormat(locale, labelDateTimeFormatOptions).format(startDate),\n      labelDateTimeFormat(locale, labelDateTimeFormatOptions).format(endDate),\n    ].join(' - ');\n  }, [locale, value]);\n\n  const currentDateLabelId = React.useId();\n  const ariaLabelId = React.useId();\n\n  const showCalendarOnInputAreaClick = React.useCallback(() => {\n    handleFieldEnter();\n    if (accessible) {\n      openCalendar();\n    }\n  }, [handleFieldEnter, openCalendar, accessible]);\n\n  const showCalendarButton = !disableCalendar && (accessible || (!accessible && !value));\n  const showClearButton = value && !readOnly;\n\n  useGlobalEscKeyDown(open && !disableCalendar, closeCalendar, {\n    capture: false,\n  });\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        density !== 'regular' && densityClassNames[density],\n        !!before && dateInputStyles.hasBefore,\n        (showCalendarButton || showClearButton) && dateInputStyles.hasAfter,\n        className,\n      )}\n      getRootRef={handleRootRef}\n      role=\"group\"\n      aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}\n      before={before}\n      after={\n        <>\n          {showCalendarButton ? (\n            <IconButton\n              hoverMode=\"opacity\"\n              label={showCalendarLabel}\n              onClick={toggleCalendar}\n              data-testid={showCalendarButtonTestId}\n            >\n              <Icon20CalendarOutline />\n            </IconButton>\n          ) : null}\n          {showClearButton ? (\n            <IconButton\n              hoverMode=\"opacity\"\n              label={clearFieldLabel}\n              onClick={clear}\n              data-testid={clearButtonTestId}\n            >\n              <Icon16Clear />\n            </IconButton>\n          ) : null}\n        </>\n      }\n      disabled={disabled}\n      {...props}\n    >\n      <div className={dateInputStyles.wrapper}>\n        {ariaLabel && <VisuallyHidden id={ariaLabelId}>{ariaLabel}</VisuallyHidden>}\n        {currentDateLabel && (\n          <VisuallyHidden id={currentDateLabelId}>{currentDateLabel}</VisuallyHidden>\n        )}\n        <VisuallyHidden\n          id={id}\n          Component=\"input\"\n          readOnly\n          aria-hidden\n          name={name}\n          tabIndex={readOnly ? 0 : -1}\n          value={\n            value\n              ? `${value[0] ? dateFormatter.format(value[0]) : ''} - ${\n                  value[1] ? dateFormatter.format(value[1]) : ''\n                }`\n              : ''\n          }\n          onFocus={handleFieldEnter}\n        />\n        <Text\n          className={dateInputStyles.input}\n          onClick={showCalendarOnInputAreaClick}\n          normalize={false}\n        >\n          <NumberInputLike\n            value={internalValue[0]}\n            minValue={1}\n            maxValue={31}\n            onKeyDown={readOnly ? undefined : handleKeyDown}\n            length={2}\n            getRootRef={daysStartRef}\n            index={0}\n            readOnly={readOnly}\n            onElementSelect={setFocusedElement}\n            label={changeStartDayLabel}\n            data-testid={startDateTestsProps?.day}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[1]}\n            minValue={1}\n            maxValue={12}\n            onKeyDown={handleKeyDown}\n            length={2}\n            getRootRef={monthsStartRef}\n            index={1}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeStartMonthLabel}\n            data-testid={startDateTestsProps?.month}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[2]}\n            minValue={1}\n            maxValue={275750}\n            onKeyDown={handleKeyDown}\n            length={4}\n            getRootRef={yearsStartRef}\n            index={2}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeStartYearLabel}\n            data-testid={startDateTestsProps?.year}\n          />\n          <InputLikeDivider>{' — '}</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[3]}\n            minValue={1}\n            maxValue={31}\n            onKeyDown={handleKeyDown}\n            length={2}\n            getRootRef={daysEndRef}\n            index={3}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeEndDayLabel}\n            data-testid={endDateTestsProps?.day}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[4]}\n            minValue={1}\n            maxValue={12}\n            onKeyDown={handleKeyDown}\n            length={2}\n            getRootRef={monthsEndRef}\n            index={4}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeEndMonthLabel}\n            data-testid={endDateTestsProps?.month}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[5]}\n            minValue={1}\n            maxValue={275750}\n            onKeyDown={handleKeyDown}\n            length={4}\n            getRootRef={yearsEndRef}\n            index={5}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeEndYearLabel}\n            data-testid={endDateTestsProps?.year}\n          />\n        </Text>\n      </div>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          onPlacementChange={setCalendarPlacement}\n        >\n          <FocusTrap\n            rootRef={focusTrapRootRef}\n            disabled={disableFocusTrap ?? !accessible}\n            restoreFocus={restoreFocus ?? Boolean(accessible)}\n          >\n            <div ref={focusTrapRootRef}>\n              <CalendarRange\n                value={value}\n                role=\"dialog\"\n                onChange={onCalendarChange}\n                aria-label={calendarLabel}\n                disablePast={disablePast}\n                disableFuture={disableFuture}\n                shouldDisableDate={shouldDisableDate}\n                getRootRef={calendarRef}\n                disablePickers={disablePickers}\n                prevMonthLabel={prevMonthLabel}\n                nextMonthLabel={nextMonthLabel}\n                changeMonthLabel={changeMonthLabel}\n                changeYearLabel={changeYearLabel}\n                prevMonthIcon={prevMonthIcon}\n                nextMonthIcon={nextMonthIcon}\n                renderDayContent={renderDayContent}\n                {...calendarTestsProps}\n              />\n            </div>\n          </FocusTrap>\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useCustomEnsuredControl","useExternRef","useGlobalEscKeyDown","dateFormatter","isMatch","parse","cacheDateTimeFormat","CalendarRange","useConfigProvider","FocusTrap","FormField","IconButton","InputLikeDivider","NumberInputLike","Popper","Text","VisuallyHidden","labelDateTimeFormatOptions","weekday","year","month","day","labelDateTimeFormat","densityClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","valueProp","defaultValue","onChange","calendarPlacementProp","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","disableFocusTrap","restoreFocus","calendarLabel","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeStartDayLabel","changeStartMonthLabel","changeStartYearLabel","changeEndDayLabel","changeEndMonthLabel","changeEndYearLabel","clearFieldLabel","showCalendarLabel","ariaLabel","prevMonthIcon","nextMonthIcon","onCalendarOpenChanged","renderDayContent","calendarTestsProps","startDateTestsProps","endDateTestsProps","clearButtonTestId","showCalendarButtonTestId","id","accessible","readOnly","disableCalendarProp","before","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","focusTrapRootRef","disableCalendar","updateValue","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","onClear","rootRef","calendarRef","open","openCalendar","closeCalendar","toggleCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","density","handleRootRef","onCalendarChange","calendarPlacement","setCalendarPlacement","useState","locale","currentDateLabel","startDate","endDate","format","join","currentDateLabelId","useId","ariaLabelId","showCalendarOnInputAreaClick","showCalendarButton","showClearButton","capture","role","aria-labelledby","after","hoverMode","label","onClick","data-testid","div","Component","aria-hidden","tabIndex","onFocus","normalize","minValue","maxValue","onKeyDown","undefined","onElementSelect","targetRef","offsetByMainAxis","placement","onPlacementChange","Boolean","ref","aria-label"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["'use client';\n\nimport * 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 { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useLocale } from '../../hooks/useLocale';\nimport { dateFormatter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { cacheDateTimeFormat } from '../../lib/intlCache';\nimport type { HasRootRef } from '../../types';\nimport {\n  CalendarRange,\n  type CalendarRangeProps,\n  type CalendarRangeTestsProps,\n  type DateRangeType,\n} from '../CalendarRange/CalendarRange';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { NumberInputLike } from '../NumberInputLike/NumberInputLike';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst labelDateTimeFormatOptions = {\n  weekday: 'long',\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n} as const;\n\nconst labelDateTimeFormat = /*#__PURE__*/ cacheDateTimeFormat();\n\nconst densityClassNames = {\n  none: dateInputStyles.densityNone,\n  compact: dateInputStyles.densityCompact,\n};\n\ntype DateTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для поля ввода дня.\n   */\n  day?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода месяца.\n   */\n  month?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода года.\n   */\n  year?: string | undefined;\n};\n\nexport type DateRangeInputTestsProps = {\n  /**\n   * Передает атрибуты `data-testid` для полей ввода начальной даты.\n   */\n  startDateTestsProps?: DateTestsProps | undefined;\n  /**\n   * Передает атрибуты `data-testid` для полей ввода конечной даты.\n   */\n  endDateTestsProps?: DateTestsProps | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки показа календаря.\n   */\n  showCalendarButtonTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки даты.\n   */\n  clearButtonTestId?: string | undefined;\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'value'\n      | 'defaultValue'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'renderDayContent'\n    >,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'>,\n    DateRangeInputTestsProps {\n  /**\n   * Обработчик изменения выбранного промежутка.\n   */\n  onChange?: ((value: DateRangeType | null) => void) | undefined;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в календаре.\n   */\n  calendarTestsProps?: CalendarRangeTestsProps | undefined;\n  /**\n   * Расположение календаря относительно поля ввода.\n   */\n  calendarPlacement?: PlacementWithAuto | undefined;\n  /**\n   * Автоматически закрывать календарь при изменениях.\n   */\n  closeOnChange?: boolean | undefined;\n  /**\n   * Обработчик изменения состояния открытия календаря.\n   */\n  onCalendarOpenChanged?: ((opened: boolean) => void) | undefined;\n  /**\n   * Label для календаря.\n   */\n  calendarLabel?: string | undefined;\n  /**\n   * Label для кнопки очистки. Делает доступным для ассистивных технологий.\n   */\n  clearFieldLabel?: string | undefined;\n  /**\n   * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.\n   */\n  showCalendarLabel?: string | undefined;\n  /**\n   * Label для ввода дня начальной даты. Делает доступным для ассистивных технологий.\n   */\n  changeStartDayLabel?: string | undefined;\n  /**\n   * Label для ввода месяца начальной даты. Делает доступным для ассистивных технологий.\n   */\n  changeStartMonthLabel?: string | undefined;\n  /**\n   * Label для ввода года начальной даты. Делает доступным для ассистивных технологий.\n   */\n  changeStartYearLabel?: string | undefined;\n  /**\n   * Label для ввода дня конечной даты. Делает доступным для ассистивных технологий.\n   */\n  changeEndDayLabel?: string | undefined;\n  /**\n   * Label для ввода месяца конечной даты. Делает доступным для ассистивных технологий.\n   */\n  changeEndMonthLabel?: string | undefined;\n  /**\n   * Label для ввода года конечной даты. Делает доступным для ассистивных технологий.\n   */\n  changeEndYearLabel?: string | undefined;\n  /**\n   * Отключение открытия календаря.\n   */\n  disableCalendar?: boolean | undefined;\n  /**\n   * Позволяет отключить захват фокуса при появлении календаря.\n   */\n  disableFocusTrap?: boolean | undefined;\n  /**\n   * Управление поведением возврата фокуса при закрытии всплывающего окна.\n   * @default true\n   */\n  restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;\n  /**\n   * @deprecated Since 8.0.0. Будет удалено в 9.0.0.\n   *\n   * Включает режим в котором DateRangeInput доступен\n   * для ассистивных технологий.\n   * В этом режиме:\n   * - календарь больше не открывает при фокусе на DateRangeInput;\n   * - иконка календаря видна всегда, чтобы пользователи\n   * ассистивных технологий могли открыть календарь по клику на иконку;\n   * - календарь при открытии получает фокус, клавиатурный\n   * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.\n   */\n  accessible?: boolean /* TODO [>=v9] удалить свойство */ | undefined;\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://vkui.io/components/date-range-input\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  'value': valueProp,\n  defaultValue,\n  onChange,\n  'calendarPlacement': calendarPlacementProp = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  disableFocusTrap,\n  restoreFocus,\n  calendarLabel = 'Календарь',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Месяц',\n  changeYearLabel = 'Год',\n  changeStartDayLabel = 'День начала',\n  changeStartMonthLabel = 'Месяц начала',\n  changeStartYearLabel = 'Год начала',\n  changeEndDayLabel = 'День окончания',\n  changeEndMonthLabel = 'Месяц окончания',\n  changeEndYearLabel = 'Год окончания',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  'aria-label': ariaLabel = '',\n  prevMonthIcon,\n  nextMonthIcon,\n  onCalendarOpenChanged,\n  renderDayContent,\n  calendarTestsProps,\n  startDateTestsProps,\n  endDateTestsProps,\n  clearButtonTestId,\n  showCalendarButtonTestId,\n  id,\n  accessible = true,\n  readOnly,\n  'disableCalendar': disableCalendarProp = false,\n  before,\n  ...props\n}: DateRangeInputProps): React.ReactNode => {\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  const focusTrapRootRef = React.useRef<HTMLDivElement | null>(null);\n\n  const disableCalendar = readOnly ? true : disableCalendarProp;\n\n  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null>({\n    value: valueProp,\n    defaultValue: defaultValue as DateRangeType | null,\n    onChange,\n  });\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 && end > start) {\n        updateValue([start, end]);\n      }\n    },\n    [updateValue, 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 onClear = React.useCallback(() => updateValue(null), [updateValue]);\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    toggleCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled: disabled || readOnly,\n    elementsConfig,\n    onClear,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n    onCalendarOpenChanged,\n    accessible,\n  });\n\n  const { density = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue: DateRangeType) => {\n      updateValue(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [updateValue, closeOnChange, value, removeFocusFromField],\n  );\n\n  // при переключении месяцев высота календаря может меняться,\n  // чтобы календарь не прыгал при переключении месяцев каждый раз на\n  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n  // на ней, пока помещается.\n  const [calendarPlacement, setCalendarPlacement] =\n    React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n  const locale = useLocale();\n  const currentDateLabel = React.useMemo(() => {\n    if (!value) {\n      return null;\n    }\n    const [startDate, endDate] = value;\n    if (!startDate || !endDate) {\n      return null;\n    }\n    return [\n      labelDateTimeFormat(locale, labelDateTimeFormatOptions).format(startDate),\n      labelDateTimeFormat(locale, labelDateTimeFormatOptions).format(endDate),\n    ].join(' - ');\n  }, [locale, value]);\n\n  const currentDateLabelId = React.useId();\n  const ariaLabelId = React.useId();\n\n  const showCalendarOnInputAreaClick = React.useCallback(() => {\n    handleFieldEnter();\n    if (accessible) {\n      openCalendar();\n    }\n  }, [handleFieldEnter, openCalendar, accessible]);\n\n  const showCalendarButton = !disableCalendar && (accessible || (!accessible && !value));\n  const showClearButton = value && !readOnly;\n\n  useGlobalEscKeyDown(open && !disableCalendar, closeCalendar, {\n    capture: false,\n  });\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        density !== 'regular' && densityClassNames[density],\n        !!before && dateInputStyles.hasBefore,\n        (showCalendarButton || showClearButton) && dateInputStyles.hasAfter,\n        className,\n      )}\n      getRootRef={handleRootRef}\n      role=\"group\"\n      aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}\n      before={before}\n      after={\n        <>\n          {showCalendarButton ? (\n            <IconButton\n              hoverMode=\"opacity\"\n              label={showCalendarLabel}\n              onClick={toggleCalendar}\n              data-testid={showCalendarButtonTestId}\n            >\n              <Icon20CalendarOutline />\n            </IconButton>\n          ) : null}\n          {showClearButton ? (\n            <IconButton\n              hoverMode=\"opacity\"\n              label={clearFieldLabel}\n              onClick={clear}\n              data-testid={clearButtonTestId}\n            >\n              <Icon16Clear />\n            </IconButton>\n          ) : null}\n        </>\n      }\n      disabled={disabled}\n      {...props}\n    >\n      <div className={dateInputStyles.wrapper}>\n        {ariaLabel && <VisuallyHidden id={ariaLabelId}>{ariaLabel}</VisuallyHidden>}\n        {currentDateLabel && (\n          <VisuallyHidden id={currentDateLabelId}>{currentDateLabel}</VisuallyHidden>\n        )}\n        <VisuallyHidden\n          id={id}\n          Component=\"input\"\n          readOnly\n          aria-hidden\n          name={name}\n          tabIndex={readOnly ? 0 : -1}\n          value={\n            value\n              ? `${value[0] ? dateFormatter.format(value[0]) : ''} - ${\n                  value[1] ? dateFormatter.format(value[1]) : ''\n                }`\n              : ''\n          }\n          onFocus={handleFieldEnter}\n        />\n        <Text\n          className={dateInputStyles.input}\n          onClick={showCalendarOnInputAreaClick}\n          normalize={false}\n        >\n          <NumberInputLike\n            value={internalValue[0]}\n            minValue={1}\n            maxValue={31}\n            onKeyDown={readOnly ? undefined : handleKeyDown}\n            length={2}\n            getRootRef={daysStartRef}\n            index={0}\n            readOnly={readOnly}\n            onElementSelect={setFocusedElement}\n            label={changeStartDayLabel}\n            data-testid={startDateTestsProps?.day}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[1]}\n            minValue={1}\n            maxValue={12}\n            onKeyDown={handleKeyDown}\n            length={2}\n            getRootRef={monthsStartRef}\n            index={1}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeStartMonthLabel}\n            data-testid={startDateTestsProps?.month}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[2]}\n            minValue={1}\n            maxValue={275750}\n            onKeyDown={handleKeyDown}\n            length={4}\n            getRootRef={yearsStartRef}\n            index={2}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeStartYearLabel}\n            data-testid={startDateTestsProps?.year}\n          />\n          <InputLikeDivider>{' — '}</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[3]}\n            minValue={1}\n            maxValue={31}\n            onKeyDown={handleKeyDown}\n            length={2}\n            getRootRef={daysEndRef}\n            index={3}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeEndDayLabel}\n            data-testid={endDateTestsProps?.day}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[4]}\n            minValue={1}\n            maxValue={12}\n            onKeyDown={handleKeyDown}\n            length={2}\n            getRootRef={monthsEndRef}\n            index={4}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeEndMonthLabel}\n            data-testid={endDateTestsProps?.month}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[5]}\n            minValue={1}\n            maxValue={275750}\n            onKeyDown={handleKeyDown}\n            length={4}\n            getRootRef={yearsEndRef}\n            index={5}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeEndYearLabel}\n            data-testid={endDateTestsProps?.year}\n          />\n        </Text>\n      </div>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          onPlacementChange={setCalendarPlacement}\n        >\n          <FocusTrap\n            rootRef={focusTrapRootRef}\n            disabled={disableFocusTrap ?? !accessible}\n            restoreFocus={restoreFocus ?? Boolean(accessible)}\n          >\n            <div ref={focusTrapRootRef}>\n              <CalendarRange\n                value={value}\n                role=\"dialog\"\n                onChange={onCalendarChange}\n                aria-label={calendarLabel}\n                disablePast={disablePast}\n                disableFuture={disableFuture}\n                shouldDisableDate={shouldDisableDate}\n                getRootRef={calendarRef}\n                disablePickers={disablePickers}\n                prevMonthLabel={prevMonthLabel}\n                nextMonthLabel={nextMonthLabel}\n                changeMonthLabel={changeMonthLabel}\n                changeYearLabel={changeYearLabel}\n                prevMonthIcon={prevMonthIcon}\n                nextMonthIcon={nextMonthIcon}\n                renderDayContent={renderDayContent}\n                {...calendarTestsProps}\n              />\n            </div>\n          </FocusTrap>\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useCustomEnsuredControl","useExternRef","useGlobalEscKeyDown","useLocale","dateFormatter","isMatch","parse","cacheDateTimeFormat","CalendarRange","FocusTrap","FormField","IconButton","InputLikeDivider","NumberInputLike","Popper","Text","VisuallyHidden","labelDateTimeFormatOptions","weekday","year","month","day","labelDateTimeFormat","densityClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","valueProp","defaultValue","onChange","calendarPlacementProp","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","disableFocusTrap","restoreFocus","calendarLabel","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeStartDayLabel","changeStartMonthLabel","changeStartYearLabel","changeEndDayLabel","changeEndMonthLabel","changeEndYearLabel","clearFieldLabel","showCalendarLabel","ariaLabel","prevMonthIcon","nextMonthIcon","onCalendarOpenChanged","renderDayContent","calendarTestsProps","startDateTestsProps","endDateTestsProps","clearButtonTestId","showCalendarButtonTestId","id","accessible","readOnly","disableCalendarProp","before","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","focusTrapRootRef","disableCalendar","updateValue","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","onClear","rootRef","calendarRef","open","openCalendar","closeCalendar","toggleCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","density","handleRootRef","onCalendarChange","calendarPlacement","setCalendarPlacement","useState","locale","currentDateLabel","startDate","endDate","format","join","currentDateLabelId","useId","ariaLabelId","showCalendarOnInputAreaClick","showCalendarButton","showClearButton","capture","role","aria-labelledby","after","hoverMode","label","onClick","data-testid","div","Component","aria-hidden","tabIndex","onFocus","normalize","minValue","maxValue","onKeyDown","undefined","onElementSelect","targetRef","offsetByMainAxis","placement","onPlacementChange","Boolean","ref","aria-label"],"mappings":"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"}

package/dist/components/Epic/ScrollSaver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollSaver.d.ts","sourceRoot":"","sources":["../../../src/components/Epic/ScrollSaver.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,GAAG,CAAC;CACjD;AAED,eAAO,MAAM,WAAW,GAAI,0CAIzB,gBAAgB,KAAG,KAAK,CAAC,SAS3B,CAAC"}
+{"version":3,"file":"ScrollSaver.d.ts","sourceRoot":"","sources":["../../../src/components/Epic/ScrollSaver.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,GAAG,CAAC;CACjD;AAED,eAAO,MAAM,WAAW,GAAI,0CAIzB,gBAAgB,KAAG,KAAK,CAAC,SAU3B,CAAC"}

package/dist/components/Epic/ScrollSaver.js

@@ -10,6 +10,7 @@ export const ScrollSaver = ({ children, initialScroll, saveScroll })=>{
             scrollTo(0, initialScroll);
         }
         return ()=>saveScroll(getScroll().y);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return /*#__PURE__*/ _jsx(React.Fragment, {
         children: children

package/dist/components/Epic/ScrollSaver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasChildren } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\n\nexport interface ScrollSaverProps extends HasChildren {\n  initialScroll?: number | undefined;\n  saveScroll: (this: void, scroll: number) => any;\n}\n\nexport const ScrollSaver = ({\n  children,\n  initialScroll,\n  saveScroll,\n}: ScrollSaverProps): React.ReactNode => {\n  const { getScroll, scrollTo } = React.useContext(ScrollContext);\n  useIsomorphicLayoutEffect(() => {\n    if (typeof initialScroll === 'number') {\n      scrollTo(0, initialScroll);\n    }\n    return () => saveScroll(getScroll().y);\n  }, []);\n  return <React.Fragment>{children}</React.Fragment>;\n};\n"],"names":["React","useIsomorphicLayoutEffect","ScrollContext","ScrollSaver","children","initialScroll","saveScroll","getScroll","scrollTo","useContext","y","Fragment"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,aAAa,QAAQ,8BAA2B;AAOzD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,QAAQ,EACRC,aAAa,EACbC,UAAU,EACO;IACjB,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGR,MAAMS,UAAU,CAACP;IACjDD,0BAA0B;QACxB,IAAI,OAAOI,kBAAkB,UAAU;YACrCG,SAAS,GAAGH;QACd;QACA,OAAO,IAAMC,WAAWC,YAAYG,CAAC;IACvC,GAAG,EAAE;IACL,qBAAO,KAACV,MAAMW,QAAQ;kBAAEP;;AAC1B,EAAE"}
+{"version":3,"sources":["../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasChildren } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\n\nexport interface ScrollSaverProps extends HasChildren {\n  initialScroll?: number | undefined;\n  saveScroll: (this: void, scroll: number) => any;\n}\n\nexport const ScrollSaver = ({\n  children,\n  initialScroll,\n  saveScroll,\n}: ScrollSaverProps): React.ReactNode => {\n  const { getScroll, scrollTo } = React.useContext(ScrollContext);\n  useIsomorphicLayoutEffect(() => {\n    if (typeof initialScroll === 'number') {\n      scrollTo(0, initialScroll);\n    }\n    return () => saveScroll(getScroll().y);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return <React.Fragment>{children}</React.Fragment>;\n};\n"],"names":["React","useIsomorphicLayoutEffect","ScrollContext","ScrollSaver","children","initialScroll","saveScroll","getScroll","scrollTo","useContext","y","Fragment"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,aAAa,QAAQ,8BAA2B;AAOzD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,QAAQ,EACRC,aAAa,EACbC,UAAU,EACO;IACjB,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGR,MAAMS,UAAU,CAACP;IACjDD,0BAA0B;QACxB,IAAI,OAAOI,kBAAkB,UAAU;YACrCG,SAAS,GAAGH;QACd;QACA,OAAO,IAAMC,WAAWC,YAAYG,CAAC;IACrC,uDAAuD;IACzD,GAAG,EAAE;IACL,qBAAO,KAACV,MAAMW,QAAQ;kBAAEP;;AAC1B,EAAE"}

package/dist/components/FixedLayout/ParentWidthWrapper.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { HasComponent } from '../../types';
+type ParentWidthWrapperProps = React.HTMLAttributes<HTMLElement> & HasComponent;
+export declare const ParentWidthWrapper: React.ForwardRefExoticComponent<React.PropsWithoutRef<ParentWidthWrapperProps> & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=ParentWidthWrapper.d.ts.map

package/dist/components/FixedLayout/ParentWidthWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParentWidthWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/FixedLayout/ParentWidthWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,KAAK,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC;AAEhF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,yBAAyB,CAC9D,KAAK,CAAC,eAAe,CAAC,uBAAuB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAgClF,CAAC"}

package/dist/components/FixedLayout/ParentWidthWrapper.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useResizeObserver } from "../../hooks/useResizeObserver.js";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
+import { setRef } from "../../lib/utils.js";
+export const ParentWidthWrapper = /*#__PURE__*/ React.forwardRef(({ Component = 'div', style, ...restProps }, forwardedRef)=>{
+    const rootRef = React.useRef(null);
+    const parentRef = React.useRef(null);
+    const [width, setWidth] = React.useState(undefined);
+    const handleRootRef = React.useCallback((node)=>{
+        setRef(node, forwardedRef);
+        setRef(node, rootRef);
+        setRef(node?.parentElement ?? null, parentRef);
+    }, [
+        forwardedRef
+    ]);
+    const doResize = React.useCallback(()=>{
+        if (!parentRef.current) {
+            setWidth(undefined);
+            return;
+        }
+        const parentWidth = parentRef.current.getBoundingClientRect().width;
+        setWidth(parentWidth ? `${parentWidth}px` : undefined);
+    }, []);
+    React.useEffect(doResize, [
+        doResize
+    ]);
+    useResizeObserver(parentRef, doResize);
+    return /*#__PURE__*/ _jsx(Component, {
+        ...restProps,
+        ref: handleRootRef,
+        style: {
+            width,
+            ...style
+        }
+    });
+});
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(ParentWidthWrapper, 'ParentWidthWrapper');
+}
+
+//# sourceMappingURL=ParentWidthWrapper.js.map

package/dist/components/FixedLayout/ParentWidthWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FixedLayout/ParentWidthWrapper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { setRef } from '../../lib/utils';\nimport type { HasComponent } from '../../types';\n\ntype ParentWidthWrapperProps = React.HTMLAttributes<HTMLElement> & HasComponent;\n\nexport const ParentWidthWrapper: React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<ParentWidthWrapperProps> & React.RefAttributes<HTMLElement>\n  // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\n> = React.forwardRef<HTMLElement, ParentWidthWrapperProps>(\n  ({ Component = 'div', style, ...restProps }, forwardedRef) => {\n    const rootRef = React.useRef<HTMLElement | null>(null);\n    const parentRef = React.useRef<HTMLElement | null>(null);\n    const [width, setWidth] = React.useState<string | undefined>(undefined);\n\n    const handleRootRef = React.useCallback(\n      (node: HTMLElement | null) => {\n        setRef(node, forwardedRef);\n        setRef(node, rootRef);\n        setRef(node?.parentElement ?? null, parentRef);\n      },\n      [forwardedRef],\n    );\n\n    const doResize = React.useCallback(() => {\n      if (!parentRef.current) {\n        setWidth(undefined);\n        return;\n      }\n\n      const parentWidth = parentRef.current.getBoundingClientRect().width;\n      setWidth(parentWidth ? `${parentWidth}px` : undefined);\n    }, []);\n\n    React.useEffect(doResize, [doResize]);\n    useResizeObserver(parentRef, doResize);\n\n    return <Component {...restProps} ref={handleRootRef} style={{ width, ...style }} />;\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ParentWidthWrapper, 'ParentWidthWrapper');\n}\n"],"names":["React","useResizeObserver","defineComponentDisplayNames","setRef","ParentWidthWrapper","forwardRef","Component","style","restProps","forwardedRef","rootRef","useRef","parentRef","width","setWidth","useState","undefined","handleRootRef","useCallback","node","parentElement","doResize","current","parentWidth","getBoundingClientRect","useEffect","ref","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,MAAM,QAAQ,qBAAkB;AAKzC,OAAO,MAAMC,mCAGTJ,MAAMK,UAAU,CAClB,CAAC,EAAEC,YAAY,KAAK,EAAEC,KAAK,EAAE,GAAGC,WAAW,EAAEC;IAC3C,MAAMC,UAAUV,MAAMW,MAAM,CAAqB;IACjD,MAAMC,YAAYZ,MAAMW,MAAM,CAAqB;IACnD,MAAM,CAACE,OAAOC,SAAS,GAAGd,MAAMe,QAAQ,CAAqBC;IAE7D,MAAMC,gBAAgBjB,MAAMkB,WAAW,CACrC,CAACC;QACChB,OAAOgB,MAAMV;QACbN,OAAOgB,MAAMT;QACbP,OAAOgB,MAAMC,iBAAiB,MAAMR;IACtC,GACA;QAACH;KAAa;IAGhB,MAAMY,WAAWrB,MAAMkB,WAAW,CAAC;QACjC,IAAI,CAACN,UAAUU,OAAO,EAAE;YACtBR,SAASE;YACT;QACF;QAEA,MAAMO,cAAcX,UAAUU,OAAO,CAACE,qBAAqB,GAAGX,KAAK;QACnEC,SAASS,cAAc,GAAGA,YAAY,EAAE,CAAC,GAAGP;IAC9C,GAAG,EAAE;IAELhB,MAAMyB,SAAS,CAACJ,UAAU;QAACA;KAAS;IACpCpB,kBAAkBW,WAAWS;IAE7B,qBAAO,KAACf;QAAW,GAAGE,SAAS;QAAEkB,KAAKT;QAAeV,OAAO;YAAEM;YAAO,GAAGN,KAAK;QAAC;;AAChF,GACA;AAEF,IAAIoB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC3B,4BAA4BE,oBAAoB;AAClD"}

package/dist/components/Flex/Flex.d.ts

@@ -1,10 +1,10 @@
 import { type GapsProp } from '../../lib/layouts';
-import type { LayoutProps } from '../../lib/layouts/types';
+import type { LayoutProps, MarginProp } from '../../lib/layouts/types';
 import type { RootComponentProps } from '../RootComponent/RootComponent';
 import { FlexItem, type FlexItemProps } from './FlexItem/FlexItem';
 export type { FlexItemProps };
 type FlexContentProps = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
-export interface FlexProps extends RootComponentProps<HTMLElement>, LayoutProps {
+export interface FlexProps extends RootComponentProps<HTMLElement>, Omit<LayoutProps, 'margin'> {
     /**
      * Направление осей, эквивалентно `flex-direction`.
      */
@@ -28,9 +28,12 @@ export interface FlexProps extends RootComponentProps<HTMLElement>, LayoutProps
      */
     justify?: FlexContentProps | undefined;
     /**
-     * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.
+     * Внешние отступы контейнера.
+     * Дополнительно поддерживаются специальные значения:
+     * `none` — отключает дополнительные отступы;
+     * `auto` — включает платформенные отступы вокруг контейнера.
      */
-    margin?: 'none' | 'auto' | undefined;
+    margin?: 'none' | 'auto' | MarginProp | undefined;
     /**
      * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.
      */

package/dist/components/Flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,QAAQ,EAGd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGnE,YAAY,EAAE,aAAa,EAAE,CAAC;AAwB9B,KAAK,gBAAgB,GACjB,OAAO,GACP,KAAK,GACL,QAAQ,GACR,cAAc,GACd,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAU,SAAQ,kBAAkB,CAAC,WAAW,CAAC,EAAE,WAAW;IAC7E;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzC;;;;OAIG;IACH,GAAG,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;CACvD;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC;;;OAGG;IACH,IAAI,EAAE,OAAO,QAAQ,CAAC;CAgCvB,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,QAAQ,EAGd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGnE,YAAY,EAAE,aAAa,EAAE,CAAC;AAwB9B,KAAK,gBAAgB,GACjB,OAAO,GACP,KAAK,GACL,QAAQ,GACR,cAAc,GACd,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAU,SAAQ,kBAAkB,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IAC7F;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzC;;;;OAIG;IACH,GAAG,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACvC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;CACvD;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC;;;OAGG;IACH,IAAI,EAAE,OAAO,QAAQ,CAAC;CAkCvB,CAAC"}

package/dist/components/Flex/Flex.js

@@ -26,9 +26,12 @@ const displayClassNames = {
  * @see https://vkui.io/components/flex
  */ export const Flex = ({ gap = 0, align, justify, margin = 'none', noWrap = false, direction = 'row', reverse = false, display = 'flex', ...restProps })=>{
     const [rowGap, columnGap] = calculateGap(gap);
-    const resolvedProps = resolveLayoutProps(restProps);
+    const resolvedProps = resolveLayoutProps(margin === 'none' || margin === 'auto' ? restProps : {
+        ...restProps,
+        margin
+    });
     return /*#__PURE__*/ _jsx(RootComponent, {
-        baseClassName: classNames("vkuiFlex__host", !noWrap && "vkuiFlex__wrap", reverse && "vkuiFlex__reverse", direction !== 'row' && "vkuiFlex__directionColumn", margin !== 'none' && "vkuiFlex__marginAuto", align && alignClassNames[align], justify && justifyClassNames[justify], getGapsPresets(rowGap, columnGap), display !== 'flex' && displayClassNames[display]),
+        baseClassName: classNames("vkuiFlex__host", !noWrap && "vkuiFlex__wrap", reverse && "vkuiFlex__reverse", direction !== 'row' && "vkuiFlex__directionColumn", margin === 'auto' && "vkuiFlex__marginAuto", align && alignClassNames[align], justify && justifyClassNames[justify], getGapsPresets(rowGap, columnGap), display !== 'flex' && displayClassNames[display]),
         baseStyle: getGapsByUser(rowGap, columnGap),
         ...resolvedProps
     });

package/dist/components/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapProp,\n  type GapsProp,\n  resolveLayoutProps,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { LayoutProps } from '../../lib/layouts/types';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport { FlexItem, type FlexItemProps } from './FlexItem/FlexItem';\nimport styles from './Flex.module.css';\n\nexport type { FlexItemProps };\n\nconst justifyClassNames = {\n  'start': styles.justifyStart,\n  'end': styles.justifyEnd,\n  'center': styles.justifyCenter,\n  'space-around': styles.justifySpaceAround,\n  'space-between': styles.justifySpaceBetween,\n  'space-evenly': styles.justifySpaceEvenly,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nconst displayClassNames = {\n  'none': styles.displayNone,\n  'inline-flex': styles.displayInlineFlex,\n};\n\ntype FlexContentProps =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\nexport interface FlexProps extends RootComponentProps<HTMLElement>, LayoutProps {\n  /**\n   * Направление осей, эквивалентно `flex-direction`.\n   */\n  direction?: 'row' | 'column' | undefined;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp | undefined;\n  /**\n   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.\n   */\n  noWrap?: boolean | undefined;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | undefined;\n  /**\n   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.\n   */\n  justify?: FlexContentProps | undefined;\n  /**\n   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.\n   */\n  margin?: 'none' | 'auto' | undefined;\n  /**\n   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.\n   */\n  reverse?: boolean | undefined;\n  /**\n   * Возможность задать css-свойство `display`.\n   */\n  display?: 'none' | 'flex' | 'inline-flex' | undefined;\n}\n\n/**\n * @see https://vkui.io/components/flex\n */\nexport const Flex: React.FC<FlexProps> & {\n  /**\n   * @deprecated Since 7.11.0. Будет удалено в **VKUI v9**.\n   * Используйте компонент `Box`.\n   */\n  Item: typeof FlexItem;\n} = ({\n  gap = 0,\n  align,\n  justify,\n  margin = 'none',\n  noWrap = false,\n  direction = 'row',\n  reverse = false,\n  display = 'flex',\n  ...restProps\n}: FlexProps) => {\n  const [rowGap, columnGap] = calculateGap(gap);\n  const resolvedProps = resolveLayoutProps(restProps);\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        !noWrap && styles.wrap,\n        reverse && styles.reverse,\n        direction !== 'row' && styles.directionColumn,\n        margin !== 'none' && styles.marginAuto,\n        align && alignClassNames[align],\n        justify && justifyClassNames[justify],\n        getGapsPresets(rowGap, columnGap),\n        display !== 'flex' && displayClassNames[display],\n      )}\n      baseStyle={getGapsByUser(rowGap, columnGap)}\n      {...resolvedProps}\n    />\n  );\n};\n\nfunction getGapsPresets(rowGap: GapProp, columnGap: GapProp) {\n  return classNames(\n    typeof rowGap === 'string' && rowGapClassNames[rowGap],\n    typeof columnGap === 'string' && columnGapClassNames[columnGap],\n  );\n}\n\nfunction getGapsByUser(rowGap: GapProp, columnGap: GapProp) {\n  const style: CSSCustomProperties = {};\n\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n\n  return style;\n}\n\nFlex.Item = FlexItem;\n"],"names":["classNames","calculateGap","columnGapClassNames","resolveLayoutProps","rowGapClassNames","RootComponent","FlexItem","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","displayClassNames","Flex","gap","align","justify","margin","noWrap","direction","reverse","display","restProps","rowGap","columnGap","resolvedProps","baseClassName","getGapsPresets","baseStyle","getGapsByUser","style","Item"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAGnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,QAAQ,QAA4B,yBAAsB;AAKnE,MAAMC,oBAAoB;IACxB,OAAO;IACP,KAAK;IACL,QAAQ;IACR,cAAc;IACd,eAAe;IACf,cAAc;AAChB;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,oBAAoB;IACxB,MAAM;IACN,aAAa;AACf;AA+CA;;CAEC,GACD,OAAO,MAAMC,OAMT,CAAC,EACHC,MAAM,CAAC,EACPC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,UAAU,KAAK,EACfC,UAAU,MAAM,EAChB,GAAGC,WACO;IACV,MAAM,CAACC,QAAQC,UAAU,GAAGzB,aAAae;IACzC,MAAMW,gBAAgBxB,mBAAmBqB;IAEzC,qBACE,KAACnB;QACCuB,eAAe5B,6BAEb,CAACoB,4BACDE,gCACAD,cAAc,sCACdF,WAAW,kCACXF,SAAST,eAAe,CAACS,MAAM,EAC/BC,WAAWX,iBAAiB,CAACW,QAAQ,EACrCW,eAAeJ,QAAQC,YACvBH,YAAY,UAAUT,iBAAiB,CAACS,QAAQ;QAElDO,WAAWC,cAAcN,QAAQC;QAChC,GAAGC,aAAa;;AAGvB,EAAE;AAEF,SAASE,eAAeJ,MAAe,EAAEC,SAAkB;IACzD,OAAO1B,WACL,OAAOyB,WAAW,YAAYrB,gBAAgB,CAACqB,OAAO,EACtD,OAAOC,cAAc,YAAYxB,mBAAmB,CAACwB,UAAU;AAEnE;AAEA,SAASK,cAAcN,MAAe,EAAEC,SAAkB;IACxD,MAAMM,QAA6B,CAAC;IAEpC,IAAI,OAAOP,WAAW,UAAU;QAC9BO,KAAK,CAAC,2BAA2B,GAAG,GAAGP,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCM,KAAK,CAAC,8BAA8B,GAAG,GAAGN,UAAU,EAAE,CAAC;IACzD;IAEA,OAAOM;AACT;AAEAjB,KAAKkB,IAAI,GAAG3B"}
+{"version":3,"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapProp,\n  type GapsProp,\n  resolveLayoutProps,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { LayoutProps, MarginProp } from '../../lib/layouts/types';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport { FlexItem, type FlexItemProps } from './FlexItem/FlexItem';\nimport styles from './Flex.module.css';\n\nexport type { FlexItemProps };\n\nconst justifyClassNames = {\n  'start': styles.justifyStart,\n  'end': styles.justifyEnd,\n  'center': styles.justifyCenter,\n  'space-around': styles.justifySpaceAround,\n  'space-between': styles.justifySpaceBetween,\n  'space-evenly': styles.justifySpaceEvenly,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nconst displayClassNames = {\n  'none': styles.displayNone,\n  'inline-flex': styles.displayInlineFlex,\n};\n\ntype FlexContentProps =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\nexport interface FlexProps extends RootComponentProps<HTMLElement>, Omit<LayoutProps, 'margin'> {\n  /**\n   * Направление осей, эквивалентно `flex-direction`.\n   */\n  direction?: 'row' | 'column' | undefined;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp | undefined;\n  /**\n   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.\n   */\n  noWrap?: boolean | undefined;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | undefined;\n  /**\n   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.\n   */\n  justify?: FlexContentProps | undefined;\n  /**\n   * Внешние отступы контейнера.\n   * Дополнительно поддерживаются специальные значения:\n   * `none` — отключает дополнительные отступы;\n   * `auto` — включает платформенные отступы вокруг контейнера.\n   */\n  margin?: 'none' | 'auto' | MarginProp | undefined;\n  /**\n   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.\n   */\n  reverse?: boolean | undefined;\n  /**\n   * Возможность задать css-свойство `display`.\n   */\n  display?: 'none' | 'flex' | 'inline-flex' | undefined;\n}\n\n/**\n * @see https://vkui.io/components/flex\n */\nexport const Flex: React.FC<FlexProps> & {\n  /**\n   * @deprecated Since 7.11.0. Будет удалено в **VKUI v9**.\n   * Используйте компонент `Box`.\n   */\n  Item: typeof FlexItem;\n} = ({\n  gap = 0,\n  align,\n  justify,\n  margin = 'none',\n  noWrap = false,\n  direction = 'row',\n  reverse = false,\n  display = 'flex',\n  ...restProps\n}: FlexProps) => {\n  const [rowGap, columnGap] = calculateGap(gap);\n  const resolvedProps = resolveLayoutProps(\n    margin === 'none' || margin === 'auto' ? restProps : { ...restProps, margin },\n  );\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        !noWrap && styles.wrap,\n        reverse && styles.reverse,\n        direction !== 'row' && styles.directionColumn,\n        margin === 'auto' && styles.marginAuto,\n        align && alignClassNames[align],\n        justify && justifyClassNames[justify],\n        getGapsPresets(rowGap, columnGap),\n        display !== 'flex' && displayClassNames[display],\n      )}\n      baseStyle={getGapsByUser(rowGap, columnGap)}\n      {...resolvedProps}\n    />\n  );\n};\n\nfunction getGapsPresets(rowGap: GapProp, columnGap: GapProp) {\n  return classNames(\n    typeof rowGap === 'string' && rowGapClassNames[rowGap],\n    typeof columnGap === 'string' && columnGapClassNames[columnGap],\n  );\n}\n\nfunction getGapsByUser(rowGap: GapProp, columnGap: GapProp) {\n  const style: CSSCustomProperties = {};\n\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n\n  return style;\n}\n\nFlex.Item = FlexItem;\n"],"names":["classNames","calculateGap","columnGapClassNames","resolveLayoutProps","rowGapClassNames","RootComponent","FlexItem","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","displayClassNames","Flex","gap","align","justify","margin","noWrap","direction","reverse","display","restProps","rowGap","columnGap","resolvedProps","baseClassName","getGapsPresets","baseStyle","getGapsByUser","style","Item"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAGnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,QAAQ,QAA4B,yBAAsB;AAKnE,MAAMC,oBAAoB;IACxB,OAAO;IACP,KAAK;IACL,QAAQ;IACR,cAAc;IACd,eAAe;IACf,cAAc;AAChB;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,oBAAoB;IACxB,MAAM;IACN,aAAa;AACf;AAkDA;;CAEC,GACD,OAAO,MAAMC,OAMT,CAAC,EACHC,MAAM,CAAC,EACPC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,UAAU,KAAK,EACfC,UAAU,MAAM,EAChB,GAAGC,WACO;IACV,MAAM,CAACC,QAAQC,UAAU,GAAGzB,aAAae;IACzC,MAAMW,gBAAgBxB,mBACpBgB,WAAW,UAAUA,WAAW,SAASK,YAAY;QAAE,GAAGA,SAAS;QAAEL;IAAO;IAG9E,qBACE,KAACd;QACCuB,eAAe5B,6BAEb,CAACoB,4BACDE,gCACAD,cAAc,sCACdF,WAAW,kCACXF,SAAST,eAAe,CAACS,MAAM,EAC/BC,WAAWX,iBAAiB,CAACW,QAAQ,EACrCW,eAAeJ,QAAQC,YACvBH,YAAY,UAAUT,iBAAiB,CAACS,QAAQ;QAElDO,WAAWC,cAAcN,QAAQC;QAChC,GAAGC,aAAa;;AAGvB,EAAE;AAEF,SAASE,eAAeJ,MAAe,EAAEC,SAAkB;IACzD,OAAO1B,WACL,OAAOyB,WAAW,YAAYrB,gBAAgB,CAACqB,OAAO,EACtD,OAAOC,cAAc,YAAYxB,mBAAmB,CAACwB,UAAU;AAEnE;AAEA,SAASK,cAAcN,MAAe,EAAEC,SAAkB;IACxD,MAAMM,QAA6B,CAAC;IAEpC,IAAI,OAAOP,WAAW,UAAU;QAC9BO,KAAK,CAAC,2BAA2B,GAAG,GAAGP,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCM,KAAK,CAAC,8BAA8B,GAAG,GAAGN,UAAU,EAAE,CAAC;IACzD;IAEA,OAAOM;AACT;AAEAjB,KAAKkB,IAAI,GAAG3B"}

package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.js

@@ -60,7 +60,9 @@ export const ImageBaseFloatElement = ({ placement, visibility = 'always', style,
         }
         return;
     }, [
-        visibility
+        visibility,
+        onMouseOverHandlers,
+        onMouseOutHandlers
     ]);
     const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] = React.useMemo(()=>{
         const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(inlineIndent, '--vkui_internal--FloatElement_horizontal_indent', inlineIndentClassNames);

package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport { mutableRemoveElement, resolveIndent } from './helpers';\nimport styles from './ImageBaseFloatElement.module.css';\n\nexport type FloatElementPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'middle-start'\n  | 'middle'\n  | 'middle-end';\n\nexport type FloatElementIndentation =\n  | '2xs'\n  | 'xs'\n  | 's'\n  | 'm'\n  | 'l'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl'\n  | number\n  | string;\n\nconst positionPlacementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n  'middle-start': styles.placementMiddleStart,\n  'middle': styles.placementMiddle,\n  'middle-end': styles.placementMiddleEnd,\n};\n\nconst inlineIndentClassNames = {\n  '2xs': styles.inlineIndent2xs,\n  'xs': styles.inlineIndentXs,\n  's': styles.inlineIndentS,\n  'm': styles.inlineIndentM,\n  'l': styles.inlineIndentL,\n  'xl': styles.inlineIndentXl,\n  '2xl': styles.inlineIndent2xl,\n  '3xl': styles.inlineIndent3xl,\n  '4xl': styles.inlineIndent4xl,\n};\n\nconst blockIndentClassNames = {\n  '2xs': styles.blockIndent2xs,\n  'xs': styles.blockIndentXs,\n  's': styles.blockIndentS,\n  'm': styles.blockIndentM,\n  'l': styles.blockIndentL,\n  'xl': styles.blockIndentXl,\n  '2xl': styles.blockIndent2xl,\n  '3xl': styles.blockIndent3xl,\n  '4xl': styles.blockIndent4xl,\n};\n\nexport interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позиция компонента относительно родителя.\n   */\n  placement: FloatElementPlacement;\n  /**\n   * Отступ компонента от края контейнера по горизонтали.\n   */\n  inlineIndent?: FloatElementIndentation | undefined;\n  /**\n   * Отступ компонента от края контейнера по вертикали.\n   */\n  blockIndent?: FloatElementIndentation | undefined;\n  /**\n   * Режим отображения компонента:\n   *\n   * - `\"always\"`: Всегда\n   * - `\"on-hover\"`: При наведении на картинку.\n   */\n  visibility?: 'always' | 'on-hover' | undefined;\n}\n\nexport const ImageBaseFloatElement = ({\n  placement,\n  visibility = 'always',\n  style,\n  className,\n  inlineIndent,\n  blockIndent,\n  ...restProps\n}: ImageBaseFloatElementProps) => {\n  const [hidden, setHidden] = React.useState(visibility !== 'always');\n  const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);\n\n  useIsomorphicLayoutEffect(\n    function resetHidden() {\n      setHidden(visibility === 'on-hover');\n    },\n    [visibility],\n  );\n\n  useIsomorphicLayoutEffect(\n    function addMouseHandlers() {\n      if (visibility === 'on-hover') {\n        const onMouseOver = () => setHidden(false);\n        const onMouseOut = () => setHidden(true);\n\n        onMouseOverHandlers.push(onMouseOver);\n        onMouseOutHandlers.push(onMouseOut);\n\n        return () => {\n          mutableRemoveElement(onMouseOverHandlers, onMouseOver);\n          mutableRemoveElement(onMouseOutHandlers, onMouseOut);\n        };\n      }\n      return;\n    },\n    [visibility],\n  );\n\n  const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =\n    React.useMemo(() => {\n      const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(\n        inlineIndent,\n        '--vkui_internal--FloatElement_horizontal_indent',\n        inlineIndentClassNames,\n      );\n      const [blockIndentStyle, blockIndentClassName] = resolveIndent(\n        blockIndent,\n        '--vkui_internal--FloatElement_vertical_indent',\n        blockIndentClassNames,\n      );\n\n      return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];\n    }, [inlineIndent, blockIndent]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        ...inlineIndentStyle,\n        ...blockIndentStyle,\n      }}\n      className={classNames(\n        styles.host,\n        hidden && styles.hidden,\n        positionPlacementClassNames[placement],\n        inlineIndentClassName,\n        blockIndentClassName,\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","useIsomorphicLayoutEffect","RootComponent","ImageBaseContext","mutableRemoveElement","resolveIndent","positionPlacementClassNames","inlineIndentClassNames","blockIndentClassNames","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,eAAY;AA2BhE,MAAMC,8BAA8B;IAClC,WAAW;IACX,KAAK;IACL,SAAS;IACT,cAAc;IACd,QAAQ;IACR,YAAY;IACZ,cAAc;IACd,QAAQ;IACR,YAAY;AACd;AAEA,MAAMC,yBAAyB;IAC7B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAEA,MAAMC,wBAAwB;IAC5B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAwBA,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,SAAS,EACTC,aAAa,QAAQ,EACrBC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,WAAW,EACX,GAAGC,WACwB;IAC3B,MAAM,CAACC,QAAQC,UAAU,GAAGnB,MAAMoB,QAAQ,CAACR,eAAe;IAC1D,MAAM,EAAES,mBAAmB,EAAEC,kBAAkB,EAAE,GAAGtB,MAAMuB,UAAU,CAACnB;IAErEF,0BACE,SAASsB;QACPL,UAAUP,eAAe;IAC3B,GACA;QAACA;KAAW;IAGdV,0BACE,SAASuB;QACP,IAAIb,eAAe,YAAY;YAC7B,MAAMc,cAAc,IAAMP,UAAU;YACpC,MAAMQ,aAAa,IAAMR,UAAU;YAEnCE,oBAAoBO,IAAI,CAACF;YACzBJ,mBAAmBM,IAAI,CAACD;YAExB,OAAO;gBACLtB,qBAAqBgB,qBAAqBK;gBAC1CrB,qBAAqBiB,oBAAoBK;YAC3C;QACF;QACA;IACF,GACA;QAACf;KAAW;IAGd,MAAM,CAACiB,mBAAmBC,kBAAkBC,uBAAuBC,qBAAqB,GACtFhC,MAAMiC,OAAO,CAAC;QACZ,MAAM,CAACJ,mBAAmBE,sBAAsB,GAAGzB,cACjDS,cACA,mDACAP;QAEF,MAAM,CAACsB,kBAAkBE,qBAAqB,GAAG1B,cAC/CU,aACA,iDACAP;QAGF,OAAO;YAACoB;YAAmBC;YAAkBC;YAAuBC;SAAqB;IAC3F,GAAG;QAACjB;QAAcC;KAAY;IAEhC,qBACE,KAACb;QACE,GAAGc,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACR,GAAGgB,iBAAiB;YACpB,GAAGC,gBAAgB;QACrB;QACAhB,WAAWb,8CAETiB,+CACAX,2BAA2B,CAACI,UAAU,EACtCoB,uBACAC,sBACAlB;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport { mutableRemoveElement, resolveIndent } from './helpers';\nimport styles from './ImageBaseFloatElement.module.css';\n\nexport type FloatElementPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'middle-start'\n  | 'middle'\n  | 'middle-end';\n\nexport type FloatElementIndentation =\n  | '2xs'\n  | 'xs'\n  | 's'\n  | 'm'\n  | 'l'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl'\n  | number\n  | string;\n\nconst positionPlacementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n  'middle-start': styles.placementMiddleStart,\n  'middle': styles.placementMiddle,\n  'middle-end': styles.placementMiddleEnd,\n};\n\nconst inlineIndentClassNames = {\n  '2xs': styles.inlineIndent2xs,\n  'xs': styles.inlineIndentXs,\n  's': styles.inlineIndentS,\n  'm': styles.inlineIndentM,\n  'l': styles.inlineIndentL,\n  'xl': styles.inlineIndentXl,\n  '2xl': styles.inlineIndent2xl,\n  '3xl': styles.inlineIndent3xl,\n  '4xl': styles.inlineIndent4xl,\n};\n\nconst blockIndentClassNames = {\n  '2xs': styles.blockIndent2xs,\n  'xs': styles.blockIndentXs,\n  's': styles.blockIndentS,\n  'm': styles.blockIndentM,\n  'l': styles.blockIndentL,\n  'xl': styles.blockIndentXl,\n  '2xl': styles.blockIndent2xl,\n  '3xl': styles.blockIndent3xl,\n  '4xl': styles.blockIndent4xl,\n};\n\nexport interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позиция компонента относительно родителя.\n   */\n  placement: FloatElementPlacement;\n  /**\n   * Отступ компонента от края контейнера по горизонтали.\n   */\n  inlineIndent?: FloatElementIndentation | undefined;\n  /**\n   * Отступ компонента от края контейнера по вертикали.\n   */\n  blockIndent?: FloatElementIndentation | undefined;\n  /**\n   * Режим отображения компонента:\n   *\n   * - `\"always\"`: Всегда\n   * - `\"on-hover\"`: При наведении на картинку.\n   */\n  visibility?: 'always' | 'on-hover' | undefined;\n}\n\nexport const ImageBaseFloatElement = ({\n  placement,\n  visibility = 'always',\n  style,\n  className,\n  inlineIndent,\n  blockIndent,\n  ...restProps\n}: ImageBaseFloatElementProps) => {\n  const [hidden, setHidden] = React.useState(visibility !== 'always');\n  const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);\n\n  useIsomorphicLayoutEffect(\n    function resetHidden() {\n      setHidden(visibility === 'on-hover');\n    },\n    [visibility],\n  );\n\n  useIsomorphicLayoutEffect(\n    function addMouseHandlers() {\n      if (visibility === 'on-hover') {\n        const onMouseOver = () => setHidden(false);\n        const onMouseOut = () => setHidden(true);\n\n        onMouseOverHandlers.push(onMouseOver);\n        onMouseOutHandlers.push(onMouseOut);\n\n        return () => {\n          mutableRemoveElement(onMouseOverHandlers, onMouseOver);\n          mutableRemoveElement(onMouseOutHandlers, onMouseOut);\n        };\n      }\n      return;\n    },\n    [visibility, onMouseOverHandlers, onMouseOutHandlers],\n  );\n\n  const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =\n    React.useMemo(() => {\n      const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(\n        inlineIndent,\n        '--vkui_internal--FloatElement_horizontal_indent',\n        inlineIndentClassNames,\n      );\n      const [blockIndentStyle, blockIndentClassName] = resolveIndent(\n        blockIndent,\n        '--vkui_internal--FloatElement_vertical_indent',\n        blockIndentClassNames,\n      );\n\n      return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];\n    }, [inlineIndent, blockIndent]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        ...inlineIndentStyle,\n        ...blockIndentStyle,\n      }}\n      className={classNames(\n        styles.host,\n        hidden && styles.hidden,\n        positionPlacementClassNames[placement],\n        inlineIndentClassName,\n        blockIndentClassName,\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","useIsomorphicLayoutEffect","RootComponent","ImageBaseContext","mutableRemoveElement","resolveIndent","positionPlacementClassNames","inlineIndentClassNames","blockIndentClassNames","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,eAAY;AA2BhE,MAAMC,8BAA8B;IAClC,WAAW;IACX,KAAK;IACL,SAAS;IACT,cAAc;IACd,QAAQ;IACR,YAAY;IACZ,cAAc;IACd,QAAQ;IACR,YAAY;AACd;AAEA,MAAMC,yBAAyB;IAC7B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAEA,MAAMC,wBAAwB;IAC5B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAwBA,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,SAAS,EACTC,aAAa,QAAQ,EACrBC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,WAAW,EACX,GAAGC,WACwB;IAC3B,MAAM,CAACC,QAAQC,UAAU,GAAGnB,MAAMoB,QAAQ,CAACR,eAAe;IAC1D,MAAM,EAAES,mBAAmB,EAAEC,kBAAkB,EAAE,GAAGtB,MAAMuB,UAAU,CAACnB;IAErEF,0BACE,SAASsB;QACPL,UAAUP,eAAe;IAC3B,GACA;QAACA;KAAW;IAGdV,0BACE,SAASuB;QACP,IAAIb,eAAe,YAAY;YAC7B,MAAMc,cAAc,IAAMP,UAAU;YACpC,MAAMQ,aAAa,IAAMR,UAAU;YAEnCE,oBAAoBO,IAAI,CAACF;YACzBJ,mBAAmBM,IAAI,CAACD;YAExB,OAAO;gBACLtB,qBAAqBgB,qBAAqBK;gBAC1CrB,qBAAqBiB,oBAAoBK;YAC3C;QACF;QACA;IACF,GACA;QAACf;QAAYS;QAAqBC;KAAmB;IAGvD,MAAM,CAACO,mBAAmBC,kBAAkBC,uBAAuBC,qBAAqB,GACtFhC,MAAMiC,OAAO,CAAC;QACZ,MAAM,CAACJ,mBAAmBE,sBAAsB,GAAGzB,cACjDS,cACA,mDACAP;QAEF,MAAM,CAACsB,kBAAkBE,qBAAqB,GAAG1B,cAC/CU,aACA,iDACAP;QAGF,OAAO;YAACoB;YAAmBC;YAAkBC;YAAuBC;SAAqB;IAC3F,GAAG;QAACjB;QAAcC;KAAY;IAEhC,qBACE,KAACb;QACE,GAAGc,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACR,GAAGgB,iBAAiB;YACpB,GAAGC,gBAAgB;QACrB;QACAhB,WAAWb,8CAETiB,+CACAX,2BAA2B,CAACI,UAAU,EACtCoB,uBACAC,sBACAlB;;AAIR,EAAE"}

package/dist/components/NativeSelect/NativeSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAWnD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EACtD,SAAS,CACV,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE3D,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iCAAiC,GAAI,OAAO,WAAW,KAAG,iBACV,CAAC;AAE9D,eAAO,MAAM,iCAAiC,GAAI,OAAO,iBAAiB,KAAG,WAChB,CAAC;AAE9D,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnD,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,IAAI,CACR,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAC3F,EACD,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAC/D,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EACN;QACE,IAAI,CAAC,EACD,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GACrD,gBAAgB,GAChB,UAAU,CAAC,cAAc,CAAC,CAAC,GAC7B,SAAS,CAAC;QACd,MAAM,CAAC,EACH,CAAC,qBAAqB,GAAG,UAAU,CAAC,iBAAiB,CAAC,GAAG,gBAAgB,CAAC,GAC1E,SAAS,CAAC;KACf,GACD,SAAS,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IAClD;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC5F;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;CACpC;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,wNA4B1B,iBAAiB,KAAG,KAAK,CAAC,SAqF5B,CAAC"}
+{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAWnD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EACtD,SAAS,CACV,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE3D,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iCAAiC,GAAI,OAAO,WAAW,KAAG,iBACV,CAAC;AAE9D,eAAO,MAAM,iCAAiC,GAAI,OAAO,iBAAiB,KAAG,WAChB,CAAC;AAE9D,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnD,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,IAAI,CACR,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAC3F,EACD,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAC/D,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EACN;QACE,IAAI,CAAC,EACD,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GACrD,gBAAgB,GAChB,UAAU,CAAC,cAAc,CAAC,CAAC,GAC7B,SAAS,CAAC;QACd,MAAM,CAAC,EACH,CAAC,qBAAqB,GAAG,UAAU,CAAC,iBAAiB,CAAC,GAAG,gBAAgB,CAAC,GAC1E,SAAS,CAAC;KACf,GACD,SAAS,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IAClD;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC5F;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;CACpC;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,wNA4B1B,iBAAiB,KAAG,KAAK,CAAC,SAuF5B,CAAC"}

package/dist/components/NativeSelect/NativeSelect.js

@@ -69,8 +69,12 @@ disabled, required, autoFocus, id, name, form, onClick, onFocus, onBlur, slotPro
         onChange?.(e, newValue);
     };
     useIsomorphicLayoutEffect(checkSelectedOption, [
-        children
+        children,
+        placeholder,
+        selectRef
     ]);
+    // eslint-disable-next-line react-hooks/refs
+    const onSelectChange = callMultiple(_onChange, checkSelectedOption);
     return /*#__PURE__*/ _jsxs(FormField, {
         Component: "div",
         className: classNames("vkuiSelect__host", 'vkuiInternalNativeSelect', before && "vkuiSelect__hasBefore", empty && "vkuiSelect__empty", multiline && "vkuiSelect__multiline", align === 'center' && "vkuiSelect__alignCenter", align === 'right' && "vkuiSelect__alignRight", density !== 'regular' && densityClassNames[density], className),
@@ -88,7 +92,7 @@ disabled, required, autoFocus, id, name, form, onClick, onFocus, onBlur, slotPro
                 baseClassName: "vkuiSelect__el",
                 value: value !== undefined ? remapFromSelectValueToNativeValue(value) : value,
                 defaultValue: defaultValue !== undefined ? remapFromSelectValueToNativeValue(defaultValue) : defaultValue,
-                onChange: callMultiple(_onChange, checkSelectedOption),
+                onChange: onSelectChange,
                 getRootRef: selectRef,
                 ...selectRest,
                 children: [

package/dist/components/NativeSelect/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["'use client';\n\nimport type { ChangeEvent, ChangeEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst warn = warnOnce('NativeSelect');\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\n};\n\nexport type SelectValue = Exclude<\n  React.SelectHTMLAttributes<HTMLSelectElement>['value'],\n  undefined\n> | null;\n\nexport type NativeSelectValue = Exclude<SelectValue, null>;\n\nexport const NOT_SELECTED = {\n  NATIVE: '__vkui_internal_Select_not_selected__',\n  CUSTOM: null,\n};\n\n/**\n * @visibleName NativeSelect\n */\nexport const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>\n  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;\n\nexport const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>\n  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;\n\nexport type NativeHTMLSelectProps = Omit<\n  React.SelectHTMLAttributes<HTMLSelectElement>,\n  'multiple' | 'value' | 'defaultValue' | 'onChange'\n>;\n\nexport interface NativeSelectProps\n  extends Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'disabled' | 'required' | 'autoFocus' | 'name' | 'form' | 'onFocus' | 'onBlur' | 'onClick'\n    >,\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'onClick'\n    >,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `select`: свойства для прокидывания в нативный `select`.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &\n              HasDataAttribute &\n              HasRootRef<HTMLDivElement>)\n          | undefined;\n        select?:\n          | (NativeHTMLSelectProps & HasRootRef<HTMLSelectElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLSelectElement> | undefined;\n  /**\n   * Выбранное значение.\n   *\n   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.\n   * >\n   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`.\n   */\n  value?: SelectValue | undefined;\n  /**\n   * См. `value`.\n   */\n  defaultValue?: SelectValue | undefined;\n  /**\n   * Обработчик, срабатывающий при изменении выбранного значения.\n   * Вторым параметром прокидывается новое значение.\n   *\n   * > ⚠️ Лучше использовать второй параметр при работе с компонентом.\n   */\n  onChange?: ((e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void) | undefined;\n  /**\n   * Текст-подсказка при отсутствии выбранного значения.\n   */\n  placeholder?: string | undefined;\n  /**\n   * Флаг для включения многострочного режима.\n   */\n  multiline?: boolean | undefined;\n  /**\n   * Тип селекта, влияющий на отображение.\n   */\n  selectType?: SelectType | undefined;\n  /**\n   * Иконка раскрывающегося списка.\n   */\n  icon?: React.ReactNode | undefined;\n}\n\n/**\n * @see https://vkui.io/components/native-select\n */\nexport const NativeSelect = ({\n  // NativeSelectProps\n  children,\n  align,\n  placeholder,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange,\n  value,\n  defaultValue,\n  getRef,\n\n  // Select props\n  disabled,\n  required,\n  autoFocus,\n  id,\n  name,\n  form,\n  onClick,\n  onFocus,\n  onBlur,\n\n  slotProps,\n  ...restProps\n}: NativeSelectProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && getRef) {\n    warn('Свойство `getRef` устаревшее, используйте `slotProps={ select: { getRootRef: ... } }`');\n  }\n\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const { density = 'none' } = useAdaptivity();\n\n  const { className, style, getRootRef, ...rootRest } = useMergeProps(restProps, slotProps?.root);\n\n  const { getRootRef: getSelectRef, ...selectRest } = useMergeProps(\n    { getRootRef: getRef, disabled, required, autoFocus, id, name, form, onClick, onFocus, onBlur },\n    slotProps?.select,\n  );\n\n  const selectRef = useExternRef(getSelectRef);\n\n  const checkSelectedOption = () => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);\n    }\n  };\n\n  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const newValue = remapFromNativeValueToSelectValue(e.target.value);\n    if (e.target.value === NOT_SELECTED.NATIVE) {\n      e.target.value = '';\n    }\n    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {\n      e.currentTarget.value = '';\n    }\n    onChange?.(e, newValue);\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles.host,\n        'vkuiInternalNativeSelect',\n        before && styles.hasBefore,\n        empty && styles.empty,\n        multiline && styles.multiline,\n        align === 'center' && styles.alignCenter,\n        align === 'right' && styles.alignRight,\n        density !== 'regular' && densityClassNames[density],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={selectRest.disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      {...rootRest}\n    >\n      <RootComponent\n        Component=\"select\"\n        baseClassName={styles.el}\n        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}\n        defaultValue={\n          defaultValue !== undefined\n            ? remapFromSelectValueToNativeValue(defaultValue)\n            : defaultValue\n        }\n        onChange={callMultiple(_onChange, checkSelectedOption)}\n        getRootRef={selectRef}\n        {...selectRest}\n      >\n        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}\n        {children}\n      </RootComponent>\n      <div className={styles.container} aria-hidden>\n        <SelectTypography className={styles.title} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMergeProps","callMultiple","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","warnOnce","DropdownIcon","FormField","RootComponent","SelectTypography","warn","densityClassNames","none","compact","NOT_SELECTED","NATIVE","CUSTOM","remapFromSelectValueToNativeValue","value","remapFromNativeValueToSelectValue","NativeSelect","children","align","placeholder","multiline","selectType","status","icon","before","onChange","defaultValue","getRef","disabled","required","autoFocus","id","name","form","onClick","onFocus","onBlur","slotProps","restProps","process","env","NODE_ENV","title","setTitle","useState","empty","setEmpty","density","className","style","getRootRef","rootRest","root","getSelectRef","selectRest","select","selectRef","checkSelectedOption","selectedOption","current","options","selectedIndex","text","_onChange","e","newValue","target","currentTarget","Component","after","mode","baseClassName","undefined","option","div","aria-hidden"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["'use client';\n\nimport type { ChangeEvent, ChangeEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst warn = warnOnce('NativeSelect');\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\n};\n\nexport type SelectValue = Exclude<\n  React.SelectHTMLAttributes<HTMLSelectElement>['value'],\n  undefined\n> | null;\n\nexport type NativeSelectValue = Exclude<SelectValue, null>;\n\nexport const NOT_SELECTED = {\n  NATIVE: '__vkui_internal_Select_not_selected__',\n  CUSTOM: null,\n};\n\n/**\n * @visibleName NativeSelect\n */\nexport const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>\n  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;\n\nexport const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>\n  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;\n\nexport type NativeHTMLSelectProps = Omit<\n  React.SelectHTMLAttributes<HTMLSelectElement>,\n  'multiple' | 'value' | 'defaultValue' | 'onChange'\n>;\n\nexport interface NativeSelectProps\n  extends Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'disabled' | 'required' | 'autoFocus' | 'name' | 'form' | 'onFocus' | 'onBlur' | 'onClick'\n    >,\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'onClick'\n    >,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `select`: свойства для прокидывания в нативный `select`.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &\n              HasDataAttribute &\n              HasRootRef<HTMLDivElement>)\n          | undefined;\n        select?:\n          | (NativeHTMLSelectProps & HasRootRef<HTMLSelectElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLSelectElement> | undefined;\n  /**\n   * Выбранное значение.\n   *\n   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.\n   * >\n   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`.\n   */\n  value?: SelectValue | undefined;\n  /**\n   * См. `value`.\n   */\n  defaultValue?: SelectValue | undefined;\n  /**\n   * Обработчик, срабатывающий при изменении выбранного значения.\n   * Вторым параметром прокидывается новое значение.\n   *\n   * > ⚠️ Лучше использовать второй параметр при работе с компонентом.\n   */\n  onChange?: ((e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void) | undefined;\n  /**\n   * Текст-подсказка при отсутствии выбранного значения.\n   */\n  placeholder?: string | undefined;\n  /**\n   * Флаг для включения многострочного режима.\n   */\n  multiline?: boolean | undefined;\n  /**\n   * Тип селекта, влияющий на отображение.\n   */\n  selectType?: SelectType | undefined;\n  /**\n   * Иконка раскрывающегося списка.\n   */\n  icon?: React.ReactNode | undefined;\n}\n\n/**\n * @see https://vkui.io/components/native-select\n */\nexport const NativeSelect = ({\n  // NativeSelectProps\n  children,\n  align,\n  placeholder,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange,\n  value,\n  defaultValue,\n  getRef,\n\n  // Select props\n  disabled,\n  required,\n  autoFocus,\n  id,\n  name,\n  form,\n  onClick,\n  onFocus,\n  onBlur,\n\n  slotProps,\n  ...restProps\n}: NativeSelectProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && getRef) {\n    warn('Свойство `getRef` устаревшее, используйте `slotProps={ select: { getRootRef: ... } }`');\n  }\n\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const { density = 'none' } = useAdaptivity();\n\n  const { className, style, getRootRef, ...rootRest } = useMergeProps(restProps, slotProps?.root);\n\n  const { getRootRef: getSelectRef, ...selectRest } = useMergeProps(\n    { getRootRef: getRef, disabled, required, autoFocus, id, name, form, onClick, onFocus, onBlur },\n    slotProps?.select,\n  );\n\n  const selectRef = useExternRef(getSelectRef);\n\n  const checkSelectedOption = () => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);\n    }\n  };\n\n  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const newValue = remapFromNativeValueToSelectValue(e.target.value);\n    if (e.target.value === NOT_SELECTED.NATIVE) {\n      e.target.value = '';\n    }\n    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {\n      e.currentTarget.value = '';\n    }\n    onChange?.(e, newValue);\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children, placeholder, selectRef]);\n  // eslint-disable-next-line react-hooks/refs\n  const onSelectChange = callMultiple(_onChange, checkSelectedOption);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles.host,\n        'vkuiInternalNativeSelect',\n        before && styles.hasBefore,\n        empty && styles.empty,\n        multiline && styles.multiline,\n        align === 'center' && styles.alignCenter,\n        align === 'right' && styles.alignRight,\n        density !== 'regular' && densityClassNames[density],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={selectRest.disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      {...rootRest}\n    >\n      <RootComponent\n        Component=\"select\"\n        baseClassName={styles.el}\n        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}\n        defaultValue={\n          defaultValue !== undefined\n            ? remapFromSelectValueToNativeValue(defaultValue)\n            : defaultValue\n        }\n        onChange={onSelectChange}\n        getRootRef={selectRef}\n        {...selectRest}\n      >\n        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}\n        {children}\n      </RootComponent>\n      <div className={styles.container} aria-hidden>\n        <SelectTypography className={styles.title} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMergeProps","callMultiple","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","warnOnce","DropdownIcon","FormField","RootComponent","SelectTypography","warn","densityClassNames","none","compact","NOT_SELECTED","NATIVE","CUSTOM","remapFromSelectValueToNativeValue","value","remapFromNativeValueToSelectValue","NativeSelect","children","align","placeholder","multiline","selectType","status","icon","before","onChange","defaultValue","getRef","disabled","required","autoFocus","id","name","form","onClick","onFocus","onBlur","slotProps","restProps","process","env","NODE_ENV","title","setTitle","useState","empty","setEmpty","density","className","style","getRootRef","rootRest","root","getSelectRef","selectRest","select","selectRef","checkSelectedOption","selectedOption","current","options","selectedIndex","text","_onChange","e","newValue","target","currentTarget","onSelectChange","Component","after","mode","baseClassName","undefined","option","div","aria-hidden"],"mappings":"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"}

package/dist/components/NavTransitionContext/NavTransitionContext.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 export interface TransitionContextProps {
     entering: boolean;
+    animating: boolean;
 }
 export declare const useNavTransition: () => TransitionContextProps;
-export declare const NavTransitionProvider: ({ children, entering, }: React.PropsWithChildren<TransitionContextProps>) => React.ReactNode;
+export declare const NavTransitionProvider: ({ children, entering, animating, }: React.PropsWithChildren<TransitionContextProps>) => React.ReactNode;
 //# sourceMappingURL=NavTransitionContext.d.ts.map

package/dist/components/NavTransitionContext/NavTransitionContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavTransitionContext.d.ts","sourceRoot":"","sources":["../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAID,eAAO,MAAM,gBAAgB,QAAO,sBAA6D,CAAC;AAElG,eAAO,MAAM,qBAAqB,GAAI,yBAGnC,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,KAAG,KAAK,CAAC,SAU1D,CAAC"}
+{"version":3,"file":"NavTransitionContext.d.ts","sourceRoot":"","sources":["../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB;AAKD,eAAO,MAAM,gBAAgB,QAAO,sBAA6D,CAAC;AAElG,eAAO,MAAM,qBAAqB,GAAI,oCAInC,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,KAAG,KAAK,CAAC,SAW1D,CAAC"}

package/dist/components/NavTransitionContext/NavTransitionContext.js

@@ -2,16 +2,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
 const TransitionContext = /*#__PURE__*/ React.createContext({
-    entering: false
+    entering: false,
+    animating: false
 });
 export const useNavTransition = ()=>React.useContext(TransitionContext);
-export const NavTransitionProvider = ({ children, entering })=>{
+export const NavTransitionProvider = ({ children, entering, animating })=>{
     const parentContext = useNavTransition();
     const contextValue = React.useMemo(()=>({
-            entering: parentContext.entering || entering
+            entering: parentContext.entering || entering,
+            animating: parentContext.animating || animating
         }), [
         entering,
-        parentContext.entering
+        animating,
+        parentContext.entering,
+        parentContext.animating
     ]);
     return /*#__PURE__*/ _jsx(TransitionContext.Provider, {
         value: contextValue,