@vkontakte/vkui 8.1.2 → 8.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateInput/DateInput.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 { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport {\n  convertDateToTimeZone,\n  createDateInTimeZone,\n  dateFormatter,\n  dateTimeFormatter,\n  isMatch,\n  parse,\n  startOfDay,\n  startOfMinute,\n} from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { cacheDateTimeFormat } from '../../lib/intlCache';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\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 { useDateInputValue } from './hooks';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './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: styles.densityNone,\n  compact: styles.densityCompact,\n};\n\nexport type DateInputPropsTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для поля ввода дня.\n   */\n  dayFieldTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода месяца.\n   */\n  monthFieldTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода года.\n   */\n  yearFieldTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода часа.\n   */\n  hourFieldTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода минут.\n   */\n  minuteFieldTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки показа календаря.\n   */\n  showCalendarButtonTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки даты.\n   */\n  clearButtonTestId?: string | undefined;\n};\n\nexport interface DateInputProps\n  extends Omit<\n      React.InputHTMLAttributes<HTMLDivElement>,\n      'value' | 'defaultValue' | 'onChange' | 'size'\n    >,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'value'\n      | 'defaultValue'\n      | 'doneButtonText'\n      | 'DoneButton'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'minDateTime'\n      | 'maxDateTime'\n      | 'renderDayContent'\n    >,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'>,\n    DateInputPropsTestsProps {\n  /**\n   * Обработчик изменения выбранной даты.\n   */\n  onChange?: ((value: Date | null) => void) | undefined;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в календаре.\n   */\n  calendarTestsProps?: CalendarTestsProps | undefined;\n  /**\n   * Расположение календаря относительно поля ввода.\n   */\n  calendarPlacement?: PlacementWithAuto | undefined;\n  /**\n   * Автоматически закрывать календарь при изменениях.\n   */\n  closeOnChange?: boolean | undefined;\n  /**\n   * `aria-label` для календаря.\n   */\n  calendarLabel?: string | undefined;\n  /**\n   * Label для кнопки очистки. Делает доступным для ассистивных технологий.\n   */\n  clearFieldLabel?: string | undefined;\n  /**\n   * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.\n   */\n  showCalendarLabel?: string | undefined;\n  /**\n   * Отключение открытия календаря.\n   */\n  disableCalendar?: boolean | undefined;\n  /**\n   * Обработчик изменения состояния открытия календаря.\n   */\n  onCalendarOpenChanged?: ((opened: boolean) => void) | undefined;\n  /**\n   * `aria-label` для поля изменения дня.\n   */\n  changeDayLabel?: string | undefined;\n  /**\n   * Обработчик нажатия на кнопку `\"Done\"`. Используется совместно с флагом `enableTime`.\n   */\n  onApply?: ((value?: Date) => void) | undefined;\n  /**\n   * Функция для кастомного форматирования отображаемого значения даты.\n   * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.\n   */\n  renderCustomValue?: ((date: Date | undefined) => React.ReactNode) | undefined;\n  /**\n   * Часовой пояс для отображения даты.\n   */\n  timezone?: string | undefined;\n  /**\n   * @deprecated Since 8.0.0. Будет удалено в 9.0.0.\n   *\n   * Включает режим в котором DateInput доступен\n   * для ассистивных технологий.\n   * В этом режиме:\n   * - календарь больше не открывает при фокусе на DateInput;\n   * - иконка календаря видна всегда, чтобы пользователи\n   * ассистивных технологий могли открыть календарь по клику на иконку;\n   * - календарь при открытии получает фокус, клавиатурный\n   * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.\n   */\n  accessible?: boolean | undefined /* TODO [>=v9] удалить свойство */;\n  /**\n   * Позволяет отключить захват фокуса при появлении календаря.\n   */\n  disableFocusTrap?: boolean | undefined;\n  /**\n   * Управление поведением возврата фокуса при закрытии всплывающего окна.\n   * @default true\n   */\n  restoreFocus?: boolean | (() => boolean | HTMLElement) | 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      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkui.io/components/date-input\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  minDateTime,\n  maxDateTime,\n  'value': valueProp,\n  defaultValue,\n  onChange,\n  'calendarPlacement': calendarPlacementProp = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  DoneButton,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  accessible = true,\n  calendarLabel = 'Календарь',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'День',\n  changeMonthLabel = 'Месяц',\n  changeYearLabel = 'Год',\n  changeHoursLabel = 'Час',\n  changeMinutesLabel = 'Минута',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  showNeighboringMonth,\n  size,\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  renderDayContent,\n  onCalendarOpenChanged,\n  calendarTestsProps,\n  dayFieldTestId,\n  monthFieldTestId,\n  yearFieldTestId,\n  hourFieldTestId,\n  minuteFieldTestId,\n  showCalendarButtonTestId,\n  clearButtonTestId,\n  id,\n  onApply,\n  renderCustomValue,\n  timezone,\n  restoreFocus,\n  disableFocusTrap,\n  readOnly,\n  'disableCalendar': disableCalendarProp = false,\n  'aria-label': ariaLabel = '',\n  before,\n  ...props\n}: DateInputProps): React.ReactNode => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n  const focusTrapRootRef = React.useRef<HTMLDivElement | null>(null);\n\n  const disableCalendar = readOnly ? true : disableCalendarProp;\n\n  const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =\n    useDateInputValue({\n      value: valueProp,\n      defaultValue,\n      onChange,\n      timezone,\n    });\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'dd.MM.yyyy';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        const now = new Date();\n        const referenceDate = value ?? (enableTime ? startOfMinute(now) : startOfDay(now));\n        const parsed = parse(formattedValue, mask, referenceDate);\n        const toUpdate = createDateInTimeZone(parsed, timezone);\n        updateValue(toUpdate);\n      }\n    },\n    [enableTime, maxElement, timezone, updateValue, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n    closeCalendar,\n    toggleCalendar,\n    openCalendar,\n    handleRestoreFocus,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled: disabled || readOnly,\n    elementsConfig,\n    onClear: clearValue,\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  useIsomorphicLayoutEffect(\n    function resetValueOnCloseCalendar() {\n      if (!open) {\n        setInternalValue(getLastUpdatedValue());\n      }\n    },\n    [open, getLastUpdatedValue],\n  );\n\n  const onCalendarChange = React.useCallback(\n    (value: Date) => {\n      if (enableTime) {\n        const valueForDisplay = convertDateToTimeZone(value, timezone) as Date;\n        setInternalValue(valueForDisplay);\n        return;\n      }\n      updateValue(value);\n      if (closeOnChange) {\n        removeFocusFromField();\n      }\n    },\n    [enableTime, timezone, updateValue, closeOnChange, setInternalValue, removeFocusFromField],\n  );\n\n  const onDoneButtonClick = React.useCallback(() => {\n    if (!value) {\n      return;\n    }\n    const newValue = updateValue(value);\n    onApply?.(newValue);\n    removeFocusFromField();\n  }, [onApply, removeFocusFromField, updateValue, value]);\n\n  const customValue = React.useMemo(\n    () => !open && renderCustomValue?.(value || undefined),\n    [open, renderCustomValue, value],\n  );\n\n  // при переключении месяцев высота календаря может меняться,\n  // чтобы календарь не прыгал при переключении месяцев каждый раз на\n  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n  // на ней, пока помещается.\n  const [calendarPlacement, setCalendarPlacement] =\n    React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n  const { locale } = useConfigProvider();\n  const currentDateLabel = value\n    ? labelDateTimeFormat(locale, labelDateTimeFormatOptions).format(value)\n    : null;\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 && styles.hasBefore,\n        (showCalendarButton || showClearButton) && styles.hasAfter,\n        className,\n      )}\n      getRootRef={handleRootRef}\n      role=\"group\"\n      aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}\n      before={before}\n      after={\n        <React.Fragment>\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        </React.Fragment>\n      }\n      disabled={disabled}\n      {...props}\n    >\n      <div className={styles.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          tabIndex={readOnly ? 0 : -1}\n          name={name}\n          value={\n            value\n              ? enableTime\n                ? dateTimeFormatter.format(value)\n                : dateFormatter.format(value)\n              : ''\n          }\n          onFocus={handleFieldEnter}\n        />\n        <Text\n          className={classNames(styles.input, customValue && styles.hidden)}\n          // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n          // из-за чего `.Typography--normalize` перебивает стили.\n          normalize={false}\n          Component=\"span\" // для <span> нормализация не нужна\n          onClick={showCalendarOnInputAreaClick}\n        >\n          <NumberInputLike\n            value={internalValue[0]}\n            minValue={1}\n            maxValue={31}\n            length={2}\n            getRootRef={daysRef}\n            index={0}\n            onKeyDown={handleKeyDown}\n            onElementSelect={setFocusedElement}\n            label={changeDayLabel}\n            readOnly={readOnly}\n            data-testid={dayFieldTestId}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[1]}\n            minValue={1}\n            maxValue={12}\n            length={2}\n            getRootRef={monthsRef}\n            index={1}\n            onElementSelect={setFocusedElement}\n            onKeyDown={handleKeyDown}\n            readOnly={readOnly}\n            label={changeMonthLabel}\n            data-testid={monthFieldTestId}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[2]}\n            minValue={1}\n            maxValue={275750}\n            length={4}\n            getRootRef={yearsRef}\n            index={2}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeYearLabel}\n            onKeyDown={handleKeyDown}\n            data-testid={yearFieldTestId}\n          />\n          {enableTime && (\n            <React.Fragment>\n              <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>\n              <NumberInputLike\n                value={internalValue[3]}\n                minValue={1}\n                maxValue={24}\n                length={2}\n                getRootRef={hoursRef}\n                index={3}\n                onElementSelect={setFocusedElement}\n                readOnly={readOnly}\n                label={changeHoursLabel}\n                onKeyDown={handleKeyDown}\n                data-testid={hourFieldTestId}\n              />\n              <InputLikeDivider>:</InputLikeDivider>\n              <NumberInputLike\n                value={internalValue[4]}\n                minValue={1}\n                maxValue={59}\n                length={2}\n                getRootRef={minutesRef}\n                index={4}\n                onElementSelect={setFocusedElement}\n                readOnly={readOnly}\n                label={changeMinutesLabel}\n                onKeyDown={handleKeyDown}\n                data-testid={minuteFieldTestId}\n              />\n            </React.Fragment>\n          )}\n        </Text>\n        {customValue && (\n          <Text className={styles.customValue} aria-hidden normalize={false}>\n            {customValue}\n          </Text>\n        )}\n      </div>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          onPlacementChange={setCalendarPlacement}\n          autoUpdateOnTargetResize\n        >\n          <FocusTrap\n            rootRef={focusTrapRootRef}\n            disabled={disableFocusTrap ?? !accessible}\n            restoreFocus={restoreFocus ?? (Boolean(accessible) && handleRestoreFocus)}\n          >\n            <div ref={focusTrapRootRef}>\n              <Calendar\n                aria-label={calendarLabel}\n                role=\"dialog\"\n                value={value}\n                onChange={onCalendarChange}\n                enableTime={enableTime}\n                disablePast={disablePast}\n                disableFuture={disableFuture}\n                shouldDisableDate={shouldDisableDate}\n                onDoneButtonClick={onDoneButtonClick}\n                getRootRef={calendarRef}\n                doneButtonText={doneButtonText}\n                DoneButton={DoneButton}\n                disablePickers={disablePickers}\n                changeHoursLabel={changeHoursLabel}\n                changeMinutesLabel={changeMinutesLabel}\n                prevMonthLabel={prevMonthLabel}\n                nextMonthLabel={nextMonthLabel}\n                changeMonthLabel={changeMonthLabel}\n                changeYearLabel={changeYearLabel}\n                showNeighboringMonth={showNeighboringMonth}\n                renderDayContent={renderDayContent}\n                size={size}\n                viewDate={viewDate}\n                onHeaderChange={onHeaderChange}\n                onNextMonth={onNextMonth}\n                onPrevMonth={onPrevMonth}\n                prevMonthIcon={prevMonthIcon}\n                nextMonthIcon={nextMonthIcon}\n                minDateTime={minDateTime}\n                maxDateTime={maxDateTime}\n                timezone={timezone}\n                {...(calendarTestsProps ?? {})}\n              />\n            </div>\n          </FocusTrap>\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","useGlobalEscKeyDown","convertDateToTimeZone","createDateInTimeZone","dateFormatter","dateTimeFormatter","isMatch","parse","startOfDay","startOfMinute","cacheDateTimeFormat","useIsomorphicLayoutEffect","Calendar","useConfigProvider","FocusTrap","FormField","IconButton","InputLikeDivider","NumberInputLike","Popper","Text","VisuallyHidden","useDateInputValue","styles","labelDateTimeFormatOptions","weekday","year","month","day","labelDateTimeFormat","densityClassNames","none","densityNone","compact","densityCompact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","valueProp","defaultValue","onChange","calendarPlacementProp","style","className","doneButtonText","DoneButton","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","accessible","calendarLabel","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","showNeighboringMonth","size","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","showCalendarButtonTestId","clearButtonTestId","id","onApply","renderCustomValue","timezone","restoreFocus","disableFocusTrap","readOnly","disableCalendarProp","ariaLabel","before","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","focusTrapRootRef","disableCalendar","updateValue","setInternalValue","getLastUpdatedValue","clearValue","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","now","Date","referenceDate","parsed","toUpdate","refs","useMemo","rootRef","calendarRef","open","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","closeCalendar","toggleCalendar","openCalendar","handleRestoreFocus","onClear","density","handleRootRef","resetValueOnCloseCalendar","onCalendarChange","valueForDisplay","onDoneButtonClick","customValue","undefined","calendarPlacement","setCalendarPlacement","useState","locale","currentDateLabel","format","currentDateLabelId","useId","ariaLabelId","showCalendarOnInputAreaClick","showCalendarButton","showClearButton","capture","hasBefore","hasAfter","role","aria-labelledby","after","Fragment","hoverMode","label","onClick","data-testid","div","wrapper","Component","aria-hidden","tabIndex","onFocus","input","hidden","normalize","minValue","maxValue","onKeyDown","onElementSelect","inputTimeDivider","targetRef","offsetByMainAxis","placement","onPlacementChange","autoUpdateOnTargetResize","Boolean","ref","aria-label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DateInput/DateInput.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 { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useLocale } from '../../hooks/useLocale';\nimport {\n  convertDateToTimeZone,\n  createDateInTimeZone,\n  dateFormatter,\n  dateTimeFormatter,\n  isMatch,\n  parse,\n  startOfDay,\n  startOfMinute,\n} from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { cacheDateTimeFormat } from '../../lib/intlCache';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\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 { useDateInputValue } from './hooks';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './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: styles.densityNone,\n  compact: styles.densityCompact,\n};\n\nexport type DateInputPropsTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для поля ввода дня.\n   */\n  dayFieldTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода месяца.\n   */\n  monthFieldTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода года.\n   */\n  yearFieldTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода часа.\n   */\n  hourFieldTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для поля ввода минут.\n   */\n  minuteFieldTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки показа календаря.\n   */\n  showCalendarButtonTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки даты.\n   */\n  clearButtonTestId?: string | undefined;\n};\n\nexport interface DateInputProps\n  extends Omit<\n      React.InputHTMLAttributes<HTMLDivElement>,\n      'value' | 'defaultValue' | 'onChange' | 'size'\n    >,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'value'\n      | 'defaultValue'\n      | 'doneButtonText'\n      | 'DoneButton'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'minDateTime'\n      | 'maxDateTime'\n      | 'renderDayContent'\n    >,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'>,\n    DateInputPropsTestsProps {\n  /**\n   * Обработчик изменения выбранной даты.\n   */\n  onChange?: ((value: Date | null) => void) | undefined;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в календаре.\n   */\n  calendarTestsProps?: CalendarTestsProps | undefined;\n  /**\n   * Расположение календаря относительно поля ввода.\n   */\n  calendarPlacement?: PlacementWithAuto | undefined;\n  /**\n   * Автоматически закрывать календарь при изменениях.\n   */\n  closeOnChange?: boolean | undefined;\n  /**\n   * `aria-label` для календаря.\n   */\n  calendarLabel?: string | undefined;\n  /**\n   * Label для кнопки очистки. Делает доступным для ассистивных технологий.\n   */\n  clearFieldLabel?: string | undefined;\n  /**\n   * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.\n   */\n  showCalendarLabel?: string | undefined;\n  /**\n   * Отключение открытия календаря.\n   */\n  disableCalendar?: boolean | undefined;\n  /**\n   * Обработчик изменения состояния открытия календаря.\n   */\n  onCalendarOpenChanged?: ((opened: boolean) => void) | undefined;\n  /**\n   * `aria-label` для поля изменения дня.\n   */\n  changeDayLabel?: string | undefined;\n  /**\n   * Обработчик нажатия на кнопку `\"Done\"`. Используется совместно с флагом `enableTime`.\n   */\n  onApply?: ((value?: Date) => void) | undefined;\n  /**\n   * Функция для кастомного форматирования отображаемого значения даты.\n   * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.\n   */\n  renderCustomValue?: ((date: Date | undefined) => React.ReactNode) | undefined;\n  /**\n   * Часовой пояс для отображения даты.\n   */\n  timezone?: string | undefined;\n  /**\n   * @deprecated Since 8.0.0. Будет удалено в 9.0.0.\n   *\n   * Включает режим в котором DateInput доступен\n   * для ассистивных технологий.\n   * В этом режиме:\n   * - календарь больше не открывает при фокусе на DateInput;\n   * - иконка календаря видна всегда, чтобы пользователи\n   * ассистивных технологий могли открыть календарь по клику на иконку;\n   * - календарь при открытии получает фокус, клавиатурный\n   * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.\n   */\n  accessible?: boolean | undefined /* TODO [>=v9] удалить свойство */;\n  /**\n   * Позволяет отключить захват фокуса при появлении календаря.\n   */\n  disableFocusTrap?: boolean | undefined;\n  /**\n   * Управление поведением возврата фокуса при закрытии всплывающего окна.\n   * @default true\n   */\n  restoreFocus?: boolean | (() => boolean | HTMLElement) | 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      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkui.io/components/date-input\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  minDateTime,\n  maxDateTime,\n  'value': valueProp,\n  defaultValue,\n  onChange,\n  'calendarPlacement': calendarPlacementProp = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  DoneButton,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  accessible = true,\n  calendarLabel = 'Календарь',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'День',\n  changeMonthLabel = 'Месяц',\n  changeYearLabel = 'Год',\n  changeHoursLabel = 'Час',\n  changeMinutesLabel = 'Минута',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  showNeighboringMonth,\n  size,\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  renderDayContent,\n  onCalendarOpenChanged,\n  calendarTestsProps,\n  dayFieldTestId,\n  monthFieldTestId,\n  yearFieldTestId,\n  hourFieldTestId,\n  minuteFieldTestId,\n  showCalendarButtonTestId,\n  clearButtonTestId,\n  id,\n  onApply,\n  renderCustomValue,\n  timezone,\n  restoreFocus,\n  disableFocusTrap,\n  readOnly,\n  'disableCalendar': disableCalendarProp = false,\n  'aria-label': ariaLabel = '',\n  before,\n  ...props\n}: DateInputProps): React.ReactNode => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n  const focusTrapRootRef = React.useRef<HTMLDivElement | null>(null);\n\n  const disableCalendar = readOnly ? true : disableCalendarProp;\n\n  const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =\n    useDateInputValue({\n      value: valueProp,\n      defaultValue,\n      onChange,\n      timezone,\n    });\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'dd.MM.yyyy';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        const now = new Date();\n        const referenceDate = value ?? (enableTime ? startOfMinute(now) : startOfDay(now));\n        const parsed = parse(formattedValue, mask, referenceDate);\n        const toUpdate = createDateInTimeZone(parsed, timezone);\n        updateValue(toUpdate);\n      }\n    },\n    [enableTime, maxElement, timezone, updateValue, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n    closeCalendar,\n    toggleCalendar,\n    openCalendar,\n    handleRestoreFocus,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled: disabled || readOnly,\n    elementsConfig,\n    onClear: clearValue,\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  useIsomorphicLayoutEffect(\n    function resetValueOnCloseCalendar() {\n      if (!open) {\n        setInternalValue(getLastUpdatedValue());\n      }\n    },\n    [open, getLastUpdatedValue, setInternalValue],\n  );\n\n  const onCalendarChange = React.useCallback(\n    (value: Date) => {\n      if (enableTime) {\n        const valueForDisplay = convertDateToTimeZone(value, timezone) as Date;\n        setInternalValue(valueForDisplay);\n        return;\n      }\n      updateValue(value);\n      if (closeOnChange) {\n        removeFocusFromField();\n      }\n    },\n    [enableTime, timezone, updateValue, closeOnChange, setInternalValue, removeFocusFromField],\n  );\n\n  const onDoneButtonClick = React.useCallback(() => {\n    if (!value) {\n      return;\n    }\n    const newValue = updateValue(value);\n    onApply?.(newValue);\n    removeFocusFromField();\n  }, [onApply, removeFocusFromField, updateValue, value]);\n\n  const customValue = React.useMemo(\n    () => !open && renderCustomValue?.(value || undefined),\n    [open, renderCustomValue, value],\n  );\n\n  // при переключении месяцев высота календаря может меняться,\n  // чтобы календарь не прыгал при переключении месяцев каждый раз на\n  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n  // на ней, пока помещается.\n  const [calendarPlacement, setCalendarPlacement] =\n    React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n  const locale = useLocale();\n  const currentDateLabel = value\n    ? labelDateTimeFormat(locale, labelDateTimeFormatOptions).format(value)\n    : null;\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 && styles.hasBefore,\n        (showCalendarButton || showClearButton) && styles.hasAfter,\n        className,\n      )}\n      getRootRef={handleRootRef}\n      role=\"group\"\n      aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}\n      before={before}\n      after={\n        <React.Fragment>\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        </React.Fragment>\n      }\n      disabled={disabled}\n      {...props}\n    >\n      <div className={styles.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          tabIndex={readOnly ? 0 : -1}\n          name={name}\n          value={\n            value\n              ? enableTime\n                ? dateTimeFormatter.format(value)\n                : dateFormatter.format(value)\n              : ''\n          }\n          onFocus={handleFieldEnter}\n        />\n        <Text\n          className={classNames(styles.input, customValue && styles.hidden)}\n          // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n          // из-за чего `.Typography--normalize` перебивает стили.\n          normalize={false}\n          Component=\"span\" // для <span> нормализация не нужна\n          onClick={showCalendarOnInputAreaClick}\n        >\n          <NumberInputLike\n            value={internalValue[0]}\n            minValue={1}\n            maxValue={31}\n            length={2}\n            getRootRef={daysRef}\n            index={0}\n            onKeyDown={handleKeyDown}\n            onElementSelect={setFocusedElement}\n            label={changeDayLabel}\n            readOnly={readOnly}\n            data-testid={dayFieldTestId}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[1]}\n            minValue={1}\n            maxValue={12}\n            length={2}\n            getRootRef={monthsRef}\n            index={1}\n            onElementSelect={setFocusedElement}\n            onKeyDown={handleKeyDown}\n            readOnly={readOnly}\n            label={changeMonthLabel}\n            data-testid={monthFieldTestId}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[2]}\n            minValue={1}\n            maxValue={275750}\n            length={4}\n            getRootRef={yearsRef}\n            index={2}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeYearLabel}\n            onKeyDown={handleKeyDown}\n            data-testid={yearFieldTestId}\n          />\n          {enableTime && (\n            <React.Fragment>\n              <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>\n              <NumberInputLike\n                value={internalValue[3]}\n                minValue={1}\n                maxValue={24}\n                length={2}\n                getRootRef={hoursRef}\n                index={3}\n                onElementSelect={setFocusedElement}\n                readOnly={readOnly}\n                label={changeHoursLabel}\n                onKeyDown={handleKeyDown}\n                data-testid={hourFieldTestId}\n              />\n              <InputLikeDivider>:</InputLikeDivider>\n              <NumberInputLike\n                value={internalValue[4]}\n                minValue={1}\n                maxValue={59}\n                length={2}\n                getRootRef={minutesRef}\n                index={4}\n                onElementSelect={setFocusedElement}\n                readOnly={readOnly}\n                label={changeMinutesLabel}\n                onKeyDown={handleKeyDown}\n                data-testid={minuteFieldTestId}\n              />\n            </React.Fragment>\n          )}\n        </Text>\n        {customValue && (\n          <Text className={styles.customValue} aria-hidden normalize={false}>\n            {customValue}\n          </Text>\n        )}\n      </div>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          onPlacementChange={setCalendarPlacement}\n          autoUpdateOnTargetResize\n        >\n          <FocusTrap\n            rootRef={focusTrapRootRef}\n            disabled={disableFocusTrap ?? !accessible}\n            restoreFocus={restoreFocus ?? (Boolean(accessible) && handleRestoreFocus)}\n          >\n            <div ref={focusTrapRootRef}>\n              <Calendar\n                aria-label={calendarLabel}\n                role=\"dialog\"\n                value={value}\n                onChange={onCalendarChange}\n                enableTime={enableTime}\n                disablePast={disablePast}\n                disableFuture={disableFuture}\n                shouldDisableDate={shouldDisableDate}\n                onDoneButtonClick={onDoneButtonClick}\n                getRootRef={calendarRef}\n                doneButtonText={doneButtonText}\n                DoneButton={DoneButton}\n                disablePickers={disablePickers}\n                changeHoursLabel={changeHoursLabel}\n                changeMinutesLabel={changeMinutesLabel}\n                prevMonthLabel={prevMonthLabel}\n                nextMonthLabel={nextMonthLabel}\n                changeMonthLabel={changeMonthLabel}\n                changeYearLabel={changeYearLabel}\n                showNeighboringMonth={showNeighboringMonth}\n                renderDayContent={renderDayContent}\n                size={size}\n                viewDate={viewDate}\n                onHeaderChange={onHeaderChange}\n                onNextMonth={onNextMonth}\n                onPrevMonth={onPrevMonth}\n                prevMonthIcon={prevMonthIcon}\n                nextMonthIcon={nextMonthIcon}\n                minDateTime={minDateTime}\n                maxDateTime={maxDateTime}\n                timezone={timezone}\n                {...(calendarTestsProps ?? {})}\n              />\n            </div>\n          </FocusTrap>\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","useGlobalEscKeyDown","useLocale","convertDateToTimeZone","createDateInTimeZone","dateFormatter","dateTimeFormatter","isMatch","parse","startOfDay","startOfMinute","cacheDateTimeFormat","useIsomorphicLayoutEffect","Calendar","FocusTrap","FormField","IconButton","InputLikeDivider","NumberInputLike","Popper","Text","VisuallyHidden","useDateInputValue","styles","labelDateTimeFormatOptions","weekday","year","month","day","labelDateTimeFormat","densityClassNames","none","densityNone","compact","densityCompact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","valueProp","defaultValue","onChange","calendarPlacementProp","style","className","doneButtonText","DoneButton","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","accessible","calendarLabel","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","showNeighboringMonth","size","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","showCalendarButtonTestId","clearButtonTestId","id","onApply","renderCustomValue","timezone","restoreFocus","disableFocusTrap","readOnly","disableCalendarProp","ariaLabel","before","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","focusTrapRootRef","disableCalendar","updateValue","setInternalValue","getLastUpdatedValue","clearValue","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","now","Date","referenceDate","parsed","toUpdate","refs","useMemo","rootRef","calendarRef","open","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","closeCalendar","toggleCalendar","openCalendar","handleRestoreFocus","onClear","density","handleRootRef","resetValueOnCloseCalendar","onCalendarChange","valueForDisplay","onDoneButtonClick","customValue","undefined","calendarPlacement","setCalendarPlacement","useState","locale","currentDateLabel","format","currentDateLabelId","useId","ariaLabelId","showCalendarOnInputAreaClick","showCalendarButton","showClearButton","capture","hasBefore","hasAfter","role","aria-labelledby","after","Fragment","hoverMode","label","onClick","data-testid","div","wrapper","Component","aria-hidden","tabIndex","onFocus","input","hidden","normalize","minValue","maxValue","onKeyDown","onElementSelect","inputTimeDivider","targetRef","offsetByMainAxis","placement","onPlacementChange","autoUpdateOnTargetResize","Boolean","ref","aria-label"],"mappings":"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"}

package/dist/cssm/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";
@@ -183,7 +183,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/cssm/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","dateInputStyles","labelDateTimeFormatOptions","weekday","year","month","day","labelDateTimeFormat","densityClassNames","none","densityNone","compact","densityCompact","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","hasBefore","hasAfter","role","aria-labelledby","after","hoverMode","label","onClick","data-testid","div","wrapper","Component","aria-hidden","tabIndex","onFocus","input","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","dateInputStyles","labelDateTimeFormatOptions","weekday","year","month","day","labelDateTimeFormat","densityClassNames","none","densityNone","compact","densityCompact","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","hasBefore","hasAfter","role","aria-labelledby","after","hoverMode","label","onClick","data-testid","div","wrapper","Component","aria-hidden","tabIndex","onFocus","input","normalize","minValue","maxValue","onKeyDown","undefined","onElementSelect","targetRef","offsetByMainAxis","placement","onPlacementChange","Boolean","ref","aria-label"],"mappings":"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"}

package/dist/cssm/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/cssm/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/cssm/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/cssm/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/cssm/components/Flex/Flex.js

@@ -27,9 +27,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(styles.host, !noWrap && styles.wrap, reverse && styles.reverse, direction !== 'row' && styles.directionColumn, margin !== 'none' && styles.marginAuto, align && alignClassNames[align], justify && justifyClassNames[justify], getGapsPresets(rowGap, columnGap), display !== 'flex' && displayClassNames[display]),
+        baseClassName: classNames(styles.host, !noWrap && styles.wrap, reverse && styles.reverse, direction !== 'row' && styles.directionColumn, margin === 'auto' && styles.marginAuto, align && alignClassNames[align], justify && justifyClassNames[justify], getGapsPresets(rowGap, columnGap), display !== 'flex' && displayClassNames[display]),
         baseStyle: getGapsByUser(rowGap, columnGap),
         ...resolvedProps
     });

