@vkontakte/vkui 5.1.0 → 5.2.0

package/dist/cjs/components/PanelHeader/PanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.js","names":["PanelHeaderIn","before","after","separator","children","useConfigProvider","webviewType","React","useContext","ModalRootContext","isInsideModal","platform","usePlatform","Platform","VKCOM","WebviewType","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","classNames","getPlatformClassName","VKAPPS","getSizeXClassName","compact","regular"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Separator } from '../Separator/Separator';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { Text } from '../Typography/Text/Text';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { Spacing } from '../Spacing/Spacing';\nimport styles from './PanelHeader.module.css';\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div className={styles['PanelHeader__before']}>{before}</div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={styles['PanelHeader__after']}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && <Separator wide />}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        getPlatformClassName(styles['PanelHeader'], platform),\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && styles['PanelHeader--vis'],\n        separator && visor && styles['PanelHeader--sep'],\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        getSizeXClassName(styles['PanelHeader'], sizeX),\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PanelHeader.js","names":["getPlatformClassName","platform","sizeXClassNames","compact","regular","none","PanelHeaderIn","before","after","separator","children","useConfigProvider","webviewType","React","useContext","ModalRootContext","isInsideModal","usePlatform","Platform","VKCOM","WebviewType","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","classNames","VKAPPS"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Separator } from '../Separator/Separator';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { Text } from '../Typography/Text/Text';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { Spacing } from '../Spacing/Spacing';\nimport styles from './PanelHeader.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeader--ios'];\n    case 'vkcom':\n      return styles['PanelHeader--vkcom'];\n    default:\n      return styles['PanelHeader--android'];\n  }\n}\n\nconst sizeXClassNames = {\n  compact: '',\n  regular: styles['PanelHeader--sizeX-regular'],\n  none: styles['PanelHeader--sizeX-none'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div className={styles['PanelHeader__before']}>{before}</div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={styles['PanelHeader__after']}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && <Separator wide />}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        getPlatformClassName(platform),\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && styles['PanelHeader--vis'],\n        separator && visor && styles['PanelHeader--sep'],\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _Tappable = require("../Tappable/Tappable");
-var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _vkjs = require("@vkontakte/vkjs");
 var _warnOnce = require("../../lib/warnOnce");
 var _usePlatform = require("../../hooks/usePlatform");
@@ -19,6 +18,16 @@ var _platform = require("../../lib/platform");
 var _Text = require("../Typography/Text/Text");
 var _Title = require("../Typography/Title/Title");
 var _excluded = ["children", "primary", "label", "className"];
+function getPlatformClassName(platform) {
+  switch (platform) {
+    case 'ios':
+      return "vkuiPanelHeaderButton--ios";
+    case 'vkcom':
+      return "vkuiPanelHeaderButton--vkcom";
+    default:
+      return "vkuiPanelHeaderButton--android";
+  }
+}
 var ButtonTypography = function ButtonTypography(_ref) {
   var primary = _ref.primary,
     children = _ref.children;
@@ -75,7 +84,7 @@ var PanelHeaderButton = function PanelHeaderButton(_ref2) {
     Component: restProps.href ? 'a' : 'button',
     activeEffectDelay: 200,
     activeMode: activeMode,
-    className: (0, _vkjs.classNames)("vkuiPanelHeaderButton", (0, _getPlatformClassName.getPlatformClassName)("vkuiPanelHeaderButton", platform), isPrimitive && "vkuiPanelHeaderButton--primitive", !isPrimitive && !isPrimitiveLabel && "vkuiPanelHeaderButton--notPrimitive", className)
+    className: (0, _vkjs.classNames)("vkuiPanelHeaderButton", getPlatformClassName(platform), isPrimitive && "vkuiPanelHeaderButton--primitive", !isPrimitive && !isPrimitiveLabel && "vkuiPanelHeaderButton--notPrimitive", className)
   }), isPrimitive ? /*#__PURE__*/React.createElement(ButtonTypography, {
     primary: primary
   }, children) : children, isPrimitiveLabel ? /*#__PURE__*/React.createElement(ButtonTypography, {

package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderButton.js","names":["ButtonTypography","primary","children","platform","usePlatform","Platform","IOS","VKCOM","undefined","warn","warnOnce","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveReactNode","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","getTitleFromChildren","href","classNames","getPlatformClassName"],"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { Platform } from '../../lib/platform';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === Platform.VKCOM ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case Platform.IOS:\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case Platform.VKCOM:\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps['aria-label'] ||\n        restProps['aria-labelledby'],\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        'a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.',\n        'error',\n      );\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      hoverMode={hoverMode}\n      Component={restProps.href ? 'a' : 'button'}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        styles['PanelHeaderButton'],\n        getPlatformClassName(styles['PanelHeaderButton'], platform),\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAkD;AAYlD,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAqD;EAAA,IAA/CC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;EAC3C,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAID,QAAQ,KAAKE,kBAAQ,CAACC,GAAG,EAAE;IAC7B,oBACE,oBAAC,YAAK;MAAC,SAAS,EAAC,MAAM;MAAC,KAAK,EAAC,GAAG;MAAC,MAAM,EAAEL,OAAO,GAAG,GAAG,GAAG;IAAI,GAC3DC,QAAQ,CACH;EAEZ;EAEA,oBAAO,oBAAC,UAAI;IAAC,MAAM,EAAEC,QAAQ,KAAKE,kBAAQ,CAACE,KAAK,GAAGC,SAAS,GAAG;EAAI,GAAEN,QAAQ,CAAQ;AACvF,CAAC;AAED,IAAMO,IAAI,GAAG,IAAAC,kBAAQ,EAAC,mBAAmB,CAAC;;AAE1C;AACA;AACA;AACO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,QAMA;EAAA,IAL5BT,QAAQ,SAARA,QAAQ;IAAA,sBACRD,OAAO;IAAPA,OAAO,8BAAG,KAAK;IACfW,KAAK,SAALA,KAAK;IACLC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG,IAAAC,0BAAoB,EAACd,QAAQ,CAAC;EAClD,IAAMe,gBAAgB,GAAG,IAAAD,0BAAoB,EAACJ,KAAK,CAAC;EACpD,IAAMT,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAIc,SAAS;EACb,IAAIC,UAAU;EAEd,QAAQhB,QAAQ;IACd,KAAKE,kBAAQ,CAACC,GAAG;MACfY,SAAS,GAAG,YAAY;MACxBC,UAAU,GAAG,SAAS;MACtB;IACF,KAAKd,kBAAQ,CAACE,KAAK;MACjBW,SAAS,iCAAqC;MAC9CC,UAAU,kCAAsC;MAChD;IACF;MACED,SAAS,GAAG,YAAY;MACxBC,UAAU,GAAG,YAAY;EAAC;EAG9B,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,iBAAiB,GAAGC,OAAO,CAC/B,IAAAC,2BAAoB,EAACvB,QAAQ,CAAC,IAC5B,IAAAuB,2BAAoB,EAACb,KAAK,CAAC,IAC3BE,SAAS,CAAC,YAAY,CAAC,IACvBA,SAAS,CAAC,iBAAiB,CAAC,CAC/B;IAED,IAAI,CAACS,iBAAiB,EAAE;MACtBd,IAAI,CACF,oMAAoM,EACpM,OAAO,CACR;IACH;EACF;EAEA,oBACE,oBAAC,kBAAQ,6BACHK,SAAS;IACb,SAAS,EAAEI,SAAU;IACrB,SAAS,EAAEJ,SAAS,CAACY,IAAI,GAAG,GAAG,GAAG,QAAS;IAC3C,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAEP,UAAW;IACvB,SAAS,EAAE,IAAAQ,gBAAU,2BAEnB,IAAAC,0CAAoB,2BAA8BzB,QAAQ,CAAC,EAC3DY,WAAW,sCAA0C,EACrD,CAACA,WAAW,IAAI,CAACE,gBAAgB,yCAA6C,EAC9EJ,SAAS;EACT,IAEDE,WAAW,gBAAG,oBAAC,gBAAgB;IAAC,OAAO,EAAEd;EAAQ,GAAEC,QAAQ,CAAoB,GAAGA,QAAQ,EAC1Fe,gBAAgB,gBACf,oBAAC,gBAAgB;IAAC,OAAO,EAAEhB,OAAQ;IAAC,SAAS;EAAqC,GAC/EW,KAAK,CACW,GAEnBA,KACD,CACQ;AAEf,CAAC;AAAC"}
+{"version":3,"file":"PanelHeaderButton.js","names":["getPlatformClassName","platform","ButtonTypography","primary","children","usePlatform","Platform","IOS","VKCOM","undefined","warn","warnOnce","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveReactNode","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","getTitleFromChildren","href","classNames"],"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { Platform } from '../../lib/platform';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeaderButton--ios'];\n    case 'vkcom':\n      return styles['PanelHeaderButton--vkcom'];\n    default:\n      return styles['PanelHeaderButton--android'];\n  }\n}\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === Platform.VKCOM ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case Platform.IOS:\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case Platform.VKCOM:\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps['aria-label'] ||\n        restProps['aria-labelledby'],\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        'a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.',\n        'error',\n      );\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      hoverMode={hoverMode}\n      Component={restProps.href ? 'a' : 'button'}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        styles['PanelHeaderButton'],\n        getPlatformClassName(platform),\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/Popover/Popover.js

@@ -96,7 +96,10 @@ var Popover = function Popover(_ref) {
       setShown(false);
     }
   };
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', handleOutsideClick);
+  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', handleOutsideClick, {
+    capture: true,
+    passive: true
+  });
   var targetEnterListener = (0, _useEventListener.useEventListener)('mouseenter', handleTargetEnter);
   var targetClickEvent = (0, _useEventListener.useEventListener)('click', handleTargetClick);
   var targetLeaveListener = (0, _useEventListener.useEventListener)('mouseleave', handleTargetLeave);

