npm - @vkontakte/vkui - Versions diffs - 7.2.1 → 7.3.0 - Mend

@vkontakte/vkui 7.2.1 → 7.3.0

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 (1626) hide show

package/dist/cssm/components/Clickable/Clickable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n extends RootComponentProps<T>,\n FocusVisibleModeProps,\n StateProps {}\n\n/*\n Некликабельный компонент. Отключаем возможность нажимать на компонент.\n /\nconst NonClickable = <T,>({\n href,\n onClick,\n onClickCapture,\n activeClassName,\n hoverClassName,\n hasActive,\n hasHover,\n hovered,\n unlockParentHover,\n activated,\n activeEffectDelay,\n focusVisibleMode,\n ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/\n Проверяем, является ли компонент ~~кликабельным\~~n /\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n return (\n (props.href !== undefined \|\|\n props.onClick !== undefined \|\|\n props.onClickCapture !== undefined \|\|\n props.Component === 'a' \|\|\n props.Component === 'button' \|\|\n props.Component === 'label' \|\|\n props.Component === 'input') &&\n !props.disabled\n );\n}\n\n/\n Определяет правильный компонент и его ~~свойства\~~n \n - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n /\nfunction component<T>({\n Component,\n onClick,\n onClickCapture,\n href,\n disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n if (Component !== undefined) {\n return { Component, disabled };\n } else if (href !== undefined) {\n return {\n Component: 'a',\n\n /\n Если ссылка отключена, добавляем атрибуты для доступности.\n \n - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`\n * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role=\"link\"`\n \n https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria\n /\n ...(disabled && {\n 'aria-disabled': true,\n 'role': 'link',\n }),\n };\n } else if (onClick !== undefined \|\| onClickCapture !== undefined) {\n return {\n Component: 'div',\n role: 'button',\n ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),\n };\n }\n\n return {};\n}\n\n/\n Базовый кликабельный корневой компонент.\n \n - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n \n Отвечает за:\n \n - стейты наведения и нажатия\n * - a11y ~~компонентов\~~n */\nexport const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {\n const commonProps = component(props);\n const isClickable = checkClickable(props);\n const Component = isClickable ? RealClickable : NonClickable;\n\n const {\n baseClassName,\n disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n ...restProps\n } = props;\n\n return (\n <Component\n baseClassName={classNames(baseClassName, styles.host)}\n {...commonProps}\n {...restProps}\n />\n );\n};\n"],"names":["React","classNames","RootComponent","RealClickable","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","restProps","checkClickable","props","undefined","Component","disabled","component","role","tabIndex","Clickable","commonProps","isClickable","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,OAAOC,YAAY,yBAAyB;AAO5C;;CAEC,GACD,MAAMC,eAAe,CAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjBC,gBAAgB,EAChB,GAAGC,WACe,iBAAK,KAAChB;QAAe,GAAGgB,SAAS;;AAErD;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMd,IAAI,KAAKe,aACdD,MAAMb,OAAO,KAAKc,aAClBD,MAAMZ,cAAc,KAAKa,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTf,OAAO,EACPC,cAAc,EACdF,IAAI,EACJiB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;YAAWC;QAAS;IAC/B,OAAO,IAAIjB,SAASe,WAAW;QAC7B,OAAO;YACLC,WAAW;YAEX~~;;;;;;;OAOC~~,GACD,GAAIC,YAAY;gBACd,iBAAiB;gBACjB,QAAQ;YACV,CAAC;QACH;IACF,OAAO,IAAIhB,YAAYc,aAAab,mBAAmBa,WAAW;QAChE,OAAO;YACLC,WAAW;YACXG,MAAM;YACN,GAAIF,WAAW;gBAAE,iBAAiB;YAAK,IAAI;gBAAEG,UAAU;YAAE,CAAC;QAC5D;IACF;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAKP;IAC5B,MAAMQ,cAAcJ,UAAUJ;IAC9B,MAAMS,cAAcV,eAAeC;IACnC,MAAME,YAAYO,cAAc1B,gBAAgBE;IAEhD,MAAM,EACJyB,aAAa,EACbP,QAAQ,EACR,GAAGL,WACJ,GAAGE;IAEJ,qBACE,KAACE;QACCQ,eAAe7B,WAAW6B,eAAe1B,OAAO2B,IAAI;QACnD,GAAGH,WAAW;QACd,GAAGV,SAAS;;AAGnB,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n extends RootComponentProps<T>,\n FocusVisibleModeProps,\n StateProps {}\n\n/*\n Некликабельный компонент. Отключаем возможность нажимать на компонент.\n /\nconst NonClickable = <T,>({\n href,\n onClick,\n onClickCapture,\n activeClassName,\n hoverClassName,\n hasActive,\n hasHover,\n hovered,\n unlockParentHover,\n activated,\n activeEffectDelay,\n focusVisibleMode,\n ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/\n Проверяем, является ли компонент кликабельным.\n /\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n return (\n (props.href !== undefined \|\|\n props.onClick !== undefined \|\|\n props.onClickCapture !== undefined \|\|\n props.Component === 'a' \|\|\n props.Component === 'button' \|\|\n props.Component === 'label' \|\|\n props.Component === 'input') &&\n !props.disabled\n );\n}\n\n/\n Определяет правильный компонент и его свойства.\n \n - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n /\nfunction component<T>({\n Component,\n onClick,\n onClickCapture,\n href,\n disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n if (Component !== undefined) {\n return { Component, disabled };\n } else if (href !== undefined) {\n return {\n Component: 'a',\n\n /\n Если ссылка отключена, добавляем атрибуты для доступности.\n \n - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`\n * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role=\"link\"`.\n \n @see см. https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria.\n \n /\n ...(disabled && {\n 'aria-disabled': true,\n 'role': 'link',\n }),\n };\n } else if (onClick !== undefined \|\| onClickCapture !== undefined) {\n return {\n Component: 'div',\n role: 'button',\n ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),\n };\n }\n\n return {};\n}\n\n/*\n Базовый кликабельный корневой компонент.\n \n - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n \n Отвечает за:\n \n - стейты наведения и нажатия\n * - a11y компонентов.\n */\nexport const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {\n const commonProps = component(props);\n const isClickable = checkClickable(props);\n const Component = isClickable ? RealClickable : NonClickable;\n\n const {\n baseClassName,\n disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n ...restProps\n } = props;\n\n return (\n <Component\n baseClassName={classNames(baseClassName, styles.host)}\n {...commonProps}\n {...restProps}\n />\n );\n};\n"],"names":["React","classNames","RootComponent","RealClickable","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","restProps","checkClickable","props","undefined","Component","disabled","component","role","tabIndex","Clickable","commonProps","isClickable","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,OAAOC,YAAY,yBAAyB;AAO5C;;CAEC,GACD,MAAMC,eAAe,CAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjBC,gBAAgB,EAChB,GAAGC,WACe,iBAAK,KAAChB;QAAe,GAAGgB,SAAS;;AAErD;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMd,IAAI,KAAKe,aACdD,MAAMb,OAAO,KAAKc,aAClBD,MAAMZ,cAAc,KAAKa,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTf,OAAO,EACPC,cAAc,EACdF,IAAI,EACJiB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;YAAWC;QAAS;IAC/B,OAAO,IAAIjB,SAASe,WAAW;QAC7B,OAAO;YACLC,WAAW;YAEX;;;;;;;;OAQC,GACD,GAAIC,YAAY;gBACd,iBAAiB;gBACjB,QAAQ;YACV,CAAC;QACH;IACF,OAAO,IAAIhB,YAAYc,aAAab,mBAAmBa,WAAW;QAChE,OAAO;YACLC,WAAW;YACXG,MAAM;YACN,GAAIF,WAAW;gBAAE,iBAAiB;YAAK,IAAI;gBAAEG,UAAU;YAAE,CAAC;QAC5D;IACF;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAKP;IAC5B,MAAMQ,cAAcJ,UAAUJ;IAC9B,MAAMS,cAAcV,eAAeC;IACnC,MAAME,YAAYO,cAAc1B,gBAAgBE;IAEhD,MAAM,EACJyB,aAAa,EACbP,QAAQ,EACR,GAAGL,WACJ,GAAGE;IAEJ,qBACE,KAACE;QACCQ,eAAe7B,WAAW6B,eAAe1B,OAAO2B,IAAI;QACnD,GAAGH,WAAW;QACd,GAAGV,SAAS;;AAGnB,EAAE"}

