npm - @vkontakte/vkui - Versions diffs - 6.1.1 → 6.2.0 - Mend

@vkontakte/vkui 6.1.1 → 6.2.0

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 (2039) hide show

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

package/dist/cjs/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":["Div","props","RootComponent","baseClassName"],"~~rangeMappings":";;;;;;;;;;;;;;;","~~mappings":";;;;+BASaA;;;eAAAA;;;;;+BARiB;AAQvB,MAAMA,MAAM,CAACC,sBAAoB,qBAACC,4BAAa;QAACC,aAAa;OAAqBF"}
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":["Div","props","RootComponent","baseClassName"],"mappings":";;;;+BASaA;;;eAAAA;;;;;+BARiB;AAQvB,MAAMA,MAAM,CAACC,sBAAoB,qBAACC,4BAAa;QAACC,aAAa;OAAqBF"}

package/dist/cjs/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":["DropZone","onDragOver","onDragLeave","onDrop","children","props","active","setActive","React","useState","onActive","event","isPropagationStopped","offActive","RootComponent","baseClassName","classNames","callMultiple","displayName","Grid","DropZoneGrid"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;iEAvBU;sBACI;8BACE;+BAEC;8BACD;AAkBtB,MAAMA,WAAW;QAAC,EACvBC,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,EAEM,WADXC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAAC;IAE3C,MAAMC,WAAmD,CAACC;QACxD,IAAIA,MAAMC,oBAAoB,IAAI;YAChC;QACF;QAEAL,UAAU;IACZ;IAEA,MAAMM,YAAoD;QACxDN,UAAU;IACZ;IAEA,qBACE,qBAACO,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,kBAAqBV;QAC9CL,YAAYgB,IAAAA,0BAAY,EAAChB,YAAYS;QACrCR,aAAae,IAAAA,0BAAY,EAACf,aAAaW;QACvCV,QAAQc,IAAAA,0BAAY,EAACd,QAAQU;OACzBR;kBAEH,OAAOD,aAAa,aAAaA,SAAS;YAAEE;QAAO,KAAKF;;AAG/D;AAEAJ,SAASkB,WAAW,GAAG;AAEvBlB,SAASmB,IAAI,GAAGC,0BAAY;AAC5BpB,SAASmB,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":["DropZone","onDragOver","onDragLeave","onDrop","children","props","active","setActive","React","useState","onActive","event","isPropagationStopped","offActive","RootComponent","baseClassName","classNames","callMultiple","displayName","Grid","DropZoneGrid"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;iEAvBU;sBACI;8BACE;+BAEC;8BACD;AAkBtB,MAAMA,WAAW;QAAC,EACvBC,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,EAEM,WADXC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAAC;IAE3C,MAAMC,WAAmD,CAACC;QACxD,IAAIA,MAAMC,oBAAoB,IAAI;YAChC;QACF;QAEAL,UAAU;IACZ;IAEA,MAAMM,YAAoD;QACxDN,UAAU;IACZ;IAEA,qBACE,qBAACO,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,kBAAqBV;QAC9CL,YAAYgB,IAAAA,0BAAY,EAAChB,YAAYS;QACrCR,aAAae,IAAAA,0BAAY,EAACf,aAAaW;QACvCV,QAAQc,IAAAA,0BAAY,EAACd,QAAQU;OACzBR;kBAEH,OAAOD,aAAa,aAAaA,SAAS;YAAEE;QAAO,KAAKF;;AAG/D;AAEAJ,SAASkB,WAAW,GAAG;AAEvBlB,SAASmB,IAAI,GAAGC,0BAAY;AAC5BpB,SAASmB,IAAI,CAACD,WAAW,GAAG"}

package/dist/cjs/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":["DropZoneGrid","directionStyle","row","column","direction","props","RootComponent","baseClassName","classNames","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAcaA;;;eAAAA;;;;;;sBAdc;+BAEG;AAG9B,MAAMC,iBAAiB;IACrBC,GAAG;IACHC,MAAM;AACR;AAMO,MAAMH,eAAe;QAAC,EAAEI,YAAY,QAAQ,EAA+B,WAA1BC;QAAzBD;;yBAC7B,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,sBAAyBP,cAAc,CAACG,UAAU;OACvEC;;AAIRL,aAAaS,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":["DropZoneGrid","directionStyle","row","column","direction","props","RootComponent","baseClassName","classNames","displayName"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;sBAdc;+BAEG;AAG9B,MAAMC,iBAAiB;IACrBC,GAAG;IACHC,MAAM;AACR;AAMO,MAAMH,eAAe;QAAC,EAAEI,YAAY,QAAQ,EAA+B,WAA1BC;QAAzBD;;yBAC7B,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,sBAAyBP,cAAc,CAACG,UAAU;OACvEC;;AAIRL,aAAaS,WAAW,GAAG"}

