@vkontakte/vkui 4.37.0 → 5.0.0

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

@@ -19,206 +19,115 @@ var React = _interopRequireWildcard(require("react"));
 
 var _classNames = require("../../lib/classNames");
 
+var _platform = require("../../lib/platform");
+
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 
 var _Tappable = require("../Tappable/Tappable");
 
-var _Title = require("../Typography/Title/Title");
-
-var _Text = require("../Typography/Text/Text");
+var _Spinner = require("../Spinner/Spinner");
 
-var _Subhead = require("../Typography/Subhead/Subhead");
+var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 
-var _Caption = require("../Typography/Caption/Caption");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 
 var _usePlatform = require("../../hooks/usePlatform");
 
-var _withAdaptivity = require("../../hoc/withAdaptivity");
-
-var _platform = require("../../lib/platform");
-
-var _Spinner = require("../Spinner/Spinner");
-
-var _Headline = require("../Typography/Headline/Headline");
-
-var _excluded = ["size", "sizeY", "platform"],
-    _excluded2 = ["size", "mode", "appearance", "stretched", "align", "children", "before", "after", "getRootRef", "sizeY", "Component", "loading", "onClick", "stopPropagation"];
-
-var ButtonTypography = function ButtonTypography(_ref) {
-  var size = _ref.size,
-      sizeY = _ref.sizeY,
-      platform = _ref.platform,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var isCompact = sizeY === _withAdaptivity.SizeType.COMPACT;
-
-  switch (size) {
-    case "l":
-      if (isCompact) {
-        return (0, _jsxRuntime.createScopedElement)(_Text.Text, (0, _extends2.default)({
-          weight: "2"
-        }, restProps));
-      }
-
-      if (platform === _platform.ANDROID) {
-        return (0, _jsxRuntime.createScopedElement)(_Headline.Headline, (0, _extends2.default)({
-          weight: "2"
-        }, restProps));
-      }
-
-      return (0, _jsxRuntime.createScopedElement)(_Title.Title, (0, _extends2.default)({
-        level: "3",
-        weight: "2"
-      }, restProps));
-
-    case "m":
-      if (isCompact) {
-        return (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, (0, _extends2.default)({
-          weight: platform === _platform.VKCOM ? "3" : "2"
-        }, restProps));
-      }
-
-      return (0, _jsxRuntime.createScopedElement)(_Text.Text, (0, _extends2.default)({
-        weight: "2"
-      }, restProps));
-
-    case "s":
-    default:
-      if (platform === _platform.IOS) {
-        return (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, (0, _extends2.default)({
-          weight: "2"
-        }, restProps));
-      }
-
-      if (platform === _platform.VKCOM) {
-        return (0, _jsxRuntime.createScopedElement)(_Caption.Caption, restProps);
-      }
-
-      if (isCompact) {
-        return (0, _jsxRuntime.createScopedElement)(_Caption.Caption, (0, _extends2.default)({
-          weight: "2"
-        }, restProps));
-      }
-
-      return (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, (0, _extends2.default)({
-        weight: "2"
-      }, restProps));
-  }
+var _excluded = ["size", "mode", "appearance", "stretched", "align", "children", "before", "after", "getRootRef", "Component", "loading", "onClick", "stopPropagation", "className"];
+var styles = {
+  "Button": "vkuiButton",
+  "Button--loading": "vkuiButton--loading",
+  "Button--singleIcon": "vkuiButton--singleIcon",
+  "Button--sizeY-regular": "vkuiButton--sizeY-regular",
+  "Button--sizeY-none": "vkuiButton--sizeY-none",
+  "Button--stretched": "vkuiButton--stretched",
+  "Button__in": "vkuiButton__in",
+  "Button--align-left": "vkuiButton--align-left",
+  "Button--align-center": "vkuiButton--align-center",
+  "Button--align-right": "vkuiButton--align-right",
+  "Button--mode-primary": "vkuiButton--mode-primary",
+  "Button--appearance-overlay": "vkuiButton--appearance-overlay",
+  "Button--appearance-negative": "vkuiButton--appearance-negative",
+  "Button--appearance-positive": "vkuiButton--appearance-positive",
+  "Button--mode-secondary": "vkuiButton--mode-secondary",
+  "Button--mode-tertiary": "vkuiButton--mode-tertiary",
+  "Button--mode-outline": "vkuiButton--mode-outline",
+  "Button--with-icon": "vkuiButton--with-icon",
+  "Button__content": "vkuiButton__content",
+  "Button--size-s": "vkuiButton--size-s",
+  "Button__after": "vkuiButton__after",
+  "Button--size-m": "vkuiButton--size-m",
+  "Button--size-l": "vkuiButton--size-l",
+  "Button__before": "vkuiButton__before",
+  "Button__spinner": "vkuiButton__spinner",
+  "Button--appearance-accent": "vkuiButton--appearance-accent",
+  "Button--hover": "vkuiButton--hover",
+  "Button--active": "vkuiButton--active",
+  "Button--appearance-neutral": "vkuiButton--appearance-neutral",
+  "Button--android": "vkuiButton--android",
+  "Button--ios": "vkuiButton--ios",
+  "Button--sizeY-compact": "vkuiButton--sizeY-compact"
 };
 
-function resolveButtonAppearance(appearance, mode) {
-  var resolvedAppearance = appearance;
-  var resolvedMode = mode;
-
-  if (appearance === undefined) {
-    switch (mode) {
-      case "tertiary":
-      case "secondary":
-      case "primary":
-      case "outline":
-        resolvedAppearance = "accent";
-        break;
-
-      case "commerce":
-        resolvedMode = "primary";
-        resolvedAppearance = "positive";
-        break;
-
-      case "destructive":
-        resolvedMode = "primary";
-        resolvedAppearance = "negative";
-        break;
-
-      case "overlay_primary":
-        resolvedMode = "primary";
-        resolvedAppearance = "overlay";
-        break;
-
-      case "overlay_secondary":
-        resolvedMode = "secondary";
-        resolvedAppearance = "overlay";
-        break;
-
-      case "overlay_outline":
-        resolvedMode = "outline";
-        resolvedAppearance = "overlay";
-        break;
-    }
-  }
-
-  return {
-    resolvedAppearance: resolvedAppearance,
-    resolvedMode: resolvedMode
-  };
-}
-
-var ButtonComponent = function ButtonComponent(_ref2) {
-  var _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? "s" : _ref2$size,
-      _ref2$mode = _ref2.mode,
-      mode = _ref2$mode === void 0 ? "primary" : _ref2$mode,
-      appearance = _ref2.appearance,
-      _ref2$stretched = _ref2.stretched,
-      stretched = _ref2$stretched === void 0 ? false : _ref2$stretched,
-      _ref2$align = _ref2.align,
-      align = _ref2$align === void 0 ? "center" : _ref2$align,
-      children = _ref2.children,
-      before = _ref2.before,
-      after = _ref2.after,
-      getRootRef = _ref2.getRootRef,
-      sizeY = _ref2.sizeY,
-      _ref2$Component = _ref2.Component,
-      Component = _ref2$Component === void 0 ? "button" : _ref2$Component,
-      loading = _ref2.loading,
-      onClick = _ref2.onClick,
-      _ref2$stopPropagation = _ref2.stopPropagation,
-      stopPropagation = _ref2$stopPropagation === void 0 ? true : _ref2$stopPropagation,
-      restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  var platform = (0, _usePlatform.usePlatform)();
+/**
+ * @see https://vkcom.github.io/VKUI/#/Button
+ */
+var Button = function Button(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "s" : _ref$size,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "primary" : _ref$mode,
+      _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? "accent" : _ref$appearance,
+      _ref$stretched = _ref.stretched,
+      stretched = _ref$stretched === void 0 ? false : _ref$stretched,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? "center" : _ref$align,
+      children = _ref.children,
+      before = _ref.before,
+      after = _ref.after,
+      getRootRef = _ref.getRootRef,
+      _ref$Component = _ref.Component,
+      Component = _ref$Component === void 0 ? "button" : _ref$Component,
+      loading = _ref.loading,
+      onClick = _ref.onClick,
+      _ref$stopPropagation = _ref.stopPropagation,
+      stopPropagation = _ref$stopPropagation === void 0 ? true : _ref$stopPropagation,
+      className = _ref.className,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var hasIcons = Boolean(before || after);
   var hasIconOnly = !children && Boolean(after) !== Boolean(before);
+  var hasNewTokens = React.useContext(_ConfigProviderContext.ConfigProviderContext).hasNewTokens;
 
-  var _resolveButtonAppeara = resolveButtonAppearance(appearance, mode),
-      resolvedMode = _resolveButtonAppeara.resolvedMode,
-      resolvedAppearance = _resolveButtonAppeara.resolvedAppearance;
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
 
-  var hasNewTokens = React.useContext(_ConfigProviderContext.ConfigProviderContext).hasNewTokens;
+  var platform = (0, _usePlatform.usePlatform)();
   return (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, (0, _extends2.default)({
-    hoverMode: hasNewTokens ? "Button--hover" : "background",
-    activeMode: hasNewTokens ? "Button--active" : "opacity"
+    hoverMode: hasNewTokens ? styles["Button--hover"] : "background",
+    activeMode: hasNewTokens ? styles["Button--active"] : "opacity"
   }, restProps, {
     Component: restProps.href ? "a" : Component,
     onClick: loading ? undefined : onClick,
     focusVisibleMode: "outside",
     stopPropagation: stopPropagation,
-    vkuiClass: (0, _classNames.classNames)("Button", "Button--sz-".concat(size), "Button--lvl-".concat(resolvedMode), "Button--clr-".concat(resolvedAppearance), "Button--aln-".concat(align), "Button--sizeY-".concat(sizeY), stretched && "Button--stretched", hasIcons && "Button--with-icon", hasIconOnly && "Button--singleIcon", loading && "Button--loading"),
+    className: (0, _classNames.classNamesString)(className, styles.Button, styles["Button--size-".concat(size)], styles["Button--mode-".concat(mode)], styles["Button--appearance-".concat(appearance)], styles["Button--align-".concat(align)], (0, _getSizeYClassName.getSizeYClassName)("Button", sizeY, styles), platform === _platform.Platform.ANDROID && styles["Button--android"], platform === _platform.Platform.IOS && styles["Button--ios"], stretched && styles["Button--stretched"], hasIcons && styles["Button--with-icon"], hasIconOnly && styles["Button--singleIcon"], loading && styles["Button--loading"]),
     getRootRef: getRootRef
   }), loading && (0, _jsxRuntime.createScopedElement)(_Spinner.Spinner, {
     size: "small",
-    vkuiClass: "Button__spinner"
+    className: styles.Button__spinner
   }), (0, _jsxRuntime.createScopedElement)("span", {
-    vkuiClass: "Button__in"
+    className: styles.Button__in
   }, before && (0, _jsxRuntime.createScopedElement)("span", {
-    vkuiClass: "Button__before",
+    className: styles.Button__before,
     role: "presentation"
-  }, before), children && (0, _jsxRuntime.createScopedElement)(ButtonTypography, {
-    size: size,
-    sizeY: sizeY,
-    platform: platform,
-    vkuiClass: "Button__content",
-    Component: "span"
+  }, before), children && (0, _jsxRuntime.createScopedElement)("span", {
+    className: styles.Button__content
   }, children), after && (0, _jsxRuntime.createScopedElement)("span", {
-    vkuiClass: "Button__after",
+    className: styles.Button__after,
     role: "presentation"
   }, after)));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Button
- */
-
 
-var Button = (0, _withAdaptivity.withAdaptivity)(ButtonComponent, {
-  sizeY: true
-});
 exports.Button = Button;
-Button.displayName = "Button";
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["ButtonTypography","size","sizeY","platform","restProps","isCompact","SizeType","COMPACT","ANDROID","VKCOM","IOS","resolveButtonAppearance","appearance","mode","resolvedAppearance","resolvedMode","undefined","ButtonComponent","stretched","align","children","before","after","getRootRef","Component","loading","onClick","stopPropagation","usePlatform","hasIcons","Boolean","hasIconOnly","hasNewTokens","React","useContext","ConfigProviderContext","href","classNames","Button","withAdaptivity","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ConfigProviderContext } from \"../ConfigProvider/ConfigProviderContext\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { HasAlign, HasComponent } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  AdaptivityProps,\n  SizeType,\n  withAdaptivity,\n} from \"../../hoc/withAdaptivity\";\nimport { PlatformType, IOS, VKCOM, ANDROID } from \"../../lib/platform\";\nimport { Spinner } from \"../Spinner/Spinner\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport \"./Button.css\";\n\nexport interface VKUIButtonProps extends HasAlign {\n  /**\n   Значения `commerce`, `destructive`, `overlay_...` будут упразднены в 5.0.0\n   */\n  mode?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"outline\"\n    | \"commerce\"\n    | \"destructive\"\n    | \"overlay_primary\"\n    | \"overlay_secondary\"\n    | \"overlay_outline\";\n  appearance?: \"accent\" | \"positive\" | \"negative\" | \"neutral\" | \"overlay\";\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\ninterface ButtonTypographyProps extends HasComponent {\n  size: ButtonProps[\"size\"];\n  platform: PlatformType | undefined;\n  sizeY: AdaptivityProps[\"sizeY\"];\n  children?: ButtonProps[\"children\"];\n}\n\nconst ButtonTypography = ({\n  size,\n  sizeY,\n  platform,\n  ...restProps\n}: ButtonTypographyProps) => {\n  const isCompact = sizeY === SizeType.COMPACT;\n\n  switch (size) {\n    case \"l\":\n      if (isCompact) {\n        return <Text weight=\"2\" {...restProps} />;\n      }\n      if (platform === ANDROID) {\n        return <Headline weight=\"2\" {...restProps} />;\n      }\n      return <Title level=\"3\" weight=\"2\" {...restProps} />;\n    case \"m\":\n      if (isCompact) {\n        return (\n          <Subhead weight={platform === VKCOM ? \"3\" : \"2\"} {...restProps} />\n        );\n      }\n\n      return <Text weight=\"2\" {...restProps} />;\n    case \"s\":\n    default:\n      if (platform === IOS) {\n        return <Subhead weight=\"2\" {...restProps} />;\n      }\n\n      if (platform === VKCOM) {\n        return <Caption {...restProps} />;\n      }\n\n      if (isCompact) {\n        return <Caption weight=\"2\" {...restProps} />;\n      }\n\n      return <Subhead weight=\"2\" {...restProps} />;\n  }\n};\n\ninterface ResolvedButtonAppearance {\n  resolvedAppearance: ButtonProps[\"appearance\"];\n  resolvedMode: ButtonProps[\"mode\"];\n}\n\nfunction resolveButtonAppearance(\n  appearance: ButtonProps[\"appearance\"],\n  mode: ButtonProps[\"mode\"]\n): ResolvedButtonAppearance {\n  let resolvedAppearance: ButtonProps[\"appearance\"] = appearance;\n  let resolvedMode: ButtonProps[\"mode\"] = mode;\n\n  if (appearance === undefined) {\n    switch (mode) {\n      case \"tertiary\":\n      case \"secondary\":\n      case \"primary\":\n      case \"outline\":\n        resolvedAppearance = \"accent\";\n        break;\n      case \"commerce\":\n        resolvedMode = \"primary\";\n        resolvedAppearance = \"positive\";\n        break;\n      case \"destructive\":\n        resolvedMode = \"primary\";\n        resolvedAppearance = \"negative\";\n        break;\n      case \"overlay_primary\":\n        resolvedMode = \"primary\";\n        resolvedAppearance = \"overlay\";\n        break;\n      case \"overlay_secondary\":\n        resolvedMode = \"secondary\";\n        resolvedAppearance = \"overlay\";\n        break;\n      case \"overlay_outline\":\n        resolvedMode = \"outline\";\n        resolvedAppearance = \"overlay\";\n        break;\n    }\n  }\n\n  return {\n    resolvedAppearance,\n    resolvedMode,\n  };\n}\n\nconst ButtonComponent = ({\n  size = \"s\",\n  mode = \"primary\",\n  appearance,\n  stretched = false,\n  align = \"center\",\n  children,\n  before,\n  after,\n  getRootRef,\n  sizeY,\n  Component = \"button\",\n  loading,\n  onClick,\n  stopPropagation = true,\n  ...restProps\n}: ButtonProps) => {\n  const platform = usePlatform();\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { resolvedMode, resolvedAppearance } = resolveButtonAppearance(\n    appearance,\n    mode\n  );\n  const hasNewTokens = React.useContext(ConfigProviderContext).hasNewTokens;\n\n  return (\n    <Tappable\n      hoverMode={hasNewTokens ? \"Button--hover\" : \"background\"}\n      activeMode={hasNewTokens ? \"Button--active\" : \"opacity\"}\n      {...restProps}\n      Component={restProps.href ? \"a\" : Component}\n      onClick={loading ? undefined : onClick}\n      focusVisibleMode=\"outside\"\n      stopPropagation={stopPropagation}\n      vkuiClass={classNames(\n        \"Button\",\n        `Button--sz-${size}`,\n        `Button--lvl-${resolvedMode}`,\n        `Button--clr-${resolvedAppearance}`,\n        `Button--aln-${align}`,\n        `Button--sizeY-${sizeY}`,\n        stretched && \"Button--stretched\",\n        hasIcons && \"Button--with-icon\",\n        hasIconOnly && \"Button--singleIcon\",\n        loading && \"Button--loading\"\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && <Spinner size=\"small\" vkuiClass=\"Button__spinner\" />}\n      <span vkuiClass=\"Button__in\">\n        {before && (\n          <span vkuiClass=\"Button__before\" role=\"presentation\">\n            {before}\n          </span>\n        )}\n        {children && (\n          <ButtonTypography\n            size={size}\n            sizeY={sizeY}\n            platform={platform}\n            vkuiClass=\"Button__content\"\n            Component=\"span\"\n          >\n            {children}\n          </ButtonTypography>\n        )}\n        {after && (\n          <span vkuiClass=\"Button__after\" role=\"presentation\">\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = withAdaptivity(ButtonComponent, {\n  sizeY: true,\n});\n\nButton.displayName = \"Button\";\n"],"mappings":"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"}
+{"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","hasNewTokens","React","useContext","ConfigProviderContext","useAdaptivity","sizeY","platform","usePlatform","styles","href","undefined","classNamesString","getSizeYClassName","Platform","ANDROID","IOS","Button__spinner","Button__in","Button__before","Button__content","Button__after"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { ConfigProviderContext } from \"../ConfigProvider/ConfigProviderContext\";\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\";\n  appearance?: \"accent\" | \"positive\" | \"negative\" | \"neutral\" | \"overlay\";\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 hasNewTokens = React.useContext(ConfigProviderContext).hasNewTokens;\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={hasNewTokens ? styles[\"Button--hover\"] : \"background\"}\n      activeMode={hasNewTokens ? styles[\"Button--active\"] : \"opacity\"}\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(\"Button\", sizeY, styles),\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":"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"}

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

@@ -15,7 +15,19 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _classNames = require("../../lib/classNames");
 
-var _excluded = ["mode", "gap", "stretched", "align", "getRootRef", "children"];
+var _excluded = ["mode", "gap", "stretched", "align", "getRootRef", "className", "children"];
+var styles = {
+  "ButtonGroup": "vkuiButtonGroup",
+  "ButtonGroup--stretched": "vkuiButtonGroup--stretched",
+  "ButtonGroup--mode-vertical": "vkuiButtonGroup--mode-vertical",
+  "ButtonGroup--mode-horizontal": "vkuiButtonGroup--mode-horizontal",
+  "ButtonGroup--gap-space": "vkuiButtonGroup--gap-space",
+  "ButtonGroup--gap-s": "vkuiButtonGroup--gap-s",
+  "ButtonGroup--gap-m": "vkuiButtonGroup--gap-m",
+  "ButtonGroup--align-left": "vkuiButtonGroup--align-left",
+  "ButtonGroup--align-center": "vkuiButtonGroup--align-center",
+  "ButtonGroup--align-right": "vkuiButtonGroup--align-right"
+};
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ButtonGroup
@@ -30,10 +42,11 @@ var ButtonGroup = function ButtonGroup(_ref) {
       _ref$align = _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 (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({
-    vkuiClass: (0, _classNames.classNames)("ButtonGroup", "ButtonGroup--mode-".concat(mode), gap !== "none" && "ButtonGroup--gap-".concat(gap), stretched && "ButtonGroup--stretched", "ButtonGroup--align-".concat(align)),
+    className: (0, _classNames.classNamesString)(className, styles.ButtonGroup, styles["ButtonGroup--mode-".concat(mode)], gap !== "none" && styles["ButtonGroup--gap-".concat(gap)], stretched && styles["ButtonGroup--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","children","restProps","classNames"],"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport type { HasRootRef, AlignType } from \"../../types\";\nimport \"./ButtonGroup.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  children,\n  ...restProps\n}: ButtonGroupProps) => {\n  return (\n    <div\n      vkuiClass={classNames(\n        \"ButtonGroup\",\n        `ButtonGroup--mode-${mode}`,\n        gap !== \"none\" && `ButtonGroup--gap-${gap}`,\n        stretched && \"ButtonGroup--stretched\",\n        `ButtonGroup--align-${align}`\n      )}\n      role=\"group\"\n      ref={getRootRef}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AACA;;;;AA2BA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAQH;EAAA,qBAPtBC,IAOsB;EAAA,IAPtBA,IAOsB,0BAPf,YAOe;EAAA,oBANtBC,GAMsB;EAAA,IANtBA,GAMsB,yBANhB,GAMgB;EAAA,0BALtBC,SAKsB;EAAA,IALtBA,SAKsB,+BALV,KAKU;EAAA,sBAJtBC,KAIsB;EAAA,IAJtBA,KAIsB,2BAJd,MAIc;EAAA,IAHtBC,UAGsB,QAHtBA,UAGsB;EAAA,IAFtBC,QAEsB,QAFtBA,QAEsB;EAAA,IADnBC,SACmB;EACtB,OACE;IACE,SAAS,EAAE,IAAAC,sBAAA,EACT,aADS,8BAEYP,IAFZ,GAGTC,GAAG,KAAK,MAAR,+BAAsCA,GAAtC,CAHS,EAITC,SAAS,IAAI,wBAJJ,+BAKaC,KALb,EADb;IAQE,IAAI,EAAC,OARP;IASE,GAAG,EAAEC;EATP,GAUME,SAVN,GAYGD,QAZH,CADF;AAgBD,CAzBM"}
+{"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":";;;;;;;;;;;;;;;AACA;;;;;;;;;;;;;;;;AA2BA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OASH;EAAA,qBARtBC,IAQsB;EAAA,IARtBA,IAQsB,0BARf,YAQe;EAAA,oBAPtBC,GAOsB;EAAA,IAPtBA,GAOsB,yBAPhB,GAOgB;EAAA,0BANtBC,SAMsB;EAAA,IANtBA,SAMsB,+BANV,KAMU;EAAA,sBALtBC,KAKsB;EAAA,IALtBA,KAKsB,2BALd,MAKc;EAAA,IAJtBC,UAIsB,QAJtBA,UAIsB;EAAA,IAHtBC,SAGsB,QAHtBA,SAGsB;EAAA,IAFtBC,QAEsB,QAFtBA,QAEsB;EAAA,IADnBC,SACmB;EACtB,OACE;IACE,SAAS,EAAE,IAAAC,4BAAA,EACTH,SADS,EAETI,MAAM,CAACV,WAFE,EAGTU,MAAM,6BAAsBT,IAAtB,EAHG,EAITC,GAAG,KAAK,MAAR,IAAkBQ,MAAM,4BAAqBR,GAArB,EAJf,EAKTC,SAAS,IAAIO,MAAM,CAAC,wBAAD,CALV,EAMTN,KAAK,IAAIM,MAAM,8BAAuBN,KAAvB,EANN,CADb;IASE,IAAI,EAAC,OATP;IAUE,GAAG,EAAEC;EAVP,GAWMG,SAXN,GAaGD,QAbH,CADF;AAiBD,CA3BM"}

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

@@ -29,7 +29,7 @@ var _LocaleProviderContext = require("../LocaleProviderContext/LocaleProviderCon
 
 var _classNames = require("../../lib/classNames");
 
-var _Caption = require("../Typography/Caption/Caption");
+var _Footnote = require("../Typography/Footnote/Footnote");
 
 var _excluded = ["viewDate", "value", "weekStartsOn", "onDayChange", "isDaySelected", "isDayActive", "isDaySelectionEnd", "isDaySelectionStart", "onDayEnter", "onDayLeave", "isDayHinted", "isHintedDaySelectionStart", "isHintedDaySelectionEnd", "isDayFocused", "isDayDisabled", "size", "showNeighboringMonth", "dayProps"];
 
@@ -79,9 +79,8 @@ var CalendarDays = function CalendarDays(_ref) {
   }), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: (0, _classNames.classNames)("CalendarDays__row", "CalendarDays__row--size-".concat(size))
   }, daysNames.map(function (dayName) {
-    return (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
+    return (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, {
       key: dayName,
-      level: "1",
       vkuiClass: "CalendarDays__weekday"
     }, dayName);
   })), weeks.map(function (week, i) {

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","props","locale","React","useContext","LocaleProviderContext","ref","useRef","useState","Date","now","weeks","useMemo","getWeeks","daysNames","getDaysNames","handleDayChange","useCallback","date","current","focus","classNames","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 { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport \"./CalendarDays.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  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  ...props\n}: CalendarDaysProps) => {\n  const locale = React.useContext(LocaleProviderContext);\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [now] = React.useState(new Date());\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 {...props} vkuiClass=\"CalendarDays\" ref={ref}>\n      <div\n        vkuiClass={classNames(\n          \"CalendarDays__row\",\n          `CalendarDays__row--size-${size}`\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Caption key={dayName} level=\"1\" vkuiClass=\"CalendarDays__weekday\">\n            {dayName}\n          </Caption>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          vkuiClass={classNames(\n            \"CalendarDays__row\",\n            `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","props","locale","React","useContext","LocaleProviderContext","ref","useRef","useState","Date","now","weeks","useMemo","getWeeks","daysNames","getDaysNames","handleDayChange","useCallback","date","current","focus","classNames","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 { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport \"./CalendarDays.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  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  ...props\n}: CalendarDaysProps) => {\n  const locale = React.useContext(LocaleProviderContext);\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [now] = React.useState(new Date());\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 {...props} vkuiClass=\"CalendarDays\" ref={ref}>\n      <div\n        vkuiClass={classNames(\n          \"CalendarDays__row\",\n          `CalendarDays__row--size-${size}`\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} vkuiClass=\"CalendarDays__weekday\">\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          vkuiClass={classNames(\n            \"CalendarDays__row\",\n            `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.js

@@ -23,11 +23,9 @@ var _Tappable = require("../Tappable/Tappable");
 
 var _classNames = require("../../lib/classNames");
 
-var _Select = require("../Select/Select");
-
 var _CustomSelect = require("../CustomSelect/CustomSelect");
 
-var _withAdaptivity = require("../../hoc/withAdaptivity");
+var _adaptivity = require("../../lib/adaptivity");
 
 var _calendar = require("../../lib/calendar");
 
@@ -102,7 +100,7 @@ var CalendarHeader = function CalendarHeader(_ref) {
     vkuiClass: "CalendarHeader",
     className: className
   }, prevMonth && (0, _jsxRuntime.createScopedElement)(_AdaptivityProvider.AdaptivityProvider, {
-    sizeX: _withAdaptivity.SizeType.REGULAR
+    sizeX: _adaptivity.SizeType.REGULAR
   }, (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, (0, _extends2.default)({
     vkuiClass: (0, _classNames.classNames)("CalendarHeader__nav-icon", "CalendarHeader__nav-icon-prev"),
     onClick: onPrevMonth,
@@ -116,7 +114,9 @@ var CalendarHeader = function CalendarHeader(_ref) {
     month: "long"
   }).format(viewDate)), "\xA0", new Intl.DateTimeFormat(locale, {
     year: "numeric"
-  }).format(viewDate)) : (0, _jsxRuntime.createScopedElement)("div", {
+  }).format(viewDate)) : (0, _jsxRuntime.createScopedElement)(_AdaptivityProvider.AdaptivityProvider, {
+    sizeY: _adaptivity.SizeType.COMPACT
+  }, (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "CalendarHeader__pickers"
   }, (0, _jsxRuntime.createScopedElement)(_CustomSelect.CustomSelect, {
     vkuiClass: "CalendarHeader__picker",
@@ -124,11 +124,10 @@ var CalendarHeader = function CalendarHeader(_ref) {
     options: months,
     dropdownOffsetDistance: 4,
     fixDropdownWidth: false,
-    sizeY: _withAdaptivity.SizeType.COMPACT,
     icon: (0, _jsxRuntime.createScopedElement)(_icons.Icon12Dropdown, null),
     onChange: onMonthsChange,
     forceDropdownPortal: false,
-    selectType: _Select.SelectType.accent,
+    selectType: "accent",
     "aria-label": changeMonthAriaLabel
   }), (0, _jsxRuntime.createScopedElement)(_CustomSelect.CustomSelect, {
     vkuiClass: "CalendarHeader__picker",
@@ -136,14 +135,13 @@ var CalendarHeader = function CalendarHeader(_ref) {
     options: years,
     dropdownOffsetDistance: 4,
     fixDropdownWidth: false,
-    sizeY: _withAdaptivity.SizeType.COMPACT,
     icon: (0, _jsxRuntime.createScopedElement)(_icons.Icon12Dropdown, null),
     onChange: onYearChange,
     forceDropdownPortal: false,
-    selectType: _Select.SelectType.accent,
+    selectType: "accent",
     "aria-label": changeYearAriaLabel
-  })), nextMonth && (0, _jsxRuntime.createScopedElement)(_AdaptivityProvider.AdaptivityProvider, {
-    sizeX: _withAdaptivity.SizeType.REGULAR
+  }))), nextMonth && (0, _jsxRuntime.createScopedElement)(_AdaptivityProvider.AdaptivityProvider, {
+    sizeX: _adaptivity.SizeType.REGULAR
   }, (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, (0, _extends2.default)({
     vkuiClass: (0, _classNames.classNames)("CalendarHeader__nav-icon", "CalendarHeader__nav-icon-next"),
     onClick: onNextMonth,

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","names":["CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","nextMonthIcon","locale","React","useContext","LocaleProviderContext","onMonthsChange","useCallback","event","setMonth","Number","target","value","onYearChange","setYear","months","useMemo","getMonths","map","label","currentYear","getFullYear","years","getYears","formatter","Intl","DateTimeFormat","year","month","SizeType","REGULAR","classNames","format","subMonths","getMonth","COMPACT","SelectType","accent","addMonths"],"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { setMonth, setYear, subMonths, addMonths } from \"../../lib/date\";\nimport {\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n  Icon12Dropdown,\n} from \"@vkontakte/icons\";\nimport { Tappable, TappableElementProps } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { SelectType } from \"../Select/Select\";\nimport { CustomSelect } from \"../CustomSelect/CustomSelect\";\nimport { SizeType } from \"../../hoc/withAdaptivity\";\nimport { getMonths, getYears } from \"../../lib/calendar\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { AdaptivityProvider } from \"../AdaptivityProvider/AdaptivityProvider\";\nimport \"./CalendarHeader.css\";\n\ntype ArrowMonthProps = Omit<TappableElementProps, \"onClick\" | \"aria-label\">;\n\nexport interface CalendarHeaderProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, \"className\"> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthProps,\n  nextMonthProps,\n  prevMonthAriaLabel = \"Предыдущий месяц\",\n  nextMonthAriaLabel = \"Следующий месяц\",\n  changeMonthAriaLabel = \"Изменить месяц\",\n  changeYearAriaLabel = \"Изменить год\",\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      vkuiClass=\"CalendarHeader__nav-icon--accent\"\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      vkuiClass=\"CalendarHeader__nav-icon--accent\"\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const locale = React.useContext(LocaleProviderContext);\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate]\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate]\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span vkuiClass=\"CalendarHeader__month\">{label}</span>,\n      })),\n    [locale]\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"long\",\n  });\n\n  return (\n    <div vkuiClass=\"CalendarHeader\" className={className}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            vkuiClass={classNames(\n              \"CalendarHeader__nav-icon\",\n              \"CalendarHeader__nav-icon-prev\"\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(\n              subMonths(viewDate, 1)\n            )}`}\n            {...prevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph vkuiClass=\"CalendarHeader__pickers\" weight=\"2\">\n          <span vkuiClass=\"CalendarHeader__month\">\n            {new Intl.DateTimeFormat(locale, {\n              month: \"long\",\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: \"numeric\",\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <div vkuiClass=\"CalendarHeader__pickers\">\n          <CustomSelect\n            vkuiClass=\"CalendarHeader__picker\"\n            value={viewDate.getMonth()}\n            options={months}\n            dropdownOffsetDistance={4}\n            fixDropdownWidth={false}\n            sizeY={SizeType.COMPACT}\n            icon={<Icon12Dropdown />}\n            onChange={onMonthsChange}\n            forceDropdownPortal={false}\n            selectType={SelectType.accent}\n            aria-label={changeMonthAriaLabel}\n          />\n          <CustomSelect\n            vkuiClass=\"CalendarHeader__picker\"\n            value={viewDate.getFullYear()}\n            options={years}\n            dropdownOffsetDistance={4}\n            fixDropdownWidth={false}\n            sizeY={SizeType.COMPACT}\n            icon={<Icon12Dropdown />}\n            onChange={onYearChange}\n            forceDropdownPortal={false}\n            selectType={SelectType.accent}\n            aria-label={changeYearAriaLabel}\n          />\n        </div>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            vkuiClass={classNames(\n              \"CalendarHeader__nav-icon\",\n              \"CalendarHeader__nav-icon-next\"\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(\n              addMonths(viewDate, 1)\n            )}`}\n            {...nextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.js","names":["CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","nextMonthIcon","locale","React","useContext","LocaleProviderContext","onMonthsChange","useCallback","event","setMonth","Number","target","value","onYearChange","setYear","months","useMemo","getMonths","map","label","currentYear","getFullYear","years","getYears","formatter","Intl","DateTimeFormat","year","month","SizeType","REGULAR","classNames","format","subMonths","COMPACT","getMonth","addMonths"],"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { setMonth, setYear, subMonths, addMonths } from \"../../lib/date\";\nimport {\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n  Icon12Dropdown,\n} from \"@vkontakte/icons\";\nimport { Tappable, TappableElementProps } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { CustomSelect } from \"../CustomSelect/CustomSelect\";\nimport { SizeType } from \"../../lib/adaptivity\";\nimport { getMonths, getYears } from \"../../lib/calendar\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { AdaptivityProvider } from \"../AdaptivityProvider/AdaptivityProvider\";\nimport \"./CalendarHeader.css\";\n\ntype ArrowMonthProps = Omit<TappableElementProps, \"onClick\" | \"aria-label\">;\n\nexport interface CalendarHeaderProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, \"className\"> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthProps,\n  nextMonthProps,\n  prevMonthAriaLabel = \"Предыдущий месяц\",\n  nextMonthAriaLabel = \"Следующий месяц\",\n  changeMonthAriaLabel = \"Изменить месяц\",\n  changeYearAriaLabel = \"Изменить год\",\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      vkuiClass=\"CalendarHeader__nav-icon--accent\"\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      vkuiClass=\"CalendarHeader__nav-icon--accent\"\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const locale = React.useContext(LocaleProviderContext);\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate]\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate]\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span vkuiClass=\"CalendarHeader__month\">{label}</span>,\n      })),\n    [locale]\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"long\",\n  });\n\n  return (\n    <div vkuiClass=\"CalendarHeader\" className={className}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            vkuiClass={classNames(\n              \"CalendarHeader__nav-icon\",\n              \"CalendarHeader__nav-icon-prev\"\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(\n              subMonths(viewDate, 1)\n            )}`}\n            {...prevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph vkuiClass=\"CalendarHeader__pickers\" weight=\"2\">\n          <span vkuiClass=\"CalendarHeader__month\">\n            {new Intl.DateTimeFormat(locale, {\n              month: \"long\",\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: \"numeric\",\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div vkuiClass=\"CalendarHeader__pickers\">\n            <CustomSelect\n              vkuiClass=\"CalendarHeader__picker\"\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              vkuiClass=\"CalendarHeader__picker\"\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            vkuiClass={classNames(\n              \"CalendarHeader__nav-icon\",\n              \"CalendarHeader__nav-icon-next\"\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(\n              addMonths(viewDate, 1)\n            )}`}\n            {...nextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}