package/dist/cjs/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","useDOM","document","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","classNames","wrapperClassName","undefined"],"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames } from '@vkontakte/vkjs';\nimport { PopperCommonProps, Popper } from '../Popper/Popper';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick);\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Popover.js","names":["Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","useDOM","document","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","classNames","wrapperClassName","undefined"],"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames } from '@vkontakte/vkjs';\nimport { PopperCommonProps, Popper } from '../Popper/Popper';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/Popper/Popper.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Modifier } from 'react-popper';
-import { HasRef } from '../../types';
-export declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' | 'bottom' | 'left' | 'right';
+import type { HasRef } from '../../types';
+import { type Placement, type PlacementWithAuto, type UseFloatingMiddleware } from '../../lib/floating';
 export interface PopperRenderContentProps {
     className: string;
 }
@@ -9,7 +8,7 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
     /**
      * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
      */
-    placement?: Placement;
+    placement?: PlacementWithAuto;
     /**
      * Отступ по вспомогательной оси
      */
@@ -31,13 +30,14 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     sameWidth?: boolean;
     forcePortal?: boolean;
-    onPlacementChange?: (data: {
-        placement?: Placement;
-    }) => void;
+    /**
+     * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.
+     */
+    autoUpdateOnTargetResize?: boolean;
     /**
      * Массив кастомных модификаторов для Popper (необходимо мемоизировать)
      */
