@vkontakte/vkui 7.1.3 → 7.2.0

package/dist/cssm/components/DateRangeInput/DateRangeInput.js

@@ -6,6 +6,7 @@ import { classNames } from "@vkontakte/vkjs";
 import { isAfter } from "date-fns";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useDateInput } from "../../hooks/useDateInput.js";
+import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { callMultiple } from "../../lib/callMultiple.js";
 import { format, isMatch, parse } from "../../lib/date.js";
@@ -72,13 +73,18 @@ const getInternalValue = (value)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/DateRangeInput
- */ export const DateRangeInput = ({ shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement = 'bottom-start', style, className, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'Изменить день', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeStartDayLabel = 'Изменить день начала', changeStartMonthLabel = 'Изменить месяц начала', changeStartYearLabel = 'Изменить год начала', changeEndDayLabel = 'Изменить день окончания', changeEndMonthLabel = 'Изменить месяц окончания', changeEndYearLabel = 'Изменить год окончания', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', prevMonthIcon, nextMonthIcon, disableCalendar = false, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, id, ...props })=>{
+ */ export const DateRangeInput = ({ shouldDisableDate, disableFuture, disablePast, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp = 'bottom-start', style, className, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'Изменить день', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeStartDayLabel = 'Изменить день начала', changeStartMonthLabel = 'Изменить месяц начала', changeStartYearLabel = 'Изменить год начала', changeEndDayLabel = 'Изменить день окончания', changeEndMonthLabel = 'Изменить месяц окончания', changeEndYearLabel = 'Изменить год окончания', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', prevMonthIcon, nextMonthIcon, disableCalendar = false, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, id, ...props })=>{
     const daysStartRef = React.useRef(null);
     const monthsStartRef = React.useRef(null);
     const yearsStartRef = React.useRef(null);
     const daysEndRef = React.useRef(null);
     const monthsEndRef = React.useRef(null);
     const yearsEndRef = React.useRef(null);
+    const [value, updateValue] = useCustomEnsuredControl({
+        value: valueProp,
+        defaultValue,
+        onChange
+    });
     const onInternalValueChange = React.useCallback((internalValue)=>{
         let isStartValid = true;
         let isEndValid = true;
@@ -109,13 +115,13 @@ const getInternalValue = (value)=>{
         const start = isStartValid ? parse(formattedStartValue, mask, valueExists && value?.[0] || now) : null;
         const end = isEndValid ? parse(formattedEndValue, mask, valueExists && value?.[1] || now) : null;
         if (start && end && isAfter(end, start)) {
-            onChange?.([
+            updateValue([
                 start,
                 end
             ]);
         }
     }, [
-        onChange,
+        updateValue,
         value
     ]);
     const refs = React.useMemo(()=>[
@@ -139,7 +145,7 @@ const getInternalValue = (value)=>{
         autoFocus,
         disabled,
         elementsConfig,
-        onChange,
+        onChange: updateValue,
         onInternalValueChange,
         getInternalValue,
         value,
@@ -148,16 +154,21 @@ const getInternalValue = (value)=>{
     const { sizeY = 'none' } = useAdaptivity();
     const handleRootRef = useExternRef(rootRef, getRootRef);
     const onCalendarChange = React.useCallback((newValue)=>{
-        onChange?.(newValue);
+        updateValue(newValue);
         if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {
             removeFocusFromField();
         }
     }, [
-        onChange,
+        updateValue,
         closeOnChange,
         value,
         removeFocusFromField
     ]);
+    // при переключении месяцев высота календаря может меняться,
+    // чтобы календарь не прыгал при переключении месяцев каждый раз на
+    // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался
+    // на ней, пока помещается.
+    const [calendarPlacement, setCalendarPlacement] = React.useState(calendarPlacementProp);
     return /*#__PURE__*/ _jsxs(FormField, {
         style: style,
         className: classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className),
@@ -186,84 +197,89 @@ const getInternalValue = (value)=>{
         onFocus: callMultiple(handleFieldEnter, onFocus),
         ...props,
         children: [
-            /*#__PURE__*/ _jsx(VisuallyHidden, {
-                id: id,
-                Component: "input",
-                name: name,
-                value: value ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${value[1] ? format(value[1], 'dd.MM.yyyy') : ''}` : ''
-            }),
-            /*#__PURE__*/ _jsxs(Text, {
-                className: dateInputStyles.input,
-                onKeyDown: handleKeyDown,
+            /*#__PURE__*/ _jsxs("div", {
+                className: dateInputStyles.wrapper,
                 children: [
-                    /*#__PURE__*/ _jsx(InputLike, {
-                        length: 2,
-                        getRootRef: daysStartRef,
-                        index: 0,
-                        onElementSelect: setFocusedElement,
-                        value: internalValue[0],
-                        label: changeStartDayLabel,
-                        "data-testid": startDateTestsProps?.day
-                    }),
-                    /*#__PURE__*/ _jsx(InputLikeDivider, {
-                        children: "."
-                    }),
-                    /*#__PURE__*/ _jsx(InputLike, {
-                        length: 2,
-                        getRootRef: monthsStartRef,
-                        index: 1,
-                        onElementSelect: setFocusedElement,
-                        value: internalValue[1],
-                        label: changeStartMonthLabel,
-                        "data-testid": startDateTestsProps?.month
-                    }),
-                    /*#__PURE__*/ _jsx(InputLikeDivider, {
-                        children: "."
-                    }),
-                    /*#__PURE__*/ _jsx(InputLike, {
-                        length: 4,
-                        getRootRef: yearsStartRef,
-                        index: 2,
-                        onElementSelect: setFocusedElement,
-                        value: internalValue[2],
-                        label: changeStartYearLabel,
-                        "data-testid": startDateTestsProps?.year
-                    }),
-                    /*#__PURE__*/ _jsx(InputLikeDivider, {
-                        children: ' — '
-                    }),
-                    /*#__PURE__*/ _jsx(InputLike, {
-                        length: 2,
-                        getRootRef: daysEndRef,
-                        index: 3,
-                        onElementSelect: setFocusedElement,
-                        value: internalValue[3],
-                        label: changeEndDayLabel,
-                        "data-testid": endDateTestsProps?.day
-                    }),
-                    /*#__PURE__*/ _jsx(InputLikeDivider, {
-                        children: "."
-                    }),
-                    /*#__PURE__*/ _jsx(InputLike, {
-                        length: 2,
-                        getRootRef: monthsEndRef,
-                        index: 4,
-                        onElementSelect: setFocusedElement,
-                        value: internalValue[4],
-                        label: changeEndMonthLabel,
-                        "data-testid": endDateTestsProps?.month
-                    }),
-                    /*#__PURE__*/ _jsx(InputLikeDivider, {
-                        children: "."
+                    /*#__PURE__*/ _jsx(VisuallyHidden, {
+                        id: id,
+                        Component: "input",
+                        name: name,
+                        value: value ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${value[1] ? format(value[1], 'dd.MM.yyyy') : ''}` : ''
                     }),
-                    /*#__PURE__*/ _jsx(InputLike, {
-                        length: 4,
-                        getRootRef: yearsEndRef,
-                        index: 5,
-                        onElementSelect: setFocusedElement,
-                        value: internalValue[5],
-                        label: changeEndYearLabel,
-                        "data-testid": endDateTestsProps?.year
+                    /*#__PURE__*/ _jsxs(Text, {
+                        className: dateInputStyles.input,
+                        onKeyDown: handleKeyDown,
+                        children: [
+                            /*#__PURE__*/ _jsx(InputLike, {
+                                length: 2,
+                                getRootRef: daysStartRef,
+                                index: 0,
+                                onElementSelect: setFocusedElement,
+                                value: internalValue[0],
+                                label: changeStartDayLabel,
+                                "data-testid": startDateTestsProps?.day
+                            }),
+                            /*#__PURE__*/ _jsx(InputLikeDivider, {
+                                children: "."
+                            }),
+                            /*#__PURE__*/ _jsx(InputLike, {
+                                length: 2,
+                                getRootRef: monthsStartRef,
+                                index: 1,
+                                onElementSelect: setFocusedElement,
+                                value: internalValue[1],
+                                label: changeStartMonthLabel,
+                                "data-testid": startDateTestsProps?.month
+                            }),
+                            /*#__PURE__*/ _jsx(InputLikeDivider, {
+                                children: "."
+                            }),
+                            /*#__PURE__*/ _jsx(InputLike, {
+                                length: 4,
+                                getRootRef: yearsStartRef,
+                                index: 2,
+                                onElementSelect: setFocusedElement,
+                                value: internalValue[2],
+                                label: changeStartYearLabel,
+                                "data-testid": startDateTestsProps?.year
+                            }),
+                            /*#__PURE__*/ _jsx(InputLikeDivider, {
+                                children: ' — '
+                            }),
+                            /*#__PURE__*/ _jsx(InputLike, {
+                                length: 2,
+                                getRootRef: daysEndRef,
+                                index: 3,
+                                onElementSelect: setFocusedElement,
+                                value: internalValue[3],
+                                label: changeEndDayLabel,
+                                "data-testid": endDateTestsProps?.day
+                            }),
+                            /*#__PURE__*/ _jsx(InputLikeDivider, {
+                                children: "."
+                            }),
+                            /*#__PURE__*/ _jsx(InputLike, {
+                                length: 2,
+                                getRootRef: monthsEndRef,
+                                index: 4,
+                                onElementSelect: setFocusedElement,
+                                value: internalValue[4],
+                                label: changeEndMonthLabel,
+                                "data-testid": endDateTestsProps?.month
+                            }),
+                            /*#__PURE__*/ _jsx(InputLikeDivider, {
+                                children: "."
+                            }),
+                            /*#__PURE__*/ _jsx(InputLike, {
+                                length: 4,
+                                getRootRef: yearsEndRef,
+                                index: 5,
+                                onElementSelect: setFocusedElement,
+                                value: internalValue[5],
+                                label: changeEndYearLabel,
+                                "data-testid": endDateTestsProps?.year
+                            })
+                        ]
                     })
                 ]
             }),
@@ -271,6 +287,7 @@ const getInternalValue = (value)=>{
                 targetRef: rootRef,
                 offsetByMainAxis: 8,
                 placement: calendarPlacement,
+                onPlacementChange: setCalendarPlacement,
                 children: /*#__PURE__*/ _jsx(CalendarRange, {
                     value: value,
                     onChange: onCalendarChange,

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 { isAfter } from 'date-fns';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport {\n  CalendarRange,\n  type CalendarRangeProps,\n  type CalendarRangeTestsProps,\n  type DateRangeType,\n} from '../CalendarRange/CalendarRange';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\ntype DateTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для поля ввода дня\n   */\n  day?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода месяца\n   */\n  month?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода года\n   */\n  year?: string;\n};\n\nexport type DateRangeInputTestsProps = {\n  /**\n   * Передает атрибуты `data-testid` для полей ввода начальной даты\n   */\n  startDateTestsProps?: DateTestsProps;\n  /**\n   * Передает атрибуты `data-testid` для полей ввода конечной даты\n   */\n  endDateTestsProps?: DateTestsProps;\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | '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   * Передает атрибуты `data-testid` для интерактивных элементов в календаре\n   */\n  calendarTestsProps?: CalendarRangeTestsProps;\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  onCalendarOpenChanged?: (opened: boolean) => void;\n  clearFieldLabel?: string;\n  showCalendarLabel?: string;\n  changeStartDayLabel?: string;\n  changeStartMonthLabel?: string;\n  changeStartYearLabel?: string;\n  changeEndDayLabel?: string;\n  changeEndMonthLabel?: string;\n  changeEndYearLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'Изменить день',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeStartDayLabel = 'Изменить день начала',\n  changeStartMonthLabel = 'Изменить месяц начала',\n  changeStartYearLabel = 'Изменить год начала',\n  changeEndDayLabel = 'Изменить день окончания',\n  changeEndMonthLabel = 'Изменить месяц окончания',\n  changeEndYearLabel = 'Изменить год окончания',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  onCalendarOpenChanged,\n  renderDayContent,\n  calendarTestsProps,\n  startDateTestsProps,\n  endDateTestsProps,\n  id,\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\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'dd.MM.yyyy';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n    onCalendarOpenChanged,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue: DateRangeType | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" onClick={clear}>\n            <VisuallyHidden>{clearFieldLabel}</VisuallyHidden>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" onClick={openCalendar}>\n            <VisuallyHidden>{showCalendarLabel}</VisuallyHidden>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <VisuallyHidden\n        id={id}\n        Component=\"input\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${\n                value[1] ? format(value[1], 'dd.MM.yyyy') : ''\n              }`\n            : ''\n        }\n      />\n      <Text className={dateInputStyles.input} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          label={changeStartDayLabel}\n          data-testid={startDateTestsProps?.day}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          label={changeStartMonthLabel}\n          data-testid={startDateTestsProps?.month}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          label={changeStartYearLabel}\n          data-testid={startDateTestsProps?.year}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          label={changeEndDayLabel}\n          data-testid={endDateTestsProps?.day}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          label={changeEndMonthLabel}\n          data-testid={endDateTestsProps?.month}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          label={changeEndYearLabel}\n          data-testid={endDateTestsProps?.year}\n        />\n      </Text>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetByMainAxis={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n            renderDayContent={renderDayContent}\n            {...calendarTestsProps}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","isAfter","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","VisuallyHidden","styles","dateInputStyles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeStartDayLabel","changeStartMonthLabel","changeStartYearLabel","changeEndDayLabel","changeEndMonthLabel","changeEndYearLabel","clearFieldLabel","showCalendarLabel","prevMonthIcon","nextMonthIcon","disableCalendar","onCalendarOpenChanged","renderDayContent","calendarTestsProps","startDateTestsProps","endDateTestsProps","id","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","sizeY","handleRootRef","onCalendarChange","after","hoverMode","Component","input","onKeyDown","onElementSelect","label","data-testid","day","month","year","targetRef","offsetByMainAxis","placement","onClose"],"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 { isAfter } from 'date-fns';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport {\n  CalendarRange,\n  type CalendarRangeProps,\n  type CalendarRangeTestsProps,\n  type DateRangeType,\n} from '../CalendarRange/CalendarRange';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\ntype DateTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для поля ввода дня\n   */\n  day?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода месяца\n   */\n  month?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода года\n   */\n  year?: string;\n};\n\nexport type DateRangeInputTestsProps = {\n  /**\n   * Передает атрибуты `data-testid` для полей ввода начальной даты\n   */\n  startDateTestsProps?: DateTestsProps;\n  /**\n   * Передает атрибуты `data-testid` для полей ввода конечной даты\n   */\n  endDateTestsProps?: DateTestsProps;\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      | 'onChange'\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   * Передает атрибуты `data-testid` для интерактивных элементов в календаре\n   */\n  calendarTestsProps?: CalendarRangeTestsProps;\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  onCalendarOpenChanged?: (opened: boolean) => void;\n  clearFieldLabel?: string;\n  showCalendarLabel?: string;\n  changeStartDayLabel?: string;\n  changeStartMonthLabel?: string;\n  changeStartYearLabel?: string;\n  changeEndDayLabel?: string;\n  changeEndMonthLabel?: string;\n  changeEndYearLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value: 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  onClick,\n  onFocus,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'Изменить день',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeStartDayLabel = 'Изменить день начала',\n  changeStartMonthLabel = 'Изменить месяц начала',\n  changeStartYearLabel = 'Изменить год начала',\n  changeEndDayLabel = 'Изменить день окончания',\n  changeEndMonthLabel = 'Изменить месяц окончания',\n  changeEndYearLabel = 'Изменить год окончания',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  onCalendarOpenChanged,\n  renderDayContent,\n  calendarTestsProps,\n  startDateTestsProps,\n  endDateTestsProps,\n  id,\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\n  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | undefined>({\n    value: valueProp,\n    defaultValue,\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 && isAfter(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 {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange: updateValue,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n    onCalendarOpenChanged,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue: DateRangeType | undefined) => {\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  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" onClick={clear}>\n            <VisuallyHidden>{clearFieldLabel}</VisuallyHidden>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" onClick={openCalendar}>\n            <VisuallyHidden>{showCalendarLabel}</VisuallyHidden>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <div className={dateInputStyles.wrapper}>\n        <VisuallyHidden\n          id={id}\n          Component=\"input\"\n          name={name}\n          value={\n            value\n              ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${\n                  value[1] ? format(value[1], 'dd.MM.yyyy') : ''\n                }`\n              : ''\n          }\n        />\n        <Text className={dateInputStyles.input} onKeyDown={handleKeyDown}>\n          <InputLike\n            length={2}\n            getRootRef={daysStartRef}\n            index={0}\n            onElementSelect={setFocusedElement}\n            value={internalValue[0]}\n            label={changeStartDayLabel}\n            data-testid={startDateTestsProps?.day}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <InputLike\n            length={2}\n            getRootRef={monthsStartRef}\n            index={1}\n            onElementSelect={setFocusedElement}\n            value={internalValue[1]}\n            label={changeStartMonthLabel}\n            data-testid={startDateTestsProps?.month}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <InputLike\n            length={4}\n            getRootRef={yearsStartRef}\n            index={2}\n            onElementSelect={setFocusedElement}\n            value={internalValue[2]}\n            label={changeStartYearLabel}\n            data-testid={startDateTestsProps?.year}\n          />\n          <InputLikeDivider>{' — '}</InputLikeDivider>\n          <InputLike\n            length={2}\n            getRootRef={daysEndRef}\n            index={3}\n            onElementSelect={setFocusedElement}\n            value={internalValue[3]}\n            label={changeEndDayLabel}\n            data-testid={endDateTestsProps?.day}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <InputLike\n            length={2}\n            getRootRef={monthsEndRef}\n            index={4}\n            onElementSelect={setFocusedElement}\n            value={internalValue[4]}\n            label={changeEndMonthLabel}\n            data-testid={endDateTestsProps?.month}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <InputLike\n            length={4}\n            getRootRef={yearsEndRef}\n            index={5}\n            onElementSelect={setFocusedElement}\n            value={internalValue[5]}\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          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n            renderDayContent={renderDayContent}\n            {...calendarTestsProps}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","isAfter","useAdaptivity","useDateInput","useCustomEnsuredControl","useExternRef","callMultiple","format","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","VisuallyHidden","styles","dateInputStyles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","valueProp","defaultValue","onChange","calendarPlacement","calendarPlacementProp","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeStartDayLabel","changeStartMonthLabel","changeStartYearLabel","changeEndDayLabel","changeEndMonthLabel","changeEndYearLabel","clearFieldLabel","showCalendarLabel","prevMonthIcon","nextMonthIcon","disableCalendar","onCalendarOpenChanged","renderDayContent","calendarTestsProps","startDateTestsProps","endDateTestsProps","id","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","updateValue","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","sizeY","handleRootRef","onCalendarChange","setCalendarPlacement","useState","after","hoverMode","div","wrapper","Component","input","onKeyDown","onElementSelect","label","data-testid","day","month","year","targetRef","offsetByMainAxis","placement","onPlacementChange","onClose"],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 .input {
+  z-index: var(--vkui_internal--z_index_form_field_element);
   flex-grow: 1;
   align-self: center;
   margin-inline: 10px 14px;
-  z-index: var(--vkui_internal--z_index_form_field_element);
-  cursor: text;
+  font-variant-numeric: tabular-nums;
   white-space: nowrap;
+  cursor: text;
   -webkit-user-select: text;
      -moz-user-select: text;
           user-select: text;
-  font-variant-numeric: tabular-nums;
 }
 
 .sizeYCompact .input {

package/dist/cssm/components/DirectionProvider/DirectionProvider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ConfigProviderOverride } from "../ConfigProvider/ConfigProviderOverride.js";
+/**
+ * Компонент, прокидывающий направление контента
+ * @see https://vkcom.github.io/VKUI/#/DirectionProvider
+ * @since 7.2.0
+ */ export function DirectionProvider({ value, children }) {
+    return /*#__PURE__*/ _jsx(ConfigProviderOverride, {
+        direction: value,
+        children: children
+    });
+}
+
+//# sourceMappingURL=DirectionProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/DirectionProvider/DirectionProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { type ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface DirectionProviderProps {\n  value: ConfigProviderContextInterface['direction'];\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, прокидывающий направление контента\n * @see https://vkcom.github.io/VKUI/#/DirectionProvider\n * @since 7.2.0\n */\nexport function DirectionProvider({ value, children }: DirectionProviderProps): React.ReactNode {\n  return <ConfigProviderOverride direction={value}>{children}</ConfigProviderOverride>;\n}\n"],"names":["React","ConfigProviderOverride","DirectionProvider","value","children","direction"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,8CAA2C;AAOlF;;;;CAIC,GACD,OAAO,SAASC,kBAAkB,EAAEC,KAAK,EAAEC,QAAQ,EAA0B;IAC3E,qBAAO,KAACH;QAAuBI,WAAWF;kBAAQC;;AACpD"}

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

@@ -3,11 +3,11 @@
 }
 
 .host::before {
-  content: '';
   position: absolute;
   inset: 0;
-  border-radius: var(--vkui--size_border_radius--regular);
+  content: '';
   border: 1px dashed var(--vkui--color_separator_primary);
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .active::before {

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

@@ -1,6 +1,5 @@
 .host {
   position: fixed;
-  box-sizing: border-box;
   /**
    * ⚠️ WARNING ⚠️
    * `left: auto` решает следующие задачи:
@@ -13,6 +12,7 @@
    */
   inset-inline-start: auto;
   z-index: var(--vkui_internal--z_index_fixed_layout);
+  box-sizing: border-box;
   padding-inline: var(--vkui_internal--safe_area_inset_left)
     var(--vkui_internal--safe_area_inset_right);
 }
@@ -22,13 +22,13 @@
 }
 
 .verticalTop {
-  inline-size: 100%;
   inset-block-start: 0;
+  inline-size: 100%;
 }
 
 .verticalBottom {
-  inline-size: 100%;
   inset-block-end: 0;
+  inline-size: 100%;
   -webkit-padding-after: var(--vkui_internal--safe_area_inset_bottom);
           padding-block-end: var(--vkui_internal--safe_area_inset_bottom);
 }

package/dist/cssm/components/Flex/Flex.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children } from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { calculateGap, columnGapClassNames, rowGapClassNames } from "../../lib/layouts/index.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
@@ -20,12 +19,11 @@ const alignClassNames = {
     stretch: styles.alignStretch,
     baseline: styles.alignBaseline
 };
-export const Flex = ({ gap, align, justify, margin = 'none', noWrap = false, direction = 'row', reverse = false, children, ...props })=>{
-    const withGaps = Children.count(children) > 1 && gap;
-    const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined);
+export const Flex = ({ gap = 0, align, justify, margin = 'none', noWrap = false, direction = 'row', reverse = false, children, ...props })=>{
+    const [rowGap, columnGap] = calculateGap(gap);
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...props,
-        baseClassName: classNames(styles.host, !noWrap && styles.wrap, reverse && styles.reverse, direction !== 'row' && styles.directionColumn, margin !== 'none' && styles.marginAuto, align && alignClassNames[align], justify && justifyClassNames[justify], withGaps && styles.withGaps, withGaps && getGapsPresets(rowGap, columnGap)),
+        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)),
         baseStyle: getGapsByUser(rowGap, columnGap),
         children: children
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { Children } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapProp,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\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\ntype FlexContentProps =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\nexport interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  /**\n   * Направление осей, эквивалентно `flex-direction`.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.\n   */\n  noWrap?: boolean;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n  /**\n   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.\n   */\n  justify?: FlexContentProps;\n  /**\n   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.\n   */\n  margin?: 'none' | 'auto';\n  /**\n   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.\n   */\n  reverse?: boolean;\n}\n\nexport const Flex: React.FC<FlexProps> & {\n  Item: typeof FlexItem;\n} = ({\n  gap,\n  align,\n  justify,\n  margin = 'none',\n  noWrap = false,\n  direction = 'row',\n  reverse = false,\n  children,\n  ...props\n}: FlexProps) => {\n  const withGaps = Children.count(children) > 1 && gap;\n  const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined);\n\n  return (\n    <RootComponent\n      {...props}\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        withGaps && styles.withGaps,\n        withGaps && getGapsPresets(rowGap, columnGap),\n      )}\n      baseStyle={getGapsByUser(rowGap, columnGap)}\n    >\n      {children}\n    </RootComponent>\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":["Children","classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","FlexItem","styles","justifyClassNames","justifyStart","justifyEnd","justifyCenter","justifySpaceAround","justifySpaceBetween","justifySpaceEvenly","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","Flex","gap","align","justify","margin","noWrap","direction","reverse","children","props","withGaps","count","rowGap","columnGap","undefined","baseClassName","host","wrap","directionColumn","marginAuto","getGapsPresets","baseStyle","getGapsByUser","style","Item"],"mappings":";AAAA,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAGnBC,gBAAgB,QACX,6BAAoB;AAE3B,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;AA2CA,OAAO,MAAMC,OAET,CAAC,EACHC,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,UAAU,KAAK,EACfC,QAAQ,EACR,GAAGC,OACO;IACV,MAAMC,WAAWpC,SAASqC,KAAK,CAACH,YAAY,KAAKP;IACjD,MAAM,CAACW,QAAQC,UAAU,GAAGrC,aAAakC,WAAWT,MAAMa;IAE1D,qBACE,KAACnC;QACE,GAAG8B,KAAK;QACTM,eAAexC,WACbM,OAAOmC,IAAI,EACX,CAACX,UAAUxB,OAAOoC,IAAI,EACtBV,WAAW1B,OAAO0B,OAAO,EACzBD,cAAc,SAASzB,OAAOqC,eAAe,EAC7Cd,WAAW,UAAUvB,OAAOsC,UAAU,EACtCjB,SAASb,eAAe,CAACa,MAAM,EAC/BC,WAAWrB,iBAAiB,CAACqB,QAAQ,EACrCO,YAAY7B,OAAO6B,QAAQ,EAC3BA,YAAYU,eAAeR,QAAQC;QAErCQ,WAAWC,cAAcV,QAAQC;kBAEhCL;;AAGP,EAAE;AAEF,SAASY,eAAeR,MAAgB,EAAEC,SAAmB;IAC3D,OAAOtC,WACL,OAAOqC,WAAW,YAAYlC,gBAAgB,CAACkC,OAAO,EACtD,OAAOC,cAAc,YAAYpC,mBAAmB,CAACoC,UAAU;AAEnE;AAEA,SAASS,cAAcV,MAAgB,EAAEC,SAAmB;IAC1D,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;AAEAvB,KAAKwB,IAAI,GAAG5C"}
+{"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  rowGapClassNames,\n} from '../../lib/layouts';\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\ntype FlexContentProps =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\nexport interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  /**\n   * Направление осей, эквивалентно `flex-direction`.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.\n   */\n  noWrap?: boolean;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n  /**\n   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.\n   */\n  justify?: FlexContentProps;\n  /**\n   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.\n   */\n  margin?: 'none' | 'auto';\n  /**\n   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.\n   */\n  reverse?: boolean;\n}\n\nexport const Flex: React.FC<FlexProps> & {\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  children,\n  ...props\n}: FlexProps) => {\n  const [rowGap, columnGap] = calculateGap(gap);\n\n  return (\n    <RootComponent\n      {...props}\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      )}\n      baseStyle={getGapsByUser(rowGap, columnGap)}\n    >\n      {children}\n    </RootComponent>\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","rowGapClassNames","RootComponent","FlexItem","styles","justifyClassNames","justifyStart","justifyEnd","justifyCenter","justifySpaceAround","justifySpaceBetween","justifySpaceEvenly","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","Flex","gap","align","justify","margin","noWrap","direction","reverse","children","props","rowGap","columnGap","baseClassName","host","wrap","directionColumn","marginAuto","getGapsPresets","baseStyle","getGapsByUser","style","Item"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAGnBC,gBAAgB,QACX,6BAAoB;AAE3B,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;AA2CA,OAAO,MAAMC,OAET,CAAC,EACHC,MAAM,CAAC,EACPC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,UAAU,KAAK,EACfC,QAAQ,EACR,GAAGC,OACO;IACV,MAAM,CAACC,QAAQC,UAAU,GAAGnC,aAAayB;IAEzC,qBACE,KAACtB;QACE,GAAG8B,KAAK;QACTG,eAAerC,WACbM,OAAOgC,IAAI,EACX,CAACR,UAAUxB,OAAOiC,IAAI,EACtBP,WAAW1B,OAAO0B,OAAO,EACzBD,cAAc,SAASzB,OAAOkC,eAAe,EAC7CX,WAAW,UAAUvB,OAAOmC,UAAU,EACtCd,SAASb,eAAe,CAACa,MAAM,EAC/BC,WAAWrB,iBAAiB,CAACqB,QAAQ,EACrCc,eAAeP,QAAQC;QAEzBO,WAAWC,cAAcT,QAAQC;kBAEhCH;;AAGP,EAAE;AAEF,SAASS,eAAeP,MAAgB,EAAEC,SAAmB;IAC3D,OAAOpC,WACL,OAAOmC,WAAW,YAAYhC,gBAAgB,CAACgC,OAAO,EACtD,OAAOC,cAAc,YAAYlC,mBAAmB,CAACkC,UAAU;AAEnE;AAEA,SAASQ,cAAcT,MAAgB,EAAEC,SAAmB;IAC1D,MAAMS,QAA6B,CAAC;IAEpC,IAAI,OAAOV,WAAW,UAAU;QAC9BU,KAAK,CAAC,2BAA2B,GAAG,GAAGV,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCS,KAAK,CAAC,8BAA8B,GAAG,GAAGT,UAAU,EAAE,CAAC;IACzD;IAEA,OAAOS;AACT;AAEApB,KAAKqB,IAAI,GAAGzC"}

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

@@ -9,23 +9,49 @@
   --vkui_internal--flex_original_margin_inline: var(--vkui--size_base_padding_horizontal--regular);
   --vkui_internal--flex_original_margin_block: var(--vkui--size_base_padding_vertical--regular);
 
-  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
   margin-block: var(--vkui--size_base_padding_vertical--regular);
+  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
-.withGaps {
-  -webkit-margin-before: calc(
-    -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
-  );
-          margin-block-start: calc(
-    -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
-  );
-  -webkit-margin-start: calc(
-    -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
-  );
-          margin-inline-start: calc(
-    -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
-  );
+/*TODO [>=8]: Проверить браузерную поддержку gap*/
+
+/*Данная проверка позволяет максимально близко определить поддерживается ли gap + flex*/
+
+/*см. https://github.com/w3c/csswg-drafts/issues/3559#issuecomment-1758459996*/
+
+/*Поддержка inset https://developer.mozilla.org/en-US/docs/Web/CSS/inset#browser_compatibility*/
+
+/*Поддержка gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility*/
+
+@supports (inset: 0) {
+  .host {
+    gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap);
+  }
+}
+
+@supports not (inset: 0) {
+  .host {
+    -webkit-margin-before: calc(
+      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+    );
+            margin-block-start: calc(
+      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+    );
+    -webkit-margin-start: calc(
+      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+    );
+            margin-inline-start: calc(
+      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+    );
+  }
+
+  /* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+  .host.host > * {
+    -webkit-margin-before: var(--vkui_internal--row_gap);
+            margin-block-start: var(--vkui_internal--row_gap);
+    -webkit-margin-start: var(--vkui_internal--column_gap);
+            margin-inline-start: var(--vkui_internal--column_gap);
+  }
 }
 
 .host > .marginAuto {
@@ -96,12 +122,3 @@
 .alignBaseline {
   align-items: baseline;
 }
-
-/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
-
-.withGaps.withGaps > * {
-  -webkit-margin-before: var(--vkui_internal--row_gap);
-          margin-block-start: var(--vkui_internal--row_gap);
-  -webkit-margin-start: var(--vkui_internal--column_gap);
-          margin-inline-start: var(--vkui_internal--column_gap);
-}

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

@@ -3,8 +3,8 @@
 }
 
 .in {
-  content: '';
   display: block;
+  content: '';
 
   /* см. "Примечание" в DefaultIcon.tsx. */
   transform: translateY(1px);

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

@@ -2,6 +2,6 @@
   display: block;
   padding-block: 24px;
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  text-align: center;
   color: var(--vkui--color_text_secondary);
+  text-align: center;
 }