@vkontakte/vkui 5.2.4 → 5.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"Tappable.js","names":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","sizeXClassNames","none","compact","regular","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","_onKeyDown","onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","clicks","setClicks","childHover","setChildHover","_hovered","value","setHoveredTrue","setTrue","setHoveredFalse","setFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","childContext","useRef","current","e","preventDefault","click","needWaves","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","top","left","onMove","isSlide","onEnd","duration","activeDuration","classes","IOS","styles","handlers","role","undefined","map","wave"],"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n  regular: styles['Tappable--sizeX-regular'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  children?: React.ReactNode;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = _hovered && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeXClassNames[sizeX],\n    hasHoverContext && styles['Tappable--hover-has'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasActive && active && styles['Tappable--active'],\n    hasHover && hovered && isPresetHoverMode && styles[`Tappable--hover-${hoverMode}`],\n    hasActive && active && isPresetActiveMode && styles[`Tappable--active-${activeMode}`],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  children?: React.ReactNode;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = _hovered && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHover && styles['Tappable--hasHover'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      {\n        background: styles['Tappable--hover-background'],\n        opacity: styles['Tappable--hover-opacity'],\n      }[hoverMode],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      {\n        background: styles['Tappable--active-background'],\n        opacity: styles['Tappable--active-opacity'],\n      }[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","styles","sizeXClassNames","none","compact","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","activity","setActivity","useState","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","onKeyDown","_onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","clicks","setClicks","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","childContext","useRef","current","e","preventDefault","click","needWaves","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","top","left","onMove","isSlide","onEnd","duration","activeDuration","classes","IOS","REGULAR","background","opacity","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","Tappable__waves","map","wave","key","Tappable__wave","style","Tappable__stateLayer","mode"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiTappable{-webkit-tap-highlight-color:transparent;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);cursor:default;isolation:isolate;position:relative;transition:background-color .15s ease-out,opacity .15s ease-out}.vkuiTappable>*{position:relative;z-index:1;z-index:var(--vkui_internal--z_index_tappable_element)}.vkuiTappable--hasActive,.vkuiTappable--hover-has{cursor:pointer}.vkuiTappable[aria-disabled=true],.vkuiTappable[disabled]{cursor:default}.vkuiTappable--focus-visible{outline:none}.vkuiTappable__stateLayer{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:background-color .15s ease-out;z-index:0;z-index:var(--vkui_internal--z_index_tappable_state)}.vkuiTappable--hover-background>.vkuiTappable__stateLayer{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiTappable--hover-opacity{opacity:.8}.vkuiTappable--active-background>.vkuiTappable__stateLayer{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active)}.vkuiTappable--active-opacity{opacity:.7}.vkuiTappable--ios.vkuiTappable--active-background{transition:none}.vkuiTappable .vkuiTappable__waves{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;will-change:transform;z-index:0;z-index:var(--vkui_internal--z_index_tappable_state)}.vkuiTappable .vkuiTappable__wave{animation:vkui-animation-wave .3s cubic-bezier(.4,0,.2,1);animation:vkui-animation-wave .3s var(--vkui--animation_easing_platform);background:rgba(0,16,61,.08);background:var(--vkui--color_transparent--active);border-radius:50%;content:"";height:24px;left:0;margin:-12px 0 0 -12px;opacity:0;position:absolute;top:0;width:24px}.vkuiTappable--sizeX-compact{border-radius:0}@media (max-width:767.9px){.vkuiTappable--sizeX-none{border-radius:0}}@keyframes vkui-animation-wave{0%{opacity:1;transform:scale(1)}30%{opacity:1}to{opacity:0;transform:scale(8)}}
+.vkuiTappable{-webkit-tap-highlight-color:transparent;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);cursor:default;isolation:isolate;position:relative;transition:background-color .15s ease-out,opacity .15s ease-out}.vkuiTappable>*{position:relative;z-index:1;z-index:var(--vkui_internal--z_index_tappable_element)}.vkuiTappable--hasActive,.vkuiTappable--hasHover{cursor:pointer}.vkuiTappable[aria-disabled=true],.vkuiTappable[disabled]{cursor:default}.vkuiTappable--focus-visible{outline:none}.vkuiTappable__stateLayer{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:background-color .15s ease-out;z-index:0;z-index:var(--vkui_internal--z_index_tappable_state)}.vkuiTappable--hover-background>.vkuiTappable__stateLayer{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiTappable--hover-opacity{opacity:.8}.vkuiTappable--active-background>.vkuiTappable__stateLayer{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active)}.vkuiTappable--active-opacity{opacity:.7}.vkuiTappable--ios.vkuiTappable--active-background{transition:none}.vkuiTappable .vkuiTappable__waves{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;will-change:transform;z-index:0;z-index:var(--vkui_internal--z_index_tappable_state)}.vkuiTappable .vkuiTappable__wave{animation:vkui-animation-wave .3s cubic-bezier(.4,0,.2,1);animation:vkui-animation-wave .3s var(--vkui--animation_easing_platform);background:rgba(0,16,61,.08);background:var(--vkui--color_transparent--active);border-radius:50%;content:"";height:24px;left:0;margin:-12px 0 0 -12px;opacity:0;position:absolute;top:0;width:24px}.vkuiTappable--sizeX-compact{border-radius:0}@media (max-width:767.9px){.vkuiTappable--sizeX-none{border-radius:0}}@keyframes vkui-animation-wave{0%{opacity:1;transform:scale(1)}30%{opacity:1}to{opacity:0;transform:scale(8)}}

package/dist/cssm/components/TextTooltip/TextTooltip.js

@@ -1,39 +1,25 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "text", "header", "appearance", "className"];
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { HoverPopper } from '../HoverPopper/HoverPopper';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import "./TextTooltip.module.css";
+import styles from './TextTooltip.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
- */
-export var TextTooltip = function TextTooltip(_ref) {
-  var children = _ref.children,
-    text = _ref.text,
-    header = _ref.header,
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
-    className = _ref.className,
-    popperProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(HoverPopper, _extends({
-    className: classNames("vkuiTextTooltip", styles["TextTooltip--appearance-".concat(appearance)], className),
-    arrow: true,
-    arrowClassName: "vkuiTextTooltip__arrow",
-    content: /*#__PURE__*/React.createElement(React.Fragment, null, hasReactNode(header) && /*#__PURE__*/React.createElement(Subhead, {
-      weight: "2",
-      className: "vkuiTextTooltip__header"
-    }, header), hasReactNode(text) && /*#__PURE__*/React.createElement(Subhead, {
-      className: "vkuiTextTooltip__text"
-    }, text))
-  }, popperProps), children);
-};
-var styles = {
-  "TextTooltip--appearance-accent": "vkuiTextTooltip--appearance-accent",
-  "TextTooltip--appearance-white": "vkuiTextTooltip--appearance-white",
-  "TextTooltip--appearance-black": "vkuiTextTooltip--appearance-black",
-  "TextTooltip--appearance-inversion": "vkuiTextTooltip--appearance-inversion",
-  "TextTooltip--appearance-neutral": "vkuiTextTooltip--appearance-neutral"
+ */ export const TextTooltip = ({ children , text , header , appearance ='neutral' , className , ...popperProps })=>{
+    return /*#__PURE__*/ React.createElement(HoverPopper, {
+        className: classNames(styles['TextTooltip'], appearance !== 'neutral' && ({
+            accent: styles['TextTooltip--appearance-accent'],
+            white: styles['TextTooltip--appearance-white'],
+            black: styles['TextTooltip--appearance-black'],
+            inversion: styles['TextTooltip--appearance-inversion']
+        })[appearance], className),
+        arrow: true,
+        arrowClassName: styles['TextTooltip__arrow'],
+        content: /*#__PURE__*/ React.createElement(React.Fragment, null, hasReactNode(header) && /*#__PURE__*/ React.createElement(Subhead, {
+            weight: "2"
+        }, header), hasReactNode(text) && /*#__PURE__*/ React.createElement(Subhead, null, text)),
+        ...popperProps
+    }, children);
 };
+
 //# sourceMappingURL=TextTooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextTooltip.js","names":["React","classNames","hasReactNode","HoverPopper","Subhead","TextTooltip","children","text","header","appearance","className","popperProps","styles"],"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TextTooltip.module.css';\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, 'arrow' | 'arrowClassName' | 'content'> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['TextTooltip'],\n        styles[`TextTooltip--appearance-${appearance}`],\n        className,\n      )}\n      arrow\n      arrowClassName={styles['TextTooltip__arrow']}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && (\n            <Subhead weight=\"2\" className={styles['TextTooltip__header']}>\n              {header}\n            </Subhead>\n          )}\n          {hasReactNode(text) && <Subhead className={styles['TextTooltip__text']}>{text}</Subhead>}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,WAAW,QAA0B,4BAA4B;AAC1E,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AAmBxD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IAAA,uBACNC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,WAAW;IACV,SAAS,EAAEV,UAAU,oBAEnBW,MAAM,mCAA4BH,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK;IACL,cAAc,0BAA+B;IAC7C,OAAO,eACL,oBAAC,KAAK,CAAC,QAAQ,QACZR,YAAY,CAACM,MAAM,CAAC,iBACnB,oBAAC,OAAO;MAAC,MAAM,EAAC,GAAG;MAAC,SAAS;IAAgC,GAC1DA,MAAM,CAEV,EACAN,YAAY,CAACK,IAAI,CAAC,iBAAI,oBAAC,OAAO;MAAC,SAAS;IAA8B,GAAEA,IAAI,CAAW;EAE3F,GACGI,WAAW,GAEdL,QAAQ,CACG;AAElB,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TextTooltip.module.css';\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, 'arrow' | 'arrowClassName' | 'content'> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['TextTooltip'],\n        appearance !== 'neutral' &&\n          {\n            accent: styles['TextTooltip--appearance-accent'],\n            white: styles['TextTooltip--appearance-white'],\n            black: styles['TextTooltip--appearance-black'],\n            inversion: styles['TextTooltip--appearance-inversion'],\n          }[appearance],\n        className,\n      )}\n      arrow\n      arrowClassName={styles['TextTooltip__arrow']}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && <Subhead weight=\"2\">{header}</Subhead>}\n          {hasReactNode(text) && <Subhead>{text}</Subhead>}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["React","classNames","hasReactNode","HoverPopper","Subhead","styles","TextTooltip","children","text","header","appearance","className","popperProps","accent","white","black","inversion","arrow","arrowClassName","content","Fragment","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,2BAA2B;AAkB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,KAAI,EACJC,OAAM,EACNC,YAAa,UAAS,EACtBC,UAAS,EACT,GAAGC,aACc,GAAK;IACtB,qBACE,oBAACT;QACCQ,WAAWV,WACTI,MAAM,CAAC,cAAc,EACrBK,eAAe,aACb,CAAA;YACEG,QAAQR,MAAM,CAAC,iCAAiC;YAChDS,OAAOT,MAAM,CAAC,gCAAgC;YAC9CU,OAAOV,MAAM,CAAC,gCAAgC;YAC9CW,WAAWX,MAAM,CAAC,oCAAoC;QACxD,CAAA,CAAC,CAACK,WAAW,EACfC;QAEFM,OAAAA,IAAK;QACLC,gBAAgBb,MAAM,CAAC,qBAAqB;QAC5Cc,uBACE,oBAACnB,MAAMoB,QAAQ,QACZlB,aAAaO,yBAAW,oBAACL;YAAQiB,QAAO;WAAKZ,SAC7CP,aAAaM,uBAAS,oBAACJ,eAASI;QAGpC,GAAGI,WAAW;OAEdL;AAGP,EAAE"}

package/dist/cssm/components/Textarea/Textarea.js

@@ -1,8 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["defaultValue", "grow", "style", "onResize", "className", "getRootRef", "getRef", "rows", "maxHeight", "status", "onChange", "value"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -10,71 +5,57 @@ import { useEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
 import { FormField } from '../FormField/FormField';
-import "./Textarea.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiTextarea--sizeY-none"
-}, SizeType.COMPACT, "vkuiTextarea--sizeY-compact");
+import styles from './Textarea.module.css';
+const sizeYClassNames = {
+    none: styles['Textarea--sizeY-none'],
+    [SizeType.COMPACT]: styles['Textarea--sizeY-compact']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
- */
-export var Textarea = function Textarea(_ref) {
-  var _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-    _ref$grow = _ref.grow,
-    grow = _ref$grow === void 0 ? true : _ref$grow,
-    style = _ref.style,
-    onResize = _ref.onResize,
-    className = _ref.className,
-    getRootRef = _ref.getRootRef,
-    getRef = _ref.getRef,
-    _ref$rows = _ref.rows,
-    rows = _ref$rows === void 0 ? 2 : _ref$rows,
-    maxHeight = _ref.maxHeight,
-    status = _ref.status,
-    onChangeProp = _ref.onChange,
-    valueProp = _ref.value,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _useEnsuredControl = useEnsuredControl({
-      defaultValue: defaultValue,
-      onChange: onChangeProp,
-      value: valueProp
-    }),
-    _useEnsuredControl2 = _slicedToArray(_useEnsuredControl, 2),
-    value = _useEnsuredControl2[0],
-    onChange = _useEnsuredControl2[1];
-  var currentScrollHeight = React.useRef();
-  var elementRef = useExternRef(getRef);
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-
-  // autosize input
-  React.useEffect(function () {
-    var el = elementRef.current;
-    if (grow && el !== null && el !== void 0 && el.offsetParent) {
-      el.style.height = '';
-      el.style.height = "".concat(el.scrollHeight, "px");
-      if (el.scrollHeight !== currentScrollHeight.current && onResize) {
-        onResize(el);
-        currentScrollHeight.current = el.scrollHeight;
-      }
-    }
-  }, [grow, value, sizeY, elementRef, onResize]);
-  return /*#__PURE__*/React.createElement(FormField, {
-    className: classNames("vkuiTextarea", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
-    style: style,
-    getRootRef: getRootRef,
-    disabled: restProps.disabled,
-    status: status
-  }, /*#__PURE__*/React.createElement("textarea", _extends({}, restProps, {
-    style: {
-      maxHeight: maxHeight
-    },
-    rows: rows,
-    className: "vkuiTextarea__el",
-    value: value,
-    onChange: onChange,
-    ref: elementRef
-  })));
+ */ export const Textarea = ({ defaultValue ='' , grow =true , style , onResize , className , getRootRef , getRef , rows =2 , maxHeight , status , onChange: onChangeProp , value: valueProp , ...restProps })=>{
+    const [value, onChange] = useEnsuredControl({
+        defaultValue,
+        onChange: onChangeProp,
+        value: valueProp
+    });
+    const currentScrollHeight = React.useRef();
+    const elementRef = useExternRef(getRef);
+    const { sizeY ='none'  } = useAdaptivity();
+    // autosize input
+    React.useEffect(()=>{
+        const el = elementRef.current;
+        if (grow && el?.offsetParent) {
+            el.style.height = '';
+            el.style.height = `${el.scrollHeight}px`;
+            if (el.scrollHeight !== currentScrollHeight.current && onResize) {
+                onResize(el);
+                currentScrollHeight.current = el.scrollHeight;
+            }
+        }
+    }, [
+        grow,
+        value,
+        sizeY,
+        elementRef,
+        onResize
+    ]);
+    return /*#__PURE__*/ React.createElement(FormField, {
+        className: classNames(styles['Textarea'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
+        style: style,
+        getRootRef: getRootRef,
+        disabled: restProps.disabled,
+        status: status
+    }, /*#__PURE__*/ React.createElement("textarea", {
+        ...restProps,
+        style: {
+            maxHeight
+        },
+        rows: rows,
+        className: styles['Textarea__el'],
+        value: value,
+        onChange: onChange,
+        ref: elementRef
+    }));
 };
+
 //# sourceMappingURL=Textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","FormField","sizeYClassNames","none","COMPACT","Textarea","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChangeProp","onChange","valueProp","value","restProps","currentScrollHeight","useRef","elementRef","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","REGULAR","disabled"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Textarea--sizeY-none'],\n  [SizeType.COMPACT]: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    Pick<React.CSSProperties, 'maxHeight'>,\n    Pick<FormFieldProps, 'status'> {\n  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  defaultValue = '',\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: TextareaProps) => {\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  // autosize input\n  React.useEffect(() => {\n    const el = elementRef.current;\n\n    if (grow && el?.offsetParent) {\n      el.style.height = '';\n      el.style.height = `${el.scrollHeight}px`;\n\n      if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n        onResize(el);\n        currentScrollHeight.current = el.scrollHeight;\n      }\n    }\n  }, [grow, value, sizeY, elementRef, onResize]);\n\n  return (\n    <FormField\n      className={classNames(\n        styles['Textarea'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <textarea\n        {...restProps}\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        value={value}\n        onChange={onChange}\n        ref={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,SAAS,QAAwB,wBAAwB;AAAC;AAGnE,IAAMC,eAAe;EACnBC,IAAI;AAAgC,GACnCH,QAAQ,CAACI,OAAO,gCAClB;AAaD;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAcA;EAAA,6BAbnBC,YAAY;IAAZA,YAAY,kCAAG,EAAE;IAAA,iBACjBC,IAAI;IAAJA,IAAI,0BAAG,IAAI;IACXC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACRC,SAAS,QAATA,SAAS;IACTC,MAAM,QAANA,MAAM;IACIC,YAAY,QAAtBC,QAAQ;IACDC,SAAS,QAAhBC,KAAK;IACFC,SAAS;EAEZ,yBAA0BtB,iBAAiB,CAAC;MAC1CQ,YAAY,EAAZA,YAAY;MACZW,QAAQ,EAAED,YAAY;MACtBG,KAAK,EAAED;IACT,CAAC,CAAC;IAAA;IAJKC,KAAK;IAAEF,QAAQ;EAKtB,IAAMI,mBAAmB,GAAG1B,KAAK,CAAC2B,MAAM,EAAU;EAClD,IAAMC,UAAU,GAAGxB,YAAY,CAACa,MAAM,CAAC;EACvC,qBAA2Bf,aAAa,EAAE;IAAA,sCAAlC2B,KAAK;IAALA,KAAK,qCAAG,MAAM;;EAEtB;EACA7B,KAAK,CAAC8B,SAAS,CAAC,YAAM;IACpB,IAAMC,EAAE,GAAGH,UAAU,CAACI,OAAO;IAE7B,IAAIpB,IAAI,IAAImB,EAAE,aAAFA,EAAE,eAAFA,EAAE,CAAEE,YAAY,EAAE;MAC5BF,EAAE,CAAClB,KAAK,CAACqB,MAAM,GAAG,EAAE;MACpBH,EAAE,CAAClB,KAAK,CAACqB,MAAM,aAAMH,EAAE,CAACI,YAAY,OAAI;MAExC,IAAIJ,EAAE,CAACI,YAAY,KAAKT,mBAAmB,CAACM,OAAO,IAAIlB,QAAQ,EAAE;QAC/DA,QAAQ,CAACiB,EAAE,CAAC;QACZL,mBAAmB,CAACM,OAAO,GAAGD,EAAE,CAACI,YAAY;MAC/C;IACF;EACF,CAAC,EAAE,CAACvB,IAAI,EAAEY,KAAK,EAAEK,KAAK,EAAED,UAAU,EAAEd,QAAQ,CAAC,CAAC;EAE9C,oBACE,oBAAC,SAAS;IACR,SAAS,EAAEb,UAAU,iBAEnB4B,KAAK,KAAKxB,QAAQ,CAAC+B,OAAO,IAAI7B,eAAe,CAACsB,KAAK,CAAC,EACpDd,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,UAAU,EAAEG,UAAW;IACvB,QAAQ,EAAES,SAAS,CAACY,QAAS;IAC7B,MAAM,EAAEjB;EAAO,gBAEf,6CACMK,SAAS;IACb,KAAK,EAAE;MAAEN,SAAS,EAATA;IAAU,CAAE;IACrB,IAAI,EAAED,IAAK;IACX,SAAS,oBAAyB;IAClC,KAAK,EAAEM,KAAM;IACb,QAAQ,EAAEF,QAAS;IACnB,GAAG,EAAEM;EAAW,GAChB,CACQ;AAEhB,CAAC"}
+{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Textarea--sizeY-none'],\n  [SizeType.COMPACT]: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    Pick<React.CSSProperties, 'maxHeight'>,\n    Pick<FormFieldProps, 'status'> {\n  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  defaultValue = '',\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: TextareaProps) => {\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  // autosize input\n  React.useEffect(() => {\n    const el = elementRef.current;\n\n    if (grow && el?.offsetParent) {\n      el.style.height = '';\n      el.style.height = `${el.scrollHeight}px`;\n\n      if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n        onResize(el);\n        currentScrollHeight.current = el.scrollHeight;\n      }\n    }\n  }, [grow, value, sizeY, elementRef, onResize]);\n\n  return (\n    <FormField\n      className={classNames(\n        styles['Textarea'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <textarea\n        {...restProps}\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        value={value}\n        onChange={onChange}\n        ref={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","FormField","styles","sizeYClassNames","none","COMPACT","Textarea","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","onChangeProp","value","valueProp","restProps","currentScrollHeight","useRef","elementRef","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","REGULAR","disabled","textarea","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAaA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,cAAe,GAAE,EACjBC,MAAO,IAAI,CAAA,EACXC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACTC,WAAU,EACVC,OAAM,EACNC,MAAO,EAAC,EACRC,UAAS,EACTC,OAAM,EACNC,UAAUC,aAAY,EACtBC,OAAOC,UAAS,EAChB,GAAGC,WACW,GAAK;IACnB,MAAM,CAACF,OAAOF,SAAS,GAAGnB,kBAAkB;QAC1CS;QACAU,UAAUC;QACVC,OAAOC;IACT;IACA,MAAME,sBAAsB3B,MAAM4B,MAAM;IACxC,MAAMC,aAAazB,aAAac;IAChC,MAAM,EAAEY,OAAQ,OAAM,EAAE,GAAG5B;IAE3B,iBAAiB;IACjBF,MAAM+B,SAAS,CAAC,IAAM;QACpB,MAAMC,KAAKH,WAAWI,OAAO;QAE7B,IAAIpB,QAAQmB,IAAIE,cAAc;YAC5BF,GAAGlB,KAAK,CAACqB,MAAM,GAAG;YAClBH,GAAGlB,KAAK,CAACqB,MAAM,GAAG,CAAC,EAAEH,GAAGI,YAAY,CAAC,EAAE,CAAC;YAExC,IAAIJ,GAAGI,YAAY,KAAKT,oBAAoBM,OAAO,IAAIlB,UAAU;gBAC/DA,SAASiB;gBACTL,oBAAoBM,OAAO,GAAGD,GAAGI,YAAY;YAC/C,CAAC;QACH,CAAC;IACH,GAAG;QAACvB;QAAMW;QAAOM;QAAOD;QAAYd;KAAS;IAE7C,qBACE,oBAACT;QACCU,WAAWf,WACTM,MAAM,CAAC,WAAW,EAClBuB,UAAUzB,SAASgC,OAAO,IAAI7B,eAAe,CAACsB,MAAM,EACpDd;QAEFF,OAAOA;QACPG,YAAYA;QACZqB,UAAUZ,UAAUY,QAAQ;QAC5BjB,QAAQA;qBAER,oBAACkB;QACE,GAAGb,SAAS;QACbZ,OAAO;YAAEM;QAAU;QACnBD,MAAMA;QACNH,WAAWT,MAAM,CAAC,eAAe;QACjCiB,OAAOA;QACPF,UAAUA;QACVkB,KAAKX;;AAIb,EAAE"}