@vkontakte/vkui 5.7.2 → 5.8.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  offsetY,\n  style,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\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\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 transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\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    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\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, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\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(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n        style={offsetY ? { ...style, bottom: offsetY } : style}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","offsetY","style","restProps","platform","usePlatform","viewWidth","useAdaptivityWithJSMediaQueries","isDesktop","ViewWidth","SMALL_TABLET","waitTransitionFinish","useWaitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","AppRootPortal","div","classNames","vertical","horizontal","bottom","Touch","getRootRef","onStart","onMoveX","onEnd","ref","Paragraph","Subhead","Button","align","appearance","size","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nconst stylesLayout = {\n  vertical: styles['Snackbar--layout-vertical'],\n  horizontal: styles['Snackbar--layout-horizontal'],\n};\n\nexport interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\n  style,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\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\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 transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\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    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\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, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\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(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          stylesLayout[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n        )}\n        style={offsetY ? { ...style, bottom: offsetY } : style}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </RootComponent>\n    </AppRootPortal>\n  );\n};\n"],"names":["Snackbar","stylesLayout","vertical","horizontal","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","style","restProps","platform","usePlatform","viewWidth","useAdaptivityWithJSMediaQueries","isDesktop","ViewWidth","SMALL_TABLET","waitTransitionFinish","useWaitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","AppRootPortal","RootComponent","baseClassName","classNames","bottom","Touch","className","getRootRef","onStart","onMoveX","onEnd","div","ref","Paragraph","Subhead","Button","align","appearance","size","onClick"],"mappings":";;;;+BA6EaA;;;eAAAA;;;;;;;;+DA7EU;oBACI;+CACqB;2BACpB;0BACD;uCACa;0BACd;wBACD;qBACF;6BAEO;sBACP;6BACO;qBACI;yBACR;uBACF;AAGxB,IAAMC,eAAe;IACnBC,QAAQ;IACRC,UAAU;AACZ;AAwDO,IAAMH,WAAW;QACtBI,kBAAAA,UACQC,aAARC,QAAQD,cAAAA,iBAAc,eAAdA,KACRE,gBAAAA,QACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,wBACXC,uBAAAA,eACAC,iBAAAA,8BACAC,MAAAA,gCAAO,yBACPC,kBAAAA,UACAC,iBAAAA,SACAC,eAAAA,OACGC;QAZHb;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAAM,AAAEC,YAAcC,IAAAA,gEAA+B,IAA7CD;IACR,IAAME,YAAYF,aAAaG,qBAAS,CAACC,YAAY;IACrD,IAAM,AAAEC,uBAAyBC,IAAAA,gDAAuB,IAAhDD;IAER,IAA8BE,qCAAAA,OAAMC,QAAQ,CAAC,YAAtCC,UAAuBF,oBAAdG,aAAcH;IAC9B,IAA8BA,sCAAAA,OAAMC,QAAQ,CAAC,YAAtCG,UAAuBJ,qBAAdK,aAAcL;IAE9B,IAAMM,mBAAmBN,OAAMO,MAAM,CAAS;IAC9C,IAAMC,mBAAmBR,OAAMO,MAAM,CAAS;IAE9C,IAAME,YAAYT,OAAMO,MAAM,CAAwB;IACtD,IAAMG,aAAaV,OAAMO,MAAM,CAAwB;IAEvD,IAAMI,oBAAoBX,OAAMO,MAAM,CAAkD;IAExF,IAAMK,mCAAmCrB,aAAasB,kBAAQ,CAACC,GAAG,GAAG,MAAM;IAE3E,IAAMC,QAAQ;QACZZ,WAAW;QACXL,qBACEY,WAAWM,OAAO,EAClB;YACE/B;QACF,GACA2B;IAEJ;IAEA,IAAMK,oBAA0D,SAACC;QAC/DH;QAEA,IAAInC,UAAU,OAAOI,kBAAkB,YAAY;YACjDA,cAAckC;QAChB;IACF;IAEA,IAAMC,eAAeC,IAAAA,sBAAU,EAACL,OAAOhC;IAEvC,IAAMsC,mBAAmB,SAACC;QACxB,IAAIX,kBAAkBK,OAAO,KAAK,MAAM;YACtCO,qBAAqBZ,kBAAkBK,OAAO;QAChD;QACAL,kBAAkBK,OAAO,GAAGQ,sBAAsB;YAChD,IAAIf,UAAUO,OAAO,EAAE;gBACrBP,UAAUO,OAAO,CAAC3B,KAAK,CAACoC,SAAS,GAAG,AAAC,eAAsB,OAARH,SAAQ;YAC7D;QACF;IACF;IAEA,IAAMI,eAAeP,aAAaQ,KAAK;IAEvC,IAAMC,eAAe,SAACC;YAQkBpB;QAPtC,IAAQqB,SAA0BD,MAA1BC,QAAQC,gBAAkBF,MAAlBE;QAChBA,cAAcC,cAAc;QAE5B,IAAI,CAAC5B,SAAS;YACZC,WAAW;QACb;YAEsCI;QAAtCH,iBAAiBU,OAAO,GAAG,AAACc,SAAUrB,CAAAA,CAAAA,kCAAAA,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBwB,WAAW,cAA9BxB,4CAAAA,iCAAkC,CAAA,IAAM;QAC9ED,iBAAiBQ,OAAO,GAAGkB,IAAAA,aAAM,EAAC5B,iBAAiBU,OAAO,EAAE,IAAI,KAAKzB,aAAasB,kBAAQ,CAACC,GAAG;QAE9FO,iBAAiBb,iBAAiBQ,OAAO;IAC3C;IAEA,IAAMmB,aAAa,SAACjB;QAClB,IAAIkB;QAEJ,IAAIhC,SAAS;YACX,IAAIiC,gBAAgB7B,iBAAiBQ,OAAO;YAC5C,IAAMsB,mBAAmB,AAACD,gBAAgBnB,EAAEnC,QAAQ,GAAI,MAAM;YAC9DsD,gBAAgBA,gBAAgBC;YAEhC,IAAI3C,aAAa0C,iBAAiB,CAAC,IAAI;gBACrClB,aAAaQ,KAAK;gBAClB7B,qBACEW,UAAUO,OAAO,EACjB;oBACE/B;gBACF,GACA2B;gBAEFS,iBAAiB,CAAC;YACpB,OAAO,IAAI,CAAC1B,aAAa0C,iBAAiB,IAAI;gBAC5ClB,aAAaQ,KAAK;gBAClB7B,qBACEW,UAAUO,OAAO,EACjB;oBACE/B;gBACF,GACA2B;gBAEFS,iBAAiB;YACnB,OAAO;gBACLe,WAAW;oBACTjB,aAAaoB,GAAG;oBAChBlB,iBAAiB;gBACnB;YACF;QACF,OAAO;YACLF,aAAaoB,GAAG;QAClB;QAEAlC,WAAW;QACX+B,YAAYZ,sBAAsBY;IACpC;IAEApC,OAAMwC,SAAS,CAAC;eAAMrB,aAAaoB,GAAG;OAAI;QAACpB;KAAa;IAExD,IAAMxC,SAASG,SAASa,aAAaR,WAAW,aAAaT;IAE7D,qBACE,qBAAC+D,4BAAa,sBACZ,qBAACC,4BAAa,8CACRpD;QACJqD,eAAeC,IAAAA,gBAAU,kBAEvBrD,aAAasB,kBAAQ,CAACC,GAAG,yBACzBxC,YAAY,CAACK,OAAO,EACpBO,SAAS,qCACTgB,oCACAE,oCACAT;QAEFN,OAAOD,UAAU,4CAAKC;YAAOwD,QAAQzD;aAAYC;sBAEjD,qBAACyD,YAAK;QACJC,SAAS;QACTC,YAAYtC;QACZuC,SAASvB;QACTwB,SAAStB;QACTuB,OAAOhB;qBAEP,qBAACiB;QAAIL,SAAS;QAA4BM,KAAK5C;OAC5C5B,wBAAU,qBAACuE;QAAIL,SAAS;OAA+BlE,uBAExD,qBAACuE;QAAIL,SAAS;qBACZ,qBAACO,oBAAS;QAACP,SAAS;OAAqCtE,WACxDU,YAAY,CAACP,wBACZ,qBAAC2E,gBAAO;QAACR,SAAS;OAAyC5D,WAG5DP,UAAU,CAACO,0BACV,qBAACqE,cAAM;QACLC,OAAM;QACNvE,MAAK;QACLwE,YAAYxE,SAAS,SAAS,YAAY;QAC1CyE,MAAK;QACLZ,SAAS;QACTa,SAAS3C;OAERrC,UAKNE,uBAAS,qBAACsE;QAAIL,SAAS;OAA8BjE;AAMlE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasChildren } from '../../types';
-export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Высота спэйсинга
      */
