@vkontakte/vkui 5.3.2 → 5.4.0

package/dist/cssm/components/FixedLayout/FixedLayout.js

@@ -12,7 +12,7 @@ import styles from './FixedLayout.module.css';
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */ export const FixedLayout = ({ children , style , vertical , getRootRef , getRef , filled , className , ...restProps })=>{
     const platform = usePlatform();
-    const ref = useExternRef(getRootRef, getRef); // TODO: v6 удалить getRef
+    const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef
     const [width, setWidth] = React.useState(undefined);
     const { window  } = useDOM();
     const { colRef  } = React.useContext(SplitColContext);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\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 && 'vkuiInternalFixedLayout--ios',\n        filled && styles['FixedLayout--filled'],\n        vertical &&\n          {\n            top: styles['FixedLayout--vertical-top'],\n            bottom: classNames(\n              styles['FixedLayout--vertical-bottom'],\n              'vkuiInternalFixedLayout--vertical-bottom',\n            ),\n          }[vertical],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </TooltipContainer>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","styles","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,OAAOC,YAAY,2BAA2B;AAqB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,OAAM,EACNC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,MAAMC,WAAWf;IACjB,MAAMgB,MAAMlB,aAAaY,YAAYC,SAAS,0BAA0B;IACxE,MAAM,CAACM,OAAOC,SAAS,GAAGtB,MAAMuB,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,OAAM,EAAE,GAAGpB;IACnB,MAAM,EAAEqB,OAAM,EAAE,GAAG1B,MAAM2B,UAAU,CAACpB;IACpC,MAAMqB,WAAW,IAAM;QACrB,IAAIF,QAAQG,SAAS;YACnB,MAAMC,gBAAgBC,iBAAiBL,OAAOG,OAAO;YAErDP,SACE,CAAC,EACCI,OAAOG,OAAO,CAACG,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLb,SAASE;QACX,CAAC;IACH;IACAxB,MAAMoC,SAAS,CAACR,UAAU;QAACF;QAAQP;KAAS;IAC5ChB,uBAAuBsB,QAAQ,UAAUG;IAEzC,qBACE,oBAACpB;QACE,GAAGU,SAAS;QACbmB,OAAAA,IAAK;QACLjB,KAAKA;QACLH,WAAWhB,WACTQ,MAAM,CAAC,cAAc,EACrBU,aAAab,SAASgC,GAAG,IAAI,gCAC7BtB,UAAUP,MAAM,CAAC,sBAAsB,EACvCI,YACE,CAAA;YACE0B,KAAK9B,MAAM,CAAC,4BAA4B;YACxC+B,QAAQvC,WACNQ,MAAM,CAAC,+BAA+B,EACtC;QAEJ,CAAA,CAAC,CAACI,SAAS,EACbI;QAEFL,OAAO;YAAE,GAAGA,KAAK;YAAES;QAAM;OAExBV;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\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 [>=6]: удалить 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 && 'vkuiInternalFixedLayout--ios',\n        filled && styles['FixedLayout--filled'],\n        vertical &&\n          {\n            top: styles['FixedLayout--vertical-top'],\n            bottom: classNames(\n              styles['FixedLayout--vertical-bottom'],\n              'vkuiInternalFixedLayout--vertical-bottom',\n            ),\n          }[vertical],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </TooltipContainer>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","styles","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,OAAOC,YAAY,2BAA2B;AAqB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,OAAM,EACNC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,MAAMC,WAAWf;IACjB,MAAMgB,MAAMlB,aAAaY,YAAYC,SAAS,6BAA6B;IAC3E,MAAM,CAACM,OAAOC,SAAS,GAAGtB,MAAMuB,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,OAAM,EAAE,GAAGpB;IACnB,MAAM,EAAEqB,OAAM,EAAE,GAAG1B,MAAM2B,UAAU,CAACpB;IACpC,MAAMqB,WAAW,IAAM;QACrB,IAAIF,QAAQG,SAAS;YACnB,MAAMC,gBAAgBC,iBAAiBL,OAAOG,OAAO;YAErDP,SACE,CAAC,EACCI,OAAOG,OAAO,CAACG,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLb,SAASE;QACX,CAAC;IACH;IACAxB,MAAMoC,SAAS,CAACR,UAAU;QAACF;QAAQP;KAAS;IAC5ChB,uBAAuBsB,QAAQ,UAAUG;IAEzC,qBACE,oBAACpB;QACE,GAAGU,SAAS;QACbmB,OAAAA,IAAK;QACLjB,KAAKA;QACLH,WAAWhB,WACTQ,MAAM,CAAC,cAAc,EACrBU,aAAab,SAASgC,GAAG,IAAI,gCAC7BtB,UAAUP,MAAM,CAAC,sBAAsB,EACvCI,YACE,CAAA;YACE0B,KAAK9B,MAAM,CAAC,4BAA4B;YACxC+B,QAAQvC,WACNQ,MAAM,CAAC,+BAA+B,EACtC;QAEJ,CAAA,CAAC,CAACI,SAAS,EACbI;QAEFL,OAAO;YAAE,GAAGA,KAAK;YAAES;QAAM;OAExBV;AAGP,EAAE"}

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

@@ -1 +1,58 @@
-.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%}.vkuiInternalEpic--hasTabbar .vkuiFixedLayout--vertical-bottom{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiInternalPanelHeader~* .vkuiFixedLayout--vertical-top:not(.vkuiPanelHeader__fixed),.vkuiInternalPanelHeader~.vkuiFixedLayout--vertical-top{top:calc(56px + 0px);top:calc(var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top))}
+.FixedLayout {
+  position: fixed;
+  box-sizing: border-box;
+  /**
+   * ⚠️ WARNING ⚠️
+   * `left: auto` решает следующие задачи:
+   * 1. При фиксированной ширине компонента позиционирует компонент по центру.
+   * 2. При использовании `SplitLayout` позиционирует компонент с права от `<SplitCol fixed />`.
+   *
+   * Подробности можно почитать здесь https://github.com/VKCOM/VKUI/pull/2472
+   *
+   * Единственное, есть проблема при срабатывании insets в landscape ориентации экрана (https://github.com/VKCOM/VKUI/issues/2422).
+   */
+  left: auto;
+  z-index: var(--vkui_internal--z_index_fixed_layout);
+  padding-left: var(--vkui_internal--safe_area_inset_left);
+  padding-right: var(--vkui_internal--safe_area_inset_right);
+}
+
+.FixedLayout--filled {
+  background: var(--vkui--color_background_content);
+}
+
+.FixedLayout--vertical-top {
+  width: 100%;
+  top: 0;
+}
+
+.FixedLayout--vertical-bottom {
+  width: 100%;
+  bottom: 0;
+  padding-bottom: var(--vkui_internal--safe_area_inset_bottom);
+}
+
+/**
+ * CMP:
+ * Epic
+ */
+
+:global(.vkuiInternalEpic--hasTabbar) .FixedLayout--vertical-bottom {
+  padding-bottom: calc(
+    var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom)
+  );
+}
+
+/**
+ * CMP:
+ * PanelHeader
+ */
+
+:global(.vkuiInternalPanelHeader) ~ .FixedLayout--vertical-top,
+:global(.vkuiInternalPanelHeader)
+  ~ *
+  .FixedLayout--vertical-top:not(:global(.vkuiInternalPanelHeader__fixed)) {
+  top: calc(
+    var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top)
+  );
+}

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-export type FocusVisibleMode = 'inside' | 'outside';
+export type FocusVisibleMode = 'inside' | 'outside' | 'outline';
 export interface FocusVisibleProps {
+    visible: boolean | undefined;
     mode: FocusVisibleMode;
+    thin?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
  */
-export declare const FocusVisible: ({ mode }: FocusVisibleProps) => JSX.Element;
+export declare const FocusVisible: ({ visible, mode, thin }: FocusVisibleProps) => JSX.Element;

package/dist/cssm/components/FocusVisible/FocusVisible.js

@@ -3,11 +3,12 @@ import { classNames } from '@vkontakte/vkjs';
 import styles from './FocusVisible.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
- */ export const FocusVisible = ({ mode  })=>/*#__PURE__*/ React.createElement("span", {
+ */ export const FocusVisible = ({ visible , mode , thin  })=>/*#__PURE__*/ React.createElement("span", {
         "aria-hidden": true,
-        className: classNames(styles['FocusVisible'], {
+        className: classNames(styles['FocusVisible'], visible && styles['FocusVisible--visible'], thin && styles['FocusVisible--thin'], {
             inside: styles['FocusVisible--mode-inside'],
-            outside: styles['FocusVisible--mode-outside']
+            outside: styles['FocusVisible--mode-outside'],
+            outline: styles['FocusVisible--mode-outline']
         }[mode])
     });
 

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

@@ -1 +1 @@
-{"version":3,"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(\n      styles['FocusVisible'],\n      {\n        inside: styles['FocusVisible--mode-inside'],\n        outside: styles['FocusVisible--mode-outside'],\n      }[mode],\n    )}\n  />\n);\n"],"names":["React","classNames","styles","FocusVisible","mode","span","aria-hidden","className","inside","outside"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAQ/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAAEC,KAAI,EAAqB,iBACtD,oBAACC;QACCC,eAAAA,IAAW;QACXC,WAAWN,WACTC,MAAM,CAAC,eAAe,EACtB;YACEM,QAAQN,MAAM,CAAC,4BAA4B;YAC3CO,SAASP,MAAM,CAAC,6BAA6B;QAC/C,CAAC,CAACE,KAAK;OAGX"}
+{"version":3,"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' | 'outline';\n\nexport interface FocusVisibleProps {\n  visible: boolean | undefined;\n  mode: FocusVisibleMode;\n  thin?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ visible, mode, thin }: FocusVisibleProps) => (\n  <span\n    aria-hidden\n    className={classNames(\n      styles['FocusVisible'],\n      visible && styles['FocusVisible--visible'],\n      thin && styles['FocusVisible--thin'],\n      {\n        inside: styles['FocusVisible--mode-inside'],\n        outside: styles['FocusVisible--mode-outside'],\n        outline: styles['FocusVisible--mode-outline'],\n      }[mode],\n    )}\n  />\n);\n"],"names":["React","classNames","styles","FocusVisible","visible","mode","thin","span","aria-hidden","className","inside","outside","outline"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAU/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAAEC,QAAO,EAAEC,KAAI,EAAEC,KAAI,EAAqB,iBACrE,oBAACC;QACCC,eAAAA,IAAW;QACXC,WAAWR,WACTC,MAAM,CAAC,eAAe,EACtBE,WAAWF,MAAM,CAAC,wBAAwB,EAC1CI,QAAQJ,MAAM,CAAC,qBAAqB,EACpC;YACEQ,QAAQR,MAAM,CAAC,4BAA4B;YAC3CS,SAAST,MAAM,CAAC,6BAA6B;YAC7CU,SAASV,MAAM,CAAC,6BAA6B;QAC/C,CAAC,CAACG,KAAK;OAGX"}

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

@@ -1 +1,104 @@
-[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}}}
+.FocusVisible {
+  visibility: hidden;
+  position: absolute;
+  border-radius: inherit;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  pointer-events: none;
+  overflow: hidden;
+  top: var(--vkui_internal--focus_visible_distance, 0);
+  left: var(--vkui_internal--focus_visible_distance, 0);
+  right: var(--vkui_internal--focus_visible_distance, 0);
+  bottom: var(--vkui_internal--focus_visible_distance, 0);
+}
+
+.FocusVisible--visible {
+  visibility: visible;
+}
+
+/* Необходимо перебить селектор `.Tappable > *` */
+
+.FocusVisible.FocusVisible {
+  position: absolute;
+}
+
+.FocusVisible {
+  --vkui_internal--focus_visible_thin: 2px;
+}
+
+.FocusVisible--thin {
+  --vkui_internal--focus_visible_thin: var(--vkui_internal--thin_border);
+}
+
+.FocusVisible--mode-inside,
+.FocusVisible--mode-outline {
+  border-color: var(--vkui--color_stroke_accent);
+  border-width: var(--vkui_internal--focus_visible_thin);
+  border-style: solid;
+  box-sizing: border-box;
+}
+
+.FocusVisible--mode-outline {
+  --vkui_internal--focus_visible_distance: 0;
+}
+
+.FocusVisible--mode-inside {
+  --vkui_internal--focus_visible_distance: 2px;
+}
+
+.FocusVisible--mode-outside {
+  box-shadow: 0 0 0 var(--vkui_internal--focus_visible_thin) var(--vkui--color_stroke_accent);
+
+  --vkui_internal--focus_visible_distance: -2px;
+}
+
+/**
+ * [a11y]
+ * add animation for browsers that support prefers-reduced-motion
+ * so that users with vestibular motion disorders have no problem
+ * navigating accessible vkui apps via keyboard
+ */
+
+@media (prefers-reduced-motion: no-preference) {
+  .FocusVisible--visible.FocusVisible--mode-inside {
+    animation: vkui-animation-focus-visible 0.15s ease-in-out forwards;
+    animation-delay: 0.01ms;
+    will-change: top, left, bottom, right;
+
+    --vkui_internal--focus_visible_distance: 4px;
+  }
+
+  .FocusVisible--visible.FocusVisible--mode-outside {
+    animation-name: vkui-animation-focus-visible-outside;
+
+    --vkui_internal--focus_visible_distance: 0;
+  }
+
+  @keyframes vkui-animation-focus-visible {
+    0% {
+    }
+
+    100% {
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      will-change: auto;
+    }
+  }
+
+  @keyframes vkui-animation-focus-visible-outside {
+    0% {
+    }
+
+    100% {
+      top: -2px;
+      left: -2px;
+      bottom: -2px;
+      right: -2px;
+      will-change: auto;
+    }
+  }
+}

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

@@ -1 +1,9 @@
-.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}
+.Footer {
+  display: block;
+  /* TODO [>=6]: переделать на padding */
+  margin: 24px var(--vkui--size_base_padding_horizontal--regular);
+  padding-top: 0;
+  padding-bottom: 0;
+  text-align: center;
+  color: var(--vkui--color_text_secondary);
+}

package/dist/cssm/components/FormField/FormField.js

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { SizeType } from '../../lib/adaptivity';
+import { FocusVisible } from '../FocusVisible/FocusVisible';
 import styles from './FormField.module.css';
 const sizeYClassNames = {
     none: styles['FormField--sizeY-none'],
@@ -10,6 +13,8 @@ const sizeYClassNames = {
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */ export const FormField = ({ Component ='span' , status ='default' , children , getRootRef , before , after , disabled , mode ='default' , className , ...restProps })=>{
+    const elRef = useExternRef(getRootRef);
+    const focusWithin = useFocusWithin(elRef);
     const { sizeY ='none'  } = useAdaptivity();
     const [hover, setHover] = React.useState(false);
     const handleMouseEnter = (e)=>{
@@ -22,7 +27,7 @@ const sizeYClassNames = {
     };
     return /*#__PURE__*/ React.createElement(Component, {
         ...restProps,
-        ref: getRootRef,
+        ref: elRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         className: classNames(styles['FormField'], mode === 'default' && styles['FormField--mode-default'], status !== 'default' && ({
@@ -36,6 +41,10 @@ const sizeYClassNames = {
     }, after), /*#__PURE__*/ React.createElement("span", {
         "aria-hidden": true,
         className: styles['FormField__border']
+    }), /*#__PURE__*/ React.createElement(FocusVisible, {
+        thin: true,
+        visible: focusWithin,
+        mode: "outline"
     }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\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 = 'span',\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 = 'none' } = 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      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' &&\n          {\n            error: styles['FormField--status-error'],\n            valid: styles['FormField--status-valid'],\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","styles","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACD,SAASI,OAAO,CAAC,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAiCA;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,WAAY,OAAM,EAClBC,QAAS,UAAS,EAClBC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACe,GAAK;IACvB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGjB;IAC3B,MAAM,CAACkB,OAAOC,SAAS,GAAGrB,MAAMsB,QAAQ,CAAC,KAAK;IAE9C,MAAMC,mBAAmB,CAACC,IAAkB;QAC1CA,EAAEC,eAAe;QACjBJ,SAAS,IAAI;IACf;IAEA,MAAMK,mBAAmB,CAACF,IAAkB;QAC1CA,EAAEC,eAAe;QACjBJ,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACZ;QACE,GAAGS,SAAS;QACbS,KAAKf;QACLgB,cAAcL;QACdM,cAAcH;QACdT,WAAWhB,WACTG,MAAM,CAAC,YAAY,EACnBY,SAAS,aAAaZ,MAAM,CAAC,0BAA0B,EACvDM,WAAW,aACT,CAAA;YACEoB,OAAO1B,MAAM,CAAC,0BAA0B;YACxC2B,OAAO3B,MAAM,CAAC,0BAA0B;QAC1C,CAAA,CAAC,CAACM,OAAO,EACXS,UAAUhB,SAAS6B,OAAO,IAAI3B,eAAe,CAACc,MAAM,EACpDJ,YAAYX,MAAM,CAAC,sBAAsB,EACzC,CAACW,YAAYK,SAAShB,MAAM,CAAC,mBAAmB,EAChDa;OAGDJ,wBAAU,oBAACoB;QAAKhB,WAAWb,MAAM,CAAC,oBAAoB;OAAGS,SACzDF,UACAG,uBACC,oBAACmB;QAAKhB,WAAWhB,WAAWG,MAAM,CAAC,mBAAmB,EAAE;OACrDU,sBAGL,oBAACmB;QAAKC,eAAAA,IAAW;QAACjB,WAAWb,MAAM,CAAC,oBAAoB;;AAG9D,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\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 = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const elRef = useExternRef(getRootRef);\n  const focusWithin = useFocusWithin(elRef);\n  const { sizeY = 'none' } = 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      {...restProps}\n      ref={elRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' &&\n          {\n            error: styles['FormField--status-error'],\n            valid: styles['FormField--status-valid'],\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n      <FocusVisible thin visible={focusWithin} mode=\"outline\" />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","SizeType","FocusVisible","styles","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","focusWithin","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden","thin","visible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAiCA;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,WAAY,OAAM,EAClBC,QAAS,UAAS,EAClBC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACe,GAAK;IACvB,MAAMC,QAAQnB,aAAaY;IAC3B,MAAMQ,cAAcnB,eAAekB;IACnC,MAAM,EAAEE,OAAQ,OAAM,EAAE,GAAGtB;IAC3B,MAAM,CAACuB,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAC,KAAK;IAE9C,MAAMC,mBAAmB,CAACC,IAAkB;QAC1CA,EAAEC,eAAe;QACjBJ,SAAS,IAAI;IACf;IAEA,MAAMK,mBAAmB,CAACF,IAAkB;QAC1CA,EAAEC,eAAe;QACjBJ,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACd;QACE,GAAGS,SAAS;QACbW,KAAKV;QACLW,cAAcL;QACdM,cAAcH;QACdX,WAAWnB,WACTM,MAAM,CAAC,YAAY,EACnBY,SAAS,aAAaZ,MAAM,CAAC,0BAA0B,EACvDM,WAAW,aACT,CAAA;YACEsB,OAAO5B,MAAM,CAAC,0BAA0B;YACxC6B,OAAO7B,MAAM,CAAC,0BAA0B;QAC1C,CAAA,CAAC,CAACM,OAAO,EACXW,UAAUnB,SAASgC,OAAO,IAAI7B,eAAe,CAACgB,MAAM,EACpDN,YAAYX,MAAM,CAAC,sBAAsB,EACzC,CAACW,YAAYO,SAASlB,MAAM,CAAC,mBAAmB,EAChDa;OAGDJ,wBAAU,oBAACsB;QAAKlB,WAAWb,MAAM,CAAC,oBAAoB;OAAGS,SACzDF,UACAG,uBACC,oBAACqB;QAAKlB,WAAWnB,WAAWM,MAAM,CAAC,mBAAmB,EAAE;OACrDU,sBAGL,oBAACqB;QAAKC,eAAAA,IAAW;QAACnB,WAAWb,MAAM,CAAC,oBAAoB;sBACxD,oBAACD;QAAakC,MAAAA,IAAI;QAACC,SAASlB;QAAaJ,MAAK;;AAGpD,EAAE"}

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

@@ -1 +1,211 @@
-.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:-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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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 (max-height:414.9px),(pointer:fine) and (min-width:768px){.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,.vkuiInternalFormItem--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,.vkuiInternalFormItem--status-error .vkuiFormField{background-color:#faebeb;background-color:var(--vkui--color_background_negative_tint)}.vkuiFormField--status-valid .vkuiFormField__border,.vkuiInternalFormItem--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)}.vkuiInternalModalCardBase__header+.vkuiFormField,.vkuiInternalModalCardBase__subheader+.vkuiFormField{margin-top:16px}.vkuiInternalNativeSelect .vkuiFormField__after{pointer-events:none}.vkuiInternalCalendarHeader__picker .vkuiFormField__after{min-width:12px;padding-right:8px}.vkuiInternalChipsInput .vkuiFormField__after{z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiInternalFormLayoutGroup--segmented .vkuiFormField{isolation:auto;z-index:auto}.vkuiInternalFormLayoutGroup--segmented .vkuiInternalRemovable__content>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField,.vkuiInternalFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField{border-radius:0}.vkuiInternalFormLayoutGroup--segmented .vkuiInternalRemovable__content>:first-of-type:not(:last-of-type) .vkuiFormField,.vkuiInternalFormLayoutGroup--segmented>:first-of-type:not(:last-of-type) .vkuiFormField{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiInternalFormLayoutGroup--segmented .vkuiInternalRemovable__content>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField,.vkuiInternalFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField{border-bottom-left-radius:0;border-top-left-radius:0}
+.FormField {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: var(--vkui--size_field_height--regular);
+  font-family: var(--vkui--font_family_base);
+  -webkit-tap-highlight-color: transparent;
+  isolation: isolate;
+  border-radius: var(--vkui--size_border_radius--regular);
+  outline: none;
+}
+
+.FormField--sizeY-compact {
+  min-height: var(--vkui--size_field_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .FormField--sizeY-none {
+    min-height: var(--vkui--size_field_height--compact);
+  }
+}
+
+/* stylelint-disable-next-line vkui/atomic */
+
+.FormField > * {
+  border-radius: inherit;
+  z-index: var(--vkui_internal--z_index_form_field_element);
+}
+
+.FormField__before,
+.FormField__after {
+  position: relative;
+  z-index: var(--vkui_internal--z_index_form_field_side);
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: var(--vkui--size_field_height--regular);
+  height: 100%;
+  color: var(--vkui--color_icon_secondary);
+}
+
+.FormField--sizeY-compact .FormField__before,
+.FormField--sizeY-compact .FormField__after {
+  min-width: var(--vkui--size_field_height--compact);
+  height: var(--vkui--size_field_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .FormField--sizeY-none .FormField__before,
+  .FormField--sizeY-none .FormField__after {
+    min-width: var(--vkui--size_field_height--compact);
+    height: var(--vkui--size_field_height--compact);
+  }
+}
+
+.FormField__before {
+  color: var(--vkui--color_icon_accent);
+}
+
+.FormField__after {
+  color: var(--vkui--color_icon_secondary);
+}
+
+.FormField__border {
+  pointer-events: none;
+  position: absolute;
+  z-index: var(--vkui_internal--z_index_form_field_border);
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  transform-origin: left top;
+  border: var(--vkui_internal--thin_border) solid transparent;
+  border-radius: inherit;
+}
+
+.FormField--mode-default .FormField__border {
+  border-color: var(--vkui--color_field_border_alpha);
+}
+
+.FormField--mode-default {
+  background-color: var(--vkui--color_field_background);
+}
+
+/**
+ * [start]
+ * CMP:
+ * FormItem
+ */
+
+:global(.vkuiInternalFormItem--status-error) .FormField__border,
+.FormField--status-error .FormField__border {
+  border-color: var(--vkui--color_stroke_negative);
+  z-index: var(--vkui_internal--z_index_form_field_status);
+}
+
+:global(.vkuiInternalFormItem--status-error) .FormField,
+.FormField--status-error {
+  background-color: var(--vkui--color_background_negative_tint);
+}
+
+:global(.vkuiInternalFormItem--status-valid) .FormField__border,
+.FormField--status-valid .FormField__border {
+  border-color: var(--vkui--color_stroke_positive);
+  z-index: var(--vkui_internal--z_index_form_field_status);
+}
+
+/* [end] */
+
+.FormField--disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+  cursor: default;
+  pointer-events: none;
+}
+
+.FormField--hover {
+  background-color: var(--vkui--color_field_background);
+}
+
+.FormField--mode-default.FormField--hover .FormField__border {
+  border-color: var(--vkui--color_field_border_alpha--hover);
+  z-index: var(--vkui_internal--z_index_form_field_border_hover);
+}
+
+/* stylelint-disable-next-line vkui/atomic */
+
+.FormField *:focus {
+  outline: none;
+}
+
+/**
+ * CMP:
+ * ModalCardBase
+ */
+
+:global(.vkuiInternalModalCardBase__header) + .FormField,
+:global(.vkuiInternalModalCardBase__subheader) + .FormField {
+  margin-top: 16px;
+}
+
+/**
+ * CMP:
+ * NativeSelect
+ */
+
+:global(.vkuiInternalNativeSelect) .FormField__after {
+  pointer-events: none;
+}
+
+/**
+ * CMP:
+ * CalendarHeader
+ */
+
+:global(.vkuiInternalCalendarHeader__picker) .FormField__after {
+  min-width: 12px;
+  padding-right: 8px;
+}
+
+/**
+ * CMP:
+ * ChipsInput
+ */
+
+:global(.vkuiInternalChipsInput) .FormField__after {
+  z-index: var(--vkui_internal--z_index_form_field_side);
+}
+
+/**
+ * CMP:
+ * FormLayoutGroup
+ */
+
+:global(.vkuiInternalFormLayoutGroup--segmented) .FormField {
+  z-index: auto;
+  isolation: auto;
+}
+
+:global(.vkuiInternalFormLayoutGroup--segmented)
+  > :global(.vkuiInternalFormItem):not(:first-of-type):not(:last-of-type)
+  .FormField,
+:global(.vkuiInternalFormLayoutGroup--segmented)
+  :global(.vkuiInternalRemovable__content)
+  > :global(.vkuiInternalFormItem):not(:first-of-type):not(:last-of-type)
+  .FormField {
+  border-radius: 0;
+}
+
+:global(.vkuiInternalFormLayoutGroup--segmented) > *:first-of-type:not(:last-of-type) .FormField,
+:global(.vkuiInternalFormLayoutGroup--segmented)
+  :global(.vkuiInternalRemovable__content)
+  > *:first-of-type:not(:last-of-type)
+  .FormField {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+:global(.vkuiInternalFormLayoutGroup--segmented)
+  > :global(.vkuiInternalFormItem):not(:first-of-type):last-of-type
+  .FormField,
+:global(.vkuiInternalFormLayoutGroup--segmented)
+  :global(.vkuiInternalRemovable__content)
+  > :global(.vkuiInternalFormItem):not(:first-of-type):last-of-type
+  .FormField {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

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

@@ -7,8 +7,10 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
     status?: 'default' | 'error' | 'valid';
     /**
      * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
+     *
+     * Режим `indent` предназначен для визуального отступа
      */
-    removable?: boolean;
+    removable?: boolean | 'indent';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem

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

@@ -35,7 +35,8 @@ const sizeYClassNames = {
                 onRemove(e, rootEl.current);
             }
         },
-        removePlaceholder: removePlaceholder
+        removePlaceholder: removePlaceholder,
+        indent: removable === 'indent'
     }, /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')
     }, wrappedChildren)) : wrappedChildren);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\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 = 'none' } = 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        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--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\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,OAAO,CAAC,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAgBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,IAAG,EACHC,OAAM,EACNC,QAAS,UAAS,EAClBC,WAAY,MAAK,EACjBC,UAAS,EACTC,UAAWlB,KAAI,EACfmB,mBAAoB,UAAS,EAC7BC,WAAU,EACVC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,MAAMC,SAASrB,aAAakB;IAC5B,MAAM,EAAEI,OAAQ,OAAM,EAAE,GAAGvB;IAE3B,MAAMwB,gCACJ,oBAAC5B,MAAM6B,QAAQ,QACZ3B,aAAac,sBAAQ,oBAACP;QAAQe,WAAWd,MAAM,CAAC,gBAAgB;OAAGM,MACnED,UACAb,aAAae,yBAAW,oBAACT;QAASgB,WAAWd,MAAM,CAAC,mBAAmB;OAAGO;IAI/E,qBACE,oBAACE;QACE,GAAGM,SAAS;QACbK,KAAKJ;QACLF,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEa,OAAO9B,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEFsB,OAAO/B,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXS,UAAUrB,SAAS2B,OAAO,IAAItB,eAAe,CAACgB,MAAM,EACpDzB,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACC2B,OAAM;QACNb,UAAU,CAACc,IAAM;YACf,IAAIT,QAAQU,SAAS;gBACnBf,SAASc,GAAGT,OAAOU,OAAO;YAC5B,CAAC;QACH;QACAd,mBAAmBA;qBAEnB,oBAACe;QACCb,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDkB,oBAILA,eACD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\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   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\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 = 'none' } = 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        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--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          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,OAAO,CAAC,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAkBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,IAAG,EACHC,OAAM,EACNC,QAAS,UAAS,EAClBC,WAAY,MAAK,EACjBC,UAAS,EACTC,UAAWlB,KAAI,EACfmB,mBAAoB,UAAS,EAC7BC,WAAU,EACVC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,MAAMC,SAASrB,aAAakB;IAC5B,MAAM,EAAEI,OAAQ,OAAM,EAAE,GAAGvB;IAE3B,MAAMwB,gCACJ,oBAAC5B,MAAM6B,QAAQ,QACZ3B,aAAac,sBAAQ,oBAACP;QAAQe,WAAWd,MAAM,CAAC,gBAAgB;OAAGM,MACnED,UACAb,aAAae,yBAAW,oBAACT;QAASgB,WAAWd,MAAM,CAAC,mBAAmB;OAAGO;IAI/E,qBACE,oBAACE;QACE,GAAGM,SAAS;QACbK,KAAKJ;QACLF,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEa,OAAO9B,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEFsB,OAAO/B,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXS,UAAUrB,SAAS2B,OAAO,IAAItB,eAAe,CAACgB,MAAM,EACpDzB,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACC2B,OAAM;QACNb,UAAU,CAACc,IAAM;YACf,IAAIT,QAAQU,SAAS;gBACnBf,SAASc,GAAGT,OAAOU,OAAO;YAC5B,CAAC;QACH;QACAd,mBAAmBA;QACnBe,QAAQjB,cAAc;qBAEtB,oBAACkB;QACCd,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDkB,oBAILA,eACD;AAGP,EAAE"}