@vkontakte/vkui 8.0.2 → 8.1.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport type { FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport {\n  RootComponent,\n  type RootComponentExtendProps,\n  type RootComponentProps,\n} from '../RootComponent/RootComponent';\nimport type { StateProps } from './useState';\nimport { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from './useState';\nimport styles from './Clickable.module.css';\n\nfunction nonClickableProps<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  DefaultComponent,\n  Component,\n  ...restProps\n}: ClickableProps<T>) {\n  return {\n    Component: Component || DefaultComponent,\n    ...restProps,\n    lockStateContextValue: {\n      lockHoverStateBubbling: undefined,\n      lockActiveStateBubbling: undefined,\n    },\n  };\n}\n\nfunction useClickableProps<T>({\n  baseClassName,\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  DefaultComponent,\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    baseClassName: classNames(\n      baseClassName,\n      styles.realClickable,\n      focusVisibleClassNames,\n      stateClassName,\n    ),\n    ...handlers,\n    ...restProps,\n    lockStateContextValue,\n  };\n}\n\nfunction useProps<T>(props: ClickableProps<T>): RootComponentProps<T> &\n  RootComponentExtendProps & {\n    lockStateContextValue: {\n      lockHoverStateBubbling: undefined | ((...args: any[]) => void);\n      lockActiveStateBubbling: undefined | ((...args: any[]) => void);\n    };\n  } {\n  const commonProps = component(props);\n  const isClickable = checkClickable(props);\n\n  const {\n    baseClassName,\n    disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n    Component,\n    ...restProps\n  } = props;\n\n  const nextProps = {\n    baseClassName: classNames(baseClassName, styles.host),\n    ...commonProps,\n    ...restProps,\n  };\n\n  const clickableProps = useClickableProps(nextProps);\n\n  return isClickable ? clickableProps : nonClickableProps(nextProps);\n}\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    RootComponentExtendProps,\n    FocusVisibleModeProps,\n    StateProps {\n  /**\n   * Компонент который будет при передаче `onClick`. По умолчанию `\"div\"`.\n   */\n  DefaultComponent?: React.ElementType;\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  DefaultComponent = 'div',\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: ClickableProps<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: DefaultComponent,\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 { lockStateContextValue, children, ...restProps } = useProps(props);\n\n  return (\n    <RootComponent {...restProps}>\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","nonClickableProps","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","DefaultComponent","Component","restProps","lockStateContextValue","lockHoverStateBubbling","undefined","lockActiveStateBubbling","useClickableProps","baseClassName","hasHoverWithChildren","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockHoverBubblingImmediate","setLockActiveBubblingImmediate","stateEvents","handlers","useMemo","useProps","props","commonProps","component","isClickable","checkClickable","disabled","nextProps","clickableProps","role","tabIndex","Clickable","children","Provider","value"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport type { FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport {\n  RootComponent,\n  type RootComponentExtendProps,\n  type RootComponentProps,\n} from '../RootComponent/RootComponent';\nimport type { StateProps } from './useState';\nimport { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from './useState';\nimport styles from './Clickable.module.css';\n\nfunction nonClickableProps<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  DefaultComponent,\n  Component,\n  ...restProps\n}: ClickableProps<T>) {\n  return {\n    Component: Component || DefaultComponent,\n    ...restProps,\n    lockStateContextValue: {\n      lockHoverStateBubbling: undefined,\n      lockActiveStateBubbling: undefined,\n    },\n  };\n}\n\nfunction useClickableProps<T>({\n  baseClassName,\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  DefaultComponent,\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    baseClassName: classNames(\n      baseClassName,\n      styles.realClickable,\n      focusVisibleClassNames,\n      stateClassName,\n    ),\n    ...handlers,\n    ...restProps,\n    lockStateContextValue,\n  };\n}\n\nfunction useProps<T>(props: ClickableProps<T>): RootComponentProps<T> &\n  RootComponentExtendProps & {\n    lockStateContextValue: {\n      lockHoverStateBubbling: undefined | ((...args: any[]) => void);\n      lockActiveStateBubbling: undefined | ((...args: any[]) => void);\n    };\n  } {\n  const commonProps = component(props);\n  const isClickable = checkClickable(props);\n\n  const {\n    baseClassName,\n    disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n    Component,\n    ...restProps\n  } = props;\n\n  const nextProps = {\n    baseClassName: classNames(baseClassName, styles.host),\n    ...commonProps,\n    ...restProps,\n  };\n\n  const clickableProps = useClickableProps(nextProps);\n\n  return isClickable ? clickableProps : nonClickableProps(nextProps);\n}\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    RootComponentExtendProps,\n    FocusVisibleModeProps,\n    StateProps {\n  /**\n   * Компонент который будет при передаче `onClick`. По умолчанию `\"div\"`.\n   */\n  DefaultComponent?: React.ElementType | undefined;\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  DefaultComponent = 'div',\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: ClickableProps<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: DefaultComponent,\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 { lockStateContextValue, children, ...restProps } = useProps(props);\n\n  return (\n    <RootComponent {...restProps}>\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","nonClickableProps","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","DefaultComponent","Component","restProps","lockStateContextValue","lockHoverStateBubbling","undefined","lockActiveStateBubbling","useClickableProps","baseClassName","hasHoverWithChildren","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockHoverBubblingImmediate","setLockActiveBubblingImmediate","stateEvents","handlers","useMemo","useProps","props","commonProps","component","isClickable","checkClickable","disabled","nextProps","clickableProps","role","tabIndex","Clickable","children","Provider","value"],"mappings":"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"}

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