-    customModifiers?: Array<Modifier<string>>;
+    customMiddlewares?: UseFloatingMiddleware[];
     /**
      * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.
      *
@@ -46,6 +46,9 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      * > ⚠️ Параметр `children` будет проигнорирован.
      */
     renderContent?(props: PopperRenderContentProps): React.ReactNode;
+    onPlacementChange?(data: {
+        placement?: Placement;
+    }): void;
 }
 export interface PopperProps extends PopperCommonProps {
     targetRef: React.RefObject<HTMLElement>;
@@ -53,4 +56,4 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export declare const Popper: ({ targetRef, children, getRef, placement, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, style: compStyles, customModifiers, renderContent, className, ...restProps }: PopperProps) => JSX.Element;
+export declare const Popper: ({ targetRef, children, getRef, placement: placementProp, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, autoUpdateOnTargetResize, style: styleProp, customMiddlewares, renderContent, className, ...restProps }: PopperProps) => JSX.Element;

package/dist/cjs/components/Popper/Popper.js

@@ -9,146 +9,119 @@ exports.Popper = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _reactPopper = require("react-popper");
 var _AppRootPortal = require("../AppRoot/AppRootPortal");
 var _PopperArrow = require("../PopperArrow/PopperArrow");
-var _usePlatform = require("../../hooks/usePlatform");
-var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _useExternRef = require("../../hooks/useExternRef");
-var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+var _floating = require("../../lib/floating");
 var _vkjs = require("@vkontakte/vkjs");
-var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers", "renderContent", "className"];
-var ARROW_PADDING = 8;
-var ARROW_WIDTH = 20;
-var ARROW_HEIGHT = 8;
-var preventOverflowModifier = {
-  name: 'preventOverflow',
-  options: {
-    mainAxis: false
-  }
-};
-var flipModifier = {
-  name: 'flip'
-};
-var arrowModifier = {
-  name: 'arrow',
-  options: {
-    padding: ARROW_PADDING
-  }
-};
-var sameWidthModifier = {
-  name: 'sameWidth',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  fn: function fn(_ref) {
-    var state = _ref.state;
-    state.styles.popper.width = "".concat(state.rects.reference.width, "px");
-  },
-  effect: function effect(_ref2) {
-    var state = _ref2.state;
-    state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
-  }
-};
-
+var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "autoUpdateOnTargetResize", "style", "customMiddlewares", "renderContent", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-var Popper = function Popper(_ref3) {
-  var _targetRef$current3;
-  var targetRef = _ref3.targetRef,
-    children = _ref3.children,
-    getRef = _ref3.getRef,
-    _ref3$placement = _ref3.placement,
-    placement = _ref3$placement === void 0 ? 'bottom-start' : _ref3$placement,
-    onPlacementChange = _ref3.onPlacementChange,
-    arrow = _ref3.arrow,
-    arrowClassName = _ref3.arrowClassName,
-    sameWidth = _ref3.sameWidth,
-    _ref3$offsetDistance = _ref3.offsetDistance,
-    offsetDistance = _ref3$offsetDistance === void 0 ? 8 : _ref3$offsetDistance,
-    _ref3$offsetSkidding = _ref3.offsetSkidding,
-    offsetSkidding = _ref3$offsetSkidding === void 0 ? 0 : _ref3$offsetSkidding,
-    _ref3$forcePortal = _ref3.forcePortal,
-    forcePortal = _ref3$forcePortal === void 0 ? true : _ref3$forcePortal,
-    compStyles = _ref3.style,
-    customModifiers = _ref3.customModifiers,
-    renderContent = _ref3.renderContent,
-    className = _ref3.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-  var _React$useState = React.useState(null),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    popperNode = _React$useState2[0],
-    setPopperNode = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    smallTargetOffsetSkidding = _React$useState4[0],
-    setSmallTargetOffsetSkidding = _React$useState4[1];
-  var platform = (0, _usePlatform.usePlatform)();
-  var setExternalRef = (0, _useExternRef.useExternRef)(getRef, setPopperNode);
-  var modifiers = React.useMemo(function () {
-    var modifiers = [preventOverflowModifier, {
-      name: 'offset',
-      options: {
-        offset: [arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding, arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance]
-      }
-    }, flipModifier];
-    if (arrow) {
-      modifiers.push(arrowModifier);
+var Popper = function Popper(_ref) {
+  var targetRef = _ref.targetRef,
+    children = _ref.children,
+    getRef = _ref.getRef,
+    _ref$placement = _ref.placement,
+    placementProp = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    onPlacementChange = _ref.onPlacementChange,
+    arrow = _ref.arrow,
+    arrowClassName = _ref.arrowClassName,
+    sameWidth = _ref.sameWidth,
+    _ref$offsetDistance = _ref.offsetDistance,
+    offsetDistance = _ref$offsetDistance === void 0 ? 8 : _ref$offsetDistance,
+    _ref$offsetSkidding = _ref.offsetSkidding,
+    offsetSkidding = _ref$offsetSkidding === void 0 ? 0 : _ref$offsetSkidding,
+    _ref$forcePortal = _ref.forcePortal,
+    forcePortal = _ref$forcePortal === void 0 ? true : _ref$forcePortal,
+    _ref$autoUpdateOnTarg = _ref.autoUpdateOnTargetResize,
+    autoUpdateOnTargetResize = _ref$autoUpdateOnTarg === void 0 ? false : _ref$autoUpdateOnTarg,
+    styleProp = _ref.style,
+    customMiddlewares = _ref.customMiddlewares,
+    renderContent = _ref.renderContent,
+    className = _ref.className,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var arrowRef = React.useRef(null);
+  var isNotAutoPlacement = (0, _floating.checkIsNotAutoPlacement)(placementProp);
+  var memoizedMiddlewares = React.useMemo(function () {
+    var middlewares = [(0, _floating.offsetMiddleware)({
+      crossAxis: offsetSkidding,
+      mainAxis: arrow ? offsetDistance + _PopperArrow.ARROW_HEIGHT : offsetDistance
+    })];
+
+    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
+    if (isNotAutoPlacement) {
+      middlewares.push((0, _floating.flipMiddleware)());
+    } else {
+      middlewares.push((0, _floating.autoPlacementMiddleware)({
+        alignment: (0, _floating.getAutoPlacementAlign)(placementProp)
+      }));
     }
+    middlewares.push((0, _floating.shiftMiddleware)());
     if (sameWidth) {
-      modifiers.push(sameWidthModifier);
+      middlewares.push((0, _floating.sizeMiddleware)({
+        apply: function apply(_ref2) {
+          var rects = _ref2.rects,
+            elements = _ref2.elements;
+          Object.assign(elements.floating.style, {
+            width: "".concat(rects.reference.width, "px")
+          });
+        }
+      }));
     }
-    if (customModifiers) {
-      modifiers.push.apply(modifiers, (0, _toConsumableArray2.default)(customModifiers));
+    if (customMiddlewares) {
+      middlewares.push.apply(middlewares, (0, _toConsumableArray2.default)(customMiddlewares));
     }
-    return modifiers;
-  }, [arrow, sameWidth, smallTargetOffsetSkidding, offsetSkidding, offsetDistance, customModifiers]);
-  var _usePopper = (0, _reactPopper.usePopper)(targetRef.current, popperNode, {
-      placement: placement,
-      modifiers: modifiers
-    }),
-    popperStyles = _usePopper.styles,
-    state = _usePopper.state,
-    attributes = _usePopper.attributes;
-  var resolvedPlacement = state === null || state === void 0 ? void 0 : state.placement;
-  var isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю
 
-  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
-  // таргета из-за маленьких размеров последнего
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (arrow && isEdgePlacement) {
-      var _ref4, _targetRef$current, _targetRef$current2;
-      var placementDirection = resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('bottom') || resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('top') ? 'vertical' : 'horizontal';
-      var arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;
-      var targetSize = (_ref4 = placementDirection === 'vertical' ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetHeight) !== null && _ref4 !== void 0 ? _ref4 : 0;
-      if (targetSize < arrowSize + 2 * ARROW_PADDING) {
-        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
-      }
-    } else {
-      setSmallTargetOffsetSkidding(0);
+    // см. https://floating-ui.com/docs/arrow#order
+    if (arrow) {
+      middlewares.push((0, _floating.arrowMiddleware)({
+        element: arrowRef,
+        padding: _PopperArrow.ARROW_PADDING
+      }));
     }
-  }, [arrow, isEdgePlacement]);
+    return middlewares;
+  }, [arrow, sameWidth, offsetSkidding, offsetDistance, customMiddlewares, placementProp, isNotAutoPlacement]);
+  var _useFloating = (0, _floating.useFloating)({
+      placement: isNotAutoPlacement ? placementProp : undefined,
+      middleware: memoizedMiddlewares,
+      whileElementsMounted: function whileElementsMounted() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return _floating.autoUpdateFloatingElement.apply(void 0, args.concat([{
+          elementResize: autoUpdateOnTargetResize
+        }]));
+      }
+    }),
+    floatingDataX = _useFloating.x,
+    floatingDataY = _useFloating.y,
+    floatingPositionStrategy = _useFloating.strategy,
+    resolvedPlacement = _useFloating.placement,
+    refs = _useFloating.refs,
+    arrowCoords = _useFloating.middlewareData.arrow;
+  var handleRootRef = (0, _useExternRef.useExternRef)(refs.setFloating, getRef);
+  React.useEffect(function () {
+    refs.setReference(targetRef.current);
+  }, [refs, targetRef]);
   React.useEffect(function () {
-    if (resolvedPlacement) {
-      onPlacementChange && onPlacementChange({
+    if (resolvedPlacement && onPlacementChange) {
+      onPlacementChange({
         placement: resolvedPlacement
       });
     }
   }, [onPlacementChange, resolvedPlacement]);
-  var dropdown = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, attributes.popper, {
-    className: (0, _vkjs.classNames)("vkuiPopper", (0, _getPlatformClassName.getPlatformClassName)("vkuiPopper", platform), className),
-    ref: setExternalRef,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, compStyles), popperStyles.popper), {}, {
-      minWidth: sameWidth ? (_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.scrollWidth : undefined
-    })
+  var dropdown = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
+    className: (0, _vkjs.classNames)("vkuiPopper", className),
+    ref: handleRootRef,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styleProp), (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
   }), arrow && /*#__PURE__*/React.createElement(_PopperArrow.PopperArrow, {
-    attributes: attributes.arrow,
-    style: popperStyles.arrow,
-    arrowClassName: arrowClassName
+    coords: arrowCoords,
+    placement: resolvedPlacement,
+    arrowClassName: arrowClassName,
+    getRootRef: arrowRef
   }), renderContent ? renderContent({
     className: "vkuiPopper__content"
   }) : /*#__PURE__*/React.createElement("div", {

package/dist/cjs/components/Popper/Popper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.js","names":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","preventOverflowModifier","name","options","mainAxis","flipModifier","arrowModifier","padding","sameWidthModifier","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","customModifiers","renderContent","className","restProps","React","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","usePlatform","setExternalRef","useExternRef","modifiers","useMemo","offset","push","usePopper","current","popperStyles","attributes","resolvedPlacement","isEdgePlacement","includes","useIsomorphicLayoutEffect","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","classNames","getPlatformClassName","minWidth","scrollWidth","undefined"],"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopper, Modifier } from 'react-popper';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { PopperArrow } from '../PopperArrow/PopperArrow';\nimport { HasRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Popper.module.css';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\nconst preventOverflowModifier: Modifier<string> = {\n  name: 'preventOverflow',\n  options: {\n    mainAxis: false,\n  },\n};\n\nconst flipModifier: Modifier<string> = {\n  name: 'flip',\n};\n\nconst arrowModifier: Modifier<string> = {\n  name: 'arrow',\n  options: {\n    padding: ARROW_PADDING,\n  },\n};\n\nconst sameWidthModifier: Modifier<string> = {\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect: ({ state }) => {\n    state.elements.popper.style.width = `${\n      (state.elements.reference as HTMLElement).offsetWidth\n    }px`;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(null);\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] = React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      preventOverflowModifier,\n      {\n        name: 'offset',\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      flipModifier,\n    ];\n\n    if (arrow) {\n      modifiers.push(arrowModifier);\n    }\n\n    if (sameWidth) {\n      modifiers.push(sameWidthModifier);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const {\n    styles: popperStyles,\n    state,\n    attributes,\n  } = usePopper(targetRef.current, popperNode, {\n    placement,\n    modifiers,\n  });\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith('bottom') || resolvedPlacement?.startsWith('top')\n          ? 'vertical'\n          : 'horizontal';\n\n      const arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === 'vertical'\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      className={classNames(\n        styles['Popper'],\n        getPlatformClassName(styles['Popper'], platform),\n        className,\n      )}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...popperStyles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          attributes={attributes.arrow}\n          style={popperStyles.arrow}\n          arrowClassName={arrowClassName}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Popper.js","names":["Popper","targetRef","children","getRef","placement","placementProp","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","autoUpdateOnTargetResize","styleProp","style","customMiddlewares","renderContent","className","restProps","arrowRef","React","useRef","isNotAutoPlacement","checkIsNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","offsetMiddleware","crossAxis","mainAxis","ARROW_HEIGHT","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","sizeMiddleware","apply","rects","elements","Object","assign","floating","width","reference","arrowMiddleware","element","padding","ARROW_PADDING","useFloating","undefined","middleware","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","floatingDataX","x","floatingDataY","y","floatingPositionStrategy","strategy","resolvedPlacement","refs","arrowCoords","middlewareData","handleRootRef","useExternRef","setFloating","useEffect","setReference","current","dropdown","classNames","convertFloatingDataToReactCSSProperties"],"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { ARROW_PADDING, ARROW_HEIGHT, PopperArrow } from '../PopperArrow/PopperArrow';\nimport type { HasRef } from '../../types';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  type Placement,\n  type PlacementWithAuto,\n  checkIsNotAutoPlacement,\n  getAutoPlacementAlign,\n  convertFloatingDataToReactCSSProperties,\n  useFloating,\n  autoUpdateFloatingElement,\n  type UseFloatingMiddleware,\n  offsetMiddleware,\n  flipMiddleware,\n  shiftMiddleware,\n  autoPlacementMiddleware,\n  arrowMiddleware,\n  sizeMiddleware,\n} from '../../lib/floating';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const arrowRef = React.useRef<HTMLDivElement>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: ARROW_PADDING,\n        }),\n      );\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    sameWidth,\n    offsetSkidding,\n    offsetDistance,\n    customMiddlewares,\n    placementProp,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      className={classNames(styles['Popper'], className)}\n      ref={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={arrowRef}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/PopperArrow/PopperArrow.d.ts

@@ -1,7 +1,17 @@
-import * as React from 'react';
-export interface PopperArrowProps {
-    style?: React.CSSProperties;
-    attributes?: React.HTMLAttributes<HTMLDivElement> | null;
+/// <reference types="react" />
+import type { HasRootRef } from '../../types';
+import type { Placement } from '../../lib/floating';
+export declare const ARROW_PADDING = 10;
+export declare const ARROW_WIDTH = 20;
+export declare const ARROW_HEIGHT = 8;
+declare type Coords = {
+    x?: number;
+    y?: number;
+};
+export interface PopperArrowProps extends HasRootRef<HTMLDivElement> {
+    coords?: Coords;
+    placement: Placement;
     arrowClassName?: string;
 }
-export declare const PopperArrow: ({ style, attributes, arrowClassName }: PopperArrowProps) => JSX.Element;
+export declare const PopperArrow: ({ coords, arrowClassName, placement, getRootRef, }: PopperArrowProps) => JSX.Element;
+export {};