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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, type BasicProps } from './subcomponents/Basic/Basic';\nimport type { ShiftData, SnackbarPlacement } from './types';\nimport {\n  getInitialShiftData,\n  getMovedShiftData,\n  resolveOffsetYCssStyle,\n  shouldBeClosedByShiftData,\n} from './utils';\nimport styles from './Snackbar.module.css';\n\nconst placementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n};\n\nconst animationStateClassNames = {\n  enter: styles.stateEnter,\n  entering: styles.stateEntering,\n  entered: styles.stateEntered,\n  exit: styles.stateExit,\n  exiting: styles.stateExiting,\n  exited: undefined,\n};\n\nexport interface SnackbarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n    BasicProps {\n  /**\n   * Задаёт расположение компонента.\n   *\n   * > Note: в мобильном режиме:\n   * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n   * >   уведомлениями;\n   * > - `\"bottom\"` перебивается на `\"bottom-start\"`, чтобы избежать вызова системных\n   * >   функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.\n   * > - `\"bottom-start\"`/`\"bottom-end\"` закрываются смахиванием в любое из направлений\n   * >   по горизонтальной оси.\n   */\n  placement?: SnackbarPlacement;\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (event: React.MouseEvent) => void;\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({\n  placement = 'bottom-start',\n  children,\n  layout,\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\n  style,\n  getRootRef,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n\n  const [open, setOpen] = React.useState(true);\n  const [touched, setTouched] = React.useState(false);\n\n  const rootRef = useExternRef(getRootRef);\n  const focused = useFocusWithin(rootRef);\n  const inRef = React.useRef<HTMLDivElement>(null);\n  const panGestureRecognizer = React.useRef<UIPanGestureRecognizer | null>(null);\n\n  const shiftDataRef = React.useRef<ShiftData | null>(null);\n\n  const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout>>();\n  const mediaQueries = useMediaQueries();\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    open ? 'enter' : 'exit',\n    {\n      onExited: onClose,\n    },\n  );\n\n  const clearRAF = React.useCallback(() => {\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  }, []);\n\n  const updateShiftAxisCSSProperties = React.useCallback(\n    (x: number | null, y: number | null, direction: number | null) => {\n      rafRef.current = requestAnimationFrame(() => {\n        if (rootRef.current) {\n          x === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x')\n            : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);\n          y === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y')\n            : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);\n          direction === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_direction')\n            : /* istanbul ignore next: TODO чтобы протестировать кейс, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n              rootRef.current.style.setProperty(\n                '--vkui_internal--snackbar_direction',\n                `${direction}`,\n              );\n        }\n      });\n    },\n    [rootRef],\n  );\n\n  const close = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const handleActionClick = (event: React.MouseEvent) => {\n    close();\n    if (action) {\n      onActionClick?.(event);\n    }\n  };\n\n  const handleTouchStart = (event: React.UIEvent<HTMLDivElement>) => {\n    panGestureRecognizer.current = new UIPanGestureRecognizer();\n    panGestureRecognizer.current.setStartCoords(event.nativeEvent);\n    shiftDataRef.current = getInitialShiftData(\n      rootRef.current!.offsetWidth,\n      rootRef.current!.offsetHeight,\n      mediaQueries,\n    );\n    setTouched(true);\n  };\n\n  const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n    if (shiftDataRef.current && panGestureRecognizer.current) {\n      panGestureRecognizer.current.setInitialTimeOnce();\n      panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n      shiftDataRef.current = getMovedShiftData(\n        placement,\n        shiftDataRef.current,\n        panGestureRecognizer.current.delta(),\n      );\n\n      if (shiftDataRef.current.shifted) {\n        updateShiftAxisCSSProperties(\n          shiftDataRef.current.x,\n          shiftDataRef.current.y,\n          shiftDataRef.current.direction,\n        );\n      }\n    }\n  };\n\n  const handleTouchEnd = () => {\n    if (\n      touched &&\n      shiftDataRef.current &&\n      panGestureRecognizer.current &&\n      shouldBeClosedByShiftData(\n        placement,\n        shiftDataRef.current,\n        getRelativeBoundingClientRect(rootRef.current!, inRef.current!),\n        panGestureRecognizer.current.velocity(),\n      )\n    ) {\n      close();\n    }\n\n    setTouched(false);\n  };\n\n  useIsomorphicLayoutEffect(\n    function closeAfterDelay() {\n      if (!open || focused || touched || animationState !== 'entered') {\n        return;\n      }\n      closeTimeoutIdRef.current = setTimeout(close, duration);\n      return function preventCloseAfterDelayOnUnmount() {\n        clearTimeout(closeTimeoutIdRef.current);\n      };\n    },\n    [open, focused, touched, animationState, close, duration],\n  );\n\n  useIsomorphicLayoutEffect(\n    function clearUserInteractionDataAfterTouchEnd() {\n      if (!touched) {\n        clearRAF();\n        shiftDataRef.current = null;\n        panGestureRecognizer.current = null;\n\n        if (open) {\n          updateShiftAxisCSSProperties(null, null, null);\n        }\n      }\n    },\n    [touched, open, updateShiftAxisCSSProperties, clearRAF],\n  );\n\n  React.useEffect(() => clearRAF, [clearRAF]);\n\n  useGlobalEscKeyDown(open, close);\n\n  if (animationState === 'exited') {\n    return null;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      role=\"presentation\"\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        touched && styles.touched,\n        placementClassNames[placement],\n        animationStateClassNames[animationState],\n      )}\n      style={resolveOffsetYCssStyle(placement, style, offsetY)}\n      getRootRef={rootRef}\n    >\n      <div\n        role=\"alert\"\n        className={styles.in}\n        ref={inRef}\n        // mobile\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n        // desktop\n        onMouseDown={handleTouchStart}\n        onMouseMove={handleTouchMove}\n        onMouseUp={handleTouchEnd}\n        onMouseLeave={handleTouchEnd}\n        {...animationHandlers}\n      >\n        <Basic\n          mode={mode}\n          layout={layout}\n          before={before}\n          after={after}\n          subtitle={subtitle}\n          action={\n            action && (\n              <Button\n                align=\"left\"\n                mode=\"link\"\n                appearance={\n                  mode === 'dark'\n                    ? /* istanbul ignore next: проверяется в e2e */\n                      'overlay'\n                    : 'accent'\n                }\n                size=\"s\"\n                onClick={handleActionClick}\n              >\n                {action}\n              </Button>\n            )\n          }\n        >\n          {children}\n        </Basic>\n      </div>\n    </RootComponent>\n  );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["React","classNames","useExternRef","useFocusWithin","useGlobalEscKeyDown","useMediaQueries","usePlatform","useCSSKeyframesAnimationController","getRelativeBoundingClientRect","UIPanGestureRecognizer","useIsomorphicLayoutEffect","Button","RootComponent","Basic","getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","styles","placementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","animationStateClassNames","enter","stateEnter","entering","stateEntering","entered","stateEntered","exit","stateExit","exiting","stateExiting","exited","undefined","Snackbar","placement","children","layout","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","style","getRootRef","restProps","platform","open","setOpen","useState","touched","setTouched","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","direction","requestAnimationFrame","removeProperty","setProperty","close","handleActionClick","event","handleTouchStart","setStartCoords","nativeEvent","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","delta","shifted","handleTouchEnd","velocity","closeAfterDelay","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","role","baseClassName","host","ios","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, type BasicProps } from './subcomponents/Basic/Basic';\nimport type { ShiftData, SnackbarPlacement } from './types';\nimport {\n  getInitialShiftData,\n  getMovedShiftData,\n  resolveOffsetYCssStyle,\n  shouldBeClosedByShiftData,\n} from './utils';\nimport styles from './Snackbar.module.css';\n\nconst placementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n};\n\nconst animationStateClassNames = {\n  enter: styles.stateEnter,\n  entering: styles.stateEntering,\n  entered: styles.stateEntered,\n  exit: styles.stateExit,\n  exiting: styles.stateExiting,\n  exited: undefined,\n};\n\nexport interface SnackbarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n    BasicProps {\n  /**\n   * Задаёт расположение компонента.\n   *\n   * > Note: в мобильном режиме:\n   * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n   * >   уведомлениями;\n   * > - `\"bottom\"` перебивается на `\"bottom-start\"`, чтобы избежать вызова системных\n   * >   функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.\n   * > - `\"bottom-start\"`/`\"bottom-end\"` закрываются смахиванием в любое из направлений\n   * >   по горизонтальной оси.\n   */\n  placement?: SnackbarPlacement;\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (event: React.MouseEvent) => void;\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({\n  placement = 'bottom-start',\n  children,\n  layout,\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\n  getRootRef,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n\n  const [open, setOpen] = React.useState(true);\n  const [touched, setTouched] = React.useState(false);\n\n  const rootRef = useExternRef(getRootRef);\n  const focused = useFocusWithin(rootRef);\n  const inRef = React.useRef<HTMLDivElement>(null);\n  const panGestureRecognizer = React.useRef<UIPanGestureRecognizer | null>(null);\n\n  const shiftDataRef = React.useRef<ShiftData | null>(null);\n\n  const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout>>();\n  const mediaQueries = useMediaQueries();\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    open ? 'enter' : 'exit',\n    {\n      onExited: onClose,\n    },\n  );\n\n  const clearRAF = React.useCallback(() => {\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  }, []);\n\n  const updateShiftAxisCSSProperties = React.useCallback(\n    (x: number | null, y: number | null, direction: number | null) => {\n      rafRef.current = requestAnimationFrame(() => {\n        if (rootRef.current) {\n          x === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x')\n            : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);\n          y === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y')\n            : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);\n          direction === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_direction')\n            : /* istanbul ignore next: TODO чтобы протестировать кейс, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n              rootRef.current.style.setProperty(\n                '--vkui_internal--snackbar_direction',\n                `${direction}`,\n              );\n        }\n      });\n    },\n    [rootRef],\n  );\n\n  const close = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const handleActionClick = (event: React.MouseEvent) => {\n    close();\n    if (action) {\n      onActionClick?.(event);\n    }\n  };\n\n  const handleTouchStart = (event: React.UIEvent<HTMLDivElement>) => {\n    panGestureRecognizer.current = new UIPanGestureRecognizer();\n    panGestureRecognizer.current.setStartCoords(event.nativeEvent);\n    shiftDataRef.current = getInitialShiftData(\n      rootRef.current!.offsetWidth,\n      rootRef.current!.offsetHeight,\n      mediaQueries,\n    );\n    setTouched(true);\n  };\n\n  const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n    if (shiftDataRef.current && panGestureRecognizer.current) {\n      panGestureRecognizer.current.setInitialTimeOnce();\n      panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n      shiftDataRef.current = getMovedShiftData(\n        placement,\n        shiftDataRef.current,\n        panGestureRecognizer.current.delta(),\n      );\n\n      if (shiftDataRef.current.shifted) {\n        updateShiftAxisCSSProperties(\n          shiftDataRef.current.x,\n          shiftDataRef.current.y,\n          shiftDataRef.current.direction,\n        );\n      }\n    }\n  };\n\n  const handleTouchEnd = () => {\n    if (\n      touched &&\n      shiftDataRef.current &&\n      panGestureRecognizer.current &&\n      shouldBeClosedByShiftData(\n        placement,\n        shiftDataRef.current,\n        getRelativeBoundingClientRect(rootRef.current!, inRef.current!),\n        panGestureRecognizer.current.velocity(),\n      )\n    ) {\n      close();\n    }\n\n    setTouched(false);\n  };\n\n  useIsomorphicLayoutEffect(\n    function closeAfterDelay() {\n      if (!open || focused || touched || animationState !== 'entered') {\n        return;\n      }\n      closeTimeoutIdRef.current = setTimeout(close, duration);\n      return function preventCloseAfterDelayOnUnmount() {\n        clearTimeout(closeTimeoutIdRef.current);\n      };\n    },\n    [open, focused, touched, animationState, close, duration],\n  );\n\n  useIsomorphicLayoutEffect(\n    function clearUserInteractionDataAfterTouchEnd() {\n      if (!touched) {\n        clearRAF();\n        shiftDataRef.current = null;\n        panGestureRecognizer.current = null;\n\n        if (open) {\n          updateShiftAxisCSSProperties(null, null, null);\n        }\n      }\n    },\n    [touched, open, updateShiftAxisCSSProperties, clearRAF],\n  );\n\n  React.useEffect(() => clearRAF, [clearRAF]);\n\n  useGlobalEscKeyDown(open, close);\n\n  if (animationState === 'exited') {\n    return null;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      role=\"presentation\"\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        touched && styles.touched,\n        placementClassNames[placement],\n        animationStateClassNames[animationState],\n      )}\n      baseStyle={resolveOffsetYCssStyle(placement, offsetY)}\n      getRootRef={rootRef}\n    >\n      <div\n        role=\"alert\"\n        className={styles.in}\n        ref={inRef}\n        // mobile\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n        // desktop\n        onMouseDown={handleTouchStart}\n        onMouseMove={handleTouchMove}\n        onMouseUp={handleTouchEnd}\n        onMouseLeave={handleTouchEnd}\n        {...animationHandlers}\n      >\n        <Basic\n          mode={mode}\n          layout={layout}\n          before={before}\n          after={after}\n          subtitle={subtitle}\n          action={\n            action && (\n              <Button\n                align=\"left\"\n                mode=\"link\"\n                appearance={\n                  mode === 'dark'\n                    ? /* istanbul ignore next: проверяется в e2e */\n                      'overlay'\n                    : 'accent'\n                }\n                size=\"s\"\n                onClick={handleActionClick}\n              >\n                {action}\n              </Button>\n            )\n          }\n        >\n          {children}\n        </Basic>\n      </div>\n    </RootComponent>\n  );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["React","classNames","useExternRef","useFocusWithin","useGlobalEscKeyDown","useMediaQueries","usePlatform","useCSSKeyframesAnimationController","getRelativeBoundingClientRect","UIPanGestureRecognizer","useIsomorphicLayoutEffect","Button","RootComponent","Basic","getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","styles","placementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","animationStateClassNames","enter","stateEnter","entering","stateEntering","entered","stateEntered","exit","stateExit","exiting","stateExiting","exited","undefined","Snackbar","placement","children","layout","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","getRootRef","restProps","platform","open","setOpen","useState","touched","setTouched","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","direction","requestAnimationFrame","style","removeProperty","setProperty","close","handleActionClick","event","handleTouchStart","setStartCoords","nativeEvent","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","delta","shifted","handleTouchEnd","velocity","closeAfterDelay","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","role","baseClassName","host","ios","baseStyle","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size","onClick"],"mappings":"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"}

package/dist/cssm/components/Snackbar/utils.js

@@ -1,21 +1,19 @@
 import { rubberbandIfOutOfBounds } from "../../lib/animation/index.js";
-export function resolveOffsetYCssStyle(placement, style, offsetY) {
+export function resolveOffsetYCssStyle(placement, offsetY) {
     if (offsetY === undefined) {
-        return style;
+        return undefined;
     }
     switch(placement){
         case 'top-start':
         case 'top':
         case 'top-end':
             return {
-                ...style,
                 top: offsetY
             };
         case 'bottom-start':
         case 'bottom':
         case 'bottom-end':
             return {
-                ...style,
                 bottom: offsetY
             };
     }

package/dist/cssm/components/Snackbar/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { MediaQueries } from '../../lib/adaptivity';\nimport { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n  placement: SnackbarPlacement,\n  style?: React.CSSProperties,\n  offsetY?: React.CSSProperties['inset'],\n): React.CSSProperties | undefined {\n  if (offsetY === undefined) {\n    return style;\n  }\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      return { ...style, top: offsetY };\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      return { ...style, bottom: offsetY };\n  }\n}\n\nexport function getInitialShiftData(\n  width: number,\n  height: number,\n  mediaQueries: MediaQueries,\n): ShiftData {\n  return {\n    shifted: false,\n    direction: null,\n    isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties,\n    x: 0,\n    y: 0,\n    width,\n    height,\n  };\n}\n\nexport function getMovedShiftData(\n  placement: SnackbarPlacement,\n  shiftData: ShiftData,\n  nextShift: { x: number; y: number },\n): ShiftData {\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n    } else if (placement.endsWith('end')) {\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n    }\n\n    if (placement.startsWith('bottom')) {\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n    }\n  } else if (placement.startsWith('bottom')) {\n    shiftData.x = nextShift.x;\n\n    const movingToLeft = nextShift.x < 0 ? -1 : null;\n    const movingToRight = nextShift.x > 0 ? 1 : null;\n    shiftData.direction = movingToLeft || movingToRight;\n  }\n\n  if (placement.startsWith('top')) {\n    shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\n  }\n\n  shiftData.shifted = true;\n\n  return shiftData;\n}\n\nconst MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;\n\nexport function shouldBeClosedByShiftData(\n  placement: SnackbarPlacement,\n  shiftData: ShiftData,\n  relativeClientRect: DOMRect,\n  velocity: { x: number; y: number },\n): boolean {\n  if (!shiftData.shifted) {\n    return false;\n  }\n\n  const shouldBeClosedThreshold = { x: false, y: false };\n  const shouldBeClosedByVelocity = { x: false, y: false };\n\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    } else if (placement.endsWith('end')) {\n      shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n\n    if (placement.startsWith('bottom')) {\n      shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y =\n        relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n  } else if (placement.startsWith('bottom')) {\n    shouldBeClosedThreshold.x =\n      relativeClientRect.x < -relativeClientRect.width / 2 ||\n      relativeClientRect.x > relativeClientRect.width / 2;\n    shouldBeClosedByVelocity.x =\n      (relativeClientRect.x < 0 && velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE) ||\n      (relativeClientRect.x > 0 && velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE);\n  }\n\n  if (placement.startsWith('top')) {\n    shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n    shouldBeClosedByVelocity.y =\n      relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n  }\n\n  return (\n    shouldBeClosedThreshold.x ||\n    shouldBeClosedByVelocity.x ||\n    shouldBeClosedThreshold.y ||\n    /* istanbul ignore next: подсвечивает жёлтым и пишет \"branch not covered\" */\n    shouldBeClosedByVelocity.y\n  );\n}\n"],"names":["rubberbandIfOutOfBounds","resolveOffsetYCssStyle","placement","style","offsetY","undefined","top","bottom","getInitialShiftData","width","height","mediaQueries","shifted","direction","isDesktop","smallTabletPlus","matches","x","y","getMovedShiftData","shiftData","nextShift","endsWith","startsWith","movingToLeft","movingToRight","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","shouldBeClosedByShiftData","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { MediaQueries } from '../../lib/adaptivity';\nimport { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n  placement: SnackbarPlacement,\n  offsetY?: React.CSSProperties['inset'],\n): React.CSSProperties | undefined {\n  if (offsetY === undefined) {\n    return undefined;\n  }\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      return { top: offsetY };\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      return { bottom: offsetY };\n  }\n}\n\nexport function getInitialShiftData(\n  width: number,\n  height: number,\n  mediaQueries: MediaQueries,\n): ShiftData {\n  return {\n    shifted: false,\n    direction: null,\n    isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties,\n    x: 0,\n    y: 0,\n    width,\n    height,\n  };\n}\n\nexport function getMovedShiftData(\n  placement: SnackbarPlacement,\n  shiftData: ShiftData,\n  nextShift: { x: number; y: number },\n): ShiftData {\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n    } else if (placement.endsWith('end')) {\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n    }\n\n    if (placement.startsWith('bottom')) {\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n    }\n  } else if (placement.startsWith('bottom')) {\n    shiftData.x = nextShift.x;\n\n    const movingToLeft = nextShift.x < 0 ? -1 : null;\n    const movingToRight = nextShift.x > 0 ? 1 : null;\n    shiftData.direction = movingToLeft || movingToRight;\n  }\n\n  if (placement.startsWith('top')) {\n    shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\n  }\n\n  shiftData.shifted = true;\n\n  return shiftData;\n}\n\nconst MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;\n\nexport function shouldBeClosedByShiftData(\n  placement: SnackbarPlacement,\n  shiftData: ShiftData,\n  relativeClientRect: DOMRect,\n  velocity: { x: number; y: number },\n): boolean {\n  if (!shiftData.shifted) {\n    return false;\n  }\n\n  const shouldBeClosedThreshold = { x: false, y: false };\n  const shouldBeClosedByVelocity = { x: false, y: false };\n\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    } else if (placement.endsWith('end')) {\n      shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n\n    if (placement.startsWith('bottom')) {\n      shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y =\n        relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n  } else if (placement.startsWith('bottom')) {\n    shouldBeClosedThreshold.x =\n      relativeClientRect.x < -relativeClientRect.width / 2 ||\n      relativeClientRect.x > relativeClientRect.width / 2;\n    shouldBeClosedByVelocity.x =\n      (relativeClientRect.x < 0 && velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE) ||\n      (relativeClientRect.x > 0 && velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE);\n  }\n\n  if (placement.startsWith('top')) {\n    shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n    shouldBeClosedByVelocity.y =\n      relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n  }\n\n  return (\n    shouldBeClosedThreshold.x ||\n    shouldBeClosedByVelocity.x ||\n    shouldBeClosedThreshold.y ||\n    /* istanbul ignore next: подсвечивает жёлтым и пишет \"branch not covered\" */\n    shouldBeClosedByVelocity.y\n  );\n}\n"],"names":["rubberbandIfOutOfBounds","resolveOffsetYCssStyle","placement","offsetY","undefined","top","bottom","getInitialShiftData","width","height","mediaQueries","shifted","direction","isDesktop","smallTabletPlus","matches","x","y","getMovedShiftData","shiftData","nextShift","endsWith","startsWith","movingToLeft","movingToRight","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","shouldBeClosedByShiftData","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"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"}

