@vkontakte/vkui 5.1.0 → 5.2.0

package/dist/components/SplitCol/SplitCol.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitCol.js","names":["React","classNames","getSizeXClassName","getViewWidthClassName","useAdaptivity","ViewWidth","useObjectMemo","useMediaQueries","matchMediaListAddListener","matchMediaListRemoveListener","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","smallTabletPlus","matches","SplitColContext","createContext","colRef","useSplitCol","useContext","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","sizeX","contextValue"],"sources":["../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getViewWidthClassName } from '../../helpers/getViewWidthClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport styles from './SplitCol.module.css';\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth, sizeX } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        getSizeXClassName(styles['SplitCol'], sizeX),\n        getViewWidthClassName(styles['SplitCol'], viewWidth),\n        spaced && styles['SplitCol--spaced'],\n        spaced === undefined && styles['SplitCol--spaced-none'],\n        autoSpaced && styles['SplitCol--spaced-auto'],\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SplitCol.js","names":["React","classNames","getSizeXClassName","getViewWidthClassName","useAdaptivity","ViewWidth","useObjectMemo","useMediaQueries","matchMediaListAddListener","matchMediaListRemoveListener","SplitColContext","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","smallTabletPlus","matches","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","sizeX","contextValue","colRef"],"sources":["../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getViewWidthClassName } from '../../helpers/getViewWidthClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth, sizeX } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        getSizeXClassName(styles['SplitCol'], sizeX),\n        getViewWidthClassName(styles['SplitCol'], viewWidth),\n        spaced && styles['SplitCol--spaced'],\n        spaced === undefined && styles['SplitCol--spaced-none'],\n        autoSpaced && styles['SplitCol--spaced-auto'],\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/SplitCol/SplitColContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface SplitColContextProps {
+    colRef: React.RefObject<HTMLDivElement> | null;
+    animate: boolean;
+}
+export declare const SplitColContext: React.Context<SplitColContextProps>;
+export declare const useSplitCol: () => SplitColContextProps;

package/dist/components/SplitCol/SplitColContext.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export var SplitColContext = /*#__PURE__*/React.createContext({
+  colRef: null,
+  animate: true
+});
+export var useSplitCol = function useSplitCol() {
+  return React.useContext(SplitColContext);
+};
+//# sourceMappingURL=SplitColContext.js.map

package/dist/components/SplitCol/SplitColContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitColContext.js","names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"sources":["../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAO9B,OAAO,IAAMC,eAAe,gBAAGD,KAAK,CAACE,aAAa,CAAuB;EACvEC,MAAM,EAAE,IAAI;EACZC,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW;EAAA,OAASL,KAAK,CAACM,UAAU,CAACL,eAAe,CAAC;AAAA"}

package/dist/components/Switch/Switch.js