package/dist/cjs/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":["DropdownIcon","opened","className","restProps","sizeY","useAdaptivityConditionalRender","IconCompact","Icon20ChevronUp","Icon20Dropdown","IconRegular","Icon24ChevronUp","Icon24ChevronDown","React","Fragment","compact","classNames","regular"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAeaA;;;eAAAA;;;;;;;iEAfU;uBAMhB;sBACoB;gDACoB;AAOxC,MAAMA,eAAe;QAAC,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAmC,WAA9BC;QAA9BF;QAAgBC;;IAC7C,MAAM,EAAEE,KAAK,EAAE,GAAGC,IAAAA,8DAA8B;IAChD,MAAMC,cAAcL,SAASM,sBAAe,GAAGC,qBAAc;IAC7D,MAAMC,cAAcR,SAASS,sBAAe,GAAGC,wBAAiB;IAEhE,qBACE,sBAACC,OAAMC,QAAQ;;YACZT,MAAMU,OAAO,kBACZ,qBAACR;gBAAYJ,WAAWa,IAAAA,gBAAU,EAACX,MAAMU,OAAO,CAACZ,SAAS,EAAEA;eAAgBC;YAE7EC,MAAMY,OAAO,kBACZ,qBAACP;gBAAYP,WAAWa,IAAAA,gBAAU,EAACX,MAAMY,OAAO,CAACd,SAAS,EAAEA;eAAgBC;;;AAIpF"}
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":["DropdownIcon","opened","className","restProps","sizeY","useAdaptivityConditionalRender","IconCompact","Icon20ChevronUp","Icon20Dropdown","IconRegular","Icon24ChevronUp","Icon24ChevronDown","React","Fragment","compact","classNames","regular"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;iEAfU;uBAMhB;sBACoB;gDACoB;AAOxC,MAAMA,eAAe;QAAC,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAmC,WAA9BC;QAA9BF;QAAgBC;;IAC7C,MAAM,EAAEE,KAAK,EAAE,GAAGC,IAAAA,8DAA8B;IAChD,MAAMC,cAAcL,SAASM,sBAAe,GAAGC,qBAAc;IAC7D,MAAMC,cAAcR,SAASS,sBAAe,GAAGC,wBAAiB;IAEhE,qBACE,sBAACC,OAAMC,QAAQ;;YACZT,MAAMU,OAAO,kBACZ,qBAACR;gBAAYJ,WAAWa,IAAAA,gBAAU,EAACX,MAAMU,OAAO,CAACZ,SAAS,EAAEA;eAAgBC;YAE7EC,MAAMY,OAAO,kBACZ,qBAACP;gBAAYP,WAAWa,IAAAA,gBAAU,EAACX,MAAMY,OAAO,CAACd,SAAS,EAAEA;eAAgBC;;;AAIpF"}

package/dist/cjs/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":["Epic","warn","warnOnce","activeStory","tabbar","children","restProps","scroll","React","useRef","current","story","Children","toArray","find","isValidElement","getNavId","props","RootComponent","baseClassName","classNames","ScrollSaver","initialScroll","saveScroll","value"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;iEApBU;sBACI;0BACF;0BACA;+BAEK;6BACF;AAS5B,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMF,OAAO;QAAC,EAAEG,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAA2B,WAAtBC;QAAlCH;QAAaC;QAAQC;;IAC1C,MAAME,SAASC,OAAMC,MAAM,CAA4B,CAAC,GAAGC,OAAO;QAG/DF;IADH,MAAMG,QACJ,CAACH,+BAAAA,OAAMI,QAAQ,CAACC,OAAO,CAACR,UAAUS,IAAI,CACpC,CAACH,sBAAUH,OAAMO,cAAc,CAACJ,UAAUK,IAAAA,kBAAQ,EAACL,MAAMM,KAAK,EAAEhB,UAAUE,0BAD3EK,0CAAAA,+BAEuC;IAE1C,qBACE,sBAACU,4BAAa,8CACRZ;QACJa,eAAeC,IAAAA,gBAAU,cAAiBhB,UAAU;;0BAEpD,qBAACiB,wBAAW;gBAEVC,eAAef,MAAM,CAACJ,YAAY,IAAI;gBACtCoB,YAAY,CAACC,QAAWjB,MAAM,CAACJ,YAAY,GAAGqB;0BAE7Cb;eAJIR;YAMNC;;;AAGP"}
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":["Epic","warn","warnOnce","activeStory","tabbar","children","restProps","scroll","React","useRef","current","story","Children","toArray","find","isValidElement","getNavId","props","RootComponent","baseClassName","classNames","ScrollSaver","initialScroll","saveScroll","value"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;iEApBU;sBACI;0BACF;0BACA;+BAEK;6BACF;AAS5B,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMF,OAAO;QAAC,EAAEG,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAA2B,WAAtBC;QAAlCH;QAAaC;QAAQC;;IAC1C,MAAME,SAASC,OAAMC,MAAM,CAA4B,CAAC,GAAGC,OAAO;QAG/DF;IADH,MAAMG,QACJ,CAACH,+BAAAA,OAAMI,QAAQ,CAACC,OAAO,CAACR,UAAUS,IAAI,CACpC,CAACH,sBAAUH,OAAMO,cAAc,CAACJ,UAAUK,IAAAA,kBAAQ,EAACL,MAAMM,KAAK,EAAEhB,UAAUE,0BAD3EK,0CAAAA,+BAEuC;IAE1C,qBACE,sBAACU,4BAAa,8CACRZ;QACJa,eAAeC,IAAAA,gBAAU,cAAiBhB,UAAU;;0BAEpD,qBAACiB,wBAAW;gBAEVC,eAAef,MAAM,CAACJ,YAAY,IAAI;gBACtCoB,YAAY,CAACC,QAAWjB,MAAM,CAACJ,YAAY,GAAGqB;0BAE7Cb;eAJIR;YAMNC;;;AAGP"}

