npm - @vkontakte/vkui - Versions diffs - 8.0.1 → 8.1.0 - Mend

@vkontakte/vkui 8.0.1 → 8.1.0

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

Files changed (1368) hide show

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

@@ -16,19 +16,19 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
      *
      * > ⚠️ Использование кастомного размера – это пограничный кейс.
      */
-    size?: LiteralUnion<ImageBaseSize, number>;
+    size?: LiteralUnion<ImageBaseSize, number> | undefined;
     /**
      * Ширина изображения.
      */
-    widthSize?: number | string;
+    widthSize?: number | string | undefined;
     /**
      * Высота изображения.
      */
-    heightSize?: number | string;
+    heightSize?: number | string | undefined;
     /**
      * Отключает обводку.
      */
-    noBorder?: boolean;
+    noBorder?: boolean | undefined;
     /**
      * Фолбек на случай, если картинка не прогрузилась.
      *
@@ -42,47 +42,49 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
      *
      * > ⚠️ Может перекрывать `children`.
      */
-    fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;
+    fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps> | undefined;
     /**
      * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.
      * @since 5.10.0
      */
-    withTransparentBackground?: boolean;
+    withTransparentBackground?: boolean | undefined;
     /**
      * Пользовательское значения стиля object-fit
      * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).
      */
-    objectFit?: React.CSSProperties['objectFit'];
+    objectFit?: React.CSSProperties['objectFit'] | undefined;
     /**
      * Пользовательское значения стиля object-position
      * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).
      */
-    objectPosition?: React.CSSProperties['objectPosition'];
+    objectPosition?: React.CSSProperties['objectPosition'] | undefined;
     /**
      * Флаг для сохранения пропорций картинки.
      * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.
      */
-    keepAspectRatio?: boolean;
+    keepAspectRatio?: boolean | undefined;
     /**
      * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.
      */
-    elementTiming?: string;
+    elementTiming?: string | undefined;
     /**
-     * Пользовательское значения стиля filter
+     * Пользовательское значения стиля filter.
      * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).
+     *
+     * При передаче этого свойства `<img />` будет обёрнут в дополнительный контейнер.
      */
-    filter?: React.CSSProperties['filter'];
+    filter?: React.CSSProperties['filter'] | undefined;
     /**
      * Свойства, которые можно прокинуть внутрь компонента:
      * - `img`: свойства для прокидывания в тег `<img>`;.
      */
     slotProps?: {
-        img?: React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute;
-    };
+        img?: (React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute) | undefined;
+    } | undefined;
     /**
      * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.
      */
-    getRef?: React.Ref<HTMLImageElement>;
+    getRef?: React.Ref<HTMLImageElement> | undefined;
 }
 /**
  * @see https://vkui.io/components/image-base

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

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

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

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

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

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

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

@@ -8,7 +8,7 @@ export interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivEl
      * - `"stroke"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).
      * - `"shadow"` – добавляет небольшую тень (⚠️ если фон под компонентом динамический, то ожидайте баг).
      */
-    background?: 'stroke' | 'shadow';
+    background?: 'stroke' | 'shadow' | undefined;
     /**
      * Принимает иконку.
      *

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageBaseBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAGhE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAmB3D,MAAM,WAAW,mBAAoB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACpF;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;~~IACjC~~;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC1D;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,8BAAyC,mBAAmB,4CAY1F,CAAC"}
1	+ {"version":3,"file":"ImageBaseBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAGhE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAmB3D,MAAM,WAAW,mBAAoB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACpF;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC7C;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC1D;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,8BAAyC,mBAAmB,4CAY1F,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseBadgeProps, 'children'>) {\n const { size } = React.useContext(ImageBaseContext);\n\n if (children) {\n validateBadgeIcon(size, { name: 'children', value: children });\n }\n\n return null;\n}\n\nconst backgroundStyles = {\n stroke: styles.backgroundStroke,\n shadow: styles.backgroundShadow,\n};\n\nexport interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Вид подложки под иконку.\n \n - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n * - `\"shadow\"` – добавляет небольшую тень (⚠️ если фон под компонентом динамический, то ожидайте баг).\n /\n background?: 'stroke' \| 'shadow';\n /\n Принимает иконку.\n \n > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n /\n children: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/\n Бейдж в правом нижнем углу компонента.\n \n > Не используйте при `size < 24`.\n */\nexport const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {\n return (\n <>\n <RootComponent\n {...restProps}\n baseClassName={classNames(styles.host, backgroundStyles[background])}\n />\n {process.env.NODE_ENV === 'development' && (\n <DevelopmentCheck>{restProps.children}</DevelopmentCheck>\n )}\n </>\n );\n};\n"],"names":["React","classNames","RootComponent","ImageBaseContext","validateBadgeIcon","DevelopmentCheck","children","size","useContext","name","value","backgroundStyles","stroke","shadow","ImageBaseBadge","background","restProps","baseClassName","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAE9C,SAASC,iBAAiB,QAAQ,mBAAgB;AAGlD,SAASC,iBAAiB,EAAEC,QAAQ,EAAyC;IAC3E,MAAM,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,UAAU,CAACL;IAElC,IAAIG,UAAU;QACZF,kBAAkBG,MAAM;YAAEE,MAAM;YAAYC,OAAOJ;QAAS;IAC9D;IAEA,OAAO;AACT;AAEA,MAAMK,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AAwBA;;;;CAIC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAgC;IACzF,qBACE;;0BACE,KAACd;gBACE,GAAGc,SAAS;gBACbC,eAAehB,uCAAwBU,gBAAgB,CAACI,WAAW;;YAEpEG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BACxB,KAACf;0BAAkBW,UAAUV,QAAQ;;;;AAI7C,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseBadgeProps, 'children'>) {\n const { size } = React.useContext(ImageBaseContext);\n\n if (children) {\n validateBadgeIcon(size, { name: 'children', value: children });\n }\n\n return null;\n}\n\nconst backgroundStyles = {\n stroke: styles.backgroundStroke,\n shadow: styles.backgroundShadow,\n};\n\nexport interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Вид подложки под иконку.\n \n - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n * - `\"shadow\"` – добавляет небольшую тень (⚠️ если фон под компонентом динамический, то ожидайте баг).\n /\n background?: 'stroke' \| 'shadow' \| undefined;\n /\n Принимает иконку.\n \n > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n /\n children: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/\n Бейдж в правом нижнем углу компонента.\n \n > Не используйте при `size < 24`.\n */\nexport const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {\n return (\n <>\n <RootComponent\n {...restProps}\n baseClassName={classNames(styles.host, backgroundStyles[background])}\n />\n {process.env.NODE_ENV === 'development' && (\n <DevelopmentCheck>{restProps.children}</DevelopmentCheck>\n )}\n </>\n );\n};\n"],"names":["React","classNames","RootComponent","ImageBaseContext","validateBadgeIcon","DevelopmentCheck","children","size","useContext","name","value","backgroundStyles","stroke","shadow","ImageBaseBadge","background","restProps","baseClassName","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAE9C,SAASC,iBAAiB,QAAQ,mBAAgB;AAGlD,SAASC,iBAAiB,EAAEC,QAAQ,EAAyC;IAC3E,MAAM,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,UAAU,CAACL;IAElC,IAAIG,UAAU;QACZF,kBAAkBG,MAAM;YAAEE,MAAM;YAAYC,OAAOJ;QAAS;IAC9D;IAEA,OAAO;AACT;AAEA,MAAMK,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AAwBA;;;;CAIC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAgC;IACzF,qBACE;;0BACE,KAACd;gBACE,GAAGc,SAAS;gBACbC,eAAehB,uCAAwBU,gBAAgB,CAACI,WAAW;;YAEpEG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BACxB,KAACf;0BAAkBW,UAAUV,QAAQ;;;;AAI7C,EAAE"}

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

