@vkontakte/vkui 7.7.0 → 7.7.2
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.
- package/dist/components/CalendarHeader/CalendarHeader.d.ts.map +1 -1
- package/dist/components/CalendarHeader/CalendarHeader.js +1 -1
- package/dist/components/CalendarHeader/CalendarHeader.js.map +1 -1
- package/dist/components/DateInput/DateInput.d.ts +1 -1
- package/dist/components/DateInput/DateInput.d.ts.map +1 -1
- package/dist/components/DateInput/DateInput.js +9 -5
- package/dist/components/DateInput/DateInput.js.map +1 -1
- package/dist/components/DateRangeInput/DateRangeInput.d.ts +1 -1
- package/dist/components/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/components/DateRangeInput/DateRangeInput.js +11 -7
- package/dist/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/components/TabsItem/TabsItem.js +1 -1
- package/dist/components/TabsItem/TabsItem.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/cssm/components/CalendarHeader/CalendarHeader.js +1 -1
- package/dist/cssm/components/CalendarHeader/CalendarHeader.js.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.js +7 -4
- package/dist/cssm/components/DateInput/DateInput.js.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.module.css +11 -4
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js +9 -7
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/cssm/components/TabsItem/TabsItem.js +1 -1
- package/dist/cssm/components/TabsItem/TabsItem.js.map +1 -1
- package/dist/vkui.css +1 -1
- package/dist/vkui.css.map +1 -1
- package/package.json +1 -1
- package/src/components/CalendarHeader/CalendarHeader.tsx +5 -1
- package/src/components/DateInput/DateInput.module.css +11 -3
- package/src/components/DateInput/DateInput.module.css.d.ts.map +1 -1
- package/src/components/DateInput/DateInput.tsx +13 -3
- package/src/components/DateRangeInput/DateRangeInput.tsx +15 -6
- package/src/components/TabsItem/TabsItem.tsx +1 -1
- package/dist/cssm/components/DateRangeInput/DateRangeInput.module.css +0 -24
- package/src/components/DateRangeInput/DateRangeInput.module.css +0 -20
- package/src/components/DateRangeInput/DateRangeInput.module.css.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;AAE5F,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAChE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,wBAAwB;IAC1B;;OAEG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAClE;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IACjD;;OAEG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,GAAI,qZA2B5B,mBAAmB,KAAG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;AAE5F,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAChE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,wBAAwB;IAC1B;;OAEG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAClE;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IACjD;;OAEG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,GAAI,qZA2B5B,mBAAmB,KAAG,KAAK,CAAC,SAkK9B,CAAC"}
|
|
@@ -166,7 +166,7 @@ export const CalendarHeader = (_param)=>{
|
|
|
166
166
|
forceDropdownPortal: false,
|
|
167
167
|
selectType: "accent",
|
|
168
168
|
"aria-label": changeYearLabel,
|
|
169
|
-
"data-testid": yearDropdownTestId,
|
|
169
|
+
"data-testid": typeof yearDropdownTestId === 'string' ? yearDropdownTestId : yearDropdownTestId === null || yearDropdownTestId === void 0 ? void 0 : yearDropdownTestId(currentYear),
|
|
170
170
|
onInputKeyDown: stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen
|
|
171
171
|
})
|
|
172
172
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport {\n Icon12Dropdown,\n Icon20ChevronLeftOutline,\n Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;\n\nexport type CalendarHeaderTestsProps = {\n /**\n * Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря.\n */\n monthDropdownTestId?: string | ((monthIndex: number) => string);\n /**\n * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря.\n */\n yearDropdownTestId?: string | ((year: number) => string);\n /**\n * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря.\n */\n nextMonthButtonTestId?: string;\n /**\n * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря.\n */\n prevMonthButtonTestId?: string;\n};\n\nexport interface CalendarHeaderProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n CalendarHeaderTestsProps {\n /**\n * Отображаемая дата.\n */\n viewDate: Date;\n /**\n * Скрывает иконку для переключения на предыдущий месяц.\n */\n prevMonthHidden?: boolean;\n /**\n * Скрывает иконку для переключения на следующий месяц.\n */\n nextMonthHidden?: boolean;\n /**\n * Отключает селекторы выбора месяца/года.\n */\n disablePickers?: boolean;\n /**\n * `aria-label` для кнопки предыдущего месяца.\n */\n prevMonthLabel?: string;\n /**\n * `aria-label` для кнопки следующего месяца.\n */\n nextMonthLabel?: string;\n /**\n * `aria-label` для селектора месяца.\n */\n changeMonthLabel?: string;\n /**\n * `aria-label` для селектора года.\n */\n changeYearLabel?: string;\n /**\n * Кастомная иконка для кнопки предыдущего месяца.\n */\n prevMonthIcon?: React.ReactNode;\n /**\n * Кастомная иконка для кнопки следующего месяца.\n */\n nextMonthIcon?: React.ReactNode;\n /**\n * Дополнительные свойства для кнопки предыдущего месяца.\n */\n prevMonthProps?: ArrowMonthProps;\n /**\n * Дополнительные свойства для кнопки следующего месяца.\n */\n nextMonthProps?: ArrowMonthProps;\n /**\n * Функция для проверки блокировки месяца.\n */\n isMonthDisabled?: (monthNumber: number, year?: number) => boolean;\n /**\n * Функция для проверки блокировки года.\n */\n isYearDisabled?: (yearNumber: number) => boolean;\n /**\n * Обработчик изменения отображаемой даты.\n */\n onChange: (viewDate: Date) => void;\n /**\n * Нажатие на кнопку переключения на следующий месяц.\n */\n onNextMonth?: () => void;\n /**\n * Нажатие на кнопку переключения на предыдущий месяц.\n */\n onPrevMonth?: () => void;\n}\n\nexport const CalendarHeader = ({\n viewDate,\n onChange,\n prevMonthHidden: prevMonthHiddenProp = false,\n nextMonthHidden: nextMonthHiddenProp = false,\n disablePickers = false,\n onNextMonth,\n onPrevMonth,\n prevMonthProps = {},\n nextMonthProps = {},\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n changeMonthLabel = 'Изменить месяц',\n changeYearLabel = 'Изменить год',\n prevMonthIcon = (\n <Icon20ChevronLeftOutline className={styles.navIconAccent} width={30} height={30} />\n ),\n nextMonthIcon = (\n <Icon20ChevronRightOutline className={styles.navIconAccent} width={30} height={30} />\n ),\n isMonthDisabled,\n isYearDisabled,\n monthDropdownTestId,\n yearDropdownTestId,\n prevMonthButtonTestId,\n nextMonthButtonTestId,\n ...restProps\n}: CalendarHeaderProps): React.ReactNode => {\n const { locale, direction } = useConfigProvider();\n\n const onMonthsChange = React.useCallback(\n (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n onChange(setMonth(viewDate, Number(newValue))),\n [onChange, viewDate],\n );\n const onYearChange = React.useCallback(\n (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n onChange(setYear(viewDate, Number(newValue))),\n [onChange, viewDate],\n );\n\n const currentYear = viewDate.getFullYear();\n const currentMonth = viewDate.getMonth();\n\n const months = React.useMemo(\n () =>\n getMonths(locale).map(({ value, label }) => ({\n value,\n label: <span className={styles.month}>{label}</span>,\n disabled: isMonthDisabled && isMonthDisabled(value),\n })),\n [locale, isMonthDisabled],\n );\n\n const years = React.useMemo(\n () =>\n getYears(currentYear, 100).map((year) => ({\n ...year,\n disabled: isYearDisabled && isYearDisabled(year.value),\n })),\n [currentYear, isYearDisabled],\n );\n\n const formatter = new Intl.DateTimeFormat(locale, {\n year: 'numeric',\n month: 'long',\n });\n\n const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n let nextMonthHidden =\n nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n if (isMonthDisabled && !nextMonthHidden) {\n nextMonthHidden = isMonthDisabled(\n currentMonth === 11 ? 0 : currentMonth + 1,\n currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n );\n }\n\n let prevMonthHidden =\n prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n if (isMonthDisabled && !prevMonthHidden) {\n prevMonthHidden = isMonthDisabled(\n currentMonth === 0 ? 11 : currentMonth - 1,\n currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n );\n }\n\n const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(\n (event: React.KeyboardEvent, isOpen: boolean) => {\n if (isOpen && event.key === 'Escape') {\n event.stopPropagation();\n }\n },\n [],\n );\n\n return (\n <RootComponent baseClassName={styles.host} {...restProps}>\n {!prevMonthHidden && (\n <AdaptivityProvider sizeX=\"regular\">\n <Tappable\n baseClassName={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}\n onClick={onPrevMonth}\n data-testid={prevMonthButtonTestId}\n {...restPrevMonthProps}\n >\n <VisuallyHidden>\n {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}\n </VisuallyHidden>\n {direction === 'ltr' ? prevMonthIcon : nextMonthIcon}\n </Tappable>\n </AdaptivityProvider>\n )}\n {disablePickers ? (\n <Paragraph\n className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}\n weight=\"2\"\n >\n <span className={styles.month}>\n {new Intl.DateTimeFormat(locale, {\n month: 'long',\n }).format(viewDate)}\n </span>\n \n {new Intl.DateTimeFormat(locale, {\n year: 'numeric',\n }).format(viewDate)}\n </Paragraph>\n ) : (\n <AdaptivityProvider sizeY=\"compact\">\n <div className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}>\n <CustomSelect\n className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n value={currentMonth}\n options={months}\n dropdownOffsetDistance={4}\n dropdownAutoWidth\n icon={<Icon12Dropdown />}\n onChange={onMonthsChange}\n forceDropdownPortal={false}\n selectType=\"accent\"\n aria-label={changeMonthLabel}\n data-testid={\n typeof monthDropdownTestId === 'string'\n ? monthDropdownTestId\n : monthDropdownTestId?.(currentMonth)\n }\n onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n />\n <CustomSelect\n className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n value={currentYear}\n options={years}\n dropdownOffsetDistance={4}\n dropdownAutoWidth\n icon={<Icon12Dropdown />}\n onChange={onYearChange}\n forceDropdownPortal={false}\n selectType=\"accent\"\n aria-label={changeYearLabel}\n data-testid={yearDropdownTestId}\n onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n />\n </div>\n </AdaptivityProvider>\n )}\n {!nextMonthHidden && (\n <AdaptivityProvider sizeX=\"regular\">\n <Tappable\n baseClassName={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}\n onClick={onNextMonth}\n data-testid={nextMonthButtonTestId}\n {...restNextMonthProps}\n >\n <VisuallyHidden>\n {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}\n </VisuallyHidden>\n {direction === 'ltr' ? nextMonthIcon : prevMonthIcon}\n </Tappable>\n </AdaptivityProvider>\n )}\n </RootComponent>\n );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","addMonths","setMonth","setYear","subMonths","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","CalendarHeader","viewDate","onChange","prevMonthHidden","prevMonthHiddenProp","nextMonthHidden","nextMonthHiddenProp","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","prevMonthIcon","className","width","height","nextMonthIcon","isMonthDisabled","isYearDisabled","monthDropdownTestId","yearDropdownTestId","prevMonthButtonTestId","nextMonthButtonTestId","restProps","locale","direction","onMonthsChange","useCallback","_","newValue","Number","onYearChange","currentYear","getFullYear","currentMonth","getMonth","months","useMemo","map","value","label","span","disabled","years","year","formatter","Intl","DateTimeFormat","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","Math","min","max","stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen","event","isOpen","key","stopPropagation","baseClassName","sizeX","onClick","data-testid","format","weight","sizeY","div","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","aria-label","onInputKeyDown"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport {\n Icon12Dropdown,\n Icon20ChevronLeftOutline,\n Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;\n\nexport type CalendarHeaderTestsProps = {\n /**\n * Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря.\n */\n monthDropdownTestId?: string | ((monthIndex: number) => string);\n /**\n * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря.\n */\n yearDropdownTestId?: string | ((year: number) => string);\n /**\n * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря.\n */\n nextMonthButtonTestId?: string;\n /**\n * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря.\n */\n prevMonthButtonTestId?: string;\n};\n\nexport interface CalendarHeaderProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n CalendarHeaderTestsProps {\n /**\n * Отображаемая дата.\n */\n viewDate: Date;\n /**\n * Скрывает иконку для переключения на предыдущий месяц.\n */\n prevMonthHidden?: boolean;\n /**\n * Скрывает иконку для переключения на следующий месяц.\n */\n nextMonthHidden?: boolean;\n /**\n * Отключает селекторы выбора месяца/года.\n */\n disablePickers?: boolean;\n /**\n * `aria-label` для кнопки предыдущего месяца.\n */\n prevMonthLabel?: string;\n /**\n * `aria-label` для кнопки следующего месяца.\n */\n nextMonthLabel?: string;\n /**\n * `aria-label` для селектора месяца.\n */\n changeMonthLabel?: string;\n /**\n * `aria-label` для селектора года.\n */\n changeYearLabel?: string;\n /**\n * Кастомная иконка для кнопки предыдущего месяца.\n */\n prevMonthIcon?: React.ReactNode;\n /**\n * Кастомная иконка для кнопки следующего месяца.\n */\n nextMonthIcon?: React.ReactNode;\n /**\n * Дополнительные свойства для кнопки предыдущего месяца.\n */\n prevMonthProps?: ArrowMonthProps;\n /**\n * Дополнительные свойства для кнопки следующего месяца.\n */\n nextMonthProps?: ArrowMonthProps;\n /**\n * Функция для проверки блокировки месяца.\n */\n isMonthDisabled?: (monthNumber: number, year?: number) => boolean;\n /**\n * Функция для проверки блокировки года.\n */\n isYearDisabled?: (yearNumber: number) => boolean;\n /**\n * Обработчик изменения отображаемой даты.\n */\n onChange: (viewDate: Date) => void;\n /**\n * Нажатие на кнопку переключения на следующий месяц.\n */\n onNextMonth?: () => void;\n /**\n * Нажатие на кнопку переключения на предыдущий месяц.\n */\n onPrevMonth?: () => void;\n}\n\nexport const CalendarHeader = ({\n viewDate,\n onChange,\n prevMonthHidden: prevMonthHiddenProp = false,\n nextMonthHidden: nextMonthHiddenProp = false,\n disablePickers = false,\n onNextMonth,\n onPrevMonth,\n prevMonthProps = {},\n nextMonthProps = {},\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n changeMonthLabel = 'Изменить месяц',\n changeYearLabel = 'Изменить год',\n prevMonthIcon = (\n <Icon20ChevronLeftOutline className={styles.navIconAccent} width={30} height={30} />\n ),\n nextMonthIcon = (\n <Icon20ChevronRightOutline className={styles.navIconAccent} width={30} height={30} />\n ),\n isMonthDisabled,\n isYearDisabled,\n monthDropdownTestId,\n yearDropdownTestId,\n prevMonthButtonTestId,\n nextMonthButtonTestId,\n ...restProps\n}: CalendarHeaderProps): React.ReactNode => {\n const { locale, direction } = useConfigProvider();\n\n const onMonthsChange = React.useCallback(\n (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n onChange(setMonth(viewDate, Number(newValue))),\n [onChange, viewDate],\n );\n const onYearChange = React.useCallback(\n (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n onChange(setYear(viewDate, Number(newValue))),\n [onChange, viewDate],\n );\n\n const currentYear = viewDate.getFullYear();\n const currentMonth = viewDate.getMonth();\n\n const months = React.useMemo(\n () =>\n getMonths(locale).map(({ value, label }) => ({\n value,\n label: <span className={styles.month}>{label}</span>,\n disabled: isMonthDisabled && isMonthDisabled(value),\n })),\n [locale, isMonthDisabled],\n );\n\n const years = React.useMemo(\n () =>\n getYears(currentYear, 100).map((year) => ({\n ...year,\n disabled: isYearDisabled && isYearDisabled(year.value),\n })),\n [currentYear, isYearDisabled],\n );\n\n const formatter = new Intl.DateTimeFormat(locale, {\n year: 'numeric',\n month: 'long',\n });\n\n const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n let nextMonthHidden =\n nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n if (isMonthDisabled && !nextMonthHidden) {\n nextMonthHidden = isMonthDisabled(\n currentMonth === 11 ? 0 : currentMonth + 1,\n currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n );\n }\n\n let prevMonthHidden =\n prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n if (isMonthDisabled && !prevMonthHidden) {\n prevMonthHidden = isMonthDisabled(\n currentMonth === 0 ? 11 : currentMonth - 1,\n currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n );\n }\n\n const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(\n (event: React.KeyboardEvent, isOpen: boolean) => {\n if (isOpen && event.key === 'Escape') {\n event.stopPropagation();\n }\n },\n [],\n );\n\n return (\n <RootComponent baseClassName={styles.host} {...restProps}>\n {!prevMonthHidden && (\n <AdaptivityProvider sizeX=\"regular\">\n <Tappable\n baseClassName={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}\n onClick={onPrevMonth}\n data-testid={prevMonthButtonTestId}\n {...restPrevMonthProps}\n >\n <VisuallyHidden>\n {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}\n </VisuallyHidden>\n {direction === 'ltr' ? prevMonthIcon : nextMonthIcon}\n </Tappable>\n </AdaptivityProvider>\n )}\n {disablePickers ? (\n <Paragraph\n className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}\n weight=\"2\"\n >\n <span className={styles.month}>\n {new Intl.DateTimeFormat(locale, {\n month: 'long',\n }).format(viewDate)}\n </span>\n \n {new Intl.DateTimeFormat(locale, {\n year: 'numeric',\n }).format(viewDate)}\n </Paragraph>\n ) : (\n <AdaptivityProvider sizeY=\"compact\">\n <div className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}>\n <CustomSelect\n className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n value={currentMonth}\n options={months}\n dropdownOffsetDistance={4}\n dropdownAutoWidth\n icon={<Icon12Dropdown />}\n onChange={onMonthsChange}\n forceDropdownPortal={false}\n selectType=\"accent\"\n aria-label={changeMonthLabel}\n data-testid={\n typeof monthDropdownTestId === 'string'\n ? monthDropdownTestId\n : monthDropdownTestId?.(currentMonth)\n }\n onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n />\n <CustomSelect\n className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n value={currentYear}\n options={years}\n dropdownOffsetDistance={4}\n dropdownAutoWidth\n icon={<Icon12Dropdown />}\n onChange={onYearChange}\n forceDropdownPortal={false}\n selectType=\"accent\"\n aria-label={changeYearLabel}\n data-testid={\n typeof yearDropdownTestId === 'string'\n ? yearDropdownTestId\n : yearDropdownTestId?.(currentYear)\n }\n onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n />\n </div>\n </AdaptivityProvider>\n )}\n {!nextMonthHidden && (\n <AdaptivityProvider sizeX=\"regular\">\n <Tappable\n baseClassName={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}\n onClick={onNextMonth}\n data-testid={nextMonthButtonTestId}\n {...restNextMonthProps}\n >\n <VisuallyHidden>\n {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}\n </VisuallyHidden>\n {direction === 'ltr' ? nextMonthIcon : prevMonthIcon}\n </Tappable>\n </AdaptivityProvider>\n )}\n </RootComponent>\n );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","addMonths","setMonth","setYear","subMonths","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","CalendarHeader","viewDate","onChange","prevMonthHidden","prevMonthHiddenProp","nextMonthHidden","nextMonthHiddenProp","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","prevMonthIcon","className","width","height","nextMonthIcon","isMonthDisabled","isYearDisabled","monthDropdownTestId","yearDropdownTestId","prevMonthButtonTestId","nextMonthButtonTestId","restProps","locale","direction","onMonthsChange","useCallback","_","newValue","Number","onYearChange","currentYear","getFullYear","currentMonth","getMonth","months","useMemo","map","value","label","span","disabled","years","year","formatter","Intl","DateTimeFormat","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","Math","min","max","stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen","event","isOpen","key","stopPropagation","baseClassName","sizeX","onClick","data-testid","format","weight","sizeY","div","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","aria-label","onInputKeyDown"],"mappings":"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"}
|
|
@@ -104,5 +104,5 @@ export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivEl
|
|
|
104
104
|
/**
|
|
105
105
|
* @see https://vkui.io/components/date-input
|
|
106
106
|
*/
|
|
107
|
-
export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, "value": valueProp, defaultValue, onChange, "calendarPlacement": calendarPlacementProp, style, className, doneButtonText, DoneButton, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, accessible, calendarLabel, prevMonthLabel, nextMonthLabel, changeDayLabel, changeMonthLabel, changeYearLabel, changeHoursLabel, changeMinutesLabel, clearFieldLabel, showCalendarLabel, showNeighboringMonth, size, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, showCalendarButtonTestId, clearButtonTestId, id, onApply, renderCustomValue, timezone, restoreFocus, disableFocusTrap, readOnly, "disableCalendar": disableCalendarProp, "aria-label": ariaLabel, ...props }: DateInputProps) => React.ReactNode;
|
|
107
|
+
export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, "value": valueProp, defaultValue, onChange, "calendarPlacement": calendarPlacementProp, style, className, doneButtonText, DoneButton, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, accessible, calendarLabel, prevMonthLabel, nextMonthLabel, changeDayLabel, changeMonthLabel, changeYearLabel, changeHoursLabel, changeMinutesLabel, clearFieldLabel, showCalendarLabel, showNeighboringMonth, size, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, showCalendarButtonTestId, clearButtonTestId, id, onApply, renderCustomValue, timezone, restoreFocus, disableFocusTrap, readOnly, "disableCalendar": disableCalendarProp, "aria-label": ariaLabel, before, ...props }: DateInputProps) => React.ReactNode;
|
|
108
108
|
//# sourceMappingURL=DateInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AASlE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG7F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAQxE,OAAO,mCAAmC,CAAC;AAQ3C,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EACzC,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAC/C,EACD,IAAI,CACF,aAAa,EACX,aAAa,GACb,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,YAAY,GACZ,cAAc,GACd,gBAAgB,GAChB,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,sBAAsB,GACtB,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,aAAa,GACb,aAAa,GACb,kBAAkB,CACrB,EACD,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC,EACvC,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,wBAAwB;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAyC;IAC7D;;OAEG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAClD;AAiDD;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -83,7 +83,7 @@ const CALENDAR_MUTATION_OBSERVER_OPTIONS = {
|
|
|
83
83
|
/**
|
|
84
84
|
* @see https://vkui.io/components/date-input
|
|
85
85
|
*/ export const DateInput = (_param)=>{
|
|
86
|
-
var { enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, 'value': valueProp, defaultValue, onChange, 'calendarPlacement': calendarPlacementProp = 'bottom-start', style, className, doneButtonText, DoneButton, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, accessible, calendarLabel = 'Календарь', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'День', changeMonthLabel = 'Месяц', changeYearLabel = 'Год', changeHoursLabel = 'Час', changeMinutesLabel = 'Минута', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', showNeighboringMonth, size, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, showCalendarButtonTestId, clearButtonTestId, id, onApply, renderCustomValue, timezone, restoreFocus, disableFocusTrap, readOnly, 'disableCalendar': disableCalendarProp = false, 'aria-label': ariaLabel = '' } = _param, props = _object_without_properties(_param, [
|
|
86
|
+
var { enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, 'value': valueProp, defaultValue, onChange, 'calendarPlacement': calendarPlacementProp = 'bottom-start', style, className, doneButtonText, DoneButton, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, accessible, calendarLabel = 'Календарь', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'День', changeMonthLabel = 'Месяц', changeYearLabel = 'Год', changeHoursLabel = 'Час', changeMinutesLabel = 'Минута', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', showNeighboringMonth, size, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, showCalendarButtonTestId, clearButtonTestId, id, onApply, renderCustomValue, timezone, restoreFocus, disableFocusTrap, readOnly, 'disableCalendar': disableCalendarProp = false, 'aria-label': ariaLabel = '', before } = _param, props = _object_without_properties(_param, [
|
|
87
87
|
"enableTime",
|
|
88
88
|
"shouldDisableDate",
|
|
89
89
|
"disableFuture",
|
|
@@ -141,7 +141,8 @@ const CALENDAR_MUTATION_OBSERVER_OPTIONS = {
|
|
|
141
141
|
"disableFocusTrap",
|
|
142
142
|
"readOnly",
|
|
143
143
|
'disableCalendar',
|
|
144
|
-
'aria-label'
|
|
144
|
+
'aria-label',
|
|
145
|
+
"before"
|
|
145
146
|
]);
|
|
146
147
|
const daysRef = React.useRef(null);
|
|
147
148
|
const monthsRef = React.useRef(null);
|
|
@@ -275,22 +276,25 @@ const CALENDAR_MUTATION_OBSERVER_OPTIONS = {
|
|
|
275
276
|
openCalendar,
|
|
276
277
|
accessible
|
|
277
278
|
]);
|
|
279
|
+
const showCalendarButton = !disableCalendar && (accessible || !accessible && !value);
|
|
280
|
+
const showClearButton = value && !readOnly;
|
|
278
281
|
return /*#__PURE__*/ _jsxs(FormField, _object_spread_props(_object_spread({
|
|
279
282
|
style: style,
|
|
280
|
-
className: classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className),
|
|
283
|
+
className: classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], !!before && "vkuiDateInput__hasBefore", (showCalendarButton || showClearButton) && "vkuiDateInput__hasAfter", className),
|
|
281
284
|
getRootRef: handleRootRef,
|
|
282
285
|
role: "group",
|
|
283
286
|
"aria-labelledby": `${ariaLabelId} ${currentDateLabelId}`,
|
|
287
|
+
before: before,
|
|
284
288
|
after: /*#__PURE__*/ _jsxs(React.Fragment, {
|
|
285
289
|
children: [
|
|
286
|
-
|
|
290
|
+
showCalendarButton ? /*#__PURE__*/ _jsx(IconButton, {
|
|
287
291
|
hoverMode: "opacity",
|
|
288
292
|
label: showCalendarLabel,
|
|
289
293
|
onClick: toggleCalendar,
|
|
290
294
|
"data-testid": showCalendarButtonTestId,
|
|
291
295
|
children: /*#__PURE__*/ _jsx(Icon20CalendarOutline, {})
|
|
292
296
|
}) : null,
|
|
293
|
-
|
|
297
|
+
showClearButton ? /*#__PURE__*/ _jsx(IconButton, {
|
|
294
298
|
hoverMode: "opacity",
|
|
295
299
|
label: clearFieldLabel,
|
|
296
300
|
onClick: clear,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["'use client';\n\nimport * 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 { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport {\n dateFormatter,\n dateTimeFormatter,\n isMatch,\n parse,\n startOfDay,\n startOfMinute,\n} from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { NumberInputLike } from '../NumberInputLike/NumberInputLike';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { useDateInputValue } from './hooks';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n none: styles.sizeYNone,\n compact: styles.sizeYCompact,\n};\n\nexport type DateInputPropsTestsProps = {\n /**\n * Передает атрибут `data-testid` для поля ввода дня.\n */\n dayFieldTestId?: string;\n /**\n * Передает атрибут `data-testid` для поля ввода месяца.\n */\n monthFieldTestId?: string;\n /**\n * Передает атрибут `data-testid` для поля ввода года.\n */\n yearFieldTestId?: string;\n /**\n * Передает атрибут `data-testid` для поля ввода часа.\n */\n hourFieldTestId?: string;\n /**\n * Передает атрибут `data-testid` для поля ввода минут.\n */\n minuteFieldTestId?: string;\n /**\n * Передает атрибут `data-testid` для кнопки показа календаря.\n */\n showCalendarButtonTestId?: string;\n /**\n * Передает атрибут `data-testid` для кнопки очистки даты.\n */\n clearButtonTestId?: string;\n};\n\nexport interface DateInputProps\n extends Omit<\n React.InputHTMLAttributes<HTMLDivElement>,\n 'value' | 'defaultValue' | 'onChange' | 'size'\n >,\n Pick<\n CalendarProps,\n | 'disablePast'\n | 'disableFuture'\n | 'enableTime'\n | 'shouldDisableDate'\n | 'onChange'\n | 'value'\n | 'defaultValue'\n | 'doneButtonText'\n | 'DoneButton'\n | 'weekStartsOn'\n | 'disablePickers'\n | 'changeHoursLabel'\n | 'changeMinutesLabel'\n | 'prevMonthLabel'\n | 'nextMonthLabel'\n | 'changeMonthLabel'\n | 'changeYearLabel'\n | 'showNeighboringMonth'\n | 'size'\n | 'viewDate'\n | 'onHeaderChange'\n | 'onNextMonth'\n | 'onPrevMonth'\n | 'prevMonthIcon'\n | 'nextMonthIcon'\n | 'minDateTime'\n | 'maxDateTime'\n | 'renderDayContent'\n >,\n Pick<UseFocusTrapProps, 'restoreFocus'>,\n HasRootRef<HTMLDivElement>,\n Omit<FormFieldProps, 'maxHeight'>,\n DateInputPropsTestsProps {\n /**\n * Передает атрибуты `data-testid` для интерактивных элементов в календаре.\n */\n calendarTestsProps?: CalendarTestsProps;\n /**\n * Расположение календаря относительно поля ввода.\n */\n calendarPlacement?: PlacementWithAuto;\n /**\n * Автоматически закрывать календарь при изменениях.\n */\n closeOnChange?: boolean;\n /**\n * `aria-label` для календаря.\n */\n calendarLabel?: string;\n /**\n * Label для кнопки очистки. Делает доступным для ассистивных технологий.\n */\n clearFieldLabel?: string;\n /**\n * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.\n */\n showCalendarLabel?: string;\n /**\n * Отключение открытия календаря.\n */\n disableCalendar?: boolean;\n /**\n * Обработчик изменения состояния открытия календаря.\n */\n onCalendarOpenChanged?: (opened: boolean) => void;\n /**\n * `aria-label` для поля изменения дня.\n */\n changeDayLabel?: string;\n /**\n * Обработчик нажатия на кнопку `\"Done\"`. Используется совместно с флагом `enableTime`.\n */\n onApply?: (value?: Date) => void;\n /**\n * Функция для кастомного форматирования отображаемого значения даты.\n * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.\n */\n renderCustomValue?: (date: Date | undefined) => React.ReactNode;\n /**\n * Часовой пояс для отображения даты.\n */\n timezone?: string;\n /**\n * Включает режим в котором DateInput доступен\n * для ассистивных технологий.\n * В этом режиме:\n * - календарь больше не открывает при фокусе на DateInput;\n * - иконка календаря видна всегда, чтобы пользователи\n * ассистивных технологий могли открыть календарь по клику на иконку;\n * - календарь при открытии получает фокус, клавиатурный\n * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.\n */\n accessible?: boolean /* TODO [>=v8] включить по умолчанию */;\n /**\n * Позволяет отключить захват фокуса при появлении календаря.\n */\n disableFocusTrap?: UseFocusTrapProps['disabled'];\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\nconst CALENDAR_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['tabindex'],\n};\n\n/**\n * @see https://vkui.io/components/date-input\n */\nexport const DateInput = ({\n enableTime,\n shouldDisableDate,\n disableFuture,\n disablePast,\n minDateTime,\n maxDateTime,\n 'value': valueProp,\n defaultValue,\n onChange,\n 'calendarPlacement': calendarPlacementProp = 'bottom-start',\n style,\n className,\n doneButtonText,\n DoneButton,\n closeOnChange = true,\n disablePickers,\n getRootRef,\n name,\n autoFocus,\n disabled,\n accessible,\n calendarLabel = 'Календарь',\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n changeDayLabel = 'День',\n changeMonthLabel = 'Месяц',\n changeYearLabel = 'Год',\n changeHoursLabel = 'Час',\n changeMinutesLabel = 'Минута',\n clearFieldLabel = 'Очистить поле',\n showCalendarLabel = 'Показать календарь',\n showNeighboringMonth,\n size,\n viewDate,\n onHeaderChange,\n onNextMonth,\n onPrevMonth,\n prevMonthIcon,\n nextMonthIcon,\n renderDayContent,\n onCalendarOpenChanged,\n calendarTestsProps,\n dayFieldTestId,\n monthFieldTestId,\n yearFieldTestId,\n hourFieldTestId,\n minuteFieldTestId,\n showCalendarButtonTestId,\n clearButtonTestId,\n id,\n onApply,\n renderCustomValue,\n timezone,\n restoreFocus,\n disableFocusTrap,\n readOnly,\n 'disableCalendar': disableCalendarProp = false,\n 'aria-label': ariaLabel = '',\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 disableCalendar = readOnly ? true : disableCalendarProp;\n\n const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =\n useDateInputValue({\n value: valueProp,\n defaultValue,\n onChange,\n timezone,\n });\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 const now = new Date();\n updateValue(\n parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),\n );\n }\n },\n [enableTime, maxElement, updateValue, 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 internalValue,\n handleKeyDown,\n setFocusedElement,\n handleFieldEnter,\n clear,\n removeFocusFromField,\n closeCalendar,\n toggleCalendar,\n openCalendar,\n handleRestoreFocus,\n } = useDateInput({\n maxElement,\n refs,\n autoFocus,\n disabled: disabled || readOnly,\n elementsConfig,\n onClear: clearValue,\n onInternalValueChange,\n getInternalValue,\n value,\n onCalendarOpenChanged,\n accessible,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const handleRootRef = useExternRef(rootRef, getRootRef);\n\n useIsomorphicLayoutEffect(\n function resetValueOnCloseCalendar() {\n if (!open) {\n setInternalValue(getLastUpdatedValue());\n }\n },\n [open, getLastUpdatedValue],\n );\n\n const onCalendarChange = React.useCallback(\n (value?: Date | undefined) => {\n if (!value) {\n return;\n }\n if (enableTime) {\n setInternalValue(value);\n return;\n }\n updateValue(value);\n if (closeOnChange) {\n removeFocusFromField();\n }\n },\n [enableTime, updateValue, closeOnChange, setInternalValue, removeFocusFromField],\n );\n\n const onDoneButtonClick = React.useCallback(() => {\n if (!value) {\n return;\n }\n const newValue = updateValue(value);\n onApply?.(newValue);\n removeFocusFromField();\n }, [onApply, removeFocusFromField, updateValue, value]);\n\n const customValue = React.useMemo(\n () => !open && renderCustomValue?.(value || undefined),\n [open, renderCustomValue, value],\n );\n\n // при переключении месяцев высота календаря может меняться,\n // чтобы календарь не прыгал при переключении месяцев каждый раз на\n // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n // на ней, пока помещается.\n const [calendarPlacement, setCalendarPlacement] =\n React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n const { locale } = useConfigProvider();\n const currentDateLabel = value\n ? new Intl.DateTimeFormat(locale, {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n }).format(value)\n : null;\n const currentDateLabelId = React.useId();\n const ariaLabelId = React.useId();\n\n const showCalendarOnInputAreaClick = React.useCallback(() => {\n handleFieldEnter();\n if (accessible) {\n openCalendar();\n }\n }, [handleFieldEnter, openCalendar, accessible]);\n\n return (\n <FormField\n style={style}\n className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n getRootRef={handleRootRef}\n role=\"group\"\n aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}\n after={\n <React.Fragment>\n {!disableCalendar && (accessible || (!accessible && !value)) ? (\n <IconButton\n hoverMode=\"opacity\"\n label={showCalendarLabel}\n onClick={toggleCalendar}\n data-testid={showCalendarButtonTestId}\n >\n <Icon20CalendarOutline />\n </IconButton>\n ) : null}\n {value && !readOnly ? (\n <IconButton\n hoverMode=\"opacity\"\n label={clearFieldLabel}\n onClick={clear}\n data-testid={clearButtonTestId}\n >\n <Icon16Clear />\n </IconButton>\n ) : null}\n </React.Fragment>\n }\n disabled={disabled}\n {...props}\n >\n <div className={styles.wrapper}>\n {ariaLabel && <VisuallyHidden id={ariaLabelId}>{ariaLabel}</VisuallyHidden>}\n {currentDateLabel && (\n <VisuallyHidden id={currentDateLabelId}>{currentDateLabel}</VisuallyHidden>\n )}\n <VisuallyHidden\n id={id}\n Component=\"input\"\n readOnly\n aria-hidden\n tabIndex={readOnly ? 0 : -1}\n name={name}\n value={\n value\n ? enableTime\n ? dateTimeFormatter.format(value)\n : dateFormatter.format(value)\n : ''\n }\n onFocus={handleFieldEnter}\n />\n <Text\n className={classNames(styles.input, customValue && styles.hidden)}\n // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n // из-за чего `.Typography--normalize` перебивает стили.\n normalize={false}\n Component=\"span\" // для <span> нормализация не нужна\n onClick={showCalendarOnInputAreaClick}\n >\n <NumberInputLike\n value={internalValue[0]}\n minValue={1}\n maxValue={31}\n length={2}\n getRootRef={daysRef}\n index={0}\n onKeyDown={handleKeyDown}\n onElementSelect={setFocusedElement}\n label={changeDayLabel}\n readOnly={readOnly}\n data-testid={dayFieldTestId}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <NumberInputLike\n value={internalValue[1]}\n minValue={1}\n maxValue={12}\n length={2}\n getRootRef={monthsRef}\n index={1}\n onElementSelect={setFocusedElement}\n onKeyDown={handleKeyDown}\n readOnly={readOnly}\n label={changeMonthLabel}\n data-testid={monthFieldTestId}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <NumberInputLike\n value={internalValue[2]}\n minValue={1}\n maxValue={275750}\n length={4}\n getRootRef={yearsRef}\n index={2}\n onElementSelect={setFocusedElement}\n readOnly={readOnly}\n label={changeYearLabel}\n onKeyDown={handleKeyDown}\n data-testid={yearFieldTestId}\n />\n {enableTime && (\n <React.Fragment>\n <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>\n <NumberInputLike\n value={internalValue[3]}\n minValue={1}\n maxValue={24}\n length={2}\n getRootRef={hoursRef}\n index={3}\n onElementSelect={setFocusedElement}\n readOnly={readOnly}\n label={changeHoursLabel}\n onKeyDown={handleKeyDown}\n data-testid={hourFieldTestId}\n />\n <InputLikeDivider>:</InputLikeDivider>\n <NumberInputLike\n value={internalValue[4]}\n minValue={1}\n maxValue={59}\n length={2}\n getRootRef={minutesRef}\n index={4}\n onElementSelect={setFocusedElement}\n readOnly={readOnly}\n label={changeMinutesLabel}\n onKeyDown={handleKeyDown}\n data-testid={minuteFieldTestId}\n />\n </React.Fragment>\n )}\n </Text>\n {customValue && (\n <Text className={styles.customValue} aria-hidden normalize={false}>\n {customValue}\n </Text>\n )}\n </div>\n {open && !disableCalendar && (\n <Popper\n targetRef={rootRef}\n offsetByMainAxis={8}\n placement={calendarPlacement}\n onPlacementChange={setCalendarPlacement}\n autoUpdateOnTargetResize\n >\n <FocusTrap\n onClose={closeCalendar}\n disabled={disableFocusTrap ?? !accessible}\n restoreFocus={restoreFocus ?? (Boolean(accessible) && handleRestoreFocus)}\n captureEscapeKeyboardEvent={false}\n mutationObserverOptions={CALENDAR_MUTATION_OBSERVER_OPTIONS}\n >\n <Calendar\n aria-label={calendarLabel}\n role=\"dialog\"\n value={value}\n onChange={onCalendarChange}\n enableTime={enableTime}\n disablePast={disablePast}\n disableFuture={disableFuture}\n shouldDisableDate={shouldDisableDate}\n onDoneButtonClick={onDoneButtonClick}\n getRootRef={calendarRef}\n doneButtonText={doneButtonText}\n DoneButton={DoneButton}\n disablePickers={disablePickers}\n changeHoursLabel={changeHoursLabel}\n changeMinutesLabel={changeMinutesLabel}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\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 {...calendarTestsProps}\n />\n </FocusTrap>\n </Popper>\n )}\n </FormField>\n );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","dateFormatter","dateTimeFormatter","isMatch","parse","startOfDay","startOfMinute","useIsomorphicLayoutEffect","Calendar","useConfigProvider","FocusTrap","FormField","IconButton","InputLikeDivider","NumberInputLike","Popper","Text","VisuallyHidden","useDateInputValue","sizeYClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","CALENDAR_MUTATION_OBSERVER_OPTIONS","childList","subtree","attributes","attributeFilter","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","valueProp","defaultValue","onChange","calendarPlacementProp","style","className","doneButtonText","DoneButton","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","accessible","calendarLabel","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","showNeighboringMonth","size","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","showCalendarButtonTestId","clearButtonTestId","id","onApply","renderCustomValue","timezone","restoreFocus","disableFocusTrap","readOnly","disableCalendarProp","ariaLabel","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","disableCalendar","updateValue","setInternalValue","getLastUpdatedValue","clearValue","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","now","Date","refs","useMemo","rootRef","calendarRef","open","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","closeCalendar","toggleCalendar","openCalendar","handleRestoreFocus","onClear","sizeY","handleRootRef","resetValueOnCloseCalendar","onCalendarChange","onDoneButtonClick","customValue","undefined","calendarPlacement","setCalendarPlacement","useState","locale","currentDateLabel","Intl","DateTimeFormat","weekday","year","month","day","format","currentDateLabelId","useId","ariaLabelId","showCalendarOnInputAreaClick","role","aria-labelledby","after","Fragment","hoverMode","label","onClick","data-testid","div","Component","aria-hidden","tabIndex","onFocus","normalize","minValue","maxValue","onKeyDown","onElementSelect","targetRef","offsetByMainAxis","placement","onPlacementChange","autoUpdateOnTargetResize","onClose","Boolean","captureEscapeKeyboardEvent","mutationObserverOptions","aria-label"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["'use client';\n\nimport * 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 { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport {\n dateFormatter,\n dateTimeFormatter,\n isMatch,\n parse,\n startOfDay,\n startOfMinute,\n} from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { NumberInputLike } from '../NumberInputLike/NumberInputLike';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { useDateInputValue } from './hooks';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n none: styles.sizeYNone,\n compact: styles.sizeYCompact,\n};\n\nexport type DateInputPropsTestsProps = {\n /**\n * Передает атрибут `data-testid` для поля ввода дня.\n */\n dayFieldTestId?: string;\n /**\n * Передает атрибут `data-testid` для поля ввода месяца.\n */\n monthFieldTestId?: string;\n /**\n * Передает атрибут `data-testid` для поля ввода года.\n */\n yearFieldTestId?: string;\n /**\n * Передает атрибут `data-testid` для поля ввода часа.\n */\n hourFieldTestId?: string;\n /**\n * Передает атрибут `data-testid` для поля ввода минут.\n */\n minuteFieldTestId?: string;\n /**\n * Передает атрибут `data-testid` для кнопки показа календаря.\n */\n showCalendarButtonTestId?: string;\n /**\n * Передает атрибут `data-testid` для кнопки очистки даты.\n */\n clearButtonTestId?: string;\n};\n\nexport interface DateInputProps\n extends Omit<\n React.InputHTMLAttributes<HTMLDivElement>,\n 'value' | 'defaultValue' | 'onChange' | 'size'\n >,\n Pick<\n CalendarProps,\n | 'disablePast'\n | 'disableFuture'\n | 'enableTime'\n | 'shouldDisableDate'\n | 'onChange'\n | 'value'\n | 'defaultValue'\n | 'doneButtonText'\n | 'DoneButton'\n | 'weekStartsOn'\n | 'disablePickers'\n | 'changeHoursLabel'\n | 'changeMinutesLabel'\n | 'prevMonthLabel'\n | 'nextMonthLabel'\n | 'changeMonthLabel'\n | 'changeYearLabel'\n | 'showNeighboringMonth'\n | 'size'\n | 'viewDate'\n | 'onHeaderChange'\n | 'onNextMonth'\n | 'onPrevMonth'\n | 'prevMonthIcon'\n | 'nextMonthIcon'\n | 'minDateTime'\n | 'maxDateTime'\n | 'renderDayContent'\n >,\n Pick<UseFocusTrapProps, 'restoreFocus'>,\n HasRootRef<HTMLDivElement>,\n Omit<FormFieldProps, 'maxHeight'>,\n DateInputPropsTestsProps {\n /**\n * Передает атрибуты `data-testid` для интерактивных элементов в календаре.\n */\n calendarTestsProps?: CalendarTestsProps;\n /**\n * Расположение календаря относительно поля ввода.\n */\n calendarPlacement?: PlacementWithAuto;\n /**\n * Автоматически закрывать календарь при изменениях.\n */\n closeOnChange?: boolean;\n /**\n * `aria-label` для календаря.\n */\n calendarLabel?: string;\n /**\n * Label для кнопки очистки. Делает доступным для ассистивных технологий.\n */\n clearFieldLabel?: string;\n /**\n * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.\n */\n showCalendarLabel?: string;\n /**\n * Отключение открытия календаря.\n */\n disableCalendar?: boolean;\n /**\n * Обработчик изменения состояния открытия календаря.\n */\n onCalendarOpenChanged?: (opened: boolean) => void;\n /**\n * `aria-label` для поля изменения дня.\n */\n changeDayLabel?: string;\n /**\n * Обработчик нажатия на кнопку `\"Done\"`. Используется совместно с флагом `enableTime`.\n */\n onApply?: (value?: Date) => void;\n /**\n * Функция для кастомного форматирования отображаемого значения даты.\n * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.\n */\n renderCustomValue?: (date: Date | undefined) => React.ReactNode;\n /**\n * Часовой пояс для отображения даты.\n */\n timezone?: string;\n /**\n * Включает режим в котором DateInput доступен\n * для ассистивных технологий.\n * В этом режиме:\n * - календарь больше не открывает при фокусе на DateInput;\n * - иконка календаря видна всегда, чтобы пользователи\n * ассистивных технологий могли открыть календарь по клику на иконку;\n * - календарь при открытии получает фокус, клавиатурный\n * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.\n */\n accessible?: boolean /* TODO [>=v8] включить по умолчанию */;\n /**\n * Позволяет отключить захват фокуса при появлении календаря.\n */\n disableFocusTrap?: UseFocusTrapProps['disabled'];\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\nconst CALENDAR_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['tabindex'],\n};\n\n/**\n * @see https://vkui.io/components/date-input\n */\nexport const DateInput = ({\n enableTime,\n shouldDisableDate,\n disableFuture,\n disablePast,\n minDateTime,\n maxDateTime,\n 'value': valueProp,\n defaultValue,\n onChange,\n 'calendarPlacement': calendarPlacementProp = 'bottom-start',\n style,\n className,\n doneButtonText,\n DoneButton,\n closeOnChange = true,\n disablePickers,\n getRootRef,\n name,\n autoFocus,\n disabled,\n accessible,\n calendarLabel = 'Календарь',\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n changeDayLabel = 'День',\n changeMonthLabel = 'Месяц',\n changeYearLabel = 'Год',\n changeHoursLabel = 'Час',\n changeMinutesLabel = 'Минута',\n clearFieldLabel = 'Очистить поле',\n showCalendarLabel = 'Показать календарь',\n showNeighboringMonth,\n size,\n viewDate,\n onHeaderChange,\n onNextMonth,\n onPrevMonth,\n prevMonthIcon,\n nextMonthIcon,\n renderDayContent,\n onCalendarOpenChanged,\n calendarTestsProps,\n dayFieldTestId,\n monthFieldTestId,\n yearFieldTestId,\n hourFieldTestId,\n minuteFieldTestId,\n showCalendarButtonTestId,\n clearButtonTestId,\n id,\n onApply,\n renderCustomValue,\n timezone,\n restoreFocus,\n disableFocusTrap,\n readOnly,\n 'disableCalendar': disableCalendarProp = false,\n 'aria-label': ariaLabel = '',\n before,\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 disableCalendar = readOnly ? true : disableCalendarProp;\n\n const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =\n useDateInputValue({\n value: valueProp,\n defaultValue,\n onChange,\n timezone,\n });\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 const now = new Date();\n updateValue(\n parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),\n );\n }\n },\n [enableTime, maxElement, updateValue, 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 internalValue,\n handleKeyDown,\n setFocusedElement,\n handleFieldEnter,\n clear,\n removeFocusFromField,\n closeCalendar,\n toggleCalendar,\n openCalendar,\n handleRestoreFocus,\n } = useDateInput({\n maxElement,\n refs,\n autoFocus,\n disabled: disabled || readOnly,\n elementsConfig,\n onClear: clearValue,\n onInternalValueChange,\n getInternalValue,\n value,\n onCalendarOpenChanged,\n accessible,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const handleRootRef = useExternRef(rootRef, getRootRef);\n\n useIsomorphicLayoutEffect(\n function resetValueOnCloseCalendar() {\n if (!open) {\n setInternalValue(getLastUpdatedValue());\n }\n },\n [open, getLastUpdatedValue],\n );\n\n const onCalendarChange = React.useCallback(\n (value?: Date | undefined) => {\n if (!value) {\n return;\n }\n if (enableTime) {\n setInternalValue(value);\n return;\n }\n updateValue(value);\n if (closeOnChange) {\n removeFocusFromField();\n }\n },\n [enableTime, updateValue, closeOnChange, setInternalValue, removeFocusFromField],\n );\n\n const onDoneButtonClick = React.useCallback(() => {\n if (!value) {\n return;\n }\n const newValue = updateValue(value);\n onApply?.(newValue);\n removeFocusFromField();\n }, [onApply, removeFocusFromField, updateValue, value]);\n\n const customValue = React.useMemo(\n () => !open && renderCustomValue?.(value || undefined),\n [open, renderCustomValue, value],\n );\n\n // при переключении месяцев высота календаря может меняться,\n // чтобы календарь не прыгал при переключении месяцев каждый раз на\n // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n // на ней, пока помещается.\n const [calendarPlacement, setCalendarPlacement] =\n React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n const { locale } = useConfigProvider();\n const currentDateLabel = value\n ? new Intl.DateTimeFormat(locale, {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n }).format(value)\n : null;\n const currentDateLabelId = React.useId();\n const ariaLabelId = React.useId();\n\n const showCalendarOnInputAreaClick = React.useCallback(() => {\n handleFieldEnter();\n if (accessible) {\n openCalendar();\n }\n }, [handleFieldEnter, openCalendar, accessible]);\n\n const showCalendarButton = !disableCalendar && (accessible || (!accessible && !value));\n const showClearButton = value && !readOnly;\n\n return (\n <FormField\n style={style}\n className={classNames(\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n !!before && styles.hasBefore,\n (showCalendarButton || showClearButton) && styles.hasAfter,\n className,\n )}\n getRootRef={handleRootRef}\n role=\"group\"\n aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}\n before={before}\n after={\n <React.Fragment>\n {showCalendarButton ? (\n <IconButton\n hoverMode=\"opacity\"\n label={showCalendarLabel}\n onClick={toggleCalendar}\n data-testid={showCalendarButtonTestId}\n >\n <Icon20CalendarOutline />\n </IconButton>\n ) : null}\n {showClearButton ? (\n <IconButton\n hoverMode=\"opacity\"\n label={clearFieldLabel}\n onClick={clear}\n data-testid={clearButtonTestId}\n >\n <Icon16Clear />\n </IconButton>\n ) : null}\n </React.Fragment>\n }\n disabled={disabled}\n {...props}\n >\n <div className={styles.wrapper}>\n {ariaLabel && <VisuallyHidden id={ariaLabelId}>{ariaLabel}</VisuallyHidden>}\n {currentDateLabel && (\n <VisuallyHidden id={currentDateLabelId}>{currentDateLabel}</VisuallyHidden>\n )}\n <VisuallyHidden\n id={id}\n Component=\"input\"\n readOnly\n aria-hidden\n tabIndex={readOnly ? 0 : -1}\n name={name}\n value={\n value\n ? enableTime\n ? dateTimeFormatter.format(value)\n : dateFormatter.format(value)\n : ''\n }\n onFocus={handleFieldEnter}\n />\n <Text\n className={classNames(styles.input, customValue && styles.hidden)}\n // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n // из-за чего `.Typography--normalize` перебивает стили.\n normalize={false}\n Component=\"span\" // для <span> нормализация не нужна\n onClick={showCalendarOnInputAreaClick}\n >\n <NumberInputLike\n value={internalValue[0]}\n minValue={1}\n maxValue={31}\n length={2}\n getRootRef={daysRef}\n index={0}\n onKeyDown={handleKeyDown}\n onElementSelect={setFocusedElement}\n label={changeDayLabel}\n readOnly={readOnly}\n data-testid={dayFieldTestId}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <NumberInputLike\n value={internalValue[1]}\n minValue={1}\n maxValue={12}\n length={2}\n getRootRef={monthsRef}\n index={1}\n onElementSelect={setFocusedElement}\n onKeyDown={handleKeyDown}\n readOnly={readOnly}\n label={changeMonthLabel}\n data-testid={monthFieldTestId}\n />\n <InputLikeDivider>.</InputLikeDivider>\n <NumberInputLike\n value={internalValue[2]}\n minValue={1}\n maxValue={275750}\n length={4}\n getRootRef={yearsRef}\n index={2}\n onElementSelect={setFocusedElement}\n readOnly={readOnly}\n label={changeYearLabel}\n onKeyDown={handleKeyDown}\n data-testid={yearFieldTestId}\n />\n {enableTime && (\n <React.Fragment>\n <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>\n <NumberInputLike\n value={internalValue[3]}\n minValue={1}\n maxValue={24}\n length={2}\n getRootRef={hoursRef}\n index={3}\n onElementSelect={setFocusedElement}\n readOnly={readOnly}\n label={changeHoursLabel}\n onKeyDown={handleKeyDown}\n data-testid={hourFieldTestId}\n />\n <InputLikeDivider>:</InputLikeDivider>\n <NumberInputLike\n value={internalValue[4]}\n minValue={1}\n maxValue={59}\n length={2}\n getRootRef={minutesRef}\n index={4}\n onElementSelect={setFocusedElement}\n readOnly={readOnly}\n label={changeMinutesLabel}\n onKeyDown={handleKeyDown}\n data-testid={minuteFieldTestId}\n />\n </React.Fragment>\n )}\n </Text>\n {customValue && (\n <Text className={styles.customValue} aria-hidden normalize={false}>\n {customValue}\n </Text>\n )}\n </div>\n {open && !disableCalendar && (\n <Popper\n targetRef={rootRef}\n offsetByMainAxis={8}\n placement={calendarPlacement}\n onPlacementChange={setCalendarPlacement}\n autoUpdateOnTargetResize\n >\n <FocusTrap\n onClose={closeCalendar}\n disabled={disableFocusTrap ?? !accessible}\n restoreFocus={restoreFocus ?? (Boolean(accessible) && handleRestoreFocus)}\n captureEscapeKeyboardEvent={false}\n mutationObserverOptions={CALENDAR_MUTATION_OBSERVER_OPTIONS}\n >\n <Calendar\n aria-label={calendarLabel}\n role=\"dialog\"\n value={value}\n onChange={onCalendarChange}\n enableTime={enableTime}\n disablePast={disablePast}\n disableFuture={disableFuture}\n shouldDisableDate={shouldDisableDate}\n onDoneButtonClick={onDoneButtonClick}\n getRootRef={calendarRef}\n doneButtonText={doneButtonText}\n DoneButton={DoneButton}\n disablePickers={disablePickers}\n changeHoursLabel={changeHoursLabel}\n changeMinutesLabel={changeMinutesLabel}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\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 {...calendarTestsProps}\n />\n </FocusTrap>\n </Popper>\n )}\n </FormField>\n );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","dateFormatter","dateTimeFormatter","isMatch","parse","startOfDay","startOfMinute","useIsomorphicLayoutEffect","Calendar","useConfigProvider","FocusTrap","FormField","IconButton","InputLikeDivider","NumberInputLike","Popper","Text","VisuallyHidden","useDateInputValue","sizeYClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","CALENDAR_MUTATION_OBSERVER_OPTIONS","childList","subtree","attributes","attributeFilter","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","valueProp","defaultValue","onChange","calendarPlacementProp","style","className","doneButtonText","DoneButton","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","accessible","calendarLabel","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","showNeighboringMonth","size","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","showCalendarButtonTestId","clearButtonTestId","id","onApply","renderCustomValue","timezone","restoreFocus","disableFocusTrap","readOnly","disableCalendarProp","ariaLabel","before","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","disableCalendar","updateValue","setInternalValue","getLastUpdatedValue","clearValue","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","now","Date","refs","useMemo","rootRef","calendarRef","open","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","closeCalendar","toggleCalendar","openCalendar","handleRestoreFocus","onClear","sizeY","handleRootRef","resetValueOnCloseCalendar","onCalendarChange","onDoneButtonClick","customValue","undefined","calendarPlacement","setCalendarPlacement","useState","locale","currentDateLabel","Intl","DateTimeFormat","weekday","year","month","day","format","currentDateLabelId","useId","ariaLabelId","showCalendarOnInputAreaClick","showCalendarButton","showClearButton","role","aria-labelledby","after","Fragment","hoverMode","label","onClick","data-testid","div","Component","aria-hidden","tabIndex","onFocus","normalize","minValue","maxValue","onKeyDown","onElementSelect","targetRef","offsetByMainAxis","placement","onPlacementChange","autoUpdateOnTargetResize","onClose","Boolean","captureEscapeKeyboardEvent","mutationObserverOptions","aria-label"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,qBAAqB,QAAQ,mBAAmB;AACtE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,QAAQ,8BAA2B;AAExD,SACEC,aAAa,EACbC,iBAAiB,EACjBC,OAAO,EACPC,KAAK,EACLC,UAAU,EACVC,aAAa,QACR,oBAAiB;AAExB,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,QAAQ,QAAqD,0BAAuB;AAC7F,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,SAAS,QAAQ,4BAAyB;AACnD,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,gBAAgB,QAAQ,mCAAgC;AACjE,SAASC,eAAe,QAAQ,wCAAqC;AACrE,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,iBAAiB,QAAQ,aAAU;AAI5C,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AA2IA,MAAMC,iBAAiB,CAACC;IACtB,IAAIC,SAAS;IACb,IAAIC,MAAM;IACV,IAAIC,MAAM;IAEV,OAAQH;QACN,KAAK;YACHG,MAAM;YACN;QACF,KAAK;YACHA,MAAM;YACN;QACF,KAAK;YACHA,MAAM;YACND,MAAM;YACND,SAAS;YACT;QACF,KAAK;YACHE,MAAM;YACN;QACF,KAAK;YACHA,MAAM;YACN;IACJ;IAEA,OAAO;QAAEF;QAAQC;QAAKC;IAAI;AAC5B;AAEA,MAAMC,mBAAmB,CAACC;IACxB,MAAMC,WAAW;QAAC;QAAI;QAAI;QAAI;QAAI;KAAG;IACrC,IAAID,OAAO;QACTC,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMG,OAAO,IAAIC,QAAQ,CAAC,GAAG;QAClDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMK,QAAQ,KAAK,GAAGD,QAAQ,CAAC,GAAG;QACvDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMM,WAAW,IAAIF,QAAQ,CAAC,GAAG;QACtDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMO,QAAQ,IAAIH,QAAQ,CAAC,GAAG;QACnDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMQ,UAAU,IAAIJ,QAAQ,CAAC,GAAG;IACvD;IACA,OAAOH;AACT;AAEA,MAAMQ,qCAA2D;IAC/DC,WAAW;IACXC,SAAS;IACTC,YAAY;IACZC,iBAAiB;QAAC;KAAW;AAC/B;AAEA;;CAEC,GACD,OAAO,MAAMC,YAAY;QAAC,EACxBC,UAAU,EACVC,iBAAiB,EACjBC,aAAa,EACbC,WAAW,EACXC,WAAW,EACXC,WAAW,EACX,SAASC,SAAS,EAClBC,YAAY,EACZC,QAAQ,EACR,qBAAqBC,wBAAwB,cAAc,EAC3DC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,gBAAgB,IAAI,EACpBC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,UAAU,EACVC,gBAAgB,WAAW,EAC3BC,iBAAiB,kBAAkB,EACnCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,MAAM,EACvBC,mBAAmB,OAAO,EAC1BC,kBAAkB,KAAK,EACvBC,mBAAmB,KAAK,EACxBC,qBAAqB,QAAQ,EAC7BC,kBAAkB,eAAe,EACjCC,oBAAoB,oBAAoB,EACxCC,oBAAoB,EACpBC,IAAI,EACJC,QAAQ,EACRC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,aAAa,EACbC,aAAa,EACbC,gBAAgB,EAChBC,qBAAqB,EACrBC,kBAAkB,EAClBC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,eAAe,EACfC,iBAAiB,EACjBC,wBAAwB,EACxBC,iBAAiB,EACjBC,EAAE,EACFC,OAAO,EACPC,iBAAiB,EACjBC,QAAQ,EACRC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,EACR,mBAAmBC,sBAAsB,KAAK,EAC9C,cAAcC,YAAY,EAAE,EAC5BC,MAAM,EAES,WADZC;QA3DH3D;QACAC;QACAC;QACAC;QACAC;QACAC;QACA;QACAE;QACAC;QACA;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACA;QACA;QACAG;;IAGA,MAAME,UAAU7G,MAAM8G,MAAM,CAAkB;IAC9C,MAAMC,YAAY/G,MAAM8G,MAAM,CAAkB;IAChD,MAAME,WAAWhH,MAAM8G,MAAM,CAAkB;IAC/C,MAAMG,WAAWjH,MAAM8G,MAAM,CAAkB;IAC/C,MAAMI,aAAalH,MAAM8G,MAAM,CAAkB;IAEjD,MAAMK,kBAAkBX,WAAW,OAAOC;IAE1C,MAAM,EAAEvE,KAAK,EAAEkF,WAAW,EAAEC,gBAAgB,EAAEC,mBAAmB,EAAEC,UAAU,EAAE,GAC7E/F,kBAAkB;QAChBU,OAAOqB;QACPC;QACAC;QACA4C;IACF;IAEF,MAAMmB,aAAavE,aAAa,IAAI;IAEpC,MAAMwE,wBAAwBzH,MAAM0H,WAAW,CAC7C,CAACC;QACC,IAAK,IAAIC,IAAI,GAAGA,KAAKJ,YAAYI,KAAK,EAAG;YACvC,IAAID,aAAa,CAACC,EAAE,CAAC9F,MAAM,GAAGF,eAAegG,GAAG9F,MAAM,EAAE;gBACtD;YACF;QACF;QAEA,IAAI+F,iBAAiB,GAAGF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,EAAE;QAClF,IAAIG,OAAO;QACX,IAAI7E,YAAY;YACd4E,kBAAkB,CAAC,CAAC,EAAEF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,EAAE;YAC5DG,QAAQ;QACV;QAEA,IAAIrH,QAAQoH,gBAAgBC,OAAO;YACjC,MAAMC,MAAM,IAAIC;YAChBZ,YACE1G,MAAMmH,gBAAgBC,MAAM5F,kBAAAA,mBAAAA,QAAUe,aAAarC,cAAcmH,OAAOpH,WAAWoH;QAEvF;IACF,GACA;QAAC9E;QAAYuE;QAAYJ;QAAalF;KAAM;IAG9C,MAAM+F,OAAOjI,MAAMkI,OAAO,CACxB,IAAM;YAACrB;YAASE;YAAWC;YAAUC;YAAUC;SAAW,EAC1D;QAACL;QAASE;QAAWC;QAAUC;QAAUC;KAAW;IAGtD,MAAM,EACJiB,OAAO,EACPC,WAAW,EACXC,IAAI,EACJV,aAAa,EACbW,aAAa,EACbC,iBAAiB,EACjBC,gBAAgB,EAChBC,KAAK,EACLC,oBAAoB,EACpBC,aAAa,EACbC,cAAc,EACdC,YAAY,EACZC,kBAAkB,EACnB,GAAGzI,aAAa;QACfmH;QACAS;QACA9D;QACAC,UAAUA,YAAYoC;QACtB5E;QACAmH,SAASxB;QACTE;QACAxF;QACAC;QACAuD;QACApB;IACF;IAEA,MAAM,EAAE2E,QAAQ,MAAM,EAAE,GAAG5I;IAE3B,MAAM6I,gBAAgB3I,aAAa6H,SAASlE;IAE5CpD,0BACE,SAASqI;QACP,IAAI,CAACb,MAAM;YACThB,iBAAiBC;QACnB;IACF,GACA;QAACe;QAAMf;KAAoB;IAG7B,MAAM6B,mBAAmBnJ,MAAM0H,WAAW,CACxC,CAACxF;QACC,IAAI,CAACA,OAAO;YACV;QACF;QACA,IAAIe,YAAY;YACdoE,iBAAiBnF;YACjB;QACF;QACAkF,YAAYlF;QACZ,IAAI6B,eAAe;YACjB2E;QACF;IACF,GACA;QAACzF;QAAYmE;QAAarD;QAAesD;QAAkBqB;KAAqB;IAGlF,MAAMU,oBAAoBpJ,MAAM0H,WAAW,CAAC;QAC1C,IAAI,CAACxF,OAAO;YACV;QACF;QACA,MAAMC,WAAWiF,YAAYlF;QAC7BiE,oBAAAA,8BAAAA,QAAUhE;QACVuG;IACF,GAAG;QAACvC;QAASuC;QAAsBtB;QAAalF;KAAM;IAEtD,MAAMmH,cAAcrJ,MAAMkI,OAAO,CAC/B,IAAM,CAACG,SAAQjC,8BAAAA,wCAAAA,kBAAoBlE,SAASoH,aAC5C;QAACjB;QAAMjC;QAAmBlE;KAAM;IAGlC,4DAA4D;IAC5D,mEAAmE;IACnE,4EAA4E;IAC5E,2BAA2B;IAC3B,MAAM,CAACqH,mBAAmBC,qBAAqB,GAC7CxJ,MAAMyJ,QAAQ,CAAoB/F;IAEpC,MAAM,EAAEgG,MAAM,EAAE,GAAG3I;IACnB,MAAM4I,mBAAmBzH,QACrB,IAAI0H,KAAKC,cAAc,CAACH,QAAQ;QAC9BI,SAAS;QACTC,MAAM;QACNC,OAAO;QACPC,KAAK;IACP,GAAGC,MAAM,CAAChI,SACV;IACJ,MAAMiI,qBAAqBnK,MAAMoK,KAAK;IACtC,MAAMC,cAAcrK,MAAMoK,KAAK;IAE/B,MAAME,+BAA+BtK,MAAM0H,WAAW,CAAC;QACrDc;QACA,IAAInE,YAAY;YACdwE;QACF;IACF,GAAG;QAACL;QAAkBK;QAAcxE;KAAW;IAE/C,MAAMkG,qBAAqB,CAACpD,mBAAoB9C,CAAAA,cAAe,CAACA,cAAc,CAACnC,KAAK;IACpF,MAAMsI,kBAAkBtI,SAAS,CAACsE;IAElC,qBACE,MAACvF;QACC0C,OAAOA;QACPC,WAAWzD,WACT6I,UAAU,aAAavH,eAAe,CAACuH,MAAM,EAC7C,CAAC,CAACrC,sCACF,AAAC4D,CAAAA,sBAAsBC,eAAc,gCACrC5G;QAEFK,YAAYgF;QACZwB,MAAK;QACLC,mBAAiB,GAAGL,YAAY,CAAC,EAAEF,oBAAoB;QACvDxD,QAAQA;QACRgE,qBACE,MAAC3K,MAAM4K,QAAQ;;gBACZL,mCACC,KAACrJ;oBACC2J,WAAU;oBACVC,OAAO/F;oBACPgG,SAASnC;oBACToC,eAAahF;8BAEb,cAAA,KAAC9F;qBAED;gBACHsK,gCACC,KAACtJ;oBACC2J,WAAU;oBACVC,OAAOhG;oBACPiG,SAAStC;oBACTuC,eAAa/E;8BAEb,cAAA,KAAChG;qBAED;;;QAGRmE,UAAUA;OACNwC;;0BAEJ,MAACqE;gBAAIrH,SAAS;;oBACX8C,2BAAa,KAACnF;wBAAe2E,IAAImE;kCAAc3D;;oBAC/CiD,kCACC,KAACpI;wBAAe2E,IAAIiE;kCAAqBR;;kCAE3C,KAACpI;wBACC2E,IAAIA;wBACJgF,WAAU;wBACV1E,QAAQ;wBACR2E,aAAW;wBACXC,UAAU5E,WAAW,IAAI,CAAC;wBAC1BtC,MAAMA;wBACNhC,OACEA,QACIe,aACEzC,kBAAkB0J,MAAM,CAAChI,SACzB3B,cAAc2J,MAAM,CAAChI,SACvB;wBAENmJ,SAAS7C;;kCAEX,MAAClH;wBACCsC,WAAWzD,mCAAyBkJ;wBACpC,2FAA2F;wBAC3F,wDAAwD;wBACxDiC,WAAW;wBACXJ,WAAU;wBACVH,SAAST;;0CAET,KAAClJ;gCACCc,OAAOyF,aAAa,CAAC,EAAE;gCACvB4D,UAAU;gCACVC,UAAU;gCACV1J,QAAQ;gCACRmC,YAAY4C;gCACZhF,OAAO;gCACP4J,WAAWnD;gCACXoD,iBAAiBnD;gCACjBuC,OAAOrG;gCACP+B,UAAUA;gCACVwE,eAAarF;;0CAEf,KAACxE;0CAAiB;;0CAClB,KAACC;gCACCc,OAAOyF,aAAa,CAAC,EAAE;gCACvB4D,UAAU;gCACVC,UAAU;gCACV1J,QAAQ;gCACRmC,YAAY8C;gCACZlF,OAAO;gCACP6J,iBAAiBnD;gCACjBkD,WAAWnD;gCACX9B,UAAUA;gCACVsE,OAAOpG;gCACPsG,eAAapF;;0CAEf,KAACzE;0CAAiB;;0CAClB,KAACC;gCACCc,OAAOyF,aAAa,CAAC,EAAE;gCACvB4D,UAAU;gCACVC,UAAU;gCACV1J,QAAQ;gCACRmC,YAAY+C;gCACZnF,OAAO;gCACP6J,iBAAiBnD;gCACjB/B,UAAUA;gCACVsE,OAAOnG;gCACP8G,WAAWnD;gCACX0C,eAAanF;;4BAEd5C,4BACC,MAACjD,MAAM4K,QAAQ;;kDACb,KAACzJ;wCAAiByC,SAAS;kDAA2B;;kDACtD,KAACxC;wCACCc,OAAOyF,aAAa,CAAC,EAAE;wCACvB4D,UAAU;wCACVC,UAAU;wCACV1J,QAAQ;wCACRmC,YAAYgD;wCACZpF,OAAO;wCACP6J,iBAAiBnD;wCACjB/B,UAAUA;wCACVsE,OAAOlG;wCACP6G,WAAWnD;wCACX0C,eAAalF;;kDAEf,KAAC3E;kDAAiB;;kDAClB,KAACC;wCACCc,OAAOyF,aAAa,CAAC,EAAE;wCACvB4D,UAAU;wCACVC,UAAU;wCACV1J,QAAQ;wCACRmC,YAAYiD;wCACZrF,OAAO;wCACP6J,iBAAiBnD;wCACjB/B,UAAUA;wCACVsE,OAAOjG;wCACP4G,WAAWnD;wCACX0C,eAAajF;;;;;;oBAKpBsD,6BACC,KAAC/H;wBAAKsC,SAAS;wBAAsBuH,aAAW;wBAACG,WAAW;kCACzDjC;;;;YAINhB,QAAQ,CAAClB,iCACR,KAAC9F;gBACCsK,WAAWxD;gBACXyD,kBAAkB;gBAClBC,WAAWtC;gBACXuC,mBAAmBtC;gBACnBuC,wBAAwB;0BAExB,cAAA,KAAC/K;oBACCgL,SAASrD;oBACTvE,UAAUmC,6BAAAA,8BAAAA,mBAAoB,CAAClC;oBAC/BiC,cAAcA,yBAAAA,0BAAAA,eAAiB2F,QAAQ5H,eAAeyE;oBACtDoD,4BAA4B;oBAC5BC,yBAAyBxJ;8BAEzB,cAAA,KAAC7B;wBACCsL,cAAY9H;wBACZmG,MAAK;wBACLvI,OAAOA;wBACPuB,UAAU0F;wBACVlG,YAAYA;wBACZG,aAAaA;wBACbD,eAAeA;wBACfD,mBAAmBA;wBACnBkG,mBAAmBA;wBACnBnF,YAAYmE;wBACZvE,gBAAgBA;wBAChBC,YAAYA;wBACZE,gBAAgBA;wBAChBY,kBAAkBA;wBAClBC,oBAAoBA;wBACpBN,gBAAgBA;wBAChBC,gBAAgBA;wBAChBE,kBAAkBA;wBAClBC,iBAAiBA;wBACjBK,sBAAsBA;wBACtBQ,kBAAkBA;wBAClBP,MAAMA;wBACNC,UAAUA;wBACVC,gBAAgBA;wBAChBC,aAAaA;wBACbC,aAAaA;wBACbC,eAAeA;wBACfC,eAAeA;wBACflC,aAAaA;wBACbC,aAAaA;uBACToC;;;;;AAOlB,EAAE"}
|
|
@@ -112,6 +112,6 @@ export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTML
|
|
|
112
112
|
/**
|
|
113
113
|
* @see https://vkui.io/components/date-range-input
|
|
114
114
|
*/
|
|
115
|
-
export declare const DateRangeInput: ({ shouldDisableDate, disableFuture, disablePast, "value": valueProp, defaultValue, onChange, "calendarPlacement": calendarPlacementProp, style, className, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, disableFocusTrap, restoreFocus, calendarLabel, prevMonthLabel, nextMonthLabel, changeMonthLabel, changeYearLabel, changeStartDayLabel, changeStartMonthLabel, changeStartYearLabel, changeEndDayLabel, changeEndMonthLabel, changeEndYearLabel, clearFieldLabel, showCalendarLabel, "aria-label": ariaLabel, prevMonthIcon, nextMonthIcon, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, clearButtonTestId, showCalendarButtonTestId, id, accessible, readOnly, "disableCalendar": disableCalendarProp, ...props }: DateRangeInputProps) => React.ReactNode;
|
|
115
|
+
export declare const DateRangeInput: ({ shouldDisableDate, disableFuture, disablePast, "value": valueProp, defaultValue, onChange, "calendarPlacement": calendarPlacementProp, style, className, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, disableFocusTrap, restoreFocus, calendarLabel, prevMonthLabel, nextMonthLabel, changeMonthLabel, changeYearLabel, changeStartDayLabel, changeStartMonthLabel, changeStartYearLabel, changeEndDayLabel, changeEndMonthLabel, changeEndYearLabel, clearFieldLabel, showCalendarLabel, "aria-label": ariaLabel, prevMonthIcon, nextMonthIcon, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, clearButtonTestId, showCalendarButtonTestId, id, accessible, readOnly, "disableCalendar": disableCalendarProp, before, ...props }: DateRangeInputProps) => React.ReactNode;
|
|
116
116
|
export {};
|
|
117
117
|
//# sourceMappingURL=DateRangeInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAE7B,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAE7B,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAcxE,KAAK,cAAc,GAAG;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,mBAAmB,CAAC,EAAE,cAAc,CAAC;IACrC;;OAEG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC;IACnC;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,EAC5F,IAAI,CACF,kBAAkB,EAChB,aAAa,GACb,eAAe,GACf,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,kBAAkB,CACrB,EACD,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC,EACvC,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,wBAAwB;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,uBAAuB,CAAC;IAC7C;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACjD;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAiDD;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,oxBA+C5B,mBAAmB,KAAG,KAAK,CAAC,SA2V9B,CAAC"}
|
|
@@ -22,8 +22,8 @@ import { Popper } from "../Popper/Popper.js";
|
|
|
22
22
|
import { Text } from "../Typography/Text/Text.js";
|
|
23
23
|
import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
|
|
24
24
|
const sizeYClassNames = {
|
|
25
|
-
none: "
|
|
26
|
-
compact: "
|
|
25
|
+
none: "vkuiDateInput__sizeYNone",
|
|
26
|
+
compact: "vkuiDateInput__sizeYCompact"
|
|
27
27
|
};
|
|
28
28
|
const elementsConfig = (index)=>{
|
|
29
29
|
let length = 2;
|
|
@@ -83,7 +83,7 @@ const CALENDAR_MUTATION_OBSERVER_OPTIONS = {
|
|
|
83
83
|
/**
|
|
84
84
|
* @see https://vkui.io/components/date-range-input
|
|
85
85
|
*/ export const DateRangeInput = (_param)=>{
|
|
86
|
-
var { shouldDisableDate, disableFuture, disablePast, 'value': valueProp, defaultValue, onChange, 'calendarPlacement': calendarPlacementProp = 'bottom-start', style, className, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, disableFocusTrap, restoreFocus, calendarLabel = 'Календарь', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Месяц', changeYearLabel = 'Год', changeStartDayLabel = 'День начала', changeStartMonthLabel = 'Месяц начала', changeStartYearLabel = 'Год начала', changeEndDayLabel = 'День окончания', changeEndMonthLabel = 'Месяц окончания', changeEndYearLabel = 'Год окончания', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', 'aria-label': ariaLabel = '', prevMonthIcon, nextMonthIcon, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, clearButtonTestId, showCalendarButtonTestId, id, accessible, readOnly, 'disableCalendar': disableCalendarProp = false } = _param, props = _object_without_properties(_param, [
|
|
86
|
+
var { shouldDisableDate, disableFuture, disablePast, 'value': valueProp, defaultValue, onChange, 'calendarPlacement': calendarPlacementProp = 'bottom-start', style, className, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, disableFocusTrap, restoreFocus, calendarLabel = 'Календарь', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Месяц', changeYearLabel = 'Год', changeStartDayLabel = 'День начала', changeStartMonthLabel = 'Месяц начала', changeStartYearLabel = 'Год начала', changeEndDayLabel = 'День окончания', changeEndMonthLabel = 'Месяц окончания', changeEndYearLabel = 'Год окончания', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', 'aria-label': ariaLabel = '', prevMonthIcon, nextMonthIcon, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, clearButtonTestId, showCalendarButtonTestId, id, accessible, readOnly, 'disableCalendar': disableCalendarProp = false, before } = _param, props = _object_without_properties(_param, [
|
|
87
87
|
"shouldDisableDate",
|
|
88
88
|
"disableFuture",
|
|
89
89
|
"disablePast",
|
|
@@ -127,7 +127,8 @@ const CALENDAR_MUTATION_OBSERVER_OPTIONS = {
|
|
|
127
127
|
"id",
|
|
128
128
|
"accessible",
|
|
129
129
|
"readOnly",
|
|
130
|
-
'disableCalendar'
|
|
130
|
+
'disableCalendar',
|
|
131
|
+
"before"
|
|
131
132
|
]);
|
|
132
133
|
const daysStartRef = React.useRef(null);
|
|
133
134
|
const monthsStartRef = React.useRef(null);
|
|
@@ -271,22 +272,25 @@ const CALENDAR_MUTATION_OBSERVER_OPTIONS = {
|
|
|
271
272
|
openCalendar,
|
|
272
273
|
accessible
|
|
273
274
|
]);
|
|
275
|
+
const showCalendarButton = !disableCalendar && (accessible || !accessible && !value);
|
|
276
|
+
const showClearButton = value && !readOnly;
|
|
274
277
|
return /*#__PURE__*/ _jsxs(FormField, _object_spread_props(_object_spread({
|
|
275
278
|
style: style,
|
|
276
|
-
className: classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className),
|
|
279
|
+
className: classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], !!before && "vkuiDateInput__hasBefore", (showCalendarButton || showClearButton) && "vkuiDateInput__hasAfter", className),
|
|
277
280
|
getRootRef: handleRootRef,
|
|
278
281
|
role: "group",
|
|
279
282
|
"aria-labelledby": `${ariaLabelId} ${currentDateLabelId}`,
|
|
283
|
+
before: before,
|
|
280
284
|
after: /*#__PURE__*/ _jsxs(_Fragment, {
|
|
281
285
|
children: [
|
|
282
|
-
|
|
286
|
+
showCalendarButton ? /*#__PURE__*/ _jsx(IconButton, {
|
|
283
287
|
hoverMode: "opacity",
|
|
284
288
|
label: showCalendarLabel,
|
|
285
289
|
onClick: toggleCalendar,
|
|
286
290
|
"data-testid": showCalendarButtonTestId,
|
|
287
291
|
children: /*#__PURE__*/ _jsx(Icon20CalendarOutline, {})
|
|
288
292
|
}) : null,
|
|
289
|
-
|
|
293
|
+
showClearButton ? /*#__PURE__*/ _jsx(IconButton, {
|
|
290
294
|
hoverMode: "opacity",
|
|
291
295
|
label: clearFieldLabel,
|
|
292
296
|
onClick: clear,
|