package/dist/cjs/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":["ScrollSaver","children","initialScroll","saveScroll","getScroll","scrollTo","React","useContext","ScrollContext","useIsomorphicLayoutEffect","y","Fragment"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAaaA;;;eAAAA;;;;;iEAbU;2CACmB;+BAEZ;AAUvB,MAAMA,cAAc,CAAC,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,UAAU,EAAoB;IACnF,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAMC,UAAU,CAACC,4BAAa;IAC9DC,IAAAA,oDAAyB,EAAC;QACxB,IAAI,OAAOP,kBAAkB,UAAU;YACrCG,SAAS,GAAGH;QACd;QACA,OAAO,IAAMC,WAAWC,YAAYM,CAAC;IACvC,GAAG,EAAE;IACL,qBAAO,qBAACJ,OAAMK,QAAQ;kBAAEV;;AAC1B"}
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":["ScrollSaver","children","initialScroll","saveScroll","getScroll","scrollTo","React","useContext","ScrollContext","useIsomorphicLayoutEffect","y","Fragment"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;iEAbU;2CACmB;+BAEZ;AAUvB,MAAMA,cAAc,CAAC,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,UAAU,EAAoB;IACnF,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAMC,UAAU,CAACC,4BAAa;IAC9DC,IAAAA,oDAAyB,EAAC;QACxB,IAAI,OAAOP,kBAAkB,UAAU;YACrCG,SAAS,GAAGH;QACd;QACA,OAAO,IAAMC,WAAWC,YAAYM,CAAC;IACvC,GAAG,EAAE;IACL,qBAAO,qBAACJ,OAAMK,QAAQ;kBAAEV;;AAC1B"}

package/dist/cjs/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":["File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Button","Component","disabled","VisuallyHidden","title","type"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAcaA;;;eAAAA;;;;;;;;iEAdU;wBAEiB;gCACT;AAWxB,MAAMA,OAAO;QAAC,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,EAEA,WADPC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,sBAACE,cAAM;QACLC,WAAU;QACVd,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZK,UAAUH,UAAUG,QAAQ;;0BAE5B,qBAACC,8BAAc;gBAACC,OAAM;eAAOL;gBAAWE,WAAU;gBAAQI,MAAK;gBAAOR,YAAYD;;YACjFV;;;AAGP"}
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":["File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Button","Component","disabled","VisuallyHidden","title","type"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;;iEAdU;wBAEiB;gCACT;AAWxB,MAAMA,OAAO;QAAC,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,EAEA,WADPC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,sBAACE,cAAM;QACLC,WAAU;QACVd,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZK,UAAUH,UAAUG,QAAQ;;0BAE5B,qBAACC,8BAAc;gBAACC,OAAM;eAAOL;gBAAWE,WAAU;gBAAQI,MAAK;gBAAOR,YAAYD;;YACjFV;;;AAGP"}

package/dist/cjs/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/cjs/components/FixedLayout/FixedLayout.js CHANGED Viewed

