@vkontakte/vkui 4.30.0 → 4.33.0

package/dist/components/Badge/Badge.d.ts

@@ -3,4 +3,7 @@ import "./Badge.css";
 export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
     mode: "new" | "prominent";
 }
-export declare const Badge: React.FunctionComponent<BadgeProps>;
+/**
+ * @see https://vkcom.github.io/VKUI/#/Badge
+ */
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/Badge/Badge.js

@@ -2,19 +2,18 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Badge
+ */
 export var Badge = function Badge(_ref) {
-  var mode = _ref.mode,
+  var _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "new" : _ref$mode,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
   return createScopedElement("span", _extends({
-    vkuiClass: classNames(getClassName("Badge", platform), "Badge--".concat(mode))
+    vkuiClass: classNames("Badge", "Badge--".concat(mode))
   }, restProps));
 };
-Badge.defaultProps = {
-  mode: "new"
-};
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"names":["getClassName","classNames","usePlatform","Badge","mode","restProps","platform","defaultProps"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AAOA,OAAO,IAAMC,KAA0C,GAAG,SAA7CA,KAA6C,OAGxC;AAAA,MAFhBC,IAEgB,QAFhBA,IAEgB;AAAA,MADbC,SACa;;AAChB,MAAMC,QAAQ,GAAGJ,WAAW,EAA5B;AAEA,SACE;AACE,IAAA,SAAS,EAAED,UAAU,CAACD,YAAY,CAAC,OAAD,EAAUM,QAAV,CAAb,mBAA4CF,IAA5C;AADvB,KAEMC,SAFN,EADF;AAMD,CAZM;AAcPF,KAAK,CAACI,YAAN,GAAqB;AACnBH,EAAAA,IAAI,EAAE;AADa,CAArB","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./Badge.css\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: \"new\" | \"prominent\";\n}\n\nexport const Badge: React.FunctionComponent<BadgeProps> = ({\n  mode,\n  ...restProps\n}: BadgeProps) => {\n  const platform = usePlatform();\n\n  return (\n    <span\n      vkuiClass={classNames(getClassName(\"Badge\", platform), `Badge--${mode}`)}\n      {...restProps}\n    ></span>\n  );\n};\n\nBadge.defaultProps = {\n  mode: \"new\",\n};\n"],"file":"Badge.js"}
+{"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"names":["classNames","Badge","mode","restProps"],"mappings":";;;;AACA,SAASA,UAAT;;AAOA;AACA;AACA;AACA,OAAO,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B;AAAA,uBAAGC,IAAH;AAAA,MAAGA,IAAH,0BAAU,KAAV;AAAA,MAAoBC,SAApB;;AAAA,SACzC;AAAM,IAAA,SAAS,EAAEH,UAAU,CAAC,OAAD,mBAAoBE,IAApB;AAA3B,KAA4DC,SAA5D,EADyC;AAAA,CAApC","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./Badge.css\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: \"new\" | \"prominent\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge: React.FC<BadgeProps> = ({ mode = \"new\", ...restProps }) => (\n  <span vkuiClass={classNames(\"Badge\", `Badge--${mode}`)} {...restProps} />\n);\n"],"file":"Badge.js"}

package/dist/components/Banner/Banner.d.ts

@@ -61,5 +61,7 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     actions?: React.ReactNode;
 }
-declare const Banner: React.FC<BannerProps>;
-export default Banner;
+/**
+ * @see https://vkcom.github.io/VKUI/#/Banner
+ */
+export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, ...restProps }: BannerProps) => JSX.Element;

package/dist/components/Banner/Banner.js

@@ -1,21 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size"],
-    _excluded2 = ["size"],
-    _excluded3 = ["mode", "imageTheme", "size", "before", "asideMode", "header", "subheader", "text", "children", "background", "actions", "onDismiss", "dismissLabel"];
+    _excluded2 = ["mode", "imageTheme", "size", "before", "asideMode", "header", "subheader", "text", "children", "background", "actions", "onDismiss", "dismissLabel"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
-import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { hasReactNode } from "../../lib/utils";
 import { Icon24Chevron, Icon24DismissSubstract, Icon24DismissDark, Icon24Cancel } from "@vkontakte/icons";
-import Tappable from "../Tappable/Tappable";
-import IconButton from "../IconButton/IconButton";
-import Headline from "../Typography/Headline/Headline";
+import { Tappable } from "../Tappable/Tappable";
+import { IconButton } from "../IconButton/IconButton";
+import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
 
 var BannerHeader = function BannerHeader(_ref) {
@@ -26,42 +24,38 @@ var BannerHeader = function BannerHeader(_ref) {
     level: "2",
     weight: "2"
   }, restProps)) : createScopedElement(Headline, _extends({
-    weight: "medium"
+    weight: "2"
   }, restProps));
 };
