npm - @vkontakte/vkui - Versions diffs - 5.4.3 → 5.5.1 - Mend

@vkontakte/vkui 5.4.3 → 5.5.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 (1975) hide show

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 { SizeType } from '../../lib/adaptivity';\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 } 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 styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n none: styles['DateRangeInput--sizeY-none'],\n [SizeType.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 \| 'prevMonthAriaLabel'\n \| 'nextMonthAriaLabel'\n \| 'changeMonthAriaLabel'\n \| 'changeYearAriaLabel'\n \| 'changeDayAriaLabel'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n >,\n HasRootRef<HTMLDivElement>,\n FormFieldProps {\n calendarPlacement?: PlacementWithAuto;\n closeOnChange?: boolean;\n clearFieldAriaLabel?: string;\n showCalendarAriaLabel?: string;\n changeStartDayAriaLabel?: string;\n changeStartMonthAriaLabel?: string;\n changeStartYearAriaLabel?: string;\n changeEndDayAriaLabel?: string;\n changeEndMonthAriaLabel?: string;\n changeEndYearAriaLabel?: 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 prevMonthAriaLabel,\n nextMonthAriaLabel,\n changeDayAriaLabel,\n changeMonthAriaLabel,\n changeYearAriaLabel,\n changeStartDayAriaLabel = 'Изменить день начала',\n changeStartMonthAriaLabel = 'Изменить месяц начала',\n changeStartYearAriaLabel = 'Изменить год начала',\n changeEndDayAriaLabel = 'Изменить день окончания',\n changeEndMonthAriaLabel = 'Изменить месяц окончания',\n changeEndYearAriaLabel = 'Изменить год окончания',\n clearFieldAriaLabel = 'Очистить поле',\n showCalendarAriaLabel = 'Показать календарь',\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?: Array<Date \| null> \| 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 !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n getRootRef={handleRootRef}\n after={\n value ? (\n <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n <Icon16Clear />\n </IconButton>\n ) : (\n <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\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 <span 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 aria-label={changeStartDayAriaLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={monthsStartRef}\n index={1}\n onElementSelect={setFocusedElement}\n value={internalValue[1]}\n aria-label={changeStartMonthAriaLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={4}\n getRootRef={yearsStartRef}\n index={2}\n onElementSelect={setFocusedElement}\n value={internalValue[2]}\n aria-label={changeStartYearAriaLabel}\n />\n <InputLikeDivider>{' — '}</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={daysEndRef}\n index={3}\n onElementSelect={setFocusedElement}\n value={internalValue[3]}\n aria-label={changeEndDayAriaLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={monthsEndRef}\n index={4}\n onElementSelect={setFocusedElement}\n value={internalValue[4]}\n aria-label={changeEndMonthAriaLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={4}\n getRootRef={yearsEndRef}\n index={5}\n onElementSelect={setFocusedElement}\n value={internalValue[5]}\n aria-label={changeEndYearAriaLabel}\n />\n </span>\n {open && !disableCalendar && (\n <Popper targetRef={rootRef} offsetDistance={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 prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n changeDayAriaLabel={changeDayAriaLabel}\n prevMonthIcon={prevMonthIcon}\n nextMonthIcon={nextMonthIcon}\n />\n </Popper>\n )}\n </FormField>\n );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","styles","dateInputStyles","sizeYClassNames","none","COMPACT","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","prevMonthAriaLabel","nextMonthAriaLabel","changeDayAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeStartDayAriaLabel","changeStartMonthAriaLabel","changeStartYearAriaLabel","changeEndDayAriaLabel","changeEndMonthAriaLabel","changeEndYearAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","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","REGULAR","after","hoverMode","aria-label","input","type","span","onKeyDown","onElementSelect","targetRef","offsetDistance","placement","onClose"],"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 { SizeType } from '../../lib/adaptivity';\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 } 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 styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n none: styles['DateRangeInput--sizeY-none'],\n [SizeType.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 \| 'prevMonthAriaLabel'\n \| 'nextMonthAriaLabel'\n \| 'changeMonthAriaLabel'\n \| 'changeYearAriaLabel'\n \| 'changeDayAriaLabel'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n >,\n HasRootRef<HTMLDivElement>,\n FormFieldProps {\n calendarPlacement?: PlacementWithAuto;\n closeOnChange?: boolean;\n clearFieldAriaLabel?: string;\n showCalendarAriaLabel?: string;\n changeStartDayAriaLabel?: string;\n changeStartMonthAriaLabel?: string;\n changeStartYearAriaLabel?: string;\n changeEndDayAriaLabel?: string;\n changeEndMonthAriaLabel?: string;\n changeEndYearAriaLabel?: 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 prevMonthAriaLabel,\n nextMonthAriaLabel,\n changeDayAriaLabel,\n changeMonthAriaLabel,\n changeYearAriaLabel,\n changeStartDayAriaLabel = 'Изменить день начала',\n changeStartMonthAriaLabel = 'Изменить месяц начала',\n changeStartYearAriaLabel = 'Изменить год начала',\n changeEndDayAriaLabel = 'Изменить день окончания',\n changeEndMonthAriaLabel = 'Изменить месяц окончания',\n changeEndYearAriaLabel = 'Изменить год окончания',\n clearFieldAriaLabel = 'Очистить поле',\n showCalendarAriaLabel = 'Показать календарь',\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?: Array<Date \| null> \| 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 !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n getRootRef={handleRootRef}\n after={\n value ? (\n <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n <Icon16Clear />\n </IconButton>\n ) : (\n <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\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 <span 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 aria-label={changeStartDayAriaLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={monthsStartRef}\n index={1}\n onElementSelect={setFocusedElement}\n value={internalValue[1]}\n aria-label={changeStartMonthAriaLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={4}\n getRootRef={yearsStartRef}\n index={2}\n onElementSelect={setFocusedElement}\n value={internalValue[2]}\n aria-label={changeStartYearAriaLabel}\n />\n <InputLikeDivider>{' — '}</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={daysEndRef}\n index={3}\n onElementSelect={setFocusedElement}\n value={internalValue[3]}\n aria-label={changeEndDayAriaLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={monthsEndRef}\n index={4}\n onElementSelect={setFocusedElement}\n value={internalValue[4]}\n aria-label={changeEndMonthAriaLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={4}\n getRootRef={yearsEndRef}\n index={5}\n onElementSelect={setFocusedElement}\n value={internalValue[5]}\n aria-label={changeEndYearAriaLabel}\n />\n </span>\n {open && !disableCalendar && (\n <Popper targetRef={rootRef} offsetDistance={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 prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n changeDayAriaLabel={changeDayAriaLabel}\n prevMonthIcon={prevMonthIcon}\n nextMonthIcon={nextMonthIcon}\n />\n </Popper>\n )}\n </FormField>\n );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","styles","dateInputStyles","sizeYClassNames","none","COMPACT","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","prevMonthAriaLabel","nextMonthAriaLabel","changeDayAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeStartDayAriaLabel","changeStartMonthAriaLabel","changeStartYearAriaLabel","changeEndDayAriaLabel","changeEndMonthAriaLabel","changeEndYearAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","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","REGULAR","after","hoverMode","aria-label","input","type","span","onKeyDown","onElementSelect","targetRef","offsetDistance","placement","onClose"],"mappings":"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"}

package/dist/cssm/components/Div/Div.d.ts CHANGED Viewed

@@ -5,4 +5,4 @@ export interface DivProps extends React.HTMLAttributes<HTMLDivElement>, HasRootR
 /**
  * @see https://vkcom.github.io/VKUI/#/Div
  */
-export declare const Div: ({ children, getRootRef, className, ...restProps }: DivProps) => JSX.Element;
+export declare const Div: ({ children, getRootRef, className, ...restProps }: DivProps) => React.JSX.Element;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Div.module.css';\n\nexport interface DivProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = ({ children, getRootRef, className, ...restProps }: DivProps) => {\n return (\n <div {...restProps} ref={getRootRef} className={classNames(styles['Div'], className)}>\n {children}\n </div>\n );\n};\n"],"names":["React","classNames","styles","Div","children","getRootRef","className","restProps","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,mBAAmB;AAMtC;;CAEC,GACD,OAAO,MAAMC,MAAM,CAAC,EAAEC,SAAQ,EAAEC,WAAU,EAAEC,UAAS,EAAE,GAAGC,WAAqB~~,GAAK~~;~~IAClF~~,qBACE,oBAACC;QAAK,GAAGD,SAAS;QAAEE,KAAKJ;QAAYC,WAAWL,WAAWC,MAAM,CAAC,MAAM,EAAEI;OACvEF;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Div.module.css';\n\nexport interface DivProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = ({ children, getRootRef, className, ...restProps }: DivProps) => {\n return (\n <div {...restProps} ref={getRootRef} className={classNames(styles['Div'], className)}>\n {children}\n </div>\n );\n};\n"],"names":["React","classNames","styles","Div","children","getRootRef","className","restProps","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,mBAAmB;AAMtC;;CAEC,GACD,OAAO,MAAMC,MAAM,CAAC,EAAEC,SAAQ,EAAEC,WAAU,EAAEC,UAAS,EAAE,GAAGC,WAAqB;IAC7E,qBACE,oBAACC;QAAK,GAAGD,SAAS;QAAEE,KAAKJ;QAAYC,WAAWL,WAAWC,MAAM,CAAC,MAAM,EAAEI;OACvEF;AAGP,EAAE"}

package/dist/cssm/components/DropdownIcon/DropdownIcon.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface DropdownIconProps extends React.HTMLAttributes<SVGSVGElement> {
     opened?: boolean;
 }
-export declare const DropdownIcon: ({ opened, className, ...restProps }: DropdownIconProps) => JSX.Element;
+export declare const DropdownIcon: ({ opened, className, ...restProps }: DropdownIconProps) => React.JSX.Element;

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';\n\nexport interface DropdownIconProps extends React.HTMLAttributes<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;AAM5F,OAAO,MAAMC,eAAe,CAAC,EAAEC,QAAS,~~KAAK~~,~~CAAA,~~EAAEC,UAAS,EAAE,GAAGC,WAA8B~~,GAAK~~;~~IAC9F~~,MAAM,EAAEC,MAAK,EAAE,GAAGL;IAClB,MAAMM,cAAcJ,SAASP,kBAAkBC~~,cAAc~~;~~IAC7D~~,MAAMW,cAAcL,SAASJ,kBAAkBD~~,iBAAiB~~;~~IAEhE~~,qBACE,oBAACH,MAAMc,~~QAAQ~~,~~QACZH,~~MAAMI,~~OAAO~~,~~kBACZ,~~oBAACH;QAAYH,WAAWJ,WAAWM,MAAMI,~~OAAO~~,~~CAACN,SAAS,EAAEA~~;QAAa,GAAGC,SAAS;QAEtFC,MAAMK,~~OAAO~~,~~kBACZ,~~oBAACH;QAAYJ,WAAWJ,WAAWM,MAAMK,~~OAAO~~,~~CAACP,SAAS,EAAEA~~;QAAa,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';\n\nexport interface DropdownIconProps extends React.HTMLAttributes<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;AAM5F,OAAO,MAAMC,eAAe,CAAC,EAAEC,QAAS,MAAK,EAAEC,UAAS,EAAE,GAAGC,WAA8B;IACzF,MAAM,EAAEC,MAAK,EAAE,GAAGL;IAClB,MAAMM,cAAcJ,SAASP,kBAAkBC;IAC/C,MAAMW,cAAcL,SAASJ,kBAAkBD;IAE/C,qBACE,oBAACH,MAAMc,gBACJH,MAAMI,yBACL,oBAACH;QAAYH,WAAWJ,WAAWM,MAAMI,QAAQN,WAAWA;QAAa,GAAGC,SAAS;QAEtFC,MAAMK,yBACL,oBAACH;QAAYJ,WAAWJ,WAAWM,MAAMK,QAAQP,WAAWA;QAAa,GAAGC,SAAS;;AAI7F,EAAE"}

package/dist/cssm/components/Epic/Epic.d.ts CHANGED Viewed

@@ -6,4 +6,4 @@ export interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Epic
  */
-export declare const Epic: (props: EpicProps) => JSX.Element;
+export declare const Epic: (props: EpicProps) => React.JSX.Element;

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 { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {\n tabbar?: React.ReactNode;\n activeStory: string;\n}\n\nconst warn = warnOnce('Epic');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = (props: EpicProps) => {\n const scroll = React.useRef<{ [key: string]: number }>({}).current;\n const { activeStory, tabbar, children, className, ...restProps } = props;\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 <div\n {...restProps}\n className={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar', className)}\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 </div>\n );\n};\n"],"names":["React","classNames","getNavId","warnOnce","ScrollSaver","styles","warn","Epic","props","scroll","useRef","current","activeStory","tabbar","children","className","restProps","story","Children","toArray","find","isValidElement","div","key","initialScroll","saveScroll","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAOvC,MAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMI,OAAO,CAACC~~,QAAqB~~;~~IACxC~~,MAAMC,SAAST,MAAMU,~~MAAM~~,~~CAA4B,~~CAAC,GAAGC~~,OAAO~~;~~IAClE~~,MAAM,EAAEC,YAAW,EAAEC,OAAM,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAW,GAAGR;IAEnE,MAAMS,QACJ,AAACjB,MAAMkB,~~QAAQ~~,~~CAACC~~,~~OAAO,CAACL,~~UAAUM,~~IAAI~~,~~CACpC,~~CAACH,sBAAUjB,MAAMqB,~~cAAc~~,~~CAACJ,~~UAAUf,SAASe,MAAMT,~~KAAK~~,~~EAAEF,~~UAAUM,gBACpC~~,IAAI~~;~~IAE9C~~,qBACE,oBAACU;QACE,GAAGN,SAAS;QACbD,WAAWd,WAAWI,MAAM,CAAC,OAAO,EAAEQ,UAAU,+BAA+BE;qBAE/E,oBAACX;QACCmB,KAAKX;QACLY,eAAef,MAAM,CAACG,YAAY,IAAI;QACtCa,YAAY,CAACC,QAAWjB,MAAM,CAACG,YAAY,GAAGc;OAE7CT,QAEFJ;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 { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {\n tabbar?: React.ReactNode;\n activeStory: string;\n}\n\nconst warn = warnOnce('Epic');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = (props: EpicProps) => {\n const scroll = React.useRef<{ [key: string]: number }>({}).current;\n const { activeStory, tabbar, children, className, ...restProps } = props;\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 <div\n {...restProps}\n className={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar', className)}\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 </div>\n );\n};\n"],"names":["React","classNames","getNavId","warnOnce","ScrollSaver","styles","warn","Epic","props","scroll","useRef","current","activeStory","tabbar","children","className","restProps","story","Children","toArray","find","isValidElement","div","key","initialScroll","saveScroll","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAOvC,MAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMI,OAAO,CAACC;IACnB,MAAMC,SAAST,MAAMU,OAAkC,CAAC,GAAGC;IAC3D,MAAM,EAAEC,YAAW,EAAEC,OAAM,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAW,GAAGR;IAEnE,MAAMS,QACJ,AAACjB,MAAMkB,SAASC,QAAQL,UAAUM,KAChC,CAACH,sBAAUjB,MAAMqB,eAAeJ,UAAUf,SAASe,MAAMT,OAAOF,UAAUM,gBACpC;IAE1C,qBACE,oBAACU;QACE,GAAGN,SAAS;QACbD,WAAWd,WAAWI,MAAM,CAAC,OAAO,EAAEQ,UAAU,+BAA+BE;qBAE/E,oBAACX;QACCmB,KAAKX;QACLY,eAAef,MAAM,CAACG,YAAY,IAAI;QACtCa,YAAY,CAACC,QAAWjB,MAAM,CAACG,YAAY,GAAGc;OAE7CT,QAEFJ;AAGP,EAAE"}

package/dist/cssm/components/Epic/ScrollSaver.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HasChildren } from '../../types';
 export interface ScrollSaverProps extends HasChildren {
     initialScroll?: number;
@@ -7,4 +7,4 @@ export interface ScrollSaverProps extends HasChildren {
 /**
  * @see https://vkcom.github.io/VKUI/#/ScrollSaver
  */
-export declare const ScrollSaver: ({ children, initialScroll, saveScroll }: ScrollSaverProps) => JSX.Element;
+export declare const ScrollSaver: ({ children, initialScroll, saveScroll }: ScrollSaverProps) => React.JSX.Element;

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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AAOzD;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAAEC,SAAQ,EAAEC,cAAa,EAAEC,WAAU,EAAoB~~,GAAK~~;~~IACxF~~,MAAM,EAAEC,UAAS,EAAEC,SAAQ,EAAE,GAAGR,MAAMS,~~UAAU,CAACP~~;IACjDD,0BAA0B~~,IAAM~~;~~QAC9B~~,IAAI,OAAOI,kBAAkB,UAAU;YACrCG,SAAS,GAAGH;QACd~~,CAAC~~;~~QACD~~,OAAO,IAAMC,WAAWC,YAAYG~~,CAAC~~;~~IACvC~~,GAAG,EAAE;IACL,qBAAO,oBAACV,MAAMW,~~QAAQ,QAAEP~~;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,SAAQ,EAAEC,cAAa,EAAEC,WAAU,EAAoB;IACnF,MAAM,EAAEC,UAAS,EAAEC,SAAQ,EAAE,GAAGR,MAAMS,WAAWP;IACjDD,0BAA0B;QACxB,IAAI,OAAOI,kBAAkB,UAAU;YACrCG,SAAS,GAAGH;QACd;QACA,OAAO,IAAMC,WAAWC,YAAYG;IACtC,GAAG,EAAE;IACL,qBAAO,oBAACV,MAAMW,gBAAUP;AAC1B,EAAE"}

package/dist/cssm/components/File/File.d.ts CHANGED Viewed

@@ -6,4 +6,4 @@ export interface FileProps extends Omit<VKUIButtonProps, 'type'>, Omit<React.Inp
 /**
  * @see https://vkcom.github.io/VKUI/#/File
  */
-export declare const File: ({ children, align, size, mode, stretched, before, after, loading, className, style, getRef, getRootRef, appearance, ...restProps }: FileProps) => JSX.Element;
+export declare const File: ({ children, align, size, mode, stretched, before, after, loading, className, style, getRef, getRootRef, appearance, ...restProps }: FileProps) => React.JSX.Element;

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 {...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","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,UAAW,gBAAe,EAC1BC,OAAQ,OAAM,EACdC,KAAI,EACJC,KAAI,EACJC,UAAS,EACTC,OAAM,EACNC,MAAK,EACLC,QAAO,EACPC,UAAS,EACTC,MAAK,EACLC,OAAM,EACNC,WAAU,EACVC,WAAU,EACV,GAAGC,WACO~~,GAAK~~;~~IACf~~,qBACE,oBAAChB;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~~;~~qBAE5B~~,oBAACjB;QAAgB,GAAGe,SAAS;QAAEC,WAAU;QAAQE,MAAK;QAAOL,YAAYD;QACxEV;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 {...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","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,UAAW,gBAAe,EAC1BC,OAAQ,OAAM,EACdC,KAAI,EACJC,KAAI,EACJC,UAAS,EACTC,OAAM,EACNC,MAAK,EACLC,QAAO,EACPC,UAAS,EACTC,MAAK,EACLC,OAAM,EACNC,WAAU,EACVC,WAAU,EACV,GAAGC,WACO;IACV,qBACE,oBAAChB;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;qBAEpB,oBAACjB;QAAgB,GAAGe,SAAS;QAAEC,WAAU;QAAQE,MAAK;QAAOL,YAAYD;QACxEV;AAGP,EAAE"}

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

@@ -17,4 +17,4 @@ export interface FixedLayoutState {
 /**
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */
-export declare const FixedLayout: ({ children, style, vertical, getRootRef, getRef, filled, className, ...restProps }: FixedLayoutProps) => JSX.Element;
+export declare const FixedLayout: ({ children, style, vertical, getRootRef, getRef, filled, className, ...restProps }: FixedLayoutProps) => React.JSX.Element;

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 { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n vertical?: 'top' \| 'bottom';\n /*\n Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n /\n filled?: 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 getRef,\n filled,\n className,\n ...restProps\n}: FixedLayoutProps) => {\n const platform = usePlatform();\n const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n const [width, setWidth] = React.useState<string \| undefined>(undefined);\n const { window } = useDOM();\n const { colRef } = React.useContext(SplitColContext);\n const doResize = () => {\n 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]);\n useGlobalEventListener(window, 'resize', doResize);\n\n return (\n <TooltipContainer\n {...restProps}\n fixed\n ref={ref}\n className={classNames(\n styles['FixedLayout'],\n platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n filled && styles['FixedLayout--filled'],\n vertical &&\n {\n top: styles['FixedLayout--vertical-top'],\n bottom: classNames(\n styles['FixedLayout--vertical-bottom'],\n 'vkuiInternalFixedLayout--vertical-bottom',\n ),\n }[vertical],\n className,\n )}\n style={{ ...style, width }}\n >\n {children}\n </TooltipContainer>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","styles","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"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;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,OAAOC,YAAY,2BAA2B;AAqB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,OAAM,EACNC,UAAS,EACT,GAAGC,WACc~~,GAAK~~;~~IACtB~~,MAAMC,WAAWf;IACjB,MAAMgB,MAAMlB,aAAaY,YAAYC,SAAS,6BAA6B;IAC3E,MAAM,CAACM,OAAOC,SAAS,GAAGtB,MAAMuB,~~QAAQ,CAAqBC~~;IAC7D,MAAM,EAAEC,OAAM,EAAE,GAAGpB;IACnB,MAAM,EAAEqB,OAAM,EAAE,GAAG1B,MAAM2B,~~UAAU,CAACpB~~;IACpC,MAAMqB,WAAW~~,IAAM~~;~~QACrB~~,IAAIF,QAAQG,SAAS;YACnB,MAAMC,gBAAgBC,iBAAiBL,OAAOG~~,OAAO~~;~~YAErDP~~,SACE,CAAC,EACCI,OAAOG,~~OAAO~~,~~CAACG~~,~~WAAW,GAC1BC,~~WAAWH,cAAcI,~~WAAW~~,~~IACpCD,~~WAAWH,cAAcK,~~YAAY~~,~~EACtC,~~EAAE,CAAC;QAER,OAAO;YACLb,SAASE;QACX~~,CAAC~~;~~IACH~~;IACAxB,MAAMoC,~~SAAS~~,~~CAACR,~~UAAU;QAACF;QAAQP;KAAS;IAC5ChB,uBAAuBsB,QAAQ,UAAUG;IAEzC,qBACE,oBAACpB;QACE,GAAGU,SAAS;QACbmB,OAAAA~~,IAAK~~;~~QACLjB~~,KAAKA;QACLH,WAAWhB,WACTQ,MAAM,CAAC,cAAc,EACrBU,aAAab,SAASgC,~~GAAG~~,~~IAAI,~~gCAC7BtB,UAAUP,MAAM,CAAC,sBAAsB,EACvCI,YACE,CAAA;YACE0B,KAAK9B,MAAM,CAAC,4BAA4B;YACxC+B,QAAQvC,WACNQ,MAAM,CAAC,+BAA+B,EACtC;QAEJ,CAAA,CAAC,CAACI,SAAS,EACbI;QAEFL,OAAO;YAAE,GAAGA,KAAK;YAAES;QAAM;OAExBV;AAGP,EAAE"}
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 { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n vertical?: 'top' \| 'bottom';\n /*\n Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n /\n filled?: 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 getRef,\n filled,\n className,\n ...restProps\n}: FixedLayoutProps) => {\n const platform = usePlatform();\n const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n const [width, setWidth] = React.useState<string \| undefined>(undefined);\n const { window } = useDOM();\n const { colRef } = React.useContext(SplitColContext);\n const doResize = () => {\n 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]);\n useGlobalEventListener(window, 'resize', doResize);\n\n return (\n <TooltipContainer\n {...restProps}\n fixed\n ref={ref}\n className={classNames(\n styles['FixedLayout'],\n platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n filled && styles['FixedLayout--filled'],\n vertical &&\n {\n top: styles['FixedLayout--vertical-top'],\n bottom: classNames(\n styles['FixedLayout--vertical-bottom'],\n 'vkuiInternalFixedLayout--vertical-bottom',\n ),\n }[vertical],\n className,\n )}\n style={{ ...style, width }}\n >\n {children}\n </TooltipContainer>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","styles","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"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;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,OAAOC,YAAY,2BAA2B;AAqB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,OAAM,EACNC,UAAS,EACT,GAAGC,WACc;IACjB,MAAMC,WAAWf;IACjB,MAAMgB,MAAMlB,aAAaY,YAAYC,SAAS,6BAA6B;IAC3E,MAAM,CAACM,OAAOC,SAAS,GAAGtB,MAAMuB,SAA6BC;IAC7D,MAAM,EAAEC,OAAM,EAAE,GAAGpB;IACnB,MAAM,EAAEqB,OAAM,EAAE,GAAG1B,MAAM2B,WAAWpB;IACpC,MAAMqB,WAAW;QACf,IAAIF,QAAQG,SAAS;YACnB,MAAMC,gBAAgBC,iBAAiBL,OAAOG;YAE9CP,SACE,CAAC,EACCI,OAAOG,QAAQG,cACfC,WAAWH,cAAcI,eACzBD,WAAWH,cAAcK,cAC1B,EAAE,CAAC;QAER,OAAO;YACLb,SAASE;QACX;IACF;IACAxB,MAAMoC,UAAUR,UAAU;QAACF;QAAQP;KAAS;IAC5ChB,uBAAuBsB,QAAQ,UAAUG;IAEzC,qBACE,oBAACpB;QACE,GAAGU,SAAS;QACbmB,OAAAA;QACAjB,KAAKA;QACLH,WAAWhB,WACTQ,MAAM,CAAC,cAAc,EACrBU,aAAab,SAASgC,OAAO,gCAC7BtB,UAAUP,MAAM,CAAC,sBAAsB,EACvCI,YACE,CAAA;YACE0B,KAAK9B,MAAM,CAAC,4BAA4B;YACxC+B,QAAQvC,WACNQ,MAAM,CAAC,+BAA+B,EACtC;QAEJ,CAAA,CAAC,CAACI,SAAS,EACbI;QAEFL,OAAO;YAAE,GAAGA,KAAK;YAAES;QAAM;OAExBV;AAGP,EAAE"}

package/dist/cssm/components/FocusTrap/FocusTrap.d.ts CHANGED Viewed

@@ -8,4 +8,4 @@ export interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, Ha
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
  */
-export declare const FocusTrap: ({ Component, onClose, restoreFocus, timeout, getRootRef, children, ...restProps }: FocusTrapProps) => JSX.Element;
+export declare const FocusTrap: ({ Component, onClose, restoreFocus, timeout, getRootRef, children, ...restProps }: FocusTrapProps) => React.JSX.Element;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent {\n restoreFocus?: boolean;\n timeout?: number;\n onClose?(): void;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n Component = 'div',\n onClose,\n restoreFocus = true,\n timeout = 0,\n getRootRef,\n children,\n ...restProps\n}: FocusTrapProps) => {\n const ref = useExternRef<HTMLElement>(getRootRef);\n\n const { document, window } = useDOM();\n\n const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] \| null>(null);\n const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement \| null>(null);\n\n // HANDLE TRAP MOUNT\n\n const { keyboardInput } = React.useContext(AppRootContext);\n const focusOnTrapMount = useTimeout(() => {\n if (\n keyboardInput &&\n !ref.current?.contains(document!.activeElement) &&\n focusableNodes?.length\n ) {\n focusableNodes[0].focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n focusOnTrapMount.set();\n }, []);\n\n // HANDLE FOCUSABLE NODES\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const nodes: HTMLElement[] = [];\n Array.prototype.forEach.call(\n // eslint-disable-next-line no-restricted-properties\n ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n (focusableEl: Element) => {\n const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n if (display !== 'none' && visibility !== 'hidden') {\n nodes.push(focusableEl as HTMLElement);\n }\n },\n );\n\n if (nodes.length === 0) {\n // Чтобы фокус был хотя бы на родителе\n nodes.push(ref.current);\n }\n\n setFocusableNodes(nodes);\n }, [children]);\n\n // HANDLE TRAP UNMOUNT\n\n const focusOnTrapUnmount = useTimeout(() => {\n if (restoreFocusTo) {\n restoreFocusTo.focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n if (restoreFocus && document!.activeElement) {\n setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n return () => {\n focusOnTrapUnmount.set();\n };\n }\n\n return;\n }, [restoreFocus]);\n\n const onDocumentKeydown = (e: KeyboardEvent) => {\n if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n const lastIdx = focusableNodes.length - 1;\n const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n const shouldFocusFirstNode = targetIdx === -1 \|\| (targetIdx === lastIdx && !e.shiftKey);\n\n if (shouldFocusFirstNode \|\| (targetIdx === 0 && e.shiftKey)) {\n e.preventDefault();\n\n const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n if (node !== document!.activeElement) {\n node.focus();\n }\n\n return false;\n }\n }\n\n if (onClose && pressedKey(e) === Keys.ESCAPE) {\n onClose();\n }\n\n return true;\n };\n useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n capture: true,\n });\n\n return (\n <Component tabIndex={-1} ref={ref} {...restProps}>\n {children}\n </Component>\n );\n};\n"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","focusableNodes","setFocusableNodes","useState","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","display","visibility","getComputedStyle","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,uBAAuB,EAAEC,IAAI,EAAEC,UAAU,QAAQ,0BAA0B;AACpF,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,cAAc,QAAQ,4BAA4B;AAE3D,MAAMC,qBAA6BN,wBAAwBO~~,IAAI~~;~~AAU/D~~;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,WAAY,MAAK,EACjBC,QAAO,EACPC,cAAe,~~IAAI~~,~~CAAA,~~EACnBC,SAAU,EAAC,EACXC,WAAU,EACVC,SAAQ,EACR,GAAGC,WACY~~,GAAK~~;~~IACpB~~,MAAMC,MAAMnB,aAA0BgB;IAEtC,MAAM,EAAEI,SAAQ,EAAEC,OAAM,EAAE,GAAGf;IAE7B,MAAM,CAACgB,gBAAgBC,kBAAkB,GAAGxB,MAAMyB,~~QAAQ,CAAuB,IAAI~~;~~IACrF~~,MAAM,CAACC,gBAAgBC,kBAAkB,GAAG3B,MAAMyB,~~QAAQ,CAAqB,IAAI~~;~~IAEnF~~,oBAAoB;IAEpB,MAAM,EAAEG,cAAa,EAAE,GAAG5B,MAAM6B,~~UAAU,CAACpB~~;IAC3C,MAAMqB,mBAAmB3B,WAAW~~,IAAM~~;~~QACxC~~,IACEyB,iBACA,CAACR,IAAIW,~~OAAO~~,~~EAAEC,~~SAASX,SAAUY,~~aAAa~~,~~KAC9CV,~~gBAAgBW,QAChB;YACAX,cAAc,CAAC,EAAE,CAACY~~,KAAK~~;~~QACzB,CAAC~~;~~IACH~~,GAAGnB;IACHR,0BAA0B~~,IAAM~~;~~QAC9BsB~~,iBAAiBM~~,GAAG~~;~~IACtB~~,GAAG,EAAE;IAEL,yBAAyB;IAEzB5B,0BAA0B~~,IAAM~~;~~QAC9B~~,IAAI,CAACY,IAAIW,~~OAAO,EAAE~~;YAChB;QACF~~,CAAC~~;~~QAED~~,MAAMM,QAAuB,EAAE;QAC/BC,MAAMC,~~SAAS~~,~~CAACC~~,~~OAAO~~,~~CAACC,IAAI,CAC1B,~~oDAAoD;QACpDrB,IAAIW,~~OAAO~~,~~CAACW~~,~~gBAAgB,CAAChC,~~qBAC7B,CAACiC~~,cAAyB~~;~~YACxB~~,MAAM,EAAEC,QAAO,EAAEC,WAAU,EAAE,GAAGvB,OAAQwB,~~gBAAgB,CAACH~~;YAEzD,IAAIC,YAAY,UAAUC,eAAe,UAAU;gBACjDR,MAAMU,~~IAAI,CAACJ~~;YACb~~,CAAC~~;~~QACH~~;QAGF,IAAIN,MAAMH,~~MAAM~~,~~KAAK,~~GAAG;YACtB,sCAAsC;YACtCG,MAAMU,~~IAAI~~,~~CAAC3B,~~IAAIW~~,OAAO~~;~~QACxB,CAAC~~;~~QAEDP~~,kBAAkBa;IACpB,GAAG;QAACnB;KAAS;IAEb,sBAAsB;IAEtB,MAAM8B,qBAAqB7C,WAAW~~,IAAM~~;~~QAC1C~~,IAAIuB,gBAAgB;YAClBA,eAAeS~~,KAAK~~;~~QACtB,CAAC~~;~~IACH~~,GAAGnB;IACHR,0BAA0B~~,IAAM~~;~~QAC9B~~,IAAIO,gBAAgBM,SAAUY,~~aAAa,EAAE~~;YAC3CN,kBAAkBN,SAAUY~~,aAAa~~;~~YAEzC~~,OAAO~~,IAAM~~;~~gBACXe~~,mBAAmBZ~~,GAAG~~;~~YACxB~~;QACF~~,CAAC~~;~~QAED~~;IACF,GAAG;QAACrB;KAAa;IAEjB,MAAMkC,oBAAoB,CAACC~~,IAAqB~~;~~QAC9C~~,IAAI5C,WAAW4C,OAAO7C,KAAK8C,~~GAAG~~,~~IAAI5B,~~gBAAgBW,QAAQ;YACxD,MAAMkB,UAAU7B,eAAeW,~~MAAM,GAAG~~;YACxC,MAAMmB,YAAY9B,eAAe+B,~~SAAS~~,~~CAAC,~~CAACC,OAASA,SAASL,EAAEM~~,MAAM~~;~~YAEtE~~,MAAMC,uBAAuBJ,cAAc,CAAC,KAAMA,cAAcD,WAAW,CAACF,EAAEQ~~,QAAQ~~;~~YAEtF~~,IAAID,wBAAyBJ,cAAc,KAAKH,EAAEQ,~~QAAQ,EAAG~~;gBAC3DR,EAAES~~,cAAc~~;~~gBAEhB~~,MAAMJ,OAAOhC,cAAc,CAACkC,uBAAuB,IAAIL,~~OAAO,CAAC~~;gBAE/D,IAAIG,SAASlC,SAAUY,~~aAAa,EAAE~~;oBACpCsB,KAAKpB~~,KAAK~~;~~gBACZ,CAAC~~;~~gBAED~~,OAAO~~,KAAK~~;~~YACd,CAAC~~;~~QACH,CAAC~~;~~QAED~~,IAAIrB,WAAWR,WAAW4C,OAAO7C,KAAKuD,~~MAAM,EAAE~~;YAC5C9C;QACF~~,CAAC~~;~~QAED~~,OAAO~~,IAAI~~;~~IACb~~;IACAZ,uBAAuBmB,UAAU,WAAW4B,mBAAmB;QAC7DY,SAAS~~,IAAI~~;~~IACf~~;IAEA,qBACE,oBAAChD;QAAUiD,UAAU,CAAC;QAAG1C,KAAKA;QAAM,GAAGD,SAAS;OAC7CD;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent {\n restoreFocus?: boolean;\n timeout?: number;\n onClose?(): void;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n Component = 'div',\n onClose,\n restoreFocus = true,\n timeout = 0,\n getRootRef,\n children,\n ...restProps\n}: FocusTrapProps) => {\n const ref = useExternRef<HTMLElement>(getRootRef);\n\n const { document, window } = useDOM();\n\n const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] \| null>(null);\n const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement \| null>(null);\n\n // HANDLE TRAP MOUNT\n\n const { keyboardInput } = React.useContext(AppRootContext);\n const focusOnTrapMount = useTimeout(() => {\n if (\n keyboardInput &&\n !ref.current?.contains(document!.activeElement) &&\n focusableNodes?.length\n ) {\n focusableNodes[0].focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n focusOnTrapMount.set();\n }, []);\n\n // HANDLE FOCUSABLE NODES\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const nodes: HTMLElement[] = [];\n Array.prototype.forEach.call(\n // eslint-disable-next-line no-restricted-properties\n ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n (focusableEl: Element) => {\n const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n if (display !== 'none' && visibility !== 'hidden') {\n nodes.push(focusableEl as HTMLElement);\n }\n },\n );\n\n if (nodes.length === 0) {\n // Чтобы фокус был хотя бы на родителе\n nodes.push(ref.current);\n }\n\n setFocusableNodes(nodes);\n }, [children]);\n\n // HANDLE TRAP UNMOUNT\n\n const focusOnTrapUnmount = useTimeout(() => {\n if (restoreFocusTo) {\n restoreFocusTo.focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n if (restoreFocus && document!.activeElement) {\n setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n return () => {\n focusOnTrapUnmount.set();\n };\n }\n\n return;\n }, [restoreFocus]);\n\n const onDocumentKeydown = (e: KeyboardEvent) => {\n if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n const lastIdx = focusableNodes.length - 1;\n const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n const shouldFocusFirstNode = targetIdx === -1 \|\| (targetIdx === lastIdx && !e.shiftKey);\n\n if (shouldFocusFirstNode \|\| (targetIdx === 0 && e.shiftKey)) {\n e.preventDefault();\n\n const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n if (node !== document!.activeElement) {\n node.focus();\n }\n\n return false;\n }\n }\n\n if (onClose && pressedKey(e) === Keys.ESCAPE) {\n onClose();\n }\n\n return true;\n };\n useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n capture: true,\n });\n\n return (\n <Component tabIndex={-1} ref={ref} {...restProps}>\n {children}\n </Component>\n );\n};\n"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","focusableNodes","setFocusableNodes","useState","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","display","visibility","getComputedStyle","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture","tabIndex"],"mappings":"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"}

package/dist/cssm/components/FocusVisible/FocusVisible.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 export type FocusVisibleMode = 'inside' | 'outside' | 'outline';
 export interface FocusVisibleProps {
     visible: boolean | undefined;
@@ -8,4 +8,4 @@ export interface FocusVisibleProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
  */
-export declare const FocusVisible: ({ visible, mode, thin }: FocusVisibleProps) => JSX.Element;
+export declare const FocusVisible: ({ visible, mode, thin, ...restProps }: FocusVisibleProps) => React.JSX.Element;

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

@@ -3,7 +3,8 @@ import { classNames } from '@vkontakte/vkjs';
 import styles from './FocusVisible.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
- */ export const FocusVisible = ({ visible , mode , thin  })=>/*#__PURE__*/ React.createElement("span", {
+ */ export const FocusVisible = ({ visible , mode , thin , ...restProps })=>/*#__PURE__*/ React.createElement("span", {
+        ...restProps,
         "aria-hidden": true,
         className: classNames(styles['FocusVisible'], visible && styles['FocusVisible--visible'], thin && styles['FocusVisible--thin'], {
             inside: styles['FocusVisible--mode-inside'],

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './FocusVisible.module.css';\n\nexport type FocusVisibleMode = 'inside' \| 'outside' \| 'outline';\n\nexport interface FocusVisibleProps {\n visible: boolean \| undefined;\n mode: FocusVisibleMode;\n thin?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ visible, mode, thin }: FocusVisibleProps) => (\n <span\n aria-hidden\n className={classNames(\n styles['FocusVisible'],\n visible && styles['FocusVisible--visible'],\n thin && styles['FocusVisible--thin'],\n {\n inside: styles['FocusVisible--mode-inside'],\n outside: styles['FocusVisible--mode-outside'],\n outline: styles['FocusVisible--mode-outline'],\n }[mode],\n )}\n />\n);\n"],"names":["React","classNames","styles","FocusVisible","visible","mode","thin","span","aria-hidden","className","inside","outside","outline"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAU/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAAEC,QAAO,EAAEC,KAAI,EAAEC,KAAI,~~EAAqB~~,~~iBACrE~~,oBAACC;~~QACCC~~,~~eAAAA~~,~~IAAW~~;~~QACXC~~,~~WAAWR~~,WACTC,MAAM,CAAC,eAAe,EACtBE,WAAWF,MAAM,CAAC,wBAAwB,EAC1CI,QAAQJ,MAAM,CAAC,qBAAqB,EACpC;~~YACEQ~~,~~QAAQR~~,MAAM,CAAC,4BAA4B;~~YAC3CS~~,~~SAAST~~,MAAM,CAAC,6BAA6B;~~YAC7CU~~,~~SAASV~~,MAAM,CAAC,6BAA6B;QAC/C,CAAC,CAACG,KAAK;OAGX"}
1	+ {"version":3,"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './FocusVisible.module.css';\n\nexport type FocusVisibleMode = 'inside' \| 'outside' \| 'outline';\n\nexport interface FocusVisibleProps {\n visible: boolean \| undefined;\n mode: FocusVisibleMode;\n thin?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ visible, mode, thin, ...restProps }: FocusVisibleProps) => (\n <span\n {...restProps}\n aria-hidden\n className={classNames(\n styles['FocusVisible'],\n visible && styles['FocusVisible--visible'],\n thin && styles['FocusVisible--thin'],\n {\n inside: styles['FocusVisible--mode-inside'],\n outside: styles['FocusVisible--mode-outside'],\n outline: styles['FocusVisible--mode-outline'],\n }[mode],\n )}\n />\n);\n"],"names":["React","classNames","styles","FocusVisible","visible","mode","thin","restProps","span","aria-hidden","className","inside","outside","outline"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAU/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAAEC,QAAO,EAAEC,KAAI,EAAEC,KAAI,EAAE,GAAGC,WAA8B,iBACnF,oBAACC;QACE,GAAGD,SAAS;QACbE,eAAAA;QACAC,WAAWT,WACTC,MAAM,CAAC,eAAe,EACtBE,WAAWF,MAAM,CAAC,wBAAwB,EAC1CI,QAAQJ,MAAM,CAAC,qBAAqB,EACpC;YACES,QAAQT,MAAM,CAAC,4BAA4B;YAC3CU,SAASV,MAAM,CAAC,6BAA6B;YAC7CW,SAASX,MAAM,CAAC,6BAA6B;QAC/C,CAAC,CAACG,KAAK;OAGX"}

package/dist/cssm/components/FocusVisible/FocusVisible.module.css CHANGED Viewed

@@ -75,30 +75,30 @@
     --vkui_internal--focus_visible_distance: 0;
   }
+}
+@keyframes vkui-animation-focus-visible {
+  0% {
+  }
+  100% {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    will-change: auto;
+  }
+}
-  @keyframes vkui-animation-focus-visible {
-    0% {
-    }
-    100% {
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      will-change: auto;
-    }
+@keyframes vkui-animation-focus-visible-outside {
+  0% {
   }
-  @keyframes vkui-animation-focus-visible-outside {
-    0% {
-    }
-    100% {
-      top: -2px;
-      left: -2px;
-      bottom: -2px;
-      right: -2px;
-      will-change: auto;
-    }
+  100% {
+    top: -2px;
+    left: -2px;
+    bottom: -2px;
+    right: -2px;
+    will-change: auto;
   }
 }

package/dist/cssm/components/Footer/Footer.d.ts CHANGED Viewed

@@ -4,4 +4,4 @@ export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
  */
-export declare const Footer: ({ children, className, ...restProps }: FooterProps) => JSX.Element;
+export declare const Footer: ({ children, className, ...restProps }: FooterProps) => React.JSX.Element;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/*\n @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n return (\n <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n {children}\n </Footnote>\n );\n};\n"],"names":["React","classNames","Footnote","styles","Footer","children","className","restProps","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAIzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAwB~~,GAAK~~;~~IAC5E~~,qBACE,oBAACL;QAASM,WAAU;QAAU,GAAGD,SAAS;QAAED,WAAWL,WAAWE,MAAM,CAAC,SAAS,EAAEG;OACjFD;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/*\n @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n return (\n <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n {children}\n </Footnote>\n );\n};\n"],"names":["React","classNames","Footnote","styles","Footer","children","className","restProps","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAIzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAwB;IACvE,qBACE,oBAACL;QAASM,WAAU;QAAU,GAAGD,SAAS;QAAED,WAAWL,WAAWE,MAAM,CAAC,SAAS,EAAEG;OACjFD;AAGP,EAAE"}

package/dist/cssm/components/FormField/FormField.d.ts CHANGED Viewed

@@ -28,5 +28,5 @@ interface FormFieldOwnProps extends React.AllHTMLAttributes<HTMLElement>, HasRoo
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */
-export declare const FormField: ({ Component, status, children, getRootRef, before, after, disabled, mode, className, ...restProps }: FormFieldOwnProps) => JSX.Element;
+export declare const FormField: ({ Component, status, children, getRootRef, before, after, disabled, mode, className, ...restProps }: FormFieldOwnProps) => React.JSX.Element;
 export {};

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n none: styles['FormField--sizeY-none'],\n [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nexport interface FormFieldProps {\n status?: 'default' \| 'error' \| 'valid';\n /*\n Добавляет иконку слева.\n \n Рекомендации:\n \n - Используйте следующие размеры иконок `12` \| `16` \| `20` \| `24` \| `28`.\n * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n /\n before?: React.ReactNode;\n /\n Добавляет иконку справа.\n \n Рекомендации:\n \n - Используйте следующие размеры иконок `12` \| `16` \| `20` \| `24` \| `28`.\n * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n /\n after?: React.ReactNode;\n mode?: 'default' \| 'plain';\n}\n\ninterface FormFieldOwnProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n FormFieldProps {\n disabled?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n Component = 'span',\n status = 'default',\n children,\n getRootRef,\n before,\n after,\n disabled,\n mode = 'default',\n className,\n ...restProps\n}: FormFieldOwnProps) => {\n const elRef = useExternRef(getRootRef);\n const focusWithin = useFocusWithin(elRef);\n const { sizeY = 'none' } = useAdaptivity();\n const [hover, setHover] = React.useState(false);\n\n const handleMouseEnter = (e: MouseEvent) => {\n e.stopPropagation();\n setHover(true);\n };\n\n const handleMouseLeave = (e: MouseEvent) => {\n e.stopPropagation();\n setHover(false);\n };\n\n return (\n <Component\n {...restProps}\n ref={elRef}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={classNames(\n styles['FormField'],\n mode === 'default' && styles['FormField--mode-default'],\n status !== 'default' &&\n {\n error: styles['FormField--status-error'],\n valid: styles['FormField--status-valid'],\n }[status],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n disabled && styles['FormField--disabled'],\n !disabled && hover && styles['FormField--hover'],\n className,\n )}\n >\n {before && <span className={styles['FormField__before']}>{before}</span>}\n {children}\n {after && (\n <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n {after}\n </span>\n )}\n <span aria-hidden className={styles['FormField__border']} />\n <FocusVisible thin visible={focusWithin} mode=\"outline\" />\n </Component>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","SizeType","FocusVisible","styles","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","focusWithin","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden","thin","visible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACF,SAASK,~~OAAO~~,~~CAAC,~~EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAiCA;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,WAAY,OAAM,EAClBC,QAAS,UAAS,EAClBC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACe~~,GAAK~~;~~IACvB~~,MAAMC,QAAQnB,aAAaY;IAC3B,MAAMQ,cAAcnB,eAAekB;IACnC,MAAM,EAAEE,OAAQ,OAAM,EAAE,GAAGtB;IAC3B,MAAM,CAACuB,OAAOC,SAAS,GAAG1B,MAAM2B,~~QAAQ,CAAC,KAAK~~;~~IAE9C~~,MAAMC,mBAAmB,CAACC~~,IAAkB~~;~~QAC1CA~~,EAAEC~~,eAAe~~;~~QACjBJ~~,SAAS~~,IAAI~~;~~IACf~~;IAEA,MAAMK,mBAAmB,CAACF~~,IAAkB~~;~~QAC1CA~~,EAAEC~~,eAAe~~;~~QACjBJ~~,SAAS~~,KAAK~~;~~IAChB~~;IAEA,qBACE,oBAACd;QACE,GAAGS,SAAS;QACbW,KAAKV;QACLW,cAAcL;QACdM,cAAcH;QACdX,WAAWnB,WACTM,MAAM,CAAC,YAAY,EACnBY,SAAS,aAAaZ,MAAM,CAAC,0BAA0B,EACvDM,WAAW,aACT,CAAA;YACEsB,OAAO5B,MAAM,CAAC,0BAA0B;YACxC6B,OAAO7B,MAAM,CAAC,0BAA0B;QAC1C,CAAA,CAAC,CAACM,OAAO,EACXW,UAAUnB,SAASgC,~~OAAO~~,~~IAAI7B,~~eAAe,CAACgB,MAAM,EACpDN,YAAYX,MAAM,CAAC,sBAAsB,EACzC,CAACW,YAAYO,SAASlB,MAAM,CAAC,mBAAmB,EAChDa;OAGDJ,wBAAU,oBAACsB;QAAKlB,WAAWb,MAAM,CAAC,oBAAoB;OAAGS,SACzDF,UACAG,uBACC,oBAACqB;QAAKlB,WAAWnB,WAAWM,MAAM,CAAC,mBAAmB,EAAE;OACrDU,sBAGL,oBAACqB;QAAKC,eAAAA~~,IAAW~~;~~QAACnB~~,WAAWb,MAAM,CAAC,oBAAoB;sBACxD,oBAACD;QAAakC,MAAAA~~,IAAI~~;~~QAACC~~,SAASlB;QAAaJ,MAAK;;AAGpD,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n none: styles['FormField--sizeY-none'],\n [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nexport interface FormFieldProps {\n status?: 'default' \| 'error' \| 'valid';\n /*\n Добавляет иконку слева.\n \n Рекомендации:\n \n - Используйте следующие размеры иконок `12` \| `16` \| `20` \| `24` \| `28`.\n * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n /\n before?: React.ReactNode;\n /\n Добавляет иконку справа.\n \n Рекомендации:\n \n - Используйте следующие размеры иконок `12` \| `16` \| `20` \| `24` \| `28`.\n * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n /\n after?: React.ReactNode;\n mode?: 'default' \| 'plain';\n}\n\ninterface FormFieldOwnProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n FormFieldProps {\n disabled?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n Component = 'span',\n status = 'default',\n children,\n getRootRef,\n before,\n after,\n disabled,\n mode = 'default',\n className,\n ...restProps\n}: FormFieldOwnProps) => {\n const elRef = useExternRef(getRootRef);\n const focusWithin = useFocusWithin(elRef);\n const { sizeY = 'none' } = useAdaptivity();\n const [hover, setHover] = React.useState(false);\n\n const handleMouseEnter = (e: MouseEvent) => {\n e.stopPropagation();\n setHover(true);\n };\n\n const handleMouseLeave = (e: MouseEvent) => {\n e.stopPropagation();\n setHover(false);\n };\n\n return (\n <Component\n {...restProps}\n ref={elRef}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={classNames(\n styles['FormField'],\n mode === 'default' && styles['FormField--mode-default'],\n status !== 'default' &&\n {\n error: styles['FormField--status-error'],\n valid: styles['FormField--status-valid'],\n }[status],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n disabled && styles['FormField--disabled'],\n !disabled && hover && styles['FormField--hover'],\n className,\n )}\n >\n {before && <span className={styles['FormField__before']}>{before}</span>}\n {children}\n {after && (\n <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n {after}\n </span>\n )}\n <span aria-hidden className={styles['FormField__border']} />\n <FocusVisible thin visible={focusWithin} mode=\"outline\" />\n </Component>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","SizeType","FocusVisible","styles","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","focusWithin","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden","thin","visible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACF,SAASK,QAAQ,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAiCA;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,WAAY,OAAM,EAClBC,QAAS,UAAS,EAClBC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACe;IAClB,MAAMC,QAAQnB,aAAaY;IAC3B,MAAMQ,cAAcnB,eAAekB;IACnC,MAAM,EAAEE,OAAQ,OAAM,EAAE,GAAGtB;IAC3B,MAAM,CAACuB,OAAOC,SAAS,GAAG1B,MAAM2B,SAAS;IAEzC,MAAMC,mBAAmB,CAACC;QACxBA,EAAEC;QACFJ,SAAS;IACX;IAEA,MAAMK,mBAAmB,CAACF;QACxBA,EAAEC;QACFJ,SAAS;IACX;IAEA,qBACE,oBAACd;QACE,GAAGS,SAAS;QACbW,KAAKV;QACLW,cAAcL;QACdM,cAAcH;QACdX,WAAWnB,WACTM,MAAM,CAAC,YAAY,EACnBY,SAAS,aAAaZ,MAAM,CAAC,0BAA0B,EACvDM,WAAW,aACT,CAAA;YACEsB,OAAO5B,MAAM,CAAC,0BAA0B;YACxC6B,OAAO7B,MAAM,CAAC,0BAA0B;QAC1C,CAAA,CAAC,CAACM,OAAO,EACXW,UAAUnB,SAASgC,WAAW7B,eAAe,CAACgB,MAAM,EACpDN,YAAYX,MAAM,CAAC,sBAAsB,EACzC,CAACW,YAAYO,SAASlB,MAAM,CAAC,mBAAmB,EAChDa;OAGDJ,wBAAU,oBAACsB;QAAKlB,WAAWb,MAAM,CAAC,oBAAoB;OAAGS,SACzDF,UACAG,uBACC,oBAACqB;QAAKlB,WAAWnB,WAAWM,MAAM,CAAC,mBAAmB,EAAE;OACrDU,sBAGL,oBAACqB;QAAKC,eAAAA;QAAYnB,WAAWb,MAAM,CAAC,oBAAoB;sBACxD,oBAACD;QAAakC,MAAAA;QAAKC,SAASlB;QAAaJ,MAAK;;AAGpD,EAAE"}

package/dist/cssm/components/FormField/FormField.module.css CHANGED Viewed

@@ -21,7 +21,7 @@
   }
 }
-/* stylelint-disable-next-line vkui/atomic */
+/* stylelint-disable-next-line @project-tools/stylelint-atomic */
 .FormField > * {
   border-radius: inherit;
@@ -126,7 +126,7 @@
   z-index: var(--vkui_internal--z_index_form_field_border_hover);
 }
-/* stylelint-disable-next-line vkui/atomic */
+/* stylelint-disable-next-line  @project-tools/stylelint-atomic */
 .FormField *:focus {
   outline: none;

package/dist/cssm/components/FormItem/FormItem.d.ts CHANGED Viewed

@@ -15,4 +15,4 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
-export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, ...restProps }: FormItemProps) => JSX.Element;
+export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, ...restProps }: FormItemProps) => React.JSX.Element;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n [SizeType.COMPACT]: classNames(\n styles['FormItem--sizeY-compact'],\n 'vkuiInternalFormItem--sizeY-compact',\n ),\n};\n\nexport interface FormItemProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n RemovableProps {\n top?: React.ReactNode;\n bottom?: React.ReactNode;\n status?: 'default' \| 'error' \| 'valid';\n /*\n Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n \n Режим `indent` предназначен для визуального отступа\n /\n removable?: boolean \| 'indent';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n children,\n top,\n bottom,\n status = 'default',\n Component = 'div',\n removable,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n getRootRef,\n className,\n ...restProps\n}: FormItemProps) => {\n const rootEl = useExternRef(getRootRef);\n const { sizeY = 'none' } = useAdaptivity();\n\n const wrappedChildren = (\n <React.Fragment>\n {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n {children}\n {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n </React.Fragment>\n );\n\n return (\n <Component\n {...restProps}\n ref={rootEl}\n className={classNames(\n styles['FormItem'],\n 'vkuiInternalFormItem',\n status !== 'default' &&\n {\n error: classNames(\n styles['FormItem--status-error'],\n 'vkuiInternalFormItem--status-error',\n ),\n valid: classNames(\n styles['FormItem--status-valid'],\n 'vkuiInternalFormItem--status-valid',\n ),\n }[status],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n hasReactNode(top) &&\n classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n className,\n )}\n >\n {removable ? (\n <Removable\n align=\"start\"\n onRemove={(e) => {\n if (rootEl?.current) {\n onRemove(e, rootEl.current);\n }\n }}\n removePlaceholder={removePlaceholder}\n indent={removable === 'indent'}\n >\n <div\n className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n >\n {wrappedChildren}\n </div>\n </Removable>\n ) : (\n wrappedChildren\n )}\n </Component>\n );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,~~OAAO~~,~~CAAC,~~EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAkBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,IAAG,EACHC,OAAM,EACNC,QAAS,UAAS,EAClBC,WAAY,MAAK,EACjBC,UAAS,EACTC,UAAWlB,KAAI,EACfmB,mBAAoB,UAAS,EAC7BC,WAAU,EACVC,UAAS,EACT,GAAGC,WACW~~,GAAK~~;~~IACnB~~,MAAMC,SAASrB,aAAakB;IAC5B,MAAM,EAAEI,OAAQ,OAAM,EAAE,GAAGvB;IAE3B,MAAMwB,gCACJ,oBAAC5B,MAAM6B,~~QAAQ~~,~~QACZ3B,~~aAAac,sBAAQ,oBAACP;QAAQe,WAAWd,MAAM,CAAC,gBAAgB;OAAGM,MACnED,UACAb,aAAae,yBAAW,oBAACT;QAASgB,WAAWd,MAAM,CAAC,mBAAmB;OAAGO;IAI/E,qBACE,oBAACE;QACE,GAAGM,SAAS;QACbK,KAAKJ;QACLF,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEa,OAAO9B,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEFsB,OAAO/B,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXS,UAAUrB,SAAS2B,~~OAAO~~,~~IAAItB,~~eAAe,CAACgB,MAAM,EACpDzB,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACC2B,OAAM;QACNb,UAAU,CAACc~~,IAAM~~;~~YACf~~,IAAIT,QAAQU,SAAS;gBACnBf,SAASc,GAAGT,OAAOU~~,OAAO~~;~~YAC5B,CAAC~~;~~QACH~~;QACAd,mBAAmBA;QACnBe,QAAQjB,cAAc;qBAEtB,oBAACkB;QACCd,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDkB,oBAILA~~,eACD~~;~~AAGP~~,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n [SizeType.COMPACT]: classNames(\n styles['FormItem--sizeY-compact'],\n 'vkuiInternalFormItem--sizeY-compact',\n ),\n};\n\nexport interface FormItemProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n RemovableProps {\n top?: React.ReactNode;\n bottom?: React.ReactNode;\n status?: 'default' \| 'error' \| 'valid';\n /*\n Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n \n Режим `indent` предназначен для визуального отступа\n /\n removable?: boolean \| 'indent';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n children,\n top,\n bottom,\n status = 'default',\n Component = 'div',\n removable,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n getRootRef,\n className,\n ...restProps\n}: FormItemProps) => {\n const rootEl = useExternRef(getRootRef);\n const { sizeY = 'none' } = useAdaptivity();\n\n const wrappedChildren = (\n <React.Fragment>\n {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n {children}\n {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n </React.Fragment>\n );\n\n return (\n <Component\n {...restProps}\n ref={rootEl}\n className={classNames(\n styles['FormItem'],\n 'vkuiInternalFormItem',\n status !== 'default' &&\n {\n error: classNames(\n styles['FormItem--status-error'],\n 'vkuiInternalFormItem--status-error',\n ),\n valid: classNames(\n styles['FormItem--status-valid'],\n 'vkuiInternalFormItem--status-valid',\n ),\n }[status],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n hasReactNode(top) &&\n classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n className,\n )}\n >\n {removable ? (\n <Removable\n align=\"start\"\n onRemove={(e) => {\n if (rootEl?.current) {\n onRemove(e, rootEl.current);\n }\n }}\n removePlaceholder={removePlaceholder}\n indent={removable === 'indent'}\n >\n <div\n className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n >\n {wrappedChildren}\n </div>\n </Removable>\n ) : (\n wrappedChildren\n )}\n </Component>\n );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,QAAQ,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAkBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,IAAG,EACHC,OAAM,EACNC,QAAS,UAAS,EAClBC,WAAY,MAAK,EACjBC,UAAS,EACTC,UAAWlB,KAAI,EACfmB,mBAAoB,UAAS,EAC7BC,WAAU,EACVC,UAAS,EACT,GAAGC,WACW;IACd,MAAMC,SAASrB,aAAakB;IAC5B,MAAM,EAAEI,OAAQ,OAAM,EAAE,GAAGvB;IAE3B,MAAMwB,gCACJ,oBAAC5B,MAAM6B,gBACJ3B,aAAac,sBAAQ,oBAACP;QAAQe,WAAWd,MAAM,CAAC,gBAAgB;OAAGM,MACnED,UACAb,aAAae,yBAAW,oBAACT;QAASgB,WAAWd,MAAM,CAAC,mBAAmB;OAAGO;IAI/E,qBACE,oBAACE;QACE,GAAGM,SAAS;QACbK,KAAKJ;QACLF,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEa,OAAO9B,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEFsB,OAAO/B,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXS,UAAUrB,SAAS2B,WAAWtB,eAAe,CAACgB,MAAM,EACpDzB,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACC2B,OAAM;QACNb,UAAU,CAACc;YACT,IAAIT,QAAQU,SAAS;gBACnBf,SAASc,GAAGT,OAAOU;YACrB;QACF;QACAd,mBAAmBA;QACnBe,QAAQjB,cAAc;qBAEtB,oBAACkB;QACCd,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDkB,oBAILA;AAIR,EAAE"}

package/dist/cssm/components/FormLayout/FormLayout.d.ts CHANGED Viewed

@@ -4,4 +4,4 @@ export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> & HasRef<HTML
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayout
  */
-export declare const FormLayout: ({ children, Component, getRef, onSubmit, className, ...restProps }: FormLayoutProps) => JSX.Element;
+export declare const FormLayout: ({ children, Component, getRef, onSubmit, className, ...restProps }: FormLayoutProps) => React.JSX.Element;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef } from '../../types';\nimport styles from './FormLayout.module.css';\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n HasRef<HTMLElement> &\n HasComponent;\n\n/*\n @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n children,\n Component = 'form',\n getRef,\n onSubmit = preventDefault,\n className,\n ...restProps\n}: FormLayoutProps) => {\n return (\n <Component\n {...restProps}\n className={classNames(styles['FormLayout'], className)}\n onSubmit={onSubmit}\n ref={getRef}\n >\n {children}\n {Component === 'form' && (\n <input type=\"submit\" className={styles['FormLayout__submit']} value=\"\" />\n )}\n </Component>\n );\n};\n"],"names":["React","classNames","styles","preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps","ref","input","type","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,iBAAiB,CAACC,IAAuBA,EAAED~~,cAAc~~;~~AAM/D~~;;CAEC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAQ,EACRC,WAAY,OAAM,EAClBC,OAAM,EACNC,UAAWN,eAAc,EACzBO,UAAS,EACT,GAAGC,WACa~~,GAAK~~;~~IACrB~~,qBACE,oBAACJ;QACE,GAAGI,SAAS;QACbD,WAAWT,WAAWC,MAAM,CAAC,aAAa,EAAEQ;QAC5CD,UAAUA;QACVG,KAAKJ;OAEJF,UACAC,cAAc,wBACb,oBAACM;QAAMC,MAAK;QAASJ,WAAWR,MAAM,CAAC,qBAAqB;QAAEa,OAAM;;AAI5E,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef } from '../../types';\nimport styles from './FormLayout.module.css';\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n HasRef<HTMLElement> &\n HasComponent;\n\n/*\n @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n children,\n Component = 'form',\n getRef,\n onSubmit = preventDefault,\n className,\n ...restProps\n}: FormLayoutProps) => {\n return (\n <Component\n {...restProps}\n className={classNames(styles['FormLayout'], className)}\n onSubmit={onSubmit}\n ref={getRef}\n >\n {children}\n {Component === 'form' && (\n <input type=\"submit\" className={styles['FormLayout__submit']} value=\"\" />\n )}\n </Component>\n );\n};\n"],"names":["React","classNames","styles","preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps","ref","input","type","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,iBAAiB,CAACC,IAAuBA,EAAED;AAMjD;;CAEC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAQ,EACRC,WAAY,OAAM,EAClBC,OAAM,EACNC,UAAWN,eAAc,EACzBO,UAAS,EACT,GAAGC,WACa;IAChB,qBACE,oBAACJ;QACE,GAAGI,SAAS;QACbD,WAAWT,WAAWC,MAAM,CAAC,aAAa,EAAEQ;QAC5CD,UAAUA;QACVG,KAAKJ;OAEJF,UACAC,cAAc,wBACb,oBAACM;QAAMC,MAAK;QAASJ,WAAWR,MAAM,CAAC,qBAAqB;QAAEa,OAAM;;AAI5E,EAAE"}

package/dist/cssm/components/FormLayout/FormLayout.module.css CHANGED Viewed

@@ -14,5 +14,5 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  border: none;
+  border: 0;
 }

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.d.ts CHANGED Viewed

@@ -17,4 +17,4 @@ export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
  */
-export declare const FormLayoutGroup: ({ children, mode, removable, segmented, removePlaceholder, onRemove, getRootRef, className, ...restProps }: FormLayoutGroupProps) => JSX.Element;
+export declare const FormLayoutGroup: ({ children, mode, removable, segmented, removePlaceholder, onRemove, getRootRef, className, ...restProps }: FormLayoutGroupProps) => React.JSX.Element;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n none: classNames(\n styles['FormLayoutGroup--sizeY-none'],\n 'vkuiInternalFormLayoutGroup--sizeY-none',\n ),\n [SizeType.COMPACT]: classNames(\n styles['FormLayoutGroup--sizeY-compact'],\n 'vkuiInternalFormLayoutGroup--sizeY-compact',\n ),\n};\n\nexport interface FormLayoutGroupProps\n extends React.HTMLAttributes<HTMLDivElement>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n mode?: 'vertical' \| 'horizontal';\n /*\n Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n \n Режим `indent` предназначен для визуального отступа.\n /\n removable?: boolean \| 'indent';\n\n /\n Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n /\n segmented?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n children,\n mode = 'vertical',\n removable,\n segmented,\n removePlaceholder = 'Удалить',\n onRemove = noop,\n getRootRef,\n className,\n ...restProps\n}: FormLayoutGroupProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n const isRemovable = removable && mode === 'horizontal';\n const isSegmented = segmented && mode === 'horizontal';\n const rootEl = useExternRef(getRootRef);\n\n return (\n <div\n ref={rootEl}\n className={classNames(\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n mode === 'horizontal' &&\n classNames(\n styles['FormLayoutGroup--mode-horizontal'],\n 'vkuiInternalFormLayoutGroup--mode-horizontal',\n ),\n isRemovable &&\n classNames(\n styles['FormLayoutGroup--removable'],\n 'vkuiInternalFormLayoutGroup--removable',\n ),\n isSegmented &&\n classNames(\n styles['FormLayoutGroup--segmented'],\n 'vkuiInternalFormLayoutGroup--segmented',\n ),\n className,\n )}\n {...restProps}\n >\n {isRemovable ? (\n <Removable\n className={styles['FormLayoutGroup__removable']}\n align=\"start\"\n removePlaceholder={removePlaceholder}\n onRemove={(e) => {\n if (rootEl?.current) {\n onRemove(e, rootEl.current);\n }\n }}\n indent={removable === 'indent'}\n >\n {children}\n </Removable>\n ) : (\n <React.Fragment>\n {children}\n <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n </React.Fragment>\n )}\n </div>\n );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","styles","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","className","restProps","sizeY","isRemovable","isSegmented","rootEl","div","ref","REGULAR","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMR,WACJM,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAACF,SAASK,~~OAAO~~,~~CAAC,~~EAAET,WAClBM,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAoBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,SAAQ,EACRC,MAAO,WAAU,EACjBC,UAAS,EACTC,UAAS,EACTC,mBAAoB,UAAS,EAC7BC,UAAWf,KAAI,EACfgB,WAAU,EACVC,UAAS,EACT,GAAGC,WACkB~~,GAAK~~;~~IAC1B~~,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGlB;IAC3B,MAAMmB,cAAcR,aAAaD,SAAS;IAC1C,MAAMU,cAAcR,aAAaF,SAAS;IAC1C,MAAMW,SAASpB,aAAac;IAE5B,qBACE,oBAACO;QACCC,KAAKF;QACLL,WAAWlB,WACToB,UAAUhB,SAASsB,~~OAAO~~,~~IAAInB,~~eAAe,CAACa,MAAM,EACpDR,SAAS,gBACPZ,WACEM,MAAM,CAAC,mCAAmC,EAC1C,iDAEJe,eACErB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB,eACEtB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJY;QAED,GAAGC,SAAS;OAEZE,4BACC,oBAAChB;QACCa,WAAWZ,MAAM,CAAC,6BAA6B;QAC/CqB,OAAM;QACNZ,mBAAmBA;QACnBC,UAAU,CAACY~~,IAAM~~;~~YACf~~,IAAIL,QAAQM,SAAS;gBACnBb,SAASY,GAAGL,OAAOM~~,OAAO~~;~~YAC5B,CAAC~~;~~QACH~~;QACAC,QAAQjB,cAAc;OAErBF,0BAGH,oBAACZ,MAAMgC,~~QAAQ~~,~~QACZpB,~~wBACD,oBAACqB;QAAKd,WAAWZ,MAAM,CAAC,0BAA0B;QAAE2B,eAAAA,~~IAAW;OAElE;AAGP,~~EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n none: classNames(\n styles['FormLayoutGroup--sizeY-none'],\n 'vkuiInternalFormLayoutGroup--sizeY-none',\n ),\n [SizeType.COMPACT]: classNames(\n styles['FormLayoutGroup--sizeY-compact'],\n 'vkuiInternalFormLayoutGroup--sizeY-compact',\n ),\n};\n\nexport interface FormLayoutGroupProps\n extends React.HTMLAttributes<HTMLDivElement>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n mode?: 'vertical' \| 'horizontal';\n /*\n Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n \n Режим `indent` предназначен для визуального отступа.\n /\n removable?: boolean \| 'indent';\n\n /\n Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n /\n segmented?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n children,\n mode = 'vertical',\n removable,\n segmented,\n removePlaceholder = 'Удалить',\n onRemove = noop,\n getRootRef,\n className,\n ...restProps\n}: FormLayoutGroupProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n const isRemovable = removable && mode === 'horizontal';\n const isSegmented = segmented && mode === 'horizontal';\n const rootEl = useExternRef(getRootRef);\n\n return (\n <div\n ref={rootEl}\n className={classNames(\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n mode === 'horizontal' &&\n classNames(\n styles['FormLayoutGroup--mode-horizontal'],\n 'vkuiInternalFormLayoutGroup--mode-horizontal',\n ),\n isRemovable &&\n classNames(\n styles['FormLayoutGroup--removable'],\n 'vkuiInternalFormLayoutGroup--removable',\n ),\n isSegmented &&\n classNames(\n styles['FormLayoutGroup--segmented'],\n 'vkuiInternalFormLayoutGroup--segmented',\n ),\n className,\n )}\n {...restProps}\n >\n {isRemovable ? (\n <Removable\n className={styles['FormLayoutGroup__removable']}\n align=\"start\"\n removePlaceholder={removePlaceholder}\n onRemove={(e) => {\n if (rootEl?.current) {\n onRemove(e, rootEl.current);\n }\n }}\n indent={removable === 'indent'}\n >\n {children}\n </Removable>\n ) : (\n <React.Fragment>\n {children}\n <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n </React.Fragment>\n )}\n </div>\n );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","styles","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","className","restProps","sizeY","isRemovable","isSegmented","rootEl","div","ref","REGULAR","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMR,WACJM,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAACF,SAASK,QAAQ,EAAET,WAClBM,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAoBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,SAAQ,EACRC,MAAO,WAAU,EACjBC,UAAS,EACTC,UAAS,EACTC,mBAAoB,UAAS,EAC7BC,UAAWf,KAAI,EACfgB,WAAU,EACVC,UAAS,EACT,GAAGC,WACkB;IACrB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGlB;IAC3B,MAAMmB,cAAcR,aAAaD,SAAS;IAC1C,MAAMU,cAAcR,aAAaF,SAAS;IAC1C,MAAMW,SAASpB,aAAac;IAE5B,qBACE,oBAACO;QACCC,KAAKF;QACLL,WAAWlB,WACToB,UAAUhB,SAASsB,WAAWnB,eAAe,CAACa,MAAM,EACpDR,SAAS,gBACPZ,WACEM,MAAM,CAAC,mCAAmC,EAC1C,iDAEJe,eACErB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB,eACEtB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJY;QAED,GAAGC,SAAS;OAEZE,4BACC,oBAAChB;QACCa,WAAWZ,MAAM,CAAC,6BAA6B;QAC/CqB,OAAM;QACNZ,mBAAmBA;QACnBC,UAAU,CAACY;YACT,IAAIL,QAAQM,SAAS;gBACnBb,SAASY,GAAGL,OAAOM;YACrB;QACF;QACAC,QAAQjB,cAAc;OAErBF,0BAGH,oBAACZ,MAAMgC,gBACJpB,wBACD,oBAACqB;QAAKd,WAAWZ,MAAM,CAAC,0BAA0B;QAAE2B,eAAAA;;AAK9D,EAAE"}

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.module.css CHANGED Viewed

@@ -48,7 +48,7 @@
   position: relative;
 }
-/* stylelint-disable vkui/atomic */
+/* stylelint-disable @project-tools/stylelint-atomic */
 .FormLayoutGroup--segmented > * {
   min-width: 0;