@vkontakte/vkui 5.5.4 → 5.6.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?(value: Date): void;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\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, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <div\n      {...props}\n      ref={getRootRef}\n      className={classNames(\n        styles['Calendar'],\n        size === 's' && styles['Calendar--size-s'],\n        className,\n      )}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles['Calendar__header']}\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles['Calendar__time']}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["Calendar","warn","warnOnce","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","className","listenDayChangesForUpdate","props","useCalendar","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useIsomorphicLayoutEffect","process","env","NODE_ENV","handleKeyDown","React","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","onDayChange","date","setTimeEqual","isDayActive","day","Boolean","isSameDay","div","ref","classNames","CalendarHeader","CalendarDays","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isFirstDay","isDaySelectionEnd","isLastDay","onBlur","CalendarTime"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?(value: Date): void;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\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, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <div\n      {...props}\n      ref={getRootRef}\n      className={classNames(\n        styles['Calendar'],\n        size === 's' && styles['Calendar--size-s'],\n        className,\n      )}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles['Calendar__header']}\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles['Calendar__time']}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["Calendar","warn","warnOnce","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","className","listenDayChangesForUpdate","props","useCalendar","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useIsomorphicLayoutEffect","process","env","NODE_ENV","handleKeyDown","React","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","onDayChange","date","setTimeEqual","isDayActive","day","Boolean","isSameDay","div","ref","classNames","CalendarHeader","CalendarDays","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isFirstDay","isDaySelectionEnd","isLastDay","onBlur","CalendarTime"],"mappings":";;;;+BA4DaA;;;eAAAA;;;;;;;+DA5DU;oBACI;2BACC;wBACsC;oBAC3B;yCACG;wBACjB;4BAEuB;8BACI;4BACJ;AA6ChD,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMF,WAAW;QACtBG,eAAAA,OACAC,kBAAAA,UACAC,qBAAAA,aACAC,uBAAAA,eACAC,2BAAAA,mBACAC,iBAAAA,oCACAC,YAAAA,4CAAa,2BACbC,wBAAAA,6CACAC,cAAAA,gDAAe,yBACfC,oBAAAA,YACAC,wBAAAA,gBACAC,8BAAAA,sBACAC,gCAAAA,wBACAC,4BAAAA,oBACAC,4BAAAA,oBACAC,8BAAAA,sBACAC,6BAAAA,qBACAC,8BAAAA,yDACAC,oBAAAA,4DAAqB,kEACrBC,MAAAA,gCAAO,mBACPC,AAAUC,0BAAVD,UACAE,wBAAAA,gBACAC,qBAAAA,aACAC,qBAAAA,aACAC,uBAAAA,eACAC,uBAAAA,eACAC,wBAAAA,gBACAC,wBAAAA,gBACAC,kBAAAA,UACAC,mBAAAA,WACAC,mCAAAA,2BACGC;QA/BHhC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAUIE,gBAAAA,IAAAA,wBAAW,EAAC;QACdjC,OAAAA;QACAG,eAAAA;QACAD,aAAAA;QACAE,mBAAAA;QACAkB,gBAAAA;QACAC,aAAAA;QACAC,aAAAA;IACF,IAjBEJ,WASEa,cATFb,UACAc,cAQED,cARFC,aACAC,eAOEF,cAPFE,cACAC,eAMEH,cANFG,cACAC,aAKEJ,cALFI,YACAC,gBAIEL,cAJFK,eACAC,eAGEN,cAHFM,cACAC,gBAEEP,cAFFO,eACAC,mBACER,cADFQ;IAWFC,IAAAA,oDAAyB,EAAC;QACxB,IAAI1C,OAAO;YACTkC,YAAYlC;QACd;IACF,GAAG;QAACA;KAAM;IAEV,IAAI2C,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiB,CAACnC,kBAAkBS,SAAS,KAAK;QAC7ErB,KAAK,yEAAyE;IAChF;IAEA,IAAI6C,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBvC,cAAca,SAAS,KAAK;QACxErB,KAAK,4DAA4D;IACnE;IAEA,IAAMgD,gBAAgBC,OAAMC,WAAW,CACrC,SAACC;QACC,IAAI;YAAC;YAAW;YAAa;YAAa;SAAa,CAACC,QAAQ,CAACD,MAAME,GAAG,GAAG;YAC3EF,MAAMG,cAAc;QACtB;QAEA,IAAMC,gBAAgBC,IAAAA,sBAAY,EAACjB,uBAAAA,wBAAAA,aAAcrC,OAAOiD,MAAME,GAAG;QAEjE,IAAIE,iBAAiB,CAACE,IAAAA,iBAAW,EAACF,eAAejC,WAAW;YAC1Dc,YAAYmB;QACd;QACAf,cAAce;IAChB,GACA;QAAChB;QAAYC;QAAeJ;QAAalC;QAAOoB;KAAS;IAG3D,IAAMoC,cAAcT,OAAMC,WAAW,CACnC,SAACS;YACCxD;SAAAA,YAAAA,sBAAAA,gCAAAA,UAAWyD,IAAAA,sBAAY,EAACD,MAAMzD;IAChC,GACA;QAACA;QAAOC;KAAS;IAGnB,IAAM0D,cAAcZ,OAAMC,WAAW,CACnC,SAACY;eAAcC,QAAQ7D,SAAS8D,IAAAA,eAAS,EAACF,KAAK5D;OAC/C;QAACA;KAAM;IAGT,qBACE,qBAAC+D,mDACK/B;QACJgC,KAAKvD;QACLqB,WAAWmC,IAAAA,gBAAU,kBAEnB9C,SAAS,+BACTW;sBAGF,qBAACoC,8BAAc;QACb9C,UAAUC,oBAAoBD;QAC9BnB,UAAUiC;QACVX,aAAaa;QACbZ,aAAaW;QACbzB,gBAAgBA,kBAAkBS,SAAS;QAC3CW,SAAS;QACTjB,oBAAoBA;QACpBC,oBAAoBA;QACpBC,sBAAsBA;QACtBC,qBAAqBA;QACrBS,eAAeA;QACfC,eAAeA;QACfC,gBAAgBA;QAChBC,gBAAgBA;sBAElB,qBAACuC,0BAAY;QACX/C,UAAUC,oBAAoBD;QAC9BpB,OAAOA;QACPQ,cAAcA;QACd+B,cAAcA;QACd6B,UAAU;QACVC,cAAYnD;QACZoD,WAAWxB;QACXU,aAAaA;QACbG,aAAaA;QACbY,qBAAqBC,oBAAU;QAC/BC,mBAAmBC,mBAAS;QAC5BlC,eAAeA;QACfmC,QAAQlC;QACRxB,sBAAsBA;QACtBE,MAAMA;QACNU,UAAUA;QACVE,2BAA2BA;QAE5BzB,cAAcN,SAASmB,SAAS,qBAC/B,qBAAC4C;QAAIjC,SAAS;qBACZ,qBAAC8C,0BAAY;QACX5E,OAAOA;QACPC,UAAUA;QACVI,SAASA;QACTE,gBAAgBA;QAChBI,sBAAsBA;QACtBC,wBAAwBA;;AAMpC"}

package/dist/cjs/components/CalendarDay/CalendarDay.js

