@vkontakte/vkui 7.11.2 → 7.11.3

package/dist/components/ContentCard/ContentCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAOxE,MAAM,WAAW,gBACf,SAAQ,UAAU,CAAC,cAAc,CAAC,EAChC,YAAY,EACZ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC,EACvE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,MAAM,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,EAC7F,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;CACnD;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,gSA+BzB,gBAAgB,KAAG,KAAK,CAAC,SA0D3B,CAAC"}
+{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAOxE,MAAM,WAAW,gBACf,SAAQ,UAAU,CAAC,cAAc,CAAC,EAChC,YAAY,EACZ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC,EACvE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,MAAM,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,EAC7F,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;CACnD;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,gSA+BzB,gBAAgB,KAAG,KAAK,CAAC,SA6D3B,CAAC"}

package/dist/components/ContentCard/ContentCard.js

@@ -58,6 +58,10 @@ import { Text } from "../Typography/Text/Text.js";
             baseClassName: "vkuiContentCard__tappable",
             children: [
                 (src || srcSet) && /*#__PURE__*/ _jsx("img", _object_spread_props(_object_spread({
+                    // safari и firefox нужно чтобы атрибут `loading` был до `src`
+                    //
+                    // https://mihaly4.ru/image-loading-lazy-bug
+                    loading: loading,
                     ref: getRef,
                     className: "vkuiContentCard__img",
                     src: src,
@@ -65,7 +69,6 @@ import { Text } from "../Typography/Text/Text.js";
                     alt: alt,
                     crossOrigin: crossOrigin,
                     decoding: decoding,
-                    loading: loading,
                     referrerPolicy: referrerPolicy,
                     sizes: sizes,
                     useMap: useMap

package/dist/components/ContentCard/ContentCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    HasComponent,\n    Omit<TappableOmitProps, 'getRootRef' | 'crossOrigin' | 'title' | 'src'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка.\n   */\n  titleComponent?: React.ElementType;\n  /**\n   Текст.\n   */\n  description?: React.ReactNode;\n  /**\n   Нижний текст.\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения.\n   */\n  maxHeight?: number;\n  /**\n   * Внешний вид карточки.\n   */\n  mode?: CardProps['mode'];\n  /**\n   * Пользовательское значения стиля `object-fit` для картинки\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n   */\n  imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/**\n * @see https://vkui.io/components/content-card\n */\nexport const ContentCard = ({\n  overTitle,\n  title,\n  titleComponent = 'span',\n  description,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width = '100%',\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  imageObjectFit,\n  hasHover = false,\n  hasActive = false,\n  Component = 'li',\n  ...restProps\n}: ContentCardProps): React.ReactNode => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      Component={Component}\n      style={style}\n      className={classNames(restProps.disabled && styles.disabled, className)}\n    >\n      <Tappable\n        hasHover={hasHover}\n        hasActive={hasActive}\n        {...restProps}\n        baseClassName={styles.tappable}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            width={width}\n            style={{ maxHeight, objectFit: imageObjectFit }}\n          />\n        )}\n        <div className={styles.body}>\n          {hasReactNode(overTitle) && (\n            <Caption\n              className={classNames(styles.text, styles.overTitle)}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {overTitle}\n            </Caption>\n          )}\n          {hasReactNode(title) && (\n            <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n              {title}\n            </Headline>\n          )}\n          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","imageObjectFit","hasHover","hasActive","Component","restProps","disabled","baseClassName","img","ref","objectFit","div","weight","level","caps"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AA4C/C;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;IACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;IACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAEC,WADdC;QA7BH3B;QACAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,KAACjC;QACCa,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWf,WAAWqC,UAAUC,QAAQ,iCAAqBvB;kBAE7D,cAAA,MAACX;YACC8B,UAAUA;YACVC,WAAWA;WACPE;YACJE,aAAa;;gBAEXlB,CAAAA,OAAOC,MAAK,mBACZ,KAACkB;oBACCC,KAAKtB;oBACLJ,SAAS;oBACTM,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;mBACJ7B,qBAAqB8B;oBACzBP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWsB,WAAWT;oBAAe;;8BAGlD,MAACU;oBAAI5B,SAAS;;wBACXd,aAAaS,4BACZ,KAACL;4BACCU,WAAWf;4BACX4C,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHpC;;wBAGJT,aAAaU,wBACZ,KAACJ;4BAASQ,SAAS;4BAAe6B,QAAO;4BAAIC,OAAM;4BAAIT,WAAWxB;sCAC/DD;;wBAGJV,aAAaY,8BAAgB,KAACL;4BAAKO,SAAS;sCAAgBF;;wBAC5DZ,aAAaa,0BACZ,KAACR;4BAASS,WAAWf;sCAA0Cc;;;;;;;AAM3E,EAAE"}
+{"version":3,"sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    HasComponent,\n    Omit<TappableOmitProps, 'getRootRef' | 'crossOrigin' | 'title' | 'src'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   Заголовок.\n   */\n  title?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка.\n   */\n  titleComponent?: React.ElementType;\n  /**\n   Текст.\n   */\n  description?: React.ReactNode;\n  /**\n   Нижний текст.\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения.\n   */\n  maxHeight?: number;\n  /**\n   * Внешний вид карточки.\n   */\n  mode?: CardProps['mode'];\n  /**\n   * Пользовательское значения стиля `object-fit` для картинки\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n   */\n  imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/**\n * @see https://vkui.io/components/content-card\n */\nexport const ContentCard = ({\n  overTitle,\n  title,\n  titleComponent = 'span',\n  description,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width = '100%',\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  imageObjectFit,\n  hasHover = false,\n  hasActive = false,\n  Component = 'li',\n  ...restProps\n}: ContentCardProps): React.ReactNode => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      Component={Component}\n      style={style}\n      className={classNames(restProps.disabled && styles.disabled, className)}\n    >\n      <Tappable\n        hasHover={hasHover}\n        hasActive={hasActive}\n        {...restProps}\n        baseClassName={styles.tappable}\n      >\n        {(src || srcSet) && (\n          <img\n            // safari и firefox нужно чтобы атрибут `loading` был до `src`\n            //\n            // https://mihaly4.ru/image-loading-lazy-bug\n            loading={loading}\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            width={width}\n            style={{ maxHeight, objectFit: imageObjectFit }}\n          />\n        )}\n        <div className={styles.body}>\n          {hasReactNode(overTitle) && (\n            <Caption\n              className={classNames(styles.text, styles.overTitle)}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {overTitle}\n            </Caption>\n          )}\n          {hasReactNode(title) && (\n            <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n              {title}\n            </Headline>\n          )}\n          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","imageObjectFit","hasHover","hasActive","Component","restProps","disabled","baseClassName","img","ref","objectFit","div","weight","level","caps"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AA4C/C;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;IACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;IACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAEC,WADdC;QA7BH3B;QACAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,KAACjC;QACCa,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWf,WAAWqC,UAAUC,QAAQ,iCAAqBvB;kBAE7D,cAAA,MAACX;YACC8B,UAAUA;YACVC,WAAWA;WACPE;YACJE,aAAa;;gBAEXlB,CAAAA,OAAOC,MAAK,mBACZ,KAACkB;oBACC,8DAA8D;oBAC9D,EAAE;oBACF,4CAA4C;oBAC5CZ,SAASA;oBACTa,KAAKtB;oBACLJ,SAAS;oBACTM,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVE,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;mBACJ7B,qBAAqB8B;oBACzBP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWsB,WAAWT;oBAAe;;8BAGlD,MAACU;oBAAI5B,SAAS;;wBACXd,aAAaS,4BACZ,KAACL;4BACCU,WAAWf;4BACX4C,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHpC;;wBAGJT,aAAaU,wBACZ,KAACJ;4BAASQ,SAAS;4BAAe6B,QAAO;4BAAIC,OAAM;4BAAIT,WAAWxB;sCAC/DD;;wBAGJV,aAAaY,8BAAgB,KAACL;4BAAKO,SAAS;sCAAgBF;;wBAC5DZ,aAAaa,0BACZ,KAACR;4BAASS,WAAWf;sCAA0Cc;;;;;;;AAM3E,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,UAAU,EACV,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,qBAAqB,EACrB,KAAK,0BAA0B,EAChC,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,EACrB,uBAAuB,GACxB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAS5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACvD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE;QACV,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;KACrF,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACtC;AA8BD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,KAAK,EAAE,OAAO,cAAc,CAAC;IAC7B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,YAAY,EAAE,OAAO,qBAAqB,CAAC;CA0L5C,CAAC"}
+{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,UAAU,EACV,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,qBAAqB,EACrB,KAAK,0BAA0B,EAChC,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,EACrB,uBAAuB,GACxB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAS5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACvD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE;QACV,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;KACrF,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACtC;AA8BD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,KAAK,EAAE,OAAO,cAAc,CAAC;IAC7B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,YAAY,EAAE,OAAO,qBAAqB,CAAC;CA6L5C,CAAC"}

package/dist/components/ImageBase/ImageBase.js

@@ -125,12 +125,15 @@ const sizeToNumber = (size)=>{
         onError === null || onError === void 0 ? void 0 : onError(event);
     };
     const _useMergeProps = useMergeProps(hasSrc ? {
+        // safari и firefox нужно чтобы атрибут `loading` был до `src`
+        //
+        // https://mihaly4.ru/image-loading-lazy-bug
+        loading,
         getRootRef: getRef,
         alt,
         className: classNames("vkuiImageBase__img", getObjectFitClassName(objectFit), objectPosition && "vkuiImageBase__withObjectPosition", filter && "vkuiImageBase__withFilter", keepAspectRatio && "vkuiImageBase__imgKeepRatio", failed && "vkuiImageBase__imgHiddenAlt"),
         crossOrigin,
         decoding,
-        loading,
         referrerPolicy,
         style: mergeStyle(keepAspectRatio ? {
             width: widthImg || width,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { minOr } from '../../lib/comparing';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type {\n  AnchorHTMLAttributesOnly,\n  HasDataAttribute,\n  HasRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport {\n  type FloatElementIndentation,\n  type FloatElementPlacement,\n  ImageBaseFloatElement,\n  type ImageBaseFloatElementProps,\n} from './ImageBaseFloatElement/ImageBaseFloatElement';\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  ImageBaseFloatElementProps,\n  FloatElementPlacement,\n  FloatElementIndentation,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nconst warn = warnOnce('ImageBase');\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement> {\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  widthSize?: number | string;\n  /**\n   * Высота изображения.\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: 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   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Пользовательское значения стиля object-position\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).\n   */\n  objectPosition?: React.CSSProperties['objectPosition'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.\n   */\n  keepAspectRatio?: boolean;\n  /**\n   * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.\n   */\n  elementTiming?: string;\n  /**\n   * Пользовательское значения стиля filter\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).\n   */\n  filter?: React.CSSProperties['filter'];\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `img`: свойства для прокидывания в тег `<img>`;.\n   */\n  slotProps?: {\n    img?: React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute;\n  };\n  /**\n   * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLImageElement>; // TODO [>=9] Удалить свойство\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles.imgObjectFitContain;\n    case 'cover':\n      return styles.imgObjectFitCover;\n    case 'none':\n      return styles.imgObjectFitNone;\n    case 'scale-down':\n      return styles.imgObjectFitScaleDown;\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkui.io/components/image-base\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n  FloatElement: typeof ImageBaseFloatElement;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority: fetchPriorityProp,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  objectPosition,\n  filter,\n  keepAspectRatio = false,\n  getRootRef,\n  elementTiming,\n  slotProps,\n  ...restProps\n}: ImageBaseProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore if: не проверяем в тестах */\n    if (getRef) {\n      warn(\n        'Свойство `getRef` устаревшее и будет удалено в VKUI v9. Используйте `slotProps={ img: { getRootRef: ... } }`',\n      );\n    }\n  }\n\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n  const wrapperRef = useExternRef(getRootRef);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const mouseOverHandlersRef = useRef<VoidFunction[]>([]);\n  const mouseOutHandlersRef = useRef<VoidFunction[]>([]);\n\n  const hasSrc = src || srcSet;\n  const fallbackIcon = failed || !hasSrc ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (React.isValidElement(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 {\n    getRootRef: getImgRef,\n    fetchPriority,\n    ...imgRest\n  } = useMergeProps<React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute>(\n    hasSrc\n      ? {\n          getRootRef: getRef,\n          alt,\n          className: classNames(\n            styles.img,\n            getObjectFitClassName(objectFit),\n            objectPosition && styles.withObjectPosition,\n            filter && styles.withFilter,\n            keepAspectRatio && styles.imgKeepRatio,\n            failed && styles.imgHiddenAlt,\n          ),\n          crossOrigin,\n          decoding,\n          loading,\n          referrerPolicy,\n          style: mergeStyle(\n            keepAspectRatio\n              ? {\n                  width: widthImg || width,\n                  height: heightImg || height,\n                }\n              : undefined,\n            objectPosition || filter\n              ? {\n                  '--vkui_internal--ImageBase_object_position': objectPosition,\n                  '--vkui_internal--ImageBase_object_filter': filter,\n                }\n              : undefined,\n          ),\n          sizes,\n          src,\n          srcSet,\n          useMap,\n          width,\n          height,\n          onLoad: handleImageLoad,\n          onError: handleImageError,\n          fetchPriority: fetchPriorityProp,\n          // @ts-expect-error: TS2322 отсутствует в @types/react\n          elementtiming: elementTiming, // eslint-disable-line react/no-unknown-property\n        }\n      : {},\n    hasSrc ? slotProps?.img : undefined,\n  );\n\n  const imgRef = useExternRef(getImgRef);\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 onMouseOver = () => {\n    mouseOverHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const onMouseOut = () => {\n    mouseOutHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      onMouseOverHandlers: mouseOverHandlersRef.current,\n      onMouseOutHandlers: mouseOutHandlersRef.current,\n    }),\n    [size],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={contextValue}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          hasSrc && loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        getRootRef={wrapperRef}\n        onMouseOver={onMouseOver}\n        onMouseOut={onMouseOut}\n        {...restProps}\n      >\n        {hasSrc && <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />}\n        {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n        {children && <div className={styles.children}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles.border} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\nImageBase.Badge = ImageBaseBadge;\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.FloatElement = ImageBaseFloatElement;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ImageBase.Badge, 'ImageBase.Badge');\n  defineComponentDisplayNames(ImageBase.Overlay, 'ImageBase.Overlay');\n  defineComponentDisplayNames(ImageBase.FloatElement, 'ImageBase.FloatElement');\n}\n"],"names":["useRef","React","classNames","mergeStyle","useExternRef","useMergeProps","minOr","defineComponentDisplayNames","getFetchPriorityProp","warnOnce","Clickable","ImageBaseBadge","ImageBaseFloatElement","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","warn","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","fetchPriorityProp","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","objectPosition","filter","keepAspectRatio","getRootRef","elementTiming","slotProps","restProps","process","env","NODE_ENV","wrapperRef","loaded","setLoaded","useState","failed","setFailed","mouseOverHandlersRef","mouseOutHandlersRef","hasSrc","isValidElement","name","handleImageLoad","event","handleImageError","className","style","elementtiming","img","getImgRef","imgRest","imgRef","isOnLoadStatusCheckedRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","Provider","baseStyle","baseClassName","ref","div","aria-hidden","Badge","Overlay","FloatElement"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { minOr } from '../../lib/comparing';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type {\n  AnchorHTMLAttributesOnly,\n  HasDataAttribute,\n  HasRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport {\n  type FloatElementIndentation,\n  type FloatElementPlacement,\n  ImageBaseFloatElement,\n  type ImageBaseFloatElementProps,\n} from './ImageBaseFloatElement/ImageBaseFloatElement';\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  ImageBaseFloatElementProps,\n  FloatElementPlacement,\n  FloatElementIndentation,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nconst warn = warnOnce('ImageBase');\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement> {\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  widthSize?: number | string;\n  /**\n   * Высота изображения.\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: 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   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Пользовательское значения стиля object-position\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).\n   */\n  objectPosition?: React.CSSProperties['objectPosition'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.\n   */\n  keepAspectRatio?: boolean;\n  /**\n   * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.\n   */\n  elementTiming?: string;\n  /**\n   * Пользовательское значения стиля filter\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).\n   */\n  filter?: React.CSSProperties['filter'];\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `img`: свойства для прокидывания в тег `<img>`;.\n   */\n  slotProps?: {\n    img?: React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute;\n  };\n  /**\n   * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLImageElement>; // TODO [>=9] Удалить свойство\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles.imgObjectFitContain;\n    case 'cover':\n      return styles.imgObjectFitCover;\n    case 'none':\n      return styles.imgObjectFitNone;\n    case 'scale-down':\n      return styles.imgObjectFitScaleDown;\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkui.io/components/image-base\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n  FloatElement: typeof ImageBaseFloatElement;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority: fetchPriorityProp,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  objectPosition,\n  filter,\n  keepAspectRatio = false,\n  getRootRef,\n  elementTiming,\n  slotProps,\n  ...restProps\n}: ImageBaseProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore if: не проверяем в тестах */\n    if (getRef) {\n      warn(\n        'Свойство `getRef` устаревшее и будет удалено в VKUI v9. Используйте `slotProps={ img: { getRootRef: ... } }`',\n      );\n    }\n  }\n\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n  const wrapperRef = useExternRef(getRootRef);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const mouseOverHandlersRef = useRef<VoidFunction[]>([]);\n  const mouseOutHandlersRef = useRef<VoidFunction[]>([]);\n\n  const hasSrc = src || srcSet;\n  const fallbackIcon = failed || !hasSrc ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (React.isValidElement(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 {\n    getRootRef: getImgRef,\n    fetchPriority,\n    ...imgRest\n  } = useMergeProps<React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute>(\n    hasSrc\n      ? {\n          // safari и firefox нужно чтобы атрибут `loading` был до `src`\n          //\n          // https://mihaly4.ru/image-loading-lazy-bug\n          loading,\n          getRootRef: getRef,\n          alt,\n          className: classNames(\n            styles.img,\n            getObjectFitClassName(objectFit),\n            objectPosition && styles.withObjectPosition,\n            filter && styles.withFilter,\n            keepAspectRatio && styles.imgKeepRatio,\n            failed && styles.imgHiddenAlt,\n          ),\n          crossOrigin,\n          decoding,\n          referrerPolicy,\n          style: mergeStyle(\n            keepAspectRatio\n              ? {\n                  width: widthImg || width,\n                  height: heightImg || height,\n                }\n              : undefined,\n            objectPosition || filter\n              ? {\n                  '--vkui_internal--ImageBase_object_position': objectPosition,\n                  '--vkui_internal--ImageBase_object_filter': filter,\n                }\n              : undefined,\n          ),\n          sizes,\n          src,\n          srcSet,\n          useMap,\n          width,\n          height,\n          onLoad: handleImageLoad,\n          onError: handleImageError,\n          fetchPriority: fetchPriorityProp,\n          // @ts-expect-error: TS2322 отсутствует в @types/react\n          elementtiming: elementTiming, // eslint-disable-line react/no-unknown-property\n        }\n      : {},\n    hasSrc ? slotProps?.img : undefined,\n  );\n\n  const imgRef = useExternRef(getImgRef);\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 onMouseOver = () => {\n    mouseOverHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const onMouseOut = () => {\n    mouseOutHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      onMouseOverHandlers: mouseOverHandlersRef.current,\n      onMouseOutHandlers: mouseOutHandlersRef.current,\n    }),\n    [size],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={contextValue}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          hasSrc && loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        getRootRef={wrapperRef}\n        onMouseOver={onMouseOver}\n        onMouseOut={onMouseOut}\n        {...restProps}\n      >\n        {hasSrc && <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />}\n        {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n        {children && <div className={styles.children}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles.border} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\nImageBase.Badge = ImageBaseBadge;\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.FloatElement = ImageBaseFloatElement;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ImageBase.Badge, 'ImageBase.Badge');\n  defineComponentDisplayNames(ImageBase.Overlay, 'ImageBase.Overlay');\n  defineComponentDisplayNames(ImageBase.FloatElement, 'ImageBase.FloatElement');\n}\n"],"names":["useRef","React","classNames","mergeStyle","useExternRef","useMergeProps","minOr","defineComponentDisplayNames","getFetchPriorityProp","warnOnce","Clickable","ImageBaseBadge","ImageBaseFloatElement","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","warn","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","fetchPriorityProp","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","objectPosition","filter","keepAspectRatio","getRootRef","elementTiming","slotProps","restProps","process","env","NODE_ENV","wrapperRef","loaded","setLoaded","useState","failed","setFailed","mouseOverHandlersRef","mouseOutHandlersRef","hasSrc","isValidElement","name","handleImageLoad","event","handleImageError","className","style","elementtiming","img","getImgRef","imgRest","imgRef","isOnLoadStatusCheckedRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","Provider","baseStyle","baseClassName","ref","div","aria-hidden","Badge","Overlay","FloatElement"],"mappings":"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"}

package/dist/components/PanelHeaderButton/PanelHeaderButton.d.ts

@@ -14,5 +14,5 @@ export interface PanelHeaderButtonProps extends Omit<TappableOmitProps, 'label'>
 /**
  * @see https://vkui.io/components/panel-header#panel-header-button
  */
-export declare const PanelHeaderButton: ({ children, primary, label, ...restProps }: PanelHeaderButtonProps) => React.ReactNode;
+export declare const PanelHeaderButton: ({ children, primary, label, activeEffectDelay, hoverMode, activeMode, ...restProps }: PanelHeaderButtonProps) => React.ReactNode;
 //# sourceMappingURL=PanelHeaderButton.d.ts.map

package/dist/components/PanelHeaderButton/PanelHeaderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderButton.d.ts","sourceRoot":"","sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAWxE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC;IAC9E;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AA0BD;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,4CAK/B,sBAAsB,KAAG,KAAK,CAAC,SA+DjC,CAAC"}
+{"version":3,"file":"PanelHeaderButton.d.ts","sourceRoot":"","sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAuBxE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC;IAC9E;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AA0BD;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,sFAQ/B,sBAAsB,KAAG,KAAK,CAAC,SA8CjC,CAAC"}

package/dist/components/PanelHeaderButton/PanelHeaderButton.js

@@ -16,6 +16,16 @@ const platformClassNames = {
     android: "vkuiPanelHeaderButton__android",
     vkcom: "vkuiPanelHeaderButton__vkcom"
 };
+const defaultHoverMode = {
+    ios: 'background',
+    android: 'background',
+    vkcom: "vkuiPanelHeaderButton__hover"
+};
+const defaultActiveMode = {
+    ios: 'opacity',
+    android: 'background',
+    vkcom: "vkuiPanelHeaderButton__active"
+};
 const ButtonTypography = ({ primary, children })=>{
     const platform = usePlatform();
     if (platform === 'ios') {
@@ -35,29 +45,17 @@ const warn = warnOnce('PanelHeaderButton');
 /**
  * @see https://vkui.io/components/panel-header#panel-header-button
  */ export const PanelHeaderButton = (_param)=>{
-    var { children, primary = false, label } = _param, restProps = _object_without_properties(_param, [
+    var { children, primary = false, label, activeEffectDelay = 200, hoverMode, activeMode } = _param, restProps = _object_without_properties(_param, [
         "children",
         "primary",
-        "label"
+        "label",
+        "activeEffectDelay",
+        "hoverMode",
+        "activeMode"
     ]);
     const isPrimitive = isPrimitiveReactNode(children);
     const isPrimitiveLabel = isPrimitiveReactNode(label);
     const platform = usePlatform();
-    let hoverMode;
-    let activeMode;
-    switch(platform){
-        case 'ios':
-            hoverMode = 'background';
-            activeMode = 'opacity';
-            break;
-        case 'vkcom':
-            hoverMode = "vkuiPanelHeaderButton__hover";
-            activeMode = "vkuiPanelHeaderButton__active";
-            break;
-        default:
-            hoverMode = 'background';
-            activeMode = 'background';
-    }
     if (process.env.NODE_ENV === 'development') {
         /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */ const isAccessible = hasAccessibleName(_object_spread({
             children: [
@@ -76,9 +74,9 @@ const warn = warnOnce('PanelHeaderButton');
     const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);
     return /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({
         Component: restProps.href ? 'a' : 'button',
-        hoverMode: hoverMode,
-        activeEffectDelay: 200,
-        activeMode: activeMode
+        activeEffectDelay: activeEffectDelay,
+        hoverMode: hoverMode ? hoverMode : defaultHoverMode[platform],
+        activeMode: activeMode ? activeMode : defaultActiveMode[platform]
     }, restProps), {
         baseClassName: classNames("vkuiPanelHeaderButton__host", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, onlyPrimitive && "vkuiPanelHeaderButton__primitive", !isPrimitive && !isPrimitiveLabel && "vkuiPanelHeaderButton__notPrimitive"),
         children: [

package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableOmitProps, 'label'> {\n  /**\n   * Флаг для обозначения первичной кнопки\n   * Влияет на стилизацию кнопки.\n   */\n  primary?: boolean;\n  /**\n   * Текст или содержимое кнопки.\n   */\n  label?: React.ReactNode; // TODO [>=8]: добавить св-во indicator, чтобы разграничить кейсы.\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  /**\n   * Флаг для обозначения первичной кнопки\n   * Наследуется от PanelHeaderButtonProps['primary'].\n   */\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkui.io/components/panel-header#panel-header-button\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles.hover;\n      activeMode = styles.active;\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n  const elements = [label, children].filter((item) => !!item);\n\n  const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        onlyPrimitive && styles.primitive,\n        !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles.label}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","activeEffectDelay","baseClassName","hasOwnProperty","className"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAGlD,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAsBA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWd;IAEjB,IAAIc,aAAa,OAAO;QACtB,qBACE,KAACR;YAAMS,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACR;QAAKY,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOhB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMiB,oBAAoB;QAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EAEkB,WADpBC;QAHHT;QACAD;QACAS;;IAGA,MAAME,cAAcxB,qBAAqBc;IACzC,MAAMW,mBAAmBzB,qBAAqBsB;IAC9C,MAAMP,WAAWd;IAEjB,IAAIyB;IACJ,IAAIC;IAEJ,OAAQZ;QACN,KAAK;YACHW,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD;YACAC;YACA;QACF;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe7B,kBAAkB;YACrCY,UAAU;gBAACA;gBAAUQ;aAAM;WACxBC;QAGL,IAAI,CAACQ,cAAc;YACjBX,KAAKjB,gBAAgB6B,IAAI,CAACT,UAAUU,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACZ;QAAOR;KAAS,CAACqB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAKtC,qBAAqBkC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAAC7B;QACCW,WAAWO,UAAUU,IAAI,GAAG,MAAM;QAClCP,WAAWA;QACXa,mBAAmB;QACnBZ,YAAYA;OACRJ;QACJiB,eAAezC,0CAEbS,mBAAmBiC,cAAc,CAAC1B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9B2B,qDACA,CAACb,eAAe,CAACC;;YAGlBD,4BAAc,KAACZ;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFW,iCACC,KAACb;gBAAiBC,SAASA;gBAAS6B,SAAS;0BAC1CpB;iBAGHA;;;AAIR,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: styles.vkcom,\n};\n\nconst defaultHoverMode = {\n  ios: 'background',\n  android: 'background',\n  vkcom: styles.hover,\n};\n\nconst defaultActiveMode = {\n  ios: 'opacity',\n  android: 'background',\n  vkcom: styles.active,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableOmitProps, 'label'> {\n  /**\n   * Флаг для обозначения первичной кнопки\n   * Влияет на стилизацию кнопки.\n   */\n  primary?: boolean;\n  /**\n   * Текст или содержимое кнопки.\n   */\n  label?: React.ReactNode; // TODO [>=8]: добавить св-во indicator, чтобы разграничить кейсы.\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  /**\n   * Флаг для обозначения первичной кнопки\n   * Наследуется от PanelHeaderButtonProps['primary'].\n   */\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkui.io/components/panel-header#panel-header-button\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  activeEffectDelay = 200,\n  hoverMode,\n  activeMode,\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n  const elements = [label, children].filter((item) => !!item);\n\n  const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      activeEffectDelay={activeEffectDelay}\n      hoverMode={hoverMode ? hoverMode : defaultHoverMode[platform]}\n      activeMode={activeMode ? activeMode : defaultActiveMode[platform]}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        onlyPrimitive && styles.primitive,\n        !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles.label}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","platformClassNames","ios","android","vkcom","defaultHoverMode","defaultActiveMode","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","activeEffectDelay","hoverMode","activeMode","restProps","isPrimitive","isPrimitiveLabel","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","baseClassName","hasOwnProperty","className"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAGlD,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAEA,MAAMC,mBAAmB;IACvBH,KAAK;IACLC,SAAS;IACTC,KAAK;AACP;AAEA,MAAME,oBAAoB;IACxBJ,KAAK;IACLC,SAAS;IACTC,KAAK;AACP;AAsBA,MAAMG,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWhB;IAEjB,IAAIgB,aAAa,OAAO;QACtB,qBACE,KAACV;YAAMW,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACV;QAAKc,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOlB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMmB,oBAAoB;QAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACLC,oBAAoB,GAAG,EACvBC,SAAS,EACTC,UAAU,EAEa,WADpBC;QANHZ;QACAD;QACAS;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAc7B,qBAAqBgB;IACzC,MAAMc,mBAAmB9B,qBAAqBwB;IAC9C,MAAMP,WAAWhB;IAEjB,IAAI8B,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAehC,kBAAkB;YACrCc,UAAU;gBAACA;gBAAUQ;aAAM;WACxBI;QAGL,IAAI,CAACM,cAAc;YACjBZ,KAAKnB,gBAAgBgC,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACb;QAAOR;KAAS,CAACsB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAKzC,qBAAqBqC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAAChC;QACCa,WAAWU,UAAUQ,IAAI,GAAG,MAAM;QAClCX,mBAAmBA;QACnBC,WAAWA,YAAYA,YAAYd,gBAAgB,CAACK,SAAS;QAC7DU,YAAYA,aAAaA,aAAad,iBAAiB,CAACI,SAAS;OAC7DW;QACJc,eAAe3C,0CAEbS,mBAAmBmC,cAAc,CAAC1B,YAC9BT,kBAAkB,CAACS,SAAS,GAC5BT,mBAAmBE,OAAO,EAC9B8B,qDACA,CAACX,eAAe,CAACC;;YAGlBD,4BAAc,KAACf;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFc,iCACC,KAAChB;gBAAiBC,SAASA;gBAAS6B,SAAS;0BAC1CpB;iBAGHA;;;AAIR,EAAE"}

package/dist/components/Tooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,GAAG,EAAe,MAAM,OAAO,CAAC;AAS9C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sDAAsD,CAAC;AAG3F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IAC7D,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,WAAW,SAAS,WAAW,GAAG,WAAW,IAAI;IAC5E;;OAEG;IACH,SAAS,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IAC5B;;OAEG;IACH,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,seAuCxB,eAAe,KAAG,gBAqHpB,CAAC"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,GAAG,EAAe,MAAM,OAAO,CAAC;AAS9C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sDAAsD,CAAC;AAG3F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IAC7D,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,WAAW,SAAS,WAAW,GAAG,WAAW,IAAI;IAC5E;;OAEG;IACH,SAAS,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IAC5B;;OAEG;IACH,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,seAuCxB,eAAe,KAAG,gBAyGpB,CAAC"}

package/dist/components/Tooltip/useTooltip.js

@@ -8,7 +8,7 @@ import { useCallback } from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useFloatingElement } from "../../hooks/useFloatingElement.js";
 import { animationFadeClassNames } from "../../lib/animation/index.js";
-import { getArrowCoordsByMiddlewareData, sizeMiddleware } from "../../lib/floating/index.js";
+import { getArrowCoordsByMiddlewareData } from "../../lib/floating/index.js";
 import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
 import { TooltipBase } from "../TooltipBase/TooltipBase.js";
 export const useTooltip = (_param)=>{
@@ -118,18 +118,7 @@ export const useTooltip = (_param)=>{
         onPlacementChange,
         renderFloatingComponent,
         externalFloatingElementRef: getRootRef,
-        remapReferenceProps,
-        customMiddlewares: [
-            sizeMiddleware({
-                apply ({ rects, elements, availableWidth }) {
-                    const width = Math.min(Math.ceil(rects.floating.width), Math.floor(availableWidth));
-                    Object.assign(elements.floating.style, {
-                        width: `${width}px`
-                    });
-                },
-                padding: overflowPadding
-            })
-        ]
+        remapReferenceProps
     });
     return {
         anchorRef,

package/dist/components/Tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type Ref, useCallback } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  type FloatingComponentProps,\n  useFloatingElement,\n  type UseFloatingElementProps,\n} from '../../hooks/useFloatingElement';\nimport { animationFadeClassNames } from '../../lib/animation';\nimport { getArrowCoordsByMiddlewareData, sizeMiddleware } from '../../lib/floating';\nimport { type ReferenceProps } from '../../lib/floating/useFloatingWithInteractions/types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { TooltipBase } from '../TooltipBase/TooltipBase';\nimport { type TooltipProps } from './Tooltip';\n\nexport type UseTooltipProps = Omit<TooltipProps, 'children'> & {\n  [key: `data-${string}`]: string | number | boolean;\n};\n\nexport type UseTooltipResult<ElementType extends HTMLElement = HTMLElement> = {\n  /**\n   * Реф на якорный элемент.\n   */\n  anchorRef: Ref<ElementType>;\n  /**\n   * Свойства для якорного элемента, содержит необходимые обработчики.\n   */\n  anchorProps: ReferenceProps<ElementType>;\n  /**\n   * Отрендеренный компонент тултипа.\n   */\n  tooltip: React.ReactNode | null;\n};\n\nexport const useTooltip = ({\n  // UseFloatingMiddlewaresBootstrapOptions\n  placement: placementProp = 'bottom',\n  arrowPadding = 10,\n  arrowHeight = 8,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n  disableShiftMiddleware = false,\n  disableTriggerOnFocus = false,\n  onReferenceHiddenChange,\n  overflowPadding,\n\n  // useFloatingWithInteractions\n  defaultShown,\n  shown: shownProp,\n  onShownChange,\n  hoverDelay = 150,\n  strategy,\n\n  // инверсированные св-ва для useFloatingWithInteractions\n  enableInteractive = false,\n  disableArrow = false,\n  disableCloseAfterClick = false,\n\n  // AppRootProps\n  usePortal,\n\n  // TooltipBaseProps\n  id: idProp,\n  getRootRef,\n  appearance = 'neutral',\n  style: styleProp,\n  className,\n  zIndex = 'var(--vkui--z_index_popout)',\n  closable,\n  onPlacementChange,\n  ...popperProps\n}: UseTooltipProps): UseTooltipResult => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n\n  const renderFloatingComponent = useCallback(\n    ({\n      shown,\n      floatingProps,\n      floatingRef,\n      placement: resultPlacement,\n      middlewareData,\n      setArrowRef,\n      willBeHide,\n      onClose,\n    }: FloatingComponentProps<HTMLDivElement>) => {\n      if (!shown) {\n        return null;\n      }\n      return (\n        <AppRootPortal usePortal={usePortal}>\n          <TooltipBase\n            {...popperProps}\n            {...floatingProps}\n            style={{\n              ...floatingProps.style,\n              zIndex,\n              ...styleProp,\n            }}\n            id={tooltipId}\n            getRootRef={floatingRef}\n            appearance={appearance}\n            arrowProps={\n              disableArrow\n                ? undefined\n                : {\n                    placement: resultPlacement,\n                    coords: getArrowCoordsByMiddlewareData(middlewareData),\n                    getRootRef: setArrowRef,\n                  }\n            }\n            className={classNames(\n              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n              className,\n            )}\n            onCloseIconClick={closable ? onClose : undefined}\n          />\n        </AppRootPortal>\n      );\n    },\n    [\n      appearance,\n      className,\n      closable,\n      disableArrow,\n      popperProps,\n      styleProp,\n      tooltipId,\n      usePortal,\n      zIndex,\n    ],\n  );\n\n  const remapReferenceProps: Exclude<UseFloatingElementProps['remapReferenceProps'], undefined> =\n    useCallback(\n      ({ shown, ...referenceProps }) => ({\n        ...referenceProps,\n        ...(shown && { 'aria-describedby': tooltipId }),\n      }),\n      [tooltipId],\n    );\n\n  const { component, anchorRef, anchorProps } = useFloatingElement({\n    placement: placementProp,\n    arrow: !disableArrow,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    disableFlipMiddleware,\n    disableShiftMiddleware,\n    overflowPadding,\n\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    trigger: disableTriggerOnFocus ? 'hover' : ['hover', 'focus'],\n    onReferenceHiddenChange,\n    hoverDelay,\n    closeAfterClick: !disableCloseAfterClick,\n    disableInteractive: !enableInteractive,\n    strategy,\n\n    onPlacementChange,\n\n    renderFloatingComponent,\n    externalFloatingElementRef: getRootRef,\n    remapReferenceProps,\n\n    customMiddlewares: [\n      sizeMiddleware({\n        apply({ rects, elements, availableWidth }) {\n          const width = Math.min(Math.ceil(rects.floating.width), Math.floor(availableWidth));\n          Object.assign(elements.floating.style, {\n            width: `${width}px`,\n          });\n        },\n        padding: overflowPadding,\n      }),\n    ],\n  });\n\n  return {\n    anchorRef,\n    anchorProps,\n    tooltip: component,\n  };\n};\n"],"names":["React","useCallback","classNames","useFloatingElement","animationFadeClassNames","getArrowCoordsByMiddlewareData","sizeMiddleware","AppRootPortal","TooltipBase","useTooltip","placement","placementProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","hideWhenReferenceHidden","disableFlipMiddleware","disableShiftMiddleware","disableTriggerOnFocus","onReferenceHiddenChange","overflowPadding","defaultShown","shown","shownProp","onShownChange","hoverDelay","strategy","enableInteractive","disableArrow","disableCloseAfterClick","usePortal","id","idProp","getRootRef","appearance","style","styleProp","className","zIndex","closable","onPlacementChange","popperProps","generatedId","useId","tooltipId","renderFloatingComponent","floatingProps","floatingRef","resultPlacement","middlewareData","setArrowRef","willBeHide","onClose","arrowProps","undefined","coords","out","in","onCloseIconClick","remapReferenceProps","referenceProps","component","anchorRef","anchorProps","arrow","trigger","closeAfterClick","disableInteractive","externalFloatingElementRef","customMiddlewares","apply","rects","elements","availableWidth","width","Math","min","ceil","floating","floor","Object","assign","padding","tooltip"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type Ref, useCallback } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  type FloatingComponentProps,\n  useFloatingElement,\n  type UseFloatingElementProps,\n} from '../../hooks/useFloatingElement';\nimport { animationFadeClassNames } from '../../lib/animation';\nimport { getArrowCoordsByMiddlewareData } from '../../lib/floating';\nimport { type ReferenceProps } from '../../lib/floating/useFloatingWithInteractions/types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { TooltipBase } from '../TooltipBase/TooltipBase';\nimport { type TooltipProps } from './Tooltip';\n\nexport type UseTooltipProps = Omit<TooltipProps, 'children'> & {\n  [key: `data-${string}`]: string | number | boolean;\n};\n\nexport type UseTooltipResult<ElementType extends HTMLElement = HTMLElement> = {\n  /**\n   * Реф на якорный элемент.\n   */\n  anchorRef: Ref<ElementType>;\n  /**\n   * Свойства для якорного элемента, содержит необходимые обработчики.\n   */\n  anchorProps: ReferenceProps<ElementType>;\n  /**\n   * Отрендеренный компонент тултипа.\n   */\n  tooltip: React.ReactNode | null;\n};\n\nexport const useTooltip = ({\n  // UseFloatingMiddlewaresBootstrapOptions\n  placement: placementProp = 'bottom',\n  arrowPadding = 10,\n  arrowHeight = 8,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n  disableShiftMiddleware = false,\n  disableTriggerOnFocus = false,\n  onReferenceHiddenChange,\n  overflowPadding,\n\n  // useFloatingWithInteractions\n  defaultShown,\n  shown: shownProp,\n  onShownChange,\n  hoverDelay = 150,\n  strategy,\n\n  // инверсированные св-ва для useFloatingWithInteractions\n  enableInteractive = false,\n  disableArrow = false,\n  disableCloseAfterClick = false,\n\n  // AppRootProps\n  usePortal,\n\n  // TooltipBaseProps\n  id: idProp,\n  getRootRef,\n  appearance = 'neutral',\n  style: styleProp,\n  className,\n  zIndex = 'var(--vkui--z_index_popout)',\n  closable,\n  onPlacementChange,\n  ...popperProps\n}: UseTooltipProps): UseTooltipResult => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n\n  const renderFloatingComponent = useCallback(\n    ({\n      shown,\n      floatingProps,\n      floatingRef,\n      placement: resultPlacement,\n      middlewareData,\n      setArrowRef,\n      willBeHide,\n      onClose,\n    }: FloatingComponentProps<HTMLDivElement>) => {\n      if (!shown) {\n        return null;\n      }\n      return (\n        <AppRootPortal usePortal={usePortal}>\n          <TooltipBase\n            {...popperProps}\n            {...floatingProps}\n            style={{\n              ...floatingProps.style,\n              zIndex,\n              ...styleProp,\n            }}\n            id={tooltipId}\n            getRootRef={floatingRef}\n            appearance={appearance}\n            arrowProps={\n              disableArrow\n                ? undefined\n                : {\n                    placement: resultPlacement,\n                    coords: getArrowCoordsByMiddlewareData(middlewareData),\n                    getRootRef: setArrowRef,\n                  }\n            }\n            className={classNames(\n              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n              className,\n            )}\n            onCloseIconClick={closable ? onClose : undefined}\n          />\n        </AppRootPortal>\n      );\n    },\n    [\n      appearance,\n      className,\n      closable,\n      disableArrow,\n      popperProps,\n      styleProp,\n      tooltipId,\n      usePortal,\n      zIndex,\n    ],\n  );\n\n  const remapReferenceProps: Exclude<UseFloatingElementProps['remapReferenceProps'], undefined> =\n    useCallback(\n      ({ shown, ...referenceProps }) => ({\n        ...referenceProps,\n        ...(shown && { 'aria-describedby': tooltipId }),\n      }),\n      [tooltipId],\n    );\n\n  const { component, anchorRef, anchorProps } = useFloatingElement({\n    placement: placementProp,\n    arrow: !disableArrow,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    disableFlipMiddleware,\n    disableShiftMiddleware,\n    overflowPadding,\n\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    trigger: disableTriggerOnFocus ? 'hover' : ['hover', 'focus'],\n    onReferenceHiddenChange,\n    hoverDelay,\n    closeAfterClick: !disableCloseAfterClick,\n    disableInteractive: !enableInteractive,\n    strategy,\n\n    onPlacementChange,\n\n    renderFloatingComponent,\n    externalFloatingElementRef: getRootRef,\n    remapReferenceProps,\n  });\n\n  return {\n    anchorRef,\n    anchorProps,\n    tooltip: component,\n  };\n};\n"],"names":["React","useCallback","classNames","useFloatingElement","animationFadeClassNames","getArrowCoordsByMiddlewareData","AppRootPortal","TooltipBase","useTooltip","placement","placementProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","hideWhenReferenceHidden","disableFlipMiddleware","disableShiftMiddleware","disableTriggerOnFocus","onReferenceHiddenChange","overflowPadding","defaultShown","shown","shownProp","onShownChange","hoverDelay","strategy","enableInteractive","disableArrow","disableCloseAfterClick","usePortal","id","idProp","getRootRef","appearance","style","styleProp","className","zIndex","closable","onPlacementChange","popperProps","generatedId","useId","tooltipId","renderFloatingComponent","floatingProps","floatingRef","resultPlacement","middlewareData","setArrowRef","willBeHide","onClose","arrowProps","undefined","coords","out","in","onCloseIconClick","remapReferenceProps","referenceProps","component","anchorRef","anchorProps","arrow","trigger","closeAfterClick","disableInteractive","externalFloatingElementRef","tooltip"],"mappings":"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"}