@vkontakte/vkui 6.5.3 → 6.7.0

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

@@ -1,6 +1,7 @@
-import { FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';
-import { RootComponentProps } from '../RootComponent/RootComponent';
-import { StateProps } from './useState';
+import * as React from 'react';
+import { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';
+import { type RootComponentProps } from '../RootComponent/RootComponent';
+import { type StateProps } from './useState';
 export interface ClickableProps<T = HTMLElement> extends RootComponentProps<T>, FocusVisibleModeProps, StateProps {
 }
 /**

package/dist/cssm/components/Clickable/Clickable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,qBAAqB,EAEtB,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAiB,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,EAGL,UAAU,EAEX,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AA0FjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AA2CD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,wEAIxB,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAqB5B,CAAC"}
+{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,KAAK,qBAAqB,EAE3B,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACxF,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AA2GjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AA2CD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,wEAIxB,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAqB5B,CAAC"}

package/dist/cssm/components/Clickable/Clickable.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '@vkontakte/vkjs';
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
 import { useFocusVisible } from '../../hooks/useFocusVisible';
 import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
 import { mergeCalls } from '../../lib/mergeCalls';
@@ -9,25 +10,26 @@ import { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from
 import styles from './Clickable.module.css';
 /**
  * Некликабельный компонент. Отключаем возможность нажимать на компонент.
- */ const NonClickable = ({ href, onClick, onClickCapture, activeClassName, hoverClassName, hasActive, hasHover, hovered, activated, activeEffectDelay, ...restProps })=>/*#__PURE__*/ _jsx(RootComponent, {
+ */ const NonClickable = ({ href, onClick, onClickCapture, activeClassName, hoverClassName, hasActive, hasHover, hovered, unlockParentHover, activated, activeEffectDelay, ...restProps })=>/*#__PURE__*/ _jsx(RootComponent, {
         ...restProps
     });
 /**
  * Кликабельный компонент. Добавляем кучу обвесов
- */ const RealClickable = ({ baseClassName, children, focusVisibleMode = 'inside', activeClassName, hoverClassName, activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY, hasHover = true, hasActive = true, hovered, activated, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown, ...restProps })=>{
+ */ 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({
         focusVisible,
         mode: focusVisibleMode
     });
-    const { stateClassName, setLockBubblingImmediate, ...stateEvents } = useState({
+    const { stateClassName, setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, ...stateEvents } = useState({
         activeClassName,
         hoverClassName,
         activeEffectDelay,
         hasHover,
         hasActive,
         hovered,
-        activated
+        activated,
+        unlockParentHover
     });
     const handlers = mergeCalls(focusEvents, stateEvents, {
         onKeyDown: clickByKeyboardHandler
@@ -41,12 +43,20 @@ import styles from './Clickable.module.css';
         onFocus,
         onKeyDown
     });
+    const lockStateContextValue = React.useMemo(()=>({
+            lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,
+            lockActiveStateBubbling: setLockActiveBubblingImmediate
+        }), [
+        setLockHoverBubblingImmediate,
+        setLockActiveBubblingImmediate,
+        hasHoverWithChildren
+    ]);
     return /*#__PURE__*/ _jsx(RootComponent, {
         baseClassName: classNames(baseClassName, styles['Clickable__realClickable'], focusVisibleClassNames, stateClassName),
         ...handlers,
         ...restProps,
         children: /*#__PURE__*/ _jsx(ClickableLockStateContext.Provider, {
-            value: setLockBubblingImmediate,
+            value: lockStateContextValue,
             children: children
         })
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n  FocusVisibleModeProps,\n  useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';\nimport {\n  ClickableLockStateContext,\n  DEFAULT_ACTIVE_EFFECT_DELAY,\n  StateProps,\n  useState,\n} 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  activated,\n  activeEffectDelay,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst 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  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 { stateClassName, setLockBubblingImmediate, ...stateEvents } = useState({\n    activeClassName,\n    hoverClassName,\n    activeEffectDelay,\n    hasHover,\n    hasActive,\n    hovered,\n    activated,\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  return (\n    <RootComponent\n      baseClassName={classNames(\n        baseClassName,\n        styles['Clickable__realClickable'],\n        focusVisibleClassNames,\n        stateClassName,\n      )}\n      {...handlers}\n      {...restProps}\n    >\n      <ClickableLockStateContext.Provider value={setLockBubblingImmediate}>\n        {children}\n      </ClickableLockStateContext.Provider>\n    </RootComponent>\n  );\n};\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 };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\nconst getUserAgentResetClassName = (Component?: React.ElementType) => {\n  if (Component === 'a') {\n    return styles.Clickable__resetLinkStyle;\n  }\n  if (Component === 'button') {\n    return styles.Clickable__resetButtonStyle;\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,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(\n    baseClassNameProp,\n    getUserAgentResetClassName(commonProps.Component),\n    styles['Clickable__host'],\n  );\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["classNames","useFocusVisible","useFocusVisibleClassName","mergeCalls","clickByKeyboardHandler","RootComponent","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","activated","activeEffectDelay","restProps","RealClickable","baseClassName","children","focusVisibleMode","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockBubblingImmediate","stateEvents","handlers","Provider","value","checkClickable","props","undefined","Component","disabled","component","getUserAgentResetClassName","Clickable__resetLinkStyle","Clickable__resetButtonStyle","Clickable","baseClassNameProp","commonProps","isClickable"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n  type FocusVisibleModeProps,\n  useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport {\n  ClickableLockStateContext,\n  DEFAULT_ACTIVE_EFFECT_DELAY,\n  type StateProps,\n  useState,\n} 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  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst 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['Clickable__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\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 };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\nconst getUserAgentResetClassName = (Component?: React.ElementType) => {\n  if (Component === 'a') {\n    return styles.Clickable__resetLinkStyle;\n  }\n  if (Component === 'button') {\n    return styles.Clickable__resetButtonStyle;\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,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(\n    baseClassNameProp,\n    getUserAgentResetClassName(commonProps.Component),\n    styles['Clickable__host'],\n  );\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["React","classNames","noop","useFocusVisible","useFocusVisibleClassName","mergeCalls","clickByKeyboardHandler","RootComponent","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","restProps","RealClickable","baseClassName","children","focusVisibleMode","hasHoverWithChildren","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockHoverBubblingImmediate","setLockActiveBubblingImmediate","stateEvents","handlers","lockStateContextValue","useMemo","lockHoverStateBubbling","lockActiveStateBubbling","Provider","value","checkClickable","props","undefined","Component","disabled","component","getUserAgentResetClassName","Clickable__resetLinkStyle","Clickable__resetButtonStyle","Clickable","baseClassNameProp","commonProps","isClickable"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAEEC,wBAAwB,QACnB,uCAAuC;AAC9C,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,aAAa,QAAiC,iCAAiC;AACxF,SACEC,yBAAyB,EACzBC,2BAA2B,EAE3BC,QAAQ,QACH,aAAa;AACpB,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,EACjB,GAAGC,WACe,iBAAK,KAACjB;QAAe,GAAGiB,SAAS;;AAErD;;CAEC,GACD,MAAMC,gBAAgB,CAAK,EACzBC,aAAa,EACbC,QAAQ,EACRC,mBAAmB,QAAQ,EAC3BZ,eAAe,EACfC,cAAc,EACdM,oBAAoBd,2BAA2B,EAC/CU,WAAW,IAAI,EACfD,YAAY,IAAI,EAChBE,OAAO,EACPE,SAAS,EACTO,oBAAoB,EACpBR,iBAAiB,EACjBS,cAAc,EACdC,cAAc,EACdC,aAAa,EACbC,eAAe,EACfC,WAAW,EACXC,MAAM,EACNC,OAAO,EACPC,SAAS,EACT,GAAGb,WACe;IAClB,MAAM,EAAEc,YAAY,EAAE,GAAGC,aAAa,GAAGpC;IACzC,MAAMqC,yBAAyBpC,yBAAyB;QAAEkC;QAAcG,MAAMb;IAAiB;IAE/F,MAAM,EACJc,cAAc,EACdC,6BAA6B,EAC7BC,8BAA8B,EAC9B,GAAGC,aACJ,GAAGnC,SAAS;QACXM;QACAC;QACAM;QACAJ;QACAD;QACAE;QACAE;QACAD;IACF;IAEA,MAAMyB,WAAWzC,WACfkC,aACAM,aACA;QAAER,WAAW/B;IAAuB,GACpC;QACEwB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAGF,MAAMU,wBAAwB/C,MAAMgD,OAAO,CACzC,IAAO,CAAA;YACLC,wBAAwBpB,uBAAuB3B,OAAOyC;YACtDO,yBAAyBN;QAC3B,CAAA,GACA;QAACD;QAA+BC;QAAgCf;KAAqB;IAGvF,qBACE,KAACtB;QACCmB,eAAezB,WACbyB,eACAf,MAAM,CAAC,2BAA2B,EAClC6B,wBACAE;QAED,GAAGI,QAAQ;QACX,GAAGtB,SAAS;kBAEb,cAAA,KAAChB,0BAA0B2C,QAAQ;YAACC,OAAOL;sBACxCpB;;;AAIT;AAEA;;CAEC,GACD,OAAO,SAAS0B,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMzC,IAAI,KAAK0C,aACdD,MAAMxC,OAAO,KAAKyC,aAClBD,MAAMvC,cAAc,KAAKwC,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,EACT1C,OAAO,EACPC,cAAc,EACdF,IAAI,EACJ4C,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;QAAU;IACrB,OAAO,IAAI3C,SAAS0C,WAAW;QAC7B,OAAO;YAAE,aAAa;YAAK,iBAAiBE;QAAS;IACvD,OAAO,IAAI3C,YAAYyC,aAAaxC,mBAAmBwC,WAAW;QAChE,OAAO;YACL,aAAa;YACb,QAAQ;YACR,YAAYE,WAAWF,YAAY;YACnC,iBAAiBE;QACnB;IACF;IAEA,OAAO,CAAC;AACV;AAEA,MAAME,6BAA6B,CAACH;IAClC,IAAIA,cAAc,KAAK;QACrB,OAAO7C,OAAOiD,yBAAyB;IACzC;IACA,IAAIJ,cAAc,UAAU;QAC1B,OAAO7C,OAAOkD,2BAA2B;IAC3C;IACA;AACF;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAK,EAC5BlC,mBAAmB,QAAQ,EAC3BF,eAAeqC,iBAAiB,EAChC,GAAGvC,WACe;IAClB,MAAMwC,cAAcN,UAAUlC;IAC9B,MAAMyC,cAAcZ,eAAe7B;IACnC,MAAME,gBAAgBzB,WACpB8D,mBACAJ,2BAA2BK,YAAYR,SAAS,GAChD7C,MAAM,CAAC,kBAAkB;IAG3B,IAAIsD,aAAa;QACf,qBACE,KAACxC;YACCC,eAAeA;YACfE,kBAAkBA;YACjB,GAAGoC,WAAW;YACd,GAAGxC,SAAS;;IAGnB;IAEA,qBAAO,KAACZ;QAAac,eAAeA;QAAgB,GAAGsC,WAAW;QAAG,GAAGxC,SAAS;;AACnF,EAAE"}

package/dist/cssm/components/Clickable/useState.d.ts

@@ -16,6 +16,36 @@ export interface StateProps {
      * Указывает, должен ли компонент реагировать на active-состояние
      */
     hasActive?: boolean;
+    /**
+     * Позволяет родительскому компоненту
+     * иметь hovered-cостояние при наведении
+     * на любой дочерний элемент.
+     * По умолчанию состояние hovered у родителя сбрасывается.
+     *
+     * Присваивается родителькому компоненту.
+     *
+     * @example
+     * <Tappable hasHoverWithChildren>
+     *   <IconButton />
+     *   <IconButton />
+     *   <IconButton />
+     * </Tappable>
+     */
+    hasHoverWithChildren?: boolean;
+    /**
+     * Позволяет родительскому компоненту показывать hovered-состояние при наведении
+     * на текущий дочерний компонент.
+     *
+     * Присваивается дочернему компоненту.
+     *
+     * @example
+     * <Tappable>
+     *   <IconButton unlockParentHover />
+     *   <IconButton unlockParentHover />
+     *   <IconButton />
+     * </Tappable>
+     */
+    unlockParentHover?: boolean;
     /**
      * Длительность показа `activated`-состояния
      */
@@ -30,12 +60,18 @@ export interface StateProps {
     hoverClassName?: string;
 }
 export declare const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
-export declare const ClickableLockStateContext: React.Context<((v: boolean) => void) | undefined>;
+interface ClickableLockStateContextInterface {
+    lockHoverStateBubbling?: (v: boolean) => void;
+    lockActiveStateBubbling?: (v: boolean) => void;
+}
+export declare const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface>;
 /**
  * Управляет состоянием компонента
  */
-export declare function useState({ hasHover, hasActive, ...restProps }: StateProps): {
+export declare function useState({ hovered, hasHover, hasActive, unlockParentHover, ...restProps }: StateProps): {
     stateClassName: string;
-    setLockBubblingImmediate: (...args: any[]) => void;
+    setLockHoverBubblingImmediate: (...args: any[]) => void;
+    setLockActiveBubblingImmediate: (...args: any[]) => void;
 };
+export {};
 //# sourceMappingURL=useState.d.ts.map

package/dist/cssm/components/Clickable/useState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/useState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AASD,eAAO,MAAM,2BAA2B,MAAM,CAAC;AA0E/C,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CACpB,CAAC;AAcrE;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,UAAU,GAAG;IAC3E,cAAc,EAAE,MAAM,CAAC;IACvB,wBAAwB,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CACpD,CAyBA"}
+{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/useState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;;;;;OAcG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;;;;;;;;;;OAYG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,2BAA2B,MAAM,CAAC;AA6I/C,UAAU,kCAAkC;IAC1C,sBAAsB,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,uBAAuB,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,OAAO,CAAC,kCAAkC,CAIpF,CAAC;AAqCL;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,UAAU,GAAG;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,6BAA6B,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACxD,8BAA8B,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CAC1D,CAkCA"}

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

@@ -1,38 +1,74 @@
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
-import { callMultiple } from '../../lib/callMultiple';
 import { mergeCalls } from '../../lib/mergeCalls';
 import { useStateWithDelay } from './useStateWithDelay';
 export const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
 const ACTIVE_DELAY = 70;
 /**
  * Управляет наведением на компонент, игнорирует тач события
- */ function useHover({ hovered, hoverClassName, hasHover = true, lockState }) {
-    const [hoveredState, setHover] = React.useState(false);
-    const hover = hasHover && !lockState && (hovered || hoveredState) ? hoverClassName : undefined;
+ */ function useHover({ hovered, hasHover = true, lockState, setParentStateLock }) {
+    const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);
+    const prevIsHoveredRef = React.useRef(undefined);
+    const handleHover = React.useCallback((isHover)=>{
+        setHoveredStateLocal(isHover);
+        const isHovered = calculateStateValue({
+            hasState: hasHover,
+            isLocked: lockState,
+            stateValueControlled: Boolean(hovered),
+            stateValueLocal: isHover
+        });
+        // проверка сделана чтобы реже вызывать обновление состояния
+        // контекста родителя
+        if (isHovered !== prevIsHoveredRef.current) {
+            prevIsHoveredRef.current = isHovered;
+            setParentStateLock(isHovered);
+        }
+    }, [
+        setParentStateLock,
+        hasHover,
+        hovered,
+        lockState
+    ]);
     const onPointerEnter = (e)=>{
         if (e.pointerType === 'touch') {
             return;
         }
-        setHover(true);
+        handleHover(true);
     };
     const onPointerLeave = ()=>{
-        setHover(false);
+        handleHover(false);
     };
+    const isHovered = calculateStateValue({
+        hasState: hasHover,
+        isLocked: lockState,
+        stateValueControlled: Boolean(hovered),
+        stateValueLocal: hoveredStateLocal
+    });
     return {
-        hover,
+        isHovered,
         onPointerEnter: hasHover ? onPointerEnter : noop,
         onPointerLeave: hasHover ? onPointerLeave : noop
     };
 }
 /**
  * Управляет активацией компонента
- */ function useActive({ activated, activeClassName, activeEffectDelay, hasActive = true, lockState }) {
-    const [activatedState, setActivated] = useStateWithDelay(false);
+ */ function useActive({ activated, activeEffectDelay, hasActive = true, lockStateRef, setParentStateLock }) {
+    // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,
+    // если установка отложена c помощью delay, то и вызов будет отложен
+    const [activatedState, setActivated] = useStateWithDelay(false, 0, setParentStateLock);
     // Список нажатий которые не требуется отменять
     const pointersUp = React.useMemo(()=>new Set(), []);
-    const active = hasActive && !lockState && (activated || activatedState) ? activeClassName : undefined;
-    const onPointerDown = ()=>setActivated(true, ACTIVE_DELAY);
+    const onPointerDown = ()=>{
+        if (lockStateRef.current) {
+            return;
+        }
+        setActivated(true, ACTIVE_DELAY);
+        // намеренно выставляем lock, так как setActivated вызов отложен
+        // а у отложенного setActivated setParentStateLock тоже вызовится отложенно
+        // родитель сейчас тоже обработает это же событие PointerDown
+        // если мы не залочим activatedState у родителя сейчас, то родитель выставит active состояние
+        setParentStateLock(true);
+    };
     const onPointerCancel = (e)=>{
         if (pointersUp.has(e.pointerId)) {
             pointersUp.delete(e.pointerId);
@@ -42,57 +78,89 @@ const ACTIVE_DELAY = 70;
     };
     const onPointerUp = (e)=>{
         pointersUp.add(e.pointerId);
+        if (lockStateRef.current) {
+            return;
+        }
         setActivated(true);
         setActivated(false, activeEffectDelay);
     };
+    const isActivated = calculateStateValue({
+        hasState: hasActive,
+        isLocked: lockStateRef.current,
+        stateValueControlled: Boolean(activated),
+        stateValueLocal: activatedState
+    });
     return {
-        active,
+        isActivated,
         onPointerLeave: hasActive ? onPointerCancel : noop,
         onPointerDown: hasActive ? onPointerDown : noop,
         onPointerCancel: hasActive ? onPointerCancel : noop,
         onPointerUp: hasActive ? onPointerUp : noop
     };
 }
-export const ClickableLockStateContext = /*#__PURE__*/ React.createContext(undefined);
+export const ClickableLockStateContext = /*#__PURE__*/ React.createContext({
+    lockHoverStateBubbling: undefined,
+    lockActiveStateBubbling: undefined
+});
 /**
  * Блокирует стейт на всплытие
- */ function useLockState() {
-    const setLockBubbling = React.useContext(ClickableLockStateContext) || noop;
+ */ function useLockState(setParentStateLockBubbling) {
     const [lockState, setLockState] = React.useState(false);
-    const setLockBubblingImmediate = callMultiple(setLockState, setLockBubbling);
+    const setStateLockBubblingImmediate = React.useCallback((isLock)=>{
+        setLockState(isLock);
+        setParentStateLockBubbling(isLock);
+    }, [
+        setParentStateLockBubbling
+    ]);
     return [
         lockState,
-        setLockBubbling,
-        setLockBubblingImmediate
+        setParentStateLockBubbling,
+        setStateLockBubblingImmediate
+    ];
+}
+function useLockRef(setParentStateLockBubbling) {
+    const lockStateRef = React.useRef(false);
+    const setStateLockBubblingImmediate = React.useCallback((isLock)=>{
+        lockStateRef.current = isLock;
+        setParentStateLockBubbling(isLock);
+    }, [
+        setParentStateLockBubbling
+    ]);
+    return [
+        lockStateRef,
+        setParentStateLockBubbling,
+        setStateLockBubblingImmediate
     ];
 }
 /**
  * Управляет состоянием компонента
- */ export function useState({ hasHover, hasActive, ...restProps }) {
-    const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();
-    const props = {
+ */ export function useState({ hovered, hasHover, hasActive, unlockParentHover, ...restProps }) {
+    const { lockHoverStateBubbling = noop, lockActiveStateBubbling = noop } = React.useContext(ClickableLockStateContext);
+    const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] = useLockState(unlockParentHover ? noop : lockHoverStateBubbling);
+    const [lockActiveStateRef, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] = useLockRef(lockActiveStateBubbling);
+    const { isHovered, ...hoverEvent } = useHover({
         hasHover,
-        hasActive,
-        lockState,
-        ...restProps
-    };
-    const { hover, ...hoverEvent } = useHover({
-        ...props
+        hovered,
+        lockState: lockHoverState,
+        setParentStateLock: setParentStateLockHoverBubbling
+    });
+    const { isActivated, ...activeEvent } = useActive({
+        ...restProps,
+        lockStateRef: lockActiveStateRef,
+        setParentStateLock: setParentStateLockActiveBubbling
     });
-    const { active, ...activeEvent } = useActive(props);
-    const stateClassName = classNames(hover, active);
+    const stateClassName = classNames(isHovered && restProps.hoverClassName, isActivated && restProps.activeClassName);
     const handlers = mergeCalls(hoverEvent, activeEvent);
-    React.useEffect(()=>{
-        setLockBubbling(!!stateClassName);
-    }, [
-        setLockBubbling,
-        stateClassName
-    ]);
     return {
         stateClassName,
-        setLockBubblingImmediate,
+        setLockHoverBubblingImmediate,
+        setLockActiveBubblingImmediate,
         ...handlers
     };
 }
+// Общая функция для определения конечного состояния active/hovered
+function calculateStateValue({ hasState, isLocked, stateValueControlled, stateValueLocal }) {
+    return hasState && !isLocked && (stateValueControlled || stateValueLocal);
+}
 
 //# sourceMappingURL=useState.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/useState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\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   * Длительность показа `activated`-состояния\n   */\n  activeEffectDelay?: number;\n\n  /**\n   * Стиль подсветки active-состояния\n   */\n  activeClassName?: string;\n\n  /**\n   * Стиль подсветки hover-состояния\n   */\n  hoverClassName?: string;\n}\n\ninterface StateHookProps extends StateProps {\n  /**\n   * Блокирование активации состояний\n   */\n  lockState: boolean;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nconst ACTIVE_DELAY = 70;\n\n/**\n * Управляет наведением на компонент, игнорирует тач события\n */\nfunction useHover({ hovered, hoverClassName, hasHover = true, lockState }: StateHookProps) {\n  const [hoveredState, setHover] = React.useState(false);\n\n  const hover = hasHover && !lockState && (hovered || hoveredState) ? hoverClassName : undefined;\n\n  const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n    if (e.pointerType === 'touch') {\n      return;\n    }\n\n    setHover(true);\n  };\n\n  const onPointerLeave = () => {\n    setHover(false);\n  };\n\n  return {\n    hover,\n    onPointerEnter: hasHover ? onPointerEnter : noop,\n    onPointerLeave: hasHover ? onPointerLeave : noop,\n  };\n}\n\n/**\n * Управляет активацией компонента\n */\nfunction useActive({\n  activated,\n  activeClassName,\n  activeEffectDelay,\n  hasActive = true,\n  lockState,\n}: StateHookProps) {\n  const [activatedState, setActivated] = useStateWithDelay(false);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n  const active =\n    hasActive && !lockState && (activated || activatedState) ? activeClassName : undefined;\n\n  const onPointerDown = () => setActivated(true, ACTIVE_DELAY);\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    setActivated(true);\n    setActivated(false, activeEffectDelay);\n  };\n\n  return {\n    active,\n    onPointerLeave: hasActive ? onPointerCancel : noop,\n    onPointerDown: hasActive ? onPointerDown : noop,\n    onPointerCancel: hasActive ? onPointerCancel : noop,\n    onPointerUp: hasActive ? onPointerUp : noop,\n  };\n}\n\nexport const ClickableLockStateContext: React.Context<((v: boolean) => void) | undefined> =\n  React.createContext<undefined | ((v: boolean) => void)>(undefined);\n\n/**\n * Блокирует стейт на всплытие\n */\nfunction useLockState(): readonly [boolean, (v: boolean) => void, (...args: any[]) => void] {\n  const setLockBubbling = React.useContext(ClickableLockStateContext) || noop;\n  const [lockState, setLockState] = React.useState(false);\n\n  const setLockBubblingImmediate = callMultiple(setLockState, setLockBubbling);\n\n  return [lockState, setLockBubbling, setLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента\n */\nexport function useState({ hasHover, hasActive, ...restProps }: StateProps): {\n  stateClassName: string;\n  setLockBubblingImmediate: (...args: any[]) => void;\n} {\n  const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();\n\n  const props = {\n    hasHover,\n    hasActive,\n    lockState,\n    ...restProps,\n  };\n\n  const { hover, ...hoverEvent } = useHover({ ...props });\n  const { active, ...activeEvent } = useActive(props);\n\n  const stateClassName = classNames(hover, active);\n  const handlers = mergeCalls(hoverEvent, activeEvent);\n\n  React.useEffect(() => {\n    setLockBubbling(!!stateClassName);\n  }, [setLockBubbling, stateClassName]);\n\n  return {\n    stateClassName,\n    setLockBubblingImmediate,\n    ...handlers,\n  };\n}\n"],"names":["React","classNames","noop","callMultiple","mergeCalls","useStateWithDelay","DEFAULT_ACTIVE_EFFECT_DELAY","ACTIVE_DELAY","useHover","hovered","hoverClassName","hasHover","lockState","hoveredState","setHover","useState","hover","undefined","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeClassName","activeEffectDelay","hasActive","activatedState","setActivated","pointersUp","useMemo","Set","active","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","ClickableLockStateContext","createContext","useLockState","setLockBubbling","useContext","setLockState","setLockBubblingImmediate","restProps","props","hoverEvent","activeEvent","stateClassName","handlers","useEffect"],"mappings":"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"}
+{"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 = calculateStateValue({\n        hasState: hasHover,\n        isLocked: lockState,\n        stateValueControlled: Boolean(hovered),\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 = calculateStateValue({\n    hasState: hasHover,\n    isLocked: lockState,\n    stateValueControlled: Boolean(hovered),\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.MutableRefObject<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 = calculateStateValue({\n    hasState: hasActive,\n    isLocked: lockStateRef.current,\n    stateValueControlled: Boolean(activated),\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.MutableRefObject<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  hasActive,\n  unlockParentHover,\n  ...restProps\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    ...restProps,\n    lockStateRef: lockActiveStateRef,\n    setParentStateLock: setParentStateLockActiveBubbling,\n  });\n\n  const stateClassName = classNames(\n    isHovered && restProps.hoverClassName,\n    isActivated && restProps.activeClassName,\n  );\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  stateValueControlled,\n  stateValueLocal,\n}: {\n  hasState: boolean;\n  isLocked: boolean;\n  stateValueControlled: boolean;\n  stateValueLocal: boolean;\n}): boolean {\n  return hasState && !isLocked && (stateValueControlled || 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","stateValueControlled","Boolean","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","restProps","useContext","lockHoverState","setParentStateLockHoverBubbling","setLockHoverBubblingImmediate","lockActiveStateRef","setParentStateLockActiveBubbling","setLockActiveBubblingImmediate","hoverEvent","activeEvent","stateClassName","hoverClassName","activeClassName","handlers"],"mappings":"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"}

package/dist/cssm/components/Clickable/useStateWithDelay.d.ts

@@ -13,7 +13,25 @@ type DispatchWithDelay<S> = (value: S, delay?: number) => void;
  *   setCount(count + 1, 500)
  * }
  * ```
+ *
+ * Есть возможность передать функцию-коллбэк, которая будет
+ * вызвана сразу после вызова setState с новым значением стейта
+ * в качестве аргумента.
+ *
+ * ```ts
+ * const onCountChange = React.useCallback((count) => {
+ *   // обработчик нового значения count
+ *   // будет вызван через 500мс
+ * }, []);
+ *
+ *
+ * const [count, setCount] = useStateWithDelay(initialState, 0, onCountChange);
+ *
+ * const click = () => {
+ *   setCount(count + 1, 500)
+ * }
+ * ```
  */
-export declare function useStateWithDelay<S>(initialState: S | (() => S), defaultDelay?: number): [S, DispatchWithDelay<React.SetStateAction<S>>];
+export declare function useStateWithDelay<S>(initialState: S | (() => S), defaultDelay?: number, onStateChange?: (v: S) => void): [S, DispatchWithDelay<React.SetStateAction<S>>];
 export {};
 //# sourceMappingURL=useStateWithDelay.d.ts.map

package/dist/cssm/components/Clickable/useStateWithDelay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStateWithDelay.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/useStateWithDelay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/D;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAC3B,YAAY,SAAI,GACf,CAAC,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAkBjD"}
+{"version":3,"file":"useStateWithDelay.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/useStateWithDelay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAC3B,YAAY,SAAI,EAChB,aAAa,GAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAW,GACnC,CAAC,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAmCjD"}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { isFunction, noop } from '@vkontakte/vkjs';
 /**
  * Возвращает значение с состоянием и функции на обновление состояния
  * без и с задержкой.
@@ -12,18 +13,51 @@ import * as React from 'react';
  *   setCount(count + 1, 500)
  * }
  * ```
- */ export function useStateWithDelay(initialState, defaultDelay = 0) {
+ *
+ * Есть возможность передать функцию-коллбэк, которая будет
+ * вызвана сразу после вызова setState с новым значением стейта
+ * в качестве аргумента.
+ *
+ * ```ts
+ * const onCountChange = React.useCallback((count) => {
+ *   // обработчик нового значения count
+ *   // будет вызван через 500мс
+ * }, []);
+ *
+ *
+ * const [count, setCount] = useStateWithDelay(initialState, 0, onCountChange);
+ *
+ * const click = () => {
+ *   setCount(count + 1, 500)
+ * }
+ * ```
+ */ export function useStateWithDelay(initialState, defaultDelay = 0, onStateChange = noop) {
     const [value, setValue] = React.useState(initialState);
     const timeout = React.useRef();
+    const handleSetValue = React.useCallback((nextValue)=>{
+        if (isFunction(nextValue)) {
+            setValue((prevValue)=>{
+                const value = nextValue(prevValue);
+                onStateChange(value);
+                return value;
+            });
+        } else {
+            setValue(nextValue);
+            onStateChange(nextValue);
+        }
+    }, [
+        onStateChange
+    ]);
     const setValueWithDelay = React.useCallback((newValue, delay = defaultDelay)=>{
         clearTimeout(timeout.current);
         if (delay === 0) {
-            setValue(newValue);
+            handleSetValue(newValue);
             return;
         }
-        timeout.current = setTimeout(()=>setValue(newValue), delay);
+        timeout.current = setTimeout(()=>handleSetValue(newValue), delay);
     }, [
-        defaultDelay
+        defaultDelay,
+        handleSetValue
     ]);
     return [
         value,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/useStateWithDelay.tsx"],"sourcesContent":["import * as React from 'react';\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 */\nexport function useStateWithDelay<S>(\n  initialState: S | (() => S),\n  defaultDelay = 0,\n): [S, DispatchWithDelay<React.SetStateAction<S>>] {\n  const [value, setValue] = React.useState(initialState);\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\n\n  const setValueWithDelay = React.useCallback(\n    (newValue: React.SetStateAction<S>, delay: number = defaultDelay) => {\n      clearTimeout(timeout.current);\n      if (delay === 0) {\n        setValue(newValue);\n        return;\n      }\n\n      timeout.current = setTimeout(() => setValue(newValue), delay);\n    },\n    [defaultDelay],\n  );\n\n  return [value, setValueWithDelay];\n}\n"],"names":["React","useStateWithDelay","initialState","defaultDelay","value","setValue","useState","timeout","useRef","setValueWithDelay","useCallback","newValue","delay","clearTimeout","current","setTimeout"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,kBACdC,YAA2B,EAC3BC,eAAe,CAAC;IAEhB,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAACJ;IACzC,MAAMK,UAAUP,MAAMQ,MAAM;IAE5B,MAAMC,oBAAoBT,MAAMU,WAAW,CACzC,CAACC,UAAmCC,QAAgBT,YAAY;QAC9DU,aAAaN,QAAQO,OAAO;QAC5B,IAAIF,UAAU,GAAG;YACfP,SAASM;YACT;QACF;QAEAJ,QAAQO,OAAO,GAAGC,WAAW,IAAMV,SAASM,WAAWC;IACzD,GACA;QAACT;KAAa;IAGhB,OAAO;QAACC;QAAOK;KAAkB;AACnC"}
+{"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>>();\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","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;IAE5B,MAAMC,iBAAiBZ,MAAMa,WAAW,CACtC,CAACC;QACC,IAAIb,WAAWa,YAAY;YACzBN,SAAS,CAACO;gBACR,MAAMR,QAAQO,UAAUC;gBACxBT,cAAcC;gBAEd,OAAOA;YACT;QACF,OAAO;YACLC,SAASM;YACTR,cAAcQ;QAChB;IACF,GACA;QAACR;KAAc;IAGjB,MAAMU,oBAAoBhB,MAAMa,WAAW,CACzC,CAACI,UAAmCC,QAAgBb,YAAY;QAC9Dc,aAAaT,QAAQU,OAAO;QAC5B,IAAIF,UAAU,GAAG;YACfN,eAAeK;YACf;QACF;QAEAP,QAAQU,OAAO,GAAGC,WAAW,IAAMT,eAAeK,WAAWC;IAC/D,GACA;QAACb;QAAcO;KAAe;IAGhC,OAAO;QAACL;QAAOS;KAAkB;AACnC"}

package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ConfigProviderContextInterface } from './ConfigProviderContext';
+import { type ConfigProviderContextInterface } from './ConfigProviderContext';
 export interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {
     children: React.ReactNode;
 }

package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigProviderOverride.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,8BAA8B,EAE/B,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,2BAA4B,SAAQ,OAAO,CAAC,8BAA8B,CAAC;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,GAAG,YAAY,EAChB,EAAE,2BAA2B,GAAG,KAAK,CAAC,SAAS,CAa/C"}
+{"version":3,"file":"ConfigProviderOverride.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,KAAK,8BAA8B,EAEpC,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,2BAA4B,SAAQ,OAAO,CAAC,8BAA8B,CAAC;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,GAAG,YAAY,EAChB,EAAE,2BAA2B,GAAG,KAAK,CAAC,SAAS,CAa/C"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  useConfigProvider,\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 = useObjectMemo({\n    ...parentConfig,\n    ...contextValue,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      {children}\n    </ConfigProviderContext.Provider>\n  );\n}\n"],"names":["React","useObjectMemo","ConfigProviderContext","useConfigProvider","ConfigProviderOverride","children","contextValue","parentConfig","configContext","Provider","value"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,qBAAqB,EAErBC,iBAAiB,QACZ,0BAA0B;AAMjC;;CAEC,GACD,OAAO,SAASC,uBAAuB,EACrCC,QAAQ,EACR,GAAGC,cACyB;IAC5B,MAAMC,eAAeJ;IAErB,MAAMK,gBAAgBP,cAAc;QAClC,GAAGM,YAAY;QACf,GAAGD,YAAY;IACjB;IAEA,qBACE,KAACJ,sBAAsBO,QAAQ;QAACC,OAAOF;kBACpCH;;AAGP"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport {\n  ConfigProviderContext,\n  type ConfigProviderContextInterface,\n  useConfigProvider,\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 = useObjectMemo({\n    ...parentConfig,\n    ...contextValue,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      {children}\n    </ConfigProviderContext.Provider>\n  );\n}\n"],"names":["React","useObjectMemo","ConfigProviderContext","useConfigProvider","ConfigProviderOverride","children","contextValue","parentConfig","configContext","Provider","value"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,qBAAqB,EAErBC,iBAAiB,QACZ,0BAA0B;AAMjC;;CAEC,GACD,OAAO,SAASC,uBAAuB,EACrCC,QAAQ,EACR,GAAGC,cACyB;IAC5B,MAAMC,eAAeJ;IAErB,MAAMK,gBAAgBP,cAAc;QAClC,GAAGM,YAAY;QACf,GAAGD,YAAY;IACjB;IAEA,qBACE,KAACJ,sBAAsBO,QAAQ;QAACC,OAAOF;kBACpCH;;AAGP"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { HTMLAttributesWithRootRef } from '../../types';
-import { TypographyProps } from '../Typography/Typography';
+import type { TypographyProps } from '../Typography/Typography';
 import { ContentBadgeSlotIcon } from './ContentBadgeSlotIcon';
 import type { ContentBadgeModeType, ContentBadgeSizeType } from './types';
 export interface ContentBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Pick<TypographyProps, 'weight'> {

package/dist/cssm/components/ContentBadge/ContentBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/ContentBadge/ContentBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAqC1E,MAAM,WAAW,iBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;CAC7B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,GAAG;IACvD,QAAQ,EAAE,OAAO,oBAAoB,CAAC;CAkCvC,CAAC"}
+{"version":3,"file":"ContentBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/ContentBadge/ContentBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAqC1E,MAAM,WAAW,iBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;CAC7B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,GAAG;IACvD,QAAQ,EAAE,OAAO,oBAAoB,CAAC;CAkCvC,CAAC"}