@vkontakte/vkui 4.35.2 → 4.36.1

package/dist/cjs/components/Banner/Banner.js

@@ -39,63 +39,46 @@ var _Text = require("../Typography/Text/Text");
 
 var _Title = require("../Typography/Title/Title");
 
-var _excluded = ["size"],
-    _excluded2 = ["mode", "imageTheme", "size", "before", "asideMode", "header", "subheader", "text", "children", "background", "actions", "onDismiss", "dismissLabel"];
+var _excluded = ["mode", "imageTheme", "size", "before", "asideMode", "header", "subheader", "text", "children", "background", "actions", "onDismiss", "dismissLabel"];
 
-var BannerHeader = function BannerHeader(_ref) {
-  var size = _ref.size,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return size === "m" ? (0, _jsxRuntime.createScopedElement)(_Title.Title, (0, _extends2.default)({
-    level: "2",
-    weight: "2"
-  }, restProps)) : (0, _jsxRuntime.createScopedElement)(_Headline.Headline, (0, _extends2.default)({
-    weight: "2"
-  }, restProps));
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */
-
-
-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 = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+var Banner = function Banner(_ref) {
+  var _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "tint" : _ref$mode,
+      _ref$imageTheme = _ref.imageTheme,
+      imageTheme = _ref$imageTheme === void 0 ? "dark" : _ref$imageTheme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "s" : _ref$size,
+      before = _ref.before,
+      asideMode = _ref.asideMode,
+      header = _ref.header,
+      subheader = _ref.subheader,
+      text = _ref.text,
+      children = _ref.children,
+      background = _ref.background,
+      actions = _ref.actions,
+      onDismiss = _ref.onDismiss,
+      _ref$dismissLabel = _ref.dismissLabel,
+      dismissLabel = _ref$dismissLabel === void 0 ? "Скрыть" : _ref$dismissLabel,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
+  var HeaderTypography = size === "m" ? _Title.Title : _Headline.Headline;
   var SubheaderTypography = size === "m" ? _Text.Text : _Subhead.Subhead;
-  return (0, _jsxRuntime.createScopedElement)("section", (0, _extends2.default)({}, restProps, {
-    vkuiClass: (0, _classNames.classNames)("Banner", platform === _platform.IOS && "Banner--ios", "Banner--md-".concat(mode), "Banner--sz-".concat(size), mode === "image" && imageTheme === "dark" && "Banner--inverted")
-  }), (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, {
-    vkuiClass: "Banner__in",
-    activeMode: platform === _platform.IOS ? "opacity" : "background",
-    disabled: asideMode !== "expand",
-    role: asideMode === "expand" ? "button" : undefined
-  }, mode === "image" && background && (0, _jsxRuntime.createScopedElement)("div", {
+  var IconDismissIOS = mode === "image" ? _icons.Icon24DismissDark : _icons.Icon24DismissSubstract;
+  var content = (0, _jsxRuntime.createScopedElement)(React.Fragment, null, mode === "image" && background && (0, _jsxRuntime.createScopedElement)("div", {
     "aria-hidden": "true",
     vkuiClass: "Banner__bg"
   }, background), before && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Banner__before"
   }, before), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Banner__content"
-  }, (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(BannerHeader, {
-    size: size,
+  }, (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(HeaderTypography, {
     Component: "span",
-    vkuiClass: "Banner__header"
+    vkuiClass: "Banner__header",
+    weight: "2",
+    level: size === "m" ? "2" : "1"
   }, header), (0, _utils.hasReactNode)(subheader) && (0, _jsxRuntime.createScopedElement)(SubheaderTypography, {
     Component: "span",
     vkuiClass: "Banner__subheader"
@@ -103,15 +86,26 @@ var Banner = function Banner(_ref2) {
     vkuiClass: "Banner__text"
   }, text), (0, _utils.hasReactNode)(actions) && React.Children.count(actions) > 0 && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Banner__actions"
-  }, actions)), !!asideMode && (0, _jsxRuntime.createScopedElement)("div", {
+  }, actions)));
+  return (0, _jsxRuntime.createScopedElement)("section", (0, _extends2.default)({}, restProps, {
+    vkuiClass: (0, _classNames.classNames)("Banner", platform === _platform.IOS && "Banner--ios", "Banner--md-".concat(mode), "Banner--sz-".concat(size), mode === "image" && imageTheme === "dark" && "Banner--inverted")
+  }), asideMode === "expand" ? (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, {
+    vkuiClass: "Banner__in",
+    activeMode: platform === _platform.IOS ? "opacity" : "background",
+    role: "button"
+  }, content, (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "Banner__aside"
+  }, (0, _jsxRuntime.createScopedElement)(_icons.Icon24Chevron, null))) : (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "Banner__in"
+  }, content, asideMode === "dismiss" && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Banner__aside"
-  }, asideMode === "expand" && (0, _jsxRuntime.createScopedElement)(_icons.Icon24Chevron, null), asideMode === "dismiss" && (0, _jsxRuntime.createScopedElement)(_IconButton.IconButton, {
+  }, (0, _jsxRuntime.createScopedElement)(_IconButton.IconButton, {
     "aria-label": dismissLabel,
     vkuiClass: "Banner__dismiss",
     onClick: onDismiss,
     hoverMode: "opacity",
     hasActive: false
-  }, platform === _platform.IOS ? mode === "image" ? (0, _jsxRuntime.createScopedElement)(_icons.Icon24DismissDark, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24DismissSubstract, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24Cancel, null)))));
+  }, platform === _platform.IOS ? (0, _jsxRuntime.createScopedElement)(IconDismissIOS, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24Cancel, null)))));
 };
 
 exports.Banner = Banner;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"names":["BannerHeader","size","restProps","Banner","mode","imageTheme","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","platform","SubheaderTypography","Text","Subhead","IOS","undefined","React","Children","count"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasChildren } 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\"> &\n  HasComponent &\n  HasChildren;\n\nconst BannerHeader = ({ size, ...restProps }: BannerTypographyProps) => {\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"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","restProps","platform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","React","Children","count","IOS"],"mappings":"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","sourcesContent":["import * as React from \"react\";\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\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 HeaderTypography = size === \"m\" ? Title : Headline;\n  const SubheaderTypography = size === \"m\" ? Text : Subhead;\n\n  const IconDismissIOS =\n    mode === \"image\" ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <React.Fragment>\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          <HeaderTypography\n            Component=\"span\"\n            vkuiClass=\"Banner__header\"\n            weight=\"2\"\n            level={size === \"m\" ? \"2\" : \"1\"}\n          >\n            {header}\n          </HeaderTypography>\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    </React.Fragment>\n  );\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      {asideMode === \"expand\" ? (\n        <Tappable\n          vkuiClass=\"Banner__in\"\n          activeMode={platform === IOS ? \"opacity\" : \"background\"}\n          role=\"button\"\n        >\n          {content}\n\n          <div vkuiClass=\"Banner__aside\">\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div vkuiClass=\"Banner__in\">\n          {content}\n\n          {asideMode === \"dismiss\" && (\n            <div vkuiClass=\"Banner__aside\">\n              <IconButton\n                aria-label={dismissLabel}\n                vkuiClass=\"Banner__dismiss\"\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"file":"Banner.js"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":["ButtonGroup","mode","gap","stretched","align","getRootRef","children","restProps"],"mappings":";;;;;;;;;;;;;;;AACA;;;;AAwBA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAQH;AAAA,uBAPtBC,IAOsB;AAAA,MAPtBA,IAOsB,0BAPf,YAOe;AAAA,sBANtBC,GAMsB;AAAA,MANtBA,GAMsB,yBANhB,GAMgB;AAAA,4BALtBC,SAKsB;AAAA,MALtBA,SAKsB,+BALV,KAKU;AAAA,wBAJtBC,KAIsB;AAAA,MAJtBA,KAIsB,2BAJd,MAIc;AAAA,MAHtBC,UAGsB,QAHtBA,UAGsB;AAAA,MAFtBC,QAEsB,QAFtBA,QAEsB;AAAA,MADnBC,SACmB;AACtB,SACE;AACE,IAAA,SAAS,EAAE,4BACT,aADS,8BAEYN,IAFZ,GAGTC,GAAG,KAAK,MAAR,+BAAsCA,GAAtC,CAHS,EAITC,SAAS,IAAI,wBAJJ,+BAKaC,KALb,EADb;AAQE,IAAA,IAAI,EAAC,OARP;AASE,IAAA,GAAG,EAAEC;AATP,KAUME,SAVN,GAYGD,QAZH,CADF;AAgBD,CAzBM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport type { HasRootRef, HasAlign } from \"../../types\";\nimport \"./ButtonGroup.css\";\n\nexport interface ButtonGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: \"vertical\" | \"horizontal\";\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: \"none\" | \"space\" | \"s\" | \"m\";\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n}\n\n/**\n * @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"],"file":"ButtonGroup.js"}