@@ -15,10 +15,11 @@ const _object_without_properties = require("@swc/helpers/_/_object_without_prope
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
-const _useExternRef = require("../../hooks/useExternRef");
 const _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 const _usePlatform = require("../../hooks/usePlatform");
+const _useResizeObserver = require("../../hooks/useResizeObserver");
 const _dom = require("../../lib/dom");
+const _utils = require("../../lib/utils");
 const _OnboardingTooltipContainer = require("../OnboardingTooltip/OnboardingTooltipContainer");
 const _SplitColContext = require("../SplitCol/SplitColContext");
 const stylesVertical = {
@@ -36,14 +37,24 @@ const FixedLayout = (_param)=>{
         "useParentWidth"
     ]);
     const platform = (0, _usePlatform.usePlatform)();
-    const ref = (0, _useExternRef.useExternRef)(getRootRef);
+    const ref = _react.useRef(null);
     const [width, setWidth] = _react.useState(undefined);
     const { window } = (0, _dom.useDOM)();
     const { colRef } = _react.useContext(_SplitColContext.SplitColContext);
+    const parentRef = _react.useRef(null);
+    const handleRootRef = (0, _react.useCallback)((node)=>{
+        if (!node) {
+            return;
+        }
+        (0, _utils.setRef)(node, getRootRef);
+        (0, _utils.setRef)(node, ref);
+        (0, _utils.setRef)(node.parentElement, parentRef);
+    }, [
+        getRootRef
+    ]);
     const doResize = ()=>{
-        if (useParentWidth && ref.current) {
-            var _ref_current_parentElement;
-            const parentWidth = (_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.getBoundingClientRect().width;
+        if (useParentWidth && parentRef.current) {
+            const parentWidth = parentRef.current.getBoundingClientRect().width;
             setWidth(parentWidth ? `${parentWidth}px` : undefined);
         } else if (colRef === null || colRef === void 0 ? void 0 : colRef.current) {
             const computedStyle = getComputedStyle(colRef.current);
@@ -59,9 +70,10 @@ const FixedLayout = (_param)=>{
         useParentWidth
     ]);
     (0, _useGlobalEventListener.useGlobalEventListener)(window, 'resize', doResize);
+    (0, _useResizeObserver.useResizeObserver)(useParentWidth ? parentRef : colRef, doResize);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OnboardingTooltipContainer.OnboardingTooltipContainer, _object_spread_props._(_object_spread._({}, restProps), {
         fixed: true,
-        ref: ref,
+        ref: handleRootRef,
         className: (0, _vkjs.classNames)("vkuiFixedLayout", platform === 'ios' && 'vkuiInternalFixedLayout--ios', filled && "vkuiFixedLayout--filled", vertical && stylesVertical[vertical], className),
         style: _object_spread_props._(_object_spread._({}, style), {
             width

package/dist/cjs/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":["FixedLayout","stylesVertical","top","bottom","classNames","children","style","vertical","getRootRef","filled","className","useParentWidth","restProps","platform","usePlatform","ref","~~useExternRef~~","~~width~~","~~setWidth~~","~~React~~","useState","undefined","window","useDOM","colRef","useContext","SplitColContext","~~doResize~~","~~current~~","~~parentWidth~~","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","OnboardingTooltipContainer","fixed"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BA2CaA~~;;;eAAAA;;;;;;;;~~iEA3CU~~;~~sBACI~~;~~8BACE~~;~~wCACU;~~6BACX;~~qBACL~~;4CAEoB;iCACX;AAGhC,MAAMC,iBAAiB;IACrBC,GAAG;IACHC,QAAQC,IAAAA,gBAAU,sCAEhB;AAEJ;AA0BO,MAAMJ,cAAc;QAAC,EAC1BK,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,cAAc,EAEG,WADdC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAMC,MAAMC,~~IAAAA~~,~~0BAAY~~,~~EAACR~~;~~IACzB~~,MAAM,~~CAACS~~,OAAOC,SAAS,~~GAAGC~~,~~OAAMC~~,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGC,IAAAA,WAAM;IACzB,MAAM,EAAEC,MAAM,EAAE,~~GAAGL~~,~~OAAMM~~,UAAU,CAACC,gCAAe;~~IAEnD~~,MAAMC,~~WAAW~~;~~QACf~~,~~IAAIhB~~,~~kBAAkBI~~,~~IAAIa~~,~~OAAO~~,~~EAAE~~;~~gBACbb~~;~~YAApB~~,~~MAAMc~~,~~eAAcd~~,~~6BAAAA~~,~~IAAIa~~,~~OAAO~~,~~CAACE~~,aAAa,~~cAAzBf~~,~~iDAAAA~~,~~2BAA2BgB~~,qBAAqB,~~GAAGd~~,KAAK;~~YAC5EC~~,~~SAASW~~,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,~~GAAGR~~;QAC9C,OAAO,IAAIG,mBAAAA,6BAAAA,~~OAAQI~~,OAAO,EAAE;YAC1B,~~MAAMI~~,gBAAgBC,~~iBAAiBT~~,~~OAAOI~~,OAAO;~~YAErDV~~,SACE,CAAC,~~EACCM~~,~~OAAOI~~,OAAO,~~CAACM~~,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;~~YACLnB~~,~~SAASG~~;QACX;IACF;~~IACAF~~,~~OAAMmB~~,SAAS,~~CAACX~~,UAAU;~~QAACH~~;QAAQX;QAAUE;QAAKJ;KAAe;~~IACjE4B~~,IAAAA,8CAAsB,~~EAACjB~~,QAAQ,~~UAAUK~~;~~IAEzC~~,qBACE,qBAACa,sDAA0B,~~8CACrB5B~~;~~QACJ6B~~,KAAK;~~QACL1B~~,~~KAAKA~~;~~QACLL~~,WAAWN,IAAAA,gBAAU,qBAEnBS,aAAa,SAAS,gCACtBJ,qCACAF,YAAYN,cAAc,CAACM,SAAS,EACpCG;QAEFJ,OAAO,4CAAKA;~~YAAOW~~;;~~kBAElBZ~~;;AAGP"}
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":["FixedLayout","stylesVertical","top","bottom","classNames","children","style","vertical","getRootRef","filled","className","useParentWidth","restProps","platform","usePlatform","ref","React","useRef","width","setWidth","useState","undefined","window","useDOM","colRef","useContext","SplitColContext","parentRef","handleRootRef","useCallback","node","setRef","parentElement","doResize","current","parentWidth","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","useResizeObserver","OnboardingTooltipContainer","fixed"],"mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;;iEA7Ce;sBAED;wCACY;6BACX;mCACM;qBACX;uBACA;4CAEoB;iCACX;AAGhC,MAAMC,iBAAiB;IACrBC,GAAG;IACHC,QAAQC,IAAAA,gBAAU,sCAEhB;AAEJ;AA0BO,MAAMJ,cAAc;QAAC,EAC1BK,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,cAAc,EAEG,WADdC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAMC,MAAMC,OAAMC,MAAM,CAAqB;IAC7C,MAAM,CAACC,OAAOC,SAAS,GAAGH,OAAMI,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGC,IAAAA,WAAM;IACzB,MAAM,EAAEC,MAAM,EAAE,GAAGR,OAAMS,UAAU,CAACC,gCAAe;IACnD,MAAMC,YAAYX,OAAMC,MAAM,CAAqB;IAEnD,MAAMW,gBAAgBC,IAAAA,kBAAW,EAC/B,CAACC;QACC,IAAI,CAACA,MAAM;YACT;QACF;QAEAC,IAAAA,aAAM,EAACD,MAAMtB;QACbuB,IAAAA,aAAM,EAACD,MAAMf;QACbgB,IAAAA,aAAM,EAACD,KAAKE,aAAa,EAAEL;IAC7B,GACA;QAACnB;KAAW;IAGd,MAAMyB,WAAW;QACf,IAAItB,kBAAkBgB,UAAUO,OAAO,EAAE;YACvC,MAAMC,cAAcR,UAAUO,OAAO,CAACE,qBAAqB,GAAGlB,KAAK;YACnEC,SAASgB,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,GAAGd;QAC9C,OAAO,IAAIG,mBAAAA,6BAAAA,OAAQU,OAAO,EAAE;YAC1B,MAAMG,gBAAgBC,iBAAiBd,OAAOU,OAAO;YAErDf,SACE,CAAC,EACCK,OAAOU,OAAO,CAACK,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLvB,SAASE;QACX;IACF;IACAL,OAAM2B,SAAS,CAACV,UAAU;QAACT;QAAQX;QAAUE;QAAKJ;KAAe;IAEjEiC,IAAAA,8CAAsB,EAACtB,QAAQ,UAAUW;IACzCY,IAAAA,oCAAiB,EAAClC,iBAAiBgB,YAAYH,QAAQS;IAEvD,qBACE,qBAACa,sDAA0B,8CACrBlC;QACJmC,KAAK;QACLhC,KAAKa;QACLlB,WAAWN,IAAAA,gBAAU,qBAEnBS,aAAa,SAAS,gCACtBJ,qCACAF,YAAYN,cAAc,CAACM,SAAS,EACpCG;QAEFJ,OAAO,4CAAKA;YAAOY;;kBAElBb;;AAGP"}

package/dist/cjs/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/cjs/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/cjs/components/Flex/Flex.js ADDED Viewed

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Flex", {
+    enumerable: true,
+    get: function() {
+        return Flex;
+    }
+});
+const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
+const _vkjs = require("@vkontakte/vkjs");
+const _layouts = require("../../lib/layouts");
+const _RootComponent = require("../RootComponent/RootComponent");
+const _FlexItem = require("./FlexItem/FlexItem");
+const justifyClassNames = {
+    'start': "vkuiFlex--justify-start",
+    'end': "vkuiFlex--justify-end",
+    'center': "vkuiFlex--justify-center",
+    'space-around': "vkuiFlex--justify-space-around",
+    'space-between': "vkuiFlex--justify-space-between",
+    'space-evenly': "vkuiFlex--justify-space-evenly"
+};
+const alignClassNames = {
+    start: "vkuiFlex--align-start",
+    end: "vkuiFlex--align-end",
+    center: "vkuiFlex--align-center",
+    stretch: "vkuiFlex--align-stretch",
+    baseline: "vkuiFlex--align-baseline"
+};
+const Flex = (_param)=>{
+    var { gap, align, justify, margin = 'none', noWrap = false, direction = 'row', style: styleProp, reverse = false } = _param, props = _object_without_properties._(_param, [
+        "gap",
+        "align",
+        "justify",
+        "margin",
+        "noWrap",
+        "direction",
+        "style",
+        "reverse"
+    ]);
+    const [columnGap, rowGap] = (0, _layouts.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__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, props), {
+        baseClassName: (0, _vkjs.classNames)("vkuiFlex", !noWrap && "vkuiFlex--wrap", reverse && "vkuiFlex--reverse", direction !== 'row' && "vkuiFlex--direction-column", margin !== 'none' && "vkuiFlex--margin-auto", typeof columnGap === 'string' && _layouts.columnGapClassNames[columnGap], typeof rowGap === 'string' && _layouts.rowGapClassNames[rowGap], align && alignClassNames[align], justify && justifyClassNames[justify]),
+        style: _object_spread._({}, styleProp, style)
+    }));
+};
+Flex.Item = _FlexItem.FlexItem;
+//# sourceMappingURL=Flex.js.map

package/dist/cjs/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":["Flex","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","gap","align","justify","margin","noWrap","direction","style","styleProp","reverse","props","columnGap","rowGap","calculateGap","RootComponent","baseClassName","classNames","columnGapClassNames","rowGapClassNames","Item","FlexItem"],"mappings":";;;;+BAwEaA;;;eAAAA;;;;;;;sBAxEc;yBAMpB;+BAEuB;0BACU;AAKxC,MAAMC,oBAAoB;IACxB,OAAO;IACP,KAAK;IACL,QAAQ;IACR,cAAc;IACd,eAAe;IACf,cAAc;AAChB;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AA2CO,MAAMP,OAAO;QAAC,EACnBQ,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,OAAOC,SAAS,EAChBC,UAAU,KAAK,EAEL,WADPC;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,CAACE,WAAWC,OAAO,GAAGC,IAAAA,qBAAY,EAACZ;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,qBAACG,4BAAa,8CACRJ;QACJK,eAAeC,IAAAA,gBAAU,cAEvB,CAACX,4BACDI,gCACAH,cAAc,uCACdF,WAAW,mCACX,OAAOO,cAAc,YAAYM,4BAAmB,CAACN,UAAU,EAC/D,OAAOC,WAAW,YAAYM,yBAAgB,CAACN,OAAO,EACtDV,SAASP,eAAe,CAACO,MAAM,EAC/BC,WAAWT,iBAAiB,CAACS,QAAQ;QAEvCI,OAAO,qBAAKC,WAAcD;;AAGhC;AAEAd,KAAK0B,IAAI,GAAGC,kBAAQ"}

package/dist/cjs/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/cjs/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"}

package/dist/cjs/components/Flex/FlexItem/FlexItem.js ADDED Viewed

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FlexItem", {
+    enumerable: true,
+    get: function() {
+        return FlexItem;
+    }
+});
+const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
+const _vkjs = require("@vkontakte/vkjs");
+const _RootComponent = require("../../RootComponent/RootComponent");
+const flexClassNames = {
+    grow: "vkuiFlexItem--flex-grow",
+    shrink: "vkuiFlexItem--flex-shrink",
+    content: "vkuiFlexItem--flex-content",
+    fixed: "vkuiFlexItem--flex-fixed"
+};
+const alignSelfClassNames = {
+    start: "vkuiFlexItem--align-self-start",
+    end: "vkuiFlexItem--align-self-end",
+    center: "vkuiFlexItem--align-self-center",
+    baseline: "vkuiFlexItem--align-self-baseline",
+    stretch: "vkuiFlexItem--align-self-stretch"
+};
+const FlexItem = (_param)=>{
+    var { children, alignSelf, flex, flexBasis, style } = _param, rest = _object_without_properties._(_param, [
+        "children",
+        "alignSelf",
+        "flex",
+        "flexBasis",
+        "style"
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, rest), {
+        style: _object_spread_props._(_object_spread._({}, style), {
+            flexBasis
+        }),
+        baseClassName: (0, _vkjs.classNames)("vkuiFlexItem", alignSelf && alignSelfClassNames[alignSelf], flex && flexClassNames[flex]),
+        children: children
+    }));
+};
+//# sourceMappingURL=FlexItem.js.map