package/dist/cssm/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","styles","justifyClassNames","justifyStart","justifyEnd","justifyCenter","justifySpaceAround","justifySpaceBetween","justifySpaceEvenly","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","displayClassNames","displayNone","displayInlineFlex","Flex","gap","align","justify","margin","noWrap","direction","reverse","display","restProps","rowGap","columnGap","resolvedProps","baseClassName","host","wrap","directionColumn","marginAuto","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;AACnE,OAAOC,YAAY,oBAAoB;AAIvC,MAAMC,oBAAoB;IACxB,SAASD,OAAOE,YAAY;IAC5B,OAAOF,OAAOG,UAAU;IACxB,UAAUH,OAAOI,aAAa;IAC9B,gBAAgBJ,OAAOK,kBAAkB;IACzC,iBAAiBL,OAAOM,mBAAmB;IAC3C,gBAAgBN,OAAOO,kBAAkB;AAC3C;AAEA,MAAMC,kBAAkB;IACtBC,OAAOT,OAAOU,UAAU;IACxBC,KAAKX,OAAOY,QAAQ;IACpBC,QAAQb,OAAOc,WAAW;IAC1BC,SAASf,OAAOgB,YAAY;IAC5BC,UAAUjB,OAAOkB,aAAa;AAChC;AAEA,MAAMC,oBAAoB;IACxB,QAAQnB,OAAOoB,WAAW;IAC1B,eAAepB,OAAOqB,iBAAiB;AACzC;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,GAAGvC,aAAa6B;IACzC,MAAMW,gBAAgBtC,mBAAmBmC;IAEzC,qBACE,KAACjC;QACCqC,eAAe1C,WACbO,OAAOoC,IAAI,EACX,CAACT,UAAU3B,OAAOqC,IAAI,EACtBR,WAAW7B,OAAO6B,OAAO,EACzBD,cAAc,SAAS5B,OAAOsC,eAAe,EAC7CZ,WAAW,UAAU1B,OAAOuC,UAAU,EACtCf,SAAShB,eAAe,CAACgB,MAAM,EAC/BC,WAAWxB,iBAAiB,CAACwB,QAAQ,EACrCe,eAAeR,QAAQC,YACvBH,YAAY,UAAUX,iBAAiB,CAACW,QAAQ;QAElDW,WAAWC,cAAcV,QAAQC;QAChC,GAAGC,aAAa;;AAGvB,EAAE;AAEF,SAASM,eAAeR,MAAe,EAAEC,SAAkB;IACzD,OAAOxC,WACL,OAAOuC,WAAW,YAAYnC,gBAAgB,CAACmC,OAAO,EACtD,OAAOC,cAAc,YAAYtC,mBAAmB,CAACsC,UAAU;AAEnE;AAEA,SAASS,cAAcV,MAAe,EAAEC,SAAkB;IACxD,MAAMU,QAA6B,CAAC;IAEpC,IAAI,OAAOX,WAAW,UAAU;QAC9BW,KAAK,CAAC,2BAA2B,GAAG,GAAGX,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCU,KAAK,CAAC,8BAA8B,GAAG,GAAGV,UAAU,EAAE,CAAC;IACzD;IAEA,OAAOU;AACT;AAEArB,KAAKsB,IAAI,GAAG7C"}
+{"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","styles","justifyClassNames","justifyStart","justifyEnd","justifyCenter","justifySpaceAround","justifySpaceBetween","justifySpaceEvenly","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","displayClassNames","displayNone","displayInlineFlex","Flex","gap","align","justify","margin","noWrap","direction","reverse","display","restProps","rowGap","columnGap","resolvedProps","baseClassName","host","wrap","directionColumn","marginAuto","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;AACnE,OAAOC,YAAY,oBAAoB;AAIvC,MAAMC,oBAAoB;IACxB,SAASD,OAAOE,YAAY;IAC5B,OAAOF,OAAOG,UAAU;IACxB,UAAUH,OAAOI,aAAa;IAC9B,gBAAgBJ,OAAOK,kBAAkB;IACzC,iBAAiBL,OAAOM,mBAAmB;IAC3C,gBAAgBN,OAAOO,kBAAkB;AAC3C;AAEA,MAAMC,kBAAkB;IACtBC,OAAOT,OAAOU,UAAU;IACxBC,KAAKX,OAAOY,QAAQ;IACpBC,QAAQb,OAAOc,WAAW;IAC1BC,SAASf,OAAOgB,YAAY;IAC5BC,UAAUjB,OAAOkB,aAAa;AAChC;AAEA,MAAMC,oBAAoB;IACxB,QAAQnB,OAAOoB,WAAW;IAC1B,eAAepB,OAAOqB,iBAAiB;AACzC;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,GAAGvC,aAAa6B;IACzC,MAAMW,gBAAgBtC,mBACpB8B,WAAW,UAAUA,WAAW,SAASK,YAAY;QAAE,GAAGA,SAAS;QAAEL;IAAO;IAG9E,qBACE,KAAC5B;QACCqC,eAAe1C,WACbO,OAAOoC,IAAI,EACX,CAACT,UAAU3B,OAAOqC,IAAI,EACtBR,WAAW7B,OAAO6B,OAAO,EACzBD,cAAc,SAAS5B,OAAOsC,eAAe,EAC7CZ,WAAW,UAAU1B,OAAOuC,UAAU,EACtCf,SAAShB,eAAe,CAACgB,MAAM,EAC/BC,WAAWxB,iBAAiB,CAACwB,QAAQ,EACrCe,eAAeR,QAAQC,YACvBH,YAAY,UAAUX,iBAAiB,CAACW,QAAQ;QAElDW,WAAWC,cAAcV,QAAQC;QAChC,GAAGC,aAAa;;AAGvB,EAAE;AAEF,SAASM,eAAeR,MAAe,EAAEC,SAAkB;IACzD,OAAOxC,WACL,OAAOuC,WAAW,YAAYnC,gBAAgB,CAACmC,OAAO,EACtD,OAAOC,cAAc,YAAYtC,mBAAmB,CAACsC,UAAU;AAEnE;AAEA,SAASS,cAAcV,MAAe,EAAEC,SAAkB;IACxD,MAAMU,QAA6B,CAAC;IAEpC,IAAI,OAAOX,WAAW,UAAU;QAC9BW,KAAK,CAAC,2BAA2B,GAAG,GAAGX,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCU,KAAK,CAAC,8BAA8B,GAAG,GAAGV,UAAU,EAAE,CAAC;IACzD;IAEA,OAAOU;AACT;AAEArB,KAAKsB,IAAI,GAAG7C"}