+{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":["ButtonGroup","mode","gap","stretched","align","getRootRef","children","restProps"],"mappings":";;;;;;;;;;;;;;;AACA;;;;AA2BA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAQH;AAAA,uBAPtBC,IAOsB;AAAA,MAPtBA,IAOsB,0BAPf,YAOe;AAAA,sBANtBC,GAMsB;AAAA,MANtBA,GAMsB,yBANhB,GAMgB;AAAA,4BALtBC,SAKsB;AAAA,MALtBA,SAKsB,+BALV,KAKU;AAAA,wBAJtBC,KAIsB;AAAA,MAJtBA,KAIsB,2BAJd,MAIc;AAAA,MAHtBC,UAGsB,QAHtBA,UAGsB;AAAA,MAFtBC,QAEsB,QAFtBA,QAEsB;AAAA,MADnBC,SACmB;AACtB,SACE;AACE,IAAA,SAAS,EAAE,4BACT,aADS,8BAEYN,IAFZ,GAGTC,GAAG,KAAK,MAAR,+BAAsCA,GAAtC,CAHS,EAITC,SAAS,IAAI,wBAJJ,+BAKaC,KALb,EADb;AAQE,IAAA,IAAI,EAAC,OARP;AASE,IAAA,GAAG,EAAEC;AATP,KAUME,SAVN,GAYGD,QAZH,CADF;AAgBD,CAzBM","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"],"file":"ButtonGroup.js"}

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

@@ -63,17 +63,8 @@ var CalendarDay = /*#__PURE__*/React.memo(function (_ref) {
     });
   }
 