@@ -46,13 +46,15 @@ var CalendarDay = /*#__PURE__*/ _react.memo(function(_param) {
         onChange
     ]);
     var handleEnter = _react.useCallback(function() {
-        return onEnter === null || onEnter === void 0 ? void 0 : onEnter(day);
+        var _onEnter;
+        return (_onEnter = onEnter) === null || _onEnter === void 0 ? void 0 : _onEnter(day);
     }, [
         day,
         onEnter
     ]);
     var handleLeave = _react.useCallback(function() {
-        return onLeave === null || onLeave === void 0 ? void 0 : onLeave(day);
+        var _onLeave;
+        return (_onLeave = onLeave) === null || _onLeave === void 0 ? void 0 : _onLeave(day);
     }, [
         day,
         onLeave

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  TappableElementProps,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport interface CalendarDayProps extends CalendarDayElementProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    className,\n    ...props\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div className={styles['CalendarDay__hidden']}></div>;\n    }\n\n    return (\n      <Tappable\n        className={classNames(\n          styles['CalendarDay'],\n          size === 's' && styles['CalendarDay--size-s'],\n          today && styles['CalendarDay--today'],\n          selected && !disabled && styles['CalendarDay--selected'],\n          selectionStart && styles['CalendarDay--selection-start'],\n          selectionEnd && styles['CalendarDay--selection-end'],\n          disabled && styles['CalendarDay--disabled'],\n          !sameMonth && styles['CalendarDay--not-same-month'],\n          className,\n        )}\n        hoverMode={active ? '' : styles['CalendarDay--hover']}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n        {...props}\n      >\n        <div\n          className={classNames(\n            styles['CalendarDay__hinted'],\n            hinted && styles['CalendarDay__hinted--active'],\n            hintedSelectionStart && styles['CalendarDay__hinted--selection-start'],\n            hintedSelectionEnd && styles['CalendarDay__hinted--selection-end'],\n          )}\n        >\n          <div\n            className={classNames(\n              styles['CalendarDay__inner'],\n              active && !disabled && styles['CalendarDay__inner--active'],\n            )}\n          >\n            <div className={styles['CalendarDay__day-number']}>{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["CalendarDay","React","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","props","locale","useConfigProvider","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","ENABLE_KEYBOARD_INPUT_EVENT_NAME","bubbles","focus","div","Tappable","classNames","hoverMode","hasActive","aria-label","Intl","DateTimeFormat","weekday","year","month","format","tabIndex","getRootRef","focusVisibleMode","getDate","displayName"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;+DAhCU;oBACI;uCACsB;qCACf;wBACa;AA4BxC,IAAMA,4BAAcC,OAAMC,KAC/B;QACEC,aAAAA,KACAC,eAAAA,OACAC,kBAAAA,UACAC,kBAAAA,UACAC,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,wBAAAA,gBACAC,sBAAAA,cACAC,iBAAAA,SACAC,iBAAAA,SACAC,iBAAAA,SACAC,gBAAAA,QACAC,8BAAAA,sBACAC,4BAAAA,oBACAC,mBAAAA,WACAC,cAAAA,MACAC,mBAAAA,WACGC;QAlBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,SAAWC,IAAAA,4CAAXD;IACR,IAAME,MAAMvB,OAAMwB,OAAoB;IACtC,IAAMC,UAAUzB,OAAM0B,YAAY;eAAMrB,SAASH;OAAM;QAACA;QAAKG;KAAS;IACtE,IAAMsB,cAAc3B,OAAM0B,YAAY;QAAMd,OAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUV;OAAM;QAACA;QAAKU;KAAQ;IAC1E,IAAMgB,cAAc5B,OAAM0B,YAAY;QAAMb,OAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUX;OAAM;QAACA;QAAKW;KAAQ;IAE1Eb,OAAM6B,UAAU;QACd,IAAIlB,WAAWY,IAAIO,SAAS;YAC1BP,IAAIO,QAAQC,cAAc,IAAIC,MAAMC,2DAAkC;gBAAEC,SAAS;YAAK;YACtFX,IAAIO,QAAQK;QACd;IACF,GAAG;QAACxB;KAAQ;IAEZ,IAAIL,QAAQ;QACV,qBAAO,qBAAC8B;YAAIjB,SAAS;;IACvB;IAEA,qBACE,qBAACkB;QACClB,WAAWmB,IAAAA,qCAETpB,SAAS,kCACTf,mCACAC,YAAY,CAACG,yCACbE,sDACAC,kDACAH,yCACA,CAACU,gDACDE;QAEFoB,WAAW/B,SAAS;QACpBgC,WAAW;QACXf,SAASA;QACTlB,UAAUA;QACVkC,cAAY,IAAIC,KAAKC,eAAetB,QAAQ;YAC1CuB,SAAS;YACTC,MAAM;YACNC,OAAO;YACP5C,KAAK;QACP,GAAG6C,OAAO7C;QACV8C,UAAU,CAAC;QACXC,YAAY1B;QACZ2B,kBAAkB1C,SAAS,YAAY;QACvCI,SAASe;QACTd,SAASe;OACLR,sBAEJ,qBAACgB;QACCjB,WAAWmB,IAAAA,6CAETxB,6CACAC,oEACAC;qBAGF,qBAACoB;QACCjB,WAAWmB,IAAAA,4CAET9B,UAAU,CAACD;qBAGb,qBAAC6B;QAAIjB,SAAS;OAAsCjB,IAAIiD;AAKlE;AAGFpD,YAAYqD,cAAc"}
+{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  TappableElementProps,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport interface CalendarDayProps extends CalendarDayElementProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    className,\n    ...props\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div className={styles['CalendarDay__hidden']}></div>;\n    }\n\n    return (\n      <Tappable\n        className={classNames(\n          styles['CalendarDay'],\n          size === 's' && styles['CalendarDay--size-s'],\n          today && styles['CalendarDay--today'],\n          selected && !disabled && styles['CalendarDay--selected'],\n          selectionStart && styles['CalendarDay--selection-start'],\n          selectionEnd && styles['CalendarDay--selection-end'],\n          disabled && styles['CalendarDay--disabled'],\n          !sameMonth && styles['CalendarDay--not-same-month'],\n          className,\n        )}\n        hoverMode={active ? '' : styles['CalendarDay--hover']}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n        {...props}\n      >\n        <div\n          className={classNames(\n            styles['CalendarDay__hinted'],\n            hinted && styles['CalendarDay__hinted--active'],\n            hintedSelectionStart && styles['CalendarDay__hinted--selection-start'],\n            hintedSelectionEnd && styles['CalendarDay__hinted--selection-end'],\n          )}\n        >\n          <div\n            className={classNames(\n              styles['CalendarDay__inner'],\n              active && !disabled && styles['CalendarDay__inner--active'],\n            )}\n          >\n            <div className={styles['CalendarDay__day-number']}>{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["CalendarDay","React","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","props","locale","useConfigProvider","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","ENABLE_KEYBOARD_INPUT_EVENT_NAME","bubbles","focus","div","Tappable","classNames","hoverMode","hasActive","aria-label","Intl","DateTimeFormat","weekday","year","month","format","tabIndex","getRootRef","focusVisibleMode","getDate","displayName"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;+DAhCU;oBACI;uCACsB;qCACf;wBACa;AA4BxC,IAAMA,4BAAcC,OAAMC,IAAI,CACnC;QACEC,aAAAA,KACAC,eAAAA,OACAC,kBAAAA,UACAC,kBAAAA,UACAC,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,wBAAAA,gBACAC,sBAAAA,cACAC,iBAAAA,SACAC,iBAAAA,SACAC,iBAAAA,SACAC,gBAAAA,QACAC,8BAAAA,sBACAC,4BAAAA,oBACAC,mBAAAA,WACAC,cAAAA,MACAC,mBAAAA,WACGC;QAlBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,SAAWC,IAAAA,wCAAiB,IAA5BD;IACR,IAAME,MAAMvB,OAAMwB,MAAM,CAAc;IACtC,IAAMC,UAAUzB,OAAM0B,WAAW,CAAC;eAAMrB,SAASH;OAAM;QAACA;QAAKG;KAAS;IACtE,IAAMsB,cAAc3B,OAAM0B,WAAW,CAAC;YAAMd;gBAAAA,WAAAA,qBAAAA,+BAAAA,SAAUV;OAAM;QAACA;QAAKU;KAAQ;IAC1E,IAAMgB,cAAc5B,OAAM0B,WAAW,CAAC;YAAMb;gBAAAA,WAAAA,qBAAAA,+BAAAA,SAAUX;OAAM;QAACA;QAAKW;KAAQ;IAE1Eb,OAAM6B,SAAS,CAAC;QACd,IAAIlB,WAAWY,IAAIO,OAAO,EAAE;YAC1BP,IAAIO,OAAO,CAACC,aAAa,CAAC,IAAIC,MAAMC,yDAAgC,EAAE;gBAAEC,SAAS;YAAK;YACtFX,IAAIO,OAAO,CAACK,KAAK;QACnB;IACF,GAAG;QAACxB;KAAQ;IAEZ,IAAIL,QAAQ;QACV,qBAAO,qBAAC8B;YAAIjB,SAAS;;IACvB;IAEA,qBACE,qBAACkB,kBAAQ;QACPlB,WAAWmB,IAAAA,gBAAU,qBAEnBpB,SAAS,kCACTf,mCACAC,YAAY,CAACG,yCACbE,sDACAC,kDACAH,yCACA,CAACU,gDACDE;QAEFoB,WAAW/B,SAAS;QACpBgC,WAAW;QACXf,SAASA;QACTlB,UAAUA;QACVkC,cAAY,IAAIC,KAAKC,cAAc,CAACtB,QAAQ;YAC1CuB,SAAS;YACTC,MAAM;YACNC,OAAO;YACP5C,KAAK;QACP,GAAG6C,MAAM,CAAC7C;QACV8C,UAAU,CAAC;QACXC,YAAY1B;QACZ2B,kBAAkB1C,SAAS,YAAY;QACvCI,SAASe;QACTd,SAASe;OACLR,sBAEJ,qBAACgB;QACCjB,WAAWmB,IAAAA,gBAAU,6BAEnBxB,6CACAC,oEACAC;qBAGF,qBAACoB;QACCjB,WAAWmB,IAAAA,gBAAU,4BAEnB9B,UAAU,CAACD;qBAGb,qBAAC6B;QAAIjB,SAAS;OAAsCjB,IAAIiD,OAAO;AAKzE;AAGFpD,YAAYqD,WAAW,GAAG"}

package/dist/cjs/components/CalendarDays/CalendarDays.js

@@ -77,10 +77,11 @@ var CalendarDays = function(_param) {
             className: "vkuiCalendarDays__weekday"
         }, dayName);
     })), weeks.map(function(week, i) {
-        /*#__PURE__*/ return _react.createElement("div", {
+        return /*#__PURE__*/ _react.createElement("div", {
             className: (0, _vkjs.classNames)("vkuiCalendarDays__row", size === "s" && "vkuiCalendarDays__row--size-s"),
             key: i
         }, week.map(function(day, i) {
+            var _isHintedDaySelectionStart, _isHintedDaySelectionEnd, _isDaySelected, _isDayHinted;
             var sameMonth = (0, _date.isSameMonth)(day, viewDate);
             return /*#__PURE__*/ _react.createElement(_CalendarDay.CalendarDay, _object_spread._({
                 key: day.toISOString(),
@@ -92,13 +93,13 @@ var CalendarDays = function(_param) {
                 disabled: isDayDisabled(day),
                 selectionStart: isDaySelectionStart(day, i),
                 selectionEnd: isDaySelectionEnd(day, i),
-                hintedSelectionStart: isHintedDaySelectionStart === null || isHintedDaySelectionStart === void 0 ? void 0 : isHintedDaySelectionStart(day, i),
-                hintedSelectionEnd: isHintedDaySelectionEnd === null || isHintedDaySelectionEnd === void 0 ? void 0 : isHintedDaySelectionEnd(day, i),
-                selected: isDaySelected === null || isDaySelected === void 0 ? void 0 : isDaySelected(day),
+                hintedSelectionStart: (_isHintedDaySelectionStart = isHintedDaySelectionStart) === null || _isHintedDaySelectionStart === void 0 ? void 0 : _isHintedDaySelectionStart(day, i),
+                hintedSelectionEnd: (_isHintedDaySelectionEnd = isHintedDaySelectionEnd) === null || _isHintedDaySelectionEnd === void 0 ? void 0 : _isHintedDaySelectionEnd(day, i),
+                selected: (_isDaySelected = isDaySelected) === null || _isDaySelected === void 0 ? void 0 : _isDaySelected(day),
                 focused: isDayFocused(day),
                 onEnter: onDayEnter,
                 onLeave: onDayLeave,
-                hinted: isDayHinted === null || isDayHinted === void 0 ? void 0 : isDayHinted(day),
+                hinted: (_isDayHinted = isDayHinted) === null || _isDayHinted === void 0 ? void 0 : _isDayHinted(day),
                 sameMonth: sameMonth,
                 size: size
             }, dayProps));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { CalendarDay, CalendarDayElementProps } from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange(value: Date): void;\n  isDayDisabled(value: Date): boolean;\n  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;\n  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;\n  isDayActive(value: Date): boolean;\n  isDayHinted?(value: Date): boolean;\n  isDaySelected?(value: Date): boolean;\n  isDayFocused(value: Date): boolean;\n  onDayEnter?(value: Date): void;\n  onDayLeave?(value: Date): void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  className,\n  listenDayChangesForUpdate = false,\n  ...props\n}: CalendarDaysProps) => {\n  const { locale } = useConfigProvider();\n  const ref = React.useRef<HTMLDivElement>(null);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn],\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange],\n  );\n\n  return (\n    <div {...props} className={classNames(styles['CalendarDays'], className)} ref={ref}>\n      <div\n        className={classNames(\n          styles['CalendarDays__row'],\n          size === 's' && styles['CalendarDays__row--size-s'],\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles['CalendarDays__weekday']}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          className={classNames(\n            styles['CalendarDays__row'],\n            size === 's' && styles['CalendarDays__row--size-s'],\n          )}\n          key={i}\n        >\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                {...dayProps}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","locale","useConfigProvider","ref","React","useRef","now","useTodayDate","weeks","useMemo","getWeeks","daysNames","getDaysNames","handleDayChange","useCallback","date","current","focus","div","classNames","map","dayName","Footnote","key","week","i","day","sameMonth","isSameMonth","CalendarDay","toISOString","today","isSameDay","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;;+DAhCU;oBACI;4BACE;wBACU;oBACA;2BACc;qCACnB;wBACT;AAyBlB,IAAMA,eAAe;QAC1BC,kBAAAA,UACAC,eAAAA,OACAC,sBAAAA,cACAC,qBAAAA,aACAC,uBAAAA,eACAC,qBAAAA,aACAC,2BAAAA,mBACAC,6BAAAA,qBACAC,oBAAAA,YACAC,oBAAAA,YACAC,qBAAAA,aACAC,mCAAAA,2BACAC,iCAAAA,yBACAC,sBAAAA,cACAC,uBAAAA,eACAC,cAAAA,2CACAC,sBAAAA,gEAAuB,qCACvBC,kBAAAA,UACAC,mBAAAA,qDACAC,2BAAAA,0EAA4B,0CACzBC;QApBHpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,SAAWC,IAAAA,4CAAXD;IACR,IAAME,MAAMC,OAAMC,OAAuB;IACzC,IAAMC,MAAMC,IAAAA,4BAAaR;IAEzB,IAAMS,QAAQJ,OAAMK,QAAQ;eAAMC,IAAAA,oBAAS9B,UAAUE;OAAe;QAACA;QAAcF;KAAS;IAE5F,IAAM+B,YAAYP,OAAMK,QACtB;eAAMG,IAAAA,wBAAaN,KAAKxB,cAAcmB;OACtC;QAACA;QAAQK;QAAKxB;KAAa;IAG7B,IAAM+B,kBAAkBT,OAAMU,YAC5B,SAACC;YAGCZ;QAFApB,YAAYgC;QAEZZ,CAAAA,eAAAA,IAAIa,qBAAJb,0BAAAA,KAAAA,IAAAA,aAAac;IACf,GACA;QAAClC;KAAY;IAGf,qBACE,qBAACmC,mDAAQlB;QAAOF,WAAWqB,IAAAA,sCAAmCrB;QAAYK,KAAKA;sBAC7E,qBAACe;QACCpB,WAAWqB,IAAAA,2CAETxB,SAAS;OAGVgB,UAAUS,IAAI,SAACC;6BACd,qBAACC;YAASC,KAAKF;YAASvB,SAAS;WAC9BuB;SAKNb,MAAMY,IAAI,SAACI,MAAMC;sBAChB,OAAA,qBAACP;YACCpB,WAAWqB,IAAAA,2CAETxB,SAAS;YAEX4B,KAAKE;WAEJD,KAAKJ,IAAI,SAACM,KAAKD;YACd,IAAME,YAAYC,IAAAA,mBAAYF,KAAK9C;YACnC,qBACE,qBAACiD;gBACCN,KAAKG,IAAII;gBACTJ,KAAKA;gBACLK,OAAOC,IAAAA,iBAAUN,KAAKpB;gBACtB2B,QAAQhD,YAAYyC;gBACpBQ,UAAUrB;gBACVsB,QAAQ,CAACvC,wBAAwB,CAAC+B;gBAClCS,UAAU1C,cAAcgC;gBACxBW,gBAAgBlD,oBAAoBuC,KAAKD;gBACzCa,cAAcpD,kBAAkBwC,KAAKD;gBACrCc,oBAAoB,EAAEhD,sCAAAA,uCAAAA,KAAAA,IAAAA,0BAA4BmC,KAAKD;gBACvDe,kBAAkB,EAAEhD,oCAAAA,qCAAAA,KAAAA,IAAAA,wBAA0BkC,KAAKD;gBACnDgB,QAAQ,EAAEzD,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAgB0C;gBAC1BgB,SAASjD,aAAaiC;gBACtBiB,SAASvD;gBACTwD,SAASvD;gBACTwD,MAAM,EAAEvD,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAcoC;gBACtBC,WAAWA;gBACXhC,MAAMA;eACFE;QAGV;;AAKV"}
+{"version":3,"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { CalendarDay, CalendarDayElementProps } from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange(value: Date): void;\n  isDayDisabled(value: Date): boolean;\n  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;\n  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;\n  isDayActive(value: Date): boolean;\n  isDayHinted?(value: Date): boolean;\n  isDaySelected?(value: Date): boolean;\n  isDayFocused(value: Date): boolean;\n  onDayEnter?(value: Date): void;\n  onDayLeave?(value: Date): void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  className,\n  listenDayChangesForUpdate = false,\n  ...props\n}: CalendarDaysProps) => {\n  const { locale } = useConfigProvider();\n  const ref = React.useRef<HTMLDivElement>(null);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn],\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange],\n  );\n\n  return (\n    <div {...props} className={classNames(styles['CalendarDays'], className)} ref={ref}>\n      <div\n        className={classNames(\n          styles['CalendarDays__row'],\n          size === 's' && styles['CalendarDays__row--size-s'],\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles['CalendarDays__weekday']}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          className={classNames(\n            styles['CalendarDays__row'],\n            size === 's' && styles['CalendarDays__row--size-s'],\n          )}\n          key={i}\n        >\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                {...dayProps}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","locale","useConfigProvider","ref","React","useRef","now","useTodayDate","weeks","useMemo","getWeeks","daysNames","getDaysNames","handleDayChange","useCallback","date","current","focus","div","classNames","map","dayName","Footnote","key","week","i","day","sameMonth","isSameMonth","CalendarDay","toISOString","today","isSameDay","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;;+DAhCU;oBACI;4BACE;wBACU;oBACA;2BACc;qCACnB;wBACT;AAyBlB,IAAMA,eAAe;QAC1BC,kBAAAA,UACAC,eAAAA,OACAC,sBAAAA,cACAC,qBAAAA,aACAC,uBAAAA,eACAC,qBAAAA,aACAC,2BAAAA,mBACAC,6BAAAA,qBACAC,oBAAAA,YACAC,oBAAAA,YACAC,qBAAAA,aACAC,mCAAAA,2BACAC,iCAAAA,yBACAC,sBAAAA,cACAC,uBAAAA,eACAC,cAAAA,2CACAC,sBAAAA,gEAAuB,qCACvBC,kBAAAA,UACAC,mBAAAA,qDACAC,2BAAAA,0EAA4B,0CACzBC;QApBHpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,SAAWC,IAAAA,wCAAiB,IAA5BD;IACR,IAAME,MAAMC,OAAMC,MAAM,CAAiB;IACzC,IAAMC,MAAMC,IAAAA,0BAAY,EAACR;IAEzB,IAAMS,QAAQJ,OAAMK,OAAO,CAAC;eAAMC,IAAAA,kBAAQ,EAAC9B,UAAUE;OAAe;QAACA;QAAcF;KAAS;IAE5F,IAAM+B,YAAYP,OAAMK,OAAO,CAC7B;eAAMG,IAAAA,sBAAY,EAACN,KAAKxB,cAAcmB;OACtC;QAACA;QAAQK;QAAKxB;KAAa;IAG7B,IAAM+B,kBAAkBT,OAAMU,WAAW,CACvC,SAACC;YAGCZ;QAFApB,YAAYgC;SAEZZ,eAAAA,IAAIa,OAAO,cAAXb,mCAAAA,aAAac,KAAK;IACpB,GACA;QAAClC;KAAY;IAGf,qBACE,qBAACmC,mDAAQlB;QAAOF,WAAWqB,IAAAA,gBAAU,sBAAyBrB;QAAYK,KAAKA;sBAC7E,qBAACe;QACCpB,WAAWqB,IAAAA,gBAAU,2BAEnBxB,SAAS;OAGVgB,UAAUS,GAAG,CAAC,SAACC;6BACd,qBAACC,kBAAQ;YAACC,KAAKF;YAASvB,SAAS;WAC9BuB;SAKNb,MAAMY,GAAG,CAAC,SAACI,MAAMC;6BAChB,qBAACP;YACCpB,WAAWqB,IAAAA,gBAAU,2BAEnBxB,SAAS;YAEX4B,KAAKE;WAEJD,KAAKJ,GAAG,CAAC,SAACM,KAAKD;gBAaYlC,4BACFC,0BACVR,gBAIFM;YAlBZ,IAAMqC,YAAYC,IAAAA,iBAAW,EAACF,KAAK9C;YACnC,qBACE,qBAACiD,wBAAW;gBACVN,KAAKG,IAAII,WAAW;gBACpBJ,KAAKA;gBACLK,OAAOC,IAAAA,eAAS,EAACN,KAAKpB;gBACtB2B,QAAQhD,YAAYyC;gBACpBQ,UAAUrB;gBACVsB,QAAQ,CAACvC,wBAAwB,CAAC+B;gBAClCS,UAAU1C,cAAcgC;gBACxBW,gBAAgBlD,oBAAoBuC,KAAKD;gBACzCa,cAAcpD,kBAAkBwC,KAAKD;gBACrCc,oBAAoB,GAAEhD,6BAAAA,uCAAAA,iDAAAA,2BAA4BmC,KAAKD;gBACvDe,kBAAkB,GAAEhD,2BAAAA,qCAAAA,+CAAAA,yBAA0BkC,KAAKD;gBACnDgB,QAAQ,GAAEzD,iBAAAA,2BAAAA,qCAAAA,eAAgB0C;gBAC1BgB,SAASjD,aAAaiC;gBACtBiB,SAASvD;gBACTwD,SAASvD;gBACTwD,MAAM,GAAEvD,eAAAA,yBAAAA,mCAAAA,aAAcoC;gBACtBC,WAAWA;gBACXhC,MAAMA;eACFE;QAGV;;AAKV"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;\n\nexport interface CalendarHeaderProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthAriaLabel = 'Предыдущий месяц',\n  nextMonthAriaLabel = 'Следующий месяц',\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles['CalendarHeader__month']}>{label}</span>,\n      })),\n    [locale],\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  return (\n    <div className={classNames(styles['CalendarHeader'], className)}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-prev'],\n              prevMonthClassName,\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}\n            {...restPrevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(\n            styles['CalendarHeader__pickers'],\n            'vkuiInternalCalendarHeader__pickers',\n          )}\n          weight=\"2\"\n        >\n          <span className={styles['CalendarHeader__month']}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div\n            className={classNames(\n              styles['CalendarHeader__pickers'],\n              'vkuiInternalCalendarHeader__pickers',\n            )}\n          >\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-next'],\n              nextMonthClassName,\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}\n            {...restNextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"names":["CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","Icon20ChevronLeftOutline","width","height","nextMonthIcon","Icon20ChevronRightOutline","locale","useConfigProvider","onMonthsChange","React","useCallback","event","setMonth","Number","target","value","onYearChange","setYear","months","useMemo","getMonths","map","label","span","currentYear","getFullYear","years","getYears","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","div","classNames","AdaptivityProvider","sizeX","SizeType","REGULAR","Tappable","onClick","aria-label","format","subMonths","Paragraph","weight","sizeY","COMPACT","CustomSelect","getMonth","options","dropdownOffsetDistance","fixDropdownWidth","icon","Icon12Dropdown","forceDropdownPortal","selectType","addMonths"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;+DA5CU;qBAKhB;oBACoB;0BACF;wBACW;oBACoB;kCACrB;qCACD;4BACL;wBACkB;yBACrB;AA8BnB,IAAMA,iBAAiB;QAC5BC,iBAAAA,UACAC,iBAAAA,mCACAC,WAAAA,0CAAY,kDACZC,WAAAA,0CAAY,uDACZC,gBAAAA,oDAAiB,+BACjBC,oBAAAA,aACAC,oBAAAA,aACAC,kBAAAA,yCACAC,gBAAAA,oDAAiB,CAAC,yDAClBC,gBAAAA,oDAAiB,CAAC,6DAClBC,oBAAAA,4DAAqB,kFACrBC,oBAAAA,4DAAqB,mFACrBC,sBAAAA,gEAAuB,mFACvBC,qBAAAA,8DAAsB,0EACtBC,eAAAA,gEACE,qBAACC;QACCR,SAAS;QACTS,OAAO;QACPC,QAAQ;4DAGZC,eAAAA,gEACE,qBAACC;QACCZ,SAAS;QACTS,OAAO;QACPC,QAAQ;;IAIZ,IAAM,AAAEG,SAAWC,IAAAA,4CAAXD;IACR,IAAME,iBAAiBC,OAAMC,YAC3B,SAACC;eACCxB,SAASyB,IAAAA,gBAAS1B,UAAU2B,OAAOF,MAAMG,OAAOC;OAClD;QAAC5B;QAAUD;KAAS;IAEtB,IAAM8B,eAAeP,OAAMC,YACzB,SAACC;eACCxB,SAAS8B,IAAAA,eAAQ/B,UAAU2B,OAAOF,MAAMG,OAAOC;OACjD;QAAC5B;QAAUD;KAAS;IAGtB,IAAMgC,SAAST,OAAMU,QACnB;eACEC,IAAAA,qBAAUd,QAAQe,IAAI;gBAAGN,cAAAA,OAAOO,cAAAA;mBAAa;gBAC3CP,OAAAA;gBACAO,qBAAO,qBAACC;oBAAK9B,SAAS;mBAAoC6B;YAC5D;;OACF;QAAChB;KAAO;IAGV,IAAMkB,cAActC,SAASuC;IAE7B,IAAMC,QAAQjB,OAAMU,QAAQ;eAAMQ,IAAAA,oBAASH,aAAa;OAAM;QAACA;KAAY;IAE3E,IAAMI,YAAY,IAAIC,KAAKC,eAAexB,QAAQ;QAChDyB,MAAM;QACNC,OAAO;IACT;IAEA,IAAQvC,AAAWwC,qBAA8CvC,eAAzDD,WAAkCyC,kDAAuBxC;QAAzDD;;IACR,IAAQA,AAAW0C,qBAA8CxC,eAAzDF,WAAkC2C,kDAAuBzC;QAAzDF;;IAER,qBACE,qBAAC4C;QAAI5C,WAAW6C,IAAAA,wCAAqC7C;OAClDL,2BACC,qBAACmD;QAAmBC,OAAOC,qBAASC;qBAClC,qBAACC;QACClD,WAAW6C,IAAAA,uFAGTL;QAEFW,SAASpD;QACTqD,cAAY,AAAC,GAAyBjB,OAAvBhC,oBAAmB,MAA6C,OAAzCgC,UAAUkB,OAAOC,IAAAA,iBAAU7D,UAAU;OACvEgD,qBAEHlC,iBAINV,+BACC,qBAAC0D;QACCvD,WAAW6C,IAAAA,iDAET;QAEFW,QAAO;qBAEP,qBAAC1B;QAAK9B,SAAS;OACZ,IAAIoC,KAAKC,eAAexB,QAAQ;QAC/B0B,OAAO;IACT,GAAGc,OAAO5D,YACL,QAEN,IAAI2C,KAAKC,eAAexB,QAAQ;QAC/ByB,MAAM;IACR,GAAGe,OAAO5D,2BAGZ,qBAACqD;QAAmBW,OAAOT,qBAASU;qBAClC,qBAACd;QACC5C,WAAW6C,IAAAA,iDAET;qBAGF,qBAACc;QACC3D,WAAW6C,IAAAA,gDAET;QAEFvB,OAAO7B,SAASmE;QAChBC,SAASpC;QACTqC,wBAAwB;QACxBC,kBAAkB;QAClBC,oBAAM,qBAACC;QACPvE,UAAUqB;QACVmD,qBAAqB;QACrBC,YAAW;QACXf,cAAY/C;sBAEd,qBAACsD;QACC3D,WAAW6C,IAAAA,gDAET;QAEFvB,OAAO7B,SAASuC;QAChB6B,SAAS5B;QACT6B,wBAAwB;QACxBC,kBAAkB;QAClBC,oBAAM,qBAACC;QACPvE,UAAU6B;QACV2C,qBAAqB;QACrBC,YAAW;QACXf,cAAY9C;UAKnBV,2BACC,qBAACkD;QAAmBC,OAAOC,qBAASC;qBAClC,qBAACC;QACClD,WAAW6C,IAAAA,uFAGTH;QAEFS,SAASrD;QACTsD,cAAY,AAAC,GAAyBjB,OAAvB/B,oBAAmB,MAA6C,OAAzC+B,UAAUkB,OAAOe,IAAAA,iBAAU3E,UAAU;OACvEkD,qBAEHhC;AAMb"}
+{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;\n\nexport interface CalendarHeaderProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthAriaLabel = 'Предыдущий месяц',\n  nextMonthAriaLabel = 'Следующий месяц',\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles['CalendarHeader__month']}>{label}</span>,\n      })),\n    [locale],\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  return (\n    <div className={classNames(styles['CalendarHeader'], className)}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-prev'],\n              prevMonthClassName,\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}\n            {...restPrevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(\n            styles['CalendarHeader__pickers'],\n            'vkuiInternalCalendarHeader__pickers',\n          )}\n          weight=\"2\"\n        >\n          <span className={styles['CalendarHeader__month']}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div\n            className={classNames(\n              styles['CalendarHeader__pickers'],\n              'vkuiInternalCalendarHeader__pickers',\n            )}\n          >\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-next'],\n              nextMonthClassName,\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}\n            {...restNextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"names":["CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","Icon20ChevronLeftOutline","width","height","nextMonthIcon","Icon20ChevronRightOutline","locale","useConfigProvider","onMonthsChange","React","useCallback","event","setMonth","Number","target","value","onYearChange","setYear","months","useMemo","getMonths","map","label","span","currentYear","getFullYear","years","getYears","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","div","classNames","AdaptivityProvider","sizeX","SizeType","REGULAR","Tappable","onClick","aria-label","format","subMonths","Paragraph","weight","sizeY","COMPACT","CustomSelect","getMonth","options","dropdownOffsetDistance","fixDropdownWidth","icon","Icon12Dropdown","forceDropdownPortal","selectType","addMonths"],"mappings":"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"}

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

@@ -21,7 +21,8 @@ var _date = require("../../lib/date");
 var _CalendarDays = require("../CalendarDays/CalendarDays");
 var _CalendarHeader = require("../CalendarHeader/CalendarHeader");
 var getIsDaySelected = function(day, value) {
-    if (!(value === null || value === void 0 ? void 0 : value[0]) || !value[1]) {
+    var _value;
+    if (!((_value = value) === null || _value === void 0 ? void 0 : _value[0]) || !value[1]) {
         return false;
     }
     return Boolean((0, _date.isWithinInterval)(day, (0, _date.startOfDay)(value[0]), (0, _date.endOfDay)(value[1])));
@@ -56,6 +57,7 @@ var CalendarRange = function(_param) {
     var _React_useState = _sliced_to_array._(_react.useState(), 2), hintedDate = _React_useState[0], setHintedDate = _React_useState[1];
     var secondViewDate = (0, _date.addMonths)(viewDate, 1);
     var handleKeyDown = _react.useCallback(function(event) {
+        var _value;
         if ([
             "ArrowUp",
             "ArrowDown",
@@ -64,7 +66,7 @@ var CalendarRange = function(_param) {
         ].includes(event.key)) {
             event.preventDefault();
         }
-        var newFocusedDay = (0, _calendar.navigateDate)(focusedDay !== null && focusedDay !== void 0 ? focusedDay : value === null || value === void 0 ? void 0 : value[1], event.key);
+        var newFocusedDay = (0, _calendar.navigateDate)(focusedDay !== null && focusedDay !== void 0 ? focusedDay : (_value = value) === null || _value === void 0 ? void 0 : _value[1], event.key);
         if (newFocusedDay && !(0, _date.isSameMonth)(newFocusedDay, viewDate) && !(0, _date.isSameMonth)(newFocusedDay, (0, _date.addMonths)(viewDate, 1))) {
             setViewDate(newFocusedDay);
         }
@@ -106,7 +108,8 @@ var CalendarRange = function(_param) {
         value
     ]);
     var onDayChange = _react.useCallback(function(date) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(getNewValue(date));
+        var _onChange;
+        (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(getNewValue(date));
         setHintedDate(undefined);
     }, [
         onChange,
@@ -118,27 +121,32 @@ var CalendarRange = function(_param) {
         value
     ]);
     var isDayActive = _react.useCallback(function(day) {
-        return Boolean((value === null || value === void 0 ? void 0 : value[0]) && (0, _date.isSameDay)(day, value[0]) || (value === null || value === void 0 ? void 0 : value[1]) && (0, _date.isSameDay)(day, value[1]));
+        var _value, _value1;
+        return Boolean(((_value = value) === null || _value === void 0 ? void 0 : _value[0]) && (0, _date.isSameDay)(day, value[0]) || ((_value1 = value) === null || _value1 === void 0 ? void 0 : _value1[1]) && (0, _date.isSameDay)(day, value[1]));
     }, [
         value
     ]);
     var isDaySelectionEnd = _react.useCallback(function(day, dayOfWeek) {
-        return Boolean((0, _calendar.isLastDay)(day, dayOfWeek) || (value === null || value === void 0 ? void 0 : value[1]) && (0, _date.isSameDay)(day, value[1]));
+        var _value;
+        return Boolean((0, _calendar.isLastDay)(day, dayOfWeek) || ((_value = value) === null || _value === void 0 ? void 0 : _value[1]) && (0, _date.isSameDay)(day, value[1]));
     }, [
         value
     ]);
     var isHintedDaySelectionEnd = _react.useCallback(function(day, dayOfWeek) {
-        return Boolean((0, _calendar.isLastDay)(day, dayOfWeek) || (hintedDate === null || hintedDate === void 0 ? void 0 : hintedDate[1]) && (0, _date.isSameDay)(day, hintedDate[1]));
+        var _hintedDate;
+        return Boolean((0, _calendar.isLastDay)(day, dayOfWeek) || ((_hintedDate = hintedDate) === null || _hintedDate === void 0 ? void 0 : _hintedDate[1]) && (0, _date.isSameDay)(day, hintedDate[1]));
     }, [
         hintedDate
     ]);
     var isDaySelectionStart = _react.useCallback(function(day, dayOfWeek) {
-        return Boolean((0, _calendar.isFirstDay)(day, dayOfWeek) || (value === null || value === void 0 ? void 0 : value[0]) && (0, _date.isSameDay)(day, value[0]));
+        var _value;
+        return Boolean((0, _calendar.isFirstDay)(day, dayOfWeek) || ((_value = value) === null || _value === void 0 ? void 0 : _value[0]) && (0, _date.isSameDay)(day, value[0]));
     }, [
         value
     ]);
     var isHintedDaySelectionStart = _react.useCallback(function(day, dayOfWeek) {
-        return Boolean((0, _calendar.isFirstDay)(day, dayOfWeek) || (hintedDate === null || hintedDate === void 0 ? void 0 : hintedDate[0]) && (0, _date.isSameDay)(day, hintedDate[0]));
+        var _hintedDate;
+        return Boolean((0, _calendar.isFirstDay)(day, dayOfWeek) || ((_hintedDate = hintedDate) === null || _hintedDate === void 0 ? void 0 : _hintedDate[0]) && (0, _date.isSameDay)(day, hintedDate[0]));
     }, [
         hintedDate
     ]);

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 { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  startOfDay,\n} from '../../lib/date';\nimport { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport styles from './CalendarRange.module.css';\n\nexport interface CalendarRangeProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Array<Date | null>;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?(value?: Array<Date | null>): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: Array<Date | null>) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return Boolean(isWithinInterval(day, startOfDay(value[0]), 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  getRootRef,\n  disablePickers,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeDayAriaLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarRangeProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n  const [hintedDate, setHintedDate] = React.useState<Array<Date | null>>();\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) => {\n      if (!value) {\n        return [date, null];\n      }\n\n      const start = value[0];\n      const end = value[1];\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\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  return (\n    <div {...props} ref={getRootRef} className={classNames(styles['CalendarRange'], className)}>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonth={false}\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthAriaLabel={prevMonthAriaLabel}\n          nextMonthAriaLabel={nextMonthAriaLabel}\n          changeMonthAriaLabel={changeMonthAriaLabel}\n          changeYearAriaLabel={changeYearAriaLabel}\n          prevMonthIcon={prevMonthIcon}\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={changeDayAriaLabel}\n        />\n      </div>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={setViewDate}\n          prevMonth={false}\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthAriaLabel={prevMonthAriaLabel}\n          nextMonthAriaLabel={nextMonthAriaLabel}\n          changeMonthAriaLabel={changeMonthAriaLabel}\n          changeYearAriaLabel={changeYearAriaLabel}\n          nextMonthIcon={nextMonthIcon}\n        />\n        <CalendarDays\n          viewDate={secondViewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          aria-label={changeDayAriaLabel}\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    </div>\n  );\n};\n"],"names":["CalendarRange","getIsDaySelected","day","value","Boolean","isWithinInterval","startOfDay","endOfDay","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","className","listenDayChangesForUpdate","props","useCalendar","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","React","useState","hintedDate","setHintedDate","secondViewDate","addMonths","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","getNewValue","date","start","end","isSameDay","setTimeEqual","isBefore","isAfter","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isLastDay","isHintedDaySelectionEnd","isDaySelectionStart","isFirstDay","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","div","ref","classNames","CalendarHeader","nextMonth","onPrevMonth","CalendarDays","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  startOfDay,\n} from '../../lib/date';\nimport { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport styles from './CalendarRange.module.css';\n\nexport interface CalendarRangeProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Array<Date | null>;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?(value?: Array<Date | null>): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: Array<Date | null>) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return Boolean(isWithinInterval(day, startOfDay(value[0]), 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  getRootRef,\n  disablePickers,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeDayAriaLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarRangeProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n  const [hintedDate, setHintedDate] = React.useState<Array<Date | null>>();\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) => {\n      if (!value) {\n        return [date, null];\n      }\n\n      const start = value[0];\n      const end = value[1];\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\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  return (\n    <div {...props} ref={getRootRef} className={classNames(styles['CalendarRange'], className)}>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonth={false}\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthAriaLabel={prevMonthAriaLabel}\n          nextMonthAriaLabel={nextMonthAriaLabel}\n          changeMonthAriaLabel={changeMonthAriaLabel}\n          changeYearAriaLabel={changeYearAriaLabel}\n          prevMonthIcon={prevMonthIcon}\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={changeDayAriaLabel}\n        />\n      </div>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={setViewDate}\n          prevMonth={false}\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthAriaLabel={prevMonthAriaLabel}\n          nextMonthAriaLabel={nextMonthAriaLabel}\n          changeMonthAriaLabel={changeMonthAriaLabel}\n          changeYearAriaLabel={changeYearAriaLabel}\n          nextMonthIcon={nextMonthIcon}\n        />\n        <CalendarDays\n          viewDate={secondViewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          aria-label={changeDayAriaLabel}\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    </div>\n  );\n};\n"],"names":["CalendarRange","getIsDaySelected","day","value","Boolean","isWithinInterval","startOfDay","endOfDay","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","className","listenDayChangesForUpdate","props","useCalendar","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","React","useState","hintedDate","setHintedDate","secondViewDate","addMonths","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","getNewValue","date","start","end","isSameDay","setTimeEqual","isBefore","isAfter","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isLastDay","isHintedDaySelectionEnd","isDaySelectionStart","isFirstDay","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","div","ref","classNames","CalendarHeader","nextMonth","onPrevMonth","CalendarDays","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}

package/dist/cjs/components/CalendarTime/CalendarTime.js

@@ -32,13 +32,15 @@ for(var i1 = 0; i1 < 60; i1 += 1){
 var CalendarTime = function(param) {
     var value = param.value, _param_doneButtonText = param.doneButtonText, doneButtonText = _param_doneButtonText === void 0 ? "Готово" : _param_doneButtonText, onChange = param.onChange, onClose = param.onClose, _param_changeHoursAriaLabel = param.changeHoursAriaLabel, changeHoursAriaLabel = _param_changeHoursAriaLabel === void 0 ? "Изменить час" : _param_changeHoursAriaLabel, _param_changeMinutesAriaLabel = param.changeMinutesAriaLabel, changeMinutesAriaLabel = _param_changeMinutesAriaLabel === void 0 ? "Изменить минуту" : _param_changeMinutesAriaLabel;
     var onHoursChange = _react.useCallback(function(event) {
-        return onChange === null || onChange === void 0 ? void 0 : onChange((0, _date.setHours)(value, Number(event.target.value)));
+        var _onChange;
+        return (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange((0, _date.setHours)(value, Number(event.target.value)));
     }, [
         onChange,
         value
     ]);
     var onMinutesChange = _react.useCallback(function(event) {
-        return onChange === null || onChange === void 0 ? void 0 : onChange((0, _date.setMinutes)(value, Number(event.target.value)));
+        var _onChange;
+        return (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange((0, _date.setMinutes)(value, Number(event.target.value)));
     }, [
         onChange,
         value

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SizeType } from '../../lib/adaptivity';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button } from '../Button/Button';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport styles from './CalendarTime.module.css';\n\nexport interface CalendarTimeProps {\n  value: Date;\n  doneButtonText?: string;\n  changeHoursAriaLabel?: string;\n  changeMinutesAriaLabel?: string;\n  onChange?(value: Date): void;\n  onClose?(): void;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n  value,\n  doneButtonText = 'Готово',\n  onChange,\n  onClose,\n  changeHoursAriaLabel = 'Изменить час',\n  changeMinutesAriaLabel = 'Изменить минуту',\n}: CalendarTimeProps) => {\n  const onHoursChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setHours(value, Number(event.target.value))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setMinutes(value, Number(event.target.value))),\n    [onChange, value],\n  );\n\n  return (\n    <div className={styles['CalendarTime']}>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getHours()}\n            options={hours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            aria-label={changeHoursAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__divider']}>:</div>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getMinutes()}\n            options={minutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            aria-label={changeMinutesAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__button']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <Button mode=\"secondary\" onClick={onClose} size=\"l\" aria-label={doneButtonText}>\n            {doneButtonText}\n          </Button>\n        </AdaptivityProvider>\n      </div>\n    </div>\n  );\n};\n"],"names":["CalendarTime","hours","i","push","value","label","String","padStart","minutes","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","React","useCallback","event","setHours","Number","target","onMinutesChange","setMinutes","div","className","AdaptivityProvider","sizeY","SizeType","COMPACT","CustomSelect","getHours","options","forceDropdownPortal","aria-label","getMinutes","Button","mode","onClick","size"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;+DAjCU;0BACE;oBACY;kCACF;sBACZ;4BACM;AAY7B,IAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,KAAK;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,SAAS,GAAG;IAAK;AAC3D;AAEA,IAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,KAAI,GAAGA,KAAI,IAAIA,MAAK,EAAG;IAC9BM,QAAQL,KAAK;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,IAAGK,SAAS,GAAG;IAAK;AAC7D;AAEO,IAAMP,eAAe;QAC1BI,cAAAA,qCACAK,gBAAAA,oDAAiB,kCACjBC,iBAAAA,UACAC,gBAAAA,6CACAC,sBAAAA,gEAAuB,oFACvBC,wBAAAA,oEAAyB;IAEzB,IAAMC,gBAAgBC,OAAMC,YAC1B,SAACC;QACCP,OAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWQ,IAAAA,gBAASd,OAAOe,OAAOF,MAAMG,OAAOhB;OACjD;QAACM;QAAUN;KAAM;IAEnB,IAAMiB,kBAAkBN,OAAMC,YAC5B,SAACC;QACCP,OAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWY,IAAAA,kBAAWlB,OAAOe,OAAOF,MAAMG,OAAOhB;OACnD;QAACM;QAAUN;KAAM;IAGnB,qBACE,qBAACmB;QAAIC,SAAS;qBACZ,qBAACD;QAAIC,SAAS;qBACZ,qBAACC;QAAmBC,OAAOC,qBAASC;qBAClC,qBAACC;QACCzB,OAAOA,MAAM0B;QACbC,SAAS9B;QACTS,UAAUI;QACVkB,qBAAqB;QACrBC,cAAYrB;wBAIlB,qBAACW;QAAIC,SAAS;OAAmC,oBACjD,qBAACD;QAAIC,SAAS;qBACZ,qBAACC;QAAmBC,OAAOC,qBAASC;qBAClC,qBAACC;QACCzB,OAAOA,MAAM8B;QACbH,SAASvB;QACTE,UAAUW;QACVW,qBAAqB;QACrBC,cAAYpB;wBAIlB,qBAACU;QAAIC,SAAS;qBACZ,qBAACC;QAAmBC,OAAOC,qBAASC;qBAClC,qBAACO;QAAOC,MAAK;QAAYC,SAAS1B;QAAS2B,MAAK;QAAIL,cAAYxB;OAC7DA;AAMb"}
+{"version":3,"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SizeType } from '../../lib/adaptivity';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button } from '../Button/Button';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport styles from './CalendarTime.module.css';\n\nexport interface CalendarTimeProps {\n  value: Date;\n  doneButtonText?: string;\n  changeHoursAriaLabel?: string;\n  changeMinutesAriaLabel?: string;\n  onChange?(value: Date): void;\n  onClose?(): void;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n  value,\n  doneButtonText = 'Готово',\n  onChange,\n  onClose,\n  changeHoursAriaLabel = 'Изменить час',\n  changeMinutesAriaLabel = 'Изменить минуту',\n}: CalendarTimeProps) => {\n  const onHoursChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setHours(value, Number(event.target.value))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setMinutes(value, Number(event.target.value))),\n    [onChange, value],\n  );\n\n  return (\n    <div className={styles['CalendarTime']}>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getHours()}\n            options={hours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            aria-label={changeHoursAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__divider']}>:</div>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getMinutes()}\n            options={minutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            aria-label={changeMinutesAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__button']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <Button mode=\"secondary\" onClick={onClose} size=\"l\" aria-label={doneButtonText}>\n            {doneButtonText}\n          </Button>\n        </AdaptivityProvider>\n      </div>\n    </div>\n  );\n};\n"],"names":["CalendarTime","hours","i","push","value","label","String","padStart","minutes","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","React","useCallback","event","setHours","Number","target","onMinutesChange","setMinutes","div","className","AdaptivityProvider","sizeY","SizeType","COMPACT","CustomSelect","getHours","options","forceDropdownPortal","aria-label","getMinutes","Button","mode","onClick","size"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;+DAjCU;0BACE;oBACY;kCACF;sBACZ;4BACM;AAY7B,IAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC3D;AAEA,IAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,KAAI,GAAGA,KAAI,IAAIA,MAAK,EAAG;IAC9BM,QAAQL,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,IAAGK,QAAQ,CAAC,GAAG;IAAK;AAC7D;AAEO,IAAMP,eAAe;QAC1BI,cAAAA,qCACAK,gBAAAA,oDAAiB,kCACjBC,iBAAAA,UACAC,gBAAAA,6CACAC,sBAAAA,gEAAuB,oFACvBC,wBAAAA,oEAAyB;IAEzB,IAAMC,gBAAgBC,OAAMC,WAAW,CACrC,SAACC;YACCP;gBAAAA,YAAAA,sBAAAA,gCAAAA,UAAWQ,IAAAA,cAAQ,EAACd,OAAOe,OAAOF,MAAMG,MAAM,CAAChB,KAAK;OACtD;QAACM;QAAUN;KAAM;IAEnB,IAAMiB,kBAAkBN,OAAMC,WAAW,CACvC,SAACC;YACCP;gBAAAA,YAAAA,sBAAAA,gCAAAA,UAAWY,IAAAA,gBAAU,EAAClB,OAAOe,OAAOF,MAAMG,MAAM,CAAChB,KAAK;OACxD;QAACM;QAAUN;KAAM;IAGnB,qBACE,qBAACmB;QAAIC,SAAS;qBACZ,qBAACD;QAAIC,SAAS;qBACZ,qBAACC,sCAAkB;QAACC,OAAOC,oBAAQ,CAACC,OAAO;qBACzC,qBAACC,0BAAY;QACXzB,OAAOA,MAAM0B,QAAQ;QACrBC,SAAS9B;QACTS,UAAUI;QACVkB,qBAAqB;QACrBC,cAAYrB;wBAIlB,qBAACW;QAAIC,SAAS;OAAmC,oBACjD,qBAACD;QAAIC,SAAS;qBACZ,qBAACC,sCAAkB;QAACC,OAAOC,oBAAQ,CAACC,OAAO;qBACzC,qBAACC,0BAAY;QACXzB,OAAOA,MAAM8B,UAAU;QACvBH,SAASvB;QACTE,UAAUW;QACVW,qBAAqB;QACrBC,cAAYpB;wBAIlB,qBAACU;QAAIC,SAAS;qBACZ,qBAACC,sCAAkB;QAACC,OAAOC,oBAAQ,CAACC,OAAO;qBACzC,qBAACO,cAAM;QAACC,MAAK;QAAYC,SAAS1B;QAAS2B,MAAK;QAAIL,cAAYxB;OAC7DA;AAMb"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Card.module.css';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Card","mode","children","getRootRef","className","restProps","div","ref","classNames"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;oBACI;AAapB,IAAMA,OAAO;6BAClBC,MAAAA,gCAAO,sBACPC,kBAAAA,UACAC,oBAAAA,YACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,mDACKD;QACJE,KAAKJ;QACLC,WAAWI,IAAAA,8BAETP,SAAS,uCACTA,SAAS,qCACTG;QAGDF;AAGP"}
+{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Card.module.css';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Card","mode","children","getRootRef","className","restProps","div","ref","classNames"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;oBACI;AAapB,IAAMA,OAAO;6BAClBC,MAAAA,gCAAO,sBACPC,kBAAAA,UACAC,oBAAAA,YACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,mDACKD;QACJE,KAAKJ;QACLC,WAAWI,IAAAA,gBAAU,cAEnBP,SAAS,uCACTA,SAAS,qCACTG;QAGDF;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\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  children,\n  size = 's',\n  spaced = false,\n  className,\n  ...restProps\n}: CardGridProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardGrid'],\n        'vkuiInternalCardGrid',\n        spaced && styles['CardGrid--spaced'],\n        {\n          s: 'vkuiInternalCardGrid--size-s',\n          m: 'vkuiInternalCardGrid--size-m',\n          l: 'vkuiInternalCardGrid--size-l',\n        }[size],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["CardGrid","sizeXClassNames","none","SizeType","COMPACT","children","size","spaced","className","restProps","useAdaptivity","sizeX","div","classNames","s","m","l","REGULAR"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;;+DAtBU;oBACI;6BACG;0BACL;AAGzB,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAcL,IAAMJ,WAAW;QACtBK,kBAAAA,+BACAC,MAAAA,gCAAO,0CACPC,QAAAA,oCAAS,uBACTC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,mDACKH;QACJD,WAAWK,IAAAA,kCAET,wBACAN,kCACA;YACEO,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAC,CAACV,KAAK,EACPK,UAAUR,qBAASc,WAAWhB,eAAe,CAACU,MAAM,EACpDH;QAGDH;AAGP"}
+{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\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  children,\n  size = 's',\n  spaced = false,\n  className,\n  ...restProps\n}: CardGridProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardGrid'],\n        'vkuiInternalCardGrid',\n        spaced && styles['CardGrid--spaced'],\n        {\n          s: 'vkuiInternalCardGrid--size-s',\n          m: 'vkuiInternalCardGrid--size-m',\n          l: 'vkuiInternalCardGrid--size-l',\n        }[size],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["CardGrid","sizeXClassNames","none","SizeType","COMPACT","children","size","spaced","className","restProps","useAdaptivity","sizeX","div","classNames","s","m","l","REGULAR"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;;+DAtBU;oBACI;6BACG;0BACL;AAGzB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAcZ,IAAMJ,WAAW;QACtBK,kBAAAA,+BACAC,MAAAA,gCAAO,0CACPC,QAAAA,oCAAS,uBACTC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,mDACKH;QACJD,WAAWK,IAAAA,gBAAU,kBAEnB,wBACAN,kCACA;YACEO,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAC,CAACV,KAAK,EACPK,UAAUR,oBAAQ,CAACc,OAAO,IAAIhB,eAAe,CAACU,MAAM,EACpDH;QAGDH;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useDOM } from '../../lib/dom';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport styles from './CardScroll.module.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  showArrows?: HorizontalScrollProps['showArrows'];\n  withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  withSpaces = true,\n  className,\n  ...restProps\n}: CardScrollProps) => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardScroll'],\n        'vkuiInternalCardScroll',\n        size !== false &&\n          {\n            s: 'vkuiInternalCardScroll--size-s',\n            m: 'vkuiInternalCardScroll--size-m',\n            l: 'vkuiInternalCardScroll--size-l',\n          }[size],\n        withSpaces && styles['CardScroll--withSpaces'],\n        className,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div className={styles['CardScroll__in']} ref={refContainer}>\n          <span className={styles['CardScroll__gap']} ref={gapRef} />\n          {children}\n          <span className={styles['CardScroll__gap']} />\n        </div>\n      </HorizontalScroll>\n    </div>\n  );\n};\n"],"names":["CardScroll","getScrollToLeft","offset","refContainer","current","gapRef","containerWidth","offsetWidth","slideIndex","children","findIndex","el","offsetLeft","parseInt","window","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","size","showArrows","withSpaces","className","restProps","React","useRef","useDOM","div","classNames","s","m","l","HorizontalScroll","ref","span"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;;+DAlBU;oBACI;mBACJ;gCACiC;AAejD,IAAMA,aAAa;QAafC,kBAAT,SAASA,gBAAgBC,MAAc;QACrC,IAAI,CAACC,aAAaC,WAAW,CAACC,OAAOD,SAAS;YAC5C,OAAOF;QACT;QACA,IAAMI,iBAAiBH,aAAaC,QAAQG;QAC5C,IAAMC,aAAa,AAAE,uBAAGL,aAAaC,QAAQK,UAA4BC,UACvE,SAACC;mBACCA,GAAGC,aACDD,GAAGJ,cACHM,SAASC,OAAQC,iBAAiBJ,IAAIK,eACtCd,UACF;;QAGJ,IAAIM,eAAe,CAAC,GAAG;YACrB,OAAON;QACT;QAEA,IAAIM,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,IAAMS,QAAQd,aAAaC,QAAQK,QAAQ,CAACD,WAAW;QAEvD,IAAMU,WACJD,MAAML,aAAcN,CAAAA,iBAAiBW,MAAMV,WAAU,IAAKF,OAAOD,QAAQG;QAE3E,IAAIW,YAAY,IAAIb,OAAOD,QAAQG,aAAa;YAC9C,OAAO;QACT;QAEA,OAAOW;IACT;QAESC,mBAAT,SAASA,iBAAiBjB,MAAc;QACtC,IAAI,CAACC,aAAaC,WAAW,CAACC,OAAOD,SAAS;YAC5C,OAAOF;QACT;QAEA,IAAMI,iBAAiBH,aAAaC,QAAQG;QAC5C,IAAMU,QAAQG,MAAMC,UAAUC,KAAKC,KACjCpB,aAAaC,QAAQK,UACrB,SAACE;mBAAoBA,GAAGC,aAAaD,GAAGJ,cAAcL,SAASI;;QAGjE,IAAI,CAACW,OAAO;YACV,OAAOf;QACT;QAEA,OAAOe,MAAML,aAAaP,OAAOD,QAAQG;IAC3C;QA9DAE,kBAAAA,+BACAe,MAAAA,gCAAO,8CACPC,YAAAA,4CAAa,qDACbC,YAAAA,4CAAa,0BACbC,mBAAAA,WACGC;QALHnB;QACAe;QACAC;QACAC;QACAC;;IAGA,IAAMxB,eAAe0B,OAAMC,OAAuB;IAClD,IAAMzB,SAASwB,OAAMC,OAAuB;IAE5C,IAAM,AAAEhB,SAAWiB,IAAAA,eAAXjB;IAsDR,qBACE,qBAACkB,mDACKJ;QACJD,WAAWM,IAAAA,oCAET,0BACAT,SAAS,SACP,CAAA;YACEU,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAA,CAAC,CAACZ,KAAK,EACTE,4CACAC;sBAGF,qBAACU;QACCpC,iBAAiBA;QACjBkB,kBAAkBA;QAClBM,YAAYA;qBAEZ,qBAACO;QAAIL,SAAS;QAA4BW,KAAKnC;qBAC7C,qBAACoC;QAAKZ,SAAS;QAA6BW,KAAKjC;QAChDI,wBACD,qBAAC8B;QAAKZ,SAAS;;AAKzB"}
+{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useDOM } from '../../lib/dom';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport styles from './CardScroll.module.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  showArrows?: HorizontalScrollProps['showArrows'];\n  withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  withSpaces = true,\n  className,\n  ...restProps\n}: CardScrollProps) => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardScroll'],\n        'vkuiInternalCardScroll',\n        size !== false &&\n          {\n            s: 'vkuiInternalCardScroll--size-s',\n            m: 'vkuiInternalCardScroll--size-m',\n            l: 'vkuiInternalCardScroll--size-l',\n          }[size],\n        withSpaces && styles['CardScroll--withSpaces'],\n        className,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div className={styles['CardScroll__in']} ref={refContainer}>\n          <span className={styles['CardScroll__gap']} ref={gapRef} />\n          {children}\n          <span className={styles['CardScroll__gap']} />\n        </div>\n      </HorizontalScroll>\n    </div>\n  );\n};\n"],"names":["CardScroll","getScrollToLeft","offset","refContainer","current","gapRef","containerWidth","offsetWidth","slideIndex","children","findIndex","el","offsetLeft","parseInt","window","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","size","showArrows","withSpaces","className","restProps","React","useRef","useDOM","div","classNames","s","m","l","HorizontalScroll","ref","span"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;;+DAlBU;oBACI;mBACJ;gCACiC;AAejD,IAAMA,aAAa;QAafC,kBAAT,SAASA,gBAAgBC,MAAc;QACrC,IAAI,CAACC,aAAaC,OAAO,IAAI,CAACC,OAAOD,OAAO,EAAE;YAC5C,OAAOF;QACT;QACA,IAAMI,iBAAiBH,aAAaC,OAAO,CAACG,WAAW;QACvD,IAAMC,aAAa,AAAE,uBAAGL,aAAaC,OAAO,CAACK,QAAQ,EAAoBC,SAAS,CAChF,SAACC;mBACCA,GAAGC,UAAU,GACXD,GAAGJ,WAAW,GACdM,SAASC,OAAQC,gBAAgB,CAACJ,IAAIK,WAAW,IACjDd,UACF;;QAGJ,IAAIM,eAAe,CAAC,GAAG;YACrB,OAAON;QACT;QAEA,IAAIM,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,IAAMS,QAAQd,aAAaC,OAAO,CAACK,QAAQ,CAACD,WAAW;QAEvD,IAAMU,WACJD,MAAML,UAAU,GAAIN,CAAAA,iBAAiBW,MAAMV,WAAW,AAAD,IAAKF,OAAOD,OAAO,CAACG,WAAW;QAEtF,IAAIW,YAAY,IAAIb,OAAOD,OAAO,CAACG,WAAW,EAAE;YAC9C,OAAO;QACT;QAEA,OAAOW;IACT;QAESC,mBAAT,SAASA,iBAAiBjB,MAAc;QACtC,IAAI,CAACC,aAAaC,OAAO,IAAI,CAACC,OAAOD,OAAO,EAAE;YAC5C,OAAOF;QACT;QAEA,IAAMI,iBAAiBH,aAAaC,OAAO,CAACG,WAAW;QACvD,IAAMU,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCpB,aAAaC,OAAO,CAACK,QAAQ,EAC7B,SAACE;mBAAoBA,GAAGC,UAAU,GAAGD,GAAGJ,WAAW,GAAGL,SAASI;;QAGjE,IAAI,CAACW,OAAO;YACV,OAAOf;QACT;QAEA,OAAOe,MAAML,UAAU,GAAGP,OAAOD,OAAO,CAACG,WAAW;IACtD;QA9DAE,kBAAAA,+BACAe,MAAAA,gCAAO,8CACPC,YAAAA,4CAAa,qDACbC,YAAAA,4CAAa,0BACbC,mBAAAA,WACGC;QALHnB;QACAe;QACAC;QACAC;QACAC;;IAGA,IAAMxB,eAAe0B,OAAMC,MAAM,CAAiB;IAClD,IAAMzB,SAASwB,OAAMC,MAAM,CAAiB;IAE5C,IAAM,AAAEhB,SAAWiB,IAAAA,WAAM,IAAjBjB;IAsDR,qBACE,qBAACkB,mDACKJ;QACJD,WAAWM,IAAAA,gBAAU,oBAEnB,0BACAT,SAAS,SACP,CAAA;YACEU,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAA,CAAC,CAACZ,KAAK,EACTE,4CACAC;sBAGF,qBAACU,kCAAgB;QACfpC,iBAAiBA;QACjBkB,kBAAkBA;QAClBM,YAAYA;qBAEZ,qBAACO;QAAIL,SAAS;QAA4BW,KAAKnC;qBAC7C,qBAACoC;QAAKZ,SAAS;QAA6BW,KAAKjC;QAChDI,wBACD,qBAAC8B;QAAKZ,SAAS;;AAKzB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ListContext } from '../List/ListContext';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { useDraggable } from './useDraggable';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n  /**\n   * aria-label для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component: ComponentProps,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = 'Перенести ячейку',\n  className,\n  style,\n  ...restProps\n}: CellProps) => {\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n  const Component = selectable ? 'label' : ComponentProps;\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const { dragging, ...draggableProps } = useDraggable({\n    rootElRef,\n    onDragFinish,\n  });\n\n  const { toggleDrag } = React.useContext(ListContext);\n  React.useEffect(() => {\n    if (dragging) {\n      toggleDrag(true);\n      return () => toggleDrag(false);\n    }\n    return undefined;\n  }, [dragging, toggleDrag]);\n\n  let dragger;\n  if (draggable) {\n    dragger = (\n      <CellDragger\n        className={styles['Cell__dragger']}\n        aria-label={draggerLabel}\n        {...draggableProps}\n      />\n    );\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      onChange,\n      defaultChecked,\n      checked,\n      disabled,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled = (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    platform === Platform.IOS && styles['Cell--ios'],\n    dragging && styles['Cell--dragging'],\n    removable && styles['Cell--removable'],\n    Component === 'label' && styles['Cell--selectable'],\n    disabled && styles['Cell--disabled'],\n  );\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      className={styles['Cell__content']}\n      disabled={simpleCellDisabled}\n      Component={Component}\n      before={\n        <React.Fragment>\n          {draggable && platform !== Platform.IOS && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === Platform.IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      {simpleCell}\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["Cell","mode","onRemove","noop","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","usePlatform","rootElRef","useExternRef","useDraggable","dragging","draggableProps","toggleDrag","React","useContext","ListContext","useEffect","undefined","dragger","CellDragger","aria-label","checkbox","checkboxProps","CellCheckbox","simpleCellDisabled","hasActive","cellClasses","classNames","Platform","IOS","simpleCell","SimpleCell","hasHover","Fragment","Removable","e","current","div","ref","Checkbox"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;+DAnDU;oBACU;4BACJ;2BACD;wBACH;2BAEG;yBACc;0BACE;4BACI;2BACpB;4BACC;AAwCtB,IAAMA,OAAO;QAClBC,cAAAA,+BACAC,UAAAA,wCAAWC,gEACXC,mBAAAA,0DAAoB,sCACpBC,sBAAAA,cACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,UACAC,mBAAAA,WACAC,AAAWC,wBAAXD,WACAE,kBAAAA,UACAC,cAAAA,MACAC,eAAAA,OACAC,iBAAAA,SACAC,wBAAAA,gBACAC,oBAAAA,yCACAC,cAAAA,gDAAe,0CACfC,mBAAAA,WACAC,eAAAA,OACGC;QAlBHpB;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,aAAarB,SAAS;IAC5B,IAAMsB,YAAYtB,SAAS;IAC3B,IAAMS,YAAYY,aAAa,UAAUX;IAEzC,IAAMa,WAAWC,IAAAA;IAEjB,IAAMC,YAAYC,IAAAA,4BAAaV;IAE/B,IAAwCW,iBAAAA,IAAAA,4BAAa;QACnDF,WAAAA;QACArB,cAAAA;IACF,IAHM,AAAEwB,WAAgCD,eAAhCC,UAAaC,8CAAmBF;QAAhCC;;IAKR,IAAM,AAAEE,aAAeC,OAAMC,WAAWC,0BAAhCH;IACRC,OAAMG,UAAU;QACd,IAAIN,UAAU;YACZE,WAAW;YACX,OAAO;uBAAMA,WAAW;;QAC1B;QACA,OAAOK;IACT,GAAG;QAACP;QAAUE;KAAW;IAEzB,IAAIM;IACJ,IAAI5B,WAAW;QACb4B,wBACE,qBAACC;YACCnB,SAAS;YACToB,cAAYrB;WACRY;IAGV;IAEA,IAAIU;IACJ,IAAIlB,YAAY;QACd,IAAMmB,gBAAmC;YACvC5B,MAAAA;YACAC,OAAAA;YACAF,UAAAA;YACAI,gBAAAA;YACAD,SAAAA;YACAP,UAAAA;QACF;QACAgC,yBAAW,qBAACE;YAAavB,SAAS;WAAgCsB;IACpE;IAEA,IAAME,qBAAqB,AAAClC,aAAa,CAACa,cAAeC,aAAaf;IACtE,IAAMoC,YAAY,CAACD,sBAAsB,CAACd;IAE1C,IAAMgB,cAAcC,IAAAA,8BAElBtB,aAAauB,mBAASC,wBACtBnB,kCACAN,oCACAb,cAAc,mCACdF;IAGF,IAAMyC,2BACJ,qBAACC;QACCN,WAAWA;QACXO,UAAUP;OACNvB;QACJF,SAAS;QACTX,UAAUmC;QACVjC,WAAWA;QACXJ,sBACE,qBAAC0B,OAAMoB,gBACJ3C,aAAae,aAAauB,mBAASC,OAAOX,SAC1Cf,cAAckB,UACdlC;QAGLC,qBACE,qBAACyB,OAAMoB,gBACJ3C,aAAae,aAAauB,mBAASC,OAAOX,SAC1C9B;;IAMT,IAAIgB,WAAW;QACb,qBACE,qBAAC8B;YACClC,WAAW2B,IAAAA,kBAAWD,aAAa1B;YACnCC,OAAOA;YACPH,YAAYS;YACZtB,mBAAmBA;YACnBF,UAAU,SAACoD;uBAAMpD,SAASoD,GAAG5B,UAAU6B;;WAEtCN;IAGP;IAEA,qBACE,qBAACO;QAAIrC,WAAW2B,IAAAA,kBAAWD,aAAa1B;QAAYC,OAAOA;QAAOqC,KAAK/B;OACpEuB;AAGP;AAEAjD,KAAK0D,WAAWhB"}
+{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ListContext } from '../List/ListContext';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { useDraggable } from './useDraggable';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n  /**\n   * aria-label для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component: ComponentProps,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = 'Перенести ячейку',\n  className,\n  style,\n  ...restProps\n}: CellProps) => {\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n  const Component = selectable ? 'label' : ComponentProps;\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const { dragging, ...draggableProps } = useDraggable({\n    rootElRef,\n    onDragFinish,\n  });\n\n  const { toggleDrag } = React.useContext(ListContext);\n  React.useEffect(() => {\n    if (dragging) {\n      toggleDrag(true);\n      return () => toggleDrag(false);\n    }\n    return undefined;\n  }, [dragging, toggleDrag]);\n\n  let dragger;\n  if (draggable) {\n    dragger = (\n      <CellDragger\n        className={styles['Cell__dragger']}\n        aria-label={draggerLabel}\n        {...draggableProps}\n      />\n    );\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      onChange,\n      defaultChecked,\n      checked,\n      disabled,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled = (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    platform === Platform.IOS && styles['Cell--ios'],\n    dragging && styles['Cell--dragging'],\n    removable && styles['Cell--removable'],\n    Component === 'label' && styles['Cell--selectable'],\n    disabled && styles['Cell--disabled'],\n  );\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      className={styles['Cell__content']}\n      disabled={simpleCellDisabled}\n      Component={Component}\n      before={\n        <React.Fragment>\n          {draggable && platform !== Platform.IOS && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === Platform.IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      {simpleCell}\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["Cell","mode","onRemove","noop","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","usePlatform","rootElRef","useExternRef","useDraggable","dragging","draggableProps","toggleDrag","React","useContext","ListContext","useEffect","undefined","dragger","CellDragger","aria-label","checkbox","checkboxProps","CellCheckbox","simpleCellDisabled","hasActive","cellClasses","classNames","Platform","IOS","simpleCell","SimpleCell","hasHover","Fragment","Removable","e","current","div","ref","Checkbox"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;+DAnDU;oBACU;4BACJ;2BACD;wBACH;2BAEG;yBACc;0BACE;4BACI;2BACpB;4BACC;AAwCtB,IAAMA,OAAO;QAClBC,cAAAA,+BACAC,UAAAA,wCAAWC,UAAI,sDACfC,mBAAAA,0DAAoB,sCACpBC,sBAAAA,cACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,UACAC,mBAAAA,WACAC,AAAWC,wBAAXD,WACAE,kBAAAA,UACAC,cAAAA,MACAC,eAAAA,OACAC,iBAAAA,SACAC,wBAAAA,gBACAC,oBAAAA,yCACAC,cAAAA,gDAAe,0CACfC,mBAAAA,WACAC,eAAAA,OACGC;QAlBHpB;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,aAAarB,SAAS;IAC5B,IAAMsB,YAAYtB,SAAS;IAC3B,IAAMS,YAAYY,aAAa,UAAUX;IAEzC,IAAMa,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,YAAYC,IAAAA,0BAAY,EAACV;IAE/B,IAAwCW,iBAAAA,IAAAA,0BAAY,EAAC;QACnDF,WAAAA;QACArB,cAAAA;IACF,IAHM,AAAEwB,WAAgCD,eAAhCC,UAAaC,8CAAmBF;QAAhCC;;IAKR,IAAM,AAAEE,aAAeC,OAAMC,UAAU,CAACC,wBAAW,EAA3CH;IACRC,OAAMG,SAAS,CAAC;QACd,IAAIN,UAAU;YACZE,WAAW;YACX,OAAO;uBAAMA,WAAW;;QAC1B;QACA,OAAOK;IACT,GAAG;QAACP;QAAUE;KAAW;IAEzB,IAAIM;IACJ,IAAI5B,WAAW;QACb4B,wBACE,qBAACC,wBAAW;YACVnB,SAAS;YACToB,cAAYrB;WACRY;IAGV;IAEA,IAAIU;IACJ,IAAIlB,YAAY;QACd,IAAMmB,gBAAmC;YACvC5B,MAAAA;YACAC,OAAAA;YACAF,UAAAA;YACAI,gBAAAA;YACAD,SAAAA;YACAP,UAAAA;QACF;QACAgC,yBAAW,qBAACE,0BAAY;YAACvB,SAAS;WAAgCsB;IACpE;IAEA,IAAME,qBAAqB,AAAClC,aAAa,CAACa,cAAeC,aAAaf;IACtE,IAAMoC,YAAY,CAACD,sBAAsB,CAACd;IAE1C,IAAMgB,cAAcC,IAAAA,gBAAU,cAE5BtB,aAAauB,kBAAQ,CAACC,GAAG,qBACzBnB,kCACAN,oCACAb,cAAc,mCACdF;IAGF,IAAMyC,2BACJ,qBAACC,sBAAU;QACTN,WAAWA;QACXO,UAAUP;OACNvB;QACJF,SAAS;QACTX,UAAUmC;QACVjC,WAAWA;QACXJ,sBACE,qBAAC0B,OAAMoB,QAAQ,QACZ3C,aAAae,aAAauB,kBAAQ,CAACC,GAAG,IAAIX,SAC1Cf,cAAckB,UACdlC;QAGLC,qBACE,qBAACyB,OAAMoB,QAAQ,QACZ3C,aAAae,aAAauB,kBAAQ,CAACC,GAAG,IAAIX,SAC1C9B;;IAMT,IAAIgB,WAAW;QACb,qBACE,qBAAC8B,oBAAS;YACRlC,WAAW2B,IAAAA,gBAAU,EAACD,aAAa1B;YACnCC,OAAOA;YACPH,YAAYS;YACZtB,mBAAmBA;YACnBF,UAAU,SAACoD;uBAAMpD,SAASoD,GAAG5B,UAAU6B,OAAO;;WAE7CN;IAGP;IAEA,qBACE,qBAACO;QAAIrC,WAAW2B,IAAAA,gBAAU,EAACD,aAAa1B;QAAYC,OAAOA;QAAOqC,KAAK/B;OACpEuB;AAGP;AAEAjD,KAAK0D,QAAQ,GAAGhB,0BAAY"}

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nconst CheckBoxOn = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOn} IconRegular={Icon24CheckBoxOn} />\n);\n\nconst CheckBoxOff = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOff} IconRegular={Icon24CheckBoxOff} />\n);\n\nfunction useTypeIcon(type: NonNullable<CellCheckboxProps['type']>) {\n  const platform = usePlatform();\n\n  if (type !== 'auto') {\n    return type;\n  }\n\n  if (platform === Platform.IOS || platform === Platform.VKCOM) {\n    return 'circle';\n  }\n\n  return 'square';\n}\n\nexport interface CellCheckboxProps\n  extends Pick<CellProps, 'defaultChecked' | 'checked'>,\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLSpanElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * Вид чекбокса. Если auto, то зависит от платформы.\n   */\n  type?: 'auto' | 'circle' | 'square';\n}\n\nexport const CellCheckbox = ({\n  getRootRef,\n  getRef,\n  className,\n  style,\n  type = 'auto',\n  ...restProps\n}: CellCheckboxProps) => {\n  const typeIcon = useTypeIcon(type);\n\n  const IconOff = typeIcon === 'circle' ? Icon24CheckCircleOff : CheckBoxOff;\n  const IconOn = typeIcon === 'circle' ? Icon24CheckCircleOn : CheckBoxOn;\n\n  return (\n    <span className={classNames(styles['CellCheckbox'], className)} style={style} ref={getRootRef}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        className={styles['CellCheckbox__input']}\n        getRootRef={getRef}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"names":["CellCheckbox","CheckBoxOn","AdaptiveIconRenderer","IconCompact","Icon20CheckBoxOn","IconRegular","Icon24CheckBoxOn","CheckBoxOff","Icon20CheckBoxOff","Icon24CheckBoxOff","useTypeIcon","type","platform","usePlatform","Platform","IOS","VKCOM","getRootRef","getRef","className","style","restProps","typeIcon","IconOff","Icon24CheckCircleOff","IconOn","Icon24CheckCircleOn","span","classNames","ref","VisuallyHidden","Component","aria-hidden"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;+DAnDU;qBAQhB;oBACoB;2BACC;wBACH;oCAEY;8BACN;AAI/B,IAAMC,aAAa;yBACjB,qBAACC;QAAqBC,aAAaC;QAAkBC,aAAaC;;;AAGpE,IAAMC,cAAc;yBAClB,qBAACL;QAAqBC,aAAaK;QAAmBH,aAAaI;;;AAGrE,SAASC,YAAYC,IAA4C;IAC/D,IAAMC,WAAWC,IAAAA;IAEjB,IAAIF,SAAS,QAAQ;QACnB,OAAOA;IACT;IAEA,IAAIC,aAAaE,mBAASC,OAAOH,aAAaE,mBAASE,OAAO;QAC5D,OAAO;IACT;IAEA,OAAO;AACT;AAaO,IAAMhB,eAAe;QAC1BiB,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,4BACAT,MAAAA,gCAAO,sBACJU;QALHJ;QACAC;QACAC;QACAC;QACAT;;IAGA,IAAMW,WAAWZ,YAAYC;IAE7B,IAAMY,UAAUD,aAAa,WAAWE,8BAAuBjB;IAC/D,IAAMkB,SAASH,aAAa,WAAWI,6BAAsBzB;IAE7D,qBACE,qBAAC0B;QAAKR,WAAWS,IAAAA,sCAAmCT;QAAYC,OAAOA;QAAOS,KAAKZ;qBACjF,qBAACa,4EACKT;QACJU,WAAU;QACVpB,MAAK;QACLQ,SAAS;QACTF,YAAYC;uBAEd,qBAACS;QACCR,WAAWS,IAAAA;QACXI,eAAAA;qBAEA,qBAACT,+BAEH,qBAACI;QACCR,WAAWS,IAAAA;QACXI,eAAAA;qBAEA,qBAACP;AAIT"}
+{"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nconst CheckBoxOn = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOn} IconRegular={Icon24CheckBoxOn} />\n);\n\nconst CheckBoxOff = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOff} IconRegular={Icon24CheckBoxOff} />\n);\n\nfunction useTypeIcon(type: NonNullable<CellCheckboxProps['type']>) {\n  const platform = usePlatform();\n\n  if (type !== 'auto') {\n    return type;\n  }\n\n  if (platform === Platform.IOS || platform === Platform.VKCOM) {\n    return 'circle';\n  }\n\n  return 'square';\n}\n\nexport interface CellCheckboxProps\n  extends Pick<CellProps, 'defaultChecked' | 'checked'>,\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLSpanElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * Вид чекбокса. Если auto, то зависит от платформы.\n   */\n  type?: 'auto' | 'circle' | 'square';\n}\n\nexport const CellCheckbox = ({\n  getRootRef,\n  getRef,\n  className,\n  style,\n  type = 'auto',\n  ...restProps\n}: CellCheckboxProps) => {\n  const typeIcon = useTypeIcon(type);\n\n  const IconOff = typeIcon === 'circle' ? Icon24CheckCircleOff : CheckBoxOff;\n  const IconOn = typeIcon === 'circle' ? Icon24CheckCircleOn : CheckBoxOn;\n\n  return (\n    <span className={classNames(styles['CellCheckbox'], className)} style={style} ref={getRootRef}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        className={styles['CellCheckbox__input']}\n        getRootRef={getRef}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"names":["CellCheckbox","CheckBoxOn","AdaptiveIconRenderer","IconCompact","Icon20CheckBoxOn","IconRegular","Icon24CheckBoxOn","CheckBoxOff","Icon20CheckBoxOff","Icon24CheckBoxOff","useTypeIcon","type","platform","usePlatform","Platform","IOS","VKCOM","getRootRef","getRef","className","style","restProps","typeIcon","IconOff","Icon24CheckCircleOff","IconOn","Icon24CheckCircleOn","span","classNames","ref","VisuallyHidden","Component","aria-hidden"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;+DAnDU;qBAQhB;oBACoB;2BACC;wBACH;oCAEY;8BACN;AAI/B,IAAMC,aAAa;yBACjB,qBAACC,0CAAoB;QAACC,aAAaC,uBAAgB;QAAEC,aAAaC,uBAAgB;;;AAGpF,IAAMC,cAAc;yBAClB,qBAACL,0CAAoB;QAACC,aAAaK,wBAAiB;QAAEH,aAAaI,wBAAiB;;;AAGtF,SAASC,YAAYC,IAA4C;IAC/D,IAAMC,WAAWC,IAAAA,wBAAW;IAE5B,IAAIF,SAAS,QAAQ;QACnB,OAAOA;IACT;IAEA,IAAIC,aAAaE,kBAAQ,CAACC,GAAG,IAAIH,aAAaE,kBAAQ,CAACE,KAAK,EAAE;QAC5D,OAAO;IACT;IAEA,OAAO;AACT;AAaO,IAAMhB,eAAe;QAC1BiB,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,4BACAT,MAAAA,gCAAO,sBACJU;QALHJ;QACAC;QACAC;QACAC;QACAT;;IAGA,IAAMW,WAAWZ,YAAYC;IAE7B,IAAMY,UAAUD,aAAa,WAAWE,2BAAoB,GAAGjB;IAC/D,IAAMkB,SAASH,aAAa,WAAWI,0BAAmB,GAAGzB;IAE7D,qBACE,qBAAC0B;QAAKR,WAAWS,IAAAA,gBAAU,sBAAyBT;QAAYC,OAAOA;QAAOS,KAAKZ;qBACjF,qBAACa,8BAAc,8CACTT;QACJU,WAAU;QACVpB,MAAK;QACLQ,SAAS;QACTF,YAAYC;uBAEd,qBAACS;QACCR,WAAWS,IAAAA,gBAAU;QACrBI,eAAAA;qBAEA,qBAACT,+BAEH,qBAACI;QACCR,WAAWS,IAAAA,gBAAU;QACrBI,eAAAA;qBAEA,qBAACP;AAIT"}