@vkontakte/vkui 6.6.0 → 6.7.0

package/dist/cjs/components/CalendarRange/CalendarRange.js

@@ -30,7 +30,7 @@ const getIsDaySelected = (day, value)=>{
     });
 };
 const CalendarRange = (_param)=>{
-    var { value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate } = _param, props = _object_without_properties._(_param, [
+    var { value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent } = _param, props = _object_without_properties._(_param, [
         "value",
         "onChange",
         "disablePast",
@@ -46,7 +46,8 @@ const CalendarRange = (_param)=>{
         "changeDayLabel",
         "prevMonthIcon",
         "nextMonthIcon",
-        "listenDayChangesForUpdate"
+        "listenDayChangesForUpdate",
+        "renderDayContent"
     ]);
     const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay, isMonthDisabled, isYearDisabled } = (0, _useCalendar.useCalendar)({
         value,
@@ -183,6 +184,7 @@ const CalendarRange = (_param)=>{
                         isHintedDaySelectionStart: isHintedDaySelectionStart,
                         isDayDisabled: isDayDisabled,
                         listenDayChangesForUpdate: listenDayChangesForUpdate,
+                        renderDayContent: renderDayContent,
                         "aria-label": changeDayLabel
                     })
                 ]
@@ -224,6 +226,7 @@ const CalendarRange = (_param)=>{
                         isHintedDaySelectionStart: isHintedDaySelectionStart,
                         isDayDisabled: isDayDisabled,
                         listenDayChangesForUpdate: listenDayChangesForUpdate,
+                        renderDayContent: renderDayContent,
                         tabIndex: 0,
                         onBlur: resetSelectedDay
                     })

package/dist/cjs/components/CalendarRange/CalendarRange.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * 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 { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, type CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, type CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport type DateRangeType = [Date | null, Date | null];\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {\n  value?: DateRangeType;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?: (value: DateRangeType | undefined) => void;\n  shouldDisableDate?: (value: Date) => boolean;\n  onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType) => {\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,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  weekStartsOn = 1,\n  disablePickers,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarRangeProps): React.ReactNode => {\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  const [hintedDate, setHintedDate] = React.useState<DateRangeType>();\n  const secondViewDate = addMonths(viewDate, 1);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.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    },\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      if (isValueEmpty) {\n        return [date, null];\n      }\n\n      const [start, end] = value;\n      if ((start && isSameDay(date, start)) || (end && isSameDay(date, end))) {\n        return [setTimeEqual(date, start), setTimeEqual(date, end)];\n      } else if (start && isBefore(date, start)) {\n        return [setTimeEqual(date, start), end];\n      } else if (start && isAfter(date, start)) {\n        return [start, setTimeEqual(date, end)];\n      }\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [onChange, 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['CalendarRange']}>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonthHidden\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          prevMonthIcon={prevMonthIcon}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\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          aria-label={changeDayLabel}\n        />\n      </div>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={onRightPartViewDateChange}\n          prevMonthHidden\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          nextMonthIcon={nextMonthIcon}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\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          tabIndex={0}\n          onBlur={resetSelectedDay}\n        />\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["CalendarRange","getIsDaySelected","day","value","isWithinInterval","start","startOfDay","end","endOfDay","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeDayLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","useCalendar","hintedDate","setHintedDate","React","useState","secondViewDate","addMonths","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","getNewValue","date","isValueEmpty","isSameDay","setTimeEqual","isBefore","isAfter","onDayChange","undefined","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isLastDay","isHintedDaySelectionEnd","isDaySelectionStart","isFirstDay","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","subMonths","RootComponent","baseClassName","div","className","CalendarHeader","nextMonthHidden","onPrevMonth","CalendarDays","onKeyDown","aria-label","prevMonthHidden","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * 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 { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, type CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, type CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport type DateRangeType = [Date | null, Date | null];\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'> {\n  value?: DateRangeType;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?: (value: DateRangeType | undefined) => void;\n  shouldDisableDate?: (value: Date) => boolean;\n  onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType) => {\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,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  weekStartsOn = 1,\n  disablePickers,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  ...props\n}: CalendarRangeProps): React.ReactNode => {\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  const [hintedDate, setHintedDate] = React.useState<DateRangeType>();\n  const secondViewDate = addMonths(viewDate, 1);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.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    },\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      if (isValueEmpty) {\n        return [date, null];\n      }\n\n      const [start, end] = value;\n      if ((start && isSameDay(date, start)) || (end && isSameDay(date, end))) {\n        return [setTimeEqual(date, start), setTimeEqual(date, end)];\n      } else if (start && isBefore(date, start)) {\n        return [setTimeEqual(date, start), end];\n      } else if (start && isAfter(date, start)) {\n        return [start, setTimeEqual(date, end)];\n      }\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [onChange, 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['CalendarRange']}>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonthHidden\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          prevMonthIcon={prevMonthIcon}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\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        />\n      </div>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={onRightPartViewDateChange}\n          prevMonthHidden\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          nextMonthIcon={nextMonthIcon}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\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        />\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["CalendarRange","getIsDaySelected","day","value","isWithinInterval","start","startOfDay","end","endOfDay","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeDayLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","renderDayContent","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","useCalendar","hintedDate","setHintedDate","React","useState","secondViewDate","addMonths","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","getNewValue","date","isValueEmpty","isSameDay","setTimeEqual","isBefore","isAfter","onDayChange","undefined","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isLastDay","isHintedDaySelectionEnd","isDaySelectionStart","isFirstDay","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","subMonths","RootComponent","baseClassName","div","className","CalendarHeader","nextMonthHidden","onPrevMonth","CalendarDays","onKeyDown","aria-label","prevMonthHidden","onNextMonth","tabIndex","onBlur"],"mappings":"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"}

package/dist/cjs/components/CardGrid/CardGrid.js

@@ -17,7 +17,7 @@ const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _RootComponent = require("../RootComponent/RootComponent");
 const sizeXClassNames = {
     none: "vkuiCardGrid--sizeX-none",
-    ['compact']: "vkuiCardGrid--sizeX-compact"
+    compact: "vkuiCardGrid--sizeX-compact"
 };
 const stylesSize = {
     s: 'vkuiInternalCardGrid--size-s',

package/dist/cjs/components/CardGrid/CardGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  ['compact']: styles['CardGrid--sizeX-compact'],\n};\n\nconst stylesSize = {\n  s: 'vkuiInternalCardGrid--size-s',\n  m: 'vkuiInternalCardGrid--size-m',\n  l: 'vkuiInternalCardGrid--size-l',\n};\n\nexport interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  size = 's',\n  spaced = false,\n  // TODO [>=7]: поменять тег на ul https://github.com/VKCOM/VKUI/issues/7336\n  Component = 'div',\n  ...restProps\n}: CardGridProps): React.ReactNode => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      baseClassName={classNames(\n        styles['CardGrid'],\n        'vkuiInternalCardGrid',\n        spaced && styles['CardGrid--spaced'],\n        stylesSize[size],\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n      )}\n    />\n  );\n};\n"],"names":["CardGrid","sizeXClassNames","none","stylesSize","s","m","l","size","spaced","Component","restProps","sizeX","useAdaptivity","RootComponent","baseClassName","classNames"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;sBA5Bc;+BACG;+BAEA;AAG9B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAaO,MAAMN,WAAW;QAAC,EACvBO,OAAO,GAAG,EACVC,SAAS,KAAK,EACd,2EAA2E;IAC3EC,YAAY,KAAK,EAEH,WADXC;QAJHH;QACAC;QAEAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,qBAACC,4BAAa,8CACRH;QACJD,WAAWA;QACXK,eAAeC,IAAAA,gBAAU,kBAEvB,wBACAP,kCACAL,UAAU,CAACI,KAAK,EAChBI,UAAU,aAAaV,eAAe,CAACU,MAAM;;AAIrD"}
+{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  compact: styles['CardGrid--sizeX-compact'],\n};\n\nconst stylesSize = {\n  s: 'vkuiInternalCardGrid--size-s',\n  m: 'vkuiInternalCardGrid--size-m',\n  l: 'vkuiInternalCardGrid--size-l',\n};\n\nexport interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  size = 's',\n  spaced = false,\n  // TODO [>=7]: поменять тег на ul https://github.com/VKCOM/VKUI/issues/7336\n  Component = 'div',\n  ...restProps\n}: CardGridProps): React.ReactNode => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      baseClassName={classNames(\n        styles['CardGrid'],\n        'vkuiInternalCardGrid',\n        spaced && styles['CardGrid--spaced'],\n        stylesSize[size],\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n      )}\n    />\n  );\n};\n"],"names":["CardGrid","sizeXClassNames","none","compact","stylesSize","s","m","l","size","spaced","Component","restProps","sizeX","useAdaptivity","RootComponent","baseClassName","classNames"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;sBA5Bc;+BACG;+BAEA;AAG9B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAaO,MAAMP,WAAW;QAAC,EACvBQ,OAAO,GAAG,EACVC,SAAS,KAAK,EACd,2EAA2E;IAC3EC,YAAY,KAAK,EAEH,WADXC;QAJHH;QACAC;QAEAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,qBAACC,4BAAa,8CACRH;QACJD,WAAWA;QACXK,eAAeC,IAAAA,gBAAU,kBAEvB,wBACAP,kCACAL,UAAU,CAACI,KAAK,EAChBI,UAAU,aAAaX,eAAe,CAACW,MAAM;;AAIrD"}

package/dist/cjs/components/Clickable/Clickable.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';
 import { type RootComponentProps } from '../RootComponent/RootComponent';
 import { type StateProps } from './useState';

package/dist/cjs/components/Clickable/Clickable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,qBAAqB,EAE3B,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACxF,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AA0FjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AA2CD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,wEAIxB,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAqB5B,CAAC"}
+{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,KAAK,qBAAqB,EAE3B,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACxF,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AA2GjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AA2CD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,wEAIxB,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAqB5B,CAAC"}

package/dist/cjs/components/Clickable/Clickable.js

@@ -16,10 +16,12 @@ _export(exports, {
         return checkClickable;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useFocusVisible = require("../../hooks/useFocusVisible");
 const _useFocusVisibleClassName = require("../../hooks/useFocusVisibleClassName");
@@ -30,7 +32,7 @@ const _useState = require("./useState");
 /**
  * Некликабельный компонент. Отключаем возможность нажимать на компонент.
  */ const NonClickable = (_param)=>{
-    var { href, onClick, onClickCapture, activeClassName, hoverClassName, hasActive, hasHover, hovered, activated, activeEffectDelay } = _param, restProps = _object_without_properties._(_param, [
+    var { href, onClick, onClickCapture, activeClassName, hoverClassName, hasActive, hasHover, hovered, unlockParentHover, activated, activeEffectDelay } = _param, restProps = _object_without_properties._(_param, [
         "href",
         "onClick",
         "onClickCapture",
@@ -39,6 +41,7 @@ const _useState = require("./useState");
         "hasActive",
         "hasHover",
         "hovered",
+        "unlockParentHover",
         "activated",
         "activeEffectDelay"
     ]);
@@ -47,7 +50,7 @@ const _useState = require("./useState");
 /**
  * Кликабельный компонент. Добавляем кучу обвесов
  */ const RealClickable = (_param)=>{
-    var { baseClassName, children, focusVisibleMode = 'inside', activeClassName, hoverClassName, activeEffectDelay = _useState.DEFAULT_ACTIVE_EFFECT_DELAY, hasHover = true, hasActive = true, hovered, activated, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown } = _param, restProps = _object_without_properties._(_param, [
+    var { baseClassName, children, focusVisibleMode = 'inside', activeClassName, hoverClassName, activeEffectDelay = _useState.DEFAULT_ACTIVE_EFFECT_DELAY, hasHover = true, hasActive = true, hovered, activated, hasHoverWithChildren, unlockParentHover, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown } = _param, restProps = _object_without_properties._(_param, [
         "baseClassName",
         "children",
         "focusVisibleMode",
@@ -58,6 +61,8 @@ const _useState = require("./useState");
         "hasActive",
         "hovered",
         "activated",
+        "hasHoverWithChildren",
+        "unlockParentHover",
         "onPointerEnter",
         "onPointerLeave",
         "onPointerDown",
@@ -81,10 +86,12 @@ const _useState = require("./useState");
         hasHover,
         hasActive,
         hovered,
-        activated
-    }), { stateClassName, setLockBubblingImmediate } = _useState1, stateEvents = _object_without_properties._(_useState1, [
+        activated,
+        unlockParentHover
+    }), { stateClassName, setLockHoverBubblingImmediate, setLockActiveBubblingImmediate } = _useState1, stateEvents = _object_without_properties._(_useState1, [
         "stateClassName",
-        "setLockBubblingImmediate"
+        "setLockHoverBubblingImmediate",
+        "setLockActiveBubblingImmediate"
     ]);
     const handlers = (0, _mergeCalls.mergeCalls)(focusEvents, stateEvents, {
         onKeyDown: _utils.clickByKeyboardHandler
@@ -98,11 +105,19 @@ const _useState = require("./useState");
         onFocus,
         onKeyDown
     });
+    const lockStateContextValue = _react.useMemo(()=>({
+            lockHoverStateBubbling: hasHoverWithChildren ? _vkjs.noop : setLockHoverBubblingImmediate,
+            lockActiveStateBubbling: setLockActiveBubblingImmediate
+        }), [
+        setLockHoverBubblingImmediate,
+        setLockActiveBubblingImmediate,
+        hasHoverWithChildren
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
         baseClassName: (0, _vkjs.classNames)(baseClassName, "vkuiClickable__realClickable", focusVisibleClassNames, stateClassName)
     }, handlers, restProps), {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_useState.ClickableLockStateContext.Provider, {
-            value: setLockBubblingImmediate,
+            value: lockStateContextValue,
             children: children
         })
     }));

package/dist/cjs/components/Clickable/Clickable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n  type FocusVisibleModeProps,\n  useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport {\n  ClickableLockStateContext,\n  DEFAULT_ACTIVE_EFFECT_DELAY,\n  type StateProps,\n  useState,\n} from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  activated,\n  activeEffectDelay,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst RealClickable = <T,>({\n  baseClassName,\n  children,\n  focusVisibleMode = 'inside',\n  activeClassName,\n  hoverClassName,\n  activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n  hasHover = true,\n  hasActive = true,\n  hovered,\n  activated,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onPointerCancel,\n  onPointerUp,\n  onBlur,\n  onFocus,\n  onKeyDown,\n  ...restProps\n}: ClickableProps<T>) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n  const { stateClassName, setLockBubblingImmediate, ...stateEvents } = useState({\n    activeClassName,\n    hoverClassName,\n    activeEffectDelay,\n    hasHover,\n    hasActive,\n    hovered,\n    activated,\n  });\n\n  const handlers = mergeCalls(\n    focusEvents,\n    stateEvents,\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onPointerEnter,\n      onPointerLeave,\n      onPointerDown,\n      onPointerCancel,\n      onPointerUp,\n      onBlur,\n      onFocus,\n      onKeyDown,\n    },\n  );\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        baseClassName,\n        styles['Clickable__realClickable'],\n        focusVisibleClassNames,\n        stateClassName,\n      )}\n      {...handlers}\n      {...restProps}\n    >\n      <ClickableLockStateContext.Provider value={setLockBubblingImmediate}>\n        {children}\n      </ClickableLockStateContext.Provider>\n    </RootComponent>\n  );\n};\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\nconst getUserAgentResetClassName = (Component?: React.ElementType) => {\n  if (Component === 'a') {\n    return styles.Clickable__resetLinkStyle;\n  }\n  if (Component === 'button') {\n    return styles.Clickable__resetButtonStyle;\n  }\n  return;\n};\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(\n    baseClassNameProp,\n    getUserAgentResetClassName(commonProps.Component),\n    styles['Clickable__host'],\n  );\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["Clickable","checkClickable","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","activated","activeEffectDelay","restProps","RootComponent","RealClickable","baseClassName","children","focusVisibleMode","DEFAULT_ACTIVE_EFFECT_DELAY","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","useFocusVisible","focusVisible","focusEvents","focusVisibleClassNames","useFocusVisibleClassName","mode","useState","stateClassName","setLockBubblingImmediate","stateEvents","handlers","mergeCalls","clickByKeyboardHandler","classNames","ClickableLockStateContext","Provider","value","props","undefined","Component","disabled","component","getUserAgentResetClassName","baseClassNameProp","commonProps","isClickable"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n  type FocusVisibleModeProps,\n  useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport {\n  ClickableLockStateContext,\n  DEFAULT_ACTIVE_EFFECT_DELAY,\n  type StateProps,\n  useState,\n} from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst RealClickable = <T,>({\n  baseClassName,\n  children,\n  focusVisibleMode = 'inside',\n  activeClassName,\n  hoverClassName,\n  activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n  hasHover = true,\n  hasActive = true,\n  hovered,\n  activated,\n  hasHoverWithChildren,\n  unlockParentHover,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onPointerCancel,\n  onPointerUp,\n  onBlur,\n  onFocus,\n  onKeyDown,\n  ...restProps\n}: ClickableProps<T>) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n  const {\n    stateClassName,\n    setLockHoverBubblingImmediate,\n    setLockActiveBubblingImmediate,\n    ...stateEvents\n  } = useState({\n    activeClassName,\n    hoverClassName,\n    activeEffectDelay,\n    hasHover,\n    hasActive,\n    hovered,\n    activated,\n    unlockParentHover,\n  });\n\n  const handlers = mergeCalls(\n    focusEvents,\n    stateEvents,\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onPointerEnter,\n      onPointerLeave,\n      onPointerDown,\n      onPointerCancel,\n      onPointerUp,\n      onBlur,\n      onFocus,\n      onKeyDown,\n    },\n  );\n\n  const lockStateContextValue = React.useMemo(\n    () => ({\n      lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,\n      lockActiveStateBubbling: setLockActiveBubblingImmediate,\n    }),\n    [setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, hasHoverWithChildren],\n  );\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        baseClassName,\n        styles['Clickable__realClickable'],\n        focusVisibleClassNames,\n        stateClassName,\n      )}\n      {...handlers}\n      {...restProps}\n    >\n      <ClickableLockStateContext.Provider value={lockStateContextValue}>\n        {children}\n      </ClickableLockStateContext.Provider>\n    </RootComponent>\n  );\n};\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\nconst getUserAgentResetClassName = (Component?: React.ElementType) => {\n  if (Component === 'a') {\n    return styles.Clickable__resetLinkStyle;\n  }\n  if (Component === 'button') {\n    return styles.Clickable__resetButtonStyle;\n  }\n  return;\n};\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(\n    baseClassNameProp,\n    getUserAgentResetClassName(commonProps.Component),\n    styles['Clickable__host'],\n  );\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["Clickable","checkClickable","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","restProps","RootComponent","RealClickable","baseClassName","children","focusVisibleMode","DEFAULT_ACTIVE_EFFECT_DELAY","hasHoverWithChildren","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","useFocusVisible","focusVisible","focusEvents","focusVisibleClassNames","useFocusVisibleClassName","mode","useState","stateClassName","setLockHoverBubblingImmediate","setLockActiveBubblingImmediate","stateEvents","handlers","mergeCalls","clickByKeyboardHandler","lockStateContextValue","React","useMemo","lockHoverStateBubbling","noop","lockActiveStateBubbling","classNames","ClickableLockStateContext","Provider","value","props","undefined","Component","disabled","component","getUserAgentResetClassName","baseClassNameProp","commonProps","isClickable"],"mappings":"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"}

