@vkontakte/vkui 5.0.3 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","Component","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","useAdaptivity","sizeY","platform","usePlatform","href","undefined","classNamesString","styles","getSizeYClassName","Platform","ANDROID","IOS"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { HasAlign } from \"../../types\";\nimport { Spinner } from \"../Spinner/Spinner\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport styles from \"./Button.module.css\";\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: \"primary\" | \"secondary\" | \"tertiary\" | \"outline\" | \"link\";\n  appearance?:\n    | \"accent\"\n    | \"positive\"\n    | \"negative\"\n    | \"neutral\"\n    | \"overlay\"\n    | \"accent-invariable\";\n  size?: \"s\" | \"m\" | \"l\";\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps\n  extends Omit<TappableProps, \"size\">,\n    VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = \"s\",\n  mode = \"primary\",\n  appearance = \"accent\",\n  stretched = false,\n  align = \"center\",\n  children,\n  before,\n  after,\n  getRootRef,\n  Component = \"button\",\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles[\"Button--hover\"]}\n      activeMode={styles[\"Button--active\"]}\n      {...restProps}\n      Component={restProps.href ? \"a\" : Component}\n      onClick={loading ? undefined : onClick}\n      focusVisibleMode=\"outside\"\n      stopPropagation={stopPropagation}\n      className={classNamesString(\n        className,\n        styles.Button,\n        styles[`Button--size-${size}`],\n        styles[`Button--mode-${mode}`],\n        styles[`Button--appearance-${appearance}`],\n        styles[`Button--align-${align}`],\n        getSizeYClassName(styles[\"Button\"], sizeY),\n        platform === Platform.ANDROID && styles[`Button--android`],\n        platform === Platform.IOS && styles[`Button--ios`],\n        stretched && styles[\"Button--stretched\"],\n        hasIcons && styles[\"Button--with-icon\"],\n        hasIconOnly && styles[\"Button--singleIcon\"],\n        loading && styles[\"Button--loading\"]\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && <Spinner size=\"small\" className={styles.Button__spinner} />}\n      <span className={styles.Button__in}>\n        {before && (\n          <span className={styles.Button__before} role=\"presentation\">\n            {before}\n          </span>\n        )}\n        {children && <span className={styles.Button__content}>{children}</span>}\n        {after && (\n          <span className={styles.Button__after} role=\"presentation\">\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAsD;AAuBtD;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAgBA;EAAA,qBAfjBC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IAAA,iBACVC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,uBAChBC,UAAU;IAAVA,UAAU,gCAAG,QAAQ;IAAA,sBACrBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,kBACjBC,KAAK;IAALA,KAAK,2BAAG,QAAQ;IAChBC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IAAA,sBACVC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACpBC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,4BACPC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IACtBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGC,OAAO,CAACV,MAAM,IAAIC,KAAK,CAAC;EACzC,IAAMU,WAAW,GAAG,CAACZ,QAAQ,IAAIW,OAAO,CAACT,KAAK,CAAC,KAAKS,OAAO,CAACV,MAAM,CAAC;EACnE,qBAAkB,IAAAY,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,kBAAQ;IACP,SAAS,qBAA0B;IACnC,UAAU;EAA2B,GACjCP,SAAS;IACb,SAAS,EAAEA,SAAS,CAACQ,IAAI,GAAG,GAAG,GAAGb,SAAU;IAC5C,OAAO,EAAEC,OAAO,GAAGa,SAAS,GAAGZ,OAAQ;IACvC,gBAAgB,EAAC,SAAS;IAC1B,eAAe,EAAEC,eAAgB;IACjC,SAAS,EAAE,IAAAY,4BAAgB,EACzBX,SAAS,gBAETY,MAAM,wBAAiBzB,IAAI,EAAG,EAC9ByB,MAAM,wBAAiBxB,IAAI,EAAG,EAC9BwB,MAAM,8BAAuBvB,UAAU,EAAG,EAC1CuB,MAAM,yBAAkBrB,KAAK,EAAG,EAChC,IAAAsB,oCAAiB,gBAAmBP,KAAK,CAAC,EAC1CC,QAAQ,KAAKO,kBAAQ,CAACC,OAAO,yBAA6B,EAC1DR,QAAQ,KAAKO,kBAAQ,CAACE,GAAG,qBAAyB,EAClD1B,SAAS,2BAA+B,EACxCY,QAAQ,2BAA+B,EACvCE,WAAW,4BAAgC,EAC3CP,OAAO,yBAA6B,CACpC;IACF,UAAU,EAAEF;EAAW,IAEtBE,OAAO,iBAAI,oBAAC,gBAAO;IAAC,IAAI,EAAC,OAAO;IAAC,SAAS;EAAyB,EAAG,eACvE;IAAM,SAAS;EAAoB,GAChCJ,MAAM,iBACL;IAAM,SAAS,sBAAwB;IAAC,IAAI,EAAC;EAAc,GACxDA,MAAM,CAEV,EACAD,QAAQ,iBAAI;IAAM,SAAS;EAAyB,GAAEA,QAAQ,CAAQ,EACtEE,KAAK,iBACJ;IAAM,SAAS,qBAAuB;IAAC,IAAI,EAAC;EAAc,GACvDA,KAAK,CAET,CACI,CACE;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Button.js","names":["Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","Component","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","useAdaptivity","sizeY","platform","usePlatform","href","undefined","classNames","styles","getSizeYClassName","Platform","ANDROID","IOS","hasReactNode","process","env","NODE_ENV"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './Button.module.css';\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  Component = 'button',\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      {...restProps}\n      Component={restProps.href ? 'a' : Component}\n      onClick={loading ? undefined : onClick}\n      focusVisibleMode=\"outside\"\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        styles[`Button--size-${size}`],\n        styles[`Button--mode-${mode}`],\n        styles[`Button--appearance-${appearance}`],\n        styles[`Button--align-${align}`],\n        getSizeYClassName(styles['Button'], sizeY),\n        platform === Platform.ANDROID && styles[`Button--android`],\n        platform === Platform.IOS && styles[`Button--ios`],\n        stretched && styles['Button--stretched'],\n        hasIcons && styles['Button--with-icon'],\n        hasIconOnly && !stretched && styles['Button--singleIcon'],\n        loading && styles['Button--loading'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && <Spinner size=\"small\" className={styles.Button__spinner} />}\n      <span className={styles.Button__in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.Button__before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.Button__content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.Button__after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,14 +1,14 @@
-import * as React from "react";
-import type { HasRootRef, AlignType } from "../../types";
+import * as React from 'react';
+import type { HasRootRef, AlignType } from '../../types';
 export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     /**
      * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
      */
-    mode?: "vertical" | "horizontal";
+    mode?: 'vertical' | 'horizontal';
     /**
      * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.
      */
-    gap?: "none" | "space" | "s" | "m";
+    gap?: 'none' | 'space' | 's' | 'm';
     /**
      * Растягивает компонент на всю ширину контейнера.
      *

package/dist/cjs/components/ButtonGroup/ButtonGroup.js

@@ -9,26 +9,26 @@ exports.ButtonGroup = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["mode", "gap", "stretched", "align", "getRootRef", "className", "children"];
 /**
  * @see https://vkcom.github.io/VKUI/#/ButtonGroup
  */
 var ButtonGroup = function ButtonGroup(_ref) {
   var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'horizontal' : _ref$mode,
     _ref$gap = _ref.gap,
-    gap = _ref$gap === void 0 ? "m" : _ref$gap,
+    gap = _ref$gap === void 0 ? 'm' : _ref$gap,
     _ref$stretched = _ref.stretched,
     stretched = _ref$stretched === void 0 ? false : _ref$stretched,
     _ref$align = _ref.align,
-    align = _ref$align === void 0 ? "left" : _ref$align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
     getRootRef = _ref.getRootRef,
     className = _ref.className,
     children = _ref.children,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)(className, "vkuiButtonGroup", styles["ButtonGroup--mode-".concat(mode)], gap !== "none" && styles["ButtonGroup--gap-".concat(gap)], stretched && "vkuiButtonGroup--stretched", align && styles["ButtonGroup--align-".concat(align)]),
+    className: (0, _vkjs.classNames)(className, "vkuiButtonGroup", styles["ButtonGroup--mode-".concat(mode)], gap !== 'none' && styles["ButtonGroup--gap-".concat(gap)], stretched && "vkuiButtonGroup--stretched", align && styles["ButtonGroup--align-".concat(align)]),
     role: "group",
     ref: getRootRef
   }, restProps), children);

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":["ButtonGroup","mode","gap","stretched","align","getRootRef","className","children","restProps","classNamesString","styles"],"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport type { HasRootRef, AlignType } from \"../../types\";\nimport styles from \"./ButtonGroup.module.css\";\n\nexport interface ButtonGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: \"vertical\" | \"horizontal\";\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: \"none\" | \"space\" | \"s\" | \"m\";\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы. Работает только с mode=\"vertical\".\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = \"horizontal\",\n  gap = \"m\",\n  stretched = false,\n  align = \"left\" /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  getRootRef,\n  className,\n  children,\n  ...restProps\n}: ButtonGroupProps) => {\n  return (\n    <div\n      className={classNamesString(\n        className,\n        styles.ButtonGroup,\n        styles[`ButtonGroup--mode-${mode}`],\n        gap !== \"none\" && styles[`ButtonGroup--gap-${gap}`],\n        stretched && styles[\"ButtonGroup--stretched\"],\n        align && styles[`ButtonGroup--align-${align}`]\n      )}\n      role=\"group\"\n      ref={getRootRef}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAAwD;AA2BxD;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,qBARtBC,IAAI;IAAJA,IAAI,0BAAG,YAAY;IAAA,gBACnBC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,sBACTC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,kBACjBC,KAAK;IAALA,KAAK,2BAAG,MAAM;IACdC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,oBACE;IACE,SAAS,EAAE,IAAAC,4BAAgB,EACzBH,SAAS,qBAETI,MAAM,6BAAsBT,IAAI,EAAG,EACnCC,GAAG,KAAK,MAAM,IAAIQ,MAAM,4BAAqBR,GAAG,EAAG,EACnDC,SAAS,gCAAoC,EAC7CC,KAAK,IAAIM,MAAM,8BAAuBN,KAAK,EAAG,CAC9C;IACF,IAAI,EAAC,OAAO;IACZ,GAAG,EAAEC;EAAW,GACZG,SAAS,GAEZD,QAAQ,CACL;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"ButtonGroup.js","names":["ButtonGroup","mode","gap","stretched","align","getRootRef","className","children","restProps","classNames","styles"],"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef, AlignType } from '../../types';\nimport styles from './ButtonGroup.module.css';\n\nexport interface ButtonGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы. Работает только с mode=\"vertical\".\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  getRootRef,\n  className,\n  children,\n  ...restProps\n}: ButtonGroupProps) => {\n  return (\n    <div\n      className={classNames(\n        className,\n        styles.ButtonGroup,\n        styles[`ButtonGroup--mode-${mode}`],\n        gap !== 'none' && styles[`ButtonGroup--gap-${gap}`],\n        stretched && styles['ButtonGroup--stretched'],\n        align && styles[`ButtonGroup--align-${align}`],\n      )}\n      role=\"group\"\n      ref={getRootRef}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AA2B7C;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,qBARtBC,IAAI;IAAJA,IAAI,0BAAG,YAAY;IAAA,gBACnBC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,sBACTC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,kBACjBC,KAAK;IAALA,KAAK,2BAAG,MAAM;IACdC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,EACnBH,SAAS,qBAETI,MAAM,6BAAsBT,IAAI,EAAG,EACnCC,GAAG,KAAK,MAAM,IAAIQ,MAAM,4BAAqBR,GAAG,EAAG,EACnDC,SAAS,gCAAoC,EAC7CC,KAAK,IAAIM,MAAM,8BAAuBN,KAAK,EAAG,CAC9C;IACF,IAAI,EAAC,OAAO;IACZ,GAAG,EAAEC;EAAW,GACZG,SAAS,GAEZD,QAAQ,CACL;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { CalendarHeaderProps } from "../CalendarHeader/CalendarHeader";
-import { CalendarDaysProps } from "../CalendarDays/CalendarDays";
-import { CalendarTimeProps } from "../CalendarTime/CalendarTime";
-import { HasRootRef } from "../../types";
-export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, Pick<CalendarTimeProps, "changeHoursAriaLabel" | "changeMinutesAriaLabel">, Pick<CalendarHeaderProps, "prevMonthAriaLabel" | "nextMonthAriaLabel" | "changeMonthAriaLabel" | "changeYearAriaLabel" | "onNextMonth" | "onPrevMonth" | "prevMonthIcon" | "nextMonthIcon" | "prevMonthProps" | "nextMonthProps">, Pick<CalendarDaysProps, "dayProps" | "listenDayChangesForUpdate">, HasRootRef<HTMLDivElement> {
+import * as React from 'react';
+import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
+import { CalendarDaysProps } from '../CalendarDays/CalendarDays';
+import { CalendarTimeProps } from '../CalendarTime/CalendarTime';
+import { HasRootRef } from '../../types';
+export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>, Pick<CalendarHeaderProps, 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'prevMonthProps' | 'nextMonthProps'>, Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>, HasRootRef<HTMLDivElement> {
     value?: Date;
     disablePast?: boolean;
     disableFuture?: boolean;
@@ -13,7 +13,7 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     changeDayAriaLabel?: string;
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     showNeighboringMonth?: boolean;
-    size?: "s" | "m";
+    size?: 's' | 'm';
     onChange?(value?: Date): void;
     shouldDisableDate?(value: Date): boolean;
     onClose?(): void;

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

@@ -16,10 +16,10 @@ var _CalendarTime = require("../CalendarTime/CalendarTime");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _calendar = require("../../lib/calendar");
 var _useCalendar2 = require("../../hooks/useCalendar");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _warnOnce = require("../../lib/warnOnce");
 var _excluded = ["value", "onChange", "disablePast", "disableFuture", "shouldDisableDate", "onClose", "enableTime", "doneButtonText", "weekStartsOn", "getRootRef", "disablePickers", "changeHoursAriaLabel", "changeMinutesAriaLabel", "prevMonthAriaLabel", "nextMonthAriaLabel", "changeMonthAriaLabel", "changeYearAriaLabel", "showNeighboringMonth", "changeDayAriaLabel", "size", "viewDate", "onHeaderChange", "onNextMonth", "onPrevMonth", "prevMonthIcon", "nextMonthIcon", "prevMonthProps", "nextMonthProps", "dayProps", "className", "listenDayChangesForUpdate"];
-var warn = (0, _warnOnce.warnOnce)("Calendar");
+var warn = (0, _warnOnce.warnOnce)('Calendar');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
@@ -46,9 +46,9 @@ var Calendar = function Calendar(_ref) {
     changeYearAriaLabel = _ref.changeYearAriaLabel,
     showNeighboringMonth = _ref.showNeighboringMonth,
     _ref$changeDayAriaLab = _ref.changeDayAriaLabel,
-    changeDayAriaLabel = _ref$changeDayAriaLab === void 0 ? "Изменить день" : _ref$changeDayAriaLab,
+    changeDayAriaLabel = _ref$changeDayAriaLab === void 0 ? 'Изменить день' : _ref$changeDayAriaLab,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "m" : _ref$size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
     externalViewDate = _ref.viewDate,
     onHeaderChange = _ref.onHeaderChange,
     onNextMonth = _ref.onNextMonth,
@@ -84,14 +84,14 @@ var Calendar = function Calendar(_ref) {
       setViewDate(value);
     }
   }, [value]);
-  if (process.env.NODE_ENV === "development" && !disablePickers && size === "s") {
-    warn("Нельзя включить селекты выбора месяца/года, если размер календаря 's'", "error");
+  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {
+    warn("Нельзя включить селекты выбора месяца/года, если размер календаря 's'", 'error');
   }
-  if (process.env.NODE_ENV === "development" && enableTime && size === "s") {
-    warn("Нельзя включить выбор времени, если размер календаря 's'", "error");
+  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {
+    warn("Нельзя включить выбор времени, если размер календаря 's'", 'error');
   }
   var handleKeyDown = React.useCallback(function (event) {
-    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       event.preventDefault();
     }
     var newFocusedDay = (0, _calendar.navigateDate)(focusedDay !== null && focusedDay !== void 0 ? focusedDay : value, event.key);
@@ -108,13 +108,13 @@ var Calendar = function Calendar(_ref) {
   }, [value]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, props, {
     ref: getRootRef,
-    className: (0, _classNames.classNamesString)("vkuiCalendar", styles["Calendar--size-".concat(size)], className)
+    className: (0, _vkjs.classNames)("vkuiCalendar", styles["Calendar--size-".concat(size)], className)
   }), /*#__PURE__*/React.createElement(_CalendarHeader.CalendarHeader, {
     viewDate: externalViewDate || viewDate,
     onChange: setViewDate,
     onNextMonth: setNextMonth,
     onPrevMonth: setPrevMonth,
-    disablePickers: disablePickers || size === "s",
+    disablePickers: disablePickers || size === 's',
     className: "vkuiCalendar__header",
     prevMonthAriaLabel: prevMonthAriaLabel,
     nextMonthAriaLabel: nextMonthAriaLabel,
@@ -142,7 +142,7 @@ var Calendar = function Calendar(_ref) {
     size: size,
     dayProps: dayProps,
     listenDayChangesForUpdate: listenDayChangesForUpdate
-  }), enableTime && value && size !== "s" && /*#__PURE__*/React.createElement("div", {
+  }), enableTime && value && size !== 's' && /*#__PURE__*/React.createElement("div", {
     className: "vkuiCalendar__time"
   }, /*#__PURE__*/React.createElement(_CalendarTime.CalendarTime, {
     value: value,

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":["warn","warnOnce","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","externalViewDate","viewDate","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","classNamesString","styles","isFirstDay","isLastDay"],"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { isSameMonth, isSameDay } from \"../../lib/date\";\nimport {\n  CalendarHeader,\n  CalendarHeaderProps,\n} from \"../CalendarHeader/CalendarHeader\";\nimport { CalendarDays, CalendarDaysProps } from \"../CalendarDays/CalendarDays\";\nimport { CalendarTime, CalendarTimeProps } from \"../CalendarTime/CalendarTime\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport {\n  navigateDate,\n  setTimeEqual,\n  isFirstDay,\n  isLastDay,\n} from \"../../lib/calendar\";\nimport { useCalendar } from \"../../hooks/useCalendar\";\nimport { HasRootRef } from \"../../types\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { warnOnce } from \"../../lib/warnOnce\";\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 (\n    process.env.NODE_ENV === \"development\" &&\n    !disablePickers &&\n    size === \"s\"\n  ) {\n    warn(\n      \"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\",\n      \"error\"\n    );\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 (\n        [\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\"].includes(event.key)\n      ) {\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={classNamesString(\n        styles[\"Calendar\"],\n        styles[`Calendar--size-${size}`],\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"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","names":["warn","warnOnce","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","externalViewDate","viewDate","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","classNames","styles","isFirstDay","isLastDay"],"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isSameMonth, isSameDay } from '../../lib/date';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { navigateDate, setTimeEqual, isFirstDay, isLastDay } from '../../lib/calendar';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { HasRootRef } from '../../types';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\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(styles['Calendar'], styles[`Calendar--size-${size}`], className)}\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"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { TappableElementProps } from "../Tappable/Tappable";
-export declare type CalendarDayElementProps = Omit<TappableElementProps, "onChange" | "size" | "disabled" | "selected">;
+import * as React from 'react';
+import { TappableElementProps } from '../Tappable/Tappable';
+export declare type CalendarDayElementProps = Omit<TappableElementProps, 'onChange' | 'size' | 'disabled' | 'selected'>;
 export interface CalendarDayProps extends CalendarDayElementProps {
     day: Date;
     today?: boolean;
@@ -15,7 +15,7 @@ export interface CalendarDayProps extends CalendarDayElementProps {
     focused?: boolean;
     hinted?: boolean;
     sameMonth?: boolean;
-    size?: "s" | "m";
+    size?: 's' | 'm';
     onChange(value: Date): void;
     onEnter?(value: Date): void;
     onLeave?(value: Date): void;

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

@@ -9,7 +9,7 @@ exports.CalendarDay = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _Tappable = require("../Tappable/Tappable");
 var _useKeyboardInputTracker = require("../../hooks/useKeyboardInputTracker");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
@@ -60,32 +60,32 @@ var CalendarDay = /*#__PURE__*/React.memo(function (_ref) {
     });
   }
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiCalendarDay", size && styles["CalendarDay--size-".concat(size)], today && "vkuiCalendarDay--today", selected && !disabled && "vkuiCalendarDay--selected", active && !disabled && "vkuiCalendarDay--active", selectionStart && "vkuiCalendarDay--selection-start", selectionEnd && "vkuiCalendarDay--selection-end", disabled && "vkuiCalendarDay--disabled", !sameMonth && "vkuiCalendarDay--not-same-month", className),
+    className: (0, _vkjs.classNames)("vkuiCalendarDay", size && styles["CalendarDay--size-".concat(size)], today && "vkuiCalendarDay--today", selected && !disabled && "vkuiCalendarDay--selected", active && !disabled && "vkuiCalendarDay--active", selectionStart && "vkuiCalendarDay--selection-start", selectionEnd && "vkuiCalendarDay--selection-end", disabled && "vkuiCalendarDay--disabled", !sameMonth && "vkuiCalendarDay--not-same-month", className),
     hoverMode: active ? "vkuiCalendarDay--active-hover" : "vkuiCalendarDay--hover",
     hasActive: false,
     onClick: onClick,
     disabled: disabled,
     "aria-label": new Intl.DateTimeFormat(locale, {
-      weekday: "long",
-      year: "numeric",
-      month: "long",
-      day: "numeric"
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
     }).format(day),
     tabIndex: -1,
     getRootRef: ref,
-    focusVisibleMode: active ? "outside" : "inside",
+    focusVisibleMode: active ? 'outside' : 'inside',
     onEnter: handleEnter,
     onLeave: handleLeave
   }, props), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiCalendarDay__hinted", hinted && "vkuiCalendarDay__hinted--active", hintedSelectionStart && "vkuiCalendarDay__hinted--selection-start", hintedSelectionEnd && "vkuiCalendarDay__hinted--selection-end")
+    className: (0, _vkjs.classNames)("vkuiCalendarDay__hinted", hinted && "vkuiCalendarDay__hinted--active", hintedSelectionStart && "vkuiCalendarDay__hinted--selection-start", hintedSelectionEnd && "vkuiCalendarDay__hinted--selection-end")
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiCalendarDay__inner", active && !disabled && "vkuiCalendarDay__inner--active")
+    className: (0, _vkjs.classNames)("vkuiCalendarDay__inner", active && !disabled && "vkuiCalendarDay__inner--active")
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiCalendarDay__day-number"
   }, day.getDate()))));
 });
 exports.CalendarDay = CalendarDay;