@@ -9,4 +9,4 @@ export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasC
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export declare const Spacing: ({ size, style: styleProp, className, ...restProps }: SpacingProps) => React.JSX.Element;
+export declare const Spacing: ({ size, style: styleProp, ...restProps }: SpacingProps) => React.JSX.Element;

package/dist/cjs/components/Spacing/Spacing.js

@@ -13,19 +13,18 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
 var Spacing = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? 8 : _param_size, styleProp = _param.style, className = _param.className, restProps = _object_without_properties._(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? 8 : _param_size, styleProp = _param.style, restProps = _object_without_properties._(_param, [
         "size",
-        "style",
-        "className"
+        "style"
     ]);
     var style = _object_spread._({
         height: size,
         padding: "".concat(size / 2, "px 0")
     }, styleProp);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)(className, "vkuiSpacing"),
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: "vkuiSpacing",
         style: style
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["Spacing","size","style","styleProp","className","restProps","height","padding","div","classNames"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;AAcpB,IAAMA,UAAU;6BAAGC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,qBAACK,mDAAQH;QAAWD,WAAWK,IAAAA,gBAAU,EAACL;QAA+BF,OAAOA;;AACzF"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <RootComponent {...restProps} baseClassName={styles['Spacing']} style={style} />;\n};\n"],"names":["Spacing","size","style","styleProp","restProps","height","padding","RootComponent","baseClassName"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;6BAEO;AAavB,IAAMA,UAAU;6BAAGC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAqBE;QAA/BH;QAAUC;;IAClC,IAAMA,QAA6B;QACjCG,QAAQJ;QACRK,SAAS,AAAC,GAAW,OAATL,OAAO,GAAE;OAClBE;IAGL,qBAAO,qBAACI,4BAAa,8CAAKH;QAAWI,aAAa;QAAqBN,OAAOA;;AAChF"}

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
     size?: 'small' | 'regular' | 'medium' | 'large';
     disableAnimation?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */
-export declare const Spinner: React.MemoExoticComponent<({ size, children, "aria-label": ariaLabel, disableAnimation, className, ...restProps }: SpinnerProps) => React.JSX.Element>;
+export declare const Spinner: React.MemoExoticComponent<({ size, children, "aria-label": ariaLabel, disableAnimation, ...restProps }: SpinnerProps) => React.JSX.Element>;

package/dist/cjs/components/Spinner/Spinner.js

@@ -14,18 +14,17 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
-var _vkjs = require("@vkontakte/vkjs");
 var _warnOnce = require("../../lib/warnOnce");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var warn = (0, _warnOnce.warnOnce)("Spinner");
 var Spinner = /*#__PURE__*/ _react.memo(function(_param) {
     var _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, _param_children = _param.children, children = _param_children === void 0 ? "Загружается..." : _param_children, tmp = _param[// TODO [>=6]: Удалить автоматическое приведение aria-label
-    "aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, disableAnimation = _param.disableAnimation, className = _param.className, restProps = _object_without_properties._(_param, [
+    "aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, disableAnimation = _param.disableAnimation, restProps = _object_without_properties._(_param, [
         "size",
         "children",
         "aria-label",
-        "disableAnimation",
-        "className"
+        "disableAnimation"
     ]);
     var SpinnerIcon = {
         small: _icons.Icon16Spinner,
@@ -45,10 +44,11 @@ var Spinner = /*#__PURE__*/ _react.memo(function(_param) {
             warn("a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.");
         }
     }
-    return /*#__PURE__*/ _react.createElement("span", _object_spread_props._(_object_spread._({
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
+        Component: "span",
         role: "status"
     }, restProps), {
-        className: (0, _vkjs.classNames)("vkuiSpinner", className)
+        baseClassName: "vkuiSpinner"
     }), /*#__PURE__*/ _react.createElement(SpinnerIcon, null, !disableAnimation && // TODO [a11y]: use reduced motion hook?
     //              https://github.com/VKCOM/VKUI/pull/4673
     /*#__PURE__*/ _react.createElement("animateTransform", {

package/dist/cjs/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 { 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  disableAnimation?: boolean;\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    disableAnimation,\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    const center = {\n      small: 8,\n      regular: 12,\n      medium: 16,\n      large: 22,\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>\n          {!disableAnimation && (\n            // TODO [a11y]: use reduced motion hook?\n            //              https://github.com/VKCOM/VKUI/pull/4673\n            <animateTransform\n              attributeName=\"transform\"\n              attributeType=\"XML\"\n              type=\"rotate\"\n              from={`0 ${center} ${center}`}\n              to={`360 ${center} ${center}`}\n              dur=\"0.7s\"\n              repeatCount=\"indefinite\"\n            />\n          )}\n        </SpinnerIcon>\n        <VisuallyHidden>{children ?? ariaLabel}</VisuallyHidden>\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["Spinner","warn","warnOnce","React","memo","size","children","ariaLabel","disableAnimation","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","center","process","env","NODE_ENV","span","role","classNames","animateTransform","attributeName","attributeType","type","from","to","dur","repeatCount","VisuallyHidden","displayName"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;+DAhBU;qBACoD;oBAChD;wBACF;8BACM;AAQ/B,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAIf,IAAMF,wBAAUG,OAAMC,IAAI,CAC/B;6BACEC,MAAAA,gCAAO,kDACPC,UAAAA,wCAAW,oCAEGC,aADd,2DAA2D;IAC3D,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,0BAAAA,kBACAC,mBAAAA,WACGC;QANHL;QACAC;QAEA;QACAE;QACAC;;IAGA,IAAME,cAAc;QAClBC,OAAOC,oBAAa;QACpBC,SAASC,oBAAa;QACtBC,QAAQC,oBAAa;QACrBC,OAAOC,oBAAa;IACtB,CAAC,CAACd,KAAK;IAEP,IAAMe,SAAS;QACbR,OAAO;QACPE,SAAS;QACTE,QAAQ;QACRE,OAAO;IACT,CAAC,CAACb,KAAK;IAEP,8BAA8B;IAC9B,IAAIgB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIhB,aAAa,CAACD,UAAU;YAC1BL,KACE;QAEJ;IACF;IAEA,qBACE,qBAACuB;QAAKC,MAAK;OAAaf;QAAWD,WAAWiB,IAAAA,gBAAU,iBAAoBjB;sBAC1E,qBAACE,mBACE,CAACH,oBACA,wCAAwC;IACxC,uDAAuD;kBACvD,qBAACmB;QACCC,eAAc;QACdC,eAAc;QACdC,MAAK;QACLC,MAAM,AAAC,KAAcX,OAAVA,QAAO,KAAU,OAAPA;QACrBY,IAAI,AAAC,OAAgBZ,OAAVA,QAAO,KAAU,OAAPA;QACrBa,KAAI;QACJC,aAAY;uBAIlB,qBAACC,8BAAc,QAAE7B,qBAAAA,sBAAAA,WAAYC;AAGnC;AAGFP,QAAQoC,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n  disableAnimation?: boolean;\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    disableAnimation,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    const center = {\n      small: 8,\n      regular: 12,\n      medium: 16,\n      large: 22,\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      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={styles['Spinner']}\n      >\n        <SpinnerIcon>\n          {!disableAnimation && (\n            // TODO [a11y]: use reduced motion hook?\n            //              https://github.com/VKCOM/VKUI/pull/4673\n            <animateTransform\n              attributeName=\"transform\"\n              attributeType=\"XML\"\n              type=\"rotate\"\n              from={`0 ${center} ${center}`}\n              to={`360 ${center} ${center}`}\n              dur=\"0.7s\"\n              repeatCount=\"indefinite\"\n            />\n          )}\n        </SpinnerIcon>\n        <VisuallyHidden>{children ?? ariaLabel}</VisuallyHidden>\n      </RootComponent>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["Spinner","warn","warnOnce","React","memo","size","children","ariaLabel","disableAnimation","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","center","process","env","NODE_ENV","RootComponent","Component","role","baseClassName","animateTransform","attributeName","attributeType","type","from","to","dur","repeatCount","VisuallyHidden","displayName"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;+DAjBU;qBACoD;wBAClD;6BAEK;8BACC;AAQ/B,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAIf,IAAMF,wBAAUG,OAAMC,IAAI,CAC/B;6BACEC,MAAAA,gCAAO,kDACPC,UAAAA,wCAAW,oCAEGC,aADd,2DAA2D;IAC3D,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,0BAAAA,kBACGC;QALHJ;QACAC;QAEA;QACAE;;IAGA,IAAME,cAAc;QAClBC,OAAOC,oBAAa;QACpBC,SAASC,oBAAa;QACtBC,QAAQC,oBAAa;QACrBC,OAAOC,oBAAa;IACtB,CAAC,CAACb,KAAK;IAEP,IAAMc,SAAS;QACbR,OAAO;QACPE,SAAS;QACTE,QAAQ;QACRE,OAAO;IACT,CAAC,CAACZ,KAAK;IAEP,8BAA8B;IAC9B,IAAIe,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIf,aAAa,CAACD,UAAU;YAC1BL,KACE;QAEJ;IACF;IAEA,qBACE,qBAACsB,4BAAa;QACZC,WAAU;QACVC,MAAK;OACDhB;QACJiB,aAAa;sBAEb,qBAAChB,mBACE,CAACF,oBACA,wCAAwC;IACxC,uDAAuD;kBACvD,qBAACmB;QACCC,eAAc;QACdC,eAAc;QACdC,MAAK;QACLC,MAAM,AAAC,KAAcZ,OAAVA,QAAO,KAAU,OAAPA;QACrBa,IAAI,AAAC,OAAgBb,OAAVA,QAAO,KAAU,OAAPA;QACrBc,KAAI;QACJC,aAAY;uBAIlB,qBAACC,8BAAc,QAAE7B,qBAAAA,sBAAAA,WAAYC;AAGnC;AAGFP,QAAQoC,WAAW,GAAG"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     width?: number | string;
     maxWidth?: number | string;
     minWidth?: number | string;

package/dist/cjs/components/SplitCol/SplitCol.js

@@ -16,11 +16,13 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
+var _useExternRef = require("../../hooks/useExternRef");
 var _useMediaQueries = require("../../hooks/useMediaQueries");
 var _useObjectMemo = require("../../hooks/useObjectMemo");
 var _adaptivity = require("../../lib/adaptivity");
 var _matchMedia = require("../../lib/matchMedia");
 var _warnOnce = require("../../lib/warnOnce");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _SplitColContext = require("./SplitColContext");
 var breakpointClassNames = {
     none: (0, _vkjs.classNames)("vkuiSplitCol--viewWidth-none", "vkuiInternalSplitCol--viewWidth-none"),
@@ -59,7 +61,7 @@ function useTransitionAnimate(animateProp) {
 }
 var warn = (0, _warnOnce.warnOnce)("SplitCol");
 var SplitCol = function(props) {
-    var children = props.children, width = props.width, maxWidth = props.maxWidth, minWidth = props.minWidth, spaced = props.spaced, animateProp = props.animate, fixed = props.fixed, style = props.style, autoSpaced = props.autoSpaced, stretchedOnMobile = props.stretchedOnMobile, className = props.className, restProps = _object_without_properties._(props, [
+    var children = props.children, width = props.width, maxWidth = props.maxWidth, minWidth = props.minWidth, spaced = props.spaced, animateProp = props.animate, fixed = props.fixed, style = props.style, autoSpaced = props.autoSpaced, stretchedOnMobile = props.stretchedOnMobile, getRootRef = props.getRootRef, restProps = _object_without_properties._(props, [
         "children",
         "width",
         "maxWidth",
@@ -70,9 +72,9 @@ var SplitCol = function(props) {
         "style",
         "autoSpaced",
         "stretchedOnMobile",
-        "className"
+        "getRootRef"
     ]);
-    var baseRef = _react.useRef(null);
+    var baseRef = (0, _useExternRef.useExternRef)(getRootRef);
     var viewWidth = (0, _useAdaptivity.useAdaptivity)().viewWidth;
     var animate = useTransitionAnimate(animateProp);
     var contextValue = (0, _useObjectMemo.useObjectMemo)({
@@ -83,14 +85,14 @@ var SplitCol = function(props) {
         // TODO [>=6]: Удалить spaced
         warn("Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced");
     }
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         style: _object_spread_props._(_object_spread._({}, style), {
             width: width,
             maxWidth: maxWidth,
             minWidth: minWidth
         }),
-        ref: baseRef,
-        className: (0, _vkjs.classNames)("vkuiSplitCol", (0, _adaptivity.viewWidthToClassName)(breakpointClassNames, viewWidth), spaced && (0, _vkjs.classNames)("vkuiSplitCol--spaced", "vkuiInternalSplitCol--spaced"), spaced === undefined && (0, _vkjs.classNames)("vkuiSplitCol--spaced-none", "vkuiInternalSplitCol--spaced-none"), autoSpaced && (0, _vkjs.classNames)("vkuiSplitCol--spaced-auto", "vkuiInternalSplitCol--spaced-auto"), fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
+        getRootRef: baseRef,
+        baseClassName: (0, _vkjs.classNames)("vkuiSplitCol", (0, _adaptivity.viewWidthToClassName)(breakpointClassNames, viewWidth), spaced && (0, _vkjs.classNames)("vkuiSplitCol--spaced", "vkuiInternalSplitCol--spaced"), spaced === undefined && (0, _vkjs.classNames)("vkuiSplitCol--spaced-none", "vkuiInternalSplitCol--spaced-none"), autoSpaced && (0, _vkjs.classNames)("vkuiSplitCol--spaced-auto", "vkuiInternalSplitCol--spaced-auto"), fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile")
     }), /*#__PURE__*/ _react.createElement(_SplitColContext.SplitColContext.Provider, {
         value: contextValue
     }, fixed ? /*#__PURE__*/ _react.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["SplitCol","breakpointClassNames","none","classNames","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useAdaptivity","React","useState","Boolean","animate","setAnimate","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","matches","matchMediaListAddListener","matchMediaListRemoveListener","warn","warnOnce","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","useObjectMemo","colRef","process","env","NODE_ENV","div","ref","viewWidthToClassName","SplitColContext","Provider","value"],"mappings":";;;;+BA6EaA;;;eAAAA;;;;;;;;+DA7EU;oBACI;6BACG;+BACE;6BACF;0BACkB;0BACwB;wBAC/C;+BACO;AAGhC,IAAMC,uBAAuB;IAC3BC,MAAMC,IAAAA,gBAAU,kCAAqC;IACrDC,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,IAAM,AAAEC,YAAcC,IAAAA,4BAAa,IAA3BD;IACR,IAA8BE,qCAAAA,OAAMC,QAAQ,CAACC,QAAQL,mBAA9CM,UAAuBH,oBAAdI,aAAcJ;IAC9B,IAAMK,eAAeC,IAAAA,gCAAe;IAEpCN,OAAMO,SAAS,CAAC;QACd,IAAIV,gBAAgBW,WAAW;YAC7BJ,WAAWP;YACX;QACF;QAEA,IAAIC,cAAcU,WAAW;YAC3BJ,WAAWN,YAAYW,qBAAS,CAACC,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,IAAMC,WAAW;mBAAMP,WAAW,CAACC,aAAaX,eAAe,CAACkB,OAAO;;QACvED;QAEAE,IAAAA,qCAAyB,EAACR,aAAaX,eAAe,EAAEiB;QACxD,OAAO;YACLG,IAAAA,wCAA4B,EAACT,aAAaX,eAAe,EAAEiB;QAC7D;IACF,GAAG;QAACd;QAAaC;QAAWO;KAAa;IAEzC,OAAOF;AACT;AA2BA,IAAMY,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAM3B,WAAW,SAAC4B;IACvB,IACEC,WAYED,MAZFC,UACAC,QAWEF,MAXFE,OACAC,WAUEH,MAVFG,UACAC,WASEJ,MATFI,UACAC,SAQEL,MARFK,QACAnB,AAASN,cAOPoB,MAPFd,SACAoB,QAMEN,MANFM,OACAC,QAKEP,MALFO,OACAC,aAIER,MAJFQ,YACAC,oBAGET,MAHFS,mBACAC,YAEEV,MAFFU,WACGC,yCACDX;QAZFC;QACAC;QACAC;QACAC;QACAC;QACAnB;QACAoB;QACAC;QACAC;QACAC;QACAC;;IAGF,IAAME,UAAU7B,OAAM8B,MAAM,CAAiB;IAC7C,IAAM,AAAEhC,YAAcC,IAAAA,4BAAa,IAA3BD;IACR,IAAMK,UAAUP,qBAAqBC;IAErC,IAAMkC,eAAeC,IAAAA,4BAAa,EAAC;QACjCC,QAAQJ;QACR1B,SAAAA;IACF;IAEA,IAAI+B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBd,WAAWd,WAAW;QAClE,6BAA6B;QAC7BO,KAAK;IACP;IAEA,qBACE,qBAACsB,mDACKT;QACJJ,OAAO,4CACFA;YACHL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZiB,KAAKT;QACLF,WAAWnC,IAAAA,gBAAU,kBAEnB+C,IAAAA,gCAAoB,EAACjD,sBAAsBQ,YAC3CwB,UAAU9B,IAAAA,gBAAU,0BAA6B,iCACjD8B,WAAWd,aACThB,IAAAA,gBAAU,+BAAkC,sCAC9CiC,cACEjC,IAAAA,gBAAU,+BAAkC,sCAC9C+B,gCACAG,0DACAC;sBAGF,qBAACa,gCAAe,CAACC,QAAQ;QAACC,OAAOX;OAC9BR,sBAAQ,qBAACc;QAAIV,SAAS;OAAmCT,YAAkBA;AAIpF"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["SplitCol","breakpointClassNames","none","classNames","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useAdaptivity","React","useState","Boolean","animate","setAnimate","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","matches","matchMediaListAddListener","matchMediaListRemoveListener","warn","warnOnce","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","useExternRef","contextValue","useObjectMemo","colRef","process","env","NODE_ENV","RootComponent","baseClassName","viewWidthToClassName","SplitColContext","Provider","value","div","className"],"mappings":";;;;+BAgFaA;;;eAAAA;;;;;;;;+DAhFU;oBACI;6BACG;4BACD;+BACG;6BACF;0BACkB;0BACwB;wBAC/C;6BAEK;+BACE;AAGhC,IAAMC,uBAAuB;IAC3BC,MAAMC,IAAAA,gBAAU,kCAAqC;IACrDC,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,IAAM,AAAEC,YAAcC,IAAAA,4BAAa,IAA3BD;IACR,IAA8BE,qCAAAA,OAAMC,QAAQ,CAACC,QAAQL,mBAA9CM,UAAuBH,oBAAdI,aAAcJ;IAC9B,IAAMK,eAAeC,IAAAA,gCAAe;IAEpCN,OAAMO,SAAS,CAAC;QACd,IAAIV,gBAAgBW,WAAW;YAC7BJ,WAAWP;YACX;QACF;QAEA,IAAIC,cAAcU,WAAW;YAC3BJ,WAAWN,YAAYW,qBAAS,CAACC,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,IAAMC,WAAW;mBAAMP,WAAW,CAACC,aAAaX,eAAe,CAACkB,OAAO;;QACvED;QAEAE,IAAAA,qCAAyB,EAACR,aAAaX,eAAe,EAAEiB;QACxD,OAAO;YACLG,IAAAA,wCAA4B,EAACT,aAAaX,eAAe,EAAEiB;QAC7D;IACF,GAAG;QAACd;QAAaC;QAAWO;KAAa;IAEzC,OAAOF;AACT;AA2BA,IAAMY,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAM3B,WAAW,SAAC4B;IACvB,IACEC,WAYED,MAZFC,UACAC,QAWEF,MAXFE,OACAC,WAUEH,MAVFG,UACAC,WASEJ,MATFI,UACAC,SAQEL,MARFK,QACAnB,AAASN,cAOPoB,MAPFd,SACAoB,QAMEN,MANFM,OACAC,QAKEP,MALFO,OACAC,aAIER,MAJFQ,YACAC,oBAGET,MAHFS,mBACAC,aAEEV,MAFFU,YACGC,yCACDX;QAZFC;QACAC;QACAC;QACAC;QACAC;QACAnB;QACAoB;QACAC;QACAC;QACAC;QACAC;;IAGF,IAAME,UAAUC,IAAAA,0BAAY,EAACH;IAC7B,IAAM,AAAE7B,YAAcC,IAAAA,4BAAa,IAA3BD;IACR,IAAMK,UAAUP,qBAAqBC;IAErC,IAAMkC,eAAeC,IAAAA,4BAAa,EAAC;QACjCC,QAAQJ;QACR1B,SAAAA;IACF;IAEA,IAAI+B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBd,WAAWd,WAAW;QAClE,6BAA6B;QAC7BO,KAAK;IACP;IAEA,qBACE,qBAACsB,4BAAa,8CACRT;QACJJ,OAAO,4CACFA;YACHL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZM,YAAYE;QACZS,eAAe9C,IAAAA,gBAAU,kBAEvB+C,IAAAA,gCAAoB,EAACjD,sBAAsBQ,YAC3CwB,UAAU9B,IAAAA,gBAAU,0BAA6B,iCACjD8B,WAAWd,aACThB,IAAAA,gBAAU,+BAAkC,sCAC9CiC,cACEjC,IAAAA,gBAAU,+BAAkC,sCAC9C+B,gCACAG;sBAGF,qBAACc,gCAAe,CAACC,QAAQ;QAACC,OAAOX;OAC9BR,sBAAQ,qBAACoB;QAAIC,SAAS;OAAmC1B,YAAkBA;AAIpF"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
-export interface SplitLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
+import { HasRef, HTMLAttributesWithRootRef } from '../../types';
+export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
      */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","usePlatform","PopoutRoot","classNames","Platform","IOS","div","ref"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;+DA1BU;oBACI;2BACC;wBACH;0BAEE;AAqBpB,IAAMA,cAAc;QACzBC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,sBAAU;QACTJ,WAAWK,IAAAA,gBAAU,qBAEnBH,aAAaI,kBAAQ,CAACC,GAAG;QAE3Bb,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,qBAACY,mDACKP;QACJQ,KAAKV;QACLC,WAAWK,IAAAA,gBAAU,4BAEnB,CAAC,CAACT,4CACFI;QAGDH;AAIT"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","usePlatform","PopoutRoot","classNames","Platform","IOS","div","ref"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;+DAzBU;oBACI;2BACC;wBACH;0BAEE;AAoBpB,IAAMA,cAAc;QACzBC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,sBAAU;QACTJ,WAAWK,IAAAA,gBAAU,qBAEnBH,aAAaI,kBAAQ,CAACC,GAAG;QAE3Bb,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,qBAACY,mDACKP;QACJQ,KAAKV;QACLC,WAAWK,IAAAA,gBAAU,4BAEnB,CAAC,CAACT,4CACFI;QAGDH;AAIT"}

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
-export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement>, Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
+export interface SubnavigationBarProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
     mode?: 'fixed' | 'overflow';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
  */
-export declare const SubnavigationBar: ({ mode, children, showArrows, getScrollToLeft, getScrollToRight, scrollAnimationDuration, className, ...restProps }: SubnavigationBarProps) => React.JSX.Element;
+export declare const SubnavigationBar: ({ mode, children, showArrows, getScrollToLeft, getScrollToRight, scrollAnimationDuration, ...restProps }: SubnavigationBarProps) => React.JSX.Element;

package/dist/cjs/components/SubnavigationBar/SubnavigationBar.js

@@ -10,11 +10,10 @@ Object.defineProperty(exports, "SubnavigationBar", {
 });
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
 var _HorizontalScroll = require("../HorizontalScroll/HorizontalScroll");
+var _RootComponent = require("../RootComponent/RootComponent");
 var defaultScrollToLeft = function(x) {
     return x - 240;
 };
@@ -22,14 +21,13 @@ var defaultScrollToRight = function(x) {
     return x + 240;
 };
 var SubnavigationBar = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "overflow" : _param_mode, children = _param.children, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_getScrollToLeft = _param.getScrollToLeft, getScrollToLeft = _param_getScrollToLeft === void 0 ? defaultScrollToLeft : _param_getScrollToLeft, _param_getScrollToRight = _param.getScrollToRight, getScrollToRight = _param_getScrollToRight === void 0 ? defaultScrollToRight : _param_getScrollToRight, scrollAnimationDuration = _param.scrollAnimationDuration, className = _param.className, restProps = _object_without_properties._(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "overflow" : _param_mode, children = _param.children, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_getScrollToLeft = _param.getScrollToLeft, getScrollToLeft = _param_getScrollToLeft === void 0 ? defaultScrollToLeft : _param_getScrollToLeft, _param_getScrollToRight = _param.getScrollToRight, getScrollToRight = _param_getScrollToRight === void 0 ? defaultScrollToRight : _param_getScrollToRight, scrollAnimationDuration = _param.scrollAnimationDuration, restProps = _object_without_properties._(_param, [
         "mode",
         "children",
         "showArrows",
         "getScrollToLeft",
         "getScrollToRight",
-        "scrollAnimationDuration",
-        "className"
+        "scrollAnimationDuration"
     ]);
     var ScrollWrapper;
     var scrollWrapperProps = {};
@@ -44,14 +42,14 @@ var SubnavigationBar = function(_param) {
             scrollAnimationDuration: scrollAnimationDuration
         };
     }
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)(// TODO: [>=6]
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        // TODO: [>=6]
         // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`
         // и удалить применение селектора в `SubnavigationButton.module.css`.
         // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`
         // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')
-        mode === "fixed" && (0, _vkjs.classNames)("vkuiInternalSubnavigationBar--mode-fixed"), className)
-    }), /*#__PURE__*/ _react.createElement(ScrollWrapper, _object_spread._({
+        baseClassName: mode === "fixed" ? "vkuiInternalSubnavigationBar--mode-fixed" : undefined
+    }, restProps), /*#__PURE__*/ _react.createElement(ScrollWrapper, _object_spread._({
         className: "vkuiSubnavigationBar__in"
     }, scrollWrapperProps), /*#__PURE__*/ _react.createElement("ul", {
         className: "vkuiSubnavigationBar__scrollIn"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        // TODO: [>=6]\n        // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`\n        // и удалить применение селектора в `SubnavigationButton.module.css`.\n        // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`\n        // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')\n        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <ul className={styles['SubnavigationBar__scrollIn']}>\n          {React.Children.map(children, (child, idx) => (\n            <li key={idx} className={styles['SubnavigationBar__item']}>\n              {child}\n            </li>\n          ))}\n        </ul>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"names":["SubnavigationBar","defaultScrollToLeft","x","defaultScrollToRight","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","div","classNames","ul","React","Children","map","child","idx","li","key"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;+DAzBU;oBACI;gCAKpB;AAYP,IAAMC,sBAA6C,SAACC;WAAMA,IAAI;;AAE9D,IAAMC,uBAA8C,SAACD;WAAMA,IAAI;;AAKxD,IAAMF,mBAAmB;6BAC9BI,MAAAA,gCAAO,0BACPC,kBAAAA,qCACAC,YAAAA,4CAAa,0DACbC,iBAAAA,sDAAkBN,+EAClBO,kBAAAA,wDAAmBL,gDACnBM,iCAAAA,yBACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBE,kCAAgB;QAChCD,qBAAqB;YACnBP,YAAAA;YACAC,iBAAAA;YACAC,kBAAAA;YACAC,yBAAAA;QACF;IACF;IAEA,qBACE,qBAACM,mDACKJ;QACJD,WAAWM,IAAAA,gBAAU,EACnB,cAAc;QACd,0EAA0E;QAC1E,qEAAqE;QACrE,0FAA0F;QAC1F,6EAA6E;QAC7EZ,SAAS,WAAWY,IAAAA,gBAAU,EAAC,6CAC/BN;sBAGF,qBAACE;QAAcF,SAAS;OAAsCG,mCAC5D,qBAACI;QAAGP,SAAS;OACVQ,OAAMC,QAAQ,CAACC,GAAG,CAACf,UAAU,SAACgB,OAAOC;6BACpC,qBAACC;YAAGC,KAAKF;YAAKZ,SAAS;WACpBW;;AAOf"}
+{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent\n      // TODO: [>=6]\n      // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`\n      // и удалить применение селектора в `SubnavigationButton.module.css`.\n      // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`\n      // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')\n      baseClassName={mode === 'fixed' ? 'vkuiInternalSubnavigationBar--mode-fixed' : undefined}\n      {...restProps}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <ul className={styles['SubnavigationBar__scrollIn']}>\n          {React.Children.map(children, (child, idx) => (\n            <li key={idx} className={styles['SubnavigationBar__item']}>\n              {child}\n            </li>\n          ))}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["SubnavigationBar","defaultScrollToLeft","x","defaultScrollToRight","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","RootComponent","baseClassName","undefined","className","ul","React","Children","map","child","idx","li","key"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;+DA1BU;gCAMhB;6BACuB;AAY9B,IAAMC,sBAA6C,SAACC;WAAMA,IAAI;;AAE9D,IAAMC,uBAA8C,SAACD;WAAMA,IAAI;;AAKxD,IAAMF,mBAAmB;6BAC9BI,MAAAA,gCAAO,0BACPC,kBAAAA,qCACAC,YAAAA,4CAAa,0DACbC,iBAAAA,sDAAkBN,+EAClBO,kBAAAA,wDAAmBL,gDACnBM,iCAAAA,yBACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,SAAS,SAAS;QACpBO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBE,kCAAgB;QAChCD,qBAAqB;YACnBN,YAAAA;YACAC,iBAAAA;YACAC,kBAAAA;YACAC,yBAAAA;QACF;IACF;IAEA,qBACE,qBAACK,4BAAa;QACZ,cAAc;QACd,0EAA0E;QAC1E,qEAAqE;QACrE,0FAA0F;QAC1F,6EAA6E;QAC7EC,eAAeX,SAAS,UAAU,6CAA6CY;OAC3EN,0BAEJ,qBAACC;QAAcM,SAAS;OAAsCL,mCAC5D,qBAACM;QAAGD,SAAS;OACVE,OAAMC,QAAQ,CAACC,GAAG,CAAChB,UAAU,SAACiB,OAAOC;6BACpC,qBAACC;YAAGC,KAAKF;YAAKN,SAAS;WACpBK;;AAOf"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
      */
@@ -12,4 +13,4 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
  */
-export declare const Tabbar: ({ children, shadow, mode, className, ...restProps }: TabbarProps) => React.JSX.Element;
+export declare const Tabbar: ({ shadow, mode, ...restProps }: TabbarProps) => React.JSX.Element;

package/dist/cjs/components/Tabbar/Tabbar.js

@@ -15,6 +15,7 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
+var _RootComponent = require("../RootComponent/RootComponent");
 var getItemsLayoutClassName = function(itemsLayout, children) {
     switch(itemsLayout){
         case "horizontal":
@@ -26,16 +27,14 @@ var getItemsLayoutClassName = function(itemsLayout, children) {
     }
 };
 var Tabbar = function(_param) {
-    var children = _param.children, _param_shadow = _param.shadow, shadow = _param_shadow === void 0 ? true : _param_shadow, mode = _param.mode, className = _param.className, restProps = _object_without_properties._(_param, [
-        "children",
+    var _param_shadow = _param.shadow, shadow = _param_shadow === void 0 ? true : _param_shadow, mode = _param.mode, restProps = _object_without_properties._(_param, [
         "shadow",
-        "mode",
-        "className"
+        "mode"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    return /*#__PURE__*/ _react.createElement("div", _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiInternalTabbar", "vkuiTabbar", platform === _platform.Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
-    }, restProps), children);
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: (0, _vkjs.classNames)("vkuiInternalTabbar", "vkuiTabbar", platform === _platform.Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, restProps.children), shadow && "vkuiTabbar--shadow")
+    }, restProps));
 };
 
 //# sourceMappingURL=Tabbar.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Tabbar","getItemsLayoutClassName","itemsLayout","children","React","Children","count","shadow","mode","className","restProps","platform","usePlatform","div","classNames","Platform","IOS"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;+DApCU;oBACI;2BACC;wBACH;AAczB,IAAMC,0BAA0B,SAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOE,OAAMC,QAAQ,CAACC,KAAK,CAACH,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAKO,IAAMD,SAAS;QAAGG,kBAAAA,iCAAUI,QAAAA,oCAAS,sBAAMC,cAAAA,MAAMC,mBAAAA,WAAcC;QAA7CP;QAAUI;QAAeC;QAAMC;;IACtD,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC;QACCJ,WAAWK,IAAAA,gBAAU,EACnB,oCAEAH,aAAaI,kBAAQ,CAACC,GAAG,uBACzBf,wBAAwBO,MAAML,WAC9BI,gCACAE;OAEEC,YAEHP;AAGP"}
+{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ shadow = true, mode, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        shadow && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Tabbar","getItemsLayoutClassName","itemsLayout","children","React","Children","count","shadow","mode","restProps","platform","usePlatform","RootComponent","baseClassName","classNames","Platform","IOS"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;+DAtCU;oBACI;2BACC;wBACH;6BAEK;AAc9B,IAAMC,0BAA0B,SAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOE,OAAMC,QAAQ,CAACC,KAAK,CAACH,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAKO,IAAMD,SAAS;+BAAGO,QAAAA,oCAAS,sBAAMC,cAAAA,MAASC;QAAxBF;QAAeC;;IACtC,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,EACvB,oCAEAJ,aAAaK,kBAAQ,CAACC,GAAG,uBACzBf,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChDI;OAEEE;AAGV"}

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

@@ -14,4 +14,4 @@ export interface TabbarItemProps extends React.AllHTMLAttributes<HTMLElement>, H
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */
-export declare const TabbarItem: ({ children, selected, indicator, text, href, Component, disabled, className, getRootRef, ...restProps }: TabbarItemProps) => React.JSX.Element;
+export declare const TabbarItem: ({ children, selected, indicator, text, href, Component, disabled, ...restProps }: TabbarItemProps) => React.JSX.Element;

package/dist/cjs/components/TabbarItem/TabbarItem.js

@@ -17,20 +17,19 @@ var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
 var _warnOnce = require("../../lib/warnOnce");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var warn = (0, _warnOnce.warnOnce)("TabbarItem");
 var TabbarItem = function(_param) {
-    var children = _param.children, selected = _param.selected, indicator = _param.indicator, text = _param.text, href = _param.href, _param_Component = _param.Component, Component = _param_Component === void 0 ? href ? "a" : "button" : _param_Component, disabled = _param.disabled, className = _param.className, getRootRef = _param.getRootRef, restProps = _object_without_properties._(_param, [
+    var children = _param.children, selected = _param.selected, indicator = _param.indicator, text = _param.text, href = _param.href, _param_Component = _param.Component, Component = _param_Component === void 0 ? href ? "a" : "button" : _param_Component, disabled = _param.disabled, restProps = _object_without_properties._(_param, [
         "children",
         "selected",
         "indicator",
         "text",
         "href",
         "Component",
-        "disabled",
-        "className",
-        "getRootRef"
+        "disabled"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     if (process.env.NODE_ENV === "development") {
@@ -39,11 +38,12 @@ var TabbarItem = function(_param) {
             warn(_warnOnce.COMMON_WARNINGS.a11y[Component === "a" ? "link-name" : "button-name"], "error");
         }
     }
-    return /*#__PURE__*/ _react.createElement(Component, _object_spread_props._(_object_spread._({}, restProps), {
-        ref: getRootRef,
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
+        Component: Component
+    }, restProps), {
         disabled: disabled,
         href: href,
-        className: (0, _vkjs.classNames)("vkuiTabbarItem", platform === _platform.Platform.IOS && "vkuiTabbarItem--ios", platform === _platform.Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", className)
+        baseClassName: (0, _vkjs.classNames)("vkuiTabbarItem", platform === _platform.Platform.IOS && "vkuiTabbarItem--ios", platform === _platform.Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected")
     }), /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
         role: "presentation",
         Component: "div",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  getRootRef,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","className","getRootRef","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","ref","classNames","Platform","IOS","ANDROID","Tappable","role","activeMode","activeEffectDelay","hasHover","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;+DA9BU;oBACkB;2BACb;wBACH;wBACiB;wBAEjB;wBACA;AAkBzB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMF,aAAa;QACxBG,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,6BACzBE,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBZ,QAAQM,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBjB,KAAKkB,yBAAe,CAACC,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,qBAACA,uDACKI;QACJS,KAAKV;QACLF,UAAUA;QACVF,MAAMA;QACNG,WAAWY,IAAAA,gBAAU,oBAEnBT,aAAaU,kBAAQ,CAACC,GAAG,2BACzBX,aAAaU,kBAAQ,CAACE,OAAO,+BAC7BrB,wCACAM;sBAGF,qBAACgB,kBAAQ;QACPC,MAAK;QACLnB,WAAU;QACVC,UAAUA;QACVmB,YACEf,aAAaU,kBAAQ,CAACC,GAAG,wCAA4C;QAEvEK,mBAAmBhB,aAAaU,kBAAQ,CAACC,GAAG,GAAG,IAAI;QACnDM,UAAU;QACVpB,SAAS;sBAEX,qBAACqB;QAAIrB,SAAS;qBACZ,qBAACqB;QAAIrB,SAAS;OACXP,wBACD,qBAAC4B;QAAIrB,WAAU;OACZsB,IAAAA,kBAAY,EAAC3B,cAAcA,aAG/BC,sBACC,qBAAC2B,kBAAQ;QAACzB,WAAU;QAAME,SAAS;QAA8BwB,QAAO;OACrE5B;AAMb"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      baseClassName={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","RootComponent","baseClassName","classNames","Platform","IOS","ANDROID","Tappable","role","activeMode","activeEffectDelay","hasHover","className","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;+DA/BU;oBACkB;2BACb;wBACH;wBACiB;6BAEZ;wBACL;wBACA;AAkBzB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMF,aAAa;QACxBG,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,6BACzBE,kBAAAA,UACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBV,QAAQI,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBf,KAAKgB,yBAAe,CAACC,IAAI,CAACV,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,qBAACW,4BAAa;QACZX,WAAWA;OACPE;QACJD,UAAUA;QACVF,MAAMA;QACNa,eAAeC,IAAAA,gBAAU,oBAEvBV,aAAaW,kBAAQ,CAACC,GAAG,2BACzBZ,aAAaW,kBAAQ,CAACE,OAAO,+BAC7BpB;sBAGF,qBAACqB,kBAAQ;QACPC,MAAK;QACLlB,WAAU;QACVC,UAAUA;QACVkB,YACEhB,aAAaW,kBAAQ,CAACC,GAAG,wCAA4C;QAEvEK,mBAAmBjB,aAAaW,kBAAQ,CAACC,GAAG,GAAG,IAAI;QACnDM,UAAU;QACVC,SAAS;sBAEX,qBAACC;QAAID,SAAS;qBACZ,qBAACC;QAAID,SAAS;OACX3B,wBACD,qBAAC4B;QAAID,WAAU;OACZE,IAAAA,kBAAY,EAAC3B,cAAcA,aAG/BC,sBACC,qBAAC2B,kBAAQ;QAACzB,WAAU;QAAMsB,SAAS;QAA8BI,QAAO;OACrE5B;AAMb"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     mode?: 'default' | 'accent' | 'secondary';
 }
 export interface TabsContextProps {
@@ -11,4 +11,4 @@ export declare const TabsModeContext: React.Context<TabsContextProps>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */
-export declare const Tabs: ({ children, mode, getRootRef, className, role, ...restProps }: TabsProps) => React.JSX.Element;
+export declare const Tabs: ({ children, mode, role, ...restProps }: TabsProps) => React.JSX.Element;