@vkontakte/vkui 6.1.2 → 6.2.0

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

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

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

@@ -0,0 +1,42 @@
+import { type GapsProp } from '../../lib/layouts';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { FlexItemProps } from './FlexItem/FlexItem';
+export type { FlexItemProps };
+type FlexContentProps = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+export interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    /**
+     * Направление осей, эквивалентно `flex-direction`.
+     */
+    direction?: 'row' | 'column';
+    /**
+     * Отступы между элементами.
+     * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
+     * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.
+     */
+    gap?: GapsProp;
+    /**
+     * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.
+     */
+    noWrap?: boolean;
+    /**
+     * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.
+     */
+    align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+    /**
+     * Выравнивание элементов по главной оси, эквивалентно `justify-content`.
+     */
+    justify?: FlexContentProps;
+    /**
+     * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.
+     */
+    margin?: 'none' | 'auto';
+    /**
+     * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.
+     */
+    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;
+};
+//# sourceMappingURL=Flex.d.ts.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { FlexItem, FlexItemProps } from './FlexItem/FlexItem';\nimport styles from './Flex.module.css';\n\nexport type { FlexItemProps };\n\nconst justifyClassNames = {\n  'start': styles['Flex--justify-start'],\n  'end': styles['Flex--justify-end'],\n  'center': styles['Flex--justify-center'],\n  'space-around': styles['Flex--justify-space-around'],\n  'space-between': styles['Flex--justify-space-between'],\n  'space-evenly': styles['Flex--justify-space-evenly'],\n};\n\nconst alignClassNames = {\n  start: styles['Flex--align-start'],\n  end: styles['Flex--align-end'],\n  center: styles['Flex--align-center'],\n  stretch: styles['Flex--align-stretch'],\n  baseline: styles['Flex--align-baseline'],\n};\n\ntype FlexContentProps =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\nexport interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Направление осей, эквивалентно `flex-direction`.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.\n   */\n  noWrap?: boolean;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n  /**\n   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.\n   */\n  justify?: FlexContentProps;\n  /**\n   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.\n   */\n  margin?: 'none' | 'auto';\n  /**\n   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.\n   */\n  reverse?: boolean;\n}\n\nexport const Flex = ({\n  gap,\n  align,\n  justify,\n  margin = 'none',\n  noWrap = false,\n  direction = 'row',\n  style: styleProp,\n  reverse = false,\n  ...props\n}: FlexProps) => {\n  const [columnGap, rowGap] = calculateGap(gap);\n  const style: CSSCustomProperties = {};\n\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(\n        styles.Flex,\n        !noWrap && styles['Flex--wrap'],\n        reverse && styles['Flex--reverse'],\n        direction !== 'row' && styles['Flex--direction-column'],\n        margin !== 'none' && styles['Flex--margin-auto'],\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n        align && alignClassNames[align],\n        justify && justifyClassNames[justify],\n      )}\n      style={{ ...styleProp, ...style }}\n    />\n  );\n};\n\nFlex.Item = FlexItem;\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","FlexItem","styles","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","Flex","gap","align","justify","margin","noWrap","direction","style","styleProp","reverse","props","columnGap","rowGap","baseClassName","Item"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,oBAAoB;AAE3B,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,OAAOC,YAAY,oBAAoB;AAIvC,MAAMC,oBAAoB;IACxB,SAASD,MAAM,CAAC,sBAAsB;IACtC,OAAOA,MAAM,CAAC,oBAAoB;IAClC,UAAUA,MAAM,CAAC,uBAAuB;IACxC,gBAAgBA,MAAM,CAAC,6BAA6B;IACpD,iBAAiBA,MAAM,CAAC,8BAA8B;IACtD,gBAAgBA,MAAM,CAAC,6BAA6B;AACtD;AAEA,MAAME,kBAAkB;IACtBC,OAAOH,MAAM,CAAC,oBAAoB;IAClCI,KAAKJ,MAAM,CAAC,kBAAkB;IAC9BK,QAAQL,MAAM,CAAC,qBAAqB;IACpCM,SAASN,MAAM,CAAC,sBAAsB;IACtCO,UAAUP,MAAM,CAAC,uBAAuB;AAC1C;AA2CA,OAAO,MAAMQ,OAAO,CAAC,EACnBC,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,OAAOC,SAAS,EAChBC,UAAU,KAAK,EACf,GAAGC,OACO;IACV,MAAM,CAACC,WAAWC,OAAO,GAAGzB,aAAac;IACzC,MAAMM,QAA6B,CAAC;IAEpC,IAAI,OAAOK,WAAW,UAAU;QAC9BL,KAAK,CAAC,2BAA2B,GAAG,CAAC,EAAEK,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOD,cAAc,UAAU;QACjCJ,KAAK,CAAC,8BAA8B,GAAG,CAAC,EAAEI,UAAU,EAAE,CAAC;IACzD;IAEA,qBACE,KAACrB;QACE,GAAGoB,KAAK;QACTG,eAAe3B,WACbM,OAAOQ,IAAI,EACX,CAACK,UAAUb,MAAM,CAAC,aAAa,EAC/BiB,WAAWjB,MAAM,CAAC,gBAAgB,EAClCc,cAAc,SAASd,MAAM,CAAC,yBAAyB,EACvDY,WAAW,UAAUZ,MAAM,CAAC,oBAAoB,EAChD,OAAOmB,cAAc,YAAYvB,mBAAmB,CAACuB,UAAU,EAC/D,OAAOC,WAAW,YAAYvB,gBAAgB,CAACuB,OAAO,EACtDV,SAASR,eAAe,CAACQ,MAAM,EAC/BC,WAAWV,iBAAiB,CAACU,QAAQ;QAEvCI,OAAO;YAAE,GAAGC,SAAS;YAAE,GAAGD,KAAK;QAAC;;AAGtC,EAAE;AAEFP,KAAKc,IAAI,GAAGvB"}

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