package/dist/cjs/components/Clickable/useState.d.ts

@@ -16,6 +16,36 @@ export interface StateProps {
      * Указывает, должен ли компонент реагировать на active-состояние
      */
     hasActive?: boolean;
+    /**
+     * Позволяет родительскому компоненту
+     * иметь hovered-cостояние при наведении
+     * на любой дочерний элемент.
+     * По умолчанию состояние hovered у родителя сбрасывается.
+     *
+     * Присваивается родителькому компоненту.
+     *
+     * @example
+     * <Tappable hasHoverWithChildren>
+     *   <IconButton />
+     *   <IconButton />
+     *   <IconButton />
+     * </Tappable>
+     */
+    hasHoverWithChildren?: boolean;
+    /**
+     * Позволяет родительскому компоненту показывать hovered-состояние при наведении
+     * на текущий дочерний компонент.
+     *
+     * Присваивается дочернему компоненту.
+     *
+     * @example
+     * <Tappable>
+     *   <IconButton unlockParentHover />
+     *   <IconButton unlockParentHover />
+     *   <IconButton />
+     * </Tappable>
+     */
+    unlockParentHover?: boolean;
     /**
      * Длительность показа `activated`-состояния
      */
@@ -30,12 +60,18 @@ export interface StateProps {
     hoverClassName?: string;
 }
 export declare const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
-export declare const ClickableLockStateContext: React.Context<((v: boolean) => void) | undefined>;
+interface ClickableLockStateContextInterface {
+    lockHoverStateBubbling?: (v: boolean) => void;
+    lockActiveStateBubbling?: (v: boolean) => void;
+}
+export declare const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface>;
 /**
  * Управляет состоянием компонента
  */
-export declare function useState({ hasHover, hasActive, ...restProps }: StateProps): {
+export declare function useState({ hovered, hasHover, hasActive, unlockParentHover, ...restProps }: StateProps): {
     stateClassName: string;
-    setLockBubblingImmediate: (...args: any[]) => void;
+    setLockHoverBubblingImmediate: (...args: any[]) => void;
+    setLockActiveBubblingImmediate: (...args: any[]) => void;
 };
+export {};
 //# sourceMappingURL=useState.d.ts.map

package/dist/cjs/components/Clickable/useState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/useState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AASD,eAAO,MAAM,2BAA2B,MAAM,CAAC;AA0E/C,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CACpB,CAAC;AAcrE;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,UAAU,GAAG;IAC3E,cAAc,EAAE,MAAM,CAAC;IACvB,wBAAwB,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CACpD,CAyBA"}
+{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/useState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;;;;;OAcG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;;;;;;;;;;OAYG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,2BAA2B,MAAM,CAAC;AA6I/C,UAAU,kCAAkC;IAC1C,sBAAsB,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,uBAAuB,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,OAAO,CAAC,kCAAkC,CAIpF,CAAC;AAqCL;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,UAAU,GAAG;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,6BAA6B,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACxD,8BAA8B,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CAC1D,CAkCA"}

package/dist/cjs/components/Clickable/useState.js

@@ -21,42 +21,79 @@ _export(exports, {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
-const _callMultiple = require("../../lib/callMultiple");
 const _mergeCalls = require("../../lib/mergeCalls");
 const _useStateWithDelay = require("./useStateWithDelay");
 const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
 const ACTIVE_DELAY = 70;
 /**
  * Управляет наведением на компонент, игнорирует тач события
- */ function useHover({ hovered, hoverClassName, hasHover = true, lockState }) {
-    const [hoveredState, setHover] = _react.useState(false);
-    const hover = hasHover && !lockState && (hovered || hoveredState) ? hoverClassName : undefined;
+ */ function useHover({ hovered, hasHover = true, lockState, setParentStateLock }) {
+    const [hoveredStateLocal, setHoveredStateLocal] = _react.useState(false);
+    const prevIsHoveredRef = _react.useRef(undefined);
+    const handleHover = _react.useCallback((isHover)=>{
+        setHoveredStateLocal(isHover);
+        const isHovered = calculateStateValue({
+            hasState: hasHover,
+            isLocked: lockState,
+            stateValueControlled: Boolean(hovered),
+            stateValueLocal: isHover
+        });
+        // проверка сделана чтобы реже вызывать обновление состояния
+        // контекста родителя
+        if (isHovered !== prevIsHoveredRef.current) {
+            prevIsHoveredRef.current = isHovered;
+            setParentStateLock(isHovered);
+        }
+    }, [
+        setParentStateLock,
+        hasHover,
+        hovered,
+        lockState
+    ]);
     const onPointerEnter = (e)=>{
         if (e.pointerType === 'touch') {
             return;
         }
-        setHover(true);
+        handleHover(true);
     };
     const onPointerLeave = ()=>{
-        setHover(false);
+        handleHover(false);
     };
+    const isHovered = calculateStateValue({
+        hasState: hasHover,
+        isLocked: lockState,
+        stateValueControlled: Boolean(hovered),
+        stateValueLocal: hoveredStateLocal
+    });
     return {
-        hover,
+        isHovered,
         onPointerEnter: hasHover ? onPointerEnter : _vkjs.noop,
         onPointerLeave: hasHover ? onPointerLeave : _vkjs.noop
     };
 }
 /**
  * Управляет активацией компонента
- */ function useActive({ activated, activeClassName, activeEffectDelay, hasActive = true, lockState }) {
-    const [activatedState, setActivated] = (0, _useStateWithDelay.useStateWithDelay)(false);
+ */ function useActive({ activated, activeEffectDelay, hasActive = true, lockStateRef, setParentStateLock }) {
+    // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,
+    // если установка отложена c помощью delay, то и вызов будет отложен
+    const [activatedState, setActivated] = (0, _useStateWithDelay.useStateWithDelay)(false, 0, setParentStateLock);
     // Список нажатий которые не требуется отменять
     const pointersUp = _react.useMemo(()=>new Set(), []);
-    const active = hasActive && !lockState && (activated || activatedState) ? activeClassName : undefined;
-    const onPointerDown = ()=>setActivated(true, ACTIVE_DELAY);
+    const onPointerDown = ()=>{
+        if (lockStateRef.current) {
+            return;
+        }
+        setActivated(true, ACTIVE_DELAY);
+        // намеренно выставляем lock, так как setActivated вызов отложен
+        // а у отложенного setActivated setParentStateLock тоже вызовится отложенно
+        // родитель сейчас тоже обработает это же событие PointerDown
+        // если мы не залочим activatedState у родителя сейчас, то родитель выставит active состояние
+        setParentStateLock(true);
+    };
     const onPointerCancel = (e)=>{
         if (pointersUp.has(e.pointerId)) {
             pointersUp.delete(e.pointerId);
@@ -66,59 +103,95 @@ const ACTIVE_DELAY = 70;
     };
     const onPointerUp = (e)=>{
         pointersUp.add(e.pointerId);
+        if (lockStateRef.current) {
+            return;
+        }
         setActivated(true);
         setActivated(false, activeEffectDelay);
     };
+    const isActivated = calculateStateValue({
+        hasState: hasActive,
+        isLocked: lockStateRef.current,
+        stateValueControlled: Boolean(activated),
+        stateValueLocal: activatedState
+    });
     return {
-        active,
+        isActivated,
         onPointerLeave: hasActive ? onPointerCancel : _vkjs.noop,
         onPointerDown: hasActive ? onPointerDown : _vkjs.noop,
         onPointerCancel: hasActive ? onPointerCancel : _vkjs.noop,
         onPointerUp: hasActive ? onPointerUp : _vkjs.noop
     };
 }
-const ClickableLockStateContext = /*#__PURE__*/ _react.createContext(undefined);
+const ClickableLockStateContext = /*#__PURE__*/ _react.createContext({
+    lockHoverStateBubbling: undefined,
+    lockActiveStateBubbling: undefined
+});
 /**
  * Блокирует стейт на всплытие
- */ function useLockState() {
-    const setLockBubbling = _react.useContext(ClickableLockStateContext) || _vkjs.noop;
+ */ function useLockState(setParentStateLockBubbling) {
     const [lockState, setLockState] = _react.useState(false);
-    const setLockBubblingImmediate = (0, _callMultiple.callMultiple)(setLockState, setLockBubbling);
+    const setStateLockBubblingImmediate = _react.useCallback((isLock)=>{
+        setLockState(isLock);
+        setParentStateLockBubbling(isLock);
+    }, [
+        setParentStateLockBubbling
+    ]);
     return [
         lockState,
-        setLockBubbling,
-        setLockBubblingImmediate
+        setParentStateLockBubbling,
+        setStateLockBubblingImmediate
+    ];
+}
+function useLockRef(setParentStateLockBubbling) {
+    const lockStateRef = _react.useRef(false);
+    const setStateLockBubblingImmediate = _react.useCallback((isLock)=>{
+        lockStateRef.current = isLock;
+        setParentStateLockBubbling(isLock);
+    }, [
+        setParentStateLockBubbling
+    ]);
+    return [
+        lockStateRef,
+        setParentStateLockBubbling,
+        setStateLockBubblingImmediate
     ];
 }
 function useState(_param) {
-    var { hasHover, hasActive } = _param, restProps = _object_without_properties._(_param, [
+    var { hovered, hasHover, hasActive, unlockParentHover } = _param, restProps = _object_without_properties._(_param, [
+        "hovered",
         "hasHover",
-        "hasActive"
+        "hasActive",
+        "unlockParentHover"
     ]);
-    const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();
-    const props = _object_spread._({
+    const { lockHoverStateBubbling = _vkjs.noop, lockActiveStateBubbling = _vkjs.noop } = _react.useContext(ClickableLockStateContext);
+    const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] = useLockState(unlockParentHover ? _vkjs.noop : lockHoverStateBubbling);
+    const [lockActiveStateRef, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] = useLockRef(lockActiveStateBubbling);
+    const _useHover = useHover({
         hasHover,
-        hasActive,
-        lockState
-    }, restProps);
-    const _useHover = useHover(_object_spread._({}, props)), { hover } = _useHover, hoverEvent = _object_without_properties._(_useHover, [
-        "hover"
+        hovered,
+        lockState: lockHoverState,
+        setParentStateLock: setParentStateLockHoverBubbling
+    }), { isHovered } = _useHover, hoverEvent = _object_without_properties._(_useHover, [
+        "isHovered"
     ]);
-    const _useActive = useActive(props), { active } = _useActive, activeEvent = _object_without_properties._(_useActive, [
-        "active"
+    const _useActive = useActive(_object_spread_props._(_object_spread._({}, restProps), {
+        lockStateRef: lockActiveStateRef,
+        setParentStateLock: setParentStateLockActiveBubbling
+    })), { isActivated } = _useActive, activeEvent = _object_without_properties._(_useActive, [
+        "isActivated"
     ]);
-    const stateClassName = (0, _vkjs.classNames)(hover, active);
+    const stateClassName = (0, _vkjs.classNames)(isHovered && restProps.hoverClassName, isActivated && restProps.activeClassName);
     const handlers = (0, _mergeCalls.mergeCalls)(hoverEvent, activeEvent);
-    _react.useEffect(()=>{
-        setLockBubbling(!!stateClassName);
-    }, [
-        setLockBubbling,
-        stateClassName
-    ]);
     return _object_spread._({
         stateClassName,
-        setLockBubblingImmediate
+        setLockHoverBubblingImmediate,
+        setLockActiveBubblingImmediate
     }, handlers);
 }
+// Общая функция для определения конечного состояния active/hovered
+function calculateStateValue({ hasState, isLocked, stateValueControlled, stateValueLocal }) {
+    return hasState && !isLocked && (stateValueControlled || stateValueLocal);
+}
 
 //# sourceMappingURL=useState.js.map