@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

package/dist/components/Button/Button.js

@@ -10,13 +10,38 @@ import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
 import { Spinner } from "../Spinner/Spinner";
 import { Tappable } from "../Tappable/Tappable";
+var stylesSize = {
+    s: "vkuiButton--size-s",
+    m: "vkuiButton--size-m",
+    l: "vkuiButton--size-l"
+};
+var stylesMode = {
+    primary: "vkuiButton--mode-primary",
+    secondary: "vkuiButton--mode-secondary",
+    tertiary: "vkuiButton--mode-tertiary",
+    outline: "vkuiButton--mode-outline",
+    link: "vkuiButton--mode-link"
+};
+var stylesAppearance = {
+    "accent": "vkuiButton--appearance-accent",
+    "positive": "vkuiButton--appearance-positive",
+    "negative": "vkuiButton--appearance-negative",
+    "neutral": "vkuiButton--appearance-neutral",
+    "overlay": "vkuiButton--appearance-overlay",
+    "accent-invariable": "vkuiButton--appearance-accent-invariable"
+};
+var stylesAlign = {
+    left: "vkuiButton--align-left",
+    center: "vkuiButton--align-center",
+    right: "vkuiButton--align-right"
+};
 var sizeYClassNames = _define_property({
     none: "vkuiButton--sizeY-none"
 }, SizeType.REGULAR, "vkuiButton--sizeY-regular");
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
  */ export var Button = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, _param_stretched = _param.stretched, stretched = _param_stretched === void 0 ? false : _param_stretched, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, children = _param.children, before = _param.before, after = _param.after, getRootRef = _param.getRootRef, loading = _param.loading, onClick = _param.onClick, _param_stopPropagation = _param.stopPropagation, stopPropagation = _param_stopPropagation === void 0 ? true : _param_stopPropagation, className = _param.className, disableSpinnerAnimation = _param.disableSpinnerAnimation, restProps = _object_without_properties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, _param_stretched = _param.stretched, stretched = _param_stretched === void 0 ? false : _param_stretched, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, children = _param.children, before = _param.before, after = _param.after, getRootRef = _param.getRootRef, loading = _param.loading, onClick = _param.onClick, _param_stopPropagation = _param.stopPropagation, stopPropagation = _param_stopPropagation === void 0 ? true : _param_stopPropagation, className = _param.className, disableSpinnerAnimation = _param.disableSpinnerAnimation, rounded = _param.rounded, restProps = _object_without_properties(_param, [
         "size",
         "mode",
         "appearance",
@@ -30,7 +55,8 @@ var sizeYClassNames = _define_property({
         "onClick",
         "stopPropagation",
         "className",
-        "disableSpinnerAnimation"
+        "disableSpinnerAnimation",
+        "rounded"
     ]);
     var hasIcons = Boolean(before || after);
     var hasIconOnly = !children && Boolean(after) !== Boolean(before);
@@ -44,28 +70,7 @@ var sizeYClassNames = _define_property({
     }, restProps), {
         onClick: loading ? undefined : onClick,
         stopPropagation: stopPropagation,
-        className: classNames(className, "vkuiButton", {
-            s: "vkuiButton--size-s",
-            m: "vkuiButton--size-m",
-            l: "vkuiButton--size-l"
-        }[size], {
-            primary: "vkuiButton--mode-primary",
-            secondary: "vkuiButton--mode-secondary",
-            tertiary: "vkuiButton--mode-tertiary",
-            outline: "vkuiButton--mode-outline",
-            link: "vkuiButton--mode-link"
-        }[mode], {
-            "accent": "vkuiButton--appearance-accent",
-            "positive": "vkuiButton--appearance-positive",
-            "negative": "vkuiButton--appearance-negative",
-            "neutral": "vkuiButton--appearance-neutral",
-            "overlay": "vkuiButton--appearance-overlay",
-            "accent-invariable": "vkuiButton--appearance-accent-invariable"
-        }[appearance], {
-            left: "vkuiButton--align-left",
-            center: "vkuiButton--align-center",
-            right: "vkuiButton--align-right"
-        }[align], sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], platform === Platform.IOS && "vkuiButton--ios", stretched && "vkuiButton--stretched", hasIcons && "vkuiButton--with-icon", hasIconOnly && !stretched && "vkuiButton--singleIcon", loading && "vkuiButton--loading"),
+        className: classNames(className, "vkuiButton", stylesSize[size], stylesMode[mode], stylesAppearance[appearance], stylesAlign[align], sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], platform === Platform.IOS && "vkuiButton--ios", stretched && "vkuiButton--stretched", hasIcons && "vkuiButton--with-icon", hasIconOnly && !stretched && "vkuiButton--singleIcon", loading && "vkuiButton--loading", rounded && "vkuiButton--rounded"),
         getRootRef: getRootRef
     }), loading && /*#__PURE__*/ React.createElement(Spinner, {
         size: "small",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\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  disableSpinnerAnimation?: 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  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  disableSpinnerAnimation,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        {\n          s: styles['Button--size-s'],\n          m: styles['Button--size-m'],\n          l: styles['Button--size-l'],\n        }[size],\n        {\n          primary: styles['Button--mode-primary'],\n          secondary: styles['Button--mode-secondary'],\n          tertiary: styles['Button--mode-tertiary'],\n          outline: styles['Button--mode-outline'],\n          link: styles['Button--mode-link'],\n        }[mode],\n        {\n          'accent': styles['Button--appearance-accent'],\n          'positive': styles['Button--appearance-positive'],\n          'negative': styles['Button--appearance-negative'],\n          'neutral': styles['Button--appearance-neutral'],\n          'overlay': styles['Button--appearance-overlay'],\n          'accent-invariable': styles['Button--appearance-accent-invariable'],\n        }[appearance],\n        {\n          left: styles['Button--align-left'],\n          center: styles['Button--align-center'],\n          right: styles['Button--align-right'],\n        }[align],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\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 && (\n        <Spinner\n          size=\"small\"\n          className={styles.Button__spinner}\n          disableAnimation={disableSpinnerAnimation}\n        />\n      )}\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"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","sizeYClassNames","none","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","disableSpinnerAnimation","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","s","m","l","primary","secondary","tertiary","outline","link","left","center","right","COMPACT","IOS","disableAnimation","span","role","data-testid","process","env","NODE_ENV"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAuB,uBAAuB;AAI/D,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AAgBnB;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAO,wCACPC,MAAAA,gCAAO,oDACPC,YAAAA,4CAAa,wDACbC,WAAAA,0CAAY,gDACZC,OAAAA,kCAAQ,yBACRC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,iBAAAA,SACAC,iBAAAA,yCACAC,iBAAAA,sDAAkB,+BAClBC,mBAAAA,WACAC,iCAAAA,yBACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,QAAQV,UAAUC;IACnC,IAAMU,cAAc,CAACZ,YAAYW,QAAQT,WAAWS,QAAQV;IAC5D,IAA2BhB,iBAAAA,wCAAAA,eAAnB4B,OAAAA,0CAAQ;IAChB,IAAMC,WAAW5B;IAEjB,qBACE,oBAACI;QACCyB,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,IAAI,GAAG,MAAM;QAClCC,kBAAiB;OACbV;QACJJ,SAASD,UAAUgB,YAAYf;QAC/BC,iBAAiBA;QACjBC,WAAWxB,WACTwB,yBAEA;YACEc,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAAC5B,KAAK,EACP;YACE6B,OAAO;YACPC,SAAS;YACTC,QAAQ;YACRC,OAAO;YACPC,IAAI;QACN,CAAC,CAAChC,KAAK,EACP;YACE,QAAQ;YACR,UAAU;YACV,UAAU;YACV,SAAS;YACT,SAAS;YACT,mBAAmB;QACrB,CAAC,CAACC,WAAW,EACb;YACEgC,IAAI;YACJC,MAAM;YACNC,KAAK;QACP,CAAC,CAAChC,MAAM,EACRc,UAAU1B,SAAS6C,OAAO,IAAIzC,eAAe,CAACsB,MAAM,EACpDC,aAAa1B,SAAS6C,GAAG,uBACzBnC,sCACAY,qCACAE,eAAe,CAACd,uCAChBM;QAEFD,YAAYA;QAEXC,yBACC,oBAACf;QACCM,MAAK;QACLY,SAAS;QACT2B,kBAAkB1B;sBAGtB,oBAAC2B;QAAK5B,SAAS;OACZvB,aAAaiB,yBACZ,oBAACkC;QACC5B,SAAS;QACT6B,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWpB;OAEzDnB,SAGJjB,aAAagB,2BACZ,oBAACmC;QACC5B,SAAS;QACT8B,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAapB;OAE3DpB,WAGJhB,aAAakB,wBACZ,oBAACiC;QACC5B,SAAS;QACT6B,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUpB;OAExDlB;AAMb,EAAE"}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n  s: styles['Button--size-s'],\n  m: styles['Button--size-m'],\n  l: styles['Button--size-l'],\n};\n\nconst stylesMode = {\n  primary: styles['Button--mode-primary'],\n  secondary: styles['Button--mode-secondary'],\n  tertiary: styles['Button--mode-tertiary'],\n  outline: styles['Button--mode-outline'],\n  link: styles['Button--mode-link'],\n};\n\nconst stylesAppearance = {\n  'accent': styles['Button--appearance-accent'],\n  'positive': styles['Button--appearance-positive'],\n  'negative': styles['Button--appearance-negative'],\n  'neutral': styles['Button--appearance-neutral'],\n  'overlay': styles['Button--appearance-overlay'],\n  'accent-invariable': styles['Button--appearance-accent-invariable'],\n};\n\nconst stylesAlign = {\n  left: styles['Button--align-left'],\n  center: styles['Button--align-center'],\n  right: styles['Button--align-right'],\n};\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\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  disableSpinnerAnimation?: boolean;\n  rounded?: 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  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  disableSpinnerAnimation,\n  rounded,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        stylesSize[size],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesAlign[align],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\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        rounded && styles['Button--rounded'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"small\"\n          className={styles.Button__spinner}\n          disableAnimation={disableSpinnerAnimation}\n        />\n      )}\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"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","stylesSize","s","m","l","stylesMode","primary","secondary","tertiary","outline","link","stylesAppearance","stylesAlign","left","center","right","sizeYClassNames","none","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","disableSpinnerAnimation","rounded","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","COMPACT","IOS","disableAnimation","span","role","data-testid","process","env","NODE_ENV"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAuB,uBAAuB;AAI/D,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,IAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;IACPC,IAAI;AACN;AAEA,IAAMC,mBAAmB;IACvB,QAAQ;IACR,UAAU;IACV,UAAU;IACV,SAAS;IACT,SAAS;IACT,mBAAmB;AACrB;AAEA,IAAMC,cAAc;IAClBC,IAAI;IACJC,MAAM;IACNC,KAAK;AACP;AAEA,IAAMC;IACJC,IAAI;GACHpB,SAASqB,OAAO;AAiBnB;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAO,wCACPC,MAAAA,gCAAO,oDACPC,YAAAA,4CAAa,wDACbC,WAAAA,0CAAY,gDACZC,OAAAA,kCAAQ,yBACRC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,iBAAAA,SACAC,iBAAAA,yCACAC,iBAAAA,sDAAkB,+BAClBC,mBAAAA,WACAC,iCAAAA,yBACAC,iBAAAA,SACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,QAAQX,UAAUC;IACnC,IAAMW,cAAc,CAACb,YAAYY,QAAQV,WAAWU,QAAQX;IAC5D,IAA2B/B,iBAAAA,wCAAAA,eAAnB4C,OAAAA,0CAAQ;IAChB,IAAMC,WAAW5C;IAEjB,qBACE,oBAACI;QACCyC,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,IAAI,GAAG,MAAM;QAClCC,kBAAiB;OACbV;QACJL,SAASD,UAAUiB,YAAYhB;QAC/BC,iBAAiBA;QACjBC,WAAWvC,WACTuC,yBAEA/B,UAAU,CAACmB,KAAK,EAChBf,UAAU,CAACgB,KAAK,EAChBV,gBAAgB,CAACW,WAAW,EAC5BV,WAAW,CAACY,MAAM,EAClBe,UAAU1C,SAASkD,OAAO,IAAI/B,eAAe,CAACuB,MAAM,EACpDC,aAAa1C,SAASkD,GAAG,uBACzBzB,sCACAa,qCACAE,eAAe,CAACf,uCAChBM,kCACAK;QAEFN,YAAYA;QAEXC,yBACC,oBAAC9B;QACCqB,MAAK;QACLY,SAAS;QACTiB,kBAAkBhB;sBAGtB,oBAACiB;QAAKlB,SAAS;OACZtC,aAAagC,yBACZ,oBAACwB;QACClB,SAAS;QACTmB,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWT;OAEzDpB,SAGJhC,aAAa+B,2BACZ,oBAACyB;QACClB,SAAS;QACToB,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAaT;OAE3DrB,WAGJ/B,aAAaiC,wBACZ,oBAACuB;QACClB,SAAS;QACTmB,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUT;OAExDnB;AAMb,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { AlignType, HasRootRef } from '../../types';
-export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import type { AlignType, HTMLAttributesWithRootRef } from '../../types';
+export interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
      */
@@ -23,4 +23,4 @@ export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/ButtonGroup
  */
-export declare const ButtonGroup: ({ mode, gap, stretched, align, getRootRef, className, children, ...restProps }: ButtonGroupProps) => React.JSX.Element;
+export declare const ButtonGroup: ({ mode, gap, stretched, align, ...restProps }: ButtonGroupProps) => React.JSX.Element;

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -2,34 +2,34 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
+var stylesMode = {
+    vertical: "vkuiButtonGroup--mode-vertical",
+    horizontal: "vkuiButtonGroup--mode-horizontal"
+};
+var stylesGap = {
+    space: "vkuiButtonGroup--gap-space",
+    s: "vkuiButtonGroup--gap-s",
+    m: "vkuiButtonGroup--gap-m"
+};
+var stylesAlign = {
+    left: "vkuiButtonGroup--align-left",
+    center: "vkuiButtonGroup--align-center",
+    right: "vkuiButtonGroup--align-right"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/ButtonGroup
  */ export var ButtonGroup = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "horizontal" : _param_mode, _param_gap = _param.gap, gap = _param_gap === void 0 ? "m" : _param_gap, _param_stretched = _param.stretched, stretched = _param_stretched === void 0 ? false : _param_stretched, _param_align = _param.align, align = _param_align === void 0 ? "left" /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */  : _param_align, getRootRef = _param.getRootRef, className = _param.className, children = _param.children, restProps = _object_without_properties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "horizontal" : _param_mode, _param_gap = _param.gap, gap = _param_gap === void 0 ? "m" : _param_gap, _param_stretched = _param.stretched, stretched = _param_stretched === void 0 ? false : _param_stretched, _param_align = _param.align, align = _param_align === void 0 ? "left" /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */  : _param_align, restProps = _object_without_properties(_param, [
         "mode",
         "gap",
         "stretched",
-        "align",
-        "getRootRef",
-        "className",
-        "children"
+        "align"
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
-        className: classNames(className, "vkuiButtonGroup", {
-            vertical: "vkuiButtonGroup--mode-vertical",
-            horizontal: "vkuiButtonGroup--mode-horizontal"
-        }[mode], gap !== "none" && ({
-            space: "vkuiButtonGroup--gap-space",
-            s: "vkuiButtonGroup--gap-s",
-            m: "vkuiButtonGroup--gap-m"
-        })[gap], stretched && "vkuiButtonGroup--stretched", {
-            left: "vkuiButtonGroup--align-left",
-            center: "vkuiButtonGroup--align-center",
-            right: "vkuiButtonGroup--align-right"
-        }[align]),
-        role: "group",
-        ref: getRootRef
-    }, restProps), children);
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: classNames("vkuiButtonGroup", stylesMode[mode], gap !== "none" && stylesGap[gap], stretched && "vkuiButtonGroup--stretched", stylesAlign[align]),
+        role: "group"
+    }, restProps));
 };
 
 //# sourceMappingURL=ButtonGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HasRootRef } 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   * Горизонтальное выравнивание элементов внутри группы.\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        {\n          vertical: styles['ButtonGroup--mode-vertical'],\n          horizontal: styles['ButtonGroup--mode-horizontal'],\n        }[mode],\n        gap !== 'none' &&\n          {\n            space: styles['ButtonGroup--gap-space'],\n            s: styles['ButtonGroup--gap-s'],\n            m: styles['ButtonGroup--gap-m'],\n          }[gap],\n        stretched && styles['ButtonGroup--stretched'],\n        {\n          left: styles['ButtonGroup--align-left'],\n          center: styles['ButtonGroup--align-center'],\n          right: styles['ButtonGroup--align-right'],\n        }[align],\n      )}\n      role=\"group\"\n      ref={getRootRef}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","ButtonGroup","mode","gap","stretched","align","getRootRef","className","children","restProps","div","vertical","horizontal","space","s","m","left","center","right","role","ref"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AA2B7C;;CAEC,GACD,OAAO,IAAMC,cAAc;6BACzBC,MAAAA,gCAAO,gDACPC,KAAAA,8BAAM,4CACNC,WAAAA,0CAAY,gDACZC,OAAAA,kCAAQ,OAAO,4EAA4E,oBAC3FC,oBAAAA,YACAC,mBAAAA,WACAC,kBAAAA,UACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACE;QACCH,WAAWP,WACTO,8BAEA;YACEI,QAAQ;YACRC,UAAU;QACZ,CAAC,CAACV,KAAK,EACPC,QAAQ,UACN,CAAA;YACEU,KAAK;YACLC,CAAC;YACDC,CAAC;QACH,CAAA,CAAC,CAACZ,IAAI,EACRC,2CACA;YACEY,IAAI;YACJC,MAAM;YACNC,KAAK;QACP,CAAC,CAACb,MAAM;QAEVc,MAAK;QACLC,KAAKd;OACDG,YAEHD;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ButtonGroup.module.css';\n\nconst stylesMode = {\n  vertical: styles['ButtonGroup--mode-vertical'],\n  horizontal: styles['ButtonGroup--mode-horizontal'],\n};\n\nconst stylesGap = {\n  space: styles['ButtonGroup--gap-space'],\n  s: styles['ButtonGroup--gap-s'],\n  m: styles['ButtonGroup--gap-m'],\n};\n\nconst stylesAlign = {\n  left: styles['ButtonGroup--align-left'],\n  center: styles['ButtonGroup--align-center'],\n  right: styles['ButtonGroup--align-right'],\n};\n\nexport interface ButtonGroupProps extends HTMLAttributesWithRootRef<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   * Горизонтальное выравнивание элементов внутри группы.\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  ...restProps\n}: ButtonGroupProps) => {\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.ButtonGroup,\n        stylesMode[mode],\n        gap !== 'none' && stylesGap[gap],\n        stretched && styles['ButtonGroup--stretched'],\n        stylesAlign[align],\n      )}\n      role=\"group\"\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","stylesMode","vertical","horizontal","stylesGap","space","s","m","stylesAlign","left","center","right","ButtonGroup","mode","gap","stretched","align","restProps","baseClassName","role"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC,aAAa;IACjBC,QAAQ;IACRC,UAAU;AACZ;AAEA,IAAMC,YAAY;IAChBC,KAAK;IACLC,CAAC;IACDC,CAAC;AACH;AAEA,IAAMC,cAAc;IAClBC,IAAI;IACJC,MAAM;IACNC,KAAK;AACP;AAuBA;;CAEC,GACD,OAAO,IAAMC,cAAc;6BACzBC,MAAAA,gCAAO,gDACPC,KAAAA,8BAAM,4CACNC,WAAAA,0CAAY,gDACZC,OAAAA,kCAAQ,OAAO,4EAA4E,oBACxFC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAAChB;QACCkB,eAAenB,8BAEbE,UAAU,CAACY,KAAK,EAChBC,QAAQ,UAAUV,SAAS,CAACU,IAAI,EAChCC,2CACAP,WAAW,CAACQ,MAAM;QAEpBG,MAAK;OACDF;AAGV,EAAE"}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { CalendarDaysProps } from '../CalendarDays/CalendarDays';
 import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
 import { CalendarTimeProps } from '../CalendarTime/CalendarTime';