package/dist/cssm/components/Spacing/Spacing.js

@@ -7,14 +7,11 @@ import styles from "./Spacing.module.css";
 export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
- */ export const Spacing = ({ size = 'm', style, ...restProps })=>{
+ */ export const Spacing = ({ size = 'm', ...restProps })=>{
     const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(CUSTOM_CSS_TOKEN_FOR_USER_GAP, size);
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
-        style: spacingSizeStyle ? {
-            ...spacingSizeStyle,
-            ...style
-        } : style,
+        baseStyle: spacingSizeStyle,
         baseClassName: classNames(styles.host, spacingSizeClassName)
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные\n   */\n  size?: SpacingSizeProp;\n  /**\n   * @deprecated 7.0.0\n   *\n   * Свойство устарело и будет удалено в v8.\n   */\n  children?: React.ReactNode;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style, ...restProps }: SpacingProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_GAP,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      style={\n        spacingSizeStyle\n          ? {\n              ...spacingSizeStyle,\n              ...style,\n            }\n          : style\n      }\n      baseClassName={classNames(styles.host, spacingSizeClassName)}\n    />\n  );\n};\n"],"names":["React","classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","style","restProps","spacingSizeClassName","spacingSizeStyle","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAgB7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAAE,GAAGC,WAAyB;IACvE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGT,mBAC/CG,+BACAE;IAEF,qBACE,KAACJ;QACE,GAAGM,SAAS;QACbD,OACEG,mBACI;YACE,GAAGA,gBAAgB;YACnB,GAAGH,KAAK;QACV,IACAA;QAENI,eAAeX,WAAWG,OAAOS,IAAI,EAAEH;;AAG7C,EAAE"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные\n   */\n  size?: SpacingSizeProp;\n  /**\n   * @deprecated 7.0.0\n   *\n   * Свойство устарело и будет удалено в v8.\n   */\n  children?: React.ReactNode;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', ...restProps }: SpacingProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_GAP,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      baseStyle={spacingSizeStyle}\n      baseClassName={classNames(styles.host, spacingSizeClassName)}\n    />\n  );\n};\n"],"names":["React","classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAgB7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGR,mBAC/CG,+BACAE;IAEF,qBACE,KAACJ;QACE,GAAGK,SAAS;QACbG,WAAWD;QACXE,eAAeX,WAAWG,OAAOS,IAAI,EAAEJ;;AAG7C,EAAE"}

