@vkontakte/vkui 7.4.3 → 7.5.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  getRef,\n  checked: checkedProp,\n  disabled,\n  onBlur: onBlurProp,\n  onFocus: onFocusProp,\n  onClick,\n  ...restProps\n}: SwitchProps): React.ReactNode => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n  const handleBlur = callMultiple(onBlur, onBlurProp);\n  const handleFocus = callMultiple(onFocus, onFocusProp);\n\n  const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n    Boolean(restProps.defaultChecked),\n  );\n  const isControlled = checkedProp !== undefined;\n\n  const syncUncontrolledCheckedStateOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n\n      const switchTarget = e.target as HTMLInputElement;\n      setLocalUncontrolledChecked(switchTarget.checked);\n    },\n    [isControlled],\n  );\n\n  const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n    ...restProps,\n    Component: 'input',\n    getRootRef: getRef,\n    type: 'checkbox',\n    role: 'switch',\n    disabled: disabled,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n  };\n\n  if (isControlled) {\n    inputProps.checked = checkedProp;\n    inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n  } else {\n    inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n  }\n\n  return (\n    <label\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' ? styles.ios : styles.default,\n        disabled && styles.disabled,\n        isRtl && styles.rtl,\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHidden\n        {...inputProps}\n        className={styles.inputNative}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n      />\n      <span aria-hidden className={styles.inputFake}>\n        <span className={styles.track} />\n        <span\n          aria-hidden\n          className={classNames(\n            styles.handle,\n            platform !== 'ios' && !disabled && styles.handleWithRipple,\n          )}\n        />\n      </span>\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useConfigDirection","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Switch","style","className","getRootRef","getRef","checked","checkedProp","disabled","onBlur","onBlurProp","onFocus","onFocusProp","onClick","restProps","direction","isRtl","platform","sizeY","focusVisible","focusVisibleClassNames","mode","handleBlur","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","label","host","ios","default","rtl","ref","inputNative","span","aria-hidden","inputFake","track","handle","handleWithRipple"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AAEtD,SAASC,cAAc,QAAkC,sCAAmC;AAC5F,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAOA;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpBC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,SAASC,WAAW,EACpBC,OAAO,EACP,GAAGC,WACS;IACZ,MAAMC,YAAY1B;IAClB,MAAM2B,QAAQD,cAAc;IAC5B,MAAME,WAAWzB;IACjB,MAAM,EAAE0B,QAAQ,MAAM,EAAE,GAAG9B;IAC3B,MAAM,EAAE+B,YAAY,EAAEV,MAAM,EAAEE,OAAO,EAAE,GAAGrB;IAC1C,MAAM8B,yBAAyB7B,yBAAyB;QAAE4B;QAAcE,MAAM;IAAU;IACxF,MAAMC,aAAa7B,aAAagB,QAAQC;IACxC,MAAMa,cAAc9B,aAAakB,SAASC;IAE1C,MAAM,CAACY,0BAA0BC,4BAA4B,GAAGvC,MAAMwC,QAAQ,CAC5EC,QAAQb,UAAUc,cAAc;IAElC,MAAMC,eAAetB,gBAAgBuB;IAErC,MAAMC,sCAAsC7C,MAAM8C,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BV,4BAA4BS,aAAa5B,OAAO;IAClD,GACA;QAACuB;KAAa;IAGhB,MAAMO,aAAoD;QACxD,GAAGtB,SAAS;QACZuB,WAAW;QACXjC,YAAYC;QACZiC,MAAM;QACNC,MAAM;QACN/B,UAAUA;QACVC,QAAQC;QACRC,SAASC;QACTC,SAASpB,aAAasC,qCAAqClB;IAC7D;IAEA,IAAIgB,cAAc;QAChBO,WAAW9B,OAAO,GAAGC;QACrB6B,UAAU,CAAC,eAAe,GAAG7B,cAAc,SAAS;IACtD,OAAO;QACL6B,UAAU,CAAC,eAAe,GAAGZ,2BAA2B,SAAS;IACnE;IAEA,qBACE,MAACgB;QACCrC,WAAWhB,WACTQ,OAAO8C,IAAI,EACXvB,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CD,aAAa,QAAQtB,OAAO+C,GAAG,GAAG/C,OAAOgD,OAAO,EAChDnC,YAAYb,OAAOa,QAAQ,EAC3BQ,SAASrB,OAAOiD,GAAG,EACnBxB,wBACAjB;QAEFD,OAAOA;QACP2C,KAAKzC;;0BAEL,KAACV;gBACE,GAAG0C,UAAU;gBACdjC,WAAWR,OAAOmD,WAAW;gBAC7BrC,QAAQa;gBACRX,SAASY;;0BAEX,MAACwB;gBAAKC,aAAW;gBAAC7C,WAAWR,OAAOsD,SAAS;;kCAC3C,KAACF;wBAAK5C,WAAWR,OAAOuD,KAAK;;kCAC7B,KAACH;wBACCC,aAAW;wBACX7C,WAAWhB,WACTQ,OAAOwD,MAAM,EACblC,aAAa,SAAS,CAACT,YAAYb,OAAOyD,gBAAgB;;;;;;AAMtE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkui.io/components/switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  getRef,\n  checked: checkedProp,\n  disabled,\n  onBlur: onBlurProp,\n  onFocus: onFocusProp,\n  onClick,\n  ...restProps\n}: SwitchProps): React.ReactNode => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n  const handleBlur = callMultiple(onBlur, onBlurProp);\n  const handleFocus = callMultiple(onFocus, onFocusProp);\n\n  const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n    Boolean(restProps.defaultChecked),\n  );\n  const isControlled = checkedProp !== undefined;\n\n  const syncUncontrolledCheckedStateOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n\n      const switchTarget = e.target as HTMLInputElement;\n      setLocalUncontrolledChecked(switchTarget.checked);\n    },\n    [isControlled],\n  );\n\n  const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n    ...restProps,\n    Component: 'input',\n    getRootRef: getRef,\n    type: 'checkbox',\n    role: 'switch',\n    disabled: disabled,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n  };\n\n  if (isControlled) {\n    inputProps.checked = checkedProp;\n    inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n  } else {\n    inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n  }\n\n  return (\n    <label\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' ? styles.ios : styles.default,\n        disabled && styles.disabled,\n        isRtl && styles.rtl,\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHidden\n        {...inputProps}\n        className={styles.inputNative}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n      />\n      <span aria-hidden className={styles.inputFake}>\n        <span className={styles.track} />\n        <span\n          aria-hidden\n          className={classNames(\n            styles.handle,\n            platform !== 'ios' && !disabled && styles.handleWithRipple,\n          )}\n        />\n      </span>\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useConfigDirection","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Switch","style","className","getRootRef","getRef","checked","checkedProp","disabled","onBlur","onBlurProp","onFocus","onFocusProp","onClick","restProps","direction","isRtl","platform","sizeY","focusVisible","focusVisibleClassNames","mode","handleBlur","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","label","host","ios","default","rtl","ref","inputNative","span","aria-hidden","inputFake","track","handle","handleWithRipple"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AAEtD,SAASC,cAAc,QAAkC,sCAAmC;AAC5F,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAOA;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpBC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,SAASC,WAAW,EACpBC,OAAO,EACP,GAAGC,WACS;IACZ,MAAMC,YAAY1B;IAClB,MAAM2B,QAAQD,cAAc;IAC5B,MAAME,WAAWzB;IACjB,MAAM,EAAE0B,QAAQ,MAAM,EAAE,GAAG9B;IAC3B,MAAM,EAAE+B,YAAY,EAAEV,MAAM,EAAEE,OAAO,EAAE,GAAGrB;IAC1C,MAAM8B,yBAAyB7B,yBAAyB;QAAE4B;QAAcE,MAAM;IAAU;IACxF,MAAMC,aAAa7B,aAAagB,QAAQC;IACxC,MAAMa,cAAc9B,aAAakB,SAASC;IAE1C,MAAM,CAACY,0BAA0BC,4BAA4B,GAAGvC,MAAMwC,QAAQ,CAC5EC,QAAQb,UAAUc,cAAc;IAElC,MAAMC,eAAetB,gBAAgBuB;IAErC,MAAMC,sCAAsC7C,MAAM8C,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BV,4BAA4BS,aAAa5B,OAAO;IAClD,GACA;QAACuB;KAAa;IAGhB,MAAMO,aAAoD;QACxD,GAAGtB,SAAS;QACZuB,WAAW;QACXjC,YAAYC;QACZiC,MAAM;QACNC,MAAM;QACN/B,UAAUA;QACVC,QAAQC;QACRC,SAASC;QACTC,SAASpB,aAAasC,qCAAqClB;IAC7D;IAEA,IAAIgB,cAAc;QAChBO,WAAW9B,OAAO,GAAGC;QACrB6B,UAAU,CAAC,eAAe,GAAG7B,cAAc,SAAS;IACtD,OAAO;QACL6B,UAAU,CAAC,eAAe,GAAGZ,2BAA2B,SAAS;IACnE;IAEA,qBACE,MAACgB;QACCrC,WAAWhB,WACTQ,OAAO8C,IAAI,EACXvB,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CD,aAAa,QAAQtB,OAAO+C,GAAG,GAAG/C,OAAOgD,OAAO,EAChDnC,YAAYb,OAAOa,QAAQ,EAC3BQ,SAASrB,OAAOiD,GAAG,EACnBxB,wBACAjB;QAEFD,OAAOA;QACP2C,KAAKzC;;0BAEL,KAACV;gBACE,GAAG0C,UAAU;gBACdjC,WAAWR,OAAOmD,WAAW;gBAC7BrC,QAAQa;gBACRX,SAASY;;0BAEX,MAACwB;gBAAKC,aAAW;gBAAC7C,WAAWR,OAAOsD,SAAS;;kCAC3C,KAACF;wBAAK5C,WAAWR,OAAOuD,KAAK;;kCAC7B,KAACH;wBACCC,aAAW;wBACX7C,WAAWhB,WACTQ,OAAOwD,MAAM,EACblC,aAAa,SAAS,CAACT,YAAYb,OAAOyD,gBAAgB;;;;;;AAMtE,EAAE"}

package/dist/cssm/components/Tabbar/Tabbar.js

@@ -16,7 +16,7 @@ const getItemsLayoutClassName = (itemsLayout, children)=>{
     }
 };
 /**
- * @see https://vkcom.github.io/VKUI/#/Tabbar
+ * @see https://vkui.io/components/epic#tabbar
  */ export const Tabbar = ({ plain = false, mode, ...restProps })=>{
     const platform = usePlatform();
     return /*#__PURE__*/ _jsx(RootComponent, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS).\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное).\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles.host,\n        platform === 'ios' && styles.ios,\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles.shadow,\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName","host","ios","shadow"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWZ;IAEjB,qBACE,KAACC;QACCY,eAAed,WACb,sBACAG,OAAOY,IAAI,EACXF,aAAa,SAASV,OAAOa,GAAG,EAChCZ,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI,SAASP,OAAOc,MAAM;QAExB,GAAGL,SAAS;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS).\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное).\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkui.io/components/epic#tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles.host,\n        platform === 'ios' && styles.ios,\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles.shadow,\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName","host","ios","shadow"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWZ;IAEjB,qBACE,KAACC;QACCY,eAAed,WACb,sBACAG,OAAOY,IAAI,EACXF,aAAa,SAASV,OAAOa,GAAG,EAChCZ,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI,SAASP,OAAOc,MAAM;QAExB,GAAGL,SAAS;;AAGnB,EAAE"}

package/dist/cssm/components/TabbarItem/TabbarItem.js