-  return (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable // eslint-disable-next-line vkui/no-object-expression-in-arguments
-  , {
-    vkuiClass: (0, _classNames.classNames)("CalendarDay", "CalendarDay--size-".concat(size), {
-      "CalendarDay--today": today,
-      "CalendarDay--selected": selected && !disabled,
-      "CalendarDay--active": active && !disabled,
-      "CalendarDay--selection-start": selectionStart,
-      "CalendarDay--selection-end": selectionEnd,
-      "CalendarDay--disabled": disabled,
-      "CalendarDay--not-same-month": !sameMonth
-    }),
+  return (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, {
+    vkuiClass: (0, _classNames.classNames)("CalendarDay", "CalendarDay--size-".concat(size), today && "CalendarDay--today", selected && !disabled && "CalendarDay--selected", active && !disabled && "CalendarDay--active", selectionStart && "CalendarDay--selection-start", selectionEnd && "CalendarDay--selection-end", disabled && "CalendarDay--disabled", !sameMonth && "CalendarDay--not-same-month"),
     hoverMode: active ? "CalendarDay--active-hover" : "CalendarDay--hover",
     hasActive: false,
     onClick: onClick,
@@ -90,17 +81,9 @@ var CalendarDay = /*#__PURE__*/React.memo(function (_ref) {
     onEnter: handleEnter,
     onLeave: handleLeave
   }, (0, _jsxRuntime.createScopedElement)("div", {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: (0, _classNames.classNames)("CalendarDay__hinted", {
-      "CalendarDay__hinted--active": hinted,
-      "CalendarDay__hinted--selection-start": hintedSelectionStart,
-      "CalendarDay__hinted--selection-end": hintedSelectionEnd
-    })
+    vkuiClass: (0, _classNames.classNames)("CalendarDay__hinted", hinted && "CalendarDay__hinted--active", hintedSelectionStart && "CalendarDay__hinted--selection-start", hintedSelectionEnd && "CalendarDay__hinted--selection-end")
   }, (0, _jsxRuntime.createScopedElement)("div", {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: (0, _classNames.classNames)("CalendarDay__inner", {
-      "CalendarDay__inner--active": active && !disabled
-    })
+    vkuiClass: (0, _classNames.classNames)("CalendarDay__inner", active && !disabled && "CalendarDay__inner--active")
   }, (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "CalendarDay__day-number"
   }, day.getDate()))));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"names":["CalendarDay","React","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","locale","useContext","LocaleProviderContext","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","ENABLE_KEYBOARD_INPUT_EVENT_NAME","bubbles","focus","Intl","DateTimeFormat","weekday","year","month","format","getDate","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from \"../../hooks/useKeyboardInputTracker\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport \"./CalendarDay.css\";\n\nexport interface CalendarDayProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: \"s\" | \"m\";\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n  }: CalendarDayProps) => {\n    const locale = React.useContext(LocaleProviderContext);\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(\n          new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true })\n        );\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div vkuiClass=\"CalendarDay__hidden\"></div>;\n    }\n\n    return (\n      <Tappable\n        // eslint-disable-next-line vkui/no-object-expression-in-arguments\n        vkuiClass={classNames(\"CalendarDay\", `CalendarDay--size-${size}`, {\n          \"CalendarDay--today\": today,\n          \"CalendarDay--selected\": selected && !disabled,\n          \"CalendarDay--active\": active && !disabled,\n          \"CalendarDay--selection-start\": selectionStart,\n          \"CalendarDay--selection-end\": selectionEnd,\n          \"CalendarDay--disabled\": disabled,\n          \"CalendarDay--not-same-month\": !sameMonth,\n        })}\n        hoverMode={active ? \"CalendarDay--active-hover\" : \"CalendarDay--hover\"}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: \"long\",\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? \"outside\" : \"inside\"}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n      >\n        <div\n          // eslint-disable-next-line vkui/no-object-expression-in-arguments\n          vkuiClass={classNames(\"CalendarDay__hinted\", {\n            \"CalendarDay__hinted--active\": hinted,\n            \"CalendarDay__hinted--selection-start\": hintedSelectionStart,\n            \"CalendarDay__hinted--selection-end\": hintedSelectionEnd,\n          })}\n        >\n          <div\n            // eslint-disable-next-line vkui/no-object-expression-in-arguments\n            vkuiClass={classNames(\"CalendarDay__inner\", {\n              \"CalendarDay__inner--active\": active && !disabled,\n            })}\n          >\n            <div vkuiClass=\"CalendarDay__day-number\">{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  }\n);\n\nCalendarDay.displayName = \"CalendarDay\";\n"],"file":"CalendarDay.js"}
+{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"names":["CalendarDay","React","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","locale","useContext","LocaleProviderContext","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","ENABLE_KEYBOARD_INPUT_EVENT_NAME","bubbles","focus","Intl","DateTimeFormat","weekday","year","month","format","getDate","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from \"../../hooks/useKeyboardInputTracker\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport \"./CalendarDay.css\";\n\nexport interface CalendarDayProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: \"s\" | \"m\";\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n  }: CalendarDayProps) => {\n    const locale = React.useContext(LocaleProviderContext);\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(\n          new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true })\n        );\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div vkuiClass=\"CalendarDay__hidden\"></div>;\n    }\n\n    return (\n      <Tappable\n        vkuiClass={classNames(\n          \"CalendarDay\",\n          `CalendarDay--size-${size}`,\n          today && \"CalendarDay--today\",\n          selected && !disabled && \"CalendarDay--selected\",\n          active && !disabled && \"CalendarDay--active\",\n          selectionStart && \"CalendarDay--selection-start\",\n          selectionEnd && \"CalendarDay--selection-end\",\n          disabled && \"CalendarDay--disabled\",\n          !sameMonth && \"CalendarDay--not-same-month\"\n        )}\n        hoverMode={active ? \"CalendarDay--active-hover\" : \"CalendarDay--hover\"}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: \"long\",\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? \"outside\" : \"inside\"}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n      >\n        <div\n          vkuiClass={classNames(\n            \"CalendarDay__hinted\",\n            hinted && \"CalendarDay__hinted--active\",\n            hintedSelectionStart && \"CalendarDay__hinted--selection-start\",\n            hintedSelectionEnd && \"CalendarDay__hinted--selection-end\"\n          )}\n        >\n          <div\n            vkuiClass={classNames(\n              \"CalendarDay__inner\",\n              active && !disabled && \"CalendarDay__inner--active\"\n            )}\n          >\n            <div vkuiClass=\"CalendarDay__day-number\">{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  }\n);\n\nCalendarDay.displayName = \"CalendarDay\";\n"],"file":"CalendarDay.js"}

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

@@ -13,15 +13,13 @@ var _jsxRuntime = require("../../lib/jsxRuntime");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var React = _interopRequireWildcard(require("react"));
 
-var _classNames2 = require("../../lib/classNames");
+var _classNames = require("../../lib/classNames");
 
 var _getClassName = require("../../helpers/getClassName");
 
@@ -104,8 +102,7 @@ var CardScroll = function CardScroll(_ref) {
   }
 
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: (0, _classNames2.classNames)((0, _getClassName.getClassName)("CardScroll", platform), "CardScroll--sizeX-".concat(sizeX), "CardScroll--".concat(size), (0, _defineProperty2.default)({}, "CardScroll--withSpaces", withSpaces))
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("CardScroll", platform), "CardScroll--sizeX-".concat(sizeX), "CardScroll--".concat(size), withSpaces && "CardScroll--withSpaces")
   }), (0, _jsxRuntime.createScopedElement)(_HorizontalScroll.HorizontalScroll, {
     getScrollToLeft: getScrollToLeft,
     getScrollToRight: getScrollToRight,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"names":["CardScroll","children","size","showArrows","withSpaces","restProps","platform","sizeX","refContainer","React","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;;;AAYA;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAa,OAMH;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,uBAJrBC,IAIqB;AAAA,MAJrBA,IAIqB,0BAJd,GAIc;AAAA,6BAHrBC,UAGqB;AAAA,MAHrBA,UAGqB,gCAHR,IAGQ;AAAA,6BAFrBC,UAEqB;AAAA,MAFrBA,UAEqB,gCAFR,IAEQ;AAAA,MADlBC,SACkB;AACrB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,MAAMC,YAAY,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,MAAM,GAAGF,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAf;;AAEA,gBAAmB,kBAAnB;AAAA,MAAQE,MAAR,WAAQA,MAAR;;AAEA,WAASC,eAAT,CAAyBC,MAAzB,EAAiD;AAC/C,QAAI,CAACN,YAAY,CAACO,OAAd,IAAyB,CAACJ,MAAM,CAACI,OAArC,EAA8C;AAC5C,aAAOD,MAAP;AACD;;AACD,QAAME,cAAc,GAAGR,YAAY,CAACO,OAAb,CAAqBE,WAA5C;AACA,QAAMC,UAAU,GAAG,iCACbV,YAAY,CAACO,OAAb,CAAqBd,QADR,EAEjBkB,SAFiB,CAGjB,UAACC,EAAD;AAAA,aACEA,EAAE,CAACC,UAAH,GACED,EAAE,CAACH,WADL,GAEEK,QAAQ,CAACV,MAAM,CAAEW,gBAAR,CAAyBH,EAAzB,EAA6BI,WAA9B,CAFV,GAGEV,MAHF,IAIA,CALF;AAAA,KAHiB,CAAnB;;AAWA,QAAII,UAAU,KAAK,CAAC,CAApB,EAAuB;AACrB,aAAOJ,MAAP;AACD;;AAED,QAAII,UAAU,KAAK,CAAnB,EAAsB;AACpB,aAAO,CAAP;AACD;;AAED,QAAMO,KAAK,GAAGjB,YAAY,CAACO,OAAb,CAAqBd,QAArB,CAA8BiB,UAA9B,CAAd;AAEA,QAAMQ,QAAQ,GACZD,KAAK,CAACJ,UAAN,IACCL,cAAc,GAAGS,KAAK,CAACR,WADxB,IAEAN,MAAM,CAACI,OAAP,CAAeE,WAHjB;;AAKA,QAAIS,QAAQ,IAAI,IAAIf,MAAM,CAACI,OAAP,CAAeE,WAAnC,EAAgD;AAC9C,aAAO,CAAP;AACD;;AAED,WAAOS,QAAP;AACD;;AAED,WAASC,gBAAT,CAA0Bb,MAA1B,EAAkD;AAChD,QAAI,CAACN,YAAY,CAACO,OAAd,IAAyB,CAACJ,MAAM,CAACI,OAArC,EAA8C;AAC5C,aAAOD,MAAP;AACD;;AAED,QAAME,cAAc,GAAGR,YAAY,CAACO,OAAb,CAAqBE,WAA5C;AACA,QAAMQ,KAAK,GAAGG,KAAK,CAACC,SAAN,CAAgBC,IAAhB,CAAqBC,IAArB,CACZvB,YAAY,CAACO,OAAb,CAAqBd,QADT,EAEZ,UAACmB,EAAD;AAAA,aACEA,EAAE,CAACC,UAAH,GAAgBD,EAAE,CAACH,WAAnB,GAAiCH,MAAjC,GAA0CE,cAD5C;AAAA,KAFY,CAAd;;AAMA,QAAI,CAACS,KAAL,EAAY;AACV,aAAOX,MAAP;AACD;;AAED,WAAOW,KAAK,CAACJ,UAAN,GAAmBV,MAAM,CAACI,OAAP,CAAeE,WAAzC;AACD;;AAED,SACE,uEACMZ,SADN;AAEE;AACA,IAAA,SAAS,EAAE,6BACT,gCAAa,YAAb,EAA2BC,QAA3B,CADS,8BAEYC,KAFZ,yBAGML,IAHN,qCAIN,wBAJM,EAIqBE,UAJrB;AAHb,MAUE,qCAAC,kCAAD;AACE,IAAA,eAAe,EAAES,eADnB;AAEE,IAAA,gBAAgB,EAAEc,gBAFpB;AAGE,IAAA,UAAU,EAAExB;AAHd,KAKE;AAAK,IAAA,SAAS,EAAC,gBAAf;AAAgC,IAAA,GAAG,EAAEK;AAArC,KACE;AAAM,IAAA,SAAS,EAAC,iBAAhB;AAAkC,IAAA,GAAG,EAAEG;AAAvC,IADF,EAEGV,QAFH,EAGE;AAAM,IAAA,SAAS,EAAC;AAAhB,IAHF,CALF,CAVF,CADF;AAwBD,CAhGM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./CardScroll.css\";\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: \"s\" | \"m\" | \"l\" | false;\n  showArrows?: HorizontalScrollProps[\"showArrows\"];\n  withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = \"s\",\n  showArrows = true,\n  withSpaces = true,\n  ...restProps\n}: CardScrollProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = (\n      [...refContainer.current.children] as HTMLElement[]\n    ).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft -\n      (containerWidth - slide.offsetWidth) +\n      gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) =>\n        el.offsetLeft + el.offsetWidth - offset > containerWidth\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <div\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(\n        getClassName(\"CardScroll\", platform),\n        `CardScroll--sizeX-${sizeX}`,\n        `CardScroll--${size}`,\n        { [\"CardScroll--withSpaces\"]: withSpaces }\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div vkuiClass=\"CardScroll__in\" ref={refContainer}>\n          <span vkuiClass=\"CardScroll__gap\" ref={gapRef} />\n          {children}\n          <span vkuiClass=\"CardScroll__gap\" />\n        </div>\n      </HorizontalScroll>\n    </div>\n  );\n};\n"],"file":"CardScroll.js"}
+{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"names":["CardScroll","children","size","showArrows","withSpaces","restProps","platform","sizeX","refContainer","React","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./CardScroll.css\";\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: \"s\" | \"m\" | \"l\" | false;\n  showArrows?: HorizontalScrollProps[\"showArrows\"];\n  withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = \"s\",\n  showArrows = true,\n  withSpaces = true,\n  ...restProps\n}: CardScrollProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = (\n      [...refContainer.current.children] as HTMLElement[]\n    ).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft -\n      (containerWidth - slide.offsetWidth) +\n      gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) =>\n        el.offsetLeft + el.offsetWidth - offset > containerWidth\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"CardScroll\", platform),\n        `CardScroll--sizeX-${sizeX}`,\n        `CardScroll--${size}`,\n        withSpaces && \"CardScroll--withSpaces\"\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div vkuiClass=\"CardScroll__in\" ref={refContainer}>\n          <span vkuiClass=\"CardScroll__gap\" ref={gapRef} />\n          {children}\n          <span vkuiClass=\"CardScroll__gap\" />\n        </div>\n      </HorizontalScroll>\n    </div>\n  );\n};\n"],"file":"CardScroll.js"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"names":["Chip","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","restProps","sizeY","onRemoveWrapper","React","useCallback","event","title"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAeA;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAUH;AAAA,wBATfC,KASe;AAAA,MATfA,KASe,2BATP,EASO;AAAA,MARfC,MAQe,QARfA,MAQe;AAAA,4BAPfC,SAOe;AAAA,MAPfA,SAOe,+BAPH,IAOG;AAAA,2BANfC,QAMe;AAAA,MANfA,QAMe,8BANJC,WAMI;AAAA,kCALfC,eAKe;AAAA,MALfA,eAKe,qCALG,SAKH;AAAA,yBAJfC,MAIe;AAAA,MAJfA,MAIe,4BAJN,IAIM;AAAA,MAHfC,KAGe,QAHfA,KAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,MADZC,SACY;;AACf,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,MAAMC,eAAe,GAAGC,KAAK,CAACC,WAAN,CACtB,UAACC,KAAD,EAA6B;AAC3BX,IAAAA,QAAQ,CAACW,KAAD,EAAQd,KAAR,CAAR;AACD,GAHqB,EAItB,CAACG,QAAD,EAAWH,KAAX,CAJsB,CAAxB;AAMA,MAAMe,KAAK,GAAG,iCAAqBP,QAArB,CAAd;AAEA,SACE;AACE,IAAA,SAAS,EAAE,4BACT,MADS,EAETN,SAAS,IAAI,iBAFJ,wBAGMQ,KAHN,EAGc;AAHd,KADb;AAME,IAAA,IAAI,EAAC,QANP;AAOE,kBAAYK;AAPd,KAQMN,SARN,GAUE;AAAK,IAAA,SAAS,EAAC,UAAf;AAA0B,IAAA,IAAI,EAAC;AAA/B,KACG,yBAAaH,MAAb,KAAwB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+BA,MAA/B,CAD3B,EAEE,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC,eAAnB;AAAmC,IAAA,KAAK,EAAES,KAA1C;AAAiD,mBAAY;AAA7D,KACGP,QADH,CAFF,EAKG,yBAAaD,KAAb,KAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8BA,KAA9B,CAL1B,EAOGL,SAAS,IACR,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,QADZ;AAEE,IAAA,SAAS,EAAC,cAFZ;AAGE,IAAA,OAAO,EAAES,eAHX;AAIE,IAAA,QAAQ,EAAE,KAJZ;AAKE,IAAA,SAAS,EAAE,KALb;AAME,4BAAeN,eAAf,cAAkCU,KAAlC;AANF,KAQE,qCAAC,mBAAD;AAAc,mBAAa;AAA3B,IARF,CARJ,CAVF,CADF;AAiCD,CArDM","sourcesContent":["import * as React from \"react\";\nimport { Icon16Cancel } from \"@vkontakte/icons\";\nimport { getTitleFromChildren, hasReactNode, noop } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Chip.css\";\n\ntype ChipValue = string | number;\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: { value?: ChipValue };\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = \"\",\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = \"Удалить\",\n  before = null,\n  after,\n  children,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value]\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Chip\",\n        removable && \"Chip--removable\",\n        `Chip--sizeY-${sizeY}` // TODO: v5 новая адаптивность\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div vkuiClass=\"Chip__in\" role=\"presentation\">\n        {hasReactNode(before) && <div vkuiClass=\"Chip__before\">{before}</div>}\n        <Caption vkuiClass=\"Chip__content\" title={title} aria-hidden=\"true\">\n          {children}\n        </Caption>\n        {hasReactNode(after) && <div vkuiClass=\"Chip__after\">{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            vkuiClass=\"Chip__remove\"\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel aria-hidden={true} />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"file":"Chip.js"}
+{"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"names":["Chip","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","restProps","sizeY","onRemoveWrapper","React","useCallback","event","title"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA2BA;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAUH;AAAA,wBATfC,KASe;AAAA,MATfA,KASe,2BATP,EASO;AAAA,MARfC,MAQe,QARfA,MAQe;AAAA,4BAPfC,SAOe;AAAA,MAPfA,SAOe,+BAPH,IAOG;AAAA,2BANfC,QAMe;AAAA,MANfA,QAMe,8BANJC,WAMI;AAAA,kCALfC,eAKe;AAAA,MALfA,eAKe,qCALG,SAKH;AAAA,yBAJfC,MAIe;AAAA,MAJfA,MAIe,4BAJN,IAIM;AAAA,MAHfC,KAGe,QAHfA,KAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,MADZC,SACY;;AACf,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,MAAMC,eAAe,GAAGC,KAAK,CAACC,WAAN,CACtB,UAACC,KAAD,EAA6B;AAC3BX,IAAAA,QAAQ,CAACW,KAAD,EAAQd,KAAR,CAAR;AACD,GAHqB,EAItB,CAACG,QAAD,EAAWH,KAAX,CAJsB,CAAxB;AAMA,MAAMe,KAAK,GAAG,iCAAqBP,QAArB,CAAd;AAEA,SACE;AACE,IAAA,SAAS,EAAE,4BACT,MADS,EAETN,SAAS,IAAI,iBAFJ,wBAGMQ,KAHN,EAGc;AAHd,KADb;AAME,IAAA,IAAI,EAAC,QANP;AAOE,kBAAYK;AAPd,KAQMN,SARN,GAUE;AAAK,IAAA,SAAS,EAAC,UAAf;AAA0B,IAAA,IAAI,EAAC;AAA/B,KACG,yBAAaH,MAAb,KAAwB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+BA,MAA/B,CAD3B,EAEE,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC,eAAnB;AAAmC,IAAA,KAAK,EAAES,KAA1C;AAAiD,mBAAY;AAA7D,KACGP,QADH,CAFF,EAKG,yBAAaD,KAAb,KAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8BA,KAA9B,CAL1B,EAOGL,SAAS,IACR,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,QADZ;AAEE,IAAA,SAAS,EAAC,cAFZ;AAGE,IAAA,OAAO,EAAES,eAHX;AAIE,IAAA,QAAQ,EAAE,KAJZ;AAKE,IAAA,SAAS,EAAE,KALb;AAME,4BAAeN,eAAf,cAAkCU,KAAlC;AANF,KAQE,qCAAC,mBAAD;AAAc,mBAAa;AAA3B,IARF,CARJ,CAVF,CADF;AAiCD,CArDM","sourcesContent":["import * as React from \"react\";\nimport { Icon16Cancel } from \"@vkontakte/icons\";\nimport { getTitleFromChildren, hasReactNode, noop } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Chip.css\";\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = \"\",\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = \"Удалить\",\n  before = null,\n  after,\n  children,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value]\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Chip\",\n        removable && \"Chip--removable\",\n        `Chip--sizeY-${sizeY}` // TODO: v5 новая адаптивность\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div vkuiClass=\"Chip__in\" role=\"presentation\">\n        {hasReactNode(before) && <div vkuiClass=\"Chip__before\">{before}</div>}\n        <Caption vkuiClass=\"Chip__content\" title={title} aria-hidden=\"true\">\n          {children}\n        </Caption>\n        {hasReactNode(after) && <div vkuiClass=\"Chip__after\">{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            vkuiClass=\"Chip__remove\"\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel aria-hidden={true} />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"file":"Chip.js"}

package/dist/cjs/components/ChipsInput/ChipsInput.js

@@ -2,228 +2,45 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.chipsInputDefaultProps = exports.ChipsInput = void 0;
+exports.ChipsInput = void 0;
 
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var React = _interopRequireWildcard(require("react"));
-
 var _FormField = require("../FormField/FormField");
 
-var _classNames = require("../../lib/classNames");
-
-var _Chip = require("../Chip/Chip");
-
-var _utils = require("../../lib/utils");
+var _ChipsInputBase = require("../ChipsInputBase/ChipsInputBase");
 
-var _useChipsInput2 = require("./useChipsInput");
+var _excluded = ["style", "className", "getRootRef", "before", "after", "status"];
 
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-
-var _prefixClass = require("../../lib/prefixClass");
-
-var _useExternRef = require("../../hooks/useExternRef");
-
-var _excluded = ["disabled", "value", "label"],
-    _excluded2 = ["style", "value", "onChange", "onInputChange", "onKeyDown", "onBlur", "onFocus", "children", "className", "inputValue", "getRef", "getRootRef", "placeholder", "getOptionValue", "getOptionLabel", "getNewOptionData", "renderChip", "before", "after", "inputAriaLabel"];
-var chipsInputDefaultProps = {
-  type: "text",
-  onChange: _utils.noop,
-  onInputChange: _utils.noop,
-  onKeyDown: _utils.noop,
-  onBlur: _utils.noop,
-  onFocus: _utils.noop,
-  value: [],
-  inputValue: "",
-  inputAriaLabel: "Введите ваше значение...",
-  getOptionValue: function getOptionValue(option) {
-    return option.value;
-  },
-  getOptionLabel: function getOptionLabel(option) {
-    return option.label;
-  },
-  getNewOptionData: function getNewOptionData(_, label) {
-    return {
-      value: label,
-      label: label
-    };
-  },
-  renderChip: function renderChip(props) {
-    if (!props) {
-      return null;
-    }
-
-    var disabled = props.disabled,
-        value = props.value,
-        label = props.label,
-        rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-    return (0, _jsxRuntime.createScopedElement)(_Chip.Chip, (0, _extends2.default)({
-      value: value,
-      removable: !disabled
-    }, rest), label);
-  }
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
  */
-
-exports.chipsInputDefaultProps = chipsInputDefaultProps;
-
-var ChipsInput = function ChipsInput(props) {
-  var propsWithDefault = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, chipsInputDefaultProps), props);
-  var style = propsWithDefault.style,
-      value = propsWithDefault.value,
-      onChange = propsWithDefault.onChange,
-      onInputChange = propsWithDefault.onInputChange,
-      onKeyDown = propsWithDefault.onKeyDown,
-      onBlur = propsWithDefault.onBlur,
-      onFocus = propsWithDefault.onFocus,
-      children = propsWithDefault.children,
-      className = propsWithDefault.className,
-      inputValue = propsWithDefault.inputValue,
-      getRef = propsWithDefault.getRef,
-      getRootRef = propsWithDefault.getRootRef,
-      placeholder = propsWithDefault.placeholder,
-      getOptionValue = propsWithDefault.getOptionValue,
-      getOptionLabel = propsWithDefault.getOptionLabel,
-      getNewOptionData = propsWithDefault.getNewOptionData,
-      renderChip = propsWithDefault.renderChip,
-      before = propsWithDefault.before,
-      after = propsWithDefault.after,
-      inputAriaLabel = propsWithDefault.inputAriaLabel,
-      restProps = (0, _objectWithoutProperties2.default)(propsWithDefault, _excluded2);
-
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-      sizeY = _useAdaptivity.sizeY;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      focused = _React$useState2[0],
-      setFocused = _React$useState2[1];
-
-  var _useChipsInput = (0, _useChipsInput2.useChipsInput)(propsWithDefault),
-      fieldValue = _useChipsInput.fieldValue,
-      addOptionFromInput = _useChipsInput.addOptionFromInput,
-      removeOption = _useChipsInput.removeOption,
-      selectedOptions = _useChipsInput.selectedOptions,
-      handleInputChange = _useChipsInput.handleInputChange;
-
-  var inputRef = (0, _useExternRef.useExternRef)(getRef);
-  var isDisabled = restProps.disabled || restProps.readOnly;
-
-  var handleKeyDown = function handleKeyDown(e) {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    onKeyDown(e);
-
-    if (e.key === "Backspace" && !e.defaultPrevented && !fieldValue && selectedOptions.length) {
-      removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));
-      e.preventDefault();
-    }
-
-    if (e.key === "Enter" && !e.defaultPrevented && fieldValue) {
-      addOptionFromInput();
-      e.preventDefault();
-    }
-  };
-
-  var handleBlur = function handleBlur(e) {
-    if (focused) {
-      setFocused(false);
-    }
-
-    onBlur(e);
-  };
-
-  var handleFocus = function handleFocus(e) {
-    if (!focused) {
-      setFocused(true);
-    }
-
-    onFocus(e);
-  };
-
-  var handleChipRemove = function handleChipRemove(_, value) {
-    if (value !== undefined) {
-      removeOption(value);
-    }
-  };
-
-  var handleClick = function handleClick(e) {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    if ((inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== null && !focused) {
-      inputRef.current.focus();
-    }
-  };
-
+var ChipsInput = function ChipsInput(_ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      getRootRef = _ref.getRootRef,
+      before = _ref.before,
+      after = _ref.after,
+      status = _ref.status,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _jsxRuntime.createScopedElement)(_FormField.FormField, {
     getRootRef: getRootRef,
-    vkuiClass: (0, _classNames.classNames)("ChipsInput", "ChipsInput--sizeY-".concat(sizeY), focused && "ChipsInput--focused", !!selectedOptions.length && "ChipsInput--withChips"),
+    vkuiClass: "ChipsInput",
     className: className,
     style: style,
     disabled: restProps.disabled,
     before: before,
     after: after,
-    onClick: handleClick,
     role: "application",
     "aria-disabled": restProps.disabled,
-    "aria-readonly": restProps.readOnly
-  }, (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "ChipsInput__container",
-    role: "presentation"
-  }, selectedOptions.map(function (option) {
-    var value = getOptionValue(option);
-    var label = getOptionLabel(option);
-    return (0, _jsxRuntime.createScopedElement)(React.Fragment, {
-      key: "".concat((0, _typeof2.default)(value), "-").concat(value)
-    }, renderChip({
-      option: option,
-      value: value,
-      label: label,
-      onRemove: handleChipRemove,
-      disabled: Boolean(restProps.disabled),
-      className: (0, _prefixClass.prefixClass)("ChipsInput__chip")
-    }));
-  }), (0, _jsxRuntime.createScopedElement)("label", {
-    vkuiClass: "ChipsInput__input-container",
-    "aria-label": inputAriaLabel
-  }, (0, _jsxRuntime.createScopedElement)("input", (0, _extends2.default)({
-    ref: inputRef,
-    value: fieldValue,
-    autoCapitalize: "none",
-    autoComplete: "off",
-    autoCorrect: "off",
-    spellCheck: false,
-    "aria-autocomplete": "list",
-    vkuiClass: "ChipsInput__el",
-    onChange: handleInputChange,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    placeholder: selectedOptions.length ? undefined : placeholder
-  }, restProps)))));
+    "aria-readonly": restProps.readOnly,
+    status: status
+  }, (0, _jsxRuntime.createScopedElement)(_ChipsInputBase.ChipsInputBase, restProps));
 };
 
 exports.ChipsInput = ChipsInput;