package/dist/cjs/components/Flex/FlexItem/FlexItem.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './FlexItem.module.css';\n\nconst flexClassNames = {\n grow: styles['FlexItem--flex-grow'],\n shrink: styles['FlexItem--flex-shrink'],\n content: styles['FlexItem--flex-content'],\n fixed: styles['FlexItem--flex-fixed'],\n};\n\nconst alignSelfClassNames = {\n start: styles['FlexItem--align-self-start'],\n end: styles['FlexItem--align-self-end'],\n center: styles['FlexItem--align-self-center'],\n baseline: styles['FlexItem--align-self-baseline'],\n stretch: styles['FlexItem--align-self-stretch'],\n};\n\nexport interface FlexItemProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasChildren {\n /**\n * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`\n */\n alignSelf: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n /**\n * Позволяет задать предопределенные значения шортката `flex`\n * `grow` соответствует значению `1 0 auto`\n * `shrink` соответствует значению `0 1 auto`\n * `content` соответствует значению `0 0 auto`\n */\n flex: 'grow' | 'shrink' | 'content' | 'fixed';\n /**\n * Изначальный размер элемента, эквивалентно `flex-basis`\n */\n flexBasis: number;\n}\n\nexport const FlexItem = ({\n children,\n alignSelf,\n flex,\n flexBasis,\n style,\n ...rest\n}: FlexItemProps) => {\n return (\n <RootComponent\n {...rest}\n style={{ ...style, flexBasis }}\n baseClassName={classNames(\n styles.FlexItem,\n alignSelf && alignSelfClassNames[alignSelf],\n flex && flexClassNames[flex],\n )}\n >\n {children}\n </RootComponent>\n );\n};\n"],"names":["FlexItem","flexClassNames","grow","shrink","content","fixed","alignSelfClassNames","start","end","center","baseline","stretch","children","alignSelf","flex","flexBasis","style","rest","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;sBAtCc;+BAEG;AAG9B,MAAMC,iBAAiB;IACrBC,IAAI;IACJC,MAAM;IACNC,OAAO;IACPC,KAAK;AACP;AAEA,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,QAAQ;IACRC,OAAO;AACT;AAoBO,MAAMX,WAAW;QAAC,EACvBY,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,KAAK,EAES,WADXC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,4BAAa,8CACRD;QACJD,OAAO,4CAAKA;YAAOD;;QACnBI,eAAeC,IAAAA,gBAAU,kBAEvBP,aAAaP,mBAAmB,CAACO,UAAU,EAC3CC,QAAQb,cAAc,CAACa,KAAK;kBAG7BF;;AAGP"}