@@ -13,7 +13,7 @@ import { Footnote } from "../Typography/Footnote/Footnote.js";
 import styles from "./TabbarItem.module.css";
 const warn = warnOnce('TabbarItem');
 /**
- * @see https://vkcom.github.io/VKUI/#/TabbarItem
+ * @see https://vkui.io/components/epic#tabbar-item
  */ export const TabbarItem = ({ children, selected, indicator, label, href, Component = href ? 'a' : 'button', disabled, onFocus: onFocusProp, onBlur: onBlurProp, ...restProps })=>{
     const platform = usePlatform();
     if (process.env.NODE_ENV === 'development') {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Выбранное состояние компонента.\n   */\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой.\n   */\n  label?: 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  label,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: TabbarItemProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = label || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  const {\n    focusVisible,\n    onFocus: handleFocusVisibleOnFocus,\n    onBlur: handleFocusVisibleOnBlur,\n  } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n  });\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      onFocus={callMultiple(handleFocusVisibleOnFocus, onFocusProp)}\n      onBlur={callMultiple(handleFocusVisibleOnBlur, onBlurProp)}\n      href={href}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        platform === 'android' && styles.android,\n        selected && styles.selected,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles.tappableActive : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={classNames(styles.tappable, focusVisibleClassNames)}\n        onClick={noop}\n        tabIndex={-1}\n      />\n      <div className={styles.in}>\n        <div className={styles.icon}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {label && (\n          <Footnote Component=\"div\" className={styles.label} weight=\"2\">\n            {label}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","label","href","Component","disabled","onFocus","onFocusProp","onBlur","onBlurProp","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","focusVisible","handleFocusVisibleOnFocus","handleFocusVisibleOnBlur","focusVisibleClassNames","baseClassName","host","ios","android","role","activeMode","tappableActive","activeEffectDelay","hasHover","className","tappable","onClick","tabIndex","div","in","icon","weight"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAE/D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAoB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACa;IAChB,MAAMC,WAAWtB;IAEjB,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBb,SAASQ,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE1F,IAAI,CAACK,mBAAmB;YACtBlB,KAAKN,gBAAgByB,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,MAAM,EACJa,YAAY,EACZX,SAASY,yBAAyB,EAClCV,QAAQW,wBAAwB,EACjC,GAAGhC;IACJ,MAAMiC,yBAAyBhC,yBAAyB;QACtD6B;IACF;IAEA,qBACE,MAACxB;QACCW,WAAWA;QACV,GAAGM,SAAS;QACbL,UAAUA;QACVC,SAAShB,aAAa4B,2BAA2BX;QACjDC,QAAQlB,aAAa6B,0BAA0BV;QAC/CN,MAAMA;QACNkB,eAAerC,WACbY,OAAO0B,IAAI,EACXX,aAAa,SAASf,OAAO2B,GAAG,EAChCZ,aAAa,aAAaf,OAAO4B,OAAO,EACxCxB,YAAYJ,OAAOI,QAAQ;;0BAG7B,KAACN;gBACC+B,MAAK;gBACLpB,UAAUA;gBACVqB,YAAYf,aAAa,QAAQf,OAAO+B,cAAc,GAAG;gBACzDC,mBAAmBjB,aAAa,QAAQ,IAAI;gBAC5CkB,UAAU;gBACVC,WAAW9C,WAAWY,OAAOmC,QAAQ,EAAEX;gBACvCY,SAAS9C;gBACT+C,UAAU,CAAC;;0BAEb,MAACC;gBAAIJ,WAAWlC,OAAOuC,EAAE;;kCACvB,MAACD;wBAAIJ,WAAWlC,OAAOwC,IAAI;;4BACxBrC;0CACD,KAACmC;gCAAIJ,WAAU;0CACZ7C,aAAagB,cAAcA;;;;oBAG/BC,uBACC,KAACP;wBAASS,WAAU;wBAAM0B,WAAWlC,OAAOM,KAAK;wBAAEmC,QAAO;kCACvDnC;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Выбранное состояние компонента.\n   */\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой.\n   */\n  label?: 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://vkui.io/components/epic#tabbar-item\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  label,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: TabbarItemProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = label || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  const {\n    focusVisible,\n    onFocus: handleFocusVisibleOnFocus,\n    onBlur: handleFocusVisibleOnBlur,\n  } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n  });\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      onFocus={callMultiple(handleFocusVisibleOnFocus, onFocusProp)}\n      onBlur={callMultiple(handleFocusVisibleOnBlur, onBlurProp)}\n      href={href}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        platform === 'android' && styles.android,\n        selected && styles.selected,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles.tappableActive : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={classNames(styles.tappable, focusVisibleClassNames)}\n        onClick={noop}\n        tabIndex={-1}\n      />\n      <div className={styles.in}>\n        <div className={styles.icon}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {label && (\n          <Footnote Component=\"div\" className={styles.label} weight=\"2\">\n            {label}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","label","href","Component","disabled","onFocus","onFocusProp","onBlur","onBlurProp","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","focusVisible","handleFocusVisibleOnFocus","handleFocusVisibleOnBlur","focusVisibleClassNames","baseClassName","host","ios","android","role","activeMode","tappableActive","activeEffectDelay","hasHover","className","tappable","onClick","tabIndex","div","in","icon","weight"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAE/D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAoB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACa;IAChB,MAAMC,WAAWtB;IAEjB,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBb,SAASQ,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE1F,IAAI,CAACK,mBAAmB;YACtBlB,KAAKN,gBAAgByB,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,MAAM,EACJa,YAAY,EACZX,SAASY,yBAAyB,EAClCV,QAAQW,wBAAwB,EACjC,GAAGhC;IACJ,MAAMiC,yBAAyBhC,yBAAyB;QACtD6B;IACF;IAEA,qBACE,MAACxB;QACCW,WAAWA;QACV,GAAGM,SAAS;QACbL,UAAUA;QACVC,SAAShB,aAAa4B,2BAA2BX;QACjDC,QAAQlB,aAAa6B,0BAA0BV;QAC/CN,MAAMA;QACNkB,eAAerC,WACbY,OAAO0B,IAAI,EACXX,aAAa,SAASf,OAAO2B,GAAG,EAChCZ,aAAa,aAAaf,OAAO4B,OAAO,EACxCxB,YAAYJ,OAAOI,QAAQ;;0BAG7B,KAACN;gBACC+B,MAAK;gBACLpB,UAAUA;gBACVqB,YAAYf,aAAa,QAAQf,OAAO+B,cAAc,GAAG;gBACzDC,mBAAmBjB,aAAa,QAAQ,IAAI;gBAC5CkB,UAAU;gBACVC,WAAW9C,WAAWY,OAAOmC,QAAQ,EAAEX;gBACvCY,SAAS9C;gBACT+C,UAAU,CAAC;;0BAEb,MAACC;gBAAIJ,WAAWlC,OAAOuC,EAAE;;kCACvB,MAACD;wBAAIJ,WAAWlC,OAAOwC,IAAI;;4BACxBrC;0CACD,KAACmC;gCAAIJ,WAAU;0CACZ7C,aAAagB,cAAcA;;;;oBAG/BC,uBACC,KAACP;wBAASS,WAAU;wBAAM0B,WAAWlC,OAAOM,KAAK;wBAAEmC,QAAO;kCACvDnC;;;;;;AAMb,EAAE"}

package/dist/cssm/components/Tabs/Tabs.js

@@ -10,7 +10,7 @@ import { useTabsController } from "./TabsController.js";
 import { TabsModeContext } from "./TabsModeContext.js";
 import styles from "./Tabs.module.css";
 /**
- * @see https://vkcom.github.io/VKUI/#/Tabs
+ * @see https://vkui.io/components/tabs
  */ export const Tabs = ({ children, mode = 'default', role = 'tablist', withScrollToSelectedTab, scrollBehaviorToSelectedTab = 'nearest', layoutFillMode = 'auto', selectedId, defaultSelectedId, onSelectedIdChange, ...restProps })=>{
     const controller = useTabsController({
         selectedId,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { useTabsController } from './TabsController';\nimport { TabsModeContext } from './TabsModeContext';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки.\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно.\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n  /**\n   * Идентификатор выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  selectedId?: string;\n  /**\n   * Идентификатор выбранной вкладки по умолчанию. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  defaultSelectedId?: string;\n  /**\n   * Обработчик изменения выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  onSelectedIdChange?: (id: string) => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  selectedId,\n  defaultSelectedId,\n  onSelectedIdChange,\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const controller = useTabsController({\n    selectedId,\n    defaultSelectedId,\n    onSelectedIdChange,\n  });\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n            controller,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","useTabsController","TabsModeContext","styles","Tabs","children","mode","role","withScrollToSelectedTab","scrollBehaviorToSelectedTab","layoutFillMode","selectedId","defaultSelectedId","onSelectedIdChange","restProps","controller","platform","direction","isTabFlow","withGaps","tabsRef","baseClassName","host","modeDefault","div","className","in","ref","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,iBAAiB,QAAQ,sBAAmB;AACrD,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,oBAAoB;AAwCvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRC,OAAO,SAAS,EAChBC,OAAO,SAAS,EAChBC,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCC,iBAAiB,MAAM,EACvBC,UAAU,EACVC,iBAAiB,EACjBC,kBAAkB,EAClB,GAAGC,WACO;IACV,MAAMC,aAAad,kBAAkB;QACnCU;QACAC;QACAC;IACF;IACA,MAAMG,WAAWlB;IACjB,MAAMmB,YAAYpB;IAClB,MAAMqB,YAAYX,SAAS;IAC3B,MAAMY,WAAWb,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEc,OAAO,EAAE,GAAGrB,kBAAkBmB,WAAWD,cAAc;IAE/D,qBACE,KAACjB;QACE,GAAGc,SAAS;QACbO,eAAezB,WACbO,OAAOmB,IAAI,EACX,oBACAN,aAAa,WAAW,2BACxBG,YAAYvB,WAAWO,OAAOgB,QAAQ,EAAE,+BACxCb,SAAS,aAAaH,OAAOoB,WAAW;QAE1ChB,MAAMA;kBAEN,cAAA,KAACiB;YAAIC,WAAWtB,OAAOuB,EAAE;YAAEC,KAAKP;sBAC9B,cAAA,KAAClB,gBAAgB0B,QAAQ;gBACvBC,OAAO;oBACLvB;oBACAa;oBACAT;oBACAF;oBACAC;oBACAM;gBACF;0BAECV;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { useTabsController } from './TabsController';\nimport { TabsModeContext } from './TabsModeContext';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки.\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно.\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n  /**\n   * Идентификатор выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  selectedId?: string;\n  /**\n   * Идентификатор выбранной вкладки по умолчанию. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  defaultSelectedId?: string;\n  /**\n   * Обработчик изменения выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  onSelectedIdChange?: (id: string) => void;\n}\n\n/**\n * @see https://vkui.io/components/tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  selectedId,\n  defaultSelectedId,\n  onSelectedIdChange,\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const controller = useTabsController({\n    selectedId,\n    defaultSelectedId,\n    onSelectedIdChange,\n  });\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n            controller,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","useTabsController","TabsModeContext","styles","Tabs","children","mode","role","withScrollToSelectedTab","scrollBehaviorToSelectedTab","layoutFillMode","selectedId","defaultSelectedId","onSelectedIdChange","restProps","controller","platform","direction","isTabFlow","withGaps","tabsRef","baseClassName","host","modeDefault","div","className","in","ref","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,iBAAiB,QAAQ,sBAAmB;AACrD,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,oBAAoB;AAwCvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRC,OAAO,SAAS,EAChBC,OAAO,SAAS,EAChBC,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCC,iBAAiB,MAAM,EACvBC,UAAU,EACVC,iBAAiB,EACjBC,kBAAkB,EAClB,GAAGC,WACO;IACV,MAAMC,aAAad,kBAAkB;QACnCU;QACAC;QACAC;IACF;IACA,MAAMG,WAAWlB;IACjB,MAAMmB,YAAYpB;IAClB,MAAMqB,YAAYX,SAAS;IAC3B,MAAMY,WAAWb,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEc,OAAO,EAAE,GAAGrB,kBAAkBmB,WAAWD,cAAc;IAE/D,qBACE,KAACjB;QACE,GAAGc,SAAS;QACbO,eAAezB,WACbO,OAAOmB,IAAI,EACX,oBACAN,aAAa,WAAW,2BACxBG,YAAYvB,WAAWO,OAAOgB,QAAQ,EAAE,+BACxCb,SAAS,aAAaH,OAAOoB,WAAW;QAE1ChB,MAAMA;kBAEN,cAAA,KAACiB;YAAIC,WAAWtB,OAAOuB,EAAE;YAAEC,KAAKP;sBAC9B,cAAA,KAAClB,gBAAgB0B,QAAQ;gBACvBC,OAAO;oBACLvB;oBACAa;oBACAT;oBACAF;oBACAC;oBACAM;gBACF;0BAECV;;;;AAKX,EAAE"}

package/dist/cssm/components/TabsItem/TabsItem.js

@@ -28,7 +28,7 @@ const fillModeClassNames = {
 };
 const warn = warnOnce('TabsItem');
 /**
- * @see https://vkcom.github.io/VKUI/#/TabsItem
+ * @see https://vkui.io/components/tabs#tabs-item
  */ export const TabsItem = ({ before, children, status, after, selected: selectedProp = false, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = styles.hover, activeMode = '', hasActive = false, focusVisibleMode = 'inside', id, onClick, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab, controller } = React.useContext(TabsModeContext);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableOmitProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected: selectedProp = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  id,\n  onClick,\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n    controller,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  const selected = selectedProp || (!!id && controller?.selectedTab === id);\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!id) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      onClick?.(e);\n      if (id) {\n        controller?.onChange(id);\n      }\n    },\n    [id, onClick, controller],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      onClick={_onClick}\n      id={id}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","controller","useContext","statusComponent","isTabFlow","selectedTab","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableOmitProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkui.io/components/badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkui.io/components/counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkui.io/components/tabs#tabs-item\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected: selectedProp = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  id,\n  onClick,\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n    controller,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  const selected = selectedProp || (!!id && controller?.selectedTab === id);\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!id) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      onClick?.(e);\n      if (id) {\n        controller?.onChange(id);\n      }\n    },\n    [id, onClick, controller],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      onClick={_onClick}\n      id={id}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","controller","useContext","statusComponent","isTabFlow","selectedTab","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}

package/dist/cssm/components/Textarea/Textarea.js

@@ -17,7 +17,7 @@ const sizeYClassNames = {
     compact: styles.sizeYCompact
 };
 /**
- * @see https://vkcom.github.io/VKUI/#/Textarea
+ * @see https://vkui.io/components/textarea
  */ export const Textarea = ({ grow = true, style, onResize, className, getRootRef, getRef, rows = 2, maxHeight, status, onChange, align, mode, after, before, afterAlign, beforeAlign, value, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const platform = usePlatform();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { useDOM } from '../../lib/dom';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport { useResizeTextarea } from './useResizeTextarea';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    HasAlign,\n    FormFieldProps {\n  /**\n   * Свойство управляющее автоматическим изменением высоты компонента.\n   */\n  grow?: boolean;\n  /**\n   * Обработчик, срабатывающий при изменении размера компонента.\n   */\n  onResize?: (el: HTMLTextAreaElement) => void;\n  /**\n   * Значение по умолчанию.\n   */\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange,\n  align,\n  mode,\n  after,\n  before,\n  afterAlign,\n  beforeAlign,\n  value,\n  ...restProps\n}: TextareaProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n  const { window } = useDOM();\n\n  const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);\n  const elementRef = useExternRef(getRef, refResizeTextarea);\n\n  React.useEffect(resize, [resize, sizeY, platform, value]);\n  useResizeObserver(window, resize);\n\n  return (\n    <FormField\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        align === 'right' && styles.alignRight,\n        align === 'center' && styles.alignCenter,\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n      mode={mode}\n      after={after}\n      before={before}\n      afterAlign={afterAlign}\n      beforeAlign={beforeAlign}\n      maxHeight={maxHeight}\n    >\n      <UnstyledTextField\n        {...restProps}\n        value={value}\n        as=\"textarea\"\n        rows={rows}\n        className={styles.el}\n        onChange={callMultiple(onChange, resize)}\n        getRootRef={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","usePlatform","useResizeObserver","callMultiple","useDOM","FormField","UnstyledTextField","useResizeTextarea","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Textarea","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","align","mode","after","before","afterAlign","beforeAlign","value","restProps","sizeY","platform","window","refResizeTextarea","resize","elementRef","useEffect","host","alignRight","alignCenter","disabled","as","el"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AAEvC,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,iBAAiB,QAAQ,4CAAyC;AAC3E,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAsBA;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,IAAI,EACXC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,OAAO,CAAC,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,WAAW,EACXC,KAAK,EACL,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlC;IAC3B,MAAMmC,WAAWjC;IACjB,MAAM,EAAEkC,MAAM,EAAE,GAAG/B;IAEnB,MAAM,CAACgC,mBAAmBC,OAAO,GAAG9B,kBAAkBU,UAAUF;IAChE,MAAMuB,aAAatC,aAAaoB,QAAQgB;IAExCvC,MAAM0C,SAAS,CAACF,QAAQ;QAACA;QAAQJ;QAAOC;QAAUH;KAAM;IACxD7B,kBAAkBiC,QAAQE;IAE1B,qBACE,KAAChC;QACCa,WAAWpB,WACTU,OAAOgC,IAAI,EACXP,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CR,UAAU,WAAWjB,OAAOiC,UAAU,EACtChB,UAAU,YAAYjB,OAAOkC,WAAW,EACxCxB;QAEFF,OAAOA;QACPG,YAAYA;QACZwB,UAAUX,UAAUW,QAAQ;QAC5BpB,QAAQA;QACRG,MAAMA;QACNC,OAAOA;QACPC,QAAQA;QACRC,YAAYA;QACZC,aAAaA;QACbR,WAAWA;kBAEX,cAAA,KAAChB;YACE,GAAG0B,SAAS;YACbD,OAAOA;YACPa,IAAG;YACHvB,MAAMA;YACNH,WAAWV,OAAOqC,EAAE;YACpBrB,UAAUrB,aAAaqB,UAAUa;YACjClB,YAAYmB;;;AAIpB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { useDOM } from '../../lib/dom';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport { useResizeTextarea } from './useResizeTextarea';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    HasAlign,\n    FormFieldProps {\n  /**\n   * Свойство управляющее автоматическим изменением высоты компонента.\n   */\n  grow?: boolean;\n  /**\n   * Обработчик, срабатывающий при изменении размера компонента.\n   */\n  onResize?: (el: HTMLTextAreaElement) => void;\n  /**\n   * Значение по умолчанию.\n   */\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkui.io/components/textarea\n */\nexport const Textarea = ({\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange,\n  align,\n  mode,\n  after,\n  before,\n  afterAlign,\n  beforeAlign,\n  value,\n  ...restProps\n}: TextareaProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n  const { window } = useDOM();\n\n  const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);\n  const elementRef = useExternRef(getRef, refResizeTextarea);\n\n  React.useEffect(resize, [resize, sizeY, platform, value]);\n  useResizeObserver(window, resize);\n\n  return (\n    <FormField\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        align === 'right' && styles.alignRight,\n        align === 'center' && styles.alignCenter,\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n      mode={mode}\n      after={after}\n      before={before}\n      afterAlign={afterAlign}\n      beforeAlign={beforeAlign}\n      maxHeight={maxHeight}\n    >\n      <UnstyledTextField\n        {...restProps}\n        value={value}\n        as=\"textarea\"\n        rows={rows}\n        className={styles.el}\n        onChange={callMultiple(onChange, resize)}\n        getRootRef={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","usePlatform","useResizeObserver","callMultiple","useDOM","FormField","UnstyledTextField","useResizeTextarea","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Textarea","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","align","mode","after","before","afterAlign","beforeAlign","value","restProps","sizeY","platform","window","refResizeTextarea","resize","elementRef","useEffect","host","alignRight","alignCenter","disabled","as","el"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AAEvC,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,iBAAiB,QAAQ,4CAAyC;AAC3E,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAsBA;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,IAAI,EACXC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,OAAO,CAAC,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,WAAW,EACXC,KAAK,EACL,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlC;IAC3B,MAAMmC,WAAWjC;IACjB,MAAM,EAAEkC,MAAM,EAAE,GAAG/B;IAEnB,MAAM,CAACgC,mBAAmBC,OAAO,GAAG9B,kBAAkBU,UAAUF;IAChE,MAAMuB,aAAatC,aAAaoB,QAAQgB;IAExCvC,MAAM0C,SAAS,CAACF,QAAQ;QAACA;QAAQJ;QAAOC;QAAUH;KAAM;IACxD7B,kBAAkBiC,QAAQE;IAE1B,qBACE,KAAChC;QACCa,WAAWpB,WACTU,OAAOgC,IAAI,EACXP,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CR,UAAU,WAAWjB,OAAOiC,UAAU,EACtChB,UAAU,YAAYjB,OAAOkC,WAAW,EACxCxB;QAEFF,OAAOA;QACPG,YAAYA;QACZwB,UAAUX,UAAUW,QAAQ;QAC5BpB,QAAQA;QACRG,MAAMA;QACNC,OAAOA;QACPC,QAAQA;QACRC,YAAYA;QACZC,aAAaA;QACbR,WAAWA;kBAEX,cAAA,KAAChB;YACE,GAAG0B,SAAS;YACbD,OAAOA;YACPa,IAAG;YACHvB,MAAMA;YACNH,WAAWV,OAAOqC,EAAE;YACpBrB,UAAUrB,aAAaqB,UAAUa;YACjClB,YAAYmB;;;AAIpB,EAAE"}

package/dist/cssm/components/ToolButton/ToolButton.js

@@ -28,7 +28,7 @@ const sizeYClassNames = {
  * для форматирования. Их можно использовать как кнопки для разового действия
  * или для включения/выключения режима.
  *
- * @see https://vkcom.github.io/VKUI/#/ToolButton
+ * @see https://vkui.io/components/tool-button
  */ export const ToolButton = ({ mode = 'primary', appearance = 'accent', direction = 'row', children, IconCompact, IconRegular, rounded, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const hasChildren = hasReactNode(children);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n  row: styles.directionRow,\n  column: styles.directionColumn,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface ToolButtonProps extends TappableOmitProps, AdaptiveIconRendererProps {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  /**\n   * Внешний вид компонента.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Направление контента.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при `direction=\"column\"` если передан `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        rounded && getRoundedClassName(direction, hasChildren),\n        hasChildren && direction === 'row' && styles.withFakeEndIcon,\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles.text}>{children}</span>}\n    </Tappable>\n  );\n};\n\nexport function getRoundedClassName(\n  direction: 'row' | 'column',\n  hasChildren: boolean,\n): string | undefined {\n  switch (direction) {\n    case 'row':\n      return styles.rounded;\n    case 'column':\n      return hasChildren ? undefined : styles.rounded;\n  }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","styles","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","stylesAppearance","accent","appearanceAccent","neutral","appearanceNeutral","stylesDirection","row","directionRow","column","directionColumn","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","ToolButton","mode","appearance","direction","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","baseClassName","host","getRoundedClassName","withFakeEndIcon","span","className","text","undefined"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,SAASF,OAAOG,WAAW;IAC3BC,WAAWJ,OAAOK,aAAa;IAC/BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,mBAAmB;IACvBC,QAAQX,OAAOY,gBAAgB;IAC/BC,SAASb,OAAOc,iBAAiB;AACnC;AAEA,MAAMC,kBAAkB;IACtBC,KAAKhB,OAAOiB,YAAY;IACxBC,QAAQlB,OAAOmB,eAAe;AAChC;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AAuBA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EACP,GAAGC,WACa;IAChB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGrC;IAC3B,MAAMsC,cAAcvC,aAAaiC;IAEjC,qBACE,MAAC9B;QACCqC,WAAWpC,OAAOqC,KAAK;QACvBC,YAAYtC,OAAOuC,MAAM;QACzBC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBC,eAAehD,WACbK,OAAO4C,IAAI,EACXZ,WAAWa,oBAAoBjB,WAAWO,cAC1CA,eAAeP,cAAc,SAAS5B,OAAO8C,eAAe,EAC5D7C,UAAU,CAACyB,KAAK,EAChBhB,gBAAgB,CAACiB,WAAW,EAC5BZ,eAAe,CAACa,UAAU,EAC1BM,UAAU,aAAad,eAAe,CAACc,MAAM;QAE9C,GAAGD,SAAS;;0BAEb,KAACnC;gBAAqBgC,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACY;gBAAKC,WAAWhD,OAAOiD,IAAI;0BAAGpB;;;;AAGrD,EAAE;AAEF,OAAO,SAASgB,oBACdjB,SAA2B,EAC3BO,WAAoB;IAEpB,OAAQP;QACN,KAAK;YACH,OAAO5B,OAAOgC,OAAO;QACvB,KAAK;YACH,OAAOG,cAAce,YAAYlD,OAAOgC,OAAO;IACnD;AACF"}
+{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n  row: styles.directionRow,\n  column: styles.directionColumn,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface ToolButtonProps extends TappableOmitProps, AdaptiveIconRendererProps {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  /**\n   * Внешний вид компонента.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Направление контента.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при `direction=\"column\"` если передан `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkui.io/components/tool-button\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        rounded && getRoundedClassName(direction, hasChildren),\n        hasChildren && direction === 'row' && styles.withFakeEndIcon,\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles.text}>{children}</span>}\n    </Tappable>\n  );\n};\n\nexport function getRoundedClassName(\n  direction: 'row' | 'column',\n  hasChildren: boolean,\n): string | undefined {\n  switch (direction) {\n    case 'row':\n      return styles.rounded;\n    case 'column':\n      return hasChildren ? undefined : styles.rounded;\n  }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","styles","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","stylesAppearance","accent","appearanceAccent","neutral","appearanceNeutral","stylesDirection","row","directionRow","column","directionColumn","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","ToolButton","mode","appearance","direction","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","baseClassName","host","getRoundedClassName","withFakeEndIcon","span","className","text","undefined"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,SAASF,OAAOG,WAAW;IAC3BC,WAAWJ,OAAOK,aAAa;IAC/BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,mBAAmB;IACvBC,QAAQX,OAAOY,gBAAgB;IAC/BC,SAASb,OAAOc,iBAAiB;AACnC;AAEA,MAAMC,kBAAkB;IACtBC,KAAKhB,OAAOiB,YAAY;IACxBC,QAAQlB,OAAOmB,eAAe;AAChC;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AAuBA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EACP,GAAGC,WACa;IAChB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGrC;IAC3B,MAAMsC,cAAcvC,aAAaiC;IAEjC,qBACE,MAAC9B;QACCqC,WAAWpC,OAAOqC,KAAK;QACvBC,YAAYtC,OAAOuC,MAAM;QACzBC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBC,eAAehD,WACbK,OAAO4C,IAAI,EACXZ,WAAWa,oBAAoBjB,WAAWO,cAC1CA,eAAeP,cAAc,SAAS5B,OAAO8C,eAAe,EAC5D7C,UAAU,CAACyB,KAAK,EAChBhB,gBAAgB,CAACiB,WAAW,EAC5BZ,eAAe,CAACa,UAAU,EAC1BM,UAAU,aAAad,eAAe,CAACc,MAAM;QAE9C,GAAGD,SAAS;;0BAEb,KAACnC;gBAAqBgC,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACY;gBAAKC,WAAWhD,OAAOiD,IAAI;0BAAGpB;;;;AAGrD,EAAE;AAEF,OAAO,SAASgB,oBACdjB,SAA2B,EAC3BO,WAAoB;IAEpB,OAAQP;QACN,KAAK;YACH,OAAO5B,OAAOgC,OAAO;QACvB,KAAK;YACH,OAAOG,cAAce,YAAYlD,OAAOgC,OAAO;IACnD;AACF"}

package/dist/cssm/components/Tooltip/Tooltip.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { useReferenceElement } from "../../hooks/useReferenceElement.js";
 import { useTooltip } from "./useTooltip.js";
 /**
- * @see https://vkcom.github.io/VKUI/#/Tooltip
+ * @see https://vkui.io/components/tooltip
  */ export const Tooltip = ({ children, ...restProps })=>{
     const { anchorRef, anchorProps, tooltip } = useTooltip(restProps);
     const anchor = useReferenceElement(children, anchorProps, anchorRef);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useReferenceElement } from '../../hooks/useReferenceElement';\nimport { type FloatingComponentProps, type OnShownChange } from '../../lib/floating';\nimport { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport { type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { useTooltip } from './useTooltip';\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'onShownChange'\n  | 'hideWhenReferenceHidden'\n  | 'onReferenceHiddenChange'\n  | 'children'\n  | 'zIndex'\n  | 'usePortal'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'strategy'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps' | 'onCloseIconClick'>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipOnShownChange = OnShownChange;\n\nexport interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {\n  /**\n   * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте\n   * совместно с `onShownChange`.\n   *\n   * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.\n   */\n  shown?: boolean;\n  /**\n   * Добавляет возможность наводить на тултип.\n   */\n  enableInteractive?: boolean;\n  /**\n   * Добавляет возможность закрыть тултип через иконку-крестик.\n   *\n   * > Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`.\n   */\n  closable?: boolean;\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Отключает закрытие по нажатию.\n   */\n  disableCloseAfterClick?: boolean;\n  /**\n   * Отключает появление при фокусе.\n   */\n  disableTriggerOnFocus?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({ children, ...restProps }: TooltipProps): React.ReactNode => {\n  const { anchorRef, anchorProps, tooltip } = useTooltip(restProps);\n\n  const anchor = useReferenceElement(children, anchorProps, anchorRef);\n\n  return (\n    <React.Fragment>\n      {anchor}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useReferenceElement","useTooltip","Tooltip","children","restProps","anchorRef","anchorProps","tooltip","anchor","Fragment"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,qCAAkC;AAItE,SAASC,UAAU,QAAQ,kBAAe;AAuE1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAyB;IAC9D,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGN,WAAWG;IAEvD,MAAMI,SAASR,oBAAoBG,UAAUG,aAAaD;IAE1D,qBACE,MAACN,MAAMU,QAAQ;;YACZD;YACAD;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useReferenceElement } from '../../hooks/useReferenceElement';\nimport { type FloatingComponentProps, type OnShownChange } from '../../lib/floating';\nimport { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport { type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { useTooltip } from './useTooltip';\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'onShownChange'\n  | 'hideWhenReferenceHidden'\n  | 'onReferenceHiddenChange'\n  | 'children'\n  | 'zIndex'\n  | 'usePortal'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'strategy'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps' | 'onCloseIconClick'>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipOnShownChange = OnShownChange;\n\nexport interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {\n  /**\n   * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте\n   * совместно с `onShownChange`.\n   *\n   * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.\n   */\n  shown?: boolean;\n  /**\n   * Добавляет возможность наводить на тултип.\n   */\n  enableInteractive?: boolean;\n  /**\n   * Добавляет возможность закрыть тултип через иконку-крестик.\n   *\n   * > Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`.\n   */\n  closable?: boolean;\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Отключает закрытие по нажатию.\n   */\n  disableCloseAfterClick?: boolean;\n  /**\n   * Отключает появление при фокусе.\n   */\n  disableTriggerOnFocus?: boolean;\n}\n\n/**\n * @see https://vkui.io/components/tooltip\n */\nexport const Tooltip = ({ children, ...restProps }: TooltipProps): React.ReactNode => {\n  const { anchorRef, anchorProps, tooltip } = useTooltip(restProps);\n\n  const anchor = useReferenceElement(children, anchorProps, anchorRef);\n\n  return (\n    <React.Fragment>\n      {anchor}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useReferenceElement","useTooltip","Tooltip","children","restProps","anchorRef","anchorProps","tooltip","anchor","Fragment"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,qCAAkC;AAItE,SAASC,UAAU,QAAQ,kBAAe;AAuE1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAyB;IAC9D,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGN,WAAWG;IAEvD,MAAMI,SAASR,oBAAoBG,UAAUG,aAAaD;IAE1D,qBACE,MAACN,MAAMU,QAAQ;;YACZD;YACAD;;;AAGP,EAAE"}

package/dist/cssm/components/TooltipBase/TooltipBase.js

@@ -19,8 +19,6 @@ const stylesAppearance = {
 };
 /**
  * Низкоуровневый компонент для отрисовки тултипа.
- * Примеры использования и Readme можно найти в документации Tooltip.
- * @see https://vkcom.github.io/VKUI/#/Tooltip
  * @private
  */ export const TooltipBase = ({ appearance = 'accent', arrowProps, ArrowIcon = DefaultIcon, description, title, titleId, maxWidth = TOOLTIP_MAX_WIDTH, closeIconLabel = 'Закрыть', onCloseIconClick, className, ...restProps })=>{
     return /*#__PURE__*/ _jsxs(RootComponent, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrow, type FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TooltipBase.module.css';\n\nexport const TOOLTIP_MAX_WIDTH = 220;\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  white: styles.appearanceWhite,\n  black: styles.appearanceBlack,\n  inversion: styles.appearanceInversion,\n};\n\nexport interface TooltipBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children' | 'title'> {\n  /**\n   * Стиль отображения подсказки.\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Текст тултипа.\n   */\n  description?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  title?: React.ReactNode;\n  /**\n   * [a11y] Id для заголовка тултипа.\n   * Можно использовать для связи элемента с `role=\"dialog\"` и заголовка через `aria-labelledby`.\n   */\n  titleId?: string;\n  /**\n   * Для показа указателя, требуется передать хотя бы `coords` и `placement`.\n   */\n  arrowProps?: Omit<FloatingArrowProps, 'Icon'>;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (смотри https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   * 5. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.\n   */\n  ArrowIcon?: FloatingArrowProps['Icon'];\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент.\n   */\n  className?: string;\n  /**\n   * Перебивает максимальную ширину заданную по умолчанию.\n   *\n   * Передача `null` полностью сбрасывает установку `max-width` на элемент.\n   */\n  maxWidth?: number | string | null;\n  /**\n   * Скрытый текст для кнопки закрытия.\n   */\n  closeIconLabel?: string;\n  /**\n   * Обработчик нажатия на кнопку закрытия. При передаче, показывается иконка.\n   */\n  onCloseIconClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Низкоуровневый компонент для отрисовки тултипа.\n * Примеры использования и Readme можно найти в документации Tooltip.\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n * @private\n */\nexport const TooltipBase = ({\n  appearance = 'accent',\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n  description,\n  title,\n  titleId,\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  closeIconLabel = 'Закрыть',\n  onCloseIconClick,\n  className,\n  ...restProps\n}: TooltipBaseProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        appearance !== 'neutral' && stylesAppearance[appearance],\n        className,\n      )}\n      role=\"tooltip\"\n    >\n      {arrowProps && (\n        <FloatingArrow\n          {...arrowProps}\n          iconClassName={classNames(styles.arrow, arrowProps.iconClassName)}\n          Icon={ArrowIcon}\n        />\n      )}\n      <div className={styles.content} style={maxWidth !== null ? { maxWidth } : undefined}>\n        <div>\n          {hasReactNode(title) && (\n            <Subhead id={titleId} className={styles.title} weight=\"2\">\n              {title}\n            </Subhead>\n          )}\n          {hasReactNode(description) && (\n            <Subhead className={styles.description}>{description}</Subhead>\n          )}\n        </div>\n        {typeof onCloseIconClick === 'function' && (\n          <Tappable\n            Component=\"button\"\n            className={styles.closeButton}\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCloseIconClick}\n          >\n            <VisuallyHidden>{closeIconLabel}</VisuallyHidden>\n            <Icon16Cancel display=\"block\" />\n          </Tappable>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","DefaultIcon","FloatingArrow","RootComponent","Tappable","Subhead","VisuallyHidden","styles","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","appearanceAccent","white","appearanceWhite","black","appearanceBlack","inversion","appearanceInversion","TooltipBase","appearance","arrowProps","ArrowIcon","description","title","titleId","maxWidth","closeIconLabel","onCloseIconClick","className","restProps","baseClassName","host","role","iconClassName","arrow","Icon","div","content","style","undefined","id","weight","Component","closeButton","hoverMode","activeMode","onClick","display"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,WAAW,QAAQ,kCAA+B;AAC3D,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,QAAQH,OAAOI,gBAAgB;IAC/BC,OAAOL,OAAOM,eAAe;IAC7BC,OAAOP,OAAOQ,eAAe;IAC7BC,WAAWT,OAAOU,mBAAmB;AACvC;AA2DA;;;;;CAKC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,aAAa,QAAQ,EACrBC,UAAU,EACVC,YAAYpB,WAAW,EACvBqB,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,WAAWjB,iBAAiB,EAC5BkB,iBAAiB,SAAS,EAC1BC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACc;IACjB,qBACE,MAAC1B;QACE,GAAG0B,SAAS;QACbC,eAAe/B,WACbQ,OAAOwB,IAAI,EACXZ,eAAe,aAAaV,gBAAgB,CAACU,WAAW,EACxDS;QAEFI,MAAK;;YAEJZ,4BACC,KAAClB;gBACE,GAAGkB,UAAU;gBACda,eAAelC,WAAWQ,OAAO2B,KAAK,EAAEd,WAAWa,aAAa;gBAChEE,MAAMd;;0BAGV,MAACe;gBAAIR,WAAWrB,OAAO8B,OAAO;gBAAEC,OAAOb,aAAa,OAAO;oBAAEA;gBAAS,IAAIc;;kCACxE,MAACH;;4BACEpC,aAAauB,wBACZ,KAAClB;gCAAQmC,IAAIhB;gCAASI,WAAWrB,OAAOgB,KAAK;gCAAEkB,QAAO;0CACnDlB;;4BAGJvB,aAAasB,8BACZ,KAACjB;gCAAQuB,WAAWrB,OAAOe,WAAW;0CAAGA;;;;oBAG5C,OAAOK,qBAAqB,4BAC3B,MAACvB;wBACCsC,WAAU;wBACVd,WAAWrB,OAAOoC,WAAW;wBAC7BC,WAAU;wBACVC,YAAW;wBACXC,SAASnB;;0CAET,KAACrB;0CAAgBoB;;0CACjB,KAAC5B;gCAAaiD,SAAQ;;;;;;;;AAMlC,EAAE"}
+{"version":3,"sources":["../../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrow, type FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TooltipBase.module.css';\n\nexport const TOOLTIP_MAX_WIDTH = 220;\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  white: styles.appearanceWhite,\n  black: styles.appearanceBlack,\n  inversion: styles.appearanceInversion,\n};\n\nexport interface TooltipBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children' | 'title'> {\n  /**\n   * Стиль отображения подсказки.\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Текст тултипа.\n   */\n  description?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  title?: React.ReactNode;\n  /**\n   * [a11y] Id для заголовка тултипа.\n   * Можно использовать для связи элемента с `role=\"dialog\"` и заголовка через `aria-labelledby`.\n   */\n  titleId?: string;\n  /**\n   * Для показа указателя, требуется передать хотя бы `coords` и `placement`.\n   */\n  arrowProps?: Omit<FloatingArrowProps, 'Icon'>;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (смотри https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   * 5. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.\n   */\n  ArrowIcon?: FloatingArrowProps['Icon'];\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент.\n   */\n  className?: string;\n  /**\n   * Перебивает максимальную ширину заданную по умолчанию.\n   *\n   * Передача `null` полностью сбрасывает установку `max-width` на элемент.\n   */\n  maxWidth?: number | string | null;\n  /**\n   * Скрытый текст для кнопки закрытия.\n   */\n  closeIconLabel?: string;\n  /**\n   * Обработчик нажатия на кнопку закрытия. При передаче, показывается иконка.\n   */\n  onCloseIconClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Низкоуровневый компонент для отрисовки тултипа.\n * @private\n */\nexport const TooltipBase = ({\n  appearance = 'accent',\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n  description,\n  title,\n  titleId,\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  closeIconLabel = 'Закрыть',\n  onCloseIconClick,\n  className,\n  ...restProps\n}: TooltipBaseProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        appearance !== 'neutral' && stylesAppearance[appearance],\n        className,\n      )}\n      role=\"tooltip\"\n    >\n      {arrowProps && (\n        <FloatingArrow\n          {...arrowProps}\n          iconClassName={classNames(styles.arrow, arrowProps.iconClassName)}\n          Icon={ArrowIcon}\n        />\n      )}\n      <div className={styles.content} style={maxWidth !== null ? { maxWidth } : undefined}>\n        <div>\n          {hasReactNode(title) && (\n            <Subhead id={titleId} className={styles.title} weight=\"2\">\n              {title}\n            </Subhead>\n          )}\n          {hasReactNode(description) && (\n            <Subhead className={styles.description}>{description}</Subhead>\n          )}\n        </div>\n        {typeof onCloseIconClick === 'function' && (\n          <Tappable\n            Component=\"button\"\n            className={styles.closeButton}\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCloseIconClick}\n          >\n            <VisuallyHidden>{closeIconLabel}</VisuallyHidden>\n            <Icon16Cancel display=\"block\" />\n          </Tappable>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","DefaultIcon","FloatingArrow","RootComponent","Tappable","Subhead","VisuallyHidden","styles","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","appearanceAccent","white","appearanceWhite","black","appearanceBlack","inversion","appearanceInversion","TooltipBase","appearance","arrowProps","ArrowIcon","description","title","titleId","maxWidth","closeIconLabel","onCloseIconClick","className","restProps","baseClassName","host","role","iconClassName","arrow","Icon","div","content","style","undefined","id","weight","Component","closeButton","hoverMode","activeMode","onClick","display"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,WAAW,QAAQ,kCAA+B;AAC3D,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,QAAQH,OAAOI,gBAAgB;IAC/BC,OAAOL,OAAOM,eAAe;IAC7BC,OAAOP,OAAOQ,eAAe;IAC7BC,WAAWT,OAAOU,mBAAmB;AACvC;AA2DA;;;CAGC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,aAAa,QAAQ,EACrBC,UAAU,EACVC,YAAYpB,WAAW,EACvBqB,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,WAAWjB,iBAAiB,EAC5BkB,iBAAiB,SAAS,EAC1BC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACc;IACjB,qBACE,MAAC1B;QACE,GAAG0B,SAAS;QACbC,eAAe/B,WACbQ,OAAOwB,IAAI,EACXZ,eAAe,aAAaV,gBAAgB,CAACU,WAAW,EACxDS;QAEFI,MAAK;;YAEJZ,4BACC,KAAClB;gBACE,GAAGkB,UAAU;gBACda,eAAelC,WAAWQ,OAAO2B,KAAK,EAAEd,WAAWa,aAAa;gBAChEE,MAAMd;;0BAGV,MAACe;gBAAIR,WAAWrB,OAAO8B,OAAO;gBAAEC,OAAOb,aAAa,OAAO;oBAAEA;gBAAS,IAAIc;;kCACxE,MAACH;;4BACEpC,aAAauB,wBACZ,KAAClB;gCAAQmC,IAAIhB;gCAASI,WAAWrB,OAAOgB,KAAK;gCAAEkB,QAAO;0CACnDlB;;4BAGJvB,aAAasB,8BACZ,KAACjB;gCAAQuB,WAAWrB,OAAOe,WAAW;0CAAGA;;;;oBAG5C,OAAOK,qBAAqB,4BAC3B,MAACvB;wBACCsC,WAAU;wBACVd,WAAWrB,OAAOoC,WAAW;wBAC7BC,WAAU;wBACVC,YAAW;wBACXC,SAASnB;;0CAET,KAACrB;0CAAgBoB;;0CACjB,KAAC5B;gCAAaiD,SAAQ;;;;;;;;AAMlC,EAAE"}

package/dist/cssm/components/Touch/Touch.js

@@ -7,7 +7,7 @@ import { getWindow, isHTMLElement, isSVGElement } from "../../lib/dom.js";
 import { coordX, coordY, touchEnabled } from "../../lib/touch/index.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 /**
- * @see https://vkcom.github.io/VKUI/#/Touch
+ * @see https://vkui.io/components/touch
  */ export const Touch = ({ onStart, onStartX, onStartY, onMove, onMoveX, onMoveY, onEnter, onLeave, onEnd, onEndX, onEndY, onClickCapture, usePointerHover, slideThreshold = 5, useCapture = false, Component = 'div', getRootRef, noSlideClick = false, stopPropagation = false, ...restProps })=>{
     const hostRef = useExternRef(getRootRef);
     const [isTouchEnabled] = React.useState(touchEnabled);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Touch/Touch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { getWindow, isHTMLElement, isSVGElement } from '../../lib/dom';\nimport { coordX, coordY, touchEnabled, type VKUITouchEvent } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasComponent, HasRootRef } from '../../types';\n\n/**\n * Костыль для правильной работы тайпскрипта.\n */\ntype HTMLorSVGElementWithEvents = {\n  /**\n   * AddEventListener.\n   */\n  addEventListener: (<K extends keyof HTMLElementEventMap>(\n    type: K,\n    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) &\n    (<K extends keyof SVGElementEventMap>(\n      type: K,\n      listener: (this: SVGElement, ev: SVGElementEventMap[K]) => any,\n      options?: boolean | AddEventListenerOptions,\n    ) => void);\n  /**\n   * RemoveEventListener.\n   */\n  removeEventListener: (<K extends keyof HTMLElementEventMap>(\n    type: K,\n    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n    options?: boolean | EventListenerOptions,\n  ) => void) &\n    (<K extends keyof SVGElementEventMap>(\n      type: K,\n      listener: (this: SVGElement, ev: SVGElementEventMap[K]) => any,\n      options?: boolean | EventListenerOptions,\n    ) => void);\n};\n\nexport interface CustomTouchEvent extends Gesture {\n  /**\n   * Оригинальное событие.\n   */\n  originalEvent: VKUITouchEvent;\n}\n\nexport type HoverHandler = (outputEvent: MouseEvent) => void;\n\nexport type CustomTouchEventHandler = (event: CustomTouchEvent) => void;\n\nexport interface TouchProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Использовать pointer-events для hover-состояний.\n   * Работает на отключенных элементах (disabled inputs).\n   */\n  usePointerHover?: boolean;\n  /**\n   * Использовать фазу capture для событий.\n   */\n  useCapture?: boolean;\n  /**\n   * Порог расстояния в пикселях для активации свайпа.\n   * @default 5\n   */\n  slideThreshold?: number;\n  /**\n   * Блокировать click-события после распознавания свайпа.\n   */\n  noSlideClick?: boolean;\n  /**\n   * Останавливать всплытие событий.\n   */\n  stopPropagation?: boolean;\n  /**\n   * Обработчик входа курсора в область.\n   */\n  onEnter?: HoverHandler;\n  /**\n   * Обработчик выхода курсора из области.\n   */\n  onLeave?: HoverHandler;\n  /**\n   * Общий обработчик начала взаимодействия.\n   */\n  onStart?: CustomTouchEventHandler;\n  /**\n   * Обработчик начала горизонтального перемещения.\n   */\n  onStartX?: CustomTouchEventHandler;\n  /**\n   * Обработчик начала вертикального перемещения.\n   */\n  onStartY?: CustomTouchEventHandler;\n  /**\n   * Общий обработчик перемещения.\n   */\n  onMove?: CustomTouchEventHandler;\n  /**\n   * Обработчик горизонтального перемещения.\n   */\n  onMoveX?: CustomTouchEventHandler;\n  /**\n   * Обработчик вертикального перемещения.\n   */\n  onMoveY?: CustomTouchEventHandler;\n  /**\n   * Общий обработчик завершения взаимодействия.\n   */\n  onEnd?: CustomTouchEventHandler;\n  /**\n   * Обработчик завершения горизонтального свайпа.\n   */\n  onEndX?: CustomTouchEventHandler;\n  /**\n   * Обработчик завершения вертикального свайпа.\n   */\n  onEndY?: CustomTouchEventHandler;\n}\n\nexport interface Gesture {\n  /**\n   * Начальная X-координата касания.\n   */\n  startX: number;\n\n  /**\n   * Начальная Y-координата касания.\n   */\n  startY: number;\n\n  /**\n   * Время начала взаимодействия.\n   */\n  startT: Date;\n\n  /**\n   * Длительность взаимодействия в миллисекундах.\n   */\n  duration: number;\n\n  /**\n   * Флаг активного нажатия.\n   */\n  isPressed: boolean;\n\n  /**\n   * Флаг вертикального перемещения.\n   */\n  isY: boolean;\n\n  /**\n   * Флаг горизонтального перемещения.\n   */\n  isX: boolean;\n\n  /**\n   * Флаг горизонтального свайпа.\n   */\n  isSlideX: boolean;\n\n  /**\n   * Флаг вертикального свайпа.\n   */\n  isSlideY: boolean;\n\n  /**\n   * Общий флаг свайпа (вертикального или горизонтального).\n   */\n  isSlide: boolean;\n\n  /**\n   * Текущая X-координата курсора/касания.\n   */\n  clientX: number;\n\n  /**\n   * Текущая Y-координата курсора/касания.\n   */\n  clientY: number;\n\n  /**\n   * Смещение по X относительно начальной точки.\n   */\n  shiftX: number;\n\n  /**\n   * Смещение по Y относительно начальной точки.\n   */\n  shiftY: number;\n\n  /**\n   * Абсолютное смещение по X.\n   */\n  shiftXAbs: number;\n\n  /**\n   * Абсолютное смещение по Y.\n   */\n  shiftYAbs: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Touch\n */\nexport const Touch = ({\n  onStart,\n  onStartX,\n  onStartY,\n  onMove,\n  onMoveX,\n  onMoveY,\n  onEnter,\n  onLeave,\n  onEnd,\n  onEndX,\n  onEndY,\n  onClickCapture,\n  usePointerHover,\n  slideThreshold = 5,\n  useCapture = false,\n  Component = 'div',\n  getRootRef,\n  noSlideClick = false,\n  stopPropagation = false,\n  ...restProps\n}: TouchProps) => {\n  const hostRef = useExternRef(getRootRef);\n  const [isTouchEnabled] = React.useState(touchEnabled);\n  const gestureRef = React.useRef<Gesture | null>(null);\n  const didSlide = React.useRef(false);\n  const disposeTargetNativeGestureEvents = React.useRef<VoidFunction | null>(null);\n\n  const cleanupTargetNativeGestureEvents = () => {\n    gestureRef.current = null;\n    if (disposeTargetNativeGestureEvents.current) {\n      disposeTargetNativeGestureEvents.current();\n      disposeTargetNativeGestureEvents.current = null;\n    }\n  };\n\n  React.useEffect(() => cleanupTargetNativeGestureEvents, []);\n\n  /**\n   * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onEnd`/`onEndX`/`onEndY`.\n   */\n  const handleNativePointerUp = useStableCallback((event: MouseEvent | TouchEvent) => {\n    const gesture = gestureRef.current;\n\n    /* istanbul ignore if: нужно для Typescript */\n    if (!gesture) {\n      return;\n    }\n\n    if (gesture.isPressed) {\n      dispatchUserHandlers(event, gesture, [onEnd, onEndX, onEndY], stopPropagation);\n    }\n\n    if (isTouchEnabled) {\n      // https://github.com/VKCOM/VKUI/issues/4414\n      // если тач-устройство и был зафиксирован touchmove,\n      // то событие клика не вызывается\n      if (gesture.isSlide) {\n        didSlide.current = false;\n      }\n      // Если это был тач-евент, симулируем отмену hover\n      if (onLeave) {\n        onLeave(event as MouseEvent);\n      }\n    } else {\n      didSlide.current = Boolean(gesture.isSlide);\n    }\n\n    cleanupTargetNativeGestureEvents();\n  });\n\n  /**\n   * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onMove`/`onMoveX`/`onMoveY`.\n   */\n  const handleNativePointerMove = useStableCallback((event: MouseEvent | TouchEvent) => {\n    const gesture = gestureRef.current;\n\n    /* istanbul ignore if: нужно для Typescript */\n    if (!gesture) {\n      return;\n    }\n\n    const clientX = coordX(event);\n    const clientY = coordY(event);\n\n    // смещения\n    const shiftX = clientX - gesture.startX;\n    const shiftY = clientY - gesture.startY;\n\n    // абсолютные значения смещений\n    const shiftXAbs = Math.abs(shiftX);\n    const shiftYAbs = Math.abs(shiftY);\n\n    // Если определяем мультитач, то прерываем жест\n    if ('touches' in event && event.touches.length > 1) {\n      return handleNativePointerUp(event);\n    }\n\n    // если мы ещё не определились\n    if (!gesture.isX && !gesture.isY) {\n      const willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;\n      const willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;\n      const willBeSlidedX = willBeX && (!!onMoveX || !!onMove);\n      const willBeSlidedY = willBeY && (!!onMoveY || !!onMove);\n\n      gesture.isY = willBeY;\n      gesture.isX = willBeX;\n      gesture.isSlideX = willBeSlidedX;\n      gesture.isSlideY = willBeSlidedY;\n      gesture.isSlide = willBeSlidedX || willBeSlidedY;\n    }\n\n    if (gesture.isSlide) {\n      gesture.clientX = clientX;\n      gesture.clientY = clientY;\n      gesture.shiftX = shiftX;\n      gesture.shiftY = shiftY;\n      gesture.shiftXAbs = shiftXAbs;\n      gesture.shiftYAbs = shiftYAbs;\n\n      dispatchUserHandlers(event, gesture, [onMove, onMoveX, onMoveY], stopPropagation);\n    }\n  });\n\n  const handlePointerDown = useStableCallback(\n    (event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement> | TouchEvent) => {\n      const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : event;\n\n      gestureRef.current = initGesture(coordX(nativeEvent), coordY(nativeEvent));\n\n      const shouldCallDirectionHandlerOnlyIsSlide = false;\n      dispatchUserHandlers(\n        event,\n        gestureRef.current,\n        [onStart, onStartX, onStartY],\n        stopPropagation,\n        shouldCallDirectionHandlerOnlyIsSlide,\n      );\n\n      const eventOptions = { capture: useCapture, passive: false };\n\n      // FIXME: заменить touch/mouse-события ниже на pointer-события после того, как бразуеры из\n      // .browserslistrc начнут поддерживать его (см. https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#browser_compatibility).\n      if (isTouchEnabled) {\n        if (isHTMLElement(event.target) || isSVGElement(event.target)) {\n          // Тач-события не всплывают, поэтому навешиваем события на целевой элемент\n          // см. #235, #1968, https://stackoverflow.com/a/45760014\n          const target: HTMLorSVGElementWithEvents = event.target;\n\n          target.addEventListener('touchmove', handleNativePointerMove, eventOptions);\n          target.addEventListener('touchend', handleNativePointerUp, eventOptions);\n          target.addEventListener('touchcancel', handleNativePointerUp, eventOptions);\n\n          disposeTargetNativeGestureEvents.current = () => {\n            target.removeEventListener('touchmove', handleNativePointerMove, eventOptions);\n            target.removeEventListener('touchend', handleNativePointerUp, eventOptions);\n            target.removeEventListener('touchcancel', handleNativePointerUp, eventOptions);\n          };\n        }\n      } else {\n        // Используем события на Document, т.к. mouse-события на целевом элементе могут теряться при\n        // выходе за границы этого элемента.\n        const doc = getWindow(event.currentTarget).document;\n\n        doc.addEventListener('mousemove', handleNativePointerMove, eventOptions);\n        doc.addEventListener('mouseup', handleNativePointerUp, eventOptions);\n        doc.addEventListener('mouseleave', handleNativePointerUp, eventOptions);\n\n        disposeTargetNativeGestureEvents.current = () => {\n          doc.removeEventListener('mousemove', handleNativePointerMove, eventOptions);\n          doc.removeEventListener('mouseup', handleNativePointerUp, eventOptions);\n          doc.removeEventListener('mouseleave', handleNativePointerUp, eventOptions);\n        };\n      }\n    },\n  );\n\n  const handlePointerEnter = onEnter\n    ? (event: React.MouseEvent<HTMLElement>) => onEnter(event.nativeEvent)\n    : undefined;\n\n  const handlePointerLeave = onLeave\n    ? (event: React.MouseEvent<HTMLElement>) => onLeave(event.nativeEvent)\n    : undefined;\n\n  /**\n   * Отменяет нативное браузерное поведение для вложенных ссылок и изображений.\n   */\n  const handleDragStart = (event: React.DragEvent<HTMLElement>) => {\n    const target = event.target as HTMLElement;\n    if (target.tagName === 'A' || target.tagName === 'IMG') {\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * Отменяет переход по вложенной ссылке, если был зафиксирован свайп.\n   */\n  const handleClickCapture: typeof onClickCapture = (event) => {\n    if (!didSlide.current) {\n      return onClickCapture && onClickCapture(event);\n    }\n\n    if (noSlideClick) {\n      event.stopPropagation();\n\n      // https://github.com/VKCOM/VKUI/issues/1977\n      // https://github.com/VKCOM/VKUI/issues/3892\n      event.preventDefault();\n    } else {\n      onClickCapture && onClickCapture(event);\n    }\n\n    didSlide.current = false;\n  };\n\n  useIsomorphicLayoutEffect(\n    function initializeNativeTouchStartEventWithPassiveFalse() {\n      const hostEl = hostRef.current;\n      if (!hostEl || !isTouchEnabled) {\n        return;\n      }\n\n      const options = { capture: useCapture, passive: false };\n      hostEl.addEventListener('touchstart', handlePointerDown, options);\n\n      return () => {\n        hostEl.removeEventListener('touchstart', handlePointerDown, options);\n      };\n    },\n    [hostRef, isTouchEnabled, useCapture, handlePointerDown],\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={hostRef}\n      onDragStart={handleDragStart}\n      onClickCapture={handleClickCapture}\n      // onEnter\n      onPointerEnter={usePointerHover ? handlePointerEnter : undefined}\n      onMouseEnter={!usePointerHover ? handlePointerEnter : undefined}\n      // onLeave\n      onPointerLeave={usePointerHover ? handlePointerLeave : undefined}\n      onMouseLeave={!usePointerHover ? handlePointerLeave : undefined}\n      // handlePointerDown (onTouchStart устанавливается отдельно через initializeNativeTouchEventStartWithPassiveFalse)\n      onMouseDownCapture={!isTouchEnabled && useCapture ? handlePointerDown : undefined}\n      onMouseDown={!isTouchEnabled && !useCapture ? handlePointerDown : undefined}\n    />\n  );\n};\n\nfunction initGesture(startX: number, startY: number): Gesture {\n  return {\n    startX,\n    startY,\n    startT: new Date(),\n    duration: 0,\n    isPressed: true,\n    isY: false,\n    isX: false,\n    isSlideX: false,\n    isSlideY: false,\n    isSlide: false,\n    clientX: 0,\n    clientY: 0,\n    shiftX: 0,\n    shiftY: 0,\n    shiftXAbs: 0,\n    shiftYAbs: 0,\n  };\n}\n\ntype Handlers = [\n  CustomTouchEventHandler | undefined,\n  CustomTouchEventHandler | undefined,\n  CustomTouchEventHandler | undefined,\n];\n\nfunction dispatchUserHandlers(\n  event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,\n  gesture: Gesture,\n  [handler, handlerX, handlerY]: Handlers,\n  stopPropagation?: boolean,\n  shouldCallDirectionHandlerOnlyIsSlide = true,\n) {\n  if (stopPropagation) {\n    event.stopPropagation();\n  }\n\n  const data = {\n    ...gesture,\n    originalEvent: event as unknown as VKUITouchEvent,\n    duration: Date.now() - gesture.startT.getTime(),\n  };\n\n  if (handler) {\n    handler(data);\n  }\n\n  if (handlerX) {\n    if (shouldCallDirectionHandlerOnlyIsSlide) {\n      if (gesture.isSlideX) {\n        handlerX(data);\n      }\n    } else {\n      handlerX(data);\n    }\n  }\n\n  if (handlerY) {\n    if (shouldCallDirectionHandlerOnlyIsSlide) {\n      if (gesture.isSlideY) {\n        handlerY(data);\n      }\n    } else {\n      handlerY(data);\n    }\n  }\n}\n"],"names":["React","useExternRef","useStableCallback","getWindow","isHTMLElement","isSVGElement","coordX","coordY","touchEnabled","useIsomorphicLayoutEffect","Touch","onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnter","onLeave","onEnd","onEndX","onEndY","onClickCapture","usePointerHover","slideThreshold","useCapture","Component","getRootRef","noSlideClick","stopPropagation","restProps","hostRef","isTouchEnabled","useState","gestureRef","useRef","didSlide","disposeTargetNativeGestureEvents","cleanupTargetNativeGestureEvents","current","useEffect","handleNativePointerUp","event","gesture","isPressed","dispatchUserHandlers","isSlide","Boolean","handleNativePointerMove","clientX","clientY","shiftX","startX","shiftY","startY","shiftXAbs","Math","abs","shiftYAbs","touches","length","isX","isY","willBeX","willBeY","willBeSlidedX","willBeSlidedY","isSlideX","isSlideY","handlePointerDown","nativeEvent","initGesture","shouldCallDirectionHandlerOnlyIsSlide","eventOptions","capture","passive","target","addEventListener","removeEventListener","doc","currentTarget","document","handlePointerEnter","undefined","handlePointerLeave","handleDragStart","tagName","preventDefault","handleClickCapture","initializeNativeTouchStartEventWithPassiveFalse","hostEl","options","ref","onDragStart","onPointerEnter","onMouseEnter","onPointerLeave","onMouseLeave","onMouseDownCapture","onMouseDown","startT","Date","duration","handler","handlerX","handlerY","data","originalEvent","now","getTime"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Touch/Touch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { getWindow, isHTMLElement, isSVGElement } from '../../lib/dom';\nimport { coordX, coordY, touchEnabled, type VKUITouchEvent } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasComponent, HasRootRef } from '../../types';\n\n/**\n * Костыль для правильной работы тайпскрипта.\n */\ntype HTMLorSVGElementWithEvents = {\n  /**\n   * AddEventListener.\n   */\n  addEventListener: (<K extends keyof HTMLElementEventMap>(\n    type: K,\n    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) &\n    (<K extends keyof SVGElementEventMap>(\n      type: K,\n      listener: (this: SVGElement, ev: SVGElementEventMap[K]) => any,\n      options?: boolean | AddEventListenerOptions,\n    ) => void);\n  /**\n   * RemoveEventListener.\n   */\n  removeEventListener: (<K extends keyof HTMLElementEventMap>(\n    type: K,\n    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n    options?: boolean | EventListenerOptions,\n  ) => void) &\n    (<K extends keyof SVGElementEventMap>(\n      type: K,\n      listener: (this: SVGElement, ev: SVGElementEventMap[K]) => any,\n      options?: boolean | EventListenerOptions,\n    ) => void);\n};\n\nexport interface CustomTouchEvent extends Gesture {\n  /**\n   * Оригинальное событие.\n   */\n  originalEvent: VKUITouchEvent;\n}\n\nexport type HoverHandler = (outputEvent: MouseEvent) => void;\n\nexport type CustomTouchEventHandler = (event: CustomTouchEvent) => void;\n\nexport interface TouchProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Использовать pointer-events для hover-состояний.\n   * Работает на отключенных элементах (disabled inputs).\n   */\n  usePointerHover?: boolean;\n  /**\n   * Использовать фазу capture для событий.\n   */\n  useCapture?: boolean;\n  /**\n   * Порог расстояния в пикселях для активации свайпа.\n   * @default 5\n   */\n  slideThreshold?: number;\n  /**\n   * Блокировать click-события после распознавания свайпа.\n   */\n  noSlideClick?: boolean;\n  /**\n   * Останавливать всплытие событий.\n   */\n  stopPropagation?: boolean;\n  /**\n   * Обработчик входа курсора в область.\n   */\n  onEnter?: HoverHandler;\n  /**\n   * Обработчик выхода курсора из области.\n   */\n  onLeave?: HoverHandler;\n  /**\n   * Общий обработчик начала взаимодействия.\n   */\n  onStart?: CustomTouchEventHandler;\n  /**\n   * Обработчик начала горизонтального перемещения.\n   */\n  onStartX?: CustomTouchEventHandler;\n  /**\n   * Обработчик начала вертикального перемещения.\n   */\n  onStartY?: CustomTouchEventHandler;\n  /**\n   * Общий обработчик перемещения.\n   */\n  onMove?: CustomTouchEventHandler;\n  /**\n   * Обработчик горизонтального перемещения.\n   */\n  onMoveX?: CustomTouchEventHandler;\n  /**\n   * Обработчик вертикального перемещения.\n   */\n  onMoveY?: CustomTouchEventHandler;\n  /**\n   * Общий обработчик завершения взаимодействия.\n   */\n  onEnd?: CustomTouchEventHandler;\n  /**\n   * Обработчик завершения горизонтального свайпа.\n   */\n  onEndX?: CustomTouchEventHandler;\n  /**\n   * Обработчик завершения вертикального свайпа.\n   */\n  onEndY?: CustomTouchEventHandler;\n}\n\nexport interface Gesture {\n  /**\n   * Начальная X-координата касания.\n   */\n  startX: number;\n\n  /**\n   * Начальная Y-координата касания.\n   */\n  startY: number;\n\n  /**\n   * Время начала взаимодействия.\n   */\n  startT: Date;\n\n  /**\n   * Длительность взаимодействия в миллисекундах.\n   */\n  duration: number;\n\n  /**\n   * Флаг активного нажатия.\n   */\n  isPressed: boolean;\n\n  /**\n   * Флаг вертикального перемещения.\n   */\n  isY: boolean;\n\n  /**\n   * Флаг горизонтального перемещения.\n   */\n  isX: boolean;\n\n  /**\n   * Флаг горизонтального свайпа.\n   */\n  isSlideX: boolean;\n\n  /**\n   * Флаг вертикального свайпа.\n   */\n  isSlideY: boolean;\n\n  /**\n   * Общий флаг свайпа (вертикального или горизонтального).\n   */\n  isSlide: boolean;\n\n  /**\n   * Текущая X-координата курсора/касания.\n   */\n  clientX: number;\n\n  /**\n   * Текущая Y-координата курсора/касания.\n   */\n  clientY: number;\n\n  /**\n   * Смещение по X относительно начальной точки.\n   */\n  shiftX: number;\n\n  /**\n   * Смещение по Y относительно начальной точки.\n   */\n  shiftY: number;\n\n  /**\n   * Абсолютное смещение по X.\n   */\n  shiftXAbs: number;\n\n  /**\n   * Абсолютное смещение по Y.\n   */\n  shiftYAbs: number;\n}\n\n/**\n * @see https://vkui.io/components/touch\n */\nexport const Touch = ({\n  onStart,\n  onStartX,\n  onStartY,\n  onMove,\n  onMoveX,\n  onMoveY,\n  onEnter,\n  onLeave,\n  onEnd,\n  onEndX,\n  onEndY,\n  onClickCapture,\n  usePointerHover,\n  slideThreshold = 5,\n  useCapture = false,\n  Component = 'div',\n  getRootRef,\n  noSlideClick = false,\n  stopPropagation = false,\n  ...restProps\n}: TouchProps) => {\n  const hostRef = useExternRef(getRootRef);\n  const [isTouchEnabled] = React.useState(touchEnabled);\n  const gestureRef = React.useRef<Gesture | null>(null);\n  const didSlide = React.useRef(false);\n  const disposeTargetNativeGestureEvents = React.useRef<VoidFunction | null>(null);\n\n  const cleanupTargetNativeGestureEvents = () => {\n    gestureRef.current = null;\n    if (disposeTargetNativeGestureEvents.current) {\n      disposeTargetNativeGestureEvents.current();\n      disposeTargetNativeGestureEvents.current = null;\n    }\n  };\n\n  React.useEffect(() => cleanupTargetNativeGestureEvents, []);\n\n  /**\n   * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onEnd`/`onEndX`/`onEndY`.\n   */\n  const handleNativePointerUp = useStableCallback((event: MouseEvent | TouchEvent) => {\n    const gesture = gestureRef.current;\n\n    /* istanbul ignore if: нужно для Typescript */\n    if (!gesture) {\n      return;\n    }\n\n    if (gesture.isPressed) {\n      dispatchUserHandlers(event, gesture, [onEnd, onEndX, onEndY], stopPropagation);\n    }\n\n    if (isTouchEnabled) {\n      // https://github.com/VKCOM/VKUI/issues/4414\n      // если тач-устройство и был зафиксирован touchmove,\n      // то событие клика не вызывается\n      if (gesture.isSlide) {\n        didSlide.current = false;\n      }\n      // Если это был тач-евент, симулируем отмену hover\n      if (onLeave) {\n        onLeave(event as MouseEvent);\n      }\n    } else {\n      didSlide.current = Boolean(gesture.isSlide);\n    }\n\n    cleanupTargetNativeGestureEvents();\n  });\n\n  /**\n   * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onMove`/`onMoveX`/`onMoveY`.\n   */\n  const handleNativePointerMove = useStableCallback((event: MouseEvent | TouchEvent) => {\n    const gesture = gestureRef.current;\n\n    /* istanbul ignore if: нужно для Typescript */\n    if (!gesture) {\n      return;\n    }\n\n    const clientX = coordX(event);\n    const clientY = coordY(event);\n\n    // смещения\n    const shiftX = clientX - gesture.startX;\n    const shiftY = clientY - gesture.startY;\n\n    // абсолютные значения смещений\n    const shiftXAbs = Math.abs(shiftX);\n    const shiftYAbs = Math.abs(shiftY);\n\n    // Если определяем мультитач, то прерываем жест\n    if ('touches' in event && event.touches.length > 1) {\n      return handleNativePointerUp(event);\n    }\n\n    // если мы ещё не определились\n    if (!gesture.isX && !gesture.isY) {\n      const willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;\n      const willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;\n      const willBeSlidedX = willBeX && (!!onMoveX || !!onMove);\n      const willBeSlidedY = willBeY && (!!onMoveY || !!onMove);\n\n      gesture.isY = willBeY;\n      gesture.isX = willBeX;\n      gesture.isSlideX = willBeSlidedX;\n      gesture.isSlideY = willBeSlidedY;\n      gesture.isSlide = willBeSlidedX || willBeSlidedY;\n    }\n\n    if (gesture.isSlide) {\n      gesture.clientX = clientX;\n      gesture.clientY = clientY;\n      gesture.shiftX = shiftX;\n      gesture.shiftY = shiftY;\n      gesture.shiftXAbs = shiftXAbs;\n      gesture.shiftYAbs = shiftYAbs;\n\n      dispatchUserHandlers(event, gesture, [onMove, onMoveX, onMoveY], stopPropagation);\n    }\n  });\n\n  const handlePointerDown = useStableCallback(\n    (event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement> | TouchEvent) => {\n      const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : event;\n\n      gestureRef.current = initGesture(coordX(nativeEvent), coordY(nativeEvent));\n\n      const shouldCallDirectionHandlerOnlyIsSlide = false;\n      dispatchUserHandlers(\n        event,\n        gestureRef.current,\n        [onStart, onStartX, onStartY],\n        stopPropagation,\n        shouldCallDirectionHandlerOnlyIsSlide,\n      );\n\n      const eventOptions = { capture: useCapture, passive: false };\n\n      // FIXME: заменить touch/mouse-события ниже на pointer-события после того, как бразуеры из\n      // .browserslistrc начнут поддерживать его (см. https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#browser_compatibility).\n      if (isTouchEnabled) {\n        if (isHTMLElement(event.target) || isSVGElement(event.target)) {\n          // Тач-события не всплывают, поэтому навешиваем события на целевой элемент\n          // см. #235, #1968, https://stackoverflow.com/a/45760014\n          const target: HTMLorSVGElementWithEvents = event.target;\n\n          target.addEventListener('touchmove', handleNativePointerMove, eventOptions);\n          target.addEventListener('touchend', handleNativePointerUp, eventOptions);\n          target.addEventListener('touchcancel', handleNativePointerUp, eventOptions);\n\n          disposeTargetNativeGestureEvents.current = () => {\n            target.removeEventListener('touchmove', handleNativePointerMove, eventOptions);\n            target.removeEventListener('touchend', handleNativePointerUp, eventOptions);\n            target.removeEventListener('touchcancel', handleNativePointerUp, eventOptions);\n          };\n        }\n      } else {\n        // Используем события на Document, т.к. mouse-события на целевом элементе могут теряться при\n        // выходе за границы этого элемента.\n        const doc = getWindow(event.currentTarget).document;\n\n        doc.addEventListener('mousemove', handleNativePointerMove, eventOptions);\n        doc.addEventListener('mouseup', handleNativePointerUp, eventOptions);\n        doc.addEventListener('mouseleave', handleNativePointerUp, eventOptions);\n\n        disposeTargetNativeGestureEvents.current = () => {\n          doc.removeEventListener('mousemove', handleNativePointerMove, eventOptions);\n          doc.removeEventListener('mouseup', handleNativePointerUp, eventOptions);\n          doc.removeEventListener('mouseleave', handleNativePointerUp, eventOptions);\n        };\n      }\n    },\n  );\n\n  const handlePointerEnter = onEnter\n    ? (event: React.MouseEvent<HTMLElement>) => onEnter(event.nativeEvent)\n    : undefined;\n\n  const handlePointerLeave = onLeave\n    ? (event: React.MouseEvent<HTMLElement>) => onLeave(event.nativeEvent)\n    : undefined;\n\n  /**\n   * Отменяет нативное браузерное поведение для вложенных ссылок и изображений.\n   */\n  const handleDragStart = (event: React.DragEvent<HTMLElement>) => {\n    const target = event.target as HTMLElement;\n    if (target.tagName === 'A' || target.tagName === 'IMG') {\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * Отменяет переход по вложенной ссылке, если был зафиксирован свайп.\n   */\n  const handleClickCapture: typeof onClickCapture = (event) => {\n    if (!didSlide.current) {\n      return onClickCapture && onClickCapture(event);\n    }\n\n    if (noSlideClick) {\n      event.stopPropagation();\n\n      // https://github.com/VKCOM/VKUI/issues/1977\n      // https://github.com/VKCOM/VKUI/issues/3892\n      event.preventDefault();\n    } else {\n      onClickCapture && onClickCapture(event);\n    }\n\n    didSlide.current = false;\n  };\n\n  useIsomorphicLayoutEffect(\n    function initializeNativeTouchStartEventWithPassiveFalse() {\n      const hostEl = hostRef.current;\n      if (!hostEl || !isTouchEnabled) {\n        return;\n      }\n\n      const options = { capture: useCapture, passive: false };\n      hostEl.addEventListener('touchstart', handlePointerDown, options);\n\n      return () => {\n        hostEl.removeEventListener('touchstart', handlePointerDown, options);\n      };\n    },\n    [hostRef, isTouchEnabled, useCapture, handlePointerDown],\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={hostRef}\n      onDragStart={handleDragStart}\n      onClickCapture={handleClickCapture}\n      // onEnter\n      onPointerEnter={usePointerHover ? handlePointerEnter : undefined}\n      onMouseEnter={!usePointerHover ? handlePointerEnter : undefined}\n      // onLeave\n      onPointerLeave={usePointerHover ? handlePointerLeave : undefined}\n      onMouseLeave={!usePointerHover ? handlePointerLeave : undefined}\n      // handlePointerDown (onTouchStart устанавливается отдельно через initializeNativeTouchEventStartWithPassiveFalse)\n      onMouseDownCapture={!isTouchEnabled && useCapture ? handlePointerDown : undefined}\n      onMouseDown={!isTouchEnabled && !useCapture ? handlePointerDown : undefined}\n    />\n  );\n};\n\nfunction initGesture(startX: number, startY: number): Gesture {\n  return {\n    startX,\n    startY,\n    startT: new Date(),\n    duration: 0,\n    isPressed: true,\n    isY: false,\n    isX: false,\n    isSlideX: false,\n    isSlideY: false,\n    isSlide: false,\n    clientX: 0,\n    clientY: 0,\n    shiftX: 0,\n    shiftY: 0,\n    shiftXAbs: 0,\n    shiftYAbs: 0,\n  };\n}\n\ntype Handlers = [\n  CustomTouchEventHandler | undefined,\n  CustomTouchEventHandler | undefined,\n  CustomTouchEventHandler | undefined,\n];\n\nfunction dispatchUserHandlers(\n  event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,\n  gesture: Gesture,\n  [handler, handlerX, handlerY]: Handlers,\n  stopPropagation?: boolean,\n  shouldCallDirectionHandlerOnlyIsSlide = true,\n) {\n  if (stopPropagation) {\n    event.stopPropagation();\n  }\n\n  const data = {\n    ...gesture,\n    originalEvent: event as unknown as VKUITouchEvent,\n    duration: Date.now() - gesture.startT.getTime(),\n  };\n\n  if (handler) {\n    handler(data);\n  }\n\n  if (handlerX) {\n    if (shouldCallDirectionHandlerOnlyIsSlide) {\n      if (gesture.isSlideX) {\n        handlerX(data);\n      }\n    } else {\n      handlerX(data);\n    }\n  }\n\n  if (handlerY) {\n    if (shouldCallDirectionHandlerOnlyIsSlide) {\n      if (gesture.isSlideY) {\n        handlerY(data);\n      }\n    } else {\n      handlerY(data);\n    }\n  }\n}\n"],"names":["React","useExternRef","useStableCallback","getWindow","isHTMLElement","isSVGElement","coordX","coordY","touchEnabled","useIsomorphicLayoutEffect","Touch","onStart","onStartX","onStartY","onMove","onMoveX","onMoveY","onEnter","onLeave","onEnd","onEndX","onEndY","onClickCapture","usePointerHover","slideThreshold","useCapture","Component","getRootRef","noSlideClick","stopPropagation","restProps","hostRef","isTouchEnabled","useState","gestureRef","useRef","didSlide","disposeTargetNativeGestureEvents","cleanupTargetNativeGestureEvents","current","useEffect","handleNativePointerUp","event","gesture","isPressed","dispatchUserHandlers","isSlide","Boolean","handleNativePointerMove","clientX","clientY","shiftX","startX","shiftY","startY","shiftXAbs","Math","abs","shiftYAbs","touches","length","isX","isY","willBeX","willBeY","willBeSlidedX","willBeSlidedY","isSlideX","isSlideY","handlePointerDown","nativeEvent","initGesture","shouldCallDirectionHandlerOnlyIsSlide","eventOptions","capture","passive","target","addEventListener","removeEventListener","doc","currentTarget","document","handlePointerEnter","undefined","handlePointerLeave","handleDragStart","tagName","preventDefault","handleClickCapture","initializeNativeTouchStartEventWithPassiveFalse","hostEl","options","ref","onDragStart","onPointerEnter","onMouseEnter","onPointerLeave","onMouseLeave","onMouseDownCapture","onMouseDown","startT","Date","duration","handler","handlerX","handlerY","data","originalEvent","now","getTime"],"mappings":"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"}

package/dist/cssm/components/Typography/Caption/Caption.js

@@ -16,7 +16,7 @@ const sizeYClassNames = {
 /**
  * Используется для мелких подписей.
  *
- * @see https://vkcom.github.io/VKUI/#/Caption
+ * @see https://vkui.io/components/typography#caption
  */ export const Caption = ({ className, level = '1', caps, Component = 'span', normalize = true, inline = false, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ _jsx(Typography, {

package/dist/cssm/components/Typography/Caption/Caption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { type HasCaps, Typography, type TypographyProps } from '../Typography';\nimport styles from './Caption.module.css';\n\nconst stylesLevel = {\n  '1': styles.level1,\n  '2': styles.level2,\n  '3': styles.level3,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  /**\n   * Уровень заголовка (от 1 до 3).\n   */\n  level?: '1' | '2' | '3';\n}\n\n/**\n * Используется для мелких подписей.\n *\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  level = '1',\n  caps,\n  Component = 'span',\n  normalize = true,\n  inline = false,\n  ...restProps\n}: CaptionProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      inline={inline}\n      className={classNames(\n        className,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        caps && styles.caps,\n        stylesLevel[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["classNames","useAdaptivity","Typography","styles","stylesLevel","level1","level2","level3","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Caption","className","level","caps","Component","normalize","inline","restProps","sizeY"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAAuBC,UAAU,QAA8B,mBAAgB;AAC/E,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,cAAc;IAClB,KAAKD,OAAOE,MAAM;IAClB,KAAKF,OAAOG,MAAM;IAClB,KAAKH,OAAOI,MAAM;AACpB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMN,OAAOO,SAAS;IACtBC,SAASR,OAAOS,YAAY;AAC9B;AASA;;;;CAIC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,SAAS,EACTC,QAAQ,GAAG,EACXC,IAAI,EACJC,YAAY,MAAM,EAClBC,YAAY,IAAI,EAChBC,SAAS,KAAK,EACd,GAAGC,WACU;IACb,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGpB;IAE3B,qBACE,KAACC;QACCe,WAAWA;QACXC,WAAWA;QACXC,QAAQA;QACRL,WAAWd,WACTc,WACAO,UAAU,aAAab,eAAe,CAACa,MAAM,EAC7CL,QAAQb,OAAOa,IAAI,EACnBZ,WAAW,CAACW,MAAM;QAEnB,GAAGK,SAAS;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { type HasCaps, Typography, type TypographyProps } from '../Typography';\nimport styles from './Caption.module.css';\n\nconst stylesLevel = {\n  '1': styles.level1,\n  '2': styles.level2,\n  '3': styles.level3,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  /**\n   * Уровень заголовка (от 1 до 3).\n   */\n  level?: '1' | '2' | '3';\n}\n\n/**\n * Используется для мелких подписей.\n *\n * @see https://vkui.io/components/typography#caption\n */\nexport const Caption = ({\n  className,\n  level = '1',\n  caps,\n  Component = 'span',\n  normalize = true,\n  inline = false,\n  ...restProps\n}: CaptionProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      inline={inline}\n      className={classNames(\n        className,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        caps && styles.caps,\n        stylesLevel[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["classNames","useAdaptivity","Typography","styles","stylesLevel","level1","level2","level3","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Caption","className","level","caps","Component","normalize","inline","restProps","sizeY"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAAuBC,UAAU,QAA8B,mBAAgB;AAC/E,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,cAAc;IAClB,KAAKD,OAAOE,MAAM;IAClB,KAAKF,OAAOG,MAAM;IAClB,KAAKH,OAAOI,MAAM;AACpB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMN,OAAOO,SAAS;IACtBC,SAASR,OAAOS,YAAY;AAC9B;AASA;;;;CAIC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,SAAS,EACTC,QAAQ,GAAG,EACXC,IAAI,EACJC,YAAY,MAAM,EAClBC,YAAY,IAAI,EAChBC,SAAS,KAAK,EACd,GAAGC,WACU;IACb,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGpB;IAE3B,qBACE,KAACC;QACCe,WAAWA;QACXC,WAAWA;QACXC,QAAQA;QACRL,WAAWd,WACTc,WACAO,UAAU,aAAab,eAAe,CAACa,MAAM,EAC7CL,QAAQb,OAAOa,IAAI,EACnBZ,WAAW,CAACW,MAAM;QAEnB,GAAGK,SAAS;;AAGnB,EAAE"}

package/dist/cssm/components/Typography/DisplayTitle/DisplayTitle.js

@@ -17,7 +17,7 @@ const sizeYClassNames = {
 /**
  * Используется для крупных заголовков.
  *
- * @see https://vkcom.github.io/VKUI/#/DisplayTitle
+ * @see https://vkui.io/components/typography#display-title
  */ export const DisplayTitle = ({ className, level = '1', Component = 'span', normalize = true, inline = false, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ _jsx(Typography, {