@vkontakte/vkui 5.0.3 → 5.1.2

package/dist/cssm/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';
 import "./FixedLayout.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
@@ -25,6 +26,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],
@@ -42,18 +44,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/cssm/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;AAAC;AAsBtD;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;AAAC;AAsBxD;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/cssm/components/FixedLayout/FixedLayout.module.css

@@ -1 +1 @@
-.vkuiFixedLayout{box-sizing:border-box;left:auto;padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;z-index:3}.vkuiFixedLayout--filled{background:var(--vkui--color_background_content)}.vkuiFixedLayout--vertical-top{top:0;width:100%}.vkuiFixedLayout--vertical-bottom{bottom:0;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);width:100%}.vkuiEpic .vkuiFixedLayout--vertical-bottom{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiPanelHeader~* .vkuiFixedLayout--vertical-top:not(.vkuiPanelHeader__fixed),.vkuiPanelHeader~.vkuiFixedLayout--vertical-top{top:calc(var(--vkui--size_panel_header_height--regular) + 0px);top:calc(var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top))}.vkuiFixedLayout.vkuiPanelHeaderContext{z-index:4}
+.vkuiFixedLayout{box-sizing:border-box;left:auto;padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;z-index:3;z-index:var(--vkui_internal--z_index_fixed_layout)}.vkuiFixedLayout--filled{background:#fff;background:var(--vkui--color_background_content)}.vkuiFixedLayout--vertical-top{top:0;width:100%}.vkuiFixedLayout--vertical-bottom{bottom:0;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);width:100%}.vkuiEpic--hasTabbar .vkuiFixedLayout--vertical-bottom{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiPanelHeader~* .vkuiFixedLayout--vertical-top:not(.vkuiPanelHeader__fixed),.vkuiPanelHeader~.vkuiFixedLayout--vertical-top{top:calc(56px + 0px);top:calc(var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top))}.vkuiFixedLayout.vkuiPanelHeaderContext{z-index:4;z-index:var(--vkui_internal--z_index_panel_header_context)}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import "./FocusVisible.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
@@ -7,8 +7,8 @@ import "./FocusVisible.module.css";
 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/cssm/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;AAAC;AASxD;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;AAAC;AAS7C;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/cssm/components/FocusVisible/FocusVisible.module.css

@@ -1 +1 @@
-[class$="--focus-visible"]>.vkuiFocusVisible{border-radius:inherit;overflow:hidden;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0}[class$="--focus-visible"]>.vkuiFocusVisible--mode-inside{border-color:var(--vkui--color_stroke_accent);border-style:solid;border-width:2px;bottom:2px;box-sizing:border-box;left:2px;right:2px;top:2px}[class$="--focus-visible"]>.vkuiFocusVisible--mode-outside{bottom:-2px;box-shadow:0 0 0 2px var(--vkui--color_stroke_accent);left:-2px;right:-2px;top:-2px}@media (prefers-reduced-motion:no-preference){[class$="--focus-visible"]>.vkuiFocusVisible{animation:vkui-animation-focus-visible .15s ease-in-out forwards;animation-delay:.01ms;bottom:4px;left:4px;right:4px;top:4px;will-change:top,left,bottom,right}[class$="--focus-visible"]>.vkuiFocusVisible--mode-outside{animation-name:vkui-animation-focus-visible-outside;bottom:0;left:0;right:0;top:0}@keyframes vkui-animation-focus-visible{to{bottom:0;left:0;right:0;top:0;will-change:auto}}@keyframes vkui-animation-focus-visible-outside{to{bottom:-2px;left:-2px;right:-2px;top:-2px;will-change:auto}}}
+[class$="--focus-visible"]>.vkuiFocusVisible{border-radius:inherit;overflow:hidden;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[class$="--focus-visible"]>.vkuiFocusVisible--mode-inside{border-color:#2688eb;border-color:var(--vkui--color_stroke_accent);border-style:solid;border-width:2px;bottom:2px;box-sizing:border-box;left:2px;right:2px;top:2px}[class$="--focus-visible"]>.vkuiFocusVisible--mode-outside{bottom:-2px;box-shadow:0 0 0 2px #2688eb;box-shadow:0 0 0 2px var(--vkui--color_stroke_accent);left:-2px;right:-2px;top:-2px}@media (prefers-reduced-motion:no-preference){[class$="--focus-visible"]>.vkuiFocusVisible{animation:vkui-animation-focus-visible .15s ease-in-out forwards;animation-delay:.01ms;bottom:4px;left:4px;right:4px;top:4px;will-change:top,left,bottom,right}[class$="--focus-visible"]>.vkuiFocusVisible--mode-outside{animation-name:vkui-animation-focus-visible-outside;bottom:0;left:0;right:0;top:0}@keyframes vkui-animation-focus-visible{to{bottom:0;left:0;right:0;top:0;will-change:auto}}@keyframes vkui-animation-focus-visible-outside{to{bottom:-2px;left:-2px;right:-2px;top:-2px;will-change:auto}}}

package/dist/cssm/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/cssm/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';
 import "./Footer.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
@@ -15,7 +15,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/cssm/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;AAAC;AAK3D;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;AAAC;AAK3D;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/cssm/components/Footer/Footer.module.css

@@ -1 +1 @@
-.vkuiFooter{color:var(--vkui--color_text_secondary);display:block;margin:24px var(--vkui--size_base_padding_horizontal--regular);padding-bottom:0;padding-top:0;text-align:center}
+.vkuiFooter{color:#818c99;color:var(--vkui--color_text_secondary);display:block;margin:24px 16px;margin:24px var(--vkui--size_base_padding_horizontal--regular);padding-bottom:0;padding-top:0;text-align:center}

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

@@ -2,26 +2,26 @@ 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';
 import "./FormField.module.css";
 /**
  * @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(),
@@ -44,7 +44,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/cssm/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;AAAC;AAkCpE;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;AAAC;AAkCpE;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/cssm/components/FormField/FormField.module.css

@@ -1 +1 @@
-.vkuiFormField{-webkit-tap-highlight-color:transparent;align-items:center;box-sizing:border-box;display:flex;font-family:var(--vkui--font_family_base);min-height:var(--vkui--size_field_height--regular);position:relative;z-index:1}.vkuiFormField--sizeY-compact{min-height:var(--vkui--size_field_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiFormField--sizeY-none{min-height:var(--vkui--size_field_height--compact)}}.vkuiFormField>*{border-radius:inherit;z-index:6}.vkuiFormField__after,.vkuiFormField__before{align-content:center;align-items:center;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;height:100%;justify-content:center;min-width:var(--vkui--size_field_height--regular);position:relative;z-index:7}.vkuiFormField--sizeY-compact .vkuiFormField__after,.vkuiFormField--sizeY-compact .vkuiFormField__before{height:var(--vkui--size_field_height--compact);min-width:var(--vkui--size_field_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiFormField--sizeY-none .vkuiFormField__after,.vkuiFormField--sizeY-none .vkuiFormField__before{height:var(--vkui--size_field_height--compact);min-width:var(--vkui--size_field_height--compact)}}.vkuiFormField__before{color:var(--vkui--color_icon_accent)}.vkuiFormField__after{color:var(--vkui--color_icon_secondary)}.vkuiFormField__border{border:1px solid transparent;border:var(--vkui_internal--thin_border) solid transparent;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform-origin:left top;width:100%;z-index:1}.vkuiFormField--mode-default .vkuiFormField__border{background-color:var(--vkui--color_field_background);border-color:var(--vkui--color_field_border_alpha)}.vkuiFormField--status-error .vkuiFormField__border,.vkuiFormItem--status-error .vkuiFormField__border{background-color:var(--vkui--color_background_negative_tint);border-color:var(--vkui--color_stroke_negative);z-index:3}.vkuiFormField--status-valid .vkuiFormField__border,.vkuiFormItem--status-valid .vkuiFormField__border{border-color:var(--vkui--color_stroke_positive);z-index:3}.vkuiFormField--disabled{cursor:default;opacity:var(--vkui--opacity_disable_accessibility);pointer-events:none}.vkuiFormField--hover .vkuiFormField__border{background-color:var(--vkui--color_field_background)}.vkuiFormField--mode-default.vkuiFormField--hover .vkuiFormField__border{border-color:var(--vkui--color_field_border_alpha--hover);z-index:4}.vkuiFormField :focus{outline:none}.vkuiFormField :focus~.vkuiFormField__border,.vkuiFormField:focus-within .vkuiFormField__border{border-color:var(--vkui--color_stroke_accent);z-index:5}.vkuiModalCardBase__header+.vkuiFormField,.vkuiModalCardBase__subheader+.vkuiFormField{margin-top:16px}.vkuiSelect .vkuiFormField__after{pointer-events:none}.vkuiCalendarHeader__picker .vkuiFormField__after{min-width:12px;padding-right:8px}.vkuiChipsInput .vkuiFormField__after{z-index:7}.vkuiFormLayoutGroup--segmented .vkuiFormField{z-index:auto}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField__border,.vkuiFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField__border{border-radius:0}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>:first-of-type:not(:last-of-type) .vkuiFormField__border,.vkuiFormLayoutGroup--segmented>:first-of-type:not(:last-of-type) .vkuiFormField__border{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField__border,.vkuiFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField__border{border-bottom-left-radius:0;border-top-left-radius:0}
+.vkuiFormField{-webkit-tap-highlight-color:transparent;align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:flex;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);isolation:isolate;min-height:44px;min-height:var(--vkui--size_field_height--regular);position:relative}.vkuiFormField--sizeY-compact{min-height:36px;min-height:var(--vkui--size_field_height--compact)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiFormField--sizeY-none{min-height:36px;min-height:var(--vkui--size_field_height--compact)}}.vkuiFormField>*{border-radius:inherit;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiFormField__after,.vkuiFormField__before{align-content:center;align-items:center;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;height:100%;justify-content:center;min-width:44px;min-width:var(--vkui--size_field_height--regular);position:relative;z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiFormField--sizeY-compact .vkuiFormField__after,.vkuiFormField--sizeY-compact .vkuiFormField__before{height:36px;height:var(--vkui--size_field_height--compact);min-width:36px;min-width:var(--vkui--size_field_height--compact)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiFormField--sizeY-none .vkuiFormField__after,.vkuiFormField--sizeY-none .vkuiFormField__before{height:36px;height:var(--vkui--size_field_height--compact);min-width:36px;min-width:var(--vkui--size_field_height--compact)}}.vkuiFormField__before{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiFormField__after{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiFormField__border{border:1px solid transparent;border:var(--vkui_internal--thin_border) solid transparent;border-radius:inherit;box-sizing:border-box;height:100%;left:0;pointer-events:none;position:absolute;top:0;transform-origin:left top;width:100%;z-index:2;z-index:var(--vkui_internal--z_index_form_field_border)}.vkuiFormField--mode-default .vkuiFormField__border{border-color:rgba(0,0,0,.12);border-color:var(--vkui--color_field_border_alpha)}.vkuiFormField--mode-default{background-color:#f2f3f5;background-color:var(--vkui--color_field_background)}.vkuiFormField--status-error .vkuiFormField__border,.vkuiFormItem--status-error .vkuiFormField__border{border-color:#e64646;border-color:var(--vkui--color_stroke_negative);z-index:3;z-index:var(--vkui_internal--z_index_form_field_status)}.vkuiFormField--status-error,.vkuiFormItem--status-error .vkuiFormField{background-color:#faebeb;background-color:var(--vkui--color_background_negative_tint)}.vkuiFormField--status-valid .vkuiFormField__border,.vkuiFormItem--status-valid .vkuiFormField__border{border-color:#4bb34b;border-color:var(--vkui--color_stroke_positive);z-index:3;z-index:var(--vkui_internal--z_index_form_field_status)}.vkuiFormField--disabled{cursor:default;opacity:.64;opacity:var(--vkui--opacity_disable_accessibility);pointer-events:none}.vkuiFormField--hover{background-color:#f2f3f5;background-color:var(--vkui--color_field_background)}.vkuiFormField--mode-default.vkuiFormField--hover .vkuiFormField__border{border-color:rgba(0,0,0,.24);border-color:var(--vkui--color_field_border_alpha--hover);z-index:4;z-index:var(--vkui_internal--z_index_form_field_border_hover)}.vkuiFormField :focus{outline:none}.vkuiFormField :focus~.vkuiFormField__border,.vkuiFormField:focus-within .vkuiFormField__border{border-color:#2688eb;border-color:var(--vkui--color_stroke_accent);z-index:5;z-index:var(--vkui_internal--z_index_form_field_focus)}.vkuiModalCardBase__header+.vkuiFormField,.vkuiModalCardBase__subheader+.vkuiFormField{margin-top:16px}.vkuiSelect .vkuiFormField__after{pointer-events:none}.vkuiCalendarHeader__picker .vkuiFormField__after{min-width:12px;padding-right:8px}.vkuiChipsInput .vkuiFormField__after{z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiFormLayoutGroup--segmented .vkuiFormField{isolation:auto;z-index:auto}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField,.vkuiFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField{border-radius:0}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>:first-of-type:not(:last-of-type) .vkuiFormField,.vkuiFormLayoutGroup--segmented>:first-of-type:not(:last-of-type) .vkuiFormField{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField,.vkuiFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField{border-bottom-left-radius:0;border-top-left-radius:0}

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

@@ -1,15 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "top", "bottom", "status", "Component", "removable", "onRemove", "removePlaceholder", "getRootRef", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { useExternRef } from "../../hooks/useExternRef";
-import { hasReactNode, noop } from "../../lib/utils";
-import { Subhead } from "../Typography/Subhead/Subhead";
-import { Footnote } from "../Typography/Footnote/Footnote";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { Removable } from "../Removable/Removable";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { useExternRef } from '../../hooks/useExternRef';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { Removable } from '../Removable/Removable';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import "./FormItem.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
@@ -19,14 +18,14 @@ export 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 ? 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 = _objectWithoutProperties(_ref, _excluded);
@@ -40,7 +39,7 @@ export var FormItem = function FormItem(_ref) {
   }, bottom));
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     ref: rootEl,
-    className: classNamesString("vkuiFormItem", status !== "default" && styles["FormItem--status-".concat(status)], getSizeYClassName("vkuiFormItem", sizeY), hasReactNode(top) && "vkuiFormItem--withTop", removable && "vkuiFormItem--removable", className)
+    className: classNames("vkuiFormItem", status !== 'default' && styles["FormItem--status-".concat(status)], getSizeYClassName("vkuiFormItem", sizeY), hasReactNode(top) && "vkuiFormItem--withTop", removable && "vkuiFormItem--removable", className)
   }), removable ? /*#__PURE__*/React.createElement(Removable, {
     align: "start",
     onRemove: function onRemove(e) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormItem.js","names":["React","classNamesString","useExternRef","hasReactNode","noop","Subhead","Footnote","useAdaptivity","Removable","getSizeYClassName","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","styles","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,YAAY,EAAEC,IAAI,QAAQ,iBAAiB;AACpD,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAiBpE;AACA;AACA;AACA,OAAO,IAAMC,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,8BAAGb,IAAI;IAAA,6BACfc,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAC7BC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,MAAM,GAAGpB,YAAY,CAACiB,UAAU,CAAC;EACvC,qBAAkBZ,aAAa,EAAE;IAAzBgB,KAAK,kBAALA,KAAK;EAEb,IAAMC,eAAe,gBACnB,oBAAC,KAAK,CAAC,QAAQ,QACZrB,YAAY,CAACS,GAAG,CAAC,iBAChB,oBAAC,OAAO;IAAC,SAAS;EAA0B,GAAEA,GAAG,CAClD,EACAD,QAAQ,EACRR,YAAY,CAACU,MAAM,CAAC,iBACnB,oBAAC,QAAQ;IAAC,SAAS;EAA6B,GAAEA,MAAM,CACzD,CAEJ;EAED,oBACE,oBAAC,SAAS,eACJQ,SAAS;IACb,GAAG,EAAEC,MAAO;IACZ,SAAS,EAAErB,gBAAgB,iBAEzBa,MAAM,KAAK,SAAS,IAAIW,MAAM,4BAAqBX,MAAM,EAAG,EAC5DL,iBAAiB,iBAAqBc,KAAK,CAAC,EAC5CpB,YAAY,CAACS,GAAG,CAAC,2BAA+B,EAChDI,SAAS,6BAAiC,EAC1CI,SAAS;EACT,IAEDJ,SAAS,gBACR,oBAAC,SAAS;IACR,KAAK,EAAC,OAAO;IACb,QAAQ,EAAE,kBAACU,CAAC,EAAK;MACf,IAAIJ,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEK,OAAO,EAAE;QACnBV,SAAQ,CAACS,CAAC,EAAEJ,MAAM,CAACK,OAAO,CAAC;MAC7B;IACF,CAAE;IACF,iBAAiB,EAAET;EAAkB,gBAErC;IAAK,SAAS;EAAgC,GAAEM,eAAe,CAAO,CAC5D,GAEZA,eACD,CACS;AAEhB,CAAC;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"file":"FormItem.js","names":["React","classNames","hasReactNode","noop","useExternRef","Subhead","Footnote","useAdaptivity","Removable","getSizeYClassName","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","styles","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,iBAAiB;AAChE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAiBpE;AACA;AACA;AACA,OAAO,IAAMC,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,8BAAGd,IAAI;IAAA,6BACfe,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAC7BC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,MAAM,GAAGlB,YAAY,CAACe,UAAU,CAAC;EACvC,qBAAkBZ,aAAa,EAAE;IAAzBgB,KAAK,kBAALA,KAAK;EAEb,IAAMC,eAAe,gBACnB,oBAAC,KAAK,CAAC,QAAQ,QACZtB,YAAY,CAACU,GAAG,CAAC,iBAAI,oBAAC,OAAO;IAAC,SAAS;EAA0B,GAAEA,GAAG,CAAW,EACjFD,QAAQ,EACRT,YAAY,CAACW,MAAM,CAAC,iBAAI,oBAAC,QAAQ;IAAC,SAAS;EAA6B,GAAEA,MAAM,CAAY,CAEhG;EAED,oBACE,oBAAC,SAAS,eACJQ,SAAS;IACb,GAAG,EAAEC,MAAO;IACZ,SAAS,EAAErB,UAAU,iBAEnBa,MAAM,KAAK,SAAS,IAAIW,MAAM,4BAAqBX,MAAM,EAAG,EAC5DL,iBAAiB,iBAAqBc,KAAK,CAAC,EAC5CrB,YAAY,CAACU,GAAG,CAAC,2BAA+B,EAChDI,SAAS,6BAAiC,EAC1CI,SAAS;EACT,IAEDJ,SAAS,gBACR,oBAAC,SAAS;IACR,KAAK,EAAC,OAAO;IACb,QAAQ,EAAE,kBAACU,CAAC,EAAK;MACf,IAAIJ,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEK,OAAO,EAAE;QACnBV,SAAQ,CAACS,CAAC,EAAEJ,MAAM,CAACK,OAAO,CAAC;MAC7B;IACF,CAAE;IACF,iBAAiB,EAAET;EAAkB,gBAErC;IAAK,SAAS;EAAgC,GAAEM,eAAe,CAAO,CAC5D,GAEZA,eACD,CACS;AAEhB,CAAC;AAAC;EAAA;EAAA;AAAA"}

package/dist/cssm/components/FormItem/FormItem.module.css

@@ -1 +1 @@
-.vkuiFormItem{display:block;padding:var(--vkui--size_form_item_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem--removable{padding-left:0;padding-right:0}.vkuiFormItem__removable{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;overflow:hidden;padding:0}.vkuiFormItem__top{color:var(--vkui--color_text_subhead);overflow:hidden;padding-bottom:8px;padding-top:2px;text-overflow:ellipsis;white-space:nowrap}.vkuiFormItem__bottom{color:var(--vkui--color_text_secondary);padding-top:8px}.vkuiFormItem--status-error .vkuiFormItem__bottom{color:var(--vkui--color_text_negative)}.vkuiFormItem--status-valid .vkuiFormItem__bottom,.vkuiFormItem--verified .vkuiFormItem__bottom{color:var(--vkui--color_text_positive)}.vkuiFormItem--sizeY-compact .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-compact .vkuiFormItem__bottom{padding-top:6px}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-none .vkuiFormItem__bottom{padding-top:6px}}.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;padding:0}.vkuiFormLayoutGroup--mode-horizontal:not(.vkuiFormLayoutGroup--segmented) .vkuiFormItem+.vkuiFormItem{margin-left:24px}.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--withTop{margin-top:calc(-2px - var(--vkui--font_subhead--line_height--regular) - 8px)}.vkuiFormItem--sizeY-compact.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-compact.vkuiFormItem--withTop{margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-none.vkuiFormItem--withTop{margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}}
+.vkuiFormItem{display:block;padding:12px 16px;padding:var(--vkui--size_form_item_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem--removable{padding-left:0;padding-right:0}.vkuiFormItem__removable{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;overflow:hidden;padding:0}.vkuiFormItem__top{color:#6d7885;color:var(--vkui--color_text_subhead);overflow:hidden;padding-bottom:8px;padding-top:2px;text-overflow:ellipsis;white-space:nowrap}.vkuiFormItem__bottom{color:#818c99;color:var(--vkui--color_text_secondary);padding-top:8px}.vkuiFormItem--status-error .vkuiFormItem__bottom{color:#e64646;color:var(--vkui--color_text_negative)}.vkuiFormItem--status-valid .vkuiFormItem__bottom,.vkuiFormItem--verified .vkuiFormItem__bottom{color:#4bb34b;color:var(--vkui--color_text_positive)}.vkuiFormItem--sizeY-compact .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-compact .vkuiFormItem__bottom{padding-top:6px}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiFormItem--sizeY-none .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-none .vkuiFormItem__bottom{padding-top:6px}}.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;padding:0}.vkuiFormLayoutGroup--mode-horizontal:not(.vkuiFormLayoutGroup--segmented) .vkuiFormItem+.vkuiFormItem{margin-left:24px}.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--withTop{margin-top:calc(-2px - 18px - 8px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--regular) - 8px)}.vkuiFormItem--sizeY-compact.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-compact.vkuiFormItem--withTop{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiFormItem--sizeY-none.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-none.vkuiFormItem--withTop{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}}

package/dist/cssm/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

package/dist/cssm/components/FormLayout/FormLayout.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "Component", "getRef", "onSubmit", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import "./FormLayout.module.css";
 var preventDefault = function preventDefault(e) {
   return e.preventDefault();
@@ -13,19 +13,19 @@ var preventDefault = function preventDefault(e) {
 export var FormLayout = function FormLayout(_ref) {
   var children = _ref.children,
     _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? "form" : _ref$Component,
+    Component = _ref$Component === void 0 ? 'form' : _ref$Component,
     getRef = _ref.getRef,
     _ref$onSubmit = _ref.onSubmit,
     onSubmit = _ref$onSubmit === void 0 ? preventDefault : _ref$onSubmit,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
-    className: classNamesString("vkuiFormLayout", className),
+    className: classNames("vkuiFormLayout", className),
     onSubmit: onSubmit,
     ref: getRef
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiFormLayout__container"
-  }, children), Component === "form" && /*#__PURE__*/React.createElement("input", {
+  }, children), Component === 'form' && /*#__PURE__*/React.createElement("input", {
     type: "submit",
     className: "vkuiFormLayout__submit",
     value: ""

package/dist/cssm/components/FormLayout/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","names":["React","classNamesString","preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps"],"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasComponent, HasRef } from \"../../types\";\nimport styles from \"./FormLayout.module.css\";\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n  HasRef<HTMLElement> &\n  HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n  children,\n  Component = \"form\",\n  getRef,\n  onSubmit = preventDefault,\n  className,\n  ...restProps\n}: FormLayoutProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNamesString(styles[\"FormLayout\"], className)}\n      onSubmit={onSubmit}\n      ref={getRef}\n    >\n      <div className={styles[\"FormLayout__container\"]}>{children}</div>\n      {Component === \"form\" && (\n        <input\n          type=\"submit\"\n          className={styles[\"FormLayout__submit\"]}\n          value=\"\"\n        />\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAAC;AAIxD,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,CAAkB;EAAA,OAAKA,CAAC,CAACD,cAAc,EAAE;AAAA;AAMjE;AACA;AACA;AACA,OAAO,IAAME,UAAU,GAAG,SAAbA,UAAU,OAOA;EAAA,IANrBC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,MAAM,QAANA,MAAM;IAAA,qBACNC,QAAQ;IAARA,QAAQ,8BAAGN,cAAc;IACzBO,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,SAAS,eACJA,SAAS;IACb,SAAS,EAAET,gBAAgB,mBAAuBQ,SAAS,CAAE;IAC7D,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAED;EAAO,iBAEZ;IAAK,SAAS;EAAkC,GAAEF,QAAQ,CAAO,EAChEC,SAAS,KAAK,MAAM,iBACnB;IACE,IAAI,EAAC,QAAQ;IACb,SAAS,0BAA+B;IACxC,KAAK,EAAC;EAAE,EAEX,CACS;AAEhB,CAAC"}
+{"version":3,"file":"FormLayout.js","names":["React","classNames","preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps"],"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef } from '../../types';\nimport styles from './FormLayout.module.css';\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n  HasRef<HTMLElement> &\n  HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n  children,\n  Component = 'form',\n  getRef,\n  onSubmit = preventDefault,\n  className,\n  ...restProps\n}: FormLayoutProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(styles['FormLayout'], className)}\n      onSubmit={onSubmit}\n      ref={getRef}\n    >\n      <div className={styles['FormLayout__container']}>{children}</div>\n      {Component === 'form' && (\n        <input type=\"submit\" className={styles['FormLayout__submit']} value=\"\" />\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAI7C,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,CAAkB;EAAA,OAAKA,CAAC,CAACD,cAAc,EAAE;AAAA;AAMjE;AACA;AACA;AACA,OAAO,IAAME,UAAU,GAAG,SAAbA,UAAU,OAOA;EAAA,IANrBC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,MAAM,QAANA,MAAM;IAAA,qBACNC,QAAQ;IAARA,QAAQ,8BAAGN,cAAc;IACzBO,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,SAAS,eACJA,SAAS;IACb,SAAS,EAAET,UAAU,mBAAuBQ,SAAS,CAAE;IACvD,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAED;EAAO,iBAEZ;IAAK,SAAS;EAAkC,GAAEF,QAAQ,CAAO,EAChEC,SAAS,KAAK,MAAM,iBACnB;IAAO,IAAI,EAAC,QAAQ;IAAC,SAAS,0BAA+B;IAAC,KAAK,EAAC;EAAE,EACvE,CACS;AAEhB,CAAC"}