@vkontakte/vkui 5.5.2 → 5.5.4

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

@@ -5,4 +5,4 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */
-export declare const Spinner: React.MemoExoticComponent<({ size, "aria-label": ariaLabel, className, ...restProps }: SpinnerProps) => React.JSX.Element>;
+export declare const Spinner: React.MemoExoticComponent<({ size, children, "aria-label": ariaLabel, className, ...restProps }: SpinnerProps) => React.JSX.Element>;

package/dist/cssm/components/Spinner/Spinner.js

@@ -1,24 +1,33 @@
 import * as React from 'react';
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { warnOnce } from '../../lib/warnOnce';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Spinner.module.css';
+const warn = warnOnce('Spinner');
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
- */ export const Spinner = /*#__PURE__*/ React.memo(({ size ='regular' , 'aria-label': ariaLabel = 'Загружается...' , className , ...restProps })=>{
+ */ export const Spinner = /*#__PURE__*/ React.memo(({ size ='regular' , children ='Загружается...' , // TODO [>=6]: Удалить автоматическое приведение aria-label
+'aria-label': ariaLabel = 'Загружается...' , className , ...restProps })=>{
     const SpinnerIcon = {
         small: Icon16Spinner,
         regular: Icon24Spinner,
         medium: Icon32Spinner,
         large: Icon44Spinner
     }[size];
+    // TODO [>=6]: Удалить варнинг
+    if (process.env.NODE_ENV === 'development') {
+        if (ariaLabel && !children) {
+            warn('a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.');
+        }
+    }
     return /*#__PURE__*/ React.createElement("span", {
         role: "status",
-        "aria-label": ariaLabel,
         ...restProps,
         className: classNames(styles['Spinner'], className)
     }, /*#__PURE__*/ React.createElement(SpinnerIcon, {
         className: styles['Spinner__self']
-    }));
+    }), /*#__PURE__*/ React.createElement(VisuallyHidden, null, children ?? ariaLabel));
 });
 Spinner.displayName = 'Spinner';
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNames(styles['Spinner'], className)}\n      >\n        <SpinnerIcon className={styles['Spinner__self']} />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","styles","Spinner","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","span","role","aria-label","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,wBAAUP,MAAMQ,KAC3B,CAAC,EACCC,MAAO,UAAS,EAChB,cAAcC,YAAY,gBAAgB,CAAA,EAC1CC,UAAS,EACT,GAAGC,WACU;IACb,MAAMC,cAAc;QAClBC,OAAOb;QACPc,SAASb;QACTc,QAAQb;QACRc,OAAOb;IACT,CAAC,CAACK,KAAK;IAEP,qBACE,oBAACS;QACCC,MAAK;QACLC,cAAYV;QACX,GAAGE,SAAS;QACbD,WAAWN,WAAWC,MAAM,CAAC,UAAU,EAAEK;qBAEzC,oBAACE;QAAYF,WAAWL,MAAM,CAAC,gBAAgB;;AAGrD,GACA;AAEFC,QAAQc,cAAc"}
+{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\nconst warn = warnOnce('Spinner');\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    // TODO [>=6]: Удалить автоматическое приведение aria-label\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    // TODO [>=6]: Удалить варнинг\n    if (process.env.NODE_ENV === 'development') {\n      if (ariaLabel && !children) {\n        warn(\n          'a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.',\n        );\n      }\n    }\n\n    return (\n      <span role=\"status\" {...restProps} className={classNames(styles['Spinner'], className)}>\n        <SpinnerIcon className={styles['Spinner__self']} />\n        <VisuallyHidden>{children ?? ariaLabel}</VisuallyHidden>\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","warnOnce","VisuallyHidden","styles","warn","Spinner","memo","size","children","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","process","env","NODE_ENV","span","role","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,uBAAuB;AAM1C,MAAMC,OAAOH,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMI,wBAAUV,MAAMW,KAC3B,CAAC,EACCC,MAAO,UAAS,EAChBC,UAAW,iBAAgB,EAC3B,2DAA2D;AAC3D,cAAcC,YAAY,gBAAgB,CAAA,EAC1CC,UAAS,EACT,GAAGC,WACU;IACb,MAAMC,cAAc;QAClBC,OAAOjB;QACPkB,SAASjB;QACTkB,QAAQjB;QACRkB,OAAOjB;IACT,CAAC,CAACQ,KAAK;IAEP,8BAA8B;IAC9B,IAAIU,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAIV,aAAa,CAACD,UAAU;YAC1BJ,KACE;QAEJ;IACF;IAEA,qBACE,oBAACgB;QAAKC,MAAK;QAAU,GAAGV,SAAS;QAAED,WAAWV,WAAWG,MAAM,CAAC,UAAU,EAAEO;qBAC1E,oBAACE;QAAYF,WAAWP,MAAM,CAAC,gBAAgB;sBAC/C,oBAACD,sBAAgBM,YAAYC;AAGnC,GACA;AAEFJ,QAAQiB,cAAc"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AnchorHTMLAttributesOnly, HasChildren, HasComponent, HasRootRef } from '../../types';
+import { AnchorHTMLAttributesOnly, HasChildren, HasComponent, HasRootRef, LiteralUnion } from '../../types';
 import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
 import { TouchProps } from '../Touch/Touch';
 type StateMode = 'opacity' | 'background';
@@ -25,15 +25,15 @@ export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElem
     /**
      * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
      */
-    activeMode?: StateMode | string;
+    activeMode?: LiteralUnion<StateMode, string>;
     /**
      * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
      */
-    hoverMode?: StateMode | string;
+    hoverMode?: LiteralUnion<StateMode, string>;
     /**
      * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
      */
-    focusVisibleMode?: FocusVisibleMode | string;
+    focusVisibleMode?: LiteralUnion<FocusVisibleMode, string>;
     onEnter?(outputEvent: MouseEvent): void;
     onLeave?(outputEvent: MouseEvent): void;
 }

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

