@vkontakte/vkui 5.0.3 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"Epic.js","names":["warn","warnOnce","Epic","props","scroll","React","useRef","current","activeStory","tabbar","children","className","restProps","story","Children","toArray","find","isValidElement","getNavId","classNamesString","value"],"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { ScrollSaver } from \"./ScrollSaver\";\nimport { getNavId } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport styles from \"./Epic.module.css\";\n\nexport interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {\n  tabbar?: React.ReactNode;\n  activeStory: string;\n}\n\nconst warn = warnOnce(\"Epic\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = (props: EpicProps) => {\n  const scroll = React.useRef<{ [key: string]: number }>({}).current;\n  const { activeStory, tabbar, children, className, ...restProps } = props;\n\n  const story =\n    (React.Children.toArray(children).find(\n      (story) =>\n        React.isValidElement(story) &&\n        getNavId(story.props, warn) === activeStory\n    ) as React.ReactElement | undefined) ?? null;\n\n  return (\n    <div {...restProps} className={classNamesString(styles[\"Epic\"], className)}>\n      <ScrollSaver\n        key={activeStory}\n        initialScroll={scroll[activeStory] || 0}\n        saveScroll={(value) => (scroll[activeStory] = value)}\n      >\n        {story}\n      </ScrollSaver>\n      {tabbar}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA8C;AAQ9C,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,MAAM,CAAC;;AAE7B;AACA;AACA;AACO,IAAMC,IAAI,GAAG,SAAPA,IAAI,CAAIC,KAAgB,EAAK;EAAA;EACxC,IAAMC,MAAM,GAAGC,KAAK,CAACC,MAAM,CAA4B,CAAC,CAAC,CAAC,CAACC,OAAO;EAClE,IAAQC,WAAW,GAAgDL,KAAK,CAAhEK,WAAW;IAAEC,MAAM,GAAwCN,KAAK,CAAnDM,MAAM;IAAEC,QAAQ,GAA8BP,KAAK,CAA3CO,QAAQ;IAAEC,SAAS,GAAmBR,KAAK,CAAjCQ,SAAS;IAAKC,SAAS,0CAAKT,KAAK;EAExE,IAAMU,KAAK,WACRR,KAAK,CAACS,QAAQ,CAACC,OAAO,CAACL,QAAQ,CAAC,CAACM,IAAI,CACpC,UAACH,KAAK;IAAA,OACJ,aAAAR,KAAK,CAACY,cAAc,CAACJ,KAAK,CAAC,IAC3B,IAAAK,kBAAQ,EAACL,KAAK,CAACV,KAAK,EAAEH,IAAI,CAAC,KAAKQ,WAAW;EAAA,EAC9C,uCAAuC,IAAI;EAE9C,oBACE,sDAASI,SAAS;IAAE,SAAS,EAAE,IAAAO,4BAAgB,cAAiBR,SAAS;EAAE,iBACzE,oBAAC,wBAAW;IACV,GAAG,EAAEH,WAAY;IACjB,aAAa,EAAEJ,MAAM,CAACI,WAAW,CAAC,IAAI,CAAE;IACxC,UAAU,EAAE,oBAACY,KAAK;MAAA,OAAMhB,MAAM,CAACI,WAAW,CAAC,GAAGY,KAAK;IAAA;EAAE,GAEpDP,KAAK,CACM,EACbJ,MAAM,CACH;AAEV,CAAC;AAAC"}
+{"version":3,"file":"Epic.js","names":["warn","warnOnce","Epic","props","scroll","React","useRef","current","activeStory","tabbar","children","className","restProps","story","Children","toArray","find","isValidElement","getNavId","classNames","value"],"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ScrollSaver } from './ScrollSaver';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {\n  tabbar?: React.ReactNode;\n  activeStory: string;\n}\n\nconst warn = warnOnce('Epic');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = (props: EpicProps) => {\n  const scroll = React.useRef<{ [key: string]: number }>({}).current;\n  const { activeStory, tabbar, children, className, ...restProps } = props;\n\n  const story =\n    (React.Children.toArray(children).find(\n      (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,\n    ) as React.ReactElement | undefined) ?? null;\n\n  return (\n    <div {...restProps} className={classNames(styles['Epic'], className)}>\n      <ScrollSaver\n        key={activeStory}\n        initialScroll={scroll[activeStory] || 0}\n        saveScroll={(value) => (scroll[activeStory] = value)}\n      >\n        {story}\n      </ScrollSaver>\n      {tabbar}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA8C;AAQ9C,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,MAAM,CAAC;;AAE7B;AACA;AACA;AACO,IAAMC,IAAI,GAAG,SAAPA,IAAI,CAAIC,KAAgB,EAAK;EAAA;EACxC,IAAMC,MAAM,GAAGC,KAAK,CAACC,MAAM,CAA4B,CAAC,CAAC,CAAC,CAACC,OAAO;EAClE,IAAQC,WAAW,GAAgDL,KAAK,CAAhEK,WAAW;IAAEC,MAAM,GAAwCN,KAAK,CAAnDM,MAAM;IAAEC,QAAQ,GAA8BP,KAAK,CAA3CO,QAAQ;IAAEC,SAAS,GAAmBR,KAAK,CAAjCQ,SAAS;IAAKC,SAAS,0CAAKT,KAAK;EAExE,IAAMU,KAAK,WACRR,KAAK,CAACS,QAAQ,CAACC,OAAO,CAACL,QAAQ,CAAC,CAACM,IAAI,CACpC,UAACH,KAAK;IAAA,OAAK,aAAAR,KAAK,CAACY,cAAc,CAACJ,KAAK,CAAC,IAAI,IAAAK,kBAAQ,EAACL,KAAK,CAACV,KAAK,EAAEH,IAAI,CAAC,KAAKQ,WAAW;EAAA,EACtF,uCAAuC,IAAI;EAE9C,oBACE,sDAASI,SAAS;IAAE,SAAS,EAAE,IAAAO,gBAAU,cAAiBR,SAAS;EAAE,iBACnE,oBAAC,wBAAW;IACV,GAAG,EAAEH,WAAY;IACjB,aAAa,EAAEJ,MAAM,CAACI,WAAW,CAAC,IAAI,CAAE;IACxC,UAAU,EAAE,oBAACY,KAAK;MAAA,OAAMhB,MAAM,CAACI,WAAW,CAAC,GAAGY,KAAK;IAAA;EAAE,GAEpDP,KAAK,CACM,EACbJ,MAAM,CACH;AAEV,CAAC;AAAC"}

