@vkontakte/vkui 6.2.1 → 6.3.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useDOM } from '../../lib/dom';\nimport { setRef } from '../../lib/utils';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './FixedLayout.module.css';\n\nconst stylesVertical = {\n  top: styles['FixedLayout--vertical-top'],\n  bottom: classNames(\n    styles['FixedLayout--vertical-bottom'],\n    'vkuiInternalFixedLayout--vertical-bottom',\n  ),\n};\n\nexport interface FixedLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  vertical?: 'top' | 'bottom';\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n  /**\n   * Всегда соответствовать ширине родителя.\n   * Ширина пересчитывается по событию `window` `resize`.\n   */\n  useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: 'absolute' | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  filled,\n  className,\n  useParentWidth,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const ref = React.useRef<HTMLElement | null>(null);\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n  const parentRef = React.useRef<HTMLElement | null>(null);\n\n  const handleRootRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (!node) {\n        return;\n      }\n\n      setRef(node, getRootRef);\n      setRef(node, ref);\n      setRef(node.parentElement, parentRef);\n    },\n    [getRootRef],\n  );\n\n  const doResize = () => {\n    if (useParentWidth && parentRef.current) {\n      const parentWidth = parentRef.current.getBoundingClientRect().width;\n      setWidth(parentWidth ? `${parentWidth}px` : undefined);\n    } else if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`,\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n\n  useGlobalEventListener(window, 'resize', doResize);\n  useResizeObserver(useParentWidth ? parentRef : colRef, doResize);\n\n  return (\n    <OnboardingTooltipContainer\n      {...restProps}\n      fixed\n      ref={handleRootRef}\n      className={classNames(\n        styles['FixedLayout'],\n        platform === 'ios' && 'vkuiInternalFixedLayout--ios',\n        filled && styles['FixedLayout--filled'],\n        vertical && stylesVertical[vertical],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </OnboardingTooltipContainer>\n  );\n};\n"],"names":["useCallback","React","classNames","useGlobalEventListener","usePlatform","useResizeObserver","useDOM","setRef","OnboardingTooltipContainer","SplitColContext","styles","stylesVertical","top","bottom","FixedLayout","children","style","vertical","getRootRef","filled","className","useParentWidth","restProps","platform","ref","useRef","width","setWidth","useState","undefined","window","colRef","useContext","parentRef","handleRootRef","node","parentElement","doResize","current","parentWidth","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed"],"mappings":";AAAA,SAASA,WAAW,QAAQ,QAAQ;AACpC,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,MAAM,QAAQ,kBAAkB;AAEzC,SAASC,0BAA0B,QAAQ,kDAAkD;AAC7F,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,iBAAiB;IACrBC,KAAKF,MAAM,CAAC,4BAA4B;IACxCG,QAAQX,WACNQ,MAAM,CAAC,+BAA+B,EACtC;AAEJ;AAuBA;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,cAAc,EACd,GAAGC,WACc;IACjB,MAAMC,WAAWnB;IACjB,MAAMoB,MAAMvB,MAAMwB,MAAM,CAAqB;IAC7C,MAAM,CAACC,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGxB;IACnB,MAAM,EAAEyB,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAACvB;IACpC,MAAMwB,YAAYhC,MAAMwB,MAAM,CAAqB;IAEnD,MAAMS,gBAAgBlC,YACpB,CAACmC;QACC,IAAI,CAACA,MAAM;YACT;QACF;QAEA5B,OAAO4B,MAAMjB;QACbX,OAAO4B,MAAMX;QACbjB,OAAO4B,KAAKC,aAAa,EAAEH;IAC7B,GACA;QAACf;KAAW;IAGd,MAAMmB,WAAW;QACf,IAAIhB,kBAAkBY,UAAUK,OAAO,EAAE;YACvC,MAAMC,cAAcN,UAAUK,OAAO,CAACE,qBAAqB,GAAGd,KAAK;YACnEC,SAASY,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,GAAGV;QAC9C,OAAO,IAAIE,QAAQO,SAAS;YAC1B,MAAMG,gBAAgBC,iBAAiBX,OAAOO,OAAO;YAErDX,SACE,CAAC,EACCI,OAAOO,OAAO,CAACK,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLnB,SAASE;QACX;IACF;IACA5B,MAAM8C,SAAS,CAACV,UAAU;QAACN;QAAQR;QAAUC;QAAKH;KAAe;IAEjElB,uBAAuB2B,QAAQ,UAAUO;IACzChC,kBAAkBgB,iBAAiBY,YAAYF,QAAQM;IAEvD,qBACE,KAAC7B;QACE,GAAGc,SAAS;QACb0B,KAAK;QACLxB,KAAKU;QACLd,WAAWlB,WACTQ,MAAM,CAAC,cAAc,EACrBa,aAAa,SAAS,gCACtBJ,UAAUT,MAAM,CAAC,sBAAsB,EACvCO,YAAYN,cAAc,CAACM,SAAS,EACpCG;QAEFJ,OAAO;YAAE,GAAGA,KAAK;YAAEU;QAAM;kBAExBX;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useDOM } from '../../lib/dom';\nimport { setRef } from '../../lib/utils';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './FixedLayout.module.css';\n\nconst stylesVertical = {\n  top: styles['FixedLayout--vertical-top'],\n  bottom: classNames(\n    styles['FixedLayout--vertical-bottom'],\n    'vkuiInternalFixedLayout--vertical-bottom',\n  ),\n};\n\nexport interface FixedLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  vertical?: 'top' | 'bottom';\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n  /**\n   * Всегда соответствовать ширине родителя.\n   * Ширина пересчитывается по событию `window` `resize`.\n   */\n  useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: 'absolute' | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  filled,\n  className,\n  useParentWidth,\n  ...restProps\n}: FixedLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n  const ref = React.useRef<HTMLElement | null>(null);\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n  const parentRef = React.useRef<HTMLElement | null>(null);\n\n  const handleRootRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (!node) {\n        return;\n      }\n\n      setRef(node, getRootRef);\n      setRef(node, ref);\n      setRef(node.parentElement, parentRef);\n    },\n    [getRootRef],\n  );\n\n  const doResize = () => {\n    if (useParentWidth && parentRef.current) {\n      const parentWidth = parentRef.current.getBoundingClientRect().width;\n      setWidth(parentWidth ? `${parentWidth}px` : undefined);\n    } else if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`,\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n\n  useGlobalEventListener(window, 'resize', doResize);\n  useResizeObserver(useParentWidth ? parentRef : colRef, doResize);\n\n  return (\n    <OnboardingTooltipContainer\n      {...restProps}\n      fixed\n      ref={handleRootRef}\n      className={classNames(\n        styles['FixedLayout'],\n        platform === 'ios' && 'vkuiInternalFixedLayout--ios',\n        filled && styles['FixedLayout--filled'],\n        vertical && stylesVertical[vertical],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </OnboardingTooltipContainer>\n  );\n};\n"],"names":["useCallback","React","classNames","useGlobalEventListener","usePlatform","useResizeObserver","useDOM","setRef","OnboardingTooltipContainer","SplitColContext","styles","stylesVertical","top","bottom","FixedLayout","children","style","vertical","getRootRef","filled","className","useParentWidth","restProps","platform","ref","useRef","width","setWidth","useState","undefined","window","colRef","useContext","parentRef","handleRootRef","node","parentElement","doResize","current","parentWidth","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed"],"mappings":";AAAA,SAASA,WAAW,QAAQ,QAAQ;AACpC,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,MAAM,QAAQ,kBAAkB;AAEzC,SAASC,0BAA0B,QAAQ,kDAAkD;AAC7F,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,iBAAiB;IACrBC,KAAKF,MAAM,CAAC,4BAA4B;IACxCG,QAAQX,WACNQ,MAAM,CAAC,+BAA+B,EACtC;AAEJ;AAuBA;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,cAAc,EACd,GAAGC,WACc;IACjB,MAAMC,WAAWnB;IACjB,MAAMoB,MAAMvB,MAAMwB,MAAM,CAAqB;IAC7C,MAAM,CAACC,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGxB;IACnB,MAAM,EAAEyB,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAACvB;IACpC,MAAMwB,YAAYhC,MAAMwB,MAAM,CAAqB;IAEnD,MAAMS,gBAAgBlC,YACpB,CAACmC;QACC,IAAI,CAACA,MAAM;YACT;QACF;QAEA5B,OAAO4B,MAAMjB;QACbX,OAAO4B,MAAMX;QACbjB,OAAO4B,KAAKC,aAAa,EAAEH;IAC7B,GACA;QAACf;KAAW;IAGd,MAAMmB,WAAW;QACf,IAAIhB,kBAAkBY,UAAUK,OAAO,EAAE;YACvC,MAAMC,cAAcN,UAAUK,OAAO,CAACE,qBAAqB,GAAGd,KAAK;YACnEC,SAASY,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,GAAGV;QAC9C,OAAO,IAAIE,QAAQO,SAAS;YAC1B,MAAMG,gBAAgBC,iBAAiBX,OAAOO,OAAO;YAErDX,SACE,CAAC,EACCI,OAAOO,OAAO,CAACK,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLnB,SAASE;QACX;IACF;IACA5B,MAAM8C,SAAS,CAACV,UAAU;QAACN;QAAQR;QAAUC;QAAKH;KAAe;IAEjElB,uBAAuB2B,QAAQ,UAAUO;IACzChC,kBAAkBgB,iBAAiBY,YAAYF,QAAQM;IAEvD,qBACE,KAAC7B;QACE,GAAGc,SAAS;QACb0B,KAAK;QACLxB,KAAKU;QACLd,WAAWlB,WACTQ,MAAM,CAAC,cAAc,EACrBa,aAAa,SAAS,gCACtBJ,UAAUT,MAAM,CAAC,sBAAsB,EACvCO,YAAYN,cAAc,CAACM,SAAS,EACpCG;QAEFJ,OAAO;YAAE,GAAGA,KAAK;YAAEU;QAAM;kBAExBX;;AAGP,EAAE"}

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

@@ -1,6 +1,6 @@
 import { type GapsProp } from '../../lib/layouts';
 import { HTMLAttributesWithRootRef } from '../../types';
-import { FlexItemProps } from './FlexItem/FlexItem';
+import { FlexItem, FlexItemProps } from './FlexItem/FlexItem';
 export type { FlexItemProps };
 type FlexContentProps = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
 export interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
@@ -12,6 +12,8 @@ export interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
      * Отступы между элементами.
      * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
      * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.
+     *
+     * TODO [>=7]: порядок следования будет [row, column]
      */
     gap?: GapsProp;
     /**
@@ -35,8 +37,7 @@ export interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
      */
     reverse?: boolean;
 }
-export declare const Flex: {
-    ({ gap, align, justify, margin, noWrap, direction, style: styleProp, reverse, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
-    Item: ({ children, alignSelf, flex, flexBasis, style, ...rest }: FlexItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Flex: React.FC<FlexProps> & {
+    Item: typeof FlexItem;
 };
 //# sourceMappingURL=Flex.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EAEd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAG9D,YAAY,EAAE,aAAa,EAAE,CAAC;AAmB9B,KAAK,gBAAgB,GACjB,OAAO,GACP,KAAK,GACL,QAAQ,GACR,cAAc,GACd,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI;8FAUd,SAAS;;CA4BX,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EAEd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAG9D,YAAY,EAAE,aAAa,EAAE,CAAC;AAmB9B,KAAK,gBAAgB,GACjB,OAAO,GACP,KAAK,GACL,QAAQ,GACR,cAAc,GACd,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC,IAAI,EAAE,OAAO,QAAQ,CAAC;CAuCvB,CAAC"}

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

@@ -1 +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","styles","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;AAC9D,OAAOC,YAAY,oBAAoB;AAIvC,MAAMC,oBAAoB;IACxB,SAASD,MAAM,CAAC,sBAAsB;IACtC,OAAOA,MAAM,CAAC,oBAAoB;IAClC,UAAUA,MAAM,CAAC,uBAAuB;IACxC,gBAAgBA,MAAM,CAAC,6BAA6B;IACpD,iBAAiBA,MAAM,CAAC,8BAA8B;IACtD,gBAAgBA,MAAM,CAAC,6BAA6B;AACtD;AAEA,MAAME,kBAAkB;IACtBC,OAAOH,MAAM,CAAC,oBAAoB;IAClCI,KAAKJ,MAAM,CAAC,kBAAkB;IAC9BK,QAAQL,MAAM,CAAC,qBAAqB;IACpCM,SAASN,MAAM,CAAC,sBAAsB;IACtCO,UAAUP,MAAM,CAAC,uBAAuB;AAC1C;AA2CA,OAAO,MAAMQ,OAAO,CAAC,EACnBC,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,OAAOC,SAAS,EAChBC,UAAU,KAAK,EACf,GAAGC,OACO;IACV,MAAM,CAACC,WAAWC,OAAO,GAAGzB,aAAac;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,KAACrB;QACE,GAAGoB,KAAK;QACTG,eAAe3B,WACbM,OAAOQ,IAAI,EACX,CAACK,UAAUb,MAAM,CAAC,aAAa,EAC/BiB,WAAWjB,MAAM,CAAC,gBAAgB,EAClCc,cAAc,SAASd,MAAM,CAAC,yBAAyB,EACvDY,WAAW,UAAUZ,MAAM,CAAC,oBAAoB,EAChD,OAAOmB,cAAc,YAAYvB,mBAAmB,CAACuB,UAAU,EAC/D,OAAOC,WAAW,YAAYvB,gBAAgB,CAACuB,OAAO,EACtDV,SAASR,eAAe,CAACQ,MAAM,EAC/BC,WAAWV,iBAAiB,CAACU,QAAQ;QAEvCI,OAAO;YAAE,GAAGC,SAAS;YAAE,GAAGD,KAAK;QAAC;;AAGtC,EAAE;AAEFP,KAAKc,IAAI,GAAGvB"}
+{"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   * TODO [>=7]: порядок следования будет [row, column]\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: React.FC<FlexProps> & {\n  Item: typeof FlexItem;\n} = ({\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","styles","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;AAC9D,OAAOC,YAAY,oBAAoB;AAIvC,MAAMC,oBAAoB;IACxB,SAASD,MAAM,CAAC,sBAAsB;IACtC,OAAOA,MAAM,CAAC,oBAAoB;IAClC,UAAUA,MAAM,CAAC,uBAAuB;IACxC,gBAAgBA,MAAM,CAAC,6BAA6B;IACpD,iBAAiBA,MAAM,CAAC,8BAA8B;IACtD,gBAAgBA,MAAM,CAAC,6BAA6B;AACtD;AAEA,MAAME,kBAAkB;IACtBC,OAAOH,MAAM,CAAC,oBAAoB;IAClCI,KAAKJ,MAAM,CAAC,kBAAkB;IAC9BK,QAAQL,MAAM,CAAC,qBAAqB;IACpCM,SAASN,MAAM,CAAC,sBAAsB;IACtCO,UAAUP,MAAM,CAAC,uBAAuB;AAC1C;AA6CA,OAAO,MAAMQ,OAET,CAAC,EACHC,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,OAAOC,SAAS,EAChBC,UAAU,KAAK,EACf,GAAGC,OACO;IACV,MAAM,CAACC,WAAWC,OAAO,GAAGzB,aAAac;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,KAACrB;QACE,GAAGoB,KAAK;QACTG,eAAe3B,WACbM,OAAOQ,IAAI,EACX,CAACK,UAAUb,MAAM,CAAC,aAAa,EAC/BiB,WAAWjB,MAAM,CAAC,gBAAgB,EAClCc,cAAc,SAASd,MAAM,CAAC,yBAAyB,EACvDY,WAAW,UAAUZ,MAAM,CAAC,oBAAoB,EAChD,OAAOmB,cAAc,YAAYvB,mBAAmB,CAACuB,UAAU,EAC/D,OAAOC,WAAW,YAAYvB,gBAAgB,CAACuB,OAAO,EACtDV,SAASR,eAAe,CAACQ,MAAM,EAC/BC,WAAWV,iBAAiB,CAACU,QAAQ;QAEvCI,OAAO;YAAE,GAAGC,SAAS;YAAE,GAAGD,KAAK;QAAC;;AAGtC,EAAE;AAEFP,KAAKc,IAAI,GAAGvB"}

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

@@ -16,5 +16,5 @@ export interface FlexItemProps extends HTMLAttributesWithRootRef<HTMLDivElement>
      */
     flexBasis: number;
 }
-export declare const FlexItem: ({ children, alignSelf, flex, flexBasis, style, ...rest }: FlexItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexItem: ({ children, alignSelf, flex, flexBasis, style, ...rest }: FlexItemProps) => React.ReactNode;
 //# sourceMappingURL=FlexItem.d.ts.map

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

@@ -1 +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"}
+{"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,KAAG,KAAK,CAAC,SAcxB,CAAC"}

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

@@ -19,8 +19,8 @@ export const FlexItem = ({ children, alignSelf, flex, flexBasis, style, ...rest
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...rest,
         style: {
-            ...style,
-            flexBasis
+            flexBasis,
+            ...style
         },
         baseClassName: classNames(styles.FlexItem, alignSelf && alignSelfClassNames[alignSelf], flex && flexClassNames[flex]),
         children: children

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

@@ -1 +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","styles","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;AAClE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,iBAAiB;IACrBC,MAAMF,MAAM,CAAC,sBAAsB;IACnCG,QAAQH,MAAM,CAAC,wBAAwB;IACvCI,SAASJ,MAAM,CAAC,yBAAyB;IACzCK,OAAOL,MAAM,CAAC,uBAAuB;AACvC;AAEA,MAAMM,sBAAsB;IAC1BC,OAAOP,MAAM,CAAC,6BAA6B;IAC3CQ,KAAKR,MAAM,CAAC,2BAA2B;IACvCS,QAAQT,MAAM,CAAC,8BAA8B;IAC7CU,UAAUV,MAAM,CAAC,gCAAgC;IACjDW,SAASX,MAAM,CAAC,+BAA+B;AACjD;AAoBA,OAAO,MAAMY,WAAW,CAAC,EACvBC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,MACW;IACd,qBACE,KAACnB;QACE,GAAGmB,IAAI;QACRD,OAAO;YAAE,GAAGA,KAAK;YAAED;QAAU;QAC7BG,eAAerB,WACbE,OAAOY,QAAQ,EACfE,aAAaR,mBAAmB,CAACQ,UAAU,EAC3CC,QAAQd,cAAc,CAACc,KAAK;kBAG7BF;;AAGP,EAAE"}
+{"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): React.ReactNode => {\n  return (\n    <RootComponent\n      {...rest}\n      style={{ flexBasis, ...style }}\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","styles","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;AAClE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,iBAAiB;IACrBC,MAAMF,MAAM,CAAC,sBAAsB;IACnCG,QAAQH,MAAM,CAAC,wBAAwB;IACvCI,SAASJ,MAAM,CAAC,yBAAyB;IACzCK,OAAOL,MAAM,CAAC,uBAAuB;AACvC;AAEA,MAAMM,sBAAsB;IAC1BC,OAAOP,MAAM,CAAC,6BAA6B;IAC3CQ,KAAKR,MAAM,CAAC,2BAA2B;IACvCS,QAAQT,MAAM,CAAC,8BAA8B;IAC7CU,UAAUV,MAAM,CAAC,gCAAgC;IACjDW,SAASX,MAAM,CAAC,+BAA+B;AACjD;AAoBA,OAAO,MAAMY,WAAW,CAAC,EACvBC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,MACW;IACd,qBACE,KAACnB;QACE,GAAGmB,IAAI;QACRD,OAAO;YAAED;YAAW,GAAGC,KAAK;QAAC;QAC7BE,eAAerB,WACbE,OAAOY,QAAQ,EACfE,aAAaR,mBAAmB,CAACQ,UAAU,EAC3CC,QAAQd,cAAc,CAACc,KAAK;kBAG7BF;;AAGP,EAAE"}

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

@@ -15,5 +15,5 @@ import * as React from 'react';
 export declare const DEFAULT_ARROW_WIDTH = 20;
 export declare const DEFAULT_ARROW_HEIGHT = 8;
 export declare const DEFAULT_ARROW_PADDING = 10;
-export declare const DefaultIcon: (props: React.SVGAttributes<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultIcon: (props: React.SVGAttributes<SVGSVGElement>) => React.ReactNode;
 //# sourceMappingURL=DefaultIcon.d.ts.map

package/dist/cssm/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,KAAK,CAAC,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,KAAG,KAAK,CAAC,SAY7E,CAAC"}

package/dist/cssm/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"],"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;QACL,GAAGL,KAAK;kBAET,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>): React.ReactNode => {\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;QACL,GAAGL,KAAK;kBAET,cAAA,KAACM;YAAKC,GAAE;YAA6CC,MAAK;;;AAGhE,EAAE"}

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

@@ -23,5 +23,5 @@ export interface FloatingArrowProps extends HTMLAttributesWithRootRef<HTMLDivEle
 /**
  * @private
  */
-export declare const FloatingArrow: ({ offset, isStaticOffset, coords, iconStyle, iconClassName, placement, getRootRef, Icon, ...restProps }: FloatingArrowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FloatingArrow: ({ offset, isStaticOffset, coords, iconStyle, iconClassName, placement, getRootRef, Icon, ...restProps }: FloatingArrowProps) => React.ReactNode;
 //# sourceMappingURL=FloatingArrow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingArrow.d.ts","sourceRoot":"","sources":["../../../../src/components/FloatingArrow/FloatingArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI/E,MAAM,MAAM,MAAM,GAAG;IACnB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAQF,MAAM,WAAW,kBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,gBAAgB;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;CAChE;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4GAUvB,kBAAkB,4CAqBpB,CAAC"}
+{"version":3,"file":"FloatingArrow.d.ts","sourceRoot":"","sources":["../../../../src/components/FloatingArrow/FloatingArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI/E,MAAM,MAAM,MAAM,GAAG;IACnB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAQF,MAAM,WAAW,kBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,gBAAgB;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;CAChE;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4GAUvB,kBAAkB,KAAG,KAAK,CAAC,SAqB7B,CAAC"}

package/dist/cssm/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    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","styles","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;AAC5C,OAAOC,YAAY,6BAA6B;AAOhD,MAAMC,sBAAsB;IAC1BC,OAAOF,MAAM,CAAC,iCAAiC;IAC/CG,QAAQH,MAAM,CAAC,kCAAkC;IACjDI,MAAMJ,MAAM,CAAC,gCAAgC;AAC/C;AAoBA;;CAEC,GACD,OAAO,MAAMK,gBAAgB,CAAC,EAC5BC,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,UAAU,EACVC,OAAOd,WAAW,EAClB,GAAGe,WACgB;IACnB,MAAM,CAACC,gBAAgBC,YAAY,GAAGC,qBACpCN,WACAH,QACAF,QACAC;IAGF,qBACE,KAACW;QACCC,KAAKP;QACLQ,OAAOJ;QACPK,WAAWvB,WACTE,MAAM,CAAC,gBAAgB,EACvBe,kBAAkBd,mBAAmB,CAACc,eAAe;QAEtD,GAAGD,SAAS;kBAEb,cAAA,KAACD;YAAKQ,WAAWvB,WAAWE,MAAM,CAAC,oBAAoB,EAAEU;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"}
+{"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): React.ReactNode => {\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","styles","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;AAC5C,OAAOC,YAAY,6BAA6B;AAOhD,MAAMC,sBAAsB;IAC1BC,OAAOF,MAAM,CAAC,iCAAiC;IAC/CG,QAAQH,MAAM,CAAC,kCAAkC;IACjDI,MAAMJ,MAAM,CAAC,gCAAgC;AAC/C;AAoBA;;CAEC,GACD,OAAO,MAAMK,gBAAgB,CAAC,EAC5BC,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,UAAU,EACVC,OAAOd,WAAW,EAClB,GAAGe,WACgB;IACnB,MAAM,CAACC,gBAAgBC,YAAY,GAAGC,qBACpCN,WACAH,QACAF,QACAC;IAGF,qBACE,KAACW;QACCC,KAAKP;QACLQ,OAAOJ;QACPK,WAAWvB,WACTE,MAAM,CAAC,gBAAgB,EACvBe,kBAAkBd,mBAAmB,CAACc,eAAe;QAEtD,GAAGD,SAAS;kBAEb,cAAA,KAACD;YAAKQ,WAAWvB,WAAWE,MAAM,CAAC,oBAAoB,EAAEU;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/cssm/components/FocusTrap/FocusTrap.d.ts

@@ -14,5 +14,5 @@ export interface FocusTrapProps<T extends HTMLElement = HTMLElement> extends All
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
  */
-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;
+export declare const FocusTrap: <T extends HTMLElement = HTMLElement>({ Component, onClose, autoFocus, restoreFocus, disabled, mount, timeout, getRootRef, children, ...restProps }: FocusTrapProps<T>) => React.ReactNode;
 //# sourceMappingURL=FocusTrap.d.ts.map

package/dist/cssm/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,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"}
+{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAYzE,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,KAAG,KAAK,CAAC,SAyM5B,CAAC"}

package/dist/cssm/components/FocusTrap/FocusTrap.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from 'react';
+import { arraysEquals } from '../../helpers/array';
 import { useExternRef } from '../../hooks/useExternRef';
 import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
 import { contains, getActiveElementByAnotherElement, getWindow, isHTMLElement, useDOM } from '../../lib/dom';
@@ -15,7 +16,9 @@ const FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
     const focusNodeByIndex = (nodeIndex)=>{
         const element = focusableNodesRef.current[nodeIndex];
         if (element) {
-            element.focus();
+            element.focus({
+                preventScroll: true
+            });
         }
     };
     const recalculateFocusableNodesRef = (parentNode)=>{
@@ -35,7 +38,13 @@ const FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
         focusableNodesRef.current = nodes;
     };
     const onMutateParentHandler = (parentNode)=>{
+        const oldFocusableNodes = [
+            ...focusableNodesRef.current
+        ];
         recalculateFocusableNodesRef(parentNode);
+        if (arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {
+            return;
+        }
         if (document) {
             const activeElement = document.activeElement;
             const currentElementIndex = Math.max(document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1, 0);

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';\nimport { arraysEquals } from '../../helpers/array';\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>): React.ReactNode => {\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        preventScroll: true,\n      });\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    const oldFocusableNodes = [...focusableNodesRef.current];\n\n    recalculateFocusableNodesRef(parentNode);\n\n    if (arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {\n      return;\n    }\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","arraysEquals","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","preventScroll","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","oldFocusableNodes","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/cssm/components/Footer/Footer.d.ts

@@ -4,5 +4,5 @@ export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
  */
-export declare const Footer: ({ children, className, ...restProps }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Footer: ({ children, className, ...restProps }: FooterProps) => React.ReactNode;
 //# sourceMappingURL=Footer.d.ts.map

package/dist/cssm/components/Footer/Footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../src/components/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,MAAM,0CAA2C,WAAW,4CAMxE,CAAC"}
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../src/components/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,MAAM,0CAA2C,WAAW,KAAG,KAAK,CAAC,SAMjF,CAAC"}

package/dist/cssm/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","styles","Footer","children","className","restProps","Component"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAIzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAwB;IACvE,qBACE,KAACL;QAASM,WAAU;QAAU,GAAGD,SAAS;QAAED,WAAWL,WAAWE,MAAM,CAAC,SAAS,EAAEG;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): React.ReactNode => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n      {children}\n    </Footnote>\n  );\n};\n"],"names":["React","classNames","Footnote","styles","Footer","children","className","restProps","Component"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAIzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAwB;IACvE,qBACE,KAACL;QAASM,WAAU;QAAU,GAAGD,SAAS;QAAED,WAAWL,WAAWE,MAAM,CAAC,SAAS,EAAEG;kBACjFD;;AAGP,EAAE"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { HasComponent, HasRootRef } from '../../types';
+export type FieldIconsAlign = 'start' | 'center' | 'end';
 export interface FormFieldProps {
     status?: 'default' | 'error' | 'valid';
     /**
@@ -11,6 +12,10 @@ export interface FormFieldProps {
      * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
      */
     before?: React.ReactNode;
+    /**
+     * Вертикальное выравнивание иконки слева
+     */
+    beforeAlign?: FieldIconsAlign;
     /**
      * Добавляет иконку справа.
      *
@@ -20,6 +25,10 @@ export interface FormFieldProps {
      * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
      */
     after?: React.ReactNode;
+    /**
+     * Вертикальное выравнивание иконки справа
+     */
+    afterAlign?: FieldIconsAlign;
     /**
      * Режим отображения.
      *
@@ -34,6 +43,6 @@ interface FormFieldOwnProps extends React.AllHTMLAttributes<HTMLElement>, HasRoo
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */
-export declare const FormField: ({ Component, status, children, getRootRef, before, after, disabled, mode, className, ...restProps }: FormFieldOwnProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormField: ({ Component, status, children, getRootRef, before, after, beforeAlign, afterAlign, disabled, mode, className, ...restProps }: FormFieldOwnProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=FormField.d.ts.map

package/dist/cssm/components/FormField/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAavD,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IACvC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC5B;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY,EACZ,cAAc;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,wGAWnB,iBAAiB,4CAgDnB,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAmBvD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEzD,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IACvC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC5B;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY,EACZ,cAAc;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,iIAanB,iBAAiB,KAAG,KAAK,CAAC,SA0D5B,CAAC"}

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

@@ -14,9 +14,14 @@ const stylesStatus = {
     error: styles['FormField--status-error'],
     valid: styles['FormField--status-valid']
 };
+const iconAlignClassNames = {
+    center: undefined,
+    start: styles['FormField__icon--align-start'],
+    end: styles['FormField__icon--align-end']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
- */ export const FormField = ({ Component = 'span', status = 'default', children, getRootRef, before, after, disabled, mode = 'default', className, ...restProps })=>{
+ */ export const FormField = ({ Component = 'span', status = 'default', children, getRootRef, before, after, beforeAlign = 'center', afterAlign = 'center', disabled, mode = 'default', className, ...restProps })=>{
     const elRef = useExternRef(getRootRef);
     const { sizeY = 'none' } = useAdaptivity();
     const [hover, setHover] = React.useState(false);
@@ -41,12 +46,12 @@ const stylesStatus = {
         className: classNames(styles['FormField'], mode === 'default' && styles['FormField--mode-default'], status !== 'default' && stylesStatus[status], sizeY !== 'regular' && sizeYClassNames[sizeY], disabled && styles['FormField--disabled'], !disabled && hover && styles['FormField--hover'], focusVisibleClassNames, className),
         children: [
             before && /*#__PURE__*/ _jsx("span", {
-                className: styles['FormField__before'],
+                className: classNames(styles['FormField__before'], iconAlignClassNames[beforeAlign]),
                 children: before
             }),
             children,
             after && /*#__PURE__*/ _jsx("span", {
-                className: classNames(styles['FormField__after'], 'vkuiInternalFormField__after'),
+                className: classNames(styles['FormField__after'], iconAlignClassNames[afterAlign], 'vkuiInternalFormField__after'),
                 children: after
             }),
             /*#__PURE__*/ _jsx("span", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { 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","styles","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;AAE5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAAC,UAAU,EAAEA,MAAM,CAAC,2BAA2B;AACjD;AAEA,MAAMG,eAAe;IACnBC,OAAOJ,MAAM,CAAC,0BAA0B;IACxCK,OAAOL,MAAM,CAAC,0BAA0B;AAC1C;AAuCA;;CAEC,GACD,OAAO,MAAMM,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,QAAQpB,aAAaa;IAC3B,MAAM,EAAEQ,QAAQ,MAAM,EAAE,GAAGtB;IAC3B,MAAM,CAACuB,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAC;IAEzC,MAAMC,cAAcvB,eAAekB;IACnC,MAAMM,yBAAyBzB,yBAAyB;QACtD0B,cAAcF;QACdR,MAAMd,MAAM,CAAC,2BAA2B;IAC1C;IAEA,MAAMyB,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAACb;QACE,GAAGS,SAAS;QACba,KAAKZ;QACLa,cAAcL;QACdM,cAAcH;QACdb,WAAWpB,WACTK,MAAM,CAAC,YAAY,EACnBc,SAAS,aAAad,MAAM,CAAC,0BAA0B,EACvDQ,WAAW,aAAaL,YAAY,CAACK,OAAO,EAC5CU,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CL,YAAYb,MAAM,CAAC,sBAAsB,EACzC,CAACa,YAAYM,SAASnB,MAAM,CAAC,mBAAmB,EAChDuB,wBACAR;;YAGDJ,wBAAU,KAACqB;gBAAKjB,WAAWf,MAAM,CAAC,oBAAoB;0BAAGW;;YACzDF;YACAG,uBACC,KAACoB;gBAAKjB,WAAWpB,WAAWK,MAAM,CAAC,mBAAmB,EAAE;0BACrDY;;0BAGL,KAACoB;gBAAKC,aAAW;gBAAClB,WAAWf,MAAM,CAAC,oBAAoB;;;;AAG9D,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { 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\nconst iconAlignClassNames = {\n  center: undefined,\n  start: styles['FormField__icon--align-start'],\n  end: styles['FormField__icon--align-end'],\n};\n\nexport type FieldIconsAlign = 'start' | 'center' | 'end';\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  beforeAlign?: FieldIconsAlign;\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  afterAlign?: FieldIconsAlign;\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  beforeAlign = 'center',\n  afterAlign = 'center',\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps): React.ReactNode => {\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 && (\n        <span className={classNames(styles['FormField__before'], iconAlignClassNames[beforeAlign])}>\n          {before}\n        </span>\n      )}\n      {children}\n      {after && (\n        <span\n          className={classNames(\n            styles['FormField__after'],\n            iconAlignClassNames[afterAlign],\n            'vkuiInternalFormField__after',\n          )}\n        >\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","styles","sizeYClassNames","none","stylesStatus","error","valid","iconAlignClassNames","center","undefined","start","end","FormField","Component","status","children","getRootRef","before","after","beforeAlign","afterAlign","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;AAE5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAAC,UAAU,EAAEA,MAAM,CAAC,2BAA2B;AACjD;AAEA,MAAMG,eAAe;IACnBC,OAAOJ,MAAM,CAAC,0BAA0B;IACxCK,OAAOL,MAAM,CAAC,0BAA0B;AAC1C;AAEA,MAAMM,sBAAsB;IAC1BC,QAAQC;IACRC,OAAOT,MAAM,CAAC,+BAA+B;IAC7CU,KAAKV,MAAM,CAAC,6BAA6B;AAC3C;AAiDA;;CAEC,GACD,OAAO,MAAMW,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,cAAc,QAAQ,EACtBC,aAAa,QAAQ,EACrBC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,QAAQ3B,aAAakB;IAC3B,MAAM,EAAEU,QAAQ,MAAM,EAAE,GAAG7B;IAC3B,MAAM,CAAC8B,OAAOC,SAAS,GAAGjC,MAAMkC,QAAQ,CAAC;IAEzC,MAAMC,cAAc9B,eAAeyB;IACnC,MAAMM,yBAAyBhC,yBAAyB;QACtDiC,cAAcF;QACdR,MAAMrB,MAAM,CAAC,2BAA2B;IAC1C;IAEA,MAAMgC,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAACf;QACE,GAAGW,SAAS;QACba,KAAKZ;QACLa,cAAcL;QACdM,cAAcH;QACdb,WAAW3B,WACTK,MAAM,CAAC,YAAY,EACnBqB,SAAS,aAAarB,MAAM,CAAC,0BAA0B,EACvDa,WAAW,aAAaV,YAAY,CAACU,OAAO,EAC5CY,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CL,YAAYpB,MAAM,CAAC,sBAAsB,EACzC,CAACoB,YAAYM,SAAS1B,MAAM,CAAC,mBAAmB,EAChD8B,wBACAR;;YAGDN,wBACC,KAACuB;gBAAKjB,WAAW3B,WAAWK,MAAM,CAAC,oBAAoB,EAAEM,mBAAmB,CAACY,YAAY;0BACtFF;;YAGJF;YACAG,uBACC,KAACsB;gBACCjB,WAAW3B,WACTK,MAAM,CAAC,mBAAmB,EAC1BM,mBAAmB,CAACa,WAAW,EAC/B;0BAGDF;;0BAGL,KAACsB;gBAAKC,aAAW;gBAAClB,WAAWtB,MAAM,CAAC,oBAAoB;;;;AAG9D,EAAE"}

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

@@ -55,6 +55,14 @@
   }
 }
 
+.FormField__icon--align-start {
+  align-self: flex-start;
+}
+
+.FormField__icon--align-end {
+  align-self: flex-end;
+}
+
 .FormField__before {
   color: var(--vkui--color_icon_accent);
 }

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { HasDataAttribute } from '../../types';
+export interface FormFieldClearButtonProps extends HasDataAttribute {
+    className?: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export declare const FormFieldClearButton: ({ className, onClick, ...restProps }: FormFieldClearButtonProps) => React.ReactNode;
+//# sourceMappingURL=FormFieldClearButton.d.ts.map

package/dist/cssm/components/FormFieldClearButton/FormFieldClearButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldClearButton.d.ts","sourceRoot":"","sources":["../../../../src/components/FormFieldClearButton/FormFieldClearButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,yCAI9B,yBAAyB,KAAG,KAAK,CAAC,SAoBpC,CAAC"}

package/dist/cssm/components/FormFieldClearButton/FormFieldClearButton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon16Cancel } from '@vkontakte/icons';
+import { stopPropagation } from '../../lib/utils';
+import { IconButton } from '../IconButton/IconButton';
+export const FormFieldClearButton = ({ className, onClick, ...restProps })=>{
+    return /*#__PURE__*/ _jsx(IconButton, {
+        Component: "button",
+        label: "Очистить поле",
+        onKeyDown: stopPropagation,
+        type: "button",
+        activeMode: "opacity",
+        hoverMode: "opacity",
+        ...restProps,
+        className: className,
+        onClick: (e)=>{
+            stopPropagation(e);
+            e.preventDefault();
+            onClick();
+        },
+        children: /*#__PURE__*/ _jsx(Icon16Cancel, {})
+    });
+};
+
+//# sourceMappingURL=FormFieldClearButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/FormFieldClearButton/FormFieldClearButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { stopPropagation } from '../../lib/utils';\nimport { HasDataAttribute } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport interface FormFieldClearButtonProps extends HasDataAttribute {\n  className?: string;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport const FormFieldClearButton = ({\n  className,\n  onClick,\n  ...restProps\n}: FormFieldClearButtonProps): React.ReactNode => {\n  return (\n    <IconButton\n      Component=\"button\"\n      label=\"Очистить поле\"\n      onKeyDown={stopPropagation}\n      type=\"button\"\n      activeMode=\"opacity\"\n      hoverMode=\"opacity\"\n      {...restProps}\n      className={className}\n      onClick={(e) => {\n        stopPropagation(e);\n        e.preventDefault();\n        onClick();\n      }}\n    >\n      <Icon16Cancel />\n    </IconButton>\n  );\n};\n"],"names":["React","Icon16Cancel","stopPropagation","IconButton","FormFieldClearButton","className","onClick","restProps","Component","label","onKeyDown","type","activeMode","hoverMode","e","preventDefault"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,eAAe,QAAQ,kBAAkB;AAElD,SAASC,UAAU,QAAQ,2BAA2B;AAQtD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,SAAS,EACTC,OAAO,EACP,GAAGC,WACuB;IAC1B,qBACE,KAACJ;QACCK,WAAU;QACVC,OAAM;QACNC,WAAWR;QACXS,MAAK;QACLC,YAAW;QACXC,WAAU;QACT,GAAGN,SAAS;QACbF,WAAWA;QACXC,SAAS,CAACQ;YACRZ,gBAAgBY;YAChBA,EAAEC,cAAc;YAChBT;QACF;kBAEA,cAAA,KAACL;;AAGP,EAAE"}

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

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import { HasComponent, HasRootRef } from '../../types';
 import { RemovableProps } from '../Removable/Removable';
+import { FormItemTop } from './FormItemTop/FormItemTop';
+import { FormItemTopAside } from './FormItemTop/FormItemTopAside';
+import { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';
 export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, RemovableProps {
     top?: React.ReactNode;
+    topId?: string;
     /**
      * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.
      */
@@ -48,20 +52,9 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
-export declare const FormItem: {
-    ({ children, top, topMultiline, topComponent: topComponentProp, bottom, status, removable, onRemove, removePlaceholder, getRootRef, htmlFor, bottomId, noPadding, topNode, required, ...restProps }: FormItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-    Top: {
-        (props: import("./FormItemTop/FormItemTop").FormItemTopProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    TopLabel: {
-        ({ children, Component: componentProp, htmlFor, multiline, ...restProps }: import("./FormItemTop/FormItemTopLabel").FormItemTopLabelProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    TopAside: {
-        ({ children, ...restProps }: import("./FormItemTop/FormItemTopAside").FormItemTopAsideProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+export declare const FormItem: React.FC<FormItemProps> & {
+    Top: typeof FormItemTop;
+    TopLabel: typeof FormItemTopLabel;
+    TopAside: typeof FormItemTopAside;
 };
 //# sourceMappingURL=FormItem.d.ts.map