@vkontakte/vkui 4.15.0 → 4.16.2

package/dist/cjs/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"names":["Search","before","className","defaultValue","placeholder","after","getRef","platform","icon","onIconClick","noop","style","inputProps","inputRef","React","useState","isFocused","setFocused","value","onChange","onFocus","e","onBlur","onCancel","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","useCallback","originalEvent","onIconCancelClickStart","preventDefault","focus","IOS","VKCOM","defaultProps","autoComplete"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from '@vkontakte/icons';\nimport { IOS, VKCOM } from '../../lib/platform';\nimport { HasPlatform, HasRef } from '../../types';\nimport Touch, { TouchEvent } from '../Touch/Touch';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { noop } from '../../lib/utils';\nimport Text from '../Typography/Text/Text';\nimport Title from '../Typography/Title/Title';\nimport Separator from '../Separator/Separator';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport './Search.css';\n\nexport type InputRef = (element: HTMLInputElement) => void;\n\nexport interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasPlatform {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n}\n\nconst Search: React.FC<SearchProps> = ({\n  before,\n  className,\n  defaultValue,\n  placeholder,\n  after,\n  getRef,\n  platform,\n  icon,\n  onIconClick = noop,\n  style,\n  ...inputProps\n}) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = () => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;\n    nativeInputValueSetter.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current.dispatchEvent(ev2);\n  };\n\n  const onIconClickStart = React.useCallback((e: TouchEvent) => onIconClick(e.originalEvent), [onIconClick]);\n\n  const onIconCancelClickStart = React.useCallback((e: TouchEvent) => {\n    e.originalEvent.preventDefault();\n    inputRef.current.focus();\n    onCancel();\n  }, [onCancel]);\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName('Search', platform), {\n        'Search--focused': isFocused,\n        'Search--has-value': !!value,\n        'Search--has-after': !!after,\n        'Search--has-icon': !!icon,\n      })}\n      className={className}\n      style={style}\n    >\n      <div vkuiClass=\"Search__in\">\n        <div vkuiClass=\"Search__width\" />\n        <label vkuiClass=\"Search__control\">\n          <input\n            type=\"search\"\n            {...inputProps}\n            ref={inputRef}\n            vkuiClass=\"Search__input\"\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === IOS && after && <div vkuiClass=\"Search__after-width\">{after}</div>}\n          <div vkuiClass=\"Search__placeholder\">\n            <div vkuiClass=\"Search__placeholder-in\">\n              {before}\n              {platform === VKCOM\n                ? <Text vkuiClass=\"Search__placeholder-text\" weight=\"regular\">{placeholder}</Text>\n                : <Title vkuiClass=\"Search__placeholder-text\" level=\"3\" weight=\"regular\">{placeholder}</Title>\n              }\n            </div>\n            {isFocused && platform === IOS && after && <div vkuiClass=\"Search__after-width\">{after}</div>}\n          </div>\n        </label>\n        <div vkuiClass=\"Search__after\" onClick={onCancel}>\n          <div vkuiClass=\"Search__icons\">\n            {icon &&\n              <Touch onStart={onIconClickStart} vkuiClass=\"Search__icon\">\n                {icon}\n              </Touch>\n            }\n            {!!value &&\n              <Touch onStart={onIconCancelClickStart} vkuiClass=\"Search__icon\">\n                {platform === VKCOM\n                  ? <Icon24Cancel />\n                  : <Icon16Clear />\n                }\n              </Touch>\n            }\n          </div>\n          {platform === IOS && after &&\n            <div vkuiClass=\"Search__after-in\">{after}</div>\n          }\n        </div>\n      </div>\n      {platform === VKCOM && <Separator vkuiClass=\"Search__separator\" wide />}\n    </div>\n  );\n};\n\nSearch.defaultProps = {\n  autoComplete: 'off',\n  defaultValue: '',\n  placeholder: 'Поиск',\n  after: 'Отмена',\n  before: <Icon16SearchOutline />,\n};\n\nexport default withPlatform(Search);\n"],"file":"Search.js"}
+{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"names":["Search","before","className","defaultValue","placeholder","after","getRef","platform","icon","onIconClick","noop","style","inputProps","inputRef","React","useState","isFocused","setFocused","value","onChange","onFocus","e","onBlur","onCancel","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","useCallback","originalEvent","onIconCancelClickStart","preventDefault","focus","IOS","VKCOM","defaultProps","autoComplete"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from '@vkontakte/icons';\nimport { IOS, VKCOM } from '../../lib/platform';\nimport { HasPlatform, HasRef } from '../../types';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { noop } from '../../lib/utils';\nimport Text from '../Typography/Text/Text';\nimport Title from '../Typography/Title/Title';\nimport Separator from '../Separator/Separator';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport './Search.css';\n\nexport type InputRef = (element: HTMLInputElement) => void;\n\nexport interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasPlatform {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n}\n\nconst Search: React.FC<SearchProps> = ({\n  before,\n  className,\n  defaultValue,\n  placeholder,\n  after,\n  getRef,\n  platform,\n  icon,\n  onIconClick = noop,\n  style,\n  ...inputProps\n}) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = () => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;\n    nativeInputValueSetter.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current.dispatchEvent(ev2);\n  };\n\n  const onIconClickStart = React.useCallback((e: TouchEvent) => onIconClick(e.originalEvent), [onIconClick]);\n\n  const onIconCancelClickStart = React.useCallback((e: TouchEvent) => {\n    e.originalEvent.preventDefault();\n    inputRef.current.focus();\n    onCancel();\n  }, [onCancel]);\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName('Search', platform), {\n        'Search--focused': isFocused,\n        'Search--has-value': !!value,\n        'Search--has-after': !!after,\n        'Search--has-icon': !!icon,\n      })}\n      className={className}\n      style={style}\n    >\n      <div vkuiClass=\"Search__in\">\n        <div vkuiClass=\"Search__width\" />\n        <label vkuiClass=\"Search__control\">\n          <input\n            type=\"search\"\n            {...inputProps}\n            ref={inputRef}\n            vkuiClass=\"Search__input\"\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === IOS && after && <div vkuiClass=\"Search__after-width\">{after}</div>}\n          <div vkuiClass=\"Search__placeholder\">\n            <div vkuiClass=\"Search__placeholder-in\">\n              {before}\n              {platform === VKCOM\n                ? <Text vkuiClass=\"Search__placeholder-text\" weight=\"regular\">{placeholder}</Text>\n                : <Title vkuiClass=\"Search__placeholder-text\" level=\"3\" weight=\"regular\">{placeholder}</Title>\n              }\n            </div>\n            {isFocused && platform === IOS && after && <div vkuiClass=\"Search__after-width\">{after}</div>}\n          </div>\n        </label>\n        <div vkuiClass=\"Search__after\" onClick={onCancel}>\n          <div vkuiClass=\"Search__icons\">\n            {icon &&\n              <Touch onStart={onIconClickStart} vkuiClass=\"Search__icon\">\n                {icon}\n              </Touch>\n            }\n            {!!value &&\n              <Touch onStart={onIconCancelClickStart} vkuiClass=\"Search__icon\">\n                {platform === VKCOM\n                  ? <Icon24Cancel />\n                  : <Icon16Clear />\n                }\n              </Touch>\n            }\n          </div>\n          {platform === IOS && after &&\n            <div vkuiClass=\"Search__after-in\">{after}</div>\n          }\n        </div>\n      </div>\n      {platform === VKCOM && <Separator vkuiClass=\"Search__separator\" wide />}\n    </div>\n  );\n};\n\nSearch.defaultProps = {\n  autoComplete: 'off',\n  defaultValue: '',\n  placeholder: 'Поиск',\n  after: 'Отмена',\n  before: <Icon16SearchOutline />,\n};\n\nexport default withPlatform(Search);\n"],"file":"Search.js"}

