@vkontakte/vkui 6.2.1 → 6.3.0

package/dist/cjs/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":["FixedLayout","stylesVertical","top","bottom","classNames","children","style","vertical","getRootRef","filled","className","useParentWidth","restProps","platform","usePlatform","ref","React","useRef","width","setWidth","useState","undefined","window","useDOM","colRef","useContext","SplitColContext","parentRef","handleRootRef","useCallback","node","setRef","parentElement","doResize","current","parentWidth","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","useResizeObserver","OnboardingTooltipContainer","fixed"],"mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;;iEA7Ce;sBAED;wCACY;6BACX;mCACM;qBACX;uBACA;4CAEoB;iCACX;AAGhC,MAAMC,iBAAiB;IACrBC,GAAG;IACHC,QAAQC,IAAAA,gBAAU,sCAEhB;AAEJ;AA0BO,MAAMJ,cAAc;QAAC,EAC1BK,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,cAAc,EAEG,WADdC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAMC,MAAMC,OAAMC,MAAM,CAAqB;IAC7C,MAAM,CAACC,OAAOC,SAAS,GAAGH,OAAMI,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGC,IAAAA,WAAM;IACzB,MAAM,EAAEC,MAAM,EAAE,GAAGR,OAAMS,UAAU,CAACC,gCAAe;IACnD,MAAMC,YAAYX,OAAMC,MAAM,CAAqB;IAEnD,MAAMW,gBAAgBC,IAAAA,kBAAW,EAC/B,CAACC;QACC,IAAI,CAACA,MAAM;YACT;QACF;QAEAC,IAAAA,aAAM,EAACD,MAAMtB;QACbuB,IAAAA,aAAM,EAACD,MAAMf;QACbgB,IAAAA,aAAM,EAACD,KAAKE,aAAa,EAAEL;IAC7B,GACA;QAACnB;KAAW;IAGd,MAAMyB,WAAW;QACf,IAAItB,kBAAkBgB,UAAUO,OAAO,EAAE;YACvC,MAAMC,cAAcR,UAAUO,OAAO,CAACE,qBAAqB,GAAGlB,KAAK;YACnEC,SAASgB,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,GAAGd;QAC9C,OAAO,IAAIG,mBAAAA,6BAAAA,OAAQU,OAAO,EAAE;YAC1B,MAAMG,gBAAgBC,iBAAiBd,OAAOU,OAAO;YAErDf,SACE,CAAC,EACCK,OAAOU,OAAO,CAACK,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLvB,SAASE;QACX;IACF;IACAL,OAAM2B,SAAS,CAACV,UAAU;QAACT;QAAQX;QAAUE;QAAKJ;KAAe;IAEjEiC,IAAAA,8CAAsB,EAACtB,QAAQ,UAAUW;IACzCY,IAAAA,oCAAiB,EAAClC,iBAAiBgB,YAAYH,QAAQS;IAEvD,qBACE,qBAACa,sDAA0B,8CACrBlC;QACJmC,KAAK;QACLhC,KAAKa;QACLlB,WAAWN,IAAAA,gBAAU,qBAEnBS,aAAa,SAAS,gCACtBJ,qCACAF,YAAYN,cAAc,CAACM,SAAS,EACpCG;QAEFJ,OAAO,4CAAKA;YAAOY;;kBAElBb;;AAGP"}
+{"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":["FixedLayout","stylesVertical","top","bottom","classNames","children","style","vertical","getRootRef","filled","className","useParentWidth","restProps","platform","usePlatform","ref","React","useRef","width","setWidth","useState","undefined","window","useDOM","colRef","useContext","SplitColContext","parentRef","handleRootRef","useCallback","node","setRef","parentElement","doResize","current","parentWidth","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","useResizeObserver","OnboardingTooltipContainer","fixed"],"mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;;iEA7Ce;sBAED;wCACY;6BACX;mCACM;qBACX;uBACA;4CAEoB;iCACX;AAGhC,MAAMC,iBAAiB;IACrBC,GAAG;IACHC,QAAQC,IAAAA,gBAAU,sCAEhB;AAEJ;AA0BO,MAAMJ,cAAc;QAAC,EAC1BK,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,cAAc,EAEG,WADdC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAMC,MAAMC,OAAMC,MAAM,CAAqB;IAC7C,MAAM,CAACC,OAAOC,SAAS,GAAGH,OAAMI,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGC,IAAAA,WAAM;IACzB,MAAM,EAAEC,MAAM,EAAE,GAAGR,OAAMS,UAAU,CAACC,gCAAe;IACnD,MAAMC,YAAYX,OAAMC,MAAM,CAAqB;IAEnD,MAAMW,gBAAgBC,IAAAA,kBAAW,EAC/B,CAACC;QACC,IAAI,CAACA,MAAM;YACT;QACF;QAEAC,IAAAA,aAAM,EAACD,MAAMtB;QACbuB,IAAAA,aAAM,EAACD,MAAMf;QACbgB,IAAAA,aAAM,EAACD,KAAKE,aAAa,EAAEL;IAC7B,GACA;QAACnB;KAAW;IAGd,MAAMyB,WAAW;QACf,IAAItB,kBAAkBgB,UAAUO,OAAO,EAAE;YACvC,MAAMC,cAAcR,UAAUO,OAAO,CAACE,qBAAqB,GAAGlB,KAAK;YACnEC,SAASgB,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,GAAGd;QAC9C,OAAO,IAAIG,mBAAAA,6BAAAA,OAAQU,OAAO,EAAE;YAC1B,MAAMG,gBAAgBC,iBAAiBd,OAAOU,OAAO;YAErDf,SACE,CAAC,EACCK,OAAOU,OAAO,CAACK,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLvB,SAASE;QACX;IACF;IACAL,OAAM2B,SAAS,CAACV,UAAU;QAACT;QAAQX;QAAUE;QAAKJ;KAAe;IAEjEiC,IAAAA,8CAAsB,EAACtB,QAAQ,UAAUW;IACzCY,IAAAA,oCAAiB,EAAClC,iBAAiBgB,YAAYH,QAAQS;IAEvD,qBACE,qBAACa,sDAA0B,8CACrBlC;QACJmC,KAAK;QACLhC,KAAKa;QACLlB,WAAWN,IAAAA,gBAAU,qBAEnBS,aAAa,SAAS,gCACtBJ,qCACAF,YAAYN,cAAc,CAACM,SAAS,EACpCG;QAEFJ,OAAO,4CAAKA;YAAOY;;kBAElBb;;AAGP"}

