npm - @vkontakte/vkui - Versions diffs - 7.3.8 → 7.4.1 - Mend

@vkontakte/vkui 7.3.8 → 7.4.1

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

Files changed (357) hide show

package/dist/components/CalendarRange/CalendarRange.js CHANGED Viewed

@@ -4,15 +4,14 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { addMonths, endOfDay, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, startOfDay, subMonths } from "date-fns";
+import { addMonths, endOfDay, isAfter, isBefore, isSameDay, isWithinInterval, startOfDay, subMonths } from "date-fns";
 import { useCalendar } from "../../hooks/useCalendar.js";
 import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
-import { Keys, pressedKey } from "../../lib/accessibility.js";
-import { isFirstDay, isLastDay, navigateDate, NAVIGATION_KEYS } from "../../lib/calendar.js";
-import { isHTMLElement } from "../../lib/dom.js";
+import { isFirstDay, isLastDay } from "../../lib/calendar.js";
 import { CalendarDays } from "../CalendarDays/CalendarDays.js";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
+import { useCalendarKeyboardNavigation, useIsDayFocusable } from "./utils.js";
 const getIsDaySelected = (day, value)=>{
     if (!(value === null || value === void 0 ? void 0 : value[0]) || !value[1]) {
         return false;
@@ -25,8 +24,8 @@ const getIsDaySelected = (day, value)=>{
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */ export const CalendarRange = (_param)=>{
-    var { value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef } = _param, props = _object_without_properties(_param, [
-        "value",
+    var { 'value': valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', 'aria-label': ariaLabel = 'Календарь', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef } = _param, props = _object_without_properties(_param, [
+        'value',
         "defaultValue",
         "onChange",
         "disablePast",
@@ -38,7 +37,7 @@ const getIsDaySelected = (day, value)=>{
         "nextMonthLabel",
         "changeMonthLabel",
         "changeYearLabel",
-        "changeDayLabel",
+        'aria-label',
         "prevMonthIcon",
         "nextMonthIcon",
         "listenDayChangesForUpdate",
@@ -56,7 +55,7 @@ const getIsDaySelected = (day, value)=>{
         defaultValue,
         onChange: _onChange
     });
-    const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay, isMonthDisabled, isYearDisabled } = useCalendar({
+    const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, isMonthDisabled, isYearDisabled } = useCalendar({
         value,
         disableFuture,
         disablePast,
@@ -64,29 +63,16 @@ const getIsDaySelected = (day, value)=>{
     });
     const [hintedDate, setHintedDate] = React.useState();
     const secondViewDate = addMonths(viewDate, 1);
-    const handleKeyDown = React.useCallback((event)=>{
-        const key = pressedKey(event);
-        if (key && NAVIGATION_KEYS.includes(key)) {
-            event.preventDefault();
-            const newFocusedDay = navigateDate(focusedDay !== null && focusedDay !== void 0 ? focusedDay : value === null || value === void 0 ? void 0 : value[1], key);
-            if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate) && !isSameMonth(newFocusedDay, addMonths(viewDate, 1))) {
-                setViewDate(newFocusedDay);
-            }
-            setFocusedDay(newFocusedDay);
-            return;
-        }
-        if ((key === Keys.ENTER || key === Keys.SPACE) && isHTMLElement(event.target)) {
-            var _event_target_click, _event_target;
-            event.preventDefault();
-            (_event_target_click = (_event_target = event.target).click) === null || _event_target_click === void 0 ? void 0 : _event_target_click.call(_event_target);
-        }
-    }, [
+    const { focusableDayOnFirstCalendar, focusableDayOnSecondCalendar, handleFirstCalendarKeyDown, handleSecondCalendarKeyDown, handleDayFocus } = useCalendarKeyboardNavigation({
         focusedDay,
         setFocusedDay,
-        setViewDate,
         value,
-        viewDate
-    ]);
+        viewDates: [
+            viewDate,
+            secondViewDate
+        ],
+        setViewDate
+    });
     const getNewValue = React.useCallback((date)=>{
         const isValueEmpty = !value || value[0] === null && value[1] === null;
         const isRangeSelected = value && !!value[0] && !!value[1];
@@ -155,7 +141,34 @@ const getIsDaySelected = (day, value)=>{
     const onRightPartViewDateChange = React.useCallback((newDate)=>setViewDate(subMonths(newDate, 1)), [
         setViewDate
     ]);
-    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, props), {
+    const isDayFocusableInFirstCalendar = useIsDayFocusable({
+        value,
+        focusableDayOnFirstCalendar,
+        focusableDayOnSecondCalendar,
+        viewDate,
+        isDayActive
+    });
+    const isDayFocusableInSecondCalendar = useIsDayFocusable({
+        value,
+        focusableDayOnFirstCalendar,
+        focusableDayOnSecondCalendar,
+        viewDate: secondViewDate,
+        isDayActive
+    });
+    const onDayFocus = React.useCallback((date)=>{
+        if (focusedDay && isSameDay(focusedDay, date)) {
+            return;
+        }
+        setFocusedDay(date);
+        handleDayFocus(date);
+    }, [
+        focusedDay,
+        handleDayFocus,
+        setFocusedDay
+    ]);
+    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
+        "aria-label": ariaLabel
+    }, props), {
         baseClassName: "vkuiCalendarRange__host",
         getRootRef: getRootRef,
         children: [
@@ -181,8 +194,10 @@ const getIsDaySelected = (day, value)=>{
                         viewDate: viewDate,
                         value: value,
                         weekStartsOn: weekStartsOn,
-                        onKeyDown: handleKeyDown,
+                        onKeyDown: handleFirstCalendarKeyDown,
+                        onDayFocus: onDayFocus,
                         isDayFocused: isDayFocused,
+                        isDayFocusable: isDayFocusableInFirstCalendar,
                         onDayChange: onDayChange,
                         isDaySelected: isDaySelected,
                         isDayActive: isDayActive,
@@ -196,7 +211,6 @@ const getIsDaySelected = (day, value)=>{
                         isDayDisabled: isDayDisabled,
                         listenDayChangesForUpdate: listenDayChangesForUpdate,
                         renderDayContent: renderDayContent,
-                        "aria-label": changeDayLabel,
                         dayTestId: dayTestId
                     })
                 ]
@@ -223,9 +237,10 @@ const getIsDaySelected = (day, value)=>{
                         viewDate: secondViewDate,
                         value: value,
                         weekStartsOn: weekStartsOn,
-                        "aria-label": changeDayLabel,
-                        onKeyDown: handleKeyDown,
+                        onKeyDown: handleSecondCalendarKeyDown,
+                        onDayFocus: onDayFocus,
                         isDayFocused: isDayFocused,
+                        isDayFocusable: isDayFocusableInSecondCalendar,
                         onDayChange: onDayChange,
                         isDaySelected: isDaySelected,
                         isDayActive: isDayActive,
@@ -239,8 +254,6 @@ const getIsDaySelected = (day, value)=>{
                         isDayDisabled: isDayDisabled,
                         listenDayChangesForUpdate: listenDayChangesForUpdate,
                         renderDayContent: renderDayContent,
-                        tabIndex: 0,
-                        onBlur: resetSelectedDay,
                         dayTestId: dayTestId
                     })
                 ]

package/dist/components/CalendarRange/CalendarRange.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n addMonths,\n endOfDay,\n isAfter,\n isBefore,\n isSameDay,\n isSameMonth,\n isWithinInterval,\n startOfDay,\n subMonths,\n} from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { isFirstDay, isLastDay, navigateDate, NAVIGATION_KEYS } from '../../lib/calendar';\nimport { isHTMLElement } from '../../lib/dom';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n CalendarDays,\n type CalendarDaysProps,\n type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n CalendarHeader,\n type CalendarHeaderProps,\n type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport type DateRangeType = [Date \| null, Date \| null];\n\nexport type CalendarRangeTestsProps = CalendarDaysTestsProps & {\n /*\n Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части.\n /\n leftPartHeaderTestsData?: CalendarHeaderTestsProps;\n /\n Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части.\n /\n rightPartHeaderTestsData?: CalendarHeaderTestsProps;\n};\n\nexport interface CalendarRangeProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' \| 'defaultValue'>,\n Pick<\n CalendarHeaderProps,\n \| 'prevMonthLabel'\n \| 'nextMonthLabel'\n \| 'changeMonthLabel'\n \| 'changeYearLabel'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n >,\n Pick<CalendarDaysProps, 'listenDayChangesForUpdate' \| 'renderDayContent'>,\n CalendarRangeTestsProps {\n /\n Текущий выбранный промежуток.\n /\n value?: DateRangeType \| null;\n /\n Начальный промежуток при монтировании.\n /\n defaultValue?: DateRangeType \| null;\n /\n Запрещает выбор даты в прошлом.\n * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n /\n disablePast?: boolean;\n /\n Запрещает выбор даты в будущем.\n * Применяется, если не задано `shouldDisableDate`.\n /\n disableFuture?: boolean;\n /\n Отключает селекторы выбора месяца/года.\n /\n disablePickers?: boolean;\n /\n `aria-label` для изменения дня.\n /\n changeDayLabel?: string;\n /\n День недели, с которого начинается неделя.\n /\n weekStartsOn?: 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n /\n Обработчик изменения выбранного промежутка.\n /\n onChange?: (value: DateRangeType \| undefined) => void; // TODO [>=8]: поменять тип на `(value?: DateRangeType \| null) => void`\n /\n Функция для проверки запрета выбора даты.\n /\n shouldDisableDate?: (value: Date) => boolean;\n /\n @deprecated Свойство не используется.\n /\n onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType \| null) => {\n if (!value?.[0] \|\| !value[1]) {\n return false;\n }\n\n return isWithinInterval(day, { start: startOfDay(value[0]), end: endOfDay(value[1]) });\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n value: valueProp,\n defaultValue,\n onChange,\n disablePast,\n disableFuture,\n shouldDisableDate,\n weekStartsOn = 1,\n disablePickers,\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n changeMonthLabel = 'Изменить месяц',\n changeYearLabel = 'Изменить год',\n changeDayLabel = 'Изменить день',\n prevMonthIcon,\n nextMonthIcon,\n listenDayChangesForUpdate,\n renderDayContent,\n dayTestId,\n leftPartHeaderTestsData,\n rightPartHeaderTestsData,\n getRootRef,\n ...props\n}: CalendarRangeProps): React.ReactNode => {\n const _onChange = React.useCallback(\n (newValue: DateRangeType \| null \| undefined) => onChange?.(newValue \|\| undefined),\n [onChange],\n );\n\n const [value, updateValue] = useCustomEnsuredControl<DateRangeType \| null \| undefined>({\n value: valueProp,\n defaultValue,\n onChange: _onChange,\n });\n\n const {\n viewDate,\n setViewDate,\n setPrevMonth,\n setNextMonth,\n focusedDay,\n setFocusedDay,\n isDayFocused,\n isDayDisabled,\n resetSelectedDay,\n isMonthDisabled,\n isYearDisabled,\n } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n\n const [hintedDate, setHintedDate] = React.useState<DateRangeType>();\n const secondViewDate = addMonths(viewDate, 1);\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n const key = pressedKey(event);\n\n if (key && NAVIGATION_KEYS.includes(key)) {\n event.preventDefault();\n\n const newFocusedDay = navigateDate(focusedDay ?? value?.[1], key);\n\n if (\n newFocusedDay &&\n !isSameMonth(newFocusedDay, viewDate) &&\n !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n ) {\n setViewDate(newFocusedDay);\n }\n setFocusedDay(newFocusedDay);\n return;\n }\n\n if ((key === Keys.ENTER \|\| key === Keys.SPACE) && isHTMLElement(event.target)) {\n event.preventDefault();\n event.target.click?.();\n }\n },\n [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n );\n\n const getNewValue = React.useCallback(\n (date: Date): DateRangeType => {\n const isValueEmpty = !value \|\| (value[0] === null && value[1] === null);\n const isRangeSelected = value && !!value[0] && !!value[1];\n if (isValueEmpty \|\| isRangeSelected) {\n return [date, null];\n }\n\n const [start] = value;\n if (start && isSameDay(date, start)) {\n return [startOfDay(start), endOfDay(start)];\n } else if (start && isBefore(date, start)) {\n return [startOfDay(date), endOfDay(start)];\n } else if (start && isAfter(date, start)) {\n return [start, endOfDay(date)];\n }\n return value;\n },\n [value],\n );\n\n const onDayChange = React.useCallback(\n (date: Date) => {\n updateValue(getNewValue(date));\n setHintedDate(undefined);\n },\n [updateValue, getNewValue],\n );\n\n const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n const isDayActive = React.useCallback(\n (day: Date) =>\n Boolean((value?.[0] && isSameDay(day, value[0])) \|\| (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) \|\| (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isHintedDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) \|\| (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n [hintedDate],\n );\n\n const isDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) \|\| (value?.[0] && isSameDay(day, value[0]))),\n [value],\n );\n\n const isHintedDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) \|\| (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n [hintedDate],\n );\n\n const onDayEnter = React.useCallback(\n (date: Date) => setHintedDate(getNewValue(date)),\n [setHintedDate, getNewValue],\n );\n\n const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n const isDayHinted = React.useCallback(\n (day: Date) => getIsDaySelected(day, hintedDate),\n [hintedDate],\n );\n\n const onRightPartViewDateChange = React.useCallback(\n (newDate: Date) => setViewDate(subMonths(newDate, 1)),\n [setViewDate],\n );\n\n return (\n <RootComponent {...props} baseClassName={styles.host} getRootRef={getRootRef}>\n <div className={styles.inner}>\n <CalendarHeader\n viewDate={viewDate}\n onChange={setViewDate}\n nextMonthHidden\n onPrevMonth={setPrevMonth}\n disablePickers={disablePickers}\n className={styles.header}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\n prevMonthIcon={prevMonthIcon}\n isMonthDisabled={isMonthDisabled}\n isYearDisabled={isYearDisabled}\n {...leftPartHeaderTestsData}\n />\n <CalendarDays\n viewDate={viewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n renderDayContent={renderDayContent}\n aria-label={changeDayLabel}\n dayTestId={dayTestId}\n />\n </div>\n <div className={styles.inner}>\n <CalendarHeader\n viewDate={secondViewDate}\n onChange={onRightPartViewDateChange}\n prevMonthHidden\n onNextMonth={setNextMonth}\n disablePickers={disablePickers}\n className={styles.header}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\n nextMonthIcon={nextMonthIcon}\n isMonthDisabled={isMonthDisabled}\n isYearDisabled={isYearDisabled}\n {...rightPartHeaderTestsData}\n />\n <CalendarDays\n viewDate={secondViewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n aria-label={changeDayLabel}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n renderDayContent={renderDayContent}\n tabIndex={0}\n onBlur={resetSelectedDay}\n dayTestId={dayTestId}\n />\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","subMonths","useCalendar","useCustomEnsuredControl","Keys","pressedKey","isFirstDay","isLastDay","navigateDate","NAVIGATION_KEYS","isHTMLElement","CalendarDays","CalendarHeader","RootComponent","getIsDaySelected","day","value","start","end","CalendarRange","valueProp","defaultValue","onChange","disablePast","disableFuture","shouldDisableDate","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeDayLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","renderDayContent","dayTestId","leftPartHeaderTestsData","rightPartHeaderTestsData","getRootRef","props","_onChange","useCallback","newValue","undefined","updateValue","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","hintedDate","setHintedDate","useState","secondViewDate","handleKeyDown","event","key","includes","preventDefault","newFocusedDay","ENTER","SPACE","target","click","getNewValue","date","isValueEmpty","isRangeSelected","onDayChange","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","baseClassName","div","className","nextMonthHidden","onPrevMonth","onKeyDown","aria-label","prevMonthHidden","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n addMonths,\n endOfDay,\n isAfter,\n isBefore,\n isSameDay,\n isWithinInterval,\n startOfDay,\n subMonths,\n} from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { isFirstDay, isLastDay } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n CalendarDays,\n type CalendarDaysProps,\n type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n CalendarHeader,\n type CalendarHeaderProps,\n type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { DateRangeType } from './types';\nimport { useCalendarKeyboardNavigation, useIsDayFocusable } from './utils';\nimport styles from './CalendarRange.module.css';\n\nexport type { DateRangeType };\n\nexport type CalendarRangeTestsProps = CalendarDaysTestsProps & {\n /*\n Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части.\n /\n leftPartHeaderTestsData?: CalendarHeaderTestsProps;\n /\n Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части.\n /\n rightPartHeaderTestsData?: CalendarHeaderTestsProps;\n};\n\nexport interface CalendarRangeProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' \| 'defaultValue'>,\n Pick<\n CalendarHeaderProps,\n \| 'prevMonthLabel'\n \| 'nextMonthLabel'\n \| 'changeMonthLabel'\n \| 'changeYearLabel'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n >,\n Pick<CalendarDaysProps, 'listenDayChangesForUpdate' \| 'renderDayContent'>,\n CalendarRangeTestsProps {\n /\n Текущий выбранный промежуток.\n /\n value?: DateRangeType \| null;\n /\n Начальный промежуток при монтировании.\n /\n defaultValue?: DateRangeType \| null;\n /\n Запрещает выбор даты в прошлом.\n * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n /\n disablePast?: boolean;\n /\n Запрещает выбор даты в будущем.\n * Применяется, если не задано `shouldDisableDate`.\n /\n disableFuture?: boolean;\n /\n Отключает селекторы выбора месяца/года.\n /\n disablePickers?: boolean;\n /\n `aria-label` для изменения дня.\n \n @deprecated Since 7.4.0.\n \n Будет удалeно в VKUI v8. Использовалось для задания aria-label для контейнера дней в календаре.\n * Теперь этот контейнер является таблицей (с помощью role=\"grid\") и\n * в aria-label рендерится текущий открытый в календаре месяц и год.\n /\n changeDayLabel?: string;\n /\n День недели, с которого начинается неделя.\n /\n weekStartsOn?: 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n /\n Обработчик изменения выбранного промежутка.\n /\n onChange?: (value: DateRangeType \| undefined) => void; // TODO [>=8]: поменять тип на `(value?: DateRangeType \| null) => void`\n /\n Функция для проверки запрета выбора даты.\n /\n shouldDisableDate?: (value: Date) => boolean;\n /\n @deprecated Свойство не используется.\n /\n onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType \| null) => {\n if (!value?.[0] \|\| !value[1]) {\n return false;\n }\n\n return isWithinInterval(day, { start: startOfDay(value[0]), end: endOfDay(value[1]) });\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n 'value': valueProp,\n defaultValue,\n onChange,\n disablePast,\n disableFuture,\n shouldDisableDate,\n weekStartsOn = 1,\n disablePickers,\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n changeMonthLabel = 'Изменить месяц',\n changeYearLabel = 'Изменить год',\n 'aria-label': ariaLabel = 'Календарь',\n prevMonthIcon,\n nextMonthIcon,\n listenDayChangesForUpdate,\n renderDayContent,\n dayTestId,\n leftPartHeaderTestsData,\n rightPartHeaderTestsData,\n getRootRef,\n ...props\n}: CalendarRangeProps): React.ReactNode => {\n const _onChange = React.useCallback(\n (newValue: DateRangeType \| null \| undefined) => onChange?.(newValue \|\| undefined),\n [onChange],\n );\n\n const [value, updateValue] = useCustomEnsuredControl<DateRangeType \| null \| undefined>({\n value: valueProp,\n defaultValue,\n onChange: _onChange,\n });\n\n const {\n viewDate,\n setViewDate,\n setPrevMonth,\n setNextMonth,\n focusedDay,\n setFocusedDay,\n isDayFocused,\n isDayDisabled,\n isMonthDisabled,\n isYearDisabled,\n } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n\n const [hintedDate, setHintedDate] = React.useState<DateRangeType>();\n const secondViewDate = addMonths(viewDate, 1);\n\n const {\n focusableDayOnFirstCalendar,\n focusableDayOnSecondCalendar,\n handleFirstCalendarKeyDown,\n handleSecondCalendarKeyDown,\n handleDayFocus,\n } = useCalendarKeyboardNavigation({\n focusedDay,\n setFocusedDay,\n value,\n viewDates: [viewDate, secondViewDate],\n setViewDate,\n });\n\n const getNewValue = React.useCallback(\n (date: Date): DateRangeType => {\n const isValueEmpty = !value \|\| (value[0] === null && value[1] === null);\n const isRangeSelected = value && !!value[0] && !!value[1];\n if (isValueEmpty \|\| isRangeSelected) {\n return [date, null];\n }\n\n const [start] = value;\n if (start && isSameDay(date, start)) {\n return [startOfDay(start), endOfDay(start)];\n } else if (start && isBefore(date, start)) {\n return [startOfDay(date), endOfDay(start)];\n } else if (start && isAfter(date, start)) {\n return [start, endOfDay(date)];\n }\n return value;\n },\n [value],\n );\n\n const onDayChange = React.useCallback(\n (date: Date) => {\n updateValue(getNewValue(date));\n setHintedDate(undefined);\n },\n [updateValue, getNewValue],\n );\n\n const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n const isDayActive = React.useCallback(\n (day: Date) =>\n Boolean((value?.[0] && isSameDay(day, value[0])) \|\| (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) \|\| (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isHintedDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) \|\| (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n [hintedDate],\n );\n\n const isDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) \|\| (value?.[0] && isSameDay(day, value[0]))),\n [value],\n );\n\n const isHintedDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) \|\| (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n [hintedDate],\n );\n\n const onDayEnter = React.useCallback(\n (date: Date) => setHintedDate(getNewValue(date)),\n [setHintedDate, getNewValue],\n );\n\n const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n const isDayHinted = React.useCallback(\n (day: Date) => getIsDaySelected(day, hintedDate),\n [hintedDate],\n );\n\n const onRightPartViewDateChange = React.useCallback(\n (newDate: Date) => setViewDate(subMonths(newDate, 1)),\n [setViewDate],\n );\n\n const isDayFocusableInFirstCalendar = useIsDayFocusable({\n value,\n focusableDayOnFirstCalendar,\n focusableDayOnSecondCalendar,\n viewDate,\n isDayActive,\n });\n\n const isDayFocusableInSecondCalendar = useIsDayFocusable({\n value,\n focusableDayOnFirstCalendar,\n focusableDayOnSecondCalendar,\n viewDate: secondViewDate,\n isDayActive,\n });\n\n const onDayFocus = React.useCallback(\n (date: Date) => {\n if (focusedDay && isSameDay(focusedDay, date)) {\n return;\n }\n\n setFocusedDay(date);\n handleDayFocus(date);\n },\n [focusedDay, handleDayFocus, setFocusedDay],\n );\n\n return (\n <RootComponent\n aria-label={ariaLabel}\n {...props}\n baseClassName={styles.host}\n getRootRef={getRootRef}\n >\n <div className={styles.inner}>\n <CalendarHeader\n viewDate={viewDate}\n onChange={setViewDate}\n nextMonthHidden\n onPrevMonth={setPrevMonth}\n disablePickers={disablePickers}\n className={styles.header}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\n prevMonthIcon={prevMonthIcon}\n isMonthDisabled={isMonthDisabled}\n isYearDisabled={isYearDisabled}\n {...leftPartHeaderTestsData}\n />\n <CalendarDays\n viewDate={viewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n onKeyDown={handleFirstCalendarKeyDown}\n onDayFocus={onDayFocus}\n isDayFocused={isDayFocused}\n isDayFocusable={isDayFocusableInFirstCalendar}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n renderDayContent={renderDayContent}\n dayTestId={dayTestId}\n />\n </div>\n <div className={styles.inner}>\n <CalendarHeader\n viewDate={secondViewDate}\n onChange={onRightPartViewDateChange}\n prevMonthHidden\n onNextMonth={setNextMonth}\n disablePickers={disablePickers}\n className={styles.header}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\n nextMonthIcon={nextMonthIcon}\n isMonthDisabled={isMonthDisabled}\n isYearDisabled={isYearDisabled}\n {...rightPartHeaderTestsData}\n />\n <CalendarDays\n viewDate={secondViewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n onKeyDown={handleSecondCalendarKeyDown}\n onDayFocus={onDayFocus}\n isDayFocused={isDayFocused}\n isDayFocusable={isDayFocusableInSecondCalendar}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n renderDayContent={renderDayContent}\n dayTestId={dayTestId}\n />\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","addMonths","endOfDay","isAfter","isBefore","isSameDay","isWithinInterval","startOfDay","subMonths","useCalendar","useCustomEnsuredControl","isFirstDay","isLastDay","CalendarDays","CalendarHeader","RootComponent","useCalendarKeyboardNavigation","useIsDayFocusable","getIsDaySelected","day","value","start","end","CalendarRange","valueProp","defaultValue","onChange","disablePast","disableFuture","shouldDisableDate","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","ariaLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","renderDayContent","dayTestId","leftPartHeaderTestsData","rightPartHeaderTestsData","getRootRef","props","_onChange","useCallback","newValue","undefined","updateValue","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","isMonthDisabled","isYearDisabled","hintedDate","setHintedDate","useState","secondViewDate","focusableDayOnFirstCalendar","focusableDayOnSecondCalendar","handleFirstCalendarKeyDown","handleSecondCalendarKeyDown","handleDayFocus","viewDates","getNewValue","date","isValueEmpty","isRangeSelected","onDayChange","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","isDayFocusableInFirstCalendar","isDayFocusableInSecondCalendar","onDayFocus","aria-label","baseClassName","div","className","nextMonthHidden","onPrevMonth","onKeyDown","isDayFocusable","prevMonthHidden","onNextMonth"],"mappings":"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"}

package/dist/components/CalendarRange/types.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export type DateRangeType = [Date \| null, Date \| null];
2	+ //# sourceMappingURL=types.d.ts.map

package/dist/components/CalendarRange/types.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarRange/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC"}

package/dist/components/CalendarRange/types.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { };
+//# sourceMappingURL=types.js.map

package/dist/components/CalendarRange/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["../../../src/components/CalendarRange/types.ts"],"sourcesContent":["export type DateRangeType = [Date \| null, Date \| null];\n"],"names":[],"mappings":"AAAA,WAAuD"}

package/dist/components/CalendarRange/utils.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { DateRangeType } from './types';
+export declare function useCalendarKeyboardNavigation({ focusedDay, value, setFocusedDay, viewDates: [firstCalendarViewDate, secondCalendarViewDate], setViewDate, }: {
+    focusedDay: Date | undefined;
+    setViewDate: (date: Date) => void;
+    setFocusedDay: React.Dispatch<React.SetStateAction<Date | undefined>>;
+    viewDates: [Date, Date];
+    value: DateRangeType | null | undefined;
+}): {
+    focusableDayOnFirstCalendar: Date | undefined;
+    focusableDayOnSecondCalendar: Date | undefined;
+    handleFirstCalendarKeyDown: (event: React.KeyboardEvent) => void;
+    handleSecondCalendarKeyDown: (event: React.KeyboardEvent) => void;
+    handleDayFocus: (value: Date) => void;
+};
+/**
+ * Возвращает функцию, которая позволяет проверить является ли день в календаре днём на который
+ * можно попасть с помощью Tab.
+ * Единственный день в таблице календаря у которого есть tabIndex="0"
+ * Чтобы на него можно было попасть из заголовка календаря.
+ */
+export declare function useIsDayFocusable({ value, focusableDayOnFirstCalendar, focusableDayOnSecondCalendar, viewDate, isDayActive, }: {
+    value: DateRangeType | null | undefined;
+    focusableDayOnFirstCalendar: Date | undefined;
+    focusableDayOnSecondCalendar: Date | undefined;
+    viewDate: Date;
+    isDayActive: (date: Date) => boolean;
+}): (day: Date) => boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/CalendarRange/utils.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarRange/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,wBAAgB,6BAA6B,CAAC,EAC5C,UAAU,EACV,KAAK,EACL,aAAa,EACb,SAAS,EAAE,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,EAC1D,WAAW,GACZ,EAAE;IACD,UAAU,EAAE,IAAI,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC;IACtE,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACxB,KAAK,EAAE,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;CACzC;;;wCAgEW,KAAK,CAAC,aAAa;yCAOnB,KAAK,CAAC,aAAa;4BAOnB,IAAI;EA6Bf;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,2BAA2B,EAC3B,4BAA4B,EAC5B,QAAQ,EACR,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,2BAA2B,EAAE,IAAI,GAAG,SAAS,CAAC;IAC9C,4BAA4B,EAAE,IAAI,GAAG,SAAS,CAAC;IAC/C,QAAQ,EAAE,IAAI,CAAC;IACf,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;CACtC,SAaS,IAAI,aA6Bb"}

package/dist/components/CalendarRange/utils.js ADDED Viewed

@@ -0,0 +1,123 @@
+import * as React from "react";
+import { isSameDate } from "@vkontakte/vkjs";
+import { isAfter, isBefore, isSameDay, isSameMonth, startOfMonth } from "date-fns";
+import { Keys, pressedKey } from "../../lib/accessibility.js";
+import { navigateDate, NAVIGATION_KEYS } from "../../lib/calendar.js";
+import { isHTMLElement } from "../../lib/dom.js";
+export function useCalendarKeyboardNavigation({ focusedDay, value, setFocusedDay, viewDates: [firstCalendarViewDate, secondCalendarViewDate], setViewDate }) {
+    // соотвествует дню, на котором можно сфокусироваться с помощью Tab
+    const [focusableDayOnFirstCalendar, setFocusableDayOnFirstCalendar] = React.useState();
+    const [focusableDayOnSecondCalendar, setFocusableDayOnSecondCalendar] = React.useState();
+    const handleCalendarKeyDown = React.useCallback((event, isFirst)=>{
+        const key = pressedKey(event);
+        if (!key) {
+            return;
+        }
+        if (NAVIGATION_KEYS.includes(key)) {
+            event.preventDefault();
+            const newFocusedDay = navigateDate(focusedDay !== null && focusedDay !== void 0 ? focusedDay : value === null || value === void 0 ? void 0 : value[0], key);
+            if (newFocusedDay && !isSameMonth(newFocusedDay, firstCalendarViewDate) && !isSameMonth(newFocusedDay, secondCalendarViewDate)) {
+                setViewDate(newFocusedDay);
+            }
+            if (isFirst) {
+                if (isSameMonth(newFocusedDay, firstCalendarViewDate)) {
+                    setFocusableDayOnFirstCalendar(newFocusedDay);
+                } else if (isAfter(newFocusedDay, firstCalendarViewDate)) {
+                    setFocusableDayOnSecondCalendar(newFocusedDay);
+                }
+            } else {
+                if (isSameMonth(newFocusedDay, secondCalendarViewDate)) {
+                    setFocusableDayOnSecondCalendar(newFocusedDay);
+                } else if (isBefore(newFocusedDay, secondCalendarViewDate)) {
+                    setFocusableDayOnFirstCalendar(newFocusedDay);
+                }
+            }
+            setFocusedDay(newFocusedDay);
+            return;
+        }
+        if (key === Keys.TAB) {
+            setFocusedDay(undefined);
+            if (isFirst) {
+                setFocusableDayOnFirstCalendar(focusedDay);
+            } else {
+                setFocusableDayOnSecondCalendar(focusedDay);
+            }
+            return;
+        }
+        if ((key === Keys.ENTER || key === Keys.SPACE) && isHTMLElement(event.target)) {
+            var _event_target_click, _event_target;
+            event.preventDefault();
+            (_event_target_click = (_event_target = event.target).click) === null || _event_target_click === void 0 ? void 0 : _event_target_click.call(_event_target);
+        }
+    }, [
+        focusedDay,
+        value,
+        firstCalendarViewDate,
+        secondCalendarViewDate,
+        setFocusedDay,
+        setViewDate
+    ]);
+    const handleFirstCalendarKeyDown = React.useCallback((event)=>{
+        handleCalendarKeyDown(event, true);
+    }, [
+        handleCalendarKeyDown
+    ]);
+    const handleSecondCalendarKeyDown = React.useCallback((event)=>{
+        handleCalendarKeyDown(event, false);
+    }, [
+        handleCalendarKeyDown
+    ]);
+    const handleDayFocus = React.useCallback((value)=>{
+        if (isSameMonth(firstCalendarViewDate, value) && (!focusableDayOnFirstCalendar || !isSameDate(focusableDayOnFirstCalendar, value))) {
+            setFocusableDayOnFirstCalendar(value);
+        }
+        if (isSameMonth(secondCalendarViewDate, value) && (!focusableDayOnSecondCalendar || !isSameDate(focusableDayOnSecondCalendar, value))) {
+            setFocusableDayOnSecondCalendar(value);
+        }
+    }, [
+        firstCalendarViewDate,
+        focusableDayOnFirstCalendar,
+        focusableDayOnSecondCalendar,
+        secondCalendarViewDate
+    ]);
+    return {
+        focusableDayOnFirstCalendar,
+        focusableDayOnSecondCalendar,
+        handleFirstCalendarKeyDown,
+        handleSecondCalendarKeyDown,
+        handleDayFocus
+    };
+}
+/**
+ * Возвращает функцию, которая позволяет проверить является ли день в календаре днём на который
+ * можно попасть с помощью Tab.
+ * Единственный день в таблице календаря у которого есть tabIndex="0"
+ * Чтобы на него можно было попасть из заголовка календаря.
+ */ export function useIsDayFocusable({ value, focusableDayOnFirstCalendar, focusableDayOnSecondCalendar, viewDate, isDayActive }) {
+    const isValueVisibleOnCalendar = Boolean(value && (value[0] && isSameMonth(value[0], viewDate) || value[1] && isSameMonth(value[1], viewDate)));
+    const isCalendarHasFocusableDay = Boolean(focusableDayOnFirstCalendar && isSameMonth(focusableDayOnFirstCalendar, viewDate) || focusableDayOnSecondCalendar && isSameMonth(focusableDayOnSecondCalendar, viewDate));
+    const isDayFocusable = React.useCallback((day)=>{
+        // если focusableDay день находится среди дней открытого сейчас месяца, то такой день получит tabIndex="0",
+        if (isCalendarHasFocusableDay) {
+            return Boolean(focusableDayOnFirstCalendar && isSameDay(focusableDayOnFirstCalendar, day) || focusableDayOnSecondCalendar && isSameDay(focusableDayOnSecondCalendar, day));
+        }
+        // при открытии календаря focusableDay не определён,
+        // поэтому tabIndex="0" будет у дня, соответствующего дню в инпуте
+        if (isValueVisibleOnCalendar) {
+            return isDayActive(day);
+        }
+        // при переключении месяца любая навигация с помощью Tab начинается
+        // с первого дня месяца.
+        return isSameDay(startOfMonth(viewDate), day);
+    }, [
+        isCalendarHasFocusableDay,
+        isValueVisibleOnCalendar,
+        viewDate,
+        isDayActive,
+        focusableDayOnFirstCalendar,
+        focusableDayOnSecondCalendar
+    ]);
+    return isDayFocusable;
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/CalendarRange/utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/components/CalendarRange/utils.ts"],"sourcesContent":["import * as React from 'react';\nimport { isSameDate } from '@vkontakte/vkjs';\nimport { isAfter, isBefore, isSameDay, isSameMonth, startOfMonth } from 'date-fns';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { navigateDate, NAVIGATION_KEYS } from '../../lib/calendar';\nimport { isHTMLElement } from '../../lib/dom';\nimport type { DateRangeType } from './types';\n\nexport function useCalendarKeyboardNavigation({\n focusedDay,\n value,\n setFocusedDay,\n viewDates: [firstCalendarViewDate, secondCalendarViewDate],\n setViewDate,\n}: {\n focusedDay: Date | undefined;\n setViewDate: (date: Date) => void;\n setFocusedDay: React.Dispatch<React.SetStateAction<Date | undefined>>;\n viewDates: [Date, Date];\n value: DateRangeType | null | undefined;\n}) {\n // соотвествует дню, на котором можно сфокусироваться с помощью Tab\n const [focusableDayOnFirstCalendar, setFocusableDayOnFirstCalendar] = React.useState<Date>();\n const [focusableDayOnSecondCalendar, setFocusableDayOnSecondCalendar] = React.useState<Date>();\n\n const handleCalendarKeyDown = React.useCallback(\n (event: React.KeyboardEvent, isFirst: boolean) => {\n const key = pressedKey(event);\n if (!key) {\n return;\n }\n\n if (NAVIGATION_KEYS.includes(key)) {\n event.preventDefault();\n\n const newFocusedDay = navigateDate(focusedDay ?? value?.[0], key);\n\n if (\n newFocusedDay &&\n !isSameMonth(newFocusedDay, firstCalendarViewDate) &&\n !isSameMonth(newFocusedDay, secondCalendarViewDate)\n ) {\n setViewDate(newFocusedDay);\n }\n\n if (isFirst) {\n if (isSameMonth(newFocusedDay, firstCalendarViewDate)) {\n setFocusableDayOnFirstCalendar(newFocusedDay);\n } else if (isAfter(newFocusedDay, firstCalendarViewDate)) {\n setFocusableDayOnSecondCalendar(newFocusedDay);\n }\n } else {\n if (isSameMonth(newFocusedDay, secondCalendarViewDate)) {\n setFocusableDayOnSecondCalendar(newFocusedDay);\n } else if (isBefore(newFocusedDay, secondCalendarViewDate)) {\n setFocusableDayOnFirstCalendar(newFocusedDay);\n }\n }\n\n setFocusedDay(newFocusedDay);\n\n return;\n }\n\n if (key === Keys.TAB) {\n setFocusedDay(undefined);\n if (isFirst) {\n setFocusableDayOnFirstCalendar(focusedDay);\n } else {\n setFocusableDayOnSecondCalendar(focusedDay);\n }\n\n return;\n }\n\n if ((key === Keys.ENTER || key === Keys.SPACE) && isHTMLElement(event.target)) {\n event.preventDefault();\n event.target.click?.();\n }\n },\n [focusedDay, value, firstCalendarViewDate, secondCalendarViewDate, setFocusedDay, setViewDate],\n );\n\n const handleFirstCalendarKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n handleCalendarKeyDown(event, true);\n },\n [handleCalendarKeyDown],\n );\n\n const handleSecondCalendarKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n handleCalendarKeyDown(event, false);\n },\n [handleCalendarKeyDown],\n );\n\n const handleDayFocus = React.useCallback(\n (value: Date) => {\n if (\n isSameMonth(firstCalendarViewDate, value) &&\n (!focusableDayOnFirstCalendar || !isSameDate(focusableDayOnFirstCalendar, value))\n ) {\n setFocusableDayOnFirstCalendar(value);\n }\n if (\n isSameMonth(secondCalendarViewDate, value) &&\n (!focusableDayOnSecondCalendar || !isSameDate(focusableDayOnSecondCalendar, value))\n ) {\n setFocusableDayOnSecondCalendar(value);\n }\n },\n [\n firstCalendarViewDate,\n focusableDayOnFirstCalendar,\n focusableDayOnSecondCalendar,\n secondCalendarViewDate,\n ],\n );\n\n return {\n focusableDayOnFirstCalendar,\n focusableDayOnSecondCalendar,\n handleFirstCalendarKeyDown,\n handleSecondCalendarKeyDown,\n handleDayFocus,\n };\n}\n\n/**\n * Возвращает функцию, которая позволяет проверить является ли день в календаре днём на который\n * можно попасть с помощью Tab.\n * Единственный день в таблице календаря у которого есть tabIndex=\"0\"\n * Чтобы на него можно было попасть из заголовка календаря.\n */\nexport function useIsDayFocusable({\n value,\n focusableDayOnFirstCalendar,\n focusableDayOnSecondCalendar,\n viewDate,\n isDayActive,\n}: {\n value: DateRangeType | null | undefined;\n focusableDayOnFirstCalendar: Date | undefined;\n focusableDayOnSecondCalendar: Date | undefined;\n viewDate: Date;\n isDayActive: (date: Date) => boolean;\n}) {\n const isValueVisibleOnCalendar = Boolean(\n value &&\n ((value[0] && isSameMonth(value[0], viewDate)) ||\n (value[1] && isSameMonth(value[1], viewDate))),\n );\n\n const isCalendarHasFocusableDay = Boolean(\n (focusableDayOnFirstCalendar && isSameMonth(focusableDayOnFirstCalendar, viewDate)) ||\n (focusableDayOnSecondCalendar && isSameMonth(focusableDayOnSecondCalendar, viewDate)),\n );\n\n const isDayFocusable = React.useCallback(\n (day: Date) => {\n // если focusableDay день находится среди дней открытого сейчас месяца, то такой день получит tabIndex=\"0\",\n if (isCalendarHasFocusableDay) {\n return Boolean(\n (focusableDayOnFirstCalendar && isSameDay(focusableDayOnFirstCalendar, day)) ||\n (focusableDayOnSecondCalendar && isSameDay(focusableDayOnSecondCalendar, day)),\n );\n }\n\n // при открытии календаря focusableDay не определён,\n // поэтому tabIndex=\"0\" будет у дня, соответствующего дню в инпуте\n if (isValueVisibleOnCalendar) {\n return isDayActive(day);\n }\n\n // при переключении месяца любая навигация с помощью Tab начинается\n // с первого дня месяца.\n return isSameDay(startOfMonth(viewDate), day);\n },\n [\n isCalendarHasFocusableDay,\n isValueVisibleOnCalendar,\n viewDate,\n isDayActive,\n focusableDayOnFirstCalendar,\n focusableDayOnSecondCalendar,\n ],\n );\n return isDayFocusable;\n}\n"],"names":["React","isSameDate","isAfter","isBefore","isSameDay","isSameMonth","startOfMonth","Keys","pressedKey","navigateDate","NAVIGATION_KEYS","isHTMLElement","useCalendarKeyboardNavigation","focusedDay","value","setFocusedDay","viewDates","firstCalendarViewDate","secondCalendarViewDate","setViewDate","focusableDayOnFirstCalendar","setFocusableDayOnFirstCalendar","useState","focusableDayOnSecondCalendar","setFocusableDayOnSecondCalendar","handleCalendarKeyDown","useCallback","event","isFirst","key","includes","preventDefault","newFocusedDay","TAB","undefined","ENTER","SPACE","target","click","handleFirstCalendarKeyDown","handleSecondCalendarKeyDown","handleDayFocus","useIsDayFocusable","viewDate","isDayActive","isValueVisibleOnCalendar","Boolean","isCalendarHasFocusableDay","isDayFocusable","day"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,QAAQ,WAAW;AACnF,SAASC,IAAI,EAAEC,UAAU,QAAQ,6BAA0B;AAC3D,SAASC,YAAY,EAAEC,eAAe,QAAQ,wBAAqB;AACnE,SAASC,aAAa,QAAQ,mBAAgB;AAG9C,OAAO,SAASC,8BAA8B,EAC5CC,UAAU,EACVC,KAAK,EACLC,aAAa,EACbC,WAAW,CAACC,uBAAuBC,uBAAuB,EAC1DC,WAAW,EAOZ;IACC,mEAAmE;IACnE,MAAM,CAACC,6BAA6BC,+BAA+B,GAAGrB,MAAMsB,QAAQ;IACpF,MAAM,CAACC,8BAA8BC,gCAAgC,GAAGxB,MAAMsB,QAAQ;IAEtF,MAAMG,wBAAwBzB,MAAM0B,WAAW,CAC7C,CAACC,OAA4BC;QAC3B,MAAMC,MAAMrB,WAAWmB;QACvB,IAAI,CAACE,KAAK;YACR;QACF;QAEA,IAAInB,gBAAgBoB,QAAQ,CAACD,MAAM;YACjCF,MAAMI,cAAc;YAEpB,MAAMC,gBAAgBvB,aAAaI,uBAAAA,wBAAAA,aAAcC,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,EAAEe;YAE7D,IACEG,iBACA,CAAC3B,YAAY2B,eAAef,0BAC5B,CAACZ,YAAY2B,eAAed,yBAC5B;gBACAC,YAAYa;YACd;YAEA,IAAIJ,SAAS;gBACX,IAAIvB,YAAY2B,eAAef,wBAAwB;oBACrDI,+BAA+BW;gBACjC,OAAO,IAAI9B,QAAQ8B,eAAef,wBAAwB;oBACxDO,gCAAgCQ;gBAClC;YACF,OAAO;gBACL,IAAI3B,YAAY2B,eAAed,yBAAyB;oBACtDM,gCAAgCQ;gBAClC,OAAO,IAAI7B,SAAS6B,eAAed,yBAAyB;oBAC1DG,+BAA+BW;gBACjC;YACF;YAEAjB,cAAciB;YAEd;QACF;QAEA,IAAIH,QAAQtB,KAAK0B,GAAG,EAAE;YACpBlB,cAAcmB;YACd,IAAIN,SAAS;gBACXP,+BAA+BR;YACjC,OAAO;gBACLW,gCAAgCX;YAClC;YAEA;QACF;QAEA,IAAI,AAACgB,CAAAA,QAAQtB,KAAK4B,KAAK,IAAIN,QAAQtB,KAAK6B,KAAK,AAAD,KAAMzB,cAAcgB,MAAMU,MAAM,GAAG;gBAE7EV,qBAAAA;YADAA,MAAMI,cAAc;aACpBJ,sBAAAA,CAAAA,gBAAAA,MAAMU,MAAM,EAACC,KAAK,cAAlBX,0CAAAA,yBAAAA;QACF;IACF,GACA;QAACd;QAAYC;QAAOG;QAAuBC;QAAwBH;QAAeI;KAAY;IAGhG,MAAMoB,6BAA6BvC,MAAM0B,WAAW,CAClD,CAACC;QACCF,sBAAsBE,OAAO;IAC/B,GACA;QAACF;KAAsB;IAGzB,MAAMe,8BAA8BxC,MAAM0B,WAAW,CACnD,CAACC;QACCF,sBAAsBE,OAAO;IAC/B,GACA;QAACF;KAAsB;IAGzB,MAAMgB,iBAAiBzC,MAAM0B,WAAW,CACtC,CAACZ;QACC,IACET,YAAYY,uBAAuBH,UAClC,CAAA,CAACM,+BAA+B,CAACnB,WAAWmB,6BAA6BN,MAAK,GAC/E;YACAO,+BAA+BP;QACjC;QACA,IACET,YAAYa,wBAAwBJ,UACnC,CAAA,CAACS,gCAAgC,CAACtB,WAAWsB,8BAA8BT,MAAK,GACjF;YACAU,gCAAgCV;QAClC;IACF,GACA;QACEG;QACAG;QACAG;QACAL;KACD;IAGH,OAAO;QACLE;QACAG;QACAgB;QACAC;QACAC;IACF;AACF;AAEA;;;;;CAKC,GACD,OAAO,SAASC,kBAAkB,EAChC5B,KAAK,EACLM,2BAA2B,EAC3BG,4BAA4B,EAC5BoB,QAAQ,EACRC,WAAW,EAOZ;IACC,MAAMC,2BAA2BC,QAC/BhC,SACG,CAAA,AAACA,KAAK,CAAC,EAAE,IAAIT,YAAYS,KAAK,CAAC,EAAE,EAAE6B,aACjC7B,KAAK,CAAC,EAAE,IAAIT,YAAYS,KAAK,CAAC,EAAE,EAAE6B,SAAS;IAGlD,MAAMI,4BAA4BD,QAChC,AAAC1B,+BAA+Bf,YAAYe,6BAA6BuB,aACtEpB,gCAAgClB,YAAYkB,8BAA8BoB;IAG/E,MAAMK,iBAAiBhD,MAAM0B,WAAW,CACtC,CAACuB;QACC,2GAA2G;QAC3G,IAAIF,2BAA2B;YAC7B,OAAOD,QACL,AAAC1B,+BAA+BhB,UAAUgB,6BAA6B6B,QACpE1B,gCAAgCnB,UAAUmB,8BAA8B0B;QAE/E;QAEA,oDAAoD;QACpD,kEAAkE;QAClE,IAAIJ,0BAA0B;YAC5B,OAAOD,YAAYK;QACrB;QAEA,mEAAmE;QACnE,wBAAwB;QACxB,OAAO7C,UAAUE,aAAaqC,WAAWM;IAC3C,GACA;QACEF;QACAF;QACAF;QACAC;QACAxB;QACAG;KACD;IAEH,OAAOyB;AACT"}

package/dist/components/Checkbox/Checkbox.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { HasRootRef } from '../../types';
-import type { TappableProps } from '../Tappable/Tappable';
+import type { TappableOmitProps } from '../Tappable/Tappable';
 import { CheckboxInput, type CheckboxInputProps } from './CheckboxInput/CheckboxInput';
-export interface CheckboxProps extends Omit<CheckboxInputProps, 'getRootRef'>, HasRootRef<HTMLLabelElement>, Pick<TappableProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'> {
+export interface CheckboxProps extends Omit<CheckboxInputProps, 'getRootRef'>, HasRootRef<HTMLLabelElement>, Pick<TappableOmitProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'> {
     /**
      * Подпись под основным текстом.
      */

package/dist/components/Checkbox/Checkbox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,KAAK,EAAE,~~aAAa~~,EAAE,MAAM,sBAAsB,CAAC;~~AAC1D~~,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAGvF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,EAC5C,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,~~aAAa~~,~~EACb~~,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAoCD;;GAEG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa,GAAG,KAAK,CAAC,SAAS;;CAO9D,CAAC"}
1	+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAGvF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,EAC5C,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,iBAAiB,EACjB,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAoCD;;GAEG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa,GAAG,KAAK,CAAC,SAAS;;CAO9D,CAAC"}

package/dist/components/Checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { ~~TappableProps~~ } from '../Tappable/Tappable';\nimport { CheckboxInput, type CheckboxInputProps } from './CheckboxInput/CheckboxInput';\nimport { CheckboxSimple } from './CheckboxSimple/CheckboxSimple';\n\nexport interface CheckboxProps\n extends Omit<CheckboxInputProps, 'getRootRef'>,\n HasRootRef<HTMLLabelElement>,\n Pick<\n ~~TappableProps~~,\n 'hoverMode' \| 'activeMode' \| 'hasHover' \| 'hasActive' \| 'focusVisibleMode'\n > {\n /*\n Подпись под основным текстом.\n /\n description?: React.ReactNode;\n /\n Контент, идущий за основным текстом.\n /\n titleAfter?: React.ReactNode;\n}\n\nconst CheckboxComponent = ({\n children,\n className,\n style,\n getRootRef,\n description,\n hoverMode,\n activeMode,\n hasHover,\n hasActive,\n focusVisibleMode,\n titleAfter,\n ...restProps\n}: CheckboxProps): React.ReactNode => {\n return (\n <SelectionControl\n className={className}\n style={style}\n disabled={restProps.disabled}\n getRootRef={getRootRef}\n hoverMode={hoverMode}\n activeMode={activeMode}\n hasHover={hasHover}\n hasActive={hasActive}\n focusVisibleMode={focusVisibleMode}\n >\n <CheckboxInput {...restProps} />\n <SelectionControlLabel titleAfter={titleAfter} description={description}>\n {children}\n </SelectionControlLabel>\n </SelectionControl>\n );\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = (props: CheckboxProps): React.ReactNode => {\n const simple = !(hasReactNode(props.children) \|\| hasReactNode(props.description));\n if (simple) {\n return <CheckboxSimple {...props} />;\n }\n\n return <CheckboxComponent {...props} />;\n};\n\nCheckbox.Input = CheckboxInput;\n"],"names":["React","hasReactNode","SelectionControl","SelectionControlLabel","CheckboxInput","CheckboxSimple","CheckboxComponent","children","className","style","getRootRef","description","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","titleAfter","restProps","disabled","Checkbox","props","simple","Input"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,aAAa,QAAiC,mCAAgC;AACvF,SAASC,cAAc,QAAQ,qCAAkC;AAmBjE,MAAMC,oBAAoB;QAAC,EACzBC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EAEI,WADXC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAACf;QACCM,WAAWA;QACXC,OAAOA;QACPU,UAAUD,UAAUC,QAAQ;QAC5BT,YAAYA;QACZE,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;;0BAElB,KAACZ,kCAAkBc;0BACnB,KAACf;gBAAsBc,YAAYA;gBAAYN,aAAaA;0BACzDJ;;;;AAIT;AAEA;;CAEC,GACD,OAAO,MAAMa,WAAW,CAACC;IACvB,MAAMC,SAAS,CAAErB,CAAAA,aAAaoB,MAAMd,QAAQ,KAAKN,aAAaoB,MAAMV,WAAW,CAAA;IAC/E,IAAIW,QAAQ;QACV,qBAAO,KAACjB,mCAAmBgB;IAC7B;IAEA,qBAAO,KAACf,sCAAsBe;AAChC,EAAE;AAEFD,SAASG,KAAK,GAAGnB"}
1	+ {"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableOmitProps } from '../Tappable/Tappable';\nimport { CheckboxInput, type CheckboxInputProps } from './CheckboxInput/CheckboxInput';\nimport { CheckboxSimple } from './CheckboxSimple/CheckboxSimple';\n\nexport interface CheckboxProps\n extends Omit<CheckboxInputProps, 'getRootRef'>,\n HasRootRef<HTMLLabelElement>,\n Pick<\n TappableOmitProps,\n 'hoverMode' \| 'activeMode' \| 'hasHover' \| 'hasActive' \| 'focusVisibleMode'\n > {\n /*\n Подпись под основным текстом.\n /\n description?: React.ReactNode;\n /\n Контент, идущий за основным текстом.\n /\n titleAfter?: React.ReactNode;\n}\n\nconst CheckboxComponent = ({\n children,\n className,\n style,\n getRootRef,\n description,\n hoverMode,\n activeMode,\n hasHover,\n hasActive,\n focusVisibleMode,\n titleAfter,\n ...restProps\n}: CheckboxProps): React.ReactNode => {\n return (\n <SelectionControl\n className={className}\n style={style}\n disabled={restProps.disabled}\n getRootRef={getRootRef}\n hoverMode={hoverMode}\n activeMode={activeMode}\n hasHover={hasHover}\n hasActive={hasActive}\n focusVisibleMode={focusVisibleMode}\n >\n <CheckboxInput {...restProps} />\n <SelectionControlLabel titleAfter={titleAfter} description={description}>\n {children}\n </SelectionControlLabel>\n </SelectionControl>\n );\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = (props: CheckboxProps): React.ReactNode => {\n const simple = !(hasReactNode(props.children) \|\| hasReactNode(props.description));\n if (simple) {\n return <CheckboxSimple {...props} />;\n }\n\n return <CheckboxComponent {...props} />;\n};\n\nCheckbox.Input = CheckboxInput;\n"],"names":["React","hasReactNode","SelectionControl","SelectionControlLabel","CheckboxInput","CheckboxSimple","CheckboxComponent","children","className","style","getRootRef","description","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","titleAfter","restProps","disabled","Checkbox","props","simple","Input"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,aAAa,QAAiC,mCAAgC;AACvF,SAASC,cAAc,QAAQ,qCAAkC;AAmBjE,MAAMC,oBAAoB;QAAC,EACzBC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EAEI,WADXC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAACf;QACCM,WAAWA;QACXC,OAAOA;QACPU,UAAUD,UAAUC,QAAQ;QAC5BT,YAAYA;QACZE,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;;0BAElB,KAACZ,kCAAkBc;0BACnB,KAACf;gBAAsBc,YAAYA;gBAAYN,aAAaA;0BACzDJ;;;;AAIT;AAEA;;CAEC,GACD,OAAO,MAAMa,WAAW,CAACC;IACvB,MAAMC,SAAS,CAAErB,CAAAA,aAAaoB,MAAMd,QAAQ,KAAKN,aAAaoB,MAAMV,WAAW,CAAA;IAC/E,IAAIW,QAAQ;QACV,qBAAO,KAACjB,mCAAmBgB;IAC7B;IAEA,qBAAO,KAACf,sCAAsBe;AAChC,EAAE;AAEFD,SAASG,KAAK,GAAGnB"}

package/dist/components/ChipsInput/useChipsInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useChipsInput.d.ts","sourceRoot":"","sources":["../../../src/components/ChipsInput/useChipsInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAG~~/B,OAAO,EAAsB,KAAK,6BAA6B,EAAE,MAAM,iBAAiB,CAAC;AASzF,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,sBAAsB,EACvB,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,UAAU,EACjD,OAAO,CAAC,EAAE,EACV,gBAAgB,cAAc,CAAC,CAAC,CAAC,EACjC,gBAAgB,cAAc,CAAC,CAAC,CAAC,KAChC,KAAK,CACN,CAAC,GAAG;IACF,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,eAAe,CAAC;CACxB,CAME,CAAC;~~AAON~~,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,CACnE,SAAQ,sBAAsB,CAAC,CAAC,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACnC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,UAAU,EAAE,uMAiBjD,kBAAkB,CAAC,CAAC,CAAC,KAAG;IACzB,KAAK,EAAE,KAAK,CACV,CAAC,GAAG;QACF,KAAK,EAAE,eAAe,CAAC;QACvB,KAAK,EAAE,eAAe,CAAC;KACxB,CACF,CAAC;IACF,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,MAAM,KAAK,IAAI,CAAC;IAC1C,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,YAAY,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,eAAe,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,gBAAgB,GAAG,6BAA6B,CAAC,GAAG,IAAI,CAAC,CAAC;IACrF,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,GAAG,CAAC;IACpF,UAAU,EAAE,MAAM,IAAI,CAAC;~~CA2HxB~~,CAAC"}
1	+ {"version":3,"file":"useChipsInput.d.ts","sourceRoot":"","sources":["../../../src/components/ChipsInput/useChipsInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAsB,KAAK,6BAA6B,EAAE,MAAM,iBAAiB,CAAC;AASzF,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,sBAAsB,EACvB,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,UAAU,EACjD,OAAO,CAAC,EAAE,EACV,gBAAgB,cAAc,CAAC,CAAC,CAAC,EACjC,gBAAgB,cAAc,CAAC,CAAC,CAAC,KAChC,KAAK,CACN,CAAC,GAAG;IACF,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,eAAe,CAAC;CACxB,CAME,CAAC;AA0BN,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,CACnE,SAAQ,sBAAsB,CAAC,CAAC,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACnC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,UAAU,EAAE,uMAiBjD,kBAAkB,CAAC,CAAC,CAAC,KAAG;IACzB,KAAK,EAAE,KAAK,CACV,CAAC,GAAG;QACF,KAAK,EAAE,eAAe,CAAC;QACvB,KAAK,EAAE,eAAe,CAAC;KACxB,CACF,CAAC;IACF,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,MAAM,KAAK,IAAI,CAAC;IAC1C,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,YAAY,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,eAAe,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,gBAAgB,GAAG,6BAA6B,CAAC,GAAG,IAAI,CAAC,CAAC;IACrF,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,GAAG,CAAC;IACpF,UAAU,EAAE,MAAM,IAAI,CAAC;CA4HxB,CAAC"}

package/dist/components/ChipsInput/useChipsInput.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import * as React from "react";
+import { escapeRegExp } from "@vkontakte/vkjs";
 import { useCustomEnsuredControl, useEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { useNativeFormResetListener } from "../../hooks/useNativeFormResetListener.js";
 import { simulateReactInput } from "../../lib/react/index.js";
@@ -10,6 +11,23 @@ export const transformValue = (value, getOptionValue, getOptionLabel)=>value.map
             label: getOptionLabel(option),
             value: getOptionValue(option)
         }));
+function getRegExpFromArray(separators) {
+    const validSeparators = separators.filter((s)=>s.length > 0);
+    if (validSeparators.length === 0) {
+        return null;
+    }
+    const escaped = validSeparators.map((s)=>escapeRegExp(s));
+    return new RegExp(`(?:${escaped.join('|')})`);
+}
+function getRegexFromDelimiter(delimiter) {
+    if (delimiter instanceof RegExp) {
+        return delimiter;
+    }
+    if (typeof delimiter === 'string') {
+        return new RegExp(escapeRegExp(delimiter));
+    }
+    return getRegExpFromArray(delimiter);
+}
 export const useChipsInput = ({ // option
 value: valueProp, defaultValue = DEFAULT_VALUE, onChange, getOptionLabel = getOptionLabelDefault, getOptionValue = getOptionValueDefault, getNewOptionData = getNewOptionDataDefault, // input
 inputValue: inputValueProp, defaultInputValue = DEFAULT_INPUT_VALUE, onInputChange: onInputChangeProp, // other
@@ -92,11 +110,12 @@ disabled, delimiter })=>{
     ]);
     const onInputChange = React.useCallback((e, canCreate = true)=>{
         const newInputValue = e.target.value;
-        if (!delimiter || !newInputValue.includes(delimiter) || !canCreate) {
+        const delimiterRegex = delimiter ? getRegexFromDelimiter(delimiter) : null;
+        if (!delimiterRegex || !delimiterRegex.test(newInputValue) || !canCreate) {
             setInputChange(e);
             return;
         }
-        const values = newInputValue.trim().split(delimiter).map((v)=>v.trim()).filter(Boolean);
+        const values = newInputValue.trim().split(delimiterRegex).map((v)=>v.trim()).filter(Boolean);
         e.target.value = '';
         e.currentTarget.value = '';
         setInputChange(e);

package/dist/components/ChipsInput/useChipsInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/ChipsInput/useChipsInput.ts"],"sourcesContent":["import * as React from 'react';\nimport { useCustomEnsuredControl, useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { simulateReactInput, type SimulateReactInputTargetState } from '../../lib/react';\nimport {\n DEFAULT_INPUT_VALUE,\n DEFAULT_VALUE,\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n} from '../ChipsInputBase/constants';\nimport { isValueLikeChipOptionObject } from '../ChipsInputBase/helpers';\nimport type {\n ChipOption,\n ChipOptionLabel,\n ChipOptionValue,\n GetNewOptionData,\n GetOptionLabel,\n GetOptionValue,\n UseChipsInputBaseProps,\n} from '../ChipsInputBase/types';\n\nexport const transformValue = <O extends ChipOption>(\n value: O[],\n getOptionValue: GetOptionValue<O>,\n getOptionLabel: GetOptionLabel<O>,\n): Array<\n O & {\n label: ChipOptionLabel;\n value: ChipOptionValue;\n }\n> =>\n value.map((option) => ({\n ...option,\n label: getOptionLabel(option),\n value: getOptionValue(option),\n }));\n\ninterface ToggleOption<O extends ChipOption> {\n (optionsForAdd: Array<O \| string>, isNewValue: true): void;\n (optionsForRemove: Array<O \| ChipOptionValue>, isNewValue: false): void;\n}\n\nexport interface UseChipsInputProps<O extends ChipOption = ChipOption>\n extends UseChipsInputBaseProps<O> {\n /*\n Селектор значения.\n /\n getOptionValue?: GetOptionValue<O>;\n /\n Селектор пользовательского представления.\n /\n getOptionLabel?: GetOptionLabel<O>;\n /\n Функция для создания новой опции.\n /\n getNewOptionData?: GetNewOptionData<O>;\n}\n\nexport const useChipsInput = <O extends ChipOption>({\n // option\n value: valueProp,\n defaultValue = DEFAULT_VALUE,\n onChange,\n getOptionLabel = getOptionLabelDefault,\n getOptionValue = getOptionValueDefault,\n getNewOptionData = getNewOptionDataDefault,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue = DEFAULT_INPUT_VALUE,\n onInputChange: onInputChangeProp,\n\n // other\n disabled,\n delimiter,\n}: UseChipsInputProps<O>): {\n value: Array<\n O & {\n label: ChipOptionLabel;\n value: ChipOptionValue;\n }\n >;\n addOption: (newValue: O \| string) => void;\n addOptionFromInput: (inputValue: string) => void;\n removeOption: (newValue: O \| ChipOptionValue) => void;\n clearOptions: () => void;\n inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) \| null>;\n inputValue: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, canCreate?: boolean) => any;\n clearInput: () => void;\n} => {\n const [value, setValue] = useCustomEnsuredControl({\n disabled,\n value: valueProp ? transformValue(valueProp, getOptionValue, getOptionLabel) : undefined,\n defaultValue: transformValue(defaultValue, getOptionValue, getOptionLabel),\n onChange,\n });\n\n const inputRef = React.useRef<(HTMLInputElement & SimulateReactInputTargetState) \| null>(null);\n const [inputValue, setInputChange] = useEnsuredControl({\n disabled,\n value: inputValueProp,\n defaultValue: defaultInputValue,\n onChange: onInputChangeProp,\n });\n\n const toggleOption: ToggleOption<O> = React.useCallback(\n (nextValuesProp: Array<O \| ChipOptionValue>, isNewValue: boolean) => {\n setValue((prevValue) => {\n const resolvedNextOptionsSet = new Set<ChipOptionValue>();\n const resolvedNextOptions = nextValuesProp.map((option) => {\n const isLikeObjectOption = isValueLikeChipOptionObject(option);\n const resolvedOption = isLikeObjectOption\n ? getNewOptionData(option.value, option.label)\n : getNewOptionData(option, typeof option === 'string' ? option : '');\n resolvedNextOptionsSet.add(resolvedOption.value);\n return isLikeObjectOption ? { ...option, ...resolvedOption } : resolvedOption;\n });\n\n const nextValue = prevValue.filter(\n (option: O) => !resolvedNextOptionsSet.has(option.value),\n );\n\n if (isNewValue) {\n nextValue.push(...resolvedNextOptions);\n }\n\n return nextValue;\n });\n },\n [setValue, getNewOptionData],\n );\n\n const clearInput = React.useCallback(() => {\n / istanbul ignore if */\n if (!inputRef.current) {\n return;\n }\n simulateReactInput(inputRef.current, '');\n }, [inputRef]);\n\n const addOption = React.useCallback(\n (newValue: O \| string) => toggleOption([newValue], true),\n [toggleOption],\n );\n\n const addOptions = React.useCallback(\n (newValues: Array<O \| string>) => toggleOption(newValues, true),\n [toggleOption],\n );\n\n const removeOption = React.useCallback(\n (newValue: O \| ChipOptionValue) => toggleOption([newValue], false),\n [toggleOption],\n );\n\n const addOptionFromInput = React.useCallback(\n (inputValue: string) => {\n const label = inputValue.trim();\n if (label) {\n addOption(label);\n clearInput();\n }\n },\n [addOption, clearInput],\n );\n\n const reset = React.useCallback(() => {\n setValue(defaultValue);\n }, [defaultValue, setValue]);\n\n const clearOptions = React.useCallback(() => {\n setValue(DEFAULT_VALUE);\n clearInput();\n }, [clearInput, setValue]);\n\n const onInputChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, canCreate = true) => {\n const newInputValue = e.target.value;\n if (!delimiter \|\| !newInputValue.includes(delimiter) \|\| !canCreate) {\n setInputChange(e);\n return;\n }\n const values = newInputValue\n .trim()\n .split(delimiter)\n .map((v) => v.trim())\n .filter(Boolean);\n\n e.target.value = '';\n e.currentTarget.value = '';\n setInputChange(e);\n\n addOptions(values);\n },\n [addOptions, delimiter, setInputChange],\n );\n\n useNativeFormResetListener(inputRef, reset);\n\n return {\n value,\n addOption,\n addOptionFromInput,\n removeOption,\n\n inputRef,\n inputValue,\n onInputChange,\n clearInput,\n clearOptions,\n };\n};\n"],"names":["React","useCustomEnsuredControl","useEnsuredControl","useNativeFormResetListener","simulateReactInput","DEFAULT_INPUT_VALUE","DEFAULT_VALUE","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","isValueLikeChipOptionObject","transformValue","value","getOptionValue","getOptionLabel","map","option","label","useChipsInput","valueProp","defaultValue","onChange","getNewOptionData","inputValue","inputValueProp","defaultInputValue","onInputChange","onInputChangeProp","disabled","delimiter","setValue","undefined","inputRef","useRef","setInputChange","toggleOption","useCallback","nextValuesProp","isNewValue","prevValue","resolvedNextOptionsSet","Set","resolvedNextOptions","isLikeObjectOption","resolvedOption","add","nextValue","filter","has","push","clearInput","current","addOption","newValue","addOptions","newValues","removeOption","addOptionFromInput","trim","reset","clearOptions","e","canCreate","newInputValue","target","includes","values","split","v","Boolean","currentTarget"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/ChipsInput/useChipsInput.ts"],"sourcesContent":["import * as React from 'react';\nimport { escapeRegExp } from '@vkontakte/vkjs';\nimport { useCustomEnsuredControl, useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { simulateReactInput, type SimulateReactInputTargetState } from '../../lib/react';\nimport {\n DEFAULT_INPUT_VALUE,\n DEFAULT_VALUE,\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n} from '../ChipsInputBase/constants';\nimport { isValueLikeChipOptionObject } from '../ChipsInputBase/helpers';\nimport type {\n ChipOption,\n ChipOptionLabel,\n ChipOptionValue,\n GetNewOptionData,\n GetOptionLabel,\n GetOptionValue,\n UseChipsInputBaseProps,\n} from '../ChipsInputBase/types';\n\nexport const transformValue = <O extends ChipOption>(\n value: O[],\n getOptionValue: GetOptionValue<O>,\n getOptionLabel: GetOptionLabel<O>,\n): Array<\n O & {\n label: ChipOptionLabel;\n value: ChipOptionValue;\n }\n> =>\n value.map((option) => ({\n ...option,\n label: getOptionLabel(option),\n value: getOptionValue(option),\n }));\n\nfunction getRegExpFromArray(separators: string[]) {\n const validSeparators = separators.filter((s) => s.length > 0);\n if (validSeparators.length === 0) {\n return null;\n }\n const escaped = validSeparators.map((s) => escapeRegExp(s));\n return new RegExp(`(?:${escaped.join('\|')})`);\n}\n\nfunction getRegexFromDelimiter(delimiter: string \| RegExp \| string[]): RegExp \| null {\n if (delimiter instanceof RegExp) {\n return delimiter;\n }\n if (typeof delimiter === 'string') {\n return new RegExp(escapeRegExp(delimiter));\n }\n return getRegExpFromArray(delimiter);\n}\n\ninterface ToggleOption<O extends ChipOption> {\n (optionsForAdd: Array<O \| string>, isNewValue: true): void;\n (optionsForRemove: Array<O \| ChipOptionValue>, isNewValue: false): void;\n}\n\nexport interface UseChipsInputProps<O extends ChipOption = ChipOption>\n extends UseChipsInputBaseProps<O> {\n /*\n Селектор значения.\n /\n getOptionValue?: GetOptionValue<O>;\n /\n Селектор пользовательского представления.\n /\n getOptionLabel?: GetOptionLabel<O>;\n /\n Функция для создания новой опции.\n /\n getNewOptionData?: GetNewOptionData<O>;\n}\n\nexport const useChipsInput = <O extends ChipOption>({\n // option\n value: valueProp,\n defaultValue = DEFAULT_VALUE,\n onChange,\n getOptionLabel = getOptionLabelDefault,\n getOptionValue = getOptionValueDefault,\n getNewOptionData = getNewOptionDataDefault,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue = DEFAULT_INPUT_VALUE,\n onInputChange: onInputChangeProp,\n\n // other\n disabled,\n delimiter,\n}: UseChipsInputProps<O>): {\n value: Array<\n O & {\n label: ChipOptionLabel;\n value: ChipOptionValue;\n }\n >;\n addOption: (newValue: O \| string) => void;\n addOptionFromInput: (inputValue: string) => void;\n removeOption: (newValue: O \| ChipOptionValue) => void;\n clearOptions: () => void;\n inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) \| null>;\n inputValue: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, canCreate?: boolean) => any;\n clearInput: () => void;\n} => {\n const [value, setValue] = useCustomEnsuredControl({\n disabled,\n value: valueProp ? transformValue(valueProp, getOptionValue, getOptionLabel) : undefined,\n defaultValue: transformValue(defaultValue, getOptionValue, getOptionLabel),\n onChange,\n });\n\n const inputRef = React.useRef<(HTMLInputElement & SimulateReactInputTargetState) \| null>(null);\n const [inputValue, setInputChange] = useEnsuredControl({\n disabled,\n value: inputValueProp,\n defaultValue: defaultInputValue,\n onChange: onInputChangeProp,\n });\n\n const toggleOption: ToggleOption<O> = React.useCallback(\n (nextValuesProp: Array<O \| ChipOptionValue>, isNewValue: boolean) => {\n setValue((prevValue) => {\n const resolvedNextOptionsSet = new Set<ChipOptionValue>();\n const resolvedNextOptions = nextValuesProp.map((option) => {\n const isLikeObjectOption = isValueLikeChipOptionObject(option);\n const resolvedOption = isLikeObjectOption\n ? getNewOptionData(option.value, option.label)\n : getNewOptionData(option, typeof option === 'string' ? option : '');\n resolvedNextOptionsSet.add(resolvedOption.value);\n return isLikeObjectOption ? { ...option, ...resolvedOption } : resolvedOption;\n });\n\n const nextValue = prevValue.filter(\n (option: O) => !resolvedNextOptionsSet.has(option.value),\n );\n\n if (isNewValue) {\n nextValue.push(...resolvedNextOptions);\n }\n\n return nextValue;\n });\n },\n [setValue, getNewOptionData],\n );\n\n const clearInput = React.useCallback(() => {\n / istanbul ignore if */\n if (!inputRef.current) {\n return;\n }\n simulateReactInput(inputRef.current, '');\n }, [inputRef]);\n\n const addOption = React.useCallback(\n (newValue: O \| string) => toggleOption([newValue], true),\n [toggleOption],\n );\n\n const addOptions = React.useCallback(\n (newValues: Array<O \| string>) => toggleOption(newValues, true),\n [toggleOption],\n );\n\n const removeOption = React.useCallback(\n (newValue: O \| ChipOptionValue) => toggleOption([newValue], false),\n [toggleOption],\n );\n\n const addOptionFromInput = React.useCallback(\n (inputValue: string) => {\n const label = inputValue.trim();\n if (label) {\n addOption(label);\n clearInput();\n }\n },\n [addOption, clearInput],\n );\n\n const reset = React.useCallback(() => {\n setValue(defaultValue);\n }, [defaultValue, setValue]);\n\n const clearOptions = React.useCallback(() => {\n setValue(DEFAULT_VALUE);\n clearInput();\n }, [clearInput, setValue]);\n\n const onInputChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, canCreate = true) => {\n const newInputValue = e.target.value;\n const delimiterRegex = delimiter ? getRegexFromDelimiter(delimiter) : null;\n if (!delimiterRegex \|\| !delimiterRegex.test(newInputValue) \|\| !canCreate) {\n setInputChange(e);\n return;\n }\n const values = newInputValue\n .trim()\n .split(delimiterRegex)\n .map((v) => v.trim())\n .filter(Boolean);\n\n e.target.value = '';\n e.currentTarget.value = '';\n setInputChange(e);\n\n addOptions(values);\n },\n [addOptions, delimiter, setInputChange],\n );\n\n useNativeFormResetListener(inputRef, reset);\n\n return {\n value,\n addOption,\n addOptionFromInput,\n removeOption,\n\n inputRef,\n inputValue,\n onInputChange,\n clearInput,\n clearOptions,\n };\n};\n"],"names":["React","escapeRegExp","useCustomEnsuredControl","useEnsuredControl","useNativeFormResetListener","simulateReactInput","DEFAULT_INPUT_VALUE","DEFAULT_VALUE","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","isValueLikeChipOptionObject","transformValue","value","getOptionValue","getOptionLabel","map","option","label","getRegExpFromArray","separators","validSeparators","filter","s","length","escaped","RegExp","join","getRegexFromDelimiter","delimiter","useChipsInput","valueProp","defaultValue","onChange","getNewOptionData","inputValue","inputValueProp","defaultInputValue","onInputChange","onInputChangeProp","disabled","setValue","undefined","inputRef","useRef","setInputChange","toggleOption","useCallback","nextValuesProp","isNewValue","prevValue","resolvedNextOptionsSet","Set","resolvedNextOptions","isLikeObjectOption","resolvedOption","add","nextValue","has","push","clearInput","current","addOption","newValue","addOptions","newValues","removeOption","addOptionFromInput","trim","reset","clearOptions","e","canCreate","newInputValue","target","delimiterRegex","test","values","split","v","Boolean","currentTarget"],"mappings":"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"}