@@ -1 +1 @@
-{"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, HasChildren, 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    HasChildren,\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   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: 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  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  hovered: hoveredProp,\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 || hoveredProp) && !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 visible={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","hovered","hoveredProp","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","clicks","setClicks","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","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","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,OAAOC,UAAU,OAAO;AACxB,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,gCAAgC,QAAQ,0BAA0B;AAC3E,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,MAAM,EAAEC,MAAM,QAAQ,kBAAkB;AACjD,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAA0B,+BAA+B;AAC9E,SAASC,KAAK,QAAgC,iBAAiB;AAC/D,OAAOC,sBAAsB,wBAAwB;AACrD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpCG,SAASH,MAAM,CAAC,0BAA0B;AAC5C;AAIA,MAAMI,YAAY;AAgElB,OAAO,MAAMC,eAAe,GAAG;AAC/B,OAAO,MAAMC,sBAAsB,IAAI;AAEvC,MAAMC,YAAY3B;AAClB,MAAM4B,WAAW;IAAEN,MAAM;IAAGO,SAAS;IAAGC,QAAQ;IAAGC,SAAS;AAAE;AAG9D,MAAMC,gCAAkBnC,MAAMoC,cAAwC;IACpEC,eAAenC;AACjB;AAEA,SAASoC,kBAAkBC,SAA6B;IACtD,OAAQA;QACN,KAAK;QACL,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AAEA,SAASC,YAAYC,SAAkB,EAAEC,SAAiB;IACxD,MAAMC,KAAK3C,MAAM4C,QAAQ,IAAMC,KAAKC,MAAMD,KAAKE,WAAW,KAAKC,SAAS,KAAK,EAAE;IAE/E,MAAM,CAACC,UAAUC,YAAY,GAAGlD,MAAMmD,SACpCpB,SAASN;IAEX,MAAM2B,QAAQ,IAAMF,YAAYnB,SAASN;IACzC,MAAM4B,QAAQ,IAAMZ,aAAaS,YAAYnB,SAASE;IACtD,MAAMqB,aAAa;QACjBb,aAAaS,YAAYnB,SAASC;IACpC;IAEA,MAAMuB,gBAAgB5C,WAAW0C,OAAOzB;IACxC,MAAM4B,cAAc7C,WAAWyC,OAAOV;IAEtCvB,0BAA0B;QACxB,IAAI8B,aAAalB,SAASC,SAAS;YACjCuB,cAAcE;YACd,OAAOF,cAAcG;QACvB;QACA,IAAIT,aAAalB,SAASG,SAAS;YACjC,OAAOsB,YAAYE;QACrB;QACA,IAAIT,aAAalB,SAASE,QAAQ;YAChCH,UAAU6B,KAAK,UAAUhB;QAC3B;QACA,OAAOzC;IACT,GAAG;QAAC+C;KAAS;IAEb9B,0BAA0B;QACxB,IAAI8B,aAAalB,SAASN,MAAM;YAC9B,OAAOvB;QACT;QACA,MAAM0D,iBAAiB,CAACC;YACtBA,aAAalB,MAAMS;QACrB;QACAtB,UAAUgC,GAAG,UAAUF;QACvB,OAAO,IAAM9B,UAAUiC,IAAI,UAAUH;IACvC,GAAG;QAACX,aAAalB,SAASN;KAAK;IAE/BN,0BAA0B;QACxB,CAACsB,aAAaW;IAChB,GAAG;QAACX;KAAU;IAEd,MAAMuB,OAAO,CAACC;QACZ,IAAIA,OAAO;YACTf,YAAYnB,SAASG;YACrB,OAAOsB,YAAYC,IAAIQ;QACzB;QACAb;IACF;IAEA,OAAO;QAACH;QAAU;YAAEK;YAAYD;YAAOW;QAAK;KAAE;AAChD;AAEA;;CAEC,GACD,OAAO,MAAME,WAAW,CAAC,EACvBC,SAAQ,EACRC,UAAS,EACTC,QAAO,EACPC,WAAWC,WAAU,EACrBC,mBAAoB3C,oBAAmB,EACvC4C,iBAAkB,MAAK,EACvBC,WAAU,EACVC,UAAUC,YAAY,IAAI,CAAA,EAC1BC,WAAY,aAAY,EACxBpC,WAAWqC,aAAa,IAAI,CAAA,EAC5BC,YAAa,aAAY,EACzBC,kBAAmB,SAAQ,EAC3BC,QAAO,EACPC,QAAO,EACPC,UAAS,EACTC,SAASC,YAAW,EACpB,GAAGC,OACW;IACdlB,YAAYA,aAAekB,CAAAA,MAAMC,OAAO,MAAM,KAAI;IAElD,MAAM,EAAElD,cAAa,EAAE,GAAGrC,MAAMwF,WAAWrD;IAC3C,MAAMsD,kBAAkBzF,MAAMwF,WAAWlE;IACzC,MAAMoE,WAAWhF;IACjB,MAAM,EAAEiF,aAAY,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGpF;IAC1C,MAAM,EAAEqF,OAAQ,OAAM,EAAE,GAAG1F;IAC3B,MAAM2F,oBAAoBzF;IAC1B,MAAM0F,kBAAkB3F;IAExB,MAAM,CAAC4F,QAAQC,UAAU,GAAGlG,MAAMmD,SAAiB,EAAE;IACrD,MAAM,CAACgD,YAAYC,cAAc,GAAGpG,MAAMmD,SAAS;IACnD,MAAM,EACJkD,OAAOC,SAAQ,EACfC,SAASC,eAAc,EACvBC,UAAUC,gBAAe,EAC1B,GAAGnG,gBAAgB;IAEpB,MAAM6E,UAAU,AAACkB,CAAAA,YAAYjB,WAAU,KAAM,CAACC,MAAMqB;IACpD,MAAMlE,YAAYqC,cAAc,CAACqB,cAAc,CAACb,MAAMqB;IACtD,MAAMhC,WAAWqB,mBAAmBpB,aAAa,CAACuB;IAClD,MAAMS,kBACJxC,cAAc,OAAOA,cAAc,YAAYA,cAAc,WAAW,CAACkB,MAAMuB;IACjF,MAAMC,oBAAoBxE,kBAAkBuC;IAC5C,MAAMkC,qBAAqBzE,kBAAkByC;IAC7C,MAAMiC,2BAA2B;QAAC;QAAU;KAAU,CAACC,SAASjC;IAEhE,MAAM,CAAC/B,UAAU,EAAEI,MAAK,EAAEW,KAAI,EAAEV,WAAU,EAAE,CAAC,GAAGd,YAAYC,WAAW+B;IACvE,MAAMvC,SAASgB,aAAalB,SAASE,UAAUgB,aAAalB,SAASG;IAErE,MAAMgF,eAAe1G,aAAakE;IAElC,oBAAoB;IACpB,MAAMyC,eAAenH,MAAMoH,OAAO;QAAE/E,eAAe+D;IAAc,GAAGiB;IACpElG,0BAA0B;QACxB,IAAI,CAACiE,SAAS;YACZ,OAAOlF;QACT;QACAmC,cAAc;QACd,OAAO,IAAMA,cAAc;IAC7B,GAAG;QAAC+C;KAAQ;IAEZ;;;;;;GAMC,GACD,SAASd,UAAUgD,CAAmC;QACpD,IAAIV,mBAAmBhG,iCAAiC0G,IAAI;YAC1DA,EAAEC;YACFL,aAAaG,SAASG;QACxB;IACF;IAEA,MAAMC,YACJ/B,aAAa1E,SAAS0G,WAAW,CAAC3B,qBAAqBtD,aAAasC,eAAe;IAErF,MAAM4C,cAAchH,WAAW,IAAMuF,UAAU,EAAE,GAAGvE;IAEpD,SAASiG,SAASC,CAAS,EAAEC,CAAS;QACpC,MAAMC,UAAUC,KAAKC;QACrB,MAAMC,iBAAiBjC,OAAOkC,OAAO,CAACX,QAAUA,MAAM7E,KAAKhB,YAAYoG;QAEvE7B,UAAU;eAAIgC;YAAgB;gBAAEL;gBAAGC;gBAAGnF,IAAIoF;YAAQ;SAAE;QACpDJ,YAAYlE;IACd;IAEA,SAAS2E,QAAQ,EAAEC,cAAa,EAAc;QAC5C,IAAI5F,WAAW;YACb,IAAI4F,cAAcC,WAAWD,cAAcC,QAAQC,SAAS,GAAG;gBAC7D,+EAA+E;gBAC/E,OAAOvE;YACT;YAEA,IAAIyD,WAAW;gBACb,MAAM,EAAEe,IAAG,EAAEC,KAAI,EAAE,GAAG1H,cAAcmG,aAAaG;gBACjD,MAAMQ,IAAI5G,OAAOoH,iBAAkBI,CAAAA,QAAQ,CAAA;gBAC3C,MAAMX,IAAI5G,OAAOmH,iBAAkBG,CAAAA,OAAO,CAAA;gBAC1CZ,SAASC,GAAGC;YACd;YAEAxE;QACF;IACF;IAEA,SAASoF,OAAO,EAAEC,QAAO,EAAc;QACrC,IAAIA,SAAS;YACX3E;QACF;IACF;IAEA,SAAS4E,MAAM,EAAEC,SAAQ,EAAc;QACrC,IAAI5F,aAAalB,SAASN,MAAM;YAC9B;QACF;QACA,IAAIwB,aAAalB,SAASC,SAAS;YACjC,iCAAiC;YACjCqB;QACF;QAEA,0CAA0C;QAC1C,MAAMyF,iBAAiBD,WAAWjH;QAClCoC,KAAK8E,kBAAkB,MAAM,IAAItE,oBAAoBsE;IACvD;IAEA,MAAMC,UAAU9I,WACdkF,WACA5D,MAAM,CAAC,WAAW,EAClB,wBACAmE,aAAa1E,SAASgI,OAAOzH,MAAM,CAAC,gBAAgB,EACpDuE,UAAUjF,SAASoI,WAAWzH,eAAe,CAACsE,MAAM,EACpDnB,YAAYpD,MAAM,CAAC,qBAAqB,EACxCkB,aAAalB,MAAM,CAAC,sBAAsB,EAC1CoD,YAAYS,WAAW,CAAC0B,qBAAqBjC,WAC7CpC,aAAaR,UAAU,CAAC8E,sBAAsBhC,YAC9CY,gBAAgB,CAACqB,4BAA4BhC,kBAC7CL,YACES,WACA0B,qBACA,CAAA;QACEoC,YAAY3H,MAAM,CAAC,6BAA6B;QAChD4H,SAAS5H,MAAM,CAAC,0BAA0B;IAC5C,CAAA,CAAC,CAACsD,UAAU,EACdpC,aACER,UACA8E,sBACA,CAAA;QACEmC,YAAY3H,MAAM,CAAC,8BAA8B;QACjD4H,SAAS5H,MAAM,CAAC,2BAA2B;IAC7C,CAAA,CAAC,CAACwD,WAAW,EACfY,gBAAgBpE,MAAM,CAAC,0BAA0B;IAGnD,MAAM6H,WAA+B;QACnChB,SAAStH,aAAasH,SAAS9C,MAAM8C;QACrCM,QAAQ5H,aAAa4H,QAAQpD,MAAMoD;QACnCE,OAAO9H,aAAa8H,OAAOtD,MAAMsD;QACjCvE;QACAC,WAAWxD,aAAawD,WAAWC;IACrC;IACA,MAAM8E,OAAO/D,MAAMC,OAAO,SAAS;IAEnC,qBACE,oBAAClE;QACC4D,SAASnE,aAAa0F,gBAAgBvB;QACtCC,SAASpE,aAAa4F,iBAAiBxB;QACvCoE,MAAMlF,cAAc,WAAW,WAAWmF;QAC1CC,UAAU5C,mBAAmB,CAACtB,MAAMqB,WAAW,IAAI4C;QACnDF,MAAMzC,kBAAkByC,OAAOE;QAC/BE,iBAAe7C,kBAAkBtB,MAAMqB,WAAW4C;QAClD9E,iBAAiBA,mBAAmB,CAACgB,mBAAmB,CAACH,MAAMqB;QAC9D,GAAGrB,KAAK;QACToE,gBAAgB;QAChBC,iBAAAA;QACAxE,WAAW4D;QACX3E,WAAWA;QACXM,YAAYwC;QACZtB,QAAQ9E,aAAa8E,QAAQN,MAAMM;QACnCC,SAAS/E,aAAa+E,SAASP,MAAMO;QACpC,GAAIP,MAAMqB,WAAW,CAAC,IAAIyC,QAAQ;qBAEnC,oBAACjH,gBAAgByH;QAASvD,OAAOc;OAAehD,WAC/CsD,2BACC,oBAACoC;QAAKC,eAAAA;QAAY3E,WAAW5D,OAAOwI;OACjC9D,OAAO+D,IAAI,CAACC,qBACX,oBAACJ;YACCK,KAAKD,KAAKtH;YACVwC,WAAW5D,OAAO4I;YAClBC,OAAO;gBAAE5B,KAAKyB,KAAKnC;gBAAGW,MAAMwB,KAAKpC;YAAE;cAK1C,AAAC,CAAA,AAAClD,YAAYE,cAAc,gBAAkBpC,aAAasC,eAAe,YAAY,mBACrF,oBAAC8E;QAAKC,eAAAA;QAAY3E,WAAW5D,OAAO8I;QAErC,CAAC/E,MAAMqB,YAAYK,0CAClB,oBAAC5F;QAAakJ,SAAS3E;QAAc4E,MAAMvF;;AAInD,EAAE"}
+{"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 {\n  AnchorHTMLAttributesOnly,\n  HasChildren,\n  HasComponent,\n  HasRootRef,\n  LiteralUnion,\n} 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    HasChildren,\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   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: LiteralUnion<FocusVisibleMode, string>;\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: LiteralUnion<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  hovered: hoveredProp,\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 || hoveredProp) && !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 visible={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","hovered","hoveredProp","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","clicks","setClicks","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","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","visible","mode"],"mappings":"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"}

