npm - @vkontakte/vkui - Versions diffs - 7.10.2 → 7.11.0 - Mend

@vkontakte/vkui 7.10.2 → 7.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (124) hide show

package/dist/components/Box/Box.d.ts CHANGED Viewed

@@ -1,11 +1,15 @@
 import type { LayoutProps } from '../../lib/layouts/types';
 import { type RootComponentProps } from '../RootComponent/RootComponent';
 export interface BoxProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName' | 'baseStyle'>, LayoutProps {
+    /**
+     * Возможность задать css-свойство `display`.
+     */
+    display?: 'none' | 'inline' | 'inline-block' | 'block' | 'contents';
 }
 /**
  * @see https://vkui.io/components/box
  *
  * @since 7.9.0
  */
-export declare const Box: ({ className, style, ...restProps }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Box: ({ className, style, display, ...restProps }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Box.d.ts.map

package/dist/components/Box/Box.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;~~AAExF~~,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,eAAe,GAAG,WAAW,CAAC,EAC1E,WAAW;~~CAAG~~;~~AAElB~~;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,~~oCAAoC~~,QAAQ,~~4CAY/D~~,CAAC"}
1	+ {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAWxF,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,eAAe,GAAG,WAAW,CAAC,EAC1E,WAAW;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,CAAC;CACrE;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,6CAA6C,QAAQ,4CAYxE,CAAC"}

package/dist/components/Box/Box.js CHANGED Viewed

@@ -2,22 +2,31 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@vkontakte/vkjs";
 import { resolveLayoutProps } from "../../lib/layouts/index.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
+const displayClassNames = {
+    'none': "vkuiBox__displayNone",
+    'inline': "vkuiBox__displayInline",
+    'inline-block': "vkuiBox__displayInlineBlock",
+    'block': "vkuiBox__displayBlock",
+    'contents': "vkuiBox__displayContents"
+};
 /**
  * @see https://vkui.io/components/box
  *
  * @since 7.9.0
  */ export const Box = (_param)=>{
-    var { className, style } = _param, restProps = _object_without_properties(_param, [
+    var { className, style, display } = _param, restProps = _object_without_properties(_param, [
         "className",
-        "style"
+        "style",
+        "display"
     ]);
     const resolvedProps = resolveLayoutProps(restProps);
     return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, resolvedProps), {
         baseClassName: resolvedProps.className,
         baseStyle: resolvedProps.style,
-        className: className,
+        className: classNames(className, display && displayClassNames[display]),
         style: style
     }));
 };

package/dist/components/Box/Box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import { resolveLayoutProps } from '../../lib/layouts';\nimport type { LayoutProps } from '../../lib/layouts/types';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\n\nexport interface BoxProps\n extends Omit<RootComponentProps<HTMLElement>, 'baseClassName' \| 'baseStyle'>,\n LayoutProps {}\n\n/*\n @see https://vkui.io/components/box\n \n @since 7.9.0\n */\nexport const Box = ({ className, style, ...restProps }: BoxProps) => {\n const resolvedProps = resolveLayoutProps(restProps);\n\n return (\n <RootComponent\n {...resolvedProps}\n baseClassName={resolvedProps.className}\n baseStyle={resolvedProps.style}\n className={className}\n style={style}\n />\n );\n};\n"],"names":["resolveLayoutProps","RootComponent","Box","className","style","restProps","resolvedProps","baseClassName","baseStyle"],"mappings":";;;;AAAA,SAASA,kBAAkB,QAAQ,6BAAoB;AAEvD,SAASC,aAAa,QAAiC,oCAAiC;~~AAMxF~~;;;;CAIC,GACD,OAAO,MAAMC,MAAM;QAAC,EAAEC,SAAS,EAAEC,KAAK,EAA0B,WAArBC;~~QAArBF~~;QAAWC;;~~IAC/B~~,MAAME,~~gBAAgBN~~,~~mBAAmBK~~;IAEzC,qBACE,~~KAACJ~~,~~uDACKK~~;QACJC,eAAeD,~~cAAcH~~,SAAS;~~QACtCK~~,WAAWF,~~cAAcF~~,KAAK;QAC9BD,~~WAAWA~~;~~QACXC~~,OAAOA;;AAGb,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { resolveLayoutProps } from '../../lib/layouts';\nimport type { LayoutProps } from '../../lib/layouts/types';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './Box.module.css';\n\nconst displayClassNames = {\n 'none': styles.displayNone,\n 'inline': styles.displayInline,\n 'inline-block': styles.displayInlineBlock,\n 'block': styles.displayBlock,\n 'contents': styles.displayContents,\n};\n\nexport interface BoxProps\n extends Omit<RootComponentProps<HTMLElement>, 'baseClassName' \| 'baseStyle'>,\n LayoutProps {\n /*\n Возможность задать css-свойство `display`.\n /\n display?: 'none' \| 'inline' \| 'inline-block' \| 'block' \| 'contents';\n}\n\n/\n @see https://vkui.io/components/box\n \n @since 7.9.0\n */\nexport const Box = ({ className, style, display, ...restProps }: BoxProps) => {\n const resolvedProps = resolveLayoutProps(restProps);\n\n return (\n <RootComponent\n {...resolvedProps}\n baseClassName={resolvedProps.className}\n baseStyle={resolvedProps.style}\n className={classNames(className, display && displayClassNames[display])}\n style={style}\n />\n );\n};\n"],"names":["classNames","resolveLayoutProps","RootComponent","displayClassNames","Box","className","style","display","restProps","resolvedProps","baseClassName","baseStyle"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,6BAAoB;AAEvD,SAASC,aAAa,QAAiC,oCAAiC;AAGxF,MAAMC,oBAAoB;IACxB,MAAM;IACN,QAAQ;IACR,cAAc;IACd,OAAO;IACP,UAAU;AACZ;AAWA;;;;CAIC,GACD,OAAO,MAAMC,MAAM;QAAC,EAAEC,SAAS,EAAEC,KAAK,EAAEC,OAAO,EAA0B,WAArBC;QAA9BH;QAAWC;QAAOC;;IACtC,MAAME,gBAAgBR,mBAAmBO;IAEzC,qBACE,KAACN,uDACKO;QACJC,eAAeD,cAAcJ,SAAS;QACtCM,WAAWF,cAAcH,KAAK;QAC9BD,WAAWL,WAAWK,WAAWE,WAAWJ,iBAAiB,CAACI,QAAQ;QACtED,OAAOA;;AAGb,EAAE"}

package/dist/components/CellButtonGroup/CellButtonGroup.d.ts CHANGED Viewed

@@ -290,9 +290,12 @@ export declare const CellButtonGroup: {
         onTransitionStart?: React.TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
         size?: import("../../lib/spacings/sizes").SpacingSizeProp | undefined;
+        appearance?: "primary" | "secondary" | "primary-alpha" | undefined;
+        flexBasis?: import("../../lib/layouts").FlexBasisProp | undefined;
+        flexGrow?: import("../../lib/layouts").FlexGrowProp | undefined;
+        flexShrink?: import("../../lib/layouts").FlexShrinkProp | undefined;
         getRootRef?: React.Ref<HTMLDivElement> | undefined;
         align?: "start" | "center" | "end" | undefined;
-        appearance?: "primary" | "secondary" | "primary-alpha" | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
 };
 //# sourceMappingURL=CellButtonGroup.d.ts.map

package/dist/components/CellButtonGroup/CellButtonGroup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CellButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CellButtonGroup/CellButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,eAAe;YAAW,oBAAoB,GAAG,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAE5E,CAAC"}
1	+ {"version":3,"file":"CellButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CellButtonGroup/CellButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,eAAe;YAAW,oBAAoB,GAAG,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAE5E,CAAC"}

package/dist/components/Flex/Flex.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import { type GapsProp } from '../../lib/layouts';
+import type { LayoutProps } from '../../lib/layouts/types';
 import type { RootComponentProps } from '../RootComponent/RootComponent';
 import { FlexItem, type FlexItemProps } from './FlexItem/FlexItem';
 export type { FlexItemProps };
 type FlexContentProps = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
-export interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {
+export interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'>, LayoutProps {
     /**
      * Направление осей, эквивалентно `flex-direction`.
      */
@@ -34,11 +35,23 @@ export interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseCl
      * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.
      */
     reverse?: boolean;
+    /**
+     * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`.
+     */
+    alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /**
+     * Возможность задать css-свойство `display`.
+     */
+    display?: 'none' | 'flex' | 'inline-flex';
 }
 /**
  * @see https://vkui.io/components/flex
  */
 export declare const Flex: React.FC<FlexProps> & {
+    /**
+     * @deprecated Since 7.11.0. Будет удалено в **VKUI v9**.
+     * Используйте компонент `Flex`.
+     */
     Item: typeof FlexItem;
 };
 //# sourceMappingURL=Flex.d.ts.map

package/dist/components/Flex/Flex.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,QAAQ,~~EAEd~~,MAAM,mBAAmB,CAAC;~~AAG3B~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;~~AAGnE~~,YAAY,EAAE,aAAa,EAAE,CAAC;~~AAmB9B~~,KAAK,gBAAgB,GACjB,OAAO,GACP,KAAK,GACL,QAAQ,GACR,cAAc,GACd,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,~~SAAU~~,SAAQ,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,eAAe,CAAC;~~IACvF~~;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;~~CACnB~~;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC,IAAI,EAAE,OAAO,QAAQ,CAAC;~~CAgCvB~~,CAAC"}
1	+ {"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,QAAQ,EAGd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAInE,YAAY,EAAE,aAAa,EAAE,CAAC;AAgC9B,KAAK,gBAAgB,GACjB,OAAO,GACP,KAAK,GACL,QAAQ,GACR,cAAc,GACd,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,eAAe,CAAC,EAC5D,WAAW;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAChE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC;CAC3C;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC;;;OAGG;IACH,IAAI,EAAE,OAAO,QAAQ,CAAC;CAqCvB,CAAC"}

package/dist/components/Flex/Flex.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@vkontakte/vkjs";
-import { calculateGap, columnGapClassNames, rowGapClassNames } from "../../lib/layouts/index.js";
+import { calculateGap, columnGapClassNames, resolveLayoutProps, rowGapClassNames } from "../../lib/layouts/index.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { FlexItem } from "./FlexItem/FlexItem.js";
 const justifyClassNames = {
@@ -21,10 +21,21 @@ const alignClassNames = {
     stretch: "vkuiFlex__alignStretch",
     baseline: "vkuiFlex__alignBaseline"
 };
+const alignSelfClassNames = {
+    start: "vkuiFlexItem__alignSelfStart",
+    end: "vkuiFlexItem__alignSelfEnd",
+    center: "vkuiFlexItem__alignSelfCenter",
+    baseline: "vkuiFlexItem__alignSelfBaseline",
+    stretch: "vkuiFlexItem__alignSelfStretch"
+};
+const displayClassNames = {
+    'none': "vkuiFlex__displayNone",
+    'inline-flex': "vkuiFlex__displayInlineFlex"
+};
 /**
  * @see https://vkui.io/components/flex
  */ export const Flex = (_param)=>{
-    var { gap = 0, align, justify, margin = 'none', noWrap = false, direction = 'row', reverse = false, children } = _param, props = _object_without_properties(_param, [
+    var { gap = 0, align, justify, margin = 'none', noWrap = false, direction = 'row', reverse = false, children, alignSelf, display = 'flex' } = _param, restProps = _object_without_properties(_param, [
         "gap",
         "align",
         "justify",
@@ -32,11 +43,14 @@ const alignClassNames = {
         "noWrap",
         "direction",
         "reverse",
-        "children"
+        "children",
+        "alignSelf",
+        "display"
     ]);
     const [rowGap, columnGap] = calculateGap(gap);
-    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, props), {
-        baseClassName: classNames("vkuiFlex__host", !noWrap && "vkuiFlex__wrap", reverse && "vkuiFlex__reverse", direction !== 'row' && "vkuiFlex__directionColumn", margin !== 'none' && "vkuiFlex__marginAuto", align && alignClassNames[align], justify && justifyClassNames[justify], getGapsPresets(rowGap, columnGap)),
+    const resolvedProps = resolveLayoutProps(restProps);
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, resolvedProps), {
+        baseClassName: classNames("vkuiFlex__host", !noWrap && "vkuiFlex__wrap", reverse && "vkuiFlex__reverse", direction !== 'row' && "vkuiFlex__directionColumn", margin !== 'none' && "vkuiFlex__marginAuto", align && alignClassNames[align], alignSelf && alignSelfClassNames[alignSelf], justify && justifyClassNames[justify], getGapsPresets(rowGap, columnGap), display !== 'flex' && displayClassNames[display]),
         baseStyle: getGapsByUser(rowGap, columnGap),
         children: children
     }));

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

	@@ -1 +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 rowGapClassNames,\n} from '../../lib/layouts';\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\ntype FlexContentProps =\n \| 'start'\n \| 'end'\n \| 'center'\n \| 'space-around'\n \| 'space-between'\n \| 'space-evenly';\n\nexport interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\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\n/\n @see https://vkui.io/components/flex\n */\nexport const Flex: React.FC<FlexProps> & {\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 children,\n ...~~props~~\n}: FlexProps) => {\n const [rowGap, columnGap] = calculateGap(gap);\n\n return (\n <RootComponent\n {...~~props~~}\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 )}\n baseStyle={getGapsByUser(rowGap, columnGap)}\n >\n {children}\n </RootComponent>\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","rowGapClassNames","RootComponent","FlexItem","justifyClassNames","alignClassNames","start","end","center","stretch","baseline","Flex","gap","align","justify","margin","noWrap","direction","reverse","children","~~props~~","rowGap","columnGap","baseClassName","getGapsPresets","baseStyle","getGapsByUser","style","Item"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAGnBC,gBAAgB,QACX,6BAAoB;~~AAE3B~~,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;~~AA2CA~~;;CAEC,GACD,OAAO,MAAMC,~~OAET~~;QAAC,EACHC,MAAM,CAAC,EACPC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,UAAU,KAAK,EACfC,QAAQ,~~EAEE~~,WADPC;~~QARHR~~;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,QAAQC,UAAU,~~GAAGvB~~,~~aAAaa~~;IAEzC,qBACE,~~KAACV~~,~~uDACKkB~~;~~QACJG~~,~~eAAezB~~,6BAEb,~~CAACkB~~,4BACDE,gCACAD,cAAc,sCACdF,WAAW,kCACXF,~~SAASR~~,eAAe,~~CAACQ~~,MAAM,EAC/BC,~~WAAWV~~,iBAAiB,~~CAACU~~,QAAQ,~~EACrCU~~,~~eAAeH~~,QAAQC;~~QAEzBG~~,WAAWC,~~cAAcL~~,QAAQC;~~kBAEhCH~~;;AAGP,EAAE;AAEF,~~SAASK~~,~~eAAeH~~,MAAgB,EAAEC,SAAmB;IAC3D,~~OAAOxB~~,WACL,~~OAAOuB~~,WAAW,~~YAAYpB~~,gBAAgB,~~CAACoB~~,OAAO,EACtD,OAAOC,cAAc,~~YAAYtB~~,mBAAmB,~~CAACsB~~,UAAU;AAEnE;AAEA,~~SAASI~~,~~cAAcL~~,MAAgB,EAAEC,SAAmB;IAC1D,~~MAAMK~~,QAA6B,CAAC;IAEpC,IAAI,~~OAAON~~,WAAW,UAAU;~~QAC9BM~~,KAAK,CAAC,2BAA2B,GAAG,~~GAAGN~~,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;~~QACjCK~~,KAAK,CAAC,8BAA8B,GAAG,~~GAAGL~~,UAAU,EAAE,CAAC;IACzD;IAEA,~~OAAOK~~;AACT;~~AAEAhB~~,~~KAAKiB~~,IAAI,~~GAAGzB~~"}
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';\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\n extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'>,\n 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 * Используйте компонент `Flex`.\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 children,\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 {...resolvedProps}\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 >\n {children}\n </RootComponent>\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","children","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;AAqDA;;CAEC,GACD,OAAO,MAAMC,OAMT;QAAC,EACHC,MAAM,CAAC,EACPC,KAAK,EACLC,OAAO,EACPC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,UAAU,KAAK,EACfC,QAAQ,EACRC,SAAS,EACTC,UAAU,MAAM,EAEN,WADPC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,QAAQC,UAAU,GAAG5B,aAAagB;IACzC,MAAMa,gBAAgB3B,mBAAmBwB;IAEzC,qBACE,KAACtB,uDACKyB;QACJC,eAAe/B,6BAEb,CAACqB,4BACDE,gCACAD,cAAc,sCACdF,WAAW,kCACXF,SAASV,eAAe,CAACU,MAAM,EAC/BO,aAAaX,mBAAmB,CAACW,UAAU,EAC3CN,WAAWZ,iBAAiB,CAACY,QAAQ,EACrCa,eAAeJ,QAAQC,YACvBH,YAAY,UAAUX,iBAAiB,CAACW,QAAQ;QAElDO,WAAWC,cAAcN,QAAQC;kBAEhCL;;AAGP,EAAE;AAEF,SAASQ,eAAeJ,MAAgB,EAAEC,SAAmB;IAC3D,OAAO7B,WACL,OAAO4B,WAAW,YAAYxB,gBAAgB,CAACwB,OAAO,EACtD,OAAOC,cAAc,YAAY3B,mBAAmB,CAAC2B,UAAU;AAEnE;AAEA,SAASK,cAAcN,MAAgB,EAAEC,SAAmB;IAC1D,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;AAEAnB,KAAKoB,IAAI,GAAG9B"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAkB5E,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,eAAe,CAAC,EAC5D,WAAW;IACb;;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;~~AAED~~,eAAO,MAAM,QAAQ,GAAI,mDAMtB,aAAa,KAAG,KAAK,CAAC,~~SAaxB~~,CAAC"}
1	+ {"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAkB5E,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,eAAe,CAAC,EAC5D,WAAW;IACb;;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,mDAMtB,aAAa,KAAG,KAAK,CAAC,SAiBxB,CAAC"}

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

@@ -3,6 +3,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@vkontakte/vkjs";
+import { warnOnce } from "../../../lib/warnOnce.js";
 import { RootComponent } from "../../RootComponent/RootComponent.js";
 const flexClassNames = {
     grow: "vkuiFlexItem__flexGrow",
@@ -17,6 +18,7 @@ const alignSelfClassNames = {
     baseline: "vkuiFlexItem__alignSelfBaseline",
     stretch: "vkuiFlexItem__alignSelfStretch"
 };
+const warn = warnOnce('Flex.Item');
 export const FlexItem = (_param)=>{
     var { children, alignSelf, flex, flexBasis } = _param, rest = _object_without_properties(_param, [
         "children",
@@ -24,6 +26,9 @@ export const FlexItem = (_param)=>{
         "flex",
         "flexBasis"
     ]);
+    if (process.env.NODE_ENV === 'development') {
+        warn('Компонент Flex.Item устарел, используйте компонент Flex в качестве альтернативы.');
+    }
     return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, rest), {
         baseStyle: {
             flexBasis

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HasChildren } from '../../../types';\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\n extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'>,\n HasChildren {\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\nexport const FlexItem = ({\n children,\n alignSelf,\n flex,\n flexBasis,\n ...rest\n}: FlexItemProps): React.ReactNode => {\n return (\n <RootComponent\n {...rest}\n baseStyle={{ flexBasis }}\n baseClassName={classNames(\n alignSelf && alignSelfClassNames[alignSelf],\n flex && flexClassNames[flex],\n )}\n >\n {children}\n </RootComponent>\n );\n};\n"],"names":["classNames","RootComponent","flexClassNames","grow","shrink","content","fixed","alignSelfClassNames","start","end","center","baseline","stretch","FlexItem","children","alignSelf","flex","flexBasis","rest","baseStyle","baseClassName"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;~~AAE7C~~,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;AAwBA,OAAO,~~MAAMC~~,WAAW;QAAC,EACvBC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EAEK,WADXC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,~~KAAChB~~,~~uDACKiB~~;~~QACJC~~,WAAW;~~YAAEF~~;QAAU;~~QACvBG~~,~~eAAepB~~,~~WACbe~~,~~aAAaR~~,mBAAmB,~~CAACQ~~,UAAU,EAC3CC,~~QAAQd~~,cAAc,~~CAACc~~,KAAK;kBAG7BF;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport type { HasChildren } from '../../../types';\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\n extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'>,\n HasChildren {\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 children,\n alignSelf,\n flex,\n flexBasis,\n ...rest\n}: FlexItemProps): React.ReactNode => {\n if (process.env.NODE_ENV === 'development') {\n warn('Компонент Flex.Item устарел, используйте компонент Flex в качестве альтернативы.');\n }\n\n return (\n <RootComponent\n {...rest}\n baseStyle={{ flexBasis }}\n baseClassName={classNames(\n alignSelf && alignSelfClassNames[alignSelf],\n flex && flexClassNames[flex],\n )}\n >\n {children}\n </RootComponent>\n );\n};\n"],"names":["classNames","warnOnce","RootComponent","flexClassNames","grow","shrink","content","fixed","alignSelfClassNames","start","end","center","baseline","stretch","warn","FlexItem","children","alignSelf","flex","flexBasis","rest","process","env","NODE_ENV","baseStyle","baseClassName"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,2BAAwB;AAEjD,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;AAwBA,MAAMC,OAAOb,SAAS;AAEtB,OAAO,MAAMc,WAAW;QAAC,EACvBC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,SAAS,EAEK,WADXC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CT,KAAK;IACP;IAEA,qBACE,KAACZ,uDACKkB;QACJI,WAAW;YAAEL;QAAU;QACvBM,eAAezB,WACbiB,aAAaT,mBAAmB,CAACS,UAAU,EAC3CC,QAAQf,cAAc,CAACe,KAAK;kBAG7BF;;AAGP,EAAE"}

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

@@ -52,9 +52,13 @@ export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDiv
      * Специфичный `className` для обертки над контентом, прокинутым в `children`.
      */
     contentWrapperClassName?: string;
+    /**
+     * Добавляет отступы для контента внутри.
+     */
+    withPadding?: boolean;
 }
 /**
  * @see https://vkui.io/components/horizontal-scroll
  */
-export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, prevButtonTestId, nextButtonTestId, ContentWrapperComponent, contentWrapperRef, contentWrapperClassName, onPointerEnter, onPointerLeave, onMouseEnter, ...restProps }: HorizontalScrollProps) => React.ReactNode;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, prevButtonTestId, nextButtonTestId, ContentWrapperComponent, contentWrapperRef, contentWrapperClassName, withPadding, onPointerEnter, onPointerLeave, onMouseEnter, ...restProps }: HorizontalScrollProps) => React.ReactNode;
 //# sourceMappingURL=HorizontalScroll.d.ts.map