package/dist/cjs/components/SimpleCell/SimpleCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"names":["SimpleCellTypography","props","sizeY","SizeType","COMPACT","SimpleCell","badge","before","indicator","children","after","description","expandable","multiline","restProps","platform","hasAfter","IOS"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA0CA,IAAMA,oBAAyD,GAAG,SAA5DA,oBAA4D,CAACC,KAAD,EAAsC;AACtG,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,SAAOA,KAAK,KAAKC,yBAASC,OAAnB,GACH,qCAAC,aAAD;AAAM,IAAA,MAAM,EAAC;AAAb,KAA2BH,KAA3B,EADG,GAEH,qCAAC,cAAD;AAAO,IAAA,KAAK,EAAC,GAAb;AAAiB,IAAA,MAAM,EAAC;AAAxB,KAAsCA,KAAtC,EAFJ;AAGD,CAND;;AAQA,IAAMI,UAAqC,GAAG,SAAxCA,UAAwC,OAWxC;AAAA,MAVJC,KAUI,QAVJA,KAUI;AAAA,MATJC,MASI,QATJA,MASI;AAAA,MARJC,SAQI,QARJA,SAQI;AAAA,MAPJC,QAOI,QAPJA,QAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,WAKI,QALJA,WAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJX,KAEI,QAFJA,KAEI;AAAA,MADDY,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,MAAMC,QAAQ,GAAG,yBAAaN,KAAb,KAAuBE,UAAU,IAAIG,QAAQ,KAAKE,aAAnE;;AAEA,SACE,qCAAC,iBAAD,6BACMH,SADN;AAEE,IAAA,SAAS,EACP,4BACE,gCAAa,YAAb,EAA2BC,QAA3B,CADF,EAEE;AACE,yBAAmBH,UADrB;AAEE,0BAAoBC;AAFtB,KAFF,8BAMuBX,KANvB;AAHJ,MAaGK,MAbH,EAcE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KAAwDE,QAAxD,CADF,EAEG,yBAAaH,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGA,KADH,CAHJ,CADF,EASGK,WAAW,IAAI,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC,MAAnB;AAA0B,IAAA,MAAM,EAAC,SAAjC;AAA2C,IAAA,SAAS,EAAC;AAArD,KAAgFA,WAAhF,CATlB,CAdF,EAyBG,yBAAaH,SAAb,KACC,qCAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC,MAAhC;AAAuC,IAAA,SAAS,EAAC;AAAjD,KAA0EA,SAA1E,CA1BJ,EA4BGQ,QAAQ,IACP;AAAK,IAAA,SAAS,EAAC;AAAf,KACGN,KADH,EAEGE,UAAU,IAAIG,QAAQ,KAAKE,aAA3B,IAAkC,qCAAC,oBAAD,OAFrC,CA7BJ,CADF;AAqCD,CApDD;;eAsDe,oCAAeZ,UAAf,EAA2B;AAAEH,EAAAA,KAAK,EAAE;AAAT,CAA3B,C","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getClassName } from '../../helpers/getClassName';\nimport Tappable, { TappableProps } from '../Tappable/Tappable';\nimport { Icon24Chevron } from '@vkontakte/icons';\nimport { IOS } from '../../lib/platform';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasReactNode } from '../../lib/utils';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { withAdaptivity, SizeType } from '../../hoc/withAdaptivity';\nimport Title from '../Typography/Title/Title';\nimport Text from '../Typography/Text/Text';\nimport Subhead from '../Typography/Subhead/Subhead';\nimport './SimpleCell.css';\n\nexport interface SimpleCellOwnProps {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badge?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  description?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n  multiline?: boolean;\n  Component?: React.ElementType;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\ninterface SimpleCellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  Component?: React.ElementType;\n}\n\nconst SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (props: SimpleCellTypographyProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return sizeY === SizeType.COMPACT\n    ? <Text weight=\"regular\" {...props} />\n    : <Title level=\"3\" weight=\"regular\" {...props} />;\n};\n\nconst SimpleCell: React.FC<SimpleCellProps> = ({\n  badge,\n  before,\n  indicator,\n  children,\n  after,\n  description,\n  expandable,\n  multiline,\n  sizeY,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || expandable && platform === IOS;\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={\n        classNames(\n          getClassName('SimpleCell', platform),\n          {\n            'SimpleCell--exp': expandable,\n            'SimpleCell--mult': multiline,\n          },\n          `SimpleCell--sizeY-${sizeY}`,\n        )\n      }\n    >\n      {before}\n      <div vkuiClass=\"SimpleCell__main\">\n        <div vkuiClass=\"SimpleCell__content\">\n          <SimpleCellTypography vkuiClass=\"SimpleCell__children\">{children}</SimpleCellTypography>\n          {hasReactNode(badge) &&\n            <span vkuiClass=\"SimpleCell__badge\">\n              {badge}\n            </span>\n          }\n        </div>\n        {description && <Subhead Component=\"span\" weight=\"regular\" vkuiClass=\"SimpleCell__description\">{description}</Subhead>}\n      </div>\n      {hasReactNode(indicator) &&\n        <SimpleCellTypography Component=\"span\" vkuiClass=\"SimpleCell__indicator\">{indicator}</SimpleCellTypography>\n      }\n      {hasAfter &&\n        <div vkuiClass=\"SimpleCell__after\">\n          {after}\n          {expandable && platform === IOS && <Icon24Chevron />}\n        </div>\n      }\n    </Tappable>\n  );\n};\n\nexport default withAdaptivity(SimpleCell, { sizeY: true });\n"],"file":"SimpleCell.js"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"names":["SimpleCellTypography","props","sizeY","SizeType","COMPACT","SimpleCell","badge","before","indicator","children","after","description","expandable","multiline","restProps","platform","hasAfter","IOS"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA0CA,IAAMA,oBAAyD,GAAG,SAA5DA,oBAA4D,CAACC,KAAD,EAAsC;AACtG,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,SAAOA,KAAK,KAAKC,yBAASC,OAAnB,GACH,qCAAC,aAAD;AAAM,IAAA,MAAM,EAAC;AAAb,KAA2BH,KAA3B,EADG,GAEH,qCAAC,cAAD;AAAO,IAAA,KAAK,EAAC,GAAb;AAAiB,IAAA,MAAM,EAAC;AAAxB,KAAsCA,KAAtC,EAFJ;AAGD,CAND;;AAQA,IAAMI,UAAqC,GAAG,SAAxCA,UAAwC,OAWvB;AAAA,MAVrBC,KAUqB,QAVrBA,KAUqB;AAAA,MATrBC,MASqB,QATrBA,MASqB;AAAA,MARrBC,SAQqB,QARrBA,SAQqB;AAAA,MAPrBC,QAOqB,QAPrBA,QAOqB;AAAA,MANrBC,KAMqB,QANrBA,KAMqB;AAAA,MALrBC,WAKqB,QALrBA,WAKqB;AAAA,MAJrBC,UAIqB,QAJrBA,UAIqB;AAAA,MAHrBC,SAGqB,QAHrBA,SAGqB;AAAA,MAFrBX,KAEqB,QAFrBA,KAEqB;AAAA,MADlBY,SACkB;AACrB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,MAAMC,QAAQ,GAAG,yBAAaN,KAAb,KAAuBE,UAAU,IAAIG,QAAQ,KAAKE,aAAnE;;AAEA,SACE,qCAAC,iBAAD,6BACMH,SADN;AAEE,IAAA,SAAS,EACP,4BACE,gCAAa,YAAb,EAA2BC,QAA3B,CADF,EAEE;AACE,yBAAmBH,UADrB;AAEE,0BAAoBC;AAFtB,KAFF,8BAMuBX,KANvB;AAHJ,MAaGK,MAbH,EAcE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KAAwDE,QAAxD,CADF,EAEG,yBAAaH,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGA,KADH,CAHJ,CADF,EASGK,WAAW,IAAI,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC,MAAnB;AAA0B,IAAA,MAAM,EAAC,SAAjC;AAA2C,IAAA,SAAS,EAAC;AAArD,KAAgFA,WAAhF,CATlB,CAdF,EAyBG,yBAAaH,SAAb,KACC,qCAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC,MAAhC;AAAuC,IAAA,SAAS,EAAC;AAAjD,KAA0EA,SAA1E,CA1BJ,EA4BGQ,QAAQ,IACP;AAAK,IAAA,SAAS,EAAC;AAAf,KACGN,KADH,EAEGE,UAAU,IAAIG,QAAQ,KAAKE,aAA3B,IAAkC,qCAAC,oBAAD,OAFrC,CA7BJ,CADF;AAqCD,CApDD;;eAsDe,oCAAeZ,UAAf,EAA2B;AAAEH,EAAAA,KAAK,EAAE;AAAT,CAA3B,C","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getClassName } from '../../helpers/getClassName';\nimport Tappable, { TappableProps } from '../Tappable/Tappable';\nimport { Icon24Chevron } from '@vkontakte/icons';\nimport { IOS } from '../../lib/platform';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasReactNode } from '../../lib/utils';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { withAdaptivity, SizeType } from '../../hoc/withAdaptivity';\nimport Title from '../Typography/Title/Title';\nimport Text from '../Typography/Text/Text';\nimport Subhead from '../Typography/Subhead/Subhead';\nimport './SimpleCell.css';\n\nexport interface SimpleCellOwnProps {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badge?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  description?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n  multiline?: boolean;\n  Component?: React.ElementType;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\ninterface SimpleCellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  Component?: React.ElementType;\n}\n\nconst SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (props: SimpleCellTypographyProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return sizeY === SizeType.COMPACT\n    ? <Text weight=\"regular\" {...props} />\n    : <Title level=\"3\" weight=\"regular\" {...props} />;\n};\n\nconst SimpleCell: React.FC<SimpleCellProps> = ({\n  badge,\n  before,\n  indicator,\n  children,\n  after,\n  description,\n  expandable,\n  multiline,\n  sizeY,\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || expandable && platform === IOS;\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={\n        classNames(\n          getClassName('SimpleCell', platform),\n          {\n            'SimpleCell--exp': expandable,\n            'SimpleCell--mult': multiline,\n          },\n          `SimpleCell--sizeY-${sizeY}`,\n        )\n      }\n    >\n      {before}\n      <div vkuiClass=\"SimpleCell__main\">\n        <div vkuiClass=\"SimpleCell__content\">\n          <SimpleCellTypography vkuiClass=\"SimpleCell__children\">{children}</SimpleCellTypography>\n          {hasReactNode(badge) &&\n            <span vkuiClass=\"SimpleCell__badge\">\n              {badge}\n            </span>\n          }\n        </div>\n        {description && <Subhead Component=\"span\" weight=\"regular\" vkuiClass=\"SimpleCell__description\">{description}</Subhead>}\n      </div>\n      {hasReactNode(indicator) &&\n        <SimpleCellTypography Component=\"span\" vkuiClass=\"SimpleCell__indicator\">{indicator}</SimpleCellTypography>\n      }\n      {hasAfter &&\n        <div vkuiClass=\"SimpleCell__after\">\n          {after}\n          {expandable && platform === IOS && <Icon24Chevron />}\n        </div>\n      }\n    </Tappable>\n  );\n};\n\nexport default withAdaptivity(SimpleCell, { sizeY: true });\n"],"file":"SimpleCell.js"}