package/dist/cssm/hooks/useAutoDetectAppearance.js

@@ -4,23 +4,23 @@ import { noop } from '@vkontakte/vkjs';
 import { resolveAppearance } from '../helpers/appearance';
 import { useDOM } from '../lib/dom';
 import { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';
-let initialAppearance = null;
-vkBridge.send('VKWebAppGetConfig').then((data)=>{
-    initialAppearance = resolveAppearance(data);
-}).catch(console.error);
 function autoDetectAppearanceByBridge(setAppearance, onDetectAppearanceByBridge) {
+    function updateAppearance(data) {
+        const initialAppearance = resolveAppearance(data);
+        if (initialAppearance) {
+            onDetectAppearanceByBridge();
+            setAppearance(initialAppearance);
+        }
+    }
     function bridgeListener(e) {
         const { type , data  } = e.detail;
         if (type !== 'VKWebAppUpdateConfig') {
             return;
         }
-        initialAppearance = resolveAppearance(data);
-        if (initialAppearance) {
-            onDetectAppearanceByBridge();
-            setAppearance(initialAppearance);
-        }
+        updateAppearance(data);
     }
     vkBridge.subscribe(bridgeListener);
+    vkBridge.send('VKWebAppGetConfig').then(updateAppearance).catch(console.error);
     return ()=>vkBridge.unsubscribe(bridgeListener);
 }
 function autoDetectAppearance(window, setAppearance) {
@@ -46,10 +46,6 @@ export const useAutoDetectAppearance = (appearanceProp, onDetectAppearanceByBrid
         if (appearanceProp) {
             return appearanceProp;
         }
-        if (initialAppearance) {
-            onceDetectAppearanceByBridge.current();
-            return initialAppearance;
-        }
         const mediaQuery = window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
         // eslint-disable-next-line no-restricted-properties
         return mediaQuery?.matches ? 'dark' : 'light';

package/dist/cssm/hooks/useAutoDetectAppearance.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useAutoDetectAppearance.tsx"],"sourcesContent":["import * as React from 'react';\nimport vkBridge, {\n  AnyReceiveMethodName,\n  AppearanceType,\n  VKBridgeEvent,\n} from '@vkontakte/vk-bridge';\nimport { noop } from '@vkontakte/vkjs';\nimport { resolveAppearance, VKBridgeConfigData } from '../helpers/appearance';\nimport { useDOM } from '../lib/dom';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';\n\nlet initialAppearance: AppearanceType | null = null;\n\nvkBridge\n  .send('VKWebAppGetConfig')\n  .then((data) => {\n    initialAppearance = resolveAppearance(data);\n  })\n  .catch(console.error);\n\nfunction autoDetectAppearanceByBridge(\n  setAppearance: (value: AppearanceType) => void,\n  onDetectAppearanceByBridge: () => void,\n) {\n  function bridgeListener(e: VKBridgeEvent<AnyReceiveMethodName>) {\n    const { type, data } = e.detail;\n\n    if (type !== 'VKWebAppUpdateConfig') {\n      return;\n    }\n\n    initialAppearance = resolveAppearance(data as VKBridgeConfigData);\n\n    if (initialAppearance) {\n      onDetectAppearanceByBridge();\n      setAppearance(initialAppearance);\n    }\n  }\n\n  vkBridge.subscribe(bridgeListener);\n\n  return () => vkBridge.unsubscribe(bridgeListener);\n}\n\nfunction autoDetectAppearance(\n  window: Window | undefined,\n  setAppearance: (value: AppearanceType) => void,\n): () => void {\n  const mediaQuery =\n    window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');\n\n  if (mediaQuery === undefined) {\n    return noop;\n  }\n\n  const check = (event: MediaQueryList | MediaQueryListEvent) => {\n    // eslint-disable-next-line no-restricted-properties\n    setAppearance(event.matches ? 'dark' : 'light');\n  };\n\n  check(mediaQuery);\n  matchMediaListAddListener(mediaQuery, check);\n\n  return () => matchMediaListRemoveListener(mediaQuery, check);\n}\n\nexport const useAutoDetectAppearance = (\n  appearanceProp?: AppearanceType,\n  onDetectAppearanceByBridge?: () => void,\n): AppearanceType => {\n  const { window } = useDOM();\n  const onceDetectAppearanceByBridge = React.useRef(() => {\n    onDetectAppearanceByBridge && onDetectAppearanceByBridge();\n    onceDetectAppearanceByBridge.current = noop;\n  });\n\n  const [appearance, setAppearance] = React.useState<AppearanceType>(() => {\n    if (appearanceProp) {\n      return appearanceProp;\n    }\n\n    if (initialAppearance) {\n      onceDetectAppearanceByBridge.current();\n      return initialAppearance;\n    }\n\n    const mediaQuery =\n      window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');\n\n    // eslint-disable-next-line no-restricted-properties\n    return mediaQuery?.matches ? 'dark' : 'light';\n  });\n\n  React.useEffect(() => {\n    if (appearanceProp) {\n      setAppearance(appearanceProp);\n      return noop;\n    }\n\n    if (vkBridge.isEmbedded()) {\n      return autoDetectAppearanceByBridge(setAppearance, onceDetectAppearanceByBridge.current);\n    }\n\n    return autoDetectAppearance(window, setAppearance);\n  }, [window, appearanceProp]);\n\n  return appearance;\n};\n"],"names":["React","vkBridge","noop","resolveAppearance","useDOM","matchMediaListAddListener","matchMediaListRemoveListener","initialAppearance","send","then","data","catch","console","error","autoDetectAppearanceByBridge","setAppearance","onDetectAppearanceByBridge","bridgeListener","e","type","detail","subscribe","unsubscribe","autoDetectAppearance","window","mediaQuery","matchMedia","undefined","check","event","matches","useAutoDetectAppearance","appearanceProp","onceDetectAppearanceByBridge","useRef","current","appearance","useState","useEffect","isEmbedded"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,OAAOC,cAIA,uBAAuB;AAC9B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,iBAAiB,QAA4B,wBAAwB;AAC9E,SAASC,MAAM,QAAQ,aAAa;AACpC,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAE5F,IAAIC,oBAA2C;AAE/CN,SACGO,KAAK,qBACLC,KAAK,CAACC;IACLH,oBAAoBJ,kBAAkBO;AACxC,GACCC,MAAMC,QAAQC;AAEjB,SAASC,6BACPC,aAA8C,EAC9CC,0BAAsC;IAEtC,SAASC,eAAeC,CAAsC;QAC5D,MAAM,EAAEC,KAAI,EAAET,KAAI,EAAE,GAAGQ,EAAEE;QAEzB,IAAID,SAAS,wBAAwB;YACnC;QACF;QAEAZ,oBAAoBJ,kBAAkBO;QAEtC,IAAIH,mBAAmB;YACrBS;YACAD,cAAcR;QAChB;IACF;IAEAN,SAASoB,UAAUJ;IAEnB,OAAO,IAAMhB,SAASqB,YAAYL;AACpC;AAEA,SAASM,qBACPC,MAA0B,EAC1BT,aAA8C;IAE9C,MAAMU,aACJD,UAAUA,OAAOE,cAAcF,OAAOE,WAAW;IAEnD,IAAID,eAAeE,WAAW;QAC5B,OAAOzB;IACT;IAEA,MAAM0B,QAAQ,CAACC;QACb,oDAAoD;QACpDd,cAAcc,MAAMC,UAAU,SAAS;IACzC;IAEAF,MAAMH;IACNpB,0BAA0BoB,YAAYG;IAEtC,OAAO,IAAMtB,6BAA6BmB,YAAYG;AACxD;AAEA,OAAO,MAAMG,0BAA0B,CACrCC,gBACAhB;IAEA,MAAM,EAAEQ,OAAM,EAAE,GAAGpB;IACnB,MAAM6B,+BAA+BjC,MAAMkC,OAAO;QAChDlB,8BAA8BA;QAC9BiB,6BAA6BE,UAAUjC;IACzC;IAEA,MAAM,CAACkC,YAAYrB,cAAc,GAAGf,MAAMqC,SAAyB;QACjE,IAAIL,gBAAgB;YAClB,OAAOA;QACT;QAEA,IAAIzB,mBAAmB;YACrB0B,6BAA6BE;YAC7B,OAAO5B;QACT;QAEA,MAAMkB,aACJD,UAAUA,OAAOE,cAAcF,OAAOE,WAAW;QAEnD,oDAAoD;QACpD,OAAOD,YAAYK,UAAU,SAAS;IACxC;IAEA9B,MAAMsC,UAAU;QACd,IAAIN,gBAAgB;YAClBjB,cAAciB;YACd,OAAO9B;QACT;QAEA,IAAID,SAASsC,cAAc;YACzB,OAAOzB,6BAA6BC,eAAekB,6BAA6BE;QAClF;QAEA,OAAOZ,qBAAqBC,QAAQT;IACtC,GAAG;QAACS;QAAQQ;KAAe;IAE3B,OAAOI;AACT,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useAutoDetectAppearance.tsx"],"sourcesContent":["import * as React from 'react';\nimport vkBridge, {\n  AnyReceiveMethodName,\n  AppearanceType,\n  VKBridgeEvent,\n} from '@vkontakte/vk-bridge';\nimport { noop } from '@vkontakte/vkjs';\nimport { resolveAppearance, VKBridgeConfigData } from '../helpers/appearance';\nimport { useDOM } from '../lib/dom';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';\n\nfunction autoDetectAppearanceByBridge(\n  setAppearance: (value: AppearanceType) => void,\n  onDetectAppearanceByBridge: () => void,\n) {\n  function updateAppearance(data: VKBridgeConfigData) {\n    const initialAppearance = resolveAppearance(data);\n\n    if (initialAppearance) {\n      onDetectAppearanceByBridge();\n      setAppearance(initialAppearance);\n    }\n  }\n\n  function bridgeListener(e: VKBridgeEvent<AnyReceiveMethodName>) {\n    const { type, data } = e.detail;\n\n    if (type !== 'VKWebAppUpdateConfig') {\n      return;\n    }\n\n    updateAppearance(data as VKBridgeConfigData);\n  }\n\n  vkBridge.subscribe(bridgeListener);\n  vkBridge.send('VKWebAppGetConfig').then(updateAppearance).catch(console.error);\n\n  return () => vkBridge.unsubscribe(bridgeListener);\n}\n\nfunction autoDetectAppearance(\n  window: Window | undefined,\n  setAppearance: (value: AppearanceType) => void,\n): () => void {\n  const mediaQuery =\n    window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');\n\n  if (mediaQuery === undefined) {\n    return noop;\n  }\n\n  const check = (event: MediaQueryList | MediaQueryListEvent) => {\n    // eslint-disable-next-line no-restricted-properties\n    setAppearance(event.matches ? 'dark' : 'light');\n  };\n\n  check(mediaQuery);\n  matchMediaListAddListener(mediaQuery, check);\n\n  return () => matchMediaListRemoveListener(mediaQuery, check);\n}\n\nexport const useAutoDetectAppearance = (\n  appearanceProp?: AppearanceType,\n  onDetectAppearanceByBridge?: () => void,\n): AppearanceType => {\n  const { window } = useDOM();\n  const onceDetectAppearanceByBridge = React.useRef(() => {\n    onDetectAppearanceByBridge && onDetectAppearanceByBridge();\n    onceDetectAppearanceByBridge.current = noop;\n  });\n\n  const [appearance, setAppearance] = React.useState<AppearanceType>(() => {\n    if (appearanceProp) {\n      return appearanceProp;\n    }\n\n    const mediaQuery =\n      window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');\n\n    // eslint-disable-next-line no-restricted-properties\n    return mediaQuery?.matches ? 'dark' : 'light';\n  });\n\n  React.useEffect(() => {\n    if (appearanceProp) {\n      setAppearance(appearanceProp);\n      return noop;\n    }\n\n    if (vkBridge.isEmbedded()) {\n      return autoDetectAppearanceByBridge(setAppearance, onceDetectAppearanceByBridge.current);\n    }\n\n    return autoDetectAppearance(window, setAppearance);\n  }, [window, appearanceProp]);\n\n  return appearance;\n};\n"],"names":["React","vkBridge","noop","resolveAppearance","useDOM","matchMediaListAddListener","matchMediaListRemoveListener","autoDetectAppearanceByBridge","setAppearance","onDetectAppearanceByBridge","updateAppearance","data","initialAppearance","bridgeListener","e","type","detail","subscribe","send","then","catch","console","error","unsubscribe","autoDetectAppearance","window","mediaQuery","matchMedia","undefined","check","event","matches","useAutoDetectAppearance","appearanceProp","onceDetectAppearanceByBridge","useRef","current","appearance","useState","useEffect","isEmbedded"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,OAAOC,cAIA,uBAAuB;AAC9B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,iBAAiB,QAA4B,wBAAwB;AAC9E,SAASC,MAAM,QAAQ,aAAa;AACpC,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAE5F,SAASC,6BACPC,aAA8C,EAC9CC,0BAAsC;IAEtC,SAASC,iBAAiBC,IAAwB;QAChD,MAAMC,oBAAoBT,kBAAkBQ;QAE5C,IAAIC,mBAAmB;YACrBH;YACAD,cAAcI;QAChB;IACF;IAEA,SAASC,eAAeC,CAAsC;QAC5D,MAAM,EAAEC,KAAI,EAAEJ,KAAI,EAAE,GAAGG,EAAEE;QAEzB,IAAID,SAAS,wBAAwB;YACnC;QACF;QAEAL,iBAAiBC;IACnB;IAEAV,SAASgB,UAAUJ;IACnBZ,SAASiB,KAAK,qBAAqBC,KAAKT,kBAAkBU,MAAMC,QAAQC;IAExE,OAAO,IAAMrB,SAASsB,YAAYV;AACpC;AAEA,SAASW,qBACPC,MAA0B,EAC1BjB,aAA8C;IAE9C,MAAMkB,aACJD,UAAUA,OAAOE,cAAcF,OAAOE,WAAW;IAEnD,IAAID,eAAeE,WAAW;QAC5B,OAAO1B;IACT;IAEA,MAAM2B,QAAQ,CAACC;QACb,oDAAoD;QACpDtB,cAAcsB,MAAMC,UAAU,SAAS;IACzC;IAEAF,MAAMH;IACNrB,0BAA0BqB,YAAYG;IAEtC,OAAO,IAAMvB,6BAA6BoB,YAAYG;AACxD;AAEA,OAAO,MAAMG,0BAA0B,CACrCC,gBACAxB;IAEA,MAAM,EAAEgB,OAAM,EAAE,GAAGrB;IACnB,MAAM8B,+BAA+BlC,MAAMmC,OAAO;QAChD1B,8BAA8BA;QAC9ByB,6BAA6BE,UAAUlC;IACzC;IAEA,MAAM,CAACmC,YAAY7B,cAAc,GAAGR,MAAMsC,SAAyB;QACjE,IAAIL,gBAAgB;YAClB,OAAOA;QACT;QAEA,MAAMP,aACJD,UAAUA,OAAOE,cAAcF,OAAOE,WAAW;QAEnD,oDAAoD;QACpD,OAAOD,YAAYK,UAAU,SAAS;IACxC;IAEA/B,MAAMuC,UAAU;QACd,IAAIN,gBAAgB;YAClBzB,cAAcyB;YACd,OAAO/B;QACT;QAEA,IAAID,SAASuC,cAAc;YACzB,OAAOjC,6BAA6BC,eAAe0B,6BAA6BE;QAClF;QAEA,OAAOZ,qBAAqBC,QAAQjB;IACtC,GAAG;QAACiB;QAAQQ;KAAe;IAE3B,OAAOI;AACT,EAAE"}

package/dist/cssm/lib/platform.d.ts

@@ -1,8 +1,9 @@
+import { LiteralUnion } from '../types';
 import { BrowserInfo } from './browser';
 export declare enum Platform {
     ANDROID = "android",
     IOS = "ios",
     VKCOM = "vkcom"
 }
-export type PlatformType = Platform.ANDROID | Platform.IOS | Platform.VKCOM | string;
+export type PlatformType = LiteralUnion<'android' | 'ios' | 'vkcom', string>;
 export declare function platform(browserInfo?: BrowserInfo): PlatformType;

package/dist/cssm/lib/platform.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/platform.ts"],"sourcesContent":["import { querystring } from '@vkontakte/vkjs';\nimport { BrowserInfo, computeBrowserInfo } from './browser';\nimport { canUseDOM } from './dom';\n\nexport enum Platform {\n  ANDROID = 'android',\n  IOS = 'ios',\n  VKCOM = 'vkcom',\n}\n\nconst PLATFORM_ALIAS = {\n  desktop_web: Platform.VKCOM,\n};\n\nfunction isPlatformAlias(platformAlias: string): platformAlias is keyof typeof PLATFORM_ALIAS {\n  return platformAlias in PLATFORM_ALIAS;\n}\n\n/**\n * Значение, которое передаётся в качестве query-параметра при открытии VK Mini Apps\n * @see {@link https://dev.vk.com/mini-apps/development/launch-params#vk_platform vk_platform}\n */\nfunction getPlatformByQueryString(queryString: string): Platform | undefined {\n  try {\n    const parsedQuery = querystring.parse(queryString);\n    const platformAliasByQuery = parsedQuery['vk_platform'];\n\n    return typeof platformAliasByQuery === 'string' && isPlatformAlias(platformAliasByQuery)\n      ? PLATFORM_ALIAS[platformAliasByQuery]\n      : undefined;\n  } catch (e) {\n    console.warn(e);\n\n    return undefined;\n  }\n}\n\nconst platformByQueryString = canUseDOM ? getPlatformByQueryString(location.search) : undefined;\n\nexport type PlatformType = Platform.ANDROID | Platform.IOS | Platform.VKCOM | string;\n\nexport function platform(browserInfo?: BrowserInfo): PlatformType {\n  if (platformByQueryString) {\n    return platformByQueryString;\n  }\n\n  if (!browserInfo) {\n    browserInfo = computeBrowserInfo();\n  }\n\n  return browserInfo.system === 'ios' ? Platform.IOS : Platform.ANDROID;\n}\n"],"names":["querystring","computeBrowserInfo","canUseDOM","Platform","ANDROID","IOS","VKCOM","PLATFORM_ALIAS","desktop_web","isPlatformAlias","platformAlias","getPlatformByQueryString","queryString","parsedQuery","parse","platformAliasByQuery","undefined","e","console","warn","platformByQueryString","location","search","platform","browserInfo","system"],"mappings":"AAAA,SAASA,WAAW,QAAQ,kBAAkB;AAC9C,SAAsBC,kBAAkB,QAAQ,YAAY;AAC5D,SAASC,SAAS,QAAQ,QAAQ;WAE3B;UAAKC,QAAQ;IAARA,SACVC,aAAU;IADAD,SAEVE,SAAM;IAFIF,SAGVG,WAAQ;GAHEH,aAAAA;AAMZ,MAAMI,iBAAiB;IACrBC,aAAaL,SAASG;AACxB;AAEA,SAASG,gBAAgBC,aAAqB;IAC5C,OAAOA,iBAAiBH;AAC1B;AAEA;;;CAGC,GACD,SAASI,yBAAyBC,WAAmB;IACnD,IAAI;QACF,MAAMC,cAAcb,YAAYc,MAAMF;QACtC,MAAMG,uBAAuBF,WAAW,CAAC,cAAc;QAEvD,OAAO,OAAOE,yBAAyB,YAAYN,gBAAgBM,wBAC/DR,cAAc,CAACQ,qBAAqB,GACpCC;IACN,EAAE,OAAOC,GAAG;QACVC,QAAQC,KAAKF;QAEb,OAAOD;IACT;AACF;AAEA,MAAMI,wBAAwBlB,YAAYS,yBAAyBU,SAASC,UAAUN;AAItF,OAAO,SAASO,SAASC,WAAyB;IAChD,IAAIJ,uBAAuB;QACzB,OAAOA;IACT;IAEA,IAAI,CAACI,aAAa;QAChBA,cAAcvB;IAChB;IAEA,OAAOuB,YAAYC,WAAW,QAAQtB,SAASE,MAAMF,SAASC;AAChE"}
+{"version":3,"sources":["../../../src/lib/platform.ts"],"sourcesContent":["import { querystring } from '@vkontakte/vkjs';\nimport { LiteralUnion } from '../types';\nimport { BrowserInfo, computeBrowserInfo } from './browser';\nimport { canUseDOM } from './dom';\n\nexport enum Platform {\n  ANDROID = 'android',\n  IOS = 'ios',\n  VKCOM = 'vkcom',\n}\n\nconst PLATFORM_ALIAS = {\n  desktop_web: Platform.VKCOM,\n};\n\nfunction isPlatformAlias(platformAlias: string): platformAlias is keyof typeof PLATFORM_ALIAS {\n  return platformAlias in PLATFORM_ALIAS;\n}\n\n/**\n * Значение, которое передаётся в качестве query-параметра при открытии VK Mini Apps\n * @see {@link https://dev.vk.com/mini-apps/development/launch-params#vk_platform vk_platform}\n */\nfunction getPlatformByQueryString(queryString: string): Platform | undefined {\n  try {\n    const parsedQuery = querystring.parse(queryString);\n    const platformAliasByQuery = parsedQuery['vk_platform'];\n\n    return typeof platformAliasByQuery === 'string' && isPlatformAlias(platformAliasByQuery)\n      ? PLATFORM_ALIAS[platformAliasByQuery]\n      : undefined;\n  } catch (e) {\n    console.warn(e);\n\n    return undefined;\n  }\n}\n\nconst platformByQueryString = canUseDOM ? getPlatformByQueryString(location.search) : undefined;\n\nexport type PlatformType = LiteralUnion<'android' | 'ios' | 'vkcom', string>;\n\nexport function platform(browserInfo?: BrowserInfo): PlatformType {\n  if (platformByQueryString) {\n    return platformByQueryString;\n  }\n\n  if (!browserInfo) {\n    browserInfo = computeBrowserInfo();\n  }\n\n  return browserInfo.system === 'ios' ? Platform.IOS : Platform.ANDROID;\n}\n"],"names":["querystring","computeBrowserInfo","canUseDOM","Platform","ANDROID","IOS","VKCOM","PLATFORM_ALIAS","desktop_web","isPlatformAlias","platformAlias","getPlatformByQueryString","queryString","parsedQuery","parse","platformAliasByQuery","undefined","e","console","warn","platformByQueryString","location","search","platform","browserInfo","system"],"mappings":"AAAA,SAASA,WAAW,QAAQ,kBAAkB;AAE9C,SAAsBC,kBAAkB,QAAQ,YAAY;AAC5D,SAASC,SAAS,QAAQ,QAAQ;WAE3B;UAAKC,QAAQ;IAARA,SACVC,aAAU;IADAD,SAEVE,SAAM;IAFIF,SAGVG,WAAQ;GAHEH,aAAAA;AAMZ,MAAMI,iBAAiB;IACrBC,aAAaL,SAASG;AACxB;AAEA,SAASG,gBAAgBC,aAAqB;IAC5C,OAAOA,iBAAiBH;AAC1B;AAEA;;;CAGC,GACD,SAASI,yBAAyBC,WAAmB;IACnD,IAAI;QACF,MAAMC,cAAcb,YAAYc,MAAMF;QACtC,MAAMG,uBAAuBF,WAAW,CAAC,cAAc;QAEvD,OAAO,OAAOE,yBAAyB,YAAYN,gBAAgBM,wBAC/DR,cAAc,CAACQ,qBAAqB,GACpCC;IACN,EAAE,OAAOC,GAAG;QACVC,QAAQC,KAAKF;QAEb,OAAOD;IACT;AACF;AAEA,MAAMI,wBAAwBlB,YAAYS,yBAAyBU,SAASC,UAAUN;AAItF,OAAO,SAASO,SAASC,WAAyB;IAChD,IAAIJ,uBAAuB;QACzB,OAAOA;IACT;IAEA,IAAI,CAACI,aAAa;QAChBA,cAAcvB;IAChB;IAEA,OAAOuB,YAAYC,WAAW,QAAQtB,SAASE,MAAMF,SAASC;AAChE"}

package/dist/cssm/styles/constants.css

@@ -58,6 +58,9 @@
   --vkui_internal--z_index_image_base_overlay: 0;
   --vkui_internal--z_index_image_base_border: 1;
   --vkui_internal--z_index_image_base_badge: 2;
+
+  /* z_index HorizontalScroll isolate */
+  --vkui_internal--z_index_horizontal_scroll_arrow: 1;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

package/dist/cssm/types.d.ts

@@ -54,3 +54,15 @@ export type Exact<A, B> = A extends B ? B : never;
  * Для возможности указывать css custom properties
  */
 export type CSSCustomProperties<T extends string | undefined = string> = Record<`--${string}`, T>;
+interface Nothing {
+}
+/**
+ * Автозаполнение для типов
+ *
+ * @example
+ * LiteralUnion<'foo' | 'bar', string>
+ *
+ * @see {@link https://github.com/microsoft/TypeScript/issues/29729}
+ */
+export type LiteralUnion<Union, Type> = Union | (Type & Nothing);
+export {};

package/dist/cssm/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { PlatformType } from './lib/platform';\n\nexport type AnyFunction = (...args: any[]) => any;\n\nexport type AlignType = 'left' | 'center' | 'right';\n\nexport interface HasChildren {\n  children?: React.ReactNode;\n}\n\nexport type HasDataAttribute = Record<\n  `data-${string}`,\n  string | number | boolean | undefined | null\n>;\n\nexport interface HasRootRef<T> {\n  getRootRef?: React.Ref<T>;\n}\n\nexport interface HasRef<T> {\n  getRef?: React.Ref<T>;\n}\n\nexport interface HasComponent {\n  Component?: React.ElementType;\n}\n\nexport interface HasAlign {\n  align?: AlignType;\n}\n\nexport interface HasPlatform {\n  /**\n   * @ignore\n   */\n  platform?: PlatformType;\n}\n\nexport interface HasInsets {\n  /**\n   * @ignore\n   */\n  insets?: Partial<Insets>;\n}\n\nexport interface Version {\n  major: number;\n  minor?: number;\n  patch?: number;\n}\n\n/**\n * Тип содержит атрибуты, которые применяются только для `<a>`\n *\n * @see {@link https://developer.mozilla.org/ru/docs/Web/HTML/Element/A &lt;a&gt; - HTML | MDN}\n */\nexport type AnchorHTMLAttributesOnly = Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  keyof React.HTMLAttributes<HTMLAnchorElement>\n>;\n\n/**\n * Проверяет, является ли тип подтипом другого.\n *\n * В TS не реализовано.\n *\n * @see {@link https://github.com/microsoft/TypeScript/issues/12936}\n */\nexport type Exact<A, B> = A extends B ? B : never;\n\n/**\n * Для возможности указывать css custom properties\n */\nexport type CSSCustomProperties<T extends string | undefined = string> = Record<`--${string}`, T>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../../src/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { PlatformType } from './lib/platform';\n\nexport type AnyFunction = (...args: any[]) => any;\n\nexport type AlignType = 'left' | 'center' | 'right';\n\nexport interface HasChildren {\n  children?: React.ReactNode;\n}\n\nexport type HasDataAttribute = Record<\n  `data-${string}`,\n  string | number | boolean | undefined | null\n>;\n\nexport interface HasRootRef<T> {\n  getRootRef?: React.Ref<T>;\n}\n\nexport interface HasRef<T> {\n  getRef?: React.Ref<T>;\n}\n\nexport interface HasComponent {\n  Component?: React.ElementType;\n}\n\nexport interface HasAlign {\n  align?: AlignType;\n}\n\nexport interface HasPlatform {\n  /**\n   * @ignore\n   */\n  platform?: PlatformType;\n}\n\nexport interface HasInsets {\n  /**\n   * @ignore\n   */\n  insets?: Partial<Insets>;\n}\n\nexport interface Version {\n  major: number;\n  minor?: number;\n  patch?: number;\n}\n\n/**\n * Тип содержит атрибуты, которые применяются только для `<a>`\n *\n * @see {@link https://developer.mozilla.org/ru/docs/Web/HTML/Element/A &lt;a&gt; - HTML | MDN}\n */\nexport type AnchorHTMLAttributesOnly = Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  keyof React.HTMLAttributes<HTMLAnchorElement>\n>;\n\n/**\n * Проверяет, является ли тип подтипом другого.\n *\n * В TS не реализовано.\n *\n * @see {@link https://github.com/microsoft/TypeScript/issues/12936}\n */\nexport type Exact<A, B> = A extends B ? B : never;\n\n/**\n * Для возможности указывать css custom properties\n */\nexport type CSSCustomProperties<T extends string | undefined = string> = Record<`--${string}`, T>;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\ninterface Nothing {}\n\n/**\n * Автозаполнение для типов\n *\n * @example\n * LiteralUnion<'foo' | 'bar', string>\n *\n * @see {@link https://github.com/microsoft/TypeScript/issues/29729}\n */\nexport type LiteralUnion<Union, Type> = Union | (Type & Nothing);\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/dist/hooks/useAutoDetectAppearance.js

@@ -5,23 +5,23 @@ import { noop } from "@vkontakte/vkjs";
 import { resolveAppearance } from "../helpers/appearance";
 import { useDOM } from "../lib/dom";
 import { matchMediaListAddListener, matchMediaListRemoveListener } from "../lib/matchMedia";
-var initialAppearance = null;
-vkBridge.send("VKWebAppGetConfig").then(function(data) {
-    initialAppearance = resolveAppearance(data);
-}).catch(console.error);
 function autoDetectAppearanceByBridge(setAppearance, onDetectAppearanceByBridge) {
+    var updateAppearance = function updateAppearance(data) {
+        var initialAppearance = resolveAppearance(data);
+        if (initialAppearance) {
+            onDetectAppearanceByBridge();
+            setAppearance(initialAppearance);
+        }
+    };
     var bridgeListener = function bridgeListener(e) {
         var _e_detail = e.detail, type = _e_detail.type, data = _e_detail.data;
         if (type !== "VKWebAppUpdateConfig") {
             return;
         }
-        initialAppearance = resolveAppearance(data);
-        if (initialAppearance) {
-            onDetectAppearanceByBridge();
-            setAppearance(initialAppearance);
-        }
+        updateAppearance(data);
     };
     vkBridge.subscribe(bridgeListener);
+    vkBridge.send("VKWebAppGetConfig").then(updateAppearance).catch(console.error);
     return function() {
         return vkBridge.unsubscribe(bridgeListener);
     };
@@ -51,10 +51,6 @@ export var useAutoDetectAppearance = function(appearanceProp, onDetectAppearance
         if (appearanceProp) {
             return appearanceProp;
         }
-        if (initialAppearance) {
-            onceDetectAppearanceByBridge.current();
-            return initialAppearance;
-        }
         var mediaQuery = window && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
         // eslint-disable-next-line no-restricted-properties
         return (mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.matches) ? "dark" : "light";

package/dist/hooks/useAutoDetectAppearance.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useAutoDetectAppearance.tsx"],"sourcesContent":["import * as React from 'react';\nimport vkBridge, {\n  AnyReceiveMethodName,\n  AppearanceType,\n  VKBridgeEvent,\n} from '@vkontakte/vk-bridge';\nimport { noop } from '@vkontakte/vkjs';\nimport { resolveAppearance, VKBridgeConfigData } from '../helpers/appearance';\nimport { useDOM } from '../lib/dom';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';\n\nlet initialAppearance: AppearanceType | null = null;\n\nvkBridge\n  .send('VKWebAppGetConfig')\n  .then((data) => {\n    initialAppearance = resolveAppearance(data);\n  })\n  .catch(console.error);\n\nfunction autoDetectAppearanceByBridge(\n  setAppearance: (value: AppearanceType) => void,\n  onDetectAppearanceByBridge: () => void,\n) {\n  function bridgeListener(e: VKBridgeEvent<AnyReceiveMethodName>) {\n    const { type, data } = e.detail;\n\n    if (type !== 'VKWebAppUpdateConfig') {\n      return;\n    }\n\n    initialAppearance = resolveAppearance(data as VKBridgeConfigData);\n\n    if (initialAppearance) {\n      onDetectAppearanceByBridge();\n      setAppearance(initialAppearance);\n    }\n  }\n\n  vkBridge.subscribe(bridgeListener);\n\n  return () => vkBridge.unsubscribe(bridgeListener);\n}\n\nfunction autoDetectAppearance(\n  window: Window | undefined,\n  setAppearance: (value: AppearanceType) => void,\n): () => void {\n  const mediaQuery =\n    window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');\n\n  if (mediaQuery === undefined) {\n    return noop;\n  }\n\n  const check = (event: MediaQueryList | MediaQueryListEvent) => {\n    // eslint-disable-next-line no-restricted-properties\n    setAppearance(event.matches ? 'dark' : 'light');\n  };\n\n  check(mediaQuery);\n  matchMediaListAddListener(mediaQuery, check);\n\n  return () => matchMediaListRemoveListener(mediaQuery, check);\n}\n\nexport const useAutoDetectAppearance = (\n  appearanceProp?: AppearanceType,\n  onDetectAppearanceByBridge?: () => void,\n): AppearanceType => {\n  const { window } = useDOM();\n  const onceDetectAppearanceByBridge = React.useRef(() => {\n    onDetectAppearanceByBridge && onDetectAppearanceByBridge();\n    onceDetectAppearanceByBridge.current = noop;\n  });\n\n  const [appearance, setAppearance] = React.useState<AppearanceType>(() => {\n    if (appearanceProp) {\n      return appearanceProp;\n    }\n\n    if (initialAppearance) {\n      onceDetectAppearanceByBridge.current();\n      return initialAppearance;\n    }\n\n    const mediaQuery =\n      window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');\n\n    // eslint-disable-next-line no-restricted-properties\n    return mediaQuery?.matches ? 'dark' : 'light';\n  });\n\n  React.useEffect(() => {\n    if (appearanceProp) {\n      setAppearance(appearanceProp);\n      return noop;\n    }\n\n    if (vkBridge.isEmbedded()) {\n      return autoDetectAppearanceByBridge(setAppearance, onceDetectAppearanceByBridge.current);\n    }\n\n    return autoDetectAppearance(window, setAppearance);\n  }, [window, appearanceProp]);\n\n  return appearance;\n};\n"],"names":["React","vkBridge","noop","resolveAppearance","useDOM","matchMediaListAddListener","matchMediaListRemoveListener","initialAppearance","send","then","data","catch","console","error","autoDetectAppearanceByBridge","setAppearance","onDetectAppearanceByBridge","bridgeListener","e","detail","type","subscribe","unsubscribe","autoDetectAppearance","window","mediaQuery","matchMedia","undefined","check","event","matches","useAutoDetectAppearance","appearanceProp","onceDetectAppearanceByBridge","useRef","current","useState","appearance","useEffect","isEmbedded"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,OAAOC,cAIA,uBAAuB;AAC9B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,iBAAiB,QAA4B,wBAAwB;AAC9E,SAASC,MAAM,QAAQ,aAAa;AACpC,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAE5F,IAAIC,oBAA2C;AAE/CN,SACGO,KAAK,qBACLC,KAAK,SAACC;IACLH,oBAAoBJ,kBAAkBO;AACxC,GACCC,MAAMC,QAAQC;AAEjB,SAASC,6BACPC,aAA8C,EAC9CC,0BAAsC;QAE7BC,iBAAT,SAASA,eAAeC,CAAsC;QAC5D,IAAuBA,YAAAA,EAAEC,QAAjBC,OAAeF,UAAfE,MAAMV,OAASQ,UAATR;QAEd,IAAIU,SAAS,wBAAwB;YACnC;QACF;QAEAb,oBAAoBJ,kBAAkBO;QAEtC,IAAIH,mBAAmB;YACrBS;YACAD,cAAcR;QAChB;IACF;IAEAN,SAASoB,UAAUJ;IAEnB,OAAO;eAAMhB,SAASqB,YAAYL;;AACpC;AAEA,SAASM,qBACPC,MAA0B,EAC1BT,aAA8C;IAE9C,IAAMU,aACJD,UAAUA,OAAOE,cAAcF,OAAOE,WAAW;IAEnD,IAAID,eAAeE,WAAW;QAC5B,OAAOzB;IACT;IAEA,IAAM0B,QAAQ,SAACC;QACb,oDAAoD;QACpDd,cAAcc,MAAMC,UAAU,SAAS;IACzC;IAEAF,MAAMH;IACNpB,0BAA0BoB,YAAYG;IAEtC,OAAO;eAAMtB,6BAA6BmB,YAAYG;;AACxD;AAEA,OAAO,IAAMG,0BAA0B,SACrCC,gBACAhB;IAEA,IAAM,AAAEQ,SAAWpB,SAAXoB;IACR,IAAMS,+BAA+BjC,MAAMkC,OAAO;QAChDlB,8BAA8BA;QAC9BiB,6BAA6BE,UAAUjC;IACzC;IAEA,IAAoCF,mCAAAA,MAAMoC,SAAyB;QACjE,IAAIJ,gBAAgB;YAClB,OAAOA;QACT;QAEA,IAAIzB,mBAAmB;YACrB0B,6BAA6BE;YAC7B,OAAO5B;QACT;QAEA,IAAMkB,aACJD,UAAUA,OAAOE,cAAcF,OAAOE,WAAW;QAEnD,oDAAoD;QACpD,OAAOD,CAAAA,uBAAAA,wBAAAA,KAAAA,IAAAA,WAAYK,OAAM,IAAI,SAAS;IACxC,QAfOO,aAA6BrC,oBAAjBe,gBAAiBf;IAiBpCA,MAAMsC,UAAU;QACd,IAAIN,gBAAgB;YAClBjB,cAAciB;YACd,OAAO9B;QACT;QAEA,IAAID,SAASsC,cAAc;YACzB,OAAOzB,6BAA6BC,eAAekB,6BAA6BE;QAClF;QAEA,OAAOZ,qBAAqBC,QAAQT;IACtC,GAAG;QAACS;QAAQQ;KAAe;IAE3B,OAAOK;AACT,EAAE"}
+{"version":3,"sources":["../../src/hooks/useAutoDetectAppearance.tsx"],"sourcesContent":["import * as React from 'react';\nimport vkBridge, {\n  AnyReceiveMethodName,\n  AppearanceType,\n  VKBridgeEvent,\n} from '@vkontakte/vk-bridge';\nimport { noop } from '@vkontakte/vkjs';\nimport { resolveAppearance, VKBridgeConfigData } from '../helpers/appearance';\nimport { useDOM } from '../lib/dom';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';\n\nfunction autoDetectAppearanceByBridge(\n  setAppearance: (value: AppearanceType) => void,\n  onDetectAppearanceByBridge: () => void,\n) {\n  function updateAppearance(data: VKBridgeConfigData) {\n    const initialAppearance = resolveAppearance(data);\n\n    if (initialAppearance) {\n      onDetectAppearanceByBridge();\n      setAppearance(initialAppearance);\n    }\n  }\n\n  function bridgeListener(e: VKBridgeEvent<AnyReceiveMethodName>) {\n    const { type, data } = e.detail;\n\n    if (type !== 'VKWebAppUpdateConfig') {\n      return;\n    }\n\n    updateAppearance(data as VKBridgeConfigData);\n  }\n\n  vkBridge.subscribe(bridgeListener);\n  vkBridge.send('VKWebAppGetConfig').then(updateAppearance).catch(console.error);\n\n  return () => vkBridge.unsubscribe(bridgeListener);\n}\n\nfunction autoDetectAppearance(\n  window: Window | undefined,\n  setAppearance: (value: AppearanceType) => void,\n): () => void {\n  const mediaQuery =\n    window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');\n\n  if (mediaQuery === undefined) {\n    return noop;\n  }\n\n  const check = (event: MediaQueryList | MediaQueryListEvent) => {\n    // eslint-disable-next-line no-restricted-properties\n    setAppearance(event.matches ? 'dark' : 'light');\n  };\n\n  check(mediaQuery);\n  matchMediaListAddListener(mediaQuery, check);\n\n  return () => matchMediaListRemoveListener(mediaQuery, check);\n}\n\nexport const useAutoDetectAppearance = (\n  appearanceProp?: AppearanceType,\n  onDetectAppearanceByBridge?: () => void,\n): AppearanceType => {\n  const { window } = useDOM();\n  const onceDetectAppearanceByBridge = React.useRef(() => {\n    onDetectAppearanceByBridge && onDetectAppearanceByBridge();\n    onceDetectAppearanceByBridge.current = noop;\n  });\n\n  const [appearance, setAppearance] = React.useState<AppearanceType>(() => {\n    if (appearanceProp) {\n      return appearanceProp;\n    }\n\n    const mediaQuery =\n      window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');\n\n    // eslint-disable-next-line no-restricted-properties\n    return mediaQuery?.matches ? 'dark' : 'light';\n  });\n\n  React.useEffect(() => {\n    if (appearanceProp) {\n      setAppearance(appearanceProp);\n      return noop;\n    }\n\n    if (vkBridge.isEmbedded()) {\n      return autoDetectAppearanceByBridge(setAppearance, onceDetectAppearanceByBridge.current);\n    }\n\n    return autoDetectAppearance(window, setAppearance);\n  }, [window, appearanceProp]);\n\n  return appearance;\n};\n"],"names":["React","vkBridge","noop","resolveAppearance","useDOM","matchMediaListAddListener","matchMediaListRemoveListener","autoDetectAppearanceByBridge","setAppearance","onDetectAppearanceByBridge","updateAppearance","data","initialAppearance","bridgeListener","e","detail","type","subscribe","send","then","catch","console","error","unsubscribe","autoDetectAppearance","window","mediaQuery","matchMedia","undefined","check","event","matches","useAutoDetectAppearance","appearanceProp","onceDetectAppearanceByBridge","useRef","current","useState","appearance","useEffect","isEmbedded"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,OAAOC,cAIA,uBAAuB;AAC9B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,iBAAiB,QAA4B,wBAAwB;AAC9E,SAASC,MAAM,QAAQ,aAAa;AACpC,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAE5F,SAASC,6BACPC,aAA8C,EAC9CC,0BAAsC;QAE7BC,mBAAT,SAASA,iBAAiBC,IAAwB;QAChD,IAAMC,oBAAoBT,kBAAkBQ;QAE5C,IAAIC,mBAAmB;YACrBH;YACAD,cAAcI;QAChB;IACF;QAESC,iBAAT,SAASA,eAAeC,CAAsC;QAC5D,IAAuBA,YAAAA,EAAEC,QAAjBC,OAAeF,UAAfE,MAAML,OAASG,UAATH;QAEd,IAAIK,SAAS,wBAAwB;YACnC;QACF;QAEAN,iBAAiBC;IACnB;IAEAV,SAASgB,UAAUJ;IACnBZ,SAASiB,KAAK,qBAAqBC,KAAKT,kBAAkBU,MAAMC,QAAQC;IAExE,OAAO;eAAMrB,SAASsB,YAAYV;;AACpC;AAEA,SAASW,qBACPC,MAA0B,EAC1BjB,aAA8C;IAE9C,IAAMkB,aACJD,UAAUA,OAAOE,cAAcF,OAAOE,WAAW;IAEnD,IAAID,eAAeE,WAAW;QAC5B,OAAO1B;IACT;IAEA,IAAM2B,QAAQ,SAACC;QACb,oDAAoD;QACpDtB,cAAcsB,MAAMC,UAAU,SAAS;IACzC;IAEAF,MAAMH;IACNrB,0BAA0BqB,YAAYG;IAEtC,OAAO;eAAMvB,6BAA6BoB,YAAYG;;AACxD;AAEA,OAAO,IAAMG,0BAA0B,SACrCC,gBACAxB;IAEA,IAAM,AAAEgB,SAAWrB,SAAXqB;IACR,IAAMS,+BAA+BlC,MAAMmC,OAAO;QAChD1B,8BAA8BA;QAC9ByB,6BAA6BE,UAAUlC;IACzC;IAEA,IAAoCF,mCAAAA,MAAMqC,SAAyB;QACjE,IAAIJ,gBAAgB;YAClB,OAAOA;QACT;QAEA,IAAMP,aACJD,UAAUA,OAAOE,cAAcF,OAAOE,WAAW;QAEnD,oDAAoD;QACpD,OAAOD,CAAAA,uBAAAA,wBAAAA,KAAAA,IAAAA,WAAYK,OAAM,IAAI,SAAS;IACxC,QAVOO,aAA6BtC,oBAAjBQ,gBAAiBR;IAYpCA,MAAMuC,UAAU;QACd,IAAIN,gBAAgB;YAClBzB,cAAcyB;YACd,OAAO/B;QACT;QAEA,IAAID,SAASuC,cAAc;YACzB,OAAOjC,6BAA6BC,eAAe0B,6BAA6BE;QAClF;QAEA,OAAOZ,qBAAqBC,QAAQjB;IACtC,GAAG;QAACiB;QAAQQ;KAAe;IAE3B,OAAOK;AACT,EAAE"}

package/dist/lib/platform.d.ts

@@ -1,8 +1,9 @@
+import { LiteralUnion } from '../types';
 import { BrowserInfo } from './browser';
 export declare enum Platform {
     ANDROID = "android",
     IOS = "ios",
     VKCOM = "vkcom"
 }
-export type PlatformType = Platform.ANDROID | Platform.IOS | Platform.VKCOM | string;
+export type PlatformType = LiteralUnion<'android' | 'ios' | 'vkcom', string>;
 export declare function platform(browserInfo?: BrowserInfo): PlatformType;

package/dist/lib/platform.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/platform.ts"],"sourcesContent":["import { querystring } from '@vkontakte/vkjs';\nimport { BrowserInfo, computeBrowserInfo } from './browser';\nimport { canUseDOM } from './dom';\n\nexport enum Platform {\n  ANDROID = 'android',\n  IOS = 'ios',\n  VKCOM = 'vkcom',\n}\n\nconst PLATFORM_ALIAS = {\n  desktop_web: Platform.VKCOM,\n};\n\nfunction isPlatformAlias(platformAlias: string): platformAlias is keyof typeof PLATFORM_ALIAS {\n  return platformAlias in PLATFORM_ALIAS;\n}\n\n/**\n * Значение, которое передаётся в качестве query-параметра при открытии VK Mini Apps\n * @see {@link https://dev.vk.com/mini-apps/development/launch-params#vk_platform vk_platform}\n */\nfunction getPlatformByQueryString(queryString: string): Platform | undefined {\n  try {\n    const parsedQuery = querystring.parse(queryString);\n    const platformAliasByQuery = parsedQuery['vk_platform'];\n\n    return typeof platformAliasByQuery === 'string' && isPlatformAlias(platformAliasByQuery)\n      ? PLATFORM_ALIAS[platformAliasByQuery]\n      : undefined;\n  } catch (e) {\n    console.warn(e);\n\n    return undefined;\n  }\n}\n\nconst platformByQueryString = canUseDOM ? getPlatformByQueryString(location.search) : undefined;\n\nexport type PlatformType = Platform.ANDROID | Platform.IOS | Platform.VKCOM | string;\n\nexport function platform(browserInfo?: BrowserInfo): PlatformType {\n  if (platformByQueryString) {\n    return platformByQueryString;\n  }\n\n  if (!browserInfo) {\n    browserInfo = computeBrowserInfo();\n  }\n\n  return browserInfo.system === 'ios' ? Platform.IOS : Platform.ANDROID;\n}\n"],"names":["querystring","computeBrowserInfo","canUseDOM","Platform","ANDROID","IOS","VKCOM","PLATFORM_ALIAS","desktop_web","isPlatformAlias","platformAlias","getPlatformByQueryString","queryString","parsedQuery","parse","platformAliasByQuery","undefined","e","console","warn","platformByQueryString","location","search","platform","browserInfo","system"],"mappings":"AAAA,SAASA,WAAW,QAAQ,kBAAkB;AAC9C,SAAsBC,kBAAkB,QAAQ,YAAY;AAC5D,SAASC,SAAS,QAAQ,QAAQ;WAE3B;UAAKC,QAAQ;IAARA,SACVC,aAAU;IADAD,SAEVE,SAAM;IAFIF,SAGVG,WAAQ;GAHEH,aAAAA;AAMZ,IAAMI,iBAAiB;IACrBC,aAAaL,SAASG;AACxB;AAEA,SAASG,gBAAgBC,aAAqB;IAC5C,OAAOA,iBAAiBH;AAC1B;AAEA;;;CAGC,GACD,SAASI,yBAAyBC,WAAmB;IACnD,IAAI;QACF,IAAMC,cAAcb,YAAYc,MAAMF;QACtC,IAAMG,uBAAuBF,WAAW,CAAC,cAAc;QAEvD,OAAO,OAAOE,yBAAyB,YAAYN,gBAAgBM,wBAC/DR,cAAc,CAACQ,qBAAqB,GACpCC;IACN,EAAE,OAAOC,GAAG;QACVC,QAAQC,KAAKF;QAEb,OAAOD;IACT;AACF;AAEA,IAAMI,wBAAwBlB,YAAYS,yBAAyBU,SAASC,UAAUN;AAItF,OAAO,SAASO,SAASC,WAAyB;IAChD,IAAIJ,uBAAuB;QACzB,OAAOA;IACT;IAEA,IAAI,CAACI,aAAa;QAChBA,cAAcvB;IAChB;IAEA,OAAOuB,YAAYC,WAAW,QAAQtB,SAASE,MAAMF,SAASC;AAChE"}
+{"version":3,"sources":["../../src/lib/platform.ts"],"sourcesContent":["import { querystring } from '@vkontakte/vkjs';\nimport { LiteralUnion } from '../types';\nimport { BrowserInfo, computeBrowserInfo } from './browser';\nimport { canUseDOM } from './dom';\n\nexport enum Platform {\n  ANDROID = 'android',\n  IOS = 'ios',\n  VKCOM = 'vkcom',\n}\n\nconst PLATFORM_ALIAS = {\n  desktop_web: Platform.VKCOM,\n};\n\nfunction isPlatformAlias(platformAlias: string): platformAlias is keyof typeof PLATFORM_ALIAS {\n  return platformAlias in PLATFORM_ALIAS;\n}\n\n/**\n * Значение, которое передаётся в качестве query-параметра при открытии VK Mini Apps\n * @see {@link https://dev.vk.com/mini-apps/development/launch-params#vk_platform vk_platform}\n */\nfunction getPlatformByQueryString(queryString: string): Platform | undefined {\n  try {\n    const parsedQuery = querystring.parse(queryString);\n    const platformAliasByQuery = parsedQuery['vk_platform'];\n\n    return typeof platformAliasByQuery === 'string' && isPlatformAlias(platformAliasByQuery)\n      ? PLATFORM_ALIAS[platformAliasByQuery]\n      : undefined;\n  } catch (e) {\n    console.warn(e);\n\n    return undefined;\n  }\n}\n\nconst platformByQueryString = canUseDOM ? getPlatformByQueryString(location.search) : undefined;\n\nexport type PlatformType = LiteralUnion<'android' | 'ios' | 'vkcom', string>;\n\nexport function platform(browserInfo?: BrowserInfo): PlatformType {\n  if (platformByQueryString) {\n    return platformByQueryString;\n  }\n\n  if (!browserInfo) {\n    browserInfo = computeBrowserInfo();\n  }\n\n  return browserInfo.system === 'ios' ? Platform.IOS : Platform.ANDROID;\n}\n"],"names":["querystring","computeBrowserInfo","canUseDOM","Platform","ANDROID","IOS","VKCOM","PLATFORM_ALIAS","desktop_web","isPlatformAlias","platformAlias","getPlatformByQueryString","queryString","parsedQuery","parse","platformAliasByQuery","undefined","e","console","warn","platformByQueryString","location","search","platform","browserInfo","system"],"mappings":"AAAA,SAASA,WAAW,QAAQ,kBAAkB;AAE9C,SAAsBC,kBAAkB,QAAQ,YAAY;AAC5D,SAASC,SAAS,QAAQ,QAAQ;WAE3B;UAAKC,QAAQ;IAARA,SACVC,aAAU;IADAD,SAEVE,SAAM;IAFIF,SAGVG,WAAQ;GAHEH,aAAAA;AAMZ,IAAMI,iBAAiB;IACrBC,aAAaL,SAASG;AACxB;AAEA,SAASG,gBAAgBC,aAAqB;IAC5C,OAAOA,iBAAiBH;AAC1B;AAEA;;;CAGC,GACD,SAASI,yBAAyBC,WAAmB;IACnD,IAAI;QACF,IAAMC,cAAcb,YAAYc,MAAMF;QACtC,IAAMG,uBAAuBF,WAAW,CAAC,cAAc;QAEvD,OAAO,OAAOE,yBAAyB,YAAYN,gBAAgBM,wBAC/DR,cAAc,CAACQ,qBAAqB,GACpCC;IACN,EAAE,OAAOC,GAAG;QACVC,QAAQC,KAAKF;QAEb,OAAOD;IACT;AACF;AAEA,IAAMI,wBAAwBlB,YAAYS,yBAAyBU,SAASC,UAAUN;AAItF,OAAO,SAASO,SAASC,WAAyB;IAChD,IAAIJ,uBAAuB;QACzB,OAAOA;IACT;IAEA,IAAI,CAACI,aAAa;QAChBA,cAAcvB;IAChB;IAEA,OAAOuB,YAAYC,WAAW,QAAQtB,SAASE,MAAMF,SAASC;AAChE"}

package/dist/types.d.ts

@@ -54,3 +54,15 @@ export type Exact<A, B> = A extends B ? B : never;
  * Для возможности указывать css custom properties
  */
 export type CSSCustomProperties<T extends string | undefined = string> = Record<`--${string}`, T>;
+interface Nothing {
+}
+/**
+ * Автозаполнение для типов
+ *
+ * @example
+ * LiteralUnion<'foo' | 'bar', string>
+ *
+ * @see {@link https://github.com/microsoft/TypeScript/issues/29729}
+ */
+export type LiteralUnion<Union, Type> = Union | (Type & Nothing);
+export {};

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { PlatformType } from './lib/platform';\n\nexport type AnyFunction = (...args: any[]) => any;\n\nexport type AlignType = 'left' | 'center' | 'right';\n\nexport interface HasChildren {\n  children?: React.ReactNode;\n}\n\nexport type HasDataAttribute = Record<\n  `data-${string}`,\n  string | number | boolean | undefined | null\n>;\n\nexport interface HasRootRef<T> {\n  getRootRef?: React.Ref<T>;\n}\n\nexport interface HasRef<T> {\n  getRef?: React.Ref<T>;\n}\n\nexport interface HasComponent {\n  Component?: React.ElementType;\n}\n\nexport interface HasAlign {\n  align?: AlignType;\n}\n\nexport interface HasPlatform {\n  /**\n   * @ignore\n   */\n  platform?: PlatformType;\n}\n\nexport interface HasInsets {\n  /**\n   * @ignore\n   */\n  insets?: Partial<Insets>;\n}\n\nexport interface Version {\n  major: number;\n  minor?: number;\n  patch?: number;\n}\n\n/**\n * Тип содержит атрибуты, которые применяются только для `<a>`\n *\n * @see {@link https://developer.mozilla.org/ru/docs/Web/HTML/Element/A &lt;a&gt; - HTML | MDN}\n */\nexport type AnchorHTMLAttributesOnly = Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  keyof React.HTMLAttributes<HTMLAnchorElement>\n>;\n\n/**\n * Проверяет, является ли тип подтипом другого.\n *\n * В TS не реализовано.\n *\n * @see {@link https://github.com/microsoft/TypeScript/issues/12936}\n */\nexport type Exact<A, B> = A extends B ? B : never;\n\n/**\n * Для возможности указывать css custom properties\n */\nexport type CSSCustomProperties<T extends string | undefined = string> = Record<`--${string}`, T>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { PlatformType } from './lib/platform';\n\nexport type AnyFunction = (...args: any[]) => any;\n\nexport type AlignType = 'left' | 'center' | 'right';\n\nexport interface HasChildren {\n  children?: React.ReactNode;\n}\n\nexport type HasDataAttribute = Record<\n  `data-${string}`,\n  string | number | boolean | undefined | null\n>;\n\nexport interface HasRootRef<T> {\n  getRootRef?: React.Ref<T>;\n}\n\nexport interface HasRef<T> {\n  getRef?: React.Ref<T>;\n}\n\nexport interface HasComponent {\n  Component?: React.ElementType;\n}\n\nexport interface HasAlign {\n  align?: AlignType;\n}\n\nexport interface HasPlatform {\n  /**\n   * @ignore\n   */\n  platform?: PlatformType;\n}\n\nexport interface HasInsets {\n  /**\n   * @ignore\n   */\n  insets?: Partial<Insets>;\n}\n\nexport interface Version {\n  major: number;\n  minor?: number;\n  patch?: number;\n}\n\n/**\n * Тип содержит атрибуты, которые применяются только для `<a>`\n *\n * @see {@link https://developer.mozilla.org/ru/docs/Web/HTML/Element/A &lt;a&gt; - HTML | MDN}\n */\nexport type AnchorHTMLAttributesOnly = Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  keyof React.HTMLAttributes<HTMLAnchorElement>\n>;\n\n/**\n * Проверяет, является ли тип подтипом другого.\n *\n * В TS не реализовано.\n *\n * @see {@link https://github.com/microsoft/TypeScript/issues/12936}\n */\nexport type Exact<A, B> = A extends B ? B : never;\n\n/**\n * Для возможности указывать css custom properties\n */\nexport type CSSCustomProperties<T extends string | undefined = string> = Record<`--${string}`, T>;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\ninterface Nothing {}\n\n/**\n * Автозаполнение для типов\n *\n * @example\n * LiteralUnion<'foo' | 'bar', string>\n *\n * @see {@link https://github.com/microsoft/TypeScript/issues/29729}\n */\nexport type LiteralUnion<Union, Type> = Union | (Type & Nothing);\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}