-CalendarDay.displayName = "CalendarDay";
+CalendarDay.displayName = 'CalendarDay';
 var styles = {
   "CalendarDay--size-s": "vkuiCalendarDay--size-s",
   "CalendarDay--size-m": "vkuiCalendarDay--size-m"

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarDay.js","names":["CalendarDay","React","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","props","useConfigProvider","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","ENABLE_KEYBOARD_INPUT_EVENT_NAME","bubbles","focus","classNamesString","styles","Intl","DateTimeFormat","weekday","year","month","format","getDate","displayName"],"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Tappable, TappableElementProps } from \"../Tappable/Tappable\";\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from \"../../hooks/useKeyboardInputTracker\";\nimport { useConfigProvider } from \"../ConfigProvider/ConfigProviderContext\";\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(\n          new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true })\n        );\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={classNamesString(\n          styles[\"CalendarDay\"],\n          size && styles[`CalendarDay--size-${size}`],\n          today && styles[\"CalendarDay--today\"],\n          selected && !disabled && styles[\"CalendarDay--selected\"],\n          active && !disabled && styles[\"CalendarDay--active\"],\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={\n          active\n            ? styles[\"CalendarDay--active-hover\"]\n            : styles[\"CalendarDay--hover\"]\n        }\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={classNamesString(\n            styles[\"CalendarDay__hinted\"],\n            hinted && styles[\"CalendarDay__hinted--active\"],\n            hintedSelectionStart &&\n              styles[\"CalendarDay__hinted--selection-start\"],\n            hintedSelectionEnd && styles[\"CalendarDay__hinted--selection-end\"]\n          )}\n        >\n          <div\n            className={classNamesString(\n              styles[\"CalendarDay__inner\"],\n              active && !disabled && styles[\"CalendarDay__inner--active\"]\n            )}\n          >\n            <div className={styles[\"CalendarDay__day-number\"]}>\n              {day.getDate()}\n            </div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  }\n);\n\nCalendarDay.displayName = \"CalendarDay\";\n"],"mappings":"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"}
+{"version":3,"file":"CalendarDay.js","names":["CalendarDay","React","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","props","useConfigProvider","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","ENABLE_KEYBOARD_INPUT_EVENT_NAME","bubbles","focus","classNames","styles","Intl","DateTimeFormat","weekday","year","month","format","getDate","displayName"],"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\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 && styles[`CalendarDay--size-${size}`],\n          today && styles['CalendarDay--today'],\n          selected && !disabled && styles['CalendarDay--selected'],\n          active && !disabled && styles['CalendarDay--active'],\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--active-hover'] : 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"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
-import * as React from "react";
-import { CalendarDayElementProps } from "../CalendarDay/CalendarDay";
-export interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+import * as React from 'react';
+import { CalendarDayElementProps } from '../CalendarDay/CalendarDay';
+export interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     value?: Date | Array<Date | null>;
     viewDate: Date;
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     showNeighboringMonth?: boolean;
-    size?: "s" | "m";
+    size?: 's' | 'm';
     dayProps?: CalendarDayElementProps;
     listenDayChangesForUpdate?: boolean;
     onDayChange(value: Date): void;

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

@@ -13,7 +13,7 @@ var _date = require("../../lib/date");
 var _CalendarDay = require("../CalendarDay/CalendarDay");
 var _calendar = require("../../lib/calendar");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _useTodayDate = require("../../hooks/useTodayDate");
 var _excluded = ["viewDate", "value", "weekStartsOn", "onDayChange", "isDaySelected", "isDayActive", "isDaySelectionEnd", "isDaySelectionStart", "onDayEnter", "onDayLeave", "isDayHinted", "isHintedDaySelectionStart", "isHintedDaySelectionEnd", "isDayFocused", "isDayDisabled", "size", "showNeighboringMonth", "dayProps", "className", "listenDayChangesForUpdate"];
@@ -57,10 +57,10 @@ var CalendarDays = function CalendarDays(_ref) {
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
   }, [onDayChange]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, props, {
-    className: (0, _classNames.classNamesString)("vkuiCalendarDays", className),
+    className: (0, _vkjs.classNames)("vkuiCalendarDays", className),
     ref: ref
   }), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiCalendarDays__row", size && styles["CalendarDays__row--size-".concat(size)])