package/dist/cjs/components/SimpleCheckbox/SimpleCheckbox.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
+import './SimpleCheckbox.css';
+export interface SimpleCheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
+    indeterminate?: boolean;
+    defaultIndeterminate?: boolean;
+}
+export declare const SimpleCheckbox: React.FC<SimpleCheckboxProps>;
+export default SimpleCheckbox;

package/dist/cjs/components/SimpleCheckbox/SimpleCheckbox.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SimpleCheckbox = void 0;
+
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Tappable = _interopRequireWildcard(require("../Tappable/Tappable"));
+
+var _getClassName = require("../../helpers/getClassName");
+
+var _classNames = require("../../lib/classNames");
+
+var _platform = require("../../lib/platform");
+
+var _icons = require("@vkontakte/icons");
+
+var _usePlatform = require("../../hooks/usePlatform");
+
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+
+var _useExternRef = require("../../hooks/useExternRef");
+
+var _withAdaptivity = require("../../hoc/withAdaptivity");
+
+var _warnOnce = require("../../lib/warnOnce");
+
+var _excluded = ["className", "style", "getRootRef", "getRef", "indeterminate", "defaultIndeterminate", "onChange"];
+var warn = (0, _warnOnce.warnOnce)('SimpleCheckbox');
+var IS_DEV = process.env.NODE_ENV === 'development';
+
+var SimpleCheckbox = function SimpleCheckbox(props) {
+  var className = props.className,
+      style = props.style,
+      getRootRef = props.getRootRef,
+      getRef = props.getRef,
+      indeterminate = props.indeterminate,
+      defaultIndeterminate = props.defaultIndeterminate,
+      onChange = props.onChange,
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
+  var platform = (0, _usePlatform.usePlatform)();
+  var inputRef = (0, _useExternRef.useExternRef)(getRef);
+  React.useEffect(function () {
+    var indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
+
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminateValue;
+    }
+  }, [indeterminate]);
+  var handleChange = React.useCallback(function (event) {
+    if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined) {
+      inputRef.current.indeterminate = false;
+    }
+
+    if (indeterminate !== undefined) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+
+    onChange && onChange(event);
+  }, [onChange, indeterminate, restProps.checked]);
+
+  if (IS_DEV) {
+    if (defaultIndeterminate && restProps.defaultChecked) {
+      warn('defaultIndeterminate and defaultChecked cannot be true at the same time');
+    }
+
+    if (indeterminate && restProps.checked) {
+      warn('indeterminate and checked cannot be true at the same time');
+    }
+  }
+
+  return (0, _jsxRuntime.createScopedElement)(_Tappable.default, {
+    Component: "label",
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('SimpleCheckbox', platform), "SimpleCheckbox--sizeY-".concat(sizeY)),
+    className: className,
+    style: style,
+    disabled: restProps.disabled,
+    activeMode: platform === _platform.VKCOM ? 'SimpleCheckbox--active' : 'background',
+    hoverMode: platform === _platform.VKCOM ? 'SimpleCheckbox--hover' : 'background',
+    activeEffectDelay: platform === _platform.IOS ? 100 : _Tappable.ACTIVE_EFFECT_DELAY,
+    getRootRef: getRootRef
+  }, (0, _jsxRuntime.createScopedElement)("input", (0, _extends2.default)({}, restProps, {
+    onChange: handleChange,
+    type: "checkbox",
+    vkuiClass: "SimpleCheckbox__input",
+    ref: inputRef
+  })), (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "SimpleCheckbox__container"
+  }, (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "SimpleCheckbox__icon SimpleCheckbox__icon--on"
+  }, sizeY === _withAdaptivity.SizeType.COMPACT || platform === _platform.VKCOM ? (0, _jsxRuntime.createScopedElement)(_icons.Icon20CheckBoxOn, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24CheckBoxOn, null)), (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "SimpleCheckbox__icon SimpleCheckbox__icon--off"
+  }, sizeY === _withAdaptivity.SizeType.COMPACT || platform === _platform.VKCOM ? (0, _jsxRuntime.createScopedElement)(_icons.Icon20CheckBoxOff, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24CheckBoxOff, null)), (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "SimpleCheckbox__icon SimpleCheckbox__icon--indeterminate"
+  }, (0, _jsxRuntime.createScopedElement)(_icons.Icon20CheckBoxIndetermanate, {
+    width: sizeY === _withAdaptivity.SizeType.COMPACT || platform === _platform.VKCOM ? 20 : 24,
+    height: sizeY === _withAdaptivity.SizeType.COMPACT || platform === _platform.VKCOM ? 20 : 24
+  }))), platform === _platform.VKCOM && (0, _jsxRuntime.createScopedElement)("div", {
+    "aria-hidden": true,
+    vkuiClass: "SimpleCheckbox__activeShadow"
+  }), platform === _platform.VKCOM && (0, _jsxRuntime.createScopedElement)("div", {
+    "aria-hidden": true,
+    vkuiClass: "SimpleCheckbox__hoverShadow"
+  }));
+};
+
+exports.SimpleCheckbox = SimpleCheckbox;
+var _default = SimpleCheckbox;
+exports.default = _default;
+//# sourceMappingURL=SimpleCheckbox.js.map

