@vkontakte/vkui 7.0.0-dev-efd91c.3 → 7.0.0

package/dist/cssm/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 {\n  type FocusVisibleModeProps,\n  useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport {\n  ClickableLockStateContext,\n  DEFAULT_ACTIVE_EFFECT_DELAY,\n  type StateProps,\n  useState,\n} from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst RealClickable = <T,>({\n  baseClassName,\n  children,\n  focusVisibleMode = 'inside',\n  activeClassName,\n  hoverClassName,\n  activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n  hasHover = true,\n  hasActive = true,\n  hovered,\n  activated,\n  hasHoverWithChildren,\n  unlockParentHover,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onPointerCancel,\n  onPointerUp,\n  onBlur,\n  onFocus,\n  onKeyDown,\n  ...restProps\n}: ClickableProps<T>) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n  const {\n    stateClassName,\n    setLockHoverBubblingImmediate,\n    setLockActiveBubblingImmediate,\n    ...stateEvents\n  } = useState({\n    activeClassName,\n    hoverClassName,\n    activeEffectDelay,\n    hasHover,\n    hasActive,\n    hovered,\n    activated,\n    unlockParentHover,\n  });\n\n  const handlers = mergeCalls(\n    focusEvents,\n    stateEvents,\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onPointerEnter,\n      onPointerLeave,\n      onPointerDown,\n      onPointerCancel,\n      onPointerUp,\n      onBlur,\n      onFocus,\n      onKeyDown,\n    },\n  );\n\n  const lockStateContextValue = React.useMemo(\n    () => ({\n      lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,\n      lockActiveStateBubbling: setLockActiveBubblingImmediate,\n    }),\n    [setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, hasHoverWithChildren],\n  );\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        baseClassName,\n        styles.realClickable,\n        focusVisibleClassNames,\n        stateClassName,\n      )}\n      {...handlers}\n      {...restProps}\n    >\n      <ClickableLockStateContext.Provider value={lockStateContextValue}>\n        {children}\n      </ClickableLockStateContext.Provider>\n    </RootComponent>\n  );\n};\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(baseClassNameProp, styles.host);\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["React","classNames","noop","useFocusVisible","useFocusVisibleClassName","mergeCalls","clickByKeyboardHandler","RootComponent","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","restProps","RealClickable","baseClassName","children","focusVisibleMode","hasHoverWithChildren","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockHoverBubblingImmediate","setLockActiveBubblingImmediate","stateEvents","handlers","lockStateContextValue","useMemo","lockHoverStateBubbling","lockActiveStateBubbling","realClickable","Provider","value","checkClickable","props","undefined","Component","disabled","component","Clickable","baseClassNameProp","commonProps","isClickable","host"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(baseClassNameProp, styles.host);\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["React","classNames","RootComponent","RealClickable","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","restProps","checkClickable","props","undefined","Component","disabled","component","Clickable","focusVisibleMode","baseClassName","baseClassNameProp","commonProps","isClickable","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,OAAOC,YAAY,yBAAyB;AAO5C;;CAEC,GACD,MAAMC,eAAe,CAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjB,GAAGC,WACe,iBAAK,KAACf;QAAe,GAAGe,SAAS;;AAErD;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMb,IAAI,KAAKc,aACdD,MAAMZ,OAAO,KAAKa,aAClBD,MAAMX,cAAc,KAAKY,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTd,OAAO,EACPC,cAAc,EACdF,IAAI,EACJgB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;QAAU;IACrB,OAAO,IAAIf,SAASc,WAAW;QAC7B,OAAO;YAAE,aAAa;YAAK,iBAAiBE;QAAS;IACvD,OAAO,IAAIf,YAAYa,aAAaZ,mBAAmBY,WAAW;QAChE,OAAO;YACL,aAAa;YACb,QAAQ;YACR,YAAYE,WAAWF,YAAY;YACnC,iBAAiBE;QACnB;IACF;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAME,YAAY,CAAK,EAC5BC,mBAAmB,QAAQ,EAC3BC,eAAeC,iBAAiB,EAChC,GAAGV,WACe;IAClB,MAAMW,cAAcL,UAAUN;IAC9B,MAAMY,cAAcX,eAAeD;IACnC,MAAMS,gBAAgBzB,WAAW0B,mBAAmBvB,OAAO0B,IAAI;IAE/D,IAAID,aAAa;QACf,qBACE,KAAC1B;YACCuB,eAAeA;YACfD,kBAAkBA;YACjB,GAAGG,WAAW;YACd,GAAGX,SAAS;;IAGnB;IAEA,qBAAO,KAACZ;QAAaqB,eAAeA;QAAgB,GAAGE,WAAW;QAAG,GAAGX,SAAS;;AACnF,EAAE"}

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

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { classNames, noop } from "@vkontakte/vkjs";
+import { useFocusVisible } from "../../hooks/useFocusVisible.js";
+import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
+import { mergeCalls } from "../../lib/mergeCalls.js";
+import { clickByKeyboardHandler } from "../../lib/utils.js";
+import { RootComponent } from "../RootComponent/RootComponent.js";
+import { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from "./useState.js";
+import styles from "./Clickable.module.css";
+/**
+ * Кликабельный компонент. Добавляем кучу обвесов
+ */ export const RealClickable = ({ baseClassName, children, focusVisibleMode = 'inside', activeClassName, hoverClassName, activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY, hasHover = true, hasActive = true, hovered, activated, hasHoverWithChildren, unlockParentHover, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown, ...restProps })=>{
+    const { focusVisible, ...focusEvents } = useFocusVisible();
+    const focusVisibleClassNames = useFocusVisibleClassName({
+        focusVisible,
+        mode: focusVisibleMode
+    });
+    const { stateClassName, setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, ...stateEvents } = useState({
+        activeClassName,
+        hoverClassName,
+        activeEffectDelay,
+        hasHover,
+        hasActive,
+        hovered,
+        activated,
+        unlockParentHover
+    });
+    const handlers = mergeCalls(focusEvents, stateEvents, {
+        onKeyDown: clickByKeyboardHandler
+    }, {
+        onPointerEnter,
+        onPointerLeave,
+        onPointerDown,
+        onPointerCancel,
+        onPointerUp,
+        onBlur,
+        onFocus,
+        onKeyDown
+    });
+    const lockStateContextValue = React.useMemo(()=>({
+            lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,
+            lockActiveStateBubbling: setLockActiveBubblingImmediate
+        }), [
+        setLockHoverBubblingImmediate,
+        setLockActiveBubblingImmediate,
+        hasHoverWithChildren
+    ]);
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        baseClassName: classNames(baseClassName, styles.realClickable, focusVisibleClassNames, stateClassName),
+        ...handlers,
+        ...restProps,
+        children: /*#__PURE__*/ _jsx(ClickableLockStateContext.Provider, {
+            value: lockStateContextValue,
+            children: children
+        })
+    });
+};
+
+//# sourceMappingURL=RealClickable.js.map

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

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

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

