@vkontakte/vkui 5.6.2 → 5.7.0

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

@@ -12,8 +12,12 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
     defaultValue?: string;
     iconAriaLabel?: string;
     clearAriaLabel?: string;
+    /**
+     * Удаляет отступы у компонента
+     */
+    noPadding?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, ...inputProps }: SearchProps) => React.JSX.Element;
+export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, noPadding, ...inputProps }: SearchProps) => React.JSX.Element;

package/dist/cssm/components/Search/Search.js

@@ -8,13 +8,14 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
+import { touchEnabled } from '../../lib/touch';
 import { Button } from '../Button/Button';
 import { IconButton } from '../IconButton/IconButton';
 import { Headline } from '../Typography/Headline/Headline';
 import styles from './Search.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
- */ export const Search = ({ before = /*#__PURE__*/ React.createElement(Icon16SearchOutline, null), className, defaultValue = '', placeholder = 'Поиск', after = 'Отмена', getRef, icon, onIconClick = noop, style, autoComplete = 'off', onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel = 'Очистить', ...inputProps })=>{
+ */ export const Search = ({ before = /*#__PURE__*/ React.createElement(Icon16SearchOutline, null), className, defaultValue = '', placeholder = 'Поиск', after = 'Отмена', getRef, icon, onIconClick = noop, style, autoComplete = 'off', onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel = 'Очистить', noPadding, ...inputProps })=>{
     const inputRef = useExternRef(getRef);
     const { value: isFocused, setTrue: setFocusedTrue, setFalse: setFocusedFalse } = useBooleanState(false);
     const [value, onChange] = useEnsuredControl({
@@ -49,11 +50,15 @@ import styles from './Search.module.css';
     const onIconCancelClickStart = React.useCallback((e)=>{
         e.originalEvent.preventDefault();
         inputRef.current?.focus();
+        if (touchEnabled()) {
+            onCancel();
+        }
     }, [
-        inputRef
+        inputRef,
+        onCancel
     ]);
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], value && styles['Search--has-value'], after && styles['Search--has-after'], icon && styles['Search--has-icon'], inputProps.disabled && styles['Search--disabled'], className),
+        className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], value && styles['Search--has-value'], after && styles['Search--has-after'], icon && styles['Search--has-icon'], inputProps.disabled && styles['Search--disabled'], !noPadding && styles['Search--withPadding'], className),
         style: style
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Search__field']

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n    },\n    [inputRef],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        inputProps.disabled && styles['Search--disabled'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Button","IconButton","Headline","styles","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","disabled","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,mBAAmB,EAAEC,YAAY,QAAQ,mBAAmB;AAClF,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAG9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAQ,2BAA2B;AAEtD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAiBzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,uBAAS,oBAAChB,0BAAsB,EAChCiB,SAAS,EACTC,eAAe,EAAE,EACjBC,cAAc,OAAO,EACrBC,QAAQ,QAAQ,EAChBC,MAAM,EACNC,IAAI,EACJC,cAAcpB,IAAI,EAClBqB,KAAK,EACLC,eAAe,KAAK,EACpBC,UAAUC,YAAY,EACtBC,OAAOC,SAAS,EAChBC,aAAa,EACbC,iBAAiB,UAAU,EAC3B,GAAGC,YACS;IACZ,MAAMC,WAAW1B,aAAac;IAC9B,MAAM,EACJO,OAAOM,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGjC,gBAAgB;IAEpB,MAAM,CAACuB,OAAOF,SAAS,GAAGpB,kBAAkB;QAC1CY;QACAQ,UAAUC;QACVC,OAAOC;IACT;IACA,MAAM,EAAEU,QAAQ,MAAM,EAAE,GAAGnC;IAC3B,MAAMoC,WAAWhC;IAEjB,MAAMiC,UAAU,CAACC;QACfN;QACAJ,WAAWS,OAAO,IAAIT,WAAWS,OAAO,CAACC;IAC3C;IAEA,MAAMC,SAAS,CAACD;QACdJ;QACAN,WAAWW,MAAM,IAAIX,WAAWW,MAAM,CAACD;IACzC;IAEA,MAAME,WAAW9C,MAAM+C,WAAW,CAAC;QACjC,6DAA6D;QAC7D,MAAMC,yBAAyBC,OAAOC,wBAAwB,CAC5DC,iBAAiBC,SAAS,EAC1B,UACCC;QACHL,wBAAwBM,KAAKnB,SAASoB,OAAO,EAAE;QAE/C,MAAMC,MAAM,IAAIC,MAAM,SAAS;YAAEC,SAAS;QAAK;QAC/CvB,SAASoB,OAAO,EAAEI,cAAcH;IAClC,GAAG;QAACrB;KAAS;IAEb,MAAMyB,mBAAmB5D,MAAM+C,WAAW,CACxC,CAACH,IAAkBnB,YAAYmB,EAAEiB,aAAa,GAC9C;QAACpC;KAAY;IAGf,MAAMqC,yBAAyB9D,MAAM+C,WAAW,CAC9C,CAACH;QACCA,EAAEiB,aAAa,CAACE,cAAc;QAC9B5B,SAASoB,OAAO,EAAES;IACpB,GACA;QAAC7B;KAAS;IAGZ,qBACE,oBAAC8B;QACC9C,WAAWf,WACT,sBACAY,MAAM,CAAC,SAAS,EAChByB,UAAU,UAAUzB,MAAM,CAAC,qBAAqB,EAChDyB,UAAU9B,SAASuD,OAAO,IAAIlD,MAAM,CAAC,wBAAwB,EAC7DoB,aAAapB,MAAM,CAAC,kBAAkB,EACtCc,SAASd,MAAM,CAAC,oBAAoB,EACpCM,SAASN,MAAM,CAAC,oBAAoB,EACpCQ,QAAQR,MAAM,CAAC,mBAAmB,EAClCkB,WAAWiC,QAAQ,IAAInD,MAAM,CAAC,mBAAmB,EACjDG;QAEFO,OAAOA;qBAEP,oBAACuC;QAAI9C,WAAWH,MAAM,CAAC,gBAAgB;qBACrC,oBAACoD;QAAMjD,WAAWH,MAAM,CAAC,kBAAkB;OACxCE,sBACD,oBAACH;QACCsD,WAAU;QACVC,MAAK;QACLC,OAAM;QACNC,QAAO;QACN,GAAGtC,UAAU;QACdb,aAAaA;QACbM,cAAcA;QACd8C,YAAYtC;QACZhB,WAAWH,MAAM,CAAC,gBAAgB;QAClC2B,SAASA;QACTE,QAAQA;QACRjB,UAAUA;QACVE,OAAOA;uBAGX,oBAACmC;QAAI9C,WAAWH,MAAM,CAAC,gBAAgB;OACpCQ,sBACC,oBAACV;QACC4D,WAAU;QACVC,SAASf;QACTzC,WAAWH,MAAM,CAAC,eAAe;QACjC2B,SAASL;QACTO,QAAQL;QACRoC,cAAY5C;OAEXR,OAGJ,CAAC,CAACM,uBACD,oBAAChB;QACC4D,WAAU;QACVC,SAASb;QACTe,SAAS/B;QACT3B,WAAWH,MAAM,CAAC,eAAe;QACjC4D,cAAY3C;OAEXS,aAAa9B,SAASkE,GAAG,iBAAG,oBAAC7E,mCAAiB,oBAACE,wBAKvDuC,aAAa9B,SAASkE,GAAG,IAAIxD,uBAC5B,oBAACT;QACCkE,MAAK;QACLC,MAAK;QACL7D,WAAWH,MAAM,CAAC,gBAAgB;QAClCiE,kBAAiB;QACjBJ,SAAS/B;QACTH,SAASL;QACTO,QAAQL;qBAER,oBAAC0C;QAAK/D,WAAWH,MAAM,CAAC,oBAAoB;OAAGM;AAKzD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { touchEnabled, VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  noPadding,\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        inputProps.disabled && styles['Search--disabled'],\n        !noPadding && styles['Search--withPadding'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","touchEnabled","Button","IconButton","Headline","styles","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","noPadding","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","disabled","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"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"}

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

@@ -1,12 +1,15 @@
 .Search {
   display: flex;
   overflow: hidden;
-  padding: 8px var(--vkui--size_base_padding_horizontal--regular);
   -webkit-tap-highlight-color: transparent;
 
   --vkui_internal--search_height: var(--vkui--size_search_height--regular);
 }
 
+.Search--withPadding {
+  padding: 8px var(--vkui--size_base_padding_horizontal--regular);
+}
+
 /*
   sizeY-compact
  */

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

@@ -42,8 +42,12 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
      * Не может использоваться одновременно с `action`
      */
     subtitle?: React.ReactNode;
+    /**
+     * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.
+     */
+    offsetY?: React.CSSProperties['bottom'];
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */
-export declare const Snackbar: ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, className, subtitle, ...restProps }: SnackbarProps) => React.JSX.Element;
+export declare const Snackbar: ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, className, subtitle, offsetY, style, ...restProps }: SnackbarProps) => React.JSX.Element;