package/dist/cjs/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/cjs/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/cjs/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":["Flex","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","gap","align","justify","margin","noWrap","direction","style","styleProp","reverse","props","columnGap","rowGap","calculateGap","RootComponent","baseClassName","classNames","columnGapClassNames","rowGapClassNames","Item","FlexItem"],"mappings":";;;;+BAwEaA;;;eAAAA;;;;;;;sBAxEc;yBAMpB;+BAEuB;0BACU;AAKxC,MAAMC,oBAAoB;IACxB,OAAO;IACP,KAAK;IACL,QAAQ;IACR,cAAc;IACd,eAAe;IACf,cAAc;AAChB;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AA2CO,MAAMP,OAAO;QAAC,EACnBQ,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,OAAOC,SAAS,EAChBC,UAAU,KAAK,EAEL,WADPC;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,CAACE,WAAWC,OAAO,GAAGC,IAAAA,qBAAY,EAACZ;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,qBAACG,4BAAa,8CACRJ;QACJK,eAAeC,IAAAA,gBAAU,cAEvB,CAACX,4BACDI,gCACAH,cAAc,uCACdF,WAAW,mCACX,OAAOO,cAAc,YAAYM,4BAAmB,CAACN,UAAU,EAC/D,OAAOC,WAAW,YAAYM,yBAAgB,CAACN,OAAO,EACtDV,SAASP,eAAe,CAACO,MAAM,EAC/BC,WAAWT,iBAAiB,CAACS,QAAQ;QAEvCI,OAAO,qBAAKC,WAAcD;;AAGhC;AAEAd,KAAK0B,IAAI,GAAGC,kBAAQ"}
+{"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":["Flex","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","gap","align","justify","margin","noWrap","direction","style","styleProp","reverse","props","columnGap","rowGap","calculateGap","RootComponent","baseClassName","classNames","columnGapClassNames","rowGapClassNames","Item","FlexItem"],"mappings":";;;;+BA0EaA;;;eAAAA;;;;;;;sBA1Ec;yBAMpB;+BAEuB;0BACU;AAKxC,MAAMC,oBAAoB;IACxB,OAAO;IACP,KAAK;IACL,QAAQ;IACR,cAAc;IACd,eAAe;IACf,cAAc;AAChB;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AA6CO,MAAMP,OAET;QAAC,EACHQ,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,OAAOC,SAAS,EAChBC,UAAU,KAAK,EAEL,WADPC;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,CAACE,WAAWC,OAAO,GAAGC,IAAAA,qBAAY,EAACZ;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,qBAACG,4BAAa,8CACRJ;QACJK,eAAeC,IAAAA,gBAAU,cAEvB,CAACX,4BACDI,gCACAH,cAAc,uCACdF,WAAW,mCACX,OAAOO,cAAc,YAAYM,4BAAmB,CAACN,UAAU,EAC/D,OAAOC,WAAW,YAAYM,yBAAgB,CAACN,OAAO,EACtDV,SAASP,eAAe,CAACO,MAAM,EAC/BC,WAAWT,iBAAiB,CAACS,QAAQ;QAEvCI,OAAO,qBAAKC,WAAcD;;AAGhC;AAEAd,KAAK0B,IAAI,GAAGC,kBAAQ"}