@@ -141,6 +141,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormItem--status-error) .modeDefault .border,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem--status-error) .focusVisible .border,
 .statusError.modeDefault .border,
 .statusError.focusVisible .border {
@@ -160,6 +161,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormItem--status-valid) .modeDefault .border,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem--status-valid) .focusVisible .border,
 .statusValid.modeDefault .border,
 .statusValid.focusVisible .border {

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

@@ -156,24 +156,24 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
-.withTop .removable,
-:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .withTop {
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .withTop,
+.withTop .removable {
   -webkit-margin-before: calc(-2px - var(--vkui--font_subhead--line_height--regular) - 8px);
           margin-block-start: calc(-2px - var(--vkui--font_subhead--line_height--regular) - 8px);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
-.sizeYCompact.withTop .removable,
-:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .sizeYCompact.withTop {
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .sizeYCompact.withTop,
+.sizeYCompact.withTop .removable {
   -webkit-margin-before: calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px);
           margin-block-start: calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px);
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-  .sizeYNone.withTop .removable,
-  :global(.vkuiInternalFormLayoutGroup--mode-horizontal) .sizeYNone.withTop {
+  :global(.vkuiInternalFormLayoutGroup--mode-horizontal) .sizeYNone.withTop,
+  .sizeYNone.withTop .removable {
     -webkit-margin-before: calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px);
             margin-block-start: calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px);
   }

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

@@ -319,6 +319,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalPanelHeader--vkcom) ~ .host:first-of-type,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalPanelHeader--vkcom) + * .host:first-of-type {
   position: relative;
   inset-block-start: -1px;

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

@@ -207,7 +207,7 @@
  * TODO: Переделать отрицательные отступы https://github.com/VKCOM/VKUI/issues/3508
  */
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalGroup--mode-plain):not(:first-of-type) > .host:first-child,
 :global(.vkuiInternalGroup--mode-plain):not(:first-of-type)
@@ -217,8 +217,10 @@
           margin-block-start: -16px;
 }
 
+/* stylelint-enable selector-pseudo-class-disallowed-list */
+
 @media (max-width: 767.9px) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none):not(:first-of-type)
     > .host:first-child,
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none):not(:first-of-type)
@@ -227,9 +229,10 @@
     -webkit-margin-before: -16px;
             margin-block-start: -16px;
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalGroup--mode-card) > .host:not(.sizeM):first-child,
 :global(.vkuiInternalGroup--mode-card)
@@ -239,8 +242,10 @@
           margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
 }
 