package/dist/cssm/components/Snackbar/Snackbar.js

@@ -15,7 +15,7 @@ import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './Snackbar.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
- */ export const Snackbar = ({ children, layout: layoutProps = 'horizontal', action, before, after, duration = 4000, onActionClick, onClose, mode = 'default', className, subtitle, ...restProps })=>{
+ */ export const Snackbar = ({ children, layout: layoutProps = 'horizontal', action, before, after, duration = 4000, onActionClick, onClose, mode = 'default', className, subtitle, offsetY, style, ...restProps })=>{
     const platform = usePlatform();
     const { viewWidth } = useAdaptivityWithJSMediaQueries();
     const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
@@ -101,7 +101,11 @@ import styles from './Snackbar.module.css';
         className: classNames(styles['Snackbar'], platform === Platform.IOS && styles['Snackbar--ios'], {
             vertical: styles['Snackbar--layout-vertical'],
             horizontal: styles['Snackbar--layout-horizontal']
-        }[layout], mode === 'dark' && styles['Snackbar--mode-dark'], closing && styles['Snackbar--closing'], touched && styles['Snackbar--touched'], isDesktop && styles['Snackbar--desktop'], className)
+        }[layout], mode === 'dark' && styles['Snackbar--mode-dark'], closing && styles['Snackbar--closing'], touched && styles['Snackbar--touched'], isDesktop && styles['Snackbar--desktop'], className),
+        style: offsetY ? {
+            ...style,
+            bottom: offsetY
+        } : style
     }, /*#__PURE__*/ React.createElement(Touch, {
         className: styles['Snackbar__in'],
         getRootRef: innerElRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","styles","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","closing","setClosing","useState","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","div","vertical","horizontal","getRootRef","onStart","onMoveX","onEnd","ref","align","appearance","size","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  offsetY,\n  style,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n        style={offsetY ? { ...style, bottom: offsetY } : style}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","styles","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","offsetY","style","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","closing","setClosing","useState","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","div","vertical","horizontal","bottom","getRootRef","onStart","onMoveX","onEnd","ref","align","appearance","size","onClick"],"mappings":"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"}

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TappableProps } from '../Tappable/Tappable';
 export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
     mode?: 'primary' | 'outline' | 'tertiary';
+    appearance?: 'accent' | 'neutral';
     size?: 's' | 'm' | 'l';
     selected?: boolean;
     /**
@@ -21,4 +22,4 @@ export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
  */
-export declare const SubnavigationButton: ({ mode, size, selected, textLevel, before, after, expandable, children, className, ...restProps }: SubnavigationButtonProps) => React.JSX.Element;
+export declare const SubnavigationButton: ({ mode, appearance, size, selected, textLevel, before, after, expandable, children, className, ...restProps }: SubnavigationButtonProps) => React.JSX.Element;

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js

@@ -7,6 +7,20 @@ import { Tappable } from '../Tappable/Tappable';
 import { Caption } from '../Typography/Caption/Caption';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './SubnavigationButton.module.css';
+const appearanceStyles = {
+    accent: styles['SubnavigationButton--appearance-accent'],
+    neutral: styles['SubnavigationButton--appearance-neutral']
+};
+const modeStyles = {
+    primary: styles['SubnavigationButton--mode-primary'],
+    outline: styles['SubnavigationButton--mode-outline'],
+    tertiary: styles['SubnavigationButton--mode-tertiary']
+};
+const sizeStyles = {
+    s: styles['SubnavigationButton--size-s'],
+    m: styles['SubnavigationButton--size-m'],
+    l: styles['SubnavigationButton--size-l']
+};
 const sizeYClassNames = {
     none: styles['SubnavigationButton--sizeY-none'],
     [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact']
@@ -22,21 +36,13 @@ const SubnavigationButtonTypography = ({ textLevel, ...restProps })=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
- */ export const SubnavigationButton = ({ mode = 'primary', size = 'm', selected, textLevel = '1', before, after, expandable, children, className, ...restProps })=>{
+ */ export const SubnavigationButton = ({ mode = 'primary', appearance = 'accent', size = 'm', selected, textLevel = '1', before, after, expandable, children, className, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ React.createElement(Tappable, {
         ...restProps,
         hasActive: false,
         focusVisibleMode: "outside",
-        className: classNames(styles['SubnavigationButton'], {
-            s: styles['SubnavigationButton--size-s'],
-            m: styles['SubnavigationButton--size-m'],
-            l: styles['SubnavigationButton--size-l']
-        }[size], {
-            primary: styles['SubnavigationButton--mode-primary'],
-            outline: styles['SubnavigationButton--mode-outline'],
-            tertiary: styles['SubnavigationButton--mode-tertiary']
-        }[mode], selected && styles['SubnavigationButton--selected'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)
+        className: classNames(styles['SubnavigationButton'], sizeStyles[size], modeStyles[mode], appearanceStyles[appearance], selected && styles['SubnavigationButton--selected'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)
     }, /*#__PURE__*/ React.createElement("span", {
         className: styles['SubnavigationButton__in']
     }, before && /*#__PURE__*/ React.createElement("span", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","Tappable","Caption","Subhead","styles","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","s","m","l","primary","outline","tertiary","REGULAR","span","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,kCAAkC;IAC/C,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,qCAAqC;AAClE;AA4BA,MAAMI,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,oBAACN,SAAYO;IACtB;IAEA,qBAAO,oBAACR;QAAQS,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,OAAO,GAAG,EACVC,QAAQ,EACRN,YAAY,GAAG,EACfO,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACT,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGtB;IAE3B,qBACE,oBAACE;QACE,GAAGS,SAAS;QACbY,WAAW;QACXC,kBAAiB;QACjBH,WAAWtB,WACTM,MAAM,CAAC,sBAAsB,EAC7B;YACEoB,GAAGpB,MAAM,CAAC,8BAA8B;YACxCqB,GAAGrB,MAAM,CAAC,8BAA8B;YACxCsB,GAAGtB,MAAM,CAAC,8BAA8B;QAC1C,CAAC,CAACU,KAAK,EACP;YACEa,SAASvB,MAAM,CAAC,oCAAoC;YACpDwB,SAASxB,MAAM,CAAC,oCAAoC;YACpDyB,UAAUzB,MAAM,CAAC,qCAAqC;QACxD,CAAC,CAACS,KAAK,EACPE,YAAYX,MAAM,CAAC,gCAAgC,EACnDiB,UAAUrB,SAAS8B,OAAO,IAAIzB,eAAe,CAACgB,MAAM,EACpDD;qBAGF,oBAACW;QAAKX,WAAWhB,MAAM,CAAC,0BAA0B;OAC/CY,wBAAU,oBAACe;QAAKX,WAAWhB,MAAM,CAAC,8BAA8B;OAAGY,uBACpE,oBAACR;QACCC,WAAWA;QACXW,WAAWhB,MAAM,CAAC,6BAA6B;QAC/C4B,WAAU;OAETb,WAEFF,uBAAS,oBAACc;QAAKX,WAAWhB,MAAM,CAAC,6BAA6B;OAAGa,QACjEC,4BAAc,oBAACrB;QAAeuB,WAAWhB,MAAM,CAAC,sCAAsC;;AAI/F,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles['SubnavigationButton--appearance-accent'],\n  neutral: styles['SubnavigationButton--appearance-neutral'],\n};\n\nconst modeStyles = {\n  primary: styles['SubnavigationButton--mode-primary'],\n  outline: styles['SubnavigationButton--mode-outline'],\n  tertiary: styles['SubnavigationButton--mode-tertiary'],\n};\n\nconst sizeStyles = {\n  s: styles['SubnavigationButton--size-s'],\n  m: styles['SubnavigationButton--size-m'],\n  l: styles['SubnavigationButton--size-l'],\n};\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  appearance?: 'accent' | 'neutral';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","Tappable","Caption","Subhead","styles","appearanceStyles","accent","neutral","modeStyles","primary","outline","tertiary","sizeStyles","s","m","l","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","REGULAR","span","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,MAAM,CAAC,yCAAyC;IACxDG,SAASH,MAAM,CAAC,0CAA0C;AAC5D;AAEA,MAAMI,aAAa;IACjBC,SAASL,MAAM,CAAC,oCAAoC;IACpDM,SAASN,MAAM,CAAC,oCAAoC;IACpDO,UAAUP,MAAM,CAAC,qCAAqC;AACxD;AAEA,MAAMQ,aAAa;IACjBC,GAAGT,MAAM,CAAC,8BAA8B;IACxCU,GAAGV,MAAM,CAAC,8BAA8B;IACxCW,GAAGX,MAAM,CAAC,8BAA8B;AAC1C;AAEA,MAAMY,kBAAkB;IACtBC,MAAMb,MAAM,CAAC,kCAAkC;IAC/C,CAACJ,SAASkB,OAAO,CAAC,EAAEd,MAAM,CAAC,qCAAqC;AAClE;AA6BA,MAAMe,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,oBAACjB,SAAYkB;IACtB;IAEA,qBAAO,oBAACnB;QAAQoB,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACT,GAAGX,WACsB;IACzB,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAGlC;IAE3B,qBACE,oBAACE;QACE,GAAGoB,SAAS;QACba,WAAW;QACXC,kBAAiB;QACjBH,WAAWlC,WACTM,MAAM,CAAC,sBAAsB,EAC7BQ,UAAU,CAACc,KAAK,EAChBlB,UAAU,CAACgB,KAAK,EAChBnB,gBAAgB,CAACoB,WAAW,EAC5BE,YAAYvB,MAAM,CAAC,gCAAgC,EACnD6B,UAAUjC,SAASoC,OAAO,IAAIpB,eAAe,CAACiB,MAAM,EACpDD;qBAGF,oBAACK;QAAKL,WAAW5B,MAAM,CAAC,0BAA0B;OAC/CwB,wBAAU,oBAACS;QAAKL,WAAW5B,MAAM,CAAC,8BAA8B;OAAGwB,uBACpE,oBAACT;QACCC,WAAWA;QACXY,WAAW5B,MAAM,CAAC,6BAA6B;QAC/CkC,WAAU;OAETP,WAEFF,uBAAS,oBAACQ;QAAKL,WAAW5B,MAAM,CAAC,6BAA6B;OAAGyB,QACjEC,4BAAc,oBAACjC;QAAemC,WAAW5B,MAAM,CAAC,sCAAsC;;AAI/F,EAAE"}

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

@@ -113,6 +113,15 @@
   box-shadow: inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha);
 }
 
+/**
+ * appearance
+ */
+
+.SubnavigationButton--appearance-neutral .SubnavigationButton__expandableIcon,
+.SubnavigationButton--appearance-neutral .SubnavigationButton__before {
+  color: var(--vkui--color_icon_primary);
+}
+
 /**
  * selected
  */
@@ -124,14 +133,19 @@
   border: 0;
 }
 
-.SubnavigationButton--selected.SubnavigationButton--mode-tertiary {
+.SubnavigationButton--selected.SubnavigationButton--mode-tertiary,
+.SubnavigationButton--selected.SubnavigationButton--appearance-neutral {
   background-color: var(--vkui--color_transparent--active);
   color: var(--vkui--color_text_primary);
 }
 
-.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+.SubnavigationButton--selected.SubnavigationButton--appearance-accent:not(
+    .SubnavigationButton--mode-tertiary
+  )
   .SubnavigationButton__before,
-.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+.SubnavigationButton--selected.SubnavigationButton--appearance-accent:not(
+    .SubnavigationButton--mode-tertiary
+  )
   .SubnavigationButton__expandableIcon {
   color: var(--vkui--color_icon_contrast_themed);
 }
@@ -146,11 +160,18 @@
   --vkui_internal--counter_inherit_color: var(--vkui--color_text_contrast_themed);
 }
 
-.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary) {
+.SubnavigationButton--selected.SubnavigationButton--appearance-accent:not(
+    .SubnavigationButton--mode-tertiary
+  ) {
   --vkui_internal--counter_inherit_background: var(--vkui--color_background_content);
   --vkui_internal--counter_inherit_color: var(--vkui--color_text_accent_themed);
 }
 
+.SubnavigationButton--selected.SubnavigationButton--appearance-neutral {
+  --vkui_internal--counter_inherit_background: var(--vkui--color_background_content);
+  --vkui_internal--counter_inherit_color: var(--vkui--color_text_primary);
+}
+
 :global(.vkuiInternalSubnavigationBar--mode-fixed) .SubnavigationButton {
   flex: 1;
   min-width: 0;

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

@@ -1,34 +1,18 @@
 import * as React from 'react';
 import { type PlacementWithAuto } from '../../lib/floating';
 import { HasRootRef } from '../../types';
-import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
-export interface TooltipProps {
+import { type TooltipBaseProps } from '../TooltipBase/TooltipBase';
+export interface TooltipProps extends Omit<TooltipBaseProps, 'arrowCoords' | 'arrowPlacement' | 'getArrowRef' | 'floatingStyle' | 'withArrow'> {
     /**
      * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает
      * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,
      * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.
      */
     children: React.ReactElement<HasRootRef<any>> | React.ReactElement;
-    /**
-     * Стиль отображения подсказки
-     */
-    appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';
     /**
      * Если передан `false`, то рисуется просто `children`.
      */
     isShown?: boolean;
-    /**
-     * Текст тултипа.
-     */
-    text?: React.ReactNode;
-    /**
-     * Заголовок тултипа.
-     */
-    header?: React.ReactNode;
-    /**
-     * Положение по горизонтали (прижатие к левому или правому краю `children`).
-     * Если не задано, позиция по горизонтали определятся автоматически
-     */
     alignX?: 'center' | 'left' | 'right';
     /**
      * Положение по вертикали (расположение над или под `children`).
@@ -51,20 +35,6 @@ export interface TooltipProps {
      * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.
      */
     arrowPadding?: number;
-    /**
-     * Пользовательская SVG иконка.
-     *
-     * Требования:
-     *
-     * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).
-     * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,
-     *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.
-     *    (см. https://github.com/VKCOM/VKUI/pull/4496).
-     * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.
-     * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
-     * 5. Если стрелка наезжает на якорный элемент, то увеличьте значение параметра `offsetY`.
-     */
-    ArrowIcon?: PopperArrowProps['Icon'];
     /**
      * Сдвиг стрелочки относительно центра дочернего элемента.
      */
@@ -81,12 +51,8 @@ export interface TooltipProps {
      * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
      */
     placement?: PlacementWithAuto;
-    /**
-     * Пользовательские css-классы, будут добавлены на root-элемент
-     */
-    className?: string;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, appearance, arrow, arrowPadding, ArrowIcon, placement: placementProp, text, header, className, ...restProps }: TooltipProps) => React.JSX.Element;
+export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, arrow, arrowPadding, placement: placementProp, ...restProps }: TooltipProps) => React.JSX.Element;

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

@@ -1,27 +1,17 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { hasReactNode } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { useDOM } from '../../lib/dom';
 import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, offsetMiddleware, shiftMiddleware, useFloating } from '../../lib/floating';
 import { warnOnce } from '../../lib/warnOnce';
 import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
-import { DefaultIcon } from '../PopperArrow/DefaultIcon';
-import { PopperArrow } from '../PopperArrow/PopperArrow';
-import { Subhead } from '../Typography/Subhead/Subhead';
+import { TooltipBase } from '../TooltipBase/TooltipBase';
 import { tooltipContainerAttr } from './TooltipContainer';
 import styles from './Tooltip.module.css';
 const isDOMTypeElement = (element)=>{
     return /*#__PURE__*/ React.isValidElement(element) && typeof element.type === 'string';
 };
 const warn = warnOnce('Tooltip');
-const stylesAppearance = {
-    accent: styles['Tooltip--appearance-accent'],
-    white: styles['Tooltip--appearance-white'],
-    black: styles['Tooltip--appearance-black'],
-    inversion: styles['Tooltip--appearance-inversion']
-};
 function mapAlignX(x) {
     switch(x){
         case 'left':
@@ -43,7 +33,7 @@ function isVerticalPlacement(placement) {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
- */ export const Tooltip = ({ children, isShown: isShownProp = true, offsetX = 0, offsetY = 15, alignX, alignY, onClose, cornerOffset = 0, cornerAbsoluteOffset, appearance = 'accent', arrow = true, arrowPadding = 14, ArrowIcon = DefaultIcon, placement: placementProp, text, header, className, ...restProps })=>{
+ */ export const Tooltip = ({ children, isShown: isShownProp = true, offsetX = 0, offsetY = 15, alignX, alignY, onClose, cornerOffset = 0, cornerAbsoluteOffset, arrow = true, arrowPadding = 14, placement: placementProp, ...restProps })=>{
     const [arrowRef, setArrowRef] = React.useState(null);
     const [target, setTarget] = React.useState(null);
     /* eslint-disable no-restricted-properties */ const tooltipContainer = React.useMemo(()=>target?.closest(`[${tooltipContainerAttr}]`), [
@@ -132,33 +122,23 @@ function isVerticalPlacement(placement) {
         middleware: memoizedMiddlewares,
         whileElementsMounted: autoUpdateFloatingElement
     });
-    const { document } = useDOM();
-    useGlobalEventListener(document, 'click', isShown && onClose, {
-        capture: true,
-        passive: true
-    });
     const childRef = isDOMTypeElement(children) ? children.ref : /*#__PURE__*/ React.isValidElement(children) ? children.props.getRootRef : null;
     const patchedRef = useExternRef(setTarget, refs.setReference, childRef);
     const child = /*#__PURE__*/ React.isValidElement(children) ? /*#__PURE__*/ React.cloneElement(children, {
         [isDOMTypeElement(children) ? 'ref' : 'getRootRef']: patchedRef
     }) : children;
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, child, isShown && target != null && /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, child, isShown && target != null && /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(TooltipBase, {
         ...restProps,
-        className: classNames(styles['Tooltip'], appearance !== 'neutral' && stylesAppearance[appearance], className)
-    }, /*#__PURE__*/ React.createElement("div", {
-        ref: refs.setFloating,
-        style: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY)
-    }, arrow && /*#__PURE__*/ React.createElement(PopperArrow, {
-        coords: arrowCoords,
-        placement: resolvedPlacement,
-        arrowClassName: styles['Tooltip__arrow'],
-        getRootRef: setArrowRef,
-        Icon: ArrowIcon
+        getRootRef: refs.setFloating,
+        floatingStyle: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY),
+        withArrow: arrow,
+        arrowCoords: arrowCoords,
+        arrowPlacement: resolvedPlacement,
+        getArrowRef: setArrowRef
     }), /*#__PURE__*/ React.createElement("div", {
-        className: styles['Tooltip__content']
-    }, header && /*#__PURE__*/ React.createElement(Subhead, {
-        weight: "2"
-    }, header), text && /*#__PURE__*/ React.createElement(Subhead, null, text)))), tooltipContainer));
+        className: styles['Tooltip__overlay'],
+        onClickCapture: onClose
+    })), tooltipContainer));
 };
 
 //# sourceMappingURL=Tooltip.js.map