package/dist/cjs/components/FloatingArrow/DefaultIcon.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DefaultIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/FloatingArrow/DefaultIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAKxC,eAAO,MAAM,WAAW,UAAW,~~MAAM~~,aAAa,CAAC,aAAa,CAAC,4CAYpE,CAAC"}
1	+ {"version":3,"file":"DefaultIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/FloatingArrow/DefaultIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAKxC,eAAO,MAAM,WAAW,UAAW,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,4CAYpE,CAAC"}

package/dist/cjs/components/FloatingArrow/DefaultIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/FloatingArrow/DefaultIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\n/*\n Примечание 1.\n \n В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа\n * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при\n * изменении масштаба страницы.\n \n Чтобы исправление сработало нужно:\n * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.\n * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.\n \n https://github.com/VKCOM/VKUI/issues/2123\n */\n\nexport const DEFAULT_ARROW_WIDTH = 20;\nexport const DEFAULT_ARROW_HEIGHT = 8;\nexport const DEFAULT_ARROW_PADDING = 10;\n\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\n\nexport const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>) => {\n return (\n <svg\n width={DEFAULT_ARROW_WIDTH}\n height={ARROW_HEIGHT_WITH_WHITE_SPACE}\n viewBox={`0 0 ${DEFAULT_ARROW_WIDTH} ${ARROW_HEIGHT_WITH_WHITE_SPACE}`}\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n </svg>\n );\n};\n"],"names":["DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DEFAULT_ARROW_WIDTH","DefaultIcon","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","props","svg","width","height","viewBox","xmlns","path","d","fill"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;IAiBaA,oBAAoB;eAApBA;;IACAC,qBAAqB;eAArBA;;IAFAC,mBAAmB;eAAnBA;;IAOAC,WAAW;eAAXA;;;;;;;iEAvBU;AAgBhB,MAAMD,sBAAsB;AAC5B,MAAMF,uBAAuB;AAC7B,MAAMC,wBAAwB;AAErC,MAAMG,kBAAkB;AACxB,MAAMC,gCAAgCL,uBAAuBI;AAEtD,MAAMD,cAAc,CAACG;IAC1B,qBACE,qBAACC;QACCC,OAAON;QACPO,QAAQJ;QACRK,SAAS,CAAC,IAAI,EAAER,oBAAoB,CAAC,EAAEG,8BAA8B,CAAC;QACtEM,OAAM;OACFL;kBAEJ,cAAA,qBAACM;YAAKC,GAAE;YAA6CC,MAAK;;;AAGhE"}
1	+ {"version":3,"sources":["../../../../src/components/FloatingArrow/DefaultIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\n/*\n Примечание 1.\n \n В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа\n * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при\n * изменении масштаба страницы.\n \n Чтобы исправление сработало нужно:\n * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.\n * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.\n \n https://github.com/VKCOM/VKUI/issues/2123\n */\n\nexport const DEFAULT_ARROW_WIDTH = 20;\nexport const DEFAULT_ARROW_HEIGHT = 8;\nexport const DEFAULT_ARROW_PADDING = 10;\n\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\n\nexport const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>) => {\n return (\n <svg\n width={DEFAULT_ARROW_WIDTH}\n height={ARROW_HEIGHT_WITH_WHITE_SPACE}\n viewBox={`0 0 ${DEFAULT_ARROW_WIDTH} ${ARROW_HEIGHT_WITH_WHITE_SPACE}`}\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n </svg>\n );\n};\n"],"names":["DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DEFAULT_ARROW_WIDTH","DefaultIcon","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","props","svg","width","height","viewBox","xmlns","path","d","fill"],"mappings":";;;;;;;;;;;IAiBaA,oBAAoB;eAApBA;;IACAC,qBAAqB;eAArBA;;IAFAC,mBAAmB;eAAnBA;;IAOAC,WAAW;eAAXA;;;;;;;iEAvBU;AAgBhB,MAAMD,sBAAsB;AAC5B,MAAMF,uBAAuB;AAC7B,MAAMC,wBAAwB;AAErC,MAAMG,kBAAkB;AACxB,MAAMC,gCAAgCL,uBAAuBI;AAEtD,MAAMD,cAAc,CAACG;IAC1B,qBACE,qBAACC;QACCC,OAAON;QACPO,QAAQJ;QACRK,SAAS,CAAC,IAAI,EAAER,oBAAoB,CAAC,EAAEG,8BAA8B,CAAC;QACtEM,OAAM;OACFL;kBAEJ,cAAA,qBAACM;YAAKC,GAAE;YAA6CC,MAAK;;;AAGhE"}