+/**
+ * @see https://vkcom.github.io/VKUI/#/Banner
+ */
 
-var BannerSubheader = function BannerSubheader(_ref2) {
-  var size = _ref2.size,
-      restProps = _objectWithoutProperties(_ref2, _excluded2);
 
-  return size === "m" ? createScopedElement(Text, _extends({
-    weight: "regular"
-  }, restProps)) : createScopedElement(Subhead, restProps);
-};
+export var Banner = function Banner(_ref2) {
+  var _ref2$mode = _ref2.mode,
+      mode = _ref2$mode === void 0 ? "tint" : _ref2$mode,
+      _ref2$imageTheme = _ref2.imageTheme,
+      imageTheme = _ref2$imageTheme === void 0 ? "dark" : _ref2$imageTheme,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? "s" : _ref2$size,
+      before = _ref2.before,
+      asideMode = _ref2.asideMode,
+      header = _ref2.header,
+      subheader = _ref2.subheader,
+      text = _ref2.text,
+      children = _ref2.children,
+      background = _ref2.background,
+      actions = _ref2.actions,
+      onDismiss = _ref2.onDismiss,
+      _ref2$dismissLabel = _ref2.dismissLabel,
+      dismissLabel = _ref2$dismissLabel === void 0 ? "Скрыть" : _ref2$dismissLabel,
+      restProps = _objectWithoutProperties(_ref2, _excluded2);
 
-var Banner = function Banner(props) {
   var platform = usePlatform();
-
-  var mode = props.mode,
-      imageTheme = props.imageTheme,
-      size = props.size,
-      before = props.before,
-      asideMode = props.asideMode,
-      header = props.header,
-      subheader = props.subheader,
-      text = props.text,
-      children = props.children,
-      background = props.background,
-      actions = props.actions,
-      onDismiss = props.onDismiss,
-      dismissLabel = props.dismissLabel,
-      restProps = _objectWithoutProperties(props, _excluded3);
-
+  var SubheaderTypography = size === "m" ? Text : Subhead;
   return createScopedElement("section", _extends({}, restProps, {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: classNames(getClassName("Banner", platform), "Banner--md-".concat(mode), "Banner--sz-".concat(size), {
-      "Banner--inverted": mode === "image" && imageTheme === "dark"
-    })
+    vkuiClass: classNames("Banner", platform === IOS && "Banner--ios", "Banner--md-".concat(mode), "Banner--sz-".concat(size), mode === "image" && imageTheme === "dark" && "Banner--inverted")
   }), createScopedElement(Tappable, {
     vkuiClass: "Banner__in",
     activeMode: platform === IOS ? "opacity" : "background",
@@ -78,12 +72,10 @@ var Banner = function Banner(props) {
     size: size,
     Component: "span",
     vkuiClass: "Banner__header"
-  }, header), hasReactNode(subheader) && createScopedElement(BannerSubheader, {
+  }, header), hasReactNode(subheader) && createScopedElement(SubheaderTypography, {
     Component: "span",
-    size: size,
     vkuiClass: "Banner__subheader"
   }, subheader), hasReactNode(text) && createScopedElement(Text, {
-    weight: "regular",
     vkuiClass: "Banner__text"
   }, text), hasReactNode(actions) && React.Children.count(actions) > 0 && createScopedElement("div", {
     vkuiClass: "Banner__actions"
@@ -95,15 +87,6 @@ var Banner = function Banner(props) {
     onClick: onDismiss,
     hoverMode: "opacity",
     hasActive: false
-  }, (platform === ANDROID || platform === VKCOM) && createScopedElement(Icon24Cancel, null), platform === IOS && (mode === "image" ? createScopedElement(Icon24DismissDark, null) : createScopedElement(Icon24DismissSubstract, null))))));
+  }, platform === IOS ? mode === "image" ? createScopedElement(Icon24DismissDark, null) : createScopedElement(Icon24DismissSubstract, null) : createScopedElement(Icon24Cancel, null)))));
 };
-
-Banner.defaultProps = {
-  dismissLabel: "Скрыть",
-  mode: "tint",
-  size: "s",
-  imageTheme: "dark"
-}; // eslint-disable-next-line import/no-default-export
-
-export default Banner;
 //# sourceMappingURL=Banner.js.map