@@ -29,15 +29,14 @@ export var Switch = function Switch(_ref) {
   return /*#__PURE__*/React.createElement("label", {
     className: classNames("vkuiSwitch", getPlatformClassName("vkuiSwitch", platform), getSizeYClassName("vkuiSwitch", sizeY), restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
     style: style,
-    ref: getRootRef,
-    role: "presentation"
+    ref: getRootRef
   }, /*#__PURE__*/React.createElement(VisuallyHiddenInput, _extends({}, restProps, {
     type: "checkbox",
     className: "vkuiSwitch__self",
     onBlur: callMultiple(onBlur, restProps.onBlur),
     onFocus: callMultiple(onFocus, restProps.onFocus)
   })), /*#__PURE__*/React.createElement("span", {
-    role: "presentation",
+    "aria-hidden": true,
     className: "vkuiSwitch__pseudo"
   }), /*#__PURE__*/React.createElement(FocusVisible, {
     mode: "outside"

package/dist/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["React","getPlatformClassName","classNames","callMultiple","usePlatform","useAdaptivity","VisuallyHiddenInput","useFocusVisible","FocusVisible","getSizeYClassName","Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","disabled"],"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        getPlatformClassName(styles['Switch'], platform),\n        getSizeYClassName(styles['Switch'], sizeY),\n        restProps.disabled && styles['Switch--disabled'],\n        focusVisible && styles['Switch--focus-visible'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      role=\"presentation\"\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span role=\"presentation\" className={styles['Switch__pseudo']} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SACEC,mBAAmB,QAEd,4CAA4C;AACnD,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,iBAAiB,QAAQ,iCAAiC;AAKnE;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAAoE;EAAA,IAA9DC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,UAAU,QAAVA,UAAU;IAAKC,SAAS;EACjE,IAAMC,QAAQ,GAAGX,WAAW,EAAE;EAC9B,qBAAkBC,aAAa,EAAE;IAAzBW,KAAK,kBAALA,KAAK;EACb,uBAA0CT,eAAe,EAAE;IAAnDU,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAEjB,UAAU,eAEnBD,oBAAoB,eAAmBc,QAAQ,CAAC,EAChDN,iBAAiB,eAAmBO,KAAK,CAAC,EAC1CF,SAAS,CAACM,QAAQ,0BAA8B,EAChDH,YAAY,+BAAmC,EAC/CL,SAAS,CACT;IACF,KAAK,EAAED,KAAM;IACb,GAAG,EAAEE,UAAW;IAChB,IAAI,EAAC;EAAc,gBAEnB,oBAAC,mBAAmB,eACdC,SAAS;IACb,IAAI,EAAC,UAAU;IACf,SAAS,oBAAyB;IAClC,MAAM,EAAEX,YAAY,CAACe,MAAM,EAAEJ,SAAS,CAACI,MAAM,CAAE;IAC/C,OAAO,EAAEf,YAAY,CAACgB,OAAO,EAAEL,SAAS,CAACK,OAAO;EAAE,GAClD,eACF;IAAM,IAAI,EAAC,cAAc;IAAC,SAAS;EAA2B,EAAG,eACjE,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC"}
+{"version":3,"file":"Switch.js","names":["React","getPlatformClassName","classNames","callMultiple","usePlatform","useAdaptivity","VisuallyHiddenInput","useFocusVisible","FocusVisible","getSizeYClassName","Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","disabled"],"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        getPlatformClassName(styles['Switch'], platform),\n        getSizeYClassName(styles['Switch'], sizeY),\n        restProps.disabled && styles['Switch--disabled'],\n        focusVisible && styles['Switch--focus-visible'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SACEC,mBAAmB,QAEd,4CAA4C;AACnD,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,iBAAiB,QAAQ,iCAAiC;AAKnE;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAAoE;EAAA,IAA9DC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,UAAU,QAAVA,UAAU;IAAKC,SAAS;EACjE,IAAMC,QAAQ,GAAGX,WAAW,EAAE;EAC9B,qBAAkBC,aAAa,EAAE;IAAzBW,KAAK,kBAALA,KAAK;EACb,uBAA0CT,eAAe,EAAE;IAAnDU,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAEjB,UAAU,eAEnBD,oBAAoB,eAAmBc,QAAQ,CAAC,EAChDN,iBAAiB,eAAmBO,KAAK,CAAC,EAC1CF,SAAS,CAACM,QAAQ,0BAA8B,EAChDH,YAAY,+BAAmC,EAC/CL,SAAS,CACT;IACF,KAAK,EAAED,KAAM;IACb,GAAG,EAAEE;EAAW,gBAEhB,oBAAC,mBAAmB,eACdC,SAAS;IACb,IAAI,EAAC,UAAU;IACf,SAAS,oBAAyB;IAClC,MAAM,EAAEX,YAAY,CAACe,MAAM,EAAEJ,SAAS,CAACI,MAAM,CAAE;IAC/C,OAAO,EAAEf,YAAY,CAACgB,OAAO,EAAEL,SAAS,CAACK,OAAO;EAAE,GAClD,eACF;IAAM,mBAAW;IAAC,SAAS;EAA2B,EAAG,eACzD,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC"}

package/dist/components/TabbarItem/TabbarItem.js

@@ -7,6 +7,9 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Platform } from '../../lib/platform';
+import { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';
+var warn = warnOnce('TabbarItem');
+
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */
@@ -22,6 +25,12 @@ export var TabbarItem = function TabbarItem(_ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
+  if (process.env.NODE_ENV === 'development') {
+    var isAccessible = !text && (!restProps['aria-label'] || !restProps['aria-labelledby']);
+    if (!isAccessible) {
+      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');
+    }
+  }
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     disabled: disabled,
     href: href,

package/dist/components/TabbarItem/TabbarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabbarItem.js","names":["React","classNames","hasReactNode","usePlatform","Tappable","Footnote","Platform","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","IOS","ANDROID"],"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAmB7C;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAUA;EAAA,IATrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAGD,IAAI,GAAG,GAAG,GAAG,QAAQ;IACjCE,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGd,WAAW,EAAE;EAE9B,oBACE,oBAAC,SAAS,eACJa,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAEX,UAAU,mBAEnBgB,QAAQ,KAAKX,QAAQ,CAACY,GAAG,yBAA6B,EACtDD,QAAQ,KAAKX,QAAQ,CAACa,OAAO,6BAAiC,EAC9DV,QAAQ,8BAAkC,EAC1C,CAAC,CAACE,IAAI,0BAA8B,EACpCI,SAAS;EACT,iBAEF,oBAAC,QAAQ;IACP,IAAI,EAAC,cAAc;IACnB,SAAS,EAAC,KAAK;IACf,QAAQ,EAAED,QAAS;IACnB,UAAU,EACRG,QAAQ,KAAKX,QAAQ,CAACY,GAAG,wCAA4C,YACtE;IACD,iBAAiB,EAAED,QAAQ,KAAKX,QAAQ,CAACY,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,GACxCV,QAAQ,eACT;IAAK,SAAS;EAA8B,GAAEN,YAAY,CAACQ,SAAS,CAAC,IAAIA,SAAS,CAAO,CACrF,EACLC,IAAI,iBACH,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS,wBAA6B;IAAC,MAAM,EAAC;EAAG,GACxEA,IAAI,CAER,CACG,CACI;AAEhB,CAAC"}
+{"version":3,"file":"TabbarItem.js","names":["React","classNames","hasReactNode","usePlatform","Tappable","Footnote","Platform","COMMON_WARNINGS","warnOnce","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","isAccessible","a11y","IOS","ANDROID"],"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = !text && (!restProps['aria-label'] || !restProps['aria-labelledby']);\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,oBAAoB;AAkB9D,IAAMC,IAAI,GAAGD,QAAQ,CAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACA,OAAO,IAAME,UAAU,GAAG,SAAbA,UAAU,OAUA;EAAA,IATrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAGD,IAAI,GAAG,GAAG,GAAG,QAAQ;IACjCE,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGjB,WAAW,EAAE;EAE9B,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAG,CAACV,IAAI,KAAK,CAACK,SAAS,CAAC,YAAY,CAAC,IAAI,CAACA,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAEzF,IAAI,CAACK,YAAY,EAAE;MACjBf,IAAI,CAACF,eAAe,CAACkB,IAAI,CAACT,SAAS,KAAK,GAAG,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACtF;EACF;EAEA,oBACE,oBAAC,SAAS,eACJG,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAEd,UAAU,mBAEnBmB,QAAQ,KAAKd,QAAQ,CAACoB,GAAG,yBAA6B,EACtDN,QAAQ,KAAKd,QAAQ,CAACqB,OAAO,6BAAiC,EAC9Df,QAAQ,8BAAkC,EAC1C,CAAC,CAACE,IAAI,0BAA8B,EACpCI,SAAS;EACT,iBAEF,oBAAC,QAAQ;IACP,IAAI,EAAC,cAAc;IACnB,SAAS,EAAC,KAAK;IACf,QAAQ,EAAED,QAAS;IACnB,UAAU,EACRG,QAAQ,KAAKd,QAAQ,CAACoB,GAAG,wCAA4C,YACtE;IACD,iBAAiB,EAAEN,QAAQ,KAAKd,QAAQ,CAACoB,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,GACxCf,QAAQ,eACT;IAAK,SAAS;EAA8B,GAAET,YAAY,CAACW,SAAS,CAAC,IAAIA,SAAS,CAAO,CACrF,EACLC,IAAI,iBACH,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS,wBAA6B;IAAC,MAAM,EAAC;EAAG,GACxEA,IAAI,CAER,CACG,CACI;AAEhB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -8,8 +8,11 @@ import { Platform } from '../../lib/platform';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { useDOM } from '../../lib/dom';
 import { pressedKey } from '../../lib/accessibility';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
+var modeClassNames = {
+  default: "vkuiTabs--mode-default",
+  accent: "vkuiTabs--mode-accent",
+  secondary: "vkuiTabs--mode-secondary"
+};
 export var TabsModeContext = /*#__PURE__*/React.createContext({
   mode: 'default',
   withGaps: false
@@ -28,8 +31,6 @@ export var Tabs = function Tabs(_ref) {
     role = _ref$role === void 0 ? 'tablist' : _ref$role,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
-  var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX;
   var _useDOM = useDOM(),
     document = _useDOM.document;
   var isTabFlow = role === 'tablist';
@@ -123,7 +124,7 @@ export var Tabs = function Tabs(_ref) {
   });
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    className: classNames("vkuiTabs", platform === Platform.VKCOM && styles["Tabs--".concat(platform)], getSizeXClassName("vkuiTabs", sizeX), withGaps && "vkuiTabs--withGaps", styles["Tabs--mode-".concat(mode)], className),
+    className: classNames("vkuiTabs", platform === Platform.VKCOM && "vkuiTabs--vkcom", withGaps && "vkuiTabs--withGaps", modeClassNames[mode], className),
     role: role
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabs__in",
@@ -135,14 +136,4 @@ export var Tabs = function Tabs(_ref) {
     }
   }, children)));
 };
-var styles = {
-  "Tabs--withGaps": "vkuiTabs--withGaps",
-  "Tabs--mode-default": "vkuiTabs--mode-default",
-  "Tabs--buttons": "vkuiTabs--buttons",
-  "Tabs--sizeX-compact": "vkuiTabs--sizeX-compact",
-  "Tabs--sizeX-none": "vkuiTabs--sizeX-none",
-  "Tabs--mode-accent": "vkuiTabs--mode-accent",
-  "Tabs--mode-secondary": "vkuiTabs--mode-secondary",
-  "Tabs--vkcom": "vkuiTabs--vkcom"
-};
 //# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","classNames","usePlatform","Platform","useGlobalEventListener","useDOM","pressedKey","useAdaptivity","getSizeXClassName","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","sizeX","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","VKCOM","styles"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        platform === Platform.VKCOM && styles[`Tabs--${platform}`],\n        getSizeXClassName(styles['Tabs'], sizeX),\n        withGaps && styles['Tabs--withGaps'],\n        styles[`Tabs--mode-${mode}`],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["React","classNames","usePlatform","Platform","useGlobalEventListener","useDOM","pressedKey","modeClassNames","default","accent","secondary","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","VKCOM"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { pressedKey } from '../../lib/accessibility';\nimport styles from './Tabs.module.css';\n\nconst modeClassNames = {\n  default: styles['Tabs--mode-default'],\n  accent: styles['Tabs--mode-accent'],\n  secondary: styles['Tabs--mode-secondary'],\n};\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        platform === Platform.VKCOM && styles['Tabs--vkcom'],\n        withGaps && styles['Tabs--withGaps'],\n        modeClassNames[mode],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Placement } from '@popperjs/core';
+import { type PlacementWithAuto } from '../../lib/floating';
 import { HasRootRef } from '../../types';
 export interface TooltipProps {
     /**
@@ -61,7 +61,7 @@ export interface TooltipProps {
     /**
      * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
      */
-    placement?: Placement;
+    placement?: PlacementWithAuto;
     /**
      * Пользовательские css-классы, будут добавлены на root-элемент
      */
@@ -70,4 +70,4 @@ export interface TooltipProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const Tooltip: ({ children, isShown: _isShown, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, appearance, arrow, placement, ...restProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, appearance, arrow, placement: placementProp, text, header, className, ...restProps }: TooltipProps) => JSX.Element;

package/dist/components/Tooltip/Tooltip.js

@@ -1,17 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className"],
-  _excluded2 = ["children", "isShown", "offsetX", "offsetY", "alignX", "alignY", "onClose", "cornerOffset", "cornerAbsoluteOffset", "appearance", "arrow", "placement"];
+var _excluded = ["children", "isShown", "offsetX", "offsetY", "alignX", "alignY", "onClose", "cornerOffset", "cornerAbsoluteOffset", "appearance", "arrow", "placement", "text", "header", "className"];
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
 import { PopperArrow } from '../PopperArrow/PopperArrow';
-import { usePopper } from 'react-popper';
+import { useFloating, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, offsetMiddleware, shiftMiddleware, flipMiddleware, arrowMiddleware, autoUpdateFloatingElement, getAutoPlacementAlign, autoPlacementMiddleware } from '../../lib/floating';
 import { tooltipContainerAttr } from './TooltipContainer';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useDOM } from '../../lib/dom';
@@ -21,40 +20,13 @@ var isDOMTypeElement = function isDOMTypeElement(element) {
   return /*#__PURE__*/React.isValidElement(element) && typeof element.type === 'string';
 };
 var warn = warnOnce('Tooltip');
-var IS_DEV = process.env.NODE_ENV === 'development';
-var SimpleTooltip = /*#__PURE__*/React.forwardRef(function SimpleTooltip(_ref, ref) {
-  var _attributes$container;
-  var _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'accent' : _ref$appearance,
-    header = _ref.header,
-    text = _ref.text,
-    arrow = _ref.arrow,
-    _ref$style = _ref.style,
-    popperStyles = _ref$style === void 0 ? {} : _ref$style,
-    attributes = _ref.attributes,
-    className = _ref.className;
-  var _ref2 = (_attributes$container = attributes === null || attributes === void 0 ? void 0 : attributes.container) !== null && _attributes$container !== void 0 ? _attributes$container : {},
-    containerClassName = _ref2.className,
-    restContainerAttributes = _objectWithoutProperties(_ref2, _excluded);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames("vkuiTooltip", styles["Tooltip--appearance-".concat(appearance)], className)
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames("vkuiTooltip__container", containerClassName),
-    ref: ref,
-    style: popperStyles.container
-  }, restContainerAttributes), arrow && /*#__PURE__*/React.createElement(PopperArrow, {
-    style: popperStyles.arrow,
-    attributes: attributes === null || attributes === void 0 ? void 0 : attributes.arrow,
-    arrowClassName: "vkuiTooltip__arrow"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiTooltip__content"
-  }, header && /*#__PURE__*/React.createElement(Subhead, {
-    weight: "2",
-    className: "vkuiTooltip__title"
-  }, header), text && /*#__PURE__*/React.createElement(Subhead, {
-    className: "vkuiTooltip__text"
-  }, text))));
-});
+var stylesAppearance = {
+  accent: "vkuiTooltip--appearance-accent",
+  neutral: "vkuiTooltip--appearance-neutral",
+  white: "vkuiTooltip--appearance-white",
+  black: "vkuiTooltip--appearance-black",
+  inversion: "vkuiTooltip--appearance-inversion"
+};
 function mapAlignX(x) {
   switch (x) {
     case 'left':
@@ -65,7 +37,7 @@ function mapAlignX(x) {
       return '';
   }
 }
-function getPlacement(alignX, alignY) {
+function getDefaultPlacement(alignX, alignY) {
   return [alignY || 'bottom', mapAlignX(alignX || 'left')].filter(function (p) {
     return !!p;
   }).join('-');
@@ -77,148 +49,141 @@ function isVerticalPlacement(placement) {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export var Tooltip = function Tooltip(_ref3) {
-  var _attributes$arrow, _attributes$popper;
-  var children = _ref3.children,
-    _ref3$isShown = _ref3.isShown,
-    _isShown = _ref3$isShown === void 0 ? true : _ref3$isShown,
-    _ref3$offsetX = _ref3.offsetX,
-    offsetX = _ref3$offsetX === void 0 ? 0 : _ref3$offsetX,
-    _ref3$offsetY = _ref3.offsetY,
-    offsetY = _ref3$offsetY === void 0 ? 15 : _ref3$offsetY,
-    alignX = _ref3.alignX,
-    alignY = _ref3.alignY,
-    onClose = _ref3.onClose,
-    _ref3$cornerOffset = _ref3.cornerOffset,
-    cornerOffset = _ref3$cornerOffset === void 0 ? 0 : _ref3$cornerOffset,
-    cornerAbsoluteOffset = _ref3.cornerAbsoluteOffset,
-    appearance = _ref3.appearance,
-    _ref3$arrow = _ref3.arrow,
-    arrow = _ref3$arrow === void 0 ? true : _ref3$arrow,
-    placement = _ref3.placement,
-    restProps = _objectWithoutProperties(_ref3, _excluded2);
-  var _useNavTransition = useNavTransition(),
-    entering = _useNavTransition.entering;
-  var isShown = _isShown && !entering;
+export var Tooltip = function Tooltip(_ref) {
+  var children = _ref.children,
+    _ref$isShown = _ref.isShown,
+    isShownProp = _ref$isShown === void 0 ? true : _ref$isShown,
+    _ref$offsetX = _ref.offsetX,
+    offsetX = _ref$offsetX === void 0 ? 0 : _ref$offsetX,
+    _ref$offsetY = _ref.offsetY,
+    offsetY = _ref$offsetY === void 0 ? 15 : _ref$offsetY,
+    alignX = _ref.alignX,
+    alignY = _ref.alignY,
+    onClose = _ref.onClose,
+    _ref$cornerOffset = _ref.cornerOffset,
+    cornerOffset = _ref$cornerOffset === void 0 ? 0 : _ref$cornerOffset,
+    cornerAbsoluteOffset = _ref.cornerAbsoluteOffset,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'accent' : _ref$appearance,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? true : _ref$arrow,
+    placementProp = _ref.placement,
+    text = _ref.text,
+    header = _ref.header,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var arrowRef = React.useRef(null);
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    tooltipRef = _React$useState2[0],
-    setTooltipRef = _React$useState2[1];
-  var _React$useState3 = React.useState(),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    target = _React$useState4[0],
-    setTarget = _React$useState4[1];
-  if (IS_DEV) {
+    target = _React$useState2[0],
+    setTarget = _React$useState2[1];
+  /* eslint-disable no-restricted-properties */
+  var tooltipContainer = React.useMemo(function () {
+    return target === null || target === void 0 ? void 0 : target.closest("[".concat(tooltipContainerAttr, "]"));
+  }, [target]);
+  var _useNavTransition = useNavTransition(),
+    entering = _useNavTransition.entering;
+  var isShown = isShownProp && tooltipContainer && !entering;
+  var placement = placementProp || getDefaultPlacement(alignX, alignY);
+  var isNotAutoPlacement = checkIsNotAutoPlacement(placement);
+  if (process.env.NODE_ENV === 'development') {
     var multiChildren = React.Children.count(children) > 1;
     // Empty children is a noop
     var primitiveChild = hasReactNode(children) && _typeof(children) !== 'object';
     (multiChildren || primitiveChild) && warn(['children должен быть одним React элементом, получено', multiChildren && 'несколько', primitiveChild && JSON.stringify(children)].filter(Boolean).join(' '), 'error');
   }
-
-  /* eslint-disable no-restricted-properties */
-  /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion*/
-  var tooltipContainer = React.useMemo(function () {
-    return target === null || target === void 0 ? void 0 : target.closest("[".concat(tooltipContainerAttr, "]"));
-  }, [target]);
-  var strategy = React.useMemo(function () {
+  var floatingPositionStrategy = React.useMemo(function () {
     return (target === null || target === void 0 ? void 0 : target.style.position) === 'fixed' ? 'fixed' : 'absolute';
   }, [target]);
-  /* eslint-enable @typescript-eslint/no-unnecessary-type-assertion*/
-  /* eslint-enable no-restricted-properties */
-
-  if (IS_DEV && target && !tooltipContainer) {
+  if (process.env.NODE_ENV === 'development' && target && !tooltipContainer) {
     throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');
   }
-  var modifiers = React.useMemo(function () {
-    var modifiers = [{
-      name: 'offset',
-      options: {
-        offset: [offsetX, offsetY]
-      }
-    }, {
-      name: 'preventOverflow'
-    }, {
-      name: 'flip'
-    }];
+  var memoizedMiddlewares = React.useMemo(function () {
+    var middlewares = [offsetMiddleware({
+      crossAxis: offsetX,
+      mainAxis: offsetY
+    })];
+
+    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
+    if (isNotAutoPlacement) {
+      middlewares.push(flipMiddleware());
+    } else {
+      middlewares.push(autoPlacementMiddleware({
+        alignment: placement ? getAutoPlacementAlign(placement) : null
+      }));
+    }
+    middlewares.push(shiftMiddleware());
+
+    // см. https://floating-ui.com/docs/arrow#order
     if (arrow) {
-      modifiers.push({
-        name: 'arrow',
-        options: {
-          padding: 14
-        }
-      });
-      modifiers.push({
+      middlewares.push(arrowMiddleware({
+        element: arrowRef,
+        padding: 14
+      }));
+      middlewares.push({
         name: 'arrowOffset',
-        enabled: true,
-        phase: 'main',
-        fn: function fn(_ref4) {
-          var state = _ref4.state;
-          if (!state.modifiersData.arrow) {
-            return;
+        fn: function fn(_ref2) {
+          var placement = _ref2.placement,
+            middlewareData = _ref2.middlewareData;
+          if (!middlewareData.arrow) {
+            return Promise.resolve({});
           }
-          if (isVerticalPlacement(state.placement)) {
+          if (isVerticalPlacement(placement)) {
             if (cornerAbsoluteOffset !== undefined) {
-              state.modifiersData.arrow.x = cornerAbsoluteOffset;
-            } else {
-              var _state$modifiersData$;
-              if (((_state$modifiersData$ = state.modifiersData.arrow) === null || _state$modifiersData$ === void 0 ? void 0 : _state$modifiersData$.x) !== undefined) {
-                state.modifiersData.arrow.x += cornerOffset;
-              }
+              middlewareData.arrow.x = cornerAbsoluteOffset;
+            } else if (middlewareData.arrow.x !== undefined) {
+              middlewareData.arrow.x += cornerOffset;
             }
           } else {
             if (cornerAbsoluteOffset !== undefined) {
-              state.modifiersData.arrow.y = cornerAbsoluteOffset;
-            } else {
-              var _state$modifiersData$2;
-              if (((_state$modifiersData$2 = state.modifiersData.arrow) === null || _state$modifiersData$2 === void 0 ? void 0 : _state$modifiersData$2.y) !== undefined) {
-                state.modifiersData.arrow.y += cornerOffset;
-              }
+              middlewareData.arrow.y = cornerAbsoluteOffset;
+            } else if (middlewareData.arrow.y !== undefined) {
+              middlewareData.arrow.y += cornerOffset;
             }
           }
+          return Promise.resolve({});
         }
       });
     }
-    return modifiers;
-  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY]);
-  var _placement = placement !== null && placement !== void 0 ? placement : getPlacement(alignX, alignY);
-  var _usePopper = usePopper(target, tooltipRef, {
-      strategy: strategy,
-      placement: _placement,
-      modifiers: modifiers
+    return middlewares;
+  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY, placement, isNotAutoPlacement]);
+  var _useFloating = useFloating({
+      strategy: floatingPositionStrategy,
+      placement: isNotAutoPlacement ? placement : undefined,
+      middleware: memoizedMiddlewares,
+      whileElementsMounted: autoUpdateFloatingElement
     }),
-    popperStyles = _usePopper.styles,
-    attributes = _usePopper.attributes;
+    floatingDataX = _useFloating.x,
+    floatingDataY = _useFloating.y,
+    resolvedPlacement = _useFloating.placement,
+    refs = _useFloating.refs,
+    arrowCoords = _useFloating.middlewareData.arrow;
   var _useDOM = useDOM(),
     document = _useDOM.document;
   useGlobalEventListener(document, 'click', isShown && onClose, {
+    capture: true,
     passive: true
   });
-  // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()
-
   var childRef = isDOMTypeElement(children) ? children.ref : /*#__PURE__*/React.isValidElement(children) ? children.props.getRootRef : null;
-  var patchedRef = useExternRef(setTarget, childRef);
+  var patchedRef = useExternRef(setTarget, refs.setReference, childRef);
   var child = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _defineProperty({}, isDOMTypeElement(children) ? 'ref' : 'getRootRef', patchedRef)) : children;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, child, isShown && target != null && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(SimpleTooltip, _extends({}, restProps, {
-    appearance: appearance,
-    arrow: arrow,
-    ref: function ref(el) {
-      return setTooltipRef(el);
-    },
-    style: {
-      arrow: popperStyles.arrow,
-      container: popperStyles.popper
-    },
-    attributes: {
-      arrow: (_attributes$arrow = attributes.arrow) !== null && _attributes$arrow !== void 0 ? _attributes$arrow : null,
-      container: (_attributes$popper = attributes.popper) !== null && _attributes$popper !== void 0 ? _attributes$popper : null
-    }
-  })), tooltipContainer));
-};
-var styles = {
-  "Tooltip--appearance-accent": "vkuiTooltip--appearance-accent",
-  "Tooltip--appearance-white": "vkuiTooltip--appearance-white",
-  "Tooltip--appearance-black": "vkuiTooltip--appearance-black",
-  "Tooltip--appearance-inversion": "vkuiTooltip--appearance-inversion",
-  "Tooltip--appearance-neutral": "vkuiTooltip--appearance-neutral"
+  return /*#__PURE__*/React.createElement(React.Fragment, null, child, isShown && target != null && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+    className: classNames("vkuiTooltip", stylesAppearance[appearance], className)
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: refs.setFloating,
+    style: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY)
+  }, arrow && /*#__PURE__*/React.createElement(PopperArrow, {
+    coords: arrowCoords,
+    placement: resolvedPlacement,
+    arrowClassName: "vkuiTooltip__arrow",
+    getRootRef: arrowRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiTooltip__content"
+  }, header && /*#__PURE__*/React.createElement(Subhead, {
+    weight: "2",
+    className: "vkuiTooltip__title"
+  }, header), text && /*#__PURE__*/React.createElement(Subhead, {
+    className: "vkuiTooltip__text"
+  }, text)))), tooltipContainer));
 };
 //# sourceMappingURL=Tooltip.js.map