package/dist/cssm/components/GridAvatar/GridAvatar.module.css

@@ -32,6 +32,6 @@
 
 .item:nth-last-child(n + 3) ~ .item:nth-last-child(2),
 /* четвертый с конца */
-  .item:nth-last-child(4) {
+.item:nth-last-child(4) {
   margin-block-end: var(--vkui_internal--grid_avatar_image_offset);
 }

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

@@ -61,7 +61,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/cssm/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","styles","positionPlacementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","placementMiddleStart","placementMiddle","placementMiddleEnd","inlineIndentClassNames","inlineIndent2xs","inlineIndentXs","inlineIndentS","inlineIndentM","inlineIndentL","inlineIndentXl","inlineIndent2xl","inlineIndent3xl","inlineIndent4xl","blockIndentClassNames","blockIndent2xs","blockIndentXs","blockIndentS","blockIndentM","blockIndentL","blockIndentXl","blockIndent2xl","blockIndent3xl","blockIndent4xl","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo","host"],"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;AAChE,OAAOC,YAAY,qCAAqC;AA0BxD,MAAMC,8BAA8B;IAClC,aAAaD,OAAOE,iBAAiB;IACrC,OAAOF,OAAOG,YAAY;IAC1B,WAAWH,OAAOI,eAAe;IACjC,gBAAgBJ,OAAOK,oBAAoB;IAC3C,UAAUL,OAAOM,eAAe;IAChC,cAAcN,OAAOO,kBAAkB;IACvC,gBAAgBP,OAAOQ,oBAAoB;IAC3C,UAAUR,OAAOS,eAAe;IAChC,cAAcT,OAAOU,kBAAkB;AACzC;AAEA,MAAMC,yBAAyB;IAC7B,OAAOX,OAAOY,eAAe;IAC7B,MAAMZ,OAAOa,cAAc;IAC3B,KAAKb,OAAOc,aAAa;IACzB,KAAKd,OAAOe,aAAa;IACzB,KAAKf,OAAOgB,aAAa;IACzB,MAAMhB,OAAOiB,cAAc;IAC3B,OAAOjB,OAAOkB,eAAe;IAC7B,OAAOlB,OAAOmB,eAAe;IAC7B,OAAOnB,OAAOoB,eAAe;AAC/B;AAEA,MAAMC,wBAAwB;IAC5B,OAAOrB,OAAOsB,cAAc;IAC5B,MAAMtB,OAAOuB,aAAa;IAC1B,KAAKvB,OAAOwB,YAAY;IACxB,KAAKxB,OAAOyB,YAAY;IACxB,KAAKzB,OAAO0B,YAAY;IACxB,MAAM1B,OAAO2B,aAAa;IAC1B,OAAO3B,OAAO4B,cAAc;IAC5B,OAAO5B,OAAO6B,cAAc;IAC5B,OAAO7B,OAAO8B,cAAc;AAC9B;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,GAAG/C,MAAMgD,QAAQ,CAACR,eAAe;IAC1D,MAAM,EAAES,mBAAmB,EAAEC,kBAAkB,EAAE,GAAGlD,MAAMmD,UAAU,CAAC/C;IAErEF,0BACE,SAASkD;QACPL,UAAUP,eAAe;IAC3B,GACA;QAACA;KAAW;IAGdtC,0BACE,SAASmD;QACP,IAAIb,eAAe,YAAY;YAC7B,MAAMc,cAAc,IAAMP,UAAU;YACpC,MAAMQ,aAAa,IAAMR,UAAU;YAEnCE,oBAAoBO,IAAI,CAACF;YACzBJ,mBAAmBM,IAAI,CAACD;YAExB,OAAO;gBACLlD,qBAAqB4C,qBAAqBK;gBAC1CjD,qBAAqB6C,oBAAoBK;YAC3C;QACF;QACA;IACF,GACA;QAACf;KAAW;IAGd,MAAM,CAACiB,mBAAmBC,kBAAkBC,uBAAuBC,qBAAqB,GACtF5D,MAAM6D,OAAO,CAAC;QACZ,MAAM,CAACJ,mBAAmBE,sBAAsB,GAAGrD,cACjDqC,cACA,mDACAzB;QAEF,MAAM,CAACwC,kBAAkBE,qBAAqB,GAAGtD,cAC/CsC,aACA,iDACAhB;QAGF,OAAO;YAAC6B;YAAmBC;YAAkBC;YAAuBC;SAAqB;IAC3F,GAAG;QAACjB;QAAcC;KAAY;IAEhC,qBACE,KAACzC;QACE,GAAG0C,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACR,GAAGgB,iBAAiB;YACpB,GAAGC,gBAAgB;QACrB;QACAhB,WAAWzC,WACTM,OAAOuD,IAAI,EACXhB,UAAUvC,OAAOuC,MAAM,EACvBtC,2BAA2B,CAAC+B,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","styles","positionPlacementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","placementMiddleStart","placementMiddle","placementMiddleEnd","inlineIndentClassNames","inlineIndent2xs","inlineIndentXs","inlineIndentS","inlineIndentM","inlineIndentL","inlineIndentXl","inlineIndent2xl","inlineIndent3xl","inlineIndent4xl","blockIndentClassNames","blockIndent2xs","blockIndentXs","blockIndentS","blockIndentM","blockIndentL","blockIndentXl","blockIndent2xl","blockIndent3xl","blockIndent4xl","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo","host"],"mappings":"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"}

package/dist/cssm/components/NativeSelect/NativeSelect.js

@@ -70,8 +70,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(styles.host, 'vkuiInternalNativeSelect', before && styles.hasBefore, empty && styles.empty, multiline && styles.multiline, align === 'center' && styles.alignCenter, align === 'right' && styles.alignRight, density !== 'regular' && densityClassNames[density], className),
@@ -89,7 +93,7 @@ disabled, required, autoFocus, id, name, form, onClick, onFocus, onBlur, slotPro
                 baseClassName: styles.el,
                 value: value !== undefined ? remapFromSelectValueToNativeValue(value) : value,
                 defaultValue: defaultValue !== undefined ? remapFromSelectValueToNativeValue(defaultValue) : defaultValue,
-                onChange: callMultiple(_onChange, checkSelectedOption),
+                onChange: onSelectChange,
                 getRootRef: selectRef,
                 ...selectRest,
                 children: [