package/dist/cssm/components/Clickable/RealClickable.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
 import { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from "./useState.js";
 import styles from "./Clickable.module.css";
 /**
- * Кликабельный компонент. Добавляем кучу обвесов
+ * Кликабельный компонент. Добавляем кучу обвесов.
  */ export const RealClickable = ({ baseClassName, children, focusVisibleMode = 'inside', activeClassName, hoverClassName, activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY, hasHover = true, hasActive = true, hovered, activated, hasHoverWithChildren, unlockParentHover, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown, ...restProps })=>{
     const { focusVisible, ...focusEvents } = useFocusVisible();
     const focusVisibleClassNames = useFocusVisibleClassName({

package/dist/cssm/components/Clickable/RealClickable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Clickable/RealClickable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { type ClickableProps } from './Clickable';\nimport { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from './useState';\nimport styles from './Clickable.module.css';\n\n/*\n Кликабельный компонент. Добавляем кучу ~~обвесов\~~n */\nexport const RealClickable = <T,>({\n baseClassName,\n children,\n focusVisibleMode = 'inside',\n activeClassName,\n hoverClassName,\n activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n hasHover = true,\n hasActive = true,\n hovered,\n activated,\n hasHoverWithChildren,\n unlockParentHover,\n onPointerEnter,\n onPointerLeave,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onBlur,\n onFocus,\n onKeyDown,\n ...restProps\n}: ClickableProps<T>) => {\n const { focusVisible, ...focusEvents } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n const {\n stateClassName,\n setLockHoverBubblingImmediate,\n setLockActiveBubblingImmediate,\n ...stateEvents\n } = useState({\n activeClassName,\n hoverClassName,\n activeEffectDelay,\n hasHover,\n hasActive,\n hovered,\n activated,\n unlockParentHover,\n });\n\n const handlers = mergeCalls(\n focusEvents,\n stateEvents,\n { onKeyDown: clickByKeyboardHandler },\n {\n onPointerEnter,\n onPointerLeave,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onBlur,\n onFocus,\n onKeyDown,\n },\n );\n\n const lockStateContextValue = React.useMemo(\n () => ({\n lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,\n lockActiveStateBubbling: setLockActiveBubblingImmediate,\n }),\n [setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, hasHoverWithChildren],\n );\n\n return (\n <RootComponent\n baseClassName={classNames(\n baseClassName,\n styles.realClickable,\n focusVisibleClassNames,\n stateClassName,\n )}\n {...handlers}\n {...restProps}\n >\n <ClickableLockStateContext.Provider value={lockStateContextValue}>\n {children}\n </ClickableLockStateContext.Provider>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","noop","useFocusVisible","useFocusVisibleClassName","mergeCalls","clickByKeyboardHandler","RootComponent","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","styles","RealClickable","baseClassName","children","focusVisibleMode","activeClassName","hoverClassName","activeEffectDelay","hasHover","hasActive","hovered","activated","hasHoverWithChildren","unlockParentHover","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockHoverBubblingImmediate","setLockActiveBubblingImmediate","stateEvents","handlers","lockStateContextValue","useMemo","lockHoverStateBubbling","lockActiveStateBubbling","realClickable","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,yBAAyB,EAAEC,2BAA2B,EAAEC,QAAQ,QAAQ,gBAAa;AAC9F,OAAOC,YAAY,yBAAyB;AAE5C;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,aAAa,EACbC,QAAQ,EACRC,mBAAmB,QAAQ,EAC3BC,eAAe,EACfC,cAAc,EACdC,oBAAoBT,2BAA2B,EAC/CU,WAAW,IAAI,EACfC,YAAY,IAAI,EAChBC,OAAO,EACPC,SAAS,EACTC,oBAAoB,EACpBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACdC,aAAa,EACbC,eAAe,EACfC,WAAW,EACXC,MAAM,EACNC,OAAO,EACPC,SAAS,EACT,GAAGC,WACe;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGC,aAAa,GAAGhC;IACzC,MAAMiC,yBAAyBhC,yBAAyB;QAAE8B;QAAcG,MAAMtB;IAAiB;IAE/F,MAAM,EACJuB,cAAc,EACdC,6BAA6B,EAC7BC,8BAA8B,EAC9B,GAAGC,aACJ,GAAG/B,SAAS;QACXM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;IACF;IAEA,MAAMkB,WAAWrC,WACf8B,aACAM,aACA;QAAET,WAAW1B;IAAuB,GACpC;QACEmB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAGF,MAAMW,wBAAwB3C,MAAM4C,OAAO,CACzC,IAAO,CAAA;YACLC,wBAAwBtB,uBAAuBrB,OAAOqC;YACtDO,yBAAyBN;QAC3B,CAAA,GACA;QAACD;QAA+BC;QAAgCjB;KAAqB;IAGvF,qBACE,KAAChB;QACCM,eAAeZ,WACbY,eACAF,OAAOoC,aAAa,EACpBX,wBACAE;QAED,GAAGI,QAAQ;QACX,GAAGT,SAAS;kBAEb,cAAA,KAACzB,0BAA0BwC,QAAQ;YAACC,OAAON;sBACxC7B;;;AAIT,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Clickable/RealClickable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { type ClickableProps } from './Clickable';\nimport { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from './useState';\nimport styles from './Clickable.module.css';\n\n/*\n Кликабельный компонент. Добавляем кучу обвесов.\n */\nexport const RealClickable = <T,>({\n baseClassName,\n children,\n focusVisibleMode = 'inside',\n activeClassName,\n hoverClassName,\n activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n hasHover = true,\n hasActive = true,\n hovered,\n activated,\n hasHoverWithChildren,\n unlockParentHover,\n onPointerEnter,\n onPointerLeave,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onBlur,\n onFocus,\n onKeyDown,\n ...restProps\n}: ClickableProps<T>) => {\n const { focusVisible, ...focusEvents } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n const {\n stateClassName,\n setLockHoverBubblingImmediate,\n setLockActiveBubblingImmediate,\n ...stateEvents\n } = useState({\n activeClassName,\n hoverClassName,\n activeEffectDelay,\n hasHover,\n hasActive,\n hovered,\n activated,\n unlockParentHover,\n });\n\n const handlers = mergeCalls(\n focusEvents,\n stateEvents,\n { onKeyDown: clickByKeyboardHandler },\n {\n onPointerEnter,\n onPointerLeave,\n onPointerDown,\n onPointerCancel,\n onPointerUp,\n onBlur,\n onFocus,\n onKeyDown,\n },\n );\n\n const lockStateContextValue = React.useMemo(\n () => ({\n lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,\n lockActiveStateBubbling: setLockActiveBubblingImmediate,\n }),\n [setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, hasHoverWithChildren],\n );\n\n return (\n <RootComponent\n baseClassName={classNames(\n baseClassName,\n styles.realClickable,\n focusVisibleClassNames,\n stateClassName,\n )}\n {...handlers}\n {...restProps}\n >\n <ClickableLockStateContext.Provider value={lockStateContextValue}>\n {children}\n </ClickableLockStateContext.Provider>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","noop","useFocusVisible","useFocusVisibleClassName","mergeCalls","clickByKeyboardHandler","RootComponent","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","styles","RealClickable","baseClassName","children","focusVisibleMode","activeClassName","hoverClassName","activeEffectDelay","hasHover","hasActive","hovered","activated","hasHoverWithChildren","unlockParentHover","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockHoverBubblingImmediate","setLockActiveBubblingImmediate","stateEvents","handlers","lockStateContextValue","useMemo","lockHoverStateBubbling","lockActiveStateBubbling","realClickable","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,yBAAyB,EAAEC,2BAA2B,EAAEC,QAAQ,QAAQ,gBAAa;AAC9F,OAAOC,YAAY,yBAAyB;AAE5C;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,aAAa,EACbC,QAAQ,EACRC,mBAAmB,QAAQ,EAC3BC,eAAe,EACfC,cAAc,EACdC,oBAAoBT,2BAA2B,EAC/CU,WAAW,IAAI,EACfC,YAAY,IAAI,EAChBC,OAAO,EACPC,SAAS,EACTC,oBAAoB,EACpBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACdC,aAAa,EACbC,eAAe,EACfC,WAAW,EACXC,MAAM,EACNC,OAAO,EACPC,SAAS,EACT,GAAGC,WACe;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGC,aAAa,GAAGhC;IACzC,MAAMiC,yBAAyBhC,yBAAyB;QAAE8B;QAAcG,MAAMtB;IAAiB;IAE/F,MAAM,EACJuB,cAAc,EACdC,6BAA6B,EAC7BC,8BAA8B,EAC9B,GAAGC,aACJ,GAAG/B,SAAS;QACXM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;IACF;IAEA,MAAMkB,WAAWrC,WACf8B,aACAM,aACA;QAAET,WAAW1B;IAAuB,GACpC;QACEmB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAGF,MAAMW,wBAAwB3C,MAAM4C,OAAO,CACzC,IAAO,CAAA;YACLC,wBAAwBtB,uBAAuBrB,OAAOqC;YACtDO,yBAAyBN;QAC3B,CAAA,GACA;QAACD;QAA+BC;QAAgCjB;KAAqB;IAGvF,qBACE,KAAChB;QACCM,eAAeZ,WACbY,eACAF,OAAOoC,aAAa,EACpBX,wBACAE;QAED,GAAGI,QAAQ;QACX,GAAGT,SAAS;kBAEb,cAAA,KAACzB,0BAA0BwC,QAAQ;YAACC,OAAON;sBACxC7B;;;AAIT,EAAE"}

package/dist/cssm/components/Clickable/useState.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import * as React from "react";
+/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
 import { classNames, noop } from "@vkontakte/vkjs";
 import { mergeCalls } from "../../lib/mergeCalls.js";
 import { useStateWithDelay } from "./useStateWithDelay.js";
 export const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
 const ACTIVE_DELAY = 70;
 /**
- * Управляет наведением на компонент, игнорирует тач события
+ * Управляет наведением на компонент, игнорирует тач события.
  */ function useHover({ hovered, hasHover = true, lockState, setParentStateLock }) {
     const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);
     const prevIsHoveredRef = React.useRef(undefined);
@@ -49,7 +49,7 @@ const ACTIVE_DELAY = 70;
     };
 }
 /**
- * Управляет активацией компонента
+ * Управляет активацией компонента.
  */ function useActive({ activated, activeEffectDelay, hasActive = true, lockStateRef, setParentStateLock }) {
     // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,
     // если установка отложена c помощью delay, то и вызов будет отложен
@@ -100,7 +100,7 @@ export const ClickableLockStateContext = /*#__PURE__*/ React.createContext({
     lockActiveStateBubbling: undefined
 });
 /**
- * Блокирует стейт на всплытие
+ * Блокирует стейт на всплытие.
  */ function useLockState(setParentStateLockBubbling) {
     const [lockState, setLockState] = React.useState(false);
     const setStateLockBubblingImmediate = React.useCallback((isLock)=>{
@@ -130,7 +130,7 @@ function useLockRef(setParentStateLockBubbling) {
     ];
 }
 /**
- * Управляет состоянием компонента
+ * Управляет состоянием компонента.
  */ export function useState({ hovered, hasHover, activated, hasActive, activeEffectDelay, unlockParentHover, hoverClassName, activeClassName }) {
     const { lockHoverStateBubbling = noop, lockActiveStateBubbling = noop } = React.useContext(ClickableLockStateContext);
     const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] = useLockState(unlockParentHover ? noop : lockHoverStateBubbling);

package/dist/cssm/components/Clickable/useState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Clickable/useState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n /*\n Указывает, должен ли компонент реагировать на hover-состояние\n /\n hasHover?: boolean;\n /\n Позволяет управлять hovered-состоянием извне\n /\n hovered?: boolean;\n /\n Позволяет управлять activated-состоянием извне\n /\n activated?: boolean;\n /\n Указывает, должен ли компонент реагировать на active-состояние\n /\n hasActive?: boolean;\n\n /\n Позволяет родительскому компоненту\n * иметь hovered-cостояние при наведении\n * на любой дочерний элемент.\n * По умолчанию состояние hovered у родителя сбрасывается.\n \n Присваивается родителькому компоненту.\n \n @example\n * <Tappable hasHoverWithChildren>\n * <IconButton />\n * <IconButton />\n * <IconButton />\n * </Tappable>\n /\n hasHoverWithChildren?: boolean;\n\n /\n Позволяет родительскому компоненту показывать hovered-состояние при наведении\n * на текущий дочерний компонент.\n \n Присваивается дочернему компоненту.\n \n @example\n * <Tappable>\n * <IconButton unlockParentHover />\n * <IconButton unlockParentHover />\n * <IconButton />\n * </Tappable>\n /\n unlockParentHover?: boolean;\n\n /\n Длительность показа `activated`-состояния\n /\n activeEffectDelay?: number;\n\n /\n Стиль подсветки active-состояния\n /\n activeClassName?: string;\n\n /\n Стиль подсветки hover-состояния\n /\n hoverClassName?: string;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nconst ACTIVE_DELAY = 70;\n\ninterface UseHoverProps extends Pick<StateProps, 'hovered' \| 'hasHover'> {\n /\n Блокирование активации состояний\n /\n lockState: boolean;\n setParentStateLock: (v: boolean) => void;\n}\n\n/\n Управляет наведением на компонент, игнорирует тач события\n /\nfunction useHover({ hovered, hasHover = true, lockState, setParentStateLock }: UseHoverProps) {\n const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);\n\n const prevIsHoveredRef = React.useRef<boolean \| undefined>(undefined);\n\n const handleHover = React.useCallback(\n (isHover: boolean) => {\n setHoveredStateLocal(isHover);\n\n const isHovered =\n hovered ??\n calculateStateValue({\n hasState: hasHover,\n isLocked: lockState,\n stateValueLocal: isHover,\n });\n\n // проверка сделана чтобы реже вызывать обновление состояния\n // контекста родителя\n if (isHovered !== prevIsHoveredRef.current) {\n prevIsHoveredRef.current = isHovered;\n setParentStateLock(isHovered);\n }\n },\n [setParentStateLock, hasHover, hovered, lockState],\n );\n\n const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n if (e.pointerType === 'touch') {\n return;\n }\n\n handleHover(true);\n };\n\n const onPointerLeave = () => {\n handleHover(false);\n };\n\n const isHovered =\n hovered ??\n calculateStateValue({\n hasState: hasHover,\n isLocked: lockState,\n stateValueLocal: hoveredStateLocal,\n });\n\n return {\n isHovered,\n onPointerEnter: hasHover ? onPointerEnter : noop,\n onPointerLeave: hasHover ? onPointerLeave : noop,\n };\n}\n\ninterface UseActiveProps extends Pick<StateProps, 'activated' \| 'activeEffectDelay' \| 'hasActive'> {\n /\n Блокирование активации состояний\n /\n lockStateRef: React.RefObject<boolean>;\n setParentStateLock: (v: boolean) => void;\n}\n\n/\n Управляет активацией компонента\n /\nfunction useActive({\n activated,\n activeEffectDelay,\n hasActive = true,\n lockStateRef,\n setParentStateLock,\n}: UseActiveProps) {\n // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,\n // если установка отложена c помощью delay, то и вызов будет отложен\n const [activatedState, setActivated] = useStateWithDelay<boolean>(false, 0, setParentStateLock);\n\n // Список нажатий которые не требуется отменять\n const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n const onPointerDown = () => {\n if (lockStateRef.current) {\n return;\n }\n\n setActivated(true, ACTIVE_DELAY);\n // намеренно выставляем lock, так как setActivated вызов отложен\n // а у отложенного setActivated setParentStateLock тоже вызовится отложенно\n // родитель сейчас тоже обработает это же событие PointerDown\n // если мы не залочим activatedState у родителя сейчас, то родитель выставит active состояние\n setParentStateLock(true);\n };\n\n const onPointerCancel: React.PointerEventHandler = (e) => {\n if (pointersUp.has(e.pointerId)) {\n pointersUp.delete(e.pointerId);\n return;\n }\n\n setActivated(false);\n };\n\n const onPointerUp: React.PointerEventHandler = (e) => {\n pointersUp.add(e.pointerId);\n\n if (lockStateRef.current) {\n return;\n }\n\n setActivated(true);\n setActivated(false, activeEffectDelay);\n };\n\n const isActivated =\n activated ??\n calculateStateValue({\n hasState: hasActive,\n isLocked: lockStateRef.current,\n stateValueLocal: activatedState,\n });\n\n return {\n isActivated,\n onPointerLeave: hasActive ? onPointerCancel : noop,\n onPointerDown: hasActive ? onPointerDown : noop,\n onPointerCancel: hasActive ? onPointerCancel : noop,\n onPointerUp: hasActive ? onPointerUp : noop,\n };\n}\n\ninterface ClickableLockStateContextInterface {\n lockHoverStateBubbling?: (v: boolean) => void;\n lockActiveStateBubbling?: (v: boolean) => void;\n}\n\nexport const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface> =\n React.createContext<ClickableLockStateContextInterface>({\n lockHoverStateBubbling: undefined,\n lockActiveStateBubbling: undefined,\n });\n\n/\n Блокирует стейт на всплытие\n /\nfunction useLockState(\n setParentStateLockBubbling: (v: boolean) => void,\n): readonly [boolean, (v: boolean) => void, (...args: any[]) => void] {\n const [lockState, setLockState] = React.useState(false);\n\n const setStateLockBubblingImmediate = React.useCallback(\n (isLock: boolean) => {\n setLockState(isLock);\n setParentStateLockBubbling(isLock);\n },\n [setParentStateLockBubbling],\n );\n\n return [lockState, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\nfunction useLockRef(\n setParentStateLockBubbling: (v: boolean) => void,\n): readonly [React.RefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {\n const lockStateRef = React.useRef(false);\n\n const setStateLockBubblingImmediate = React.useCallback(\n (isLock: boolean) => {\n lockStateRef.current = isLock;\n setParentStateLockBubbling(isLock);\n },\n [setParentStateLockBubbling],\n );\n\n return [lockStateRef, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\n/\n Управляет состоянием компонента\n */\nexport function useState({\n hovered,\n hasHover,\n activated,\n hasActive,\n activeEffectDelay,\n unlockParentHover,\n hoverClassName,\n activeClassName,\n}: StateProps): {\n stateClassName: string;\n setLockHoverBubblingImmediate: (...args: any[]) => void;\n setLockActiveBubblingImmediate: (...args: any[]) => void;\n} {\n const { lockHoverStateBubbling = noop, lockActiveStateBubbling = noop } =\n React.useContext(ClickableLockStateContext);\n\n const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] =\n useLockState(unlockParentHover ? noop : lockHoverStateBubbling);\n const [lockActiveStateRef, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] =\n useLockRef(lockActiveStateBubbling);\n\n const { isHovered, ...hoverEvent } = useHover({\n hasHover,\n hovered,\n lockState: lockHoverState,\n setParentStateLock: setParentStateLockHoverBubbling,\n });\n\n const { isActivated, ...activeEvent } = useActive({\n activated,\n hasActive,\n activeEffectDelay,\n lockStateRef: lockActiveStateRef,\n setParentStateLock: setParentStateLockActiveBubbling,\n });\n\n const stateClassName = classNames(isHovered && hoverClassName, isActivated && activeClassName);\n const handlers = mergeCalls(hoverEvent, activeEvent);\n\n return {\n stateClassName,\n setLockHoverBubblingImmediate,\n setLockActiveBubblingImmediate,\n ...handlers,\n };\n}\n\n// Общая функция для определения конечного состояния active/hovered\nfunction calculateStateValue({\n hasState,\n isLocked,\n stateValueLocal,\n}: {\n hasState: boolean;\n isLocked: boolean;\n stateValueLocal: boolean;\n}): boolean {\n return hasState && !isLocked && stateValueLocal;\n}\n"],"names":["React","classNames","noop","mergeCalls","useStateWithDelay","DEFAULT_ACTIVE_EFFECT_DELAY","ACTIVE_DELAY","useHover","hovered","hasHover","lockState","setParentStateLock","hoveredStateLocal","setHoveredStateLocal","useState","prevIsHoveredRef","useRef","undefined","handleHover","useCallback","isHover","isHovered","calculateStateValue","hasState","isLocked","stateValueLocal","current","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeEffectDelay","hasActive","lockStateRef","activatedState","setActivated","pointersUp","useMemo","Set","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","isActivated","ClickableLockStateContext","createContext","lockHoverStateBubbling","lockActiveStateBubbling","useLockState","setParentStateLockBubbling","setLockState","setStateLockBubblingImmediate","isLock","useLockRef","unlockParentHover","hoverClassName","activeClassName","useContext","lockHoverState","setParentStateLockHoverBubbling","setLockHoverBubblingImmediate","lockActiveStateRef","setParentStateLockActiveBubbling","setLockActiveBubblingImmediate","hoverEvent","activeEvent","stateClassName","handlers"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/Clickable/useState.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc /\n\nimport as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n /*\n Указывает, должен ли компонент реагировать на `hover`-состояние.\n /\n hasHover?: boolean;\n /\n Позволяет управлять `hovered`-состоянием извне.\n /\n hovered?: boolean;\n /\n Позволяет управлять `activated`-состоянием извне.\n /\n activated?: boolean;\n /\n Указывает, должен ли компонент реагировать на `active`-состояние.\n /\n hasActive?: boolean;\n\n /\n Позволяет родительскому компоненту\n * иметь `hovered`-cостояние при наведении\n * на любой дочерний элемент.\n * По умолчанию состояние hovered у родителя сбрасывается.\n \n Присваивается родителькому компоненту.\n \n @example\n * <Tappable hasHoverWithChildren>\n * <IconButton />\n * <IconButton />\n * <IconButton />\n * </Tappable>\n /\n hasHoverWithChildren?: boolean;\n\n /\n Позволяет родительскому компоненту показывать hovered-состояние при наведении\n * на текущий дочерний компонент.\n \n Присваивается дочернему компоненту.\n \n @example\n * <Tappable>\n * <IconButton unlockParentHover />\n * <IconButton unlockParentHover />\n * <IconButton />\n * </Tappable>\n /\n unlockParentHover?: boolean;\n\n /\n Длительность показа `activated`-состояния.\n /\n activeEffectDelay?: number;\n\n /\n Стиль подсветки `active`-состояния.\n /\n activeClassName?: string;\n\n /\n Стиль подсветки `hover`-состояния.\n /\n hoverClassName?: string;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nconst ACTIVE_DELAY = 70;\n\ninterface UseHoverProps extends Pick<StateProps, 'hovered' \| 'hasHover'> {\n /\n Блокирование активации состояний.\n /\n lockState: boolean;\n setParentStateLock: (v: boolean) => void;\n}\n\n/\n Управляет наведением на компонент, игнорирует тач события.\n /\nfunction useHover({ hovered, hasHover = true, lockState, setParentStateLock }: UseHoverProps) {\n const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);\n\n const prevIsHoveredRef = React.useRef<boolean \| undefined>(undefined);\n\n const handleHover = React.useCallback(\n (isHover: boolean) => {\n setHoveredStateLocal(isHover);\n\n const isHovered =\n hovered ??\n calculateStateValue({\n hasState: hasHover,\n isLocked: lockState,\n stateValueLocal: isHover,\n });\n\n // проверка сделана чтобы реже вызывать обновление состояния\n // контекста родителя\n if (isHovered !== prevIsHoveredRef.current) {\n prevIsHoveredRef.current = isHovered;\n setParentStateLock(isHovered);\n }\n },\n [setParentStateLock, hasHover, hovered, lockState],\n );\n\n const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n if (e.pointerType === 'touch') {\n return;\n }\n\n handleHover(true);\n };\n\n const onPointerLeave = () => {\n handleHover(false);\n };\n\n const isHovered =\n hovered ??\n calculateStateValue({\n hasState: hasHover,\n isLocked: lockState,\n stateValueLocal: hoveredStateLocal,\n });\n\n return {\n isHovered,\n onPointerEnter: hasHover ? onPointerEnter : noop,\n onPointerLeave: hasHover ? onPointerLeave : noop,\n };\n}\n\ninterface UseActiveProps extends Pick<StateProps, 'activated' \| 'activeEffectDelay' \| 'hasActive'> {\n /\n Блокирование активации состояний.\n /\n lockStateRef: React.RefObject<boolean>;\n setParentStateLock: (v: boolean) => void;\n}\n\n/\n Управляет активацией компонента.\n /\nfunction useActive({\n activated,\n activeEffectDelay,\n hasActive = true,\n lockStateRef,\n setParentStateLock,\n}: UseActiveProps) {\n // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,\n // если установка отложена c помощью delay, то и вызов будет отложен\n const [activatedState, setActivated] = useStateWithDelay<boolean>(false, 0, setParentStateLock);\n\n // Список нажатий которые не требуется отменять\n const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n const onPointerDown = () => {\n if (lockStateRef.current) {\n return;\n }\n\n setActivated(true, ACTIVE_DELAY);\n // намеренно выставляем lock, так как setActivated вызов отложен\n // а у отложенного setActivated setParentStateLock тоже вызовится отложенно\n // родитель сейчас тоже обработает это же событие PointerDown\n // если мы не залочим activatedState у родителя сейчас, то родитель выставит active состояние\n setParentStateLock(true);\n };\n\n const onPointerCancel: React.PointerEventHandler = (e) => {\n if (pointersUp.has(e.pointerId)) {\n pointersUp.delete(e.pointerId);\n return;\n }\n\n setActivated(false);\n };\n\n const onPointerUp: React.PointerEventHandler = (e) => {\n pointersUp.add(e.pointerId);\n\n if (lockStateRef.current) {\n return;\n }\n\n setActivated(true);\n setActivated(false, activeEffectDelay);\n };\n\n const isActivated =\n activated ??\n calculateStateValue({\n hasState: hasActive,\n isLocked: lockStateRef.current,\n stateValueLocal: activatedState,\n });\n\n return {\n isActivated,\n onPointerLeave: hasActive ? onPointerCancel : noop,\n onPointerDown: hasActive ? onPointerDown : noop,\n onPointerCancel: hasActive ? onPointerCancel : noop,\n onPointerUp: hasActive ? onPointerUp : noop,\n };\n}\n\ninterface ClickableLockStateContextInterface {\n lockHoverStateBubbling?: (v: boolean) => void;\n lockActiveStateBubbling?: (v: boolean) => void;\n}\n\nexport const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface> =\n React.createContext<ClickableLockStateContextInterface>({\n lockHoverStateBubbling: undefined,\n lockActiveStateBubbling: undefined,\n });\n\n/\n Блокирует стейт на всплытие.\n /\nfunction useLockState(\n setParentStateLockBubbling: (v: boolean) => void,\n): readonly [boolean, (v: boolean) => void, (...args: any[]) => void] {\n const [lockState, setLockState] = React.useState(false);\n\n const setStateLockBubblingImmediate = React.useCallback(\n (isLock: boolean) => {\n setLockState(isLock);\n setParentStateLockBubbling(isLock);\n },\n [setParentStateLockBubbling],\n );\n\n return [lockState, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\nfunction useLockRef(\n setParentStateLockBubbling: (v: boolean) => void,\n): readonly [React.RefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {\n const lockStateRef = React.useRef(false);\n\n const setStateLockBubblingImmediate = React.useCallback(\n (isLock: boolean) => {\n lockStateRef.current = isLock;\n setParentStateLockBubbling(isLock);\n },\n [setParentStateLockBubbling],\n );\n\n return [lockStateRef, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\n/\n Управляет состоянием компонента.\n */\nexport function useState({\n hovered,\n hasHover,\n activated,\n hasActive,\n activeEffectDelay,\n unlockParentHover,\n hoverClassName,\n activeClassName,\n}: StateProps): {\n stateClassName: string;\n setLockHoverBubblingImmediate: (...args: any[]) => void;\n setLockActiveBubblingImmediate: (...args: any[]) => void;\n} {\n const { lockHoverStateBubbling = noop, lockActiveStateBubbling = noop } =\n React.useContext(ClickableLockStateContext);\n\n const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] =\n useLockState(unlockParentHover ? noop : lockHoverStateBubbling);\n const [lockActiveStateRef, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] =\n useLockRef(lockActiveStateBubbling);\n\n const { isHovered, ...hoverEvent } = useHover({\n hasHover,\n hovered,\n lockState: lockHoverState,\n setParentStateLock: setParentStateLockHoverBubbling,\n });\n\n const { isActivated, ...activeEvent } = useActive({\n activated,\n hasActive,\n activeEffectDelay,\n lockStateRef: lockActiveStateRef,\n setParentStateLock: setParentStateLockActiveBubbling,\n });\n\n const stateClassName = classNames(isHovered && hoverClassName, isActivated && activeClassName);\n const handlers = mergeCalls(hoverEvent, activeEvent);\n\n return {\n stateClassName,\n setLockHoverBubblingImmediate,\n setLockActiveBubblingImmediate,\n ...handlers,\n };\n}\n\n// Общая функция для определения конечного состояния active/hovered\nfunction calculateStateValue({\n hasState,\n isLocked,\n stateValueLocal,\n}: {\n hasState: boolean;\n isLocked: boolean;\n stateValueLocal: boolean;\n}): boolean {\n return hasState && !isLocked && stateValueLocal;\n}\n"],"names":["React","classNames","noop","mergeCalls","useStateWithDelay","DEFAULT_ACTIVE_EFFECT_DELAY","ACTIVE_DELAY","useHover","hovered","hasHover","lockState","setParentStateLock","hoveredStateLocal","setHoveredStateLocal","useState","prevIsHoveredRef","useRef","undefined","handleHover","useCallback","isHover","isHovered","calculateStateValue","hasState","isLocked","stateValueLocal","current","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeEffectDelay","hasActive","lockStateRef","activatedState","setActivated","pointersUp","useMemo","Set","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","isActivated","ClickableLockStateContext","createContext","lockHoverStateBubbling","lockActiveStateBubbling","useLockState","setParentStateLockBubbling","setLockState","setStateLockBubblingImmediate","isLock","useLockRef","unlockParentHover","hoverClassName","activeClassName","useContext","lockHoverState","setParentStateLockHoverBubbling","setLockHoverBubblingImmediate","lockActiveStateRef","setParentStateLockActiveBubbling","setLockActiveBubblingImmediate","hoverEvent","activeEvent","stateClassName","handlers"],"mappings":"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"}

package/dist/cssm/components/Clickable/useStateWithDelay.js CHANGED Viewed

@@ -14,7 +14,7 @@ import { isFunction, noop } from "@vkontakte/vkjs";
  * }
  * ```
  *
- * Есть возможность передать функцию-коллбэк, которая будет
+ * Есть возможность передать функцию-обработчик, которая будет
  * вызвана сразу после вызова setState с новым значением стейта
  * в качестве аргумента.
  *

package/dist/cssm/components/Clickable/useStateWithDelay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Clickable/useStateWithDelay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isFunction, noop } from '@vkontakte/vkjs';\n\ntype DispatchWithDelay<S> = (value: S, delay?: number) => void;\n\n/*\n Возвращает значение с состоянием и функции на обновление состояния\n * без и с задержкой.\n \n # Пример\n \n ```ts\n * const [count, setCount] = useStateWithDelay(initialState);\n \n const click = () => {\n * setCount(count + 1, 500)\n * }\n * ```\n \n Есть возможность передать ~~функцию-коллбэк,~~ которая будет\n * вызвана сразу после вызова setState с новым значением стейта\n * в качестве аргумента.\n \n ```ts\n * const onCountChange = React.useCallback((count) => {\n * // обработчик нового значения count\n * // будет вызван через 500мс\n * }, []);\n \n \n * const [count, setCount] = useStateWithDelay(initialState, 0, onCountChange);\n \n const click = () => {\n * setCount(count + 1, 500)\n * }\n * ```\n */\nexport function useStateWithDelay<S>(\n initialState: S \| (() => S),\n defaultDelay = 0,\n onStateChange: (v: S) => void = noop,\n): [S, DispatchWithDelay<React.SetStateAction<S>>] {\n const [value, setValue] = React.useState(initialState);\n const timeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);\n\n const handleSetValue = React.useCallback(\n (nextValue: React.SetStateAction<S>) => {\n if (isFunction(nextValue)) {\n setValue((prevValue) => {\n const value = nextValue(prevValue);\n onStateChange(value);\n\n return value;\n });\n } else {\n setValue(nextValue);\n onStateChange(nextValue);\n }\n },\n [onStateChange],\n );\n\n const setValueWithDelay = React.useCallback(\n (newValue: React.SetStateAction<S>, delay: number = defaultDelay) => {\n clearTimeout(timeout.current);\n if (delay === 0) {\n handleSetValue(newValue);\n return;\n }\n\n timeout.current = setTimeout(() => handleSetValue(newValue), delay);\n },\n [defaultDelay, handleSetValue],\n );\n\n return [value, setValueWithDelay];\n}\n"],"names":["React","isFunction","noop","useStateWithDelay","initialState","defaultDelay","onStateChange","value","setValue","useState","timeout","useRef","undefined","handleSetValue","useCallback","nextValue","prevValue","setValueWithDelay","newValue","delay","clearTimeout","current","setTimeout"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AAInD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,kBACdC,YAA2B,EAC3BC,eAAe,CAAC,EAChBC,gBAAgCJ,IAAI;IAEpC,MAAM,CAACK,OAAOC,SAAS,GAAGR,MAAMS,QAAQ,CAACL;IACzC,MAAMM,UAAUV,MAAMW,MAAM,CAAgCC;IAE5D,MAAMC,iBAAiBb,MAAMc,WAAW,CACtC,CAACC;QACC,IAAId,WAAWc,YAAY;YACzBP,SAAS,CAACQ;gBACR,MAAMT,QAAQQ,UAAUC;gBACxBV,cAAcC;gBAEd,OAAOA;YACT;QACF,OAAO;YACLC,SAASO;YACTT,cAAcS;QAChB;IACF,GACA;QAACT;KAAc;IAGjB,MAAMW,oBAAoBjB,MAAMc,WAAW,CACzC,CAACI,UAAmCC,QAAgBd,YAAY;QAC9De,aAAaV,QAAQW,OAAO;QAC5B,IAAIF,UAAU,GAAG;YACfN,eAAeK;YACf;QACF;QAEAR,QAAQW,OAAO,GAAGC,WAAW,IAAMT,eAAeK,WAAWC;IAC/D,GACA;QAACd;QAAcQ;KAAe;IAGhC,OAAO;QAACN;QAAOU;KAAkB;AACnC"}
1	+ {"version":3,"sources":["../../../../src/components/Clickable/useStateWithDelay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isFunction, noop } from '@vkontakte/vkjs';\n\ntype DispatchWithDelay<S> = (value: S, delay?: number) => void;\n\n/*\n Возвращает значение с состоянием и функции на обновление состояния\n * без и с задержкой.\n \n # Пример\n \n ```ts\n * const [count, setCount] = useStateWithDelay(initialState);\n \n const click = () => {\n * setCount(count + 1, 500)\n * }\n * ```\n \n Есть возможность передать функцию-обработчик, которая будет\n * вызвана сразу после вызова setState с новым значением стейта\n * в качестве аргумента.\n \n ```ts\n * const onCountChange = React.useCallback((count) => {\n * // обработчик нового значения count\n * // будет вызван через 500мс\n * }, []);\n \n \n * const [count, setCount] = useStateWithDelay(initialState, 0, onCountChange);\n \n const click = () => {\n * setCount(count + 1, 500)\n * }\n * ```\n */\nexport function useStateWithDelay<S>(\n initialState: S \| (() => S),\n defaultDelay = 0,\n onStateChange: (v: S) => void = noop,\n): [S, DispatchWithDelay<React.SetStateAction<S>>] {\n const [value, setValue] = React.useState(initialState);\n const timeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);\n\n const handleSetValue = React.useCallback(\n (nextValue: React.SetStateAction<S>) => {\n if (isFunction(nextValue)) {\n setValue((prevValue) => {\n const value = nextValue(prevValue);\n onStateChange(value);\n\n return value;\n });\n } else {\n setValue(nextValue);\n onStateChange(nextValue);\n }\n },\n [onStateChange],\n );\n\n const setValueWithDelay = React.useCallback(\n (newValue: React.SetStateAction<S>, delay: number = defaultDelay) => {\n clearTimeout(timeout.current);\n if (delay === 0) {\n handleSetValue(newValue);\n return;\n }\n\n timeout.current = setTimeout(() => handleSetValue(newValue), delay);\n },\n [defaultDelay, handleSetValue],\n );\n\n return [value, setValueWithDelay];\n}\n"],"names":["React","isFunction","noop","useStateWithDelay","initialState","defaultDelay","onStateChange","value","setValue","useState","timeout","useRef","undefined","handleSetValue","useCallback","nextValue","prevValue","setValueWithDelay","newValue","delay","clearTimeout","current","setTimeout"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AAInD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,kBACdC,YAA2B,EAC3BC,eAAe,CAAC,EAChBC,gBAAgCJ,IAAI;IAEpC,MAAM,CAACK,OAAOC,SAAS,GAAGR,MAAMS,QAAQ,CAACL;IACzC,MAAMM,UAAUV,MAAMW,MAAM,CAAgCC;IAE5D,MAAMC,iBAAiBb,MAAMc,WAAW,CACtC,CAACC;QACC,IAAId,WAAWc,YAAY;YACzBP,SAAS,CAACQ;gBACR,MAAMT,QAAQQ,UAAUC;gBACxBV,cAAcC;gBAEd,OAAOA;YACT;QACF,OAAO;YACLC,SAASO;YACTT,cAAcS;QAChB;IACF,GACA;QAACT;KAAc;IAGjB,MAAMW,oBAAoBjB,MAAMc,WAAW,CACzC,CAACI,UAAmCC,QAAgBd,YAAY;QAC9De,aAAaV,QAAQW,OAAO;QAC5B,IAAIF,UAAU,GAAG;YACfN,eAAeK;YACf;QACF;QAEAR,QAAQW,OAAO,GAAGC,WAAW,IAAMT,eAAeK,WAAWC;IAC/D,GACA;QAACd;QAAcQ;KAAe;IAGhC,OAAO;QAACN;QAAOU;KAAkB;AACnC"}

package/dist/cssm/components/ColorSchemeProvider/ColorSchemeProvider.js CHANGED Viewed

@@ -1,6 +1,4 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-// TODO [@vkontakte/icons-sprite>=2.3.1]: Удалить use client, если он появился в IconAppearanceProvider
 import * as React from "react";
 import { IconAppearanceProvider } from "@vkontakte/icons";
 import { TokensClassProvider } from "../../lib/tokens/TokensClassProvider.js";

package/dist/cssm/components/ColorSchemeProvider/ColorSchemeProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ColorSchemeProvider/ColorSchemeProvider.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\n// TODO [@vkontakte/icons-sprite>=2.3.1]: Удалить use client, если он появился в IconAppearanceProvider\n\nimport~~ * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface ColorSchemeProviderProps {\n value: ColorSchemeType;\n children: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ColorSchemeProvider\n */\nexport const ColorSchemeProvider = ({\n value,\n children,\n}: ColorSchemeProviderProps): React.ReactNode => {\n return (\n <ConfigProviderOverride colorScheme={value}>\n <IconAppearanceProvider value={value}>\n <TokensClassProvider>{children}</TokensClassProvider>\n </IconAppearanceProvider>\n </ConfigProviderOverride>\n );\n};\n"],"names":["React","IconAppearanceProvider","TokensClassProvider","ConfigProviderOverride","ColorSchemeProvider","value","children","colorScheme"],"mappings":"AAAA~~;;AAEA~~,~~uGAAuG;AAEvG,~~YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAE1D,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,sBAAsB,QAAQ,8CAA2C;~~AAOlF~~;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,KAAK,EACLC,QAAQ,EACiB;IACzB,qBACE,KAACH;QAAuBI,aAAaF;kBACnC,cAAA,KAACJ;YAAuBI,OAAOA;sBAC7B,cAAA,KAACH;0BAAqBI;;;;AAI9B,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ColorSchemeProvider/ColorSchemeProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface ColorSchemeProviderProps {\n /*\n Цветовая схема.\n /\n value: ColorSchemeType;\n /\n Содержимое.\n /\n children: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ColorSchemeProvider\n */\nexport const ColorSchemeProvider = ({\n value,\n children,\n}: ColorSchemeProviderProps): React.ReactNode => {\n return (\n <ConfigProviderOverride colorScheme={value}>\n <IconAppearanceProvider value={value}>\n <TokensClassProvider>{children}</TokensClassProvider>\n </IconAppearanceProvider>\n </ConfigProviderOverride>\n );\n};\n"],"names":["React","IconAppearanceProvider","TokensClassProvider","ConfigProviderOverride","ColorSchemeProvider","value","children","colorScheme"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAE1D,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,sBAAsB,QAAQ,8CAA2C;AAalF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,KAAK,EACLC,QAAQ,EACiB;IACzB,qBACE,KAACH;QAAuBI,aAAaF;kBACnC,cAAA,KAACJ;YAAuBI,OAAOA;sBAC7B,cAAA,KAACH;0BAAqBI;;;;AAI9B,EAAE"}

package/dist/cssm/components/ConfigProvider/ConfigProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';\nimport { useAutoDetectDirection } from '../../hooks/useAutoDetectDirection';\nimport { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';\nimport { excludeKeysWithUndefined } from '../../lib/utils';\nimport {\n ConfigProviderContext,\n type ConfigProviderContextInterface,\n useConfigProvider,\n useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n children: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode => {\n const props = excludeKeysWithUndefined(propsRaw);\n const parentConfig = useConfigProvider();\n\n const mergeProps = {\n ...parentConfig,\n ...props,\n };\n\n const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);\n const direction = useAutoDetectDirection(mergeProps.direction);\n\n const configContext = useConfigProviderContextMemo({\n ...mergeProps,\n colorScheme,\n direction,\n });\n\n return (\n <ConfigProviderContext.Provider value={configContext}>\n <IconAppearanceProvider value={colorScheme}>\n <TokensClassProvider>{mergeProps.children}</TokensClassProvider>\n </IconAppearanceProvider>\n </ConfigProviderContext.Provider>\n );\n};\n"],"names":["React","IconAppearanceProvider","useAutoDetectColorScheme","useAutoDetectDirection","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProvider","propsRaw","props","parentConfig","mergeProps","colorScheme","direction","configContext","Provider","value","children"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,sBAAsB,QAAQ,wCAAqC;AAC5E,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,wBAAwB,QAAQ,qBAAkB;AAC3D,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,4BAA4B,QACvB,6BAA0B;~~AAMjC~~;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,QAAQN,yBAAyBK;IACvC,MAAME,eAAeL;IAErB,MAAMM,aAAa;QACjB,GAAGD,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,MAAMG,cAAcZ,yBAAyBW,WAAWC,WAAW;IACnE,MAAMC,YAAYZ,uBAAuBU,WAAWE,SAAS;IAE7D,MAAMC,gBAAgBR,6BAA6B;QACjD,GAAGK,UAAU;QACbC;QACAC;IACF;IAEA,qBACE,KAACT,sBAAsBW,QAAQ;QAACC,OAAOF;kBACrC,cAAA,KAACf;YAAuBiB,OAAOJ;sBAC7B,cAAA,KAACV;0BAAqBS,WAAWM,QAAQ;;;;AAIjD,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';\nimport { useAutoDetectDirection } from '../../hooks/useAutoDetectDirection';\nimport { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';\nimport { excludeKeysWithUndefined } from '../../lib/utils';\nimport {\n ConfigProviderContext,\n type ConfigProviderContextInterface,\n useConfigProvider,\n useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n /*\n Содержимое.\n /\n children: React.ReactNode;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode => {\n const props = excludeKeysWithUndefined(propsRaw);\n const parentConfig = useConfigProvider();\n\n const mergeProps = {\n ...parentConfig,\n ...props,\n };\n\n const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);\n const direction = useAutoDetectDirection(mergeProps.direction);\n\n const configContext = useConfigProviderContextMemo({\n ...mergeProps,\n colorScheme,\n direction,\n });\n\n return (\n <ConfigProviderContext.Provider value={configContext}>\n <IconAppearanceProvider value={colorScheme}>\n <TokensClassProvider>{mergeProps.children}</TokensClassProvider>\n </IconAppearanceProvider>\n </ConfigProviderContext.Provider>\n );\n};\n"],"names":["React","IconAppearanceProvider","useAutoDetectColorScheme","useAutoDetectDirection","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProvider","propsRaw","props","parentConfig","mergeProps","colorScheme","direction","configContext","Provider","value","children"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,sBAAsB,QAAQ,wCAAqC;AAC5E,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,wBAAwB,QAAQ,qBAAkB;AAC3D,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,4BAA4B,QACvB,6BAA0B;AASjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,QAAQN,yBAAyBK;IACvC,MAAME,eAAeL;IAErB,MAAMM,aAAa;QACjB,GAAGD,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,MAAMG,cAAcZ,yBAAyBW,WAAWC,WAAW;IACnE,MAAMC,YAAYZ,uBAAuBU,WAAWE,SAAS;IAE7D,MAAMC,gBAAgBR,6BAA6B;QACjD,GAAGK,UAAU;QACbC;QACAC;IACF;IAEA,qBACE,KAACT,sBAAsBW,QAAQ;QAACC,OAAOF;kBACrC,cAAA,KAACf;YAAuBiB,OAAOJ;sBAC7B,cAAA,KAACV;0BAAqBS,WAAWM,QAAQ;;;;AAIjD,EAAE"}

package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { type Direction } from '../../lib/direction';\nimport { platform, type PlatformType } from '../../lib/platform';\nimport { DEFAULT_TOKENS_CLASS_NAMES } from '../../lib/tokens/constants';\nimport { type TokensClassNames } from '../../lib/tokens/types';\n\nexport interface ConfigProviderContextInterface {\n /*\n Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n \n В условиях когда:\n * - `isWebView={true}`\n * - platform=\"ios\"\n \n ~~для~~ компонента `View` включается возможность навигации через смахивание.\n /\n isWebView: boolean;\n /\n При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n * \"плавающего\" элемента (например, панель управления webview).\n \n > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n * > библиотекой.\n /\n hasCustomPanelHeaderAfter: boolean;\n /\n Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n * \"плавающий\" элемент (например, ширина панели управления webview).\n \n Учитывается только при `hasCustomPanelHeaderAfter={true}` (~~см.~~ документацию `hasCustomPanelHeaderAfter`).\n \n @default 90\n /\n customPanelHeaderAfterMinWidth: number \| string;\n /\n Тип цветовой схемы – `light` или `dark`\n /\n colorScheme: ColorSchemeType \| undefined;\n /\n Включена ли анимация переходов между экранами в `Root` и `View`\n /\n transitionMotionEnabled: boolean;\n /\n ~~Платформа\~~n /\n platform: PlatformType;\n /\n CSS классы, определяющие набор токенов.\n \n - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.\n * - Используйте `{ [key in 'android' \| 'ios' \| 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов.\n \n @default\n * {\n * android: {\n * light: 'vkui--vkBase--light',\n * dark: 'vkui--vkBase--dark',\n * },\n * ios: {\n * light: 'vkui--vkIOS--light',\n * dark: 'vkui--vkIOS--dark',\n * },\n * vkcom: {\n * light: 'vkui--vkCom--light',\n * dark: 'vkui--vkCom--dark',\n * }\n * }\n /\n tokensClassNames: TokensClassNames;\n /\n Строка с языковой меткой BCP 47\n /\n locale: string;\n /\n Направление контента.\n \n При использовании определенного значения, важно установить атрибут `dir` с таким же значением либо на дочерний элемент,\n * либо на все страницу в целом.\n \n @default Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы\n */\n direction: Direction \| undefined;\n}\n\nexport const ConfigProviderContext: React.Context<ConfigProviderContextInterface> =\n React.createContext<ConfigProviderContextInterface>({\n hasCustomPanelHeaderAfter: false,\n customPanelHeaderAfterMinWidth: 90,\n isWebView: false,\n transitionMotionEnabled: true,\n platform: platform(),\n colorScheme: undefined, // undefined обозначает что тема должна определиться автоматически\n tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,\n locale: 'ru',\n direction: undefined,\n });\n\nexport const useConfigProvider = (): ConfigProviderContextInterface =>\n React.useContext(ConfigProviderContext);\n\nexport function useConfigProviderContextMemo(config: ConfigProviderContextInterface) {\n const {\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n direction,\n } = config;\n\n return React.useMemo<ConfigProviderContextInterface>(() => {\n return {\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n direction,\n };\n }, [\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n direction,\n ]);\n}\n"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","colorScheme","undefined","tokensClassNames","locale","direction","useConfigProvider","useContext","useConfigProviderContextMemo","config","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,QAAQ,QAA2B,wBAAqB;AACjE,SAASC,0BAA0B,QAAQ,gCAA6B;AAiFxE,OAAO,MAAMC,sCACXH,MAAMI,aAAa,CAAiC;IAClDC,2BAA2B;IAC3BC,gCAAgC;IAChCC,WAAW;IACXC,yBAAyB;IACzBP,UAAUA;IACVQ,aAAaC;IACbC,kBAAkBT;IAClBU,QAAQ;IACRC,WAAWH;AACb,GAAG;AAEL,OAAO,MAAMI,oBAAoB,IAC/Bd,MAAMe,UAAU,CAACZ,uBAAuB;AAE1C,OAAO,SAASa,6BAA6BC,MAAsC;IACjF,MAAM,EACJV,SAAS,EACTF,yBAAyB,EACzBC,8BAA8B,EAC9BG,WAAW,EACXD,uBAAuB,EACvBP,QAAQ,EACRU,gBAAgB,EAChBC,MAAM,EACNC,SAAS,EACV,GAAGI;IAEJ,OAAOjB,MAAMkB,OAAO,CAAiC;QACnD,OAAO;YACLX;YACAF;YACAC;YACAG;YACAD;YACAP;YACAU;YACAC;YACAC;QACF;IACF,GAAG;QACDN;QACAF;QACAC;QACAG;QACAD;QACAP;QACAU;QACAC;QACAC;KACD;AACH"}
1	+ {"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { type Direction } from '../../lib/direction';\nimport { platform, type PlatformType } from '../../lib/platform';\nimport { DEFAULT_TOKENS_CLASS_NAMES } from '../../lib/tokens/constants';\nimport { type TokensClassNames } from '../../lib/tokens/types';\n\nexport interface ConfigProviderContextInterface {\n /*\n Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n \n В условиях когда:\n * - `isWebView={true}`\n * - platform=\"ios\".\n \n Для компонента `View` включается возможность навигации через смахивание.\n /\n isWebView: boolean;\n /\n При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n * \"плавающего\" элемента (например, панель управления webview).\n \n > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n * > библиотекой.\n /\n hasCustomPanelHeaderAfter: boolean;\n /\n Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n * \"плавающий\" элемент (например, ширина панели управления webview).\n \n Учитывается только при `hasCustomPanelHeaderAfter={true}` (см документацию `hasCustomPanelHeaderAfter`).\n \n @default 90\n /\n customPanelHeaderAfterMinWidth: number \| string;\n /\n Тип цветовой схемы – `light` или `dark`.\n /\n colorScheme: ColorSchemeType \| undefined;\n /\n Включена ли анимация переходов между экранами в `Root` и `View`.\n /\n transitionMotionEnabled: boolean;\n /\n Платформа.\n /\n platform: PlatformType;\n /\n CSS классы, определяющие набор токенов.\n \n - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.\n * - Используйте `{ [key in 'android' \| 'ios' \| 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов.\n \n @default\n * {\n * android: {\n * light: 'vkui--vkBase--light',\n * dark: 'vkui--vkBase--dark',\n * },\n * ios: {\n * light: 'vkui--vkIOS--light',\n * dark: 'vkui--vkIOS--dark',\n * },\n * vkcom: {\n * light: 'vkui--vkCom--light',\n * dark: 'vkui--vkCom--dark',\n * }\n * }\n /\n tokensClassNames: TokensClassNames;\n /\n Строка с языковой меткой BCP 47.\n /\n locale: string;\n /\n Направление контента.\n \n При использовании определенного значения, важно установить атрибут `dir` с таким же значением либо на дочерний элемент,\n * либо на все страницу в целом.\n \n @default Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы\n */\n direction: Direction \| undefined;\n}\n\nexport const ConfigProviderContext: React.Context<ConfigProviderContextInterface> =\n React.createContext<ConfigProviderContextInterface>({\n hasCustomPanelHeaderAfter: false,\n customPanelHeaderAfterMinWidth: 90,\n isWebView: false,\n transitionMotionEnabled: true,\n platform: platform(),\n colorScheme: undefined, // undefined обозначает что тема должна определиться автоматически\n tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,\n locale: 'ru',\n direction: undefined,\n });\n\nexport const useConfigProvider = (): ConfigProviderContextInterface =>\n React.useContext(ConfigProviderContext);\n\nexport function useConfigProviderContextMemo(config: ConfigProviderContextInterface) {\n const {\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n direction,\n } = config;\n\n return React.useMemo<ConfigProviderContextInterface>(() => {\n return {\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n direction,\n };\n }, [\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n direction,\n ]);\n}\n"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","colorScheme","undefined","tokensClassNames","locale","direction","useConfigProvider","useContext","useConfigProviderContextMemo","config","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,QAAQ,QAA2B,wBAAqB;AACjE,SAASC,0BAA0B,QAAQ,gCAA6B;AAiFxE,OAAO,MAAMC,sCACXH,MAAMI,aAAa,CAAiC;IAClDC,2BAA2B;IAC3BC,gCAAgC;IAChCC,WAAW;IACXC,yBAAyB;IACzBP,UAAUA;IACVQ,aAAaC;IACbC,kBAAkBT;IAClBU,QAAQ;IACRC,WAAWH;AACb,GAAG;AAEL,OAAO,MAAMI,oBAAoB,IAC/Bd,MAAMe,UAAU,CAACZ,uBAAuB;AAE1C,OAAO,SAASa,6BAA6BC,MAAsC;IACjF,MAAM,EACJV,SAAS,EACTF,yBAAyB,EACzBC,8BAA8B,EAC9BG,WAAW,EACXD,uBAAuB,EACvBP,QAAQ,EACRU,gBAAgB,EAChBC,MAAM,EACNC,SAAS,EACV,GAAGI;IAEJ,OAAOjB,MAAMkB,OAAO,CAAiC;QACnD,OAAO;YACLX;YACAF;YACAC;YACAG;YACAD;YACAP;YACAU;YACAC;YACAC;QACF;IACF,GAAG;QACDN;QACAF;QACAC;QACAG;QACAD;QACAP;QACAU;QACAC;QACAC;KACD;AACH"}

package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { ConfigProviderContext, useConfigProvider, useConfigProviderContextMemo } from "./ConfigProviderContext.js";
 /**
- * Компонент предназначен для перебивания одного из значений контекста
+ * Компонент предназначен для перебивания одного из значений контекста.
  */ export function ConfigProviderOverride({ children, ...contextValue }) {
     const parentConfig = useConfigProvider();
     const configContext = useConfigProviderContextMemo({

package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n ConfigProviderContext,\n type ConfigProviderContextInterface,\n useConfigProvider,\n useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {\n children: React.ReactNode;\n}\n\n/*\n Компонент предназначен для перебивания одного из значений ~~контекста\~~n */\nexport function ConfigProviderOverride({\n children,\n ...contextValue\n}: ConfigProviderOverrideProps): React.ReactNode {\n const parentConfig = useConfigProvider();\n\n const configContext = useConfigProviderContextMemo({ ...parentConfig, ...contextValue });\n\n return (\n <ConfigProviderContext.Provider value={configContext}>\n {children}\n </ConfigProviderContext.Provider>\n );\n}\n"],"names":["React","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProviderOverride","children","contextValue","parentConfig","configContext","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,4BAA4B,QACvB,6BAA0B;~~AAMjC~~;;CAEC,GACD,OAAO,SAASC,uBAAuB,EACrCC,QAAQ,EACR,GAAGC,cACyB;IAC5B,MAAMC,eAAeL;IAErB,MAAMM,gBAAgBL,6BAA6B;QAAE,GAAGI,YAAY;QAAE,GAAGD,YAAY;IAAC;IAEtF,qBACE,KAACL,sBAAsBQ,QAAQ;QAACC,OAAOF;kBACpCH;;AAGP"}
1	+ {"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n ConfigProviderContext,\n type ConfigProviderContextInterface,\n useConfigProvider,\n useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {\n /*\n Содержимое.\n /\n children: React.ReactNode;\n}\n\n/\n Компонент предназначен для перебивания одного из значений контекста.\n */\nexport function ConfigProviderOverride({\n children,\n ...contextValue\n}: ConfigProviderOverrideProps): React.ReactNode {\n const parentConfig = useConfigProvider();\n\n const configContext = useConfigProviderContextMemo({ ...parentConfig, ...contextValue });\n\n return (\n <ConfigProviderContext.Provider value={configContext}>\n {children}\n </ConfigProviderContext.Provider>\n );\n}\n"],"names":["React","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProviderOverride","children","contextValue","parentConfig","configContext","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,4BAA4B,QACvB,6BAA0B;AASjC;;CAEC,GACD,OAAO,SAASC,uBAAuB,EACrCC,QAAQ,EACR,GAAGC,cACyB;IAC5B,MAAMC,eAAeL;IAErB,MAAMM,gBAAgBL,6BAA6B;QAAE,GAAGI,YAAY;QAAE,GAAGD,YAAY;IAAC;IAEtF,qBACE,KAACL,sBAAsBQ,QAAQ;QAACC,OAAOF;kBACpCH;;AAGP"}

package/dist/cssm/components/ContentBadge/ContentBadge.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
 import { Caption } from "../Typography/Caption/Caption.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
 import { ContentBadgeContext } from "./ContentBadgeContext.js";
@@ -62,8 +63,9 @@ const sizeClassNames = {
         })
     });
 };
-ContentBadge.displayName = 'ContentBadge';
 ContentBadge.SlotIcon = ContentBadgeSlotIcon;
-ContentBadge.SlotIcon.displayName = 'ContentBadge.SlotIcon';
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(ContentBadge.SlotIcon, 'ContentBadge.SlotIcon');
+}
 //# sourceMappingURL=ContentBadge.js.map

package/dist/cssm/components/ContentBadge/ContentBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport type { TypographyProps } from '../Typography/Typography';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport { ContentBadgeSlotIcon } from './ContentBadgeSlotIcon';\nimport type { ContentBadgeModeType, ContentBadgeSizeType } from './types';\nimport styles from './ContentBadge.module.css';\n\nconst appearanceClassNames = {\n 'accent': {\n primary: styles.primaryAccent,\n secondary: styles.secondaryAccent,\n outline: styles.outlineAccent,\n },\n 'neutral': {\n primary: styles.primaryNeutral,\n secondary: styles.secondaryNeutral,\n outline: styles.outlineNeutral,\n },\n 'accent-green': {\n primary: styles.primaryAccentGreen,\n secondary: styles.secondaryAccentGreen,\n outline: styles.outlineAccentGreen,\n },\n 'accent-red': {\n primary: styles.primaryAccentRed,\n secondary: styles.secondaryAccentRed,\n outline: styles.outlineAccentRed,\n },\n 'overlay': {\n primary: styles.primaryOverlay,\n secondary: styles.secondaryOverlay,\n outline: styles.outlineOverlay,\n },\n};\n\nconst sizeClassNames = {\n s: styles.sizeS,\n m: styles.sizeM,\n l: styles.sizeL,\n};\n\nexport interface ContentBadgeProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n Pick<TypographyProps, 'weight'> {\n /*\n Вид отображения.\n /\n mode?: ContentBadgeModeType;\n /\n Цвет оформления.\n /\n appearance?: 'accent' \| 'neutral' \| 'accent-green' \| 'accent-red' \| 'overlay';\n /\n Включает приближение значения закругления к форме круга.\n \n > Note: игнорируется при size=\"s\"\n /\n capsule?: boolean;\n /\n Определяет отступы и размер текста.\n \n Соответствие размеров иконок в слоте `<ContentBadge.SlotIcon />`:\n \n - size=\"s\" – ⚠️ не поддерживает иконки;\n * - size=\"m\" – при одиночной иконке `16x16`, в остальных случаях `12x12`;\n * - size=\"l\" – при одиночной иконке `20x20`, в остальных случаях `16x16~~`;\~~n /\n size?: ContentBadgeSizeType;\n}\n\n/\n Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются\n * поверх других элементов или рядом с ними.\n \n Используйте `ContentBadge.SlotIcon` для размещения иконок внутри `ContentBadge`.\n \n @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/ContentBadge\n */\nexport const ContentBadge: React.FC<ContentBadgeProps> & {\n SlotIcon: typeof ContentBadgeSlotIcon;\n} = ({\n appearance = 'accent',\n mode = 'primary',\n capsule,\n size = 'm',\n weight = '2',\n className,\n children,\n ...restProps\n}: ContentBadgeProps) => {\n const TypographyComponent = size === 'l' ? Footnote : Caption;\n\n return (\n <TypographyComponent\n {...restProps}\n weight={weight}\n normalize\n className={classNames(\n className,\n styles.host,\n size !== 's' && capsule && styles.capsule,\n mode === 'outline' && styles.modeOutline,\n appearanceClassNames[appearance][mode],\n sizeClassNames[size],\n )}\n >\n <ContentBadgeContext.Provider\n value={{ isSingleChild: React.Children.count(children) === 1, size }}\n >\n {children}\n </ContentBadgeContext.Provider>\n </TypographyComponent>\n );\n};\n\nContentBadge.~~displayName~~ = ~~'ContentBadge'~~;\n\~~nContentBadge~~.~~SlotIcon~~ = ~~ContentBadgeSlotIcon;\nContentBadge~~.SlotIcon~~.displayName~~ = 'ContentBadge.SlotIcon';\n"],"names":["React","classNames","Caption","Footnote","ContentBadgeContext","ContentBadgeSlotIcon","styles","appearanceClassNames","primary","primaryAccent","secondary","secondaryAccent","outline","outlineAccent","primaryNeutral","secondaryNeutral","outlineNeutral","primaryAccentGreen","secondaryAccentGreen","outlineAccentGreen","primaryAccentRed","secondaryAccentRed","outlineAccentRed","primaryOverlay","secondaryOverlay","outlineOverlay","sizeClassNames","s","sizeS","m","sizeM","l","sizeL","ContentBadge","appearance","mode","capsule","size","weight","className","children","restProps","TypographyComponent","normalize","host","modeOutline","Provider","value","isSingleChild","Children","count","~~displayName~~","~~SlotIcon~~"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;~~AAE7C~~,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAE3D,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAE9D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,uBAAuB;IAC3B,UAAU;QACRC,SAASF,OAAOG,aAAa;QAC7BC,WAAWJ,OAAOK,eAAe;QACjCC,SAASN,OAAOO,aAAa;IAC/B;IACA,WAAW;QACTL,SAASF,OAAOQ,cAAc;QAC9BJ,WAAWJ,OAAOS,gBAAgB;QAClCH,SAASN,OAAOU,cAAc;IAChC;IACA,gBAAgB;QACdR,SAASF,OAAOW,kBAAkB;QAClCP,WAAWJ,OAAOY,oBAAoB;QACtCN,SAASN,OAAOa,kBAAkB;IACpC;IACA,cAAc;QACZX,SAASF,OAAOc,gBAAgB;QAChCV,WAAWJ,OAAOe,kBAAkB;QACpCT,SAASN,OAAOgB,gBAAgB;IAClC;IACA,WAAW;QACTd,SAASF,OAAOiB,cAAc;QAC9Bb,WAAWJ,OAAOkB,gBAAgB;QAClCZ,SAASN,OAAOmB,cAAc;IAChC;AACF;AAEA,MAAMC,iBAAiB;IACrBC,GAAGrB,OAAOsB,KAAK;IACfC,GAAGvB,OAAOwB,KAAK;IACfC,GAAGzB,OAAO0B,KAAK;AACjB;AA+BA;;;;;;;;CAQC,GACD,OAAO,MAAMC,eAET,CAAC,EACHC,aAAa,QAAQ,EACrBC,OAAO,SAAS,EAChBC,OAAO,EACPC,OAAO,GAAG,EACVC,SAAS,GAAG,EACZC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACe;IAClB,MAAMC,sBAAsBL,SAAS,MAAMlC,WAAWD;IAEtD,qBACE,KAACwC;QACE,GAAGD,SAAS;QACbH,QAAQA;QACRK,SAAS;QACTJ,~~WAAWtC~~,~~WACTsC~~,WACAjC,OAAOsC,IAAI,EACXP,SAAS,OAAOD,WAAW9B,OAAO8B,OAAO,EACzCD,SAAS,aAAa7B,OAAOuC,WAAW,EACxCtC,oBAAoB,CAAC2B,WAAW,CAACC,KAAK,EACtCT,cAAc,CAACW,KAAK;kBAGtB,cAAA,KAACjC,oBAAoB0C,QAAQ;YAC3BC,OAAO;gBAAEC,~~eAAehD~~,~~MAAMiD~~,QAAQ,CAACC,KAAK,CAACV,cAAc;gBAAGH;YAAK;sBAElEG;;;AAIT,EAAE;AAEFP,aAAakB,~~WAAW~~,~~GAAG~~;~~AAE3BlB~~,~~aAAamB~~,~~QAAQ~~,GAAG~~/C;AACxB4B~~,~~aAAamB~~,QAAQ,~~CAACD~~,~~WAAW~~,~~GAAG~~"}
1	+ {"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport type { TypographyProps } from '../Typography/Typography';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport { ContentBadgeSlotIcon } from './ContentBadgeSlotIcon';\nimport type { ContentBadgeModeType, ContentBadgeSizeType } from './types';\nimport styles from './ContentBadge.module.css';\n\nconst appearanceClassNames = {\n 'accent': {\n primary: styles.primaryAccent,\n secondary: styles.secondaryAccent,\n outline: styles.outlineAccent,\n },\n 'neutral': {\n primary: styles.primaryNeutral,\n secondary: styles.secondaryNeutral,\n outline: styles.outlineNeutral,\n },\n 'accent-green': {\n primary: styles.primaryAccentGreen,\n secondary: styles.secondaryAccentGreen,\n outline: styles.outlineAccentGreen,\n },\n 'accent-red': {\n primary: styles.primaryAccentRed,\n secondary: styles.secondaryAccentRed,\n outline: styles.outlineAccentRed,\n },\n 'overlay': {\n primary: styles.primaryOverlay,\n secondary: styles.secondaryOverlay,\n outline: styles.outlineOverlay,\n },\n};\n\nconst sizeClassNames = {\n s: styles.sizeS,\n m: styles.sizeM,\n l: styles.sizeL,\n};\n\nexport interface ContentBadgeProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n Pick<TypographyProps, 'weight'> {\n /*\n Вид отображения.\n /\n mode?: ContentBadgeModeType;\n /\n Цвет оформления.\n /\n appearance?: 'accent' \| 'neutral' \| 'accent-green' \| 'accent-red' \| 'overlay';\n /\n Включает приближение значения закругления к форме круга.\n \n > Note: игнорируется при size=\"s\".\n /\n capsule?: boolean;\n /\n Определяет отступы и размер текста.\n \n Соответствие размеров иконок в слоте `<ContentBadge.SlotIcon />`:\n \n - size=\"s\" – ⚠️ не поддерживает иконки;\n * - size=\"m\" – при одиночной иконке `16x16`, в остальных случаях `12x12`;\n * - size=\"l\" – при одиночной иконке `20x20`, в остальных случаях `16x16`.\n /\n size?: ContentBadgeSizeType;\n}\n\n/\n Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются\n * поверх других элементов или рядом с ними.\n \n Используйте `ContentBadge.SlotIcon` для размещения иконок внутри `ContentBadge`.\n \n @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/ContentBadge\n */\nexport const ContentBadge: React.FC<ContentBadgeProps> & {\n SlotIcon: typeof ContentBadgeSlotIcon;\n} = ({\n appearance = 'accent',\n mode = 'primary',\n capsule,\n size = 'm',\n weight = '2',\n className,\n children,\n ...restProps\n}: ContentBadgeProps) => {\n const TypographyComponent = size === 'l' ? Footnote : Caption;\n\n return (\n <TypographyComponent\n {...restProps}\n weight={weight}\n normalize\n className={classNames(\n className,\n styles.host,\n size !== 's' && capsule && styles.capsule,\n mode === 'outline' && styles.modeOutline,\n appearanceClassNames[appearance][mode],\n sizeClassNames[size],\n )}\n >\n <ContentBadgeContext.Provider\n value={{ isSingleChild: React.Children.count(children) === 1, size }}\n >\n {children}\n </ContentBadgeContext.Provider>\n </TypographyComponent>\n );\n};\n\nContentBadge.SlotIcon = ContentBadgeSlotIcon;\n\nif (process.env.NODE_ENV !== 'production') {\n defineComponentDisplayNames(ContentBadge.SlotIcon, 'ContentBadge.SlotIcon');\n}\n"],"names":["React","classNames","defineComponentDisplayNames","Caption","Footnote","ContentBadgeContext","ContentBadgeSlotIcon","styles","appearanceClassNames","primary","primaryAccent","secondary","secondaryAccent","outline","outlineAccent","primaryNeutral","secondaryNeutral","outlineNeutral","primaryAccentGreen","secondaryAccentGreen","outlineAccentGreen","primaryAccentRed","secondaryAccentRed","outlineAccentRed","primaryOverlay","secondaryOverlay","outlineOverlay","sizeClassNames","s","sizeS","m","sizeM","l","sizeL","ContentBadge","appearance","mode","capsule","size","weight","className","children","restProps","TypographyComponent","normalize","host","modeOutline","Provider","value","isSingleChild","Children","count","SlotIcon","process","env","NODE_ENV"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAE3D,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAE9D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,uBAAuB;IAC3B,UAAU;QACRC,SAASF,OAAOG,aAAa;QAC7BC,WAAWJ,OAAOK,eAAe;QACjCC,SAASN,OAAOO,aAAa;IAC/B;IACA,WAAW;QACTL,SAASF,OAAOQ,cAAc;QAC9BJ,WAAWJ,OAAOS,gBAAgB;QAClCH,SAASN,OAAOU,cAAc;IAChC;IACA,gBAAgB;QACdR,SAASF,OAAOW,kBAAkB;QAClCP,WAAWJ,OAAOY,oBAAoB;QACtCN,SAASN,OAAOa,kBAAkB;IACpC;IACA,cAAc;QACZX,SAASF,OAAOc,gBAAgB;QAChCV,WAAWJ,OAAOe,kBAAkB;QACpCT,SAASN,OAAOgB,gBAAgB;IAClC;IACA,WAAW;QACTd,SAASF,OAAOiB,cAAc;QAC9Bb,WAAWJ,OAAOkB,gBAAgB;QAClCZ,SAASN,OAAOmB,cAAc;IAChC;AACF;AAEA,MAAMC,iBAAiB;IACrBC,GAAGrB,OAAOsB,KAAK;IACfC,GAAGvB,OAAOwB,KAAK;IACfC,GAAGzB,OAAO0B,KAAK;AACjB;AA+BA;;;;;;;;CAQC,GACD,OAAO,MAAMC,eAET,CAAC,EACHC,aAAa,QAAQ,EACrBC,OAAO,SAAS,EAChBC,OAAO,EACPC,OAAO,GAAG,EACVC,SAAS,GAAG,EACZC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACe;IAClB,MAAMC,sBAAsBL,SAAS,MAAMlC,WAAWD;IAEtD,qBACE,KAACwC;QACE,GAAGD,SAAS;QACbH,QAAQA;QACRK,SAAS;QACTJ,WAAWvC,WACTuC,WACAjC,OAAOsC,IAAI,EACXP,SAAS,OAAOD,WAAW9B,OAAO8B,OAAO,EACzCD,SAAS,aAAa7B,OAAOuC,WAAW,EACxCtC,oBAAoB,CAAC2B,WAAW,CAACC,KAAK,EACtCT,cAAc,CAACW,KAAK;kBAGtB,cAAA,KAACjC,oBAAoB0C,QAAQ;YAC3BC,OAAO;gBAAEC,eAAejD,MAAMkD,QAAQ,CAACC,KAAK,CAACV,cAAc;gBAAGH;YAAK;sBAElEG;;;AAIT,EAAE;AAEFP,aAAakB,QAAQ,GAAG9C;AAExB,IAAI+C,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCrD,4BAA4BgC,aAAakB,QAAQ,EAAE;AACrD"}

package/dist/cssm/components/ContentBadge/ContentBadgeContext.js CHANGED Viewed

@@ -1,5 +1,5 @@
 'use client';
-import * as React from "react";
+/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
 /**
  * Контекст для внутреннего использовния.
  * @private

package/dist/cssm/components/ContentBadge/ContentBadgeContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadgeContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ContentBadgeSizeType } from './types';\n\ntype ContentBadgeContextValue = {\n isSingleChild: boolean;\n size: ContentBadgeSizeType;\n};\n\n/*\n Контекст для внутреннего использовния.\n * @private\n */\nexport const ContentBadgeContext: React.Context<ContentBadgeContextValue> =\n React.createContext<ContentBadgeContextValue>({\n isSingleChild: false,\n size: 'm',\n });\n"],"names":["React","ContentBadgeContext","createContext","isSingleChild","size"],"mappings":"AAAA;~~AAEA~~,YAAYA,WAAW,QAAQ;AAQ/B;;;CAGC,GACD,OAAO,MAAMC,oCACXD,MAAME,aAAa,CAA2B;IAC5CC,eAAe;IACfC,MAAM;AACR,GAAG"}
1	+ {"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadgeContext.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc /\n\nimport as React from 'react';\nimport type { ContentBadgeSizeType } from './types';\n\ntype ContentBadgeContextValue = {\n isSingleChild: boolean;\n size: ContentBadgeSizeType;\n};\n\n/*\n Контекст для внутреннего использовния.\n * @private\n */\nexport const ContentBadgeContext: React.Context<ContentBadgeContextValue> =\n React.createContext<ContentBadgeContextValue>({\n isSingleChild: false,\n size: 'm',\n });\n"],"names":["React","ContentBadgeContext","createContext","isSingleChild","size"],"mappings":"AAAA;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAQ/B;;;CAGC,GACD,OAAO,MAAMC,oCACXD,MAAME,aAAa,CAA2B;IAC5CC,eAAe;IACfC,MAAM;AACR,GAAG"}

package/dist/cssm/components/ContentBadge/ContentBadgeSlotIcon.js CHANGED Viewed

@@ -24,6 +24,5 @@ export const ContentBadgeSlotIcon = ({ className, getRootRef, children, ...restP
         children: children
     });
 };
-ContentBadgeSlotIcon.displayName = 'ContentBadgeSlotIcon';
 //# sourceMappingURL=ContentBadgeSlotIcon.js.map

package/dist/cssm/components/ContentBadge/ContentBadgeSlotIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadgeSlotIcon.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport styles from './ContentBadge.module.css';\n\nconst iconsClassNames = {\n m: null,\n l: styles.iconSlotSizeL,\n};\n\nconst singleIconClassNames = {\n m: styles.singleIconSlotSizeM,\n l: styles.singleIconSlotSizeL,\n};\n\nexport type ContentBadgeSlotIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nexport const ContentBadgeSlotIcon: ~~React.FC<ContentBadgeSlotIconProps>~~ = ({\n className,\n getRootRef,\n children,\n ...restProps\n}: ContentBadgeSlotIconProps) => {\n const { size, isSingleChild } = React.useContext(ContentBadgeContext);\n\n if (size === 's') {\n return null;\n }\n\n return (\n <div\n ref={getRootRef}\n className={classNames(\n className,\n isSingleChild ? singleIconClassNames[size] : iconsClassNames[size],\n )}\n {...restProps}\n >\n {children}\n </div>\n );\n};\n~~\nContentBadgeSlotIcon.displayName = 'ContentBadgeSlotIcon';\n~~"],"names":["React","classNames","ContentBadgeContext","styles","iconsClassNames","m","l","iconSlotSizeL","singleIconClassNames","singleIconSlotSizeM","singleIconSlotSizeL","ContentBadgeSlotIcon","className","getRootRef","children","restProps","size","isSingleChild","useContext","div","ref"~~,"displayName"~~],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,GAAGH,OAAOI,aAAa;AACzB;AAEA,MAAMC,uBAAuB;IAC3BH,GAAGF,OAAOM,mBAAmB;IAC7BH,GAAGH,OAAOO,mBAAmB;AAC/B;AAIA,OAAO,MAAMC,~~uBAA4D~~,CAAC,~~EACxEC~~,SAAS,EACTC,UAAU,EACVC,QAAQ,EACR,GAAGC,WACuB;IAC1B,MAAM,EAAEC,IAAI,EAAEC,aAAa,EAAE,GAAGjB,MAAMkB,UAAU,CAAChB;IAEjD,IAAIc,SAAS,KAAK;QAChB,OAAO;IACT;IAEA,qBACE,KAACG;QACCC,KAAKP;QACLD,WAAWX,WACTW,WACAK,gBAAgBT,oBAAoB,CAACQ,KAAK,GAAGZ,eAAe,CAACY,KAAK;QAEnE,GAAGD,SAAS;kBAEZD;;AAGP,EAAE~~;AAEFH,qBAAqBU,WAAW,GAAG~~"}
1	+ {"version":3,"sources":["../../../../src/components/ContentBadge/ContentBadgeSlotIcon.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport styles from './ContentBadge.module.css';\n\nconst iconsClassNames = {\n m: null,\n l: styles.iconSlotSizeL,\n};\n\nconst singleIconClassNames = {\n m: styles.singleIconSlotSizeM,\n l: styles.singleIconSlotSizeL,\n};\n\nexport type ContentBadgeSlotIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nexport const ContentBadgeSlotIcon = ({\n className,\n getRootRef,\n children,\n ...restProps\n}: ContentBadgeSlotIconProps) => {\n const { size, isSingleChild } = React.useContext(ContentBadgeContext);\n\n if (size === 's') {\n return null;\n }\n\n return (\n <div\n ref={getRootRef}\n className={classNames(\n className,\n isSingleChild ? singleIconClassNames[size] : iconsClassNames[size],\n )}\n {...restProps}\n >\n {children}\n </div>\n );\n};\n"],"names":["React","classNames","ContentBadgeContext","styles","iconsClassNames","m","l","iconSlotSizeL","singleIconClassNames","singleIconSlotSizeM","singleIconSlotSizeL","ContentBadgeSlotIcon","className","getRootRef","children","restProps","size","isSingleChild","useContext","div","ref"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,GAAGH,OAAOI,aAAa;AACzB;AAEA,MAAMC,uBAAuB;IAC3BH,GAAGF,OAAOM,mBAAmB;IAC7BH,GAAGH,OAAOO,mBAAmB;AAC/B;AAIA,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACR,GAAGC,WACuB;IAC1B,MAAM,EAAEC,IAAI,EAAEC,aAAa,EAAE,GAAGjB,MAAMkB,UAAU,CAAChB;IAEjD,IAAIc,SAAS,KAAK;QAChB,OAAO;IACT;IAEA,qBACE,KAACG;QACCC,KAAKP;QACLD,WAAWX,WACTW,WACAK,gBAAgBT,oBAAoB,CAACQ,KAAK,GAAGZ,eAAe,CAACY,KAAK;QAEnE,GAAGD,SAAS;kBAEZD;;AAGP,EAAE"}

package/dist/cssm/components/ContentCard/ContentCard.js CHANGED Viewed

@@ -21,10 +21,10 @@ getRef, maxHeight, src, srcSet, alt = '', width = '100%', height, crossOrigin, d
         style: style,
         className: classNames(restProps.disabled && styles.disabled, className),
         children: /*#__PURE__*/ _jsxs(Tappable, {
-            ...restProps,
             hasHover: hasHover,
             hasActive: hasActive,
-            className: styles.tappable,
+            ...restProps,
+            baseClassName: styles.tappable,
             children: [
                 (src || srcSet) && /*#__PURE__*/ _jsx("img", {
                     ref: getRef,

package/dist/cssm/components/ContentCard/ContentCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n extends HasRootRef<HTMLDivElement>,\n HasComponent,\n Omit<TappableProps, 'getRootRef' \| 'crossOrigin' \| 'title'>,\n Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n HasRef<HTMLImageElement> {\n /*\n Текст над ~~заголовком\~~n /\n overTitle?: React.ReactNode;\n /*\n ~~Заголовок\~~n /\n title?: React.ReactNode;\n /*\n Позволяет поменять тег используемый для ~~заголовка\~~n /\n titleComponent?: React.ElementType;\n /*\n ~~Текст\~~n /\n description?: React.ReactNode;\n /*\n Нижний ~~текст\~~n /\n caption?: React.ReactNode;\n /*\n Максимальная высота ~~изображения\~~n /\n maxHeight?: number;\n mode?: CardProps['mode'];\n /*\n Пользовательское значения стиля `object-fit` для картинки\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n /\n imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n overTitle,\n title,\n titleComponent = 'span',\n description,\n caption,\n // card props\n className,\n mode = 'shadow',\n style,\n getRootRef,\n // img props\n getRef,\n maxHeight,\n src,\n srcSet,\n alt = '',\n width = '100%',\n height,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n useMap,\n fetchPriority,\n imageObjectFit,\n hasHover = false,\n hasActive = false,\n Component = 'li',\n ...restProps\n}: ContentCardProps): React.ReactNode => {\n return (\n <Card\n mode={mode}\n getRootRef={getRootRef}\n Component={Component}\n style={style}\n className={classNames(restProps.disabled && styles.disabled, className)}\n >\n <Tappable\n ~~{...restProps}\n~~ hasHover={hasHover}\n hasActive={hasActive}\n ~~className~~={styles.tappable}\n >\n {(src \|\| srcSet) && (\n <img\n ref={getRef}\n className={styles.img}\n src={src}\n srcSet={srcSet}\n alt={alt}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n useMap={useMap}\n {...getFetchPriorityProp(fetchPriority)}\n height={height}\n width={width}\n style={{ maxHeight, objectFit: imageObjectFit }}\n />\n )}\n <div className={styles.body}>\n {hasReactNode(overTitle) && (\n <Caption\n className={classNames(styles.text, styles.overTitle)}\n weight=\"1\"\n level=\"3\"\n caps\n >\n {overTitle}\n </Caption>\n )}\n {hasReactNode(title) && (\n <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n {title}\n </Headline>\n )}\n {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n {hasReactNode(caption) && (\n <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n )}\n </div>\n </Tappable>\n </Card>\n );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","imageObjectFit","hasHover","hasActive","Component","restProps","disabled","tappable","img","ref","objectFit","div","body","text","weight","level","caps"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;~~AAwC9C~~;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;AACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;AACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAChB,GAAGC,WACc;IACjB,qBACE,KAACnC;QACCc,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWhB,WAAWsC,UAAUC,QAAQ,IAAI9B,OAAO8B,QAAQ,EAAEvB;kBAE7D,cAAA,MAACZ;~~YACE~~,~~GAAGkC,SAAS;YACbH,~~UAAUA;YACVC,WAAWA;~~YACXpB~~,~~WAAWP~~,~~OAAO+~~B,QAAQ;;~~gBAExBlB~~,CAAAA,OAAOC,MAAK,mBACZ,~~KAACkB~~;oBACCC,~~KAAKtB~~;oBACLJ,WAAWP,~~OAAOgC~~,GAAG;~~oBACrBnB~~,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG9B,qBAAqB+B,cAAc;oBACvCP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;~~wBAAWsB~~,~~WAAWT~~;oBAAe;;8BAGlD,~~MAACU~~;~~oBAAI5B~~,WAAWP,~~OAAOoC~~,IAAI;;~~wBACxB5C~~,aAAaU,4BACZ,KAACN;4BACCW,WAAWhB,WAAWS,~~OAAOqC~~,IAAI,~~EAAErC~~,OAAOE,SAAS;~~4BACnDoC~~,QAAO;4BACPC,OAAM;4BACNC,IAAI;~~sCAEHtC~~;;wBAGJV,aAAaW,wBACZ,KAACL;4BAASS,WAAWP,~~OAAOqC~~,IAAI;4BAAEC,QAAO;4BAAIC,OAAM;~~4BAAIX~~,WAAWxB;sCAC/DD;;wBAGJX,aAAaa,8BAAgB,KAACN;4BAAKQ,WAAWP,~~OAAOqC~~,IAAI;~~sCAAGhC~~;;wBAC5Db,aAAac,0BACZ,KAACT;4BAASU,WAAWhB,WAAWS,~~OAAOqC~~,IAAI,~~EAAErC~~,OAAOM,OAAO;sCAAIA;;;;;;;AAM3E,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n extends HasRootRef<HTMLDivElement>,\n HasComponent,\n Omit<TappableProps, 'getRootRef' \| 'crossOrigin' \| 'title'>,\n Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n HasRef<HTMLImageElement> {\n /*\n Текст над заголовком.\n /\n overTitle?: React.ReactNode;\n /*\n Заголовок.\n /\n title?: React.ReactNode;\n /*\n Позволяет поменять тег используемый для заголовка.\n /\n titleComponent?: React.ElementType;\n /*\n Текст.\n /\n description?: React.ReactNode;\n /*\n Нижний текст.\n /\n caption?: React.ReactNode;\n /*\n Максимальная высота изображения.\n /\n maxHeight?: number;\n /*\n Внешний вид карточки.\n /\n mode?: CardProps['mode'];\n /\n Пользовательское значения стиля `object-fit` для картинки\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n /\n imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n overTitle,\n title,\n titleComponent = 'span',\n description,\n caption,\n // card props\n className,\n mode = 'shadow',\n style,\n getRootRef,\n // img props\n getRef,\n maxHeight,\n src,\n srcSet,\n alt = '',\n width = '100%',\n height,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n useMap,\n fetchPriority,\n imageObjectFit,\n hasHover = false,\n hasActive = false,\n Component = 'li',\n ...restProps\n}: ContentCardProps): React.ReactNode => {\n return (\n <Card\n mode={mode}\n getRootRef={getRootRef}\n Component={Component}\n style={style}\n className={classNames(restProps.disabled && styles.disabled, className)}\n >\n <Tappable\n hasHover={hasHover}\n hasActive={hasActive}\n {...restProps}\n baseClassName={styles.tappable}\n >\n {(src \|\| srcSet) && (\n <img\n ref={getRef}\n className={styles.img}\n src={src}\n srcSet={srcSet}\n alt={alt}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n useMap={useMap}\n {...getFetchPriorityProp(fetchPriority)}\n height={height}\n width={width}\n style={{ maxHeight, objectFit: imageObjectFit }}\n />\n )}\n <div className={styles.body}>\n {hasReactNode(overTitle) && (\n <Caption\n className={classNames(styles.text, styles.overTitle)}\n weight=\"1\"\n level=\"3\"\n caps\n >\n {overTitle}\n </Caption>\n )}\n {hasReactNode(title) && (\n <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n {title}\n </Headline>\n )}\n {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n {hasReactNode(caption) && (\n <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n )}\n </div>\n </Tappable>\n </Card>\n );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","imageObjectFit","hasHover","hasActive","Component","restProps","disabled","baseClassName","tappable","img","ref","objectFit","div","body","text","weight","level","caps"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;AA2C9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;AACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;AACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAChB,GAAGC,WACc;IACjB,qBACE,KAACnC;QACCc,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWhB,WAAWsC,UAAUC,QAAQ,IAAI9B,OAAO8B,QAAQ,EAAEvB;kBAE7D,cAAA,MAACZ;YACC+B,UAAUA;YACVC,WAAWA;YACV,GAAGE,SAAS;YACbE,eAAe/B,OAAOgC,QAAQ;;gBAE5BnB,CAAAA,OAAOC,MAAK,mBACZ,KAACmB;oBACCC,KAAKvB;oBACLJ,WAAWP,OAAOiC,GAAG;oBACrBpB,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG9B,qBAAqB+B,cAAc;oBACvCP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWuB,WAAWV;oBAAe;;8BAGlD,MAACW;oBAAI7B,WAAWP,OAAOqC,IAAI;;wBACxB7C,aAAaU,4BACZ,KAACN;4BACCW,WAAWhB,WAAWS,OAAOsC,IAAI,EAAEtC,OAAOE,SAAS;4BACnDqC,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHvC;;wBAGJV,aAAaW,wBACZ,KAACL;4BAASS,WAAWP,OAAOsC,IAAI;4BAAEC,QAAO;4BAAIC,OAAM;4BAAIZ,WAAWxB;sCAC/DD;;wBAGJX,aAAaa,8BAAgB,KAACN;4BAAKQ,WAAWP,OAAOsC,IAAI;sCAAGjC;;wBAC5Db,aAAac,0BACZ,KAACT;4BAASU,WAAWhB,WAAWS,OAAOsC,IAAI,EAAEtC,OAAOM,OAAO;sCAAIA;;;;;;;AAM3E,EAAE"}

package/dist/cssm/components/Counter/Counter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { type CSSCustomProperties, type HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n primary: styles.modePrimary,\n contrast: styles.modeContrast,\n tertiary: styles.modeTertiary,\n inherit: styles.modeInherit,\n};\n\nconst appearanceClassNames: Record<string, string> = {\n 'custom': styles.appearanceCustom,\n 'accent': styles.appearanceAccent,\n 'neutral': styles.appearanceNeutral,\n 'accent-green': styles.appearanceAccentGreen,\n 'accent-red': styles.appearanceAccentRed,\n};\n\nconst sizeClassNames = {\n s: styles.sizeS,\n m: styles.sizeM,\n};\n\nexport interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n /*\n Режим отображения ~~счетчика\~~n /\n mode?: 'primary' \| 'contrast' \| 'tertiary' \| 'inherit';\n\n /\n Внешний вид ~~счетчика\~~n /\n appearance?: 'accent' \| 'neutral' \| 'accent-green' \| 'accent-red' \| 'custom';\n\n /\n Пользовательский цвет (работает только при appearance=\"custom\")\n * - При mode=\"primary\" - изменяет фон\n * - При mode=\"contrast\" - изменяет цвет текста\n * - При mode=\"tertiary\" - изменяет цвет текста\n * - При mode=\"inherit\" - не ~~работает\~~n /\n color?: string;\n\n size?: 's' \| 'm';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n mode = 'inherit',\n appearance: appearanceProp,\n color,\n size = 'm',\n children,\n className,\n style: styleProp,\n ...restProps\n}: CounterProps): React.ReactNode => {\n const appearance = React.useMemo<CounterProps['appearance']>(() => {\n if (mode === 'inherit') {\n return undefined;\n }\n if (appearanceProp) {\n return appearanceProp;\n }\n return 'accent';\n }, [appearanceProp, mode]);\n\n const style: (React.CSSProperties & CSSCustomProperties<string \| undefined>) \| undefined =\n React.useMemo(() => {\n if (mode === 'inherit' \|\| appearance !== 'custom' \|\| !color) {\n return undefined;\n }\n switch (mode) {\n case 'primary':\n return {\n '--vkui_internal--counter_background': color,\n };\n case 'contrast':\n case 'tertiary':\n return {\n '--vkui_internal--counter_foreground': color,\n };\n }\n }, [appearance, color, mode]);\n\n if (React.Children.count(children) === 0) {\n return null;\n }\n\n const CounterTypography = size === 's' ? Caption : Headline;\n const counterLevel = size === 's' ? '1' : '2';\n\n return (\n <CounterTypography\n {...restProps}\n style={mergeStyle(style, styleProp)}\n Component=\"span\"\n className={classNames(\n 'vkuiInternalCounter',\n styles.host,\n modeClassNames[mode],\n !!appearance && appearanceClassNames[appearance],\n sizeClassNames[size],\n className,\n )}\n level={counterLevel}\n >\n {children}\n </CounterTypography>\n );\n};\n"],"names":["React","classNames","mergeStyle","Caption","Headline","styles","modeClassNames","primary","modePrimary","contrast","modeContrast","tertiary","modeTertiary","inherit","modeInherit","appearanceClassNames","appearanceCustom","appearanceAccent","appearanceNeutral","appearanceAccentGreen","appearanceAccentRed","sizeClassNames","s","sizeS","m","sizeM","Counter","mode","appearance","appearanceProp","color","size","children","className","style","styleProp","restProps","useMemo","undefined","Children","count","CounterTypography","counterLevel","Component","host","level"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,SAASF,OAAOG,WAAW;IAC3BC,UAAUJ,OAAOK,YAAY;IAC7BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,uBAA+C;IACnD,UAAUV,OAAOW,gBAAgB;IACjC,UAAUX,OAAOY,gBAAgB;IACjC,WAAWZ,OAAOa,iBAAiB;IACnC,gBAAgBb,OAAOc,qBAAqB;IAC5C,cAAcd,OAAOe,mBAAmB;AAC1C;AAEA,MAAMC,iBAAiB;IACrBC,GAAGjB,OAAOkB,KAAK;IACfC,GAAGnB,OAAOoB,KAAK;AACjB;~~AAyBA~~;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,OAAO,SAAS,EAChBC,YAAYC,cAAc,EAC1BC,KAAK,EACLC,OAAO,GAAG,EACVC,QAAQ,EACRC,SAAS,EACTC,OAAOC,SAAS,EAChB,GAAGC,WACU;IACb,MAAMR,aAAa5B,MAAMqC,OAAO,CAA6B;QAC3D,IAAIV,SAAS,WAAW;YACtB,OAAOW;QACT;QACA,IAAIT,gBAAgB;YAClB,OAAOA;QACT;QACA,OAAO;IACT,GAAG;QAACA;QAAgBF;KAAK;IAEzB,MAAMO,QACJlC,MAAMqC,OAAO,CAAC;QACZ,IAAIV,SAAS,aAAaC,eAAe,YAAY,CAACE,OAAO;YAC3D,OAAOQ;QACT;QACA,OAAQX;YACN,KAAK;gBACH,OAAO;oBACL,uCAAuCG;gBACzC;YACF,KAAK;YACL,KAAK;gBACH,OAAO;oBACL,uCAAuCA;gBACzC;QACJ;IACF,GAAG;QAACF;QAAYE;QAAOH;KAAK;IAE9B,IAAI3B,MAAMuC,QAAQ,CAACC,KAAK,CAACR,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMS,oBAAoBV,SAAS,MAAM5B,UAAUC;IACnD,MAAMsC,eAAeX,SAAS,MAAM,MAAM;IAE1C,qBACE,KAACU;QACE,GAAGL,SAAS;QACbF,OAAOhC,WAAWgC,OAAOC;QACzBQ,WAAU;QACVV,WAAWhC,WACT,uBACAI,OAAOuC,IAAI,EACXtC,cAAc,CAACqB,KAAK,EACpB,CAAC,CAACC,cAAcb,oBAAoB,CAACa,WAAW,EAChDP,cAAc,CAACU,KAAK,EACpBE;QAEFY,OAAOH;kBAENV;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { type CSSCustomProperties, type HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n primary: styles.modePrimary,\n contrast: styles.modeContrast,\n tertiary: styles.modeTertiary,\n inherit: styles.modeInherit,\n};\n\nconst appearanceClassNames: Record<string, string> = {\n 'custom': styles.appearanceCustom,\n 'accent': styles.appearanceAccent,\n 'neutral': styles.appearanceNeutral,\n 'accent-green': styles.appearanceAccentGreen,\n 'accent-red': styles.appearanceAccentRed,\n};\n\nconst sizeClassNames = {\n s: styles.sizeS,\n m: styles.sizeM,\n};\n\nexport interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n /*\n Режим отображения счетчика.\n /\n mode?: 'primary' \| 'contrast' \| 'tertiary' \| 'inherit';\n\n /\n Внешний вид счетчика.\n /\n appearance?: 'accent' \| 'neutral' \| 'accent-green' \| 'accent-red' \| 'custom';\n\n /\n Пользовательский цвет (работает только при appearance=\"custom\")\n * - При mode=\"primary\" - изменяет фон\n * - При mode=\"contrast\" - изменяет цвет текста\n * - При mode=\"tertiary\" - изменяет цвет текста\n * - При mode=\"inherit\" - не работает.\n /\n color?: string;\n /\n Размер счетчика.\n /\n size?: 's' \| 'm';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n mode = 'inherit',\n appearance: appearanceProp,\n color,\n size = 'm',\n children,\n className,\n style: styleProp,\n ...restProps\n}: CounterProps): React.ReactNode => {\n const appearance = React.useMemo<CounterProps['appearance']>(() => {\n if (mode === 'inherit') {\n return undefined;\n }\n if (appearanceProp) {\n return appearanceProp;\n }\n return 'accent';\n }, [appearanceProp, mode]);\n\n const style: (React.CSSProperties & CSSCustomProperties<string \| undefined>) \| undefined =\n React.useMemo(() => {\n if (mode === 'inherit' \|\| appearance !== 'custom' \|\| !color) {\n return undefined;\n }\n switch (mode) {\n case 'primary':\n return {\n '--vkui_internal--counter_background': color,\n };\n case 'contrast':\n case 'tertiary':\n return {\n '--vkui_internal--counter_foreground': color,\n };\n }\n }, [appearance, color, mode]);\n\n if (React.Children.count(children) === 0) {\n return null;\n }\n\n const CounterTypography = size === 's' ? Caption : Headline;\n const counterLevel = size === 's' ? '1' : '2';\n\n return (\n <CounterTypography\n {...restProps}\n style={mergeStyle(style, styleProp)}\n Component=\"span\"\n className={classNames(\n 'vkuiInternalCounter',\n styles.host,\n modeClassNames[mode],\n !!appearance && appearanceClassNames[appearance],\n sizeClassNames[size],\n className,\n )}\n level={counterLevel}\n >\n {children}\n </CounterTypography>\n );\n};\n"],"names":["React","classNames","mergeStyle","Caption","Headline","styles","modeClassNames","primary","modePrimary","contrast","modeContrast","tertiary","modeTertiary","inherit","modeInherit","appearanceClassNames","appearanceCustom","appearanceAccent","appearanceNeutral","appearanceAccentGreen","appearanceAccentRed","sizeClassNames","s","sizeS","m","sizeM","Counter","mode","appearance","appearanceProp","color","size","children","className","style","styleProp","restProps","useMemo","undefined","Children","count","CounterTypography","counterLevel","Component","host","level"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,SAASF,OAAOG,WAAW;IAC3BC,UAAUJ,OAAOK,YAAY;IAC7BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,uBAA+C;IACnD,UAAUV,OAAOW,gBAAgB;IACjC,UAAUX,OAAOY,gBAAgB;IACjC,WAAWZ,OAAOa,iBAAiB;IACnC,gBAAgBb,OAAOc,qBAAqB;IAC5C,cAAcd,OAAOe,mBAAmB;AAC1C;AAEA,MAAMC,iBAAiB;IACrBC,GAAGjB,OAAOkB,KAAK;IACfC,GAAGnB,OAAOoB,KAAK;AACjB;AA2BA;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,OAAO,SAAS,EAChBC,YAAYC,cAAc,EAC1BC,KAAK,EACLC,OAAO,GAAG,EACVC,QAAQ,EACRC,SAAS,EACTC,OAAOC,SAAS,EAChB,GAAGC,WACU;IACb,MAAMR,aAAa5B,MAAMqC,OAAO,CAA6B;QAC3D,IAAIV,SAAS,WAAW;YACtB,OAAOW;QACT;QACA,IAAIT,gBAAgB;YAClB,OAAOA;QACT;QACA,OAAO;IACT,GAAG;QAACA;QAAgBF;KAAK;IAEzB,MAAMO,QACJlC,MAAMqC,OAAO,CAAC;QACZ,IAAIV,SAAS,aAAaC,eAAe,YAAY,CAACE,OAAO;YAC3D,OAAOQ;QACT;QACA,OAAQX;YACN,KAAK;gBACH,OAAO;oBACL,uCAAuCG;gBACzC;YACF,KAAK;YACL,KAAK;gBACH,OAAO;oBACL,uCAAuCA;gBACzC;QACJ;IACF,GAAG;QAACF;QAAYE;QAAOH;KAAK;IAE9B,IAAI3B,MAAMuC,QAAQ,CAACC,KAAK,CAACR,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMS,oBAAoBV,SAAS,MAAM5B,UAAUC;IACnD,MAAMsC,eAAeX,SAAS,MAAM,MAAM;IAE1C,qBACE,KAACU;QACE,GAAGL,SAAS;QACbF,OAAOhC,WAAWgC,OAAOC;QACzBQ,WAAU;QACVV,WAAWhC,WACT,uBACAI,OAAOuC,IAAI,EACXtC,cAAc,CAACqB,KAAK,EACpB,CAAC,CAACC,cAAcb,oBAAoB,CAACa,WAAW,EAChDP,cAAc,CAACU,KAAK,EACpBE;QAEFY,OAAOH;kBAENV;;AAGP,EAAE"}

package/dist/cssm/components/CustomScrollView/CustomScrollView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport styles from './CustomScrollView.module.css';\n\nconst overscrollBehaviorClassNames = {\n auto: undefined,\n contain: styles.overscrollBehaviorContain,\n none: styles.overscrollBehaviorNone,\n};\n\nconst scrollBehaviorClassNames = {\n auto: undefined,\n smooth: styles.scrollBehaviorSmooth,\n};\n\nexport interface CustomScrollViewProps\n extends React.AllHTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n className?: HTMLDivElement['className'];\n onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;\n children: React.ReactNode;\n /*\n Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)\n /\n overscrollBehavior?: 'auto' \| 'contain' \| 'none';\n /\n Поведение scroll-behavior, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\n /\n scrollBehavior?: 'auto' \| 'smooth';\n /\n Включение отображения горизонтального ~~скролла\~~n /\n enableHorizontalScroll?: boolean;\n /\n Скрытие ~~скроллбара\~~n \n > В версии ниже Firefox 64 будет виден ~~скролл\~~n /\n scrollbarHidden?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/CustomScrollView\n */\nexport const CustomScrollView = ({\n className,\n children,\n enableHorizontalScroll = false,\n onScroll,\n getRootRef,\n overscrollBehavior = 'auto',\n scrollBehavior = 'auto',\n scrollbarHidden = false,\n ...restProps\n}: CustomScrollViewProps): React.ReactNode => {\n return (\n <div\n className={classNames(\n className,\n styles.host,\n enableHorizontalScroll && styles.horizontalScrollEnabled,\n overscrollBehaviorClassNames[overscrollBehavior],\n scrollBehaviorClassNames[scrollBehavior],\n scrollbarHidden && styles.scrollbarHidden,\n )}\n ref={getRootRef}\n onScroll={onScroll}\n {...restProps}\n >\n {children}\n </div>\n );\n};\n"],"names":["React","classNames","styles","overscrollBehaviorClassNames","auto","undefined","contain","overscrollBehaviorContain","none","overscrollBehaviorNone","scrollBehaviorClassNames","smooth","scrollBehaviorSmooth","CustomScrollView","className","children","enableHorizontalScroll","onScroll","getRootRef","overscrollBehavior","scrollBehavior","scrollbarHidden","restProps","div","host","horizontalScrollEnabled","ref"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,+BAA+B;IACnCC,MAAMC;IACNC,SAASJ,OAAOK,yBAAyB;IACzCC,MAAMN,OAAOO,sBAAsB;AACrC;AAEA,MAAMC,2BAA2B;IAC/BN,MAAMC;IACNM,QAAQT,OAAOU,oBAAoB;AACrC;~~AA4BA~~;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,SAAS,EACTC,QAAQ,EACRC,yBAAyB,KAAK,EAC9BC,QAAQ,EACRC,UAAU,EACVC,qBAAqB,MAAM,EAC3BC,iBAAiB,MAAM,EACvBC,kBAAkB,KAAK,EACvB,GAAGC,WACmB;IACtB,qBACE,KAACC;QACCT,WAAWb,WACTa,WACAZ,OAAOsB,IAAI,EACXR,0BAA0Bd,OAAOuB,uBAAuB,EACxDtB,4BAA4B,CAACgB,mBAAmB,EAChDT,wBAAwB,CAACU,eAAe,EACxCC,mBAAmBnB,OAAOmB,eAAe;QAE3CK,KAAKR;QACLD,UAAUA;QACT,GAAGK,SAAS;kBAEZP;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport styles from './CustomScrollView.module.css';\n\nconst overscrollBehaviorClassNames = {\n auto: undefined,\n contain: styles.overscrollBehaviorContain,\n none: styles.overscrollBehaviorNone,\n};\n\nconst scrollBehaviorClassNames = {\n auto: undefined,\n smooth: styles.scrollBehaviorSmooth,\n};\n\nexport interface CustomScrollViewProps\n extends React.AllHTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n /*\n `className` для компонента.\n /\n className?: HTMLDivElement['className'];\n /\n Обработчик события `scroll`.\n /\n onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;\n /\n Содержимое.\n /\n children: React.ReactNode;\n /\n Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior).\n /\n overscrollBehavior?: 'auto' \| 'contain' \| 'none';\n /\n Поведение scroll-behavior, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior).\n /\n scrollBehavior?: 'auto' \| 'smooth';\n /\n Включение отображения горизонтального скролла.\n /\n enableHorizontalScroll?: boolean;\n /\n Скрытие скроллбара.\n \n > В версии ниже Firefox 64 будет виден скролл.\n /\n scrollbarHidden?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/CustomScrollView\n */\nexport const CustomScrollView = ({\n className,\n children,\n enableHorizontalScroll = false,\n onScroll,\n getRootRef,\n overscrollBehavior = 'auto',\n scrollBehavior = 'auto',\n scrollbarHidden = false,\n ...restProps\n}: CustomScrollViewProps): React.ReactNode => {\n return (\n <div\n className={classNames(\n className,\n styles.host,\n enableHorizontalScroll && styles.horizontalScrollEnabled,\n overscrollBehaviorClassNames[overscrollBehavior],\n scrollBehaviorClassNames[scrollBehavior],\n scrollbarHidden && styles.scrollbarHidden,\n )}\n ref={getRootRef}\n onScroll={onScroll}\n {...restProps}\n >\n {children}\n </div>\n );\n};\n"],"names":["React","classNames","styles","overscrollBehaviorClassNames","auto","undefined","contain","overscrollBehaviorContain","none","overscrollBehaviorNone","scrollBehaviorClassNames","smooth","scrollBehaviorSmooth","CustomScrollView","className","children","enableHorizontalScroll","onScroll","getRootRef","overscrollBehavior","scrollBehavior","scrollbarHidden","restProps","div","host","horizontalScrollEnabled","ref"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,+BAA+B;IACnCC,MAAMC;IACNC,SAASJ,OAAOK,yBAAyB;IACzCC,MAAMN,OAAOO,sBAAsB;AACrC;AAEA,MAAMC,2BAA2B;IAC/BN,MAAMC;IACNM,QAAQT,OAAOU,oBAAoB;AACrC;AAqCA;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,SAAS,EACTC,QAAQ,EACRC,yBAAyB,KAAK,EAC9BC,QAAQ,EACRC,UAAU,EACVC,qBAAqB,MAAM,EAC3BC,iBAAiB,MAAM,EACvBC,kBAAkB,KAAK,EACvB,GAAGC,WACmB;IACtB,qBACE,KAACC;QACCT,WAAWb,WACTa,WACAZ,OAAOsB,IAAI,EACXR,0BAA0Bd,OAAOuB,uBAAuB,EACxDtB,4BAA4B,CAACgB,mBAAmB,EAChDT,wBAAwB,CAACU,eAAe,EACxCC,mBAAmBnB,OAAOmB,eAAe;QAE3CK,KAAKR;QACLD,UAAUA;QACT,GAAGK,SAAS;kBAEZP;;AAGP,EAAE"}

package/dist/cssm/components/CustomSelect/CustomSelect.js CHANGED Viewed

@@ -78,7 +78,7 @@ function findSelectedIndex(options = [], value) {
 const filter = (options, inputValue, filterFn)=>{
     return typeof filterFn === 'function' ? options.filter((option)=>filterFn(inputValue, option)) : options;
 };
-function isMousePositionChanged(event, prevPosition) {
+/* eslint-enable jsdoc/require-jsdoc */ function isMousePositionChanged(event, prevPosition) {
     return Math.abs(prevPosition.x - event.clientX) >= 1 || Math.abs(prevPosition.y - event.clientY) >= 1;
 }
 /**
@@ -442,6 +442,13 @@ function isMousePositionChanged(event, prevPosition) {
         selectFocused,
         resetFocusedOption
     ]);
+    const handleInputKeydown = React.useCallback((event)=>{
+        onInputKeyDown?.(event, opened);
+    }, [
+        opened,
+        onInputKeyDown
+    ]);
+    const _onInputKeyDown = callMultiple(handleKeyDownSelect, handleInputKeydown);
     const handleOptionClick = React.useCallback((e)=>{
         const index = Array.prototype.indexOf.call(e.currentTarget.parentNode?.children, e.currentTarget);
         const option = options[index];
@@ -656,7 +663,7 @@ function isMousePositionChanged(event, prevPosition) {
                 fetching: fetching,
                 value: inputValue,
                 onKeyUp: handleKeyUp,
-                onKeyDown: callMultiple(handleKeyDownSelect, onInputKeyDown),
+                onKeyDown: _onInputKeyDown,
                 onChange: onInputChange,
                 onClick: onClick,
                 before: before,