package/dist/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"names":["React","getClassName","classNames","usePlatform","ANDROID","IOS","VKCOM","hasReactNode","Icon24Chevron","Icon24DismissSubstract","Icon24DismissDark","Icon24Cancel","Tappable","IconButton","Headline","Subhead","Text","Title","BannerHeader","size","restProps","BannerSubheader","Banner","props","platform","mode","imageTheme","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","undefined","Children","count","defaultProps"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { ANDROID, IOS, VKCOM } from \"../../lib/platform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport {\n  Icon24Chevron,\n  Icon24DismissSubstract,\n  Icon24DismissDark,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport Tappable from \"../Tappable/Tappable\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport Text from \"../Typography/Text/Text\";\nimport { Title } from \"../Typography/Title/Title\";\nimport \"./Banner.css\";\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: \"tint\" | \"image\";\n  size?: \"s\" | \"m\";\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: \"dismiss\" | \"expand\";\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: \"light\" | \"dark\";\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки, отображаемые в баннере.\n   *\n   * - В режиме `tint` или в `image` со светлым фоном рекомендуется использовать только `<Button mode=\"primary\" />` или `<Button mode=\"tertiary\" hasHover={false} />`.\n   * - В режиме `image` с тёмным фоном – `<Button mode=\"overlay_primary\" />`.\n   */\n  actions?: React.ReactNode;\n}\n\ntype BannerTypographyProps = Pick<BannerProps, \"size\"> & HasComponent;\n\nconst BannerHeader: React.FC<BannerTypographyProps> = ({\n  size,\n  ...restProps\n}) => {\n  return size === \"m\" ? (\n    <Title level=\"2\" weight=\"2\" {...restProps} />\n  ) : (\n    <Headline weight=\"medium\" {...restProps} />\n  );\n};\n\nconst BannerSubheader: React.FC<BannerTypographyProps> = ({\n  size,\n  ...restProps\n}) => {\n  return size === \"m\" ? (\n    <Text weight=\"regular\" {...restProps} />\n  ) : (\n    <Subhead {...restProps} />\n  );\n};\n\nconst Banner: React.FC<BannerProps> = (props: BannerProps) => {\n  const platform = usePlatform();\n  const {\n    mode,\n    imageTheme,\n    size,\n    before,\n    asideMode,\n    header,\n    subheader,\n    text,\n    children,\n    background,\n    actions,\n    onDismiss,\n    dismissLabel,\n    ...restProps\n  } = props;\n\n  return (\n    <section\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(\n        getClassName(\"Banner\", platform),\n        `Banner--md-${mode}`,\n        `Banner--sz-${size}`,\n        {\n          \"Banner--inverted\": mode === \"image\" && imageTheme === \"dark\",\n        }\n      )}\n    >\n      <Tappable\n        vkuiClass=\"Banner__in\"\n        activeMode={platform === IOS ? \"opacity\" : \"background\"}\n        disabled={asideMode !== \"expand\"}\n        role={asideMode === \"expand\" ? \"button\" : undefined}\n      >\n        {mode === \"image\" && background && (\n          <div aria-hidden=\"true\" vkuiClass=\"Banner__bg\">\n            {background}\n          </div>\n        )}\n\n        {before && <div vkuiClass=\"Banner__before\">{before}</div>}\n\n        <div vkuiClass=\"Banner__content\">\n          {hasReactNode(header) && (\n            <BannerHeader\n              size={size}\n              Component=\"span\"\n              vkuiClass=\"Banner__header\"\n            >\n              {header}\n            </BannerHeader>\n          )}\n          {hasReactNode(subheader) && (\n            <BannerSubheader\n              Component=\"span\"\n              size={size}\n              vkuiClass=\"Banner__subheader\"\n            >\n              {subheader}\n            </BannerSubheader>\n          )}\n          {hasReactNode(text) && (\n            <Text weight=\"regular\" vkuiClass=\"Banner__text\">\n              {text}\n            </Text>\n          )}\n          {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n            <div vkuiClass=\"Banner__actions\">{actions}</div>\n          )}\n        </div>\n\n        {!!asideMode && (\n          <div vkuiClass=\"Banner__aside\">\n            {asideMode === \"expand\" && <Icon24Chevron />}\n\n            {asideMode === \"dismiss\" && (\n              <IconButton\n                aria-label={dismissLabel}\n                vkuiClass=\"Banner__dismiss\"\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {(platform === ANDROID || platform === VKCOM) && (\n                  <Icon24Cancel />\n                )}\n                {platform === IOS &&\n                  (mode === \"image\" ? (\n                    <Icon24DismissDark />\n                  ) : (\n                    <Icon24DismissSubstract />\n                  ))}\n              </IconButton>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </section>\n  );\n};\n\nBanner.defaultProps = {\n  dismissLabel: \"Скрыть\",\n  mode: \"tint\",\n  size: \"s\",\n  imageTheme: \"dark\",\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"names":["React","classNames","usePlatform","IOS","hasReactNode","Icon24Chevron","Icon24DismissSubstract","Icon24DismissDark","Icon24Cancel","Tappable","IconButton","Headline","Subhead","Text","Title","BannerHeader","size","restProps","Banner","mode","imageTheme","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","platform","SubheaderTypography","undefined","Children","count"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,GAAT;AACA,SAASC,YAAT;AACA,SACEC,aADF,EAEEC,sBAFF,EAGEC,iBAHF,EAIEC,YAJF,QAKO,kBALP;AAMA,SAASC,QAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AACA,SAASC,OAAT;AACA,SAASC,IAAT;AACA,SAASC,KAAT;;AAmEA,IAAMC,YAA6C,GAAG,SAAhDA,YAAgD,OAGhD;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADDC,SACC;;AACJ,SAAOD,IAAI,KAAK,GAAT,GACL,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAC,GAAb;AAAiB,IAAA,MAAM,EAAC;AAAxB,KAAgCC,SAAhC,EADK,GAGL,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAC;AAAjB,KAAyBA,SAAzB,EAHF;AAKD,CATD;AAWA;AACA;AACA;;;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,QAeH;AAAA,yBAdjBC,IAciB;AAAA,MAdjBA,IAciB,2BAdV,MAcU;AAAA,+BAbjBC,UAaiB;AAAA,MAbjBA,UAaiB,iCAbJ,MAaI;AAAA,yBAZjBJ,IAYiB;AAAA,MAZjBA,IAYiB,2BAZV,GAYU;AAAA,MAXjBK,MAWiB,SAXjBA,MAWiB;AAAA,MAVjBC,SAUiB,SAVjBA,SAUiB;AAAA,MATjBC,MASiB,SATjBA,MASiB;AAAA,MARjBC,SAQiB,SARjBA,SAQiB;AAAA,MAPjBC,IAOiB,SAPjBA,IAOiB;AAAA,MANjBC,QAMiB,SANjBA,QAMiB;AAAA,MALjBC,UAKiB,SALjBA,UAKiB;AAAA,MAJjBC,OAIiB,SAJjBA,OAIiB;AAAA,MAHjBC,SAGiB,SAHjBA,SAGiB;AAAA,iCAFjBC,YAEiB;AAAA,MAFjBA,YAEiB,mCAFF,QAEE;AAAA,MADdb,SACc;;AACjB,MAAMc,QAAQ,GAAG7B,WAAW,EAA5B;AAEA,MAAM8B,mBAAmB,GAAGhB,IAAI,KAAK,GAAT,GAAeH,IAAf,GAAsBD,OAAlD;AAEA,SACE,4CACMK,SADN;AAEE,IAAA,SAAS,EAAEhB,UAAU,CACnB,QADmB,EAEnB8B,QAAQ,KAAK5B,GAAb,IAAoB,aAFD,uBAGLgB,IAHK,wBAILH,IAJK,GAKnBG,IAAI,KAAK,OAAT,IAAoBC,UAAU,KAAK,MAAnC,IAA6C,kBAL1B;AAFvB,MAUE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,YADZ;AAEE,IAAA,UAAU,EAAEW,QAAQ,KAAK5B,GAAb,GAAmB,SAAnB,GAA+B,YAF7C;AAGE,IAAA,QAAQ,EAAEmB,SAAS,KAAK,QAH1B;AAIE,IAAA,IAAI,EAAEA,SAAS,KAAK,QAAd,GAAyB,QAAzB,GAAoCW;AAJ5C,KAMGd,IAAI,KAAK,OAAT,IAAoBQ,UAApB,IACC;AAAK,mBAAY,MAAjB;AAAwB,IAAA,SAAS,EAAC;AAAlC,KACGA,UADH,CAPJ,EAYGN,MAAM,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAiCA,MAAjC,CAZb,EAcE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGjB,YAAY,CAACmB,MAAD,CAAZ,IACC,oBAAC,YAAD;AACE,IAAA,IAAI,EAAEP,IADR;AAEE,IAAA,SAAS,EAAC,MAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGO,MALH,CAFJ,EAUGnB,YAAY,CAACoB,SAAD,CAAZ,IACC,oBAAC,mBAAD;AAAqB,IAAA,SAAS,EAAC,MAA/B;AAAsC,IAAA,SAAS,EAAC;AAAhD,KACGA,SADH,CAXJ,EAeGpB,YAAY,CAACqB,IAAD,CAAZ,IAAsB,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAgCA,IAAhC,CAfzB,EAgBGrB,YAAY,CAACwB,OAAD,CAAZ,IAAyB5B,KAAK,CAACkC,QAAN,CAAeC,KAAf,CAAqBP,OAArB,IAAgC,CAAzD,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,OAAlC,CAjBJ,CAdF,EAmCG,CAAC,CAACN,SAAF,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,SAAS,KAAK,QAAd,IAA0B,oBAAC,aAAD,OAD7B,EAGGA,SAAS,KAAK,SAAd,IACC,oBAAC,UAAD;AACE,kBAAYQ,YADd;AAEE,IAAA,SAAS,EAAC,iBAFZ;AAGE,IAAA,OAAO,EAAED,SAHX;AAIE,IAAA,SAAS,EAAC,SAJZ;AAKE,IAAA,SAAS,EAAE;AALb,KAOGE,QAAQ,KAAK5B,GAAb,GACCgB,IAAI,KAAK,OAAT,GACE,oBAAC,iBAAD,OADF,GAGE,oBAAC,sBAAD,OAJH,GAOC,oBAAC,YAAD,OAdJ,CAJJ,CApCJ,CAVF,CADF;AA0ED,CA9FM","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { IOS } from \"../../lib/platform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport {\n  Icon24Chevron,\n  Icon24DismissSubstract,\n  Icon24DismissDark,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Title } from \"../Typography/Title/Title\";\nimport \"./Banner.css\";\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: \"tint\" | \"image\";\n  size?: \"s\" | \"m\";\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: \"dismiss\" | \"expand\";\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: \"light\" | \"dark\";\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки, отображаемые в баннере.\n   *\n   * - В режиме `tint` или в `image` со светлым фоном рекомендуется использовать только `<Button mode=\"primary\" />` или `<Button mode=\"tertiary\" hasHover={false} />`.\n   * - В режиме `image` с тёмным фоном – `<Button mode=\"overlay_primary\" />`.\n   */\n  actions?: React.ReactNode;\n}\n\ntype BannerTypographyProps = Pick<BannerProps, \"size\"> & HasComponent;\n\nconst BannerHeader: React.FC<BannerTypographyProps> = ({\n  size,\n  ...restProps\n}) => {\n  return size === \"m\" ? (\n    <Title level=\"2\" weight=\"2\" {...restProps} />\n  ) : (\n    <Headline weight=\"2\" {...restProps} />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = \"tint\",\n  imageTheme = \"dark\",\n  size = \"s\",\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = \"Скрыть\",\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const SubheaderTypography = size === \"m\" ? Text : Subhead;\n\n  return (\n    <section\n      {...restProps}\n      vkuiClass={classNames(\n        \"Banner\",\n        platform === IOS && \"Banner--ios\",\n        `Banner--md-${mode}`,\n        `Banner--sz-${size}`,\n        mode === \"image\" && imageTheme === \"dark\" && \"Banner--inverted\"\n      )}\n    >\n      <Tappable\n        vkuiClass=\"Banner__in\"\n        activeMode={platform === IOS ? \"opacity\" : \"background\"}\n        disabled={asideMode !== \"expand\"}\n        role={asideMode === \"expand\" ? \"button\" : undefined}\n      >\n        {mode === \"image\" && background && (\n          <div aria-hidden=\"true\" vkuiClass=\"Banner__bg\">\n            {background}\n          </div>\n        )}\n\n        {before && <div vkuiClass=\"Banner__before\">{before}</div>}\n\n        <div vkuiClass=\"Banner__content\">\n          {hasReactNode(header) && (\n            <BannerHeader\n              size={size}\n              Component=\"span\"\n              vkuiClass=\"Banner__header\"\n            >\n              {header}\n            </BannerHeader>\n          )}\n          {hasReactNode(subheader) && (\n            <SubheaderTypography Component=\"span\" vkuiClass=\"Banner__subheader\">\n              {subheader}\n            </SubheaderTypography>\n          )}\n          {hasReactNode(text) && <Text vkuiClass=\"Banner__text\">{text}</Text>}\n          {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n            <div vkuiClass=\"Banner__actions\">{actions}</div>\n          )}\n        </div>\n\n        {!!asideMode && (\n          <div vkuiClass=\"Banner__aside\">\n            {asideMode === \"expand\" && <Icon24Chevron />}\n\n            {asideMode === \"dismiss\" && (\n              <IconButton\n                aria-label={dismissLabel}\n                vkuiClass=\"Banner__dismiss\"\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === IOS ? (\n                  mode === \"image\" ? (\n                    <Icon24DismissDark />\n                  ) : (\n                    <Icon24DismissSubstract />\n                  )\n                ) : (\n                  <Icon24Cancel />\n                )}\n              </IconButton>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </section>\n  );\n};\n"],"file":"Banner.js"}