@@ -0,0 +1,90 @@
+.Flex {
+  --vkui_internal--flex_original_margin_inline: 0px;
+  --vkui_internal--flex_original_margin_block: 0px;
+
+  display: flex;
+  margin-block: calc(
+      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+    )
+    var(--vkui_internal--flex_original_margin_block);
+  margin-inline: calc(
+      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+    )
+    var(--vkui_internal--flex_original_margin_inline);
+}
+
+.Flex--margin-auto {
+  --vkui_internal--flex_original_margin_inline: var(--vkui--size_base_padding_horizontal--regular);
+  --vkui_internal--flex_original_margin_block: var(--vkui--size_base_padding_vertical--regular);
+}
+
+.Flex--direction-column {
+  flex-direction: column;
+}
+
+.Flex--reverse {
+  flex-direction: row-reverse;
+}
+
+.Flex--direction-column.Flex--reverse {
+  flex-direction: column-reverse;
+}
+
+.Flex--wrap {
+  flex-wrap: wrap;
+}
+
+/* justify-content */
+
+.Flex--justify-start {
+  justify-content: flex-start;
+}
+
+.Flex--justify-end {
+  justify-content: flex-end;
+}
+
+.Flex--justify-center {
+  justify-content: center;
+}
+
+.Flex--justify-space-around {
+  justify-content: space-around;
+}
+
+.Flex--justify-space-between {
+  justify-content: space-between;
+}
+
+.Flex--justify-space-evenly {
+  justify-content: space-evenly;
+}
+
+/* align-items */
+
+.Flex--align-start {
+  align-items: flex-start;
+}
+
+.Flex--align-end {
+  align-items: flex-end;
+}
+
+.Flex--align-center {
+  align-items: center;
+}
+
+.Flex--align-stretch {
+  align-items: stretch;
+}
+
+.Flex--align-baseline {
+  align-items: baseline;
+}
+
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+
+.Flex > * {
+  margin-block: var(--vkui_internal--row_gap) 0;
+  margin-inline: var(--vkui_internal--column_gap) 0;
+}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './FlexItem.module.css';\n\nconst flexClassNames = {\n  grow: styles['FlexItem--flex-grow'],\n  shrink: styles['FlexItem--flex-shrink'],\n  content: styles['FlexItem--flex-content'],\n  fixed: styles['FlexItem--flex-fixed'],\n};\n\nconst alignSelfClassNames = {\n  start: styles['FlexItem--align-self-start'],\n  end: styles['FlexItem--align-self-end'],\n  center: styles['FlexItem--align-self-center'],\n  baseline: styles['FlexItem--align-self-baseline'],\n  stretch: styles['FlexItem--align-self-stretch'],\n};\n\nexport interface FlexItemProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasChildren {\n  /**\n   * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`\n   */\n  alignSelf: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n  /**\n   * Позволяет задать предопределенные значения шортката `flex`\n   * `grow` соответствует значению `1 0 auto`\n   * `shrink` соответствует значению `0 1 auto`\n   * `content` соответствует значению `0 0 auto`\n   */\n  flex: 'grow' | 'shrink' | 'content' | 'fixed';\n  /**\n   * Изначальный размер элемента, эквивалентно `flex-basis`\n   */\n  flexBasis: number;\n}\n\nexport const FlexItem = ({\n  children,\n  alignSelf,\n  flex,\n  flexBasis,\n  style,\n  ...rest\n}: FlexItemProps) => {\n  return (\n    <RootComponent\n      {...rest}\n      style={{ ...style, flexBasis }}\n      baseClassName={classNames(\n        styles.FlexItem,\n        alignSelf && alignSelfClassNames[alignSelf],\n        flex && flexClassNames[flex],\n      )}\n    >\n      {children}\n    </RootComponent>\n  );\n};\n"],"names":["classNames","RootComponent","styles","flexClassNames","grow","shrink","content","fixed","alignSelfClassNames","start","end","center","baseline","stretch","FlexItem","children","alignSelf","flex","flexBasis","style","rest","baseClassName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAClE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,iBAAiB;IACrBC,MAAMF,MAAM,CAAC,sBAAsB;IACnCG,QAAQH,MAAM,CAAC,wBAAwB;IACvCI,SAASJ,MAAM,CAAC,yBAAyB;IACzCK,OAAOL,MAAM,CAAC,uBAAuB;AACvC;AAEA,MAAMM,sBAAsB;IAC1BC,OAAOP,MAAM,CAAC,6BAA6B;IAC3CQ,KAAKR,MAAM,CAAC,2BAA2B;IACvCS,QAAQT,MAAM,CAAC,8BAA8B;IAC7CU,UAAUV,MAAM,CAAC,gCAAgC;IACjDW,SAASX,MAAM,CAAC,+BAA+B;AACjD;AAoBA,OAAO,MAAMY,WAAW,CAAC,EACvBC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,MACW;IACd,qBACE,KAACnB;QACE,GAAGmB,IAAI;QACRD,OAAO;YAAE,GAAGA,KAAK;YAAED;QAAU;QAC7BG,eAAerB,WACbE,OAAOY,QAAQ,EACfE,aAAaR,mBAAmB,CAACQ,UAAU,EAC3CC,QAAQd,cAAc,CAACc,KAAK;kBAG7BF;;AAGP,EAAE"}

package/dist/cssm/components/Flex/FlexItem/FlexItem.module.css

@@ -0,0 +1,43 @@
+.FlexItem {
+  /* Пустой класс для CSS Modules (см. CONTRIBUTING.md)  */
+}
+
+/* flex */
+
+.FlexItem--flex-grow {
+  flex: 1 0 auto;
+}
+
+.FlexItem--flex-shrink {
+  flex: 0 1 auto;
+}
+
+.FlexItem--flex-content {
+  flex: 1 1 auto;
+}
+
+.FlexItem--flex-fixed {
+  flex: 0 0 auto;
+}
+
+/* align-self */
+
+.FlexItem--align-self-start {
+  align-self: start;
+}
+
+.FlexItem--align-self-end {
+  align-self: end;
+}
+
+.FlexItem--align-self-center {
+  align-self: center;
+}
+
+.FlexItem--align-self-baseline {
+  align-self: baseline;
+}
+
+.FlexItem--align-self-stretch {
+  align-self: stretch;
+}

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

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

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

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

package/dist/cssm/components/FloatingArrow/FloatingArrow.js

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

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

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

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

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

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

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

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

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