package/dist/cjs/components/FloatingArrow/FloatingArrow.js CHANGED Viewed

@@ -60,38 +60,48 @@ function getArrowPositionData(placement, coords = {
         }
     };
     if (placement.startsWith('top')) {
+        const xOffsetProp = getXOffsetProp(placement, isStaticOffset);
         return [
             'bottom',
             {
                 top: '100%',
-                left: withOffset(false)
+                [xOffsetProp]: withOffset(false)
             }
         ];
     } else if (placement.startsWith('right')) {
+        const yOffsetProp = getYOffsetProp(placement, isStaticOffset);
         return [
             'left',
             {
-                top: withOffset(true),
+                [yOffsetProp]: withOffset(true),
                 left: 0
             }
         ];
     } else if (placement.startsWith('bottom')) {
+        const xOffsetProp = getXOffsetProp(placement, isStaticOffset);
         return [
             undefined,
             {
                 bottom: '100%',
-                left: withOffset(false)
+                [xOffsetProp]: withOffset(false)
             }
         ];
     } else {
+        const yOffsetProp = getYOffsetProp(placement, isStaticOffset);
         return [
             'right',
             {
-                top: withOffset(true),
+                [yOffsetProp]: withOffset(true),
                 right: 0
             }
         ];
     }
 }
+function getXOffsetProp(placement, isStaticOffset) {
+    return placement.endsWith('end') && isStaticOffset ? 'right' : 'left';
+}
+function getYOffsetProp(placement, isStaticOffset) {
+    return placement.endsWith('end') && isStaticOffset ? 'bottom' : 'top';
+}
 //# sourceMappingURL=FloatingArrow.js.map