package/dist/cjs/components/SimpleCheckbox/SimpleCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/SimpleCheckbox/SimpleCheckbox.tsx"],"names":["warn","IS_DEV","process","env","NODE_ENV","SimpleCheckbox","props","className","style","getRootRef","getRef","indeterminate","defaultIndeterminate","onChange","restProps","sizeY","platform","inputRef","React","useEffect","indeterminateValue","undefined","current","handleChange","useCallback","event","checked","defaultChecked","disabled","VKCOM","IOS","ACTIVE_EFFECT_DELAY","SizeType","COMPACT"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Tappable, { ACTIVE_EFFECT_DELAY } from '../Tappable/Tappable';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { IOS, VKCOM } from '../../lib/platform';\n\nimport { Icon20CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOn, Icon24CheckBoxOff, Icon20CheckBoxIndetermanate } from '@vkontakte/icons';\n\nimport { HasRef, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../hoc/withAdaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\n\nimport './SimpleCheckbox.css';\n\nconst warn = warnOnce('SimpleCheckbox');\nconst IS_DEV = process.env.NODE_ENV === 'development';\n\nexport interface SimpleCheckboxProps extends\n  React.InputHTMLAttributes<HTMLInputElement>,\n  HasRootRef<HTMLLabelElement>,\n  HasRef<HTMLInputElement> {\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nexport const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (props: SimpleCheckboxProps) => {\n  const { className, style, getRootRef, getRef, indeterminate, defaultIndeterminate, onChange, ...restProps } = props;\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n  const inputRef = useExternRef(getRef);\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminateValue;\n    }\n  }, [indeterminate]);\n\n  const handleChange: SimpleCheckboxProps['onChange'] = React.useCallback((event) => {\n    if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined) {\n      inputRef.current.indeterminate = false;\n    }\n    if (indeterminate !== undefined) {\n      inputRef.current.indeterminate = indeterminate;\n    }\n    onChange && onChange(event);\n  }, [onChange, indeterminate, restProps.checked]);\n\n  if (IS_DEV) {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate and defaultChecked cannot be true at the same time');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate and checked cannot be true at the same time');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      vkuiClass={classNames(\n        getClassName('SimpleCheckbox', platform),\n        `SimpleCheckbox--sizeY-${sizeY}`,\n      )}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      activeMode={platform === VKCOM ? 'SimpleCheckbox--active' : 'background'}\n      hoverMode={platform === VKCOM ? 'SimpleCheckbox--hover' : 'background'}\n      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n    >\n      <input {...restProps} onChange={handleChange} type=\"checkbox\" vkuiClass=\"SimpleCheckbox__input\" ref={inputRef} />\n      <div vkuiClass=\"SimpleCheckbox__container\">\n        <div vkuiClass=\"SimpleCheckbox__icon SimpleCheckbox__icon--on\">\n          {sizeY === SizeType.COMPACT || platform === VKCOM\n            ? <Icon20CheckBoxOn />\n            : <Icon24CheckBoxOn />\n          }\n        </div>\n        <div vkuiClass=\"SimpleCheckbox__icon SimpleCheckbox__icon--off\">\n          {sizeY === SizeType.COMPACT || platform === VKCOM\n            ? <Icon20CheckBoxOff />\n            : <Icon24CheckBoxOff />\n          }\n        </div>\n        <div vkuiClass=\"SimpleCheckbox__icon SimpleCheckbox__icon--indeterminate\">\n          <Icon20CheckBoxIndetermanate\n            width={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}\n            height={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}\n          />\n        </div>\n      </div>\n      {platform === VKCOM && <div aria-hidden={true} vkuiClass=\"SimpleCheckbox__activeShadow\" />}\n      {platform === VKCOM && <div aria-hidden={true} vkuiClass=\"SimpleCheckbox__hoverShadow\" />}\n    </Tappable>\n  );\n};\n\nexport default SimpleCheckbox;\n"],"file":"SimpleCheckbox.js"}