+    className: (0, _vkjs.classNames)("vkuiCalendarDays__row", size && styles["CalendarDays__row--size-".concat(size)])
   }, daysNames.map(function (dayName) {
     return /*#__PURE__*/React.createElement(_Footnote.Footnote, {
       key: dayName,
@@ -68,7 +68,7 @@ var CalendarDays = function CalendarDays(_ref) {
     }, dayName);
   })), weeks.map(function (week, i) {
     return /*#__PURE__*/React.createElement("div", {
-      className: (0, _classNames.classNamesString)("vkuiCalendarDays__row", size && styles["CalendarDays__row--size-".concat(size)]),
+      className: (0, _vkjs.classNames)("vkuiCalendarDays__row", size && styles["CalendarDays__row--size-".concat(size)]),
       key: i
     }, week.map(function (day, i) {
       var sameMonth = (0, _date.isSameMonth)(day, viewDate);

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarDays.js","names":["CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","useConfigProvider","locale","ref","React","useRef","now","useTodayDate","weeks","useMemo","getWeeks","daysNames","getDaysNames","handleDayChange","useCallback","date","current","focus","classNamesString","styles","map","dayName","week","i","day","sameMonth","isSameMonth","toISOString","isSameDay"],"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { isSameDay, isSameMonth } from \"../../lib/date\";\nimport {\n  CalendarDay,\n  CalendarDayElementProps,\n} from \"../CalendarDay/CalendarDay\";\nimport { getDaysNames, getWeeks } from \"../../lib/calendar\";\nimport { useConfigProvider } from \"../ConfigProvider/ConfigProviderContext\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { useTodayDate } from \"../../hooks/useTodayDate\";\nimport styles from \"./CalendarDays.module.css\";\n\nexport interface CalendarDaysProps\n  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(\n    () => getWeeks(viewDate, weekStartsOn),\n    [weekStartsOn, viewDate]\n  );\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\n      {...props}\n      className={classNamesString(styles[\"CalendarDays\"], className)}\n      ref={ref}\n    >\n      <div\n        className={classNamesString(\n          styles[\"CalendarDays__row\"],\n          size && styles[`CalendarDays__row--size-${size}`]\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={classNamesString(\n            styles[\"CalendarDays__row\"],\n            size && styles[`CalendarDays__row--size-${size}`]\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"],"mappings":"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"}
+{"version":3,"file":"CalendarDays.js","names":["CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","useConfigProvider","locale","ref","React","useRef","now","useTodayDate","weeks","useMemo","getWeeks","daysNames","getDaysNames","handleDayChange","useCallback","date","current","focus","classNames","styles","map","dayName","week","i","day","sameMonth","isSameMonth","toISOString","isSameDay"],"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { CalendarDay, CalendarDayElementProps } from '../CalendarDay/CalendarDay';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { useTodayDate } from '../../hooks/useTodayDate';\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 && styles[`CalendarDays__row--size-${size}`],\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 && styles[`CalendarDays__row--size-${size}`],\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"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { TappableElementProps } from "../Tappable/Tappable";
-declare type ArrowMonthProps = Omit<TappableElementProps, "onClick" | "aria-label">;
-export interface CalendarHeaderProps extends Pick<React.HTMLAttributes<HTMLDivElement>, "className"> {
+import * as React from 'react';
+import { TappableElementProps } from '../Tappable/Tappable';
+declare type ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;
+export interface CalendarHeaderProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     viewDate: Date;
     prevMonth?: boolean;
     nextMonth?: boolean;

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

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _date = require("../../lib/date");
 var _icons = require("@vkontakte/icons");
 var _Tappable = require("../Tappable/Tappable");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _CustomSelect = require("../CustomSelect/CustomSelect");
 var _adaptivity = require("../../lib/adaptivity");
 var _calendar = require("../../lib/calendar");
@@ -38,13 +38,13 @@ var CalendarHeader = function CalendarHeader(_ref) {
     _ref$nextMonthProps = _ref.nextMonthProps,
     nextMonthProps = _ref$nextMonthProps === void 0 ? {} : _ref$nextMonthProps,
     _ref$prevMonthAriaLab = _ref.prevMonthAriaLabel,
-    prevMonthAriaLabel = _ref$prevMonthAriaLab === void 0 ? "Предыдущий месяц" : _ref$prevMonthAriaLab,
+    prevMonthAriaLabel = _ref$prevMonthAriaLab === void 0 ? 'Предыдущий месяц' : _ref$prevMonthAriaLab,
     _ref$nextMonthAriaLab = _ref.nextMonthAriaLabel,
-    nextMonthAriaLabel = _ref$nextMonthAriaLab === void 0 ? "Следующий месяц" : _ref$nextMonthAriaLab,
+    nextMonthAriaLabel = _ref$nextMonthAriaLab === void 0 ? 'Следующий месяц' : _ref$nextMonthAriaLab,
     _ref$changeMonthAriaL = _ref.changeMonthAriaLabel,
-    changeMonthAriaLabel = _ref$changeMonthAriaL === void 0 ? "Изменить месяц" : _ref$changeMonthAriaL,
+    changeMonthAriaLabel = _ref$changeMonthAriaL === void 0 ? 'Изменить месяц' : _ref$changeMonthAriaL,
     _ref$changeYearAriaLa = _ref.changeYearAriaLabel,
-    changeYearAriaLabel = _ref$changeYearAriaLa === void 0 ? "Изменить год" : _ref$changeYearAriaLa,
+    changeYearAriaLabel = _ref$changeYearAriaLa === void 0 ? 'Изменить год' : _ref$changeYearAriaLa,
     _ref$prevMonthIcon = _ref.prevMonthIcon,
     prevMonthIcon = _ref$prevMonthIcon === void 0 ? /*#__PURE__*/React.createElement(_icons.Icon20ChevronLeftOutline, {
       className: "vkuiCalendarHeader__nav-icon--accent",
@@ -82,19 +82,19 @@ var CalendarHeader = function CalendarHeader(_ref) {
     return (0, _calendar.getYears)(currentYear, 100);
   }, [currentYear]);
   var formatter = new Intl.DateTimeFormat(locale, {
-    year: "numeric",
-    month: "long"
+    year: 'numeric',
+    month: 'long'
   });
   var prevMonthClassName = prevMonthProps.className,
     restPrevMonthProps = (0, _objectWithoutProperties2.default)(prevMonthProps, _excluded);
   var nextMonthClassName = nextMonthProps.className,
     restNextMonthProps = (0, _objectWithoutProperties2.default)(nextMonthProps, _excluded2);
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiCalendarHeader", className)
+    className: (0, _vkjs.classNames)("vkuiCalendarHeader", className)
   }, prevMonth && /*#__PURE__*/React.createElement(_AdaptivityProvider.AdaptivityProvider, {
     sizeX: _adaptivity.SizeType.REGULAR
   }, /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiCalendarHeader__nav-icon", "vkuiCalendarHeader__nav-icon-prev", prevMonthClassName),
+    className: (0, _vkjs.classNames)("vkuiCalendarHeader__nav-icon", "vkuiCalendarHeader__nav-icon-prev", prevMonthClassName),
     onClick: onPrevMonth,
     "aria-label": "".concat(prevMonthAriaLabel, ", ").concat(formatter.format((0, _date.subMonths)(viewDate, 1)))
   }, restPrevMonthProps), prevMonthIcon)), disablePickers ? /*#__PURE__*/React.createElement(_Paragraph.Paragraph, {
@@ -103,9 +103,9 @@ var CalendarHeader = function CalendarHeader(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     className: "vkuiCalendarHeader__month"
   }, new Intl.DateTimeFormat(locale, {
-    month: "long"
+    month: 'long'
   }).format(viewDate)), "\xA0", new Intl.DateTimeFormat(locale, {
-    year: "numeric"
+    year: 'numeric'
   }).format(viewDate)) : /*#__PURE__*/React.createElement(_AdaptivityProvider.AdaptivityProvider, {
     sizeY: _adaptivity.SizeType.COMPACT
   }, /*#__PURE__*/React.createElement("div", {
@@ -135,7 +135,7 @@ var CalendarHeader = function CalendarHeader(_ref) {
   }))), nextMonth && /*#__PURE__*/React.createElement(_AdaptivityProvider.AdaptivityProvider, {
     sizeX: _adaptivity.SizeType.REGULAR
   }, /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiCalendarHeader__nav-icon", "vkuiCalendarHeader__nav-icon-next", nextMonthClassName),
+    className: (0, _vkjs.classNames)("vkuiCalendarHeader__nav-icon", "vkuiCalendarHeader__nav-icon-next", nextMonthClassName),
     onClick: onNextMonth,
     "aria-label": "".concat(nextMonthAriaLabel, ", ").concat(formatter.format((0, _date.addMonths)(viewDate, 1)))
   }, restNextMonthProps), nextMonthIcon)));