package/dist/components/HorizontalScroll/HorizontalScroll.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGrE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAqBhF,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,uBAAuB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC5C;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3C;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;~~CAClC~~;AA6GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,~~8SAoB9B~~,qBAAqB,KAAG,KAAK,CAAC,SA6JhC,CAAC"}
1	+ {"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGrE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAqBhF,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,uBAAuB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC5C;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3C;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA6GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,2TAqB9B,qBAAqB,KAAG,KAAK,CAAC,SA6JhC,CAAC"}

package/dist/components/HorizontalScroll/HorizontalScroll.js CHANGED Viewed

@@ -90,7 +90,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
  * @see https://vkui.io/components/horizontal-scroll
  */ export const HorizontalScroll = (_param)=>{
     var { children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId, // ContentWrapper
-    ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, onPointerEnter, onPointerLeave, onMouseEnter } = _param, restProps = _object_without_properties(_param, [
+    ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, withPadding, onPointerEnter, onPointerLeave, onMouseEnter } = _param, restProps = _object_without_properties(_param, [
         "children",
         "getScrollToLeft",
         "getScrollToRight",
@@ -105,6 +105,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         "ContentWrapperComponent",
         "contentWrapperRef",
         "contentWrapperClassName",
+        "withPadding",
         "onPointerEnter",
         "onPointerLeave",
         "onMouseEnter"
@@ -221,7 +222,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         onPointerLeave
     });
     return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, restProps, handlers), {
-        baseClassName: classNames("vkuiHorizontalScroll__host", 'vkuiInternalHorizontalScroll', (showArrows === 'always' || isHovered) && "vkuiHorizontalScroll__showArrows", isRtl && "vkuiHorizontalScroll__rtl"),
+        baseClassName: classNames("vkuiHorizontalScroll__host", 'vkuiInternalHorizontalScroll', (showArrows === 'always' || isHovered) && "vkuiHorizontalScroll__showArrows", isRtl && "vkuiHorizontalScroll__rtl", withPadding && "vkuiHorizontalScroll__withPadding"),
         // FIXME: onMouseEnter из restProps затирается, а при callMultiply орет линтер на рефы.
         onMouseEnter: calculateArrowsVisibility,
         children: [
@@ -247,8 +248,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
             }),
             /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
                 className: classNames("vkuiHorizontalScroll__in", focusVisibleClassNames),
-                ref: scrollerRef,
-                tabIndex: 0
+                ref: scrollerRef
             }, focusEvents), {
                 children: /*#__PURE__*/ _jsx(ContentWrapperComponent, {
                     className: classNames("vkuiHorizontalScroll__inWrapper", contentWrapperClassName),

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { easeInOutSine } from '../../lib/fx';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { useHover } from '../Clickable/useState';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc /\ninterface ScrollContext {\n scrollElement: HTMLElement \| null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToEndBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /\n Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate.\n /\n initialScrollWidth: number;\n textDirection: 'ltr' \| 'rtl';\n}\n/ eslint-enable jsdoc/require-jsdoc /\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /\n Функция для расчета величины прокрутки при нажатии на левую стрелку.\n /\n getScrollToLeft?: ScrollPositionHandler;\n /\n Функция для расчета величины прокрутки при нажатии на правую стрелку.\n /\n getScrollToRight?: ScrollPositionHandler;\n /\n Размер стрелок.\n /\n arrowSize?: ScrollArrowProps['size'];\n /\n Смещает иконки кнопок навигации по вертикали.\n /\n arrowOffsetY?: number \| string;\n /\n Показывать ли стрелки.\n /\n showArrows?: boolean \| 'always';\n /\n Длительность анимации скролла.\n /\n scrollAnimationDuration?: number;\n /\n Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n /\n scrollOnAnyWheel?: boolean;\n /\n Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.\n /\n prevButtonTestId?: string;\n /\n Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.\n /\n nextButtonTestId?: string;\n /\n Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.\n /\n ContentWrapperComponent?: React.ElementType;\n /\n `ref` для обертки над контентом, прокинутым в `children`.\n /\n contentWrapperRef?: React.Ref<HTMLElement>;\n /\n Специфичный `className` для обертки над контентом, прокинутым в `children`.\n /\n contentWrapperClassName?: string;\n}\n\n/\n Timing method.\n /\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/\n Округление к большему по модулю.\n \n ## Пример\n \n ```ts\n * import { strict as assert } from 'node:assert';\n \n assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n /\nfunction roundingAwayFromZero(value: number): number {\n return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/\n Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445.\n /\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/\n Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n /\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToEndBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration,\n textDirection,\n}: ScrollContext) {\n if (!scrollElement \|\| !getScrollPosition) {\n return;\n }\n\n /\n Крайнее значение сдвига.\n /\n const extremeScrollLeft =\n (textDirection === 'ltr' ? 1 : -1) (initialScrollWidth - scrollElement.offsetWidth);\n\n const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n const diff = endScrollLeft - remappedStartScrollLeft;\n if (textDirection === 'rtl') {\n endScrollLeft = startScrollLeft - diff;\n }\n\n onScrollStart();\n\n /*\n Если окончание прокрутки вышло за ноль.\n /\n if (startScrollLeft endScrollLeft < 0) {\n endScrollLeft = 0;\n }\n\n if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n onScrollToEndBorder();\n endScrollLeft = extremeScrollLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n const scrollEnd =\n textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\n/*\n @see https://vkui.io/components/horizontal-scroll\n /\nexport const HorizontalScroll = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = 'm',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n scrollOnAnyWheel = false,\n prevButtonTestId,\n nextButtonTestId,\n // ContentWrapper\n ContentWrapperComponent = 'div',\n contentWrapperRef,\n contentWrapperClassName,\n onPointerEnter,\n onPointerLeave,\n onMouseEnter,\n ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n const [canScrollStart, setCanScrollStart] = React.useState(false);\n const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n const { focusVisible, ...focusEvents } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n });\n\n const direction = useConfigDirection();\n const isRtl = direction === 'rtl';\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const { isHovered, ...hoverHandlers } = useHover();\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToEndBorder: () => setCanScrollEnd(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth \|\| 0,\n scrollAnimationDuration,\n textDirection: direction,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n );\n\n const scrollToStart = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToEnd = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const calculateArrowsVisibility = React.useCallback(() => {\n if (showArrows && scrollerRef.current && !isCustomScrollingRef.current) {\n const scrollElement = scrollerRef.current;\n const scrollLeft = scrollElement.scrollLeft;\n\n setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n setCanScrollEnd(\n Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n scrollElement.scrollWidth,\n );\n }\n }, [showArrows, scrollerRef, isRtl]);\n\n React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n useIsomorphicLayoutEffect(\n function addWheelEventHandler() {\n const scrollEl = scrollerRef.current;\n if (!scrollEl) {\n return noop;\n }\n /\n Прокрутка с помощью любого колеса мыши.\n */\n const onWheel = (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n };\n\n const listenerOptions = { passive: false };\n\n if (scrollOnAnyWheel) {\n scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n }\n scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n return () => {\n if (scrollOnAnyWheel) {\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n }\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n };\n },\n [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n );\n\n const handlers = mergeCalls(hoverHandlers, { onPointerEnter, onPointerLeave });\n\n return (\n <RootComponent\n {...restProps}\n {...handlers}\n baseClassName={classNames(\n styles.host,\n 'vkuiInternalHorizontalScroll',\n (showArrows === 'always' \|\| isHovered) && styles.showArrows,\n isRtl && styles.rtl,\n )}\n // FIXME: onMouseEnter из restProps затирается, а при callMultiply орет линтер на рефы.\n onMouseEnter={calculateArrowsVisibility}\n >\n {showArrows && canScrollStart && (\n <ScrollArrow\n data-testid={prevButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowLeft)}\n onClick={scrollToStart}\n />\n )}\n {showArrows && canScrollEnd && (\n <ScrollArrow\n data-testid={nextButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowRight)}\n onClick={scrollToEnd}\n />\n )}\n <div\n className={classNames(styles.in, focusVisibleClassNames)}\n ref={scrollerRef}\n tabIndex={0}\n {...focusEvents}\n >\n <ContentWrapperComponent\n className={classNames(styles.inWrapper, contentWrapperClassName)}\n ref={contentWrapperRef}\n >\n {children}\n </ContentWrapperComponent>\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","noop","useConfigDirection","useExternRef","useFocusVisible","useFocusVisibleClassName","easeInOutSine","mergeCalls","useIsomorphicLayoutEffect","useHover","RootComponent","ScrollArrow","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","onPointerEnter","onPointerLeave","onMouseEnter","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","focusVisible","focusEvents","focusVisibleClassNames","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","isHovered","hoverHandlers","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","handlers","baseClassName","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { easeInOutSine } from '../../lib/fx';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { useHover } from '../Clickable/useState';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc /\ninterface ScrollContext {\n scrollElement: HTMLElement \| null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToEndBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /\n Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate.\n /\n initialScrollWidth: number;\n textDirection: 'ltr' \| 'rtl';\n}\n/ eslint-enable jsdoc/require-jsdoc /\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /\n Функция для расчета величины прокрутки при нажатии на левую стрелку.\n /\n getScrollToLeft?: ScrollPositionHandler;\n /\n Функция для расчета величины прокрутки при нажатии на правую стрелку.\n /\n getScrollToRight?: ScrollPositionHandler;\n /\n Размер стрелок.\n /\n arrowSize?: ScrollArrowProps['size'];\n /\n Смещает иконки кнопок навигации по вертикали.\n /\n arrowOffsetY?: number \| string;\n /\n Показывать ли стрелки.\n /\n showArrows?: boolean \| 'always';\n /\n Длительность анимации скролла.\n /\n scrollAnimationDuration?: number;\n /\n Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n /\n scrollOnAnyWheel?: boolean;\n /\n Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.\n /\n prevButtonTestId?: string;\n /\n Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.\n /\n nextButtonTestId?: string;\n /\n Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.\n /\n ContentWrapperComponent?: React.ElementType;\n /\n `ref` для обертки над контентом, прокинутым в `children`.\n /\n contentWrapperRef?: React.Ref<HTMLElement>;\n /\n Специфичный `className` для обертки над контентом, прокинутым в `children`.\n /\n contentWrapperClassName?: string;\n /\n Добавляет отступы для контента внутри.\n /\n withPadding?: boolean;\n}\n\n/\n Timing method.\n /\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/\n Округление к большему по модулю.\n \n ## Пример\n \n ```ts\n * import { strict as assert } from 'node:assert';\n \n assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n /\nfunction roundingAwayFromZero(value: number): number {\n return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/\n Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445.\n /\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/\n Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n /\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToEndBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration,\n textDirection,\n}: ScrollContext) {\n if (!scrollElement \|\| !getScrollPosition) {\n return;\n }\n\n /\n Крайнее значение сдвига.\n /\n const extremeScrollLeft =\n (textDirection === 'ltr' ? 1 : -1) (initialScrollWidth - scrollElement.offsetWidth);\n\n const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n const diff = endScrollLeft - remappedStartScrollLeft;\n if (textDirection === 'rtl') {\n endScrollLeft = startScrollLeft - diff;\n }\n\n onScrollStart();\n\n /*\n Если окончание прокрутки вышло за ноль.\n /\n if (startScrollLeft endScrollLeft < 0) {\n endScrollLeft = 0;\n }\n\n if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n onScrollToEndBorder();\n endScrollLeft = extremeScrollLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n const scrollEnd =\n textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\n/*\n @see https://vkui.io/components/horizontal-scroll\n /\nexport const HorizontalScroll = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = 'm',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n scrollOnAnyWheel = false,\n prevButtonTestId,\n nextButtonTestId,\n // ContentWrapper\n ContentWrapperComponent = 'div',\n contentWrapperRef,\n contentWrapperClassName,\n withPadding,\n onPointerEnter,\n onPointerLeave,\n onMouseEnter,\n ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n const [canScrollStart, setCanScrollStart] = React.useState(false);\n const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n const { focusVisible, ...focusEvents } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n });\n\n const direction = useConfigDirection();\n const isRtl = direction === 'rtl';\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const { isHovered, ...hoverHandlers } = useHover();\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToEndBorder: () => setCanScrollEnd(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth \|\| 0,\n scrollAnimationDuration,\n textDirection: direction,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n );\n\n const scrollToStart = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToEnd = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const calculateArrowsVisibility = React.useCallback(() => {\n if (showArrows && scrollerRef.current && !isCustomScrollingRef.current) {\n const scrollElement = scrollerRef.current;\n const scrollLeft = scrollElement.scrollLeft;\n\n setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n setCanScrollEnd(\n Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n scrollElement.scrollWidth,\n );\n }\n }, [showArrows, scrollerRef, isRtl]);\n\n React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n useIsomorphicLayoutEffect(\n function addWheelEventHandler() {\n const scrollEl = scrollerRef.current;\n if (!scrollEl) {\n return noop;\n }\n /\n Прокрутка с помощью любого колеса мыши.\n */\n const onWheel = (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n };\n\n const listenerOptions = { passive: false };\n\n if (scrollOnAnyWheel) {\n scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n }\n scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n return () => {\n if (scrollOnAnyWheel) {\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n }\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n };\n },\n [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n );\n\n const handlers = mergeCalls(hoverHandlers, { onPointerEnter, onPointerLeave });\n\n return (\n <RootComponent\n {...restProps}\n {...handlers}\n baseClassName={classNames(\n styles.host,\n 'vkuiInternalHorizontalScroll',\n (showArrows === 'always' \|\| isHovered) && styles.showArrows,\n isRtl && styles.rtl,\n withPadding && styles.withPadding,\n )}\n // FIXME: onMouseEnter из restProps затирается, а при callMultiply орет линтер на рефы.\n onMouseEnter={calculateArrowsVisibility}\n >\n {showArrows && canScrollStart && (\n <ScrollArrow\n data-testid={prevButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowLeft)}\n onClick={scrollToStart}\n />\n )}\n {showArrows && canScrollEnd && (\n <ScrollArrow\n data-testid={nextButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowRight)}\n onClick={scrollToEnd}\n />\n )}\n <div\n className={classNames(styles.in, focusVisibleClassNames)}\n ref={scrollerRef}\n {...focusEvents}\n >\n <ContentWrapperComponent\n className={classNames(styles.inWrapper, contentWrapperClassName)}\n ref={contentWrapperRef}\n >\n {children}\n </ContentWrapperComponent>\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","noop","useConfigDirection","useExternRef","useFocusVisible","useFocusVisibleClassName","easeInOutSine","mergeCalls","useIsomorphicLayoutEffect","useHover","RootComponent","ScrollArrow","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","withPadding","onPointerEnter","onPointerLeave","onMouseEnter","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","focusVisible","focusEvents","focusVisibleClassNames","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","isHovered","hoverHandlers","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","handlers","baseClassName","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';
+import type { AnchorHTMLAttributesOnly, HasDataAttribute, HasRootRef, LiteralUnion } from '../../types';
 import { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
 import { type FloatElementIndentation, type FloatElementPlacement, ImageBaseFloatElement, type ImageBaseFloatElementProps } from './ImageBaseFloatElement/ImageBaseFloatElement';
 import { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
@@ -8,7 +8,7 @@ import type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize }
 export type { ImageBaseSize, ImageBaseExpectedIconProps, ImageBaseBadgeProps, ImageBaseOverlayProps, ImageBaseContextProps, ImageBaseFloatElementProps, FloatElementPlacement, FloatElementIndentation, };
 export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, } from './helpers';
 export { ImageBaseContext };
-export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, AnchorHTMLAttributesOnly, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {
+export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, AnchorHTMLAttributesOnly, HasRootRef<HTMLDivElement> {
     /**
      * Задаёт размер картинки.
      *
@@ -72,6 +72,17 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
      * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).
      */
     filter?: React.CSSProperties['filter'];
+    /**
+     * Свойства, которые можно прокинуть внутрь компонента:
+     * - `img`: свойства для прокидывания в тег `<img>`;.
+     */
+    slotProps?: {
+        img?: React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute;
+    };
+    /**
+     * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.
+     */
+    getRef?: React.Ref<HTMLImageElement>;
 }
 /**
  * @see https://vkui.io/components/image-base

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAO~~/B,OAAO,KAAK,EACV,wBAAwB,~~EAExB~~,~~MAAM~~,~~EACN~~,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;~~AAO5B~~,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC~~,EAC1B,MAAM,CAAC,gBAAgB,CAAC~~;~~IAC1B~~;;;;;;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;~~CACxC~~;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;~~CA2K5C~~,CAAC"}
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"}