-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> {
+export interface CalendarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>, Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>, Pick<CalendarHeaderProps, 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'prevMonthProps' | 'nextMonthProps'>, Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'> {
     value?: Date;
     disablePast?: boolean;
     disableFuture?: boolean;
@@ -30,4 +30,4 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
  */
-export declare const Calendar: ({ 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 }: CalendarProps) => React.JSX.Element;
+export declare const Calendar: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, enableTime, doneButtonText, weekStartsOn, disablePickers, changeHoursAriaLabel, changeMinutesAriaLabel, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, showNeighboringMonth, changeDayAriaLabel, size, viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, ...props }: CalendarProps) => React.JSX.Element;

package/dist/components/Calendar/Calendar.js

@@ -11,11 +11,12 @@ import { warnOnce } from "../../lib/warnOnce";
 import { CalendarDays } from "../CalendarDays/CalendarDays";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader";
 import { CalendarTime } from "../CalendarTime/CalendarTime";
+import { RootComponent } from "../RootComponent/RootComponent";
 var warn = warnOnce("Calendar");
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
  */ export var Calendar = function(_param) {
-    var value = _param.value, onChange = _param.onChange, disablePast = _param.disablePast, disableFuture = _param.disableFuture, shouldDisableDate = _param.shouldDisableDate, onClose = _param.onClose, _param_enableTime = _param.enableTime, enableTime = _param_enableTime === void 0 ? false : _param_enableTime, doneButtonText = _param.doneButtonText, _param_weekStartsOn = _param.weekStartsOn, weekStartsOn = _param_weekStartsOn === void 0 ? 1 : _param_weekStartsOn, getRootRef = _param.getRootRef, disablePickers = _param.disablePickers, changeHoursAriaLabel = _param.changeHoursAriaLabel, changeMinutesAriaLabel = _param.changeMinutesAriaLabel, prevMonthAriaLabel = _param.prevMonthAriaLabel, nextMonthAriaLabel = _param.nextMonthAriaLabel, changeMonthAriaLabel = _param.changeMonthAriaLabel, changeYearAriaLabel = _param.changeYearAriaLabel, showNeighboringMonth = _param.showNeighboringMonth, _param_changeDayAriaLabel = _param.changeDayAriaLabel, changeDayAriaLabel = _param_changeDayAriaLabel === void 0 ? "Изменить день" : _param_changeDayAriaLabel, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, externalViewDate = _param.viewDate, onHeaderChange = _param.onHeaderChange, onNextMonth = _param.onNextMonth, onPrevMonth = _param.onPrevMonth, prevMonthIcon = _param.prevMonthIcon, nextMonthIcon = _param.nextMonthIcon, prevMonthProps = _param.prevMonthProps, nextMonthProps = _param.nextMonthProps, dayProps = _param.dayProps, className = _param.className, listenDayChangesForUpdate = _param.listenDayChangesForUpdate, props = _object_without_properties(_param, [
+    var value = _param.value, onChange = _param.onChange, disablePast = _param.disablePast, disableFuture = _param.disableFuture, shouldDisableDate = _param.shouldDisableDate, onClose = _param.onClose, _param_enableTime = _param.enableTime, enableTime = _param_enableTime === void 0 ? false : _param_enableTime, doneButtonText = _param.doneButtonText, _param_weekStartsOn = _param.weekStartsOn, weekStartsOn = _param_weekStartsOn === void 0 ? 1 : _param_weekStartsOn, disablePickers = _param.disablePickers, changeHoursAriaLabel = _param.changeHoursAriaLabel, changeMinutesAriaLabel = _param.changeMinutesAriaLabel, prevMonthAriaLabel = _param.prevMonthAriaLabel, nextMonthAriaLabel = _param.nextMonthAriaLabel, changeMonthAriaLabel = _param.changeMonthAriaLabel, changeYearAriaLabel = _param.changeYearAriaLabel, showNeighboringMonth = _param.showNeighboringMonth, _param_changeDayAriaLabel = _param.changeDayAriaLabel, changeDayAriaLabel = _param_changeDayAriaLabel === void 0 ? "Изменить день" : _param_changeDayAriaLabel, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, externalViewDate = _param.viewDate, onHeaderChange = _param.onHeaderChange, onNextMonth = _param.onNextMonth, onPrevMonth = _param.onPrevMonth, prevMonthIcon = _param.prevMonthIcon, nextMonthIcon = _param.nextMonthIcon, prevMonthProps = _param.prevMonthProps, nextMonthProps = _param.nextMonthProps, dayProps = _param.dayProps, listenDayChangesForUpdate = _param.listenDayChangesForUpdate, props = _object_without_properties(_param, [
         "value",
         "onChange",
         "disablePast",
@@ -25,7 +26,6 @@ var warn = warnOnce("Calendar");
         "enableTime",
         "doneButtonText",
         "weekStartsOn",
-        "getRootRef",
         "disablePickers",
         "changeHoursAriaLabel",
         "changeMinutesAriaLabel",
@@ -45,7 +45,6 @@ var warn = warnOnce("Calendar");
         "prevMonthProps",
         "nextMonthProps",
         "dayProps",
-        "className",
         "listenDayChangesForUpdate"
     ]);
     var _useCalendar = useCalendar({
@@ -103,9 +102,8 @@ var warn = warnOnce("Calendar");
     }, [
         value
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, props), {
-        ref: getRootRef,
-        className: classNames("vkuiCalendar", size === "s" && "vkuiCalendar--size-s", className)
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, props), {
+        baseClassName: classNames("vkuiCalendar", size === "s" && "vkuiCalendar--size-s")
     }), /*#__PURE__*/ React.createElement(CalendarHeader, {
         viewDate: externalViewDate || viewDate,
         onChange: setViewDate,

package/dist/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":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","isSameDay","isSameMonth","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","warn","Calendar","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","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean","div","ref","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur"],"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 { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<HTMLAttributesWithRootRef<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  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  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  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    <RootComponent\n      {...props}\n      baseClassName={classNames(styles['Calendar'], size === 's' && styles['Calendar--size-s'])}\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    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","isSameDay","isSameMonth","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","RootComponent","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","listenDayChangesForUpdate","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean","baseClassName","className","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,QAAQ,qBAAqB;AACvF,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAA2B,+BAA+B;AAC/E,SAASC,cAAc,QAA6B,mCAAmC;AACvF,SAASC,YAAY,QAA2B,+BAA+B;AAC/E,SAASC,aAAa,QAAQ,iCAAiC;AA4C/D,IAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMM,WAAW;QACtBC,eAAAA,OACAC,kBAAAA,UACAC,qBAAAA,aACAC,uBAAAA,eACAC,2BAAAA,mBACAC,iBAAAA,oCACAC,YAAAA,4CAAa,2BACbC,wBAAAA,6CACAC,cAAAA,gDAAe,yBACfC,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,mCAAAA,2BACGC;QA7BH9B;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;;IAGA,IAUI5C,eAAAA,YAAY;QACde,OAAAA;QACAG,eAAAA;QACAD,aAAAA;QACAE,mBAAAA;QACAiB,gBAAAA;QACAC,aAAAA;QACAC,aAAAA;IACF,IAjBEJ,WASElC,aATFkC,UACAY,cAQE9C,aARF8C,aACAC,eAOE/C,aAPF+C,cACAC,eAMEhD,aANFgD,cACAC,aAKEjD,aALFiD,YACAC,gBAIElD,aAJFkD,eACAC,eAGEnD,aAHFmD,cACAC,gBAEEpD,aAFFoD,eACAC,mBACErD,aADFqD;IAWF9C,0BAA0B;QACxB,IAAIQ,OAAO;YACT+B,YAAY/B;QACd;IACF,GAAG;QAACA;KAAM;IAEV,IAAIuC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiB,CAAChC,kBAAkBS,SAAS,KAAK;QAC7EpB,KAAK,yEAAyE;IAChF;IAEA,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBnC,cAAcY,SAAS,KAAK;QACxEpB,KAAK,4DAA4D;IACnE;IAEA,IAAM4C,gBAAgB3D,MAAM4D,WAAW,CACrC,SAACC;QACC,IAAI;YAAC;YAAW;YAAa;YAAa;SAAa,CAACC,QAAQ,CAACD,MAAME,GAAG,GAAG;YAC3EF,MAAMG,cAAc;QACtB;QAEA,IAAMC,gBAAgB5D,aAAa8C,uBAAAA,wBAAAA,aAAclC,OAAO4C,MAAME,GAAG;QAEjE,IAAIE,iBAAiB,CAACzD,YAAYyD,eAAe7B,WAAW;YAC1DY,YAAYiB;QACd;QACAb,cAAca;IAChB,GACA;QAACd;QAAYC;QAAeJ;QAAa/B;QAAOmB;KAAS;IAG3D,IAAM8B,cAAclE,MAAM4D,WAAW,CACnC,SAACO;YACCjD;SAAAA,YAAAA,sBAAAA,gCAAAA,UAAWZ,aAAa6D,MAAMlD;IAChC,GACA;QAACA;QAAOC;KAAS;IAGnB,IAAMkD,cAAcpE,MAAM4D,WAAW,CACnC,SAACS;eAAcC,QAAQrD,SAASV,UAAU8D,KAAKpD;OAC/C;QAACA;KAAM;IAGT,qBACE,oBAACH,uDACKiC;QACJwB,eAAetE,2BAA+BkC,SAAS;sBAEvD,oBAACvB;QACCwB,UAAUC,oBAAoBD;QAC9BlB,UAAU8B;QACVT,aAAaW;QACbV,aAAaS;QACbvB,gBAAgBA,kBAAkBS,SAAS;QAC3CqC,SAAS;QACT3C,oBAAoBA;QACpBC,oBAAoBA;QACpBC,sBAAsBA;QACtBC,qBAAqBA;QACrBS,eAAeA;QACfC,eAAeA;QACfC,gBAAgBA;QAChBC,gBAAgBA;sBAElB,oBAACjC;QACCyB,UAAUC,oBAAoBD;QAC9BnB,OAAOA;QACPQ,cAAcA;QACd4B,cAAcA;QACdoB,UAAU;QACVC,cAAYxC;QACZyC,WAAWhB;QACXO,aAAaA;QACbE,aAAaA;QACbQ,qBAAqBzE;QACrB0E,mBAAmBzE;QACnBkD,eAAeA;QACfwB,QAAQvB;QACRtB,sBAAsBA;QACtBE,MAAMA;QACNU,UAAUA;QACVC,2BAA2BA;QAE5BvB,cAAcN,SAASkB,SAAS,qBAC/B,oBAAC4C;QAAIP,SAAS;qBACZ,oBAAC3D;QACCI,OAAOA;QACPC,UAAUA;QACVI,SAASA;QACTE,gBAAgBA;QAChBG,sBAAsBA;QACtBC,wBAAwBA;;AAMpC,EAAE"}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { CalendarDayElementProps } from '../CalendarDay/CalendarDay';
-export interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface CalendarDaysProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {
     value?: Date | Array<Date | null>;
     viewDate: Date;
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -21,4 +22,4 @@ export interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElem
     onDayEnter?(value: Date): void;
     onDayLeave?(value: Date): void;
 }
-export declare const CalendarDays: ({ viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth, dayProps, className, listenDayChangesForUpdate, ...props }: CalendarDaysProps) => React.JSX.Element;
+export declare const CalendarDays: ({ viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth, dayProps, listenDayChangesForUpdate, getRootRef, ...props }: CalendarDaysProps) => React.JSX.Element;

package/dist/components/CalendarDays/CalendarDays.js

@@ -3,14 +3,16 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useExternRef } from "../../hooks/useExternRef";
 import { useTodayDate } from "../../hooks/useTodayDate";
 import { getDaysNames, getWeeks } from "../../lib/calendar";
 import { isSameDay, isSameMonth } from "../../lib/date";
 import { CalendarDay } from "../CalendarDay/CalendarDay";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Footnote } from "../Typography/Footnote/Footnote";
 export var CalendarDays = function(_param) {
-    var viewDate = _param.viewDate, value = _param.value, weekStartsOn = _param.weekStartsOn, onDayChange = _param.onDayChange, isDaySelected = _param.isDaySelected, isDayActive = _param.isDayActive, isDaySelectionEnd = _param.isDaySelectionEnd, isDaySelectionStart = _param.isDaySelectionStart, onDayEnter = _param.onDayEnter, onDayLeave = _param.onDayLeave, isDayHinted = _param.isDayHinted, isHintedDaySelectionStart = _param.isHintedDaySelectionStart, isHintedDaySelectionEnd = _param.isHintedDaySelectionEnd, isDayFocused = _param.isDayFocused, isDayDisabled = _param.isDayDisabled, size = _param.size, _param_showNeighboringMonth = _param.showNeighboringMonth, showNeighboringMonth = _param_showNeighboringMonth === void 0 ? false : _param_showNeighboringMonth, dayProps = _param.dayProps, className = _param.className, _param_listenDayChangesForUpdate = _param.listenDayChangesForUpdate, listenDayChangesForUpdate = _param_listenDayChangesForUpdate === void 0 ? false : _param_listenDayChangesForUpdate, props = _object_without_properties(_param, [
+    var viewDate = _param.viewDate, value = _param.value, weekStartsOn = _param.weekStartsOn, onDayChange = _param.onDayChange, isDaySelected = _param.isDaySelected, isDayActive = _param.isDayActive, isDaySelectionEnd = _param.isDaySelectionEnd, isDaySelectionStart = _param.isDaySelectionStart, onDayEnter = _param.onDayEnter, onDayLeave = _param.onDayLeave, isDayHinted = _param.isDayHinted, isHintedDaySelectionStart = _param.isHintedDaySelectionStart, isHintedDaySelectionEnd = _param.isHintedDaySelectionEnd, isDayFocused = _param.isDayFocused, isDayDisabled = _param.isDayDisabled, size = _param.size, _param_showNeighboringMonth = _param.showNeighboringMonth, showNeighboringMonth = _param_showNeighboringMonth === void 0 ? false : _param_showNeighboringMonth, dayProps = _param.dayProps, _param_listenDayChangesForUpdate = _param.listenDayChangesForUpdate, listenDayChangesForUpdate = _param_listenDayChangesForUpdate === void 0 ? false : _param_listenDayChangesForUpdate, getRootRef = _param.getRootRef, props = _object_without_properties(_param, [
         "viewDate",
         "value",
         "weekStartsOn",
@@ -29,11 +31,11 @@ export var CalendarDays = function(_param) {
         "size",
         "showNeighboringMonth",
         "dayProps",
-        "className",
-        "listenDayChangesForUpdate"
+        "listenDayChangesForUpdate",
+        "getRootRef"
     ]);
     var locale = useConfigProvider().locale;
-    var ref = React.useRef(null);
+    var ref = useExternRef(getRootRef);
     var now = useTodayDate(listenDayChangesForUpdate);
     var weeks = React.useMemo(function() {
         return getWeeks(viewDate, weekStartsOn);
@@ -53,11 +55,12 @@ export var CalendarDays = function(_param) {
         onDayChange(date);
         (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
     }, [
-        onDayChange
+        onDayChange,
+        ref
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, props), {
-        className: classNames("vkuiCalendarDays", className),
-        ref: ref
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, props), {
+        baseClassName: "vkuiCalendarDays",
+        getRootRef: ref
     }), /*#__PURE__*/ React.createElement("div", {
         className: classNames("vkuiCalendarDays__row", size === "s" && "vkuiCalendarDays__row--size-s")
     }, daysNames.map(function(dayName) {

package/dist/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":["React","classNames","useTodayDate","getDaysNames","getWeeks","isSameDay","isSameMonth","CalendarDay","useConfigProvider","Footnote","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","locale","ref","useRef","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","div","map","dayName","key","week","i","day","sameMonth","toISOString","today","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDay, CalendarDayElementProps } from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport interface CalendarDaysProps\n  extends Omit<HTMLAttributesWithRootRef<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  listenDayChangesForUpdate = false,\n  getRootRef,\n  ...props\n}: CalendarDaysProps) => {\n  const { locale } = useConfigProvider();\n  const ref = useExternRef(getRootRef);\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, ref],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles['CalendarDays']} getRootRef={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    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useExternRef","useTodayDate","getDaysNames","getWeeks","isSameDay","isSameMonth","CalendarDay","useConfigProvider","RootComponent","Footnote","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","listenDayChangesForUpdate","getRootRef","props","locale","ref","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","baseClassName","div","className","map","dayName","key","week","i","day","sameMonth","toISOString","today","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,EAAEC,QAAQ,QAAQ,qBAAqB;AAC5D,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AAExD,SAASC,WAAW,QAAiC,6BAA6B;AAClF,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AA0B3D,OAAO,IAAMC,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,oDACAC,2BAAAA,0EAA4B,0CAC5BC,oBAAAA,YACGC;QApBHpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,SAAWzB,oBAAXyB;IACR,IAAMC,MAAMjC,aAAa8B;IACzB,IAAMI,MAAMjC,aAAa4B;IAEzB,IAAMM,QAAQrC,MAAMsC,OAAO,CAAC;eAAMjC,SAASQ,UAAUE;OAAe;QAACA;QAAcF;KAAS;IAE5F,IAAM0B,YAAYvC,MAAMsC,OAAO,CAC7B;eAAMlC,aAAagC,KAAKrB,cAAcmB;OACtC;QAACA;QAAQE;QAAKrB;KAAa;IAG7B,IAAMyB,kBAAkBxC,MAAMyC,WAAW,CACvC,SAACC;YAGCP;QAFAnB,YAAY0B;SAEZP,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAaS,KAAK;IACpB,GACA;QAAC5B;QAAamB;KAAI;IAGpB,qBACE,oBAACzB,uDAAkBuB;QAAOY,aAAa;QAA0Bb,YAAYG;sBAC3E,oBAACW;QACCC,WAAW9C,oCAET2B,SAAS;OAGVW,UAAUS,GAAG,CAAC,SAACC;6BACd,oBAACtC;YAASuC,KAAKD;YAASF,SAAS;WAC9BE;SAKNZ,MAAMW,GAAG,CAAC,SAACG,MAAMC;6BAChB,oBAACN;YACCC,WAAW9C,oCAET2B,SAAS;YAEXsB,KAAKE;WAEJD,KAAKH,GAAG,CAAC,SAACK,KAAKD;gBAaY5B,4BACFC,0BACVR,gBAIFM;YAlBZ,IAAM+B,YAAY/C,YAAY8C,KAAKxC;YACnC,qBACE,oBAACL;gBACC0C,KAAKG,IAAIE,WAAW;gBACpBF,KAAKA;gBACLG,OAAOlD,UAAU+C,KAAKjB;gBACtBqB,QAAQvC,YAAYmC;gBACpBK,UAAUlB;gBACVmB,QAAQ,CAAC9B,wBAAwB,CAACyB;gBAClCM,UAAUjC,cAAc0B;gBACxBQ,gBAAgBzC,oBAAoBiC,KAAKD;gBACzCU,cAAc3C,kBAAkBkC,KAAKD;gBACrCW,oBAAoB,GAAEvC,6BAAAA,uCAAAA,iDAAAA,2BAA4B6B,KAAKD;gBACvDY,kBAAkB,GAAEvC,2BAAAA,qCAAAA,+CAAAA,yBAA0B4B,KAAKD;gBACnDa,QAAQ,GAAEhD,iBAAAA,2BAAAA,qCAAAA,eAAgBoC;gBAC1Ba,SAASxC,aAAa2B;gBACtBc,SAAS9C;gBACT+C,SAAS9C;gBACT+C,MAAM,GAAE9C,eAAAA,yBAAAA,mCAAAA,aAAc8B;gBACtBC,WAAWA;gBACX1B,MAAMA;eACFE;QAGV;;AAKV,EAAE"}

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { TappableElementProps } from '../Tappable/Tappable';
 type ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;
-export interface CalendarHeaderProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+export interface CalendarHeaderProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {
     viewDate: Date;
     prevMonth?: boolean;
     nextMonth?: boolean;
@@ -24,5 +25,5 @@ export interface CalendarHeaderProps extends Pick<React.HTMLAttributes<HTMLDivEl
      */
     onPrevMonth?(): void;
 }
-export declare const CalendarHeader: ({ viewDate, onChange, prevMonth, nextMonth, disablePickers, onNextMonth, onPrevMonth, className, prevMonthProps, nextMonthProps, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, prevMonthIcon, nextMonthIcon, }: CalendarHeaderProps) => React.JSX.Element;
+export declare const CalendarHeader: ({ viewDate, onChange, prevMonth, nextMonth, disablePickers, onNextMonth, onPrevMonth, prevMonthProps, nextMonthProps, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, prevMonthIcon, nextMonthIcon, ...restProps }: CalendarHeaderProps) => React.JSX.Element;
 export {};

package/dist/components/CalendarHeader/CalendarHeader.js

@@ -9,18 +9,35 @@ import { addMonths, setMonth, setYear, subMonths } from "../../lib/date";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import { CustomSelect } from "../CustomSelect/CustomSelect";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Tappable } from "../Tappable/Tappable";
 import { Paragraph } from "../Typography/Paragraph/Paragraph";
-export var CalendarHeader = function(param) {
-    var viewDate = param.viewDate, onChange = param.onChange, _param_prevMonth = param.prevMonth, prevMonth = _param_prevMonth === void 0 ? true : _param_prevMonth, _param_nextMonth = param.nextMonth, nextMonth = _param_nextMonth === void 0 ? true : _param_nextMonth, _param_disablePickers = param.disablePickers, disablePickers = _param_disablePickers === void 0 ? false : _param_disablePickers, onNextMonth = param.onNextMonth, onPrevMonth = param.onPrevMonth, className = param.className, _param_prevMonthProps = param.prevMonthProps, prevMonthProps = _param_prevMonthProps === void 0 ? {} : _param_prevMonthProps, _param_nextMonthProps = param.nextMonthProps, nextMonthProps = _param_nextMonthProps === void 0 ? {} : _param_nextMonthProps, _param_prevMonthAriaLabel = param.prevMonthAriaLabel, prevMonthAriaLabel = _param_prevMonthAriaLabel === void 0 ? "Предыдущий месяц" : _param_prevMonthAriaLabel, _param_nextMonthAriaLabel = param.nextMonthAriaLabel, nextMonthAriaLabel = _param_nextMonthAriaLabel === void 0 ? "Следующий месяц" : _param_nextMonthAriaLabel, _param_changeMonthAriaLabel = param.changeMonthAriaLabel, changeMonthAriaLabel = _param_changeMonthAriaLabel === void 0 ? "Изменить месяц" : _param_changeMonthAriaLabel, _param_changeYearAriaLabel = param.changeYearAriaLabel, changeYearAriaLabel = _param_changeYearAriaLabel === void 0 ? "Изменить год" : _param_changeYearAriaLabel, _param_prevMonthIcon = param.prevMonthIcon, prevMonthIcon = _param_prevMonthIcon === void 0 ? /*#__PURE__*/ React.createElement(Icon20ChevronLeftOutline, {
+export var CalendarHeader = function(_param) {
+    var viewDate = _param.viewDate, onChange = _param.onChange, _param_prevMonth = _param.prevMonth, prevMonth = _param_prevMonth === void 0 ? true : _param_prevMonth, _param_nextMonth = _param.nextMonth, nextMonth = _param_nextMonth === void 0 ? true : _param_nextMonth, _param_disablePickers = _param.disablePickers, disablePickers = _param_disablePickers === void 0 ? false : _param_disablePickers, onNextMonth = _param.onNextMonth, onPrevMonth = _param.onPrevMonth, _param_prevMonthProps = _param.prevMonthProps, prevMonthProps = _param_prevMonthProps === void 0 ? {} : _param_prevMonthProps, _param_nextMonthProps = _param.nextMonthProps, nextMonthProps = _param_nextMonthProps === void 0 ? {} : _param_nextMonthProps, _param_prevMonthAriaLabel = _param.prevMonthAriaLabel, prevMonthAriaLabel = _param_prevMonthAriaLabel === void 0 ? "Предыдущий месяц" : _param_prevMonthAriaLabel, _param_nextMonthAriaLabel = _param.nextMonthAriaLabel, nextMonthAriaLabel = _param_nextMonthAriaLabel === void 0 ? "Следующий месяц" : _param_nextMonthAriaLabel, _param_changeMonthAriaLabel = _param.changeMonthAriaLabel, changeMonthAriaLabel = _param_changeMonthAriaLabel === void 0 ? "Изменить месяц" : _param_changeMonthAriaLabel, _param_changeYearAriaLabel = _param.changeYearAriaLabel, changeYearAriaLabel = _param_changeYearAriaLabel === void 0 ? "Изменить год" : _param_changeYearAriaLabel, _param_prevMonthIcon = _param.prevMonthIcon, prevMonthIcon = _param_prevMonthIcon === void 0 ? /*#__PURE__*/ React.createElement(Icon20ChevronLeftOutline, {
         className: "vkuiCalendarHeader__nav-icon--accent",
         width: 30,
         height: 30
-    }) : _param_prevMonthIcon, _param_nextMonthIcon = param.nextMonthIcon, nextMonthIcon = _param_nextMonthIcon === void 0 ? /*#__PURE__*/ React.createElement(Icon20ChevronRightOutline, {
+    }) : _param_prevMonthIcon, _param_nextMonthIcon = _param.nextMonthIcon, nextMonthIcon = _param_nextMonthIcon === void 0 ? /*#__PURE__*/ React.createElement(Icon20ChevronRightOutline, {
         className: "vkuiCalendarHeader__nav-icon--accent",
         width: 30,
         height: 30
-    }) : _param_nextMonthIcon;
+    }) : _param_nextMonthIcon, restProps = _object_without_properties(_param, [
+        "viewDate",
+        "onChange",
+        "prevMonth",
+        "nextMonth",
+        "disablePickers",
+        "onNextMonth",
+        "onPrevMonth",
+        "prevMonthProps",
+        "nextMonthProps",
+        "prevMonthAriaLabel",
+        "nextMonthAriaLabel",
+        "changeMonthAriaLabel",
+        "changeYearAriaLabel",
+        "prevMonthIcon",
+        "nextMonthIcon"
+    ]);
     var locale = useConfigProvider().locale;
     var onMonthsChange = React.useCallback(function(event) {
         return onChange(setMonth(viewDate, Number(event.target.value)));
@@ -63,9 +80,9 @@ export var CalendarHeader = function(param) {
     var nextMonthClassName = nextMonthProps.className, restNextMonthProps = _object_without_properties(nextMonthProps, [
         "className"
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames("vkuiCalendarHeader", className)
-    }, prevMonth && /*#__PURE__*/ React.createElement(AdaptivityProvider, {
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: "vkuiCalendarHeader"
+    }, restProps), prevMonth && /*#__PURE__*/ React.createElement(AdaptivityProvider, {
         sizeX: SizeType.REGULAR
     }, /*#__PURE__*/ React.createElement(Tappable, _object_spread({
         className: classNames("vkuiCalendarHeader__nav-icon", "vkuiCalendarHeader__nav-icon-prev", prevMonthClassName),