@@ -9,18 +9,18 @@ export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HT
     /**
      * Отступ компонента от края контейнера по горизонтали.
      */
-    inlineIndent?: FloatElementIndentation;
+    inlineIndent?: FloatElementIndentation | undefined;
     /**
      * Отступ компонента от края контейнера по вертикали.
      */
-    blockIndent?: FloatElementIndentation;
+    blockIndent?: FloatElementIndentation | undefined;
     /**
      * Режим отображения компонента:
      *
      * - `"always"`: Всегда
      * - `"on-hover"`: При наведении на картинку.
      */
-    visibility?: 'always' | 'on-hover';
+    visibility?: 'always' | 'on-hover' | undefined;
 }
 export declare const ImageBaseFloatElement: ({ placement, visibility, style, className, inlineIndent, blockIndent, ...restProps }: ImageBaseFloatElementProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ImageBaseFloatElement.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageBaseFloatElement.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAMhE,MAAM,MAAM,qBAAqB,GAC7B,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,uBAAuB,GAC/B,KAAK,GACL,IAAI,GACJ,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,CAAC;AAsCX,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC3F;;OAEG;IACH,SAAS,EAAE,qBAAqB,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAC;~~IACvC~~;;OAEG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;~~IACtC~~;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;~~CACpC~~;AAED,eAAO,MAAM,qBAAqB,GAAI,sFAQnC,0BAA0B,4CAgE5B,CAAC"}
1	+ {"version":3,"file":"ImageBaseFloatElement.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAMhE,MAAM,MAAM,qBAAqB,GAC7B,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,uBAAuB,GAC/B,KAAK,GACL,IAAI,GACJ,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,CAAC;AAsCX,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC3F;;OAEG;IACH,SAAS,EAAE,qBAAqB,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,uBAAuB,GAAG,SAAS,CAAC;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,uBAAuB,GAAG,SAAS,CAAC;IAClD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;CAChD;AAED,eAAO,MAAM,qBAAqB,GAAI,sFAQnC,0BAA0B,4CAgE5B,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport { mutableRemoveElement, resolveIndent } from './helpers';\nimport styles from './ImageBaseFloatElement.module.css';\n\nexport type FloatElementPlacement =\n \| 'top-start'\n \| 'top'\n \| 'top-end'\n \| 'bottom-start'\n \| 'bottom'\n \| 'bottom-end'\n \| 'middle-start'\n \| 'middle'\n \| 'middle-end';\n\nexport type FloatElementIndentation =\n \| '2xs'\n \| 'xs'\n \| 's'\n \| 'm'\n \| 'l'\n \| 'xl'\n \| '2xl'\n \| '3xl'\n \| '4xl'\n \| number\n \| string;\n\nconst positionPlacementClassNames = {\n 'top-start': styles.placementTopStart,\n 'top': styles.placementTop,\n 'top-end': styles.placementTopEnd,\n 'bottom-start': styles.placementBottomStart,\n 'bottom': styles.placementBottom,\n 'bottom-end': styles.placementBottomEnd,\n 'middle-start': styles.placementMiddleStart,\n 'middle': styles.placementMiddle,\n 'middle-end': styles.placementMiddleEnd,\n};\n\nconst inlineIndentClassNames = {\n '2xs': styles.inlineIndent2xs,\n 'xs': styles.inlineIndentXs,\n 's': styles.inlineIndentS,\n 'm': styles.inlineIndentM,\n 'l': styles.inlineIndentL,\n 'xl': styles.inlineIndentXl,\n '2xl': styles.inlineIndent2xl,\n '3xl': styles.inlineIndent3xl,\n '4xl': styles.inlineIndent4xl,\n};\n\nconst blockIndentClassNames = {\n '2xs': styles.blockIndent2xs,\n 'xs': styles.blockIndentXs,\n 's': styles.blockIndentS,\n 'm': styles.blockIndentM,\n 'l': styles.blockIndentL,\n 'xl': styles.blockIndentXl,\n '2xl': styles.blockIndent2xl,\n '3xl': styles.blockIndent3xl,\n '4xl': styles.blockIndent4xl,\n};\n\nexport interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Позиция компонента относительно родителя.\n /\n placement: FloatElementPlacement;\n /\n Отступ компонента от края контейнера по горизонтали.\n /\n inlineIndent?: FloatElementIndentation;\n /\n Отступ компонента от края контейнера по вертикали.\n /\n blockIndent?: FloatElementIndentation;\n /\n Режим отображения компонента:\n \n - `\"always\"`: Всегда\n * - `\"on-hover\"`: При наведении на картинку.\n */\n visibility?: 'always' \| 'on-hover';\n}\n\nexport const ImageBaseFloatElement = ({\n placement,\n visibility = 'always',\n style,\n className,\n inlineIndent,\n blockIndent,\n ...restProps\n}: ImageBaseFloatElementProps) => {\n const [hidden, setHidden] = React.useState(visibility !== 'always');\n const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);\n\n useIsomorphicLayoutEffect(\n function resetHidden() {\n setHidden(visibility === 'on-hover');\n },\n [visibility],\n );\n\n useIsomorphicLayoutEffect(\n function addMouseHandlers() {\n if (visibility === 'on-hover') {\n const onMouseOver = () => setHidden(false);\n const onMouseOut = () => setHidden(true);\n\n onMouseOverHandlers.push(onMouseOver);\n onMouseOutHandlers.push(onMouseOut);\n\n return () => {\n mutableRemoveElement(onMouseOverHandlers, onMouseOver);\n mutableRemoveElement(onMouseOutHandlers, onMouseOut);\n };\n }\n return;\n },\n [visibility],\n );\n\n const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =\n React.useMemo(() => {\n const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(\n inlineIndent,\n '--vkui_internal--FloatElement_horizontal_indent',\n inlineIndentClassNames,\n );\n const [blockIndentStyle, blockIndentClassName] = resolveIndent(\n blockIndent,\n '--vkui_internal--FloatElement_vertical_indent',\n blockIndentClassNames,\n );\n\n return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];\n }, [inlineIndent, blockIndent]);\n\n return (\n <RootComponent\n {...restProps}\n style={{\n ...style,\n ...inlineIndentStyle,\n ...blockIndentStyle,\n }}\n className={classNames(\n styles.host,\n hidden && styles.hidden,\n positionPlacementClassNames[placement],\n inlineIndentClassName,\n blockIndentClassName,\n className,\n )}\n />\n );\n};\n"],"names":["React","classNames","useIsomorphicLayoutEffect","RootComponent","ImageBaseContext","mutableRemoveElement","resolveIndent","positionPlacementClassNames","inlineIndentClassNames","blockIndentClassNames","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,eAAY;AA2BhE,MAAMC,8BAA8B;IAClC,WAAW;IACX,KAAK;IACL,SAAS;IACT,cAAc;IACd,QAAQ;IACR,YAAY;IACZ,cAAc;IACd,QAAQ;IACR,YAAY;AACd;AAEA,MAAMC,yBAAyB;IAC7B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAEA,MAAMC,wBAAwB;IAC5B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAwBA,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,SAAS,EACTC,aAAa,QAAQ,EACrBC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,WAAW,EACX,GAAGC,WACwB;IAC3B,MAAM,CAACC,QAAQC,UAAU,GAAGnB,MAAMoB,QAAQ,CAACR,eAAe;IAC1D,MAAM,EAAES,mBAAmB,EAAEC,kBAAkB,EAAE,GAAGtB,MAAMuB,UAAU,CAACnB;IAErEF,0BACE,SAASsB;QACPL,UAAUP,eAAe;IAC3B,GACA;QAACA;KAAW;IAGdV,0BACE,SAASuB;QACP,IAAIb,eAAe,YAAY;YAC7B,MAAMc,cAAc,IAAMP,UAAU;YACpC,MAAMQ,aAAa,IAAMR,UAAU;YAEnCE,oBAAoBO,IAAI,CAACF;YACzBJ,mBAAmBM,IAAI,CAACD;YAExB,OAAO;gBACLtB,qBAAqBgB,qBAAqBK;gBAC1CrB,qBAAqBiB,oBAAoBK;YAC3C;QACF;QACA;IACF,GACA;QAACf;KAAW;IAGd,MAAM,CAACiB,mBAAmBC,kBAAkBC,uBAAuBC,qBAAqB,GACtFhC,MAAMiC,OAAO,CAAC;QACZ,MAAM,CAACJ,mBAAmBE,sBAAsB,GAAGzB,cACjDS,cACA,mDACAP;QAEF,MAAM,CAACsB,kBAAkBE,qBAAqB,GAAG1B,cAC/CU,aACA,iDACAP;QAGF,OAAO;YAACoB;YAAmBC;YAAkBC;YAAuBC;SAAqB;IAC3F,GAAG;QAACjB;QAAcC;KAAY;IAEhC,qBACE,KAACb;QACE,GAAGc,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACR,GAAGgB,iBAAiB;YACpB,GAAGC,gBAAgB;QACrB;QACAhB,WAAWb,8CAETiB,+CACAX,2BAA2B,CAACI,UAAU,EACtCoB,uBACAC,sBACAlB;;AAIR,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport { mutableRemoveElement, resolveIndent } from './helpers';\nimport styles from './ImageBaseFloatElement.module.css';\n\nexport type FloatElementPlacement =\n \| 'top-start'\n \| 'top'\n \| 'top-end'\n \| 'bottom-start'\n \| 'bottom'\n \| 'bottom-end'\n \| 'middle-start'\n \| 'middle'\n \| 'middle-end';\n\nexport type FloatElementIndentation =\n \| '2xs'\n \| 'xs'\n \| 's'\n \| 'm'\n \| 'l'\n \| 'xl'\n \| '2xl'\n \| '3xl'\n \| '4xl'\n \| number\n \| string;\n\nconst positionPlacementClassNames = {\n 'top-start': styles.placementTopStart,\n 'top': styles.placementTop,\n 'top-end': styles.placementTopEnd,\n 'bottom-start': styles.placementBottomStart,\n 'bottom': styles.placementBottom,\n 'bottom-end': styles.placementBottomEnd,\n 'middle-start': styles.placementMiddleStart,\n 'middle': styles.placementMiddle,\n 'middle-end': styles.placementMiddleEnd,\n};\n\nconst inlineIndentClassNames = {\n '2xs': styles.inlineIndent2xs,\n 'xs': styles.inlineIndentXs,\n 's': styles.inlineIndentS,\n 'm': styles.inlineIndentM,\n 'l': styles.inlineIndentL,\n 'xl': styles.inlineIndentXl,\n '2xl': styles.inlineIndent2xl,\n '3xl': styles.inlineIndent3xl,\n '4xl': styles.inlineIndent4xl,\n};\n\nconst blockIndentClassNames = {\n '2xs': styles.blockIndent2xs,\n 'xs': styles.blockIndentXs,\n 's': styles.blockIndentS,\n 'm': styles.blockIndentM,\n 'l': styles.blockIndentL,\n 'xl': styles.blockIndentXl,\n '2xl': styles.blockIndent2xl,\n '3xl': styles.blockIndent3xl,\n '4xl': styles.blockIndent4xl,\n};\n\nexport interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Позиция компонента относительно родителя.\n /\n placement: FloatElementPlacement;\n /\n Отступ компонента от края контейнера по горизонтали.\n /\n inlineIndent?: FloatElementIndentation \| undefined;\n /\n Отступ компонента от края контейнера по вертикали.\n /\n blockIndent?: FloatElementIndentation \| undefined;\n /\n Режим отображения компонента:\n \n - `\"always\"`: Всегда\n * - `\"on-hover\"`: При наведении на картинку.\n */\n visibility?: 'always' \| 'on-hover' \| undefined;\n}\n\nexport const ImageBaseFloatElement = ({\n placement,\n visibility = 'always',\n style,\n className,\n inlineIndent,\n blockIndent,\n ...restProps\n}: ImageBaseFloatElementProps) => {\n const [hidden, setHidden] = React.useState(visibility !== 'always');\n const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);\n\n useIsomorphicLayoutEffect(\n function resetHidden() {\n setHidden(visibility === 'on-hover');\n },\n [visibility],\n );\n\n useIsomorphicLayoutEffect(\n function addMouseHandlers() {\n if (visibility === 'on-hover') {\n const onMouseOver = () => setHidden(false);\n const onMouseOut = () => setHidden(true);\n\n onMouseOverHandlers.push(onMouseOver);\n onMouseOutHandlers.push(onMouseOut);\n\n return () => {\n mutableRemoveElement(onMouseOverHandlers, onMouseOver);\n mutableRemoveElement(onMouseOutHandlers, onMouseOut);\n };\n }\n return;\n },\n [visibility],\n );\n\n const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =\n React.useMemo(() => {\n const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(\n inlineIndent,\n '--vkui_internal--FloatElement_horizontal_indent',\n inlineIndentClassNames,\n );\n const [blockIndentStyle, blockIndentClassName] = resolveIndent(\n blockIndent,\n '--vkui_internal--FloatElement_vertical_indent',\n blockIndentClassNames,\n );\n\n return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];\n }, [inlineIndent, blockIndent]);\n\n return (\n <RootComponent\n {...restProps}\n style={{\n ...style,\n ...inlineIndentStyle,\n ...blockIndentStyle,\n }}\n className={classNames(\n styles.host,\n hidden && styles.hidden,\n positionPlacementClassNames[placement],\n inlineIndentClassName,\n blockIndentClassName,\n className,\n )}\n />\n );\n};\n"],"names":["React","classNames","useIsomorphicLayoutEffect","RootComponent","ImageBaseContext","mutableRemoveElement","resolveIndent","positionPlacementClassNames","inlineIndentClassNames","blockIndentClassNames","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,eAAY;AA2BhE,MAAMC,8BAA8B;IAClC,WAAW;IACX,KAAK;IACL,SAAS;IACT,cAAc;IACd,QAAQ;IACR,YAAY;IACZ,cAAc;IACd,QAAQ;IACR,YAAY;AACd;AAEA,MAAMC,yBAAyB;IAC7B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAEA,MAAMC,wBAAwB;IAC5B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAwBA,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,SAAS,EACTC,aAAa,QAAQ,EACrBC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,WAAW,EACX,GAAGC,WACwB;IAC3B,MAAM,CAACC,QAAQC,UAAU,GAAGnB,MAAMoB,QAAQ,CAACR,eAAe;IAC1D,MAAM,EAAES,mBAAmB,EAAEC,kBAAkB,EAAE,GAAGtB,MAAMuB,UAAU,CAACnB;IAErEF,0BACE,SAASsB;QACPL,UAAUP,eAAe;IAC3B,GACA;QAACA;KAAW;IAGdV,0BACE,SAASuB;QACP,IAAIb,eAAe,YAAY;YAC7B,MAAMc,cAAc,IAAMP,UAAU;YACpC,MAAMQ,aAAa,IAAMR,UAAU;YAEnCE,oBAAoBO,IAAI,CAACF;YACzBJ,mBAAmBM,IAAI,CAACD;YAExB,OAAO;gBACLtB,qBAAqBgB,qBAAqBK;gBAC1CrB,qBAAqBiB,oBAAoBK;YAC3C;QACF;QACA;IACF,GACA;QAACf;KAAW;IAGd,MAAM,CAACiB,mBAAmBC,kBAAkBC,uBAAuBC,qBAAqB,GACtFhC,MAAMiC,OAAO,CAAC;QACZ,MAAM,CAACJ,mBAAmBE,sBAAsB,GAAGzB,cACjDS,cACA,mDACAP;QAEF,MAAM,CAACsB,kBAAkBE,qBAAqB,GAAG1B,cAC/CU,aACA,iDACAP;QAGF,OAAO;YAACoB;YAAmBC;YAAkBC;YAAuBC;SAAqB;IAC3F,GAAG;QAACjB;QAAcC;KAAY;IAEhC,qBACE,KAACb;QACE,GAAGc,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACR,GAAGgB,iBAAiB;YACpB,GAAGC,gBAAgB;QACrB;QACAhB,WAAWb,8CAETiB,+CACAX,2BAA2B,CAACI,UAAU,EACtCoB,uBACAC,sBACAlB;;AAIR,EAAE"}

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

@@ -7,7 +7,7 @@ export interface ImageBaseOverlayCommonProps extends React.AriaAttributes, HasRo
      *
      * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.
      */
-    theme?: 'dark' | 'light';
+    theme?: 'dark' | 'light' | undefined;
     /**
      * Определяет каким образом должен показываться оверлей.
      *
@@ -20,11 +20,11 @@ export interface ImageBaseOverlayCommonProps extends React.AriaAttributes, HasRo
      * > Если это критично (например при SSR), то старайтесь явно указывать значение `visibility`, либо используйте
      * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.
      */
-    visibility?: 'on-hover' | 'always';
+    visibility?: 'on-hover' | 'always' | undefined;
     /**
      * `className` для компонента.
      */
-    className?: string;
+    className?: string | undefined;
 }
 export interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {
     /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,EAC1B,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;~~IACzB~~;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;~~IACnC~~;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;~~CACpB~~;AAED,MAAM,WAAW,gCAAiC,SAAQ,2BAA2B;IACnF;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,mCAAoC,SAAQ,2BAA2B;IACtF;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,EAC1B,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACrC;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC/C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,gCAAiC,SAAQ,2BAA2B;IACnF;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,mCAAoC,SAAQ,2BAA2B;IACtF;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { HasRootRef } from '../../../types';\nimport type { ImageBaseExpectedIconProps } from '../types';\n\nexport interface ImageBaseOverlayCommonProps\n extends React.AriaAttributes,\n HasRootRef<HTMLDivElement> {\n /*\n Задаёт тему оформления.\n \n > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n /\n theme?: 'dark' \| 'light';\n /\n Определяет каким образом должен показываться оверлей.\n \n - `\"on-hover\"` – на наведение указателя мыши.\n * - `\"always\"` – всегда показывать.\n \n > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n * > Определение просиходит с помощью двойного рендера, так что на устройствах без мыши\n * > оверлей покажется не раньше второго рендера.\n * > Если это критично (например при SSR), то старайтесь явно указывать значение `visibility`, либо используйте\n * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.\n /\n visibility?: 'on-hover' \| 'always';\n /\n `className` для компонента.\n /\n className?: string;\n}\n\nexport interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {\n /\n Обработчик взаимодействия с элементом.\n /\n onClick: React.MouseEventHandler<HTMLElement>;\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}\n\nexport interface ImageBaseOverlayNonInteractiveProps extends ImageBaseOverlayCommonProps {\n /\n По умолчанию сам компонент является интерактивным элементом. Передав значение равное `'undefined'` или не передав этот параметр вовсе, можно отключить\n * такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`.\n /\n onClick?: undefined;\n /\n Содержимое.\n */\n children: React.ReactNode;\n}\n"],"names":[],"mappings":"AAoDA,WAUC"}
1	+ {"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { HasRootRef } from '../../../types';\nimport type { ImageBaseExpectedIconProps } from '../types';\n\nexport interface ImageBaseOverlayCommonProps\n extends React.AriaAttributes,\n HasRootRef<HTMLDivElement> {\n /*\n Задаёт тему оформления.\n \n > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n /\n theme?: 'dark' \| 'light' \| undefined;\n /\n Определяет каким образом должен показываться оверлей.\n \n - `\"on-hover\"` – на наведение указателя мыши.\n * - `\"always\"` – всегда показывать.\n \n > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n * > Определение просиходит с помощью двойного рендера, так что на устройствах без мыши\n * > оверлей покажется не раньше второго рендера.\n * > Если это критично (например при SSR), то старайтесь явно указывать значение `visibility`, либо используйте\n * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.\n /\n visibility?: 'on-hover' \| 'always' \| undefined;\n /\n `className` для компонента.\n /\n className?: string \| undefined;\n}\n\nexport interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {\n /\n Обработчик взаимодействия с элементом.\n /\n onClick: React.MouseEventHandler<HTMLElement>;\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}\n\nexport interface ImageBaseOverlayNonInteractiveProps extends ImageBaseOverlayCommonProps {\n /\n По умолчанию сам компонент является интерактивным элементом. Передав значение равное `'undefined'` или не передав этот параметр вовсе, можно отключить\n * такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`.\n /\n onClick?: undefined;\n /\n Содержимое.\n */\n children: React.ReactNode;\n}\n"],"names":[],"mappings":"AAoDA,WAUC"}

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

