@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/components/Group/Group.js

@@ -9,55 +9,69 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
 import { warnOnce } from "../../lib/warnOnce";
+import { AppRootContext } from "../AppRoot/AppRootContext";
 import { ModalRootContext } from "../ModalRoot/ModalRootContext";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Separator } from "../Separator/Separator";
 import { Spacing } from "../Spacing/Spacing";
 import { Footnote } from "../Typography/Footnote/Footnote";
 var sizeXClassNames = _define_property({
     none: classNames("vkuiGroup--sizeX-none", "vkuiInternalGroup--sizeX-none")
 }, SizeType.COMPACT, "vkuiGroup--sizeX-compact");
+var stylesMode = {
+    none: classNames("vkuiGroup--mode-none", "vkuiInternalGroup--mode-none"),
+    plain: classNames("vkuiGroup--mode-plain", "vkuiInternalGroup--mode-plain"),
+    card: classNames("vkuiGroup--mode-card", "vkuiInternalGroup--mode-card")
+};
+var stylesPadding = {
+    s: "vkuiGroup--padding-s",
+    m: "vkuiGroup--padding-m"
+};
+/**
+ * Вычисляем mode для Group.
+ */ function useGroupMode(forcedMode, sizeX, isInsideModal) {
+    var layout = React.useContext(AppRootContext).layout;
+    if (forcedMode) {
+        return forcedMode;
+    }
+    if (isInsideModal) {
+        return "plain";
+    }
+    if (layout) {
+        return layout;
+    }
+    if (sizeX !== "none") {
+        return sizeX === SizeType.REGULAR ? "card" : "plain";
+    }
+    return "none";
+}
 var warn = warnOnce("Group");
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
  */ export var Group = function(_param) {
-    var header = _param.header, description = _param.description, children = _param.children, _param_separator = _param.separator, separator = _param_separator === void 0 ? "auto" : _param_separator, getRootRef = _param.getRootRef, modeProps = _param.mode, _param_padding = _param.padding, padding = _param_padding === void 0 ? "m" : _param_padding, className = _param.className, tabIndexProp = _param.tabIndex, restProps = _object_without_properties(_param, [
+    var header = _param.header, description = _param.description, children = _param.children, _param_separator = _param.separator, separator = _param_separator === void 0 ? "auto" : _param_separator, modeProps = _param.mode, _param_padding = _param.padding, padding = _param_padding === void 0 ? "m" : _param_padding, tabIndexProp = _param.tabIndex, restProps = _object_without_properties(_param, [
         "header",
         "description",
         "children",
         "separator",
-        "getRootRef",
         "mode",
         "padding",
-        "className",
         "tabIndex"
     ]);
     var isInsideModal = React.useContext(ModalRootContext).isInsideModal;
     var platform = usePlatform();
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
-    var mode = modeProps;
-    if (!modeProps) {
-        // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
-        mode = isInsideModal ? "plain" : "none";
-    }
-    if (mode === "none" && sizeX !== "none") {
-        mode = sizeX === SizeType.REGULAR ? "card" : "plain";
-    }
+    var mode = useGroupMode(modeProps, sizeX, isInsideModal);
     var isTabPanel = restProps.role === "tabpanel";
     if (process.env.NODE_ENV === "development" && isTabPanel && (!restProps["aria-controls"] || !restProps["id"])) {
         warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
     }
     var tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", _object_spread_props(_object_spread({}, restProps), {
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({
+        Component: "section"
+    }, restProps), {
         tabIndex: tabIndex,
-        ref: getRootRef,
-        className: classNames("vkuiInternalGroup", "vkuiGroup", isInsideModal && "vkuiGroup--inside-modal", platform === Platform.IOS && "vkuiGroup--ios", sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], mode && ({
-            none: classNames("vkuiGroup--mode-none", "vkuiInternalGroup--mode-none"),
-            plain: classNames("vkuiGroup--mode-plain", "vkuiInternalGroup--mode-plain"),
-            card: classNames("vkuiGroup--mode-card", "vkuiInternalGroup--mode-card")
-        })[mode], {
-            s: "vkuiGroup--padding-s",
-            m: "vkuiGroup--padding-m"
-        }[padding], className)
+        baseClassName: classNames("vkuiInternalGroup", "vkuiGroup", isInsideModal && "vkuiGroup--inside-modal", platform === Platform.IOS && "vkuiGroup--ios", sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], mode && stylesMode[mode], stylesPadding[padding])
     }), header, children, hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
         className: "vkuiGroup__description"
     }, description)), separator !== "hide" && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Spacing, {

package/dist/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n};\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement>,\n    HasChildren {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    `show` - разделитель всегда показывается,\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен `card`, выглядит как карточка c\n   * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n   * В модальных окнах по умолчанию `plain`.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме `card`.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  if (mode === 'none' && sizeX !== 'none') {\n    mode = sizeX === SizeType.REGULAR ? 'card' : 'plain';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          isInsideModal && styles['Group--inside-modal'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(\n              styles['Group__separator'],\n              styles['Group__separator--separator'],\n              separator === 'show' && styles['Group__separator--force'],\n            )}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","sizeXClassNames","none","COMPACT","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","REGULAR","isTabPanel","role","process","env","NODE_ENV","undefined","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC;IACJC,MAAMZ,oCAAwC;GAC7CI,SAASS,OAAO;AA4BnB,IAAMC,OAAOR,SAAS;AACtB;;CAEC,GACD,OAAO,IAAMS,QAAQ;QACnBC,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,gBAAkB7B,MAAM8B,UAAU,CAACtB,kBAAnCqB;IACR,IAAME,WAAW3B;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnB6B,OAAAA,0CAAQ;IAEhB,IAAIV,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,IAAIP,SAAS,UAAUU,UAAU,QAAQ;QACvCV,OAAOU,UAAU3B,SAAS4B,OAAO,GAAG,SAAS;IAC/C;IAEA,IAAMC,aAAaN,UAAUO,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACN,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ;IAEA,IAAMW,WAAWQ,cAAcP,iBAAiBY,YAAY,IAAIZ;IAEhE,qBACE,wDACE,oBAACa,mDACKZ;QACJF,UAAUA;QACVe,KAAKpB;QACLI,WAAWxB,WACT,kCAEA4B,4CACAE,aAAazB,SAASoC,GAAG,sBACzBV,UAAU3B,SAAS4B,OAAO,IAAIrB,eAAe,CAACoB,MAAM,EACpDV,QACE,CAAA;YACET,MAAMZ,mCAAuC;YAC7C0C,OAAO1C,oCAAwC;YAC/C2C,MAAM3C,mCAAuC;QAC/C,CAAA,CAAC,CAACqB,KAAK,EACT;YACEuB,CAAC;YACDC,CAAC;QACH,CAAC,CAACtB,QAAQ,EACVC;QAGDR,QACAE,UACAjB,aAAagB,8BACZ,oBAACP;QAASc,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,oBAACpB,MAAM+C,QAAQ,sBACb,oBAACrC;QACCe,WAAWxB;QACX+C,MAAM;sBAER,oBAACvC;QACCgB,WAAWxB,sEAGTmB,cAAc;;AAO5B,EAAE"}
+{"version":3,"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\n  none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles['Group--padding-s'],\n  m: styles['Group--padding-m'],\n};\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupProps['mode'],\n  sizeX: SizeType | 'none',\n  isInsideModal: boolean,\n): 'plain' | 'card' | 'none' {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === SizeType.REGULAR ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    `show` - разделитель всегда показывается,\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен `card`, выглядит как карточка c\n   * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n   * В модальных окнах по умолчанию `plain`.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме `card`.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          isInsideModal && styles['Group--inside-modal'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n          mode && stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </RootComponent>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(\n              styles['Group__separator'],\n              styles['Group__separator--separator'],\n              separator === 'show' && styles['Group__separator--force'],\n            )}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","AppRootContext","ModalRootContext","RootComponent","Separator","Spacing","Footnote","sizeXClassNames","none","COMPACT","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","REGULAR","warn","Group","header","description","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","platform","isTabPanel","role","process","env","NODE_ENV","undefined","Component","baseClassName","IOS","className","Fragment","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC;IACJC,MAAMd,oCAAwC;GAC7CI,SAASW,OAAO;AAGnB,IAAMC,aAAa;IACjBF,MAAMd,mCAAuC;IAC7CiB,OAAOjB,oCAAwC;IAC/CkB,MAAMlB,mCAAuC;AAC/C;AAEA,IAAMmB,gBAAgB;IACpBC,CAAC;IACDC,CAAC;AACH;AAEA;;CAEC,GACD,SAASC,aACPC,UAA8B,EAC9BC,KAAwB,EACxBC,aAAsB;IAEtB,IAAM,AAAEC,SAAW3B,MAAM4B,UAAU,CAACpB,gBAA5BmB;IAER,IAAIH,YAAY;QACd,OAAOA;IACT;IAEA,IAAIE,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIF,UAAU,QAAQ;QACpB,OAAOA,UAAUpB,SAASwB,OAAO,GAAG,SAAS;IAC/C;IAEA,OAAO;AACT;AAwBA,IAAMC,OAAOvB,SAAS;AACtB;;CAEC,GACD,OAAO,IAAMwB,QAAQ;QACnBC,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,AAAUC,sBAAVD,UACGE;QAPHT;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAAM,AAAEb,gBAAkB1B,MAAM4B,UAAU,CAACnB,kBAAnCiB;IACR,IAAMgB,WAAWtC;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBsB,OAAAA,0CAAQ;IAEhB,IAAMW,OAAOb,aAAac,WAAWZ,OAAOC;IAE5C,IAAMiB,aAAaF,UAAUG,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACF,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAX,KACE;IAEJ;IAEA,IAAMS,WAAWI,cAAcH,iBAAiBQ,YAAY,IAAIR;IAEhE,qBACE,wDACE,oBAAC9B;QACCuC,WAAU;OACNR;QACJF,UAAUA;QACVW,eAAejD,WACb,kCAEAyB,4CACAgB,aAAapC,SAAS6C,GAAG,sBACzB1B,UAAUpB,SAASwB,OAAO,IAAIf,eAAe,CAACW,MAAM,EACpDW,QAAQnB,UAAU,CAACmB,KAAK,EACxBhB,aAAa,CAACkB,QAAQ;QAGvBN,QACAE,UACAhC,aAAa+B,8BACZ,oBAACpB;QAASuC,SAAS;OAAiCnB,eAIvDE,cAAc,wBACb,oBAACnC,MAAMqD,QAAQ,sBACb,oBAACzC;QACCwC,WAAWnD;QACXqD,MAAM;sBAER,oBAAC3C;QACCyC,WAAWnD,sEAGTkC,cAAc;;AAO5B,EAAE"}

package/dist/components/Header/Header.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement> {
     mode?: 'primary' | 'secondary' | 'tertiary';
     size?: 'regular' | 'large';
     subtitle?: React.ReactNode;
@@ -17,4 +17,4 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootR
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */
-export declare const Header: ({ mode, size, children, subtitle, indicator, aside, getRootRef, multiline, className, ...restProps }: HeaderProps) => React.JSX.Element;
+export declare const Header: ({ mode, size, children, subtitle, indicator, aside, multiline, ...restProps }: HeaderProps) => React.JSX.Element;

package/dist/components/Header/Header.js

@@ -5,6 +5,7 @@ import * as React from "react";
 import { classNames, hasReactNode, isPrimitiveReactNode } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Platform } from "../../lib/platform";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Headline } from "../Typography/Headline/Headline";
 import { Paragraph } from "../Typography/Paragraph/Paragraph";
@@ -59,28 +60,28 @@ var HeaderContent = function(_param) {
     }
     return null;
 };