package/dist/cjs/components/Snackbar/Snackbar.js

@@ -19,7 +19,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var React = _interopRequireWildcard(require("react"));
 
-var _Touch = _interopRequireDefault(require("../Touch/Touch"));
+var _Touch = require("../Touch/Touch");
 
 var _classNames = require("../../lib/classNames");
 
@@ -166,7 +166,7 @@ var SnackbarComponent = function SnackbarComponent(props) {
       'Snackbar--touched': touched,
       'Snackbar--desktop': isDesktop
     })
-  }), (0, _jsxRuntime.createScopedElement)(_Touch.default, {
+  }), (0, _jsxRuntime.createScopedElement)(_Touch.Touch, {
     vkuiClass: "Snackbar__in",
     getRootRef: innerElRef,
     onStart: onTouchStart,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":["SnackbarComponent","props","children","layout","action","before","after","viewWidth","duration","onActionClick","onClose","restProps","platform","waitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","touchStartTimeRef","bodyElRef","innerElRef","animationFrameRef","isDesktop","ViewWidth","SMALL_TABLET","transitionFinishDurationFallback","ANDROID","VKCOM","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","startT","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","Date","now","getTime","set","useEffect","resolvedLayout","displayName","defaultProps","Snackbar"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Touch, { TouchEvent } from '../Touch/Touch';\nimport { classNames } from '../../lib/classNames';\nimport { HasPlatform } from '../../types';\nimport { getClassName } from '../../helpers/getClassName';\nimport { ANDROID, VKCOM } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { withAdaptivity, AdaptivityProps, ViewWidth } from '../../hoc/withAdaptivity';\nimport Text from '../Typography/Text/Text';\nimport Button from '../Button/Button';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport './Snackbar.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement>, HasPlatform, AdaptivityProps {\n  /**\n   * Название кнопки действия в уведомлении\n   */\n  action?: string | React.ComponentType;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n}\n\nconst SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {\n  const {\n    children,\n    layout,\n    action,\n    before,\n    after,\n    viewWidth,\n    duration,\n    onActionClick,\n    onClose,\n    ...restProps\n  } = props;\n\n  const platform = usePlatform();\n\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n  const touchStartTimeRef = React.useRef<Date | null>(null);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const transitionFinishDurationFallback = platform === ANDROID || platform === VKCOM ? 400 : 320;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(innerElRef.current, () => {\n      onClose();\n    }, transitionFinishDurationFallback);\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    cancelAnimationFrame(animationFrameRef.current);\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, startT, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = shiftX / bodyElRef.current.offsetWidth * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform === ANDROID || platform === VKCOM);\n    touchStartTimeRef.current = startT;\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = () => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = shiftXCurrent / (Date.now() - touchStartTimeRef.current.getTime()) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(bodyElRef.current, () => {\n          onClose();\n        }, transitionFinishDurationFallback);\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(bodyElRef.current, () => {\n          onClose();\n        }, transitionFinishDurationFallback);\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(closeTimeout.set, []);\n\n  const resolvedLayout = after || isDesktop ? 'vertical' : layout;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        vkuiClass={classNames(getClassName('Snackbar', platform), `Snackbar--l-${resolvedLayout}`, {\n          'Snackbar--closing': closing,\n          'Snackbar--touched': touched,\n          'Snackbar--desktop': isDesktop,\n        })}\n      >\n        <Touch\n          vkuiClass=\"Snackbar__in\"\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div vkuiClass=\"Snackbar__body\" ref={bodyElRef}>\n            {before &&\n            <div vkuiClass=\"Snackbar__before\">\n              {before}\n            </div>}\n\n            <div vkuiClass=\"Snackbar__content\">\n              <Text weight=\"regular\" vkuiClass=\"Snackbar__content-text\">{children}</Text>\n\n              {action &&\n              <Button align=\"left\" hasHover={false} mode=\"tertiary\" size=\"s\" vkuiClass=\"Snackbar__action\" onClick={handleActionClick}>\n                {action}\n              </Button>}\n            </div>\n\n            {after &&\n            <div vkuiClass=\"Snackbar__after\">\n              {after}\n            </div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n\nSnackbarComponent.displayName = 'Snackbar';\n\nSnackbarComponent.defaultProps = {\n  duration: 4000,\n  layout: 'horizontal',\n};\n\nexport const Snackbar = withAdaptivity(SnackbarComponent, {\n  viewWidth: true,\n});\n"],"file":"Snackbar.js"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":["SnackbarComponent","props","children","layout","action","before","after","viewWidth","duration","onActionClick","onClose","restProps","platform","waitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","touchStartTimeRef","bodyElRef","innerElRef","animationFrameRef","isDesktop","ViewWidth","SMALL_TABLET","transitionFinishDurationFallback","ANDROID","VKCOM","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","startT","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","Date","now","getTime","set","useEffect","resolvedLayout","displayName","defaultProps","Snackbar"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { classNames } from '../../lib/classNames';\nimport { HasPlatform } from '../../types';\nimport { getClassName } from '../../helpers/getClassName';\nimport { ANDROID, VKCOM } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { withAdaptivity, AdaptivityProps, ViewWidth } from '../../hoc/withAdaptivity';\nimport Text from '../Typography/Text/Text';\nimport Button from '../Button/Button';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport './Snackbar.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement>, HasPlatform, AdaptivityProps {\n  /**\n   * Название кнопки действия в уведомлении\n   */\n  action?: string | React.ComponentType;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n}\n\nconst SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {\n  const {\n    children,\n    layout,\n    action,\n    before,\n    after,\n    viewWidth,\n    duration,\n    onActionClick,\n    onClose,\n    ...restProps\n  } = props;\n\n  const platform = usePlatform();\n\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n  const touchStartTimeRef = React.useRef<Date | null>(null);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const transitionFinishDurationFallback = platform === ANDROID || platform === VKCOM ? 400 : 320;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(innerElRef.current, () => {\n      onClose();\n    }, transitionFinishDurationFallback);\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    cancelAnimationFrame(animationFrameRef.current);\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, startT, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = shiftX / bodyElRef.current.offsetWidth * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform === ANDROID || platform === VKCOM);\n    touchStartTimeRef.current = startT;\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = () => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = shiftXCurrent / (Date.now() - touchStartTimeRef.current.getTime()) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(bodyElRef.current, () => {\n          onClose();\n        }, transitionFinishDurationFallback);\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(bodyElRef.current, () => {\n          onClose();\n        }, transitionFinishDurationFallback);\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(closeTimeout.set, []);\n\n  const resolvedLayout = after || isDesktop ? 'vertical' : layout;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        vkuiClass={classNames(getClassName('Snackbar', platform), `Snackbar--l-${resolvedLayout}`, {\n          'Snackbar--closing': closing,\n          'Snackbar--touched': touched,\n          'Snackbar--desktop': isDesktop,\n        })}\n      >\n        <Touch\n          vkuiClass=\"Snackbar__in\"\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div vkuiClass=\"Snackbar__body\" ref={bodyElRef}>\n            {before &&\n            <div vkuiClass=\"Snackbar__before\">\n              {before}\n            </div>}\n\n            <div vkuiClass=\"Snackbar__content\">\n              <Text weight=\"regular\" vkuiClass=\"Snackbar__content-text\">{children}</Text>\n\n              {action &&\n              <Button align=\"left\" hasHover={false} mode=\"tertiary\" size=\"s\" vkuiClass=\"Snackbar__action\" onClick={handleActionClick}>\n                {action}\n              </Button>}\n            </div>\n\n            {after &&\n            <div vkuiClass=\"Snackbar__after\">\n              {after}\n            </div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n\nSnackbarComponent.displayName = 'Snackbar';\n\nSnackbarComponent.defaultProps = {\n  duration: 4000,\n  layout: 'horizontal',\n};\n\nexport const Snackbar = withAdaptivity(SnackbarComponent, {\n  viewWidth: true,\n});\n"],"file":"Snackbar.js"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TouchEventHandler, TouchProps } from '../Touch/Touch';
 import { VKUITouchEventHander } from '../../lib/touch';