package/dist/cssm/components/SplitCol/SplitCol.js

@@ -46,7 +46,7 @@ function useTransitionAnimate(animateProp) {
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */ export const SplitCol = (props)=>{
-    const { children, width, maxWidth, minWidth, animate: animateProp, fixed, style, autoSpaced, stretchedOnMobile, getRootRef, ...restProps } = props;
+    const { children, width, maxWidth, minWidth, animate: animateProp, fixed, autoSpaced, stretchedOnMobile, getRootRef, ...restProps } = props;
     const baseRef = useExternRef(getRootRef);
     const { viewWidth } = useAdaptivity();
     const animate = useTransitionAnimate(animateProp);
@@ -59,11 +59,10 @@ function useTransitionAnimate(animateProp) {
     ]);
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
-        style: {
+        baseStyle: {
             width,
             maxWidth,
-            minWidth,
-            ...style
+            minWidth
         },
         getRootRef: baseRef,
         baseClassName: classNames(styles.host, viewWidthToClassName(breakpointClassNames, viewWidth), autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'), fixed && styles.fixed, stretchedOnMobile && styles.stretchedOnMobile),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles.viewWidthNone, 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles.viewWidthTabletMinus,\n  smallTabletPlus: styles.viewWidthSmallTabletPlus,\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps): React.ReactNode => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = React.useMemo(\n    () => ({\n      colRef: baseRef,\n      animate,\n    }),\n    [animate, baseRef],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        width,\n        maxWidth,\n        minWidth,\n        ...style,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles.host,\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles.fixed,\n        stretchedOnMobile && styles.stretchedOnMobile,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles.fixedInner}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","SplitCol","props","children","width","maxWidth","minWidth","fixed","style","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","useMemo","colRef","baseClassName","host","spacedAuto","Provider","value","div","className","fixedInner"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,gCAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,0BAAuB;AAE/F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGpB;IACtB,MAAM,CAACqB,SAASC,WAAW,GAAGxB,MAAMyB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAevB;IAErBJ,MAAM4B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYjB,UAAUyB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAxB,0BAA0BoB,aAAaV,eAAe,EAAEc;QACxD,OAAO;YACLvB,6BAA6BmB,aAAaV,eAAe,EAAEc;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAqBA;;CAEC,GACD,OAAO,MAAMU,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRf,SAASF,WAAW,EACpBkB,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGV;IACJ,MAAMW,UAAU1C,aAAawC;IAC7B,MAAM,EAAErB,SAAS,EAAE,GAAGpB;IACtB,MAAMqB,UAAUH,qBAAqBC;IAErC,MAAMyB,eAAe9C,MAAM+C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRtB;QACF,CAAA,GACA;QAACA;QAASsB;KAAQ;IAGpB,qBACE,KAACpC;QACE,GAAGmC,SAAS;QACbJ,OAAO;YACLJ;YACAC;YACAC;YACA,GAAGE,KAAK;QACV;QACAG,YAAYE;QACZI,eAAehD,WACbU,OAAOuC,IAAI,EACX5C,qBAAqBM,sBAAsBU,YAC3CmB,cAAcxC,WAAWU,OAAOwC,UAAU,EAAE,sCAC5CZ,SAAS5B,OAAO4B,KAAK,EACrBG,qBAAqB/B,OAAO+B,iBAAiB;kBAG/C,cAAA,KAAChC,gBAAgB0C,QAAQ;YAACC,OAAOP;sBAC9BP,sBAAQ,KAACe;gBAAIC,WAAW5C,OAAO6C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles.viewWidthNone, 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles.viewWidthTabletMinus,\n  smallTabletPlus: styles.viewWidthSmallTabletPlus,\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps): React.ReactNode => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    animate: animateProp,\n    fixed,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = React.useMemo(\n    () => ({\n      colRef: baseRef,\n      animate,\n    }),\n    [animate, baseRef],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseStyle={{\n        width,\n        maxWidth,\n        minWidth,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles.host,\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles.fixed,\n        stretchedOnMobile && styles.stretchedOnMobile,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles.fixedInner}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","SplitCol","props","children","width","maxWidth","minWidth","fixed","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","useMemo","colRef","baseStyle","baseClassName","host","spacedAuto","Provider","value","div","className","fixedInner"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,gCAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,0BAAuB;AAE/F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGpB;IACtB,MAAM,CAACqB,SAASC,WAAW,GAAGxB,MAAMyB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAevB;IAErBJ,MAAM4B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYjB,UAAUyB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAxB,0BAA0BoB,aAAaV,eAAe,EAAEc;QACxD,OAAO;YACLvB,6BAA6BmB,aAAaV,eAAe,EAAEc;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAqBA;;CAEC,GACD,OAAO,MAAMU,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRf,SAASF,WAAW,EACpBkB,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGT;IACJ,MAAMU,UAAUzC,aAAauC;IAC7B,MAAM,EAAEpB,SAAS,EAAE,GAAGpB;IACtB,MAAMqB,UAAUH,qBAAqBC;IAErC,MAAMwB,eAAe7C,MAAM8C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRrB;QACF,CAAA,GACA;QAACA;QAASqB;KAAQ;IAGpB,qBACE,KAACnC;QACE,GAAGkC,SAAS;QACbK,WAAW;YACTZ;YACAC;YACAC;QACF;QACAI,YAAYE;QACZK,eAAehD,WACbU,OAAOuC,IAAI,EACX5C,qBAAqBM,sBAAsBU,YAC3CkB,cAAcvC,WAAWU,OAAOwC,UAAU,EAAE,sCAC5CZ,SAAS5B,OAAO4B,KAAK,EACrBE,qBAAqB9B,OAAO8B,iBAAiB;kBAG/C,cAAA,KAAC/B,gBAAgB0C,QAAQ;YAACC,OAAOR;sBAC9BN,sBAAQ,KAACe;gBAAIC,WAAW5C,OAAO6C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}

package/dist/cssm/components/SplitLayout/SplitLayout.js

@@ -2,19 +2,15 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
-import { useExternRef } from "../../hooks/useExternRef.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
-import { AppRootContext } from "../AppRoot/AppRootContext.js";
 import styles from "./SplitLayout.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
  */ export const SplitLayout = ({ header, children, getRootRef, getRef, className, center, modal, popout, ...restProps })=>{
     const platform = usePlatform();
-    const { popoutModalRoot } = React.useContext(AppRootContext);
-    const rootRef = useExternRef(popoutModalRoot, getRootRef);
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames(styles.host, platform === 'ios' && styles.ios),
-        ref: rootRef,
+        ref: getRootRef,
         children: [
             header,
             /*#__PURE__*/ _jsxs("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated будет удалёно в **VKUI v8**\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated будет удалёно в **VKUI v8**\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  modal,\n  popout,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const { popoutModalRoot } = React.useContext(AppRootContext);\n\n  const rootRef = useExternRef<HTMLDivElement>(popoutModalRoot, getRootRef);\n\n  return (\n    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={rootRef}>\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n          className,\n        )}\n      >\n        {children}\n        {modal}\n        {popout}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useExternRef","usePlatform","AppRootContext","styles","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","popoutModalRoot","useContext","rootRef","div","host","ios","ref","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,OAAOC,YAAY,2BAA2B;AA4B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWb;IAEjB,MAAM,EAAEc,eAAe,EAAE,GAAGjB,MAAMkB,UAAU,CAACd;IAE7C,MAAMe,UAAUjB,aAA6Be,iBAAiBR;IAE9D,qBACE,MAACW;QAAIT,WAAWV,WAAWI,OAAOgB,IAAI,EAAEL,aAAa,SAASX,OAAOiB,GAAG;QAAGC,KAAKJ;;YAC7EZ;0BACD,MAACa;gBACE,GAAGL,SAAS;gBACbQ,KAAKb;gBACLC,WAAWV,WACTI,OAAOmB,KAAK,EACZ,CAAC,CAACjB,UAAUF,OAAOoB,WAAW,EAC9Bb,UAAUP,OAAOqB,WAAW,EAC5Bf;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated будет удалёно в **VKUI v8**\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated будет удалёно в **VKUI v8**\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  modal,\n  popout,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={getRootRef}>\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n          className,\n        )}\n      >\n        {children}\n        {modal}\n        {popout}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","styles","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","div","host","ios","ref","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,OAAOC,YAAY,2BAA2B;AA4B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWZ;IAEjB,qBACE,MAACa;QAAIN,WAAWR,WAAWE,OAAOa,IAAI,EAAEF,aAAa,SAASX,OAAOc,GAAG;QAAGC,KAAKX;;YAC7EF;0BACD,MAACU;gBACE,GAAGF,SAAS;gBACbK,KAAKV;gBACLC,WAAWR,WACTE,OAAOgB,KAAK,EACZ,CAAC,CAACd,UAAUF,OAAOiB,WAAW,EAC9BV,UAAUP,OAAOkB,WAAW,EAC5BZ;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js

@@ -39,13 +39,13 @@ const SubnavigationButtonTypography = ({ textLevel, ...restProps })=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
- */ export const SubnavigationButton = ({ mode = 'primary', appearance = 'accent', size = 'm', selected, textLevel = '1', before, after, chevron, children, className, ...restProps })=>{
+ */ export const SubnavigationButton = ({ mode = 'primary', appearance = 'accent', size = 'm', selected, textLevel = '1', before, after, chevron, children, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ _jsx(Tappable, {
         ...restProps,
         hasActive: false,
         focusVisibleMode: "outside",
-        className: classNames(styles.host, sizeStyles[size], modeStyles[mode], appearanceStyles[appearance], selected && styles.selected, sizeY !== 'regular' && sizeYClassNames[sizeY], className),
+        baseClassName: classNames(styles.host, sizeStyles[size], modeStyles[mode], appearanceStyles[appearance], selected && styles.selected, sizeY !== 'regular' && sizeYClassNames[sizeY]),
         children: /*#__PURE__*/ _jsxs("span", {
             className: styles.in,
             children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  appearance?: 'accent' | 'neutral';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","className","sizeY","hasActive","focusVisibleMode","host","span","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AA6BA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACT,GAAGX,WACsB;IACzB,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAG3C;IAE3B,qBACE,KAACC;QACE,GAAG8B,SAAS;QACba,WAAW;QACXC,kBAAiB;QACjBH,WAAW3C,WACTK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BM,UAAU,aAAanB,eAAe,CAACmB,MAAM,EAC7CD;kBAGF,cAAA,MAACK;YAAKL,WAAWtC,OAAO4C,EAAE;;gBACvBV,wBAAU,KAACS;oBAAKL,WAAWtC,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXY,WAAWtC,OAAO6C,KAAK;oBACvBC,WAAU;8BAETT;;gBAEFF,uBAAS,KAACQ;oBAAKL,WAAWtC,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAe4C,WAAWtC,OAAO+C,WAAW;;;;;AAIjE,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  appearance?: 'accent' | 'neutral';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","host","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AA6BA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAG1C;IAE3B,qBACE,KAACC;QACE,GAAG8B,SAAS;QACbY,WAAW;QACXC,kBAAiB;QACjBC,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,UAAU,aAAalB,eAAe,CAACkB,MAAM;kBAG/C,cAAA,MAACK;YAAKC,WAAW5C,OAAO6C,EAAE;;gBACvBX,wBAAU,KAACS;oBAAKC,WAAW5C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXkB,WAAW5C,OAAO8C,KAAK;oBACvBC,WAAU;8BAETV;;gBAEFF,uBAAS,KAACQ;oBAAKC,WAAW5C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAekD,WAAW5C,OAAOgD,WAAW;;;;;AAIjE,EAAE"}

package/dist/cssm/components/TabsItem/TabsItem.js

@@ -29,7 +29,7 @@ const fillModeClassNames = {
 const warn = warnOnce('TabsItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
- */ export const TabsItem = ({ before, children, status, after, selected = false, className, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = styles.hover, activeMode = '', hovered, activated, hasHover, hasActive = false, focusVisibleMode = 'inside', ...restProps })=>{
+ */ export const TabsItem = ({ before, children, status, after, selected = false, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = styles.hover, activeMode = '', hovered, activated, hasHover, hasActive = false, focusVisibleMode = 'inside', ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } = React.useContext(TabsModeContext);
     let statusComponent = null;
@@ -100,7 +100,7 @@ const warn = warnOnce('TabsItem');
     return /*#__PURE__*/ _jsxs(Tappable, {
         ...restProps,
         getRootRef: rootRef,
-        className: classNames(styles.host, mode && stylesMode[mode], selected && styles.selected, sizeY !== 'regular' && sizeYClassNames[sizeY], withGaps && styles.withGaps, layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode], className),
+        baseClassName: classNames(styles.host, mode && stylesMode[mode], selected && styles.selected, sizeY !== 'regular' && sizeYClassNames[sizeY], withGaps && styles.withGaps, layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode]),
         hoverMode: hoverMode,
         activeMode: activeMode,
         hasHover: hasHover,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hovered,\n  activated,\n  hasHover,\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      className={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n        className,\n      )}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      hovered={hovered}\n      activated={activated}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hovered","activated","hasHover","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","host","aria-selected","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hovered,\n  activated,\n  hasHover,\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      hovered={hovered}\n      activated={activated}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hovered","activated","hasHover","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","baseClassName","host","aria-selected","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}

package/dist/cssm/components/ToolButton/ToolButton.js

@@ -29,7 +29,7 @@ const sizeYClassNames = {
  * или для включения/выключения режима.
  *
  * @see https://vkcom.github.io/VKUI/#/ToolButton
- */ export const ToolButton = ({ mode = 'primary', appearance = 'accent', direction = 'row', className, children, IconCompact, IconRegular, rounded, ...restProps })=>{
+ */ export const ToolButton = ({ mode = 'primary', appearance = 'accent', direction = 'row', children, IconCompact, IconRegular, rounded, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const hasChildren = hasReactNode(children);
     return /*#__PURE__*/ _jsxs(Tappable, {
@@ -37,7 +37,7 @@ const sizeYClassNames = {
         activeMode: styles.active,
         Component: restProps.href ? 'a' : 'button',
         focusVisibleMode: "outside",
-        className: classNames(className, styles.host, rounded && getRoundedClassName(direction, hasChildren), hasChildren && direction === 'row' && styles.withFakeEndIcon, stylesMode[mode], stylesAppearance[appearance], stylesDirection[direction], sizeY !== 'compact' && sizeYClassNames[sizeY]),
+        baseClassName: classNames(styles.host, rounded && getRoundedClassName(direction, hasChildren), hasChildren && direction === 'row' && styles.withFakeEndIcon, stylesMode[mode], stylesAppearance[appearance], stylesDirection[direction], sizeY !== 'compact' && sizeYClassNames[sizeY]),
         ...restProps,
         children: [
             /*#__PURE__*/ _jsx(AdaptiveIconRenderer, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n  row: styles.directionRow,\n  column: styles.directionColumn,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при `direction=\"column\"` если передан `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  className,\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        className,\n        styles.host,\n        rounded && getRoundedClassName(direction, hasChildren),\n        hasChildren && direction === 'row' && styles.withFakeEndIcon,\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles.text}>{children}</span>}\n    </Tappable>\n  );\n};\n\nexport function getRoundedClassName(\n  direction: 'row' | 'column',\n  hasChildren: boolean,\n): string | undefined {\n  switch (direction) {\n    case 'row':\n      return styles.rounded;\n    case 'column':\n      return hasChildren ? undefined : styles.rounded;\n  }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","styles","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","stylesAppearance","accent","appearanceAccent","neutral","appearanceNeutral","stylesDirection","row","directionRow","column","directionColumn","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","ToolButton","mode","appearance","direction","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","host","getRoundedClassName","withFakeEndIcon","span","text","undefined"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,SAASF,OAAOG,WAAW;IAC3BC,WAAWJ,OAAOK,aAAa;IAC/BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,mBAAmB;IACvBC,QAAQX,OAAOY,gBAAgB;IAC/BC,SAASb,OAAOc,iBAAiB;AACnC;AAEA,MAAMC,kBAAkB;IACtBC,KAAKhB,OAAOiB,YAAY;IACxBC,QAAQlB,OAAOmB,eAAe;AAChC;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AAcA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EACP,GAAGC,WACa;IAChB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGtC;IAC3B,MAAMuC,cAAcxC,aAAakC;IAEjC,qBACE,MAAC/B;QACCsC,WAAWrC,OAAOsC,KAAK;QACvBC,YAAYvC,OAAOwC,MAAM;QACzBC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBd,WAAWlC,WACTkC,WACA7B,OAAO4C,IAAI,EACXX,WAAWY,oBAAoBjB,WAAWQ,cAC1CA,eAAeR,cAAc,SAAS5B,OAAO8C,eAAe,EAC5D7C,UAAU,CAACyB,KAAK,EAChBhB,gBAAgB,CAACiB,WAAW,EAC5BZ,eAAe,CAACa,UAAU,EAC1BO,UAAU,aAAaf,eAAe,CAACe,MAAM;QAE9C,GAAGD,SAAS;;0BAEb,KAACpC;gBAAqBiC,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACW;gBAAKlB,WAAW7B,OAAOgD,IAAI;0BAAGlB;;;;AAGrD,EAAE;AAEF,OAAO,SAASe,oBACdjB,SAA2B,EAC3BQ,WAAoB;IAEpB,OAAQR;QACN,KAAK;YACH,OAAO5B,OAAOiC,OAAO;QACvB,KAAK;YACH,OAAOG,cAAca,YAAYjD,OAAOiC,OAAO;IACnD;AACF"}
+{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n  row: styles.directionRow,\n  column: styles.directionColumn,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при `direction=\"column\"` если передан `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        rounded && getRoundedClassName(direction, hasChildren),\n        hasChildren && direction === 'row' && styles.withFakeEndIcon,\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles.text}>{children}</span>}\n    </Tappable>\n  );\n};\n\nexport function getRoundedClassName(\n  direction: 'row' | 'column',\n  hasChildren: boolean,\n): string | undefined {\n  switch (direction) {\n    case 'row':\n      return styles.rounded;\n    case 'column':\n      return hasChildren ? undefined : styles.rounded;\n  }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","styles","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","stylesAppearance","accent","appearanceAccent","neutral","appearanceNeutral","stylesDirection","row","directionRow","column","directionColumn","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","ToolButton","mode","appearance","direction","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","baseClassName","host","getRoundedClassName","withFakeEndIcon","span","className","text","undefined"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,SAASF,OAAOG,WAAW;IAC3BC,WAAWJ,OAAOK,aAAa;IAC/BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,mBAAmB;IACvBC,QAAQX,OAAOY,gBAAgB;IAC/BC,SAASb,OAAOc,iBAAiB;AACnC;AAEA,MAAMC,kBAAkB;IACtBC,KAAKhB,OAAOiB,YAAY;IACxBC,QAAQlB,OAAOmB,eAAe;AAChC;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AAcA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EACP,GAAGC,WACa;IAChB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGrC;IAC3B,MAAMsC,cAAcvC,aAAaiC;IAEjC,qBACE,MAAC9B;QACCqC,WAAWpC,OAAOqC,KAAK;QACvBC,YAAYtC,OAAOuC,MAAM;QACzBC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBC,eAAehD,WACbK,OAAO4C,IAAI,EACXZ,WAAWa,oBAAoBjB,WAAWO,cAC1CA,eAAeP,cAAc,SAAS5B,OAAO8C,eAAe,EAC5D7C,UAAU,CAACyB,KAAK,EAChBhB,gBAAgB,CAACiB,WAAW,EAC5BZ,eAAe,CAACa,UAAU,EAC1BM,UAAU,aAAad,eAAe,CAACc,MAAM;QAE9C,GAAGD,SAAS;;0BAEb,KAACnC;gBAAqBgC,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACY;gBAAKC,WAAWhD,OAAOiD,IAAI;0BAAGpB;;;;AAGrD,EAAE;AAEF,OAAO,SAASgB,oBACdjB,SAA2B,EAC3BO,WAAoB;IAEpB,OAAQP;QACN,KAAK;YACH,OAAO5B,OAAOgC,OAAO;QACvB,KAAK;YACH,OAAOG,cAAce,YAAYlD,OAAOgC,OAAO;IACnD;AACF"}

package/dist/cssm/components/WriteBarIcon/WriteBarIcon.js

@@ -19,7 +19,7 @@ const predefinedLabel = {
 const warn = warnOnce('WriteBarIcon');
 /**
  * @see https://vkcom.github.io/VKUI/#/WriteBarIcon
- */ export const WriteBarIcon = ({ mode, children, count, className, label: labelProp, ...restProps })=>{
+ */ export const WriteBarIcon = ({ mode, children, count, label: labelProp, ...restProps })=>{
     const platform = usePlatform();
     let predefinedIcons;
     switch(mode){
@@ -62,7 +62,7 @@ const warn = warnOnce('WriteBarIcon');
         Component: "button",
         hasHover: false,
         activeMode: styles.active,
-        className: classNames(styles.host, platform === 'ios' && styles.ios, mode === 'send' && styles.modeSend, mode === 'done' && styles.modeDone, className),
+        baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, mode === 'send' && styles.modeSend, mode === 'done' && styles.modeDone),
         children: [
             /*#__PURE__*/ _jsxs("span", {
                 className: styles.in,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/WriteBarIcon/WriteBarIcon.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon24Attach,\n  Icon24CheckCircleOutline,\n  Icon24Send,\n  Icon28AddCircleOutline,\n  Icon28AttachOutline,\n  Icon28CheckCircleOutline,\n  Icon28Send,\n  Icon48WritebarDone,\n  Icon48WritebarSend,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Counter } from '../Counter/Counter';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './WriteBarIcon.module.css';\n\nconst predefinedLabel = {\n  attach: 'Прикрепить файл',\n  send: 'Отправить',\n  done: 'Готово',\n};\n\nexport interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Предустановленные типы кнопок в WriteBar для отрисовки иконки и установки текста кнопки в зависимости от платформы.\n   * Если передать валидное значение для этого свойства, `children` игнорируются, а для `label` по умолчанию используется текст на \"ru_RU\".\n   *\n   * Валидные значения:\n   * - `attach` – иконка прикрепления, текст по умолчанию — \"Прикрепить файл\";\n   * - `send` – иконка отправки, текст по умолчанию — \"Отправить\";\n   * - `done` – иконка отправки в режиме редактирования, текст по умолчанию — \"Готово\";\n   */\n  mode?: 'attach' | 'send' | 'done';\n  /**\n   * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.\n   */\n  count?: number;\n  /**\n   * Текст кнопки. Необходим для ассистивных технологий.\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('WriteBarIcon');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBarIcon\n */\nexport const WriteBarIcon = ({\n  mode,\n  children,\n  count,\n  className,\n  label: labelProp,\n  ...restProps\n}: WriteBarIconProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  let predefinedIcons;\n\n  switch (mode) {\n    case 'attach':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon28AddCircleOutline : Icon24Attach,\n        IconRegular: platform === 'ios' ? Icon28AddCircleOutline : Icon28AttachOutline,\n      };\n      break;\n\n    case 'send':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon48WritebarSend : Icon24Send,\n        IconRegular: platform === 'ios' ? Icon48WritebarSend : Icon28Send,\n      };\n      break;\n\n    case 'done':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon48WritebarDone : Icon24CheckCircleOutline,\n        IconRegular: platform === 'ios' ? Icon48WritebarDone : Icon28CheckCircleOutline,\n      };\n      break;\n\n    default:\n      break;\n  }\n\n  const label = labelProp ?? (mode && predefinedLabel[mode]);\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y['button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      activeMode={styles.active}\n      className={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'send' && styles.modeSend,\n        mode === 'done' && styles.modeDone,\n        className,\n      )}\n    >\n      <span className={styles.in}>\n        {label && <VisuallyHidden>{label}</VisuallyHidden>}\n        {predefinedIcons ? <AdaptiveIconRenderer {...predefinedIcons} /> : children}\n      </span>\n      {hasReactNode(count) && (\n        <Counter className={styles.counter} size=\"s\">\n          {count}\n        </Counter>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Attach","Icon24CheckCircleOutline","Icon24Send","Icon28AddCircleOutline","Icon28AttachOutline","Icon28CheckCircleOutline","Icon28Send","Icon48WritebarDone","Icon48WritebarSend","classNames","hasReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","AdaptiveIconRenderer","Counter","Tappable","VisuallyHidden","styles","predefinedLabel","attach","send","done","warn","WriteBarIcon","mode","children","count","className","label","labelProp","restProps","platform","predefinedIcons","IconCompact","IconRegular","process","env","NODE_ENV","isAccessible","a11y","Component","hasHover","activeMode","active","host","ios","modeSend","modeDone","span","in","counter","size"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,wBAAwB,EACxBC,UAAU,EACVC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,UAAU,EACVC,kBAAkB,EAClBC,kBAAkB,QACb,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,kBAAkB;IACtBC,QAAQ;IACRC,MAAM;IACNC,MAAM;AACR;AAuBA,MAAMC,OAAOV,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMW,eAAe,CAAC,EAC3BC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,OAAOC,SAAS,EAChB,GAAGC,WACe;IAClB,MAAMC,WAAWtB;IAEjB,IAAIuB;IAEJ,OAAQR;QACN,KAAK;YACHQ,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQ9B,yBAAyBH;gBAC3DoC,aAAaH,aAAa,QAAQ9B,yBAAyBC;YAC7D;YACA;QAEF,KAAK;YACH8B,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQzB,qBAAqBN;gBACvDkC,aAAaH,aAAa,QAAQzB,qBAAqBF;YACzD;YACA;QAEF,KAAK;YACH4B,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQ1B,qBAAqBN;gBACvDmC,aAAaH,aAAa,QAAQ1B,qBAAqBF;YACzD;YACA;QAEF;YACE;IACJ;IAEA,MAAMyB,QAAQC,aAAcL,CAAAA,QAAQN,eAAe,CAACM,KAAK,AAAD;IAExD,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe5B,kBAAkB;YACrCe,UAAU;gBAACA;gBAAUG;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACQ,cAAc;YACjBhB,KAAKX,gBAAgB4B,IAAI,CAAC,cAAc,EAAE;QAC5C;IACF;IAEA,qBACE,MAACxB;QACE,GAAGe,SAAS;QACbU,WAAU;QACVC,UAAU;QACVC,YAAYzB,OAAO0B,MAAM;QACzBhB,WAAWpB,WACTU,OAAO2B,IAAI,EACXb,aAAa,SAASd,OAAO4B,GAAG,EAChCrB,SAAS,UAAUP,OAAO6B,QAAQ,EAClCtB,SAAS,UAAUP,OAAO8B,QAAQ,EAClCpB;;0BAGF,MAACqB;gBAAKrB,WAAWV,OAAOgC,EAAE;;oBACvBrB,uBAAS,KAACZ;kCAAgBY;;oBAC1BI,gCAAkB,KAACnB;wBAAsB,GAAGmB,eAAe;yBAAOP;;;YAEpEjB,aAAakB,wBACZ,KAACZ;gBAAQa,WAAWV,OAAOiC,OAAO;gBAAEC,MAAK;0BACtCzB;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/WriteBarIcon/WriteBarIcon.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon24Attach,\n  Icon24CheckCircleOutline,\n  Icon24Send,\n  Icon28AddCircleOutline,\n  Icon28AttachOutline,\n  Icon28CheckCircleOutline,\n  Icon28Send,\n  Icon48WritebarDone,\n  Icon48WritebarSend,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Counter } from '../Counter/Counter';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './WriteBarIcon.module.css';\n\nconst predefinedLabel = {\n  attach: 'Прикрепить файл',\n  send: 'Отправить',\n  done: 'Готово',\n};\n\nexport interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Предустановленные типы кнопок в WriteBar для отрисовки иконки и установки текста кнопки в зависимости от платформы.\n   * Если передать валидное значение для этого свойства, `children` игнорируются, а для `label` по умолчанию используется текст на \"ru_RU\".\n   *\n   * Валидные значения:\n   * - `attach` – иконка прикрепления, текст по умолчанию — \"Прикрепить файл\";\n   * - `send` – иконка отправки, текст по умолчанию — \"Отправить\";\n   * - `done` – иконка отправки в режиме редактирования, текст по умолчанию — \"Готово\";\n   */\n  mode?: 'attach' | 'send' | 'done';\n  /**\n   * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.\n   */\n  count?: number;\n  /**\n   * Текст кнопки. Необходим для ассистивных технологий.\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('WriteBarIcon');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBarIcon\n */\nexport const WriteBarIcon = ({\n  mode,\n  children,\n  count,\n  label: labelProp,\n  ...restProps\n}: WriteBarIconProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  let predefinedIcons;\n\n  switch (mode) {\n    case 'attach':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon28AddCircleOutline : Icon24Attach,\n        IconRegular: platform === 'ios' ? Icon28AddCircleOutline : Icon28AttachOutline,\n      };\n      break;\n\n    case 'send':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon48WritebarSend : Icon24Send,\n        IconRegular: platform === 'ios' ? Icon48WritebarSend : Icon28Send,\n      };\n      break;\n\n    case 'done':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon48WritebarDone : Icon24CheckCircleOutline,\n        IconRegular: platform === 'ios' ? Icon48WritebarDone : Icon28CheckCircleOutline,\n      };\n      break;\n\n    default:\n      break;\n  }\n\n  const label = labelProp ?? (mode && predefinedLabel[mode]);\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y['button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      activeMode={styles.active}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'send' && styles.modeSend,\n        mode === 'done' && styles.modeDone,\n      )}\n    >\n      <span className={styles.in}>\n        {label && <VisuallyHidden>{label}</VisuallyHidden>}\n        {predefinedIcons ? <AdaptiveIconRenderer {...predefinedIcons} /> : children}\n      </span>\n      {hasReactNode(count) && (\n        <Counter className={styles.counter} size=\"s\">\n          {count}\n        </Counter>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Attach","Icon24CheckCircleOutline","Icon24Send","Icon28AddCircleOutline","Icon28AttachOutline","Icon28CheckCircleOutline","Icon28Send","Icon48WritebarDone","Icon48WritebarSend","classNames","hasReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","AdaptiveIconRenderer","Counter","Tappable","VisuallyHidden","styles","predefinedLabel","attach","send","done","warn","WriteBarIcon","mode","children","count","label","labelProp","restProps","platform","predefinedIcons","IconCompact","IconRegular","process","env","NODE_ENV","isAccessible","a11y","Component","hasHover","activeMode","active","baseClassName","host","ios","modeSend","modeDone","span","className","in","counter","size"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,wBAAwB,EACxBC,UAAU,EACVC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,UAAU,EACVC,kBAAkB,EAClBC,kBAAkB,QACb,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,kBAAkB;IACtBC,QAAQ;IACRC,MAAM;IACNC,MAAM;AACR;AAuBA,MAAMC,OAAOV,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMW,eAAe,CAAC,EAC3BC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACLC,OAAOC,SAAS,EAChB,GAAGC,WACe;IAClB,MAAMC,WAAWrB;IAEjB,IAAIsB;IAEJ,OAAQP;QACN,KAAK;YACHO,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQ7B,yBAAyBH;gBAC3DmC,aAAaH,aAAa,QAAQ7B,yBAAyBC;YAC7D;YACA;QAEF,KAAK;YACH6B,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQxB,qBAAqBN;gBACvDiC,aAAaH,aAAa,QAAQxB,qBAAqBF;YACzD;YACA;QAEF,KAAK;YACH2B,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQzB,qBAAqBN;gBACvDkC,aAAaH,aAAa,QAAQzB,qBAAqBF;YACzD;YACA;QAEF;YACE;IACJ;IAEA,MAAMwB,QAAQC,aAAcJ,CAAAA,QAAQN,eAAe,CAACM,KAAK,AAAD;IAExD,IAAIU,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe3B,kBAAkB;YACrCe,UAAU;gBAACA;gBAAUE;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACQ,cAAc;YACjBf,KAAKX,gBAAgB2B,IAAI,CAAC,cAAc,EAAE;QAC5C;IACF;IAEA,qBACE,MAACvB;QACE,GAAGc,SAAS;QACbU,WAAU;QACVC,UAAU;QACVC,YAAYxB,OAAOyB,MAAM;QACzBC,eAAepC,WACbU,OAAO2B,IAAI,EACXd,aAAa,SAASb,OAAO4B,GAAG,EAChCrB,SAAS,UAAUP,OAAO6B,QAAQ,EAClCtB,SAAS,UAAUP,OAAO8B,QAAQ;;0BAGpC,MAACC;gBAAKC,WAAWhC,OAAOiC,EAAE;;oBACvBvB,uBAAS,KAACX;kCAAgBW;;oBAC1BI,gCAAkB,KAAClB;wBAAsB,GAAGkB,eAAe;yBAAON;;;YAEpEjB,aAAakB,wBACZ,KAACZ;gBAAQmC,WAAWhC,OAAOkC,OAAO;gBAAEC,MAAK;0BACtC1B;;;;AAKX,EAAE"}

package/dist/cssm/helpers/mergeStyle.js

@@ -0,0 +1,16 @@
+/**
+ * Мержит стили, пытаясь уменьшить кол-во копирований
+ *
+ * ## Пример
+ *
+ * ```ts
+ * const style = mergeStyle(arrowStyles, styleProp)
+ * ```
+ */ export function mergeStyle(a, b) {
+    return a && b ? {
+        ...a,
+        ...b
+    } : a || b;
+}
+
+//# sourceMappingURL=mergeStyle.js.map

package/dist/cssm/helpers/mergeStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/helpers/mergeStyle.ts"],"sourcesContent":["/**\n * Мержит стили, пытаясь уменьшить кол-во копирований\n *\n * ## Пример\n *\n * ```ts\n * const style = mergeStyle(arrowStyles, styleProp)\n * ```\n */\nexport function mergeStyle(\n  a: React.CSSProperties | undefined,\n  b: React.CSSProperties | undefined,\n): React.CSSProperties | undefined {\n  return a && b ? { ...a, ...b } : a || b;\n}\n"],"names":["mergeStyle","a","b"],"mappings":"AAAA;;;;;;;;CAQC,GACD,OAAO,SAASA,WACdC,CAAkC,EAClCC,CAAkC;IAElC,OAAOD,KAAKC,IAAI;QAAE,GAAGD,CAAC;QAAE,GAAGC,CAAC;IAAC,IAAID,KAAKC;AACxC"}

package/dist/cssm/hooks/useBooleanState.js

@@ -8,10 +8,8 @@ export const useBooleanState = (defaultValue = false)=>{
         setValue(false);
     }, []);
     const toggle = React.useCallback(()=>{
-        setValue(!value);
-    }, [
-        value
-    ]);
+        setValue((value)=>!value);
+    }, []);
     return {
         value,
         setTrue,