npm - @vkontakte/vkui - Versions diffs - 8.0.2 → 8.1.1 - Mend

@vkontakte/vkui 8.0.2 → 8.1.1

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 (1386) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport type { GridAvatarBadgeProps };\n\nconst GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' \| 'fallbackIcon'> {\n /*\n Массив со ссылками. От 1 до 4 элементов.\n /\n src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/\n @see https://vkui.io/components/grid-avatar\n */\nexport const GridAvatar: React.FC<GridAvatarProps> & { Badge: typeof GridAvatarBadge } = ({\n src = [],\n size = GRID_AVATAR_DEFAULT_SIZE,\n className,\n children,\n ...restProps\n}: GridAvatarProps) => {\n if (process.env.NODE_ENV === 'development') {\n if (src.length > MAX_GRID_LENGTH) {\n warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n }\n }\n\n return (\n <ImageBase {...restProps} size={size} className={classNames(styles.host, className)}>\n <div className={styles.in} aria-hidden>\n {src.map((url, index) =>\n index < MAX_GRID_LENGTH ? (\n <div key={index} className={styles.item} style={{ backgroundImage: `url(${url})` }} />\n ) : null,\n )}\n </div>\n {children}\n </ImageBase>\n );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["classNames","warnOnce","ImageBase","GridAvatarBadge","GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","div","aria-hidden","map","url","index","style","backgroundImage","Badge"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,eAAe,QAAmC,uCAAoC;AAK/F,MAAMC,2BAA2B;AAEjC,OAAO,MAAMC,kBAAkB,EAAE;AASjC,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAA4E,CAAC,EACxFC,MAAM,EAAE,EACRC,OAAOL,wBAAwB,EAC/BM,SAAS,EACTC,QAAQ,EACR,GAAGC,WACa;IAChB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,IAAIQ,MAAM,GAAGX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,MAAM,CAAC,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,MAACH;QAAW,GAAGU,SAAS;QAAEH,MAAMA;QAAMC,WAAWV,mCAAwBU;;0BACvE,KAACO;gBAAIP,SAAS;gBAAaQ,aAAW;0BACnCV,IAAIW,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQhB,gCACN,KAACY;wBAAgBP,SAAS;wBAAeY,OAAO;4BAAEC,iBAAiB,CAAC,IAAI,EAAEH,IAAI,CAAC,CAAC;wBAAC;uBAAvEC,SACR;;YAGPV;;;AAGP,EAAE;AAEFJ,WAAWiB,KAAK,GAAGrB"}
1	+ {"version":3,"sources":["../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport type { GridAvatarBadgeProps };\n\nconst GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' \| 'fallbackIcon'> {\n /*\n Массив со ссылками. От 1 до 4 элементов.\n /\n src?: string[] \| undefined;\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/\n @see https://vkui.io/components/grid-avatar\n */\nexport const GridAvatar: React.FC<GridAvatarProps> & { Badge: typeof GridAvatarBadge } = ({\n src = [],\n size = GRID_AVATAR_DEFAULT_SIZE,\n className,\n children,\n ...restProps\n}: GridAvatarProps) => {\n if (process.env.NODE_ENV === 'development') {\n if (src.length > MAX_GRID_LENGTH) {\n warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n }\n }\n\n return (\n <ImageBase {...restProps} size={size} className={classNames(styles.host, className)}>\n <div className={styles.in} aria-hidden>\n {src.map((url, index) =>\n index < MAX_GRID_LENGTH ? (\n <div key={index} className={styles.item} style={{ backgroundImage: `url(${url})` }} />\n ) : null,\n )}\n </div>\n {children}\n </ImageBase>\n );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["classNames","warnOnce","ImageBase","GridAvatarBadge","GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","div","aria-hidden","map","url","index","style","backgroundImage","Badge"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,eAAe,QAAmC,uCAAoC;AAK/F,MAAMC,2BAA2B;AAEjC,OAAO,MAAMC,kBAAkB,EAAE;AASjC,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAA4E,CAAC,EACxFC,MAAM,EAAE,EACRC,OAAOL,wBAAwB,EAC/BM,SAAS,EACTC,QAAQ,EACR,GAAGC,WACa;IAChB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,IAAIQ,MAAM,GAAGX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,MAAM,CAAC,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,MAACH;QAAW,GAAGU,SAAS;QAAEH,MAAMA;QAAMC,WAAWV,mCAAwBU;;0BACvE,KAACO;gBAAIP,SAAS;gBAAaQ,aAAW;0BACnCV,IAAIW,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQhB,gCACN,KAACY;wBAAgBP,SAAS;wBAAeY,OAAO;4BAAEC,iBAAiB,CAAC,IAAI,EAAEH,IAAI,CAAC,CAAC;wBAAC;uBAAvEC,SACR;;YAGPV;;;AAGP,EAAE;AAEFJ,WAAWiB,KAAK,GAAGrB"}

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

@@ -7,11 +7,11 @@ export interface GroupProps extends GroupContainerProps {
     /**
      * Элемент заголовка группы.
      */
-    header?: React.ReactNode;
+    header?: React.ReactNode | undefined;
     /**
      * Подпись под содержимым.
      */
-    description?: React.ReactNode;
+    description?: React.ReactNode | undefined;
 }
 /**
  * @see https://vkui.io/components/group

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Group/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,UAAW,SAAQ,mBAAmB;IACrD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IACzB~~;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~CAC/B~~;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,SAAS,EAAE,OAAO,cAAc,CAAC;IACjC,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,WAAW,EAAE,OAAO,gBAAgB,CAAC;IACrC,eAAe,EAAE,OAAO,oBAAoB,CAAC;CAS9C,CAAC"}
1	+ {"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Group/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,UAAW,SAAQ,mBAAmB;IACrD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;CAC3C;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,SAAS,EAAE,OAAO,cAAc,CAAC;IACjC,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,WAAW,EAAE,OAAO,gBAAgB,CAAC;IACrC,eAAe,EAAE,OAAO,oBAAoB,CAAC;CAS9C,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { GroupContainer, type GroupContainerProps } from './GroupContainer';\nimport { GroupDescription } from './GroupDescription';\nimport { GroupExpandedContent } from './GroupExpandedContent';\nimport { GroupHeader } from './GroupHeader';\n\nexport interface GroupProps extends GroupContainerProps {\n /*\n Элемент заголовка группы.\n /\n header?: React.ReactNode;\n /\n Подпись под содержимым.\n /\n description?: React.ReactNode;\n}\n\n/\n @see https://vkui.io/components/group\n */\nexport const Group: React.FC<GroupProps> & {\n Container: typeof GroupContainer;\n Header: typeof GroupHeader;\n Description: typeof GroupDescription;\n ExpandedContent: typeof GroupExpandedContent;\n} = ({ header, description, children, ...restProps }: GroupProps): React.ReactNode => {\n return (\n <GroupContainer {...restProps}>\n {hasReactNode(header) && <GroupHeader>{header}</GroupHeader>}\n {children}\n {hasReactNode(description) && <GroupDescription>{description}</GroupDescription>}\n </GroupContainer>\n );\n};\n\nGroup.Container = GroupContainer;\nGroup.Header = GroupHeader;\nGroup.Description = GroupDescription;\nGroup.ExpandedContent = GroupExpandedContent;\n\nif (process.env.NODE_ENV !== 'production') {\n defineComponentDisplayNames(Group.Container, 'Group.Container');\n defineComponentDisplayNames(Group.Header, 'Group.Header');\n defineComponentDisplayNames(Group.Description, 'Group.Description');\n defineComponentDisplayNames(Group.ExpandedContent, 'Group.ExpandedContent');\n}\n"],"names":["hasReactNode","defineComponentDisplayNames","GroupContainer","GroupDescription","GroupExpandedContent","GroupHeader","Group","header","description","children","restProps","Container","Header","Description","ExpandedContent","process","env","NODE_ENV"],"mappings":";AACA,SAASA,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,cAAc,QAAkC,sBAAmB;AAC5E,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,WAAW,QAAQ,mBAAgB;AAa5C;;CAEC,GACD,OAAO,MAAMC,QAKT,CAAC,EAAEC,MAAM,EAAEC,WAAW,EAAEC,QAAQ,EAAE,GAAGC,WAAuB;IAC9D,qBACE,MAACR;QAAgB,GAAGQ,SAAS;;YAC1BV,aAAaO,yBAAW,KAACF;0BAAaE;;YACtCE;YACAT,aAAaQ,8BAAgB,KAACL;0BAAkBK;;;;AAGvD,EAAE;AAEFF,MAAMK,SAAS,GAAGT;AAClBI,MAAMM,MAAM,GAAGP;AACfC,MAAMO,WAAW,GAAGV;AACpBG,MAAMQ,eAAe,GAAGV;AAExB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzChB,4BAA4BK,MAAMK,SAAS,EAAE;IAC7CV,4BAA4BK,MAAMM,MAAM,EAAE;IAC1CX,4BAA4BK,MAAMO,WAAW,EAAE;IAC/CZ,4BAA4BK,MAAMQ,eAAe,EAAE;AACrD"}
1	+ {"version":3,"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { GroupContainer, type GroupContainerProps } from './GroupContainer';\nimport { GroupDescription } from './GroupDescription';\nimport { GroupExpandedContent } from './GroupExpandedContent';\nimport { GroupHeader } from './GroupHeader';\n\nexport interface GroupProps extends GroupContainerProps {\n /*\n Элемент заголовка группы.\n /\n header?: React.ReactNode \| undefined;\n /\n Подпись под содержимым.\n /\n description?: React.ReactNode \| undefined;\n}\n\n/\n @see https://vkui.io/components/group\n */\nexport const Group: React.FC<GroupProps> & {\n Container: typeof GroupContainer;\n Header: typeof GroupHeader;\n Description: typeof GroupDescription;\n ExpandedContent: typeof GroupExpandedContent;\n} = ({ header, description, children, ...restProps }: GroupProps): React.ReactNode => {\n return (\n <GroupContainer {...restProps}>\n {hasReactNode(header) && <GroupHeader>{header}</GroupHeader>}\n {children}\n {hasReactNode(description) && <GroupDescription>{description}</GroupDescription>}\n </GroupContainer>\n );\n};\n\nGroup.Container = GroupContainer;\nGroup.Header = GroupHeader;\nGroup.Description = GroupDescription;\nGroup.ExpandedContent = GroupExpandedContent;\n\nif (process.env.NODE_ENV !== 'production') {\n defineComponentDisplayNames(Group.Container, 'Group.Container');\n defineComponentDisplayNames(Group.Header, 'Group.Header');\n defineComponentDisplayNames(Group.Description, 'Group.Description');\n defineComponentDisplayNames(Group.ExpandedContent, 'Group.ExpandedContent');\n}\n"],"names":["hasReactNode","defineComponentDisplayNames","GroupContainer","GroupDescription","GroupExpandedContent","GroupHeader","Group","header","description","children","restProps","Container","Header","Description","ExpandedContent","process","env","NODE_ENV"],"mappings":";AACA,SAASA,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,cAAc,QAAkC,sBAAmB;AAC5E,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,WAAW,QAAQ,mBAAgB;AAa5C;;CAEC,GACD,OAAO,MAAMC,QAKT,CAAC,EAAEC,MAAM,EAAEC,WAAW,EAAEC,QAAQ,EAAE,GAAGC,WAAuB;IAC9D,qBACE,MAACR;QAAgB,GAAGQ,SAAS;;YAC1BV,aAAaO,yBAAW,KAACF;0BAAaE;;YACtCE;YACAT,aAAaQ,8BAAgB,KAACL;0BAAkBK;;;;AAGvD,EAAE;AAEFF,MAAMK,SAAS,GAAGT;AAClBI,MAAMM,MAAM,GAAGP;AACfC,MAAMO,WAAW,GAAGV;AACpBG,MAAMQ,eAAe,GAAGV;AAExB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzChB,4BAA4BK,MAAMK,SAAS,EAAE;IAC7CV,4BAA4BK,MAAMM,MAAM,EAAE;IAC1CX,4BAA4BK,MAAMO,WAAW,EAAE;IAC/CZ,4BAA4BK,MAAMQ,eAAe,EAAE;AACrD"}

package/dist/components/Group/GroupContainer.d.ts CHANGED Viewed

@@ -5,18 +5,18 @@ export type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> & HasCo
     `hide` - разделитель всегда спрятан,
     `auto` - разделитель рисуется автоматически между соседними группами.
    */
-    separator?: 'show' | 'hide' | 'auto';
+    separator?: 'show' | 'hide' | 'auto' | undefined;
     /**
      * Режим отображения. Если установлен `card`, выглядит как карточка c
      * обводкой и внешними отступами. Если `plain` — без отступов и обводки.
      * По умолчанию режим отображения зависит от `viewWidth` (`card` при `SMALL_TABLET` и `plain` при `MOBILE`)
      * В модальных окнах по умолчанию `plain`.
      */
-    mode?: 'plain' | 'card';
+    mode?: 'plain' | 'card' | undefined;
     /**
      * Отвечает за отступы вокруг контента в режиме `card`.
      */
-    padding?: 's' | 'm';
+    padding?: 's' | 'm' | undefined;
 };
 export declare const GroupContainer: ({ children, separator, mode: modeProps, padding, tabIndex: tabIndexProp, ...restProps }: GroupContainerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=GroupContainer.d.ts.map

package/dist/components/Group/GroupContainer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Group/GroupContainer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAuE3E,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GACtE,YAAY,GAAG;IACb;;;;KAIC;IACD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;~~IACrC~~;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;~~IACxB~~;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;~~CACrB~~,CAAC;AAIJ,eAAO,MAAM,cAAc,GAAI,yFAO5B,mBAAmB,4CA0DrB,CAAC"}
1	+ {"version":3,"file":"GroupContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Group/GroupContainer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAuE3E,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GACtE,YAAY,GAAG;IACb;;;;KAIC;IACD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;CACjC,CAAC;AAIJ,eAAO,MAAM,cAAc,GAAI,yFAO5B,mBAAmB,4CA0DrB,CAAC"}

package/dist/components/Group/GroupContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Group/GroupContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nfunction getViewWidthClassName(\n viewWidth: ViewWidthType \| 'none',\n legacySizeX: SizeTypeValues \| undefined,\n) {\n // TODO [>=10]: #9015 Удалить это условие\n if (legacySizeX !== undefined) {\n return legacySizeX === 'regular'\n ? styles.viewWidthSmallTabletPlus\n : styles.viewWidthSmallTabletMinus;\n }\n if (viewWidth === 'none') {\n return classNames(styles.viewWidthNone, 'vkuiInternalGroup--viewWidth-none');\n }\n return viewWidth >= ViewWidth.SMALL_TABLET\n ? styles.viewWidthSmallTabletPlus\n : styles.viewWidthSmallTabletMinus;\n}\n\nconst stylesMode = {\n none: classNames(styles.modeNone, 'vkuiInternalGroup--mode-none'),\n plain: classNames(styles.modePlain, 'vkuiInternalGroup--mode-plain'),\n card: classNames(styles.modeCard, 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n s: styles.paddingS,\n m: styles.paddingM,\n};\n\ntype GroupMode = 'plain' \| 'card' \| 'none';\n\n/*\n Вычисляем mode для Group.\n /\nfunction useGroupMode(\n forcedMode: GroupContainerProps['mode'],\n viewWidth: ViewWidthType \| 'none',\n legacySizeX: SizeTypeValues \| undefined,\n isInsideModal: boolean,\n): GroupMode {\n const { layout } = React.useContext(AppRootContext);\n\n if (forcedMode) {\n return forcedMode;\n }\n\n if (isInsideModal) {\n return 'plain';\n }\n\n if (layout) {\n return layout;\n }\n\n // TODO [>=10]: #9015 Удалить это условие\n if (legacySizeX !== undefined) {\n return legacySizeX === 'regular' ? 'card' : 'plain';\n }\n\n if (viewWidth !== 'none') {\n return viewWidth >= ViewWidth.SMALL_TABLET ? 'card' : 'plain';\n }\n\n return 'none';\n}\n\nexport type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &\n HasComponent & {\n /\n `show` (только для `mode=\"plain\"`) - разделитель всегда показывается\n `hide` - разделитель всегда спрятан,\n `auto` - разделитель рисуется автоматически между соседними группами.\n /\n separator?: 'show' \| 'hide' \| 'auto';\n /*\n Режим отображения. Если установлен `card`, выглядит как карточка c\n * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n * По умолчанию режим отображения зависит от `viewWidth` (`card` при `SMALL_TABLET` и `plain` при `MOBILE`)\n * В модальных окнах по умолчанию `plain`.\n /\n mode?: 'plain' \| 'card';\n /\n Отвечает за отступы вокруг контента в режиме `card`.\n */\n padding?: 's' \| 'm';\n };\n\nconst warn = warnOnce('Group');\n\nexport const GroupContainer = ({\n children,\n separator = 'auto',\n mode: modeProps,\n padding = 'm',\n tabIndex: tabIndexProp,\n ...restProps\n}: GroupContainerProps) => {\n const isInsideModal = useModalContext().id !== null;\n const { sizeX: legacySizeX, viewWidth = 'none' } = useAdaptivity();\n\n const mode = useGroupMode(modeProps, viewWidth, legacySizeX, isInsideModal);\n\n const isTabPanel = restProps.role === 'tabpanel';\n\n if (\n process.env.NODE_ENV === 'development' &&\n isTabPanel &&\n (!restProps['aria-controls'] \|\| !restProps['id'])\n ) {\n warn(\n 'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n );\n }\n\n const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n let siblingSeparatorElement: React.ReactNode = null;\n switch (separator) {\n case 'auto':\n siblingSeparatorElement = <div className={styles.separatorSibling} />;\n break;\n case 'show':\n siblingSeparatorElement = (\n <div\n className={classNames(\n styles.separatorSibling,\n mode === 'plain' \|\| mode === 'none' ? styles.separatorSiblingForced : undefined,\n )}\n />\n );\n break;\n case 'hide':\n break;\n }\n return (\n <>\n <RootComponent\n Component=\"section\"\n {...restProps}\n tabIndex={tabIndex}\n baseClassName={classNames(\n 'vkuiInternalGroup',\n styles.host,\n getViewWidthClassName(viewWidth, legacySizeX),\n mode === 'plain' && isInsideModal && styles.modePlainInsideModal,\n stylesMode[mode],\n stylesPadding[padding],\n )}\n >\n {children}\n </RootComponent>\n {siblingSeparatorElement}\n </>\n );\n};\n"],"names":["React","classNames","useModalContext","useAdaptivity","ViewWidth","warnOnce","AppRootContext","RootComponent","getViewWidthClassName","viewWidth","legacySizeX","undefined","SMALL_TABLET","stylesMode","none","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","isInsideModal","layout","useContext","warn","GroupContainer","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","id","sizeX","isTabPanel","role","process","env","NODE_ENV","siblingSeparatorElement","div","className","Component","baseClassName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,gCAA6B;AAC7D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAA8BC,SAAS,QAA4B,gCAAuB;AAC1F,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,WAAW;QAC7B,OAAOD,gBAAgB;IAGzB;IACA,IAAID,cAAc,QAAQ;QACxB,OAAOR,uCAAiC;IAC1C;IACA,OAAOQ,aAAaL,UAAUQ,YAAY;AAG5C;AAEA,MAAMC,aAAa;IACjBC,MAAMb,kCAA4B;IAClCc,OAAOd,mCAA6B;IACpCe,MAAMf,kCAA4B;AACpC;AAEA,MAAMgB,gBAAgB;IACpBC,CAAC;IACDC,CAAC;AACH;AAIA;;CAEC,GACD,SAASC,aACPC,UAAuC,EACvCZ,SAAiC,EACjCC,WAAuC,EACvCY,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAGvB,MAAMwB,UAAU,CAAClB;IAEpC,IAAIe,YAAY;QACd,OAAOA;IACT;IAEA,IAAIC,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,yCAAyC;IACzC,IAAIb,gBAAgBC,WAAW;QAC7B,OAAOD,gBAAgB,YAAY,SAAS;IAC9C;IAEA,IAAID,cAAc,QAAQ;QACxB,OAAOA,aAAaL,UAAUQ,YAAY,GAAG,SAAS;IACxD;IAEA,OAAO;AACT;AAuBA,MAAMa,OAAOpB,SAAS;AAEtB,OAAO,MAAMqB,iBAAiB,CAAC,EAC7BC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EACtB,GAAGC,WACiB;IACpB,MAAMZ,gBAAgBpB,kBAAkBiC,EAAE,KAAK;IAC/C,MAAM,EAAEC,OAAO1B,WAAW,EAAED,YAAY,MAAM,EAAE,GAAGN;IAEnD,MAAM0B,OAAOT,aAAaU,WAAWrB,WAAWC,aAAaY;IAE7D,MAAMe,aAAaH,UAAUI,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACH,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAT,KACE;IAEJ;IAEA,MAAMO,WAAWK,cAAcJ,iBAAiBtB,YAAY,IAAIsB;IAEhE,IAAIS,0BAA2C;IAC/C,OAAQd;QACN,KAAK;YACHc,wCAA0B,KAACC;gBAAIC,SAAS;;YACxC;QACF,KAAK;YACHF,wCACE,KAACC;gBACCC,WAAW3C,0CAET4B,SAAS,WAAWA,SAAS,+CAAyClB;;YAI5E;QACF,KAAK;YACH;IACJ;IACA,qBACE;;0BACE,KAACJ;gBACCsC,WAAU;gBACT,GAAGX,SAAS;gBACbF,UAAUA;gBACVc,eAAe7C,WACb,wCAEAO,sBAAsBC,WAAWC,cACjCmB,SAAS,WAAWP,oDACpBT,UAAU,CAACgB,KAAK,EAChBZ,aAAa,CAACc,QAAQ;0BAGvBJ;;YAEFe;;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Group/GroupContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nfunction getViewWidthClassName(\n viewWidth: ViewWidthType \| 'none',\n legacySizeX: SizeTypeValues \| undefined,\n) {\n // TODO [>=10]: #9015 Удалить это условие\n if (legacySizeX !== undefined) {\n return legacySizeX === 'regular'\n ? styles.viewWidthSmallTabletPlus\n : styles.viewWidthSmallTabletMinus;\n }\n if (viewWidth === 'none') {\n return classNames(styles.viewWidthNone, 'vkuiInternalGroup--viewWidth-none');\n }\n return viewWidth >= ViewWidth.SMALL_TABLET\n ? styles.viewWidthSmallTabletPlus\n : styles.viewWidthSmallTabletMinus;\n}\n\nconst stylesMode = {\n none: classNames(styles.modeNone, 'vkuiInternalGroup--mode-none'),\n plain: classNames(styles.modePlain, 'vkuiInternalGroup--mode-plain'),\n card: classNames(styles.modeCard, 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n s: styles.paddingS,\n m: styles.paddingM,\n};\n\ntype GroupMode = 'plain' \| 'card' \| 'none';\n\n/*\n Вычисляем mode для Group.\n /\nfunction useGroupMode(\n forcedMode: GroupContainerProps['mode'],\n viewWidth: ViewWidthType \| 'none',\n legacySizeX: SizeTypeValues \| undefined,\n isInsideModal: boolean,\n): GroupMode {\n const { layout } = React.useContext(AppRootContext);\n\n if (forcedMode) {\n return forcedMode;\n }\n\n if (isInsideModal) {\n return 'plain';\n }\n\n if (layout) {\n return layout;\n }\n\n // TODO [>=10]: #9015 Удалить это условие\n if (legacySizeX !== undefined) {\n return legacySizeX === 'regular' ? 'card' : 'plain';\n }\n\n if (viewWidth !== 'none') {\n return viewWidth >= ViewWidth.SMALL_TABLET ? 'card' : 'plain';\n }\n\n return 'none';\n}\n\nexport type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &\n HasComponent & {\n /\n `show` (только для `mode=\"plain\"`) - разделитель всегда показывается\n `hide` - разделитель всегда спрятан,\n `auto` - разделитель рисуется автоматически между соседними группами.\n /\n separator?: 'show' \| 'hide' \| 'auto' \| undefined;\n /*\n Режим отображения. Если установлен `card`, выглядит как карточка c\n * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n * По умолчанию режим отображения зависит от `viewWidth` (`card` при `SMALL_TABLET` и `plain` при `MOBILE`)\n * В модальных окнах по умолчанию `plain`.\n /\n mode?: 'plain' \| 'card' \| undefined;\n /\n Отвечает за отступы вокруг контента в режиме `card`.\n */\n padding?: 's' \| 'm' \| undefined;\n };\n\nconst warn = warnOnce('Group');\n\nexport const GroupContainer = ({\n children,\n separator = 'auto',\n mode: modeProps,\n padding = 'm',\n tabIndex: tabIndexProp,\n ...restProps\n}: GroupContainerProps) => {\n const isInsideModal = useModalContext().id !== null;\n const { sizeX: legacySizeX, viewWidth = 'none' } = useAdaptivity();\n\n const mode = useGroupMode(modeProps, viewWidth, legacySizeX, isInsideModal);\n\n const isTabPanel = restProps.role === 'tabpanel';\n\n if (\n process.env.NODE_ENV === 'development' &&\n isTabPanel &&\n (!restProps['aria-controls'] \|\| !restProps['id'])\n ) {\n warn(\n 'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n );\n }\n\n const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n let siblingSeparatorElement: React.ReactNode = null;\n switch (separator) {\n case 'auto':\n siblingSeparatorElement = <div className={styles.separatorSibling} />;\n break;\n case 'show':\n siblingSeparatorElement = (\n <div\n className={classNames(\n styles.separatorSibling,\n mode === 'plain' \|\| mode === 'none' ? styles.separatorSiblingForced : undefined,\n )}\n />\n );\n break;\n case 'hide':\n break;\n }\n return (\n <>\n <RootComponent\n Component=\"section\"\n {...restProps}\n tabIndex={tabIndex}\n baseClassName={classNames(\n 'vkuiInternalGroup',\n styles.host,\n getViewWidthClassName(viewWidth, legacySizeX),\n mode === 'plain' && isInsideModal && styles.modePlainInsideModal,\n stylesMode[mode],\n stylesPadding[padding],\n )}\n >\n {children}\n </RootComponent>\n {siblingSeparatorElement}\n </>\n );\n};\n"],"names":["React","classNames","useModalContext","useAdaptivity","ViewWidth","warnOnce","AppRootContext","RootComponent","getViewWidthClassName","viewWidth","legacySizeX","undefined","SMALL_TABLET","stylesMode","none","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","isInsideModal","layout","useContext","warn","GroupContainer","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","id","sizeX","isTabPanel","role","process","env","NODE_ENV","siblingSeparatorElement","div","className","Component","baseClassName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,gCAA6B;AAC7D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAA8BC,SAAS,QAA4B,gCAAuB;AAC1F,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,WAAW;QAC7B,OAAOD,gBAAgB;IAGzB;IACA,IAAID,cAAc,QAAQ;QACxB,OAAOR,uCAAiC;IAC1C;IACA,OAAOQ,aAAaL,UAAUQ,YAAY;AAG5C;AAEA,MAAMC,aAAa;IACjBC,MAAMb,kCAA4B;IAClCc,OAAOd,mCAA6B;IACpCe,MAAMf,kCAA4B;AACpC;AAEA,MAAMgB,gBAAgB;IACpBC,CAAC;IACDC,CAAC;AACH;AAIA;;CAEC,GACD,SAASC,aACPC,UAAuC,EACvCZ,SAAiC,EACjCC,WAAuC,EACvCY,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAGvB,MAAMwB,UAAU,CAAClB;IAEpC,IAAIe,YAAY;QACd,OAAOA;IACT;IAEA,IAAIC,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,yCAAyC;IACzC,IAAIb,gBAAgBC,WAAW;QAC7B,OAAOD,gBAAgB,YAAY,SAAS;IAC9C;IAEA,IAAID,cAAc,QAAQ;QACxB,OAAOA,aAAaL,UAAUQ,YAAY,GAAG,SAAS;IACxD;IAEA,OAAO;AACT;AAuBA,MAAMa,OAAOpB,SAAS;AAEtB,OAAO,MAAMqB,iBAAiB,CAAC,EAC7BC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EACtB,GAAGC,WACiB;IACpB,MAAMZ,gBAAgBpB,kBAAkBiC,EAAE,KAAK;IAC/C,MAAM,EAAEC,OAAO1B,WAAW,EAAED,YAAY,MAAM,EAAE,GAAGN;IAEnD,MAAM0B,OAAOT,aAAaU,WAAWrB,WAAWC,aAAaY;IAE7D,MAAMe,aAAaH,UAAUI,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACH,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAT,KACE;IAEJ;IAEA,MAAMO,WAAWK,cAAcJ,iBAAiBtB,YAAY,IAAIsB;IAEhE,IAAIS,0BAA2C;IAC/C,OAAQd;QACN,KAAK;YACHc,wCAA0B,KAACC;gBAAIC,SAAS;;YACxC;QACF,KAAK;YACHF,wCACE,KAACC;gBACCC,WAAW3C,0CAET4B,SAAS,WAAWA,SAAS,+CAAyClB;;YAI5E;QACF,KAAK;YACH;IACJ;IACA,qBACE;;0BACE,KAACJ;gBACCsC,WAAU;gBACT,GAAGX,SAAS;gBACbF,UAAUA;gBACVc,eAAe7C,WACb,wCAEAO,sBAAsBC,WAAWC,cACjCmB,SAAS,WAAWP,oDACpBT,UAAU,CAACgB,KAAK,EAChBZ,aAAa,CAACc,QAAQ;0BAGvBJ;;YAEFe;;;AAGP,EAAE"}

package/dist/components/Group/GroupExpandedContent.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ export type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> &
     /**
      * Направление отображения контента.
      */
-    direction?: 'inline' | 'block';
+    direction?: 'inline' | 'block' | undefined;
 };
 export declare const GroupExpandedContent: ({ direction, ...restProps }: GroupExpandedContentProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=GroupExpandedContent.d.ts.map

package/dist/components/Group/GroupExpandedContent.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupExpandedContent.d.ts","sourceRoot":"","sources":["../../../src/components/Group/GroupExpandedContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS3E,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAC5E,YAAY,GAAG;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;~~CAChC~~,CAAC;AACJ,eAAO,MAAM,oBAAoB,GAAI,6BAGlC,yBAAyB,4CAI3B,CAAC"}
1	+ {"version":3,"file":"GroupExpandedContent.d.ts","sourceRoot":"","sources":["../../../src/components/Group/GroupExpandedContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS3E,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAC5E,YAAY,GAAG;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;CAC5C,CAAC;AACJ,eAAO,MAAM,oBAAoB,GAAI,6BAGlC,yBAAyB,4CAI3B,CAAC"}

package/dist/components/Group/GroupExpandedContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Group/GroupExpandedContent.tsx"],"sourcesContent":["import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst stylesDirection = {\n inline: styles.expandedContentInline,\n block: styles.expandedContentBlock,\n};\n\nexport type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> &\n HasComponent & {\n /*\n Направление отображения контента.\n */\n direction?: 'inline' \| 'block';\n };\nexport const GroupExpandedContent = ({\n direction = 'inline',\n ...restProps\n}: GroupExpandedContentProps) => {\n return (\n <RootComponent Component=\"div\" {...restProps} baseClassName={stylesDirection[direction]} />\n );\n};\n"],"names":["RootComponent","stylesDirection","inline","block","GroupExpandedContent","direction","restProps","Component","baseClassName"],"mappings":";AACA,SAASA,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,kBAAkB;IACtBC,MAAM;IACNC,KAAK;AACP;AASA,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,YAAY,QAAQ,EACpB,GAAGC,WACuB;IAC1B,qBACE,KAACN;QAAcO,WAAU;QAAO,GAAGD,SAAS;QAAEE,eAAeP,eAAe,CAACI,UAAU;;AAE3F,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Group/GroupExpandedContent.tsx"],"sourcesContent":["import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst stylesDirection = {\n inline: styles.expandedContentInline,\n block: styles.expandedContentBlock,\n};\n\nexport type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> &\n HasComponent & {\n /*\n Направление отображения контента.\n */\n direction?: 'inline' \| 'block' \| undefined;\n };\nexport const GroupExpandedContent = ({\n direction = 'inline',\n ...restProps\n}: GroupExpandedContentProps) => {\n return (\n <RootComponent Component=\"div\" {...restProps} baseClassName={stylesDirection[direction]} />\n );\n};\n"],"names":["RootComponent","stylesDirection","inline","block","GroupExpandedContent","direction","restProps","Component","baseClassName"],"mappings":";AACA,SAASA,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,kBAAkB;IACtBC,MAAM;IACNC,KAAK;AACP;AASA,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,YAAY,QAAQ,EACpB,GAAGC,WACuB;IAC1B,qBACE,KAACN;QAAcO,WAAU;QAAO,GAAGD,SAAS;QAAEE,eAAeP,eAAe,CAACI,UAAU;;AAE3F,EAAE"}

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

@@ -4,47 +4,47 @@ export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, Has
     /**
      * Размер компонента.
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | undefined;
     /**
      * Подпись под основным текстом.
      */
-    subtitle?: React.ReactNode;
+    subtitle?: React.ReactNode | undefined;
     /**
      * Позволяет задать тип элемента в который будет обёрнут subtitle.
      */
-    subtitleComponent?: React.ElementType;
+    subtitleComponent?: React.ElementType | undefined;
     /**
      * Допускаются иконки, текст, Link.
      */
-    after?: React.ReactNode;
+    after?: React.ReactNode | undefined;
     /**
      * Допускаются текст, Indicator.
      */
-    indicator?: React.ReactNode;
+    indicator?: React.ReactNode | undefined;
     /**
      * Возможность отображения текста в несколько строк.
      */
-    multiline?: boolean;
+    multiline?: boolean | undefined;
     /**
      * Иконка слева (рекомендуется использовать размер 28px).
      */
-    before?: React.ReactNode;
+    before?: React.ReactNode | undefined;
     /**
      * Иконка слева от title (рекомендуется использовать размер 16px).
      */
-    beforeTitle?: React.ReactNode;
+    beforeTitle?: React.ReactNode | undefined;
     /**
      * Иконка справа от title (рекомендуется использовать размер 16px).
      */
-    afterTitle?: React.ReactNode;
+    afterTitle?: React.ReactNode | undefined;
     /**
      * Иконка слева от subtitle (рекомендуется использовать размер 12px).
      */
-    beforeSubtitle?: React.ReactNode;
+    beforeSubtitle?: React.ReactNode | undefined;
     /**
      * Иконка справа от subtitle (рекомендуется использовать размер 12px).
      */
-    afterSubtitle?: React.ReactNode;
+    afterSubtitle?: React.ReactNode | undefined;
 }
 /**
  * @see https://vkui.io/components/group#header

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU3E,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,YAAY;IACvF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;~~IAC9B~~;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IAC3B~~;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;~~IACtC~~;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IACxB~~;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IAC5B~~;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;~~IACpB~~;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IACzB~~;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IAC9B~~;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IAC7B~~;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IACjC~~;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~CACjC~~;AAwCD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,uKAepB,WAAW,KAAG,KAAK,CAAC,SA8CtB,CAAC"}
1	+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU3E,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,YAAY;IACvF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACvC;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;IAClD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC1C;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;CAC7C;AAwCD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,uKAepB,WAAW,KAAG,KAAK,CAAC,SA8CtB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {\n /*\n Размер компонента.\n /\n size?: 's' \| 'm' \| 'l' \| 'xl';\n /\n Подпись под основным текстом.\n /\n subtitle?: React.ReactNode;\n /\n Позволяет задать тип элемента в который будет обёрнут subtitle.\n /\n subtitleComponent?: React.ElementType;\n /\n Допускаются иконки, текст, Link.\n /\n after?: React.ReactNode;\n /\n Допускаются текст, Indicator.\n /\n indicator?: React.ReactNode;\n /\n Возможность отображения текста в несколько строк.\n /\n multiline?: boolean;\n /\n Иконка слева (рекомендуется использовать размер 28px).\n /\n before?: React.ReactNode;\n /\n Иконка слева от title (рекомендуется использовать размер 16px).\n /\n beforeTitle?: React.ReactNode;\n /\n Иконка справа от title (рекомендуется использовать размер 16px).\n /\n afterTitle?: React.ReactNode;\n /\n Иконка слева от subtitle (рекомендуется использовать размер 12px).\n /\n beforeSubtitle?: React.ReactNode;\n /\n Иконка справа от subtitle (рекомендуется использовать размер 12px).\n /\n afterSubtitle?: React.ReactNode;\n}\n\nconst sizeClassNames: Record<Exclude<HeaderProps['size'], undefined>, string> = {\n s: styles.sizeS,\n m: styles.sizeM,\n l: styles.sizeL,\n xl: styles.sizeXl,\n};\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' \| 'size' \| 'className'> & HasComponent;\n\nconst HeaderContent = ({ size, ...restProps }: HeaderContentProps) => {\n switch (size) {\n case 'xl':\n return <Title level=\"2\" weight=\"1\" {...restProps} />;\n case 'l':\n return <Title level=\"3\" weight=\"1\" {...restProps} />;\n case 'm':\n return <Headline {...restProps} />;\n case 's':\n return <Footnote caps weight=\"1\" {...restProps} />;\n }\n\n return null;\n};\n\nconst Subtitle: React.FC<\n Pick<HeaderProps, 'multiline' \| 'subtitleComponent' \| 'size'> & { children: React.ReactNode }\n> = ({ subtitleComponent, children, multiline, size }) => {\n const SubtitleElement = size === 'm' \|\| size === 's' ? Caption : Subhead;\n return (\n <SubtitleElement\n className={classNames(styles.subtitle, multiline && styles.contentMultiline)}\n Component={subtitleComponent}\n >\n {children}\n </SubtitleElement>\n );\n};\n\n/\n @see https://vkui.io/components/group#header\n */\nexport const Header = ({\n size = 'm',\n Component = 'h2',\n children,\n subtitle,\n subtitleComponent = 'span',\n indicator,\n after,\n multiline,\n before,\n beforeTitle,\n afterTitle,\n beforeSubtitle,\n afterSubtitle,\n ...restProps\n}: HeaderProps): React.ReactNode => {\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n sizeClassNames[size],\n isPrimitiveReactNode(indicator) && styles.pi,\n )}\n >\n {before && (\n <div className={classNames(styles.before, subtitle && styles.beforeWithSubtitle)}>\n {before}\n </div>\n )}\n <div className={styles.main}>\n <HeaderContent className={styles.content} Component={Component} size={size}>\n {beforeTitle && <div className={styles.contentBefore}>{beforeTitle}</div>}\n <span className={classNames(styles.contentIn, multiline && styles.contentMultiline)}>\n {children}\n </span>\n {afterTitle && <div className={styles.contentAfter}>{afterTitle}</div>}\n {hasReactNode(indicator) && (\n <Footnote className={styles.indicator} weight=\"2\">\n {indicator}\n </Footnote>\n )}\n </HeaderContent>\n {hasReactNode(subtitle) && (\n <div className={styles.subtitleWrapper}>\n {beforeSubtitle && <div className={styles.subtitleBefore}>{beforeSubtitle}</div>}\n <Subtitle multiline={multiline} subtitleComponent={subtitleComponent} size={size}>\n {subtitle}\n </Subtitle>\n {afterSubtitle && <div className={styles.subtitleAfter}>{afterSubtitle}</div>}\n </div>\n )}\n </div>\n\n {hasReactNode(after) && (\n <Paragraph className={styles.after} Component=\"span\">\n {after}\n </Paragraph>\n )}\n </RootComponent>\n );\n};\n"],"names":["classNames","hasReactNode","isPrimitiveReactNode","RootComponent","Caption","Footnote","Headline","Paragraph","Subhead","Title","sizeClassNames","s","m","l","xl","HeaderContent","size","restProps","level","weight","caps","Subtitle","subtitleComponent","children","multiline","SubtitleElement","className","Component","Header","subtitle","indicator","after","before","beforeTitle","afterTitle","beforeSubtitle","afterSubtitle","baseClassName","div","span"],"mappings":"AAAA;;AAGA,SAASA,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AAEjF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,SAAS,QAAQ,uCAAoC;AAC9D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,KAAK,QAAQ,+BAA4B;AAkDlD,MAAMC,iBAA0E;IAC9EC,CAAC;IACDC,CAAC;IACDC,CAAC;IACDC,EAAE;AACJ;AAIA,MAAMC,gBAAgB,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA+B;IAC/D,OAAQD;QACN,KAAK;YACH,qBAAO,KAACP;gBAAMS,OAAM;gBAAIC,QAAO;gBAAK,GAAGF,SAAS;;QAClD,KAAK;YACH,qBAAO,KAACR;gBAAMS,OAAM;gBAAIC,QAAO;gBAAK,GAAGF,SAAS;;QAClD,KAAK;YACH,qBAAO,KAACX;gBAAU,GAAGW,SAAS;;QAChC,KAAK;YACH,qBAAO,KAACZ;gBAASe,IAAI;gBAACD,QAAO;gBAAK,GAAGF,SAAS;;IAClD;IAEA,OAAO;AACT;AAEA,MAAMI,WAEF,CAAC,EAAEC,iBAAiB,EAAEC,QAAQ,EAAEC,SAAS,EAAER,IAAI,EAAE;IACnD,MAAMS,kBAAkBT,SAAS,OAAOA,SAAS,MAAMZ,UAAUI;IACjE,qBACE,KAACiB;QACCC,WAAW1B,mCAA4BwB;QACvCG,WAAWL;kBAEVC;;AAGP;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EACrBZ,OAAO,GAAG,EACVW,YAAY,IAAI,EAChBJ,QAAQ,EACRM,QAAQ,EACRP,oBAAoB,MAAM,EAC1BQ,SAAS,EACTC,KAAK,EACLP,SAAS,EACTQ,MAAM,EACNC,WAAW,EACXC,UAAU,EACVC,cAAc,EACdC,aAAa,EACb,GAAGnB,WACS;IACZ,qBACE,MAACd;QACE,GAAGc,SAAS;QACboB,eAAerC,+BAEbU,cAAc,CAACM,KAAK,EACpBd,qBAAqB4B;;YAGtBE,wBACC,KAACM;gBAAIZ,WAAW1B,iCAA0B6B;0BACvCG;;0BAGL,MAACM;gBAAIZ,SAAS;;kCACZ,MAACX;wBAAcW,SAAS;wBAAkBC,WAAWA;wBAAWX,MAAMA;;4BACnEiB,6BAAe,KAACK;gCAAIZ,SAAS;0CAAyBO;;0CACvD,KAACM;gCAAKb,WAAW1B,oCAA6BwB;0CAC3CD;;4BAEFW,4BAAc,KAACI;gCAAIZ,SAAS;0CAAwBQ;;4BACpDjC,aAAa6B,4BACZ,KAACzB;gCAASqB,SAAS;gCAAoBP,QAAO;0CAC3CW;;;;oBAIN7B,aAAa4B,2BACZ,MAACS;wBAAIZ,SAAS;;4BACXS,gCAAkB,KAACG;gCAAIZ,SAAS;0CAA0BS;;0CAC3D,KAACd;gCAASG,WAAWA;gCAAWF,mBAAmBA;gCAAmBN,MAAMA;0CACzEa;;4BAEFO,+BAAiB,KAACE;gCAAIZ,SAAS;0CAAyBU;;;;;;YAK9DnC,aAAa8B,wBACZ,KAACxB;gBAAUmB,SAAS;gBAAgBC,WAAU;0BAC3CI;;;;AAKX,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {\n /*\n Размер компонента.\n /\n size?: 's' \| 'm' \| 'l' \| 'xl' \| undefined;\n /\n Подпись под основным текстом.\n /\n subtitle?: React.ReactNode \| undefined;\n /\n Позволяет задать тип элемента в который будет обёрнут subtitle.\n /\n subtitleComponent?: React.ElementType \| undefined;\n /\n Допускаются иконки, текст, Link.\n /\n after?: React.ReactNode \| undefined;\n /\n Допускаются текст, Indicator.\n /\n indicator?: React.ReactNode \| undefined;\n /\n Возможность отображения текста в несколько строк.\n /\n multiline?: boolean \| undefined;\n /\n Иконка слева (рекомендуется использовать размер 28px).\n /\n before?: React.ReactNode \| undefined;\n /\n Иконка слева от title (рекомендуется использовать размер 16px).\n /\n beforeTitle?: React.ReactNode \| undefined;\n /\n Иконка справа от title (рекомендуется использовать размер 16px).\n /\n afterTitle?: React.ReactNode \| undefined;\n /\n Иконка слева от subtitle (рекомендуется использовать размер 12px).\n /\n beforeSubtitle?: React.ReactNode \| undefined;\n /\n Иконка справа от subtitle (рекомендуется использовать размер 12px).\n /\n afterSubtitle?: React.ReactNode \| undefined;\n}\n\nconst sizeClassNames: Record<Exclude<HeaderProps['size'], undefined>, string> = {\n s: styles.sizeS,\n m: styles.sizeM,\n l: styles.sizeL,\n xl: styles.sizeXl,\n};\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' \| 'size' \| 'className'> & HasComponent;\n\nconst HeaderContent = ({ size, ...restProps }: HeaderContentProps) => {\n switch (size) {\n case 'xl':\n return <Title level=\"2\" weight=\"1\" {...restProps} />;\n case 'l':\n return <Title level=\"3\" weight=\"1\" {...restProps} />;\n case 'm':\n return <Headline {...restProps} />;\n case 's':\n return <Footnote caps weight=\"1\" {...restProps} />;\n }\n\n return null;\n};\n\nconst Subtitle: React.FC<\n Pick<HeaderProps, 'multiline' \| 'subtitleComponent' \| 'size'> & { children: React.ReactNode }\n> = ({ subtitleComponent, children, multiline, size }) => {\n const SubtitleElement = size === 'm' \|\| size === 's' ? Caption : Subhead;\n return (\n <SubtitleElement\n className={classNames(styles.subtitle, multiline && styles.contentMultiline)}\n Component={subtitleComponent}\n >\n {children}\n </SubtitleElement>\n );\n};\n\n/\n @see https://vkui.io/components/group#header\n */\nexport const Header = ({\n size = 'm',\n Component = 'h2',\n children,\n subtitle,\n subtitleComponent = 'span',\n indicator,\n after,\n multiline,\n before,\n beforeTitle,\n afterTitle,\n beforeSubtitle,\n afterSubtitle,\n ...restProps\n}: HeaderProps): React.ReactNode => {\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n sizeClassNames[size],\n isPrimitiveReactNode(indicator) && styles.pi,\n )}\n >\n {before && (\n <div className={classNames(styles.before, subtitle && styles.beforeWithSubtitle)}>\n {before}\n </div>\n )}\n <div className={styles.main}>\n <HeaderContent className={styles.content} Component={Component} size={size}>\n {beforeTitle && <div className={styles.contentBefore}>{beforeTitle}</div>}\n <span className={classNames(styles.contentIn, multiline && styles.contentMultiline)}>\n {children}\n </span>\n {afterTitle && <div className={styles.contentAfter}>{afterTitle}</div>}\n {hasReactNode(indicator) && (\n <Footnote className={styles.indicator} weight=\"2\">\n {indicator}\n </Footnote>\n )}\n </HeaderContent>\n {hasReactNode(subtitle) && (\n <div className={styles.subtitleWrapper}>\n {beforeSubtitle && <div className={styles.subtitleBefore}>{beforeSubtitle}</div>}\n <Subtitle multiline={multiline} subtitleComponent={subtitleComponent} size={size}>\n {subtitle}\n </Subtitle>\n {afterSubtitle && <div className={styles.subtitleAfter}>{afterSubtitle}</div>}\n </div>\n )}\n </div>\n\n {hasReactNode(after) && (\n <Paragraph className={styles.after} Component=\"span\">\n {after}\n </Paragraph>\n )}\n </RootComponent>\n );\n};\n"],"names":["classNames","hasReactNode","isPrimitiveReactNode","RootComponent","Caption","Footnote","Headline","Paragraph","Subhead","Title","sizeClassNames","s","m","l","xl","HeaderContent","size","restProps","level","weight","caps","Subtitle","subtitleComponent","children","multiline","SubtitleElement","className","Component","Header","subtitle","indicator","after","before","beforeTitle","afterTitle","beforeSubtitle","afterSubtitle","baseClassName","div","span"],"mappings":"AAAA;;AAGA,SAASA,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AAEjF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,SAAS,QAAQ,uCAAoC;AAC9D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,KAAK,QAAQ,+BAA4B;AAkDlD,MAAMC,iBAA0E;IAC9EC,CAAC;IACDC,CAAC;IACDC,CAAC;IACDC,EAAE;AACJ;AAIA,MAAMC,gBAAgB,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA+B;IAC/D,OAAQD;QACN,KAAK;YACH,qBAAO,KAACP;gBAAMS,OAAM;gBAAIC,QAAO;gBAAK,GAAGF,SAAS;;QAClD,KAAK;YACH,qBAAO,KAACR;gBAAMS,OAAM;gBAAIC,QAAO;gBAAK,GAAGF,SAAS;;QAClD,KAAK;YACH,qBAAO,KAACX;gBAAU,GAAGW,SAAS;;QAChC,KAAK;YACH,qBAAO,KAACZ;gBAASe,IAAI;gBAACD,QAAO;gBAAK,GAAGF,SAAS;;IAClD;IAEA,OAAO;AACT;AAEA,MAAMI,WAEF,CAAC,EAAEC,iBAAiB,EAAEC,QAAQ,EAAEC,SAAS,EAAER,IAAI,EAAE;IACnD,MAAMS,kBAAkBT,SAAS,OAAOA,SAAS,MAAMZ,UAAUI;IACjE,qBACE,KAACiB;QACCC,WAAW1B,mCAA4BwB;QACvCG,WAAWL;kBAEVC;;AAGP;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EACrBZ,OAAO,GAAG,EACVW,YAAY,IAAI,EAChBJ,QAAQ,EACRM,QAAQ,EACRP,oBAAoB,MAAM,EAC1BQ,SAAS,EACTC,KAAK,EACLP,SAAS,EACTQ,MAAM,EACNC,WAAW,EACXC,UAAU,EACVC,cAAc,EACdC,aAAa,EACb,GAAGnB,WACS;IACZ,qBACE,MAACd;QACE,GAAGc,SAAS;QACboB,eAAerC,+BAEbU,cAAc,CAACM,KAAK,EACpBd,qBAAqB4B;;YAGtBE,wBACC,KAACM;gBAAIZ,WAAW1B,iCAA0B6B;0BACvCG;;0BAGL,MAACM;gBAAIZ,SAAS;;kCACZ,MAACX;wBAAcW,SAAS;wBAAkBC,WAAWA;wBAAWX,MAAMA;;4BACnEiB,6BAAe,KAACK;gCAAIZ,SAAS;0CAAyBO;;0CACvD,KAACM;gCAAKb,WAAW1B,oCAA6BwB;0CAC3CD;;4BAEFW,4BAAc,KAACI;gCAAIZ,SAAS;0CAAwBQ;;4BACpDjC,aAAa6B,4BACZ,KAACzB;gCAASqB,SAAS;gCAAoBP,QAAO;0CAC3CW;;;;oBAIN7B,aAAa4B,2BACZ,MAACS;wBAAIZ,SAAS;;4BACXS,gCAAkB,KAACG;gCAAIZ,SAAS;0CAA0BS;;0CAC3D,KAACd;gCAASG,WAAWA;gCAAWF,mBAAmBA;gCAAmBN,MAAMA;0CACzEa;;4BAEFO,+BAAiB,KAACE;gCAAIZ,SAAS;0CAAyBU;;;;;;YAK9DnC,aAAa8B,wBACZ,KAACxB;gBAAUmB,SAAS;gBAAgBC,WAAU;0BAC3CI;;;;AAKX,EAAE"}

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

@@ -11,34 +11,34 @@ export interface HorizontalCellProps extends Omit<TappableOmitProps, 'size' | 'g
      * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.
      * Пользовательскую ширину можно задать через числовое значение.
      */
-    size?: LiteralUnion<HorizontalCellSizes, number>;
+    size?: LiteralUnion<HorizontalCellSizes | undefined, number> | undefined;
     /**
      * Заголовок.
      */
-    title?: React.ReactNode;
+    title?: React.ReactNode | undefined;
     /**
      * Дополнительная строка текста под `children`.
      */
-    subtitle?: React.ReactNode;
+    subtitle?: React.ReactNode | undefined;
     /**
      * Дополнительная строка текста под `children` и `subtitle`.
      */
-    extraSubtitle?: React.ReactNode;
+    extraSubtitle?: React.ReactNode | undefined;
     /**
      * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`.
      */
-    textAlign?: 'start' | 'center' | 'end';
+    textAlign?: 'start' | 'center' | 'end' | undefined;
     /**
      * Отключает формирование отступов у крайних элементов.
      *
      * Актуально для использования в многострочных списках.
      */
-    noPadding?: boolean;
+    noPadding?: boolean | undefined;
     /**
      * Позволяет передать типографический компонент, используемый для `title`.
      * По умолчанию `Caption` для `size=s`, иначе `Subhead`.
      */
-    TitleComponent?: React.ElementType;
+    TitleComponent?: React.ElementType | undefined;
 }
 /**
  * @see https://vkui.io/components/horizontal-cell

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalCell.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAuB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAMxE,eAAO,MAAM,+BAA+B,gCAAgC,CAAC;AAe7E,KAAK,mBAAmB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,kBAAkB,CAAC,EACnF,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;~~IACjD~~;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IACxB~~;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IAC3B~~;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~IAChC~~;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;~~IACvC~~;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;~~IACpB~~;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;~~CACpC~~;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,8IAc5B,mBAAmB,KAAG,KAAK,CAAC,SAuC9B,CAAC"}
1	+ {"version":3,"file":"HorizontalCell.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAuB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAMxE,eAAO,MAAM,+BAA+B,gCAAgC,CAAC;AAe7E,KAAK,mBAAmB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,kBAAkB,CAAC,EACnF,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,mBAAmB,GAAG,SAAS,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;IACzE;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5C;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACnD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;CAChD;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,8IAc5B,mBAAmB,KAAG,KAAK,CAAC,SAuC9B,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type { CSSCustomProperties, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = '--vkui_internal--cell_width';\n\nconst stylesSize = {\n s: styles.sizeS,\n m: styles.sizeM,\n l: styles.sizeL,\n xl: styles.sizeXL,\n auto: styles.sizeAuto,\n};\n\nconst textAlignClassNames = {\n center: styles.textAlignCenter,\n end: styles.textAlignEnd,\n};\n\ntype HorizontalCellSizes = 's' \| 'm' \| 'l' \| 'xl' \| 'auto';\n\nexport interface HorizontalCellProps\n extends Omit<TappableOmitProps, 'size' \| 'getRootRef' \| 'title' \| 'borderRadiusMode'>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /*\n Ширина компонента.\n \n Значения `'s' \| 'm' \| 'l' \| 'xl'` определяются дизайн-системой.\n * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.\n * Пользовательскую ширину можно задать через числовое значение.\n /\n size?: LiteralUnion<HorizontalCellSizes, number~~>;\~~n /\n Заголовок.\n /\n title?: React.ReactNode;\n /\n Дополнительная строка текста под `children`.\n /\n subtitle?: React.ReactNode;\n /\n Дополнительная строка текста под `children` и `subtitle`.\n /\n extraSubtitle?: React.ReactNode;\n /\n Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`.\n /\n textAlign?: 'start' \| 'center' \| 'end';\n /\n Отключает формирование отступов у крайних элементов.\n \n Актуально для использования в многострочных списках.\n /\n noPadding?: boolean;\n /\n Позволяет передать типографический компонент, используемый для `title`.\n * По умолчанию `Caption` для `size=s`, иначе `Subhead`.\n /\n TitleComponent?: React.ElementType;\n}\n\n/\n @see https://vkui.io/components/horizontal-cell\n */\nexport const HorizontalCell = ({\n className,\n title,\n style,\n subtitle,\n size = 's',\n children = <Avatar size={56} />,\n getRootRef,\n getRef,\n extraSubtitle,\n textAlign = size === 's' ? 'center' : 'start',\n noPadding = false,\n TitleComponent = size === 's' ? Caption : Subhead,\n ...restProps\n}: HorizontalCellProps): React.ReactNode => {\n const hasTypography =\n hasReactNode(title) \|\| hasReactNode(subtitle) \|\| hasReactNode(extraSubtitle);\n\n const customProperties: CSSCustomProperties \| undefined =\n typeof size === 'number' ? { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` } : undefined;\n\n return (\n <div\n ref={getRootRef}\n style={mergeStyle(customProperties, style)}\n className={classNames(\n styles.host,\n typeof size === 'string' && stylesSize[size],\n size !== 'auto' && styles.sized,\n typeof size === 'number' && styles.customSize,\n noPadding && styles.noPadding,\n className,\n )}\n >\n <Tappable className={styles.body} getRootRef={getRef} {...restProps}>\n {hasReactNode(children) && <div className={styles.image}>{children}</div>}\n {hasTypography && (\n <div\n className={classNames(\n styles.content,\n textAlign !== 'start' && textAlignClassNames[textAlign],\n )}\n >\n {hasReactNode(title) && <TitleComponent>{title}</TitleComponent>}\n {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}\n {hasReactNode(extraSubtitle) && (\n <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>\n )}\n </div>\n )}\n </Tappable>\n </div>\n );\n};\n"],"names":["classNames","hasReactNode","mergeStyle","Avatar","Tappable","Caption","Footnote","Subhead","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","m","l","xl","auto","textAlignClassNames","center","end","HorizontalCell","className","title","style","subtitle","size","children","getRootRef","getRef","extraSubtitle","textAlign","noPadding","TitleComponent","restProps","hasTypography","customProperties","undefined","div","ref"],"mappings":";AACA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AAGxD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;IACDC,EAAE;IACFC,IAAI;AACN;AAEA,MAAMC,sBAAsB;IAC1BC,MAAM;IACNC,GAAG;AACL;AA6CA;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,OAAO,GAAG,EACVC,yBAAW,KAACrB;IAAOoB,MAAM;EAAM,EAC/BE,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,YAAYL,SAAS,MAAM,WAAW,OAAO,EAC7CM,YAAY,KAAK,EACjBC,iBAAiBP,SAAS,MAAMlB,UAAUE,OAAO,EACjD,GAAGwB,WACiB;IACpB,MAAMC,gBACJ/B,aAAamB,UAAUnB,aAAaqB,aAAarB,aAAa0B;IAEhE,MAAMM,mBACJ,OAAOV,SAAS,WAAW;QAAE,CAACf,gCAAgC,EAAE,GAAGe,KAAK,EAAE,CAAC;IAAC,IAAIW;IAElF,qBACE,KAACC;QACCC,KAAKX;QACLJ,OAAOnB,WAAW+B,kBAAkBZ;QACpCF,WAAWnB,uCAET,OAAOuB,SAAS,YAAYd,UAAU,CAACc,KAAK,EAC5CA,SAAS,uCACT,OAAOA,SAAS,8CAChBM,8CACAV;kBAGF,cAAA,MAACf;YAASe,SAAS;YAAeM,YAAYC;YAAS,GAAGK,SAAS;;gBAChE9B,aAAauB,2BAAa,KAACW;oBAAIhB,SAAS;8BAAiBK;;gBACzDQ,+BACC,MAACG;oBACChB,WAAWnB,0CAET4B,cAAc,WAAWb,mBAAmB,CAACa,UAAU;;wBAGxD3B,aAAamB,wBAAU,KAACU;sCAAgBV;;wBACxCnB,aAAaqB,2BAAa,KAAChB;4BAASa,SAAS;sCAAoBG;;wBACjErB,aAAa0B,gCACZ,KAACrB;4BAASa,SAAS;sCAAoBQ;;;;;;;AAOrD,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type { CSSCustomProperties, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH = '--vkui_internal--cell_width';\n\nconst stylesSize = {\n s: styles.sizeS,\n m: styles.sizeM,\n l: styles.sizeL,\n xl: styles.sizeXL,\n auto: styles.sizeAuto,\n};\n\nconst textAlignClassNames = {\n center: styles.textAlignCenter,\n end: styles.textAlignEnd,\n};\n\ntype HorizontalCellSizes = 's' \| 'm' \| 'l' \| 'xl' \| 'auto';\n\nexport interface HorizontalCellProps\n extends Omit<TappableOmitProps, 'size' \| 'getRootRef' \| 'title' \| 'borderRadiusMode'>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /*\n Ширина компонента.\n \n Значения `'s' \| 'm' \| 'l' \| 'xl'` определяются дизайн-системой.\n * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.\n * Пользовательскую ширину можно задать через числовое значение.\n /\n size?: LiteralUnion<HorizontalCellSizes \| undefined, number> \| undefined;\n /\n Заголовок.\n /\n title?: React.ReactNode \| undefined;\n /\n Дополнительная строка текста под `children`.\n /\n subtitle?: React.ReactNode \| undefined;\n /\n Дополнительная строка текста под `children` и `subtitle`.\n /\n extraSubtitle?: React.ReactNode \| undefined;\n /\n Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`.\n /\n textAlign?: 'start' \| 'center' \| 'end' \| undefined;\n /\n Отключает формирование отступов у крайних элементов.\n \n Актуально для использования в многострочных списках.\n /\n noPadding?: boolean \| undefined;\n /\n Позволяет передать типографический компонент, используемый для `title`.\n * По умолчанию `Caption` для `size=s`, иначе `Subhead`.\n /\n TitleComponent?: React.ElementType \| undefined;\n}\n\n/\n @see https://vkui.io/components/horizontal-cell\n */\nexport const HorizontalCell = ({\n className,\n title,\n style,\n subtitle,\n size = 's',\n children = <Avatar size={56} />,\n getRootRef,\n getRef,\n extraSubtitle,\n textAlign = size === 's' ? 'center' : 'start',\n noPadding = false,\n TitleComponent = size === 's' ? Caption : Subhead,\n ...restProps\n}: HorizontalCellProps): React.ReactNode => {\n const hasTypography =\n hasReactNode(title) \|\| hasReactNode(subtitle) \|\| hasReactNode(extraSubtitle);\n\n const customProperties: CSSCustomProperties \| undefined =\n typeof size === 'number' ? { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` } : undefined;\n\n return (\n <div\n ref={getRootRef}\n style={mergeStyle(customProperties, style)}\n className={classNames(\n styles.host,\n typeof size === 'string' && stylesSize[size],\n size !== 'auto' && styles.sized,\n typeof size === 'number' && styles.customSize,\n noPadding && styles.noPadding,\n className,\n )}\n >\n <Tappable className={styles.body} getRootRef={getRef} {...restProps}>\n {hasReactNode(children) && <div className={styles.image}>{children}</div>}\n {hasTypography && (\n <div\n className={classNames(\n styles.content,\n textAlign !== 'start' && textAlignClassNames[textAlign],\n )}\n >\n {hasReactNode(title) && <TitleComponent>{title}</TitleComponent>}\n {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}\n {hasReactNode(extraSubtitle) && (\n <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>\n )}\n </div>\n )}\n </Tappable>\n </div>\n );\n};\n"],"names":["classNames","hasReactNode","mergeStyle","Avatar","Tappable","Caption","Footnote","Subhead","CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH","stylesSize","s","m","l","xl","auto","textAlignClassNames","center","end","HorizontalCell","className","title","style","subtitle","size","children","getRootRef","getRef","extraSubtitle","textAlign","noPadding","TitleComponent","restProps","hasTypography","customProperties","undefined","div","ref"],"mappings":";AACA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AAGxD,OAAO,MAAMC,kCAAkC,8BAA8B;AAE7E,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;IACDC,EAAE;IACFC,IAAI;AACN;AAEA,MAAMC,sBAAsB;IAC1BC,MAAM;IACNC,GAAG;AACL;AA6CA;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,OAAO,GAAG,EACVC,yBAAW,KAACrB;IAAOoB,MAAM;EAAM,EAC/BE,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,YAAYL,SAAS,MAAM,WAAW,OAAO,EAC7CM,YAAY,KAAK,EACjBC,iBAAiBP,SAAS,MAAMlB,UAAUE,OAAO,EACjD,GAAGwB,WACiB;IACpB,MAAMC,gBACJ/B,aAAamB,UAAUnB,aAAaqB,aAAarB,aAAa0B;IAEhE,MAAMM,mBACJ,OAAOV,SAAS,WAAW;QAAE,CAACf,gCAAgC,EAAE,GAAGe,KAAK,EAAE,CAAC;IAAC,IAAIW;IAElF,qBACE,KAACC;QACCC,KAAKX;QACLJ,OAAOnB,WAAW+B,kBAAkBZ;QACpCF,WAAWnB,uCAET,OAAOuB,SAAS,YAAYd,UAAU,CAACc,KAAK,EAC5CA,SAAS,uCACT,OAAOA,SAAS,8CAChBM,8CACAV;kBAGF,cAAA,MAACf;YAASe,SAAS;YAAeM,YAAYC;YAAS,GAAGK,SAAS;;gBAChE9B,aAAauB,2BAAa,KAACW;oBAAIhB,SAAS;8BAAiBK;;gBACzDQ,+BACC,MAACG;oBACChB,WAAWnB,0CAET4B,cAAc,WAAWb,mBAAmB,CAACa,UAAU;;wBAGxD3B,aAAamB,wBAAU,KAACU;sCAAgBV;;wBACxCnB,aAAaqB,2BAAa,KAAChB;4BAASa,SAAS;sCAAoBG;;wBACjErB,aAAa0B,gCACZ,KAACrB;4BAASa,SAAS;sCAAoBQ;;;;;;;AAOrD,EAAE"}

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

@@ -13,22 +13,22 @@ export interface HorizontalCellShowMoreProps extends Omit<TappableOmitProps, 'ge
      *
      * Игнорируется, если `size='s'`.
      */
-    height?: LiteralUnion<ImageBaseSize, number>;
+    height?: LiteralUnion<ImageBaseSize | undefined, number> | undefined;
     /**
      * Задаёт размер компонента.
      *
      * Значение `s` применяется для `<HorizontalCell size="s"`, в остальных случаях рекомендуется `m`.
      */
-    size?: 's' | 'm';
+    size?: 's' | 'm' | undefined;
     /**
      * Предназначен для отрисовки текста.
      * По умолчанию для `size='s'` содержит текст `Все`, для `size='m'` - `Показать все`.
      * */
-    children?: SubheadProps['children'];
+    children?: SubheadProps['children'] | undefined;
     /**
      * Выравнивание по центру относительно родителя.
      */
-    centered?: boolean;
+    centered?: boolean | undefined;
 }
 /**
  * @see https://vkui.io/components/horizontal-scroll#horizontal-cell-show-more

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalCellShowMore.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAQ9E,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,MAAM,GAAG,kBAAkB,CAAC,EACzE,MAAM,CAAC,WAAW,CAAC,EACnB,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;~~IAC7C~~;;;;OAIG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;~~IACjB~~;;;SAGK;IACL,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;~~IACpC~~;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;~~CACpB~~;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,0FAUpC,2BAA2B,KAAG,KAAK,CAAC,SA4BtC,CAAC"}
1	+ {"version":3,"file":"HorizontalCellShowMore.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAQ9E,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,MAAM,GAAG,kBAAkB,CAAC,EACzE,MAAM,CAAC,WAAW,CAAC,EACnB,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,aAAa,GAAG,SAAS,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;IACrE;;;;OAIG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IAC7B;;;SAGK;IACL,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,0FAUpC,2BAA2B,KAAG,KAAK,CAAC,SA4BtC,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, type TappableOmitProps } from '../../Tappable/Tappable';\nimport { Subhead, type SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n s: styles.sizeS,\n m: styles.sizeM,\n};\n\nexport interface HorizontalCellShowMoreProps\n extends Omit<TappableOmitProps, 'getRootRef' \| 'size' \| 'borderRadiusMode'>,\n HasRef<HTMLElement>,\n HasRootRef<HTMLDivElement> {\n /*\n Задаёт высоту компонента. Должeн соответствовать размеру картинок\n * внутри соседних `HorizontalCell` компонентов.\n \n Используйте размеры, заданные дизайн-системой (смотри типы).\n \n > ⚠️ Использование кастомного размера – это пограничный кейс.\n \n Игнорируется, если `size='s'`.\n /\n height?: LiteralUnion<ImageBaseSize, number~~>;\~~n /\n Задаёт размер компонента.\n \n Значение `s` применяется для `<HorizontalCell size=\"s\"`, в остальных случаях рекомендуется `m`.\n /\n size?: 's' \| 'm';\n /\n Предназначен для отрисовки текста.\n * По умолчанию для `size='s'` содержит текст `Все`, для `size='m'` - `Показать все`.\n * /\n children?: SubheadProps['children'];\n /\n Выравнивание по центру относительно родителя.\n /\n centered?: boolean;\n}\n\n/\n @see https://vkui.io/components/horizontal-scroll#horizontal-cell-show-more\n */\nexport const HorizontalCellShowMore = ({\n className,\n style,\n getRef,\n getRootRef,\n height,\n size = 's',\n children = size === 's' ? 'Все' : 'Показать все',\n centered = false,\n ...restProps\n}: HorizontalCellShowMoreProps): React.ReactNode => {\n return (\n <div\n style={style}\n className={classNames(\n styles.host,\n centered && styles.centered,\n sizeClassNames[size],\n className,\n )}\n ref={getRootRef}\n >\n <Tappable\n style={size === 's' ? undefined : { height }}\n className={styles.body}\n getRootRef={getRef}\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n {...restProps}\n >\n <Icon28ChevronRightCircle className={styles.icon} />\n\n <Subhead className={styles.text} weight=\"2\">\n {children}\n </Subhead>\n </Tappable>\n </div>\n );\n};\n"],"names":["Icon28ChevronRightCircle","classNames","Tappable","Subhead","sizeClassNames","s","m","HorizontalCellShowMore","className","style","getRef","getRootRef","height","size","children","centered","restProps","div","ref","undefined","activeMode","hoverMode","weight"],"mappings":";AAAA,SAASA,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAgC,6BAA0B;AAC3E,SAASC,OAAO,QAA2B,sCAAmC;AAG9E,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAkCA;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChDE,WAAW,KAAK,EAChB,GAAGC,WACyB;IAC5B,qBACE,KAACC;QACCR,OAAOA;QACPD,WAAWP,+CAETc,oDACAX,cAAc,CAACS,KAAK,EACpBL;QAEFU,KAAKP;kBAEL,cAAA,MAACT;YACCO,OAAOI,SAAS,MAAMM,YAAY;gBAAEP;YAAO;YAC3CJ,SAAS;YACTG,YAAYD;YACZU,YAAW;YACXC,WAAU;YACT,GAAGL,SAAS;;8BAEb,KAAChB;oBAAyBQ,SAAS;;8BAEnC,KAACL;oBAAQK,SAAS;oBAAec,QAAO;8BACrCR;;;;;AAKX,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, type TappableOmitProps } from '../../Tappable/Tappable';\nimport { Subhead, type SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n s: styles.sizeS,\n m: styles.sizeM,\n};\n\nexport interface HorizontalCellShowMoreProps\n extends Omit<TappableOmitProps, 'getRootRef' \| 'size' \| 'borderRadiusMode'>,\n HasRef<HTMLElement>,\n HasRootRef<HTMLDivElement> {\n /*\n Задаёт высоту компонента. Должeн соответствовать размеру картинок\n * внутри соседних `HorizontalCell` компонентов.\n \n Используйте размеры, заданные дизайн-системой (смотри типы).\n \n > ⚠️ Использование кастомного размера – это пограничный кейс.\n \n Игнорируется, если `size='s'`.\n /\n height?: LiteralUnion<ImageBaseSize \| undefined, number> \| undefined;\n /\n Задаёт размер компонента.\n \n Значение `s` применяется для `<HorizontalCell size=\"s\"`, в остальных случаях рекомендуется `m`.\n /\n size?: 's' \| 'm' \| undefined;\n /\n Предназначен для отрисовки текста.\n * По умолчанию для `size='s'` содержит текст `Все`, для `size='m'` - `Показать все`.\n * /\n children?: SubheadProps['children'] \| undefined;\n /\n Выравнивание по центру относительно родителя.\n /\n centered?: boolean \| undefined;\n}\n\n/\n @see https://vkui.io/components/horizontal-scroll#horizontal-cell-show-more\n */\nexport const HorizontalCellShowMore = ({\n className,\n style,\n getRef,\n getRootRef,\n height,\n size = 's',\n children = size === 's' ? 'Все' : 'Показать все',\n centered = false,\n ...restProps\n}: HorizontalCellShowMoreProps): React.ReactNode => {\n return (\n <div\n style={style}\n className={classNames(\n styles.host,\n centered && styles.centered,\n sizeClassNames[size],\n className,\n )}\n ref={getRootRef}\n >\n <Tappable\n style={size === 's' ? undefined : { height }}\n className={styles.body}\n getRootRef={getRef}\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n {...restProps}\n >\n <Icon28ChevronRightCircle className={styles.icon} />\n\n <Subhead className={styles.text} weight=\"2\">\n {children}\n </Subhead>\n </Tappable>\n </div>\n );\n};\n"],"names":["Icon28ChevronRightCircle","classNames","Tappable","Subhead","sizeClassNames","s","m","HorizontalCellShowMore","className","style","getRef","getRootRef","height","size","children","centered","restProps","div","ref","undefined","activeMode","hoverMode","weight"],"mappings":";AAAA,SAASA,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAgC,6BAA0B;AAC3E,SAASC,OAAO,QAA2B,sCAAmC;AAG9E,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAkCA;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChDE,WAAW,KAAK,EAChB,GAAGC,WACyB;IAC5B,qBACE,KAACC;QACCR,OAAOA;QACPD,WAAWP,+CAETc,oDACAX,cAAc,CAACS,KAAK,EACpBL;QAEFU,KAAKP;kBAEL,cAAA,MAACT;YACCO,OAAOI,SAAS,MAAMM,YAAY;gBAAEP;YAAO;YAC3CJ,SAAS;YACTG,YAAYD;YACZU,YAAW;YACXC,WAAU;YACT,GAAGL,SAAS;;8BAEb,KAAChB;oBAAyBQ,SAAS;;8BAEnC,KAACL;oBAAQK,SAAS;oBAAec,QAAO;8BACrCR;;;;;AAKX,EAAE"}

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

@@ -1,64 +1,79 @@
 import * as React from 'react';
-import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
+import type { HasDataAttribute, HasRef, HTMLAttributesWithRootRef } from '../../types';
 import { type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
 export type ScrollPositionHandler = (currentPosition: number) => number;
 export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Функция для расчета величины прокрутки при нажатии на левую стрелку.
      */
-    getScrollToLeft?: ScrollPositionHandler;
+    getScrollToLeft?: ScrollPositionHandler | undefined;
     /**
      * Функция для расчета величины прокрутки при нажатии на правую стрелку.
      */
-    getScrollToRight?: ScrollPositionHandler;
+    getScrollToRight?: ScrollPositionHandler | undefined;
     /**
      * Размер стрелок.
      */
-    arrowSize?: ScrollArrowProps['size'];
+    arrowSize?: ScrollArrowProps['size'] | undefined;
     /**
      * Смещает иконки кнопок навигации по вертикали.
      */
-    arrowOffsetY?: number | string;
+    arrowOffsetY?: number | string | undefined;
+    /**
+     * Смещает иконки кнопок навигации по горизонтали.
+     */
+    arrowOffsetX?: number | string;
     /**
      * Показывать ли стрелки.
      */
-    showArrows?: boolean | 'always';
+    showArrows?: boolean | 'always' | undefined;
+    /**
+     * Свойства, которые можно прокинуть внутрь компонента:
+     * - `prevArrow`: свойства для прокидывания в стрелку "назад";
+     * - `nextArrow`: свойства для прокидывания в стрелку "вперед".
+     */
+    slotProps?: {
+        prevArrow?: Partial<ScrollArrowProps> & HasDataAttribute;
+        nextArrow?: Partial<ScrollArrowProps> & HasDataAttribute;
+    };
     /**
      * Длительность анимации скролла.
      */
-    scrollAnimationDuration?: number;
+    scrollAnimationDuration?: number | undefined;
     /**
      * Добавляет возможность прокручивать контент на любое колесо мыши.
      * По умолчанию прокручивается как любой горизонтальный контент через shift.
      */
-    scrollOnAnyWheel?: boolean;
+    scrollOnAnyWheel?: boolean | undefined;
     /**
+     * @deprecated Since 8.0.0. Вместо этого используйте `slotProps={ prevArrow: { 'data-testid': ... } }`.
      * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.
      */
-    prevButtonTestId?: string;
+    prevButtonTestId?: string | undefined;
     /**
+     * @deprecated Since 8.0.0. Вместо этого используйте `slotProps={ nextArrow: { 'data-testid': ... } }`.
      * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.
      */
-    nextButtonTestId?: string;
+    nextButtonTestId?: string | undefined;
     /**
      * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.
      */
-    ContentWrapperComponent?: React.ElementType;
+    ContentWrapperComponent?: React.ElementType | undefined;
     /**
      * `ref` для обертки над контентом, прокинутым в `children`.
      */
-    contentWrapperRef?: React.Ref<HTMLElement>;
+    contentWrapperRef?: React.Ref<HTMLElement> | undefined;
     /**
      * Специфичный `className` для обертки над контентом, прокинутым в `children`.
      */
-    contentWrapperClassName?: string;
+    contentWrapperClassName?: string | undefined;
     /**
      * Добавляет отступы для контента внутри.
      */
-    withPadding?: boolean;
+    withPadding?: boolean | undefined;
 }
 /**
  * @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, withPadding, onPointerEnter, onPointerLeave, onMouseEnter, ...restProps }: HorizontalScrollProps) => React.ReactNode;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, arrowOffsetX, scrollAnimationDuration, getRef, scrollOnAnyWheel, prevButtonTestId, nextButtonTestId, ContentWrapperComponent, contentWrapperRef, contentWrapperClassName, withPadding, onPointerEnter, onPointerLeave, onMouseEnter, slotProps, ...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;~~IACjC~~;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;~~CACvB~~;AA6GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,~~2TAqB9B~~,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;AAW/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAqBhF,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAIxE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAC;IACpD;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,GAAG,SAAS,CAAC;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC5C;;;;OAIG;IACH,SAAS,CAAC,EAAE;QACV,SAAS,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;QACzD,SAAS,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;KAC1D,CAAC;IACF;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,uBAAuB,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;IACxD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC;IACvD;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AA6GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,oVAwB9B,qBAAqB,KAAG,KAAK,CAAC,SAoLhC,CAAC"}

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

@@ -6,12 +6,15 @@ import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useFocusVisible } from "../../hooks/useFocusVisible.js";
 import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
+import { useMergeProps } from "../../hooks/useMergeProps.js";
 import { easeInOutSine } from "../../lib/fx.js";
 import { mergeCalls } from "../../lib/mergeCalls.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
+import { warnOnce } from "../../lib/warnOnce.js";
 import { useHover } from "../Clickable/useState.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { ScrollArrow } from "../ScrollArrow/ScrollArrow.js";
+const warn = warnOnce('HorizontalScroll');
 /**
  * Timing method.
  */ function now() {
@@ -85,8 +88,11 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
 }
 /**
  * @see https://vkui.io/components/horizontal-scroll
- */ export const HorizontalScroll = ({ children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId, // ContentWrapper
-ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, withPadding, onPointerEnter, onPointerLeave, onMouseEnter, ...restProps })=>{
+ */ export const HorizontalScroll = ({ children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, arrowOffsetX, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId, // ContentWrapper
+ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, withPadding, onPointerEnter, onPointerLeave, onMouseEnter, slotProps, ...restProps })=>{
+    /* istanbul ignore if: не проверяем в тестах */ if (process.env.NODE_ENV === 'development' && (prevButtonTestId || nextButtonTestId)) {
+        warn("Свойства `prevButtonTestId` и `nextButtonTestId` устаревшие, используйте `slotProps={ prevArrow: { 'data-testid': ... }, nextArrow: { 'data-testid': ... } }`");
+    }
     const [canScrollStart, setCanScrollStart] = React.useState(false);
     const [canScrollEnd, setCanScrollEnd] = React.useState(false);
     const { focusVisible, ...focusEvents } = useFocusVisible();
@@ -191,6 +197,14 @@ ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, wit
         onPointerEnter,
         onPointerLeave
     });
+    const prevArrowProps = useMergeProps({
+        className: classNames("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowLeft"),
+        onClick: scrollToStart
+    }, slotProps?.prevArrow);
+    const nextArrowProps = useMergeProps({
+        className: classNames("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowRight"),
+        onClick: scrollToEnd
+    }, slotProps?.nextArrow);
     return /*#__PURE__*/ _jsxs(RootComponent, {
         ...restProps,
         ...handlers,
@@ -202,21 +216,21 @@ ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, wit
                 "data-testid": prevButtonTestId,
                 size: arrowSize,
                 offsetY: arrowOffsetY,
+                offsetX: arrowOffsetX,
                 direction: "left",
                 "aria-hidden": true,
                 tabIndex: -1,
-                className: classNames("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowLeft"),
-                onClick: scrollToStart
+                ...prevArrowProps
             }),
             showArrows && canScrollEnd && /*#__PURE__*/ _jsx(ScrollArrow, {
                 "data-testid": nextButtonTestId,
                 size: arrowSize,
                 offsetY: arrowOffsetY,
+                offsetX: arrowOffsetX,
                 direction: "right",
                 "aria-hidden": true,
                 tabIndex: -1,
-                className: classNames("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowRight"),
-                onClick: scrollToEnd
+                ...nextArrowProps
             }),
             /*#__PURE__*/ _jsx("div", {
                 className: classNames("vkuiHorizontalScroll__in", focusVisibleClassNames),