npm - @vkontakte/vkui - Versions diffs - 5.1.2 → 5.2.1 - Mend

@vkontakte/vkui 5.1.2 → 5.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1245) hide show

package/dist/cjs/components/TabsItem/TabsItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsItem.js","names":["warn","warnOnce","TabsItem","before","children","status","after","selected","className","role","tabIndexProp","tabIndex","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","classNames","process","env","NODE_ENV","undefined","styles","~~getSizeYClassName~~"],"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~Tappable~~ } from '~~../Tappable~~/~~Tappable~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~useAdaptivity~~ } from '../../~~hooks~~/~~useAdaptivity~~';\nimport { ~~TabsModeContext,~~ ~~TabsContextProps~~ } from '~~../Tabs~~/~~Tabs~~';\nimport { ~~Headline~~ } from '../~~Typography~~/~~Headline/Headline~~';\nimport { ~~Subhead~~ } from '../~~Typography~~/~~Subhead/Subhead~~';\nimport { ~~getSizeYClassName~~ } from '~~../../helpers~~/~~getSizeYClassName~~';\nimport { ~~warnOnce~~ } from '~~../../lib~~/~~warnOnce~~';\nimport styles from './TabsItem.module.css';\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\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 selected?: boolean;\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 = false,\n className,\n role = 'tab',\n tabIndex: tabIndexProp,\n ...restProps\n}: TabsItemProps) => {\n const { sizeY } = useAdaptivity();\n const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n let statusComponent = null;\n\n const isTabFlow = role === 'tab';\n\n if (status) {\n statusComponent =\n typeof status === 'number' ? (\n <Subhead\n Component=\"span\"\n className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n weight=\"2\"\n >\n {status}\n </Subhead>\n ) : (\n <span className={styles['TabsItem__status']}>{status}</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 (!restProps['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 return (\n <Tappable\n {...restProps}\n className={classNames(\n styles['TabsItem'],\n mode && styles[`TabsItem--mode-${mode}`],\n selected && styles['TabsItem--selected'],\n ~~getSizeYClassName(styles~~[~~'TabsItem'~~]~~, sizeY)~~,\n withGaps && styles['TabsItem--withGaps'],\n className,\n )}\n hoverMode={styles['TabsItem--hover']}\n activeMode={styles['TabsItem--active']}\n focusVisibleMode=\"inside\"\n hasActive={false}\n role={role}\n aria-selected={selected}\n tabIndex={tabIndex}\n >\n {before && <div className={styles['TabsItem__before']}>{before}</div>}\n <Headline\n Component=\"span\"\n className={styles['TabsItem__label']}\n level={mode === 'default' ? '1' : '2'}\n weight=\"2\"\n >\n {children}\n </Headline>\n {statusComponent}\n {after && <div className={styles['TabsItem__after']}>{after}</div>}\n {mode === 'default' && (\n <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n )}\n </Tappable>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AAA8C~~;~~AA6B9C~~,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,UAAU,CAAC;;AAEjC;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAUA;EAAA,IATnBC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACFC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,~~qBAAkB~~,IAAAC,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EACb~~,wBAA6CC,KAAK,CAACC,UAAU,CAACC,qBAAe,CAAC;IAAtEC,IAAI,qBAAJA,IAAI;IAAEC,QAAQ,qBAARA,QAAQ;EACtB,IAAIC,eAAe,GAAG,IAAI;EAE1B,IAAMC,SAAS,GAAGZ,IAAI,KAAK,KAAK;EAEhC,IAAIJ,MAAM,EAAE;IACVe,eAAe,GACb,OAAOf,MAAM,KAAK,QAAQ,gBACxB,oBAAC,gBAAO;MACN,SAAS,EAAC,MAAM;MAChB,SAAS,EAAE,IAAAiB,gBAAU,wDAAgE;MACrF,MAAM,EAAC;IAAG,GAETjB,MAAM,CACC,gBAEV;MAAM,SAAS;IAA6B,GAAEA,MAAM,CACrD;EACL;EAEA,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IAAIJ,SAAS,EAAE;IACvD,IAAI,CAACT,SAAS,CAAC,eAAe,CAAC,EAAE;MAC/BZ,IAAI,iNAAyD,MAAM,CAAC;IACtE,CAAC,MAAM,IAAI,CAACY,SAAS,CAAC,IAAI,CAAC,EAAE;MAC3BZ,IAAI,sXAEF,MAAM,CACP;IACH;EACF;EAEA,IAAIW,QAAQ,GAAGD,YAAY;EAC3B,IAAIW,SAAS,IAAIV,QAAQ,KAAKe,SAAS,EAAE;IACvCf,QAAQ,GAAGJ,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;EAC9B;EAEA,oBACE,oBAAC,kBAAQ,6BACHK,SAAS;IACb,SAAS,EAAE,IAAAU,gBAAU,kBAEnBJ,IAAI,IAAIS,MAAM,0BAAmBT,IAAI,EAAG,EACxCX,QAAQ,4BAAgC,~~EACxC~~,~~IAAAqB~~,~~oCAAiB~~,~~kBAAqBd~~,KAAK,CAAC,~~EAC5CK~~,QAAQ,4BAAgC,EACxCX,SAAS,CACT;IACF,SAAS,uBAA4B;IACrC,UAAU,wBAA6B;IACvC,gBAAgB,EAAC,QAAQ;IACzB,SAAS,EAAE,KAAM;IACjB,IAAI,EAAEC,IAAK;IACX,iBAAeF,QAAS;IACxB,QAAQ,EAAEI;EAAS,IAElBR,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE,oBAAC,kBAAQ;IACP,SAAS,EAAC,MAAM;IAChB,SAAS,uBAA4B;IACrC,KAAK,EAAEe,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,GAAI;IACtC,MAAM,EAAC;EAAG,GAETd,QAAQ,CACA,EACVgB,eAAe,EACfd,KAAK,iBAAI;IAAK,SAAS;EAA4B,GAAEA,KAAK,CAAO,EACjEY,IAAI,KAAK,SAAS,iBACjB;IAAK,SAAS,2BAAgC;IAAC,mBAAW;IAAC,iBAAeX;EAAS,EACpF,CACQ;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"TabsItem.js","names":["sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","TabsItem","before","children","status","after","selected","className","role","tabIndexProp","tabIndex","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","classNames","process","env","NODE_ENV","undefined","styles","REGULAR"],"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n none: styles['TabsItem--sizeY-none'],\n [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\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 selected?: boolean;\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 = false,\n className,\n role = 'tab',\n tabIndex: tabIndexProp,\n ...restProps\n}: TabsItemProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n let statusComponent = null;\n\n const isTabFlow = role === 'tab';\n\n if (status) {\n statusComponent =\n typeof status === 'number' ? (\n <Subhead\n Component=\"span\"\n className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n weight=\"2\"\n >\n {status}\n </Subhead>\n ) : (\n <span className={styles['TabsItem__status']}>{status}</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 (!restProps['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 return (\n <Tappable\n {...restProps}\n className={classNames(\n styles['TabsItem'],\n mode && styles[`TabsItem--mode-${mode}`],\n selected && styles['TabsItem--selected'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n withGaps && styles['TabsItem--withGaps'],\n className,\n )}\n hoverMode={styles['TabsItem--hover']}\n activeMode={styles['TabsItem--active']}\n focusVisibleMode=\"inside\"\n hasActive={false}\n role={role}\n aria-selected={selected}\n tabIndex={tabIndex}\n >\n {before && <div className={styles['TabsItem__before']}>{before}</div>}\n <Headline\n Component=\"span\"\n className={styles['TabsItem__label']}\n level={mode === 'default' ? '1' : '2'}\n weight=\"2\"\n >\n {children}\n </Headline>\n {statusComponent}\n {after && <div className={styles['TabsItem__after']}>{after}</div>}\n {mode === 'default' && (\n <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n )}\n </Tappable>\n );\n};\n"],"mappings":"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"}

package/dist/cjs/components/Tappable/Tappable.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { TouchProps } from '../Touch/Touch';
 import { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';
 import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
+import { TouchProps } from '../Touch/Touch';
 declare type StateMode = 'opacity' | 'background';
 export declare type TappableElementProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'onTouchCancel' | 'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'> & AnchorHTMLAttributesOnly;
 export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {

package/dist/cjs/components/Tappable/Tappable.js CHANGED Viewed

@@ -11,25 +11,25 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
-var _mitt = _interopRequireDefault(require("mitt"));
 var _vkjs = require("@vkontakte/vkjs");
-var _Touch = require("../Touch/Touch");
-var _TouchContext = _interopRequireDefault(require("../Touch/TouchContext"));
-var _platform = require("../../lib/platform");
+var _mitt = _interopRequireDefault(require("mitt"));
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _useAdaptivityHasHover = require("../../hooks/useAdaptivityHasHover");
+var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
+var _useBooleanState2 = require("../../hooks/useBooleanState");
+var _useExternRef = require("../../hooks/useExternRef");
+var _useFocusVisible2 = require("../../hooks/useFocusVisible");
+var _usePlatform = require("../../hooks/usePlatform");
+var _useTimeout = require("../../hooks/useTimeout");
+var _accessibility = require("../../lib/accessibility");
+var _callMultiple = require("../../lib/callMultiple");
 var _offset = require("../../lib/offset");
+var _platform = require("../../lib/platform");
 var _touch = require("../../lib/touch");
-var _accessibility = require("../../lib/accessibility");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _FocusVisible = require("../FocusVisible/FocusVisible");
-var _useTimeout = require("../../hooks/useTimeout");
-var _useExternRef = require("../../hooks/useExternRef");
-var _usePlatform = require("../../hooks/usePlatform");
-var _useFocusVisible2 = require("../../hooks/useFocusVisible");
-var _callMultiple = require("../../lib/callMultiple");
-var _useBooleanState2 = require("../../hooks/useBooleanState");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _useAdaptivityHasHover = require("../../hooks/useAdaptivityHasHover");
-var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
+var _Touch = require("../Touch/Touch");
+var _TouchContext = _interopRequireDefault(require("../Touch/TouchContext"));
 var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode", "onEnter", "onLeave", "className"];
 var sizeXClassNames = {
   none: "vkuiTappable--sizeX-none",

package/dist/cjs/components/Tappable/Tappable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tappable.js","names":["sizeXClassNames","none","compact","regular","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","mitt","TapState","pending","active","exiting","TappableContext","React","createContext","onHoverChange","noop","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","useTimeout","stopTimeout","useIsomorphicLayoutEffect","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","_onKeyDown","onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","TouchRootContext","platform","usePlatform","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeX","hasPointerContext","useAdaptivityHasPointer","hasHoverContext","useAdaptivityHasHover","clicks","setClicks","childHover","setChildHover","useBooleanState","_hovered","value","setHoveredTrue","setTrue","setHoveredFalse","setFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","useExternRef","childContext","useRef","current","e","shouldTriggerClickOnEnterOrSpace","preventDefault","click","needWaves","Platform","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","getOffsetRect","top","left","coordX","coordY","onMove","isSlide","onEnd","duration","activeDuration","classes","classNames","IOS","styles","handlers","callMultiple","role","undefined","map","wave"],"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport mitt from 'mitt';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { Platform } from '../../lib/platform';\nimport { getOffsetRect } from '../../lib/offset';\nimport { coordX, coordY } from '../../lib/touch';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n none: styles['Tappable--sizeX-none'],\n compact: styles['Tappable--sizeX-compact'],\n regular: styles['Tappable--sizeX-regular'],\n};\n\ntype StateMode = 'opacity' \| 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n React.AllHTMLAttributes<HTMLElement>,\n \| 'onTouchStart'\n \| 'onTouchMove'\n \| 'onTouchEnd'\n \| 'onTouchCancel'\n \| 'onMouseDown'\n \| 'onMouseMove'\n \| 'onMouseUp'\n \| 'onMouseLeave'\n> &\n AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n extends TappableElementProps,\n HasRootRef<HTMLElement>,\n HasComponent,\n Pick<TouchProps, 'onStart' \| 'onEnd' \| 'onMove'> {\n /*\n Длительность показа active-состояния\n /\n activeEffectDelay?: number;\n stopPropagation?: boolean;\n /\n Указывает, должен ли компонент реагировать на hover-состояние\n /\n hasHover?: boolean;\n /\n Указывает, должен ли компонент реагировать на active-состояние\n /\n hasActive?: boolean;\n /\n Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n /\n activeMode?: StateMode \| string;\n /\n Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n /\n hoverMode?: StateMode \| string;\n /\n Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n /\n focusVisibleMode?: FocusVisibleMode \| string;\n children?: React.ReactNode;\n onEnter?(outputEvent: MouseEvent): void;\n onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n x: number;\n y: number;\n id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode \| string): stateMode is StateMode {\n switch (stateMode) {\n case 'opacity':\n case 'background':\n return true;\n default:\n return false;\n }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n const id = React.useMemo(() => Math.round(Math.random() 1e8).toString(16), []);\n\n const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n TapState.none,\n );\n const _stop = () => setActivity(TapState.none);\n const start = () => hasActive && setActivity(TapState.active);\n const delayStart = () => {\n hasActive && setActivity(TapState.pending);\n };\n\n const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n const stopTimeout = useTimeout(_stop, stopDelay);\n\n useIsomorphicLayoutEffect(() => {\n if (activity === TapState.pending) {\n activeTimeout.set();\n return activeTimeout.clear;\n }\n if (activity === TapState.exiting) {\n return stopTimeout.clear;\n }\n if (activity === TapState.active) {\n activeBus.emit('active', id);\n }\n return noop;\n }, [activity]);\n\n useIsomorphicLayoutEffect(() => {\n if (activity === TapState.none) {\n return noop;\n }\n const onActiveChange = (activeId: string) => {\n activeId !== id && _stop();\n };\n activeBus.on('active', onActiveChange);\n return () => activeBus.off('active', onActiveChange);\n }, [activity === TapState.none]);\n\n useIsomorphicLayoutEffect(() => {\n !hasActive && _stop();\n }, [hasActive]);\n\n const stop = (delay?: number) => {\n if (delay) {\n setActivity(TapState.exiting);\n return stopTimeout.set(delay);\n }\n _stop();\n };\n\n return [activity, { delayStart, start, stop }] as const;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Tappable\n /\nexport const Tappable = ({\n children,\n Component,\n onClick,\n onKeyDown: _onKeyDown,\n activeEffectDelay = ACTIVE_EFFECT_DELAY,\n stopPropagation = false,\n getRootRef,\n hasHover: _hasHover = true,\n hoverMode = 'background',\n hasActive: _hasActive = true,\n activeMode = 'background',\n focusVisibleMode = 'inside',\n onEnter,\n onLeave,\n className,\n ...props\n}: TappableProps) => {\n Component = Component \|\| ((props.href ? 'a' : 'div') as React.ElementType);\n\n const { onHoverChange } = React.useContext(TappableContext);\n const insideTouchRoot = React.useContext(TouchRootContext);\n const platform = usePlatform();\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const { sizeX = 'none' } = useAdaptivity();\n const hasPointerContext = useAdaptivityHasPointer();\n const hasHoverContext = useAdaptivityHasHover();\n\n const [clicks, setClicks] = React.useState<Wave[]>([]);\n const [childHover, setChildHover] = React.useState(false);\n const {\n value: _hovered,\n setTrue: setHoveredTrue,\n setFalse: setHoveredFalse,\n } = useBooleanState(false);\n\n const hovered = _hovered && !props.disabled;\n const hasActive = _hasActive && !childHover && !props.disabled;\n const hasHover = hasHoverContext && _hasHover && !childHover;\n const isCustomElement =\n Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n const isPresetHoverMode = isPresetStateMode(hoverMode);\n const isPresetActiveMode = isPresetStateMode(activeMode);\n const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n const active = activity === TapState.active \|\| activity === TapState.exiting;\n\n const containerRef = useExternRef(getRootRef);\n\n // hover propagation\n const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n useIsomorphicLayoutEffect(() => {\n if (!hovered) {\n return noop;\n }\n onHoverChange(true);\n return () => onHoverChange(false);\n }, [hovered]);\n\n /\n * [a11y]\n * Обрабатывает событие onkeydown\n * для кастомных доступных элементов:\n * - role=\"link\" (активация по Enter)\n * - role=\"button\" (активация по Space и Enter)\n */\n function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n e.preventDefault();\n containerRef.current?.click();\n }\n }\n\n const needWaves =\n platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n function addClick(x: number, y: number) {\n const dateNow = Date.now();\n const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n setClicks([...filteredClicks, { x, y, id: dateNow }]);\n clearClicks.set();\n }\n\n function onStart({ originalEvent }: TouchEvent) {\n if (hasActive) {\n if (originalEvent.touches && originalEvent.touches.length > 1) {\n // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n return stop();\n }\n\n if (needWaves) {\n const { top, left } = getOffsetRect(containerRef.current);\n const x = coordX(originalEvent) - (left ?? 0);\n const y = coordY(originalEvent) - (top ?? 0);\n addClick(x, y);\n }\n\n delayStart();\n }\n }\n\n function onMove({ isSlide }: TouchEvent) {\n if (isSlide) {\n stop();\n }\n }\n\n function onEnd({ duration }: TouchEvent) {\n if (activity === TapState.none) {\n return;\n }\n if (activity === TapState.pending) {\n // активировать при коротком тапе\n start();\n }\n\n // отключить без задержки при длинном тапе\n const activeDuration = duration - ACTIVE_DELAY;\n stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n }\n\n const classes = classNames(\n className,\n styles['Tappable'],\n platform === Platform.IOS && styles['Tappable--ios'],\n sizeXClassNames[sizeX],\n hasHoverContext && styles['Tappable--hover-has'],\n hasActive && styles['Tappable--hasActive'],\n hasHover && hovered && !isPresetHoverMode && hoverMode,\n hasActive && active && !isPresetActiveMode && activeMode,\n focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n hasActive && active && styles['Tappable--active'],\n hasHover && hovered && isPresetHoverMode && styles[`Tappable--hover-${hoverMode}`],\n hasActive && active && isPresetActiveMode && styles[`Tappable--active-${activeMode}`],\n focusVisible && styles['Tappable--focus-visible'],\n );\n\n const handlers: RootComponentProps = {\n onStart: callMultiple(onStart, props.onStart),\n onMove: callMultiple(onMove, props.onMove),\n onEnd: callMultiple(onEnd, props.onEnd),\n onClick,\n onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n };\n const role = props.href ? 'link' : 'button';\n\n return (\n <Touch\n onEnter={callMultiple(setHoveredTrue, onEnter)}\n onLeave={callMultiple(setHoveredFalse, onLeave)}\n type={Component === 'button' ? 'button' : undefined}\n tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n role={isCustomElement ? role : undefined}\n aria-disabled={isCustomElement ? props.disabled : undefined}\n stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n {...props}\n slideThreshold={20}\n usePointerHover\n className={classes}\n Component={Component}\n getRootRef={containerRef}\n onBlur={callMultiple(onBlur, props.onBlur)}\n onFocus={callMultiple(onFocus, props.onFocus)}\n {...(props.disabled ? {} : handlers)}\n >\n <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n {needWaves && (\n <span aria-hidden className={styles.Tappable__waves}>\n {clicks.map((wave) => (\n <span\n key={wave.id}\n className={styles.Tappable__wave}\n style={{ top: wave.y, left: wave.x }}\n />\n ))}\n </span>\n )}\n {((hasHover && hoverMode === 'background') \|\| (hasActive && activeMode === 'background')) && (\n <span aria-hidden className={styles.Tappable__stateLayer} />\n )}\n {!props.disabled && isPresetFocusVisibleMode && (\n <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n )}\n </Touch>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Tappable.js","names":["sizeXClassNames","none","compact","regular","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","mitt","TapState","pending","active","exiting","TappableContext","React","createContext","onHoverChange","noop","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","useTimeout","stopTimeout","useIsomorphicLayoutEffect","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","_onKeyDown","onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","TouchRootContext","platform","usePlatform","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeX","hasPointerContext","useAdaptivityHasPointer","hasHoverContext","useAdaptivityHasHover","clicks","setClicks","childHover","setChildHover","useBooleanState","_hovered","value","setHoveredTrue","setTrue","setHoveredFalse","setFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","useExternRef","childContext","useRef","current","e","shouldTriggerClickOnEnterOrSpace","preventDefault","click","needWaves","Platform","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","getOffsetRect","top","left","coordX","coordY","onMove","isSlide","onEnd","duration","activeDuration","classes","classNames","IOS","styles","handlers","callMultiple","role","undefined","map","wave"],"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n none: styles['Tappable--sizeX-none'],\n compact: styles['Tappable--sizeX-compact'],\n regular: styles['Tappable--sizeX-regular'],\n};\n\ntype StateMode = 'opacity' \| 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n React.AllHTMLAttributes<HTMLElement>,\n \| 'onTouchStart'\n \| 'onTouchMove'\n \| 'onTouchEnd'\n \| 'onTouchCancel'\n \| 'onMouseDown'\n \| 'onMouseMove'\n \| 'onMouseUp'\n \| 'onMouseLeave'\n> &\n AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n extends TappableElementProps,\n HasRootRef<HTMLElement>,\n HasComponent,\n Pick<TouchProps, 'onStart' \| 'onEnd' \| 'onMove'> {\n /*\n Длительность показа active-состояния\n /\n activeEffectDelay?: number;\n stopPropagation?: boolean;\n /\n Указывает, должен ли компонент реагировать на hover-состояние\n /\n hasHover?: boolean;\n /\n Указывает, должен ли компонент реагировать на active-состояние\n /\n hasActive?: boolean;\n /\n Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n /\n activeMode?: StateMode \| string;\n /\n Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n /\n hoverMode?: StateMode \| string;\n /\n Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n /\n focusVisibleMode?: FocusVisibleMode \| string;\n children?: React.ReactNode;\n onEnter?(outputEvent: MouseEvent): void;\n onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n x: number;\n y: number;\n id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode \| string): stateMode is StateMode {\n switch (stateMode) {\n case 'opacity':\n case 'background':\n return true;\n default:\n return false;\n }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n const id = React.useMemo(() => Math.round(Math.random() 1e8).toString(16), []);\n\n const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n TapState.none,\n );\n const _stop = () => setActivity(TapState.none);\n const start = () => hasActive && setActivity(TapState.active);\n const delayStart = () => {\n hasActive && setActivity(TapState.pending);\n };\n\n const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n const stopTimeout = useTimeout(_stop, stopDelay);\n\n useIsomorphicLayoutEffect(() => {\n if (activity === TapState.pending) {\n activeTimeout.set();\n return activeTimeout.clear;\n }\n if (activity === TapState.exiting) {\n return stopTimeout.clear;\n }\n if (activity === TapState.active) {\n activeBus.emit('active', id);\n }\n return noop;\n }, [activity]);\n\n useIsomorphicLayoutEffect(() => {\n if (activity === TapState.none) {\n return noop;\n }\n const onActiveChange = (activeId: string) => {\n activeId !== id && _stop();\n };\n activeBus.on('active', onActiveChange);\n return () => activeBus.off('active', onActiveChange);\n }, [activity === TapState.none]);\n\n useIsomorphicLayoutEffect(() => {\n !hasActive && _stop();\n }, [hasActive]);\n\n const stop = (delay?: number) => {\n if (delay) {\n setActivity(TapState.exiting);\n return stopTimeout.set(delay);\n }\n _stop();\n };\n\n return [activity, { delayStart, start, stop }] as const;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Tappable\n /\nexport const Tappable = ({\n children,\n Component,\n onClick,\n onKeyDown: _onKeyDown,\n activeEffectDelay = ACTIVE_EFFECT_DELAY,\n stopPropagation = false,\n getRootRef,\n hasHover: _hasHover = true,\n hoverMode = 'background',\n hasActive: _hasActive = true,\n activeMode = 'background',\n focusVisibleMode = 'inside',\n onEnter,\n onLeave,\n className,\n ...props\n}: TappableProps) => {\n Component = Component \|\| ((props.href ? 'a' : 'div') as React.ElementType);\n\n const { onHoverChange } = React.useContext(TappableContext);\n const insideTouchRoot = React.useContext(TouchRootContext);\n const platform = usePlatform();\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const { sizeX = 'none' } = useAdaptivity();\n const hasPointerContext = useAdaptivityHasPointer();\n const hasHoverContext = useAdaptivityHasHover();\n\n const [clicks, setClicks] = React.useState<Wave[]>([]);\n const [childHover, setChildHover] = React.useState(false);\n const {\n value: _hovered,\n setTrue: setHoveredTrue,\n setFalse: setHoveredFalse,\n } = useBooleanState(false);\n\n const hovered = _hovered && !props.disabled;\n const hasActive = _hasActive && !childHover && !props.disabled;\n const hasHover = hasHoverContext && _hasHover && !childHover;\n const isCustomElement =\n Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n const isPresetHoverMode = isPresetStateMode(hoverMode);\n const isPresetActiveMode = isPresetStateMode(activeMode);\n const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n const active = activity === TapState.active \|\| activity === TapState.exiting;\n\n const containerRef = useExternRef(getRootRef);\n\n // hover propagation\n const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n useIsomorphicLayoutEffect(() => {\n if (!hovered) {\n return noop;\n }\n onHoverChange(true);\n return () => onHoverChange(false);\n }, [hovered]);\n\n /\n * [a11y]\n * Обрабатывает событие onkeydown\n * для кастомных доступных элементов:\n * - role=\"link\" (активация по Enter)\n * - role=\"button\" (активация по Space и Enter)\n */\n function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n e.preventDefault();\n containerRef.current?.click();\n }\n }\n\n const needWaves =\n platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n function addClick(x: number, y: number) {\n const dateNow = Date.now();\n const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n setClicks([...filteredClicks, { x, y, id: dateNow }]);\n clearClicks.set();\n }\n\n function onStart({ originalEvent }: TouchEvent) {\n if (hasActive) {\n if (originalEvent.touches && originalEvent.touches.length > 1) {\n // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n return stop();\n }\n\n if (needWaves) {\n const { top, left } = getOffsetRect(containerRef.current);\n const x = coordX(originalEvent) - (left ?? 0);\n const y = coordY(originalEvent) - (top ?? 0);\n addClick(x, y);\n }\n\n delayStart();\n }\n }\n\n function onMove({ isSlide }: TouchEvent) {\n if (isSlide) {\n stop();\n }\n }\n\n function onEnd({ duration }: TouchEvent) {\n if (activity === TapState.none) {\n return;\n }\n if (activity === TapState.pending) {\n // активировать при коротком тапе\n start();\n }\n\n // отключить без задержки при длинном тапе\n const activeDuration = duration - ACTIVE_DELAY;\n stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n }\n\n const classes = classNames(\n className,\n styles['Tappable'],\n platform === Platform.IOS && styles['Tappable--ios'],\n sizeXClassNames[sizeX],\n hasHoverContext && styles['Tappable--hover-has'],\n hasActive && styles['Tappable--hasActive'],\n hasHover && hovered && !isPresetHoverMode && hoverMode,\n hasActive && active && !isPresetActiveMode && activeMode,\n focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n hasActive && active && styles['Tappable--active'],\n hasHover && hovered && isPresetHoverMode && styles[`Tappable--hover-${hoverMode}`],\n hasActive && active && isPresetActiveMode && styles[`Tappable--active-${activeMode}`],\n focusVisible && styles['Tappable--focus-visible'],\n );\n\n const handlers: RootComponentProps = {\n onStart: callMultiple(onStart, props.onStart),\n onMove: callMultiple(onMove, props.onMove),\n onEnd: callMultiple(onEnd, props.onEnd),\n onClick,\n onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n };\n const role = props.href ? 'link' : 'button';\n\n return (\n <Touch\n onEnter={callMultiple(setHoveredTrue, onEnter)}\n onLeave={callMultiple(setHoveredFalse, onLeave)}\n type={Component === 'button' ? 'button' : undefined}\n tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n role={isCustomElement ? role : undefined}\n aria-disabled={isCustomElement ? props.disabled : undefined}\n stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n {...props}\n slideThreshold={20}\n usePointerHover\n className={classes}\n Component={Component}\n getRootRef={containerRef}\n onBlur={callMultiple(onBlur, props.onBlur)}\n onFocus={callMultiple(onFocus, props.onFocus)}\n {...(props.disabled ? {} : handlers)}\n >\n <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n {needWaves && (\n <span aria-hidden className={styles.Tappable__waves}>\n {clicks.map((wave) => (\n <span\n key={wave.id}\n className={styles.Tappable__wave}\n style={{ top: wave.y, left: wave.x }}\n />\n ))}\n </span>\n )}\n {((hasHover && hoverMode === 'background') \|\| (hasActive && activeMode === 'background')) && (\n <span aria-hidden className={styles.Tappable__stateLayer} />\n )}\n {!props.disabled && isPresetFocusVisibleMode && (\n <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n )}\n </Touch>\n );\n};\n"],"mappings":"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"}

package/dist/cjs/components/TextTooltip/TextTooltip.js CHANGED Viewed

@@ -9,9 +9,9 @@ exports.TextTooltip = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
 var _HoverPopper = require("../HoverPopper/HoverPopper");
 var _Subhead = require("../Typography/Subhead/Subhead");
-var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["children", "text", "header", "appearance", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip

package/dist/cjs/components/TextTooltip/TextTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextTooltip.js","names":["TextTooltip","children","text","header","appearance","className","popperProps","classNames","styles","hasReactNode"],"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~HoverPopper~~, ~~HoverPopperProps~~ } from '~~../HoverPopper~~/~~HoverPopper~~';\nimport { ~~Subhead~~ } from '../~~Typography~~/~~Subhead/Subhead~~';\nimport { ~~classNames,~~ ~~hasReactNode~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport styles from './TextTooltip.module.css';\n\nexport interface TextTooltipProps\n extends Omit<HoverPopperProps, 'arrow' \| 'arrowClassName' \| 'content'> {\n /*\n Текст тултипа\n /\n text?: React.ReactNode;\n /\n Заголовок тултипа\n /\n header?: React.ReactNode;\n /\n Стиль отображения подсказки\n /\n appearance?: 'accent' \| 'neutral' \| 'white' \| 'black' \| 'inversion';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n children,\n text,\n header,\n appearance = 'neutral',\n className,\n ...popperProps\n}: TextTooltipProps) => {\n return (\n <HoverPopper\n className={classNames(\n styles['TextTooltip'],\n styles[`TextTooltip--appearance-${appearance}`],\n className,\n )}\n arrow\n arrowClassName={styles['TextTooltip__arrow']}\n content={\n <React.Fragment>\n {hasReactNode(header) && (\n <Subhead weight=\"2\" className={styles['TextTooltip__header']}>\n {header}\n </Subhead>\n )}\n {hasReactNode(text) && <Subhead className={styles['TextTooltip__text']}>{text}</Subhead>}\n </React.Fragment>\n }\n {...popperProps}\n >\n {children}\n </HoverPopper>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;~~AAA2D~~;~~AAmB3D~~;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IAAA,uBACNC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,wBAAW;IACV,SAAS,EAAE,IAAAC,gBAAU,qBAEnBC,MAAM,mCAA4BJ,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK;IACL,cAAc,0BAA+B;IAC7C,OAAO,eACL,oBAAC,KAAK,CAAC,QAAQ,QACZ,IAAAI,kBAAY,EAACN,MAAM,CAAC,iBACnB,oBAAC,gBAAO;MAAC,MAAM,EAAC,GAAG;MAAC,SAAS;IAAgC,GAC1DA,MAAM,CAEV,EACA,IAAAM,kBAAY,EAACP,IAAI,CAAC,iBAAI,oBAAC,gBAAO;MAAC,SAAS;IAA8B,GAAEA,IAAI,CAAW;EAE3F,GACGI,WAAW,GAEdL,QAAQ,CACG;AAElB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"TextTooltip.js","names":["TextTooltip","children","text","header","appearance","className","popperProps","classNames","styles","hasReactNode"],"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TextTooltip.module.css';\n\nexport interface TextTooltipProps\n extends Omit<HoverPopperProps, 'arrow' \| 'arrowClassName' \| 'content'> {\n /*\n Текст тултипа\n /\n text?: React.ReactNode;\n /\n Заголовок тултипа\n /\n header?: React.ReactNode;\n /\n Стиль отображения подсказки\n /\n appearance?: 'accent' \| 'neutral' \| 'white' \| 'black' \| 'inversion';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n children,\n text,\n header,\n appearance = 'neutral',\n className,\n ...popperProps\n}: TextTooltipProps) => {\n return (\n <HoverPopper\n className={classNames(\n styles['TextTooltip'],\n styles[`TextTooltip--appearance-${appearance}`],\n className,\n )}\n arrow\n arrowClassName={styles['TextTooltip__arrow']}\n content={\n <React.Fragment>\n {hasReactNode(header) && (\n <Subhead weight=\"2\" className={styles['TextTooltip__header']}>\n {header}\n </Subhead>\n )}\n {hasReactNode(text) && <Subhead className={styles['TextTooltip__text']}>{text}</Subhead>}\n </React.Fragment>\n }\n {...popperProps}\n >\n {children}\n </HoverPopper>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAAwD;AAmBxD;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IAAA,uBACNC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,wBAAW;IACV,SAAS,EAAE,IAAAC,gBAAU,qBAEnBC,MAAM,mCAA4BJ,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK;IACL,cAAc,0BAA+B;IAC7C,OAAO,eACL,oBAAC,KAAK,CAAC,QAAQ,QACZ,IAAAI,kBAAY,EAACN,MAAM,CAAC,iBACnB,oBAAC,gBAAO;MAAC,MAAM,EAAC,GAAG;MAAC,SAAS;IAAgC,GAC1DA,MAAM,CAEV,EACA,IAAAM,kBAAY,EAACP,IAAI,CAAC,iBAAI,oBAAC,gBAAO;MAAC,SAAS;IAA8B,GAAEA,IAAI,CAAW;EAE3F,GACGI,WAAW,GAEdL,QAAQ,CACG;AAElB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/Textarea/Textarea.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FormFieldProps } from '../FormField/FormField';
 import { HasRef, HasRootRef } from '../../types';
+import { FormFieldProps } from '../FormField/FormField';
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, Pick<React.CSSProperties, 'maxHeight'>, Pick<FormFieldProps, 'status'> {
     grow?: boolean;
     onResize?(el: HTMLTextAreaElement): void;

package/dist/cjs/components/Textarea/Textarea.js CHANGED Viewed

@@ -9,14 +9,18 @@ exports.Textarea = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _FormField = require("../FormField/FormField");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _useEnsuredControl3 = require("../../hooks/useEnsuredControl");
 var _useExternRef = require("../../hooks/useExternRef");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
+var _adaptivity = require("../../lib/adaptivity");
+var _FormField = require("../FormField/FormField");
 var _excluded = ["defaultValue", "grow", "style", "onResize", "className", "getRootRef", "getRef", "rows", "maxHeight", "status", "onChange", "value"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiTextarea--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiTextarea--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */
@@ -48,7 +52,8 @@ var Textarea = function Textarea(_ref) {
   var currentScrollHeight = React.useRef();
   var elementRef = (0, _useExternRef.useExternRef)(getRef);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   // autosize input
   React.useEffect(function () {
@@ -63,7 +68,7 @@ var Textarea = function Textarea(_ref) {
     }
   }, [grow, value, sizeY, elementRef, onResize]);
   return /*#__PURE__*/React.createElement(_FormField.FormField, {
-    className: (0, _vkjs.classNames)("vkuiTextarea", (0, _getSizeYClassName.getSizeYClassName)("vkuiTextarea", sizeY), className),
+    className: (0, _vkjs.classNames)("vkuiTextarea", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], className),
     style: style,
     getRootRef: getRootRef,
     disabled: restProps.disabled,

package/dist/cjs/components/Textarea/Textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.js","names":["Textarea","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChangeProp","onChange","valueProp","value","restProps","useEnsuredControl","currentScrollHeight","React","useRef","elementRef","useExternRef","useAdaptivity","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","classNames","~~getSizeYClassName~~","disabled"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~FormField,~~ ~~FormFieldProps~~ } from '~~../FormField~~/~~FormField~~';\nimport { ~~HasRef,~~ ~~HasRootRef~~ } from '../../~~types~~';\nimport { ~~useEnsuredControl~~ } from '../../hooks/~~useEnsuredControl~~';\nimport { ~~useExternRef~~ } from '../../~~hooks~~/~~useExternRef~~';\nimport { ~~useAdaptivity~~ } from '../../~~hooks/useAdaptivity~~';\nimport { ~~getSizeYClassName~~ } from '~~../../helpers~~/~~getSizeYClassName~~';\nimport styles from './Textarea.module.css';\n\nexport interface TextareaProps\n extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n HasRef<HTMLTextAreaElement>,\n HasRootRef<HTMLElement>,\n Pick<React.CSSProperties, 'maxHeight'>,\n Pick<FormFieldProps, 'status'> {\n grow?: boolean;\n onResize?(el: HTMLTextAreaElement): void;\n defaultValue?: string;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n defaultValue = '',\n grow = true,\n style,\n onResize,\n className,\n getRootRef,\n getRef,\n rows = 2,\n maxHeight,\n status,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: TextareaProps) => {\n const [value, onChange] = useEnsuredControl({\n defaultValue,\n onChange: onChangeProp,\n value: valueProp,\n });\n const currentScrollHeight = React.useRef<number>();\n const elementRef = useExternRef(getRef);\n const { sizeY } = useAdaptivity();\n\n // autosize input\n React.useEffect(() => {\n const el = elementRef.current;\n\n if (grow && el?.offsetParent) {\n el.style.height = '';\n el.style.height = `${el.scrollHeight}px`;\n\n if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n onResize(el);\n currentScrollHeight.current = el.scrollHeight;\n }\n }\n }, [grow, value, sizeY, elementRef, onResize]);\n\n return (\n <FormField\n className={classNames(\n styles['Textarea'],\n ~~getSizeYClassName(styles~~[~~'Textarea'~~]~~, sizeY)~~,\n className,\n )}\n style={style}\n getRootRef={getRootRef}\n disabled={restProps.disabled}\n status={status}\n >\n <textarea\n {...restProps}\n style={{ maxHeight }}\n rows={rows}\n className={styles['Textarea__el']}\n value={value}\n onChange={onChange}\n ref={elementRef}\n />\n </FormField>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;~~AAAA;AACA;AACA;~~AAEA;~~AACA;AACA;AACA;~~AAAoE~~;~~AAcpE~~;AACA;AACA;AACO,~~IAAMA~~,QAAQ,GAAG,SAAXA,QAAQ,OAcA;EAAA,6BAbnBC,YAAY;IAAZA,YAAY,kCAAG,EAAE;IAAA,iBACjBC,IAAI;IAAJA,IAAI,0BAAG,IAAI;IACXC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACRC,SAAS,QAATA,SAAS;IACTC,MAAM,QAANA,MAAM;IACIC,YAAY,QAAtBC,QAAQ;IACDC,SAAS,QAAhBC,KAAK;IACFC,SAAS;EAEZ,yBAA0B,IAAAC,qCAAiB,EAAC;MAC1Cf,YAAY,EAAZA,YAAY;MACZW,QAAQ,EAAED,YAAY;MACtBG,KAAK,EAAED;IACT,CAAC,CAAC;IAAA;IAJKC,KAAK;IAAEF,QAAQ;EAKtB,IAAMK,mBAAmB,GAAGC,KAAK,CAACC,MAAM,EAAU;EAClD,IAAMC,UAAU,GAAG,IAAAC,0BAAY,EAACd,MAAM,CAAC;EACvC,~~qBAAkB~~,IAAAe,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;;~~EAEb~~;EACAL,KAAK,CAACM,SAAS,CAAC,YAAM;IACpB,IAAMC,EAAE,GAAGL,UAAU,CAACM,OAAO;IAE7B,IAAIxB,IAAI,IAAIuB,EAAE,aAAFA,EAAE,eAAFA,EAAE,CAAEE,YAAY,EAAE;MAC5BF,EAAE,CAACtB,KAAK,CAACyB,MAAM,GAAG,EAAE;MACpBH,EAAE,CAACtB,KAAK,CAACyB,MAAM,aAAMH,EAAE,CAACI,YAAY,OAAI;MAExC,IAAIJ,EAAE,CAACI,YAAY,KAAKZ,mBAAmB,CAACS,OAAO,IAAItB,QAAQ,EAAE;QAC/DA,QAAQ,CAACqB,EAAE,CAAC;QACZR,mBAAmB,CAACS,OAAO,GAAGD,EAAE,CAACI,YAAY;MAC/C;IACF;EACF,CAAC,EAAE,CAAC3B,IAAI,EAAEY,KAAK,EAAES,KAAK,EAAEH,UAAU,EAAEhB,QAAQ,CAAC,CAAC;EAE9C,oBACE,oBAAC,oBAAS;IACR,SAAS,EAAE,IAAA0B,gBAAU,~~kBAEnB~~,~~IAAAC~~,~~oCAAiB~~,~~kBAAqBR~~,KAAK,CAAC,~~EAC5ClB~~,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,UAAU,EAAEG,UAAW;IACvB,QAAQ,EAAES,SAAS,CAACiB,QAAS;IAC7B,MAAM,EAAEtB;EAAO,gBAEf,2DACMK,SAAS;IACb,KAAK,EAAE;MAAEN,SAAS,EAATA;IAAU,CAAE;IACrB,IAAI,EAAED,IAAK;IACX,SAAS,oBAAyB;IAClC,KAAK,EAAEM,KAAM;IACb,QAAQ,EAAEF,QAAS;IACnB,GAAG,EAAEQ;EAAW,GAChB,CACQ;AAEhB,CAAC;AAAC"}
1	+ {"version":3,"file":"Textarea.js","names":["sizeYClassNames","none","SizeType","COMPACT","Textarea","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChangeProp","onChange","valueProp","value","restProps","useEnsuredControl","currentScrollHeight","React","useRef","elementRef","useExternRef","useAdaptivity","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","classNames","REGULAR","disabled"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n none: styles['Textarea--sizeY-none'],\n [SizeType.COMPACT]: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n HasRef<HTMLTextAreaElement>,\n HasRootRef<HTMLElement>,\n Pick<React.CSSProperties, 'maxHeight'>,\n Pick<FormFieldProps, 'status'> {\n grow?: boolean;\n onResize?(el: HTMLTextAreaElement): void;\n defaultValue?: string;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n defaultValue = '',\n grow = true,\n style,\n onResize,\n className,\n getRootRef,\n getRef,\n rows = 2,\n maxHeight,\n status,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: TextareaProps) => {\n const [value, onChange] = useEnsuredControl({\n defaultValue,\n onChange: onChangeProp,\n value: valueProp,\n });\n const currentScrollHeight = React.useRef<number>();\n const elementRef = useExternRef(getRef);\n const { sizeY = 'none' } = useAdaptivity();\n\n // autosize input\n React.useEffect(() => {\n const el = elementRef.current;\n\n if (grow && el?.offsetParent) {\n el.style.height = '';\n el.style.height = `${el.scrollHeight}px`;\n\n if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n onResize(el);\n currentScrollHeight.current = el.scrollHeight;\n }\n }\n }, [grow, value, sizeY, elementRef, onResize]);\n\n return (\n <FormField\n className={classNames(\n styles['Textarea'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n getRootRef={getRootRef}\n disabled={restProps.disabled}\n status={status}\n >\n <textarea\n {...restProps}\n style={{ maxHeight }}\n rows={rows}\n className={styles['Textarea__el']}\n value={value}\n onChange={onChange}\n ref={elementRef}\n />\n </FormField>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAmE;AAGnE,IAAMA,eAAe;EACnBC,IAAI;AAAgC,GACnCC,oBAAQ,CAACC,OAAO,gCAClB;AAaD;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAcA;EAAA,6BAbnBC,YAAY;IAAZA,YAAY,kCAAG,EAAE;IAAA,iBACjBC,IAAI;IAAJA,IAAI,0BAAG,IAAI;IACXC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACRC,SAAS,QAATA,SAAS;IACTC,MAAM,QAANA,MAAM;IACIC,YAAY,QAAtBC,QAAQ;IACDC,SAAS,QAAhBC,KAAK;IACFC,SAAS;EAEZ,yBAA0B,IAAAC,qCAAiB,EAAC;MAC1Cf,YAAY,EAAZA,YAAY;MACZW,QAAQ,EAAED,YAAY;MACtBG,KAAK,EAAED;IACT,CAAC,CAAC;IAAA;IAJKC,KAAK;IAAEF,QAAQ;EAKtB,IAAMK,mBAAmB,GAAGC,KAAK,CAACC,MAAM,EAAU;EAClD,IAAMC,UAAU,GAAG,IAAAC,0BAAY,EAACd,MAAM,CAAC;EACvC,qBAA2B,IAAAe,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;;EAEtB;EACAL,KAAK,CAACM,SAAS,CAAC,YAAM;IACpB,IAAMC,EAAE,GAAGL,UAAU,CAACM,OAAO;IAE7B,IAAIxB,IAAI,IAAIuB,EAAE,aAAFA,EAAE,eAAFA,EAAE,CAAEE,YAAY,EAAE;MAC5BF,EAAE,CAACtB,KAAK,CAACyB,MAAM,GAAG,EAAE;MACpBH,EAAE,CAACtB,KAAK,CAACyB,MAAM,aAAMH,EAAE,CAACI,YAAY,OAAI;MAExC,IAAIJ,EAAE,CAACI,YAAY,KAAKZ,mBAAmB,CAACS,OAAO,IAAItB,QAAQ,EAAE;QAC/DA,QAAQ,CAACqB,EAAE,CAAC;QACZR,mBAAmB,CAACS,OAAO,GAAGD,EAAE,CAACI,YAAY;MAC/C;IACF;EACF,CAAC,EAAE,CAAC3B,IAAI,EAAEY,KAAK,EAAES,KAAK,EAAEH,UAAU,EAAEhB,QAAQ,CAAC,CAAC;EAE9C,oBACE,oBAAC,oBAAS;IACR,SAAS,EAAE,IAAA0B,gBAAU,kBAEnBP,KAAK,KAAKzB,oBAAQ,CAACiC,OAAO,IAAInC,eAAe,CAAC2B,KAAK,CAAC,EACpDlB,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,UAAU,EAAEG,UAAW;IACvB,QAAQ,EAAES,SAAS,CAACiB,QAAS;IAC7B,MAAM,EAAEtB;EAAO,gBAEf,2DACMK,SAAS;IACb,KAAK,EAAE;MAAEN,SAAS,EAATA;IAAU,CAAE;IACrB,IAAI,EAAED,IAAK;IACX,SAAS,oBAAyB;IAClC,KAAK,EAAEM,KAAM;IACb,QAAQ,EAAEF,QAAS;IACnB,GAAG,EAAEQ;EAAW,GAChB,CACQ;AAEhB,CAAC;AAAC"}

package/dist/cjs/components/Tooltip/Tooltip.d.ts CHANGED Viewed

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