npm - @vkontakte/vkui - Versions diffs - 6.1.2 → 6.2.1 - Mend

@vkontakte/vkui 6.1.2 → 6.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2068) hide show

package/dist/cssm/components/DatePicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { leadingZero } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { HasOnlyExpectedProps, HTMLAttributesWithRootRef } from '../../types';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input, type InputProps } from '../Input/Input';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n 'Января',\n 'Февраля',\n 'Марта',\n 'Апреля',\n 'Мая',\n 'Июня',\n 'Июля',\n 'Августа',\n 'Сентября',\n 'Октября',\n 'Ноября',\n 'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n day: number;\n month: number;\n year: number;\n};\n\nconst DEFAULT_EMPTY_DATE = { day: 0, month: 0, year: 0 };\n\nexport interface DatePickerProps\n extends Omit<\n HTMLAttributesWithRootRef<HTMLDivElement>,\n 'defaultValue' \| 'value' \| 'min' \| 'max'\n > {\n min?: DatePickerDateFormat;\n max?: DatePickerDateFormat;\n name?: string;\n defaultValue?: DatePickerDateFormat;\n value?: DatePickerDateFormat;\n popupDirection?: 'top' \| 'bottom';\n monthNames?: string[];\n dayPlaceholder?: string;\n monthPlaceholder?: string;\n yearPlaceholder?: string;\n onDateChange?: (value: DatePickerDateFormat) => void; // TODO [>=7] заменить на onChange\n disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat(value: Partial<DatePickerDateFormat> \| undefined) {\n if (!value) {\n return undefined;\n }\n const { day = 0, month = 0, year = 0 } = value;\n return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n if (date.length === 0) {\n return DEFAULT_EMPTY_DATE;\n }\n const splited = date.split('-');\n\n return {\n day: Number(splited[2]),\n month: Number(splited[1]),\n year: Number(splited[0]),\n };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n return month ? new Date(year \|\| 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n name,\n min = { day: 0, month: 0, year: 0 },\n max = { day: 31, month: 12, year: 2100 },\n dayPlaceholder,\n monthPlaceholder,\n yearPlaceholder,\n popupDirection,\n value,\n monthNames,\n onDateChange,\n disabled,\n defaultValue = DEFAULT_EMPTY_DATE,\n ...restProps\n}: DatePickerProps) => {\n const isControlled = value !== undefined;\n const [internalValue, setInternalValue] = useCustomEnsuredControl({ value, defaultValue });\n const hiddenInput = React.useRef<HTMLInputElement>(null);\n\n const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n const nextDate = {\n day: internalValue.day,\n month: internalValue.month,\n year: internalValue.year,\n };\n nextDate[e.target.name as keyof typeof nextDate] = Number(e.target.value);\n nextDate.day = nextDate.day\n ? clamp(nextDate.day, 1, getMonthMaxDay(nextDate.month, nextDate.year))\n : nextDate.day;\n setInternalValue(nextDate);\n onDateChange?.(nextDate);\n };\n const dayOptions = range(1, getMonthMaxDay(internalValue.month, internalValue.year)).map(\n (value) => ({\n label: String(value),\n value,\n }),\n );\n const monthOptions = (monthNames \|\| DefaultMonths).map((name, index) => ({\n label: name,\n value: index + 1,\n }));\n const yearOptions = range(max.year, min.year).map((value) => ({\n label: String(value),\n value: value,\n }));\n\n useNativeFormResetListener(hiddenInput, () => {\n if (!isControlled) {\n setInternalValue(defaultValue);\n }\n });\n\n return (\n <RootComponent baseClassName={styles['DatePicker']} {...restProps}>\n <div className={styles['DatePicker__container']}>\n <div className={styles['DatePicker__day']}>\n <CustomSelect\n name=\"day\"\n value={internalValue.day}\n options={dayOptions}\n placeholder={dayPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n <div className={styles['DatePicker__month']}>\n <CustomSelect\n className={styles['DatePicker__monthSelect']}\n name=\"month\"\n value={internalValue.month}\n options={monthOptions}\n placeholder={monthPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n <div className={styles['DatePicker__year']}>\n <CustomSelect\n name=\"year\"\n value={internalValue.year}\n options={yearOptions}\n placeholder={yearPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n </div>\n <input\n type=\"hidden\"\n name={name}\n ref={hiddenInput}\n value={convertToInputFormat(internalValue)}\n />\n </RootComponent>\n );\n};\n\nconst DatePickerNative = ({\n min = { day: 0, month: 0, year: 0 },\n max = { day: 31, month: 12, year: 2100 },\n monthNames,\n popupDirection,\n dayPlaceholder,\n monthPlaceholder,\n yearPlaceholder,\n value,\n defaultValue = DEFAULT_EMPTY_DATE,\n onDateChange,\n ...restProps\n}: DatePickerProps) => {\n const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n onDateChange?.(parseInputDate(e.currentTarget.value));\n },\n [onDateChange],\n );\n const inputProps: HasOnlyExpectedProps<\n typeof restProps & Pick<InputProps, 'value' \| 'defaultValue'>,\n InputProps\n > = restProps;\n\n if (value) {\n // контролируемый компонент\n inputProps.value = convertToInputFormat(value);\n } else {\n // неконтролируемый компонент\n inputProps.defaultValue = convertToInputFormat(defaultValue);\n }\n\n return (\n <Input\n {...inputProps}\n type=\"date\"\n onChange={onStringChange}\n min={convertToInputFormat(min)}\n max={convertToInputFormat(max)}\n />\n );\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ onDateChange, ...props }: DatePickerProps) => {\n const hasPointer = useAdaptivityHasPointer();\n\n const onChange = (update: DatePickerDateFormat) => {\n onDateChange && onDateChange({ ...update });\n };\n\n const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n return <Cmp {...props} onDateChange={onChange} />;\n};\n"],"names":["React","leadingZero","clamp","range","useAdaptivityHasPointer","useCustomEnsuredControl","useNativeFormResetListener","CustomSelect","Input","RootComponent","styles","DefaultMonths","DEFAULT_EMPTY_DATE","day","month","year","convertToInputFormat","value","undefined","parseInputDate","date","length","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","monthNames","onDateChange","disabled","defaultValue","restProps","isControlled","internalValue","setInternalValue","hiddenInput","useRef","onSelectChange","e","nextDate","target","dayOptions","map","label","String","monthOptions","index","yearOptions","baseClassName","div","className","options","placeholder","onChange","input","type","ref","DatePickerNative","onStringChange","useCallback","currentTarget","inputProps","DatePicker","props","hasPointer","update","Cmp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { leadingZero } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { HasOnlyExpectedProps, HTMLAttributesWithRootRef } from '../../types';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input, type InputProps } from '../Input/Input';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n 'Января',\n 'Февраля',\n 'Марта',\n 'Апреля',\n 'Мая',\n 'Июня',\n 'Июля',\n 'Августа',\n 'Сентября',\n 'Октября',\n 'Ноября',\n 'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n day: number;\n month: number;\n year: number;\n};\n\nconst DEFAULT_EMPTY_DATE = { day: 0, month: 0, year: 0 };\n\nexport interface DatePickerProps\n extends Omit<\n HTMLAttributesWithRootRef<HTMLDivElement>,\n 'defaultValue' \| 'value' \| 'min' \| 'max'\n > {\n min?: DatePickerDateFormat;\n max?: DatePickerDateFormat;\n name?: string;\n defaultValue?: DatePickerDateFormat;\n value?: DatePickerDateFormat;\n popupDirection?: 'top' \| 'bottom';\n monthNames?: string[];\n dayPlaceholder?: string;\n monthPlaceholder?: string;\n yearPlaceholder?: string;\n onDateChange?: (value: DatePickerDateFormat) => void; // TODO [>=7] заменить на onChange\n disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat(value: Partial<DatePickerDateFormat> \| undefined) {\n if (!value) {\n return undefined;\n }\n const { day = 0, month = 0, year = 0 } = value;\n return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n if (date.length === 0) {\n return DEFAULT_EMPTY_DATE;\n }\n const splited = date.split('-');\n\n return {\n day: Number(splited[2]),\n month: Number(splited[1]),\n year: Number(splited[0]),\n };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n return month ? new Date(year \|\| 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n name,\n min = { day: 0, month: 0, year: 0 },\n max = { day: 31, month: 12, year: 2100 },\n dayPlaceholder,\n monthPlaceholder,\n yearPlaceholder,\n popupDirection,\n value,\n monthNames,\n onDateChange,\n disabled,\n defaultValue = DEFAULT_EMPTY_DATE,\n ...restProps\n}: DatePickerProps) => {\n const isControlled = value !== undefined;\n const [internalValue, setInternalValue] = useCustomEnsuredControl({ value, defaultValue });\n const hiddenInput = React.useRef<HTMLInputElement>(null);\n\n const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n const nextDate = {\n day: internalValue.day,\n month: internalValue.month,\n year: internalValue.year,\n };\n nextDate[e.target.name as keyof typeof nextDate] = Number(e.target.value);\n nextDate.day = nextDate.day\n ? clamp(nextDate.day, 1, getMonthMaxDay(nextDate.month, nextDate.year))\n : nextDate.day;\n setInternalValue(nextDate);\n onDateChange?.(nextDate);\n };\n const dayOptions = range(1, getMonthMaxDay(internalValue.month, internalValue.year)).map(\n (value) => ({\n label: String(value),\n value,\n }),\n );\n const monthOptions = (monthNames \|\| DefaultMonths).map((name, index) => ({\n label: name,\n value: index + 1,\n }));\n const yearOptions = range(max.year, min.year).map((value) => ({\n label: String(value),\n value: value,\n }));\n\n useNativeFormResetListener(hiddenInput, () => {\n if (!isControlled) {\n setInternalValue(defaultValue);\n }\n });\n\n return (\n <RootComponent baseClassName={styles['DatePicker']} {...restProps}>\n <div className={styles['DatePicker__container']}>\n <div className={styles['DatePicker__day']}>\n <CustomSelect\n name=\"day\"\n value={internalValue.day}\n options={dayOptions}\n placeholder={dayPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n <div className={styles['DatePicker__month']}>\n <CustomSelect\n className={styles['DatePicker__monthSelect']}\n name=\"month\"\n value={internalValue.month}\n options={monthOptions}\n placeholder={monthPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n <div className={styles['DatePicker__year']}>\n <CustomSelect\n name=\"year\"\n value={internalValue.year}\n options={yearOptions}\n placeholder={yearPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n </div>\n <input\n type=\"hidden\"\n name={name}\n ref={hiddenInput}\n value={convertToInputFormat(internalValue)}\n />\n </RootComponent>\n );\n};\n\nconst DatePickerNative = ({\n min = { day: 0, month: 0, year: 0 },\n max = { day: 31, month: 12, year: 2100 },\n monthNames,\n popupDirection,\n dayPlaceholder,\n monthPlaceholder,\n yearPlaceholder,\n value,\n defaultValue = DEFAULT_EMPTY_DATE,\n onDateChange,\n ...restProps\n}: DatePickerProps) => {\n const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n onDateChange?.(parseInputDate(e.currentTarget.value));\n },\n [onDateChange],\n );\n const inputProps: HasOnlyExpectedProps<\n typeof restProps & Pick<InputProps, 'value' \| 'defaultValue'>,\n InputProps\n > = restProps;\n\n if (value) {\n // контролируемый компонент\n inputProps.value = convertToInputFormat(value);\n } else {\n // неконтролируемый компонент\n inputProps.defaultValue = convertToInputFormat(defaultValue);\n }\n\n return (\n <Input\n {...inputProps}\n type=\"date\"\n onChange={onStringChange}\n min={convertToInputFormat(min)}\n max={convertToInputFormat(max)}\n />\n );\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/DatePicker\n \n @deprecated 6.2.0\n \n Компонент устарел и будет удален в v7. Используйте вместо него компоненты\n * [Input](https://vkcom.github.io/VKUI/#/Input) и\n * [Select](https://vkcom.github.io/VKUI/#/Select).\n */\nexport const DatePicker = ({ onDateChange, ...props }: DatePickerProps) => {\n const hasPointer = useAdaptivityHasPointer();\n\n const onChange = (update: DatePickerDateFormat) => {\n onDateChange && onDateChange({ ...update });\n };\n\n const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n return <Cmp {...props} onDateChange={onChange} />;\n};\n"],"names":["React","leadingZero","clamp","range","useAdaptivityHasPointer","useCustomEnsuredControl","useNativeFormResetListener","CustomSelect","Input","RootComponent","styles","DefaultMonths","DEFAULT_EMPTY_DATE","day","month","year","convertToInputFormat","value","undefined","parseInputDate","date","length","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","monthNames","onDateChange","disabled","defaultValue","restProps","isControlled","internalValue","setInternalValue","hiddenInput","useRef","onSelectChange","e","nextDate","target","dayOptions","map","label","String","monthOptions","index","yearOptions","baseClassName","div","className","options","placeholder","onChange","input","type","ref","DatePickerNative","onStringChange","useCallback","currentTarget","inputProps","DatePicker","props","hasPointer","update","Cmp"],"mappings":"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"}

package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps, DateRangeType } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n none: styles['DateRangeInput--sizeY-none'],\n ['compact']: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' \| 'onChange'>,\n Pick<\n CalendarRangeProps,\n \| 'disablePast'\n \| 'disableFuture'\n \| 'shouldDisableDate'\n \| 'onChange'\n \| 'value'\n \| 'weekStartsOn'\n \| 'disablePickers'\n \| 'prevMonthLabel'\n \| 'nextMonthLabel'\n \| 'changeMonthLabel'\n \| 'changeYearLabel'\n \| 'changeDayLabel'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n >,\n HasRootRef<HTMLDivElement>,\n FormFieldProps {\n calendarPlacement?: PlacementWithAuto;\n closeOnChange?: boolean;\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 ...props\n}: DateRangeInputProps) => {\n const daysStartRef = React.useRef<HTMLSpanElement>(null);\n const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n const daysEndRef = React.useRef<HTMLSpanElement>(null);\n const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n const onInternalValueChange = React.useCallback(\n (internalValue: string[]) => {\n let isStartValid = true;\n let isEndValid = true;\n for (let i = 0; i <= 2; i += 1) {\n if (internalValue[i].length < elementsConfig(i).length) {\n isStartValid = false;\n }\n }\n for (let i = 3; i <= 5; i += 1) {\n if (internalValue[i].length < elementsConfig(i).length) {\n isEndValid = false;\n }\n }\n const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n const mask = 'DD.MM.YYYY';\n\n if (!isMatch(formattedStartValue, mask)) {\n isStartValid = false;\n }\n if (!isMatch(formattedEndValue, mask)) {\n isEndValid = false;\n }\n\n if (!isStartValid && !isEndValid) {\n return;\n }\n\n const valueExists = Array.isArray(value);\n const now = new Date();\n const start = isStartValid\n ? parse(formattedStartValue, mask, (valueExists && value?.[0]) \|\| now)\n : null;\n const end = isEndValid\n ? parse(formattedEndValue, mask, (valueExists && value?.[1]) \|\| now)\n : null;\n if (start && end && isAfter(end, start)) {\n onChange?.([start, end]);\n }\n },\n [onChange, value],\n );\n\n const refs = React.useMemo(\n () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n );\n\n const {\n rootRef,\n calendarRef,\n open,\n openCalendar,\n closeCalendar,\n internalValue,\n handleKeyDown,\n setFocusedElement,\n handleFieldEnter,\n clear,\n removeFocusFromField,\n } = useDateInput({\n maxElement: 5,\n refs,\n autoFocus,\n disabled,\n elementsConfig,\n onChange,\n onInternalValueChange,\n getInternalValue,\n value,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const handleRootRef = useExternRef(rootRef, getRootRef);\n\n const onCalendarChange = React.useCallback(\n (newValue: 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 <input\n type=\"hidden\"\n name={name}\n value={\n value\n ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n }`\n : ''\n }\n />\n <Text className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n <InputLike\n length={2}\n getRootRef={daysStartRef}\n index={0}\n onElementSelect={setFocusedElement}\n value={internalValue[0]}\n label={changeStartDayLabel}\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 />\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 />\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 />\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 />\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 />\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 />\n </Popper>\n )}\n </FormField>\n );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","VisuallyHidden","styles","dateInputStyles","sizeYClassNames","none","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","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","input","type","onKeyDown","onElementSelect","label","targetRef","offsetByMainAxis","placement","onClose"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps, DateRangeType } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n none: styles['DateRangeInput--sizeY-none'],\n ['compact']: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' \| 'onChange'>,\n Pick<\n CalendarRangeProps,\n \| 'disablePast'\n \| 'disableFuture'\n \| 'shouldDisableDate'\n \| 'onChange'\n \| 'value'\n \| 'weekStartsOn'\n \| 'disablePickers'\n \| 'prevMonthLabel'\n \| 'nextMonthLabel'\n \| 'changeMonthLabel'\n \| 'changeYearLabel'\n \| 'changeDayLabel'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n >,\n HasRootRef<HTMLDivElement>,\n FormFieldProps {\n calendarPlacement?: PlacementWithAuto;\n closeOnChange?: boolean;\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 ...props\n}: DateRangeInputProps) => {\n const daysStartRef = React.useRef<HTMLSpanElement>(null);\n const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n const daysEndRef = React.useRef<HTMLSpanElement>(null);\n const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n const onInternalValueChange = React.useCallback(\n (internalValue: string[]) => {\n let isStartValid = true;\n let isEndValid = true;\n for (let i = 0; i <= 2; i += 1) {\n if (internalValue[i].length < elementsConfig(i).length) {\n isStartValid = false;\n }\n }\n for (let i = 3; i <= 5; i += 1) {\n if (internalValue[i].length < elementsConfig(i).length) {\n isEndValid = false;\n }\n }\n const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n const mask = 'DD.MM.YYYY';\n\n if (!isMatch(formattedStartValue, mask)) {\n isStartValid = false;\n }\n if (!isMatch(formattedEndValue, mask)) {\n isEndValid = false;\n }\n\n if (!isStartValid && !isEndValid) {\n return;\n }\n\n const valueExists = Array.isArray(value);\n const now = new Date();\n const start = isStartValid\n ? parse(formattedStartValue, mask, (valueExists && value?.[0]) \|\| now)\n : null;\n const end = isEndValid\n ? parse(formattedEndValue, mask, (valueExists && value?.[1]) \|\| now)\n : null;\n if (start && end && isAfter(end, start)) {\n onChange?.([start, end]);\n }\n },\n [onChange, value],\n );\n\n const refs = React.useMemo(\n () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n );\n\n const {\n rootRef,\n calendarRef,\n open,\n openCalendar,\n closeCalendar,\n internalValue,\n handleKeyDown,\n setFocusedElement,\n handleFieldEnter,\n clear,\n removeFocusFromField,\n } = useDateInput({\n maxElement: 5,\n refs,\n autoFocus,\n disabled,\n elementsConfig,\n onChange,\n onInternalValueChange,\n getInternalValue,\n value,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const handleRootRef = useExternRef(rootRef, getRootRef);\n\n const onCalendarChange = React.useCallback(\n (newValue: 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 <input\n type=\"hidden\"\n name={name}\n value={\n value\n ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n }`\n : ''\n }\n />\n <Text className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n <InputLike\n length={2}\n getRootRef={daysStartRef}\n index={0}\n onElementSelect={setFocusedElement}\n value={internalValue[0]}\n label={changeStartDayLabel}\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 />\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 />\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 />\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 />\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 />\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 />\n </Popper>\n )}\n </FormField>\n );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","VisuallyHidden","styles","dateInputStyles","sizeYClassNames","none","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","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","input","type","onKeyDown","onElementSelect","label","targetRef","offsetByMainAxis","placement","onClose"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,qBAAqB,QAAQ,mBAAmB;AACtE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,QAAQ,iBAAiB;AAGjE,SAASC,aAAa,QAA2C,iCAAiC;AAClG,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,8BAA8B;AACjD,OAAOC,qBAAqB,oCAAoC;AAEhE,MAAMC,kBAAkB;IACtBC,MAAMH,MAAM,CAAC,6BAA6B;IAC1C,CAAC,UAAU,EAAEA,MAAM,CAAC,gCAAgC;AACtD;AAoCA,MAAMI,iBAAiB,CAACC;IACtB,IAAIC,SAAS;IACb,IAAIC,MAAM;IACV,IAAIC,MAAM;IAEV,OAAQH;QACN,KAAK;QACL,KAAK;YACHG,MAAM;YACN;QACF,KAAK;QACL,KAAK;YACHA,MAAM;YACN;QACF,KAAK;QACL,KAAK;YACHA,MAAM;YACND,MAAM;YACND,SAAS;YACT;IACJ;IAEA,OAAO;QAAEA;QAAQC;QAAKC;IAAI;AAC5B;AAEA,MAAMC,mBAAmB,CAACC;IACxB,MAAMC,WAAW;QAAC;QAAI;QAAI;QAAI;QAAI;QAAI;KAAG;IACzC,IAAID,OAAO,CAAC,EAAE,EAAE;QACdC,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACG,OAAO,IAAIC,QAAQ,CAAC,GAAG;QACrDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACK,QAAQ,KAAK,GAAGD,QAAQ,CAAC,GAAG;QAC1DH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACM,WAAW,IAAIF,QAAQ,CAAC,GAAG;IAC3D;IACA,IAAIJ,OAAO,CAAC,EAAE,EAAE;QACdC,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACG,OAAO,IAAIC,QAAQ,CAAC,GAAG;QACrDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACK,QAAQ,KAAK,GAAGD,QAAQ,CAAC,GAAG;QAC1DH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACM,WAAW,IAAIF,QAAQ,CAAC,GAAG;IAC3D;IACA,OAAOH;AACT;AAEA;;CAEC,GACD,OAAO,MAAMM,iBAAiB,CAAC,EAC7BC,iBAAiB,EACjBC,aAAa,EACbC,WAAW,EACXV,KAAK,EACLW,QAAQ,EACRC,oBAAoB,cAAc,EAClCC,KAAK,EACLC,SAAS,EACTC,gBAAgB,IAAI,EACpBC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,iBAAiB,kBAAkB,EACnCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,eAAe,EAChCC,mBAAmB,gBAAgB,EACnCC,kBAAkB,cAAc,EAChCC,sBAAsB,sBAAsB,EAC5CC,wBAAwB,uBAAuB,EAC/CC,uBAAuB,qBAAqB,EAC5CC,oBAAoB,yBAAyB,EAC7CC,sBAAsB,0BAA0B,EAChDC,qBAAqB,wBAAwB,EAC7CC,kBAAkB,eAAe,EACjCC,oBAAoB,oBAAoB,EACxCC,aAAa,EACbC,aAAa,EACbC,kBAAkB,KAAK,EACvB,GAAGC,OACiB;IACpB,MAAMC,eAAetE,MAAMuE,MAAM,CAAkB;IACnD,MAAMC,iBAAiBxE,MAAMuE,MAAM,CAAkB;IACrD,MAAME,gBAAgBzE,MAAMuE,MAAM,CAAkB;IACpD,MAAMG,aAAa1E,MAAMuE,MAAM,CAAkB;IACjD,MAAMI,eAAe3E,MAAMuE,MAAM,CAAkB;IACnD,MAAMK,cAAc5E,MAAMuE,MAAM,CAAkB;IAElD,MAAMM,wBAAwB7E,MAAM8E,WAAW,CAC7C,CAACC;QACC,IAAIC,eAAe;QACnB,IAAIC,aAAa;QACjB,IAAK,IAAIC,IAAI,GAAGA,KAAK,GAAGA,KAAK,EAAG;YAC9B,IAAIH,aAAa,CAACG,EAAE,CAACxD,MAAM,GAAGF,eAAe0D,GAAGxD,MAAM,EAAE;gBACtDsD,eAAe;YACjB;QACF;QACA,IAAK,IAAIE,IAAI,GAAGA,KAAK,GAAGA,KAAK,EAAG;YAC9B,IAAIH,aAAa,CAACG,EAAE,CAACxD,MAAM,GAAGF,eAAe0D,GAAGxD,MAAM,EAAE;gBACtDuD,aAAa;YACf;QACF;QACA,MAAME,sBAAsB,CAAC,EAAEJ,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC;QACzF,MAAMK,oBAAoB,CAAC,EAAEL,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC;QACvF,MAAMM,OAAO;QAEb,IAAI,CAAC3E,QAAQyE,qBAAqBE,OAAO;YACvCL,eAAe;QACjB;QACA,IAAI,CAACtE,QAAQ0E,mBAAmBC,OAAO;YACrCJ,aAAa;QACf;QAEA,IAAI,CAACD,gBAAgB,CAACC,YAAY;YAChC;QACF;QAEA,MAAMK,cAAcC,MAAMC,OAAO,CAAC1D;QAClC,MAAM2D,MAAM,IAAIC;QAChB,MAAMC,QAAQX,eACVrE,MAAMwE,qBAAqBE,MAAM,AAACC,eAAexD,OAAO,CAAC,EAAE,IAAK2D,OAChE;QACJ,MAAMG,MAAMX,aACRtE,MAAMyE,mBAAmBC,MAAM,AAACC,eAAexD,OAAO,CAAC,EAAE,IAAK2D,OAC9D;QACJ,IAAIE,SAASC,OAAOnF,QAAQmF,KAAKD,QAAQ;YACvClD,WAAW;gBAACkD;gBAAOC;aAAI;QACzB;IACF,GACA;QAACnD;QAAUX;KAAM;IAGnB,MAAM+D,OAAO7F,MAAM8F,OAAO,CACxB,IAAM;YAACxB;YAAcE;YAAgBC;YAAeC;YAAYC;YAAcC;SAAY,EAC1F;QAACN;QAAcE;QAAgBC;QAAeC;QAAYC;QAAcC;KAAY;IAGtF,MAAM,EACJmB,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,YAAY,EACZC,aAAa,EACbpB,aAAa,EACbqB,aAAa,EACbC,iBAAiB,EACjBC,gBAAgB,EAChBC,KAAK,EACLC,oBAAoB,EACrB,GAAGnG,aAAa;QACfoG,YAAY;QACZZ;QACA5C;QACAC;QACA1B;QACAiB;QACAoC;QACAhD;QACAC;IACF;IAEA,MAAM,EAAE4E,QAAQ,MAAM,EAAE,GAAGtG;IAE3B,MAAMuG,gBAAgBrG,aAAayF,SAAShD;IAE5C,MAAM6D,mBAAmB5G,MAAM8E,WAAW,CACxC,CAAC/C;QACCU,WAAWV;QACX,IAAIc,iBAAiBd,UAAU,CAAC,EAAE,IAAIA,QAAQ,CAAC,EAAE,KAAKD,OAAO,CAAC,EAAE,EAAE;YAChE0E;QACF;IACF,GACA;QAAC/D;QAAUI;QAAef;QAAO0E;KAAqB;IAGxD,qBACE,MAAC3F;QACC8B,OAAOA;QACPC,WAAWzC,WAAWuG,UAAU,aAAapF,eAAe,CAACoF,MAAM,EAAE9D;QACrEG,YAAY4D;QACZE,OACE/E,sBACE,MAAChB;YAAWgG,WAAU;YAAU3D,SAASoD;;8BACvC,KAACpF;8BAAgB6C;;8BACjB,KAAC/D;;2BAGH,MAACa;YAAWgG,WAAU;YAAU3D,SAAS+C;;8BACvC,KAAC/E;8BAAgB8C;;8BACjB,KAAC/D;;;QAIPgD,UAAUA;QACVC,SAAS5C,aAAa+F,kBAAkBnD;QACxCC,SAAS7C,aAAa+F,kBAAkBlD;QACvC,GAAGiB,KAAK;;0BAET,KAAC0C;gBACCC,MAAK;gBACLhE,MAAMA;gBACNlB,OACEA,QACI,CAAC,EAAEA,KAAK,CAAC,EAAE,GAAGtB,OAAOsB,KAAK,CAAC,EAAE,EAAE,gBAAgB,GAAG,GAAG,EACnDA,KAAK,CAAC,EAAE,GAAGtB,OAAOsB,KAAK,CAAC,EAAE,EAAE,gBAAgB,GAC7C,CAAC,GACF;;0BAGR,MAACZ;gBAAK0B,WAAWvB,eAAe,CAAC,mBAAmB;gBAAE4F,WAAWb;;kCAC/D,KAACrF;wBACCW,QAAQ;wBACRqB,YAAYuB;wBACZ7C,OAAO;wBACPyF,iBAAiBb;wBACjBvE,OAAOiD,aAAa,CAAC,EAAE;wBACvBoC,OAAOzD;;kCAET,KAAC1C;kCAAiB;;kCAClB,KAACD;wBACCW,QAAQ;wBACRqB,YAAYyB;wBACZ/C,OAAO;wBACPyF,iBAAiBb;wBACjBvE,OAAOiD,aAAa,CAAC,EAAE;wBACvBoC,OAAOxD;;kCAET,KAAC3C;kCAAiB;;kCAClB,KAACD;wBACCW,QAAQ;wBACRqB,YAAY0B;wBACZhD,OAAO;wBACPyF,iBAAiBb;wBACjBvE,OAAOiD,aAAa,CAAC,EAAE;wBACvBoC,OAAOvD;;kCAET,KAAC5C;kCAAkB;;kCACnB,KAACD;wBACCW,QAAQ;wBACRqB,YAAY2B;wBACZjD,OAAO;wBACPyF,iBAAiBb;wBACjBvE,OAAOiD,aAAa,CAAC,EAAE;wBACvBoC,OAAOtD;;kCAET,KAAC7C;kCAAiB;;kCAClB,KAACD;wBACCW,QAAQ;wBACRqB,YAAY4B;wBACZlD,OAAO;wBACPyF,iBAAiBb;wBACjBvE,OAAOiD,aAAa,CAAC,EAAE;wBACvBoC,OAAOrD;;kCAET,KAAC9C;kCAAiB;;kCAClB,KAACD;wBACCW,QAAQ;wBACRqB,YAAY6B;wBACZnD,OAAO;wBACPyF,iBAAiBb;wBACjBvE,OAAOiD,aAAa,CAAC,EAAE;wBACvBoC,OAAOpD;;;;YAGVkC,QAAQ,CAAC7B,iCACR,KAACnD;gBAAOmG,WAAWrB;gBAASsB,kBAAkB;gBAAGC,WAAW5E;0BAC1D,cAAA,KAAC9B;oBACCkB,OAAOA;oBACPW,UAAUmE;oBACVpE,aAAaA;oBACbD,eAAeA;oBACfD,mBAAmBA;oBACnBiF,SAASpB;oBACTpD,YAAYiD;oBACZlD,gBAAgBA;oBAChBO,gBAAgBA;oBAChBC,gBAAgBA;oBAChBE,kBAAkBA;oBAClBC,iBAAiBA;oBACjBF,gBAAgBA;oBAChBW,eAAeA;oBACfC,eAAeA;;;;;AAM3B,EAAE"}

package/dist/cssm/components/Div/Div.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Div.module.css';\n\nexport type DivProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = (props: DivProps) => <RootComponent baseClassName={styles['Div']} {...props} />;\n"],"names":["RootComponent","styles","Div","props","baseClassName"],"~~rangeMappings":";;;;;;;;","~~mappings":";AACA,SAASA,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,mBAAmB;AAItC;;CAEC,GACD,OAAO,MAAMC,MAAM,CAACC,sBAAoB,KAACH;QAAcI,eAAeH,MAAM,CAAC,MAAM;QAAG,GAAGE,KAAK;OAAK"}
1	+ {"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Div.module.css';\n\nexport type DivProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = (props: DivProps) => <RootComponent baseClassName={styles['Div']} {...props} />;\n"],"names":["RootComponent","styles","Div","props","baseClassName"],"mappings":";AACA,SAASA,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,mBAAmB;AAItC;;CAEC,GACD,OAAO,MAAMC,MAAM,CAACC,sBAAoB,KAACH;QAAcI,eAAeH,MAAM,CAAC,MAAM;QAAG,GAAGE,KAAK;OAAK"}

package/dist/cssm/components/DropZone/DropZone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DropZone/DropZone.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { DropZoneGrid } from './components/DropZoneGrid';\nimport styles from './DropZone.module.css';\n\ninterface DropZonePropsChildrenProps {\n active: boolean;\n}\n\nexport interface DropZoneProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'> {\n children?: React.ReactNode \| ((renderProps: DropZonePropsChildrenProps) => React.ReactNode);\n}\n\n/*\n Компонент позволяет пользователям загружать файлы, перетаскивая файлы в\n * область на странице.\n \n @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/DropZone\n */\nexport const DropZone = ({\n onDragOver,\n onDragLeave,\n onDrop,\n children,\n ...props\n}: DropZoneProps) => {\n const [active, setActive] = React.useState(false);\n\n const onActive: React.DragEventHandler<HTMLDivElement> = (event) => {\n if (event.isPropagationStopped()) {\n return;\n }\n\n setActive(true);\n };\n\n const offActive: React.DragEventHandler<HTMLDivElement> = () => {\n setActive(false);\n };\n\n return (\n <RootComponent\n baseClassName={classNames(styles['DropZone'], active && styles['DropZone--active'])}\n onDragOver={callMultiple(onDragOver, onActive)}\n onDragLeave={callMultiple(onDragLeave, offActive)}\n onDrop={callMultiple(onDrop, offActive)}\n {...props}\n >\n {typeof children === 'function' ? children({ active }) : children}\n </RootComponent>\n );\n};\n\nDropZone.displayName = 'DropZone';\n\nDropZone.Grid = DropZoneGrid;\nDropZone.Grid.displayName = 'DropZone.Grid';\n"],"names":["React","classNames","callMultiple","RootComponent","DropZoneGrid","styles","DropZone","onDragOver","onDragLeave","onDrop","children","props","active","setActive","useState","onActive","event","isPropagationStopped","offActive","baseClassName","displayName","Grid"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,OAAOC,YAAY,wBAAwB;AAU3C;;;;;;CAMC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,OACW;IACd,MAAM,CAACC,QAAQC,UAAU,GAAGb,MAAMc,QAAQ,CAAC;IAE3C,MAAMC,WAAmD,CAACC;QACxD,IAAIA,MAAMC,oBAAoB,IAAI;YAChC;QACF;QAEAJ,UAAU;IACZ;IAEA,MAAMK,YAAoD;QACxDL,UAAU;IACZ;IAEA,qBACE,KAACV;QACCgB,eAAelB,WAAWI,MAAM,CAAC,WAAW,EAAEO,UAAUP,MAAM,CAAC,mBAAmB;QAClFE,YAAYL,aAAaK,YAAYQ;QACrCP,aAAaN,aAAaM,aAAaU;QACvCT,QAAQP,aAAaO,QAAQS;QAC5B,GAAGP,KAAK;kBAER,OAAOD,aAAa,aAAaA,SAAS;YAAEE;QAAO,KAAKF;;AAG/D,EAAE;AAEFJ,SAASc,WAAW,GAAG;AAEvBd,SAASe,IAAI,GAAGjB;AAChBE,SAASe,IAAI,CAACD,WAAW,GAAG"}
1	+ {"version":3,"sources":["../../../../src/components/DropZone/DropZone.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { DropZoneGrid } from './components/DropZoneGrid';\nimport styles from './DropZone.module.css';\n\ninterface DropZonePropsChildrenProps {\n active: boolean;\n}\n\nexport interface DropZoneProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'> {\n children?: React.ReactNode \| ((renderProps: DropZonePropsChildrenProps) => React.ReactNode);\n}\n\n/*\n Компонент позволяет пользователям загружать файлы, перетаскивая файлы в\n * область на странице.\n \n @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/DropZone\n */\nexport const DropZone = ({\n onDragOver,\n onDragLeave,\n onDrop,\n children,\n ...props\n}: DropZoneProps) => {\n const [active, setActive] = React.useState(false);\n\n const onActive: React.DragEventHandler<HTMLDivElement> = (event) => {\n if (event.isPropagationStopped()) {\n return;\n }\n\n setActive(true);\n };\n\n const offActive: React.DragEventHandler<HTMLDivElement> = () => {\n setActive(false);\n };\n\n return (\n <RootComponent\n baseClassName={classNames(styles['DropZone'], active && styles['DropZone--active'])}\n onDragOver={callMultiple(onDragOver, onActive)}\n onDragLeave={callMultiple(onDragLeave, offActive)}\n onDrop={callMultiple(onDrop, offActive)}\n {...props}\n >\n {typeof children === 'function' ? children({ active }) : children}\n </RootComponent>\n );\n};\n\nDropZone.displayName = 'DropZone';\n\nDropZone.Grid = DropZoneGrid;\nDropZone.Grid.displayName = 'DropZone.Grid';\n"],"names":["React","classNames","callMultiple","RootComponent","DropZoneGrid","styles","DropZone","onDragOver","onDragLeave","onDrop","children","props","active","setActive","useState","onActive","event","isPropagationStopped","offActive","baseClassName","displayName","Grid"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,OAAOC,YAAY,wBAAwB;AAU3C;;;;;;CAMC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,OACW;IACd,MAAM,CAACC,QAAQC,UAAU,GAAGb,MAAMc,QAAQ,CAAC;IAE3C,MAAMC,WAAmD,CAACC;QACxD,IAAIA,MAAMC,oBAAoB,IAAI;YAChC;QACF;QAEAJ,UAAU;IACZ;IAEA,MAAMK,YAAoD;QACxDL,UAAU;IACZ;IAEA,qBACE,KAACV;QACCgB,eAAelB,WAAWI,MAAM,CAAC,WAAW,EAAEO,UAAUP,MAAM,CAAC,mBAAmB;QAClFE,YAAYL,aAAaK,YAAYQ;QACrCP,aAAaN,aAAaM,aAAaU;QACvCT,QAAQP,aAAaO,QAAQS;QAC5B,GAAGP,KAAK;kBAER,OAAOD,aAAa,aAAaA,SAAS;YAAEE;QAAO,KAAKF;;AAG/D,EAAE;AAEFJ,SAASc,WAAW,GAAG;AAEvBd,SAASe,IAAI,GAAGjB;AAChBE,SAASe,IAAI,CAACD,WAAW,GAAG"}

package/dist/cssm/components/DropZone/components/DropZoneGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/DropZone/components/DropZoneGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './DropZoneGrid.module.css';\n\nconst directionStyle = {\n row: styles['DropZoneGrid--row'],\n column: styles['DropZoneGrid--column'],\n};\n\nexport interface DropZoneGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n direction?: 'row' \| 'column';\n}\n\nexport const DropZoneGrid = ({ direction = 'column', ...props }: DropZoneGridProps) => (\n <RootComponent\n baseClassName={classNames(styles['DropZoneGrid'], directionStyle[direction])}\n {...props}\n />\n);\n\nDropZoneGrid.displayName = 'DropZoneGrid';\n"],"names":["classNames","RootComponent","styles","directionStyle","row","column","DropZoneGrid","direction","props","baseClassName","displayName"],"~~rangeMappings":";;;;;;;;;;;;","~~mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAClE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,iBAAiB;IACrBC,KAAKF,MAAM,CAAC,oBAAoB;IAChCG,QAAQH,MAAM,CAAC,uBAAuB;AACxC;AAMA,OAAO,MAAMI,eAAe,CAAC,EAAEC,YAAY,QAAQ,EAAE,GAAGC,OAA0B,iBAChF,KAACP;QACCQ,eAAeT,WAAWE,MAAM,CAAC,eAAe,EAAEC,cAAc,CAACI,UAAU;QAC1E,GAAGC,KAAK;OAEX;AAEFF,aAAaI,WAAW,GAAG"}
1	+ {"version":3,"sources":["../../../../../src/components/DropZone/components/DropZoneGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './DropZoneGrid.module.css';\n\nconst directionStyle = {\n row: styles['DropZoneGrid--row'],\n column: styles['DropZoneGrid--column'],\n};\n\nexport interface DropZoneGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n direction?: 'row' \| 'column';\n}\n\nexport const DropZoneGrid = ({ direction = 'column', ...props }: DropZoneGridProps) => (\n <RootComponent\n baseClassName={classNames(styles['DropZoneGrid'], directionStyle[direction])}\n {...props}\n />\n);\n\nDropZoneGrid.displayName = 'DropZoneGrid';\n"],"names":["classNames","RootComponent","styles","directionStyle","row","column","DropZoneGrid","direction","props","baseClassName","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAClE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,iBAAiB;IACrBC,KAAKF,MAAM,CAAC,oBAAoB;IAChCG,QAAQH,MAAM,CAAC,uBAAuB;AACxC;AAMA,OAAO,MAAMI,eAAe,CAAC,EAAEC,YAAY,QAAQ,EAAE,GAAGC,OAA0B,iBAChF,KAACP;QACCQ,eAAeT,WAAWE,MAAM,CAAC,eAAe,EAAEC,cAAc,CAACI,UAAU;QAC1E,GAAGC,KAAK;OAEX;AAEFF,aAAaI,WAAW,GAAG"}

package/dist/cssm/components/DropdownIcon/DropdownIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon20ChevronUp,\n Icon20Dropdown,\n Icon24ChevronDown,\n Icon24ChevronUp,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HTMLAttributesWithRootRef } from '../../types';\n\nexport interface DropdownIconProps extends HTMLAttributesWithRootRef<SVGSVGElement> {\n opened?: boolean;\n}\n\nexport const DropdownIcon = ({ opened = false, className, ...restProps }: DropdownIconProps) => {\n const { sizeY } = useAdaptivityConditionalRender();\n const IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;\n const IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;\n\n return (\n <React.Fragment>\n {sizeY.compact && (\n <IconCompact className={classNames(sizeY.compact.className, className)} {...restProps} />\n )}\n {sizeY.regular && (\n <IconRegular className={classNames(sizeY.regular.className, className)} {...restProps} />\n )}\n </React.Fragment>\n );\n};\n"],"names":["React","Icon20ChevronUp","Icon20Dropdown","Icon24ChevronDown","Icon24ChevronUp","classNames","useAdaptivityConditionalRender","DropdownIcon","opened","className","restProps","sizeY","IconCompact","IconRegular","Fragment","compact","regular"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;","~~mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,QACV,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAO5F,OAAO,MAAMC,eAAe,CAAC,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAA8B;IACzF,MAAM,EAAEC,KAAK,EAAE,GAAGL;IAClB,MAAMM,cAAcJ,SAASP,kBAAkBC;IAC/C,MAAMW,cAAcL,SAASJ,kBAAkBD;IAE/C,qBACE,MAACH,MAAMc,QAAQ;;YACZH,MAAMI,OAAO,kBACZ,KAACH;gBAAYH,WAAWJ,WAAWM,MAAMI,OAAO,CAACN,SAAS,EAAEA;gBAAa,GAAGC,SAAS;;YAEtFC,MAAMK,OAAO,kBACZ,KAACH;gBAAYJ,WAAWJ,WAAWM,MAAMK,OAAO,CAACP,SAAS,EAAEA;gBAAa,GAAGC,SAAS;;;;AAI7F,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon20ChevronUp,\n Icon20Dropdown,\n Icon24ChevronDown,\n Icon24ChevronUp,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HTMLAttributesWithRootRef } from '../../types';\n\nexport interface DropdownIconProps extends HTMLAttributesWithRootRef<SVGSVGElement> {\n opened?: boolean;\n}\n\nexport const DropdownIcon = ({ opened = false, className, ...restProps }: DropdownIconProps) => {\n const { sizeY } = useAdaptivityConditionalRender();\n const IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;\n const IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;\n\n return (\n <React.Fragment>\n {sizeY.compact && (\n <IconCompact className={classNames(sizeY.compact.className, className)} {...restProps} />\n )}\n {sizeY.regular && (\n <IconRegular className={classNames(sizeY.regular.className, className)} {...restProps} />\n )}\n </React.Fragment>\n );\n};\n"],"names":["React","Icon20ChevronUp","Icon20Dropdown","Icon24ChevronDown","Icon24ChevronUp","classNames","useAdaptivityConditionalRender","DropdownIcon","opened","className","restProps","sizeY","IconCompact","IconRegular","Fragment","compact","regular"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,QACV,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAO5F,OAAO,MAAMC,eAAe,CAAC,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAA8B;IACzF,MAAM,EAAEC,KAAK,EAAE,GAAGL;IAClB,MAAMM,cAAcJ,SAASP,kBAAkBC;IAC/C,MAAMW,cAAcL,SAASJ,kBAAkBD;IAE/C,qBACE,MAACH,MAAMc,QAAQ;;YACZH,MAAMI,OAAO,kBACZ,KAACH;gBAAYH,WAAWJ,WAAWM,MAAMI,OAAO,CAACN,SAAS,EAAEA;gBAAa,GAAGC,SAAS;;YAEtFC,MAAMK,OAAO,kBACZ,KAACH;gBAAYJ,WAAWJ,WAAWM,MAAMK,OAAO,CAACP,SAAS,EAAEA;gBAAa,GAAGC,SAAS;;;;AAI7F,EAAE"}

package/dist/cssm/components/Epic/Epic.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n tabbar?: React.ReactNode;\n activeStory: string;\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\nconst warn = warnOnce('Epic');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = ({ activeStory, tabbar, children, ...restProps }: EpicProps) => {\n const scroll = React.useRef<{ [key: string]: number }>({}).current;\n\n const story =\n (React.Children.toArray(children).find(\n (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,\n ) as React.ReactElement \| undefined) ?? null;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar')}\n >\n <ScrollSaver\n key={activeStory}\n initialScroll={scroll[activeStory] \|\| 0}\n saveScroll={(value) => (scroll[activeStory] = value)}\n >\n {story}\n </ScrollSaver>\n {tabbar}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","getNavId","warnOnce","RootComponent","ScrollSaver","styles","warn","Epic","activeStory","tabbar","children","restProps","scroll","useRef","current","story","Children","toArray","find","isValidElement","props","baseClassName","initialScroll","saveScroll","value"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAQvC,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,OAAO,CAAC,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,WAAsB;IAC7E,MAAMC,SAASb,MAAMc,MAAM,CAA4B,CAAC,GAAGC,OAAO;IAElE,MAAMC,QACJ,AAAChB,MAAMiB,QAAQ,CAACC,OAAO,CAACP,UAAUQ,IAAI,CACpC,CAACH,sBAAUhB,MAAMoB,cAAc,CAACJ,UAAUd,SAASc,MAAMK,KAAK,EAAEd,UAAUE,gBACpC;IAE1C,qBACE,MAACL;QACE,GAAGQ,SAAS;QACbU,eAAerB,WAAWK,MAAM,CAAC,OAAO,EAAEI,UAAU;;0BAEpD,KAACL;gBAECkB,eAAeV,MAAM,CAACJ,YAAY,IAAI;gBACtCe,YAAY,CAACC,QAAWZ,MAAM,CAACJ,YAAY,GAAGgB;0BAE7CT;eAJIP;YAMNC;;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n tabbar?: React.ReactNode;\n activeStory: string;\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\nconst warn = warnOnce('Epic');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = ({ activeStory, tabbar, children, ...restProps }: EpicProps) => {\n const scroll = React.useRef<{ [key: string]: number }>({}).current;\n\n const story =\n (React.Children.toArray(children).find(\n (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,\n ) as React.ReactElement \| undefined) ?? null;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar')}\n >\n <ScrollSaver\n key={activeStory}\n initialScroll={scroll[activeStory] \|\| 0}\n saveScroll={(value) => (scroll[activeStory] = value)}\n >\n {story}\n </ScrollSaver>\n {tabbar}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","getNavId","warnOnce","RootComponent","ScrollSaver","styles","warn","Epic","activeStory","tabbar","children","restProps","scroll","useRef","current","story","Children","toArray","find","isValidElement","props","baseClassName","initialScroll","saveScroll","value"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAQvC,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,OAAO,CAAC,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,WAAsB;IAC7E,MAAMC,SAASb,MAAMc,MAAM,CAA4B,CAAC,GAAGC,OAAO;IAElE,MAAMC,QACJ,AAAChB,MAAMiB,QAAQ,CAACC,OAAO,CAACP,UAAUQ,IAAI,CACpC,CAACH,sBAAUhB,MAAMoB,cAAc,CAACJ,UAAUd,SAASc,MAAMK,KAAK,EAAEd,UAAUE,gBACpC;IAE1C,qBACE,MAACL;QACE,GAAGQ,SAAS;QACbU,eAAerB,WAAWK,MAAM,CAAC,OAAO,EAAEI,UAAU;;0BAEpD,KAACL;gBAECkB,eAAeV,MAAM,CAACJ,YAAY,IAAI;gBACtCe,YAAY,CAACC,QAAWZ,MAAM,CAACJ,YAAY,GAAGgB;0BAE7CT;eAJIP;YAMNC;;;AAGP,EAAE"}

package/dist/cssm/components/Epic/ScrollSaver.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\n\nexport interface ScrollSaverProps extends HasChildren {\n initialScroll?: number;\n saveScroll: (this: void, scroll: number) => any;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ScrollSaver\n */\nexport const ScrollSaver = ({ children, initialScroll, saveScroll }: ScrollSaverProps) => {\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"],"~~rangeMappings":";;;;;;;;;;;;;;;;;","~~mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AAOzD;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,UAAU,EAAoB;IACnF,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"}
1	+ {"version":3,"sources":["../../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\n\nexport interface ScrollSaverProps extends HasChildren {\n initialScroll?: number;\n saveScroll: (this: void, scroll: number) => any;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ScrollSaver\n */\nexport const ScrollSaver = ({ children, initialScroll, saveScroll }: ScrollSaverProps) => {\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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AAOzD;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,UAAU,EAAoB;IACnF,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"}

package/dist/cssm/components/File/File.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button, VKUIButtonProps } from '../Button/Button';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface FileProps\n extends Omit<VKUIButtonProps, 'type'>,\n Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' \| 'size'>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLElement> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/File\n */\nexport const File = ({\n children = 'Выберите файл',\n align = 'left',\n size,\n mode,\n stretched,\n before,\n after,\n loading,\n className,\n style,\n getRef,\n getRootRef,\n appearance,\n ...restProps\n}: FileProps) => {\n return (\n <Button\n Component=\"label\"\n align={align}\n className={className}\n stretched={stretched}\n mode={mode}\n appearance={appearance}\n size={size}\n before={before}\n after={after}\n loading={loading}\n style={style}\n getRootRef={getRootRef}\n disabled={restProps.disabled}\n >\n <VisuallyHidden title=\"\" {...restProps} Component=\"input\" type=\"file\" getRootRef={getRef} />\n {children}\n </Button>\n );\n};\n"],"names":["React","Button","VisuallyHidden","File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Component","disabled","title","type"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAyB,mBAAmB;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAQlE;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,WAAW,eAAe,EAC1BC,QAAQ,MAAM,EACdC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,UAAU,EACV,GAAGC,WACO;IACV,qBACE,MAAChB;QACCiB,WAAU;QACVb,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZI,UAAUF,UAAUE,QAAQ;;0BAE5B,KAACjB;gBAAekB,OAAM;gBAAI,GAAGH,SAAS;gBAAEC,WAAU;gBAAQG,MAAK;gBAAON,YAAYD;;YACjFV;;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button, VKUIButtonProps } from '../Button/Button';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface FileProps\n extends Omit<VKUIButtonProps, 'type'>,\n Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' \| 'size'>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLElement> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/File\n */\nexport const File = ({\n children = 'Выберите файл',\n align = 'left',\n size,\n mode,\n stretched,\n before,\n after,\n loading,\n className,\n style,\n getRef,\n getRootRef,\n appearance,\n ...restProps\n}: FileProps) => {\n return (\n <Button\n Component=\"label\"\n align={align}\n className={className}\n stretched={stretched}\n mode={mode}\n appearance={appearance}\n size={size}\n before={before}\n after={after}\n loading={loading}\n style={style}\n getRootRef={getRootRef}\n disabled={restProps.disabled}\n >\n <VisuallyHidden title=\"\" {...restProps} Component=\"input\" type=\"file\" getRootRef={getRef} />\n {children}\n </Button>\n );\n};\n"],"names":["React","Button","VisuallyHidden","File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Component","disabled","title","type"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAyB,mBAAmB;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAQlE;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,WAAW,eAAe,EAC1BC,QAAQ,MAAM,EACdC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,UAAU,EACV,GAAGC,WACO;IACV,qBACE,MAAChB;QACCiB,WAAU;QACVb,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZI,UAAUF,UAAUE,QAAQ;;0BAE5B,KAACjB;gBAAekB,OAAM;gBAAI,GAAGH,SAAS;gBAAEC,WAAU;gBAAQG,MAAK;gBAAON,YAAYD;;YACjFV;;;AAGP,EAAE"}

package/dist/cssm/components/FixedLayout/FixedLayout.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FixedLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"names":[],"mappings":"~~AAMA~~,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAaxD,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,+FASrB,gBAAgB,~~4CA6ClB~~,CAAC"}
1	+ {"version":3,"file":"FixedLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAaxD,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,+FASrB,gBAAgB,4CA6DlB,CAAC"}

package/dist/cssm/components/FixedLayout/FixedLayout.js CHANGED Viewed

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useDOM } from '../../lib/dom';
+import { setRef } from '../../lib/utils';
 import { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';
 import { SplitColContext } from '../SplitCol/SplitColContext';
 import styles from './FixedLayout.module.css';
@@ -16,13 +18,24 @@ const stylesVertical = {
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */ export const FixedLayout = ({ children, style, vertical, getRootRef, filled, className, useParentWidth, ...restProps })=>{
     const platform = usePlatform();
-    const ref = useExternRef(getRootRef);
+    const ref = React.useRef(null);
     const [width, setWidth] = React.useState(undefined);
     const { window } = useDOM();
     const { colRef } = React.useContext(SplitColContext);
+    const parentRef = React.useRef(null);
+    const handleRootRef = useCallback((node)=>{
+        if (!node) {
+            return;
+        }
+        setRef(node, getRootRef);
+        setRef(node, ref);
+        setRef(node.parentElement, parentRef);
+    }, [
+        getRootRef
+    ]);
     const doResize = ()=>{
-        if (useParentWidth && ref.current) {
-            const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;
+        if (useParentWidth && parentRef.current) {
+            const parentWidth = parentRef.current.getBoundingClientRect().width;
             setWidth(parentWidth ? `${parentWidth}px` : undefined);
         } else if (colRef?.current) {
             const computedStyle = getComputedStyle(colRef.current);
@@ -38,10 +51,11 @@ const stylesVertical = {
         useParentWidth
     ]);
     useGlobalEventListener(window, 'resize', doResize);
+    useResizeObserver(useParentWidth ? parentRef : colRef, doResize);
     return /*#__PURE__*/ _jsx(OnboardingTooltipContainer, {
         ...restProps,
         fixed: true,
-        ref: ref,
+        ref: handleRootRef,
         className: classNames(styles['FixedLayout'], platform === 'ios' && 'vkuiInternalFixedLayout--ios', filled && styles['FixedLayout--filled'], vertical && stylesVertical[vertical], className),
         style: {
             ...style,

package/dist/cssm/components/FixedLayout/FixedLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~useExternRef~~ } from '../../hooks/~~useExternRef~~';\nimport { ~~useGlobalEventListener~~ } from '../../hooks/~~useGlobalEventListener~~';\nimport { ~~usePlatform~~ } from '../../hooks/~~usePlatform~~';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './FixedLayout.module.css';\n\nconst stylesVertical = {\n top: styles['FixedLayout--vertical-top'],\n bottom: classNames(\n styles['FixedLayout--vertical-bottom'],\n 'vkuiInternalFixedLayout--vertical-bottom',\n ),\n};\n\nexport interface FixedLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n vertical?: 'top' \| 'bottom';\n /*\n Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n /\n filled?: boolean;\n /\n Всегда соответствовать ширине родителя.\n * Ширина пересчитывается по событию `window` `resize`.\n /\n useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n position: 'absolute' \| null;\n top: number;\n bottom: number;\n width: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n children,\n style,\n vertical,\n getRootRef,\n filled,\n className,\n useParentWidth,\n ...restProps\n}: FixedLayoutProps) => {\n const platform = usePlatform();\n const ref = ~~useExternRef~~(~~getRootRef~~);\n const [width, setWidth] = React.useState<string \| undefined>(undefined);\n const { window } = useDOM();\n const { colRef } = React.useContext(SplitColContext);\n\n const doResize = () => {\n if (useParentWidth && ~~ref~~.current) {\n const parentWidth = ~~ref~~.current.~~parentElement?.~~getBoundingClientRect().width;\n setWidth(parentWidth ? `${parentWidth}px` : undefined);\n } else if (colRef?.current) {\n const computedStyle = getComputedStyle(colRef.current);\n\n setWidth(\n `${\n colRef.current.clientWidth -\n parseFloat(computedStyle.paddingLeft) -\n parseFloat(computedStyle.paddingRight)\n }px`,\n );\n } else {\n setWidth(undefined);\n }\n };\n React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n useGlobalEventListener(window, 'resize', doResize);\n\n return (\n <OnboardingTooltipContainer\n {...restProps}\n fixed\n ref={~~ref~~}\n className={classNames(\n styles['FixedLayout'],\n platform === 'ios' && 'vkuiInternalFixedLayout--ios',\n filled && styles['FixedLayout--filled'],\n vertical && stylesVertical[vertical],\n className,\n )}\n style={{ ...style, width }}\n >\n {children}\n </OnboardingTooltipContainer>\n );\n};\n"],"names":["~~React~~","~~classNames~~","~~useExternRef~~","useGlobalEventListener","usePlatform","useDOM","OnboardingTooltipContainer","SplitColContext","styles","stylesVertical","top","bottom","FixedLayout","children","style","vertical","getRootRef","filled","className","useParentWidth","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","~~doResize~~","~~current~~","~~parentWidth~~","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";AAAA,~~YAAYA~~,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,~~YAAY~~,QAAQ,~~2BAA2B~~;~~AACxD~~,SAASC,~~sBAAsB~~,QAAQ,~~qCAAqC~~;~~AAC5E~~,SAASC,~~WAAW~~,QAAQ,~~0BAA0B~~;~~AACtD~~,SAASC,MAAM,QAAQ,gBAAgB;~~AAEvC~~,SAASC,0BAA0B,QAAQ,kDAAkD;AAC7F,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,iBAAiB;IACrBC,KAAKF,MAAM,CAAC,4BAA4B;IACxCG,~~QAAQV~~,~~WACNO~~,MAAM,CAAC,+BAA+B,EACtC;AAEJ;AAuBA;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,cAAc,EACd,GAAGC,WACc;IACjB,MAAMC,~~WAAWjB~~;IACjB,~~MAAMkB~~,~~MAAMpB~~,~~aAAac~~;~~IACzB~~,MAAM,~~CAACO~~,OAAOC,SAAS,~~GAAGxB~~,~~MAAMyB~~,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,~~GAAGtB~~;IACnB,MAAM,~~EAAEuB~~,MAAM,EAAE,~~GAAG5B~~,~~MAAM6B~~,UAAU,~~CAACtB~~;~~IAEpC~~,~~MAAMuB~~,WAAW;QACf,~~IAAIX~~,~~kBAAkBG~~,~~IAAIS~~,OAAO,EAAE;~~YACjC~~,MAAMC,~~cAAcV~~,~~IAAIS~~,OAAO,CAACE,~~aAAa~~,~~EAAEC~~,~~wBAAwBX~~;~~YACvEC~~,~~SAASQ~~,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,~~GAAGN~~;QAC9C,OAAO,IAAIE,~~QAAQG~~,SAAS;YAC1B,~~MAAMI~~,gBAAgBC,~~iBAAiBR~~,~~OAAOG~~,OAAO;~~YAErDP~~,SACE,CAAC,EACCI,~~OAAOG~~,OAAO,~~CAACM~~,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;~~YACLhB~~,SAASE;QACX;IACF;~~IACA1B~~,~~MAAMyC~~,SAAS,~~CAACX~~,UAAU;~~QAACF~~;~~QAAQP~~;QAAUC;QAAKH;KAAe;~~IACjEhB~~,~~uBAAuBwB~~,QAAQ,~~UAAUG~~;~~IAEzC~~,qBACE,~~KAACxB~~;QACE,GAAGc,SAAS;~~QACbsB~~,KAAK;~~QACLpB~~,~~KAAKA~~;~~QACLJ~~,~~WAAWjB~~,~~WACTO~~,MAAM,CAAC,cAAc,EACrBa,aAAa,SAAS,gCACtBJ,UAAUT,MAAM,CAAC,sBAAsB,EACvCO,YAAYN,cAAc,CAACM,SAAS,EACpCG;QAEFJ,OAAO;YAAE,GAAGA,KAAK;~~YAAES~~;QAAM;~~kBAExBV~~;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useDOM } from '../../lib/dom';\nimport { setRef } from '../../lib/utils';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './FixedLayout.module.css';\n\nconst stylesVertical = {\n top: styles['FixedLayout--vertical-top'],\n bottom: classNames(\n styles['FixedLayout--vertical-bottom'],\n 'vkuiInternalFixedLayout--vertical-bottom',\n ),\n};\n\nexport interface FixedLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n vertical?: 'top' \| 'bottom';\n /*\n Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n /\n filled?: boolean;\n /\n Всегда соответствовать ширине родителя.\n * Ширина пересчитывается по событию `window` `resize`.\n /\n useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n position: 'absolute' \| null;\n top: number;\n bottom: number;\n width: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n children,\n style,\n vertical,\n getRootRef,\n filled,\n className,\n useParentWidth,\n ...restProps\n}: FixedLayoutProps) => {\n const platform = usePlatform();\n const ref = React.useRef<HTMLElement \| null>(null);\n const [width, setWidth] = React.useState<string \| undefined>(undefined);\n const { window } = useDOM();\n const { colRef } = React.useContext(SplitColContext);\n const parentRef = React.useRef<HTMLElement \| null>(null);\n\n const handleRootRef = useCallback(\n (node: HTMLElement \| null) => {\n if (!node) {\n return;\n }\n\n setRef(node, getRootRef);\n setRef(node, ref);\n setRef(node.parentElement, parentRef);\n },\n [getRootRef],\n );\n\n const doResize = () => {\n if (useParentWidth && parentRef.current) {\n const parentWidth = parentRef.current.getBoundingClientRect().width;\n setWidth(parentWidth ? `${parentWidth}px` : undefined);\n } else if (colRef?.current) {\n const computedStyle = getComputedStyle(colRef.current);\n\n setWidth(\n `${\n colRef.current.clientWidth -\n parseFloat(computedStyle.paddingLeft) -\n parseFloat(computedStyle.paddingRight)\n }px`,\n );\n } else {\n setWidth(undefined);\n }\n };\n React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n\n useGlobalEventListener(window, 'resize', doResize);\n useResizeObserver(useParentWidth ? parentRef : colRef, doResize);\n\n return (\n <OnboardingTooltipContainer\n {...restProps}\n fixed\n ref={handleRootRef}\n className={classNames(\n styles['FixedLayout'],\n platform === 'ios' && 'vkuiInternalFixedLayout--ios',\n filled && styles['FixedLayout--filled'],\n vertical && stylesVertical[vertical],\n className,\n )}\n style={{ ...style, width }}\n >\n {children}\n </OnboardingTooltipContainer>\n );\n};\n"],"names":["useCallback","React","classNames","useGlobalEventListener","usePlatform","useResizeObserver","useDOM","setRef","OnboardingTooltipContainer","SplitColContext","styles","stylesVertical","top","bottom","FixedLayout","children","style","vertical","getRootRef","filled","className","useParentWidth","restProps","platform","ref","useRef","width","setWidth","useState","undefined","window","colRef","useContext","parentRef","handleRootRef","node","parentElement","doResize","current","parentWidth","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed"],"mappings":";AAAA,SAASA,WAAW,QAAQ,QAAQ;AACpC,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,MAAM,QAAQ,kBAAkB;AAEzC,SAASC,0BAA0B,QAAQ,kDAAkD;AAC7F,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,iBAAiB;IACrBC,KAAKF,MAAM,CAAC,4BAA4B;IACxCG,QAAQX,WACNQ,MAAM,CAAC,+BAA+B,EACtC;AAEJ;AAuBA;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,cAAc,EACd,GAAGC,WACc;IACjB,MAAMC,WAAWnB;IACjB,MAAMoB,MAAMvB,MAAMwB,MAAM,CAAqB;IAC7C,MAAM,CAACC,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGxB;IACnB,MAAM,EAAEyB,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAACvB;IACpC,MAAMwB,YAAYhC,MAAMwB,MAAM,CAAqB;IAEnD,MAAMS,gBAAgBlC,YACpB,CAACmC;QACC,IAAI,CAACA,MAAM;YACT;QACF;QAEA5B,OAAO4B,MAAMjB;QACbX,OAAO4B,MAAMX;QACbjB,OAAO4B,KAAKC,aAAa,EAAEH;IAC7B,GACA;QAACf;KAAW;IAGd,MAAMmB,WAAW;QACf,IAAIhB,kBAAkBY,UAAUK,OAAO,EAAE;YACvC,MAAMC,cAAcN,UAAUK,OAAO,CAACE,qBAAqB,GAAGd,KAAK;YACnEC,SAASY,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,GAAGV;QAC9C,OAAO,IAAIE,QAAQO,SAAS;YAC1B,MAAMG,gBAAgBC,iBAAiBX,OAAOO,OAAO;YAErDX,SACE,CAAC,EACCI,OAAOO,OAAO,CAACK,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLnB,SAASE;QACX;IACF;IACA5B,MAAM8C,SAAS,CAACV,UAAU;QAACN;QAAQR;QAAUC;QAAKH;KAAe;IAEjElB,uBAAuB2B,QAAQ,UAAUO;IACzChC,kBAAkBgB,iBAAiBY,YAAYF,QAAQM;IAEvD,qBACE,KAAC7B;QACE,GAAGc,SAAS;QACb0B,KAAK;QACLxB,KAAKU;QACLd,WAAWlB,WACTQ,MAAM,CAAC,cAAc,EACrBa,aAAa,SAAS,gCACtBJ,UAAUT,MAAM,CAAC,sBAAsB,EACvCO,YAAYN,cAAc,CAACM,SAAS,EACpCG;QAEFJ,OAAO;YAAE,GAAGA,KAAK;YAAEU;QAAM;kBAExBX;;AAGP,EAAE"}

package/dist/cssm/components/Flex/Flex.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { type GapsProp } from '../../lib/layouts';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { FlexItemProps } from './FlexItem/FlexItem';
+export type { FlexItemProps };
+type FlexContentProps = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+export interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    /**
+     * Направление осей, эквивалентно `flex-direction`.
+     */
+    direction?: 'row' | 'column';
+    /**
+     * Отступы между элементами.
+     * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
+     * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.
+     */
+    gap?: GapsProp;
+    /**
+     * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.
+     */
+    noWrap?: boolean;
+    /**
+     * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.
+     */
+    align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+    /**
+     * Выравнивание элементов по главной оси, эквивалентно `justify-content`.
+     */
+    justify?: FlexContentProps;
+    /**
+     * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.
+     */
+    margin?: 'none' | 'auto';
+    /**
+     * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.
+     */
+    reverse?: boolean;
+}
+export declare const Flex: {
+    ({ gap, align, justify, margin, noWrap, direction, style: styleProp, reverse, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, alignSelf, flex, flexBasis, style, ...rest }: FlexItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=Flex.d.ts.map

package/dist/cssm/components/Flex/Flex.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EAEd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAG9D,YAAY,EAAE,aAAa,EAAE,CAAC;AAmB9B,KAAK,gBAAgB,GACjB,OAAO,GACP,KAAK,GACL,QAAQ,GACR,cAAc,GACd,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI;8FAUd,SAAS;;CA4BX,CAAC"}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '@vkontakte/vkjs';
+import { calculateGap, columnGapClassNames, rowGapClassNames } from '../../lib/layouts';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { FlexItem } from './FlexItem/FlexItem';
+import styles from './Flex.module.css';
+const justifyClassNames = {
+    'start': styles['Flex--justify-start'],
+    'end': styles['Flex--justify-end'],
+    'center': styles['Flex--justify-center'],
+    'space-around': styles['Flex--justify-space-around'],
+    'space-between': styles['Flex--justify-space-between'],
+    'space-evenly': styles['Flex--justify-space-evenly']
+};
+const alignClassNames = {
+    start: styles['Flex--align-start'],
+    end: styles['Flex--align-end'],
+    center: styles['Flex--align-center'],
+    stretch: styles['Flex--align-stretch'],
+    baseline: styles['Flex--align-baseline']
+};
+export const Flex = ({ gap, align, justify, margin = 'none', noWrap = false, direction = 'row', style: styleProp, reverse = false, ...props })=>{
+    const [columnGap, rowGap] = calculateGap(gap);
+    const style = {};
+    if (typeof rowGap === 'number') {
+        style['--vkui_internal--row_gap'] = `${rowGap}px`;
+    }
+    if (typeof columnGap === 'number') {
+        style['--vkui_internal--column_gap'] = `${columnGap}px`;
+    }
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        ...props,
+        baseClassName: classNames(styles.Flex, !noWrap && styles['Flex--wrap'], reverse && styles['Flex--reverse'], direction !== 'row' && styles['Flex--direction-column'], margin !== 'none' && styles['Flex--margin-auto'], typeof columnGap === 'string' && columnGapClassNames[columnGap], typeof rowGap === 'string' && rowGapClassNames[rowGap], align && alignClassNames[align], justify && justifyClassNames[justify]),
+        style: {
+            ...styleProp,
+            ...style
+        }
+    });
+};
+Flex.Item = FlexItem;
+//# sourceMappingURL=Flex.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n calculateGap,\n columnGapClassNames,\n type GapsProp,\n rowGapClassNames,\n} from '../../lib/layouts';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { FlexItem, FlexItemProps } from './FlexItem/FlexItem';\nimport styles from './Flex.module.css';\n\nexport type { FlexItemProps };\n\nconst justifyClassNames = {\n 'start': styles['Flex--justify-start'],\n 'end': styles['Flex--justify-end'],\n 'center': styles['Flex--justify-center'],\n 'space-around': styles['Flex--justify-space-around'],\n 'space-between': styles['Flex--justify-space-between'],\n 'space-evenly': styles['Flex--justify-space-evenly'],\n};\n\nconst alignClassNames = {\n start: styles['Flex--align-start'],\n end: styles['Flex--align-end'],\n center: styles['Flex--align-center'],\n stretch: styles['Flex--align-stretch'],\n baseline: styles['Flex--align-baseline'],\n};\n\ntype FlexContentProps =\n | 'start'\n | 'end'\n | 'center'\n | 'space-around'\n | 'space-between'\n | 'space-evenly';\n\nexport interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /**\n * Направление осей, эквивалентно `flex-direction`.\n */\n direction?: 'row' | 'column';\n /**\n * Отступы между элементами.\n * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.\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 = ({\n gap,\n align,\n justify,\n margin = 'none',\n noWrap = false,\n direction = 'row',\n style: styleProp,\n reverse = false,\n ...props\n}: FlexProps) => {\n const [columnGap, rowGap] = calculateGap(gap);\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 (\n <RootComponent\n {...props}\n baseClassName={classNames(\n styles.Flex,\n !noWrap && styles['Flex--wrap'],\n reverse && styles['Flex--reverse'],\n direction !== 'row' && styles['Flex--direction-column'],\n margin !== 'none' && styles['Flex--margin-auto'],\n typeof columnGap === 'string' && columnGapClassNames[columnGap],\n typeof rowGap === 'string' && rowGapClassNames[rowGap],\n align && alignClassNames[align],\n justify && justifyClassNames[justify],\n )}\n style={{ ...styleProp, ...style }}\n />\n );\n};\n\nFlex.Item = FlexItem;\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","FlexItem","styles","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","Flex","gap","align","justify","margin","noWrap","direction","style","styleProp","reverse","props","columnGap","rowGap","baseClassName","Item"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,oBAAoB;AAE3B,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,OAAOC,YAAY,oBAAoB;AAIvC,MAAMC,oBAAoB;IACxB,SAASD,MAAM,CAAC,sBAAsB;IACtC,OAAOA,MAAM,CAAC,oBAAoB;IAClC,UAAUA,MAAM,CAAC,uBAAuB;IACxC,gBAAgBA,MAAM,CAAC,6BAA6B;IACpD,iBAAiBA,MAAM,CAAC,8BAA8B;IACtD,gBAAgBA,MAAM,CAAC,6BAA6B;AACtD;AAEA,MAAME,kBAAkB;IACtBC,OAAOH,MAAM,CAAC,oBAAoB;IAClCI,KAAKJ,MAAM,CAAC,kBAAkB;IAC9BK,QAAQL,MAAM,CAAC,qBAAqB;IACpCM,SAASN,MAAM,CAAC,sBAAsB;IACtCO,UAAUP,MAAM,CAAC,uBAAuB;AAC1C;AA2CA,OAAO,MAAMQ,OAAO,CAAC,EACnBC,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,OAAOC,SAAS,EAChBC,UAAU,KAAK,EACf,GAAGC,OACO;IACV,MAAM,CAACC,WAAWC,OAAO,GAAGzB,aAAac;IACzC,MAAMM,QAA6B,CAAC;IAEpC,IAAI,OAAOK,WAAW,UAAU;QAC9BL,KAAK,CAAC,2BAA2B,GAAG,CAAC,EAAEK,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOD,cAAc,UAAU;QACjCJ,KAAK,CAAC,8BAA8B,GAAG,CAAC,EAAEI,UAAU,EAAE,CAAC;IACzD;IAEA,qBACE,KAACrB;QACE,GAAGoB,KAAK;QACTG,eAAe3B,WACbM,OAAOQ,IAAI,EACX,CAACK,UAAUb,MAAM,CAAC,aAAa,EAC/BiB,WAAWjB,MAAM,CAAC,gBAAgB,EAClCc,cAAc,SAASd,MAAM,CAAC,yBAAyB,EACvDY,WAAW,UAAUZ,MAAM,CAAC,oBAAoB,EAChD,OAAOmB,cAAc,YAAYvB,mBAAmB,CAACuB,UAAU,EAC/D,OAAOC,WAAW,YAAYvB,gBAAgB,CAACuB,OAAO,EACtDV,SAASR,eAAe,CAACQ,MAAM,EAC/BC,WAAWV,iBAAiB,CAACU,QAAQ;QAEvCI,OAAO;YAAE,GAAGC,SAAS;YAAE,GAAGD,KAAK;QAAC;;AAGtC,EAAE;AAEFP,KAAKc,IAAI,GAAGvB"}

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

@@ -0,0 +1,90 @@
+.Flex {
+  --vkui_internal--flex_original_margin_inline: 0px;
+  --vkui_internal--flex_original_margin_block: 0px;
+  display: flex;
+  margin-block: calc(
+      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+    )
+    var(--vkui_internal--flex_original_margin_block);
+  margin-inline: calc(
+      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+    )
+    var(--vkui_internal--flex_original_margin_inline);
+}
+.Flex--margin-auto {
+  --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);
+}
+.Flex--direction-column {
+  flex-direction: column;
+}
+.Flex--reverse {
+  flex-direction: row-reverse;
+}
+.Flex--direction-column.Flex--reverse {
+  flex-direction: column-reverse;
+}
+.Flex--wrap {
+  flex-wrap: wrap;
+}
+/* justify-content */
+.Flex--justify-start {
+  justify-content: flex-start;
+}
+.Flex--justify-end {
+  justify-content: flex-end;
+}
+.Flex--justify-center {
+  justify-content: center;
+}
+.Flex--justify-space-around {
+  justify-content: space-around;
+}
+.Flex--justify-space-between {
+  justify-content: space-between;
+}
+.Flex--justify-space-evenly {
+  justify-content: space-evenly;
+}
+/* align-items */
+.Flex--align-start {
+  align-items: flex-start;
+}
+.Flex--align-end {
+  align-items: flex-end;
+}
+.Flex--align-center {
+  align-items: center;
+}
+.Flex--align-stretch {
+  align-items: stretch;
+}
+.Flex--align-baseline {
+  align-items: baseline;
+}
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+.Flex > * {
+  margin-block: var(--vkui_internal--row_gap) 0;
+  margin-inline: var(--vkui_internal--column_gap) 0;
+}

package/dist/cssm/components/Flex/FlexItem/FlexItem.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { HasChildren, HTMLAttributesWithRootRef } from '../../../types';
+export interface FlexItemProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasChildren {
+    /**
+     * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`
+     */
+    alignSelf: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /**
+     * Позволяет задать предопределенные значения шортката `flex`
+     * `grow` соответствует значению `1 0 auto`
+     * `shrink` соответствует значению `0 1 auto`
+     * `content` соответствует значению `0 0 auto`
+     */
+    flex: 'grow' | 'shrink' | 'content' | 'fixed';
+    /**
+     * Изначальный размер элемента, эквивалентно `flex-basis`
+     */
+    flexBasis: number;
+}
+export declare const FlexItem: ({ children, alignSelf, flex, flexBasis, style, ...rest }: FlexItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FlexItem.d.ts.map

package/dist/cssm/components/Flex/FlexItem/FlexItem.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAmBxE,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,WAAW;IAC3F;;OAEG;IACH,SAAS,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAC/D;;;;;OAKG;IACH,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IAC9C;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,6DAOlB,aAAa,4CAcf,CAAC"}