npm - @vkontakte/vkui - Versions diffs - 6.6.0 → 6.7.0 - Mend

@vkontakte/vkui 6.6.0 → 6.7.0

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

Files changed (551) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps } from '../Calendar/Calendar';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n none: styles['DateInput--sizeY-none'],\n ['compact']: styles['DateInput--sizeY-compact'],\n};\n\nexport interface DateInputProps\n extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' \| 'onChange' \| 'size'>,\n Pick<\n CalendarProps,\n \| 'disablePast'\n \| 'disableFuture'\n \| 'enableTime'\n \| 'shouldDisableDate'\n \| 'onChange'\n \| 'value'\n \| 'doneButtonText'\n \| 'weekStartsOn'\n \| 'disablePickers'\n \| 'changeHoursLabel'\n \| 'changeMinutesLabel'\n \| 'prevMonthLabel'\n \| 'nextMonthLabel'\n \| 'changeMonthLabel'\n \| 'changeYearLabel'\n \| 'changeDayLabel'\n \| 'showNeighboringMonth'\n \| 'size'\n \| 'viewDate'\n \| 'onHeaderChange'\n \| 'onNextMonth'\n \| 'onPrevMonth'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n \| 'minDateTime'\n \| 'maxDateTime'\n >,\n HasRootRef<HTMLDivElement>,\n Omit<FormFieldProps, 'maxHeight'> {\n calendarPlacement?: PlacementWithAuto;\n closeOnChange?: boolean;\n clearFieldLabel?: string;\n showCalendarLabel?: 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 max = 31;\n break;\n case 1:\n max = 12;\n break;\n case 2:\n max = 2100;\n min = 1900;\n length = 4;\n break;\n case 3:\n max = 23;\n break;\n case 4:\n max = 59;\n break;\n }\n\n return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n const newValue = ['', '', '', '', ''];\n if (value) {\n newValue[0] = String(value.getDate()).padStart(2, '0');\n newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n newValue[2] = String(value.getFullYear()).padStart(4, '0');\n newValue[3] = String(value.getHours()).padStart(2, '0');\n newValue[4] = String(value.getMinutes()).padStart(2, '0');\n }\n return newValue;\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n enableTime,\n shouldDisableDate,\n disableFuture,\n disablePast,\n minDateTime,\n maxDateTime,\n value,\n onChange,\n calendarPlacement = 'bottom-start',\n style,\n className,\n doneButtonText,\n closeOnChange = true,\n disablePickers,\n getRootRef,\n name,\n autoFocus,\n disabled,\n onClick,\n onFocus,\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n showNeighboringMonth,\n size,\n changeMonthLabel = 'Изменить месяц',\n changeYearLabel = 'Изменить год',\n changeDayLabel = 'Изменить день',\n changeHoursLabel = 'Изменить час',\n changeMinutesLabel = 'Изменить минуту',\n clearFieldLabel = 'Очистить поле',\n showCalendarLabel = 'Показать календарь',\n viewDate,\n onHeaderChange,\n onNextMonth,\n onPrevMonth,\n prevMonthIcon,\n nextMonthIcon,\n disableCalendar = false,\n ...props\n}: DateInputProps): React.ReactNode => {\n const daysRef = React.useRef<HTMLSpanElement>(null);\n const monthsRef = React.useRef<HTMLSpanElement>(null);\n const yearsRef = React.useRef<HTMLSpanElement>(null);\n const hoursRef = React.useRef<HTMLSpanElement>(null);\n const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n const maxElement = enableTime ? 4 : 2;\n\n const onInternalValueChange = React.useCallback(\n (internalValue: string[]) => {\n for (let i = 0; i <= maxElement; i += 1) {\n if (internalValue[i].length < elementsConfig(i).length) {\n return;\n }\n }\n\n let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n let mask = 'dd.MM.yyyy';\n if (enableTime) {\n formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n mask += ' HH:mm';\n }\n\n if (isMatch(formattedValue, mask)) {\n onChange?.(parse(formattedValue, mask, value ?? new Date()));\n }\n },\n [enableTime, maxElement, onChange, value],\n );\n\n const refs = React.useMemo(\n () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n );\n\n const {\n rootRef,\n calendarRef,\n open,\n openCalendar,\n internalValue,\n handleKeyDown,\n setFocusedElement,\n handleFieldEnter,\n clear,\n removeFocusFromField,\n } = useDateInput({\n maxElement,\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 (value?: Date \| undefined) => {\n onChange?.(value);\n if (closeOnChange && !enableTime) {\n removeFocusFromField();\n }\n },\n [onChange, removeFocusFromField, closeOnChange, enableTime],\n );\n\n return (\n <FormField\n style={style}\n className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n getRootRef={handleRootRef}\n after={\n value ? (\n <IconButton hoverMode=\"opacity\" label={clearFieldLabel} onClick={clear}>\n <Icon16Clear />\n </IconButton>\n ) : (\n <IconButton hoverMode=\"opacity\" label={showCalendarLabel} 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={value ? format(value, enableTime ? \"dd.MM.yyyy'T'HH:mm\" : 'dd.MM.yyyy') : ''}\n />\n <Text\n className={styles['DateInput__input']}\n onKeyDown={handleKeyDown}\n // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n // из-за чего `.Typography--normalize` перебивает стили.\n normalize={false}\n Component=\"span\" // для <span> нормализация не нужна\n >\n <InputLike\n length={2}\n getRootRef={daysRef}\n index={0}\n onElementSelect={setFocusedElement}\n value={internalValue[0]}\n label={changeDayLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={monthsRef}\n index={1}\n onElementSelect={setFocusedElement}\n value={internalValue[1]}\n label={changeMonthLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={4}\n getRootRef={yearsRef}\n index={2}\n onElementSelect={setFocusedElement}\n value={internalValue[2]}\n label={changeYearLabel}\n />\n {enableTime && (\n <React.Fragment>\n <InputLikeDivider className={styles['DateInput__input--time-divider']}>\n {' '}\n </InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={hoursRef}\n index={3}\n onElementSelect={setFocusedElement}\n value={internalValue[3]}\n label={changeHoursLabel}\n />\n <InputLikeDivider>:</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={minutesRef}\n index={4}\n onElementSelect={setFocusedElement}\n value={internalValue[4]}\n label={changeMinutesLabel}\n />\n </React.Fragment>\n )}\n </Text>\n {open && !disableCalendar && (\n <Popper\n targetRef={rootRef}\n offsetByMainAxis={8}\n placement={calendarPlacement}\n autoUpdateOnTargetResize\n >\n <Calendar\n value={value}\n onChange={onCalendarChange}\n enableTime={enableTime}\n disablePast={disablePast}\n disableFuture={disableFuture}\n shouldDisableDate={shouldDisableDate}\n onClose={removeFocusFromField}\n getRootRef={calendarRef}\n doneButtonText={doneButtonText}\n disablePickers={disablePickers}\n changeHoursLabel={changeHoursLabel}\n changeMinutesLabel={changeMinutesLabel}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\n changeDayLabel={changeDayLabel}\n showNeighboringMonth={showNeighboringMonth}\n size={size}\n viewDate={viewDate}\n onHeaderChange={onHeaderChange}\n onNextMonth={onNextMonth}\n onPrevMonth={onPrevMonth}\n prevMonthIcon={prevMonthIcon}\n nextMonthIcon={nextMonthIcon}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n />\n </Popper>\n )}\n </FormField>\n );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isMatch","parse","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","styles","sizeYClassNames","none","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","onChange","calendarPlacement","style","className","doneButtonText","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","showNeighboringMonth","size","changeMonthLabel","changeYearLabel","changeDayLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","after","hoverMode","label","input","type","onKeyDown","normalize","Component","onElementSelect","Fragment","targetRef","offsetByMainAxis","placement","autoUpdateOnTargetResize","onClose"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps } from '../Calendar/Calendar';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n none: styles['DateInput--sizeY-none'],\n compact: styles['DateInput--sizeY-compact'],\n};\n\nexport interface DateInputProps\n extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' \| 'onChange' \| 'size'>,\n Pick<\n CalendarProps,\n \| 'disablePast'\n \| 'disableFuture'\n \| 'enableTime'\n \| 'shouldDisableDate'\n \| 'onChange'\n \| 'value'\n \| 'doneButtonText'\n \| 'weekStartsOn'\n \| 'disablePickers'\n \| 'changeHoursLabel'\n \| 'changeMinutesLabel'\n \| 'prevMonthLabel'\n \| 'nextMonthLabel'\n \| 'changeMonthLabel'\n \| 'changeYearLabel'\n \| 'changeDayLabel'\n \| 'showNeighboringMonth'\n \| 'size'\n \| 'viewDate'\n \| 'onHeaderChange'\n \| 'onNextMonth'\n \| 'onPrevMonth'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n \| 'minDateTime'\n \| 'maxDateTime'\n \| 'renderDayContent'\n >,\n HasRootRef<HTMLDivElement>,\n Omit<FormFieldProps, 'maxHeight'> {\n calendarPlacement?: PlacementWithAuto;\n closeOnChange?: boolean;\n clearFieldLabel?: string;\n showCalendarLabel?: 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 max = 31;\n break;\n case 1:\n max = 12;\n break;\n case 2:\n max = 2100;\n min = 1900;\n length = 4;\n break;\n case 3:\n max = 23;\n break;\n case 4:\n max = 59;\n break;\n }\n\n return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n const newValue = ['', '', '', '', ''];\n if (value) {\n newValue[0] = String(value.getDate()).padStart(2, '0');\n newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n newValue[2] = String(value.getFullYear()).padStart(4, '0');\n newValue[3] = String(value.getHours()).padStart(2, '0');\n newValue[4] = String(value.getMinutes()).padStart(2, '0');\n }\n return newValue;\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n enableTime,\n shouldDisableDate,\n disableFuture,\n disablePast,\n minDateTime,\n maxDateTime,\n value,\n onChange,\n calendarPlacement = 'bottom-start',\n style,\n className,\n doneButtonText,\n closeOnChange = true,\n disablePickers,\n getRootRef,\n name,\n autoFocus,\n disabled,\n onClick,\n onFocus,\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n showNeighboringMonth,\n size,\n changeMonthLabel = 'Изменить месяц',\n changeYearLabel = 'Изменить год',\n changeDayLabel = 'Изменить день',\n changeHoursLabel = 'Изменить час',\n changeMinutesLabel = 'Изменить минуту',\n clearFieldLabel = 'Очистить поле',\n showCalendarLabel = 'Показать календарь',\n viewDate,\n onHeaderChange,\n onNextMonth,\n onPrevMonth,\n prevMonthIcon,\n nextMonthIcon,\n disableCalendar = false,\n renderDayContent,\n ...props\n}: DateInputProps): React.ReactNode => {\n const daysRef = React.useRef<HTMLSpanElement>(null);\n const monthsRef = React.useRef<HTMLSpanElement>(null);\n const yearsRef = React.useRef<HTMLSpanElement>(null);\n const hoursRef = React.useRef<HTMLSpanElement>(null);\n const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n const maxElement = enableTime ? 4 : 2;\n\n const onInternalValueChange = React.useCallback(\n (internalValue: string[]) => {\n for (let i = 0; i <= maxElement; i += 1) {\n if (internalValue[i].length < elementsConfig(i).length) {\n return;\n }\n }\n\n let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n let mask = 'dd.MM.yyyy';\n if (enableTime) {\n formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n mask += ' HH:mm';\n }\n\n if (isMatch(formattedValue, mask)) {\n onChange?.(parse(formattedValue, mask, value ?? new Date()));\n }\n },\n [enableTime, maxElement, onChange, value],\n );\n\n const refs = React.useMemo(\n () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n );\n\n const {\n rootRef,\n calendarRef,\n open,\n openCalendar,\n internalValue,\n handleKeyDown,\n setFocusedElement,\n handleFieldEnter,\n clear,\n removeFocusFromField,\n } = useDateInput({\n maxElement,\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 (value?: Date \| undefined) => {\n onChange?.(value);\n if (closeOnChange && !enableTime) {\n removeFocusFromField();\n }\n },\n [onChange, removeFocusFromField, closeOnChange, enableTime],\n );\n\n return (\n <FormField\n style={style}\n className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n getRootRef={handleRootRef}\n after={\n value ? (\n <IconButton hoverMode=\"opacity\" label={clearFieldLabel} onClick={clear}>\n <Icon16Clear />\n </IconButton>\n ) : (\n <IconButton hoverMode=\"opacity\" label={showCalendarLabel} 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={value ? format(value, enableTime ? \"dd.MM.yyyy'T'HH:mm\" : 'dd.MM.yyyy') : ''}\n />\n <Text\n className={styles['DateInput__input']}\n onKeyDown={handleKeyDown}\n // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n // из-за чего `.Typography--normalize` перебивает стили.\n normalize={false}\n Component=\"span\" // для <span> нормализация не нужна\n >\n <InputLike\n length={2}\n getRootRef={daysRef}\n index={0}\n onElementSelect={setFocusedElement}\n value={internalValue[0]}\n label={changeDayLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={monthsRef}\n index={1}\n onElementSelect={setFocusedElement}\n value={internalValue[1]}\n label={changeMonthLabel}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <InputLike\n length={4}\n getRootRef={yearsRef}\n index={2}\n onElementSelect={setFocusedElement}\n value={internalValue[2]}\n label={changeYearLabel}\n />\n {enableTime && (\n <React.Fragment>\n <InputLikeDivider className={styles['DateInput__input--time-divider']}>\n {' '}\n </InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={hoursRef}\n index={3}\n onElementSelect={setFocusedElement}\n value={internalValue[3]}\n label={changeHoursLabel}\n />\n <InputLikeDivider>:</InputLikeDivider>\n <InputLike\n length={2}\n getRootRef={minutesRef}\n index={4}\n onElementSelect={setFocusedElement}\n value={internalValue[4]}\n label={changeMinutesLabel}\n />\n </React.Fragment>\n )}\n </Text>\n {open && !disableCalendar && (\n <Popper\n targetRef={rootRef}\n offsetByMainAxis={8}\n placement={calendarPlacement}\n autoUpdateOnTargetResize\n >\n <Calendar\n value={value}\n onChange={onCalendarChange}\n enableTime={enableTime}\n disablePast={disablePast}\n disableFuture={disableFuture}\n shouldDisableDate={shouldDisableDate}\n onClose={removeFocusFromField}\n getRootRef={calendarRef}\n doneButtonText={doneButtonText}\n disablePickers={disablePickers}\n changeHoursLabel={changeHoursLabel}\n changeMinutesLabel={changeMinutesLabel}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\n changeDayLabel={changeDayLabel}\n showNeighboringMonth={showNeighboringMonth}\n renderDayContent={renderDayContent}\n size={size}\n viewDate={viewDate}\n onHeaderChange={onHeaderChange}\n onNextMonth={onNextMonth}\n onPrevMonth={onPrevMonth}\n prevMonthIcon={prevMonthIcon}\n nextMonthIcon={nextMonthIcon}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n />\n </Popper>\n )}\n </FormField>\n );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isMatch","parse","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","styles","sizeYClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","onChange","calendarPlacement","style","className","doneButtonText","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","showNeighboringMonth","size","changeMonthLabel","changeYearLabel","changeDayLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","renderDayContent","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","after","hoverMode","label","input","type","onKeyDown","normalize","Component","onElementSelect","Fragment","targetRef","offsetByMainAxis","placement","autoUpdateOnTargetResize","onClose"],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import type { PlacementWithAuto } from '../../lib/floating';
 import type { HasRootRef } from '../../types';
 import { type CalendarRangeProps } from '../CalendarRange/CalendarRange';
 import { type FormFieldProps } from '../FormField/FormField';
-export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>, Pick<CalendarRangeProps, 'disablePast' | 'disableFuture' | 'shouldDisableDate' | 'onChange' | 'value' | 'weekStartsOn' | 'disablePickers' | 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'changeDayLabel' | 'prevMonthIcon' | 'nextMonthIcon'>, HasRootRef<HTMLDivElement>, Omit<FormFieldProps, 'maxHeight'> {
+export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>, Pick<CalendarRangeProps, 'disablePast' | 'disableFuture' | 'shouldDisableDate' | 'onChange' | 'value' | 'weekStartsOn' | 'disablePickers' | 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'changeDayLabel' | 'prevMonthIcon' | 'nextMonthIcon' | 'renderDayContent'>, HasRootRef<HTMLDivElement>, Omit<FormFieldProps, 'maxHeight'> {
     calendarPlacement?: PlacementWithAuto;
     closeOnChange?: boolean;
     clearFieldLabel?: string;
@@ -19,5 +19,5 @@ export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTML
 /**
  * @see https://vkcom.github.io/VKUI/#/DateRangeInput
  */
-export declare const DateRangeInput: ({ shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement, style, className, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, changeDayLabel, changeMonthLabel, changeYearLabel, changeStartDayLabel, changeStartMonthLabel, changeStartYearLabel, changeEndDayLabel, changeEndMonthLabel, changeEndYearLabel, clearFieldLabel, showCalendarLabel, prevMonthIcon, nextMonthIcon, disableCalendar, ...props }: DateRangeInputProps) => React.ReactNode;
+export declare const DateRangeInput: ({ shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement, style, className, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, changeDayLabel, changeMonthLabel, changeYearLabel, changeStartDayLabel, changeStartMonthLabel, changeStartYearLabel, changeEndDayLabel, changeEndMonthLabel, changeEndYearLabel, clearFieldLabel, showCalendarLabel, prevMonthIcon, nextMonthIcon, disableCalendar, renderDayContent, ...props }: DateRangeInputProps) => React.ReactNode;
 //# sourceMappingURL=DateRangeInput.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAexE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EAC3E,IAAI,CACF,kBAAkB,EAChB,aAAa,GACb,eAAe,GACf,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,eAAe,GACf,eAAe,~~CAClB~~,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;IACnC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA0CD;;GAEG;AACH,eAAO,MAAM,cAAc,~~kfAkCxB~~,mBAAmB,KAAG,KAAK,CAAC,~~SA+M9B~~,CAAC"}
1	+ {"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAexE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EAC3E,IAAI,CACF,kBAAkB,EAChB,aAAa,GACb,eAAe,GACf,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;IACnC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA0CD;;GAEG;AACH,eAAO,MAAM,cAAc,ogBAmCxB,mBAAmB,KAAG,KAAK,CAAC,SAgN9B,CAAC"}

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

@@ -20,7 +20,7 @@ import styles from './DateRangeInput.module.css';
 import dateInputStyles from '../DateInput/DateInput.module.css';
 const sizeYClassNames = {
     none: styles['DateRangeInput--sizeY-none'],
-    ['compact']: styles['DateRangeInput--sizeY-compact']
+    compact: styles['DateRangeInput--sizeY-compact']
 };
 const elementsConfig = (index)=>{
     let length = 2;
@@ -71,7 +71,7 @@ const getInternalValue = (value)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/DateRangeInput
- */ export const DateRangeInput = ({ shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement = 'bottom-start', style, className, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'Изменить день', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeStartDayLabel = 'Изменить день начала', changeStartMonthLabel = 'Изменить месяц начала', changeStartYearLabel = 'Изменить год начала', changeEndDayLabel = 'Изменить день окончания', changeEndMonthLabel = 'Изменить месяц окончания', changeEndYearLabel = 'Изменить год окончания', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', prevMonthIcon, nextMonthIcon, disableCalendar = false, ...props })=>{
+ */ export const DateRangeInput = ({ shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement = 'bottom-start', style, className, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'Изменить день', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeStartDayLabel = 'Изменить день начала', changeStartMonthLabel = 'Изменить месяц начала', changeStartYearLabel = 'Изменить год начала', changeEndDayLabel = 'Изменить день окончания', changeEndMonthLabel = 'Изменить месяц окончания', changeEndYearLabel = 'Изменить год окончания', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', prevMonthIcon, nextMonthIcon, disableCalendar = false, renderDayContent, ...props })=>{
     const daysStartRef = React.useRef(null);
     const monthsStartRef = React.useRef(null);
     const yearsStartRef = React.useRef(null);
@@ -277,7 +277,8 @@ const getInternalValue = (value)=>{
                     changeYearLabel: changeYearLabel,
                     changeDayLabel: changeDayLabel,
                     prevMonthIcon: prevMonthIcon,
-                    nextMonthIcon: nextMonthIcon
+                    nextMonthIcon: nextMonthIcon,
+                    renderDayContent: renderDayContent
                 })
             })
         ]

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

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

@@ -8,7 +8,7 @@ import { useFocusWithin } from '../../hooks/useFocusWithin';
 import styles from './FormField.module.css';
 const sizeYClassNames = {
     none: styles['FormField--sizeY-none'],
-    ['compact']: styles['FormField--sizeY-compact']
+    compact: styles['FormField--sizeY-compact']
 };
 const stylesStatus = {
     error: styles['FormField--status-error'],

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 { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n none: styles['FormField--sizeY-none'],\n ['compact']: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n error: styles['FormField--status-error'],\n valid: styles['FormField--status-valid'],\n};\n\nconst iconAlignClassNames = {\n center: undefined,\n start: styles['FormField__icon--align-start'],\n end: styles['FormField__icon--align-end'],\n};\n\nconst renderIcon = (icon: React.ReactNode, align: FieldIconsAlign, className: string) => {\n return (\n <div className={styles['FormField__iconWrapper']}>\n <span className={classNames(iconAlignClassNames[align], className)}>{icon}</span>\n </div>\n );\n};\n\nexport type FieldIconsAlign = 'start' \| 'center' \| 'end';\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 beforeAlign?: FieldIconsAlign;\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 /\n Вертикальное выравнивание иконки справа\n /\n afterAlign?: FieldIconsAlign;\n /\n Режим отображения.\n \n - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n * - `plain` — показывает только текст-подсказку.\n /\n mode?: 'default' \| 'plain';\n /\n Максимальная высота поля\n /\n maxHeight?: number;\n}\n\nexport interface 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 beforeAlign = 'center',\n afterAlign = 'center',\n disabled,\n mode = 'default',\n className,\n maxHeight,\n style,\n ...restProps\n}: FormFieldOwnProps): React.ReactNode => {\n const elRef = useExternRef(getRootRef);\n const { sizeY = 'none' } = useAdaptivity();\n const [hover, setHover] = React.useState(false);\n\n const focusWithin = useFocusWithin(elRef);\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible: focusWithin,\n mode: styles['FormField--focus-visible'],\n });\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 style={\n maxHeight !== undefined\n ? {\n ...style,\n maxHeight,\n }\n : style\n }\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={classNames(\n styles['FormField'],\n mode === 'default' && styles['FormField--mode-default'],\n status !== 'default' && stylesStatus[status],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n disabled && styles['FormField--disabled'],\n !disabled && hover && styles['FormField--hover'],\n focusVisibleClassNames,\n className,\n )}\n >\n <div className={styles['FormField_scrollContainer']}>\n {before && renderIcon(before, beforeAlign, styles['FormField__before'])}\n <div className={styles['FormField__content']}>{children}</div>\n {after &&\n renderIcon(\n after,\n afterAlign,\n classNames(styles['FormField__after'], 'vkuiInternalFormField__after'),\n )}\n </div>\n <span aria-hidden className={styles['FormField__border']} />\n </Component>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusVisibleClassName","useFocusWithin","styles","sizeYClassNames","none","stylesStatus","error","valid","iconAlignClassNames","center","undefined","start","end","renderIcon","icon","align","className","div","span","FormField","Component","status","children","getRootRef","before","after","beforeAlign","afterAlign","disabled","mode","maxHeight","style","restProps","elRef","sizeY","hover","setHover","useState","focusWithin","focusVisibleClassNames","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","aria-hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;~~IACrC~~,~~CAAC~~,~~UAAU,EAAEA,~~MAAM,CAAC,2BAA2B;~~AACjD~~;AAEA,~~MAAMG~~,eAAe;IACnBC,~~OAAOJ~~,MAAM,CAAC,0BAA0B;~~IACxCK~~,~~OAAOL~~,MAAM,CAAC,0BAA0B;AAC1C;AAEA,~~MAAMM~~,sBAAsB;IAC1BC,QAAQC;IACRC,~~OAAOT~~,MAAM,CAAC,+BAA+B;~~IAC7CU~~,~~KAAKV~~,MAAM,CAAC,6BAA6B;AAC3C;AAEA,~~MAAMW~~,aAAa,CAACC,MAAuBC,OAAwBC;IACjE,qBACE,KAACC;QAAID,~~WAAWd~~,MAAM,CAAC,yBAAyB;kBAC9C,cAAA,~~KAACgB~~;YAAKF,~~WAAWnB~~,~~WAAWW~~,mBAAmB,CAACO,MAAM,EAAEC;sBAAaF;;;AAG3E;AAqDA;;CAEC,GACD,OAAO,MAAMK,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,cAAc,QAAQ,EACtBC,aAAa,QAAQ,EACrBC,QAAQ,EACRC,OAAO,SAAS,EAChBb,SAAS,EACTc,SAAS,EACTC,KAAK,EACL,GAAGC,WACe;IAClB,MAAMC,~~QAAQlC~~,~~aAAawB~~;IAC3B,MAAM,EAAEW,QAAQ,MAAM,EAAE,~~GAAGpC~~;IAC3B,MAAM,~~CAACqC~~,OAAOC,SAAS,~~GAAGxC~~,~~MAAMyC~~,QAAQ,CAAC;IAEzC,MAAMC,~~cAAcrC~~,~~eAAegC~~;IACnC,MAAMM,~~yBAAyBvC~~,yBAAyB;~~QACtDwC~~,cAAcF;QACdT,~~MAAM3B~~,MAAM,CAAC,2BAA2B;IAC1C;IAEA,~~MAAMuC~~,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAAChB;QACE,GAAGY,SAAS;QACba,KAAKZ;QACLF,OACED,cAAcpB,YACV;YACE,GAAGqB,KAAK;YACRD;QACF,IACAC;QAENe,cAAcL;QACdM,cAAcH;QACd5B,~~WAAWnB~~,WACTK,MAAM,CAAC,YAAY,~~EACnB2B~~,SAAS,~~aAAa3B~~,MAAM,CAAC,0BAA0B,~~EACvDmB~~,WAAW,aAAahB,YAAY,CAACgB,OAAO,EAC5Ca,UAAU,~~aAAa/B~~,eAAe,~~CAAC+B~~,MAAM,EAC7CN,~~YAAY1B~~,MAAM,CAAC,sBAAsB,EACzC,~~CAAC0B~~,YAAYO,~~SAASjC~~,MAAM,CAAC,mBAAmB,~~EAChDqC~~,wBACAvB;;0BAGF,MAACC;gBAAID,~~WAAWd~~,MAAM,CAAC,4BAA4B;;~~oBAChDsB~~,UAAUX,WAAWW,QAAQE,~~aAAaxB~~,MAAM,CAAC,oBAAoB;kCACtE,~~KAACe~~;wBAAID,~~WAAWd~~,MAAM,CAAC,qBAAqB;~~kCAAGoB~~;;oBAC9CG,SACCZ,WACEY,OACAE,~~YACA9B~~,WAAWK,MAAM,CAAC,mBAAmB,EAAE;;;0BAG7C,~~KAACgB~~;gBAAK8B,aAAW;gBAAChC,~~WAAWd~~,MAAM,CAAC,oBAAoB;;;;AAG9D,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 { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n none: styles['FormField--sizeY-none'],\n compact: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n error: styles['FormField--status-error'],\n valid: styles['FormField--status-valid'],\n};\n\nconst iconAlignClassNames = {\n center: undefined,\n start: styles['FormField__icon--align-start'],\n end: styles['FormField__icon--align-end'],\n};\n\nconst renderIcon = (icon: React.ReactNode, align: FieldIconsAlign, className: string) => {\n return (\n <div className={styles['FormField__iconWrapper']}>\n <span className={classNames(iconAlignClassNames[align], className)}>{icon}</span>\n </div>\n );\n};\n\nexport type FieldIconsAlign = 'start' \| 'center' \| 'end';\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 beforeAlign?: FieldIconsAlign;\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 /\n Вертикальное выравнивание иконки справа\n /\n afterAlign?: FieldIconsAlign;\n /\n Режим отображения.\n \n - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n * - `plain` — показывает только текст-подсказку.\n /\n mode?: 'default' \| 'plain';\n /\n Максимальная высота поля\n /\n maxHeight?: number;\n}\n\nexport interface 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 beforeAlign = 'center',\n afterAlign = 'center',\n disabled,\n mode = 'default',\n className,\n maxHeight,\n style,\n ...restProps\n}: FormFieldOwnProps): React.ReactNode => {\n const elRef = useExternRef(getRootRef);\n const { sizeY = 'none' } = useAdaptivity();\n const [hover, setHover] = React.useState(false);\n\n const focusWithin = useFocusWithin(elRef);\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible: focusWithin,\n mode: styles['FormField--focus-visible'],\n });\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 style={\n maxHeight !== undefined\n ? {\n ...style,\n maxHeight,\n }\n : style\n }\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={classNames(\n styles['FormField'],\n mode === 'default' && styles['FormField--mode-default'],\n status !== 'default' && stylesStatus[status],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n disabled && styles['FormField--disabled'],\n !disabled && hover && styles['FormField--hover'],\n focusVisibleClassNames,\n className,\n )}\n >\n <div className={styles['FormField_scrollContainer']}>\n {before && renderIcon(before, beforeAlign, styles['FormField__before'])}\n <div className={styles['FormField__content']}>{children}</div>\n {after &&\n renderIcon(\n after,\n afterAlign,\n classNames(styles['FormField__after'], 'vkuiInternalFormField__after'),\n )}\n </div>\n <span aria-hidden className={styles['FormField__border']} />\n </Component>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusVisibleClassName","useFocusWithin","styles","sizeYClassNames","none","compact","stylesStatus","error","valid","iconAlignClassNames","center","undefined","start","end","renderIcon","icon","align","className","div","span","FormField","Component","status","children","getRootRef","before","after","beforeAlign","afterAlign","disabled","mode","maxHeight","style","restProps","elRef","sizeY","hover","setHover","useState","focusWithin","focusVisibleClassNames","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","aria-hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrCG,SAASH,MAAM,CAAC,2BAA2B;AAC7C;AAEA,MAAMI,eAAe;IACnBC,OAAOL,MAAM,CAAC,0BAA0B;IACxCM,OAAON,MAAM,CAAC,0BAA0B;AAC1C;AAEA,MAAMO,sBAAsB;IAC1BC,QAAQC;IACRC,OAAOV,MAAM,CAAC,+BAA+B;IAC7CW,KAAKX,MAAM,CAAC,6BAA6B;AAC3C;AAEA,MAAMY,aAAa,CAACC,MAAuBC,OAAwBC;IACjE,qBACE,KAACC;QAAID,WAAWf,MAAM,CAAC,yBAAyB;kBAC9C,cAAA,KAACiB;YAAKF,WAAWpB,WAAWY,mBAAmB,CAACO,MAAM,EAAEC;sBAAaF;;;AAG3E;AAqDA;;CAEC,GACD,OAAO,MAAMK,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,cAAc,QAAQ,EACtBC,aAAa,QAAQ,EACrBC,QAAQ,EACRC,OAAO,SAAS,EAChBb,SAAS,EACTc,SAAS,EACTC,KAAK,EACL,GAAGC,WACe;IAClB,MAAMC,QAAQnC,aAAayB;IAC3B,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGrC;IAC3B,MAAM,CAACsC,OAAOC,SAAS,GAAGzC,MAAM0C,QAAQ,CAAC;IAEzC,MAAMC,cAActC,eAAeiC;IACnC,MAAMM,yBAAyBxC,yBAAyB;QACtDyC,cAAcF;QACdT,MAAM5B,MAAM,CAAC,2BAA2B;IAC1C;IAEA,MAAMwC,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAAChB;QACE,GAAGY,SAAS;QACba,KAAKZ;QACLF,OACED,cAAcpB,YACV;YACE,GAAGqB,KAAK;YACRD;QACF,IACAC;QAENe,cAAcL;QACdM,cAAcH;QACd5B,WAAWpB,WACTK,MAAM,CAAC,YAAY,EACnB4B,SAAS,aAAa5B,MAAM,CAAC,0BAA0B,EACvDoB,WAAW,aAAahB,YAAY,CAACgB,OAAO,EAC5Ca,UAAU,aAAahC,eAAe,CAACgC,MAAM,EAC7CN,YAAY3B,MAAM,CAAC,sBAAsB,EACzC,CAAC2B,YAAYO,SAASlC,MAAM,CAAC,mBAAmB,EAChDsC,wBACAvB;;0BAGF,MAACC;gBAAID,WAAWf,MAAM,CAAC,4BAA4B;;oBAChDuB,UAAUX,WAAWW,QAAQE,aAAazB,MAAM,CAAC,oBAAoB;kCACtE,KAACgB;wBAAID,WAAWf,MAAM,CAAC,qBAAqB;kCAAGqB;;oBAC9CG,SACCZ,WACEY,OACAE,YACA/B,WAAWK,MAAM,CAAC,mBAAmB,EAAE;;;0BAG7C,KAACiB;gBAAK8B,aAAW;gBAAChC,WAAWf,MAAM,CAAC,oBAAoB;;;;AAG9D,EAAE"}

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