-import { HasPlatform, HasRootRef, Ref } from '../../types';
+import { HasPlatform, HasRootRef } from '../../types';
 import { AdaptivityProps } from '../../hoc/withAdaptivity';
 import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
 import './Tappable.css';
@@ -33,13 +33,13 @@ export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, Has
      */
     focusVisibleMode?: FocusVisibleMode;
 }
+interface Wave {
+    x: number;
+    y: number;
+    id: string;
+}
 export interface TappableState {
-    clicks?: {
-        [index: string]: {
-            x: number;
-            y: number;
-        };
-    };
+    clicks?: Wave[];
     hovered?: boolean;
     active?: boolean;
     ts?: number;
@@ -47,7 +47,7 @@ export interface TappableState {
     hasActive?: boolean;
 }
 export interface RootComponentProps extends TouchProps {
-    ref?: Ref<HTMLElement>;
+    ref?: React.Ref<HTMLElement>;
 }
 export interface StorageItem {
     activeTimeout: ReturnType<typeof setTimeout>;
@@ -67,7 +67,6 @@ declare class Tappable extends React.Component<TappableProps, TappableState> {
     insideTouchRoot: boolean;
     container: HTMLElement;
     timeout: ReturnType<typeof setTimeout>;
-    wavesTimeout: ReturnType<typeof setTimeout>;
     static defaultProps: {
         stopPropagation: boolean;
         disabled: boolean;
@@ -91,7 +90,11 @@ declare class Tappable extends React.Component<TappableProps, TappableState> {
     getRef: React.RefCallback<HTMLElement>;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: TappableProps): void;
+    removeWave(id: Wave['id']): void;
     render(): JSX.Element;
 }
 declare const _default: typeof Tappable;
 export default _default;
+declare function Wave({ x, y, onClear }: Wave & {
+    onClear: VoidFunction;
+}): JSX.Element;

package/dist/cjs/components/Tappable/Tappable.js

@@ -15,7 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -31,7 +31,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var React = _interopRequireWildcard(require("react"));
 
-var _Touch = _interopRequireDefault(require("../Touch/Touch"));
+var _Touch = require("../Touch/Touch");
 
 var _TouchContext = _interopRequireDefault(require("../Touch/TouchContext"));
 
@@ -57,6 +57,8 @@ var _accessibility = require("../../lib/accessibility");
 
 var _FocusVisible = require("../FocusVisible/FocusVisible");
 
+var _useTimeout = require("../../hooks/useTimeout");
+
 var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "platform", "sizeX", "hasMouse", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode"];
 
 var ts = function ts() {
@@ -102,7 +104,6 @@ var Tappable = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insideTouchRoot", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "container", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timeout", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wavesTimeout", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (e) {
       var onKeyDown = _this.props.onKeyDown;
 
@@ -201,26 +202,14 @@ var Tappable = /*#__PURE__*/function (_React$Component) {
 
         var x = (0, _touch.coordX)(e) - left;
         var y = (0, _touch.coordY)(e) - top;
-        var key = 'wave' + Date.now().toString();
-
-        _this.setState(function (state) {
-          return {
-            clicks: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.clicks), {}, (0, _defineProperty2.default)({}, key, {
-              x: x,
-              y: y
-            }))
-          };
-        });
 
-        _this.wavesTimeout = setTimeout(function () {
-          _this.setState(function (state) {
-            var clicks = (0, _objectSpread3.default)({}, state.clicks);
-            delete clicks[key];
-            return {
-              clicks: clicks
-            };
-          });
-        }, 225);
+        _this.setState({
+          clicks: [].concat((0, _toConsumableArray2.default)(_this.state.clicks), [{
+            x: x,
+            y: y,
+            id: Date.now().toString()
+          }])
+        });
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEnter", function () {
@@ -265,7 +254,7 @@ var Tappable = /*#__PURE__*/function (_React$Component) {
     });
     _this.id = Math.round(Math.random() * 1e8).toString(16);
     _this.state = {
-      clicks: {},
+      clicks: [],
       active: false,
       ts: null,
       hasHover: props.hasHover,
@@ -283,8 +272,6 @@ var Tappable = /*#__PURE__*/function (_React$Component) {
         clearTimeout(storage[this.id].activeTimeout);
         delete storage[this.id];
       }
-
-      clearTimeout(this.wavesTimeout);
     }
   }, {
     key: "componentDidUpdate",
@@ -302,6 +289,15 @@ var Tappable = /*#__PURE__*/function (_React$Component) {
         });
       }
     }