@@ -4,15 +4,15 @@ export type ImageBaseExpectedIconProps = {
     /**
      * Ширина иконки.
      */
-    width?: number;
+    width?: number | undefined;
     /**
      * Высота иконки.
      */
-    height?: number;
+    height?: number | undefined;
     /**
      * ClassName для иконки.
      */
-    className?: string;
+    className?: string | undefined;
 };
 export interface ImageBaseContextProps {
     /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,uEAAwE,CAAC;AAEpG,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,MAAM,MAAM,0BAA0B,GAAG;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;~~IACf~~;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;~~IAChB~~;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;~~CACpB~~,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,IAAI,EAAE,aAAa,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,mBAAmB,EAAE,YAAY,EAAE,CAAC;IACpC;;OAEG;IACH,kBAAkB,EAAE,YAAY,EAAE,CAAC;CACpC"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,uEAAwE,CAAC;AAEpG,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,MAAM,MAAM,0BAA0B,GAAG;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,IAAI,EAAE,aAAa,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,mBAAmB,EAAE,YAAY,EAAE,CAAC;IACpC;;OAEG;IACH,kBAAkB,EAAE,YAAY,EAAE,CAAC;CACpC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n /*\n Ширина иконки.\n /\n width?: number;\n /\n Высота иконки.\n /\n height?: number;\n /\n ClassName для иконки.\n /\n className?: string;\n};\n\nexport interface ImageBaseContextProps {\n /\n Размер картинки.\n /\n size: ImageBaseSize \| number;\n /\n Обработчики события `mouseOver`.\n /\n onMouseOverHandlers: VoidFunction[];\n /\n Обработчики события `mouseOut`.\n */\n onMouseOutHandlers: VoidFunction[];\n}\n"],"names":["imageBaseSizes"],"mappings":"AAAA,OAAO,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG,CAAU"}