+/* stylelint-enable selector-pseudo-class-disallowed-list */
+
 @media (min-width: 768px) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
     > .host:not(.sizeM):first-child,
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
@@ -249,6 +254,7 @@
     -webkit-margin-before: calc(-1 * var(--vkui--spacing_size_xs));
             margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 
 /**

package/dist/cssm/components/HorizontalCell/HorizontalCell.js

@@ -20,20 +20,11 @@ const textAlignClassNames = {
     center: styles.textAlignCenter,
     end: styles.textAlignEnd
 };
-const CellTypography = ({ size, children, ...restProps })=>{
-    return size === 's' ? /*#__PURE__*/ _jsx(Caption, {
-        ...restProps,
-        children: children
-    }) : /*#__PURE__*/ _jsx(Subhead, {
-        ...restProps,
-        children: children
-    });
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */ export const HorizontalCell = ({ className, title, style, subtitle, size = 's', children = /*#__PURE__*/ _jsx(Avatar, {
     size: 56
-}), getRootRef, getRef, extraSubtitle, textAlign = size === 's' ? 'center' : 'start', noPadding = false, ...restProps })=>{
+}), getRootRef, getRef, extraSubtitle, textAlign = size === 's' ? 'center' : 'start', noPadding = false, TitleComponent = size === 's' ? Caption : Subhead, ...restProps })=>{
     const hasTypography = hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);
     const customProperties = typeof size === 'number' ? {
         [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px`
@@ -54,8 +45,7 @@ const CellTypography = ({ size, children, ...restProps })=>{
                 hasTypography && /*#__PURE__*/ _jsxs("div", {
                     className: classNames(styles.content, textAlign !== 'start' && textAlignClassNames[textAlign]),
                     children: [
-                        hasReactNode(title) && /*#__PURE__*/ _jsx(CellTypography, {
-                            size: size,
+                        hasReactNode(title) && /*#__PURE__*/ _jsx(TitleComponent, {
                             children: title
                         }),
                         hasReactNode(subtitle) && /*#__PURE__*/ _jsx(Footnote, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type {\n  CSSCustomProperties,\n  HasRef,\n  HasRootRef,\n  HTMLAttributesWithRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = '--vkui_internal--cell_width';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n  xl: styles.sizeXL,\n  auto: styles.sizeAuto,\n};\n\nconst textAlignClassNames = {\n  center: styles.textAlignCenter,\n  end: styles.textAlignEnd,\n};\n\ntype HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Ширина компонента\n   *\n   * Значения `'s' | 'm' | 'l' | 'xl'` определяются дизайн-системой.\n   * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.\n   * Пользовательскую ширину можно задать через числовое значение.\n   */\n  size?: LiteralUnion<HorizontalCellSizes, number>;\n  /**\n   * Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`\n   */\n  textAlign?: 'start' | 'center' | 'end';\n  /**\n   * Отключает формирование отступов у крайних элементов\n   *\n   * Актуально для использования в многострочных списках\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  title,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  textAlign = size === 's' ? 'center' : 'start',\n  noPadding = false,\n  ...restProps\n}: HorizontalCellProps): React.ReactNode => {\n  const hasTypography =\n    hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);\n\n  const customProperties: CSSCustomProperties | undefined =\n    typeof size === 'number' ? { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` } : undefined;\n\n  return (\n    <div\n      ref={getRootRef}\n      style={mergeStyle(customProperties, style)}\n      className={classNames(\n        styles.host,\n        typeof size === 'string' && stylesSize[size],\n        size !== 'auto' && styles.sized,\n        typeof size === 'number' && styles.customSize,\n        noPadding && styles.noPadding,\n        className,\n      )}\n    >\n      <Tappable className={styles.body} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && <div className={styles.image}>{children}</div>}\n        {hasTypography && (\n          <div\n            className={classNames(\n              styles.content,\n              textAlign !== 'start' && textAlignClassNames[textAlign],\n            )}\n          >\n            {hasReactNode(title) && <CellTypography size={size}>{title}</CellTypography>}\n            {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","mergeStyle","Avatar","Tappable","Caption","Footnote","Subhead","styles","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","sizeS","m","sizeM","l","sizeL","xl","sizeXL","auto","sizeAuto","textAlignClassNames","center","textAlignCenter","end","textAlignEnd","CellTypography","size","children","restProps","HorizontalCell","className","title","style","subtitle","getRootRef","getRef","extraSubtitle","textAlign","noPadding","hasTypography","customProperties","undefined","div","ref","host","sized","customSize","body","image","content"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,QAAQ,8BAA2B;AAQtD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,GAAGH,OAAOI,KAAK;IACfC,GAAGL,OAAOM,KAAK;IACfC,GAAGP,OAAOQ,KAAK;IACfC,IAAIT,OAAOU,MAAM;IACjBC,MAAMX,OAAOY,QAAQ;AACvB;AAEA,MAAMC,sBAAsB;IAC1BC,QAAQd,OAAOe,eAAe;IAC9BC,KAAKhB,OAAOiB,YAAY;AAC1B;AAQA,MAAMC,iBAAiB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,KAACtB;QAAS,GAAGwB,SAAS;kBAAGD;uBAEzB,KAACrB;QAAS,GAAGsB,SAAS;kBAAGD;;AAE7B;AAsCA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,KAACzB;IAAOwB,MAAM;EAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,YAAYX,SAAS,MAAM,WAAW,OAAO,EAC7CY,YAAY,KAAK,EACjB,GAAGV,WACiB;IACpB,MAAMW,gBACJvC,aAAa+B,UAAU/B,aAAaiC,aAAajC,aAAaoC;IAEhE,MAAMI,mBACJ,OAAOd,SAAS,WAAW;QAAE,CAAClB,gCAAgC,EAAE,GAAGkB,KAAK,EAAE,CAAC;IAAC,IAAIe;IAElF,qBACE,KAACC;QACCC,KAAKT;QACLF,OAAO/B,WAAWuC,kBAAkBR;QACpCF,WAAW/B,WACTQ,OAAOqC,IAAI,EACX,OAAOlB,SAAS,YAAYjB,UAAU,CAACiB,KAAK,EAC5CA,SAAS,UAAUnB,OAAOsC,KAAK,EAC/B,OAAOnB,SAAS,YAAYnB,OAAOuC,UAAU,EAC7CR,aAAa/B,OAAO+B,SAAS,EAC7BR;kBAGF,cAAA,MAAC3B;YAAS2B,WAAWvB,OAAOwC,IAAI;YAAEb,YAAYC;YAAS,GAAGP,SAAS;;gBAChE5B,aAAa2B,2BAAa,KAACe;oBAAIZ,WAAWvB,OAAOyC,KAAK;8BAAGrB;;gBACzDY,+BACC,MAACG;oBACCZ,WAAW/B,WACTQ,OAAO0C,OAAO,EACdZ,cAAc,WAAWjB,mBAAmB,CAACiB,UAAU;;wBAGxDrC,aAAa+B,wBAAU,KAACN;4BAAeC,MAAMA;sCAAOK;;wBACpD/B,aAAaiC,2BAAa,KAAC5B;4BAASyB,WAAWvB,OAAO0B,QAAQ;sCAAGA;;wBACjEjC,aAAaoC,gCACZ,KAAC/B;4BAASyB,WAAWvB,OAAO0B,QAAQ;sCAAGG;;;;;;;AAOrD,EAAE"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type { CSSCustomProperties, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = '--vkui_internal--cell_width';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n  xl: styles.sizeXL,\n  auto: styles.sizeAuto,\n};\n\nconst textAlignClassNames = {\n  center: styles.textAlignCenter,\n  end: styles.textAlignEnd,\n};\n\ntype HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Ширина компонента\n   *\n   * Значения `'s' | 'm' | 'l' | 'xl'` определяются дизайн-системой.\n   * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.\n   * Пользовательскую ширину можно задать через числовое значение.\n   */\n  size?: LiteralUnion<HorizontalCellSizes, number>;\n  /**\n   * Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`\n   */\n  textAlign?: 'start' | 'center' | 'end';\n  /**\n   * Отключает формирование отступов у крайних элементов\n   *\n   * Актуально для использования в многострочных списках\n   */\n  noPadding?: boolean;\n  /**\n   * Позволяет передать типографический компонент, используемый для `title`.\n   * По умолчанию `Caption` для `size=s`, иначе `Subhead`.\n   */\n  TitleComponent?: React.ElementType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  title,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  textAlign = size === 's' ? 'center' : 'start',\n  noPadding = false,\n  TitleComponent = size === 's' ? Caption : Subhead,\n  ...restProps\n}: HorizontalCellProps): React.ReactNode => {\n  const hasTypography =\n    hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);\n\n  const customProperties: CSSCustomProperties | undefined =\n    typeof size === 'number' ? { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` } : undefined;\n\n  return (\n    <div\n      ref={getRootRef}\n      style={mergeStyle(customProperties, style)}\n      className={classNames(\n        styles.host,\n        typeof size === 'string' && stylesSize[size],\n        size !== 'auto' && styles.sized,\n        typeof size === 'number' && styles.customSize,\n        noPadding && styles.noPadding,\n        className,\n      )}\n    >\n      <Tappable className={styles.body} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && <div className={styles.image}>{children}</div>}\n        {hasTypography && (\n          <div\n            className={classNames(\n              styles.content,\n              textAlign !== 'start' && textAlignClassNames[textAlign],\n            )}\n          >\n            {hasReactNode(title) && <TitleComponent>{title}</TitleComponent>}\n            {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","mergeStyle","Avatar","Tappable","Caption","Footnote","Subhead","styles","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","sizeS","m","sizeM","l","sizeL","xl","sizeXL","auto","sizeAuto","textAlignClassNames","center","textAlignCenter","end","textAlignEnd","HorizontalCell","className","title","style","subtitle","size","children","getRootRef","getRef","extraSubtitle","textAlign","noPadding","TitleComponent","restProps","hasTypography","customProperties","undefined","div","ref","host","sized","customSize","body","image","content"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,GAAGH,OAAOI,KAAK;IACfC,GAAGL,OAAOM,KAAK;IACfC,GAAGP,OAAOQ,KAAK;IACfC,IAAIT,OAAOU,MAAM;IACjBC,MAAMX,OAAOY,QAAQ;AACvB;AAEA,MAAMC,sBAAsB;IAC1BC,QAAQd,OAAOe,eAAe;IAC9BC,KAAKhB,OAAOiB,YAAY;AAC1B;AA6CA;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,OAAO,GAAG,EACVC,yBAAW,KAAC7B;IAAO4B,MAAM;EAAM,EAC/BE,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,YAAYL,SAAS,MAAM,WAAW,OAAO,EAC7CM,YAAY,KAAK,EACjBC,iBAAiBP,SAAS,MAAM1B,UAAUE,OAAO,EACjD,GAAGgC,WACiB;IACpB,MAAMC,gBACJvC,aAAa2B,UAAU3B,aAAa6B,aAAa7B,aAAakC;IAEhE,MAAMM,mBACJ,OAAOV,SAAS,WAAW;QAAE,CAACtB,gCAAgC,EAAE,GAAGsB,KAAK,EAAE,CAAC;IAAC,IAAIW;IAElF,qBACE,KAACC;QACCC,KAAKX;QACLJ,OAAO3B,WAAWuC,kBAAkBZ;QACpCF,WAAW3B,WACTQ,OAAOqC,IAAI,EACX,OAAOd,SAAS,YAAYrB,UAAU,CAACqB,KAAK,EAC5CA,SAAS,UAAUvB,OAAOsC,KAAK,EAC/B,OAAOf,SAAS,YAAYvB,OAAOuC,UAAU,EAC7CV,aAAa7B,OAAO6B,SAAS,EAC7BV;kBAGF,cAAA,MAACvB;YAASuB,WAAWnB,OAAOwC,IAAI;YAAEf,YAAYC;YAAS,GAAGK,SAAS;;gBAChEtC,aAAa+B,2BAAa,KAACW;oBAAIhB,WAAWnB,OAAOyC,KAAK;8BAAGjB;;gBACzDQ,+BACC,MAACG;oBACChB,WAAW3B,WACTQ,OAAO0C,OAAO,EACdd,cAAc,WAAWf,mBAAmB,CAACe,UAAU;;wBAGxDnC,aAAa2B,wBAAU,KAACU;sCAAgBV;;wBACxC3B,aAAa6B,2BAAa,KAACxB;4BAASqB,WAAWnB,OAAOsB,QAAQ;sCAAGA;;wBACjE7B,aAAakC,gCACZ,KAAC7B;4BAASqB,WAAWnB,OAAOsB,QAAQ;sCAAGK;;;;;;;AAOrD,EAAE"}

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

@@ -69,6 +69,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalTabs--withGaps) .inWrapper::after,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalTabs--withGaps) .inWrapper::before {
   display: block;
   inline-size: var(--vkui--size_base_padding_horizontal--regular);

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

@@ -50,6 +50,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .sizeYCompact :global(.vkuiIcon--16),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .sizeYCompact :global(.vkuiIcon--16.vkuiIcon--w-8) {
   padding: 14px;
 }
@@ -85,6 +86,7 @@
 
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   .sizeYNone :global(.vkuiIcon--16),
+  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   .sizeYNone :global(.vkuiIcon--16.vkuiIcon--w-8) {
     padding: 14px;
   }
@@ -110,7 +112,9 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormItem--removable) :global(.vkuiInternalRemovable__content) > .host,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--removable) :global(.vkuiInternalRemovable__content) > .host,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormField__after) .host {
   display: flex;
   align-items: center;
@@ -121,7 +125,7 @@
   border-radius: var(--vkui--size_border_radius--regular);
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormField__after)
   .host
@@ -129,6 +133,8 @@
   padding: 0;
 }
 
+/* stylelint-enable selector-pseudo-class-disallowed-list */
+
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormField__after) .sizeYCompact {
@@ -136,7 +142,7 @@
   block-size: var(--vkui--size_field_height--compact);
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormItem--removable) :global(.vkuiInternalRemovable__content) > .sizeYCompact,
 :global(.vkuiInternalFormLayoutGroup--removable)
@@ -145,6 +151,8 @@
   block-size: var(--vkui--size_field_height--compact);
 }
 
+/* stylelint-enable selector-pseudo-class-disallowed-list */
+
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalFormField__after) .sizeYNone {
@@ -152,13 +160,14 @@
     block-size: var(--vkui--size_field_height--compact);
   }
 
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalFormItem--removable) :global(.vkuiInternalRemovable__content) > .sizeYNone,
   :global(.vkuiInternalFormLayoutGroup--removable)
     :global(.vkuiInternalRemovable__content)
     > .sizeYNone {
     block-size: var(--vkui--size_field_height--compact);
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 
 /**

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

@@ -80,6 +80,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .modeAdd .middle :global(.vkuiIcon),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .modeMore .middle :global(.vkuiIcon) {
   color: var(--vkui--color_icon_accent_themed);
 }

package/dist/cssm/components/ModalCard/ModalCardInternal.js

@@ -54,7 +54,7 @@ const transitionStateClassNames = {
     const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);
     const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(bottomSheetEnabled, {
         blocked: keyboardOpened,
-        initialSnapPoint: 'auto',
+        snapPoint: 'auto',
         sheetCSSProperty: '--vkui_internal_ModalCard--translateY',
         backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',
         onDismiss () {

package/dist/cssm/components/ModalCard/ModalCardInternal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCard/ModalCardInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { useBottomSheet } from '../../lib/sheet';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalCardBase } from '../ModalCardBase/ModalCardBase';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport type { ModalCardProps } from './types';\nimport styles from './ModalCard.module.css';\n\nconst sizeByPlatformClassNames = {\n  vkcom: styles['hostMaxWidthS'],\n  ios: styles['hostMaxWidthM'],\n  android: styles['hostMaxWidthL'],\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalCardInternal = ({\n  icon,\n  title,\n  titleComponent,\n  description,\n  descriptionComponent,\n  children,\n  actions,\n  size,\n  open,\n  style: styleProp,\n  className,\n  preventClose,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalDismissButtonTestId,\n  getRootRef,\n  dismissButtonMode,\n  dismissLabel,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  ...restProps\n}: ModalCardInternalProps): ReactNode => {\n  const platform = usePlatform();\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n    enableAppear: true,\n    onEnter() {\n      onOpen?.();\n    },\n    onEntered() {\n      onOpened?.();\n    },\n    onExited() {\n      onClosed?.();\n    },\n  });\n  const opened = transitionState === 'appeared' || transitionState === 'entered';\n  const hidden = transitionState === 'exited';\n  const closable = !preventClose && opened;\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n  const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(\n    bottomSheetEnabled,\n    {\n      blocked: keyboardOpened,\n      initialSnapPoint: 'auto',\n      sheetCSSProperty: '--vkui_internal_ModalCard--translateY',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onDismiss() {\n        onClose?.('swipe-down');\n      },\n    },\n  );\n  const handleRef = useExternRef<HTMLDivElement>(setSheetEl, ref, getRootRef);\n  const style = keyboardOpened\n    ? {\n        ...styleProp,\n        '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px',\n      }\n    : styleProp;\n  const modalOverlay = (\n    <ModalOverlay\n      getRootRef={setBackdropEl}\n      data-testid={modalOverlayTestId}\n      visible={open}\n      onClick={\n        closable\n          ? function handleBackdropClick(event) {\n              onClose('click-overlay', event);\n            }\n          : undefined\n      }\n    />\n  );\n  const handleEscKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (closable && pressedKey(event) === Keys.ESCAPE) {\n        onClose('escape-key');\n      }\n    },\n    [closable, onClose],\n  );\n\n  useScrollLock(!hidden);\n  useFocusTrap(ref, { autoFocus: !noFocusToDialog, disabled: !opened || hidden });\n\n  return (\n    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <ModalCardBase\n        {...restProps}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        getRootRef={handleRef}\n        style={style}\n        className={classNames(\n          styles.host,\n          sizeByPlatformClassNames[platform],\n          transitionStateClassNames[transitionState],\n          className,\n        )}\n        onTransitionEnd={onTransitionEnd}\n        {...bottomSheetEventHandlers}\n        icon={icon}\n        title={title}\n        titleComponent={titleComponent}\n        description={description}\n        descriptionComponent={descriptionComponent}\n        actions={actions}\n        onClose={() => onClose('click-close-button')}\n        size={size}\n        modalDismissButtonTestId={modalDismissButtonTestId}\n        dismissButtonMode={dismissButtonMode}\n        dismissLabel={dismissLabel}\n      >\n        {children}\n      </ModalCardBase>\n    </ModalOutlet>\n  );\n};\n"],"names":["useCallback","classNames","noop","useAdaptivityWithJSMediaQueries","useExternRef","useFocusTrap","usePlatform","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","useBottomSheet","useScrollLock","ModalCardBase","ModalOutlet","ModalOverlay","ModalOverlayDefault","styles","sizeByPlatformClassNames","vkcom","ios","android","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalCardInternal","icon","title","titleComponent","description","descriptionComponent","children","actions","size","open","style","styleProp","className","preventClose","modalOverlayTestId","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","noFocusToDialog","onOpen","onOpened","onClose","onClosed","restProps","platform","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","isDesktop","bottomSheetEnabled","keyboardOpened","setSheetEl","setBackdropEl","bottomSheetEventHandlers","blocked","initialSnapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","handleRef","modalOverlay","data-testid","visible","onClick","handleBackdropClick","event","undefined","handleEscKeyDown","ESCAPE","autoFocus","disabled","onKeyDown","tabIndex","role","aria-modal","host"],"mappings":"AAAA;;AAEA,SAAiEA,WAAW,QAAQ,QAAQ;AAC5F,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,IAAI,EAAEC,UAAU,QAAQ,6BAA0B;AAC3D,SAASC,gBAAgB,QAAoC,+BAAsB;AACnF,SAASC,cAAc,QAAQ,2BAAkB;AACjD,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SACEC,gBAAgBC,mBAAmB,QAE9B,kCAA+B;AAEtC,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,2BAA2B;IAC/BC,OAAOF,MAAM,CAAC,gBAAgB;IAC9BG,KAAKH,MAAM,CAAC,gBAAgB;IAC5BI,SAASJ,MAAM,CAAC,gBAAgB;AAClC;AAEA,MAAMK,4BAA4E;IAChFC,QAAQN,MAAM,CAAC,iBAAiB;IAChCO,WAAWP,MAAM,CAAC,oBAAoB;IAEtCQ,OAAOR,MAAM,CAAC,iBAAiB;IAC/BS,UAAUT,MAAM,CAAC,oBAAoB;IAErCU,SAASV,MAAM,CAAC,mBAAmB;IACnCW,QAAQX,MAAM,CAAC,kBAAkB;AACnC;AAMA;;;;CAIC,GACD,OAAO,MAAMY,oBAAoB,CAAC,EAChCC,IAAI,EACJC,KAAK,EACLC,cAAc,EACdC,WAAW,EACXC,oBAAoB,EACpBC,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJC,IAAI,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,YAAY,EACZ3B,eAAeC,mBAAmB,EAClC2B,kBAAkB,EAClBC,wBAAwB,EACxBC,UAAU,EACVC,iBAAiB,EACjBC,YAAY,EACZC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,UAAUjD,IAAI,EACdkD,QAAQ,EACR,GAAGC,WACoB;IACvB,MAAMC,WAAWhD;IACjB,MAAM,CAACiD,iBAAiB,EAAEC,GAAG,EAAEC,eAAe,EAAE,CAAC,GAAG/C,iBAAiC4B,MAAM;QACzFoB,cAAc;QACdC;YACEV;QACF;QACAW;YACEV;QACF;QACAW;YACET;QACF;IACF;IACA,MAAMU,SAASP,oBAAoB,cAAcA,oBAAoB;IACrE,MAAMQ,SAASR,oBAAoB;IACnC,MAAMS,WAAW,CAACtB,gBAAgBoB;IAElC,MAAM,EAAEG,SAAS,EAAE,GAAG9D;IACtB,MAAM+D,qBAAqB,CAACD,aAAa,CAACvB,gBAAgBa,oBAAoB;IAE9E,MAAM,EAAEO,QAAQK,cAAc,EAAE,GAAG5D,wBAAwB2D;IAC3D,MAAM,CAAC,EAAEE,UAAU,EAAEC,aAAa,EAAE,EAAEC,yBAAyB,GAAG3D,eAChEuD,oBACA;QACEK,SAASJ;QACTK,kBAAkB;QAClBC,kBAAkB;QAClBC,qBAAqB;QACrBC;YACExB,UAAU;QACZ;IACF;IAEF,MAAMyB,YAAYxE,aAA6BgE,YAAYZ,KAAKX;IAChE,MAAMN,QAAQ4B,iBACV;QACE,GAAG3B,SAAS;QACZ,kDAAkD;IACpD,IACAA;IACJ,MAAMqC,6BACJ,KAAC9D;QACC8B,YAAYwB;QACZS,eAAanC;QACboC,SAASzC;QACT0C,SACEhB,WACI,SAASiB,oBAAoBC,KAAK;YAChC/B,QAAQ,iBAAiB+B;QAC3B,IACAC;;IAIV,MAAMC,mBAAmBpF,YACvB,CAACkF;QACC,IAAIlB,YAAYvD,WAAWyE,WAAW1E,KAAK6E,MAAM,EAAE;YACjDlC,QAAQ;QACV;IACF,GACA;QAACa;QAAUb;KAAQ;IAGrBvC,cAAc,CAACmD;IACf1D,aAAamD,KAAK;QAAE8B,WAAW,CAACtC;QAAiBuC,UAAU,CAACzB,UAAUC;IAAO;IAE7E,qBACE,MAACjD;QAAYiD,QAAQA;QAAQyB,WAAWJ;;YACrCP;0BACD,KAAChE;gBACE,GAAGwC,SAAS;gBACboC,UAAU,CAAC;gBACXC,MAAK;gBACLC,cAAW;gBACX9C,YAAY+B;gBACZrC,OAAOA;gBACPE,WAAWxC,WACTgB,OAAO2E,IAAI,EACX1E,wBAAwB,CAACoC,SAAS,EAClChC,yBAAyB,CAACiC,gBAAgB,EAC1Cd;gBAEFgB,iBAAiBA;gBAChB,GAAGa,wBAAwB;gBAC5BxC,MAAMA;gBACNC,OAAOA;gBACPC,gBAAgBA;gBAChBC,aAAaA;gBACbC,sBAAsBA;gBACtBE,SAASA;gBACTe,SAAS,IAAMA,QAAQ;gBACvBd,MAAMA;gBACNO,0BAA0BA;gBAC1BE,mBAAmBA;gBACnBC,cAAcA;0BAEbZ;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/ModalCard/ModalCardInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { useBottomSheet } from '../../lib/sheet';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalCardBase } from '../ModalCardBase/ModalCardBase';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport type { ModalCardProps } from './types';\nimport styles from './ModalCard.module.css';\n\nconst sizeByPlatformClassNames = {\n  vkcom: styles['hostMaxWidthS'],\n  ios: styles['hostMaxWidthM'],\n  android: styles['hostMaxWidthL'],\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalCardInternal = ({\n  icon,\n  title,\n  titleComponent,\n  description,\n  descriptionComponent,\n  children,\n  actions,\n  size,\n  open,\n  style: styleProp,\n  className,\n  preventClose,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalDismissButtonTestId,\n  getRootRef,\n  dismissButtonMode,\n  dismissLabel,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  ...restProps\n}: ModalCardInternalProps): ReactNode => {\n  const platform = usePlatform();\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n    enableAppear: true,\n    onEnter() {\n      onOpen?.();\n    },\n    onEntered() {\n      onOpened?.();\n    },\n    onExited() {\n      onClosed?.();\n    },\n  });\n  const opened = transitionState === 'appeared' || transitionState === 'entered';\n  const hidden = transitionState === 'exited';\n  const closable = !preventClose && opened;\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n  const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(\n    bottomSheetEnabled,\n    {\n      blocked: keyboardOpened,\n      snapPoint: 'auto',\n      sheetCSSProperty: '--vkui_internal_ModalCard--translateY',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onDismiss() {\n        onClose?.('swipe-down');\n      },\n    },\n  );\n  const handleRef = useExternRef<HTMLDivElement>(setSheetEl, ref, getRootRef);\n  const style = keyboardOpened\n    ? {\n        ...styleProp,\n        '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px',\n      }\n    : styleProp;\n  const modalOverlay = (\n    <ModalOverlay\n      getRootRef={setBackdropEl}\n      data-testid={modalOverlayTestId}\n      visible={open}\n      onClick={\n        closable\n          ? function handleBackdropClick(event) {\n              onClose('click-overlay', event);\n            }\n          : undefined\n      }\n    />\n  );\n  const handleEscKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (closable && pressedKey(event) === Keys.ESCAPE) {\n        onClose('escape-key');\n      }\n    },\n    [closable, onClose],\n  );\n\n  useScrollLock(!hidden);\n  useFocusTrap(ref, { autoFocus: !noFocusToDialog, disabled: !opened || hidden });\n\n  return (\n    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <ModalCardBase\n        {...restProps}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        getRootRef={handleRef}\n        style={style}\n        className={classNames(\n          styles.host,\n          sizeByPlatformClassNames[platform],\n          transitionStateClassNames[transitionState],\n          className,\n        )}\n        onTransitionEnd={onTransitionEnd}\n        {...bottomSheetEventHandlers}\n        icon={icon}\n        title={title}\n        titleComponent={titleComponent}\n        description={description}\n        descriptionComponent={descriptionComponent}\n        actions={actions}\n        onClose={() => onClose('click-close-button')}\n        size={size}\n        modalDismissButtonTestId={modalDismissButtonTestId}\n        dismissButtonMode={dismissButtonMode}\n        dismissLabel={dismissLabel}\n      >\n        {children}\n      </ModalCardBase>\n    </ModalOutlet>\n  );\n};\n"],"names":["useCallback","classNames","noop","useAdaptivityWithJSMediaQueries","useExternRef","useFocusTrap","usePlatform","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","useBottomSheet","useScrollLock","ModalCardBase","ModalOutlet","ModalOverlay","ModalOverlayDefault","styles","sizeByPlatformClassNames","vkcom","ios","android","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalCardInternal","icon","title","titleComponent","description","descriptionComponent","children","actions","size","open","style","styleProp","className","preventClose","modalOverlayTestId","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","noFocusToDialog","onOpen","onOpened","onClose","onClosed","restProps","platform","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","isDesktop","bottomSheetEnabled","keyboardOpened","setSheetEl","setBackdropEl","bottomSheetEventHandlers","blocked","snapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","handleRef","modalOverlay","data-testid","visible","onClick","handleBackdropClick","event","undefined","handleEscKeyDown","ESCAPE","autoFocus","disabled","onKeyDown","tabIndex","role","aria-modal","host"],"mappings":"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"}

package/dist/cssm/components/ModalPage/ModalPage.js

@@ -1,21 +1,24 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useId } from "react";
+import { useId, useMemo } from "react";
 import { ModalContext } from "../../context/ModalContext.js";
+import { inRange } from "../../helpers/range.js";
 import { getNavId } from "../../lib/getNavId.js";
+import { SNAP_POINT_DETENTS, SNAP_POINT_SAFE_RANGE } from "../../lib/sheet/index.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { useModalManager } from "../ModalRoot/useModalManager.js";
 import { ModalPageInternal } from "./ModalPageInternal.js";
 const warn = warnOnce('ModalPage');
+const snapPointCache = new Map();
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
- */ export const ModalPage = ({ id: idProp, nav, open = false, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed, size = 's', settlingHeight = 50, keepMounted = false, ...restProps })=>{
+ */ export const ModalPage = ({ id: idProp, nav, open = false, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed, size = 's', settlingHeight = 50, dynamicContentHeight, keepMounted = false, ...restProps })=>{
     const generatingId = useId();
     const id = getNavId({
         nav,
         id: idProp
     }, warn) || generatingId;
-    const { mounted, ...resolvedProps } = useModalManager({
+    const { mounted, shouldPreserveSnapPoint, ...resolvedProps } = useModalManager({
         id,
         open,
         keepMounted,
@@ -26,6 +29,28 @@ const warn = warnOnce('ModalPage');
         onClose,
         onClosed
     });
+    const snapPoint = useMemo(()=>{
+        if (dynamicContentHeight) {
+            return 'auto';
+        }
+        if (shouldPreserveSnapPoint) {
+            const snapPointCached = snapPointCache.get(id);
+            if (snapPointCached) {
+                return snapPointCached;
+            }
+            const nextSnapPoint = transformSettlingHeightToSnapPoint(settlingHeight);
+            snapPointCache.set(id, nextSnapPoint);
+            return nextSnapPoint;
+        } else {
+            snapPointCache.delete(id);
+        }
+        return transformSettlingHeightToSnapPoint(settlingHeight);
+    }, [
+        id,
+        shouldPreserveSnapPoint,
+        dynamicContentHeight,
+        settlingHeight
+    ]);
     if (!mounted) {
         return null;
     }
@@ -35,11 +60,32 @@ const warn = warnOnce('ModalPage');
             id: id,
             size: size,
             "aria-labelledby": `${id}-label`,
-            settlingHeight: settlingHeight,
+            snapPoint: snapPoint,
+            onSnapPointChange: snapPoint !== 'auto' && shouldPreserveSnapPoint ? (snapPoint)=>{
+                const snapPointCached = snapPointCache.get(id);
+                if (snapPointCached) {
+                    snapPointCached.initial = snapPoint;
+                    snapPointCache.set(id, snapPointCached);
+                }
+            } : undefined,
             ...resolvedProps,
             ...restProps
         })
     });
 };
+function transformSettlingHeightToSnapPoint(settlingHeight) {
+    const currentSnapPoint = Math.min(Math.max(settlingHeight, SNAP_POINT_SAFE_RANGE.LOWER), SNAP_POINT_DETENTS.LARGE);
+    return {
+        initial: currentSnapPoint,
+        detents: inRange(currentSnapPoint, SNAP_POINT_SAFE_RANGE.LOWER, SNAP_POINT_SAFE_RANGE.HIGHEST) ? [
+            SNAP_POINT_DETENTS.MIN,
+            currentSnapPoint,
+            SNAP_POINT_DETENTS.LARGE
+        ] : [
+            SNAP_POINT_DETENTS.MIN,
+            currentSnapPoint
+        ]
+    };
+}
 
 //# sourceMappingURL=ModalPage.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport { ModalContext } from '../../context/ModalContext';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useModalManager } from '../ModalRoot/useModalManager';\nimport { ModalPageInternal } from './ModalPageInternal';\nimport type { ModalPageProps } from './types';\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  id: idProp,\n  nav,\n  open = false,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  size = 's',\n  settlingHeight = 50,\n  keepMounted = false,\n  ...restProps\n}: ModalPageProps) => {\n  const generatingId = useId();\n  const id = getNavId({ nav, id: idProp }, warn) || generatingId;\n\n  const { mounted, ...resolvedProps } = useModalManager({\n    id,\n    open,\n    keepMounted,\n    modalOverlayTestId,\n    noFocusToDialog,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n  });\n\n  if (!mounted) {\n    return null;\n  }\n\n  return (\n    <ModalContext.Provider value={id}>\n      <ModalPageInternal\n        id={id}\n        size={size}\n        aria-labelledby={`${id}-label`}\n        settlingHeight={settlingHeight}\n        {...resolvedProps}\n        {...restProps}\n      />\n    </ModalContext.Provider>\n  );\n};\n"],"names":["useId","ModalContext","getNavId","warnOnce","useModalManager","ModalPageInternal","warn","ModalPage","id","idProp","nav","open","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","size","settlingHeight","keepMounted","restProps","generatingId","mounted","resolvedProps","Provider","value","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,KAAK,QAAQ,QAAQ;AAC9B,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,eAAe,QAAQ,kCAA+B;AAC/D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,MAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,IAAIC,MAAM,EACVC,GAAG,EACHC,OAAO,KAAK,EACZC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,OAAO,GAAG,EACVC,iBAAiB,EAAE,EACnBC,cAAc,KAAK,EACnB,GAAGC,WACY;IACf,MAAMC,eAAetB;IACrB,MAAMQ,KAAKN,SAAS;QAAEQ;QAAKF,IAAIC;IAAO,GAAGH,SAASgB;IAElD,MAAM,EAAEC,OAAO,EAAE,GAAGC,eAAe,GAAGpB,gBAAgB;QACpDI;QACAG;QACAS;QACAR;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAI,CAACM,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,KAACtB,aAAawB,QAAQ;QAACC,OAAOlB;kBAC5B,cAAA,KAACH;YACCG,IAAIA;YACJU,MAAMA;YACNS,mBAAiB,GAAGnB,GAAG,MAAM,CAAC;YAC9BW,gBAAgBA;YACf,GAAGK,aAAa;YAChB,GAAGH,SAAS;;;AAIrB,EAAE"}
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo } from 'react';\nimport { ModalContext } from '../../context/ModalContext';\nimport { inRange } from '../../helpers/range';\nimport { getNavId } from '../../lib/getNavId';\nimport { SNAP_POINT_DETENTS, SNAP_POINT_SAFE_RANGE, type SnapPoint } from '../../lib/sheet';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useModalManager } from '../ModalRoot/useModalManager';\nimport { ModalPageInternal } from './ModalPageInternal';\nimport type { ModalPageProps } from './types';\n\nconst warn = warnOnce('ModalPage');\n\nconst snapPointCache = new Map<string, Exclude<SnapPoint, 'auto'>>();\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  id: idProp,\n  nav,\n  open = false,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  size = 's',\n  settlingHeight = 50,\n  dynamicContentHeight,\n  keepMounted = false,\n  ...restProps\n}: ModalPageProps) => {\n  const generatingId = useId();\n  const id = getNavId({ nav, id: idProp }, warn) || generatingId;\n\n  const { mounted, shouldPreserveSnapPoint, ...resolvedProps } = useModalManager({\n    id,\n    open,\n    keepMounted,\n    modalOverlayTestId,\n    noFocusToDialog,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n  });\n\n  const snapPoint = useMemo((): SnapPoint => {\n    if (dynamicContentHeight) {\n      return 'auto';\n    }\n\n    if (shouldPreserveSnapPoint) {\n      const snapPointCached = snapPointCache.get(id);\n\n      if (snapPointCached) {\n        return snapPointCached;\n      }\n\n      const nextSnapPoint = transformSettlingHeightToSnapPoint(settlingHeight);\n      snapPointCache.set(id, nextSnapPoint);\n\n      return nextSnapPoint;\n    } else {\n      snapPointCache.delete(id);\n    }\n\n    return transformSettlingHeightToSnapPoint(settlingHeight);\n  }, [id, shouldPreserveSnapPoint, dynamicContentHeight, settlingHeight]);\n\n  if (!mounted) {\n    return null;\n  }\n\n  return (\n    <ModalContext.Provider value={id}>\n      <ModalPageInternal\n        id={id}\n        size={size}\n        aria-labelledby={`${id}-label`}\n        snapPoint={snapPoint}\n        onSnapPointChange={\n          snapPoint !== 'auto' && shouldPreserveSnapPoint\n            ? (snapPoint) => {\n                const snapPointCached = snapPointCache.get(id);\n\n                if (snapPointCached) {\n                  snapPointCached.initial = snapPoint;\n                  snapPointCache.set(id, snapPointCached);\n                }\n              }\n            : undefined\n        }\n        {...resolvedProps}\n        {...restProps}\n      />\n    </ModalContext.Provider>\n  );\n};\n\nfunction transformSettlingHeightToSnapPoint(settlingHeight: number): Exclude<SnapPoint, 'auto'> {\n  const currentSnapPoint = Math.min(\n    Math.max(settlingHeight, SNAP_POINT_SAFE_RANGE.LOWER),\n    SNAP_POINT_DETENTS.LARGE,\n  );\n\n  return {\n    initial: currentSnapPoint,\n    detents: inRange(currentSnapPoint, SNAP_POINT_SAFE_RANGE.LOWER, SNAP_POINT_SAFE_RANGE.HIGHEST)\n      ? [SNAP_POINT_DETENTS.MIN, currentSnapPoint, SNAP_POINT_DETENTS.LARGE]\n      : [SNAP_POINT_DETENTS.MIN, currentSnapPoint],\n  };\n}\n"],"names":["useId","useMemo","ModalContext","inRange","getNavId","SNAP_POINT_DETENTS","SNAP_POINT_SAFE_RANGE","warnOnce","useModalManager","ModalPageInternal","warn","snapPointCache","Map","ModalPage","id","idProp","nav","open","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","size","settlingHeight","dynamicContentHeight","keepMounted","restProps","generatingId","mounted","shouldPreserveSnapPoint","resolvedProps","snapPoint","snapPointCached","get","nextSnapPoint","transformSettlingHeightToSnapPoint","set","delete","Provider","value","aria-labelledby","onSnapPointChange","initial","undefined","currentSnapPoint","Math","min","max","LOWER","LARGE","detents","HIGHEST","MIN"],"mappings":"AAAA;;AAEA,SAASA,KAAK,EAAEC,OAAO,QAAQ,QAAQ;AACvC,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,OAAO,QAAQ,yBAAsB;AAC9C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,kBAAkB,EAAEC,qBAAqB,QAAwB,2BAAkB;AAC5F,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,eAAe,QAAQ,kCAA+B;AAC/D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,MAAMC,OAAOH,SAAS;AAEtB,MAAMI,iBAAiB,IAAIC;AAE3B;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,IAAIC,MAAM,EACVC,GAAG,EACHC,OAAO,KAAK,EACZC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,OAAO,GAAG,EACVC,iBAAiB,EAAE,EACnBC,oBAAoB,EACpBC,cAAc,KAAK,EACnB,GAAGC,WACY;IACf,MAAMC,eAAe7B;IACrB,MAAMc,KAAKV,SAAS;QAAEY;QAAKF,IAAIC;IAAO,GAAGL,SAASmB;IAElD,MAAM,EAAEC,OAAO,EAAEC,uBAAuB,EAAE,GAAGC,eAAe,GAAGxB,gBAAgB;QAC7EM;QACAG;QACAU;QACAT;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAMU,YAAYhC,QAAQ;QACxB,IAAIyB,sBAAsB;YACxB,OAAO;QACT;QAEA,IAAIK,yBAAyB;YAC3B,MAAMG,kBAAkBvB,eAAewB,GAAG,CAACrB;YAE3C,IAAIoB,iBAAiB;gBACnB,OAAOA;YACT;YAEA,MAAME,gBAAgBC,mCAAmCZ;YACzDd,eAAe2B,GAAG,CAACxB,IAAIsB;YAEvB,OAAOA;QACT,OAAO;YACLzB,eAAe4B,MAAM,CAACzB;QACxB;QAEA,OAAOuB,mCAAmCZ;IAC5C,GAAG;QAACX;QAAIiB;QAAyBL;QAAsBD;KAAe;IAEtE,IAAI,CAACK,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,KAAC5B,aAAasC,QAAQ;QAACC,OAAO3B;kBAC5B,cAAA,KAACL;YACCK,IAAIA;YACJU,MAAMA;YACNkB,mBAAiB,GAAG5B,GAAG,MAAM,CAAC;YAC9BmB,WAAWA;YACXU,mBACEV,cAAc,UAAUF,0BACpB,CAACE;gBACC,MAAMC,kBAAkBvB,eAAewB,GAAG,CAACrB;gBAE3C,IAAIoB,iBAAiB;oBACnBA,gBAAgBU,OAAO,GAAGX;oBAC1BtB,eAAe2B,GAAG,CAACxB,IAAIoB;gBACzB;YACF,IACAW;YAEL,GAAGb,aAAa;YAChB,GAAGJ,SAAS;;;AAIrB,EAAE;AAEF,SAASS,mCAAmCZ,cAAsB;IAChE,MAAMqB,mBAAmBC,KAAKC,GAAG,CAC/BD,KAAKE,GAAG,CAACxB,gBAAgBnB,sBAAsB4C,KAAK,GACpD7C,mBAAmB8C,KAAK;IAG1B,OAAO;QACLP,SAASE;QACTM,SAASjD,QAAQ2C,kBAAkBxC,sBAAsB4C,KAAK,EAAE5C,sBAAsB+C,OAAO,IACzF;YAAChD,mBAAmBiD,GAAG;YAAER;YAAkBzC,mBAAmB8C,KAAK;SAAC,GACpE;YAAC9C,mBAAmBiD,GAAG;YAAER;SAAiB;IAChD;AACF"}

package/dist/cssm/components/ModalPage/ModalPageInternal.js

@@ -28,7 +28,7 @@ const transitionStateClassNames = {
  * В компоненте заложена вся логика модального окна.
  *
  * @private
- */ export const ModalPageInternal = ({ open, header, footer, size: desktopMaxWidth, height, children, className, style, dynamicContentHeight, settlingHeight, getModalContentRef, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalContentTestId, modalDismissButtonTestId, noFocusToDialog, hideCloseButton, preventClose, disableContentPanningGesture, onOpen, onOpened, onClose = noop, onClosed, ...restProps })=>{
+ */ export const ModalPageInternal = ({ open, header, footer, size: desktopMaxWidth, height, children, className, style, snapPoint, onSnapPointChange, getModalContentRef, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalContentTestId, modalDismissButtonTestId, noFocusToDialog, hideCloseButton, preventClose, disableContentPanningGesture, onOpen, onOpened, onClose = noop, onClosed, ...restProps })=>{
     const { hasCustomPanelHeaderAfter } = useConfigProvider();
     const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(open, {
         enableAppear: true,
@@ -50,9 +50,10 @@ const transitionStateClassNames = {
     const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);
     const [{ initialStyle, setSheetEl, setSheetScrollEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(bottomSheetEnabled, {
         blocked: keyboardOpened,
-        initialSnapPoint: dynamicContentHeight ? 'auto' : settlingHeight,
+        snapPoint,
         sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',
         backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',
+        onSnapPointChange,
         onDismiss () {
             onClose('swipe-down');
         }