package/dist/components/BaseGallery/BaseGallery.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseGalleryProps } from "./types";
+import "./BaseGallery.css";
+export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, onEnd: onEndProp, align, showArrows, getRef, ...restProps }: BaseGalleryProps) => JSX.Element;

package/dist/components/BaseGallery/BaseGallery.js

@@ -0,0 +1,371 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["bullets", "getRootRef", "children", "slideWidth", "slideIndex", "isDraggable", "onDragStart", "onDragEnd", "onChange", "onPrevClick", "onNextClick", "onEnd", "align", "showArrows", "getRef"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { Touch } from "../Touch/Touch";
+import HorizontalScrollArrow from "../HorizontalScroll/HorizontalScrollArrow";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useDOM } from "../../lib/dom";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { calcMax, calcMin } from "./helpers";
+var ANIMATION_DURATION = 0.24;
+var LAYOUT_DEFAULT_STATE = {
+  containerWidth: 0,
+  viewporOffsettWidth: 0,
+  layerWidth: 0,
+  min: 0,
+  max: 0,
+  slides: [],
+  isFullyVisible: true
+};
+var SHIFT_DEFAULT_STATE = {
+  animation: undefined,
+  shiftX: 0,
+  dragging: false,
+  deltaX: 0,
+  indent: 0
+};
+export var BaseGallery = function BaseGallery(_ref) {
+  var _layoutState$current$8;
+
+  var _ref$bullets = _ref.bullets,
+      bullets = _ref$bullets === void 0 ? false : _ref$bullets,
+      getRootRef = _ref.getRootRef,
+      children = _ref.children,
+      _ref$slideWidth = _ref.slideWidth,
+      slideWidth = _ref$slideWidth === void 0 ? "100%" : _ref$slideWidth,
+      _ref$slideIndex = _ref.slideIndex,
+      slideIndex = _ref$slideIndex === void 0 ? 0 : _ref$slideIndex,
+      _ref$isDraggable = _ref.isDraggable,
+      isDraggable = _ref$isDraggable === void 0 ? true : _ref$isDraggable,
+      onDragStart = _ref.onDragStart,
+      onDragEnd = _ref.onDragEnd,
+      onChange = _ref.onChange,
+      onPrevClick = _ref.onPrevClick,
+      onNextClick = _ref.onNextClick,
+      onEndProp = _ref.onEnd,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? "left" : _ref$align,
+      showArrows = _ref.showArrows,
+      getRef = _ref.getRef,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var slidesStore = React.useRef({});
+  var layoutState = React.useRef(LAYOUT_DEFAULT_STATE);
+
+  var _React$useState = React.useState(SHIFT_DEFAULT_STATE),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      shiftState = _React$useState2[0],
+      setShiftState = _React$useState2[1];
+
+  var rootRef = useExternRef(getRootRef);
+  var viewportRef = useExternRef(getRef);
+
+  var _useDOM = useDOM(),
+      window = _useDOM.window;
+
+  var _useAdaptivity = useAdaptivity(),
+      hasMouse = _useAdaptivity.hasMouse;
+
+  var isCenterWithCustomWidth = slideWidth === "custom" && align === "center";
+
+  var validateIndent = function validateIndent(value) {
+    var _layoutState$current$, _layoutState$current$2;
+
+    var localMax = (_layoutState$current$ = layoutState.current.max) !== null && _layoutState$current$ !== void 0 ? _layoutState$current$ : 0;
+    var localMin = (_layoutState$current$2 = layoutState.current.min) !== null && _layoutState$current$2 !== void 0 ? _layoutState$current$2 : 0;
+
+    if (value < localMin) {
+      return localMin;
+    } else if (value > localMax) {
+      return localMax;
+    }
+
+    return value;
+  };
+  /*
+   * Считает отступ слоя галереи
+   */
+
+
+  var calculateIndent = function calculateIndent(targetIndex) {
+    var _layoutState$current$3;
+
+    if (layoutState.current.isFullyVisible) {
+      return 0;
+    }
+
+    var targetSlide = (_layoutState$current$3 = layoutState.current.slides) !== null && _layoutState$current$3 !== void 0 && _layoutState$current$3.length ? layoutState.current.slides[targetIndex] : null;
+
+    if (targetSlide) {
+      var coordX = targetSlide.coordX,
+          width = targetSlide.width;
+
+      if (isCenterWithCustomWidth) {
+        var _layoutState$current$4;
+
+        var viewportWidth = (_layoutState$current$4 = layoutState.current.viewporOffsettWidth) !== null && _layoutState$current$4 !== void 0 ? _layoutState$current$4 : 0;
+        return viewportWidth / 2 - coordX - width / 2;
+      }
+
+      return validateIndent(-1 * coordX);
+    }
+
+    return 0;
+  };
+  /*
+   * Считает отступ слоя галереи во время драга
+   */
+
+
+  var calculateDragIndent = function calculateDragIndent() {
+    var _layoutState$current$5, _layoutState$current$6;
+
+    var localMax = (_layoutState$current$5 = layoutState.current.max) !== null && _layoutState$current$5 !== void 0 ? _layoutState$current$5 : 0;
+    var localMin = (_layoutState$current$6 = layoutState.current.min) !== null && _layoutState$current$6 !== void 0 ? _layoutState$current$6 : 0;
+    var indent = shiftState.shiftX + shiftState.deltaX;
+
+    if (indent > localMax) {
+      return localMax + Number((indent - localMax) / 3);
+    } else if (indent < localMin) {
+      return localMin + Number((indent - localMin) / 3);
+    }
+
+    return indent;
+  };
+
+  var initializeSlides = function initializeSlides() {
+    var _React$Children$map, _rootRef$current$offs, _rootRef$current, _viewportRef$current$, _viewportRef$current;
+
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var localSlides = (_React$Children$map = React.Children.map(children, function (_item, i) {
+      var _elem$offsetLeft, _elem$offsetWidth;
+
+      var elem = slidesStore.current["slide-".concat(i)];
+      return {
+        coordX: (_elem$offsetLeft = elem === null || elem === void 0 ? void 0 : elem.offsetLeft) !== null && _elem$offsetLeft !== void 0 ? _elem$offsetLeft : 0,
+        width: (_elem$offsetWidth = elem === null || elem === void 0 ? void 0 : elem.offsetWidth) !== null && _elem$offsetWidth !== void 0 ? _elem$offsetWidth : 0
+      };
+    })) !== null && _React$Children$map !== void 0 ? _React$Children$map : [];
+    var localContainerWidth = (_rootRef$current$offs = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.offsetWidth) !== null && _rootRef$current$offs !== void 0 ? _rootRef$current$offs : 0;
+    var localViewporOffsettWidth = (_viewportRef$current$ = (_viewportRef$current = viewportRef.current) === null || _viewportRef$current === void 0 ? void 0 : _viewportRef$current.offsetWidth) !== null && _viewportRef$current$ !== void 0 ? _viewportRef$current$ : 0;
+    var localLayerWidth = localSlides.reduce(function (val, slide) {
+      return slide.width + val;
+    }, 0);
+    layoutState.current = {
+      containerWidth: localContainerWidth,
+      viewporOffsettWidth: localViewporOffsettWidth,
+      layerWidth: localLayerWidth,
+      max: calcMax({
+        slides: localSlides,
+        viewporOffsettWidth: localViewporOffsettWidth,
+        isCenterWithCustomWidth: isCenterWithCustomWidth
+      }),
+      min: calcMin({
+        containerWidth: localContainerWidth,
+        layerWidth: localLayerWidth,
+        slides: localSlides,
+        viewporOffsettWidth: localViewporOffsettWidth,
+        isCenterWithCustomWidth: isCenterWithCustomWidth,
+        align: align
+      }),
+      slides: localSlides,
+      isFullyVisible: localLayerWidth <= localContainerWidth
+    };
+    setShiftState(function (prevState) {
+      var _options$animation;
+
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        shiftX: calculateIndent(slideIndex),
+        animation: (_options$animation = options.animation) !== null && _options$animation !== void 0 ? _options$animation : prevState.shiftX === validateIndent(prevState.shiftX)
+      });
+    });
+  };
+
+  var onResize = function onResize() {
+    if (shiftState.animation !== undefined) {
+      initializeSlides({
+        animation: false
+      });
+    }
+  };
+
+  useGlobalEventListener(window, "resize", onResize);
+  useIsomorphicLayoutEffect(function () {
+    initializeSlides({
+      animation: false
+    });
+  }, [children, align, slideWidth]);
+  useIsomorphicLayoutEffect(function () {
+    if (shiftState.animation !== undefined) {
+      setShiftState(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          animation: true,
+          deltaX: 0,
+          shiftX: calculateIndent(slideIndex !== null && slideIndex !== void 0 ? slideIndex : 0)
+        });
+      });
+    }
+  }, [slideIndex]);
+
+  var slideLeft = function slideLeft() {
+    onChange === null || onChange === void 0 ? void 0 : onChange(slideIndex - 1);
+    onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick();
+  };
+
+  var slideRight = function slideRight() {
+    onChange === null || onChange === void 0 ? void 0 : onChange(slideIndex + 1);
+    onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick();
+  };
+  /*
+   * Получает индекс слайда, к которому будет осуществлен переход
+   */
+
+
+  var getTarget = function getTarget(e) {
+    var _layoutState$current$7;
+
+    var expectDeltaX = shiftState.deltaX / e.duration * 240 * 0.6;
+    var shift = shiftState.shiftX + shiftState.deltaX + expectDeltaX - ((_layoutState$current$7 = layoutState.current.max) !== null && _layoutState$current$7 !== void 0 ? _layoutState$current$7 : 0);
+    var direction = shiftState.deltaX < 0 ? 1 : -1; // Находим ближайшую границу слайда к текущему отступу
+
+    var targetIndex = layoutState.current.slides.reduce(function (val, item, index) {
+      var previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);
+      var currentValue = Math.abs(item.coordX + shift);
+      return previousValue < currentValue ? val : index;
+    }, slideIndex);
+
+    if (targetIndex === slideIndex) {
+      var targetSlide = slideIndex + direction;
+
+      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {
+        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {
+          targetIndex = targetSlide;
+        }
+      }
+    }
+
+    return targetIndex;
+  };
+
+  var onStart = function onStart() {
+    setShiftState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        animation: false
+      });
+    });
+  };
+
+  var onMoveX = function onMoveX(e) {
+    if (isDraggable && !layoutState.current.isFullyVisible) {
+      e.originalEvent.preventDefault();
+
+      if (e.isSlideX) {
+        // TODO исправить в рамках issue #2698
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(e);
+
+        if (shiftState.deltaX !== e.shiftX) {
+          setShiftState(function (prevState) {
+            return _objectSpread(_objectSpread({}, prevState), {}, {
+              deltaX: e.shiftX,
+              dragging: e.isSlideX
+            });
+          });
+        }
+      }
+    }
+  };
+
+  var onEnd = function onEnd(e) {
+    var targetIndex = e.isSlide ? getTarget(e) : slideIndex !== null && slideIndex !== void 0 ? slideIndex : 0;
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(e);
+    var nextShiftState = {
+      animation: true,
+      dragging: false,
+      deltaX: 0
+    };
+    var shiftXStick = calculateDragIndent();
+
+    if (targetIndex !== slideIndex) {
+      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)
+      nextShiftState.shiftX = shiftXStick;
+    }
+
+    setShiftState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), nextShiftState);
+    });
+
+    if (targetIndex !== slideIndex) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(targetIndex);
+    } // TODO исправить в рамках issue #2698
+
+
+    onEndProp === null || onEndProp === void 0 ? void 0 : onEndProp({
+      targetIndex: targetIndex
+    });
+  };
+
+  var indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;
+  var layerStyle = {
+    WebkitTransform: "translateX(".concat(indent, "px)"),
+    transform: "translateX(".concat(indent, "px)"),
+    WebkitTransition: shiftState.animation ? "-webkit-transform ".concat(ANIMATION_DURATION, "s cubic-bezier(.1, 0, .25, 1)") : "none",
+    transition: shiftState.animation ? "transform ".concat(ANIMATION_DURATION, "s cubic-bezier(.1, 0, .25, 1)") : "none"
+  };
+
+  var setSlideRef = function setSlideRef(slideRef, slideIndex) {
+    slidesStore.current["slide-".concat(slideIndex)] = slideRef;
+  }; // shiftX is negative number <= 0, we can swipe back only if it is < 0
+
+
+  var canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;
+  var canSlideRight = !layoutState.current.isFullyVisible && ( // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side
+  align === "left" && layoutState.current.containerWidth - shiftState.shiftX < ((_layoutState$current$8 = layoutState.current.layerWidth) !== null && _layoutState$current$8 !== void 0 ? _layoutState$current$8 : 0) || // otherwise we need to check current slide index (align = right or align = center)
+  align !== "left" && slideIndex < layoutState.current.slides.length - 1);
+  return createScopedElement("div", _extends({}, restProps, {
+    vkuiClass: classNames("Gallery", "Gallery--".concat(align), shiftState.dragging && "Gallery--dragging", slideWidth === "custom" && "Gallery--custom-width"),
+    ref: rootRef
+  }), createScopedElement(Touch, {
+    vkuiClass: "Gallery__viewport",
+    onStartX: onStart,
+    onMoveX: onMoveX,
+    onEnd: onEnd,
+    style: {
+      width: slideWidth === "custom" ? "100%" : slideWidth
+    },
+    getRootRef: viewportRef,
+    noSlideClick: true
+  }, createScopedElement("div", {
+    vkuiClass: "Gallery__layer",
+    style: layerStyle
+  }, React.Children.map(children, function (item, i) {
+    return createScopedElement("div", {
+      vkuiClass: "Gallery__slide",
+      key: "slide-".concat(i),
+      ref: function ref(el) {
+        return setSlideRef(el, i);
+      }
+    }, item);
+  }))), bullets && createScopedElement("div", {
+    "aria-hidden": "true",
+    vkuiClass: classNames("Gallery__bullets", "Gallery__bullets--".concat(bullets))
+  }, React.Children.map(children, function (_item, index) {
+    return createScopedElement("div", {
+      vkuiClass: classNames("Gallery__bullet", index === slideIndex && "Gallery__bullet--active"),
+      key: index
+    });
+  })), showArrows && hasMouse && canSlideLeft && createScopedElement(HorizontalScrollArrow, {
+    direction: "left",
+    onClick: slideLeft
+  }), showArrows && hasMouse && canSlideRight && createScopedElement(HorizontalScrollArrow, {
+    direction: "right",
+    onClick: slideRight
+  }));
+};
+//# sourceMappingURL=BaseGallery.js.map