1	+ {"version":3,"sources":["../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n /*\n Ширина иконки.\n /\n width?: number \| undefined;\n /\n Высота иконки.\n /\n height?: number \| undefined;\n /\n ClassName для иконки.\n /\n className?: string \| undefined;\n};\n\nexport interface ImageBaseContextProps {\n /\n Размер картинки.\n /\n size: ImageBaseSize \| number;\n /\n Обработчики события `mouseOver`.\n /\n onMouseOverHandlers: VoidFunction[];\n /\n Обработчики события `mouseOut`.\n */\n onMouseOutHandlers: VoidFunction[];\n}\n"],"names":["imageBaseSizes"],"mappings":"AAAA,OAAO,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG,CAAU"}

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

@@ -5,16 +5,16 @@ export interface InputProps extends Pick<React.InputHTMLAttributes<HTMLInputElem
     /**
      * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
      */
-    getRef?: React.Ref<HTMLInputElement>;
+    getRef?: React.Ref<HTMLInputElement> | undefined;
     /**
      * Свойства, которые можно прокинуть внутрь компонента:
      * - `root`: свойства для прокидывания в корень компонента;
      * - `input`: свойства для прокидывания в поле ввода.
      */
     slotProps?: {
-        root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;
-        input?: React.InputHTMLAttributes<HTMLInputElement> & HasRootRef<HTMLInputElement> & HasDataAttribute;
-    };
+        root?: (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute) | undefined;
+        input?: (React.InputHTMLAttributes<HTMLInputElement> & HasRootRef<HTMLInputElement> & HasDataAttribute) | undefined;
+    } | undefined;
 }
 /**
  * @see https://vkui.io/components/input

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC1E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAWxE,MAAM,WAAW,UACf,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,cAAc,GACd,gBAAgB,GAChB,aAAa,GACb,UAAU,GACV,MAAM,GACN,KAAK,GACL,WAAW,GACX,KAAK,GACL,WAAW,GACX,UAAU,GACV,MAAM,GACN,SAAS,GACT,cAAc,GACd,aAAa,GACb,UAAU,GACV,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,GACN,UAAU,GACV,SAAS,GACT,QAAQ,CACX,EACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC,EAC7E,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;IACnC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;~~IACrC~~;;;;OAIG;IACH,SAAS,CAAC,~~EAAE~~;~~QACV~~,IAAI,CAAC,~~EAAE~~,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG,gBAAgB,CAAC;~~QAC5F~~,KAAK,CAAC,~~EAAE~~,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,~~GACjD~~,UAAU,CAAC,gBAAgB,CAAC,GAC5B,gBAAgB,CAAC;~~KACpB~~,CAAC;~~CACH~~;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,8VA4CnB,UAAU,KAAG,KAAK,CAAC,SAoErB,CAAC"}
1	+ {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC1E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAWxE,MAAM,WAAW,UACf,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,cAAc,GACd,gBAAgB,GAChB,aAAa,GACb,UAAU,GACV,MAAM,GACN,KAAK,GACL,WAAW,GACX,KAAK,GACL,WAAW,GACX,UAAU,GACV,MAAM,GACN,SAAS,GACT,cAAc,GACd,aAAa,GACb,UAAU,GACV,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,GACN,UAAU,GACV,SAAS,GACT,QAAQ,CACX,EACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC,EAC7E,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;IACnC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EACN;QACE,IAAI,CAAC,EACD,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG,gBAAgB,CAAC,GACtF,SAAS,CAAC;QACd,KAAK,CAAC,EACF,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAC1C,UAAU,CAAC,gBAAgB,CAAC,GAC5B,gBAAgB,CAAC,GACnB,SAAS,CAAC;KACf,GACD,SAAS,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,8VA4CnB,UAAU,KAAG,KAAK,CAAC,SAoErB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst warn = warnOnce('Input');\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nexport interface InputProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n \| 'autoComplete'\n \| 'autoCapitalize'\n \| 'autoCorrect'\n \| 'disabled'\n \| 'list'\n \| 'max'\n \| 'maxLength'\n \| 'min'\n \| 'minLength'\n \| 'multiple'\n \| 'name'\n \| 'pattern'\n \| 'enterKeyHint'\n \| 'placeholder'\n \| 'readOnly'\n \| 'required'\n \| 'step'\n \| 'type'\n \| 'value'\n \| 'form'\n \| 'onChange'\n \| 'onFocus'\n \| 'onBlur'\n >,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' \| 'onFocus' \| 'onBlur'>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n Omit<FormFieldProps, 'maxHeight'> {\n /*\n @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n /\n getRef?: React.Ref<HTMLInputElement~~>;\~~n /\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `input`: свойства для прокидывания в поле ввода.\n /\n slotProps?: {\n root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;\n input?: React.InputHTMLAttributes<HTMLInputElement> &\n HasRootRef<HTMLInputElement> &\n HasDataAttribute;\n };\n}\n\n/\n @see https://vkui.io/components/input\n /\nexport const Input = ({\n // InputProps\n align = 'left',\n getRef,\n\n // FormFieldProps\n before,\n after,\n status,\n mode,\n\n // input props\n autoComplete,\n autoCapitalize,\n autoCorrect,\n disabled,\n list,\n max,\n maxLength,\n min,\n minLength,\n multiple,\n name,\n pattern,\n enterKeyHint,\n placeholder,\n readOnly,\n required,\n step,\n type = 'text',\n value,\n onChange,\n onFocus,\n onBlur,\n form,\n id,\n inputMode,\n defaultValue,\n autoFocus,\n tabIndex,\n spellCheck,\n\n slotProps,\n ...restProps\n}: InputProps): React.ReactNode => {\n / istanbul ignore if: не проверяем в тестах */\n if (process.env.NODE_ENV === 'development' && getRef) {\n warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');\n }\n\n const { density = 'none' } = useAdaptivity();\n\n const { className, ...rootProps } = useMergeProps(restProps, slotProps?.root);\n\n const inputRest = useMergeProps(\n {\n className: styles.el,\n getRootRef: getRef,\n autoComplete,\n autoCapitalize,\n autoCorrect,\n disabled,\n list,\n max,\n maxLength,\n min,\n minLength,\n multiple,\n name,\n pattern,\n enterKeyHint,\n placeholder,\n readOnly,\n required,\n step,\n type,\n value,\n onChange,\n onFocus,\n onBlur,\n form,\n id,\n inputMode,\n defaultValue,\n autoFocus,\n tabIndex,\n spellCheck,\n },\n slotProps?.input,\n );\n\n return (\n <FormField\n className={classNames(\n styles.host,\n align === 'right' && styles.alignRight,\n align === 'center' && styles.alignCenter,\n density !== 'regular' && densityClassNames[density],\n before && styles.hasBefore,\n after && styles.hasAfter,\n className,\n )}\n before={before}\n after={after}\n disabled={inputRest.disabled}\n mode={mode}\n status={status}\n {...rootProps}\n >\n <UnstyledTextField as=\"input\" {...inputRest} />\n </FormField>\n );\n};\n"],"names":["classNames","useAdaptivity","useMergeProps","warnOnce","FormField","UnstyledTextField","warn","densityClassNames","none","compact","Input","align","getRef","before","after","status","mode","autoComplete","autoCapitalize","autoCorrect","disabled","list","max","maxLength","min","minLength","multiple","name","pattern","enterKeyHint","placeholder","readOnly","required","step","type","value","onChange","onFocus","onBlur","form","id","inputMode","defaultValue","autoFocus","tabIndex","spellCheck","slotProps","restProps","process","env","NODE_ENV","density","className","rootProps","root","inputRest","getRootRef","input","as"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,iBAAiB,QAAQ,4CAAyC;AAG3E,MAAMC,OAAOH,SAAS;AAEtB,MAAMI,oBAAoB;IACxBC,IAAI;IACJC,OAAO;AACT;~~AAkDA~~;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpB,aAAa;AACbC,QAAQ,MAAM,EACdC,MAAM,EAEN,iBAAiB;AACjBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EAEJ,cAAc;AACdC,YAAY,EACZC,cAAc,EACdC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,GAAG,EACHC,SAAS,EACTC,GAAG,EACHC,SAAS,EACTC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,YAAY,EACZC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,OAAO,MAAM,EACbC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,EAAE,EACFC,SAAS,EACTC,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,UAAU,EAEVC,SAAS,EACT,GAAGC,WACQ;IACX,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBtC,QAAQ;QACpDN,KAAK;IACP;IAEA,MAAM,EAAE6C,UAAU,MAAM,EAAE,GAAGlD;IAE7B,MAAM,EAAEmD,SAAS,EAAE,GAAGC,WAAW,GAAGnD,cAAc6C,WAAWD,WAAWQ;IAExE,MAAMC,YAAYrD,cAChB;QACEkD,SAAS;QACTI,YAAY5C;QACZK;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,GACAC,WAAWW;IAGb,qBACE,KAACrD;QACCgD,WAAWpD,8BAETW,UAAU,oCACVA,UAAU,sCACVwC,YAAY,aAAa5C,iBAAiB,CAAC4C,QAAQ,EACnDtC,kCACAC,gCACAsC;QAEFvC,QAAQA;QACRC,OAAOA;QACPM,UAAUmC,UAAUnC,QAAQ;QAC5BJ,MAAMA;QACND,QAAQA;QACP,GAAGsC,SAAS;kBAEb,cAAA,KAAChD;YAAkBqD,IAAG;YAAS,GAAGH,SAAS;;;AAGjD,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst warn = warnOnce('Input');\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nexport interface InputProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n \| 'autoComplete'\n \| 'autoCapitalize'\n \| 'autoCorrect'\n \| 'disabled'\n \| 'list'\n \| 'max'\n \| 'maxLength'\n \| 'min'\n \| 'minLength'\n \| 'multiple'\n \| 'name'\n \| 'pattern'\n \| 'enterKeyHint'\n \| 'placeholder'\n \| 'readOnly'\n \| 'required'\n \| 'step'\n \| 'type'\n \| 'value'\n \| 'form'\n \| 'onChange'\n \| 'onFocus'\n \| 'onBlur'\n >,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' \| 'onFocus' \| 'onBlur'>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n Omit<FormFieldProps, 'maxHeight'> {\n /*\n @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n /\n getRef?: React.Ref<HTMLInputElement> \| undefined;\n /\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `input`: свойства для прокидывания в поле ввода.\n /\n slotProps?:\n \| {\n root?:\n \| (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n \| undefined;\n input?:\n \| (React.InputHTMLAttributes<HTMLInputElement> &\n HasRootRef<HTMLInputElement> &\n HasDataAttribute)\n \| undefined;\n }\n \| undefined;\n}\n\n/\n @see https://vkui.io/components/input\n /\nexport const Input = ({\n // InputProps\n align = 'left',\n getRef,\n\n // FormFieldProps\n before,\n after,\n status,\n mode,\n\n // input props\n autoComplete,\n autoCapitalize,\n autoCorrect,\n disabled,\n list,\n max,\n maxLength,\n min,\n minLength,\n multiple,\n name,\n pattern,\n enterKeyHint,\n placeholder,\n readOnly,\n required,\n step,\n type = 'text',\n value,\n onChange,\n onFocus,\n onBlur,\n form,\n id,\n inputMode,\n defaultValue,\n autoFocus,\n tabIndex,\n spellCheck,\n\n slotProps,\n ...restProps\n}: InputProps): React.ReactNode => {\n / istanbul ignore if: не проверяем в тестах */\n if (process.env.NODE_ENV === 'development' && getRef) {\n warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');\n }\n\n const { density = 'none' } = useAdaptivity();\n\n const { className, ...rootProps } = useMergeProps(restProps, slotProps?.root);\n\n const inputRest = useMergeProps(\n {\n className: styles.el,\n getRootRef: getRef,\n autoComplete,\n autoCapitalize,\n autoCorrect,\n disabled,\n list,\n max,\n maxLength,\n min,\n minLength,\n multiple,\n name,\n pattern,\n enterKeyHint,\n placeholder,\n readOnly,\n required,\n step,\n type,\n value,\n onChange,\n onFocus,\n onBlur,\n form,\n id,\n inputMode,\n defaultValue,\n autoFocus,\n tabIndex,\n spellCheck,\n },\n slotProps?.input,\n );\n\n return (\n <FormField\n className={classNames(\n styles.host,\n align === 'right' && styles.alignRight,\n align === 'center' && styles.alignCenter,\n density !== 'regular' && densityClassNames[density],\n before && styles.hasBefore,\n after && styles.hasAfter,\n className,\n )}\n before={before}\n after={after}\n disabled={inputRest.disabled}\n mode={mode}\n status={status}\n {...rootProps}\n >\n <UnstyledTextField as=\"input\" {...inputRest} />\n </FormField>\n );\n};\n"],"names":["classNames","useAdaptivity","useMergeProps","warnOnce","FormField","UnstyledTextField","warn","densityClassNames","none","compact","Input","align","getRef","before","after","status","mode","autoComplete","autoCapitalize","autoCorrect","disabled","list","max","maxLength","min","minLength","multiple","name","pattern","enterKeyHint","placeholder","readOnly","required","step","type","value","onChange","onFocus","onBlur","form","id","inputMode","defaultValue","autoFocus","tabIndex","spellCheck","slotProps","restProps","process","env","NODE_ENV","density","className","rootProps","root","inputRest","getRootRef","input","as"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,iBAAiB,QAAQ,4CAAyC;AAG3E,MAAMC,OAAOH,SAAS;AAEtB,MAAMI,oBAAoB;IACxBC,IAAI;IACJC,OAAO;AACT;AAwDA;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpB,aAAa;AACbC,QAAQ,MAAM,EACdC,MAAM,EAEN,iBAAiB;AACjBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EAEJ,cAAc;AACdC,YAAY,EACZC,cAAc,EACdC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,GAAG,EACHC,SAAS,EACTC,GAAG,EACHC,SAAS,EACTC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,YAAY,EACZC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,OAAO,MAAM,EACbC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,EAAE,EACFC,SAAS,EACTC,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,UAAU,EAEVC,SAAS,EACT,GAAGC,WACQ;IACX,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBtC,QAAQ;QACpDN,KAAK;IACP;IAEA,MAAM,EAAE6C,UAAU,MAAM,EAAE,GAAGlD;IAE7B,MAAM,EAAEmD,SAAS,EAAE,GAAGC,WAAW,GAAGnD,cAAc6C,WAAWD,WAAWQ;IAExE,MAAMC,YAAYrD,cAChB;QACEkD,SAAS;QACTI,YAAY5C;QACZK;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,GACAC,WAAWW;IAGb,qBACE,KAACrD;QACCgD,WAAWpD,8BAETW,UAAU,oCACVA,UAAU,sCACVwC,YAAY,aAAa5C,iBAAiB,CAAC4C,QAAQ,EACnDtC,kCACAC,gCACAsC;QAEFvC,QAAQA;QACRC,OAAOA;QACPM,UAAUmC,UAAUnC,QAAQ;QAC5BJ,MAAMA;QACND,QAAQA;QACP,GAAGsC,SAAS;kBAEb,cAAA,KAAChD;YAAkBqD,IAAG;YAAS,GAAGH,SAAS;;;AAGjD,EAAE"}

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

@@ -2,9 +2,9 @@ import { type RootComponentProps } from '../RootComponent/RootComponent';
 export interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {
     length: number;
     index: number;
-    value?: string;
-    label?: string;
-    onElementSelect?: (index: number) => void;
+    value?: string | undefined;
+    label?: string | undefined;
+    onElementSelect?: ((index: number) => void) | undefined;
 }
 export declare const InputLike: ({ value, length, index, onElementSelect, onFocus, label, readOnly, onKeyDown, ...restProps }: InputLikeProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=InputLike.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputLike.d.ts","sourceRoot":"","sources":["../../../src/components/InputLike/InputLike.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAIxF,MAAM,WAAW,cAAe,SAAQ,kBAAkB,CAAC,eAAe,CAAC;IACzE,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;~~IACf~~,KAAK,CAAC,EAAE,MAAM,CAAC;~~IACf~~,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;~~CAC3C~~;AAgBD,eAAO,MAAM,SAAS,GAAI,8FAUvB,cAAc,4CA4BhB,CAAC"}
1	+ {"version":3,"file":"InputLike.d.ts","sourceRoot":"","sources":["../../../src/components/InputLike/InputLike.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAIxF,MAAM,WAAW,cAAe,SAAQ,kBAAkB,CAAC,eAAe,CAAC;IACzE,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACzD;AAgBD,eAAO,MAAM,SAAS,GAAI,8FAUvB,cAAc,4CA4BhB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc /\n\nimport as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {\n length: number;\n index: number;\n value?: string;\n label?: string;\n onElementSelect?: (index: number) => void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n const result = [];\n for (let index = 0; index < length; index += 1) {\n result.push(\n <span key={index} className={styles.mask}>\n {MASK_SYMBOL}\n </span>,\n );\n }\n return result;\n}\n\nexport const InputLike = ({\n value,\n length,\n index,\n onElementSelect,\n onFocus,\n label,\n readOnly,\n onKeyDown,\n ...restProps\n}: InputLikeProps) => {\n const handleElementSelect = React.useCallback(\n (event: React.MouseEvent<HTMLSpanElement>) => {\n stopPropagation(event);\n onElementSelect?.(index);\n },\n [index, onElementSelect],\n );\n\n return (\n <RootComponent\n Component=\"span\"\n baseClassName={value?.length === length ? styles.host : undefined}\n tabIndex={readOnly ? -1 : 0}\n onFocus={callMultiple(onFocus, handleElementSelect)}\n onKeyDown={readOnly ? undefined : onKeyDown}\n {...restProps}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n {value?.slice(0, length - 1)}\n {value?.slice(length - 1) && (\n <span key={index} className={styles.lastCharacter}>\n {value.slice(length - 1)}\n </span>\n )}\n {getMaskElements(length - (value?.length ?? 0))}\n </RootComponent>\n );\n};\n"],"names":["React","callMultiple","stopPropagation","RootComponent","VisuallyHidden","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","className","InputLike","value","onElementSelect","onFocus","label","readOnly","onKeyDown","restProps","handleElementSelect","useCallback","event","Component","baseClassName","undefined","tabIndex","slice"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,QAAQ,qBAAkB;AAClD,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,cAAc,QAAQ,sCAAmC;AAWlE,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,KAACC;YAAiBC,SAAS;sBACxBT;WADQM;IAIf;IACA,OAAOD;AACT;AAEA,OAAO,MAAMK,YAAY,CAAC,EACxBC,KAAK,EACLP,MAAM,EACNE,KAAK,EACLM,eAAe,EACfC,OAAO,EACPC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACY;IACf,MAAMC,sBAAsBvB,MAAMwB,WAAW,CAC3C,CAACC;QACCvB,gBAAgBuB;QAChBR,kBAAkBN;IACpB,GACA;QAACA;QAAOM;KAAgB;IAG1B,qBACE,MAACd;QACCuB,WAAU;QACVC,eAAeX,OAAOP,WAAWA,iCAAuBmB;QACxDC,UAAUT,WAAW,CAAC,IAAI;QAC1BF,SAASjB,aAAaiB,SAASK;QAC/BF,WAAWD,WAAWQ,YAAYP;QACjC,GAAGC,SAAS;;YAEZH,uBAAS,KAACf;0BAAgBe;;YAC1BH,OAAOc,MAAM,GAAGrB,SAAS;YACzBO,OAAOc,MAAMrB,SAAS,oBACrB,KAACI;gBAAiBC,SAAS;0BACxBE,MAAMc,KAAK,CAACrB,SAAS;eADbE;YAIZH,gBAAgBC,SAAUO,CAAAA,OAAOP,UAAU,CAAA;;;AAGlD,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc /\n\nimport as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {\n length: number;\n index: number;\n value?: string \| undefined;\n label?: string \| undefined;\n onElementSelect?: ((index: number) => void) \| undefined;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n const result = [];\n for (let index = 0; index < length; index += 1) {\n result.push(\n <span key={index} className={styles.mask}>\n {MASK_SYMBOL}\n </span>,\n );\n }\n return result;\n}\n\nexport const InputLike = ({\n value,\n length,\n index,\n onElementSelect,\n onFocus,\n label,\n readOnly,\n onKeyDown,\n ...restProps\n}: InputLikeProps) => {\n const handleElementSelect = React.useCallback(\n (event: React.MouseEvent<HTMLSpanElement>) => {\n stopPropagation(event);\n onElementSelect?.(index);\n },\n [index, onElementSelect],\n );\n\n return (\n <RootComponent\n Component=\"span\"\n baseClassName={value?.length === length ? styles.host : undefined}\n tabIndex={readOnly ? -1 : 0}\n onFocus={callMultiple(onFocus, handleElementSelect)}\n onKeyDown={readOnly ? undefined : onKeyDown}\n {...restProps}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n {value?.slice(0, length - 1)}\n {value?.slice(length - 1) && (\n <span key={index} className={styles.lastCharacter}>\n {value.slice(length - 1)}\n </span>\n )}\n {getMaskElements(length - (value?.length ?? 0))}\n </RootComponent>\n );\n};\n"],"names":["React","callMultiple","stopPropagation","RootComponent","VisuallyHidden","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","className","InputLike","value","onElementSelect","onFocus","label","readOnly","onKeyDown","restProps","handleElementSelect","useCallback","event","Component","baseClassName","undefined","tabIndex","slice"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,QAAQ,qBAAkB;AAClD,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,cAAc,QAAQ,sCAAmC;AAWlE,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,KAACC;YAAiBC,SAAS;sBACxBT;WADQM;IAIf;IACA,OAAOD;AACT;AAEA,OAAO,MAAMK,YAAY,CAAC,EACxBC,KAAK,EACLP,MAAM,EACNE,KAAK,EACLM,eAAe,EACfC,OAAO,EACPC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACY;IACf,MAAMC,sBAAsBvB,MAAMwB,WAAW,CAC3C,CAACC;QACCvB,gBAAgBuB;QAChBR,kBAAkBN;IACpB,GACA;QAACA;QAAOM;KAAgB;IAG1B,qBACE,MAACd;QACCuB,WAAU;QACVC,eAAeX,OAAOP,WAAWA,iCAAuBmB;QACxDC,UAAUT,WAAW,CAAC,IAAI;QAC1BF,SAASjB,aAAaiB,SAASK;QAC/BF,WAAWD,WAAWQ,YAAYP;QACjC,GAAGC,SAAS;;YAEZH,uBAAS,KAACf;0BAAgBe;;YAC1BH,OAAOc,MAAM,GAAGrB,SAAS;YACzBO,OAAOc,MAAMrB,SAAS,oBACrB,KAACI;gBAAiBC,SAAS;0BACxBE,MAAMc,KAAK,CAACrB,SAAS;eADbE;YAIZH,gBAAgBC,SAAUO,CAAAA,OAAOP,UAAU,CAAA;;;AAGlD,EAAE"}

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

@@ -4,19 +4,19 @@ export interface LinkProps extends TappableOmitProps {
     /**
      * Иконка слева.
      */
-    before?: ReactElement;
+    before?: ReactElement | undefined;
     /**
      * Иконка справа.
      */
-    after?: ReactElement;
+    after?: ReactElement | undefined;
     /**
      * Выключает появления нижнего подчеркивания при наведении.
      */
-    noUnderline?: boolean;
+    noUnderline?: boolean | undefined;
     /**
      * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет.
      */
-    hasVisited?: boolean;
+    hasVisited?: boolean | undefined;
 }
 /**
  * @see https://vkui.io/components/link

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGxE,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;~~IACtB~~;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;~~IACrB~~;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;~~IACtB~~;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;~~CACtB~~;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,2FAOlB,SAAS,KAAG,KAAK,CAAC,SAsBpB,CAAC"}
1	+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGxE,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAClC;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,2FAOlB,SAAS,KAAG,KAAK,CAAC,SAsBpB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableOmitProps {\n /*\n Иконка слева.\n /\n before?: ReactElement;\n /\n Иконка справа.\n /\n after?: ReactElement;\n /\n Выключает появления нижнего подчеркивания при наведении.\n /\n noUnderline?: boolean;\n /\n Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет.\n /\n hasVisited?: boolean;\n}\n\n/\n @see https://vkui.io/components/link\n */\nexport const Link = ({\n before: beforeProp,\n after: afterProp,\n noUnderline,\n hasVisited,\n children,\n ...restProps\n}: LinkProps): React.ReactNode => {\n const before = beforeProp ? <span className={styles.before}>{beforeProp}</span> : null;\n const after = afterProp ? <span className={styles.after}>{afterProp}</span> : null;\n\n return (\n <Tappable\n activeMode=\"opacity\"\n hoverMode={styles.hover}\n focusVisibleMode=\"outside\"\n DefaultComponent=\"span\"\n {...restProps}\n baseClassName={classNames(\n styles.host,\n hasVisited && styles.hasVisited,\n !noUnderline && styles.withUnderline,\n )}\n >\n {before}\n {children}\n {after}\n </Tappable>\n );\n};\n"],"names":["classNames","Tappable","Link","before","beforeProp","after","afterProp","noUnderline","hasVisited","children","restProps","span","className","activeMode","hoverMode","focusVisibleMode","DefaultComponent","baseClassName"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAgC,0BAAuB;AAsBxE;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQC,UAAU,EAClBC,OAAOC,SAAS,EAChBC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACR,GAAGC,WACO;IACV,MAAMP,SAASC,2BAAa,KAACO;QAAKC,SAAS;kBAAkBR;SAAqB;IAClF,MAAMC,QAAQC,0BAAY,KAACK;QAAKC,SAAS;kBAAiBN;SAAoB;IAE9E,qBACE,MAACL;QACCY,YAAW;QACXC,SAAS;QACTC,kBAAiB;QACjBC,kBAAiB;QAChB,GAAGN,SAAS;QACbO,eAAejB,6BAEbQ,sCACA,CAACD;;YAGFJ;YACAM;YACAJ;;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableOmitProps {\n /*\n Иконка слева.\n /\n before?: ReactElement \| undefined;\n /\n Иконка справа.\n /\n after?: ReactElement \| undefined;\n /\n Выключает появления нижнего подчеркивания при наведении.\n /\n noUnderline?: boolean \| undefined;\n /\n Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет.\n /\n hasVisited?: boolean \| undefined;\n}\n\n/\n @see https://vkui.io/components/link\n */\nexport const Link = ({\n before: beforeProp,\n after: afterProp,\n noUnderline,\n hasVisited,\n children,\n ...restProps\n}: LinkProps): React.ReactNode => {\n const before = beforeProp ? <span className={styles.before}>{beforeProp}</span> : null;\n const after = afterProp ? <span className={styles.after}>{afterProp}</span> : null;\n\n return (\n <Tappable\n activeMode=\"opacity\"\n hoverMode={styles.hover}\n focusVisibleMode=\"outside\"\n DefaultComponent=\"span\"\n {...restProps}\n baseClassName={classNames(\n styles.host,\n hasVisited && styles.hasVisited,\n !noUnderline && styles.withUnderline,\n )}\n >\n {before}\n {children}\n {after}\n </Tappable>\n );\n};\n"],"names":["classNames","Tappable","Link","before","beforeProp","after","afterProp","noUnderline","hasVisited","children","restProps","span","className","activeMode","hoverMode","focusVisibleMode","DefaultComponent","baseClassName"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAgC,0BAAuB;AAsBxE;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQC,UAAU,EAClBC,OAAOC,SAAS,EAChBC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACR,GAAGC,WACO;IACV,MAAMP,SAASC,2BAAa,KAACO;QAAKC,SAAS;kBAAkBR;SAAqB;IAClF,MAAMC,QAAQC,0BAAY,KAACK;QAAKC,SAAS;kBAAiBN;SAAoB;IAE9E,qBACE,MAACL;QACCY,YAAW;QACXC,SAAS;QACTC,kBAAiB;QACjBC,kBAAiB;QAChB,GAAGN,SAAS;QACbO,eAAejB,6BAEbQ,sCACA,CAACD;;YAGFJ;YACAM;YACAJ;;;AAGP,EAAE"}