@@ -3,19 +3,19 @@ export interface StateProps {
     /**
      * Указывает, должен ли компонент реагировать на `hover`-состояние.
      */
-    hasHover?: boolean;
+    hasHover?: boolean | undefined;
     /**
      * Позволяет управлять `hovered`-состоянием извне.
      */
-    hovered?: boolean;
+    hovered?: boolean | undefined;
     /**
      * Позволяет управлять `activated`-состоянием извне.
      */
-    activated?: boolean;
+    activated?: boolean | undefined;
     /**
      * Указывает, должен ли компонент реагировать на `active`-состояние.
      */
-    hasActive?: boolean;
+    hasActive?: boolean | undefined;
     /**
      * Позволяет родительскому компоненту
      * иметь `hovered`-cостояние при наведении
@@ -31,7 +31,7 @@ export interface StateProps {
      *   <IconButton />
      * </Tappable>
      */
-    hasHoverWithChildren?: boolean;
+    hasHoverWithChildren?: boolean | undefined;
     /**
      * Позволяет родительскому компоненту показывать hovered-состояние при наведении
      * на текущий дочерний компонент.
@@ -45,27 +45,27 @@ export interface StateProps {
      *   <IconButton />
      * </Tappable>
      */
-    unlockParentHover?: boolean;
+    unlockParentHover?: boolean | undefined;
     /**
      * Длительность показа `active`-состояния.
      */
-    activeEffectDelay?: number;
+    activeEffectDelay?: number | undefined;
     /**
      * Стиль подсветки `active`-состояния.
      */
-    activeClassName?: string;
+    activeClassName?: string | undefined;
     /**
      * Стиль подсветки `hover`-состояния.
      */
-    hoverClassName?: string;
+    hoverClassName?: string | undefined;
 }
 export declare const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
 interface UseHoverProps extends Pick<StateProps, 'hovered' | 'hasHover'> {
     /**
      * Блокирование активации состояний.
      */
-    lockState?: boolean;
-    setParentStateLock?: (v: boolean) => void;
+    lockState?: boolean | undefined;
+    setParentStateLock?: ((v: boolean) => void) | undefined;
 }
 /**
  * Управляет наведением на компонент, игнорирует тач события.
@@ -76,8 +76,8 @@ export declare function useHover({ hovered, hasHover, lockState, setParentStateL
     onPointerLeave: () => void;
 };
 interface ClickableLockStateContextInterface {
-    lockHoverStateBubbling?: (v: boolean) => void;
-    lockActiveStateBubbling?: (v: boolean) => void;
+    lockHoverStateBubbling?: ((v: boolean) => void) | undefined;
+    lockActiveStateBubbling?: ((v: boolean) => void) | undefined;
 }
 export declare const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface>;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/useState.tsx"],"names":[],"mappings":"AAEA,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;AAI/C,UAAU,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,UAAU,CAAC;IACtE;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAe,EACf,SAAiB,EACjB,kBAAyB,GAC1B,GAAE,aAAkB;;;;EA4DpB;AAuFD,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;AAqBL;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,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,CAiCA"}
+{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/useState.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEhC;;;;;;;;;;;;;;OAcG;IACH,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE3C;;;;;;;;;;;;OAYG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAExC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAI/C,UAAU,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,UAAU,CAAC;IACtE;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACzD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAe,EACf,SAAiB,EACjB,kBAAyB,GAC1B,GAAE,aAAkB;;;;EA4DpB;AAuFD,UAAU,kCAAkC;IAC1C,sBAAsB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC5D,uBAAuB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC9D;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,OAAO,CAAC,kCAAkC,CAIpF,CAAC;AAqBL;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,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,CAiCA"}

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

@@ -1 +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   * Длительность показа `active`-состояния.\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 */\nexport function useHover({\n  hovered,\n  hasHover = true,\n  lockState = false,\n  setParentStateLock = noop,\n}: UseHoverProps = {}) {\n  const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);\n\n  const prevIsHoveredRef = React.useRef<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    if (!hasHover) {\n      setHoveredStateLocal(false);\n      prevIsHoveredRef.current = false;\n      setParentStateLock(false);\n    }\n  }, [hasHover, setParentStateLock]);\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  lockState: boolean;\n  setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет активацией компонента.\n */\nfunction useActive({\n  activated,\n  activeEffectDelay,\n  hasActive = true,\n  lockState,\n  setParentStateLock,\n}: UseActiveProps) {\n  // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,\n  // если установка отложена c помощью delay, то и вызов будет отложен\n  const [activatedState, setActivated] = useStateWithDelay<boolean>(false, 0, setParentStateLock);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUpRef = React.useRef<Set<number>>(null);\n  if (pointersUpRef.current === null) {\n    pointersUpRef.current = new Set<number>();\n  }\n\n  React.useEffect(() => {\n    if (lockState || !hasActive) {\n      // Сбрасываем setActivated если обнаруживаем lockState или !hasActive\n      setActivated(false);\n    }\n  }, [lockState, hasActive, setActivated]);\n\n  const onPointerDown = () => {\n    if (lockState) {\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 (pointersUpRef.current!.has(e.pointerId)) {\n      pointersUpRef.current!.delete(e.pointerId);\n      return;\n    }\n\n    setActivated(false);\n  };\n\n  const onPointerUp: React.PointerEventHandler = (e) => {\n    pointersUpRef.current!.add(e.pointerId);\n\n    if (lockState) {\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: lockState,\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\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 [lockActiveState, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] =\n    useLockState(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    lockState: lockActiveState,\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","useEffect","current","handleHover","useCallback","isHover","isHovered","calculateStateValue","hasState","isLocked","stateValueLocal","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeEffectDelay","hasActive","activatedState","setActivated","pointersUpRef","Set","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","isActivated","ClickableLockStateContext","createContext","lockHoverStateBubbling","lockActiveStateBubbling","useLockState","setParentStateLockBubbling","setLockState","setStateLockBubblingImmediate","isLock","unlockParentHover","hoverClassName","activeClassName","useContext","lockHoverState","setParentStateLockHoverBubbling","setLockHoverBubblingImmediate","lockActiveState","setParentStateLockActiveBubbling","setLockActiveBubblingImmediate","hoverEvent","activeEvent","stateClassName","handlers"],"mappings":"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"}
+{"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 | undefined;\n  /**\n   * Позволяет управлять `hovered`-состоянием извне.\n   */\n  hovered?: boolean | undefined;\n  /**\n   * Позволяет управлять `activated`-состоянием извне.\n   */\n  activated?: boolean | undefined;\n  /**\n   * Указывает, должен ли компонент реагировать на `active`-состояние.\n   */\n  hasActive?: boolean | undefined;\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 | undefined;\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 | undefined;\n\n  /**\n   * Длительность показа `active`-состояния.\n   */\n  activeEffectDelay?: number | undefined;\n\n  /**\n   * Стиль подсветки `active`-состояния.\n   */\n  activeClassName?: string | undefined;\n\n  /**\n   * Стиль подсветки `hover`-состояния.\n   */\n  hoverClassName?: string | undefined;\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 | undefined;\n  setParentStateLock?: ((v: boolean) => void) | undefined;\n}\n\n/**\n * Управляет наведением на компонент, игнорирует тач события.\n */\nexport function useHover({\n  hovered,\n  hasHover = true,\n  lockState = false,\n  setParentStateLock = noop,\n}: UseHoverProps = {}) {\n  const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);\n\n  const prevIsHoveredRef = React.useRef<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    if (!hasHover) {\n      setHoveredStateLocal(false);\n      prevIsHoveredRef.current = false;\n      setParentStateLock(false);\n    }\n  }, [hasHover, setParentStateLock]);\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  lockState: boolean;\n  setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет активацией компонента.\n */\nfunction useActive({\n  activated,\n  activeEffectDelay,\n  hasActive = true,\n  lockState,\n  setParentStateLock,\n}: UseActiveProps) {\n  // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,\n  // если установка отложена c помощью delay, то и вызов будет отложен\n  const [activatedState, setActivated] = useStateWithDelay<boolean>(false, 0, setParentStateLock);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUpRef = React.useRef<Set<number>>(null);\n  if (pointersUpRef.current === null) {\n    pointersUpRef.current = new Set<number>();\n  }\n\n  React.useEffect(() => {\n    if (lockState || !hasActive) {\n      // Сбрасываем setActivated если обнаруживаем lockState или !hasActive\n      setActivated(false);\n    }\n  }, [lockState, hasActive, setActivated]);\n\n  const onPointerDown = () => {\n    if (lockState) {\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 (pointersUpRef.current!.has(e.pointerId)) {\n      pointersUpRef.current!.delete(e.pointerId);\n      return;\n    }\n\n    setActivated(false);\n  };\n\n  const onPointerUp: React.PointerEventHandler = (e) => {\n    pointersUpRef.current!.add(e.pointerId);\n\n    if (lockState) {\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: lockState,\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) | undefined;\n  lockActiveStateBubbling?: ((v: boolean) => void) | undefined;\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\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 [lockActiveState, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] =\n    useLockState(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    lockState: lockActiveState,\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","useEffect","current","handleHover","useCallback","isHover","isHovered","calculateStateValue","hasState","isLocked","stateValueLocal","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeEffectDelay","hasActive","activatedState","setActivated","pointersUpRef","Set","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","isActivated","ClickableLockStateContext","createContext","lockHoverStateBubbling","lockActiveStateBubbling","useLockState","setParentStateLockBubbling","setLockState","setStateLockBubblingImmediate","isLock","unlockParentHover","hoverClassName","activeClassName","useContext","lockHoverState","setParentStateLockHoverBubbling","setLockHoverBubblingImmediate","lockActiveState","setParentStateLockActiveBubbling","setLockActiveBubblingImmediate","hoverEvent","activeEvent","stateClassName","handlers"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import type * as React from 'react';
+import type { PartialWithUndefined } from '../../types';
 import { type ConfigProviderContextInterface } from './ConfigProviderContext';
-export interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {
+export interface ConfigProviderProps extends PartialWithUndefined<ConfigProviderContextInterface> {
     /**
      * Содержимое.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigProvider/ConfigProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,OAAO,EAEL,KAAK,8BAA8B,EAGpC,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,8BAA8B,CAAC;IAClF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,UAAU,mBAAmB,KAAG,KAAK,CAAC,SAyBpE,CAAC"}
+{"version":3,"file":"ConfigProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigProvider/ConfigProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAEL,KAAK,8BAA8B,EAGpC,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,CAAC,8BAA8B,CAAC;IAC/F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,UAAU,mBAAmB,KAAG,KAAK,CAAC,SAyBpE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport type * 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://vkui.io/components/config-provider\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":["IconAppearanceProvider","useAutoDetectColorScheme","useAutoDetectDirection","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProvider","propsRaw","props","parentConfig","mergeProps","colorScheme","direction","configContext","Provider","value","children"],"mappings":"AAAA;;AAGA,SAASA,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"}
+{"version":3,"sources":["../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport type * 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 type { PartialWithUndefined } from '../../types';\nimport {\n  ConfigProviderContext,\n  type ConfigProviderContextInterface,\n  useConfigProvider,\n  useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends PartialWithUndefined<ConfigProviderContextInterface> {\n  /**\n   * Содержимое.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkui.io/components/config-provider\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":["IconAppearanceProvider","useAutoDetectColorScheme","useAutoDetectDirection","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProvider","propsRaw","props","parentConfig","mergeProps","colorScheme","direction","configContext","Provider","value","children"],"mappings":"AAAA;;AAGA,SAASA,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,sBAAsB,QAAQ,wCAAqC;AAC5E,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,wBAAwB,QAAQ,qBAAkB;AAE3D,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/components/ContentBadge/ContentBadge.d.ts

@@ -7,17 +7,17 @@ export interface ContentBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElem
     /**
      * Вид отображения.
      */
-    mode?: ContentBadgeModeType;
+    mode?: ContentBadgeModeType | undefined;
     /**
      * Цвет оформления.
      */
-    appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'overlay';
+    appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'overlay' | undefined;
     /**
      * Включает приближение значения закругления к форме круга.
      *
      * > Note: игнорируется при size="s".
      */
-    capsule?: boolean;
+    capsule?: boolean | undefined;
     /**
      * Определяет отступы и размер текста.
      *
@@ -27,7 +27,7 @@ export interface ContentBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElem
      * - size="m" – при **одиночной** иконке `16x16`, в остальных случаях `12x12`;
      * - size="l" – при **одиночной** иконке `20x20`, в остальных случаях `16x16`.
      */
-    size?: ContentBadgeSizeType;
+    size?: ContentBadgeSizeType | undefined;
 }
 /**
  * Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются

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

@@ -1 +1 @@
-{"version":3,"file":"ContentBadge.d.ts","sourceRoot":"","sources":["../../../src/components/ContentBadge/ContentBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,OAAO,EAAE,KAAK,eAAe,EAAoB,MAAM,0BAA0B,CAAC;AAElF,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;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,GAAG;IACvD,QAAQ,EAAE,OAAO,oBAAoB,CAAC;IACtC;;OAEG;IACH,QAAQ,EAAE,OAAO,oBAAoB,CAAC;CAqCvC,CAAC"}
+{"version":3,"file":"ContentBadge.d.ts","sourceRoot":"","sources":["../../../src/components/ContentBadge/ContentBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,OAAO,EAAE,KAAK,eAAe,EAAoB,MAAM,0BAA0B,CAAC;AAElF,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,GAAG,SAAS,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;IAC1F;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAC;CACzC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,GAAG;IACvD,QAAQ,EAAE,OAAO,oBAAoB,CAAC;IACtC;;OAEG;IACH,QAAQ,EAAE,OAAO,oBAAoB,CAAC;CAqCvC,CAAC"}

package/dist/components/ContentBadge/ContentBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ContentBadge/ContentBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { captionClassNames } from '../Typography/Caption/Caption';\nimport { footnoteClassNames } from '../Typography/Footnote/Footnote';\nimport { type TypographyProps, weightClassNames } from '../Typography/Typography';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport { ContentBadgeIconSlot } from './ContentBadgeIconSlot';\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://vkui.io/components/content-badge\n */\nexport const ContentBadge: React.FC<ContentBadgeProps> & {\n  IconSlot: typeof ContentBadgeIconSlot;\n  /**\n   * @deprecated Since 7.3.4. Используйте `IconSlot`.\n   */\n  SlotIcon: typeof ContentBadgeIconSlot;\n} = ({\n  appearance = 'accent',\n  mode = 'primary',\n  capsule,\n  size = 'm',\n  weight = '2',\n  children,\n  ...restProps\n}: ContentBadgeProps) => {\n  const { density = 'none' } = useAdaptivity();\n  const typographyClassNames =\n    size === 'l' ? footnoteClassNames(density) : captionClassNames(density);\n\n  return (\n    <Tappable\n      baseClassName={classNames(\n        styles.host,\n        size !== 's' && capsule && styles.capsule,\n        mode === 'outline' && styles.modeOutline,\n        appearanceClassNames[appearance][mode],\n        sizeClassNames[size],\n        typographyClassNames,\n        weightClassNames(weight),\n      )}\n      DefaultComponent=\"span\"\n      hoverMode=\"opacity\"\n      activeMode=\"opacity\"\n      {...restProps}\n    >\n      <ContentBadgeContext.Provider\n        value={{ isSingleChild: React.Children.count(children) === 1, size }}\n      >\n        {children}\n      </ContentBadgeContext.Provider>\n    </Tappable>\n  );\n};\n\nContentBadge.IconSlot = ContentBadgeIconSlot;\nContentBadge.SlotIcon = ContentBadgeIconSlot;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ContentBadge.IconSlot, 'ContentBadge.IconSlot');\n  defineComponentDisplayNames(ContentBadge.SlotIcon, 'ContentBadge.SlotIcon');\n}\n"],"names":["React","classNames","useAdaptivity","defineComponentDisplayNames","Tappable","captionClassNames","footnoteClassNames","weightClassNames","ContentBadgeContext","ContentBadgeIconSlot","appearanceClassNames","primary","secondary","outline","sizeClassNames","s","m","l","ContentBadge","appearance","mode","capsule","size","weight","children","restProps","density","typographyClassNames","baseClassName","DefaultComponent","hoverMode","activeMode","Provider","value","isSingleChild","Children","count","IconSlot","SlotIcon","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,kBAAkB,QAAQ,qCAAkC;AACrE,SAA+BC,gBAAgB,QAAQ,8BAA2B;AAClF,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAI9D,MAAMC,uBAAuB;IAC3B,UAAU;QACRC,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,WAAW;QACTF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,gBAAgB;QACdF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,cAAc;QACZF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,WAAW;QACTF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;AACF;AAEA,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AA+BA;;;;;;;;CAQC,GACD,OAAO,MAAMC,eAMT,CAAC,EACHC,aAAa,QAAQ,EACrBC,OAAO,SAAS,EAChBC,OAAO,EACPC,OAAO,GAAG,EACVC,SAAS,GAAG,EACZC,QAAQ,EACR,GAAGC,WACe;IAClB,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGxB;IAC7B,MAAMyB,uBACJL,SAAS,MAAMhB,mBAAmBoB,WAAWrB,kBAAkBqB;IAEjE,qBACE,KAACtB;QACCwB,eAAe3B,qCAEbqB,SAAS,OAAOD,wCAChBD,SAAS,8CACTV,oBAAoB,CAACS,WAAW,CAACC,KAAK,EACtCN,cAAc,CAACQ,KAAK,EACpBK,sBACApB,iBAAiBgB;QAEnBM,kBAAiB;QACjBC,WAAU;QACVC,YAAW;QACV,GAAGN,SAAS;kBAEb,cAAA,KAACjB,oBAAoBwB,QAAQ;YAC3BC,OAAO;gBAAEC,eAAelC,MAAMmC,QAAQ,CAACC,KAAK,CAACZ,cAAc;gBAAGF;YAAK;sBAElEE;;;AAIT,EAAE;AAEFN,aAAamB,QAAQ,GAAG5B;AACxBS,aAAaoB,QAAQ,GAAG7B;AAExB,IAAI8B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCtC,4BAA4Be,aAAamB,QAAQ,EAAE;IACnDlC,4BAA4Be,aAAaoB,QAAQ,EAAE;AACrD"}
+{"version":3,"sources":["../../../src/components/ContentBadge/ContentBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { captionClassNames } from '../Typography/Caption/Caption';\nimport { footnoteClassNames } from '../Typography/Footnote/Footnote';\nimport { type TypographyProps, weightClassNames } from '../Typography/Typography';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport { ContentBadgeIconSlot } from './ContentBadgeIconSlot';\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 | undefined;\n  /**\n   * Цвет оформления.\n   */\n  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'overlay' | undefined;\n  /**\n   * Включает приближение значения закругления к форме круга.\n   *\n   * > Note: игнорируется при size=\"s\".\n   */\n  capsule?: boolean | undefined;\n  /**\n   * Определяет отступы и размер текста.\n   *\n   * Соответствие размеров иконок в слоте `<ContentBadge.SlotIcon />`:\n   *\n   * - size=\"s\" – ⚠️ не поддерживает иконки;\n   * - size=\"m\" – при **одиночной** иконке `16x16`, в остальных случаях `12x12`;\n   * - size=\"l\" – при **одиночной** иконке `20x20`, в остальных случаях `16x16`.\n   */\n  size?: ContentBadgeSizeType | undefined;\n}\n\n/**\n * Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются\n * поверх других элементов или рядом с ними.\n *\n * Используйте `ContentBadge.SlotIcon` для размещения иконок внутри `ContentBadge`.\n *\n * @since 6.1.0\n * @see https://vkui.io/components/content-badge\n */\nexport const ContentBadge: React.FC<ContentBadgeProps> & {\n  IconSlot: typeof ContentBadgeIconSlot;\n  /**\n   * @deprecated Since 7.3.4. Используйте `IconSlot`.\n   */\n  SlotIcon: typeof ContentBadgeIconSlot;\n} = ({\n  appearance = 'accent',\n  mode = 'primary',\n  capsule,\n  size = 'm',\n  weight = '2',\n  children,\n  ...restProps\n}: ContentBadgeProps) => {\n  const { density = 'none' } = useAdaptivity();\n  const typographyClassNames =\n    size === 'l' ? footnoteClassNames(density) : captionClassNames(density);\n\n  return (\n    <Tappable\n      baseClassName={classNames(\n        styles.host,\n        size !== 's' && capsule && styles.capsule,\n        mode === 'outline' && styles.modeOutline,\n        appearanceClassNames[appearance][mode],\n        sizeClassNames[size],\n        typographyClassNames,\n        weightClassNames(weight),\n      )}\n      DefaultComponent=\"span\"\n      hoverMode=\"opacity\"\n      activeMode=\"opacity\"\n      {...restProps}\n    >\n      <ContentBadgeContext.Provider\n        value={{ isSingleChild: React.Children.count(children) === 1, size }}\n      >\n        {children}\n      </ContentBadgeContext.Provider>\n    </Tappable>\n  );\n};\n\nContentBadge.IconSlot = ContentBadgeIconSlot;\nContentBadge.SlotIcon = ContentBadgeIconSlot;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ContentBadge.IconSlot, 'ContentBadge.IconSlot');\n  defineComponentDisplayNames(ContentBadge.SlotIcon, 'ContentBadge.SlotIcon');\n}\n"],"names":["React","classNames","useAdaptivity","defineComponentDisplayNames","Tappable","captionClassNames","footnoteClassNames","weightClassNames","ContentBadgeContext","ContentBadgeIconSlot","appearanceClassNames","primary","secondary","outline","sizeClassNames","s","m","l","ContentBadge","appearance","mode","capsule","size","weight","children","restProps","density","typographyClassNames","baseClassName","DefaultComponent","hoverMode","activeMode","Provider","value","isSingleChild","Children","count","IconSlot","SlotIcon","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,kBAAkB,QAAQ,qCAAkC;AACrE,SAA+BC,gBAAgB,QAAQ,8BAA2B;AAClF,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAI9D,MAAMC,uBAAuB;IAC3B,UAAU;QACRC,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,WAAW;QACTF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,gBAAgB;QACdF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,cAAc;QACZF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,WAAW;QACTF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;AACF;AAEA,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AA+BA;;;;;;;;CAQC,GACD,OAAO,MAAMC,eAMT,CAAC,EACHC,aAAa,QAAQ,EACrBC,OAAO,SAAS,EAChBC,OAAO,EACPC,OAAO,GAAG,EACVC,SAAS,GAAG,EACZC,QAAQ,EACR,GAAGC,WACe;IAClB,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGxB;IAC7B,MAAMyB,uBACJL,SAAS,MAAMhB,mBAAmBoB,WAAWrB,kBAAkBqB;IAEjE,qBACE,KAACtB;QACCwB,eAAe3B,qCAEbqB,SAAS,OAAOD,wCAChBD,SAAS,8CACTV,oBAAoB,CAACS,WAAW,CAACC,KAAK,EACtCN,cAAc,CAACQ,KAAK,EACpBK,sBACApB,iBAAiBgB;QAEnBM,kBAAiB;QACjBC,WAAU;QACVC,YAAW;QACV,GAAGN,SAAS;kBAEb,cAAA,KAACjB,oBAAoBwB,QAAQ;YAC3BC,OAAO;gBAAEC,eAAelC,MAAMmC,QAAQ,CAACC,KAAK,CAACZ,cAAc;gBAAGF;YAAK;sBAElEE;;;AAIT,EAAE;AAEFN,aAAamB,QAAQ,GAAG5B;AACxBS,aAAaoB,QAAQ,GAAG7B;AAExB,IAAI8B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCtC,4BAA4Be,aAAamB,QAAQ,EAAE;IACnDlC,4BAA4Be,aAAaoB,QAAQ,EAAE;AACrD"}

package/dist/components/ContentCard/ContentCard.d.ts

@@ -6,36 +6,36 @@ export interface ContentCardProps extends HasRootRef<HTMLDivElement>, HasCompone
     /**
      Текст над заголовком.
      */
-    overTitle?: React.ReactNode;
+    overTitle?: React.ReactNode | undefined;
     /**
      Заголовок.
      */
-    title?: React.ReactNode;
+    title?: React.ReactNode | undefined;
     /**
      Позволяет поменять тег используемый для заголовка.
      */
-    titleComponent?: React.ElementType;
+    titleComponent?: React.ElementType | undefined;
     /**
      Текст.
      */
-    description?: React.ReactNode;
+    description?: React.ReactNode | undefined;
     /**
      Нижний текст.
      */
-    caption?: React.ReactNode;
+    caption?: React.ReactNode | undefined;
     /**
       Максимальная высота изображения.
      */
-    maxHeight?: number;
+    maxHeight?: number | undefined;
     /**
      * Внешний вид карточки.
      */
-    mode?: CardProps['mode'];
+    mode?: CardProps['mode'] | undefined;
     /**
      * Пользовательское значения стиля `object-fit` для картинки
      * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).
      */
-    imageObjectFit?: React.CSSProperties['objectFit'];
+    imageObjectFit?: React.CSSProperties['objectFit'] | undefined;
 }
 /**
  * @see https://vkui.io/components/content-card

package/dist/components/ContentCard/ContentCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAOxE,MAAM,WAAW,gBACf,SAAQ,UAAU,CAAC,cAAc,CAAC,EAChC,YAAY,EACZ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC,EACvE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,MAAM,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,EAC7F,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;CACnD;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,gSA+BzB,gBAAgB,KAAG,KAAK,CAAC,SA6D3B,CAAC"}
+{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAOxE,MAAM,WAAW,gBACf,SAAQ,UAAU,CAAC,cAAc,CAAC,EAChC,YAAY,EACZ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC,EACvE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,MAAM,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,EAC7F,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACxC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;IAC/C;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACrC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC;CAC/D;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,gSA+BzB,gBAAgB,KAAG,KAAK,CAAC,SA6D3B,CAAC"}

package/dist/components/ContentCard/ContentCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import type * 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 TappableOmitProps } 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<TappableOmitProps, 'getRootRef' | 'crossOrigin' | 'title' | 'src'>,\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://vkui.io/components/content-card\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            // safari и firefox нужно чтобы атрибут `loading` был до `src`\n            //\n            // https://mihaly4.ru/image-loading-lazy-bug\n            loading={loading}\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\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":["classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","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","img","ref","objectFit","div","weight","level","caps"],"mappings":";AACA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AA4C/C;;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,KAAClC;QACCa,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWf,WAAWqC,UAAUC,QAAQ,iCAAqBvB;kBAE7D,cAAA,MAACX;YACC8B,UAAUA;YACVC,WAAWA;YACV,GAAGE,SAAS;YACbE,aAAa;;gBAEXlB,CAAAA,OAAOC,MAAK,mBACZ,KAACkB;oBACC,8DAA8D;oBAC9D,EAAE;oBACF,4CAA4C;oBAC5CZ,SAASA;oBACTa,KAAKtB;oBACLJ,SAAS;oBACTM,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVE,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG7B,qBAAqB8B,cAAc;oBACvCP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWsB,WAAWT;oBAAe;;8BAGlD,MAACU;oBAAI5B,SAAS;;wBACXd,aAAaS,4BACZ,KAACL;4BACCU,WAAWf;4BACX4C,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHpC;;wBAGJT,aAAaU,wBACZ,KAACJ;4BAASQ,SAAS;4BAAe6B,QAAO;4BAAIC,OAAM;4BAAIT,WAAWxB;sCAC/DD;;wBAGJV,aAAaY,8BAAgB,KAACL;4BAAKO,SAAS;sCAAgBF;;wBAC5DZ,aAAaa,0BACZ,KAACR;4BAASS,WAAWf;sCAA0Cc;;;;;;;AAM3E,EAAE"}
+{"version":3,"sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import type * 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 TappableOmitProps } 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<TappableOmitProps, 'getRootRef' | 'crossOrigin' | 'title' | 'src'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком.\n   */\n  overTitle?: React.ReactNode | undefined;\n  /**\n   Заголовок.\n   */\n  title?: React.ReactNode | undefined;\n  /**\n   Позволяет поменять тег используемый для заголовка.\n   */\n  titleComponent?: React.ElementType | undefined;\n  /**\n   Текст.\n   */\n  description?: React.ReactNode | undefined;\n  /**\n   Нижний текст.\n   */\n  caption?: React.ReactNode | undefined;\n  /**\n    Максимальная высота изображения.\n   */\n  maxHeight?: number | undefined;\n  /**\n   * Внешний вид карточки.\n   */\n  mode?: CardProps['mode'] | undefined;\n  /**\n   * Пользовательское значения стиля `object-fit` для картинки\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n   */\n  imageObjectFit?: React.CSSProperties['objectFit'] | undefined;\n}\n\n/**\n * @see https://vkui.io/components/content-card\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            // safari и firefox нужно чтобы атрибут `loading` был до `src`\n            //\n            // https://mihaly4.ru/image-loading-lazy-bug\n            loading={loading}\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\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":["classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","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","img","ref","objectFit","div","weight","level","caps"],"mappings":";AACA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AA4C/C;;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,KAAClC;QACCa,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWf,WAAWqC,UAAUC,QAAQ,iCAAqBvB;kBAE7D,cAAA,MAACX;YACC8B,UAAUA;YACVC,WAAWA;YACV,GAAGE,SAAS;YACbE,aAAa;;gBAEXlB,CAAAA,OAAOC,MAAK,mBACZ,KAACkB;oBACC,8DAA8D;oBAC9D,EAAE;oBACF,4CAA4C;oBAC5CZ,SAASA;oBACTa,KAAKtB;oBACLJ,SAAS;oBACTM,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVE,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG7B,qBAAqB8B,cAAc;oBACvCP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWsB,WAAWT;oBAAe;;8BAGlD,MAACU;oBAAI5B,SAAS;;wBACXd,aAAaS,4BACZ,KAACL;4BACCU,WAAWf;4BACX4C,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHpC;;wBAGJT,aAAaU,wBACZ,KAACJ;4BAASQ,SAAS;4BAAe6B,QAAO;4BAAIC,OAAM;4BAAIT,WAAWxB;sCAC/DD;;wBAGJV,aAAaY,8BAAgB,KAACL;4BAAKO,SAAS;sCAAgBF;;wBAC5DZ,aAAaa,0BACZ,KAACR;4BAASS,WAAWf;sCAA0Cc;;;;;;;AAM3E,EAAE"}

package/dist/components/Counter/Counter.d.ts

@@ -4,11 +4,11 @@ export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
     /**
      * Режим отображения счетчика.
      */
-    mode?: 'primary' | 'contrast' | 'tertiary' | 'inherit';
+    mode?: 'primary' | 'contrast' | 'tertiary' | 'inherit' | undefined;
     /**
      * Внешний вид счетчика.
      */
-    appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'custom';
+    appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'custom' | undefined;
     /**
      * Пользовательский цвет (работает только при appearance="custom")
      * - При mode="primary" - изменяет фон
@@ -16,11 +16,11 @@ export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
      * - При mode="tertiary" - изменяет цвет текста
      * - При mode="inherit" - не работает.
      */
-    color?: string;
+    color?: string | undefined;
     /**
      * Размер счетчика.
      */
-    size?: 's' | 'm';
+    size?: 's' | 'm' | undefined;
 }
 /**
  * @see https://vkui.io/components/counter

package/dist/components/Counter/Counter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../../../src/components/Counter/Counter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAyBlF,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;IAEvD;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,QAAQ,CAAC;IAE7E;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,wGASrB,YAAY,KAAG,KAAK,CAAC,SAsDvB,CAAC"}
+{"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../../../src/components/Counter/Counter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAyBlF,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IAEnE;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC;IAEzF;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,wGASrB,YAAY,KAAG,KAAK,CAAC,SAsDvB,CAAC"}

package/dist/components/Counter/Counter.js.map

@@ -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, 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://vkui.io/components/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","modeClassNames","primary","contrast","tertiary","inherit","appearanceClassNames","sizeClassNames","s","m","Counter","mode","appearance","appearanceProp","color","size","children","className","style","styleProp","restProps","useMemo","undefined","Children","count","CounterTypography","counterLevel","Component","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;AAG3D,MAAMC,iBAAiB;IACrBC,OAAO;IACPC,QAAQ;IACRC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,uBAA+C;IACnD,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,cAAc;IACd,YAAY;AACd;AAEA,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;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,aAAahB,MAAMyB,OAAO,CAA6B;QAC3D,IAAIV,SAAS,WAAW;YACtB,OAAOW;QACT;QACA,IAAIT,gBAAgB;YAClB,OAAOA;QACT;QACA,OAAO;IACT,GAAG;QAACA;QAAgBF;KAAK;IAEzB,MAAMO,QACJtB,MAAMyB,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,IAAIf,MAAM2B,QAAQ,CAACC,KAAK,CAACR,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMS,oBAAoBV,SAAS,MAAMhB,UAAUC;IACnD,MAAM0B,eAAeX,SAAS,MAAM,MAAM;IAE1C,qBACE,KAACU;QACE,GAAGL,SAAS;QACbF,OAAOpB,WAAWoB,OAAOC;QACzBQ,WAAU;QACVV,WAAWpB,WACT,4CAEAI,cAAc,CAACU,KAAK,EACpB,CAAC,CAACC,cAAcN,oBAAoB,CAACM,WAAW,EAChDL,cAAc,CAACQ,KAAK,EACpBE;QAEFW,OAAOF;kBAENV;;AAGP,EAAE"}
+{"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, 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' | undefined;\n\n  /**\n   * Внешний вид счетчика.\n   */\n  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'custom' | undefined;\n\n  /**\n   * Пользовательский цвет (работает только при appearance=\"custom\")\n   * - При mode=\"primary\" - изменяет фон\n   * - При mode=\"contrast\" - изменяет цвет текста\n   * - При mode=\"tertiary\" - изменяет цвет текста\n   * - При mode=\"inherit\" - не работает.\n   */\n  color?: string | undefined;\n  /**\n   * Размер счетчика.\n   */\n  size?: 's' | 'm' | undefined;\n}\n\n/**\n * @see https://vkui.io/components/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","modeClassNames","primary","contrast","tertiary","inherit","appearanceClassNames","sizeClassNames","s","m","Counter","mode","appearance","appearanceProp","color","size","children","className","style","styleProp","restProps","useMemo","undefined","Children","count","CounterTypography","counterLevel","Component","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;AAG3D,MAAMC,iBAAiB;IACrBC,OAAO;IACPC,QAAQ;IACRC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,uBAA+C;IACnD,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,cAAc;IACd,YAAY;AACd;AAEA,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;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,aAAahB,MAAMyB,OAAO,CAA6B;QAC3D,IAAIV,SAAS,WAAW;YACtB,OAAOW;QACT;QACA,IAAIT,gBAAgB;YAClB,OAAOA;QACT;QACA,OAAO;IACT,GAAG;QAACA;QAAgBF;KAAK;IAEzB,MAAMO,QACJtB,MAAMyB,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,IAAIf,MAAM2B,QAAQ,CAACC,KAAK,CAACR,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMS,oBAAoBV,SAAS,MAAMhB,UAAUC;IACnD,MAAM0B,eAAeX,SAAS,MAAM,MAAM;IAE1C,qBACE,KAACU;QACE,GAAGL,SAAS;QACbF,OAAOpB,WAAWoB,OAAOC;QACzBQ,WAAU;QACVV,WAAWpB,WACT,4CAEAI,cAAc,CAACU,KAAK,EACpB,CAAC,CAACC,cAAcN,oBAAoB,CAACM,WAAW,EAChDL,cAAc,CAACQ,KAAK,EACpBE;QAEFW,OAAOF;kBAENV;;AAGP,EAAE"}

package/dist/components/CustomScrollView/CustomScrollView.d.ts

@@ -4,11 +4,11 @@ export interface CustomScrollViewProps extends React.AllHTMLAttributes<HTMLDivEl
     /**
      * `className` для компонента.
      */
-    className?: HTMLDivElement['className'];
+    className?: HTMLDivElement['className'] | undefined;
     /**
      * Обработчик события `scroll`.
      */
-    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    onScroll?: ((event: React.UIEvent<HTMLDivElement>) => void) | undefined;
     /**
      * Содержимое.
      */
@@ -16,21 +16,21 @@ export interface CustomScrollViewProps extends React.AllHTMLAttributes<HTMLDivEl
     /**
      * Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior).
      */
-    overscrollBehavior?: 'auto' | 'contain' | 'none';
+    overscrollBehavior?: 'auto' | 'contain' | 'none' | undefined;
     /**
      * Поведение scroll-behavior, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior).
      */
-    scrollBehavior?: 'auto' | 'smooth';
+    scrollBehavior?: 'auto' | 'smooth' | undefined;
     /**
      * Включение отображения горизонтального скролла.
      */
-    enableHorizontalScroll?: boolean;
+    enableHorizontalScroll?: boolean | undefined;
     /**
      * Скрытие скроллбара.
      *
      * > В версии ниже Firefox 64 будет виден скролл.
      */
-    scrollbarHidden?: boolean;
+    scrollbarHidden?: boolean | undefined;
 }
 /**
  * @see https://vkui.io/components/custom-scroll-view

package/dist/components/CustomScrollView/CustomScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAc9C,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC1D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,0IAU9B,qBAAqB,KAAG,KAAK,CAAC,SAkBhC,CAAC"}
+{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAc9C,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACxE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7D;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC/C;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7C;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACvC;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,0IAU9B,qBAAqB,KAAG,KAAK,CAAC,SAkBhC,CAAC"}

package/dist/components/CustomScrollView/CustomScrollView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["'use client';\n\nimport type * 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://vkui.io/components/custom-scroll-view\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":["classNames","overscrollBehaviorClassNames","auto","undefined","contain","none","scrollBehaviorClassNames","smooth","CustomScrollView","className","children","enableHorizontalScroll","onScroll","getRootRef","overscrollBehavior","scrollBehavior","scrollbarHidden","restProps","div","ref"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAI7C,MAAMC,+BAA+B;IACnCC,MAAMC;IACNC,OAAO;IACPC,IAAI;AACN;AAEA,MAAMC,2BAA2B;IAC/BJ,MAAMC;IACNI,MAAM;AACR;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,WAAWT,WACTS,yCAEAE,2EACAV,4BAA4B,CAACa,mBAAmB,EAChDR,wBAAwB,CAACS,eAAe,EACxCC;QAEFG,KAAKN;QACLD,UAAUA;QACT,GAAGK,SAAS;kBAEZP;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["'use client';\n\nimport type * 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'] | undefined;\n  /**\n   * Обработчик события `scroll`.\n   */\n  onScroll?: ((event: React.UIEvent<HTMLDivElement>) => void) | undefined;\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' | undefined;\n  /**\n   * Поведение scroll-behavior, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior).\n   */\n  scrollBehavior?: 'auto' | 'smooth' | undefined;\n  /**\n   * Включение отображения горизонтального скролла.\n   */\n  enableHorizontalScroll?: boolean | undefined;\n  /**\n   * Скрытие скроллбара.\n   *\n   * > В версии ниже Firefox 64 будет виден скролл.\n   */\n  scrollbarHidden?: boolean | undefined;\n}\n\n/**\n * @see https://vkui.io/components/custom-scroll-view\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":["classNames","overscrollBehaviorClassNames","auto","undefined","contain","none","scrollBehaviorClassNames","smooth","CustomScrollView","className","children","enableHorizontalScroll","onScroll","getRootRef","overscrollBehavior","scrollBehavior","scrollbarHidden","restProps","div","ref"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAI7C,MAAMC,+BAA+B;IACnCC,MAAMC;IACNC,OAAO;IACPC,IAAI;AACN;AAEA,MAAMC,2BAA2B;IAC/BJ,MAAMC;IACNI,MAAM;AACR;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,WAAWT,WACTS,yCAEAE,2EACAV,4BAA4B,CAACa,mBAAmB,EAChDR,wBAAwB,CAACS,eAAe,EACxCC;QAEFG,KAAKN;QACLD,UAAUA;QACT,GAAGK,SAAS;kBAEZP;;AAGP,EAAE"}