+var stylesMode = {
+    primary: "vkuiHeader--mode-primary",
+    secondary: "vkuiHeader--mode-secondary",
+    tertiary: "vkuiHeader--mode-tertiary"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */ export var Header = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, children = _param.children, subtitle = _param.subtitle, indicator = _param.indicator, aside = _param.aside, getRootRef = _param.getRootRef, multiline = _param.multiline, className = _param.className, restProps = _object_without_properties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, children = _param.children, subtitle = _param.subtitle, indicator = _param.indicator, aside = _param.aside, multiline = _param.multiline, restProps = _object_without_properties(_param, [
         "mode",
         "size",
         "children",
         "subtitle",
         "indicator",
         "aside",
-        "getRootRef",
-        "multiline",
-        "className"
+        "multiline"
     ]);
     var platform = usePlatform();
-    return /*#__PURE__*/ React.createElement("header", _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
-        className: classNames("vkuiHeader", platform === Platform.IOS && "vkuiHeader--ios", {
-            primary: "vkuiHeader--mode-primary",
-            secondary: "vkuiHeader--mode-secondary",
-            tertiary: "vkuiHeader--mode-tertiary"
-        }[mode], isPrimitiveReactNode(indicator) && "vkuiHeader--pi", hasReactNode(subtitle) && "vkuiHeader--with-subtitle", className)
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({
+        Component: "header"
+    }, restProps), {
+        baseClassName: classNames("vkuiHeader", platform === Platform.IOS && "vkuiHeader--ios", stylesMode[mode], isPrimitiveReactNode(indicator) && "vkuiHeader--pi", hasReactNode(subtitle) && "vkuiHeader--with-subtitle")
     }), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiHeader__main"
     }, /*#__PURE__*/ React.createElement(HeaderContent, {

package/dist/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component=\"span\"\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","primary","secondary","tertiary","div","Component","span"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAqBlD,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWZ;IACjB,IAAIY,aAAaX,SAASY,GAAG,EAAE;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACL;oBAAMQ,OAAM;oBAAIC,QAAO;mBAAQL,4BAEhC,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;YAEpC,KAAK;gBACH,qBAAO,oBAACR;oBAASa,QAAO;oBAAIC,MAAAA;mBAASN;YACvC,KAAK;gBACH,qBAAO,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACL;gBAAMQ,OAAM;gBAAIC,QAAO;eAAQL,4BAEhC,oBAACP;gBAASY,QAAO;eAAQL;QAE7B,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAIC,MAAAA;eAASN;QACvC,KAAK;YACH,qBAAO,oBAACP;gBAASY,QAAO;eAAQL;IACpC;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,IAAMO,SAAS;6BACpBT,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPS,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGd;QATHF;QACAC;QACAS;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMZ,WAAWZ;IAEjB,qBACE,oBAACyB,kDACKf;QACJgB,KAAKJ;QACLE,WAAW3B,yBAETe,aAAaX,SAASY,GAAG,uBACzB;YACEc,OAAO;YACPC,SAAS;YACTC,QAAQ;QACV,CAAC,CAACrB,KAAK,EACPT,qBAAqBqB,gCACrBtB,aAAaqB,0CACbK;sBAGF,oBAACM;QAAIN,SAAS;qBACZ,oBAACjB;QACCiB,SAAS;QACTO,WAAU;QACVvB,MAAMA;QACNC,MAAMA;qBAEN,oBAACuB;QACCR,WAAW3B,qCAET0B;OAGDL,WAEFpB,aAAasB,4BACZ,oBAAClB;QAASsB,SAAS;QAA+BT,QAAO;OACtDK,aAKNtB,aAAaqB,2BACZ,oBAACd;QACCmB,WAAW3B,mCAET0B;QAEFQ,WAAU;OAETZ,YAKNrB,aAAauB,wBACZ,oBAACjB;QAAUoB,SAAS;QAA2BO,WAAU;OACtDV;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\nconst stylesMode = {\n  primary: styles['Header--mode-primary'],\n  secondary: styles['Header--mode-secondary'],\n  tertiary: styles['Header--mode-tertiary'],\n};\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  multiline,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      Component=\"header\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        stylesMode[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component=\"span\"\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","RootComponent","Footnote","Headline","Paragraph","Subhead","Title","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","stylesMode","primary","secondary","tertiary","Header","children","subtitle","indicator","aside","multiline","Component","baseClassName","div","className","span"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAqBlD,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWb;IACjB,IAAIa,aAAaZ,SAASa,GAAG,EAAE;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACL;oBAAMQ,OAAM;oBAAIC,QAAO;mBAAQL,4BAEhC,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;YAEpC,KAAK;gBACH,qBAAO,oBAACR;oBAASa,QAAO;oBAAIC,MAAAA;mBAASN;YACvC,KAAK;gBACH,qBAAO,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACL;gBAAMQ,OAAM;gBAAIC,QAAO;eAAQL,4BAEhC,oBAACP;gBAASY,QAAO;eAAQL;QAE7B,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAIC,MAAAA;eAASN;QACvC,KAAK;YACH,qBAAO,oBAACP;gBAASY,QAAO;eAAQL;IACpC;IAEA,OAAO;AACT;AAEA,IAAMO,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;AACV;AACA;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBb,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPa,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,mBAAAA,WACGhB;QAPHF;QACAC;QACAa;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMd,WAAWb;IAEjB,qBACE,oBAACE;QACC0B,WAAU;OACNjB;QACJkB,eAAehC,yBAEbgB,aAAaZ,SAASa,GAAG,uBACzBI,UAAU,CAACT,KAAK,EAChBV,qBAAqB0B,gCACrB3B,aAAa0B;sBAGf,oBAACM;QAAIC,SAAS;qBACZ,oBAACvB;QACCuB,SAAS;QACTH,WAAU;QACVnB,MAAMA;QACNC,MAAMA;qBAEN,oBAACsB;QACCD,WAAWlC,qCAET8B;OAGDJ,WAEFzB,aAAa2B,4BACZ,oBAACtB;QAAS4B,SAAS;QAA+Bf,QAAO;OACtDS,aAKN3B,aAAa0B,2BACZ,oBAAClB;QACCyB,WAAWlC,mCAET8B;QAEFC,WAAU;OAETJ,YAKN1B,aAAa4B,wBACZ,oBAACrB;QAAU0B,SAAS;QAA2BH,WAAU;OACtDF;AAKX,EAAE"}

package/dist/components/HorizontalCell/HorizontalCell.js

@@ -7,6 +7,11 @@ import { Tappable } from "../Tappable/Tappable";
 import { Caption } from "../Typography/Caption/Caption";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Subhead } from "../Typography/Subhead/Subhead";
+var stylesSize = {
+    s: "vkuiHorizontalCell--size-s",
+    m: "vkuiHorizontalCell--size-m",
+    l: "vkuiHorizontalCell--size-l"
+};
 var CellTypography = function(_param) {
     var size = _param.size, children = _param.children, restProps = _object_without_properties(_param, [
         "size",
@@ -33,11 +38,7 @@ var CellTypography = function(_param) {
     return /*#__PURE__*/ React.createElement("div", {
         ref: getRootRef,
         style: style,
-        className: classNames("vkuiHorizontalCell", {
-            s: "vkuiHorizontalCell--size-s",
-            m: "vkuiHorizontalCell--size-m",
-            l: "vkuiHorizontalCell--size-l"
-        }[size], className)
+        className: classNames("vkuiHorizontalCell", stylesSize[size], className)
     }, /*#__PURE__*/ React.createElement(Tappable, _object_spread({
         className: "vkuiHorizontalCell__body",
         getRootRef: getRef

package/dist/components/HorizontalCell/HorizontalCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        {\n          s: styles['HorizontalCell--size-s'],\n          m: styles['HorizontalCell--size-m'],\n          l: styles['HorizontalCell--size-l'],\n        }[size],\n        className,\n      )}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n          {hasReactNode(extraSubtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref","s","m","l"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAOxD,IAAMC,iBAAiB;QAAGC,cAAAA,MAAMC,kBAAAA,UAAaC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,oBAACJ,SAAYM,WAAYD,0BAEzB,oBAACH,SAAYI,WAAYD;AAE7B;AAuBA;;CAEC,GACD,OAAO,IAAME,iBAAiB;QAC5BC,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAP,MAAAA,gCAAO,4CACPC,UAAAA,sDAAW,oBAACP;QAAOM,MAAM;0BACzBQ,oBAAAA,YACAC,gBAAAA,QACAC,uBAAAA,eACGR;QATHE;QACAC;QACAC;QACAC;QACAP;QACAC;QACAO;QACAC;QACAC;;IAGA,qBACE,oBAACC;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWZ,iCAET;YACEqB,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACf,KAAK,EACPI;qBAGF,oBAACT;QAASS,SAAS;QAAkCI,YAAYC;OAAYP,YAC1ET,aAAaQ,2BACZ,oBAACU;QAAIP,SAAS;OAAoCH,yBAEpD,oBAACU;QAAIP,SAAS;OACXX,aAAaY,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDZ,aAAac,2BACZ,oBAACV;QAASO,SAAS;OAAuCG,WAE3Dd,aAAaiB,gCACZ,oBAACb;QAASO,SAAS;OAAuCM;AAMtE,EAAE"}
+{"version":3,"sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nconst stylesSize = {\n  s: styles['HorizontalCell--size-s'],\n  m: styles['HorizontalCell--size-m'],\n  l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n          {hasReactNode(extraSubtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","stylesSize","s","m","l","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAMA,IAAMC,iBAAiB;QAAGC,cAAAA,MAAMC,kBAAAA,UAAaC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,oBAACR,SAAYU,WAAYD,0BAEzB,oBAACP,SAAYQ,WAAYD;AAE7B;AAuBA;;CAEC,GACD,OAAO,IAAME,iBAAiB;QAC5BC,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAP,MAAAA,gCAAO,4CACPC,UAAAA,sDAAW,oBAACX;QAAOU,MAAM;0BACzBQ,oBAAAA,YACAC,gBAAAA,QACAC,uBAAAA,eACGR;QATHE;QACAC;QACAC;QACAC;QACAP;QACAC;QACAO;QACAC;QACAC;;IAGA,qBACE,oBAACC;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWhB,iCAAqCO,UAAU,CAACK,KAAK,EAAEI;qBAElE,oBAACb;QAASa,SAAS;QAAkCI,YAAYC;OAAYP,YAC1Eb,aAAaY,2BACZ,oBAACU;QAAIP,SAAS;OAAoCH,yBAEpD,oBAACU;QAAIP,SAAS;OACXf,aAAagB,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDhB,aAAakB,2BACZ,oBAACd;QAASW,SAAS;OAAuCG,WAE3DlB,aAAaqB,gCACZ,oBAACjB;QAASW,SAAS;OAAuCM;AAMtE,EAAE"}

package/dist/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { HasRef } from '../../types';
+import { HasRef, HTMLAttributesWithRootRef } from '../../types';
 export type ScrollPositionHandler = (currentPosition: number) => number;
-export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement> {
+export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Функция для расчета величины прокрутки при клике на левую стрелку.
      */
@@ -26,4 +26,4 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => React.JSX.Element;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => React.JSX.Element;

package/dist/components/HorizontalScroll/HorizontalScroll.js

@@ -8,6 +8,7 @@ import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer";
 import { useEventListener } from "../../hooks/useEventListener";
 import { useExternRef } from "../../hooks/useExternRef";
 import { easeInOutSine } from "../../lib/fx";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { ScrollArrow } from "../ScrollArrow/ScrollArrow";
 /**
  * timing method
@@ -65,7 +66,7 @@ function doScroll(param) {
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */ export var HorizontalScroll = function(_param) {
-    var children = _param.children, getScrollToLeft = _param.getScrollToLeft, getScrollToRight = _param.getScrollToRight, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, arrowOffsetY = _param.arrowOffsetY, _param_scrollAnimationDuration = _param.scrollAnimationDuration, scrollAnimationDuration = _param_scrollAnimationDuration === void 0 ? SCROLL_ONE_FRAME_TIME : _param_scrollAnimationDuration, getRef = _param.getRef, className = _param.className, _param_scrollOnAnyWheel = _param.scrollOnAnyWheel, scrollOnAnyWheel = _param_scrollOnAnyWheel === void 0 ? false : _param_scrollOnAnyWheel, restProps = _object_without_properties(_param, [
+    var children = _param.children, getScrollToLeft = _param.getScrollToLeft, getScrollToRight = _param.getScrollToRight, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, arrowOffsetY = _param.arrowOffsetY, _param_scrollAnimationDuration = _param.scrollAnimationDuration, scrollAnimationDuration = _param_scrollAnimationDuration === void 0 ? SCROLL_ONE_FRAME_TIME : _param_scrollAnimationDuration, getRef = _param.getRef, _param_scrollOnAnyWheel = _param.scrollOnAnyWheel, scrollOnAnyWheel = _param_scrollOnAnyWheel === void 0 ? false : _param_scrollOnAnyWheel, restProps = _object_without_properties(_param, [
         "children",
         "getScrollToLeft",
         "getScrollToRight",
@@ -74,7 +75,6 @@ function doScroll(param) {
         "arrowOffsetY",
         "scrollAnimationDuration",
         "getRef",
-        "className",
         "scrollOnAnyWheel"
     ]);
     var _React_useState = _sliced_to_array(React.useState(false), 2), canScrollLeft = _React_useState[0], setCanScrollLeft = _React_useState[1];
@@ -180,8 +180,8 @@ function doScroll(param) {
         scrollerRef,
         scrollOnAnyWheel
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiHorizontalScroll", "vkuiInternalHorizontalScroll", showArrows === "always" && "vkuiHorizontalScroll--withConstArrows", className),
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiHorizontalScroll", "vkuiInternalHorizontalScroll", showArrows === "always" && "vkuiHorizontalScroll--withConstArrows"),
         onMouseEnter: calculateArrowsVisibility
     }), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(ScrollArrow, {
         size: arrowSize,

package/dist/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n  React.useEffect(\n    function addScrollerRefToScrollEvent() {\n      if (!scrollerRef.current) {\n        return noop;\n      }\n\n      scrollEvent.add(scrollerRef.current);\n      return scrollEvent.remove;\n    },\n    [scrollEvent, scrollerRef],\n  );\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(\n    function addScrollerRefToWheelEvent() {\n      if (!scrollerRef.current || !scrollOnAnyWheel) {\n        return noop;\n      }\n\n      wheelEvent.add(scrollerRef.current);\n\n      return wheelEvent.remove;\n    },\n    [wheelEvent, scrollerRef, scrollOnAnyWheel],\n  );\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        className,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","ScrollArrow","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEffect","addScrollerRefToScrollEvent","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","div","onMouseEnter","undefined","size","offsetY","direction","onClick","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n  React.useEffect(\n    function addScrollerRefToScrollEvent() {\n      if (!scrollerRef.current) {\n        return noop;\n      }\n\n      scrollEvent.add(scrollerRef.current);\n      return scrollEvent.remove;\n    },\n    [scrollEvent, scrollerRef],\n  );\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(\n    function addScrollerRefToWheelEvent() {\n      if (!scrollerRef.current || !scrollOnAnyWheel) {\n        return noop;\n      }\n\n      wheelEvent.add(scrollerRef.current);\n\n      return wheelEvent.remove;\n    },\n    [wheelEvent, scrollerRef, scrollOnAnyWheel],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","RootComponent","ScrollArrow","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEffect","addScrollerRefToScrollEvent","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","baseClassName","onMouseEnter","undefined","size","offsetY","direction","className","onClick","div","ref"],"mappings":"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"}

package/dist/components/ImageBase/ImageBase.d.ts

@@ -39,7 +39,7 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, Ha
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */
 export declare const ImageBase: {
-    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, className, getRootRef, withBorder, "fallbackIcon": fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): React.JSX.Element;
-    Badge: ({ background, children, className, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;
+    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, withBorder, "fallbackIcon": fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): React.JSX.Element;
+    Badge: ({ background, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;
     Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => React.JSX.Element;
 };

package/dist/components/ImageBase/ImageBase.js

@@ -5,6 +5,7 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useExternRef } from "../../hooks/useExternRef";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { ImageBaseBadge } from "./ImageBaseBadge/ImageBaseBadge";
 import { ImageBaseOverlay } from "./ImageBaseOverlay/ImageBaseOverlay";
 import { ImageBaseContext } from "./context";
@@ -14,7 +15,7 @@ export { ImageBaseContext };
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */ export var ImageBase = function(_param) {
-    var alt = _param.alt, crossOrigin = _param.crossOrigin, decoding = _param.decoding, loading = _param.loading, referrerPolicy = _param.referrerPolicy, sizes = _param.sizes, src = _param.src, srcSet = _param.srcSet, useMap = _param.useMap, getRef = _param.getRef, _param_size = _param.size, size = _param_size === void 0 ? 24 : _param_size, width = _param.width, height = _param.height, style = _param.style, className = _param.className, getRootRef = _param.getRootRef, _param_withBorder = _param.withBorder, withBorder = _param_withBorder === void 0 ? true : _param_withBorder, fallbackIconProp = _param["fallbackIcon"], children = _param.children, ariaLabel = _param["aria-label"], onClick = _param.onClick, onLoad = _param.onLoad, onError = _param.onError, restProps = _object_without_properties(_param, [
+    var alt = _param.alt, crossOrigin = _param.crossOrigin, decoding = _param.decoding, loading = _param.loading, referrerPolicy = _param.referrerPolicy, sizes = _param.sizes, src = _param.src, srcSet = _param.srcSet, useMap = _param.useMap, getRef = _param.getRef, _param_size = _param.size, size = _param_size === void 0 ? 24 : _param_size, width = _param.width, height = _param.height, style = _param.style, _param_withBorder = _param.withBorder, withBorder = _param_withBorder === void 0 ? true : _param_withBorder, fallbackIconProp = _param["fallbackIcon"], children = _param.children, ariaLabel = _param["aria-label"], onClick = _param.onClick, onLoad = _param.onLoad, onError = _param.onError, restProps = _object_without_properties(_param, [
         "alt",
         "crossOrigin",
         "decoding",
@@ -29,8 +30,6 @@ export { ImageBaseContext };
         "width",
         "height",
         "style",
-        "className",
-        "getRootRef",
         "withBorder",
         "fallbackIcon",
         "children",
@@ -102,13 +101,12 @@ export { ImageBaseContext };
         value: {
             size: size
         }
-    }, /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
+    }, /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
         style: _object_spread_props(_object_spread({}, style), {
             width: size,
             height: size
         }),
-        className: classNames(className, "vkuiImageBase", sizeClassName, loaded && "vkuiImageBase--loaded"),
+        baseClassName: classNames("vkuiImageBase", sizeClassName, loaded && "vkuiImageBase--loaded"),
         role: hasSrc ? "img" : "presentation",
         "aria-label": ariaLabel,
         onClick: onClick
@@ -129,7 +127,7 @@ export { ImageBaseContext };
         onLoad: handleImageLoad,
         onError: handleImageError
     }), fallbackIcon && /*#__PURE__*/ React.createElement("div", {
-        className: classNames("vkuiImageBase__fallback")
+        className: "vkuiImageBase__fallback"
     }, fallbackIcon), children, withBorder && /*#__PURE__*/ React.createElement("div", {
         "aria-hidden": true,
         className: "vkuiImageBase__border"

package/dist/components/ImageBase/ImageBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","useExternRef","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","Badge","Overlay"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <RootComponent\n        {...restProps}\n        style={{ ...style, width: size, height: size }}\n        baseClassName={classNames(\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </RootComponent>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","useExternRef","RootComponent","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","sizeClassName","Provider","baseClassName","role","aria-label","img","ref","className","div","aria-hidden","Badge","Overlay"],"mappings":"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"}

package/dist/components/ImageBase/ImageBaseBadge/ImageBaseBadge.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { HasRootRef } from '../../../types';
 import type { ImageBaseExpectedIconProps } from '../types';
-export interface ImageBaseBadgeProps extends React.AriaAttributes {
+export interface ImageBaseBadgeProps extends React.AriaAttributes, HasRootRef<HTMLDivElement> {
     /**
      * Вид подложки под иконку.
      *
@@ -27,4 +28,4 @@ export interface ImageBaseBadgeProps extends React.AriaAttributes {
  *
  * > Не используйте при `size < 24`
  */
-export declare const ImageBaseBadge: ({ background, children, className, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;
+export declare const ImageBaseBadge: ({ background, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;