package/dist/cjs/components/Epic/ScrollSaver.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface ScrollSaverProps {
     initialScroll?: number;
     saveScroll: (this: void, scroll: number) => any;
@@ -7,4 +7,4 @@ export interface ScrollSaverProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/ScrollSaver
  */
-export declare const ScrollSaver: ({ children, initialScroll, saveScroll, }: ScrollSaverProps) => JSX.Element;
+export declare const ScrollSaver: ({ children, initialScroll, saveScroll }: ScrollSaverProps) => JSX.Element;

package/dist/cjs/components/Epic/ScrollSaver.js

@@ -19,7 +19,7 @@ var ScrollSaver = function ScrollSaver(_ref) {
     getScroll = _React$useContext.getScroll,
     scrollTo = _React$useContext.scrollTo;
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (typeof initialScroll === "number") {
+    if (typeof initialScroll === 'number') {
       scrollTo(0, initialScroll);
     }
     return function () {

package/dist/cjs/components/Epic/ScrollSaver.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollSaver.js","names":["ScrollSaver","children","initialScroll","saveScroll","React","useContext","ScrollContext","getScroll","scrollTo","useIsomorphicLayoutEffect","y"],"sources":["../../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ScrollContext } from \"../AppRoot/ScrollContext\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\n\nexport interface ScrollSaverProps {\n  initialScroll?: number;\n  saveScroll: (this: void, scroll: number) => any;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScrollSaver\n */\nexport const ScrollSaver = ({\n  children,\n  initialScroll,\n  saveScroll,\n}: ScrollSaverProps) => {\n  const { getScroll, scrollTo } = React.useContext(ScrollContext);\n  useIsomorphicLayoutEffect(() => {\n    if (typeof initialScroll === \"number\") {\n      scrollTo(0, initialScroll);\n    }\n    return () => saveScroll(getScroll().y);\n  }, []);\n  return <React.Fragment>{children}</React.Fragment>;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAQA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAIA;EAAA,IAHtBC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,UAAU,QAAVA,UAAU;EAEV,wBAAgCC,KAAK,CAACC,UAAU,CAACC,4BAAa,CAAC;IAAvDC,SAAS,qBAATA,SAAS;IAAEC,QAAQ,qBAARA,QAAQ;EAC3B,IAAAC,oDAAyB,EAAC,YAAM;IAC9B,IAAI,OAAOP,aAAa,KAAK,QAAQ,EAAE;MACrCM,QAAQ,CAAC,CAAC,EAAEN,aAAa,CAAC;IAC5B;IACA,OAAO;MAAA,OAAMC,UAAU,CAACI,SAAS,EAAE,CAACG,CAAC,CAAC;IAAA;EACxC,CAAC,EAAE,EAAE,CAAC;EACN,oBAAO,oBAAC,KAAK,CAAC,QAAQ,QAAET,QAAQ,CAAkB;AACpD,CAAC;AAAC"}
+{"version":3,"file":"ScrollSaver.js","names":["ScrollSaver","children","initialScroll","saveScroll","React","useContext","ScrollContext","getScroll","scrollTo","useIsomorphicLayoutEffect","y"],"sources":["../../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\n\nexport interface ScrollSaverProps {\n  initialScroll?: number;\n  saveScroll: (this: void, scroll: number) => any;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScrollSaver\n */\nexport const ScrollSaver = ({ children, initialScroll, saveScroll }: ScrollSaverProps) => {\n  const { getScroll, scrollTo } = React.useContext(ScrollContext);\n  useIsomorphicLayoutEffect(() => {\n    if (typeof initialScroll === 'number') {\n      scrollTo(0, initialScroll);\n    }\n    return () => saveScroll(getScroll().y);\n  }, []);\n  return <React.Fragment>{children}</React.Fragment>;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAQA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAAkE;EAAA,IAA5DC,QAAQ,QAARA,QAAQ;IAAEC,aAAa,QAAbA,aAAa;IAAEC,UAAU,QAAVA,UAAU;EAC/D,wBAAgCC,KAAK,CAACC,UAAU,CAACC,4BAAa,CAAC;IAAvDC,SAAS,qBAATA,SAAS;IAAEC,QAAQ,qBAARA,QAAQ;EAC3B,IAAAC,oDAAyB,EAAC,YAAM;IAC9B,IAAI,OAAOP,aAAa,KAAK,QAAQ,EAAE;MACrCM,QAAQ,CAAC,CAAC,EAAEN,aAAa,CAAC;IAC5B;IACA,OAAO;MAAA,OAAMC,UAAU,CAACI,SAAS,EAAE,CAACG,CAAC,CAAC;IAAA;EACxC,CAAC,EAAE,EAAE,CAAC;EACN,oBAAO,oBAAC,KAAK,CAAC,QAAQ,QAAET,QAAQ,CAAkB;AACpD,CAAC;AAAC"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { VKUIButtonProps } from "../Button/Button";
-import { HasRef, HasRootRef } from "../../types";
-export interface FileProps extends Omit<VKUIButtonProps, "type">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">, HasRef<HTMLInputElement>, HasRootRef<HTMLElement> {
+import * as React from 'react';
+import { VKUIButtonProps } from '../Button/Button';
+import { HasRef, HasRootRef } from '../../types';
+export interface FileProps extends Omit<VKUIButtonProps, 'type'>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>, HasRef<HTMLInputElement>, HasRootRef<HTMLElement> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/File

package/dist/cjs/components/File/File.js

@@ -13,16 +13,16 @@ var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _Button = require("../Button/Button");
 var _usePlatform = require("../../hooks/usePlatform");
 var _VisuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["children", "align", "size", "mode", "stretched", "before", "after", "loading", "className", "style", "getRef", "getRootRef", "appearance"];
 /**
  * @see https://vkcom.github.io/VKUI/#/File
  */
 var File = function File(_ref) {
   var _ref$children = _ref.children,
-    children = _ref$children === void 0 ? "Выберите файл" : _ref$children,
+    children = _ref$children === void 0 ? 'Выберите файл' : _ref$children,
     _ref$align = _ref.align,
-    align = _ref$align === void 0 ? "left" : _ref$align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
     size = _ref.size,
     mode = _ref.mode,
     stretched = _ref.stretched,
@@ -39,7 +39,7 @@ var File = function File(_ref) {
   return /*#__PURE__*/React.createElement(_Button.Button, {
     Component: "label",
     align: align,
-    className: (0, _classNames.classNamesString)("vkuiFile", (0, _getPlatformClassName.getPlatformClassName)("vkuiFile", platform), className),
+    className: (0, _vkjs.classNames)("vkuiFile", (0, _getPlatformClassName.getPlatformClassName)("vkuiFile", platform), className),
     stretched: stretched,
     mode: mode,
     appearance: appearance,

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

@@ -1 +1 @@
-{"version":3,"file":"File.js","names":["File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","platform","usePlatform","classNamesString","getPlatformClassName","disabled"],"sources":["../../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { Button, VKUIButtonProps } from \"../Button/Button\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./File.module.css\";\n\nexport interface FileProps\n  extends Omit<VKUIButtonProps, \"type\">,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/File\n */\nexport const File = ({\n  children = \"Выберите файл\",\n  align = \"left\",\n  size,\n  mode,\n  stretched,\n  before,\n  after,\n  loading,\n  className,\n  style,\n  getRef,\n  getRootRef,\n  appearance,\n  ...restProps\n}: FileProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Button\n      Component=\"label\"\n      align={align}\n      className={classNamesString(\n        styles[\"File\"],\n        getPlatformClassName(styles[\"File\"], platform),\n        className\n      )}\n      stretched={stretched}\n      mode={mode}\n      appearance={appearance}\n      size={size}\n      before={before}\n      after={after}\n      loading={loading}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        className={styles[\"File__input\"]}\n        type=\"file\"\n        getRef={getRef}\n      />\n      {children}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AAAwD;AASxD;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAeA;EAAA,yBAdfC,QAAQ;IAARA,QAAQ,8BAAG,eAAe;IAAA,kBAC1BC,KAAK;IAALA,KAAK,2BAAG,MAAM;IACdC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,UAAU,QAAVA,UAAU;IACVC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,cAAM;IACL,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEd,KAAM;IACb,SAAS,EAAE,IAAAe,4BAAgB,cAEzB,IAAAC,0CAAoB,cAAiBH,QAAQ,CAAC,EAC9CN,SAAS,CACT;IACF,SAAS,EAAEJ,SAAU;IACrB,IAAI,EAAED,IAAK;IACX,UAAU,EAAES,UAAW;IACvB,IAAI,EAAEV,IAAK;IACX,MAAM,EAAEG,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,OAAO,EAAEC,OAAQ;IACjB,KAAK,EAAEE,KAAM;IACb,UAAU,EAAEE,UAAW;IACvB,QAAQ,EAAEE,SAAS,CAACK;EAAS,gBAE7B,oBAAC,wCAAmB,6BACdL,SAAS;IACb,SAAS,mBAAwB;IACjC,IAAI,EAAC,MAAM;IACX,MAAM,EAAEH;EAAO,GACf,EACDV,QAAQ,CACF;AAEb,CAAC;AAAC"}
+{"version":3,"file":"File.js","names":["File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","platform","usePlatform","classNames","getPlatformClassName","disabled"],"sources":["../../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { Button, VKUIButtonProps } from '../Button/Button';\nimport { HasRef, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './File.module.css';\n\nexport interface FileProps\n  extends Omit<VKUIButtonProps, 'type'>,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/File\n */\nexport const File = ({\n  children = 'Выберите файл',\n  align = 'left',\n  size,\n  mode,\n  stretched,\n  before,\n  after,\n  loading,\n  className,\n  style,\n  getRef,\n  getRootRef,\n  appearance,\n  ...restProps\n}: FileProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Button\n      Component=\"label\"\n      align={align}\n      className={classNames(\n        styles['File'],\n        getPlatformClassName(styles['File'], platform),\n        className,\n      )}\n      stretched={stretched}\n      mode={mode}\n      appearance={appearance}\n      size={size}\n      before={before}\n      after={after}\n      loading={loading}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        className={styles['File__input']}\n        type=\"file\"\n        getRef={getRef}\n      />\n      {children}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AAA6C;AAS7C;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAeA;EAAA,yBAdfC,QAAQ;IAARA,QAAQ,8BAAG,eAAe;IAAA,kBAC1BC,KAAK;IAALA,KAAK,2BAAG,MAAM;IACdC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,UAAU,QAAVA,UAAU;IACVC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,cAAM;IACL,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEd,KAAM;IACb,SAAS,EAAE,IAAAe,gBAAU,cAEnB,IAAAC,0CAAoB,cAAiBH,QAAQ,CAAC,EAC9CN,SAAS,CACT;IACF,SAAS,EAAEJ,SAAU;IACrB,IAAI,EAAED,IAAK;IACX,UAAU,EAAES,UAAW;IACvB,IAAI,EAAEV,IAAK;IACX,MAAM,EAAEG,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,OAAO,EAAEC,OAAQ;IACjB,KAAK,EAAEE,KAAM;IACb,UAAU,EAAEE,UAAW;IACvB,QAAQ,EAAEE,SAAS,CAACK;EAAS,gBAE7B,oBAAC,wCAAmB,6BACdL,SAAS;IACb,SAAS,mBAAwB;IACjC,IAAI,EAAC,MAAM;IACX,MAAM,EAAEH;EAAO,GACf,EACDV,QAAQ,CACF;AAEb,CAAC;AAAC"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
 export interface FixedLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
-    vertical?: "top" | "bottom";
+    vertical?: 'top' | 'bottom';
     /**
      * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.
      * Это часто необходимо для фиксированных кнопок в нижней части экрана.
@@ -9,7 +9,7 @@ export interface FixedLayoutProps extends React.HTMLAttributes<HTMLDivElement>,
     filled?: boolean;
 }
 export interface FixedLayoutState {
-    position: "absolute" | null;
+    position: 'absolute' | null;
     top: number;
     bottom: number;
     width: string;

package/dist/cjs/components/FixedLayout/FixedLayout.js

@@ -12,12 +12,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _platform = require("../../lib/platform");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _SplitCol = require("../SplitCol/SplitCol");
 var _TooltipContainer = require("../Tooltip/TooltipContainer");
 var _dom = require("../../lib/dom");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _usePlatform = require("../../hooks/usePlatform");
+var _useExternRef = require("../../hooks/useExternRef");
 var _excluded = ["children", "style", "vertical", "getRootRef", "getRef", "filled", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
@@ -32,6 +33,7 @@ var FixedLayout = function FixedLayout(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
+  var ref = (0, _useExternRef.useExternRef)(getRootRef, getRef); // TODO: v6 удалить getRef
   var _React$useState = React.useState(undefined),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     width = _React$useState2[0],
@@ -49,18 +51,15 @@ var FixedLayout = function FixedLayout(_ref) {
     }
   };
   React.useEffect(doResize, [colRef, platform]);
-  (0, _useGlobalEventListener.useGlobalEventListener)(window, "resize", doResize);
+  (0, _useGlobalEventListener.useGlobalEventListener)(window, 'resize', doResize);
   return /*#__PURE__*/React.createElement(_TooltipContainer.TooltipContainer, (0, _extends2.default)({}, restProps, {
     fixed: true,
-    ref: getRootRef,
-    className: (0, _classNames.classNamesString)("vkuiFixedLayout", platform === _platform.Platform.IOS && "vkuiFixedLayout--ios", filled && "vkuiFixedLayout--filled", vertical && styles["FixedLayout--vertical-".concat(vertical)], className),
+    ref: ref,
+    className: (0, _vkjs.classNames)("vkuiFixedLayout", platform === _platform.Platform.IOS && "vkuiFixedLayout--ios", filled && "vkuiFixedLayout--filled", vertical && styles["FixedLayout--vertical-".concat(vertical)], className),
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
       width: width
     })
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiFixedLayout__in",
-    ref: getRef
-  }, children));
+  }), children);
 };
 exports.FixedLayout = FixedLayout;
 var styles = {

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

@@ -1 +1 @@
-{"version":3,"file":"FixedLayout.js","names":["FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","usePlatform","React","useState","undefined","width","setWidth","useDOM","window","useContext","SplitColContext","colRef","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","classNamesString","Platform","IOS","styles"],"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Platform } from \"../../lib/platform\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { SplitColContext } from \"../SplitCol/SplitCol\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport styles from \"./FixedLayout.module.css\";\n\nexport interface FixedLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  vertical?: \"top\" | \"bottom\";\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: \"absolute\" | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  getRef,\n  filled,\n  className,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n  const doResize = () => {\n    if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform]);\n  useGlobalEventListener(window, \"resize\", doResize);\n\n  return (\n    <TooltipContainer\n      {...restProps}\n      fixed\n      ref={getRootRef}\n      className={classNamesString(\n        styles[\"FixedLayout\"],\n        platform === Platform.IOS && styles[\"FixedLayout--ios\"],\n        filled && styles[\"FixedLayout--filled\"],\n        vertical && styles[`FixedLayout--vertical-${vertical}`],\n        className\n      )}\n      style={{ ...style, width }}\n    >\n      <div className={styles[\"FixedLayout__in\"]} ref={getRef}>\n        {children}\n      </div>\n    </TooltipContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAsD;AAsBtD;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,sBAA0BC,KAAK,CAACC,QAAQ,CAAqBC,SAAS,CAAC;IAAA;IAAhEC,KAAK;IAAEC,QAAQ;EACtB,cAAmB,IAAAC,WAAM,GAAE;IAAnBC,MAAM,WAANA,MAAM;EACd,wBAAmBN,KAAK,CAACO,UAAU,CAACC,yBAAe,CAAC;IAA5CC,MAAM,qBAANA,MAAM;EACd,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,GAAS;IACrB,IAAID,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEE,OAAO,EAAE;MACnB,IAAMC,aAAa,GAAGC,gBAAgB,CAACJ,MAAM,CAACE,OAAO,CAAC;MAEtDP,QAAQ,WAEJK,MAAM,CAACE,OAAO,CAACG,WAAW,GAC1BC,UAAU,CAACH,aAAa,CAACI,WAAW,CAAC,GACrCD,UAAU,CAACH,aAAa,CAACK,YAAY,CAAC,QAEzC;IACH,CAAC,MAAM;MACLb,QAAQ,CAACF,SAAS,CAAC;IACrB;EACF,CAAC;EACDF,KAAK,CAACkB,SAAS,CAACR,QAAQ,EAAE,CAACD,MAAM,EAAEX,QAAQ,CAAC,CAAC;EAC7C,IAAAqB,8CAAsB,EAACb,MAAM,EAAE,QAAQ,EAAEI,QAAQ,CAAC;EAElD,oBACE,oBAAC,kCAAgB,6BACXb,SAAS;IACb,KAAK;IACL,GAAG,EAAEJ,UAAW;IAChB,SAAS,EAAE,IAAA2B,4BAAgB,qBAEzBtB,QAAQ,KAAKuB,kBAAQ,CAACC,GAAG,0BAA8B,EACvD3B,MAAM,6BAAiC,EACvCH,QAAQ,IAAI+B,MAAM,iCAA0B/B,QAAQ,EAAG,EACvDI,SAAS,CACT;IACF,KAAK,8DAAOL,KAAK;MAAEY,KAAK,EAALA;IAAK;EAAG,iBAE3B;IAAK,SAAS,uBAA4B;IAAC,GAAG,EAAET;EAAO,GACpDJ,QAAQ,CACL,CACW;AAEvB,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FixedLayout.js","names":["FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","usePlatform","ref","useExternRef","React","useState","undefined","width","setWidth","useDOM","window","useContext","SplitColContext","colRef","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","classNames","Platform","IOS","styles"],"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Platform } from '../../lib/platform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitCol';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { useDOM } from '../../lib/dom';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  vertical?: 'top' | 'bottom';\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: 'absolute' | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  getRef,\n  filled,\n  className,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const ref = useExternRef(getRootRef, getRef); // TODO: v6 удалить getRef\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n  const doResize = () => {\n    if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`,\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform]);\n  useGlobalEventListener(window, 'resize', doResize);\n\n  return (\n    <TooltipContainer\n      {...restProps}\n      fixed\n      ref={ref}\n      className={classNames(\n        styles['FixedLayout'],\n        platform === Platform.IOS && styles['FixedLayout--ios'],\n        filled && styles['FixedLayout--filled'],\n        vertical && styles[`FixedLayout--vertical-${vertical}`],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </TooltipContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAwD;AAsBxD;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAMC,GAAG,GAAG,IAAAC,0BAAY,EAACR,UAAU,EAAEC,MAAM,CAAC,CAAC,CAAC;EAC9C,sBAA0BQ,KAAK,CAACC,QAAQ,CAAqBC,SAAS,CAAC;IAAA;IAAhEC,KAAK;IAAEC,QAAQ;EACtB,cAAmB,IAAAC,WAAM,GAAE;IAAnBC,MAAM,WAANA,MAAM;EACd,wBAAmBN,KAAK,CAACO,UAAU,CAACC,yBAAe,CAAC;IAA5CC,MAAM,qBAANA,MAAM;EACd,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,GAAS;IACrB,IAAID,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEE,OAAO,EAAE;MACnB,IAAMC,aAAa,GAAGC,gBAAgB,CAACJ,MAAM,CAACE,OAAO,CAAC;MAEtDP,QAAQ,WAEJK,MAAM,CAACE,OAAO,CAACG,WAAW,GAC1BC,UAAU,CAACH,aAAa,CAACI,WAAW,CAAC,GACrCD,UAAU,CAACH,aAAa,CAACK,YAAY,CAAC,QAEzC;IACH,CAAC,MAAM;MACLb,QAAQ,CAACF,SAAS,CAAC;IACrB;EACF,CAAC;EACDF,KAAK,CAACkB,SAAS,CAACR,QAAQ,EAAE,CAACD,MAAM,EAAEb,QAAQ,CAAC,CAAC;EAC7C,IAAAuB,8CAAsB,EAACb,MAAM,EAAE,QAAQ,EAAEI,QAAQ,CAAC;EAElD,oBACE,oBAAC,kCAAgB,6BACXf,SAAS;IACb,KAAK;IACL,GAAG,EAAEG,GAAI;IACT,SAAS,EAAE,IAAAsB,gBAAU,qBAEnBxB,QAAQ,KAAKyB,kBAAQ,CAACC,GAAG,0BAA8B,EACvD7B,MAAM,6BAAiC,EACvCH,QAAQ,IAAIiC,MAAM,iCAA0BjC,QAAQ,EAAG,EACvDI,SAAS,CACT;IACF,KAAK,8DAAOL,KAAK;MAAEc,KAAK,EAALA;IAAK;EAAG,IAE1Bf,QAAQ,CACQ;AAEvB,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasComponent, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasComponent, HasRootRef } from '../../types';
 export interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
     restoreFocus?: boolean;
     timeout?: number;

package/dist/cjs/components/FocusTrap/FocusTrap.js

@@ -24,7 +24,7 @@ var FOCUSABLE_ELEMENTS = _accessibility.FOCUSABLE_ELEMENTS_LIST.join();
  */
 var FocusTrap = function FocusTrap(_ref) {
   var _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? "div" : _ref$Component,
+    Component = _ref$Component === void 0 ? 'div' : _ref$Component,
     onClose = _ref.onClose,
     _ref$restoreFocus = _ref.restoreFocus,
     restoreFocus = _ref$restoreFocus === void 0 ? true : _ref$restoreFocus,
@@ -73,7 +73,7 @@ var FocusTrap = function FocusTrap(_ref) {
       var _getComputedStyle = window.getComputedStyle(focusableEl),
         display = _getComputedStyle.display,
         visibility = _getComputedStyle.visibility;
-      if (display !== "none" && visibility !== "hidden") {
+      if (display !== 'none' && visibility !== 'hidden') {
         nodes.push(focusableEl);
       }
     });
@@ -121,7 +121,7 @@ var FocusTrap = function FocusTrap(_ref) {
     }
     return true;
   };
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, "keydown", onDocumentKeydown, {
+  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'keydown', onDocumentKeydown, {
     capture: true
   });
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({

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

@@ -1 +1 @@
-{"version":3,"file":"FocusTrap.js","names":["FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","useDOM","document","window","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","AppRootContext","keyboardInput","focusOnTrapMount","useTimeout","current","contains","activeElement","length","focus","useIsomorphicLayoutEffect","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","useGlobalEventListener","capture"],"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n  FOCUSABLE_ELEMENTS_LIST,\n  Keys,\n  pressedKey,\n} from \"../../lib/accessibility\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { AppRootContext } from \"../AppRoot/AppRootContext\";\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n  Component = \"div\",\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<\n    HTMLElement[] | null\n  >(null);\n  const [restoreFocusTo, setRestoreFocusTo] =\n    React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n        if (display !== \"none\" && visibility !== \"hidden\") {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      }\n    );\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode =\n        targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, \"keydown\", onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FocusTrap.js","names":["FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","useDOM","document","window","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","AppRootContext","keyboardInput","focusOnTrapMount","useTimeout","current","contains","activeElement","length","focus","useIsomorphicLayoutEffect","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","useGlobalEventListener","capture"],"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n  Component = 'div',\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] | null>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      },\n    );\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode = targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type FocusVisibleMode = "inside" | "outside";
+export declare type FocusVisibleMode = 'inside' | 'outside';
 export interface FocusVisibleProps {
     mode: FocusVisibleMode;
 }

package/dist/cjs/components/FocusVisible/FocusVisible.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FocusVisible = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
  */
 var FocusVisible = function FocusVisible(_ref) {
   var mode = _ref.mode;
   return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
-    className: (0, _classNames.classNamesString)("vkuiFocusVisible", styles["FocusVisible--mode-".concat(mode)])
+    "aria-hidden": true,
+    className: (0, _vkjs.classNames)("vkuiFocusVisible", styles["FocusVisible--mode-".concat(mode)])
   });
 };
 exports.FocusVisible = FocusVisible;

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

@@ -1 +1 @@
-{"version":3,"file":"FocusVisible.js","names":["FocusVisible","mode","classNamesString","styles"],"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./FocusVisible.module.css\";\n\nexport type FocusVisibleMode = \"inside\" | \"outside\";\n\nexport interface FocusVisibleProps {\n  mode: FocusVisibleMode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ mode }: FocusVisibleProps) => (\n  <span\n    aria-hidden=\"true\"\n    className={classNamesString(\n      styles[\"FocusVisible\"],\n      styles[`FocusVisible--mode-${mode}`]\n    )}\n  />\n);\n"],"mappings":";;;;;;;AAAA;AACA;AASA;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAY;EAAA,IAAMC,IAAI,QAAJA,IAAI;EAAA,oBACjC;IACE,eAAY,MAAM;IAClB,SAAS,EAAE,IAAAC,4BAAgB,sBAEzBC,MAAM,8BAAuBF,IAAI,EAAG;EACpC,EACF;AAAA,CACH;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FocusVisible.js","names":["FocusVisible","mode","classNames","styles"],"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './FocusVisible.module.css';\n\nexport type FocusVisibleMode = 'inside' | 'outside';\n\nexport interface FocusVisibleProps {\n  mode: FocusVisibleMode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ mode }: FocusVisibleProps) => (\n  <span\n    aria-hidden\n    className={classNames(styles['FocusVisible'], styles[`FocusVisible--mode-${mode}`])}\n  />\n);\n"],"mappings":";;;;;;;AAAA;AACA;AASA;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAY;EAAA,IAAMC,IAAI,QAAJA,IAAI;EAAA,oBACjC;IACE,mBAAW;IACX,SAAS,EAAE,IAAAC,gBAAU,sBAAyBC,MAAM,8BAAuBF,IAAI,EAAG;EAAE,EACpF;AAAA,CACH;AAAC;AAAA;EAAA;EAAA;AAAA"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasComponent } from "../../types";
+import * as React from 'react';
+import { HasComponent } from '../../types';
 export declare type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer

package/dist/cjs/components/Footer/Footer.js

@@ -9,7 +9,7 @@ exports.Footer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _excluded = ["children", "className"];
 /**
@@ -22,7 +22,7 @@ var Footer = function Footer(_ref) {
   return /*#__PURE__*/React.createElement(_Footnote.Footnote, (0, _extends2.default)({
     Component: "footer"
   }, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiFooter", className)
+    className: (0, _vkjs.classNames)("vkuiFooter", className)
   }), children);
 };
 exports.Footer = Footer;

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

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":["Footer","children","className","restProps","classNamesString"],"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasComponent } from \"../../types\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport styles from \"./Footer.module.css\";\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote\n      Component=\"footer\"\n      {...restProps}\n      className={classNamesString(styles[\"Footer\"], className)}\n    >\n      {children}\n    </Footnote>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AAA2D;AAK3D;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAA2D;EAAA,IAArDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACxD,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAC;EAAQ,GACdA,SAAS;IACb,SAAS,EAAE,IAAAC,4BAAgB,gBAAmBF,SAAS;EAAE,IAExDD,QAAQ,CACA;AAEf,CAAC;AAAC"}
+{"version":3,"file":"Footer.js","names":["Footer","children","className","restProps","classNames"],"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n      {children}\n    </Footnote>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AAA2D;AAK3D;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAA2D;EAAA,IAArDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACxD,oBACE,oBAAC,kBAAQ;IAAC,SAAS,EAAC;EAAQ,GAAKA,SAAS;IAAE,SAAS,EAAE,IAAAC,gBAAU,gBAAmBF,SAAS;EAAE,IAC5FD,QAAQ,CACA;AAEf,CAAC;AAAC"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasComponent, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasComponent, HasRootRef } from '../../types';
 export interface FormFieldProps {
-    status?: "default" | "error" | "valid";
+    status?: 'default' | 'error' | 'valid';
     /**
      * Добавляет иконку слева.
      *
@@ -20,7 +20,7 @@ export interface FormFieldProps {
      * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
      */
     after?: React.ReactNode;
-    mode?: "default" | "plain";
+    mode?: 'default' | 'plain';
 }
 interface FormFieldOwnProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, FormFieldProps {
     disabled?: boolean;

package/dist/cjs/components/FormField/FormField.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _excluded = ["Component", "status", "children", "getRootRef", "before", "after", "disabled", "mode", "className"];
@@ -19,16 +19,16 @@ var _excluded = ["Component", "status", "children", "getRootRef", "before", "aft
  */
 var FormField = function FormField(_ref) {
   var _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? "div" : _ref$Component,
+    Component = _ref$Component === void 0 ? 'div' : _ref$Component,
     _ref$status = _ref.status,
-    status = _ref$status === void 0 ? "default" : _ref$status,
+    status = _ref$status === void 0 ? 'default' : _ref$status,
     children = _ref.children,
     getRootRef = _ref.getRootRef,
     before = _ref.before,
     after = _ref.after,
     disabled = _ref.disabled,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "default" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
@@ -51,7 +51,7 @@ var FormField = function FormField(_ref) {
     ref: getRootRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    className: (0, _classNames.classNamesString)("vkuiFormField", styles["FormField--mode-".concat(mode)], styles["FormField--status-".concat(status)], (0, _getSizeYClassName.getSizeYClassName)("vkuiFormField", sizeY), disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", className)
+    className: (0, _vkjs.classNames)("vkuiFormField", styles["FormField--mode-".concat(mode)], styles["FormField--status-".concat(status)], (0, _getSizeYClassName.getSizeYClassName)("vkuiFormField", sizeY), disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", className)
   }), before && /*#__PURE__*/React.createElement("div", {
     role: "presentation",
     className: "vkuiFormField__before"

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","names":["FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","useAdaptivity","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","classNamesString","styles","getSizeYClassName"],"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./FormField.module.css\";\n\nexport interface FormFieldProps {\n  status?: \"default\" | \"error\" | \"valid\";\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: \"default\" | \"plain\";\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = \"div\",\n  status = \"default\",\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = \"default\",\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const { sizeY } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      role=\"presentation\"\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNamesString(\n        styles[\"FormField\"],\n        styles[`FormField--mode-${mode}`],\n        styles[`FormField--status-${status}`],\n        getSizeYClassName(styles[\"FormField\"], sizeY),\n        disabled && styles[\"FormField--disabled\"],\n        !disabled && hover && styles[\"FormField--hover\"],\n        className\n      )}\n    >\n      {before && (\n        <div role=\"presentation\" className={styles[\"FormField__before\"]}>\n          {before}\n        </div>\n      )}\n      {children}\n      {after && (\n        <div role=\"presentation\" className={styles[\"FormField__after\"]}>\n          {after}\n        </div>\n      )}\n      <div role=\"presentation\" className={styles[\"FormField__border\"]} />\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAAoE;AAkCpE;AACA;AACA;AACO,IAAMA,SAAS,GAAG,SAAZA,SAAS,OAWG;EAAA,0BAVvBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAClBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,sBAA0BC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAxCC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC;EAED,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIF,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC;EAED,oBACE,oBAAC,SAAS;IACR,IAAI,EAAC;EAAc,GACfN,SAAS;IACb,GAAG,EAAEN,UAAW;IAChB,YAAY,EAAEa,gBAAiB;IAC/B,YAAY,EAAEG,gBAAiB;IAC/B,SAAS,EAAE,IAAAC,4BAAgB,mBAEzBC,MAAM,2BAAoBd,IAAI,EAAG,EACjCc,MAAM,6BAAsBpB,MAAM,EAAG,EACrC,IAAAqB,oCAAiB,mBAAsBX,KAAK,CAAC,EAC7CL,QAAQ,6BAAiC,EACzC,CAACA,QAAQ,IAAIQ,KAAK,0BAA8B,EAChDN,SAAS;EACT,IAEDJ,MAAM,iBACL;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA8B,GAC7DA,MAAM,CAEV,EACAF,QAAQ,EACRG,KAAK,iBACJ;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA6B,GAC5DA,KAAK,CAET,eACD;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA8B,EAAG,CACzD;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FormField.js","names":["FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","useAdaptivity","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","classNames","styles","getSizeYClassName"],"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './FormField.module.css';\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'div',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const { sizeY } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      role=\"presentation\"\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        styles[`FormField--mode-${mode}`],\n        styles[`FormField--status-${status}`],\n        getSizeYClassName(styles['FormField'], sizeY),\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && (\n        <div role=\"presentation\" className={styles['FormField__before']}>\n          {before}\n        </div>\n      )}\n      {children}\n      {after && (\n        <div role=\"presentation\" className={styles['FormField__after']}>\n          {after}\n        </div>\n      )}\n      <div role=\"presentation\" className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAAoE;AAkCpE;AACA;AACA;AACO,IAAMA,SAAS,GAAG,SAAZA,SAAS,OAWG;EAAA,0BAVvBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAClBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,sBAA0BC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAxCC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC;EAED,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIF,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC;EAED,oBACE,oBAAC,SAAS;IACR,IAAI,EAAC;EAAc,GACfN,SAAS;IACb,GAAG,EAAEN,UAAW;IAChB,YAAY,EAAEa,gBAAiB;IAC/B,YAAY,EAAEG,gBAAiB;IAC/B,SAAS,EAAE,IAAAC,gBAAU,mBAEnBC,MAAM,2BAAoBd,IAAI,EAAG,EACjCc,MAAM,6BAAsBpB,MAAM,EAAG,EACrC,IAAAqB,oCAAiB,mBAAsBX,KAAK,CAAC,EAC7CL,QAAQ,6BAAiC,EACzC,CAACA,QAAQ,IAAIQ,KAAK,0BAA8B,EAChDN,SAAS;EACT,IAEDJ,MAAM,iBACL;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA8B,GAC7DA,MAAM,CAEV,EACAF,QAAQ,EACRG,KAAK,iBACJ;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA6B,GAC5DA,KAAK,CAET,eACD;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA8B,EAAG,CACzD;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { HasComponent, HasRootRef } from "../../types";
-import { RemovableProps } from "../Removable/Removable";
+import * as React from 'react';
+import { HasComponent, HasRootRef } from '../../types';
+import { RemovableProps } from '../Removable/Removable';
 export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, RemovableProps {
     top?: React.ReactNode;
     bottom?: React.ReactNode;
-    status?: "default" | "error" | "valid";
+    status?: 'default' | 'error' | 'valid';
     /**
      * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
      */

package/dist/cjs/components/FormItem/FormItem.js

@@ -9,9 +9,8 @@ exports.FormItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _useExternRef = require("../../hooks/useExternRef");
-var _utils = require("../../lib/utils");
 var _Subhead = require("../Typography/Subhead/Subhead");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
@@ -26,28 +25,28 @@ var FormItem = function FormItem(_ref) {
     top = _ref.top,
     bottom = _ref.bottom,
     _ref$status = _ref.status,
-    status = _ref$status === void 0 ? "default" : _ref$status,
+    status = _ref$status === void 0 ? 'default' : _ref$status,
     _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? "div" : _ref$Component,
+    Component = _ref$Component === void 0 ? 'div' : _ref$Component,
     removable = _ref.removable,
     _ref$onRemove = _ref.onRemove,
-    _onRemove = _ref$onRemove === void 0 ? _utils.noop : _ref$onRemove,
+    _onRemove = _ref$onRemove === void 0 ? _vkjs.noop : _ref$onRemove,
     _ref$removePlaceholde = _ref.removePlaceholder,
-    removePlaceholder = _ref$removePlaceholde === void 0 ? "Удалить" : _ref$removePlaceholde,
+    removePlaceholder = _ref$removePlaceholde === void 0 ? 'Удалить' : _ref$removePlaceholde,
     getRootRef = _ref.getRootRef,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var rootEl = (0, _useExternRef.useExternRef)(getRootRef);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
     sizeY = _useAdaptivity.sizeY;
-  var wrappedChildren = /*#__PURE__*/React.createElement(React.Fragment, null, (0, _utils.hasReactNode)(top) && /*#__PURE__*/React.createElement(_Subhead.Subhead, {
+  var wrappedChildren = /*#__PURE__*/React.createElement(React.Fragment, null, (0, _vkjs.hasReactNode)(top) && /*#__PURE__*/React.createElement(_Subhead.Subhead, {
     className: "vkuiFormItem__top"
-  }, top), children, (0, _utils.hasReactNode)(bottom) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
+  }, top), children, (0, _vkjs.hasReactNode)(bottom) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiFormItem__bottom"
   }, bottom));
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, restProps, {
     ref: rootEl,
-    className: (0, _classNames.classNamesString)("vkuiFormItem", status !== "default" && styles["FormItem--status-".concat(status)], (0, _getSizeYClassName.getSizeYClassName)("vkuiFormItem", sizeY), (0, _utils.hasReactNode)(top) && "vkuiFormItem--withTop", removable && "vkuiFormItem--removable", className)
+    className: (0, _vkjs.classNames)("vkuiFormItem", status !== 'default' && styles["FormItem--status-".concat(status)], (0, _getSizeYClassName.getSizeYClassName)("vkuiFormItem", sizeY), (0, _vkjs.hasReactNode)(top) && "vkuiFormItem--withTop", removable && "vkuiFormItem--removable", className)
   }), removable ? /*#__PURE__*/React.createElement(_Removable.Removable, {
     align: "start",
     onRemove: function onRemove(e) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormItem.js","names":["FormItem","children","top","bottom","status","Component","removable","onRemove","noop","removePlaceholder","getRootRef","className","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","hasReactNode","classNamesString","styles","getSizeYClassName","e","current"],"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { hasReactNode, noop } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { Removable, RemovableProps } from \"../Removable/Removable\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./FormItem.module.css\";\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: \"default\" | \"error\" | \"valid\";\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   */\n  removable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = \"default\",\n  Component = \"div\",\n  removable,\n  onRemove = noop,\n  removePlaceholder = \"Удалить\",\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead className={styles[\"FormItem__top\"]}>{top}</Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote className={styles[\"FormItem__bottom\"]}>{bottom}</Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNamesString(\n        styles[\"FormItem\"],\n        status !== \"default\" && styles[`FormItem--status-${status}`],\n        getSizeYClassName(styles[\"FormItem\"], sizeY),\n        hasReactNode(top) && styles[\"FormItem--withTop\"],\n        removable && styles[\"FormItem--removable\"],\n        className\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n        >\n          <div className={styles[\"FormItem__removable\"]}>{wrappedChildren}</div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AAiBpE;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAYA;EAAA,IAXnBC,QAAQ,QAARA,QAAQ;IACRC,GAAG,QAAHA,GAAG;IACHC,MAAM,QAANA,MAAM;IAAA,mBACNC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAAA,sBAClBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IACjBC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,SAAQ,8BAAGC,WAAI;IAAA,6BACfC,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAC7BC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,MAAM,GAAG,IAAAC,0BAAY,EAACJ,UAAU,CAAC;EACvC,qBAAkB,IAAAK,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,IAAMC,eAAe,gBACnB,oBAAC,KAAK,CAAC,QAAQ,QACZ,IAAAC,mBAAY,EAAChB,GAAG,CAAC,iBAChB,oBAAC,gBAAO;IAAC,SAAS;EAA0B,GAAEA,GAAG,CAClD,EACAD,QAAQ,EACR,IAAAiB,mBAAY,EAACf,MAAM,CAAC,iBACnB,oBAAC,kBAAQ;IAAC,SAAS;EAA6B,GAAEA,MAAM,CACzD,CAEJ;EAED,oBACE,oBAAC,SAAS,6BACJS,SAAS;IACb,GAAG,EAAEC,MAAO;IACZ,SAAS,EAAE,IAAAM,4BAAgB,kBAEzBf,MAAM,KAAK,SAAS,IAAIgB,MAAM,4BAAqBhB,MAAM,EAAG,EAC5D,IAAAiB,oCAAiB,kBAAqBL,KAAK,CAAC,EAC5C,IAAAE,mBAAY,EAAChB,GAAG,CAAC,2BAA+B,EAChDI,SAAS,6BAAiC,EAC1CK,SAAS;EACT,IAEDL,SAAS,gBACR,oBAAC,oBAAS;IACR,KAAK,EAAC,OAAO;IACb,QAAQ,EAAE,kBAACgB,CAAC,EAAK;MACf,IAAIT,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEU,OAAO,EAAE;QACnBhB,SAAQ,CAACe,CAAC,EAAET,MAAM,CAACU,OAAO,CAAC;MAC7B;IACF,CAAE;IACF,iBAAiB,EAAEd;EAAkB,gBAErC;IAAK,SAAS;EAAgC,GAAEQ,eAAe,CAAO,CAC5D,GAEZA,eACD,CACS;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FormItem.js","names":["FormItem","children","top","bottom","status","Component","removable","onRemove","noop","removePlaceholder","getRootRef","className","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","hasReactNode","classNames","styles","getSizeYClassName","e","current"],"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './FormItem.module.css';\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   */\n  removable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        status !== 'default' && styles[`FormItem--status-${status}`],\n        getSizeYClassName(styles['FormItem'], sizeY),\n        hasReactNode(top) && styles['FormItem--withTop'],\n        removable && styles['FormItem--removable'],\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n        >\n          <div className={styles['FormItem__removable']}>{wrappedChildren}</div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AAiBpE;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAYA;EAAA,IAXnBC,QAAQ,QAARA,QAAQ;IACRC,GAAG,QAAHA,GAAG;IACHC,MAAM,QAANA,MAAM;IAAA,mBACNC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAAA,sBAClBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IACjBC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,SAAQ,8BAAGC,UAAI;IAAA,6BACfC,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAC7BC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,MAAM,GAAG,IAAAC,0BAAY,EAACJ,UAAU,CAAC;EACvC,qBAAkB,IAAAK,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,IAAMC,eAAe,gBACnB,oBAAC,KAAK,CAAC,QAAQ,QACZ,IAAAC,kBAAY,EAAChB,GAAG,CAAC,iBAAI,oBAAC,gBAAO;IAAC,SAAS;EAA0B,GAAEA,GAAG,CAAW,EACjFD,QAAQ,EACR,IAAAiB,kBAAY,EAACf,MAAM,CAAC,iBAAI,oBAAC,kBAAQ;IAAC,SAAS;EAA6B,GAAEA,MAAM,CAAY,CAEhG;EAED,oBACE,oBAAC,SAAS,6BACJS,SAAS;IACb,GAAG,EAAEC,MAAO;IACZ,SAAS,EAAE,IAAAM,gBAAU,kBAEnBf,MAAM,KAAK,SAAS,IAAIgB,MAAM,4BAAqBhB,MAAM,EAAG,EAC5D,IAAAiB,oCAAiB,kBAAqBL,KAAK,CAAC,EAC5C,IAAAE,kBAAY,EAAChB,GAAG,CAAC,2BAA+B,EAChDI,SAAS,6BAAiC,EAC1CK,SAAS;EACT,IAEDL,SAAS,gBACR,oBAAC,oBAAS;IACR,KAAK,EAAC,OAAO;IACb,QAAQ,EAAE,kBAACgB,CAAC,EAAK;MACf,IAAIT,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEU,OAAO,EAAE;QACnBhB,SAAQ,CAACe,CAAC,EAAET,MAAM,CAACU,OAAO,CAAC;MAC7B;IACF,CAAE;IACF,iBAAiB,EAAEd;EAAkB,gBAErC;IAAK,SAAS;EAAgC,GAAEQ,eAAe,CAAO,CAC5D,GAEZA,eACD,CACS;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasComponent, HasRef } from "../../types";
+import * as React from 'react';
+import { HasComponent, HasRef } from '../../types';
 export declare type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> & HasRef<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayout