@vkontakte/vkui 6.1.2 → 6.2.0

package/dist/components/Flex/Flex.js

@@ -0,0 +1,50 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '@vkontakte/vkjs';
+import { calculateGap, columnGapClassNames, rowGapClassNames } from '../../lib/layouts';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { FlexItem } from './FlexItem/FlexItem';
+const justifyClassNames = {
+    'start': "vkuiFlex--justify-start",
+    'end': "vkuiFlex--justify-end",
+    'center': "vkuiFlex--justify-center",
+    'space-around': "vkuiFlex--justify-space-around",
+    'space-between': "vkuiFlex--justify-space-between",
+    'space-evenly': "vkuiFlex--justify-space-evenly"
+};
+const alignClassNames = {
+    start: "vkuiFlex--align-start",
+    end: "vkuiFlex--align-end",
+    center: "vkuiFlex--align-center",
+    stretch: "vkuiFlex--align-stretch",
+    baseline: "vkuiFlex--align-baseline"
+};
+export const Flex = (_param)=>{
+    var { gap, align, justify, margin = 'none', noWrap = false, direction = 'row', style: styleProp, reverse = false } = _param, props = _object_without_properties(_param, [
+        "gap",
+        "align",
+        "justify",
+        "margin",
+        "noWrap",
+        "direction",
+        "style",
+        "reverse"
+    ]);
+    const [columnGap, rowGap] = calculateGap(gap);
+    const style = {};
+    if (typeof rowGap === 'number') {
+        style['--vkui_internal--row_gap'] = `${rowGap}px`;
+    }
+    if (typeof columnGap === 'number') {
+        style['--vkui_internal--column_gap'] = `${columnGap}px`;
+    }
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, props), {
+        baseClassName: classNames("vkuiFlex", !noWrap && "vkuiFlex--wrap", reverse && "vkuiFlex--reverse", direction !== 'row' && "vkuiFlex--direction-column", margin !== 'none' && "vkuiFlex--margin-auto", typeof columnGap === 'string' && columnGapClassNames[columnGap], typeof rowGap === 'string' && rowGapClassNames[rowGap], align && alignClassNames[align], justify && justifyClassNames[justify]),
+        style: _object_spread({}, styleProp, style)
+    }));
+};
+Flex.Item = FlexItem;
+
+//# sourceMappingURL=Flex.js.map

package/dist/components/Flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { FlexItem, FlexItemProps } from './FlexItem/FlexItem';\nimport styles from './Flex.module.css';\n\nexport type { FlexItemProps };\n\nconst justifyClassNames = {\n  'start': styles['Flex--justify-start'],\n  'end': styles['Flex--justify-end'],\n  'center': styles['Flex--justify-center'],\n  'space-around': styles['Flex--justify-space-around'],\n  'space-between': styles['Flex--justify-space-between'],\n  'space-evenly': styles['Flex--justify-space-evenly'],\n};\n\nconst alignClassNames = {\n  start: styles['Flex--align-start'],\n  end: styles['Flex--align-end'],\n  center: styles['Flex--align-center'],\n  stretch: styles['Flex--align-stretch'],\n  baseline: styles['Flex--align-baseline'],\n};\n\ntype FlexContentProps =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\nexport interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Направление осей, эквивалентно `flex-direction`.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.\n   */\n  noWrap?: boolean;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n  /**\n   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.\n   */\n  justify?: FlexContentProps;\n  /**\n   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.\n   */\n  margin?: 'none' | 'auto';\n  /**\n   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.\n   */\n  reverse?: boolean;\n}\n\nexport const Flex = ({\n  gap,\n  align,\n  justify,\n  margin = 'none',\n  noWrap = false,\n  direction = 'row',\n  style: styleProp,\n  reverse = false,\n  ...props\n}: FlexProps) => {\n  const [columnGap, rowGap] = calculateGap(gap);\n  const style: CSSCustomProperties = {};\n\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(\n        styles.Flex,\n        !noWrap && styles['Flex--wrap'],\n        reverse && styles['Flex--reverse'],\n        direction !== 'row' && styles['Flex--direction-column'],\n        margin !== 'none' && styles['Flex--margin-auto'],\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n        align && alignClassNames[align],\n        justify && justifyClassNames[justify],\n      )}\n      style={{ ...styleProp, ...style }}\n    />\n  );\n};\n\nFlex.Item = FlexItem;\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","FlexItem","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","Flex","gap","align","justify","margin","noWrap","direction","style","styleProp","reverse","props","columnGap","rowGap","baseClassName","Item"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,oBAAoB;AAE3B,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAuB,sBAAsB;AAK9D,MAAMC,oBAAoB;IACxB,OAAO;IACP,KAAK;IACL,QAAQ;IACR,cAAc;IACd,eAAe;IACf,cAAc;AAChB;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AA2CA,OAAO,MAAMC,OAAO;QAAC,EACnBC,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,OAAOC,SAAS,EAChBC,UAAU,KAAK,EAEL,WADPC;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,CAACE,WAAWC,OAAO,GAAGxB,aAAaa;IACzC,MAAMM,QAA6B,CAAC;IAEpC,IAAI,OAAOK,WAAW,UAAU;QAC9BL,KAAK,CAAC,2BAA2B,GAAG,CAAC,EAAEK,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOD,cAAc,UAAU;QACjCJ,KAAK,CAAC,8BAA8B,GAAG,CAAC,EAAEI,UAAU,EAAE,CAAC;IACzD;IAEA,qBACE,KAACpB,uDACKmB;QACJG,eAAe1B,uBAEb,CAACkB,4BACDI,gCACAH,cAAc,uCACdF,WAAW,mCACX,OAAOO,cAAc,YAAYtB,mBAAmB,CAACsB,UAAU,EAC/D,OAAOC,WAAW,YAAYtB,gBAAgB,CAACsB,OAAO,EACtDV,SAASR,eAAe,CAACQ,MAAM,EAC/BC,WAAWV,iBAAiB,CAACU,QAAQ;QAEvCI,OAAO,mBAAKC,WAAcD;;AAGhC,EAAE;AAEFP,KAAKc,IAAI,GAAGtB"}

package/dist/components/Flex/FlexItem/FlexItem.d.ts

@@ -0,0 +1,20 @@
+import { HasChildren, HTMLAttributesWithRootRef } from '../../../types';
+export interface FlexItemProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasChildren {
+    /**
+     * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`
+     */
+    alignSelf: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /**
+     * Позволяет задать предопределенные значения шортката `flex`
+     * `grow` соответствует значению `1 0 auto`
+     * `shrink` соответствует значению `0 1 auto`
+     * `content` соответствует значению `0 0 auto`
+     */
+    flex: 'grow' | 'shrink' | 'content' | 'fixed';
+    /**
+     * Изначальный размер элемента, эквивалентно `flex-basis`
+     */
+    flexBasis: number;
+}
+export declare const FlexItem: ({ children, alignSelf, flex, flexBasis, style, ...rest }: FlexItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FlexItem.d.ts.map

package/dist/components/Flex/FlexItem/FlexItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAmBxE,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,WAAW;IAC3F;;OAEG;IACH,SAAS,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAC/D;;;;;OAKG;IACH,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IAC9C;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,6DAOlB,aAAa,4CAcf,CAAC"}

package/dist/components/Flex/FlexItem/FlexItem.js

@@ -0,0 +1,37 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../../RootComponent/RootComponent';
+const flexClassNames = {
+    grow: "vkuiFlexItem--flex-grow",
+    shrink: "vkuiFlexItem--flex-shrink",
+    content: "vkuiFlexItem--flex-content",
+    fixed: "vkuiFlexItem--flex-fixed"
+};
+const alignSelfClassNames = {
+    start: "vkuiFlexItem--align-self-start",
+    end: "vkuiFlexItem--align-self-end",
+    center: "vkuiFlexItem--align-self-center",
+    baseline: "vkuiFlexItem--align-self-baseline",
+    stretch: "vkuiFlexItem--align-self-stretch"
+};
+export const FlexItem = (_param)=>{
+    var { children, alignSelf, flex, flexBasis, style } = _param, rest = _object_without_properties(_param, [
+        "children",
+        "alignSelf",
+        "flex",
+        "flexBasis",
+        "style"
+    ]);
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, rest), {
+        style: _object_spread_props(_object_spread({}, style), {
+            flexBasis
+        }),
+        baseClassName: classNames("vkuiFlexItem", alignSelf && alignSelfClassNames[alignSelf], flex && flexClassNames[flex]),
+        children: children
+    }));
+};
+
+//# sourceMappingURL=FlexItem.js.map

package/dist/components/Flex/FlexItem/FlexItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './FlexItem.module.css';\n\nconst flexClassNames = {\n  grow: styles['FlexItem--flex-grow'],\n  shrink: styles['FlexItem--flex-shrink'],\n  content: styles['FlexItem--flex-content'],\n  fixed: styles['FlexItem--flex-fixed'],\n};\n\nconst alignSelfClassNames = {\n  start: styles['FlexItem--align-self-start'],\n  end: styles['FlexItem--align-self-end'],\n  center: styles['FlexItem--align-self-center'],\n  baseline: styles['FlexItem--align-self-baseline'],\n  stretch: styles['FlexItem--align-self-stretch'],\n};\n\nexport interface FlexItemProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasChildren {\n  /**\n   * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`\n   */\n  alignSelf: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n  /**\n   * Позволяет задать предопределенные значения шортката `flex`\n   * `grow` соответствует значению `1 0 auto`\n   * `shrink` соответствует значению `0 1 auto`\n   * `content` соответствует значению `0 0 auto`\n   */\n  flex: 'grow' | 'shrink' | 'content' | 'fixed';\n  /**\n   * Изначальный размер элемента, эквивалентно `flex-basis`\n   */\n  flexBasis: number;\n}\n\nexport const FlexItem = ({\n  children,\n  alignSelf,\n  flex,\n  flexBasis,\n  style,\n  ...rest\n}: FlexItemProps) => {\n  return (\n    <RootComponent\n      {...rest}\n      style={{ ...style, flexBasis }}\n      baseClassName={classNames(\n        styles.FlexItem,\n        alignSelf && alignSelfClassNames[alignSelf],\n        flex && flexClassNames[flex],\n      )}\n    >\n      {children}\n    </RootComponent>\n  );\n};\n"],"names":["classNames","RootComponent","flexClassNames","grow","shrink","content","fixed","alignSelfClassNames","start","end","center","baseline","stretch","FlexItem","children","alignSelf","flex","flexBasis","style","rest","baseClassName"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAGlE,MAAMC,iBAAiB;IACrBC,IAAI;IACJC,MAAM;IACNC,OAAO;IACPC,KAAK;AACP;AAEA,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,QAAQ;IACRC,OAAO;AACT;AAoBA,OAAO,MAAMC,WAAW;QAAC,EACvBC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,KAAK,EAES,WADXC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,KAACjB,uDACKkB;QACJD,OAAO,wCAAKA;YAAOD;;QACnBG,eAAepB,2BAEbe,aAAaR,mBAAmB,CAACQ,UAAU,EAC3CC,QAAQd,cAAc,CAACc,KAAK;kBAG7BF;;AAGP,EAAE"}

package/dist/components/FloatingArrow/DefaultIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultIcon.d.ts","sourceRoot":"","sources":["../../../src/components/FloatingArrow/DefaultIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAKxC,eAAO,MAAM,WAAW,UAAW,MAAM,aAAa,CAAC,aAAa,CAAC,4CAYpE,CAAC"}
+{"version":3,"file":"DefaultIcon.d.ts","sourceRoot":"","sources":["../../../src/components/FloatingArrow/DefaultIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAKxC,eAAO,MAAM,WAAW,UAAW,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,4CAYpE,CAAC"}

package/dist/components/FloatingArrow/DefaultIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FloatingArrow/DefaultIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Примечание 1.\n *\n * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа\n * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при\n * изменении масштаба страницы.\n *\n * Чтобы исправление сработало нужно:\n * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.\n * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.\n *\n * https://github.com/VKCOM/VKUI/issues/2123\n */\n\nexport const DEFAULT_ARROW_WIDTH = 20;\nexport const DEFAULT_ARROW_HEIGHT = 8;\nexport const DEFAULT_ARROW_PADDING = 10;\n\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\n\nexport const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      width={DEFAULT_ARROW_WIDTH}\n      height={ARROW_HEIGHT_WITH_WHITE_SPACE}\n      viewBox={`0 0 ${DEFAULT_ARROW_WIDTH} ${ARROW_HEIGHT_WITH_WHITE_SPACE}`}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["React","DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","DefaultIcon","props","svg","width","height","viewBox","xmlns","path","d","fill"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAE/B;;;;;;;;;;;;CAYC,GAED,OAAO,MAAMC,sBAAsB,GAAG;AACtC,OAAO,MAAMC,uBAAuB,EAAE;AACtC,OAAO,MAAMC,wBAAwB,GAAG;AAExC,MAAMC,kBAAkB;AACxB,MAAMC,gCAAgCH,uBAAuBE;AAE7D,OAAO,MAAME,cAAc,CAACC;IAC1B,qBACE,KAACC;QACCC,OAAOR;QACPS,QAAQL;QACRM,SAAS,CAAC,IAAI,EAAEV,oBAAoB,CAAC,EAAEI,8BAA8B,CAAC;QACtEO,OAAM;OACFL;kBAEJ,cAAA,KAACM;YAAKC,GAAE;YAA6CC,MAAK;;;AAGhE,EAAE"}
+{"version":3,"sources":["../../../src/components/FloatingArrow/DefaultIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Примечание 1.\n *\n * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа\n * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при\n * изменении масштаба страницы.\n *\n * Чтобы исправление сработало нужно:\n * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.\n * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.\n *\n * https://github.com/VKCOM/VKUI/issues/2123\n */\n\nexport const DEFAULT_ARROW_WIDTH = 20;\nexport const DEFAULT_ARROW_HEIGHT = 8;\nexport const DEFAULT_ARROW_PADDING = 10;\n\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\n\nexport const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      width={DEFAULT_ARROW_WIDTH}\n      height={ARROW_HEIGHT_WITH_WHITE_SPACE}\n      viewBox={`0 0 ${DEFAULT_ARROW_WIDTH} ${ARROW_HEIGHT_WITH_WHITE_SPACE}`}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["React","DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","DefaultIcon","props","svg","width","height","viewBox","xmlns","path","d","fill"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAE/B;;;;;;;;;;;;CAYC,GAED,OAAO,MAAMC,sBAAsB,GAAG;AACtC,OAAO,MAAMC,uBAAuB,EAAE;AACtC,OAAO,MAAMC,wBAAwB,GAAG;AAExC,MAAMC,kBAAkB;AACxB,MAAMC,gCAAgCH,uBAAuBE;AAE7D,OAAO,MAAME,cAAc,CAACC;IAC1B,qBACE,KAACC;QACCC,OAAOR;QACPS,QAAQL;QACRM,SAAS,CAAC,IAAI,EAAEV,oBAAoB,CAAC,EAAEI,8BAA8B,CAAC;QACtEO,OAAM;OACFL;kBAEJ,cAAA,KAACM;YAAKC,GAAE;YAA6CC,MAAK;;;AAGhE,EAAE"}

package/dist/components/FloatingArrow/FloatingArrow.js

@@ -51,38 +51,48 @@ function getArrowPositionData(placement, coords = {
         }
     };
     if (placement.startsWith('top')) {
+        const xOffsetProp = getXOffsetProp(placement, isStaticOffset);
         return [
             'bottom',
             {
                 top: '100%',
-                left: withOffset(false)
+                [xOffsetProp]: withOffset(false)
             }
         ];
     } else if (placement.startsWith('right')) {
+        const yOffsetProp = getYOffsetProp(placement, isStaticOffset);
         return [
             'left',
             {
-                top: withOffset(true),
+                [yOffsetProp]: withOffset(true),
                 left: 0
             }
         ];
     } else if (placement.startsWith('bottom')) {
+        const xOffsetProp = getXOffsetProp(placement, isStaticOffset);
         return [
             undefined,
             {
                 bottom: '100%',
-                left: withOffset(false)
+                [xOffsetProp]: withOffset(false)
             }
         ];
     } else {
+        const yOffsetProp = getYOffsetProp(placement, isStaticOffset);
         return [
             'right',
             {
-                top: withOffset(true),
+                [yOffsetProp]: withOffset(true),
                 right: 0
             }
         ];
     }
 }
+function getXOffsetProp(placement, isStaticOffset) {
+    return placement.endsWith('end') && isStaticOffset ? 'right' : 'left';
+}
+function getYOffsetProp(placement, isStaticOffset) {
+    return placement.endsWith('end') && isStaticOffset ? 'bottom' : 'top';
+}
 
 //# sourceMappingURL=FloatingArrow.js.map

package/dist/components/FloatingArrow/FloatingArrow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './FloatingArrow.module.css';\n\nexport type Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['FloatingArrow--placement-right'],\n  bottom: styles['FloatingArrow--placement-bottom'],\n  left: styles['FloatingArrow--placement-left'],\n};\n\nexport interface FloatingArrowProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasDataAttribute {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  offset?: number;\n  /**\n   * Включает абсолютное смещение по `offset`.\n   */\n  isStaticOffset?: boolean;\n  coords?: Coords;\n  placement?: Placement;\n  iconStyle?: React.CSSProperties;\n  iconClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\n/**\n * @private\n */\nexport const FloatingArrow = ({\n  offset,\n  isStaticOffset,\n  coords,\n  iconStyle,\n  iconClassName,\n  placement = 'bottom',\n  getRootRef,\n  Icon = DefaultIcon,\n  ...restProps\n}: FloatingArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(\n    placement,\n    coords,\n    offset,\n    isStaticOffset,\n  );\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['FloatingArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n      {...restProps}\n    >\n      <Icon className={classNames(styles['FloatingArrow__in'], iconClassName)} style={iconStyle} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n  offset = 0,\n  isStaticOffset = false,\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  const withOffset = (isVerticalPlacement: boolean) => {\n    const parsedCoords = { x: coords.x || 0, y: coords.y || 0 };\n\n    if (isVerticalPlacement) {\n      return isStaticOffset ? offset : parsedCoords.y + offset;\n    } else {\n      return isStaticOffset ? offset : parsedCoords.x + offset;\n    }\n  };\n\n  if (placement.startsWith('top')) {\n    return [\n      'bottom',\n      {\n        top: '100%',\n        left: withOffset(false),\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    return [\n      'left',\n      {\n        top: withOffset(true),\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        left: withOffset(false),\n      },\n    ];\n  } else {\n    return [\n      'right',\n      {\n        top: withOffset(true),\n        right: 0,\n      },\n    ];\n  }\n}\n"],"names":["React","classNames","DefaultIcon","placementClassNames","right","bottom","left","FloatingArrow","offset","isStaticOffset","coords","iconStyle","iconClassName","placement","getRootRef","Icon","restProps","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","x","y","withOffset","isVerticalPlacement","parsedCoords","startsWith","top","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,WAAW,QAAQ,gBAAgB;AAQ5C,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AAoBA;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,UAAU,EACVC,OAAOb,WAAW,EAEC,WADhBc;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,gBAAgBC,YAAY,GAAGC,qBACpCN,WACAH,QACAF,QACAC;IAGF,qBACE,KAACW;QACCC,KAAKP;QACLQ,OAAOJ;QACPK,WAAWtB,gCAETgB,kBAAkBd,mBAAmB,CAACc,eAAe;OAEnDD;kBAEJ,cAAA,KAACD;YAAKQ,WAAWtB,oCAAwCW;YAAgBU,OAAOX;;;AAGtF,EAAE;AAEF,SAASQ,qBACPN,SAAoB,EACpBH,SAAiB;IAAEc,GAAG;IAAGC,GAAG;AAAE,CAAC,EAC/BjB,SAAS,CAAC,EACVC,iBAAiB,KAAK;IAEtB,MAAMiB,aAAa,CAACC;QAClB,MAAMC,eAAe;YAAEJ,GAAGd,OAAOc,CAAC,IAAI;YAAGC,GAAGf,OAAOe,CAAC,IAAI;QAAE;QAE1D,IAAIE,qBAAqB;YACvB,OAAOlB,iBAAiBD,SAASoB,aAAaH,CAAC,GAAGjB;QACpD,OAAO;YACL,OAAOC,iBAAiBD,SAASoB,aAAaJ,CAAC,GAAGhB;QACpD;IACF;IAEA,IAAIK,UAAUgB,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLxB,MAAMoB,WAAW;YACnB;SACD;IACH,OAAO,IAAIb,UAAUgB,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKJ,WAAW;gBAChBpB,MAAM;YACR;SACD;IACH,OAAO,IAAIO,UAAUgB,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACE1B,QAAQ;gBACRC,MAAMoB,WAAW;YACnB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEI,KAAKJ,WAAW;gBAChBtB,OAAO;YACT;SACD;IACH;AACF"}
+{"version":3,"sources":["../../../src/components/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './FloatingArrow.module.css';\n\nexport type Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['FloatingArrow--placement-right'],\n  bottom: styles['FloatingArrow--placement-bottom'],\n  left: styles['FloatingArrow--placement-left'],\n};\n\nexport interface FloatingArrowProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasDataAttribute {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  offset?: number;\n  /**\n   * Включает абсолютное смещение по `offset`.\n   */\n  isStaticOffset?: boolean;\n  coords?: Coords;\n  placement?: Placement;\n  iconStyle?: React.CSSProperties;\n  iconClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\n/**\n * @private\n */\nexport const FloatingArrow = ({\n  offset,\n  isStaticOffset,\n  coords,\n  iconStyle,\n  iconClassName,\n  placement = 'bottom',\n  getRootRef,\n  Icon = DefaultIcon,\n  ...restProps\n}: FloatingArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(\n    placement,\n    coords,\n    offset,\n    isStaticOffset,\n  );\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['FloatingArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n      {...restProps}\n    >\n      <Icon className={classNames(styles['FloatingArrow__in'], iconClassName)} style={iconStyle} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n  offset = 0,\n  isStaticOffset = false,\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  const withOffset = (isVerticalPlacement: boolean) => {\n    const parsedCoords = { x: coords.x || 0, y: coords.y || 0 };\n\n    if (isVerticalPlacement) {\n      return isStaticOffset ? offset : parsedCoords.y + offset;\n    } else {\n      return isStaticOffset ? offset : parsedCoords.x + offset;\n    }\n  };\n\n  if (placement.startsWith('top')) {\n    const xOffsetProp = getXOffsetProp(placement, isStaticOffset);\n    return [\n      'bottom',\n      {\n        top: '100%',\n        [xOffsetProp]: withOffset(false),\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    const yOffsetProp = getYOffsetProp(placement, isStaticOffset);\n    return [\n      'left',\n      {\n        [yOffsetProp]: withOffset(true),\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    const xOffsetProp = getXOffsetProp(placement, isStaticOffset);\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        [xOffsetProp]: withOffset(false),\n      },\n    ];\n  } else {\n    const yOffsetProp = getYOffsetProp(placement, isStaticOffset);\n    return [\n      'right',\n      {\n        [yOffsetProp]: withOffset(true),\n        right: 0,\n      },\n    ];\n  }\n}\n\nfunction getXOffsetProp(placement: Placement, isStaticOffset: boolean) {\n  return placement.endsWith('end') && isStaticOffset ? 'right' : 'left';\n}\n\nfunction getYOffsetProp(placement: Placement, isStaticOffset: boolean) {\n  return placement.endsWith('end') && isStaticOffset ? 'bottom' : 'top';\n}\n"],"names":["React","classNames","DefaultIcon","placementClassNames","right","bottom","left","FloatingArrow","offset","isStaticOffset","coords","iconStyle","iconClassName","placement","getRootRef","Icon","restProps","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","x","y","withOffset","isVerticalPlacement","parsedCoords","startsWith","xOffsetProp","getXOffsetProp","top","yOffsetProp","getYOffsetProp","undefined","endsWith"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,WAAW,QAAQ,gBAAgB;AAQ5C,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AAoBA;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,UAAU,EACVC,OAAOb,WAAW,EAEC,WADhBc;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,gBAAgBC,YAAY,GAAGC,qBACpCN,WACAH,QACAF,QACAC;IAGF,qBACE,KAACW;QACCC,KAAKP;QACLQ,OAAOJ;QACPK,WAAWtB,gCAETgB,kBAAkBd,mBAAmB,CAACc,eAAe;OAEnDD;kBAEJ,cAAA,KAACD;YAAKQ,WAAWtB,oCAAwCW;YAAgBU,OAAOX;;;AAGtF,EAAE;AAEF,SAASQ,qBACPN,SAAoB,EACpBH,SAAiB;IAAEc,GAAG;IAAGC,GAAG;AAAE,CAAC,EAC/BjB,SAAS,CAAC,EACVC,iBAAiB,KAAK;IAEtB,MAAMiB,aAAa,CAACC;QAClB,MAAMC,eAAe;YAAEJ,GAAGd,OAAOc,CAAC,IAAI;YAAGC,GAAGf,OAAOe,CAAC,IAAI;QAAE;QAE1D,IAAIE,qBAAqB;YACvB,OAAOlB,iBAAiBD,SAASoB,aAAaH,CAAC,GAAGjB;QACpD,OAAO;YACL,OAAOC,iBAAiBD,SAASoB,aAAaJ,CAAC,GAAGhB;QACpD;IACF;IAEA,IAAIK,UAAUgB,UAAU,CAAC,QAAQ;QAC/B,MAAMC,cAAcC,eAAelB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACEuB,KAAK;gBACL,CAACF,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO,IAAIb,UAAUgB,UAAU,CAAC,UAAU;QACxC,MAAMI,cAAcC,eAAerB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAACwB,YAAY,EAAEP,WAAW;gBAC1BpB,MAAM;YACR;SACD;IACH,OAAO,IAAIO,UAAUgB,UAAU,CAAC,WAAW;QACzC,MAAMC,cAAcC,eAAelB,WAAWJ;QAC9C,OAAO;YACL0B;YACA;gBACE9B,QAAQ;gBACR,CAACyB,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO;QACL,MAAMO,cAAcC,eAAerB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAACwB,YAAY,EAAEP,WAAW;gBAC1BtB,OAAO;YACT;SACD;IACH;AACF;AAEA,SAAS2B,eAAelB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUuB,QAAQ,CAAC,UAAU3B,iBAAiB,UAAU;AACjE;AAEA,SAASyB,eAAerB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUuB,QAAQ,CAAC,UAAU3B,iBAAiB,WAAW;AAClE"}

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

@@ -3,11 +3,16 @@ import { HasComponent, HasRootRef } from '../../types';
 export interface FocusTrapProps<T extends HTMLElement = HTMLElement> extends AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
     autoFocus?: boolean;
     restoreFocus?: boolean | (() => boolean);
+    mount?: boolean;
     timeout?: number;
     onClose?: () => void;
+    /**
+     * Форсированное отключение захвата фокуса
+     */
+    disabled?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
  */
-export declare const FocusTrap: <T extends HTMLElement = HTMLElement>({ Component, onClose, autoFocus, restoreFocus, timeout, getRootRef, children, ...restProps }: FocusTrapProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FocusTrap: <T extends HTMLElement = HTMLElement>({ Component, onClose, autoFocus, restoreFocus, disabled, mount, timeout, getRootRef, children, ...restProps }: FocusTrapProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FocusTrap.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAW9D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC1B,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,sIASnB,eAAe,CAAC,CAAC,4CA2KnB,CAAC"}
+{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAWzE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC1B,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,+HAW5C,cAAc,CAAC,CAAC,CAAC,4CAiMnB,CAAC"}

package/dist/components/FocusTrap/FocusTrap.js

@@ -2,29 +2,30 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useExternRef } from '../../hooks/useExternRef';
 import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
 import { contains, getActiveElementByAnotherElement, getWindow, isHTMLElement, useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { AppRootContext } from '../AppRoot/AppRootContext';
 const FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
  */ export const FocusTrap = (_param)=>{
-    var { Component = 'div', onClose, autoFocus = true, restoreFocus = true, timeout = 0, getRootRef, children } = _param, restProps = _object_without_properties(_param, [
+    var { Component = 'div', onClose, autoFocus = true, restoreFocus = true, disabled = false, mount = true, timeout = 0, getRootRef, children } = _param, restProps = _object_without_properties(_param, [
         "Component",
         "onClose",
         "autoFocus",
         "restoreFocus",
+        "disabled",
+        "mount",
         "timeout",
         "getRootRef",
         "children"
     ]);
     const ref = useExternRef(getRootRef);
     const { document } = useDOM();
-    const { keyboardInput } = useContext(AppRootContext);
     const focusableNodesRef = useRef([]);
+    const [restoreFocusTo, setRestoreFocusTo] = useState(null);
     const focusNodeByIndex = (nodeIndex)=>{
         const element = focusableNodesRef.current[nodeIndex];
         if (element) {
@@ -71,7 +72,7 @@ const FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
         ref
     ]);
     useIsomorphicLayoutEffect(function tryToAutoFocusToFirstNode() {
-        if (!ref.current || !autoFocus || !keyboardInput) {
+        if (!ref.current || !autoFocus || disabled) {
             return;
         }
         const autoFocusToFirstNode = ()=>{
@@ -90,33 +91,56 @@ const FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
     }, [
         autoFocus,
         timeout,
-        keyboardInput
+        disabled
     ]);
-    useIsomorphicLayoutEffect(function tryToRestoreFocusOnUnmount() {
-        if (!ref.current || !restoreFocus) {
+    const restoreFocusImpl = useCallback(()=>{
+        const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;
+        if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {
             return;
         }
-        const restoreFocusTo = getActiveElementByAnotherElement(ref.current);
-        return ()=>{
-            const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;
-            if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {
-                return;
+        setTimeout(()=>{
+            if (restoreFocusTo) {
+                restoreFocusTo.focus();
+                setRestoreFocusTo(null);
             }
-            setTimeout(()=>{
-                if (restoreFocusTo) {
-                    restoreFocusTo.focus();
-                }
-            }, timeout);
-        };
+        }, timeout);
     }, [
         restoreFocus,
+        restoreFocusTo,
         timeout
     ]);
+    useIsomorphicLayoutEffect(function calculateRestoreFocusTo() {
+        if (!ref.current || !restoreFocus || !mount) {
+            setRestoreFocusTo(null);
+            return;
+        }
+        setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));
+    }, [
+        ref,
+        mount,
+        restoreFocus
+    ]);
+    useIsomorphicLayoutEffect(function tryToRestoreFocusOnUnmount() {
+        return ()=>restoreFocusImpl();
+    }, [
+        restoreFocusImpl
+    ]);
+    useIsomorphicLayoutEffect(function tryToRestoreFocusWhenFakeUnmount() {
+        if (!mount) {
+            restoreFocusImpl();
+        }
+    }, [
+        mount,
+        restoreFocusImpl
+    ]);
     useIsomorphicLayoutEffect(()=>{
         if (!ref.current) {
             return;
         }
         const onDocumentKeydown = (event)=>{
+            if (disabled) {
+                return;
+            }
             const pressedKeyResult = pressedKey(event);
             switch(pressedKeyResult){
                 case Keys.TAB:
@@ -156,7 +180,8 @@ const FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
         };
     }, [
         onClose,
-        ref
+        ref,
+        disabled
     ]);
     return /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({
         tabIndex: -1,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useContext, useRef } from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n  useDOM,\n} 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<T extends HTMLElement = HTMLElement>\n  extends AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  timeout?: number;\n  onClose?: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n  const { document } = useDOM();\n\n  const { keyboardInput } = useContext(AppRootContext);\n  const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n  const focusNodeByIndex = (nodeIndex: number) => {\n    const element = focusableNodesRef.current[nodeIndex];\n\n    if (element) {\n      element.focus();\n    }\n  };\n\n  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n    // eslint-disable-next-line no-restricted-properties\n    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n    const nodes: HTMLElement[] = [];\n    newFocusableElements.forEach((focusableEl) => {\n      const { display, visibility } = getComputedStyle(focusableEl);\n      if (display !== 'none' && visibility !== 'hidden') {\n        nodes.push(focusableEl);\n      }\n    });\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(parentNode);\n    }\n    focusableNodesRef.current = nodes;\n  };\n\n  const onMutateParentHandler = (parentNode: HTMLElement) => {\n    recalculateFocusableNodesRef(parentNode);\n\n    if (document) {\n      const activeElement = document.activeElement as HTMLElement;\n      const currentElementIndex = Math.max(\n        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n        0,\n      );\n      focusNodeByIndex(currentElementIndex);\n    }\n  };\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n      const parentNode = ref.current;\n      const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n      });\n      recalculateFocusableNodesRef(parentNode);\n      return () => observer.disconnect();\n    },\n    [ref],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || !keyboardInput) {\n        return;\n      }\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, keyboardInput],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      if (!ref.current || !restoreFocus) {\n        return;\n      }\n\n      const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n      return () => {\n        const shouldRestoreFocus =\n          typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n        if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n          return;\n        }\n\n        setTimeout(() => {\n          if (restoreFocusTo) {\n            restoreFocusTo.focus();\n          }\n        }, timeout);\n      };\n    },\n    [restoreFocus, timeout],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["useContext","useRef","useExternRef","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","contains","getActiveElementByAnotherElement","getWindow","isHTMLElement","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","document","keyboardInput","focusableNodesRef","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","onDocumentKeydown","event","pressedKeyResult","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","addEventListener","capture","removeEventListener","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n  useDOM,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  mount?: boolean;\n  timeout?: number;\n  onClose?: () => void;\n  /**\n   * Форсированное отключение захвата фокуса\n   */\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  disabled = false,\n  mount = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n  const { document } = useDOM();\n\n  const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n  const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);\n\n  const focusNodeByIndex = (nodeIndex: number) => {\n    const element = focusableNodesRef.current[nodeIndex];\n\n    if (element) {\n      element.focus();\n    }\n  };\n\n  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n    // eslint-disable-next-line no-restricted-properties\n    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n    const nodes: HTMLElement[] = [];\n    newFocusableElements.forEach((focusableEl) => {\n      const { display, visibility } = getComputedStyle(focusableEl);\n      if (display !== 'none' && visibility !== 'hidden') {\n        nodes.push(focusableEl);\n      }\n    });\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(parentNode);\n    }\n    focusableNodesRef.current = nodes;\n  };\n\n  const onMutateParentHandler = (parentNode: HTMLElement) => {\n    recalculateFocusableNodesRef(parentNode);\n\n    if (document) {\n      const activeElement = document.activeElement as HTMLElement;\n      const currentElementIndex = Math.max(\n        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n        0,\n      );\n      focusNodeByIndex(currentElementIndex);\n    }\n  };\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n      const parentNode = ref.current;\n      const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n      });\n      recalculateFocusableNodesRef(parentNode);\n      return () => observer.disconnect();\n    },\n    [ref],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || disabled) {\n        return;\n      }\n\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, disabled],\n  );\n\n  const restoreFocusImpl = useCallback(() => {\n    const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n    if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {\n      return;\n    }\n\n    setTimeout(() => {\n      if (restoreFocusTo) {\n        restoreFocusTo.focus();\n        setRestoreFocusTo(null);\n      }\n    }, timeout);\n  }, [restoreFocus, restoreFocusTo, timeout]);\n\n  useIsomorphicLayoutEffect(\n    function calculateRestoreFocusTo() {\n      if (!ref.current || !restoreFocus || !mount) {\n        setRestoreFocusTo(null);\n        return;\n      }\n      setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));\n    },\n    [ref, mount, restoreFocus],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      return () => restoreFocusImpl();\n    },\n    [restoreFocusImpl],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusWhenFakeUnmount() {\n      if (!mount) {\n        restoreFocusImpl();\n      }\n    },\n    [mount, restoreFocusImpl],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      if (disabled) {\n        return;\n      }\n\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref, disabled]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["useCallback","useRef","useState","useExternRef","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","contains","getActiveElementByAnotherElement","getWindow","isHTMLElement","useDOM","useIsomorphicLayoutEffect","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","autoFocus","restoreFocus","disabled","mount","timeout","getRootRef","children","restProps","ref","document","focusableNodesRef","restoreFocusTo","setRestoreFocusTo","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","timeoutId","setTimeout","clearTimeout","restoreFocusImpl","shouldRestoreFocus","calculateRestoreFocusTo","tryToRestoreFocusOnUnmount","tryToRestoreFocusWhenFakeUnmount","onDocumentKeydown","event","pressedKeyResult","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","addEventListener","capture","removeEventListener","tabIndex"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["React","classNames","Footnote","Footer","children","className","restProps","Component"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAK3D;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EAAEC,QAAQ,EAAEC,SAAS,EAA6B,WAAxBC;QAAxBF;QAAUC;;IACjC,qBACE,KAACH;QAASK,WAAU;OAAaD;QAAWD,WAAWJ,yBAA6BI;kBACjFD;;AAGP,EAAE"}
+{"version":3,"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"],"names":["React","classNames","Footnote","Footer","children","className","restProps","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAK3D;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EAAEC,QAAQ,EAAEC,SAAS,EAA6B,WAAxBC;QAAxBF;QAAUC;;IACjC,qBACE,KAACH;QAASK,WAAU;OAAaD;QAAWD,WAAWJ,yBAA6BI;kBACjFD;;AAGP,EAAE"}

package/dist/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 { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  ['compact']: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n  error: styles['FormField--status-error'],\n  valid: styles['FormField--status-valid'],\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  /**\n   * Режим отображения.\n   *\n   * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n   * - `plain` — показывает только текст-подсказку.\n   */\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 { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const focusWithin = useFocusWithin(elRef);\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible: focusWithin,\n    mode: styles['FormField--focus-visible'],\n  });\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' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        focusVisibleClassNames,\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","useExternRef","useFocusVisibleClassName","useFocusWithin","sizeYClassNames","none","stylesStatus","error","valid","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","sizeY","hover","setHover","useState","focusWithin","focusVisibleClassNames","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","span","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,cAAc,QAAQ,6BAA6B;AAI5D,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,eAAe;IACnBC,KAAK;IACLC,KAAK;AACP;AAuCA;;CAEC,GACD,OAAO,MAAMC,YAAY;QAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EAES,WADfC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,QAAQnB,aAAaY;IAC3B,MAAM,EAAEQ,QAAQ,MAAM,EAAE,GAAGrB;IAC3B,MAAM,CAACsB,OAAOC,SAAS,GAAGzB,MAAM0B,QAAQ,CAAC;IAEzC,MAAMC,cAActB,eAAeiB;IACnC,MAAMM,yBAAyBxB,yBAAyB;QACtDyB,cAAcF;QACdR,IAAI;IACN;IAEA,MAAMW,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAACb,mDACKS;QACJa,KAAKZ;QACLa,cAAcL;QACdM,cAAcH;QACdb,WAAWnB,4BAETkB,SAAS,4CACTN,WAAW,aAAaL,YAAY,CAACK,OAAO,EAC5CU,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CL,uCACA,CAACA,YAAYM,iCACbI,wBACAR;;YAGDJ,wBAAU,KAACqB;gBAAKjB,SAAS;0BAAgCJ;;YACzDF;YACAG,uBACC,KAACoB;gBAAKjB,WAAWnB,mCAAuC;0BACrDgB;;0BAGL,KAACoB;gBAAKC,aAAW;gBAAClB,SAAS;;;;AAGjC,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 { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  ['compact']: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n  error: styles['FormField--status-error'],\n  valid: styles['FormField--status-valid'],\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  /**\n   * Режим отображения.\n   *\n   * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n   * - `plain` — показывает только текст-подсказку.\n   */\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 { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const focusWithin = useFocusWithin(elRef);\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible: focusWithin,\n    mode: styles['FormField--focus-visible'],\n  });\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' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        focusVisibleClassNames,\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","useExternRef","useFocusVisibleClassName","useFocusWithin","sizeYClassNames","none","stylesStatus","error","valid","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","sizeY","hover","setHover","useState","focusWithin","focusVisibleClassNames","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","span","aria-hidden"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,cAAc,QAAQ,6BAA6B;AAI5D,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,eAAe;IACnBC,KAAK;IACLC,KAAK;AACP;AAuCA;;CAEC,GACD,OAAO,MAAMC,YAAY;QAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EAES,WADfC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,QAAQnB,aAAaY;IAC3B,MAAM,EAAEQ,QAAQ,MAAM,EAAE,GAAGrB;IAC3B,MAAM,CAACsB,OAAOC,SAAS,GAAGzB,MAAM0B,QAAQ,CAAC;IAEzC,MAAMC,cAActB,eAAeiB;IACnC,MAAMM,yBAAyBxB,yBAAyB;QACtDyB,cAAcF;QACdR,IAAI;IACN;IAEA,MAAMW,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAACb,mDACKS;QACJa,KAAKZ;QACLa,cAAcL;QACdM,cAAcH;QACdb,WAAWnB,4BAETkB,SAAS,4CACTN,WAAW,aAAaL,YAAY,CAACK,OAAO,EAC5CU,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CL,uCACA,CAACA,YAAYM,iCACbI,wBACAR;;YAGDJ,wBAAU,KAACqB;gBAAKjB,SAAS;0BAAgCJ;;YACzDF;YACAG,uBACC,KAACoB;gBAAKjB,WAAWnB,mCAAuC;0BACrDgB;;0BAGL,KAACoB;gBAAKC,aAAW;gBAAClB,SAAS;;;;AAGjC,EAAE"}

package/dist/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 { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  ['compact']: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact'),\n};\n\nconst stylesStatus = {\n  error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),\n  valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  /**\n   * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n   */\n  topMultiline?: boolean;\n  /**\n   * Позволяет поменять тег используемый для top\n   * Если оставить пустым, то тег top будет span.\n   * Если оставить пустым и использовать htmlFor, то тег top будет label.\n   */\n  topComponent?: React.ElementType;\n  /**\n   * Позволяет полностью заменить шапку поля пользовательским компонентом.\n   *\n   * @since 6.1.0\n   *\n   * TODO [>=7]: удалить и использовать top - оно будет принимать либо строку, либо подкомпонент\n   */\n  topNode?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n  /**\n   * Удаляет внешние отступы вокруг компонента\n   * @since 5.8.0\n   */\n  noPadding?: boolean;\n  /**\n   * Помечает поле обязательным\n   */\n  required?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  topMultiline,\n  topComponent: topComponentProp,\n  bottom,\n  status = 'default',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  htmlFor,\n  bottomId,\n  noPadding,\n  topNode,\n  required = false,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(topNode) ? (\n        topNode\n      ) : hasReactNode(top) ? (\n        <FormItemTop>\n          <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} multiline={topMultiline}>\n            {top}\n          </FormItemTopLabel>\n        </FormItemTop>\n      ) : null}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  const context = useObjectMemo({ required, topMultiline });\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        styles['FormItem'],\n        !noPadding && styles['FormItem--withPadding'],\n        'vkuiInternalFormItem',\n        status !== 'default' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n      )}\n    >\n      <FormItemContext.Provider value={context}>\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(\n                styles['FormItem__removable'],\n                'vkuiInternalFormItem__removable',\n              )}\n            >\n              {wrappedChildren}\n            </div>\n          </Removable>\n        ) : (\n          wrappedChildren\n        )}\n      </FormItemContext.Provider>\n    </RootComponent>\n  );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","useObjectMemo","Removable","RootComponent","Footnote","FormItemTop","FormItemTopAside","FormItemTopLabel","FormItemContext","sizeYClassNames","none","stylesStatus","error","valid","FormItem","children","top","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","topNode","required","restProps","rootEl","sizeY","wrappedChildren","Fragment","Component","multiline","className","id","role","undefined","context","baseClassName","Provider","value","align","e","current","indent","div","displayName","Top","TopLabel","TopAside"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,gBAAgB,QAAQ,iCAAiC;AAClE,SAASC,gBAAgB,QAAQ,iCAAiC;AAClE,SAASC,eAAe,QAAQ,YAAY;AAG5C,MAAMC,kBAAkB;IACtBC,MAAMd,uCAA2C;IACjD,CAAC,UAAU,EAAEA,0CAA8C;AAC7D;AAEA,MAAMe,eAAe;IACnBC,OAAOhB,yCAA6C;IACpDiB,OAAOjB,yCAA6C;AACtD;AAmDA;;CAEC,GACD,OAAO,MAAMkB,WAAW;QAAC,EACvBC,QAAQ,EACRC,GAAG,EACHC,YAAY,EACZC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,SAAS,SAAS,EAClBC,SAAS,EACTC,WAAWzB,IAAI,EACf0B,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,KAAK,EAEF,WADXC;QAfHhB;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,SAAShC,aAAayB;IAC5B,MAAM,EAAEQ,QAAQ,MAAM,EAAE,GAAGlC;IAE3B,MAAMmC,gCACJ,MAACvC,MAAMwC,QAAQ;;YACZtC,aAAagC,WACZA,UACEhC,aAAamB,qBACf,KAACX;0BACC,cAAA,KAACE;oBAAiBmB,SAASA;oBAASU,WAAWjB;oBAAkBkB,WAAWpB;8BACzED;;iBAGH;YACHD;YACAlB,aAAauB,yBACZ,KAAChB;gBACCkC,SAAS;gBACTC,IAAIZ;gBACJa,MAAMnB,WAAW,UAAU,UAAUoB;0BAEpCrB;;;;IAMT,MAAMsB,UAAUzC,cAAc;QAAE6B;QAAUb;IAAa;IAEvD,qBACE,KAACd,uDACK4B;QACJN,YAAYO;QACZW,eAAe/C,2BAEb,CAACgC,0CACD,wBACAP,WAAW,aAAaV,YAAY,CAACU,OAAO,EAC5CY,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CpC,aAAamB,QACXpB,oCAAwC,kCAC1C0B,aAAa1B,sCAA0C;kBAGzD,cAAA,KAACY,gBAAgBoC,QAAQ;YAACC,OAAOH;sBAC9BpB,0BACC,KAACpB;gBACC4C,OAAM;gBACNvB,UAAU,CAACwB;oBACT,IAAIf,mBAAAA,6BAAAA,OAAQgB,OAAO,EAAE;wBACnBzB,SAASwB,GAAGf,OAAOgB,OAAO;oBAC5B;gBACF;gBACAxB,mBAAmBA;gBACnByB,QAAQ3B,cAAc;0BAEtB,cAAA,KAAC4B;oBACCZ,WAAW1C,sCAET;8BAGDsC;;iBAILA;;;AAKV,EAAE;AAEFpB,SAASqC,WAAW,GAAG;AAEvBrC,SAASsC,GAAG,GAAG/C;AACfS,SAASsC,GAAG,CAACD,WAAW,GAAG;AAE3BrC,SAASuC,QAAQ,GAAG9C;AACpBO,SAASuC,QAAQ,CAACF,WAAW,GAAG;AAEhCrC,SAASwC,QAAQ,GAAGhD;AACpBQ,SAASwC,QAAQ,CAACH,WAAW,GAAG"}
+{"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 { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  ['compact']: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact'),\n};\n\nconst stylesStatus = {\n  error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),\n  valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  /**\n   * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n   */\n  topMultiline?: boolean;\n  /**\n   * Позволяет поменять тег используемый для top\n   * Если оставить пустым, то тег top будет span.\n   * Если оставить пустым и использовать htmlFor, то тег top будет label.\n   */\n  topComponent?: React.ElementType;\n  /**\n   * Позволяет полностью заменить шапку поля пользовательским компонентом.\n   *\n   * @since 6.1.0\n   *\n   * TODO [>=7]: удалить и использовать top - оно будет принимать либо строку, либо подкомпонент\n   */\n  topNode?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n  /**\n   * Удаляет внешние отступы вокруг компонента\n   * @since 5.8.0\n   */\n  noPadding?: boolean;\n  /**\n   * Помечает поле обязательным\n   */\n  required?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  topMultiline,\n  topComponent: topComponentProp,\n  bottom,\n  status = 'default',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  htmlFor,\n  bottomId,\n  noPadding,\n  topNode,\n  required = false,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(topNode) ? (\n        topNode\n      ) : hasReactNode(top) ? (\n        <FormItemTop>\n          <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} multiline={topMultiline}>\n            {top}\n          </FormItemTopLabel>\n        </FormItemTop>\n      ) : null}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  const context = useObjectMemo({ required, topMultiline });\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        styles['FormItem'],\n        !noPadding && styles['FormItem--withPadding'],\n        'vkuiInternalFormItem',\n        status !== 'default' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n      )}\n    >\n      <FormItemContext.Provider value={context}>\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(\n                styles['FormItem__removable'],\n                'vkuiInternalFormItem__removable',\n              )}\n            >\n              {wrappedChildren}\n            </div>\n          </Removable>\n        ) : (\n          wrappedChildren\n        )}\n      </FormItemContext.Provider>\n    </RootComponent>\n  );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","useObjectMemo","Removable","RootComponent","Footnote","FormItemTop","FormItemTopAside","FormItemTopLabel","FormItemContext","sizeYClassNames","none","stylesStatus","error","valid","FormItem","children","top","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","topNode","required","restProps","rootEl","sizeY","wrappedChildren","Fragment","Component","multiline","className","id","role","undefined","context","baseClassName","Provider","value","align","e","current","indent","div","displayName","Top","TopLabel","TopAside"],"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,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,gBAAgB,QAAQ,iCAAiC;AAClE,SAASC,gBAAgB,QAAQ,iCAAiC;AAClE,SAASC,eAAe,QAAQ,YAAY;AAG5C,MAAMC,kBAAkB;IACtBC,MAAMd,uCAA2C;IACjD,CAAC,UAAU,EAAEA,0CAA8C;AAC7D;AAEA,MAAMe,eAAe;IACnBC,OAAOhB,yCAA6C;IACpDiB,OAAOjB,yCAA6C;AACtD;AAmDA;;CAEC,GACD,OAAO,MAAMkB,WAAW;QAAC,EACvBC,QAAQ,EACRC,GAAG,EACHC,YAAY,EACZC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,SAAS,SAAS,EAClBC,SAAS,EACTC,WAAWzB,IAAI,EACf0B,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,KAAK,EAEF,WADXC;QAfHhB;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,SAAShC,aAAayB;IAC5B,MAAM,EAAEQ,QAAQ,MAAM,EAAE,GAAGlC;IAE3B,MAAMmC,gCACJ,MAACvC,MAAMwC,QAAQ;;YACZtC,aAAagC,WACZA,UACEhC,aAAamB,qBACf,KAACX;0BACC,cAAA,KAACE;oBAAiBmB,SAASA;oBAASU,WAAWjB;oBAAkBkB,WAAWpB;8BACzED;;iBAGH;YACHD;YACAlB,aAAauB,yBACZ,KAAChB;gBACCkC,SAAS;gBACTC,IAAIZ;gBACJa,MAAMnB,WAAW,UAAU,UAAUoB;0BAEpCrB;;;;IAMT,MAAMsB,UAAUzC,cAAc;QAAE6B;QAAUb;IAAa;IAEvD,qBACE,KAACd,uDACK4B;QACJN,YAAYO;QACZW,eAAe/C,2BAEb,CAACgC,0CACD,wBACAP,WAAW,aAAaV,YAAY,CAACU,OAAO,EAC5CY,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CpC,aAAamB,QACXpB,oCAAwC,kCAC1C0B,aAAa1B,sCAA0C;kBAGzD,cAAA,KAACY,gBAAgBoC,QAAQ;YAACC,OAAOH;sBAC9BpB,0BACC,KAACpB;gBACC4C,OAAM;gBACNvB,UAAU,CAACwB;oBACT,IAAIf,mBAAAA,6BAAAA,OAAQgB,OAAO,EAAE;wBACnBzB,SAASwB,GAAGf,OAAOgB,OAAO;oBAC5B;gBACF;gBACAxB,mBAAmBA;gBACnByB,QAAQ3B,cAAc;0BAEtB,cAAA,KAAC4B;oBACCZ,WAAW1C,sCAET;8BAGDsC;;iBAILA;;;AAKV,EAAE;AAEFpB,SAASqC,WAAW,GAAG;AAEvBrC,SAASsC,GAAG,GAAG/C;AACfS,SAASsC,GAAG,CAACD,WAAW,GAAG;AAE3BrC,SAASuC,QAAQ,GAAG9C;AACpBO,SAASuC,QAAQ,CAACF,WAAW,GAAG;AAEhCrC,SAASwC,QAAQ,GAAGhD;AACpBQ,SAASwC,QAAQ,CAACH,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItemTop/FormItemTop.tsx"],"sourcesContent":["import { HasComponent, HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {}\n\n/**\n * Служит оберткой для составной шапки поля, отвечая за выравнивание контента и расстановку отступов.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTop = (props: FormItemTopProps) => (\n  <RootComponent {...props} baseClassName={styles.FormItem__top} />\n);\n\nFormItemTop.displayName = 'FormItemTop';\n"],"names":["RootComponent","FormItemTop","props","baseClassName","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":";;;AACA,SAASA,aAAa,QAAQ,oCAAoC;AAKlE;;;;;CAKC,GACD,OAAO,MAAMC,cAAc,CAACC,sBAC1B,KAACF,uDAAkBE;QAAOC,aAAa;QACvC;AAEFF,YAAYG,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItemTop/FormItemTop.tsx"],"sourcesContent":["import { HasComponent, HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {}\n\n/**\n * Служит оберткой для составной шапки поля, отвечая за выравнивание контента и расстановку отступов.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTop = (props: FormItemTopProps) => (\n  <RootComponent {...props} baseClassName={styles.FormItem__top} />\n);\n\nFormItemTop.displayName = 'FormItemTop';\n"],"names":["RootComponent","FormItemTop","props","baseClassName","displayName"],"mappings":";;;AACA,SAASA,aAAa,QAAQ,oCAAoC;AAKlE;;;;;CAKC,GACD,OAAO,MAAMC,cAAc,CAACC,sBAC1B,KAACF,uDAAkBE;QAAOC,aAAa;QACvC;AAEFF,YAAYG,WAAW,GAAG"}

package/dist/components/FormItem/FormItemTop/FormItemTopAside.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItemTop/FormItemTopAside.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopAsideProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {}\n\n/**\n * Отвечает за отрисовку дополнительного контента справа от заголовка поля.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopAside = ({ children, ...restProps }: FormItemTopAsideProps) => {\n  return (\n    <Subhead className={styles['FormItemTop__aside']} {...restProps}>\n      {children}\n    </Subhead>\n  );\n};\n\nFormItemTopAside.displayName = 'FormItemTopAside';\n"],"names":["React","Subhead","FormItemTopAside","children","restProps","className","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,QAAQ,mCAAmC;AAQ3D;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB;QAAC,EAAEC,QAAQ,EAAuC,WAAlCC;QAAbD;;IACjC,qBACE,KAACF;QAAQI,SAAS;OAAoCD;kBACnDD;;AAGP,EAAE;AAEFD,iBAAiBI,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItemTop/FormItemTopAside.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopAsideProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {}\n\n/**\n * Отвечает за отрисовку дополнительного контента справа от заголовка поля.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopAside = ({ children, ...restProps }: FormItemTopAsideProps) => {\n  return (\n    <Subhead className={styles['FormItemTop__aside']} {...restProps}>\n      {children}\n    </Subhead>\n  );\n};\n\nFormItemTopAside.displayName = 'FormItemTopAside';\n"],"names":["React","Subhead","FormItemTopAside","children","restProps","className","displayName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,QAAQ,mCAAmC;AAQ3D;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB;QAAC,EAAEC,QAAQ,EAAuC,WAAlCC;QAAbD;;IACjC,qBACE,KAACF;QAAQI,SAAS;OAAoCD;kBACnDD;;AAGP,EAAE;AAEFD,iBAAiBI,WAAW,GAAG"}

package/dist/components/FormItem/FormItemTop/FormItemTopLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItemTop/FormItemTopLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport { FormItemContext } from '../context';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopLabelProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Многострочный вывод заголовка.\n   * TODO [>=7]: удалить и вседа брать из контекста\n   */\n  multiline?: boolean;\n}\n\n/**\n * Отвечает за отрисовку заголовка поля. По умолчанию компонент представлен тегом `label`, если передано свойство `htmlFor`.\n * Можно переопределить через свойство `Component`.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopLabel = ({\n  children,\n  Component: componentProp,\n  htmlFor,\n  multiline,\n  ...restProps\n}: FormItemTopLabelProps) => {\n  const component = componentProp || (htmlFor && 'label') || 'span';\n  const { required, topMultiline: multilineContext } = React.useContext(FormItemContext);\n\n  return (\n    <Subhead\n      className={classNames(\n        styles['FormItemTop__label'],\n        (multiline ?? multilineContext) && styles['FormItemTop__label--multiline'],\n      )}\n      Component={component}\n      htmlFor={htmlFor}\n      {...restProps}\n    >\n      {children}\n      {required && (\n        <span className={styles['FormItemTop__label--required']} aria-hidden>\n          *\n        </span>\n      )}\n    </Subhead>\n  );\n};\n\nFormItemTopLabel.displayName = 'FormItemTopLabel';\n"],"names":["React","classNames","Subhead","FormItemContext","FormItemTopLabel","children","Component","componentProp","htmlFor","multiline","restProps","component","required","topMultiline","multilineContext","useContext","className","span","aria-hidden","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,OAAO,QAAQ,mCAAmC;AAC3D,SAASC,eAAe,QAAQ,aAAa;AAc7C;;;;;;CAMC,GACD,OAAO,MAAMC,mBAAmB;QAAC,EAC/BC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,OAAO,EACPC,SAAS,EAEa,WADnBC;QAJHL;QACAC;QACAE;QACAC;;IAGA,MAAME,YAAYJ,iBAAkBC,WAAW,WAAY;IAC3D,MAAM,EAAEI,QAAQ,EAAEC,cAAcC,gBAAgB,EAAE,GAAGd,MAAMe,UAAU,CAACZ;IAEtE,qBACE,MAACD;QACCc,WAAWf,qCAET,AAACQ,CAAAA,sBAAAA,uBAAAA,YAAaK,gBAAe;QAE/BR,WAAWK;QACXH,SAASA;OACLE;;YAEHL;YACAO,0BACC,KAACK;gBAAKD,SAAS;gBAA0CE,aAAW;0BAAC;;;;AAM7E,EAAE;AAEFd,iBAAiBe,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItemTop/FormItemTopLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport { FormItemContext } from '../context';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopLabelProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Многострочный вывод заголовка.\n   * TODO [>=7]: удалить и вседа брать из контекста\n   */\n  multiline?: boolean;\n}\n\n/**\n * Отвечает за отрисовку заголовка поля. По умолчанию компонент представлен тегом `label`, если передано свойство `htmlFor`.\n * Можно переопределить через свойство `Component`.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopLabel = ({\n  children,\n  Component: componentProp,\n  htmlFor,\n  multiline,\n  ...restProps\n}: FormItemTopLabelProps) => {\n  const component = componentProp || (htmlFor && 'label') || 'span';\n  const { required, topMultiline: multilineContext } = React.useContext(FormItemContext);\n\n  return (\n    <Subhead\n      className={classNames(\n        styles['FormItemTop__label'],\n        (multiline ?? multilineContext) && styles['FormItemTop__label--multiline'],\n      )}\n      Component={component}\n      htmlFor={htmlFor}\n      {...restProps}\n    >\n      {children}\n      {required && (\n        <span className={styles['FormItemTop__label--required']} aria-hidden>\n          *\n        </span>\n      )}\n    </Subhead>\n  );\n};\n\nFormItemTopLabel.displayName = 'FormItemTopLabel';\n"],"names":["React","classNames","Subhead","FormItemContext","FormItemTopLabel","children","Component","componentProp","htmlFor","multiline","restProps","component","required","topMultiline","multilineContext","useContext","className","span","aria-hidden","displayName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,OAAO,QAAQ,mCAAmC;AAC3D,SAASC,eAAe,QAAQ,aAAa;AAc7C;;;;;;CAMC,GACD,OAAO,MAAMC,mBAAmB;QAAC,EAC/BC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,OAAO,EACPC,SAAS,EAEa,WADnBC;QAJHL;QACAC;QACAE;QACAC;;IAGA,MAAME,YAAYJ,iBAAkBC,WAAW,WAAY;IAC3D,MAAM,EAAEI,QAAQ,EAAEC,cAAcC,gBAAgB,EAAE,GAAGd,MAAMe,UAAU,CAACZ;IAEtE,qBACE,MAACD;QACCc,WAAWf,qCAET,AAACQ,CAAAA,sBAAAA,uBAAAA,YAAaK,gBAAe;QAE/BR,WAAWK;QACXH,SAASA;OACLE;;YAEHL;YACAO,0BACC,KAACK;gBAAKD,SAAS;gBAA0CE,aAAW;0BAAC;;;;AAM7E,EAAE;AAEFd,iBAAiBe,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FormItem/context.ts"],"sourcesContent":["import * as React from 'react';\n\ninterface FormItemContextProps {\n  required?: boolean;\n  topMultiline?: boolean;\n}\n\nexport const FormItemContext = React.createContext<FormItemContextProps>({\n  required: false,\n  topMultiline: false,\n});\n"],"names":["React","FormItemContext","createContext","required","topMultiline"],"rangeMappings":";;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,kBAAkBD,MAAME,aAAa,CAAuB;IACvEC,UAAU;IACVC,cAAc;AAChB,GAAG"}
+{"version":3,"sources":["../../../src/components/FormItem/context.ts"],"sourcesContent":["import * as React from 'react';\n\ninterface FormItemContextProps {\n  required?: boolean;\n  topMultiline?: boolean;\n}\n\nexport const FormItemContext = React.createContext<FormItemContextProps>({\n  required: false,\n  topMultiline: false,\n});\n"],"names":["React","FormItemContext","createContext","required","topMultiline"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,kBAAkBD,MAAME,aAAa,CAAuB;IACvEC,UAAU;IACVC,cAAc;AAChB,GAAG"}