@@ -14,7 +14,7 @@ import { FormItemContext } from './context';
 import styles from './FormItem.module.css';
 const sizeYClassNames = {
     none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),
-    ['compact']: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact')
+    compact: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact')
 };
 const stylesStatus = {
     error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),

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 } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n ['compact']: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact'),\n};\n\nconst stylesStatus = {\n error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),\n valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n RemovableProps {\n top?: React.ReactNode;\n topId?: string;\n /*\n Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n /\n topMultiline?: boolean;\n /\n Позволяет поменять тег используемый для top\n * Если оставить пустым, то тег top будет span.\n * Если оставить пустым и использовать htmlFor, то тег top будет label.\n /\n topComponent?: React.ElementType;\n /\n Позволяет полностью заменить шапку поля пользовательским компонентом.\n \n @since 6.1.0\n \n TODO [>=7]: удалить и использовать top - оно будет принимать либо строку, либо подкомпонент\n /\n topNode?: React.ReactNode;\n bottom?: React.ReactNode;\n /\n Передаётся при использовании `bottom`.\n \n Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n /\n bottomId?: string;\n status?: 'default' \| 'error' \| 'valid';\n /\n Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n \n Режим `indent` предназначен для визуального отступа\n /\n removable?: boolean \| 'indent';\n /\n Удаляет внешние отступы вокруг компонента\n * @since 5.8.0\n /\n noPadding?: boolean;\n /\n Помечает поле обязательным\n /\n required?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem: React.FC<FormItemProps> & {\n Top: typeof FormItemTop;\n TopLabel: typeof FormItemTopLabel;\n TopAside: typeof FormItemTopAside;\n} = ({\n children,\n top,\n topId,\n topMultiline,\n topComponent: topComponentProp,\n bottom,\n status = 'default',\n removable,\n onRemove,\n removePlaceholder = 'Удалить',\n getRootRef,\n htmlFor,\n bottomId,\n noPadding,\n topNode,\n required = false,\n ...restProps\n}: FormItemProps) => {\n const rootEl = useExternRef(getRootRef);\n const { sizeY = 'none' } = useAdaptivity();\n\n const wrappedChildren = (\n <React.Fragment>\n {hasReactNode(topNode) ? (\n topNode\n ) : hasReactNode(top) ? (\n <FormItemTop>\n <FormItemTopLabel\n htmlFor={htmlFor}\n Component={topComponentProp}\n multiline={topMultiline}\n id={topId}\n >\n {top}\n </FormItemTopLabel>\n </FormItemTop>\n ) : null}\n {children}\n {hasReactNode(bottom) && (\n <Footnote\n className={styles['FormItem__bottom']}\n id={bottomId}\n role={status === 'error' ? 'alert' : undefined}\n >\n {bottom}\n </Footnote>\n )}\n </React.Fragment>\n );\n\n const context = useObjectMemo({ required, topMultiline });\n\n return (\n <RootComponent\n {...restProps}\n getRootRef={rootEl}\n baseClassName={classNames(\n styles['FormItem'],\n !noPadding && styles['FormItem--withPadding'],\n 'vkuiInternalFormItem',\n status !== 'default' && stylesStatus[status],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n hasReactNode(top) &&\n classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n )}\n >\n <FormItemContext.Provider value={context}>\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(\n styles['FormItem__removable'],\n 'vkuiInternalFormItem__removable',\n )}\n >\n {wrappedChildren}\n </div>\n </Removable>\n ) : (\n wrappedChildren\n )}\n </FormItemContext.Provider>\n </RootComponent>\n );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","useObjectMemo","Removable","RootComponent","Footnote","FormItemTop","FormItemTopAside","FormItemTopLabel","FormItemContext","styles","sizeYClassNames","none","stylesStatus","error","valid","FormItem","children","top","topId","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","topNode","required","restProps","rootEl","sizeY","wrappedChildren","Fragment","Component","multiline","id","className","role","undefined","context","baseClassName","Provider","value","align","e","current","indent","div","displayName","Top","TopLabel","TopAside"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,gBAAgB,QAAQ,iCAAiC;AAClE,SAASC,gBAAgB,QAAQ,iCAAiC;AAClE,SAASC,eAAe,QAAQ,YAAY;AAC5C,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMd,WAAWY,MAAM,CAAC,uBAAuB,EAAE;~~IACjD~~,~~CAAC~~,~~UAAU,EAAEZ,~~WAAWY,MAAM,CAAC,0BAA0B,EAAE;~~AAC7D~~;AAEA,~~MAAMG~~,eAAe;IACnBC,~~OAAOhB~~,WAAWY,MAAM,CAAC,yBAAyB,EAAE;~~IACpDK~~,~~OAAOjB~~,WAAWY,MAAM,CAAC,yBAAyB,EAAE;AACtD;AAoDA;;CAEC,GACD,OAAO,~~MAAMM~~,WAIT,CAAC,EACHC,QAAQ,EACRC,GAAG,EACHC,KAAK,EACLC,YAAY,EACZC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,SAAS,SAAS,EAClBC,SAAS,EACTC,QAAQ,EACRC,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,KAAK,EAChB,GAAGC,WACW;IACd,MAAMC,~~SAASlC~~,~~aAAa2B~~;IAC5B,MAAM,EAAEQ,QAAQ,MAAM,EAAE,~~GAAGpC~~;IAE3B,~~MAAMqC~~,gCACJ,~~MAACxC~~,~~MAAMyC~~,QAAQ;;~~YACZvC~~,~~aAAaiC~~,WACZA,~~UACEjC~~,~~aAAamB~~,qBACf,~~KAACZ~~;0BACC,cAAA,KAACE;~~oBACCqB~~,SAASA;oBACTU,WAAWjB;oBACXkB,WAAWpB;oBACXqB,IAAItB;8BAEHD;;iBAGH;YACHD;~~YACAlB~~,~~aAAawB~~,yBACZ,~~KAAClB~~;~~gBACCqC~~,~~WAAWhC~~,MAAM,CAAC,mBAAmB;~~gBACrC+B~~,IAAIX;gBACJa,MAAMnB,WAAW,UAAU,UAAUoB;0BAEpCrB;;;;IAMT,MAAMsB,~~UAAU3C~~,cAAc;~~QAAE+B~~;QAAUb;IAAa;IAEvD,qBACE,~~KAAChB~~;QACE,~~GAAG8B~~,SAAS;QACbN,YAAYO;QACZW,~~eAAehD~~,WACbY,MAAM,CAAC,WAAW,EAClB,~~CAACqB~~,~~aAAarB~~,MAAM,CAAC,wBAAwB,EAC7C,~~wBACAc~~,WAAW,aAAaX,YAAY,CAACW,OAAO,EAC5CY,UAAU,~~aAAazB~~,eAAe,~~CAACyB~~,MAAM,~~EAC7CrC~~,~~aAAamB~~,~~QACXpB~~,WAAWY,MAAM,CAAC,oBAAoB,EAAE,~~kCAC1Ce~~,~~aAAa3B~~,WAAWY,MAAM,CAAC,sBAAsB,EAAE;kBAGzD,cAAA,KAACD,~~gBAAgBsC~~,QAAQ;YAACC,OAAOH;sBAC9BpB,0BACC,~~KAACtB~~;~~gBACC8C~~,OAAM;gBACNvB,UAAU,CAACwB;oBACT,IAAIf,QAAQgB,SAAS;wBACnBzB,WAAWwB,GAAGf,OAAOgB,OAAO;oBAC9B;gBACF;gBACAxB,mBAAmBA;gBACnByB,QAAQ3B,cAAc;0BAEtB,cAAA,KAAC4B;oBACCX,~~WAAW5C~~,WACTY,MAAM,CAAC,sBAAsB,EAC7B;~~8BAGD2B~~;;iBAILA;;;AAKV,EAAE;AAEFrB,SAASsC,WAAW,GAAG;AAEvBtC,SAASuC,GAAG,~~GAAGjD~~;~~AACfU~~,SAASuC,GAAG,CAACD,WAAW,GAAG;AAE3BtC,SAASwC,QAAQ,~~GAAGhD~~;~~AACpBQ~~,SAASwC,QAAQ,CAACF,WAAW,GAAG;AAEhCtC,SAASyC,QAAQ,~~GAAGlD~~;~~AACpBS~~,SAASyC,QAAQ,CAACH,WAAW,GAAG"}
1	+ {"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n compact: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact'),\n};\n\nconst stylesStatus = {\n error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),\n valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n RemovableProps {\n top?: React.ReactNode;\n topId?: string;\n /*\n Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n /\n topMultiline?: boolean;\n /\n Позволяет поменять тег используемый для top\n * Если оставить пустым, то тег top будет span.\n * Если оставить пустым и использовать htmlFor, то тег top будет label.\n /\n topComponent?: React.ElementType;\n /\n Позволяет полностью заменить шапку поля пользовательским компонентом.\n \n @since 6.1.0\n \n TODO [>=7]: удалить и использовать top - оно будет принимать либо строку, либо подкомпонент\n /\n topNode?: React.ReactNode;\n bottom?: React.ReactNode;\n /\n Передаётся при использовании `bottom`.\n \n Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n /\n bottomId?: string;\n status?: 'default' \| 'error' \| 'valid';\n /\n Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n \n Режим `indent` предназначен для визуального отступа\n /\n removable?: boolean \| 'indent';\n /\n Удаляет внешние отступы вокруг компонента\n * @since 5.8.0\n /\n noPadding?: boolean;\n /\n Помечает поле обязательным\n /\n required?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem: React.FC<FormItemProps> & {\n Top: typeof FormItemTop;\n TopLabel: typeof FormItemTopLabel;\n TopAside: typeof FormItemTopAside;\n} = ({\n children,\n top,\n topId,\n topMultiline,\n topComponent: topComponentProp,\n bottom,\n status = 'default',\n removable,\n onRemove,\n removePlaceholder = 'Удалить',\n getRootRef,\n htmlFor,\n bottomId,\n noPadding,\n topNode,\n required = false,\n ...restProps\n}: FormItemProps) => {\n const rootEl = useExternRef(getRootRef);\n const { sizeY = 'none' } = useAdaptivity();\n\n const wrappedChildren = (\n <React.Fragment>\n {hasReactNode(topNode) ? (\n topNode\n ) : hasReactNode(top) ? (\n <FormItemTop>\n <FormItemTopLabel\n htmlFor={htmlFor}\n Component={topComponentProp}\n multiline={topMultiline}\n id={topId}\n >\n {top}\n </FormItemTopLabel>\n </FormItemTop>\n ) : null}\n {children}\n {hasReactNode(bottom) && (\n <Footnote\n className={styles['FormItem__bottom']}\n id={bottomId}\n role={status === 'error' ? 'alert' : undefined}\n >\n {bottom}\n </Footnote>\n )}\n </React.Fragment>\n );\n\n const context = useObjectMemo({ required, topMultiline });\n\n return (\n <RootComponent\n {...restProps}\n getRootRef={rootEl}\n baseClassName={classNames(\n styles['FormItem'],\n !noPadding && styles['FormItem--withPadding'],\n 'vkuiInternalFormItem',\n status !== 'default' && stylesStatus[status],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n hasReactNode(top) &&\n classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n )}\n >\n <FormItemContext.Provider value={context}>\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(\n styles['FormItem__removable'],\n 'vkuiInternalFormItem__removable',\n )}\n >\n {wrappedChildren}\n </div>\n </Removable>\n ) : (\n wrappedChildren\n )}\n </FormItemContext.Provider>\n </RootComponent>\n );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","useObjectMemo","Removable","RootComponent","Footnote","FormItemTop","FormItemTopAside","FormItemTopLabel","FormItemContext","styles","sizeYClassNames","none","compact","stylesStatus","error","valid","FormItem","children","top","topId","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","topNode","required","restProps","rootEl","sizeY","wrappedChildren","Fragment","Component","multiline","id","className","role","undefined","context","baseClassName","Provider","value","align","e","current","indent","div","displayName","Top","TopLabel","TopAside"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './FormLayoutGroup.module.css';
 const sizeYClassNames = {
     none: classNames(styles['FormLayoutGroup--sizeY-none'], 'vkuiInternalFormLayoutGroup--sizeY-none'),
-    ['compact']: classNames(styles['FormLayoutGroup--sizeY-compact'], 'vkuiInternalFormLayoutGroup--sizeY-compact')
+    compact: classNames(styles['FormLayoutGroup--sizeY-compact'], 'vkuiInternalFormLayoutGroup--sizeY-compact')
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup

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 } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n none: classNames(\n styles['FormLayoutGroup--sizeY-none'],\n 'vkuiInternalFormLayoutGroup--sizeY-none',\n ),\n ['compact']: classNames(\n styles['FormLayoutGroup--sizeY-compact'],\n 'vkuiInternalFormLayoutGroup--sizeY-compact',\n ),\n};\n\nexport interface FormLayoutGroupProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n RemovableProps {\n mode?: 'vertical' \| 'horizontal';\n /*\n Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n \n Режим `indent` предназначен для визуального отступа.\n /\n removable?: boolean \| 'indent';\n\n /\n Дает возможность склеить несколько `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,\n getRootRef,\n ...restProps\n}: FormLayoutGroupProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const isRemovable = removable && mode === 'horizontal';\n const rootEl = useExternRef(getRootRef);\n\n return (\n <RootComponent\n getRootRef={rootEl}\n Component=\"fieldset\"\n baseClassName={classNames(\n styles['FormLayoutGroup'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n mode === 'horizontal' &&\n classNames(\n styles['FormLayoutGroup--mode-horizontal'],\n 'vkuiInternalFormLayoutGroup--mode-horizontal',\n ),\n mode === 'vertical' && 'vkuiInternalFormLayoutGroup--mode-vertical',\n isRemovable &&\n classNames(\n styles['FormLayoutGroup--removable'],\n 'vkuiInternalFormLayoutGroup--removable',\n ),\n segmented &&\n classNames(\n styles['FormLayoutGroup--segmented'],\n 'vkuiInternalFormLayoutGroup--segmented',\n ),\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 </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","Removable","RootComponent","styles","sizeYClassNames","none","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","isRemovable","rootEl","Component","baseClassName","className","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AAExD,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMP,WACJK,MAAM,CAAC,8BAA8B,EACrC;~~IAEF~~,~~CAAC~~,~~UAAU~~,~~EAAEL,WACXK,~~MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAmBA;;CAEC,GACD,OAAO,~~MAAMG~~,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,QAAQ,EACRC,UAAU,EACV,GAAGC,WACkB;IACrB,MAAM,EAAEC,QAAQ,MAAM,EAAE,~~GAAGhB~~;IAC3B,~~MAAMiB~~,cAAcP,aAAaD,SAAS;IAC1C,MAAMS,~~SAASjB~~,~~aAAaa~~;IAE5B,qBACE,~~KAACX~~;~~QACCW~~,YAAYI;QACZC,WAAU;QACVC,~~eAAerB~~,WACbK,MAAM,CAAC,kBAAkB,~~EACzBY~~,UAAU,~~aAAaX~~,eAAe,~~CAACW~~,MAAM,EAC7CP,SAAS,~~gBACPV~~,WACEK,MAAM,CAAC,mCAAmC,EAC1C,~~iDAEJK~~,SAAS,cAAc,8CACvBQ,~~eACElB~~,WACEK,MAAM,CAAC,6BAA6B,EACpC,~~2CAEJO~~,~~aACEZ~~,WACEK,MAAM,CAAC,6BAA6B,EACpC;QAGL,~~GAAGW~~,SAAS;kBAEZE,4BACC,~~KAACf~~;~~YACCmB~~,~~WAAWjB~~,MAAM,CAAC,6BAA6B;YAC/~~CkB~~,OAAM;YACNV,mBAAmBA;YACnBC,UAAU,CAACU;gBACT,IAAIL,QAAQM,SAAS;oBACnBX,WAAWU,GAAGL,OAAOM,OAAO;gBAC9B;YACF;YACAC,QAAQf,cAAc;sBAErBF;2BAGH,~~MAACV~~,~~MAAM4B~~,QAAQ;;gBACZlB;8BACD,KAACmB;oBAAKN,~~WAAWjB~~,MAAM,CAAC,0BAA0B;~~oBAAEwB~~,aAAW;;;;;AAKzE,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n none: classNames(\n styles['FormLayoutGroup--sizeY-none'],\n 'vkuiInternalFormLayoutGroup--sizeY-none',\n ),\n compact: classNames(\n styles['FormLayoutGroup--sizeY-compact'],\n 'vkuiInternalFormLayoutGroup--sizeY-compact',\n ),\n};\n\nexport interface FormLayoutGroupProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n RemovableProps {\n mode?: 'vertical' \| 'horizontal';\n /*\n Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n \n Режим `indent` предназначен для визуального отступа.\n /\n removable?: boolean \| 'indent';\n\n /\n Дает возможность склеить несколько `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,\n getRootRef,\n ...restProps\n}: FormLayoutGroupProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const isRemovable = removable && mode === 'horizontal';\n const rootEl = useExternRef(getRootRef);\n\n return (\n <RootComponent\n getRootRef={rootEl}\n Component=\"fieldset\"\n baseClassName={classNames(\n styles['FormLayoutGroup'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n mode === 'horizontal' &&\n classNames(\n styles['FormLayoutGroup--mode-horizontal'],\n 'vkuiInternalFormLayoutGroup--mode-horizontal',\n ),\n mode === 'vertical' && 'vkuiInternalFormLayoutGroup--mode-vertical',\n isRemovable &&\n classNames(\n styles['FormLayoutGroup--removable'],\n 'vkuiInternalFormLayoutGroup--removable',\n ),\n segmented &&\n classNames(\n styles['FormLayoutGroup--segmented'],\n 'vkuiInternalFormLayoutGroup--segmented',\n ),\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 </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","Removable","RootComponent","styles","sizeYClassNames","none","compact","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","isRemovable","rootEl","Component","baseClassName","className","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AAExD,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMP,WACJK,MAAM,CAAC,8BAA8B,EACrC;IAEFG,SAASR,WACPK,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAmBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,QAAQ,EACRC,UAAU,EACV,GAAGC,WACkB;IACrB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGjB;IAC3B,MAAMkB,cAAcP,aAAaD,SAAS;IAC1C,MAAMS,SAASlB,aAAac;IAE5B,qBACE,KAACZ;QACCY,YAAYI;QACZC,WAAU;QACVC,eAAetB,WACbK,MAAM,CAAC,kBAAkB,EACzBa,UAAU,aAAaZ,eAAe,CAACY,MAAM,EAC7CP,SAAS,gBACPX,WACEK,MAAM,CAAC,mCAAmC,EAC1C,iDAEJM,SAAS,cAAc,8CACvBQ,eACEnB,WACEK,MAAM,CAAC,6BAA6B,EACpC,2CAEJQ,aACEb,WACEK,MAAM,CAAC,6BAA6B,EACpC;QAGL,GAAGY,SAAS;kBAEZE,4BACC,KAAChB;YACCoB,WAAWlB,MAAM,CAAC,6BAA6B;YAC/CmB,OAAM;YACNV,mBAAmBA;YACnBC,UAAU,CAACU;gBACT,IAAIL,QAAQM,SAAS;oBACnBX,WAAWU,GAAGL,OAAOM,OAAO;gBAC9B;YACF;YACAC,QAAQf,cAAc;sBAErBF;2BAGH,MAACX,MAAM6B,QAAQ;;gBACZlB;8BACD,KAACmB;oBAAKN,WAAWlB,MAAM,CAAC,0BAA0B;oBAAEyB,aAAW;;;;;AAKzE,EAAE"}

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

@@ -7,7 +7,7 @@ import { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';
 import styles from './Input.module.css';
 const sizeYClassNames = {
     none: styles['Input--sizeY-none'],
-    ['compact']: styles['Input--sizeY-compact']
+    compact: styles['Input--sizeY-compact']
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Input

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n none: styles['Input--sizeY-none'],\n ['compact']: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n Omit<FormFieldProps, 'maxHeight'> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n type = 'text',\n align = 'left',\n getRef,\n className,\n getRootRef,\n style,\n before,\n after,\n status,\n mode,\n ...restProps\n}: InputProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <FormField\n style={style}\n className={classNames(\n styles['Input'],\n align === 'right' && styles['Input--align-right'],\n align === 'center' && styles['Input--align-center'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n before && styles['Input--hasBefore'],\n after && styles['Input--hasAfter'],\n className,\n )}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n mode={mode}\n status={status}\n >\n <UnstyledTextField\n {...restProps}\n as=\"input\"\n type={type}\n className={styles['Input__el']}\n getRootRef={getRef}\n />\n </FormField>\n );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","styles","sizeYClassNames","none","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;~~IACjC~~,~~CAAC~~,~~UAAU,EAAEA,~~MAAM,CAAC,uBAAuB;~~AAC7C~~;AASA;;CAEC,GACD,OAAO,~~MAAMG~~,QAAQ,CAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJ,GAAGC,WACQ;IACX,MAAM,EAAEC,QAAQ,MAAM,EAAE,~~GAAGlB~~;IAE3B,qBACE,KAACC;~~QACCW~~,OAAOA;QACPF,~~WAAWX~~,WACTI,MAAM,CAAC,QAAQ,~~EACfK~~,UAAU,~~WAAWL~~,MAAM,CAAC,qBAAqB,~~EACjDK~~,UAAU,~~YAAYL~~,MAAM,CAAC,sBAAsB,~~EACnDe~~,UAAU,~~aAAad~~,eAAe,~~CAACc~~,MAAM,EAC7CL,~~UAAUV~~,MAAM,CAAC,mBAAmB,~~EACpCW~~,~~SAASX~~,MAAM,CAAC,kBAAkB,~~EAClCO~~;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,~~KAACb~~;YACE,~~GAAGe~~,SAAS;YACbG,IAAG;YACHb,MAAMA;YACNG,~~WAAWP~~,MAAM,CAAC,YAAY;~~YAC9BQ~~,YAAYF;;;AAIpB,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n none: styles['Input--sizeY-none'],\n compact: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n Omit<FormFieldProps, 'maxHeight'> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n type = 'text',\n align = 'left',\n getRef,\n className,\n getRootRef,\n style,\n before,\n after,\n status,\n mode,\n ...restProps\n}: InputProps): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <FormField\n style={style}\n className={classNames(\n styles['Input'],\n align === 'right' && styles['Input--align-right'],\n align === 'center' && styles['Input--align-center'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n before && styles['Input--hasBefore'],\n after && styles['Input--hasAfter'],\n className,\n )}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n mode={mode}\n status={status}\n >\n <UnstyledTextField\n {...restProps}\n as=\"input\"\n type={type}\n className={styles['Input__el']}\n getRootRef={getRef}\n />\n </FormField>\n );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","styles","sizeYClassNames","none","compact","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjCG,SAASH,MAAM,CAAC,uBAAuB;AACzC;AASA;;CAEC,GACD,OAAO,MAAMI,QAAQ,CAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJ,GAAGC,WACQ;IACX,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,qBACE,KAACC;QACCY,OAAOA;QACPF,WAAWZ,WACTI,MAAM,CAAC,QAAQ,EACfM,UAAU,WAAWN,MAAM,CAAC,qBAAqB,EACjDM,UAAU,YAAYN,MAAM,CAAC,sBAAsB,EACnDgB,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CL,UAAUX,MAAM,CAAC,mBAAmB,EACpCY,SAASZ,MAAM,CAAC,kBAAkB,EAClCQ;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,KAACd;YACE,GAAGgB,SAAS;YACbG,IAAG;YACHb,MAAMA;YACNG,WAAWR,MAAM,CAAC,YAAY;YAC9BS,YAAYF;;;AAIpB,EAAE"}

package/dist/cssm/components/ModalRoot/ModalRootDesktop.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalRootDesktop.d.ts","sourceRoot":"","sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,qBAAqB,EAAoB,MAAM,SAAS,CAAC;AAMvE,eAAO,MAAM,gBAAgB,0HAS1B,qBAAqB,KAAG,KAAK,CAAC,~~SAyMhC~~,CAAC"}
1	+ {"version":3,"file":"ModalRootDesktop.d.ts","sourceRoot":"","sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,qBAAqB,EAAoB,MAAM,SAAS,CAAC;AAMvE,eAAO,MAAM,gBAAgB,0HAS1B,qBAAqB,KAAG,KAAK,CAAC,SAqNhC,CAAC"}

package/dist/cssm/components/ModalRoot/ModalRootDesktop.js CHANGED Viewed

@@ -100,7 +100,15 @@ export const ModalRootDesktop = ({ activeModal: activeModalProp, children, noFoc
         // Анимация закрытия модального окна
         if (!activeModal) {
             requestAnimationFrame(()=>{
-                waitTransitionFinish(prevModalState?.innerElement, ()=>onExited(id), timeout);
+                waitTransitionFinish(prevModalState?.innerElement, (event)=>{
+                    // Исключаем дочерние элементы
+                    if (event && event.target === prevModalState?.innerElement) {
+                        onExited(id);
+                    } else if (!event) {
+                        // Вызвался по тайм-ауту
+                        onExited(id);
+                    }
+                }, timeout);
                 animateModalOpacity(prevModalState, false);
                 setMaskOpacity(prevModalState, 0);
             });

package/dist/cssm/components/ModalRoot/ModalRootDesktop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';\nimport type { ModalRootWithDOMProps, ModalsStateEntry } from './types';\nimport { useModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport const ModalRootDesktop = ({\n activeModal: activeModalProp,\n children,\n noFocusToDialog = false,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n modalOverlayTestId,\n}: ModalRootWithDOMProps): React.ReactNode => {\n const maskElementRef = React.useRef<HTMLDivElement>(null);\n const maskAnimationFrame = React.useRef<number \| undefined>(undefined);\n const restoreFocusTo = React.useRef<HTMLElement \| undefined>(undefined);\n\n const { document } = useDOM();\n const { hasCustomPanelHeaderAfter, platform } = useConfigProvider();\n const {\n activeModal,\n exitingModal,\n onExit,\n getModalState,\n enteringModal,\n onEnter,\n onEntered: onEnteredProp,\n onExited,\n history,\n delayEnter,\n } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);\n\n const waitTransitionFinish = useWaitTransitionFinish();\n const prevProps = usePrevious({\n exitingModal,\n enteringModal,\n activeModal,\n });\n const modalRootContext: ModalRootContextInterface = useObjectMemo({\n updateModalHeight: () => undefined,\n registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),\n onClose: onExit,\n isInsideModal: true,\n });\n\n const timeout = platform === 'ios' ? 400 : 320;\n const modals = React.Children.toArray(children) as React.ReactElement[];\n\n /* Анимирует сдвиг модального окна /\n const animateModalOpacity = (modalState: ModalsStateEntry \| undefined, display: boolean) => {\n if (modalState?.innerElement) {\n modalState.innerElement.style.transition = '';\n modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';\n modalState.innerElement.style.opacity = display ? '1' : '0';\n }\n };\n\n / Устанавливает прозрачность для полупрозрачной подложки */\n const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number \| null = null) => {\n if (forceOpacity === null && history?.[0] !== modalState.id) {\n return;\n }\n\n if (maskAnimationFrame.current) {\n cancelAnimationFrame(maskAnimationFrame.current);\n }\n maskAnimationFrame.current = requestAnimationFrame(() => {\n if (maskElementRef.current) {\n const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n const opacity =\n forceOpacity === null\n ? 1 - (translateYCurrent - translateY) / (100 - translateY) \|\| 0\n : forceOpacity;\n maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n }\n });\n };\n\n const onEntered = ({ id, modalElement }: ModalsStateEntry) => {\n if (!noFocusToDialog && modalElement && !modalElement.contains(document!.activeElement)) {\n modalElement.focus();\n }\n\n onEnteredProp(id);\n };\n\n const openModal = () => {\n if (!enteringModal \|\| !prevProps) {\n return;\n }\n\n const enteringState = getModalState(enteringModal);\n onEnter();\n\n // Анимация открытия модального окна\n if (!prevProps.exitingModal) {\n requestAnimationFrame(() => {\n if (enteringModal === enteringModal && enteringState) {\n waitTransitionFinish(enteringState.innerElement, () => onEntered(enteringState), timeout);\n animateModalOpacity(enteringState, true);\n setMaskOpacity(enteringState, 1);\n }\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n requestAnimationFrame(() => {\n if (enteringState?.innerElement) {\n enteringState.innerElement.style.transition = 'none';\n enteringState.innerElement.style.opacity = '1';\n setMaskOpacity(enteringState, 1);\n }\n });\n\n if (enteringState) {\n onEntered(enteringState);\n }\n };\n\n const closeModal = (id: string) => {\n const prevModalState = getModalState(id);\n if (!prevModalState) {\n return;\n }\n\n // Анимация закрытия модального окна\n if (!activeModal) {\n requestAnimationFrame(() => {\n waitTransitionFinish(prevModalState?.innerElement, () => onExited(id), timeout);\n animateModalOpacity(prevModalState, false);\n setMaskOpacity(prevModalState, 0);\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n onExited(id);\n };\n\n React.useEffect(() => {\n if (!prevProps) {\n return;\n }\n\n // transition phase 2: animate exiting modal\n if (exitingModal && exitingModal !== prevProps.exitingModal) {\n closeModal(exitingModal);\n }\n\n // transition phase 3: animate entering modal\n if (enteringModal && enteringModal !== prevProps.enteringModal) {\n openModal();\n }\n\n // focus restoration\n if (activeModal && !prevProps.activeModal) {\n restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement \| undefined;\n }\n if (!activeModal && !exitingModal && restoreFocusTo.current) {\n restoreFocusTo.current.focus();\n restoreFocusTo.current = undefined;\n }\n });\n\n if (!activeModal && !exitingModal) {\n return null;\n }\n\n return (\n <ModalRootContext.Provider value={modalRootContext}>\n <div\n className={classNames(\n styles['ModalRoot'],\n hasCustomPanelHeaderAfter && styles['ModalRoot--hasCustomPanelHeaderAfterSlot'],\n styles['ModalRoot--desktop'],\n )}\n >\n <div\n data-testid={modalOverlayTestId}\n className={styles['ModalRoot__mask']}\n ref={maskElementRef}\n onClick={onExit}\n />\n <div className={styles['ModalRoot__viewport']}>\n {modals.map((Modal: React.ReactElement) => {\n const modalId = getNavId(Modal.props, warn);\n if (modalId !== activeModal && modalId !== exitingModal) {\n return null;\n }\n\n const key = `modal-${modalId}`;\n\n return (\n <FocusTrap\n autoFocus={false}\n restoreFocus={false}\n onClose={onExit}\n timeout={timeout}\n key={key}\n className={styles['ModalRoot__modal']}\n >\n {Modal}\n </FocusTrap>\n );\n })}\n </div>\n </div>\n </ModalRootContext.Provider>\n );\n};\n"],"names":["React","classNames","noop","clamp","useObjectMemo","usePrevious","useWaitTransitionFinish","useDOM","getNavId","warnOnce","useConfigProvider","FocusTrap","ModalRootContext","useModalManager","styles","warn","ModalRootDesktop","activeModal","activeModalProp","children","noFocusToDialog","onOpen","onOpened","onClose","onClosed","modalOverlayTestId","maskElementRef","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","hasCustomPanelHeaderAfter","platform","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onEnteredProp","onExited","history","delayEnter","waitTransitionFinish","prevProps","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","isInsideModal","timeout","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","toString","modalElement","contains","activeElement","focus","openModal","enteringState","closeModal","prevModalState","useEffect","Provider","value","div","className","data-testid","ref","onClick","map","Modal","modalId","props","key","autoFocus","restoreFocus"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';\nimport type { ModalRootWithDOMProps, ModalsStateEntry } from './types';\nimport { useModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport const ModalRootDesktop = ({\n activeModal: activeModalProp,\n children,\n noFocusToDialog = false,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n modalOverlayTestId,\n}: ModalRootWithDOMProps): React.ReactNode => {\n const maskElementRef = React.useRef<HTMLDivElement>(null);\n const maskAnimationFrame = React.useRef<number \| undefined>(undefined);\n const restoreFocusTo = React.useRef<HTMLElement \| undefined>(undefined);\n\n const { document } = useDOM();\n const { hasCustomPanelHeaderAfter, platform } = useConfigProvider();\n const {\n activeModal,\n exitingModal,\n onExit,\n getModalState,\n enteringModal,\n onEnter,\n onEntered: onEnteredProp,\n onExited,\n history,\n delayEnter,\n } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);\n\n const waitTransitionFinish = useWaitTransitionFinish();\n const prevProps = usePrevious({\n exitingModal,\n enteringModal,\n activeModal,\n });\n const modalRootContext: ModalRootContextInterface = useObjectMemo({\n updateModalHeight: () => undefined,\n registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),\n onClose: onExit,\n isInsideModal: true,\n });\n\n const timeout = platform === 'ios' ? 400 : 320;\n const modals = React.Children.toArray(children) as React.ReactElement[];\n\n /* Анимирует сдвиг модального окна /\n const animateModalOpacity = (modalState: ModalsStateEntry \| undefined, display: boolean) => {\n if (modalState?.innerElement) {\n modalState.innerElement.style.transition = '';\n modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';\n modalState.innerElement.style.opacity = display ? '1' : '0';\n }\n };\n\n / Устанавливает прозрачность для полупрозрачной подложки */\n const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number \| null = null) => {\n if (forceOpacity === null && history?.[0] !== modalState.id) {\n return;\n }\n\n if (maskAnimationFrame.current) {\n cancelAnimationFrame(maskAnimationFrame.current);\n }\n maskAnimationFrame.current = requestAnimationFrame(() => {\n if (maskElementRef.current) {\n const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n const opacity =\n forceOpacity === null\n ? 1 - (translateYCurrent - translateY) / (100 - translateY) \|\| 0\n : forceOpacity;\n maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n }\n });\n };\n\n const onEntered = ({ id, modalElement }: ModalsStateEntry) => {\n if (!noFocusToDialog && modalElement && !modalElement.contains(document!.activeElement)) {\n modalElement.focus();\n }\n\n onEnteredProp(id);\n };\n\n const openModal = () => {\n if (!enteringModal \|\| !prevProps) {\n return;\n }\n\n const enteringState = getModalState(enteringModal);\n onEnter();\n\n // Анимация открытия модального окна\n if (!prevProps.exitingModal) {\n requestAnimationFrame(() => {\n if (enteringModal === enteringModal && enteringState) {\n waitTransitionFinish(enteringState.innerElement, () => onEntered(enteringState), timeout);\n animateModalOpacity(enteringState, true);\n setMaskOpacity(enteringState, 1);\n }\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n requestAnimationFrame(() => {\n if (enteringState?.innerElement) {\n enteringState.innerElement.style.transition = 'none';\n enteringState.innerElement.style.opacity = '1';\n setMaskOpacity(enteringState, 1);\n }\n });\n\n if (enteringState) {\n onEntered(enteringState);\n }\n };\n\n const closeModal = (id: string) => {\n const prevModalState = getModalState(id);\n if (!prevModalState) {\n return;\n }\n\n // Анимация закрытия модального окна\n if (!activeModal) {\n requestAnimationFrame(() => {\n waitTransitionFinish(\n prevModalState?.innerElement,\n (event) => {\n // Исключаем дочерние элементы\n if (event && event.target === prevModalState?.innerElement) {\n onExited(id);\n } else if (!event) {\n // Вызвался по тайм-ауту\n onExited(id);\n }\n },\n timeout,\n );\n animateModalOpacity(prevModalState, false);\n setMaskOpacity(prevModalState, 0);\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n onExited(id);\n };\n\n React.useEffect(() => {\n if (!prevProps) {\n return;\n }\n\n // transition phase 2: animate exiting modal\n if (exitingModal && exitingModal !== prevProps.exitingModal) {\n closeModal(exitingModal);\n }\n\n // transition phase 3: animate entering modal\n if (enteringModal && enteringModal !== prevProps.enteringModal) {\n openModal();\n }\n\n // focus restoration\n if (activeModal && !prevProps.activeModal) {\n restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement \| undefined;\n }\n if (!activeModal && !exitingModal && restoreFocusTo.current) {\n restoreFocusTo.current.focus();\n restoreFocusTo.current = undefined;\n }\n });\n\n if (!activeModal && !exitingModal) {\n return null;\n }\n\n return (\n <ModalRootContext.Provider value={modalRootContext}>\n <div\n className={classNames(\n styles['ModalRoot'],\n hasCustomPanelHeaderAfter && styles['ModalRoot--hasCustomPanelHeaderAfterSlot'],\n styles['ModalRoot--desktop'],\n )}\n >\n <div\n data-testid={modalOverlayTestId}\n className={styles['ModalRoot__mask']}\n ref={maskElementRef}\n onClick={onExit}\n />\n <div className={styles['ModalRoot__viewport']}>\n {modals.map((Modal: React.ReactElement) => {\n const modalId = getNavId(Modal.props, warn);\n if (modalId !== activeModal && modalId !== exitingModal) {\n return null;\n }\n\n const key = `modal-${modalId}`;\n\n return (\n <FocusTrap\n autoFocus={false}\n restoreFocus={false}\n onClose={onExit}\n timeout={timeout}\n key={key}\n className={styles['ModalRoot__modal']}\n >\n {Modal}\n </FocusTrap>\n );\n })}\n </div>\n </div>\n </ModalRootContext.Provider>\n );\n};\n"],"names":["React","classNames","noop","clamp","useObjectMemo","usePrevious","useWaitTransitionFinish","useDOM","getNavId","warnOnce","useConfigProvider","FocusTrap","ModalRootContext","useModalManager","styles","warn","ModalRootDesktop","activeModal","activeModalProp","children","noFocusToDialog","onOpen","onOpened","onClose","onClosed","modalOverlayTestId","maskElementRef","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","hasCustomPanelHeaderAfter","platform","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onEnteredProp","onExited","history","delayEnter","waitTransitionFinish","prevProps","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","isInsideModal","timeout","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","toString","modalElement","contains","activeElement","focus","openModal","enteringState","closeModal","prevModalState","event","target","useEffect","Provider","value","div","className","data-testid","ref","onClick","map","Modal","modalId","props","key","autoFocus","restoreFocus"],"mappings":"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"}

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

@@ -12,7 +12,7 @@ import { SelectTypography } from '../SelectTypography/SelectTypography';
 import styles from '../Select/Select.module.css';
 const sizeYClassNames = {
     none: styles['Select--sizeY-none'],
-    ['compact']: styles['Select--sizeY-compact']
+    compact: styles['Select--sizeY-compact']
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect