npm - @vkontakte/vkui - Versions diffs - 5.2.0 → 5.2.2 - Mend

@vkontakte/vkui 5.2.0 → 5.2.2

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

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

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "direction", "onClick", "className"];
 import * as React from 'react';
-import { Icon24Chevron, Icon24ChevronCompactLeft, Icon16Chevron, Icon16ChevronLeft } from '@vkontakte/icons';
+import { Icon16Chevron, Icon16ChevronLeft, Icon24Chevron, Icon24ChevronCompactLeft } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { Tappable } from '../Tappable/Tappable';
 import "./HorizontalScrollArrow.module.css";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalScrollArrow.js","names":["React","~~Icon24Chevron~~","~~Icon24ChevronCompactLeft~~","~~Icon16Chevron~~","~~Icon16ChevronLeft~~","classNames","Tappable","HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","styles"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ~~Icon24Chevron~~,\n ~~Icon24ChevronCompactLeft~~,\n ~~Icon16Chevron~~,\n ~~Icon16ChevronLeft~~,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n direction: 'left' \| 'right';\n size?: 'm' \| 'l';\n onClick(event: React.MouseEvent): void;\n className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n size = 'l',\n direction,\n onClick,\n className,\n ...restProps\n}: HorizontalScrollArrowProps) => {\n let ArrowIcon: React.ComponentType<unknown>;\n\n if (size === 'm') {\n ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n } else {\n ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n }\n\n return (\n <Tappable\n {...restProps}\n Component=\"button\"\n hasHover={false}\n hasActive={false}\n className={classNames(\n styles['HorizontalScrollArrow'],\n styles[`HorizontalScrollArrow--size-${size}`],\n styles[`HorizontalScrollArrow--direction-${direction}`],\n className,\n )}\n onClick={onClick}\n >\n <span className={styles['HorizontalScrollArrow__icon']}>\n <ArrowIcon />\n </span>\n </Tappable>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,aAAa,EACbC,~~wBAAwB~~,~~EACxBC~~,aAAa,EACbC,~~iBAAiB~~,~~QACZ~~,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAAC;AAUhD,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OAMA;EAAA,qBALhCC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,SAAuC;EAE3C,IAAIL,IAAI,KAAK,GAAG,EAAE;IAChBK,SAAS,GAAGJ,SAAS,KAAK,MAAM,~~GAAGL~~,iBAAiB,GAAGD,aAAa;EACtE,CAAC,MAAM;~~IACLU~~,SAAS,GAAGJ,SAAS,KAAK,MAAM,~~GAAGP~~,wBAAwB,GAAGD,aAAa;EAC7E;EAEA,oBACE,oBAAC,QAAQ,~~eACHW~~,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,SAAS,EAAEP,UAAU,8BAEnBS,MAAM,uCAAgCN,IAAI,EAAG,EAC7CM,MAAM,4CAAqCL,SAAS,EAAG,EACvDE,SAAS,CACT;IACF,OAAO,EAAED;EAAQ,iBAEjB;IAAM,SAAS;EAAwC,gBACrD,oBAAC,SAAS,OAAG,CACR,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"HorizontalScrollArrow.js","names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","Tappable","HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","styles"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon16Chevron,\n Icon16ChevronLeft,\n Icon24Chevron,\n Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n direction: 'left' \| 'right';\n size?: 'm' \| 'l';\n onClick(event: React.MouseEvent): void;\n className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n size = 'l',\n direction,\n onClick,\n className,\n ...restProps\n}: HorizontalScrollArrowProps) => {\n let ArrowIcon: React.ComponentType<unknown>;\n\n if (size === 'm') {\n ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n } else {\n ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n }\n\n return (\n <Tappable\n {...restProps}\n Component=\"button\"\n hasHover={false}\n hasActive={false}\n className={classNames(\n styles['HorizontalScrollArrow'],\n styles[`HorizontalScrollArrow--size-${size}`],\n styles[`HorizontalScrollArrow--direction-${direction}`],\n className,\n )}\n onClick={onClick}\n >\n <span className={styles['HorizontalScrollArrow__icon']}>\n <ArrowIcon />\n </span>\n </Tappable>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAAC;AAUhD,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OAMA;EAAA,qBALhCC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,SAAuC;EAE3C,IAAIL,IAAI,KAAK,GAAG,EAAE;IAChBK,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGP,iBAAiB,GAAGD,aAAa;EACtE,CAAC,MAAM;IACLY,SAAS,GAAGJ,SAAS,KAAK,MAAM,GAAGL,wBAAwB,GAAGD,aAAa;EAC7E;EAEA,oBACE,oBAAC,QAAQ,eACHS,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,SAAS,EAAEP,UAAU,8BAEnBS,MAAM,uCAAgCN,IAAI,EAAG,EAC7CM,MAAM,4CAAqCL,SAAS,EAAG,EACvDE,SAAS,CACT;IACF,OAAO,EAAED;EAAQ,iBAEjB;IAAM,SAAS;EAAwC,gBACrD,oBAAC,SAAS,OAAG,CACR,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cssm/components/HoverPopper/HoverPopper.js CHANGED Viewed

@@ -3,11 +3,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["getRef", "content", "children", "onShownChange", "shown", "showDelay", "hideDelay"];
 import * as React from 'react';
-import { Popper } from '../Popper/Popper';
 import { useEventListener } from '../../hooks/useEventListener';
-import { useTimeout } from '../../hooks/useTimeout';
 import { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';
+import { useTimeout } from '../../hooks/useTimeout';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { Popper } from '../Popper/Popper';
 export var HoverPopper = function HoverPopper(_ref) {
   var getRef = _ref.getRef,
     content = _ref.content,

package/dist/cssm/components/HoverPopper/HoverPopper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HoverPopper.js","names":["React","~~Popper~~","~~useEventListener~~","useTimeout","~~usePatchChildrenRef~~","~~useIsomorphicLayoutEffect~~","HoverPopper","getRef","content","children","onShownChange","_shown","shown","showDelay","hideDelay","restProps","useState","computedShown","setComputedShown","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add"],"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~Popper,~~ ~~PopperCommonProps~~ } from '~~../Popper~~/~~Popper~~';\nimport { ~~useEventListener~~ } from '../../hooks/~~useEventListener~~';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { ~~usePatchChildrenRef~~ } from '../../~~hooks~~/~~usePatchChildrenRef~~';\nimport { ~~useIsomorphicLayoutEffect~~ } from '~~../../lib~~/~~useIsomorphicLayoutEffect~~';\n\nexport interface HoverPopperProps extends PopperCommonProps {\n /*\n Содержимое тултипа\n /\n content?: React.ReactNode;\n /\n Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n /\n shown?: boolean;\n /\n Вызывается при каждом изменении видимости тултипа\n /\n onShownChange?: (shown: boolean) => void;\n /\n Количество миллисекунд, после которых произойдет показ дропдауна\n /\n showDelay?: number;\n /\n Количество миллисекунд, после которых произойдет скрытие дропдауна\n /\n hideDelay?: number;\n /\n Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n */\n children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n getRef,\n content,\n children,\n onShownChange,\n shown: _shown,\n showDelay = 150,\n hideDelay = 150,\n ...restProps\n}: HoverPopperProps) => {\n const [computedShown, setComputedShown] = React.useState(_shown \|\| false);\n\n const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n const setShown = (value: boolean) => {\n if (typeof _shown !== 'boolean') {\n setComputedShown(value);\n }\n typeof onShownChange === 'function' && onShownChange(value);\n };\n\n const showTimeout = useTimeout(() => {\n setShown(true);\n }, showDelay);\n\n const hideTimeout = useTimeout(() => {\n setShown(false);\n }, hideDelay);\n\n const [childRef, child] = usePatchChildrenRef(children);\n\n const onTargetEnter = () => {\n hideTimeout.clear();\n showTimeout.set();\n };\n\n const onTargetLeave = () => {\n showTimeout.clear();\n hideTimeout.set();\n };\n\n const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n useIsomorphicLayoutEffect(() => {\n if (childRef.current) {\n targetEnterListener.add(childRef.current);\n targetLeaveListener.add(childRef.current);\n }\n }, []);\n\n return (\n <React.Fragment>\n {child}\n {shown && (\n <Popper\n {...restProps}\n onMouseOver={hideTimeout.clear}\n onMouseOut={onTargetLeave}\n getRef={getRef}\n targetRef={childRef}\n >\n {content}\n </Popper>\n )}\n </React.Fragment>\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,~~MAAM,QAA2B,kBAAkB;AAC5D,SAASC,~~gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,~~UAAU~~,QAAQ,~~wBAAwB~~;~~AACnD~~,SAASC,~~mBAAmB~~,QAAQ,~~iCAAiC~~;~~AACrE~~,SAASC,yBAAyB,QAAQ,qCAAqC;~~AA6B~~/E,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACNC,MAAM,QAAbC,KAAK;IAAA,sBACLC,SAAS;IAATA,SAAS,+BAAG,GAAG;IAAA,sBACfC,SAAS;IAATA,SAAS,+BAAG,GAAG;IACZC,SAAS;EAEZ,sBAA0Cf,KAAK,CAACgB,QAAQ,CAACL,MAAM,IAAI,KAAK,CAAC;IAAA;IAAlEM,aAAa;IAAEC,gBAAgB;EAEtC,IAAMN,KAAK,GAAG,OAAOD,MAAM,KAAK,SAAS,GAAGA,MAAM,GAAGM,aAAa;EAElE,IAAME,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAc,EAAK;IACnC,IAAI,OAAOT,MAAM,KAAK,SAAS,EAAE;MAC/BO,gBAAgB,CAACE,KAAK,CAAC;IACzB;IACA,OAAOV,aAAa,KAAK,UAAU,IAAIA,aAAa,CAACU,KAAK,CAAC;EAC7D,CAAC;EAED,IAAMC,WAAW,GAAGlB,UAAU,CAAC,YAAM;IACnCgB,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC,EAAEN,SAAS,CAAC;EAEb,IAAMS,WAAW,GAAGnB,UAAU,CAAC,YAAM;IACnCgB,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC,EAAEL,SAAS,CAAC;EAEb,~~2BAA0BV~~,mBAAmB,~~CAACK~~,QAAQ,CAAC;IAAA;IAAhDc,QAAQ;IAAEC,KAAK;EAEtB,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BH,WAAW,CAACI,KAAK,EAAE;IACnBL,WAAW,CAACM,GAAG,EAAE;EACnB,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BP,WAAW,CAACK,KAAK,EAAE;IACnBJ,WAAW,CAACK,GAAG,EAAE;EACnB,CAAC;EAED,IAAME,mBAAmB,~~GAAG3B~~,gBAAgB,CAAC,cAAc,~~EAAEuB~~,aAAa,CAAC;EAC3E,IAAMK,mBAAmB,~~GAAG5B~~,gBAAgB,CAAC,cAAc,~~EAAE0B~~,aAAa,CAAC;~~EAE3EvB~~,yBAAyB,CAAC,YAAM;IAC9B,~~IAAIkB~~,QAAQ,CAACQ,OAAO,EAAE;MACpBF,mBAAmB,CAACG,GAAG,CAACT,QAAQ,CAACQ,OAAO,CAAC;MACzCD,mBAAmB,CAACE,GAAG,CAACT,QAAQ,CAACQ,OAAO,CAAC;IAC3C;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZP,KAAK,EACLZ,KAAK,iBACJ,oBAAC,MAAM,eACDG,SAAS;IACb,WAAW,EAAEO,WAAW,CAACI,KAAM;IAC/B,UAAU,EAAEE,aAAc;IAC1B,MAAM,EAAErB,MAAO;IACf,SAAS,EAAEgB;EAAS,IAEnBf,OAAO,CAEX,CACc;AAErB,CAAC"}
1	+ {"version":3,"file":"HoverPopper.js","names":["React","useEventListener","usePatchChildrenRef","useTimeout","useIsomorphicLayoutEffect","Popper","HoverPopper","getRef","content","children","onShownChange","_shown","shown","showDelay","hideDelay","restProps","useState","computedShown","setComputedShown","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add"],"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends PopperCommonProps {\n /*\n Содержимое тултипа\n /\n content?: React.ReactNode;\n /\n Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n /\n shown?: boolean;\n /\n Вызывается при каждом изменении видимости тултипа\n /\n onShownChange?: (shown: boolean) => void;\n /\n Количество миллисекунд, после которых произойдет показ дропдауна\n /\n showDelay?: number;\n /\n Количество миллисекунд, после которых произойдет скрытие дропдауна\n /\n hideDelay?: number;\n /\n Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n */\n children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n getRef,\n content,\n children,\n onShownChange,\n shown: _shown,\n showDelay = 150,\n hideDelay = 150,\n ...restProps\n}: HoverPopperProps) => {\n const [computedShown, setComputedShown] = React.useState(_shown \|\| false);\n\n const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n const setShown = (value: boolean) => {\n if (typeof _shown !== 'boolean') {\n setComputedShown(value);\n }\n typeof onShownChange === 'function' && onShownChange(value);\n };\n\n const showTimeout = useTimeout(() => {\n setShown(true);\n }, showDelay);\n\n const hideTimeout = useTimeout(() => {\n setShown(false);\n }, hideDelay);\n\n const [childRef, child] = usePatchChildrenRef(children);\n\n const onTargetEnter = () => {\n hideTimeout.clear();\n showTimeout.set();\n };\n\n const onTargetLeave = () => {\n showTimeout.clear();\n hideTimeout.set();\n };\n\n const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n useIsomorphicLayoutEffect(() => {\n if (childRef.current) {\n targetEnterListener.add(childRef.current);\n targetLeaveListener.add(childRef.current);\n }\n }, []);\n\n return (\n <React.Fragment>\n {child}\n {shown && (\n <Popper\n {...restProps}\n onMouseOver={hideTimeout.clear}\n onMouseOut={onTargetLeave}\n getRef={getRef}\n targetRef={childRef}\n >\n {content}\n </Popper>\n )}\n </React.Fragment>\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,yBAAyB,QAAQ,qCAAqC;AAC/E,SAASC,MAAM,QAA2B,kBAAkB;AA6B5D,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACNC,MAAM,QAAbC,KAAK;IAAA,sBACLC,SAAS;IAATA,SAAS,+BAAG,GAAG;IAAA,sBACfC,SAAS;IAATA,SAAS,+BAAG,GAAG;IACZC,SAAS;EAEZ,sBAA0Cf,KAAK,CAACgB,QAAQ,CAACL,MAAM,IAAI,KAAK,CAAC;IAAA;IAAlEM,aAAa;IAAEC,gBAAgB;EAEtC,IAAMN,KAAK,GAAG,OAAOD,MAAM,KAAK,SAAS,GAAGA,MAAM,GAAGM,aAAa;EAElE,IAAME,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAc,EAAK;IACnC,IAAI,OAAOT,MAAM,KAAK,SAAS,EAAE;MAC/BO,gBAAgB,CAACE,KAAK,CAAC;IACzB;IACA,OAAOV,aAAa,KAAK,UAAU,IAAIA,aAAa,CAACU,KAAK,CAAC;EAC7D,CAAC;EAED,IAAMC,WAAW,GAAGlB,UAAU,CAAC,YAAM;IACnCgB,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC,EAAEN,SAAS,CAAC;EAEb,IAAMS,WAAW,GAAGnB,UAAU,CAAC,YAAM;IACnCgB,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC,EAAEL,SAAS,CAAC;EAEb,2BAA0BZ,mBAAmB,CAACO,QAAQ,CAAC;IAAA;IAAhDc,QAAQ;IAAEC,KAAK;EAEtB,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BH,WAAW,CAACI,KAAK,EAAE;IACnBL,WAAW,CAACM,GAAG,EAAE;EACnB,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BP,WAAW,CAACK,KAAK,EAAE;IACnBJ,WAAW,CAACK,GAAG,EAAE;EACnB,CAAC;EAED,IAAME,mBAAmB,GAAG5B,gBAAgB,CAAC,cAAc,EAAEwB,aAAa,CAAC;EAC3E,IAAMK,mBAAmB,GAAG7B,gBAAgB,CAAC,cAAc,EAAE2B,aAAa,CAAC;EAE3ExB,yBAAyB,CAAC,YAAM;IAC9B,IAAImB,QAAQ,CAACQ,OAAO,EAAE;MACpBF,mBAAmB,CAACG,GAAG,CAACT,QAAQ,CAACQ,OAAO,CAAC;MACzCD,mBAAmB,CAACE,GAAG,CAACT,QAAQ,CAACQ,OAAO,CAAC;IAC3C;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZP,KAAK,EACLZ,KAAK,iBACJ,oBAAC,MAAM,eACDG,SAAS;IACb,WAAW,EAAEO,WAAW,CAACI,KAAM;IAC/B,UAAU,EAAEE,aAAc;IAC1B,MAAM,EAAErB,MAAO;IACf,SAAS,EAAEgB;EAAS,IAEnBf,OAAO,CAEX,CACc;AAErB,CAAC"}

package/dist/cssm/components/IconButton/IconButton.d.ts CHANGED Viewed

@@ -6,4 +6,4 @@ export interface IconButtonProps extends TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
-export declare const IconButton: ({ children, Component, className, ...restProps }: IconButtonProps) => JSX.Element;
+export declare const IconButton: ({ children, className, ...restProps }: IconButtonProps) => JSX.Element;

package/dist/cssm/components/IconButton/IconButton.js CHANGED Viewed

@@ -1,15 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "Component", "className"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "className"];
 import * as React from 'react';
-import { Tappable } from '../Tappable/Tappable';
 import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';
+import { Tappable } from '../Tappable/Tappable';
 import "./IconButton.module.css";
+var sizeYClassNames = _defineProperty({
+  none: "vkuiIconButton--sizeY-none"
+}, SizeType.COMPACT, "vkuiIconButton--sizeY-compact");
 var warn = warnOnce('IconButton');
 /**
@@ -17,13 +21,12 @@ var warn = warnOnce('IconButton');
  */
 export var IconButton = function IconButton(_ref) {
   var children = _ref.children,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'button' : _ref$Component,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   if (process.env.NODE_ENV === 'development') {
     var isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];
     if (!isAccessible) {
@@ -32,10 +35,10 @@ export var IconButton = function IconButton(_ref) {
   }
   return /*#__PURE__*/React.createElement(Tappable, _extends({
     activeEffectDelay: 200,
-    activeMode: "background"
+    activeMode: "background",
+    Component: restProps.href ? 'a' : 'button'
   }, restProps, {
-    Component: restProps.href ? 'a' : Component,
-    className: classNames("vkuiIconButton", getSizeYClassName("vkuiIconButton", sizeY), platform === Platform.IOS && "vkuiIconButton--ios", className)
+    className: classNames("vkuiIconButton", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], platform === Platform.IOS && "vkuiIconButton--ios", className)
   }), children);
 };
 //# sourceMappingURL=IconButton.js.map

package/dist/cssm/components/IconButton/IconButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.js","names":["React","~~Tappable~~","~~classNames~~","usePlatform","Platform","~~getSizeYClassName~~","~~useAdaptivity~~","~~COMMON_WARNINGS~~","~~warnOnce~~","warn","IconButton","children","~~Component","~~className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","IOS"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~TappableProps,~~ ~~Tappable~~ } from '~~../Tappable~~/~~Tappable~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ~~Platform~~ } from '../../lib/~~platform~~';\nimport { ~~getSizeYClassName~~ } from '../../~~helpers~~/~~getSizeYClassName~~';\nimport { ~~useAdaptivity~~ } from '../../~~hooks~~/~~useAdaptivity~~';\nimport { ~~COMMON_WARNINGS~~, ~~warnOnce~~ } from '~~../../lib~~/~~warnOnce~~';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends TappableProps {\n children?: React.ReactNode;\n}\n\nconst warn = warnOnce('IconButton');\n\n/*\n @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({\n children~~,\n Component~~ = ~~'button',\n className,\n~~ ...restProps\n}: IconButtonProps) => {\n const platform = usePlatform();\n const { sizeY } = useAdaptivity();\n\n if (process.env.NODE_ENV === 'development') {\n const isAccessible = restProps['aria-label'] \|\| restProps['aria-labelledby'];\n\n if (!isAccessible) {\n warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n }\n }\n\n return (\n <Tappable\n activeEffectDelay={200}\n activeMode=\"background\"\n ~~{...restProps}\n~~ Component={restProps.href ? 'a' : ~~Component~~}\n className={classNames(\n styles['IconButton'],\n ~~getSizeYClassName(styles~~[~~'IconButton'~~]~~, sizeY)~~,\n platform === Platform.IOS && styles['IconButton--ios'],\n className,\n )}\n >\n {children}\n </Tappable>\n );\n};\n"],"mappings":"~~;;;~~AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,~~SAAwBC~~,~~QAAQ~~,QAAQ,~~sBAAsB~~;~~AAC9D~~,SAASC,~~UAAU~~,QAAQ,~~iBAAiB~~;~~AAC5C~~,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,~~oBAAoB~~;~~AAC7C~~,SAASC,~~iBAAiB,~~QAAQ,~~iCAAiC;AACnE,SAASC,aAAa,~~QAAQ,~~2BAA2B~~;~~AACzD~~,SAASC,eAAe,EAAEC,QAAQ,QAAQ,oBAAoB;AAAC;~~AAO~~/D,IAAMC,IAAI,~~GAAGD~~,QAAQ,CAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACA,OAAO,~~IAAME~~,UAAU,GAAG,SAAbA,UAAU,~~OAKA~~;EAAA,~~IAJrBC~~,QAAQ,QAARA,QAAQ;~~IAAA~~,~~sBACRC,~~SAAS~~;IAATA~~,~~SAAS,+BAAG,QAAQ;IACpBC,SAAS,~~QAATA,SAAS;~~IACNC~~,SAAS;~~EAEZ~~,IAAMC,QAAQ,~~GAAGZ~~,WAAW,EAAE;EAC9B,~~qBAAkBG~~,aAAa,EAAE;~~IAAzBU~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EAEb~~,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAGN,SAAS,CAAC,YAAY,CAAC,IAAIA,SAAS,CAAC,iBAAiB,CAAC;IAE5E,IAAI,CAACM,YAAY,EAAE;~~MACjBX~~,IAAI,~~CAACF~~,eAAe,~~CAACc~~,IAAI,CAACP,SAAS,CAACQ,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACnF;EACF;EAEA,oBACE,oBAAC,QAAQ;IACP,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAC~~;EAAY~~,~~GACnBR,SAAS~~;~~IACb~~,SAAS,~~EAAEA~~,SAAS,CAACQ,IAAI,GAAG,GAAG,~~GAAGV~~,~~SAAU~~;~~IAC5C~~,SAAS,~~EAAEV~~,UAAU,~~mBAEnBG~~,~~iBAAiB~~,~~mBAAuBW~~,KAAK,CAAC,~~EAC9CD~~,QAAQ,~~KAAKX~~,QAAQ,~~CAACmB~~,GAAG,yBAA6B,~~EACtDV~~,SAAS;EACT,~~IAEDF~~,QAAQ,CACA;AAEf,CAAC"}
1	+ {"version":3,"file":"IconButton.js","names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","COMMON_WARNINGS","warnOnce","Tappable","sizeYClassNames","none","COMPACT","warn","IconButton","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","REGULAR","IOS"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n none: styles['IconButton--sizeY-none'],\n [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps {\n children?: React.ReactNode;\n}\n\nconst warn = warnOnce('IconButton');\n\n/*\n @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n\n if (process.env.NODE_ENV === 'development') {\n const isAccessible = restProps['aria-label'] \|\| restProps['aria-labelledby'];\n\n if (!isAccessible) {\n warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n }\n }\n\n return (\n <Tappable\n activeEffectDelay={200}\n activeMode=\"background\"\n Component={restProps.href ? 'a' : 'button'}\n {...restProps}\n className={classNames(\n styles['IconButton'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n platform === Platform.IOS && styles['IconButton--ios'],\n className,\n )}\n >\n {children}\n </Tappable>\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,oBAAoB;AAC9D,SAASC,QAAQ,QAAuB,sBAAsB;AAAC;AAG/D,IAAMC,eAAe;EACnBC,IAAI;AAAkC,GACrCN,QAAQ,CAACO,OAAO,kCAClB;AAMD,IAAMC,IAAI,GAAGL,QAAQ,CAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACA,OAAO,IAAMM,UAAU,GAAG,SAAbA,UAAU,OAA+D;EAAA,IAAzDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC5D,IAAMC,QAAQ,GAAGd,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCgB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAGN,SAAS,CAAC,YAAY,CAAC,IAAIA,SAAS,CAAC,iBAAiB,CAAC;IAE5E,IAAI,CAACM,YAAY,EAAE;MACjBV,IAAI,CAACN,eAAe,CAACiB,IAAI,CAACP,SAAS,CAACQ,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACnF;EACF;EAEA,oBACE,oBAAC,QAAQ;IACP,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAC,YAAY;IACvB,SAAS,EAAER,SAAS,CAACQ,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCR,SAAS;IACb,SAAS,EAAEf,UAAU,mBAEnBiB,KAAK,KAAKd,QAAQ,CAACqB,OAAO,IAAIhB,eAAe,CAACS,KAAK,CAAC,EACpDD,QAAQ,KAAKZ,QAAQ,CAACqB,GAAG,yBAA6B,EACtDX,SAAS;EACT,IAEDD,QAAQ,CACA;AAEf,CAAC"}

package/dist/cssm/components/IconButton/IconButton.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiIconButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:9999px;box-shadow:none;color:currentColor;display:block;height:48px;margin:0;padding:0;position:relative}.vkuiIconButton--sizeY-compact{height:44px}.vkuiIconButton[disabled]{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiIconButton--ios{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular)}.vkuiIconButton .vkuiIcon--16{padding:16px}.vkuiIconButton .vkuiIcon--16.vkuiIcon--w-8{padding:16px 14px}.vkuiIconButton--sizeY-compact .vkuiIcon--16,.vkuiIconButton--sizeY-compact .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton .vkuiIcon--24{padding:12px}.vkuiIconButton .vkuiIcon--28,.vkuiIconButton--sizeY-compact .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-compact .vkuiIcon--28{padding:8px}@media (pointer:fine) and (min-width:768px)~~,not (min-height:415px)~~{.vkuiIconButton--sizeY-none{height:44px}.vkuiIconButton--sizeY-none .vkuiIcon--16,.vkuiIconButton--sizeY-none .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton--sizeY-none .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-none .vkuiIcon--28{padding:8px}}.vkuiFormField__after .vkuiIconButton,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton{align-content:center;align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:44px;height:var(--vkui--size_field_height--regular);justify-content:center;width:44px;width:var(--vkui--size_field_height--regular)}.vkuiFormField__after .vkuiIconButton .vkuiIcon.vkuiIcon.vkuiIcon{padding:0}.vkuiFormField__after .vkuiIconButton--sizeY-compact{width:36px;width:var(--vkui--size_field_height--compact)}.vkuiFormField__after .vkuiIconButton--sizeY-compact,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact{height:36px;height:var(--vkui--size_field_height--compact)}@media (pointer:fine) and (min-width:768px)~~,not (min-height:415px)~~{.vkuiFormField__after .vkuiIconButton--sizeY-none{width:36px;width:var(--vkui--size_field_height--compact)}.vkuiFormField__after .vkuiIconButton--sizeY-none,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-none,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-none{height:36px;height:var(--vkui--size_field_height--compact)}}
1	+ .vkuiIconButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:9999px;box-shadow:none;color:currentColor;display:block;height:48px;margin:0;padding:0;position:relative}.vkuiIconButton--sizeY-compact{height:44px}.vkuiIconButton[disabled]{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiIconButton--ios{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular)}.vkuiIconButton .vkuiIcon--16{padding:16px}.vkuiIconButton .vkuiIcon--16.vkuiIcon--w-8{padding:16px 14px}.vkuiIconButton--sizeY-compact .vkuiIcon--16,.vkuiIconButton--sizeY-compact .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton .vkuiIcon--24{padding:12px}.vkuiIconButton .vkuiIcon--28,.vkuiIconButton--sizeY-compact .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-compact .vkuiIcon--28{padding:8px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiIconButton--sizeY-none{height:44px}.vkuiIconButton--sizeY-none .vkuiIcon--16,.vkuiIconButton--sizeY-none .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton--sizeY-none .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-none .vkuiIcon--28{padding:8px}}.vkuiFormField__after .vkuiIconButton,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton{align-content:center;align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:44px;height:var(--vkui--size_field_height--regular);justify-content:center;width:44px;width:var(--vkui--size_field_height--regular)}.vkuiFormField__after .vkuiIconButton .vkuiIcon.vkuiIcon.vkuiIcon{padding:0}.vkuiFormField__after .vkuiIconButton--sizeY-compact{width:36px;width:var(--vkui--size_field_height--compact)}.vkuiFormField__after .vkuiIconButton--sizeY-compact,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-compact{height:36px;height:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormField__after .vkuiIconButton--sizeY-none{width:36px;width:var(--vkui--size_field_height--compact)}.vkuiFormField__after .vkuiIconButton--sizeY-none,.vkuiFormItem--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-none,.vkuiFormLayoutGroup--removable .vkuiRemovable__content>.vkuiIconButton--sizeY-none{height:36px;height:var(--vkui--size_field_height--compact)}}

package/dist/cssm/components/Image/Image.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ImageBaseProps, type ImageBaseOverlayProps } from '../ImageBase/ImageBase';
+import { type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { type ImageBadgeProps } from './ImageBadge/ImageBadge';
 export type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };
 export declare const IMAGE_DEFAULT_SIZE = 48;

package/dist/cssm/components/Image/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","names":["React","classNames","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","Badge","Overlay"],"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~type ImageBaseProps~~, type ImageBaseOverlayProps, ~~ImageBase~~ } from '../ImageBase/ImageBase';\nimport { type ImageBadgeProps, ~~ImageBadge~~ } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n /*\n Размер закругления.\n /\n borderRadius?: 's' \| 'l' \| 'm';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n size = IMAGE_DEFAULT_SIZE,\n borderRadius: borderRadiusProp = 'm',\n style,\n className,\n ...restProps\n}: ImageProps) => {\n let borderRadius: number;\n\n switch (borderRadiusProp) {\n case 's': {\n if (size <= 32) {\n borderRadius = 2;\n } else if (size <= 56) {\n borderRadius = 3;\n }\n borderRadius = 4;\n break;\n }\n case 'm': {\n if (size <= 32) {\n borderRadius = 3;\n } else if (size <= 48) {\n borderRadius = 4;\n } else if (size <= 72) {\n borderRadius = 6;\n } else if (size <= 80) {\n borderRadius = 8;\n }\n borderRadius = 10;\n break;\n }\n case 'l': {\n if (size <= 16) {\n borderRadius = 4;\n } else if (size <= 20) {\n borderRadius = 5;\n } else if (size <= 32) {\n borderRadius = 6;\n } else if (size <= 40) {\n borderRadius = 8;\n } else if (size <= 48) {\n borderRadius = 10;\n } else if (size <= 56) {\n borderRadius = 12;\n } else if (size <= 64) {\n borderRadius = 14;\n }\n borderRadius = 16;\n }\n }\n\n return (\n <ImageBase\n {...restProps}\n size={size}\n style={{ ...style, borderRadius }}\n className={classNames(styles['Image'], className)}\n />\n );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,~~SAA0DC~~,SAAS,~~QAAQ~~,wBAAwB;AACnG,~~SAA+BC~~,UAAU,~~QAAQ~~,yBAAyB;AAAC;AAK3E,OAAO,IAAMC,kBAAkB,GAAG,EAAE;AASpC;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAMA;EAAA,qBALhBC,IAAI;IAAJA,IAAI,0BAAGF,kBAAkB;IAAA,yBACzBG,YAAY;IAAEC,gBAAgB,kCAAG,GAAG;IACpCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIJ,YAAoB;EAExB,QAAQC,gBAAgB;IACtB,KAAK,GAAG;MAAE;QACR,IAAIF,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,CAAC;QAChB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,EAAE;QACjB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB;QACAA,YAAY,GAAG,EAAE;MACnB;EAAC;EAGH,oBACE,oBAAC,SAAS,eACJI,SAAS;IACb,IAAI,EAAEL,IAAK;IACX,KAAK,kCAAOG,KAAK;MAAEF,YAAY,EAAZA;IAAY,EAAG;IAClC,SAAS,EAAEN,UAAU,cAAkBS,SAAS;EAAE,GAClD;AAEN,CAAC;AAEDL,KAAK,CAACO,KAAK,GAAGT,UAAU;AAExBE,KAAK,CAACQ,OAAO,GAAGX,SAAS,CAACW,OAAO"}
1	+ {"version":3,"file":"Image.js","names":["React","classNames","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","Badge","Overlay"],"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n /*\n Размер закругления.\n /\n borderRadius?: 's' \| 'l' \| 'm';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n size = IMAGE_DEFAULT_SIZE,\n borderRadius: borderRadiusProp = 'm',\n style,\n className,\n ...restProps\n}: ImageProps) => {\n let borderRadius: number;\n\n switch (borderRadiusProp) {\n case 's': {\n if (size <= 32) {\n borderRadius = 2;\n } else if (size <= 56) {\n borderRadius = 3;\n }\n borderRadius = 4;\n break;\n }\n case 'm': {\n if (size <= 32) {\n borderRadius = 3;\n } else if (size <= 48) {\n borderRadius = 4;\n } else if (size <= 72) {\n borderRadius = 6;\n } else if (size <= 80) {\n borderRadius = 8;\n }\n borderRadius = 10;\n break;\n }\n case 'l': {\n if (size <= 16) {\n borderRadius = 4;\n } else if (size <= 20) {\n borderRadius = 5;\n } else if (size <= 32) {\n borderRadius = 6;\n } else if (size <= 40) {\n borderRadius = 8;\n } else if (size <= 48) {\n borderRadius = 10;\n } else if (size <= 56) {\n borderRadius = 12;\n } else if (size <= 64) {\n borderRadius = 14;\n }\n borderRadius = 16;\n }\n }\n\n return (\n <ImageBase\n {...restProps}\n size={size}\n style={{ ...style, borderRadius }}\n className={classNames(styles['Image'], className)}\n />\n );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,SAAS,QAAyD,wBAAwB;AACnG,SAASC,UAAU,QAA8B,yBAAyB;AAAC;AAK3E,OAAO,IAAMC,kBAAkB,GAAG,EAAE;AASpC;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAMA;EAAA,qBALhBC,IAAI;IAAJA,IAAI,0BAAGF,kBAAkB;IAAA,yBACzBG,YAAY;IAAEC,gBAAgB,kCAAG,GAAG;IACpCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIJ,YAAoB;EAExB,QAAQC,gBAAgB;IACtB,KAAK,GAAG;MAAE;QACR,IAAIF,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,CAAC;QAChB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB;QACAA,YAAY,GAAG,EAAE;QACjB;MACF;IACA,KAAK,GAAG;MAAE;QACR,IAAID,IAAI,IAAI,EAAE,EAAE;UACdC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,CAAC;QAClB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB,CAAC,MAAM,IAAID,IAAI,IAAI,EAAE,EAAE;UACrBC,YAAY,GAAG,EAAE;QACnB;QACAA,YAAY,GAAG,EAAE;MACnB;EAAC;EAGH,oBACE,oBAAC,SAAS,eACJI,SAAS;IACb,IAAI,EAAEL,IAAK;IACX,KAAK,kCAAOG,KAAK;MAAEF,YAAY,EAAZA;IAAY,EAAG;IAClC,SAAS,EAAEN,UAAU,cAAkBS,SAAS;EAAE,GAClD;AAEN,CAAC;AAEDL,KAAK,CAACO,KAAK,GAAGT,UAAU;AAExBE,KAAK,CAACQ,OAAO,GAAGX,SAAS,CAACW,OAAO"}

package/dist/cssm/components/Image/ImageBadge/ImageBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageBadge.js","names":["React","classNames","ImageBase","ImageBaseContext","ImageBadge","className","restProps","useContext","size"],"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseBadgeProps, ~~ImageBase,~~ ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {\n const { size } = React.useContext(ImageBaseContext);\n return (\n <ImageBase.Badge\n {...restProps}\n className={classNames(\n styles['ImageBadge'],\n size < 96 && styles['ImageBadge--shifted'],\n className,\n )}\n />\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,~~SAAmCC~~,SAAS,~~EAAEC~~,gBAAgB,QAAQ,2BAA2B;AAAC;AAKlG,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAAqD;EAAA,IAA/CC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClD,wBAAiBN,KAAK,CAACO,UAAU,CAACJ,gBAAgB,CAAC;IAA3CK,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,SAAS,CAAC,KAAK,eACVF,SAAS;IACb,SAAS,EAAEL,UAAU,mBAEnBO,IAAI,GAAG,EAAE,6BAAiC,EAC1CH,SAAS;EACT,GACF;AAEN,CAAC"}
1	+ {"version":3,"file":"ImageBadge.js","names":["React","classNames","ImageBase","ImageBaseContext","ImageBadge","className","restProps","useContext","size"],"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {\n const { size } = React.useContext(ImageBaseContext);\n return (\n <ImageBase.Badge\n {...restProps}\n className={classNames(\n styles['ImageBadge'],\n size < 96 && styles['ImageBadge--shifted'],\n className,\n )}\n />\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,2BAA2B;AAAC;AAKlG,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAAqD;EAAA,IAA/CC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClD,wBAAiBN,KAAK,CAACO,UAAU,CAACJ,gBAAgB,CAAC;IAA3CK,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,SAAS,CAAC,KAAK,eACVF,SAAS;IACb,SAAS,EAAEL,UAAU,mBAEnBO,IAAI,GAAG,EAAE,6BAAiC,EAC1CH,SAAS;EACT,GACF;AAEN,CAAC"}

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import type { HasRef, HasRootRef } from '../../types';
 import { type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
 import { type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
-import type { ImageBaseExpectedIconProps, ImageBaseSize, ImageBaseContextProps } from './types';
 import { ImageBaseContext } from './context';
+import type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';
 export type { ImageBaseSize, ImageBaseExpectedIconProps, ImageBaseBadgeProps, ImageBaseOverlayProps, ImageBaseContextProps, };
 export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, } from './helpers';
 export { ImageBaseContext };

package/dist/cssm/components/ImageBase/ImageBase.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { ImageBaseBadge } from './ImageBaseBadge/ImageBaseBadge';
 import { ImageBaseOverlay } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
-import { validateSize, validateFallbackIcon } from './validators';
+import { validateFallbackIcon, validateSize } from './validators';
 import "./ImageBase.module.css";
 export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize } from './helpers';
 export { ImageBaseContext };

package/dist/cssm/components/ImageBase/ImageBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageBase.js","names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","~~validateSize~~","~~validateFallbackIcon~~","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","styles","Badge","Overlay"],"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { type ImageBaseBadgeProps, ~~ImageBaseBadge~~ } from './ImageBaseBadge/ImageBaseBadge';\nimport { type ImageBaseOverlayProps, ~~ImageBaseOverlay~~ } from './ImageBaseOverlay/ImageBaseOverlay';\nimport ~~type~~ { ~~ImageBaseExpectedIconProps,~~ ~~ImageBaseSize, ImageBaseContextProps~~ } from './~~types~~';\nimport { ~~ImageBaseContext~~ } from './~~context~~';\nimport { ~~validateSize~~, ~~validateFallbackIcon~~ } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n ImageBaseSize,\n ImageBaseExpectedIconProps,\n ImageBaseBadgeProps,\n ImageBaseOverlayProps,\n ImageBaseContextProps,\n};\n\nexport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLImageElement> {\n /*\n Задаёт размер картинки.\n \n Используйте размеры заданные дизайн-системой `16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 56 \| 64 \| 72 \| 80 \| 88 \| 96`.\n \n > ⚠️ Использование кастомного размера – это пограничный кейс.\n /\n size?: ImageBaseSize \| number;\n /\n Включает или отключает обводку.\n /\n withBorder?: boolean;\n /\n Фолбек на случай, если картинка не прогрузилась.\n \n > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n \n > ⚠️ Может перекрывать `children`.\n /\n fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n getRef,\n size = 24,\n width,\n height,\n style,\n className,\n getRootRef,\n withBorder = true,\n 'fallbackIcon': fallbackIconProp,\n children,\n 'aria-label': ariaLabel,\n onClick,\n onLoad,\n onError,\n ...restProps\n}: ImageBaseProps) => {\n const [loaded, setLoaded] = React.useState(false);\n const [failed, setFailed] = React.useState(false);\n\n const hasSrc = src \|\| srcSet;\n const needShowFallbackIcon = (failed \|\| !hasSrc) && React.isValidElement(fallbackIconProp);\n\n const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n if (process.env.NODE_ENV === 'development') {\n validateSize(size);\n if (fallbackIcon) {\n validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n }\n }\n\n const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(true);\n setFailed(false);\n onLoad?.(event);\n };\n\n const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(false);\n setFailed(true);\n onError?.(event);\n };\n\n return (\n <ImageBaseContext.Provider value={{ size }}>\n <div\n {...restProps}\n ref={getRootRef}\n style={{ ...style, width: size, height: size }}\n className={classNames(\n className,\n styles['ImageBase'],\n styles[`ImageBase--size-${size as ImageBaseSize}`],\n withBorder && styles['ImageBase--withBorder'],\n loaded && styles['ImageBase--loaded'],\n )}\n role={hasSrc ? 'img' : 'presentation'}\n aria-label={ariaLabel}\n onClick={onClick}\n >\n {hasSrc && (\n <img\n ref={getRef}\n alt={alt}\n className={styles['ImageBase__img']}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={width}\n height={height}\n onLoad={handleImageLoad}\n onError={handleImageError}\n />\n )}\n {fallbackIcon && (\n <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n )}\n {children}\n </div>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,~~SAAmCC~~,cAAc,~~QAAQ~~,iCAAiC;AAC1F,~~SAAqCC~~,gBAAgB,~~QAAQ~~,qCAAqC;~~AAElG~~,SAASC,gBAAgB,QAAQ,WAAW;~~AAC5C~~,SAASC,~~YAAY~~,EAAEC,~~oBAAoB~~,QAAQ,cAAc;AAAC;AAWlE,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,WAAW;AAElB,SAASL,gBAAgB;AAkCzB;AACA;AACA;AACA,OAAO,IAAMM,SAAS,GAAG,SAAZA,SAAS,OAyBA;EAAA,IAxBpBC,GAAG,QAAHA,GAAG;IACHC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,KAAK,QAALA,KAAK;IACLC,GAAG,QAAHA,GAAG;IACHC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IAAA,uBACVC,UAAU;IAAVA,UAAU,gCAAG,IAAI;IACDC,gBAAgB,QAAhC,cAAc;IACdC,QAAQ,QAARA,QAAQ;IACMC,SAAS,QAAvB,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,sBAA4BlC,KAAK,CAACmC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA1CC,MAAM;IAAEC,SAAS;EACxB,uBAA4BrC,KAAK,CAACmC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA1CG,MAAM;IAAEC,SAAS;EAExB,IAAMC,MAAM,GAAGvB,GAAG,IAAIC,MAAM;EAC5B,IAAMuB,oBAAoB,GAAG,CAACH,MAAM,IAAI,CAACE,MAAM,kBAAKxC,KAAK,CAAC0C,cAAc,CAACd,gBAAgB,CAAC;EAE1F,IAAMe,YAAY,GAAGF,oBAAoB,GAAGb,gBAAgB,GAAG,IAAI;EAEnE,IAAIgB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;~~IAC1CzC~~,YAAY,~~CAACgB~~,IAAI,CAAC;IAClB,IAAIsB,YAAY,EAAE;~~MAChBrC~~,oBAAoB,~~CAACe~~,IAAI,EAAE;QAAE0B,IAAI,EAAE,cAAc;QAAEC,KAAK,EAAEL;MAAa,CAAC,CAAC;IAC3E;EACF;EAEA,IAAMM,eAAe,GAAG,SAAlBA,eAAe,CAAIC,KAA6C,EAAK;IACzEb,SAAS,CAAC,IAAI,CAAC;IACfE,SAAS,CAAC,KAAK,CAAC;IAChBP,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAGkB,KAAK,CAAC;EACjB,CAAC;EAED,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAID,KAA6C,EAAK;IAC1Eb,SAAS,CAAC,KAAK,CAAC;IAChBE,SAAS,CAAC,IAAI,CAAC;IACfN,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGiB,KAAK,CAAC;EAClB,CAAC;EAED,oBACE,oBAAC,gBAAgB,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAE7B,IAAI,EAAJA;IAAK;EAAE,gBACzC,wCACMa,SAAS;IACb,GAAG,EAAER,UAAW;IAChB,KAAK,kCAAOF,KAAK;MAAEF,KAAK,EAAED,IAAI;MAAEE,MAAM,EAAEF;IAAI,EAAG;IAC/C,SAAS,EAAEpB,UAAU,CACnBwB,SAAS,mBAET2B,MAAM,2BAAoB/B,IAAI,EAAoB,EAClDM,UAAU,+BAAmC,EAC7CS,MAAM,2BAA+B,CACrC;IACF,IAAI,EAAEI,MAAM,GAAG,KAAK,GAAG,cAAe;IACtC,cAAYV,SAAU;IACtB,OAAO,EAAEC;EAAQ,IAEhBS,MAAM,iBACL;IACE,GAAG,EAAEpB,MAAO;IACZ,GAAG,EAAET,GAAI;IACT,SAAS,sBAA2B;IACpC,WAAW,EAAEC,WAAY;IACzB,QAAQ,EAAEC,QAAS;IACnB,OAAO,EAAEC,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,KAAK,EAAEC,KAAM;IACb,GAAG,EAAEC,GAAI;IACT,MAAM,EAAEC,MAAO;IACf,MAAM,EAAEC,MAAO;IACf,KAAK,EAAEG,KAAM;IACb,MAAM,EAAEC,MAAO;IACf,MAAM,EAAE0B,eAAgB;IACxB,OAAO,EAAEE;EAAiB,EAE7B,EACAR,YAAY,iBACX;IAAK,SAAS,EAAE1C,UAAU;EAAgC,GAAE0C,YAAY,CACzE,EACAd,QAAQ,CACL,CACoB;AAEhC,CAAC;AAEDnB,SAAS,CAAC2C,KAAK,GAAGnD,cAAc;AAEhCQ,SAAS,CAAC4C,OAAO,GAAGnD,gBAAgB;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"ImageBase.js","names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","styles","Badge","Overlay"],"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n ImageBaseSize,\n ImageBaseExpectedIconProps,\n ImageBaseBadgeProps,\n ImageBaseOverlayProps,\n ImageBaseContextProps,\n};\n\nexport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLImageElement> {\n /*\n Задаёт размер картинки.\n \n Используйте размеры заданные дизайн-системой `16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 56 \| 64 \| 72 \| 80 \| 88 \| 96`.\n \n > ⚠️ Использование кастомного размера – это пограничный кейс.\n /\n size?: ImageBaseSize \| number;\n /\n Включает или отключает обводку.\n /\n withBorder?: boolean;\n /\n Фолбек на случай, если картинка не прогрузилась.\n \n > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n \n > ⚠️ Может перекрывать `children`.\n /\n fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n getRef,\n size = 24,\n width,\n height,\n style,\n className,\n getRootRef,\n withBorder = true,\n 'fallbackIcon': fallbackIconProp,\n children,\n 'aria-label': ariaLabel,\n onClick,\n onLoad,\n onError,\n ...restProps\n}: ImageBaseProps) => {\n const [loaded, setLoaded] = React.useState(false);\n const [failed, setFailed] = React.useState(false);\n\n const hasSrc = src \|\| srcSet;\n const needShowFallbackIcon = (failed \|\| !hasSrc) && React.isValidElement(fallbackIconProp);\n\n const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n if (process.env.NODE_ENV === 'development') {\n validateSize(size);\n if (fallbackIcon) {\n validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n }\n }\n\n const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(true);\n setFailed(false);\n onLoad?.(event);\n };\n\n const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(false);\n setFailed(true);\n onError?.(event);\n };\n\n return (\n <ImageBaseContext.Provider value={{ size }}>\n <div\n {...restProps}\n ref={getRootRef}\n style={{ ...style, width: size, height: size }}\n className={classNames(\n className,\n styles['ImageBase'],\n styles[`ImageBase--size-${size as ImageBaseSize}`],\n withBorder && styles['ImageBase--withBorder'],\n loaded && styles['ImageBase--loaded'],\n )}\n role={hasSrc ? 'img' : 'presentation'}\n aria-label={ariaLabel}\n onClick={onClick}\n >\n {hasSrc && (\n <img\n ref={getRef}\n alt={alt}\n className={styles['ImageBase__img']}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={width}\n height={height}\n onLoad={handleImageLoad}\n onError={handleImageError}\n />\n )}\n {fallbackIcon && (\n <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n )}\n {children}\n </div>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"mappings":"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"}

package/dist/cssm/components/ImageBase/ImageBase.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiImageBase{align-items:center;background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);background-size:cover;box-sizing:border-box;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;justify-content:center;position:relative}.vkuiImageBase--withBorder{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_image_border_alpha)}.vkuiImageBase__img{border:none;border-radius:inherit;display:block;height:100%;left:0;object-fit:cover;position:absolute;top:0;visibility:hidden;width:100%}.vkuiImageBase--loaded .vkuiImageBase__img{visibility:visible}.vkuiImageBase__fallback{left:auto;position:absolute;top:auto}.vkuiCellButton>.vkuiImageBase .vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiCellButton--mode-danger>.vkuiImageBase .vkuiIcon{color:#e64646;color:var(--vkui--color_icon_negative)}.vkuiPanelHeader__before .vkuiImageBase{margin-left:8px}.vkuiPanelHeader__after .vkuiImageBase{margin-right:8px}.vkuiSimpleCell>.vkuiImageBase{margin-right:12px}.vkuiSimpleCell>.vkuiImageBase--size-28,.vkuiSimpleCell>.vkuiImageBase--size-32{margin-bottom:10px;margin-top:10px}.vkuiSimpleCell>.vkuiImageBase--size-40{margin-bottom:4px;margin-top:4px}.vkuiSimpleCell>.vkuiImageBase--size-48,.vkuiSimpleCell>.vkuiImageBase--size-72{margin-bottom:6px;margin-top:6px}.vkuiSimpleCell--ios>.vkuiImageBase--size-28,.vkuiSimpleCell--ios>.vkuiImageBase--size-32{margin-left:4px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-28,.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}@media (pointer:fine) and (min-width:768px)~~,not (min-height:415px)~~{.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-28,.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}}
1	+ .vkuiImageBase{align-items:center;background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);background-size:cover;box-sizing:border-box;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;justify-content:center;position:relative}.vkuiImageBase--withBorder{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_image_border_alpha)}.vkuiImageBase__img{border:none;border-radius:inherit;display:block;height:100%;left:0;object-fit:cover;position:absolute;top:0;visibility:hidden;width:100%}.vkuiImageBase--loaded .vkuiImageBase__img{visibility:visible}.vkuiImageBase__fallback{left:auto;position:absolute;top:auto}.vkuiCellButton>.vkuiImageBase .vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiCellButton--mode-danger>.vkuiImageBase .vkuiIcon{color:#e64646;color:var(--vkui--color_icon_negative)}.vkuiPanelHeader__before .vkuiImageBase{margin-left:8px}.vkuiPanelHeader__after .vkuiImageBase{margin-right:8px}.vkuiSimpleCell>.vkuiImageBase{margin-right:12px}.vkuiSimpleCell>.vkuiImageBase--size-28,.vkuiSimpleCell>.vkuiImageBase--size-32{margin-bottom:10px;margin-top:10px}.vkuiSimpleCell>.vkuiImageBase--size-40{margin-bottom:4px;margin-top:4px}.vkuiSimpleCell>.vkuiImageBase--size-48,.vkuiSimpleCell>.vkuiImageBase--size-72{margin-bottom:6px;margin-top:6px}.vkuiSimpleCell--ios>.vkuiImageBase--size-28,.vkuiSimpleCell--ios>.vkuiImageBase--size-32{margin-left:4px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-28,.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiSimpleCell--sizeY-compact>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-28,.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiSimpleCell--sizeY-none>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}}

package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js CHANGED Viewed

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "theme", "visibility", "children", "onClick"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useAppearance } from '../../../hooks/useAppearance';
 import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
+import { useAppearance } from '../../../hooks/useAppearance';
 import { Tappable } from '../../Tappable/Tappable';
 import { ImageBaseContext } from '../context';
 import { validateOverlayIcon } from '../validators';

package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageBaseOverlay.js","names":["React","classNames","~~useAppearance~~","~~useAdaptivityHasPointer~~","Tappable","ImageBaseContext","validateOverlayIcon","ImageBaseOverlay","className","themeProp","theme","visibilityProp","visibility","children","onClick","restProps","appearance","hasPointer","process","env","NODE_ENV","useContext","size","name","value","undefined"],"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~useAppearance~~ } from '../../../hooks/~~useAppearance~~';\nimport { ~~useAdaptivityHasPointer~~ } from '../../../hooks/~~useAdaptivityHasPointer~~';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n /*\n Задаёт тему оформления.\n \n > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n /\n theme?: 'dark' \| 'light';\n /\n Определяет каким образом должен показываться оверлей.\n \n - `\"on-hover\"` – на наведение указателя мыши.\n * - `\"always\"` – всегда показывать.\n \n > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n /\n visibility?: 'on-hover' \| 'always';\n /\n Принимает иконку.\n \n \n * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n /\n children: React.ReactElement<ImageBaseExpectedIconProps>;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/\n Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n className,\n theme: themeProp,\n visibility: visibilityProp,\n children,\n onClick,\n ...restProps\n}: ImageBaseOverlayProps) => {\n const appearance = useAppearance();\n const hasPointer = useAdaptivityHasPointer();\n const theme = themeProp ?? appearance;\n const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n if (process.env.NODE_ENV === 'development') {\n if (children) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { size } = React.useContext(ImageBaseContext);\n validateOverlayIcon(size, { name: 'children', value: children });\n }\n }\n\n return (\n <Tappable\n {...restProps}\n type=\"button\"\n Component=\"button\"\n className={classNames(\n styles['ImageBaseOverlay'],\n visibility === 'always' && styles['ImageBaseOverlay--visible'],\n theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n className,\n )}\n hasHover={visibility === 'on-hover'}\n hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n hasActive={false}\n onClick={onClick}\n >\n {children}\n </Tappable>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,~~aAAa~~,QAAQ,~~8BAA8B~~;~~AAC5D~~,SAASC,~~uBAAuB~~,QAAQ,~~wCAAwC~~;~~AAChF~~,SAASC,QAAQ,QAAQ,yBAAyB;AAClD,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,mBAAmB,QAAQ,eAAe;AAAC;AAoCpD;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAOA;EAAA,IAN3BC,SAAS,QAATA,SAAS;IACFC,SAAS,QAAhBC,KAAK;IACOC,cAAc,QAA1BC,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,UAAU,~~GAAGd~~,aAAa,EAAE;EAClC,~~IAAMe~~,UAAU,~~GAAGd~~,uBAAuB,EAAE;EAC5C,~~IAAMO~~,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIO,UAAU;EACrC,IAAMJ,UAAU,GAAGD,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAKM,UAAU,GAAG,UAAU,GAAG,QAAS;EAEzE,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIP,QAAQ,EAAE;MACZ;MACA,wBAAiBb,KAAK,CAACqB,UAAU,CAAChB,gBAAgB,CAAC;QAA3CiB,IAAI,qBAAJA,IAAI;MACZhB,mBAAmB,CAACgB,IAAI,EAAE;QAAEC,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEX;MAAS,CAAC,CAAC;IAClE;EACF;EAEA,oBACE,oBAAC,QAAQ,eACHE,SAAS;IACb,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAEd,UAAU,yBAEnBW,UAAU,KAAK,QAAQ,mCAAuC,EAC9DF,KAAK,KAAK,OAAO,uCAA2C,EAC5DA,KAAK,KAAK,MAAM,sCAA0C,EAC1DF,SAAS,CACT;IACF,QAAQ,EAAEI,UAAU,KAAK,UAAW;IACpC,SAAS,EAAEA,UAAU,KAAK,UAAU,qCAAyCa,SAAU;IACvF,gBAAgB,uCAA4C;IAC5D,SAAS,EAAE,KAAM;IACjB,OAAO,EAAEX;EAAQ,IAEhBD,QAAQ,CACA;AAEf,CAAC"}
1	+ {"version":3,"file":"ImageBaseOverlay.js","names":["React","classNames","useAdaptivityHasPointer","useAppearance","Tappable","ImageBaseContext","validateOverlayIcon","ImageBaseOverlay","className","themeProp","theme","visibilityProp","visibility","children","onClick","restProps","appearance","hasPointer","process","env","NODE_ENV","useContext","size","name","value","undefined"],"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n /*\n Задаёт тему оформления.\n \n > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n /\n theme?: 'dark' \| 'light';\n /\n Определяет каким образом должен показываться оверлей.\n \n - `\"on-hover\"` – на наведение указателя мыши.\n * - `\"always\"` – всегда показывать.\n \n > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n /\n visibility?: 'on-hover' \| 'always';\n /\n Принимает иконку.\n \n \n * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n /\n children: React.ReactElement<ImageBaseExpectedIconProps>;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/\n Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n className,\n theme: themeProp,\n visibility: visibilityProp,\n children,\n onClick,\n ...restProps\n}: ImageBaseOverlayProps) => {\n const appearance = useAppearance();\n const hasPointer = useAdaptivityHasPointer();\n const theme = themeProp ?? appearance;\n const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n if (process.env.NODE_ENV === 'development') {\n if (children) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { size } = React.useContext(ImageBaseContext);\n validateOverlayIcon(size, { name: 'children', value: children });\n }\n }\n\n return (\n <Tappable\n {...restProps}\n type=\"button\"\n Component=\"button\"\n className={classNames(\n styles['ImageBaseOverlay'],\n visibility === 'always' && styles['ImageBaseOverlay--visible'],\n theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n className,\n )}\n hasHover={visibility === 'on-hover'}\n hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n hasActive={false}\n onClick={onClick}\n >\n {children}\n </Tappable>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,uBAAuB,QAAQ,wCAAwC;AAChF,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,QAAQ,QAAQ,yBAAyB;AAClD,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,mBAAmB,QAAQ,eAAe;AAAC;AAoCpD;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAOA;EAAA,IAN3BC,SAAS,QAATA,SAAS;IACFC,SAAS,QAAhBC,KAAK;IACOC,cAAc,QAA1BC,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,UAAU,GAAGb,aAAa,EAAE;EAClC,IAAMc,UAAU,GAAGf,uBAAuB,EAAE;EAC5C,IAAMQ,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIO,UAAU;EACrC,IAAMJ,UAAU,GAAGD,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAKM,UAAU,GAAG,UAAU,GAAG,QAAS;EAEzE,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIP,QAAQ,EAAE;MACZ;MACA,wBAAiBb,KAAK,CAACqB,UAAU,CAAChB,gBAAgB,CAAC;QAA3CiB,IAAI,qBAAJA,IAAI;MACZhB,mBAAmB,CAACgB,IAAI,EAAE;QAAEC,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEX;MAAS,CAAC,CAAC;IAClE;EACF;EAEA,oBACE,oBAAC,QAAQ,eACHE,SAAS;IACb,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAEd,UAAU,yBAEnBW,UAAU,KAAK,QAAQ,mCAAuC,EAC9DF,KAAK,KAAK,OAAO,uCAA2C,EAC5DA,KAAK,KAAK,MAAM,sCAA0C,EAC1DF,SAAS,CACT;IACF,QAAQ,EAAEI,UAAU,KAAK,UAAW;IACpC,SAAS,EAAEA,UAAU,KAAK,UAAU,qCAAyCa,SAAU;IACvF,gBAAgB,uCAA4C;IAC5D,SAAS,EAAE,KAAM;IACjB,OAAO,EAAEX;EAAQ,IAEhBD,QAAQ,CACA;AAEf,CAAC"}

package/dist/cssm/components/ImageBase/validators.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { warnOnce } from '../../lib/warnOnce';
-import { imageBaseSizes } from './types';
 import { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize } from './helpers';
+import { imageBaseSizes } from './types';
 /**
  * Пример,

package/dist/cssm/components/ImageBase/validators.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"validators.js","names":["warnOnce","~~imageBaseSizes","~~getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","parseIconSizeByDisplayName","displayName","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport { ~~imageBaseSizes } from './types';\nimport {~~\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\n/*\n Пример,\n \n Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number \| null {\n if (typeof displayName !== 'string') {\n return null;\n }\n const rawSize = displayName\n .replace(/\\d+$/g, '') // удаляем цифры в конце\n .replace(/\\D/g, ''); // удаляем всё, что не является числом\n const size = Number(rawSize);\n return size > 0 ? size : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number \| null {\n if (typeof width !== 'string' && typeof width !== 'number') {\n return null;\n }\n const size = Number(width);\n return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string \| null {\n return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number \| string \| null {\n return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number \| null {\n const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n name: string;\n value: JSX.Element;\n}\n\ninterface SelectorFn {\n (imageSize: number): number;\n MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n imageSize: number,\n iconProp: IconProp,\n selectorFn: SelectorFn,\n logger: ReturnType<typeof warnOnce>,\n) {\n const iconSize = getIconSizeByElement(iconProp.value);\n\n if (iconSize === null) {\n return;\n }\n\n const result = selectorFn(imageSize);\n\n if (result === iconSize \|\| (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n return;\n }\n\n const iconName = getElementDisplayName(iconProp.value);\n const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n logger(\n `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n 'log',\n );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n return validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getFallbackIconSizeByImageBaseSize,\n warnImageBase,\n );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n if (imageSize > maxSize \|\| mapOfExpectedSize.has(imageSize)) {\n return;\n }\n warnImageBase(\n `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n ' \| ',\n )}`,\n 'log',\n );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n if (imageSize < 24 && iconProp) {\n return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n }\n validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getBadgeIconSizeByImageBaseSize,\n warnImageBaseBadge,\n );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getOverlayIconSizeByImageBaseSize,\n warnImageBaseOverlay,\n );\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,oBAAoB;AAC7C,~~SAASC,cAAc,QAAQ,SAAS;AACxC,~~SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,WAAW;;~~AAElB~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,0BAA0B,CAACC,WAAoB,EAAiB;EACvE,IAAI,OAAOA,WAAW,KAAK,QAAQ,EAAE;IACnC,OAAO,IAAI;EACb;EACA,IAAMC,OAAO,GAAGD,WAAW,CACxBE,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;EAAA,CACrBA,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;EACvB,IAAMC,IAAI,GAAGC,MAAM,CAACH,OAAO,CAAC;EAC5B,OAAOE,IAAI,GAAG,CAAC,GAAGA,IAAI,GAAG,IAAI;AAC/B;AAEA,SAASE,wBAAwB,CAACC,KAAc,EAAiB;EAC/D,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC1D,OAAO,IAAI;EACb;EACA,IAAMH,IAAI,GAAGC,MAAM,CAACE,KAAK,CAAC;EAC1B,OAAOH,IAAI,GAAG,CAAC,GAAGA,IAAI,GAAG,IAAI;AAC/B;AAEA,SAASI,qBAAqB,CAACC,OAAoB,EAAiB;EAAA;EAClE,gCAAOA,OAAO,CAACC,IAAI,CAACT,WAAW,yEAAI,IAAI;AACzC;AAEA,SAASU,mBAAmB,CAACF,OAAoB,EAA0B;EAAA;EACzE,+BAAOA,OAAO,CAACG,KAAK,CAACL,KAAK,uEAAI,IAAI;AACpC;AAEA,SAASM,oBAAoB,CAACJ,OAAoB,EAAiB;EACjE,IAAMK,iBAAiB,GAAGd,0BAA0B,CAACQ,qBAAqB,CAACC,OAAO,CAAC,CAAC;EACpF,IAAMM,WAAW,GAAGT,wBAAwB,CAACK,mBAAmB,CAACF,OAAO,CAAC,CAAC;EAC1E,OAAOM,WAAW,GAAGA,WAAW,GAAGD,iBAAiB;AACtD;AAYA,SAASE,oCAAoC,CAC3CC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC,EACnC;EACA,IAAMC,QAAQ,GAAGR,oBAAoB,CAACK,QAAQ,CAACI,KAAK,CAAC;EAErD,IAAID,QAAQ,KAAK,IAAI,EAAE;IACrB;EACF;EAEA,IAAME,MAAM,GAAGJ,UAAU,CAACF,SAAS,CAAC;EAEpC,IAAIM,MAAM,KAAKF,QAAQ,IAAKE,MAAM,KAAKJ,UAAU,CAACK,QAAQ,IAAIH,QAAQ,IAAIE,MAAO,EAAE;IACjF;EACF;EAEA,IAAME,QAAQ,GAAGjB,qBAAqB,CAACU,QAAQ,CAACI,KAAK,CAAC;EACtD,IAAMI,WAAW,GAAGD,QAAQ,aAAMP,QAAQ,CAACS,IAAI,gBAAMF,QAAQ,YAASP,QAAQ,CAACS,IAAI;EAEnFP,MAAM,iDACQM,WAAW,sNAAmDT,SAAS,8GAA2BC,QAAQ,CAACS,IAAI,oJAAkCJ,MAAM,sOAAuDE,QAAQ,qBAAWF,MAAM,uBAAaA,MAAM,WACtQ,KAAK,CACN;AACH;AAEA,IAAMK,aAAa,GAAGjC,QAAQ,CAAC,WAAW,CAAC;AAE3C,OAAO,SAASkC,oBAAoB,CAACZ,SAAiB,EAAEC,QAAkB,EAAE;EAC1E,OAAOF,oCAAoC,CACzCC,SAAS,EACTC,QAAQ,~~EACRpB~~,kCAAkC,~~EAClC8B~~,aAAa,CACd;AACH;AAEA,IAAME,iBAAiB,GAAG,IAAIC,GAAG,~~CAASnC~~,cAAc,CAAC;AAEzD,~~IAAMoC~~,YAAY,GAAGC,MAAM,CAACC,IAAI,CAACJ,iBAAiB,CAAC,CAACK,GAAG,CAAC,UAACC,GAAG;EAAA,OAAK/B,MAAM,CAAC+B,GAAG,CAAC;AAAA,EAAC;AAC7E,IAAMC,OAAO,GAAGL,YAAY,CAACM,MAAM,CAAC,UAACD,OAAO,EAAEjC,IAAI;EAAA,OAAMA,IAAI,GAAGiC,OAAO,GAAGjC,IAAI,GAAGiC,OAAO;AAAA,CAAC,EAAE,CAAC,CAAC;AAE5F,OAAO,SAASE,YAAY,CAACtB,SAAiB,EAAQ;EACpD,IAAIA,SAAS,GAAGoB,OAAO,IAAIP,iBAAiB,CAACU,GAAG,CAACvB,SAAS,CAAC,EAAE;IAC3D;EACF;EACAW,aAAa,kBACAX,SAAS,mdAA6Fe,YAAY,CAACS,IAAI,CAChI,KAAK,CACN,GACD,KAAK,CACN;AACH;AAEA,IAAMC,kBAAkB,GAAG/C,QAAQ,CAAC,iBAAiB,CAAC;AAEtD,OAAO,SAASgD,iBAAiB,CAAC1B,SAAiB,EAAEC,QAAkB,EAAQ;EAC7E,IAAID,SAAS,GAAG,EAAE,IAAIC,QAAQ,EAAE;IAC9B,OAAOwB,kBAAkB,CAAC,uCAAuC,EAAE,KAAK,CAAC;EAC3E;EACA1B,oCAAoC,CAClCC,SAAS,EACTC,QAAQ,~~EACRrB~~,+BAA+B,EAC/~~B6C~~,kBAAkB,CACnB;AACH;AAEA,IAAME,oBAAoB,GAAGjD,QAAQ,CAAC,mBAAmB,CAAC;AAE1D,OAAO,SAASkD,mBAAmB,CAAC5B,SAAiB,EAAEC,QAAkB,EAAQ;EAC/EF,oCAAoC,CAClCC,SAAS,EACTC,QAAQ,~~EACRnB~~,iCAAiC,~~EACjC6C~~,oBAAoB,CACrB;AACH"}
1	+ {"version":3,"file":"validators.js","names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/*\n Пример,\n \n Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number \| null {\n if (typeof displayName !== 'string') {\n return null;\n }\n const rawSize = displayName\n .replace(/\\d+$/g, '') // удаляем цифры в конце\n .replace(/\\D/g, ''); // удаляем всё, что не является числом\n const size = Number(rawSize);\n return size > 0 ? size : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number \| null {\n if (typeof width !== 'string' && typeof width !== 'number') {\n return null;\n }\n const size = Number(width);\n return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string \| null {\n return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number \| string \| null {\n return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number \| null {\n const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n name: string;\n value: JSX.Element;\n}\n\ninterface SelectorFn {\n (imageSize: number): number;\n MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n imageSize: number,\n iconProp: IconProp,\n selectorFn: SelectorFn,\n logger: ReturnType<typeof warnOnce>,\n) {\n const iconSize = getIconSizeByElement(iconProp.value);\n\n if (iconSize === null) {\n return;\n }\n\n const result = selectorFn(imageSize);\n\n if (result === iconSize \|\| (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n return;\n }\n\n const iconName = getElementDisplayName(iconProp.value);\n const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n logger(\n `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n 'log',\n );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n return validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getFallbackIconSizeByImageBaseSize,\n warnImageBase,\n );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n if (imageSize > maxSize \|\| mapOfExpectedSize.has(imageSize)) {\n return;\n }\n warnImageBase(\n `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n ' \| ',\n )}`,\n 'log',\n );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n if (imageSize < 24 && iconProp) {\n return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n }\n validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getBadgeIconSizeByImageBaseSize,\n warnImageBaseBadge,\n );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getOverlayIconSizeByImageBaseSize,\n warnImageBaseOverlay,\n );\n}\n"],"mappings":"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"}

package/dist/cssm/components/InfoRow/InfoRow.js CHANGED Viewed

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["header", "children", "className"];
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { Subhead } from '../Typography/Subhead/Subhead';
 import { Headline } from '../Typography/Headline/Headline';
+import { Subhead } from '../Typography/Subhead/Subhead';
 import "./InfoRow.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow

package/dist/cssm/components/InfoRow/InfoRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoRow.js","names":["React","classNames","hasReactNode","~~Subhead~~","~~Headline~~","InfoRow","header","children","className","restProps"],"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { ~~Subhead~~ } from '../Typography/~~Subhead~~/~~Subhead~~';\nimport { ~~Headline~~ } from '../Typography/~~Headline~~/~~Headline~~';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n header: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n <Headline\n {...restProps}\n Component=\"span\"\n className={classNames(styles['InfoRow'], className)}\n weight=\"3\"\n >\n {hasReactNode(header) && (\n <Subhead Component=\"span\" className={styles['InfoRow__header']}>\n {header}\n </Subhead>\n )}\n {children}\n </Headline>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,~~OAAO~~,QAAQ~~,+BAA+B~~;~~AACvD~~,SAASC,~~QAAQ~~,QAAQ~~,iCAAiC~~;AAAC;~~AAO3D~~;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBACjE,oBAAC,QAAQ,eACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAER,UAAU,gBAAoBO,SAAS,CAAE;IACpD,MAAM,EAAC;EAAG,IAETN,YAAY,CAACI,MAAM,CAAC,iBACnB,oBAAC,OAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ"}
1	+ {"version":3,"file":"InfoRow.js","names":["React","classNames","hasReactNode","Headline","Subhead","InfoRow","header","children","className","restProps"],"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n header: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n <Headline\n {...restProps}\n Component=\"span\"\n className={classNames(styles['InfoRow'], className)}\n weight=\"3\"\n >\n {hasReactNode(header) && (\n <Subhead Component=\"span\" className={styles['InfoRow__header']}>\n {header}\n </Subhead>\n )}\n {children}\n </Headline>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AAOxD;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBACjE,oBAAC,QAAQ,eACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAER,UAAU,gBAAoBO,SAAS,CAAE;IACpD,MAAM,EAAC;EAAG,IAETN,YAAY,CAACI,MAAM,CAAC,iBACnB,oBAAC,OAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ"}

package/dist/cssm/components/Input/Input.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { FormFieldProps } from '../FormField/FormField';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
+import { FormFieldProps } from '../FormField/FormField';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Input
  */
-export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, ...restProps }: InputProps) => JSX.Element;
+export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, mode, ...restProps }: InputProps) => JSX.Element;

package/dist/cssm/components/Input/Input.js CHANGED Viewed

@@ -1,12 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status", "mode"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { FormField } from '../FormField/FormField';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { SizeType } from '../../lib/adaptivity';
+import { FormField } from '../FormField/FormField';
 import "./Input.module.css";
+var sizeYClassNames = _defineProperty({
+  none: "vkuiInput--sizeY-none"
+}, SizeType.COMPACT, "vkuiInput--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Input
  */
@@ -21,16 +25,19 @@ export var Input = function Input(_ref) {
     before = _ref.before,
     after = _ref.after,
     status = _ref.status,
+    mode = _ref.mode,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   return /*#__PURE__*/React.createElement(FormField, {
     style: style,
-    className: classNames("vkuiInput", align && styles["Input--align-".concat(align)], getSizeYClassName("vkuiInput", sizeY), before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
+    className: classNames("vkuiInput", align && styles["Input--align-".concat(align)], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
     getRootRef: getRootRef,
     before: before,
     after: after,
     disabled: restProps.disabled,
+    mode: mode,
     status: status
   }, /*#__PURE__*/React.createElement("input", _extends({}, restProps, {
     type: type,

package/dist/cssm/components/Input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["React","classNames","FormField","~~getSizeYClassName~~","~~useAdaptivity~~","Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","sizeY","styles","disabled"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~FormField,~~ ~~FormFieldProps~~ } from '~~../FormField~~/~~FormField~~';\nimport { ~~HasAlign,~~ ~~HasRef, HasRootRef~~ } from '../../~~types~~';\nimport { ~~getSizeYClassName~~ } from '../../~~helpers/getSizeYClassName~~';\nimport { ~~useAdaptivity~~ } from '~~../../hooks~~/~~useAdaptivity~~';\nimport styles from './Input.module.css';\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n FormFieldProps {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n type = 'text',\n align,\n getRef,\n className,\n getRootRef,\n style,\n before,\n after,\n status,\n ...restProps\n}: InputProps) => {\n const { sizeY } = useAdaptivity();\n\n return (\n <FormField\n style={style}\n className={classNames(\n styles['Input'],\n align && styles[`Input--align-${align}`],\n ~~getSizeYClassName(styles~~[~~'Input'~~]~~, sizeY)~~,\n before && styles['Input--hasBefore'],\n after && styles['Input--hasAfter'],\n className,\n )}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n status={status}\n >\n <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n </FormField>\n );\n};\n"],"mappings":"~~;;;~~AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,~~SAAS~~,~~QAAwB~~,~~wBAAwB~~;~~AAElE~~,SAASC,~~iBAAiB~~,QAAQ,~~iCAAiC~~;~~AACnE~~,SAASC,~~aAAa~~,~~QAAQ~~,~~2BAA2B~~;AAAC;~~AAU1D~~;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,~~OAWA~~;EAAA,~~qBAVhBC~~,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;~~IACHC~~,SAAS;EAEZ,~~qBAAkBX~~,aAAa,EAAE;~~IAAzBY~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EAEb~~,oBACE,oBAAC,SAAS;IACR,KAAK,~~EAAEL~~,KAAM;IACb,SAAS,~~EAAEV~~,UAAU,~~cAEnBM~~,KAAK,~~IAAIU~~,MAAM,~~wBAAiBV~~,KAAK,EAAG,~~EACxCJ~~,~~iBAAiB~~,~~cAAkBa~~,KAAK,CAAC,~~EACzCJ~~,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,~~EAAEE~~,SAAS,~~CAACG~~,QAAS;IAC7B,MAAM,~~EAAEJ~~;EAAO,gBAEf,~~0CAAWC~~,SAAS;IAAE,IAAI,~~EAAET~~,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"Input.js","names":["React","classNames","useAdaptivity","SizeType","FormField","sizeYClassNames","none","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","styles","REGULAR","disabled"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n none: styles['Input--sizeY-none'],\n [SizeType.COMPACT]: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n FormFieldProps {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n type = 'text',\n align,\n getRef,\n className,\n getRootRef,\n style,\n before,\n after,\n status,\n mode,\n ...restProps\n}: InputProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <FormField\n style={style}\n className={classNames(\n styles['Input'],\n align && styles[`Input--align-${align}`],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n before && styles['Input--hasBefore'],\n after && styles['Input--hasAfter'],\n className,\n )}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n mode={mode}\n status={status}\n >\n <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n </FormField>\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,SAAS,QAAwB,wBAAwB;AAAC;AAGnE,IAAMC,eAAe;EACnBC,IAAI;AAA6B,GAChCH,QAAQ,CAACI,OAAO,6BAClB;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAYA;EAAA,qBAXhBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACDC,SAAS;EAEZ,qBAA2BjB,aAAa,EAAE;IAAA,sCAAlCkB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,SAAS;IACR,KAAK,EAAEN,KAAM;IACb,SAAS,EAAEb,UAAU,cAEnBS,KAAK,IAAIW,MAAM,wBAAiBX,KAAK,EAAG,EACxCU,KAAK,KAAKjB,QAAQ,CAACmB,OAAO,IAAIjB,eAAe,CAACe,KAAK,CAAC,EACpDL,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEG,SAAS,CAACI,QAAS;IAC7B,IAAI,EAAEL,IAAK;IACX,MAAM,EAAED;EAAO,gBAEf,0CAAWE,SAAS;IAAE,IAAI,EAAEV,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}