@vkontakte/vkui 8.0.1 → 8.0.2

package/dist/components/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapProp,\n  type GapsProp,\n  resolveLayoutProps,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { LayoutProps } from '../../lib/layouts/types';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport { FlexItem, type FlexItemProps } from './FlexItem/FlexItem';\nimport styles from './Flex.module.css';\n\nexport type { FlexItemProps };\n\nconst justifyClassNames = {\n  'start': styles.justifyStart,\n  'end': styles.justifyEnd,\n  'center': styles.justifyCenter,\n  'space-around': styles.justifySpaceAround,\n  'space-between': styles.justifySpaceBetween,\n  'space-evenly': styles.justifySpaceEvenly,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nconst displayClassNames = {\n  'none': styles.displayNone,\n  'inline-flex': styles.displayInlineFlex,\n};\n\ntype FlexContentProps =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\nexport interface FlexProps extends RootComponentProps<HTMLElement>, LayoutProps {\n  /**\n   * Направление осей, эквивалентно `flex-direction`.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.\n   */\n  noWrap?: boolean;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n  /**\n   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.\n   */\n  justify?: FlexContentProps;\n  /**\n   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.\n   */\n  margin?: 'none' | 'auto';\n  /**\n   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.\n   */\n  reverse?: boolean;\n  /**\n   * Возможность задать css-свойство `display`.\n   */\n  display?: 'none' | 'flex' | 'inline-flex';\n}\n\n/**\n * @see https://vkui.io/components/flex\n */\nexport const Flex: React.FC<FlexProps> & {\n  /**\n   * @deprecated Since 7.11.0. Будет удалено в **VKUI v9**.\n   * Используйте компонент `Box`.\n   */\n  Item: typeof FlexItem;\n} = ({\n  gap = 0,\n  align,\n  justify,\n  margin = 'none',\n  noWrap = false,\n  direction = 'row',\n  reverse = false,\n  display = 'flex',\n  ...restProps\n}: FlexProps) => {\n  const [rowGap, columnGap] = calculateGap(gap);\n  const resolvedProps = resolveLayoutProps(restProps);\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        !noWrap && styles.wrap,\n        reverse && styles.reverse,\n        direction !== 'row' && styles.directionColumn,\n        margin !== 'none' && styles.marginAuto,\n        align && alignClassNames[align],\n        justify && justifyClassNames[justify],\n        getGapsPresets(rowGap, columnGap),\n        display !== 'flex' && displayClassNames[display],\n      )}\n      baseStyle={getGapsByUser(rowGap, columnGap)}\n      {...resolvedProps}\n    />\n  );\n};\n\nfunction getGapsPresets(rowGap: GapProp, columnGap: GapProp) {\n  return classNames(\n    typeof rowGap === 'string' && rowGapClassNames[rowGap],\n    typeof columnGap === 'string' && columnGapClassNames[columnGap],\n  );\n}\n\nfunction getGapsByUser(rowGap: GapProp, columnGap: GapProp) {\n  const style: CSSCustomProperties = {};\n\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n\n  return style;\n}\n\nFlex.Item = FlexItem;\n"],"names":["classNames","calculateGap","columnGapClassNames","resolveLayoutProps","rowGapClassNames","RootComponent","FlexItem","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","displayClassNames","Flex","gap","align","justify","margin","noWrap","direction","reverse","display","restProps","rowGap","columnGap","resolvedProps","baseClassName","getGapsPresets","baseStyle","getGapsByUser","style","Item"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAGnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,QAAQ,QAA4B,yBAAsB;AAKnE,MAAMC,oBAAoB;IACxB,OAAO;IACP,KAAK;IACL,QAAQ;IACR,cAAc;IACd,eAAe;IACf,cAAc;AAChB;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,oBAAoB;IACxB,MAAM;IACN,aAAa;AACf;AA+CA;;CAEC,GACD,OAAO,MAAMC,OAMT,CAAC,EACHC,MAAM,CAAC,EACPC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,UAAU,KAAK,EACfC,UAAU,MAAM,EAChB,GAAGC,WACO;IACV,MAAM,CAACC,QAAQC,UAAU,GAAGzB,aAAae;IACzC,MAAMW,gBAAgBxB,mBAAmBqB;IAEzC,qBACE,KAACnB;QACCuB,eAAe5B,6BAEb,CAACoB,4BACDE,gCACAD,cAAc,sCACdF,WAAW,kCACXF,SAAST,eAAe,CAACS,MAAM,EAC/BC,WAAWX,iBAAiB,CAACW,QAAQ,EACrCW,eAAeJ,QAAQC,YACvBH,YAAY,UAAUT,iBAAiB,CAACS,QAAQ;QAElDO,WAAWC,cAAcN,QAAQC;QAChC,GAAGC,aAAa;;AAGvB,EAAE;AAEF,SAASE,eAAeJ,MAAe,EAAEC,SAAkB;IACzD,OAAO1B,WACL,OAAOyB,WAAW,YAAYrB,gBAAgB,CAACqB,OAAO,EACtD,OAAOC,cAAc,YAAYxB,mBAAmB,CAACwB,UAAU;AAEnE;AAEA,SAASK,cAAcN,MAAe,EAAEC,SAAkB;IACxD,MAAMM,QAA6B,CAAC;IAEpC,IAAI,OAAOP,WAAW,UAAU;QAC9BO,KAAK,CAAC,2BAA2B,GAAG,GAAGP,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCM,KAAK,CAAC,8BAA8B,GAAG,GAAGN,UAAU,EAAE,CAAC;IACzD;IAEA,OAAOM;AACT;AAEAjB,KAAKkB,IAAI,GAAG3B"}
+{"version":3,"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapProp,\n  type GapsProp,\n  resolveLayoutProps,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { LayoutProps } from '../../lib/layouts/types';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport { FlexItem, type FlexItemProps } from './FlexItem/FlexItem';\nimport styles from './Flex.module.css';\nimport flexItemStyles from './FlexItem/FlexItem.module.css';\n\nexport type { FlexItemProps };\n\nconst justifyClassNames = {\n  'start': styles.justifyStart,\n  'end': styles.justifyEnd,\n  'center': styles.justifyCenter,\n  'space-around': styles.justifySpaceAround,\n  'space-between': styles.justifySpaceBetween,\n  'space-evenly': styles.justifySpaceEvenly,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nconst alignSelfClassNames = {\n  start: flexItemStyles.alignSelfStart,\n  end: flexItemStyles.alignSelfEnd,\n  center: flexItemStyles.alignSelfCenter,\n  baseline: flexItemStyles.alignSelfBaseline,\n  stretch: flexItemStyles.alignSelfStretch,\n};\n\nconst displayClassNames = {\n  'none': styles.displayNone,\n  'inline-flex': styles.displayInlineFlex,\n};\n\ntype FlexContentProps =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\nexport interface FlexProps extends RootComponentProps<HTMLElement>, LayoutProps {\n  /**\n   * Направление осей, эквивалентно `flex-direction`.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.\n   */\n  noWrap?: boolean;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n  /**\n   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.\n   */\n  justify?: FlexContentProps;\n  /**\n   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.\n   */\n  margin?: 'none' | 'auto';\n  /**\n   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.\n   */\n  reverse?: boolean;\n  /**\n   * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`.\n   */\n  alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n  /**\n   * Возможность задать css-свойство `display`.\n   */\n  display?: 'none' | 'flex' | 'inline-flex';\n}\n\n/**\n * @see https://vkui.io/components/flex\n */\nexport const Flex: React.FC<FlexProps> & {\n  /**\n   * @deprecated Since 7.11.0. Будет удалено в **VKUI v9**.\n   * Используйте компонент `Box`.\n   */\n  Item: typeof FlexItem;\n} = ({\n  gap = 0,\n  align,\n  justify,\n  margin = 'none',\n  noWrap = false,\n  direction = 'row',\n  reverse = false,\n  alignSelf,\n  display = 'flex',\n  ...restProps\n}: FlexProps) => {\n  const [rowGap, columnGap] = calculateGap(gap);\n  const resolvedProps = resolveLayoutProps(restProps);\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        !noWrap && styles.wrap,\n        reverse && styles.reverse,\n        direction !== 'row' && styles.directionColumn,\n        margin !== 'none' && styles.marginAuto,\n        align && alignClassNames[align],\n        alignSelf && alignSelfClassNames[alignSelf],\n        justify && justifyClassNames[justify],\n        getGapsPresets(rowGap, columnGap),\n        display !== 'flex' && displayClassNames[display],\n      )}\n      baseStyle={getGapsByUser(rowGap, columnGap)}\n      {...resolvedProps}\n    />\n  );\n};\n\nfunction getGapsPresets(rowGap: GapProp, columnGap: GapProp) {\n  return classNames(\n    typeof rowGap === 'string' && rowGapClassNames[rowGap],\n    typeof columnGap === 'string' && columnGapClassNames[columnGap],\n  );\n}\n\nfunction getGapsByUser(rowGap: GapProp, columnGap: GapProp) {\n  const style: CSSCustomProperties = {};\n\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n\n  return style;\n}\n\nFlex.Item = FlexItem;\n"],"names":["classNames","calculateGap","columnGapClassNames","resolveLayoutProps","rowGapClassNames","RootComponent","FlexItem","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","alignSelfClassNames","displayClassNames","Flex","gap","align","justify","margin","noWrap","direction","reverse","alignSelf","display","restProps","rowGap","columnGap","resolvedProps","baseClassName","getGapsPresets","baseStyle","getGapsByUser","style","Item"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAGnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,QAAQ,QAA4B,yBAAsB;AAMnE,MAAMC,oBAAoB;IACxB,OAAO;IACP,KAAK;IACL,QAAQ;IACR,cAAc;IACd,eAAe;IACf,cAAc;AAChB;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,sBAAsB;IAC1BL,KAAK;IACLC,GAAG;IACHC,MAAM;IACNE,QAAQ;IACRD,OAAO;AACT;AAEA,MAAMG,oBAAoB;IACxB,MAAM;IACN,aAAa;AACf;AAmDA;;CAEC,GACD,OAAO,MAAMC,OAMT,CAAC,EACHC,MAAM,CAAC,EACPC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,UAAU,KAAK,EACfC,SAAS,EACTC,UAAU,MAAM,EAChB,GAAGC,WACO;IACV,MAAM,CAACC,QAAQC,UAAU,GAAG3B,aAAagB;IACzC,MAAMY,gBAAgB1B,mBAAmBuB;IAEzC,qBACE,KAACrB;QACCyB,eAAe9B,6BAEb,CAACqB,4BACDE,gCACAD,cAAc,sCACdF,WAAW,kCACXF,SAASV,eAAe,CAACU,MAAM,EAC/BM,aAAaV,mBAAmB,CAACU,UAAU,EAC3CL,WAAWZ,iBAAiB,CAACY,QAAQ,EACrCY,eAAeJ,QAAQC,YACvBH,YAAY,UAAUV,iBAAiB,CAACU,QAAQ;QAElDO,WAAWC,cAAcN,QAAQC;QAChC,GAAGC,aAAa;;AAGvB,EAAE;AAEF,SAASE,eAAeJ,MAAe,EAAEC,SAAkB;IACzD,OAAO5B,WACL,OAAO2B,WAAW,YAAYvB,gBAAgB,CAACuB,OAAO,EACtD,OAAOC,cAAc,YAAY1B,mBAAmB,CAAC0B,UAAU;AAEnE;AAEA,SAASK,cAAcN,MAAe,EAAEC,SAAkB;IACxD,MAAMM,QAA6B,CAAC;IAEpC,IAAI,OAAOP,WAAW,UAAU;QAC9BO,KAAK,CAAC,2BAA2B,GAAG,GAAGP,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCM,KAAK,CAAC,8BAA8B,GAAG,GAAGN,UAAU,EAAE,CAAC;IACzD;IAEA,OAAOM;AACT;AAEAlB,KAAKmB,IAAI,GAAG7B"}

package/dist/components/Flex/FlexItem/FlexItem.d.ts

@@ -1,6 +1,9 @@
-import { type LayoutProps } from '../../../lib/layouts';
 import type { RootComponentProps } from '../../RootComponent/RootComponent';
-export type FlexItemProps = RootComponentProps<HTMLElement> & Pick<LayoutProps, 'alignSelf' | 'justifySelf' | 'flexBasis'> & {
+export interface FlexItemProps extends RootComponentProps<HTMLElement> {
+    /**
+     * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`.
+     */
+    alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
     /**
      * Позволяет задать предопределенные значения свойства `flex`:
      *
@@ -10,6 +13,10 @@ export type FlexItemProps = RootComponentProps<HTMLElement> & Pick<LayoutProps,
      * - `fixed` соответствует значению `0 0 auto`.
      */
     flex?: 'grow' | 'shrink' | 'content' | 'fixed';
-};
-export declare const FlexItem: ({ flex, ...restProps }: FlexItemProps) => React.ReactNode;
+    /**
+     * Изначальный размер элемента, эквивалентно `flex-basis`.
+     */
+    flexBasis?: number | string;
+}
+export declare const FlexItem: ({ alignSelf, flex, flexBasis, ...restProps }: FlexItemProps) => React.ReactNode;
 //# sourceMappingURL=FlexItem.d.ts.map

package/dist/components/Flex/FlexItem/FlexItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAsB,MAAM,sBAAsB,CAAC;AAG5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAU5E,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAC,WAAW,CAAC,GACzD,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,aAAa,GAAG,WAAW,CAAC,GAAG;IAC7D;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;CAChD,CAAC;AAIJ,eAAO,MAAM,QAAQ,GAAI,wBAAwB,aAAa,KAAG,KAAK,CAAC,SAQtE,CAAC"}
+{"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAkB5E,MAAM,WAAW,aAAc,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACpE;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAChE;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAID,eAAO,MAAM,QAAQ,GAAI,8CAKtB,aAAa,KAAG,KAAK,CAAC,SAexB,CAAC"}

package/dist/components/Flex/FlexItem/FlexItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { resolveLayoutProps } from "../../../lib/layouts/index.js";
+import { classNames } from "@vkontakte/vkjs";
 import { warnOnce } from "../../../lib/warnOnce.js";
 import { RootComponent } from "../../RootComponent/RootComponent.js";
 const flexClassNames = {
@@ -8,15 +8,24 @@ const flexClassNames = {
     content: "vkuiFlexItem__flexContent",
     fixed: "vkuiFlexItem__flexFixed"
 };
+const alignSelfClassNames = {
+    start: "vkuiFlexItem__alignSelfStart",
+    end: "vkuiFlexItem__alignSelfEnd",
+    center: "vkuiFlexItem__alignSelfCenter",
+    baseline: "vkuiFlexItem__alignSelfBaseline",
+    stretch: "vkuiFlexItem__alignSelfStretch"
+};
 const warn = warnOnce('Flex.Item');
-export const FlexItem = ({ flex, ...restProps })=>{
+export const FlexItem = ({ alignSelf, flex, flexBasis, ...restProps })=>{
     if (process.env.NODE_ENV === 'development') {
         warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');
     }
-    const resolvedProps = resolveLayoutProps(restProps);
     return /*#__PURE__*/ _jsx(RootComponent, {
-        baseClassName: flex && flexClassNames[flex],
-        ...resolvedProps
+        baseStyle: {
+            flexBasis
+        },
+        baseClassName: classNames(alignSelf && alignSelfClassNames[alignSelf], flex && flexClassNames[flex]),
+        ...restProps
     });
 };
 

package/dist/components/Flex/FlexItem/FlexItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { type LayoutProps, resolveLayoutProps } from '../../../lib/layouts';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../../RootComponent/RootComponent';\nimport styles from './FlexItem.module.css';\n\nconst flexClassNames = {\n  grow: styles.flexGrow,\n  shrink: styles.flexShrink,\n  content: styles.flexContent,\n  fixed: styles.flexFixed,\n};\n\nexport type FlexItemProps = RootComponentProps<HTMLElement> &\n  Pick<LayoutProps, 'alignSelf' | 'justifySelf' | 'flexBasis'> & {\n    /**\n     * Позволяет задать предопределенные значения свойства `flex`:\n     *\n     * - `grow` соответствует значению `1 0 auto`\n     * - `shrink` соответствует значению `0 1 auto`\n     * - `content` соответствует значению `1 1 auto`\n     * - `fixed` соответствует значению `0 0 auto`.\n     */\n    flex?: 'grow' | 'shrink' | 'content' | 'fixed';\n  };\n\nconst warn = warnOnce('Flex.Item');\n\nexport const FlexItem = ({ flex, ...restProps }: FlexItemProps): React.ReactNode => {\n  if (process.env.NODE_ENV === 'development') {\n    warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');\n  }\n\n  const resolvedProps = resolveLayoutProps(restProps);\n\n  return <RootComponent baseClassName={flex && flexClassNames[flex]} {...resolvedProps} />;\n};\n"],"names":["resolveLayoutProps","warnOnce","RootComponent","flexClassNames","grow","shrink","content","fixed","warn","FlexItem","flex","restProps","process","env","NODE_ENV","resolvedProps","baseClassName"],"mappings":";AAAA,SAA2BA,kBAAkB,QAAQ,gCAAuB;AAC5E,SAASC,QAAQ,QAAQ,2BAAwB;AACjD,SAASC,aAAa,QAAQ,uCAAoC;AAIlE,MAAMC,iBAAiB;IACrBC,IAAI;IACJC,MAAM;IACNC,OAAO;IACPC,KAAK;AACP;AAeA,MAAMC,OAAOP,SAAS;AAEtB,OAAO,MAAMQ,WAAW,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA0B;IAC5D,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CN,KAAK;IACP;IAEA,MAAMO,gBAAgBf,mBAAmBW;IAEzC,qBAAO,KAACT;QAAcc,eAAeN,QAAQP,cAAc,CAACO,KAAK;QAAG,GAAGK,aAAa;;AACtF,EAAE"}
+{"version":3,"sources":["../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../../RootComponent/RootComponent';\nimport styles from './FlexItem.module.css';\n\nconst flexClassNames = {\n  grow: styles.flexGrow,\n  shrink: styles.flexShrink,\n  content: styles.flexContent,\n  fixed: styles.flexFixed,\n};\n\nconst alignSelfClassNames = {\n  start: styles.alignSelfStart,\n  end: styles.alignSelfEnd,\n  center: styles.alignSelfCenter,\n  baseline: styles.alignSelfBaseline,\n  stretch: styles.alignSelfStretch,\n};\n\nexport interface FlexItemProps extends RootComponentProps<HTMLElement> {\n  /**\n   * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`.\n   */\n  alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n  /**\n   * Позволяет задать предопределенные значения свойства `flex`:\n   *\n   * - `grow` соответствует значению `1 0 auto`\n   * - `shrink` соответствует значению `0 1 auto`\n   * - `content` соответствует значению `1 1 auto`\n   * - `fixed` соответствует значению `0 0 auto`.\n   */\n  flex?: 'grow' | 'shrink' | 'content' | 'fixed';\n  /**\n   * Изначальный размер элемента, эквивалентно `flex-basis`.\n   */\n  flexBasis?: number | string;\n}\n\nconst warn = warnOnce('Flex.Item');\n\nexport const FlexItem = ({\n  alignSelf,\n  flex,\n  flexBasis,\n  ...restProps\n}: FlexItemProps): React.ReactNode => {\n  if (process.env.NODE_ENV === 'development') {\n    warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');\n  }\n\n  return (\n    <RootComponent\n      baseStyle={{ flexBasis }}\n      baseClassName={classNames(\n        alignSelf && alignSelfClassNames[alignSelf],\n        flex && flexClassNames[flex],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["classNames","warnOnce","RootComponent","flexClassNames","grow","shrink","content","fixed","alignSelfClassNames","start","end","center","baseline","stretch","warn","FlexItem","alignSelf","flex","flexBasis","restProps","process","env","NODE_ENV","baseStyle","baseClassName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,2BAAwB;AACjD,SAASC,aAAa,QAAQ,uCAAoC;AAIlE,MAAMC,iBAAiB;IACrBC,IAAI;IACJC,MAAM;IACNC,OAAO;IACPC,KAAK;AACP;AAEA,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,QAAQ;IACRC,OAAO;AACT;AAsBA,MAAMC,OAAOb,SAAS;AAEtB,OAAO,MAAMc,WAAW,CAAC,EACvBC,SAAS,EACTC,IAAI,EACJC,SAAS,EACT,GAAGC,WACW;IACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CR,KAAK;IACP;IAEA,qBACE,KAACZ;QACCqB,WAAW;YAAEL;QAAU;QACvBM,eAAexB,WACbgB,aAAaR,mBAAmB,CAACQ,UAAU,EAC3CC,QAAQd,cAAc,CAACc,KAAK;QAE7B,GAAGE,SAAS;;AAGnB,EAAE"}

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

@@ -68,8 +68,10 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
      */
     elementTiming?: string;
     /**
-     * Пользовательское значения стиля filter
+     * Пользовательское значения стиля filter.
      * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).
+     *
+     * При передаче этого свойства `<img />` будет обёрнут в дополнительный контейнер.
      */
     filter?: React.CSSProperties['filter'];
     /**

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":"AAEA,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"}
+{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAEA,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;;;;;OAKG;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;CAiM5C,CAAC"}

package/dist/components/ImageBase/ImageBase.js

@@ -149,6 +149,11 @@ const sizeToNumber = (size)=>{
         mouseOverHandlers,
         size
     ]);
+    const imgSlot = hasSrc && /*#__PURE__*/ _jsx("img", {
+        ref: imgRef,
+        ...imgRest,
+        ...getFetchPriorityProp(fetchPriority)
+    });
     return /*#__PURE__*/ _jsx(ImageBaseContext.Provider, {
         value: contextValue,
         children: /*#__PURE__*/ _jsxs(Clickable, {
@@ -162,11 +167,10 @@ const sizeToNumber = (size)=>{
             onMouseOut: onMouseOut,
             ...restProps,
             children: [
-                hasSrc && /*#__PURE__*/ _jsx("img", {
-                    ref: imgRef,
-                    ...imgRest,
-                    ...getFetchPriorityProp(fetchPriority)
-                }),
+                filter ? /*#__PURE__*/ _jsx("div", {
+                    className: "vkuiImageBase__imgWithFilterContainer",
+                    children: imgSlot
+                }) : imgSlot,
                 fallbackIcon && /*#__PURE__*/ _jsx("div", {
                     className: "vkuiImageBase__fallback",
                     children: fallbackIcon

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\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 [mouseOverHandlers] = React.useState<VoidFunction[]>([]);\n  const [mouseOutHandlers] = React.useState<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    mouseOverHandlers.forEach((fn) => fn());\n  };\n\n  const onMouseOut = () => {\n    mouseOutHandlers.forEach((fn) => fn());\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      onMouseOverHandlers: mouseOverHandlers,\n      onMouseOutHandlers: mouseOutHandlers,\n    }),\n    [mouseOutHandlers, mouseOverHandlers, 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":["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","mouseOverHandlers","mouseOutHandlers","hasSrc","isValidElement","name","handleImageLoad","event","handleImageError","getImgRef","imgRest","className","style","elementtiming","img","imgRef","isOnLoadStatusCheckedRef","useRef","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 * 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   * При передаче этого свойства `<img />` будет обёрнут в дополнительный контейнер.\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 [mouseOverHandlers] = React.useState<VoidFunction[]>([]);\n  const [mouseOutHandlers] = React.useState<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    mouseOverHandlers.forEach((fn) => fn());\n  };\n\n  const onMouseOut = () => {\n    mouseOutHandlers.forEach((fn) => fn());\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      onMouseOverHandlers: mouseOverHandlers,\n      onMouseOutHandlers: mouseOutHandlers,\n    }),\n    [mouseOutHandlers, mouseOverHandlers, size],\n  );\n\n  const imgSlot = hasSrc && (\n    <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />\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        {filter ? <div className={styles.imgWithFilterContainer}>{imgSlot}</div> : imgSlot}\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":["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","mouseOverHandlers","mouseOutHandlers","hasSrc","isValidElement","name","handleImageLoad","event","handleImageError","getImgRef","imgRest","className","style","elementtiming","img","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","imgSlot","ref","Provider","baseStyle","baseClassName","div","aria-hidden","Badge","Overlay","FloatElement"],"mappings":"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"}