package/dist/cjs/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/cjs/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/cjs/components/Flex/FlexItem/FlexItem.js

@@ -36,9 +36,9 @@ const FlexItem = (_param)=>{
         "style"
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, rest), {
-        style: _object_spread_props._(_object_spread._({}, style), {
+        style: _object_spread._({
             flexBasis
-        }),
+        }, style),
         baseClassName: (0, _vkjs.classNames)("vkuiFlexItem", alignSelf && alignSelfClassNames[alignSelf], flex && flexClassNames[flex]),
         children: children
     }));

package/dist/cjs/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":["FlexItem","flexClassNames","grow","shrink","content","fixed","alignSelfClassNames","start","end","center","baseline","stretch","children","alignSelf","flex","flexBasis","style","rest","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;sBAtCc;+BAEG;AAG9B,MAAMC,iBAAiB;IACrBC,IAAI;IACJC,MAAM;IACNC,OAAO;IACPC,KAAK;AACP;AAEA,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,QAAQ;IACRC,OAAO;AACT;AAoBO,MAAMX,WAAW;QAAC,EACvBY,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,KAAK,EAES,WADXC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,4BAAa,8CACRD;QACJD,OAAO,4CAAKA;YAAOD;;QACnBI,eAAeC,IAAAA,gBAAU,kBAEvBP,aAAaP,mBAAmB,CAACO,UAAU,EAC3CC,QAAQb,cAAc,CAACa,KAAK;kBAG7BF;;AAGP"}
+{"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":["FlexItem","flexClassNames","grow","shrink","content","fixed","alignSelfClassNames","start","end","center","baseline","stretch","children","alignSelf","flex","flexBasis","style","rest","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;sBAtCc;+BAEG;AAG9B,MAAMC,iBAAiB;IACrBC,IAAI;IACJC,MAAM;IACNC,OAAO;IACPC,KAAK;AACP;AAEA,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,QAAQ;IACRC,OAAO;AACT;AAoBO,MAAMX,WAAW;QAAC,EACvBY,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,KAAK,EAES,WADXC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,4BAAa,8CACRD;QACJD,OAAO;YAAED;WAAcC;QACvBG,eAAeC,IAAAA,gBAAU,kBAEvBP,aAAaP,mBAAmB,CAACO,UAAU,EAC3CC,QAAQb,cAAc,CAACa,KAAK;kBAG7BF;;AAGP"}

package/dist/cjs/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/cjs/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/cjs/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":["DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DEFAULT_ARROW_WIDTH","DefaultIcon","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","props","svg","width","height","viewBox","xmlns","path","d","fill"],"mappings":";;;;;;;;;;;IAiBaA,oBAAoB;eAApBA;;IACAC,qBAAqB;eAArBA;;IAFAC,mBAAmB;eAAnBA;;IAOAC,WAAW;eAAXA;;;;;;;iEAvBU;AAgBhB,MAAMD,sBAAsB;AAC5B,MAAMF,uBAAuB;AAC7B,MAAMC,wBAAwB;AAErC,MAAMG,kBAAkB;AACxB,MAAMC,gCAAgCL,uBAAuBI;AAEtD,MAAMD,cAAc,CAACG;IAC1B,qBACE,qBAACC;QACCC,OAAON;QACPO,QAAQJ;QACRK,SAAS,CAAC,IAAI,EAAER,oBAAoB,CAAC,EAAEG,8BAA8B,CAAC;QACtEM,OAAM;OACFL;kBAEJ,cAAA,qBAACM;YAAKC,GAAE;YAA6CC,MAAK;;;AAGhE"}
+{"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":["DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DEFAULT_ARROW_WIDTH","DefaultIcon","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","props","svg","width","height","viewBox","xmlns","path","d","fill"],"mappings":";;;;;;;;;;;IAiBaA,oBAAoB;eAApBA;;IACAC,qBAAqB;eAArBA;;IAFAC,mBAAmB;eAAnBA;;IAOAC,WAAW;eAAXA;;;;;;;iEAvBU;AAgBhB,MAAMD,sBAAsB;AAC5B,MAAMF,uBAAuB;AAC7B,MAAMC,wBAAwB;AAErC,MAAMG,kBAAkB;AACxB,MAAMC,gCAAgCL,uBAAuBI;AAEtD,MAAMD,cAAc,CAACG;IAC1B,qBACE,qBAACC;QACCC,OAAON;QACPO,QAAQJ;QACRK,SAAS,CAAC,IAAI,EAAER,oBAAoB,CAAC,EAAEG,8BAA8B,CAAC;QACtEM,OAAM;OACFL;kBAEJ,cAAA,qBAACM;YAAKC,GAAE;YAA6CC,MAAK;;;AAGhE"}

package/dist/cjs/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/cjs/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/cjs/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":["FloatingArrow","placementClassNames","right","bottom","left","offset","isStaticOffset","coords","iconStyle","iconClassName","placement","getRootRef","Icon","DefaultIcon","restProps","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","classNames","x","y","withOffset","isVerticalPlacement","parsedCoords","startsWith","xOffsetProp","getXOffsetProp","top","yOffsetProp","getYOffsetProp","undefined","endsWith"],"mappings":";;;;+BAuCaA;;;eAAAA;;;;;;;;iEAvCU;sBACI;6BAGC;AAQ5B,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AAuBO,MAAMJ,gBAAgB;QAAC,EAC5BK,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,UAAU,EACVC,OAAOC,wBAAW,EAEC,WADhBC;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACG,gBAAgBC,YAAY,GAAGC,qBACpCP,WACAH,QACAF,QACAC;IAGF,qBACE,qBAACY;QACCC,KAAKR;QACLS,OAAOJ;QACPK,WAAWC,IAAAA,gBAAU,uBAEnBP,kBAAkBd,mBAAmB,CAACc,eAAe;OAEnDD;kBAEJ,cAAA,qBAACF;YAAKS,WAAWC,IAAAA,gBAAU,2BAA8Bb;YAAgBW,OAAOZ;;;AAGtF;AAEA,SAASS,qBACPP,SAAoB,EACpBH,SAAiB;IAAEgB,GAAG;IAAGC,GAAG;AAAE,CAAC,EAC/BnB,SAAS,CAAC,EACVC,iBAAiB,KAAK;IAEtB,MAAMmB,aAAa,CAACC;QAClB,MAAMC,eAAe;YAAEJ,GAAGhB,OAAOgB,CAAC,IAAI;YAAGC,GAAGjB,OAAOiB,CAAC,IAAI;QAAE;QAE1D,IAAIE,qBAAqB;YACvB,OAAOpB,iBAAiBD,SAASsB,aAAaH,CAAC,GAAGnB;QACpD,OAAO;YACL,OAAOC,iBAAiBD,SAASsB,aAAaJ,CAAC,GAAGlB;QACpD;IACF;IAEA,IAAIK,UAAUkB,UAAU,CAAC,QAAQ;QAC/B,MAAMC,cAAcC,eAAepB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACEyB,KAAK;gBACL,CAACF,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO,IAAIf,UAAUkB,UAAU,CAAC,UAAU;QACxC,MAAMI,cAAcC,eAAevB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAAC0B,YAAY,EAAEP,WAAW;gBAC1BrB,MAAM;YACR;SACD;IACH,OAAO,IAAIM,UAAUkB,UAAU,CAAC,WAAW;QACzC,MAAMC,cAAcC,eAAepB,WAAWJ;QAC9C,OAAO;YACL4B;YACA;gBACE/B,QAAQ;gBACR,CAAC0B,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO;QACL,MAAMO,cAAcC,eAAevB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAAC0B,YAAY,EAAEP,WAAW;gBAC1BvB,OAAO;YACT;SACD;IACH;AACF;AAEA,SAAS4B,eAAepB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUyB,QAAQ,CAAC,UAAU7B,iBAAiB,UAAU;AACjE;AAEA,SAAS2B,eAAevB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUyB,QAAQ,CAAC,UAAU7B,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":["FloatingArrow","placementClassNames","right","bottom","left","offset","isStaticOffset","coords","iconStyle","iconClassName","placement","getRootRef","Icon","DefaultIcon","restProps","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","classNames","x","y","withOffset","isVerticalPlacement","parsedCoords","startsWith","xOffsetProp","getXOffsetProp","top","yOffsetProp","getYOffsetProp","undefined","endsWith"],"mappings":";;;;+BAuCaA;;;eAAAA;;;;;;;;iEAvCU;sBACI;6BAGC;AAQ5B,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AAuBO,MAAMJ,gBAAgB;QAAC,EAC5BK,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,UAAU,EACVC,OAAOC,wBAAW,EAEC,WADhBC;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACG,gBAAgBC,YAAY,GAAGC,qBACpCP,WACAH,QACAF,QACAC;IAGF,qBACE,qBAACY;QACCC,KAAKR;QACLS,OAAOJ;QACPK,WAAWC,IAAAA,gBAAU,uBAEnBP,kBAAkBd,mBAAmB,CAACc,eAAe;OAEnDD;kBAEJ,cAAA,qBAACF;YAAKS,WAAWC,IAAAA,gBAAU,2BAA8Bb;YAAgBW,OAAOZ;;;AAGtF;AAEA,SAASS,qBACPP,SAAoB,EACpBH,SAAiB;IAAEgB,GAAG;IAAGC,GAAG;AAAE,CAAC,EAC/BnB,SAAS,CAAC,EACVC,iBAAiB,KAAK;IAEtB,MAAMmB,aAAa,CAACC;QAClB,MAAMC,eAAe;YAAEJ,GAAGhB,OAAOgB,CAAC,IAAI;YAAGC,GAAGjB,OAAOiB,CAAC,IAAI;QAAE;QAE1D,IAAIE,qBAAqB;YACvB,OAAOpB,iBAAiBD,SAASsB,aAAaH,CAAC,GAAGnB;QACpD,OAAO;YACL,OAAOC,iBAAiBD,SAASsB,aAAaJ,CAAC,GAAGlB;QACpD;IACF;IAEA,IAAIK,UAAUkB,UAAU,CAAC,QAAQ;QAC/B,MAAMC,cAAcC,eAAepB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACEyB,KAAK;gBACL,CAACF,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO,IAAIf,UAAUkB,UAAU,CAAC,UAAU;QACxC,MAAMI,cAAcC,eAAevB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAAC0B,YAAY,EAAEP,WAAW;gBAC1BrB,MAAM;YACR;SACD;IACH,OAAO,IAAIM,UAAUkB,UAAU,CAAC,WAAW;QACzC,MAAMC,cAAcC,eAAepB,WAAWJ;QAC9C,OAAO;YACL4B;YACA;gBACE/B,QAAQ;gBACR,CAAC0B,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO;QACL,MAAMO,cAAcC,eAAevB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAAC0B,YAAY,EAAEP,WAAW;gBAC1BvB,OAAO;YACT;SACD;IACH;AACF;AAEA,SAAS4B,eAAepB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUyB,QAAQ,CAAC,UAAU7B,iBAAiB,UAAU;AACjE;AAEA,SAAS2B,eAAevB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUyB,QAAQ,CAAC,UAAU7B,iBAAiB,WAAW;AAClE"}

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

@@ -13,6 +13,7 @@ const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
+const _array = require("../../helpers/array");
 const _useExternRef = require("../../hooks/useExternRef");
 const _accessibility = require("../../lib/accessibility");
 const _dom = require("../../lib/dom");
@@ -37,7 +38,9 @@ const FocusTrap = (_param)=>{
     const focusNodeByIndex = (nodeIndex)=>{
         const element = focusableNodesRef.current[nodeIndex];
         if (element) {
-            element.focus();
+            element.focus({
+                preventScroll: true
+            });
         }
     };
     const recalculateFocusableNodesRef = (parentNode)=>{
@@ -57,7 +60,13 @@ const FocusTrap = (_param)=>{
         focusableNodesRef.current = nodes;
     };
     const onMutateParentHandler = (parentNode)=>{
+        const oldFocusableNodes = [
+            ...focusableNodesRef.current
+        ];
         recalculateFocusableNodesRef(parentNode);
+        if ((0, _array.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/cjs/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":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","disabled","mount","timeout","getRootRef","children","restProps","ref","useExternRef","document","useDOM","focusableNodesRef","useRef","restoreFocusTo","setRestoreFocusTo","useState","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","useIsomorphicLayoutEffect","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","getActiveElementByAnotherElement","contains","timeoutId","setTimeout","clearTimeout","restoreFocusImpl","useCallback","shouldRestoreFocus","isHTMLElement","calculateRestoreFocusTo","tryToRestoreFocusOnUnmount","tryToRestoreFocusWhenFakeUnmount","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","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":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","disabled","mount","timeout","getRootRef","children","restProps","ref","useExternRef","document","useDOM","focusableNodesRef","useRef","restoreFocusTo","setRestoreFocusTo","useState","focusNodeByIndex","nodeIndex","element","current","focus","preventScroll","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","oldFocusableNodes","arraysEquals","activeElement","currentElementIndex","Math","max","indexOf","useIsomorphicLayoutEffect","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","getActiveElementByAnotherElement","contains","timeoutId","setTimeout","clearTimeout","restoreFocusImpl","useCallback","shouldRestoreFocus","isHTMLElement","calculateRestoreFocusTo","tryToRestoreFocusOnUnmount","tryToRestoreFocusWhenFakeUnmount","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","addEventListener","capture","removeEventListener","tabIndex"],"mappings":"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"}

package/dist/cjs/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/cjs/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/cjs/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":["Footer","children","className","restProps","Footnote","Component","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;;iEAXU;sBACI;0BAEF;AAQlB,MAAMA,SAAS;QAAC,EAAEC,QAAQ,EAAEC,SAAS,EAA6B,WAAxBC;QAAxBF;QAAUC;;IACjC,qBACE,qBAACE,kBAAQ;QAACC,WAAU;OAAaF;QAAWD,WAAWI,IAAAA,gBAAU,gBAAmBJ;kBACjFD;;AAGP"}
+{"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":["Footer","children","className","restProps","Footnote","Component","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;;iEAXU;sBACI;0BAEF;AAQlB,MAAMA,SAAS;QAAC,EAAEC,QAAQ,EAAEC,SAAS,EAA6B,WAAxBC;QAAxBF;QAAUC;;IACjC,qBACE,qBAACE,kBAAQ;QAACC,WAAU;OAAaF;QAAWD,WAAWI,IAAAA,gBAAU,gBAAmBJ;kBACjFD;;AAGP"}

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

@@ -27,14 +27,21 @@ const stylesStatus = {
     error: "vkuiFormField--status-error",
     valid: "vkuiFormField--status-valid"
 };
+const iconAlignClassNames = {
+    center: undefined,
+    start: "vkuiFormField__icon--align-start",
+    end: "vkuiFormField__icon--align-end"
+};
 const FormField = (_param)=>{
-    var { Component = 'span', status = 'default', children, getRootRef, before, after, disabled, mode = 'default', className } = _param, restProps = _object_without_properties._(_param, [
+    var { Component = 'span', status = 'default', children, getRootRef, before, after, beforeAlign = 'center', afterAlign = 'center', disabled, mode = 'default', className } = _param, restProps = _object_without_properties._(_param, [
         "Component",
         "status",
         "children",
         "getRootRef",
         "before",
         "after",
+        "beforeAlign",
+        "afterAlign",
         "disabled",
         "mode",
         "className"
@@ -62,12 +69,12 @@ const FormField = (_param)=>{
         className: (0, _vkjs.classNames)("vkuiFormField", mode === 'default' && "vkuiFormField--mode-default", status !== 'default' && stylesStatus[status], sizeY !== 'regular' && sizeYClassNames[sizeY], disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", focusVisibleClassNames, className),
         children: [
             before && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                className: "vkuiFormField__before",
+                className: (0, _vkjs.classNames)("vkuiFormField__before", iconAlignClassNames[beforeAlign]),
                 children: before
             }),
             children,
             after && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                className: (0, _vkjs.classNames)("vkuiFormField__after", 'vkuiInternalFormField__after'),
+                className: (0, _vkjs.classNames)("vkuiFormField__after", iconAlignClassNames[afterAlign], 'vkuiInternalFormField__after'),
                 children: after
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {

package/dist/cjs/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":["FormField","sizeYClassNames","none","stylesStatus","error","valid","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","useExternRef","sizeY","useAdaptivity","hover","setHover","React","useState","focusWithin","useFocusWithin","focusVisibleClassNames","useFocusVisibleClassName","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","classNames","span","aria-hidden"],"mappings":";;;;+BA2DaA;;;eAAAA;;;;;;;;iEA3DU;sBACI;+BACG;8BACD;0CACY;gCACV;AAI/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,eAAe;IACnBC,KAAK;IACLC,KAAK;AACP;AA0CO,MAAML,YAAY;QAAC,EACxBM,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EAES,WADfC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,QAAQC,IAAAA,0BAAY,EAACR;IAC3B,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAM,CAACC,OAAOC,SAAS,GAAGC,OAAMC,QAAQ,CAAC;IAEzC,MAAMC,cAAcC,IAAAA,8BAAc,EAACT;IACnC,MAAMU,yBAAyBC,IAAAA,kDAAwB,EAAC;QACtDC,cAAcJ;QACdX,IAAI;IACN;IAEA,MAAMgB,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBV,SAAS;IACX;IAEA,MAAMW,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBV,SAAS;IACX;IAEA,qBACE,sBAACf,uDACKS;QACJkB,KAAKjB;QACLkB,cAAcL;QACdM,cAAcH;QACdlB,WAAWsB,IAAAA,gBAAU,mBAEnBvB,SAAS,4CACTN,WAAW,aAAaJ,YAAY,CAACI,OAAO,EAC5CW,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CN,uCACA,CAACA,YAAYQ,iCACbM,wBACAZ;;YAGDJ,wBAAU,qBAAC2B;gBAAKvB,SAAS;0BAAgCJ;;YACzDF;YACAG,uBACC,qBAAC0B;gBAAKvB,WAAWsB,IAAAA,gBAAU,0BAA6B;0BACrDzB;;0BAGL,qBAAC0B;gBAAKC,aAAW;gBAACxB,SAAS;;;;AAGjC"}
+{"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":["FormField","sizeYClassNames","none","stylesStatus","error","valid","iconAlignClassNames","center","undefined","start","end","Component","status","children","getRootRef","before","after","beforeAlign","afterAlign","disabled","mode","className","restProps","elRef","useExternRef","sizeY","useAdaptivity","hover","setHover","React","useState","focusWithin","useFocusWithin","focusVisibleClassNames","useFocusVisibleClassName","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","classNames","span","aria-hidden"],"mappings":";;;;+BA2EaA;;;eAAAA;;;;;;;;iEA3EU;sBACI;+BACG;8BACD;0CACY;gCACV;AAI/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,eAAe;IACnBC,KAAK;IACLC,KAAK;AACP;AAEA,MAAMC,sBAAsB;IAC1BC,QAAQC;IACRC,KAAK;IACLC,GAAG;AACL;AAoDO,MAAMV,YAAY;QAAC,EACxBW,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,EAES,WADfC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,QAAQC,IAAAA,0BAAY,EAACV;IAC3B,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAM,CAACC,OAAOC,SAAS,GAAGC,OAAMC,QAAQ,CAAC;IAEzC,MAAMC,cAAcC,IAAAA,8BAAc,EAACT;IACnC,MAAMU,yBAAyBC,IAAAA,kDAAwB,EAAC;QACtDC,cAAcJ;QACdX,IAAI;IACN;IAEA,MAAMgB,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBV,SAAS;IACX;IAEA,MAAMW,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBV,SAAS;IACX;IAEA,qBACE,sBAACjB,uDACKW;QACJkB,KAAKjB;QACLkB,cAAcL;QACdM,cAAcH;QACdlB,WAAWsB,IAAAA,gBAAU,mBAEnBvB,SAAS,4CACTR,WAAW,aAAaT,YAAY,CAACS,OAAO,EAC5Ca,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CN,uCACA,CAACA,YAAYQ,iCACbM,wBACAZ;;YAGDN,wBACC,qBAAC6B;gBAAKvB,WAAWsB,IAAAA,gBAAU,2BAA8BrC,mBAAmB,CAACW,YAAY;0BACtFF;;YAGJF;YACAG,uBACC,qBAAC4B;gBACCvB,WAAWsB,IAAAA,gBAAU,0BAEnBrC,mBAAmB,CAACY,WAAW,EAC/B;0BAGDF;;0BAGL,qBAAC4B;gBAAKC,aAAW;gBAACxB,SAAS;;;;AAGjC"}

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FormFieldClearButton", {
+    enumerable: true,
+    get: function() {
+        return FormFieldClearButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _icons = require("@vkontakte/icons");
+const _utils = require("../../lib/utils");
+const _IconButton = require("../IconButton/IconButton");
+const FormFieldClearButton = (_param)=>{
+    var { className, onClick } = _param, restProps = _object_without_properties._(_param, [
+        "className",
+        "onClick"
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_IconButton.IconButton, _object_spread_props._(_object_spread._({
+        Component: "button",
+        label: "Очистить поле",
+        onKeyDown: _utils.stopPropagation,
+        type: "button",
+        activeMode: "opacity",
+        hoverMode: "opacity"
+    }, restProps), {
+        className: className,
+        onClick: (e)=>{
+            (0, _utils.stopPropagation)(e);
+            e.preventDefault();
+            onClick();
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_icons.Icon16Cancel, {})
+    }));
+};
+
+//# sourceMappingURL=FormFieldClearButton.js.map

package/dist/cjs/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":["FormFieldClearButton","className","onClick","restProps","IconButton","Component","label","onKeyDown","stopPropagation","type","activeMode","hoverMode","e","preventDefault","Icon16Cancel"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;;iEAZU;uBACM;uBACG;4BAEL;AAQpB,MAAMA,uBAAuB;QAAC,EACnCC,SAAS,EACTC,OAAO,EAEmB,WADvBC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,sBAAU;QACTC,WAAU;QACVC,OAAM;QACNC,WAAWC,sBAAe;QAC1BC,MAAK;QACLC,YAAW;QACXC,WAAU;OACNR;QACJF,WAAWA;QACXC,SAAS,CAACU;YACRJ,IAAAA,sBAAe,EAACI;YAChBA,EAAEC,cAAc;YAChBX;QACF;kBAEA,cAAA,qBAACY,mBAAY;;AAGnB"}

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