+  }, {
+    key: "removeWave",
+    value: function removeWave(id) {
+      this.setState({
+        clicks: this.state.clicks.filter(function (c) {
+          return c.id !== id;
+        })
+      });
+    }
   }, {
     key: "render",
     value: function render() {
@@ -341,7 +337,7 @@ var Tappable = /*#__PURE__*/function (_React$Component) {
         'Tappable--inactive': !active,
         'Tappable--mouse': hasMouse
       }, (0, _defineProperty2.default)(_classNames, "Tappable--hover-".concat(hoverMode), hasHover && hovered && isPresetHoverMode), (0, _defineProperty2.default)(_classNames, "Tappable--active-".concat(activeMode), hasActive && active && isPresetActiveMode), (0, _defineProperty2.default)(_classNames, hoverMode, hasHover && hovered && !isPresetHoverMode), (0, _defineProperty2.default)(_classNames, activeMode, hasActive && active && !isPresetActiveMode), _classNames));
-      var RootComponent = restProps.disabled ? Component : _Touch.default;
+      var RootComponent = restProps.disabled ? Component : _Touch.Touch;
       var props = {};
 
       if (!restProps.disabled) {
@@ -406,16 +402,14 @@ var Tappable = /*#__PURE__*/function (_React$Component) {
           }, children), platform === _platform.ANDROID && !hasMouse && hasActive && activeMode === 'background' && (0, _jsxRuntime.createScopedElement)("span", {
             "aria-hidden": "true",
             vkuiClass: "Tappable__waves"
-          }, Object.keys(clicks).map(function (k) {
-            return (0, _jsxRuntime.createScopedElement)("span", {
-              vkuiClass: "Tappable__wave",
-              style: {
-                top: clicks[k].y,
-                left: clicks[k].x
-              },
-              key: k
-            });
-          })), hasHover && (0, _jsxRuntime.createScopedElement)("span", {
+          }, clicks.map(function (wave) {
+            return (0, _jsxRuntime.createScopedElement)(Wave, (0, _extends2.default)({}, wave, {
+              key: wave.id,
+              onClear: function onClear() {
+                return _this2.removeWave(wave.id);
+              }
+            }));
+          })), hasHover && hoverMode === 'background' && (0, _jsxRuntime.createScopedElement)("span", {
             "aria-hidden": "true",
             vkuiClass: "Tappable__hoverShadow"
           }), !restProps.disabled && (0, _jsxRuntime.createScopedElement)(_FocusVisible.FocusVisible, {
@@ -445,4 +439,21 @@ var _default = (0, _withAdaptivity.withAdaptivity)((0, _withPlatform.withPlatfor
 });
 
 exports.default = _default;
+
+function Wave(_ref5) {
+  var x = _ref5.x,
+      y = _ref5.y,
+      onClear = _ref5.onClear;
+  var timeout = (0, _useTimeout.useTimeout)(onClear, 225);
+  React.useEffect(function () {
+    return timeout.set();
+  }, []);
+  return (0, _jsxRuntime.createScopedElement)("span", {
+    vkuiClass: "Tappable__wave",
+    style: {
+      top: y,
+      left: x
+    }
+  });
+}
 //# sourceMappingURL=Tappable.js.map