@vkontakte/vkui 5.0.3 → 5.1.0

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {
     tabbar?: React.ReactNode;
     activeStory: string;

package/dist/components/Epic/Epic.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["activeStory", "tabbar", "children", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { ScrollSaver } from "./ScrollSaver";
-import { getNavId } from "../../lib/getNavId";
-import { warnOnce } from "../../lib/warnOnce";
-var warn = warnOnce("Epic");
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { ScrollSaver } from './ScrollSaver';
+import { getNavId } from '../../lib/getNavId';
+import { warnOnce } from '../../lib/warnOnce';
+var warn = warnOnce('Epic');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Epic
@@ -23,7 +23,7 @@ export var Epic = function Epic(props) {
     return /*#__PURE__*/React.isValidElement(story) && getNavId(story.props, warn) === activeStory;
   })) !== null && _ref !== void 0 ? _ref : null;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiEpic", className)
+    className: classNames("vkuiEpic", className)
   }), /*#__PURE__*/React.createElement(ScrollSaver, {
     key: activeStory,
     initialScroll: scroll[activeStory] || 0,

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

@@ -1 +1 @@
-{"version":3,"file":"Epic.js","names":["React","classNamesString","ScrollSaver","getNavId","warnOnce","warn","Epic","props","scroll","useRef","current","activeStory","tabbar","children","className","restProps","story","Children","toArray","find","isValidElement","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,QAAQ,oBAAoB;AAQ7C,IAAMC,IAAI,GAAGD,QAAQ,CAAC,MAAM,CAAC;;AAE7B;AACA;AACA;AACA,OAAO,IAAME,IAAI,GAAG,SAAPA,IAAI,CAAIC,KAAgB,EAAK;EAAA;EACxC,IAAMC,MAAM,GAAGR,KAAK,CAACS,MAAM,CAA4B,CAAC,CAAC,CAAC,CAACC,OAAO;EAClE,IAAQC,WAAW,GAAgDJ,KAAK,CAAhEI,WAAW;IAAEC,MAAM,GAAwCL,KAAK,CAAnDK,MAAM;IAAEC,QAAQ,GAA8BN,KAAK,CAA3CM,QAAQ;IAAEC,SAAS,GAAmBP,KAAK,CAAjCO,SAAS;IAAKC,SAAS,4BAAKR,KAAK;EAExE,IAAMS,KAAK,WACRhB,KAAK,CAACiB,QAAQ,CAACC,OAAO,CAACL,QAAQ,CAAC,CAACM,IAAI,CACpC,UAACH,KAAK;IAAA,OACJ,aAAAhB,KAAK,CAACoB,cAAc,CAACJ,KAAK,CAAC,IAC3Bb,QAAQ,CAACa,KAAK,CAACT,KAAK,EAAEF,IAAI,CAAC,KAAKM,WAAW;EAAA,EAC9C,uCAAuC,IAAI;EAE9C,oBACE,wCAASI,SAAS;IAAE,SAAS,EAAEd,gBAAgB,aAAiBa,SAAS;EAAE,iBACzE,oBAAC,WAAW;IACV,GAAG,EAAEH,WAAY;IACjB,aAAa,EAAEH,MAAM,CAACG,WAAW,CAAC,IAAI,CAAE;IACxC,UAAU,EAAE,oBAACU,KAAK;MAAA,OAAMb,MAAM,CAACG,WAAW,CAAC,GAAGU,KAAK;IAAA;EAAE,GAEpDL,KAAK,CACM,EACbJ,MAAM,CACH;AAEV,CAAC"}
+{"version":3,"file":"Epic.js","names":["React","classNames","ScrollSaver","getNavId","warnOnce","warn","Epic","props","scroll","useRef","current","activeStory","tabbar","children","className","restProps","story","Children","toArray","find","isValidElement","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,QAAQ,oBAAoB;AAQ7C,IAAMC,IAAI,GAAGD,QAAQ,CAAC,MAAM,CAAC;;AAE7B;AACA;AACA;AACA,OAAO,IAAME,IAAI,GAAG,SAAPA,IAAI,CAAIC,KAAgB,EAAK;EAAA;EACxC,IAAMC,MAAM,GAAGR,KAAK,CAACS,MAAM,CAA4B,CAAC,CAAC,CAAC,CAACC,OAAO;EAClE,IAAQC,WAAW,GAAgDJ,KAAK,CAAhEI,WAAW;IAAEC,MAAM,GAAwCL,KAAK,CAAnDK,MAAM;IAAEC,QAAQ,GAA8BN,KAAK,CAA3CM,QAAQ;IAAEC,SAAS,GAAmBP,KAAK,CAAjCO,SAAS;IAAKC,SAAS,4BAAKR,KAAK;EAExE,IAAMS,KAAK,WACRhB,KAAK,CAACiB,QAAQ,CAACC,OAAO,CAACL,QAAQ,CAAC,CAACM,IAAI,CACpC,UAACH,KAAK;IAAA,OAAK,aAAAhB,KAAK,CAACoB,cAAc,CAACJ,KAAK,CAAC,IAAIb,QAAQ,CAACa,KAAK,CAACT,KAAK,EAAEF,IAAI,CAAC,KAAKM,WAAW;EAAA,EACtF,uCAAuC,IAAI;EAE9C,oBACE,wCAASI,SAAS;IAAE,SAAS,EAAEd,UAAU,aAAiBa,SAAS;EAAE,iBACnE,oBAAC,WAAW;IACV,GAAG,EAAEH,WAAY;IACjB,aAAa,EAAEH,MAAM,CAACG,WAAW,CAAC,IAAI,CAAE;IACxC,UAAU,EAAE,oBAACU,KAAK;MAAA,OAAMb,MAAM,CAACG,WAAW,CAAC,GAAGU,KAAK;IAAA;EAAE,GAEpDL,KAAK,CACM,EACbJ,MAAM,CACH;AAEV,CAAC"}

package/dist/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/components/Epic/ScrollSaver.js

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { ScrollContext } from "../AppRoot/ScrollContext";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import * as React from 'react';
+import { ScrollContext } from '../AppRoot/ScrollContext';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 /**
  * @see https://vkcom.github.io/VKUI/#/ScrollSaver
  */
@@ -12,7 +12,7 @@ export var ScrollSaver = function ScrollSaver(_ref) {
     getScroll = _React$useContext.getScroll,
     scrollTo = _React$useContext.scrollTo;
   useIsomorphicLayoutEffect(function () {
-    if (typeof initialScroll === "number") {
+    if (typeof initialScroll === 'number') {
       scrollTo(0, initialScroll);
     }
     return function () {

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollSaver.js","names":["React","ScrollContext","useIsomorphicLayoutEffect","ScrollSaver","children","initialScroll","saveScroll","useContext","getScroll","scrollTo","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,yBAAyB,QAAQ,qCAAqC;AAQ/E;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAIA;EAAA,IAHtBC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,UAAU,QAAVA,UAAU;EAEV,wBAAgCN,KAAK,CAACO,UAAU,CAACN,aAAa,CAAC;IAAvDO,SAAS,qBAATA,SAAS;IAAEC,QAAQ,qBAARA,QAAQ;EAC3BP,yBAAyB,CAAC,YAAM;IAC9B,IAAI,OAAOG,aAAa,KAAK,QAAQ,EAAE;MACrCI,QAAQ,CAAC,CAAC,EAAEJ,aAAa,CAAC;IAC5B;IACA,OAAO;MAAA,OAAMC,UAAU,CAACE,SAAS,EAAE,CAACE,CAAC,CAAC;IAAA;EACxC,CAAC,EAAE,EAAE,CAAC;EACN,oBAAO,oBAAC,KAAK,CAAC,QAAQ,QAAEN,QAAQ,CAAkB;AACpD,CAAC"}
+{"version":3,"file":"ScrollSaver.js","names":["React","ScrollContext","useIsomorphicLayoutEffect","ScrollSaver","children","initialScroll","saveScroll","useContext","getScroll","scrollTo","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,yBAAyB,QAAQ,qCAAqC;AAQ/E;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAAkE;EAAA,IAA5DC,QAAQ,QAARA,QAAQ;IAAEC,aAAa,QAAbA,aAAa;IAAEC,UAAU,QAAVA,UAAU;EAC/D,wBAAgCN,KAAK,CAACO,UAAU,CAACN,aAAa,CAAC;IAAvDO,SAAS,qBAATA,SAAS;IAAEC,QAAQ,qBAARA,QAAQ;EAC3BP,yBAAyB,CAAC,YAAM;IAC9B,IAAI,OAAOG,aAAa,KAAK,QAAQ,EAAE;MACrCI,QAAQ,CAAC,CAAC,EAAEJ,aAAa,CAAC;IAC5B;IACA,OAAO;MAAA,OAAMC,UAAU,CAACE,SAAS,EAAE,CAACE,CAAC,CAAC;IAAA;EACxC,CAAC,EAAE,EAAE,CAAC;EACN,oBAAO,oBAAC,KAAK,CAAC,QAAQ,QAAEN,QAAQ,CAAkB;AACpD,CAAC"}

package/dist/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/components/File/File.js

@@ -1,20 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "align", "size", "mode", "stretched", "before", "after", "loading", "className", "style", "getRef", "getRootRef", "appearance"];
-import * as React from "react";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-import { Button } from "../Button/Button";
-import { usePlatform } from "../../hooks/usePlatform";
-import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { Button } from '../Button/Button';
+import { usePlatform } from '../../hooks/usePlatform';
+import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { classNames } from '@vkontakte/vkjs';
 /**
  * @see https://vkcom.github.io/VKUI/#/File
  */
 export 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,
@@ -31,7 +31,7 @@ export var File = function File(_ref) {
   return /*#__PURE__*/React.createElement(Button, {
     Component: "label",
     align: align,
-    className: classNamesString("vkuiFile", getPlatformClassName("vkuiFile", platform), className),
+    className: classNames("vkuiFile", getPlatformClassName("vkuiFile", platform), className),
     stretched: stretched,
     mode: mode,
     appearance: appearance,

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

@@ -1 +1 @@
-{"version":3,"file":"File.js","names":["React","getPlatformClassName","Button","usePlatform","VisuallyHiddenInput","classNamesString","File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","platform","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,MAAM,QAAyB,kBAAkB;AAE1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,mBAAmB,QAAQ,4CAA4C;AAChF,SAASC,gBAAgB,QAAQ,sBAAsB;AASvD;AACA;AACA;AACA,OAAO,IAAMC,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,GAAGlB,WAAW,EAAE;EAE9B,oBACE,oBAAC,MAAM;IACL,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEK,KAAM;IACb,SAAS,EAAEH,gBAAgB,aAEzBJ,oBAAoB,aAAiBoB,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,CAACE;EAAS,gBAE7B,oBAAC,mBAAmB,eACdF,SAAS;IACb,SAAS,mBAAwB;IACjC,IAAI,EAAC,MAAM;IACX,MAAM,EAAEH;EAAO,GACf,EACDV,QAAQ,CACF;AAEb,CAAC"}
+{"version":3,"file":"File.js","names":["React","getPlatformClassName","Button","usePlatform","VisuallyHiddenInput","classNames","File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","platform","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,MAAM,QAAyB,kBAAkB;AAE1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,mBAAmB,QAAQ,4CAA4C;AAChF,SAASC,UAAU,QAAQ,iBAAiB;AAS5C;AACA;AACA;AACA,OAAO,IAAMC,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,GAAGlB,WAAW,EAAE;EAE9B,oBACE,oBAAC,MAAM;IACL,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEK,KAAM;IACb,SAAS,EAAEH,UAAU,aAEnBJ,oBAAoB,aAAiBoB,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,CAACE;EAAS,gBAE7B,oBAAC,mBAAmB,eACdF,SAAS;IACb,SAAS,mBAAwB;IACjC,IAAI,EAAC,MAAM;IACX,MAAM,EAAEH;EAAO,GACf,EACDV,QAAQ,CACF;AAEb,CAAC"}

package/dist/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/components/FixedLayout/FixedLayout.js

@@ -3,14 +3,15 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "style", "vertical", "getRootRef", "getRef", "filled", "className"];
-import * as React from "react";
-import { Platform } from "../../lib/platform";
-import { classNamesString } from "../../lib/classNames";
-import { SplitColContext } from "../SplitCol/SplitCol";
-import { TooltipContainer } from "../Tooltip/TooltipContainer";
-import { useDOM } from "../../lib/dom";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { usePlatform } from "../../hooks/usePlatform";
+import * as React from 'react';
+import { Platform } from '../../lib/platform';
+import { classNames } from '@vkontakte/vkjs';
+import { SplitColContext } from '../SplitCol/SplitCol';
+import { TooltipContainer } from '../Tooltip/TooltipContainer';
+import { useDOM } from '../../lib/dom';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useExternRef } from '../../hooks/useExternRef';
 /**
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */
@@ -24,6 +25,7 @@ export var FixedLayout = function FixedLayout(_ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
+  var ref = useExternRef(getRootRef, getRef); // TODO: v6 удалить getRef
   var _React$useState = React.useState(undefined),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     width = _React$useState2[0],
@@ -41,18 +43,15 @@ export var FixedLayout = function FixedLayout(_ref) {
     }
   };
   React.useEffect(doResize, [colRef, platform]);
-  useGlobalEventListener(window, "resize", doResize);
+  useGlobalEventListener(window, 'resize', doResize);
   return /*#__PURE__*/React.createElement(TooltipContainer, _extends({}, restProps, {
     fixed: true,
-    ref: getRootRef,
-    className: classNamesString("vkuiFixedLayout", platform === Platform.IOS && "vkuiFixedLayout--ios", filled && "vkuiFixedLayout--filled", vertical && styles["FixedLayout--vertical-".concat(vertical)], className),
+    ref: ref,
+    className: classNames("vkuiFixedLayout", platform === Platform.IOS && "vkuiFixedLayout--ios", filled && "vkuiFixedLayout--filled", vertical && styles["FixedLayout--vertical-".concat(vertical)], className),
     style: _objectSpread(_objectSpread({}, style), {}, {
       width: width
     })
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiFixedLayout__in",
-    ref: getRef
-  }, children));
+  }), children);
 };
 var styles = {
   "FixedLayout--vertical-top": "vkuiFixedLayout--vertical-top",

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

@@ -1 +1 @@
-{"version":3,"file":"FixedLayout.js","names":["React","Platform","classNamesString","SplitColContext","TooltipContainer","useDOM","useGlobalEventListener","usePlatform","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","useState","undefined","width","setWidth","window","useContext","colRef","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,gBAAgB,QAAQ,sBAAsB;AAEvD,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,WAAW,QAAQ,yBAAyB;AAsBrD;AACA;AACA;AACA,OAAO,IAAMC,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,GAAGV,WAAW,EAAE;EAC9B,sBAA0BP,KAAK,CAACkB,QAAQ,CAAqBC,SAAS,CAAC;IAAA;IAAhEC,KAAK;IAAEC,QAAQ;EACtB,cAAmBhB,MAAM,EAAE;IAAnBiB,MAAM,WAANA,MAAM;EACd,wBAAmBtB,KAAK,CAACuB,UAAU,CAACpB,eAAe,CAAC;IAA5CqB,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;MAEtDL,QAAQ,WAEJG,MAAM,CAACE,OAAO,CAACG,WAAW,GAC1BC,UAAU,CAACH,aAAa,CAACI,WAAW,CAAC,GACrCD,UAAU,CAACH,aAAa,CAACK,YAAY,CAAC,QAEzC;IACH,CAAC,MAAM;MACLX,QAAQ,CAACF,SAAS,CAAC;IACrB;EACF,CAAC;EACDnB,KAAK,CAACiC,SAAS,CAACR,QAAQ,EAAE,CAACD,MAAM,EAAEP,QAAQ,CAAC,CAAC;EAC7CX,sBAAsB,CAACgB,MAAM,EAAE,QAAQ,EAAEG,QAAQ,CAAC;EAElD,oBACE,oBAAC,gBAAgB,eACXT,SAAS;IACb,KAAK;IACL,GAAG,EAAEJ,UAAW;IAChB,SAAS,EAAEV,gBAAgB,oBAEzBe,QAAQ,KAAKhB,QAAQ,CAACiC,GAAG,0BAA8B,EACvDpB,MAAM,6BAAiC,EACvCH,QAAQ,IAAIwB,MAAM,iCAA0BxB,QAAQ,EAAG,EACvDI,SAAS,CACT;IACF,KAAK,kCAAOL,KAAK;MAAEU,KAAK,EAALA;IAAK;EAAG,iBAE3B;IAAK,SAAS,uBAA4B;IAAC,GAAG,EAAEP;EAAO,GACpDJ,QAAQ,CACL,CACW;AAEvB,CAAC;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FixedLayout.js","names":["React","Platform","classNames","SplitColContext","TooltipContainer","useDOM","useGlobalEventListener","usePlatform","useExternRef","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","ref","useState","undefined","width","setWidth","window","useContext","colRef","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,0BAA0B;AAsBvD;AACA;AACA;AACA,OAAO,IAAMC,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,GAAGX,WAAW,EAAE;EAC9B,IAAMY,GAAG,GAAGX,YAAY,CAACK,UAAU,EAAEC,MAAM,CAAC,CAAC,CAAC;EAC9C,sBAA0Bd,KAAK,CAACoB,QAAQ,CAAqBC,SAAS,CAAC;IAAA;IAAhEC,KAAK;IAAEC,QAAQ;EACtB,cAAmBlB,MAAM,EAAE;IAAnBmB,MAAM,WAANA,MAAM;EACd,wBAAmBxB,KAAK,CAACyB,UAAU,CAACtB,eAAe,CAAC;IAA5CuB,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;MAEtDL,QAAQ,WAEJG,MAAM,CAACE,OAAO,CAACG,WAAW,GAC1BC,UAAU,CAACH,aAAa,CAACI,WAAW,CAAC,GACrCD,UAAU,CAACH,aAAa,CAACK,YAAY,CAAC,QAEzC;IACH,CAAC,MAAM;MACLX,QAAQ,CAACF,SAAS,CAAC;IACrB;EACF,CAAC;EACDrB,KAAK,CAACmC,SAAS,CAACR,QAAQ,EAAE,CAACD,MAAM,EAAER,QAAQ,CAAC,CAAC;EAC7CZ,sBAAsB,CAACkB,MAAM,EAAE,QAAQ,EAAEG,QAAQ,CAAC;EAElD,oBACE,oBAAC,gBAAgB,eACXV,SAAS;IACb,KAAK;IACL,GAAG,EAAEE,GAAI;IACT,SAAS,EAAEjB,UAAU,oBAEnBgB,QAAQ,KAAKjB,QAAQ,CAACmC,GAAG,0BAA8B,EACvDrB,MAAM,6BAAiC,EACvCH,QAAQ,IAAIyB,MAAM,iCAA0BzB,QAAQ,EAAG,EACvDI,SAAS,CACT;IACF,KAAK,kCAAOL,KAAK;MAAEW,KAAK,EAALA;IAAK;EAAG,IAE1BZ,QAAQ,CACQ;AAEvB,CAAC;AAAC;EAAA;EAAA;AAAA"}

package/dist/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/components/FocusTrap/FocusTrap.js

@@ -2,21 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["Component", "onClose", "restoreFocus", "timeout", "getRootRef", "children"];
-import * as React from "react";
-import { useExternRef } from "../../hooks/useExternRef";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { useTimeout } from "../../hooks/useTimeout";
-import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from "../../lib/accessibility";
-import { useDOM } from "../../lib/dom";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { AppRootContext } from "../AppRoot/AppRootContext";
+import * as React from 'react';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useTimeout } from '../../hooks/useTimeout';
+import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
+import { useDOM } from '../../lib/dom';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { AppRootContext } from '../AppRoot/AppRootContext';
 var FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
  */
 export 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,
@@ -65,7 +65,7 @@ export 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);
       }
     });
@@ -113,7 +113,7 @@ export var FocusTrap = function FocusTrap(_ref) {
     }
     return true;
   };
-  useGlobalEventListener(document, "keydown", onDocumentKeydown, {
+  useGlobalEventListener(document, 'keydown', onDocumentKeydown, {
     capture: true
   });
   return /*#__PURE__*/React.createElement(Component, _extends({

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

@@ -1 +1 @@
-{"version":3,"file":"FocusTrap.js","names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","keyboardInput","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","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":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","keyboardInput","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","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":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,uBAAuB,EAAEC,IAAI,EAAEC,UAAU,QAAQ,yBAAyB;AACnF,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,yBAAyB,QAAQ,qCAAqC;AAE/E,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,IAAMC,kBAA0B,GAAGN,uBAAuB,CAACO,IAAI,EAAE;AAUjE;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAQA;EAAA,0BAPpBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IACjBC,OAAO,QAAPA,OAAO;IAAA,yBACPC,YAAY;IAAZA,YAAY,kCAAG,IAAI;IAAA,oBACnBC,OAAO;IAAPA,OAAO,6BAAG,CAAC;IACXC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,GAAG,GAAGnB,YAAY,CAAcgB,UAAU,CAAC;EAEjD,cAA6BV,MAAM,EAAE;IAA7Bc,QAAQ,WAARA,QAAQ;IAAEC,MAAM,WAANA,MAAM;EAExB,sBAA4CtB,KAAK,CAACuB,QAAQ,CAAuB,IAAI,CAAC;IAAA;IAA/EC,cAAc;IAAEC,iBAAiB;EACxC,uBAA4CzB,KAAK,CAACuB,QAAQ,CAAqB,IAAI,CAAC;IAAA;IAA7EG,cAAc;IAAEC,iBAAiB;;EAExC;;EAEA,wBAA0B3B,KAAK,CAAC4B,UAAU,CAACnB,cAAc,CAAC;IAAlDoB,aAAa,qBAAbA,aAAa;EACrB,IAAMC,gBAAgB,GAAG3B,UAAU,CAAC,YAAM;IAAA;IACxC,IACE0B,aAAa,IACb,kBAACT,GAAG,CAACW,OAAO,yCAAX,aAAaC,QAAQ,CAACX,QAAQ,CAAEY,aAAa,CAAC,KAC/CT,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAEU,MAAM,EACtB;MACAV,cAAc,CAAC,CAAC,CAAC,CAACW,KAAK,EAAE;IAC3B;EACF,CAAC,EAAEnB,OAAO,CAAC;EACXR,yBAAyB,CAAC,YAAM;IAC9BsB,gBAAgB,CAACM,GAAG,EAAE;EACxB,CAAC,EAAE,EAAE,CAAC;;EAEN;;EAEA5B,yBAAyB,CAAC,YAAM;IAC9B,IAAI,CAACY,GAAG,CAACW,OAAO,EAAE;MAChB;IACF;IAEA,IAAMM,KAAoB,GAAG,EAAE;IAC/BC,KAAK,CAACC,SAAS,CAACC,OAAO,CAACC,IAAI;IAC1B;IACArB,GAAG,CAACW,OAAO,CAACW,gBAAgB,CAAChC,kBAAkB,CAAC,EAChD,UAACiC,WAAoB,EAAK;MACxB,wBAAgCrB,MAAM,CAAEsB,gBAAgB,CAACD,WAAW,CAAC;QAA7DE,OAAO,qBAAPA,OAAO;QAAEC,UAAU,qBAAVA,UAAU;MAE3B,IAAID,OAAO,KAAK,MAAM,IAAIC,UAAU,KAAK,QAAQ,EAAE;QACjDT,KAAK,CAACU,IAAI,CAACJ,WAAW,CAAgB;MACxC;IACF,CAAC,CACF;IAED,IAAIN,KAAK,CAACH,MAAM,KAAK,CAAC,EAAE;MACtB;MACAG,KAAK,CAACU,IAAI,CAAC3B,GAAG,CAACW,OAAO,CAAC;IACzB;IAEAN,iBAAiB,CAACY,KAAK,CAAC;EAC1B,CAAC,EAAE,CAACnB,QAAQ,CAAC,CAAC;;EAEd;;EAEA,IAAM8B,kBAAkB,GAAG7C,UAAU,CAAC,YAAM;IAC1C,IAAIuB,cAAc,EAAE;MAClBA,cAAc,CAACS,KAAK,EAAE;IACxB;EACF,CAAC,EAAEnB,OAAO,CAAC;EACXR,yBAAyB,CAAC,YAAM;IAC9B,IAAIO,YAAY,IAAIM,QAAQ,CAAEY,aAAa,EAAE;MAC3CN,iBAAiB,CAACN,QAAQ,CAAEY,aAAa,CAAgB;MAEzD,OAAO,YAAM;QACXe,kBAAkB,CAACZ,GAAG,EAAE;MAC1B,CAAC;IACH;IAEA;EACF,CAAC,EAAE,CAACrB,YAAY,CAAC,CAAC;EAElB,IAAMkC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,CAAgB,EAAK;IAC9C,IAAI5C,UAAU,CAAC4C,CAAC,CAAC,KAAK7C,IAAI,CAAC8C,GAAG,IAAI3B,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAEU,MAAM,EAAE;MACxD,IAAMkB,OAAO,GAAG5B,cAAc,CAACU,MAAM,GAAG,CAAC;MACzC,IAAMmB,SAAS,GAAG7B,cAAc,CAAC8B,SAAS,CAAC,UAACC,IAAI;QAAA,OAAKA,IAAI,KAAKL,CAAC,CAACM,MAAM;MAAA,EAAC;MAEvE,IAAMC,oBAAoB,GAAGJ,SAAS,KAAK,CAAC,CAAC,IAAKA,SAAS,KAAKD,OAAO,IAAI,CAACF,CAAC,CAACQ,QAAS;MAEvF,IAAID,oBAAoB,IAAKJ,SAAS,KAAK,CAAC,IAAIH,CAAC,CAACQ,QAAS,EAAE;QAC3DR,CAAC,CAACS,cAAc,EAAE;QAElB,IAAMJ,IAAI,GAAG/B,cAAc,CAACiC,oBAAoB,GAAG,CAAC,GAAGL,OAAO,CAAC;QAE/D,IAAIG,IAAI,KAAKlC,QAAQ,CAAEY,aAAa,EAAE;UACpCsB,IAAI,CAACpB,KAAK,EAAE;QACd;QAEA,OAAO,KAAK;MACd;IACF;IAEA,IAAIrB,OAAO,IAAIR,UAAU,CAAC4C,CAAC,CAAC,KAAK7C,IAAI,CAACuD,MAAM,EAAE;MAC5C9C,OAAO,EAAE;IACX;IAEA,OAAO,IAAI;EACb,CAAC;EACDZ,sBAAsB,CAACmB,QAAQ,EAAE,SAAS,EAAE4B,iBAAiB,EAAE;IAC7DY,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,oBAAC,SAAS;IAAC,QAAQ,EAAE,CAAC,CAAE;IAAC,GAAG,EAAEzC;EAAI,GAAKD,SAAS,GAC7CD,QAAQ,CACC;AAEhB,CAAC"}

package/dist/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/components/FocusVisible/FocusVisible.js

@@ -1,13 +1,13 @@
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
  */
 export var FocusVisible = function FocusVisible(_ref) {
   var mode = _ref.mode;
   return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
-    className: classNamesString("vkuiFocusVisible", styles["FocusVisible--mode-".concat(mode)])
+    "aria-hidden": true,
+    className: classNames("vkuiFocusVisible", styles["FocusVisible--mode-".concat(mode)])
   });
 };
 var styles = {

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

@@ -1 +1 @@
-{"version":3,"file":"FocusVisible.js","names":["React","classNamesString","FocusVisible","mode","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AASvD;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY;EAAA,IAAMC,IAAI,QAAJA,IAAI;EAAA,oBACjC;IACE,eAAY,MAAM;IAClB,SAAS,EAAEF,gBAAgB,qBAEzBG,MAAM,8BAAuBD,IAAI,EAAG;EACpC,EACF;AAAA,CACH;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FocusVisible.js","names":["React","classNames","FocusVisible","mode","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAS5C;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY;EAAA,IAAMC,IAAI,QAAJA,IAAI;EAAA,oBACjC;IACE,mBAAW;IACX,SAAS,EAAEF,UAAU,qBAAyBG,MAAM,8BAAuBD,IAAI,EAAG;EAAE,EACpF;AAAA,CACH;AAAC;EAAA;EAAA;AAAA"}

package/dist/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/components/Footer/Footer.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Footnote } from "../Typography/Footnote/Footnote";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Footnote } from '../Typography/Footnote/Footnote';
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
  */
@@ -14,7 +14,7 @@ export var Footer = function Footer(_ref) {
   return /*#__PURE__*/React.createElement(Footnote, _extends({
     Component: "footer"
   }, restProps, {
-    className: classNamesString("vkuiFooter", className)
+    className: classNames("vkuiFooter", className)
   }), children);
 };
 //# sourceMappingURL=Footer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":["React","classNamesString","Footnote","Footer","children","className","restProps"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAEvD,SAASC,QAAQ,QAAQ,iCAAiC;AAK1D;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAA2D;EAAA,IAArDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACxD,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAC;EAAQ,GACdA,SAAS;IACb,SAAS,EAAEL,gBAAgB,eAAmBI,SAAS;EAAE,IAExDD,QAAQ,CACA;AAEf,CAAC"}
+{"version":3,"file":"Footer.js","names":["React","classNames","Footnote","Footer","children","className","restProps"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,QAAQ,QAAQ,iCAAiC;AAK1D;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAA2D;EAAA,IAArDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACxD,oBACE,oBAAC,QAAQ;IAAC,SAAS,EAAC;EAAQ,GAAKA,SAAS;IAAE,SAAS,EAAEL,UAAU,eAAmBI,SAAS;EAAE,IAC5FD,QAAQ,CACA;AAEf,CAAC"}

package/dist/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/components/FormField/FormField.js

@@ -2,25 +2,25 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["Component", "status", "children", "getRootRef", "before", "after", "disabled", "mode", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */
 export 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 = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
@@ -43,7 +43,7 @@ export var FormField = function FormField(_ref) {
     ref: getRootRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    className: classNamesString("vkuiFormField", styles["FormField--mode-".concat(mode)], styles["FormField--status-".concat(status)], getSizeYClassName("vkuiFormField", sizeY), disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", className)
+    className: classNames("vkuiFormField", styles["FormField--mode-".concat(mode)], styles["FormField--status-".concat(status)], getSizeYClassName("vkuiFormField", sizeY), disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", className)
   }), before && /*#__PURE__*/React.createElement("div", {
     role: "presentation",
     className: "vkuiFormField__before"

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","names":["React","classNamesString","useAdaptivity","getSizeYClassName","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","sizeY","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","styles"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAEvD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AAkCnE;AACA;AACA;AACA,OAAO,IAAMC,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,qBAAkBZ,aAAa,EAAE;IAAzBa,KAAK,kBAALA,KAAK;EACb,sBAA0Bf,KAAK,CAACgB,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,GACfJ,SAAS;IACb,GAAG,EAAEN,UAAW;IAChB,YAAY,EAAEW,gBAAiB;IAC/B,YAAY,EAAEG,gBAAiB;IAC/B,SAAS,EAAErB,gBAAgB,kBAEzBsB,MAAM,2BAAoBX,IAAI,EAAG,EACjCW,MAAM,6BAAsBjB,MAAM,EAAG,EACrCH,iBAAiB,kBAAsBY,KAAK,CAAC,EAC7CJ,QAAQ,6BAAiC,EACzC,CAACA,QAAQ,IAAIM,KAAK,0BAA8B,EAChDJ,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;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FormField.js","names":["React","classNames","useAdaptivity","getSizeYClassName","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","sizeY","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","styles"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AAkCnE;AACA;AACA;AACA,OAAO,IAAMC,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,qBAAkBZ,aAAa,EAAE;IAAzBa,KAAK,kBAALA,KAAK;EACb,sBAA0Bf,KAAK,CAACgB,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,GACfJ,SAAS;IACb,GAAG,EAAEN,UAAW;IAChB,YAAY,EAAEW,gBAAiB;IAC/B,YAAY,EAAEG,gBAAiB;IAC/B,SAAS,EAAErB,UAAU,kBAEnBsB,MAAM,2BAAoBX,IAAI,EAAG,EACjCW,MAAM,6BAAsBjB,MAAM,EAAG,EACrCH,iBAAiB,kBAAsBY,KAAK,CAAC,EAC7CJ,QAAQ,6BAAiC,EACzC,CAACA,QAAQ,IAAIM,KAAK,0BAA8B,EAChDJ,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;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/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`.
      */