@vkontakte/vkui 8.0.0 → 8.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "8.0.0",
+  "version": "8.0.2",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/Clickable/useState.tsx

@@ -182,11 +182,11 @@ function useActive({
   }
 
   React.useEffect(() => {
-    if (lockState) {
-      // Сбрасываем setActivated если обнаруживаем lockState
+    if (lockState || !hasActive) {
+      // Сбрасываем setActivated если обнаруживаем lockState или !hasActive
       setActivated(false);
     }
-  }, [lockState, setActivated]);
+  }, [lockState, hasActive, setActivated]);
 
   const onPointerDown = () => {
     if (lockState) {

package/src/components/CustomSelect/CustomSelect.tsx

@@ -304,7 +304,8 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     multiline,
     placeholder,
     'icon': iconProp,
-    selectType = 'default',
+    selectType,
+    mode,
     align,
     form,
 
@@ -771,7 +772,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         accessible={accessible}
         before={before}
         after={afterItems}
-        selectType={selectType}
+        selectType={selectType || mode || 'default'}
         align={align}
         status={status}
         multiline={multiline}

package/src/components/FormItem/FormItemTop/FormItemTopAside.tsx

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import type { HasComponent, HasRootRef } from '../../../types';
 import { Subhead } from '../../Typography/Subhead/Subhead';
 import styles from '../FormItem.module.css';
@@ -14,9 +15,9 @@ export interface FormItemTopAsideProps
  * @since 6.1.0
  *
  */
-export const FormItemTopAside = ({ children, ...restProps }: FormItemTopAsideProps) => {
+export const FormItemTopAside = ({ children, className, ...restProps }: FormItemTopAsideProps) => {
   return (
-    <Subhead className={styles.aside} {...restProps}>
+    <Subhead className={classNames(className, styles.aside)} {...restProps}>
       {children}
     </Subhead>
   );

package/src/components/FormItem/FormItemTop/FormItemTopLabel.tsx

@@ -23,6 +23,7 @@ export const FormItemTopLabel = ({
   children,
   Component: componentProp,
   htmlFor,
+  className,
   ...restProps
 }: FormItemTopLabelProps) => {
   const component = componentProp || (htmlFor && 'label') || 'span';
@@ -30,7 +31,7 @@ export const FormItemTopLabel = ({
 
   return (
     <Subhead
-      className={classNames(styles.label, topMultiline && styles.labelMultiline)}
+      className={classNames(className, styles.label, topMultiline && styles.labelMultiline)}
       Component={component}
       htmlFor={htmlFor}
       {...restProps}

package/src/components/ImageBase/ImageBase.module.css

@@ -41,10 +41,19 @@
   transform-origin: left top;
 }
 
-.img {
-  display: block;
+.imgWithFilterContainer {
+  overflow: hidden; /* Обрезает сайд-эффекты свойства `filter`. */
+}
+
+.img,
+.imgWithFilterContainer {
   inline-size: 100%;
   block-size: 100%;
+  border-radius: inherit;
+}
+
+.img {
+  display: block;
   /* Скрывает текст из атрибута alt. */
   color: transparent;
   /*
@@ -53,7 +62,6 @@
   */
   text-indent: 10000px;
   border: 0;
-  border-radius: inherit;
 }
 
 .imgKeepRatio {

package/src/components/ImageBase/ImageBase.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./ImageBase.module.css"],"names":["host","loaded","transparentBackground","children","border","img","imgKeepRatio","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","withObjectPosition","withFilter","imgHiddenAlt","fallback"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,Q,WAbA;AAAA,E,aAcAC,uB,WAdA;AAAA,E,aAkBAC,U,WAlBA;AAAA,E,aAmBAC,Q,WAnBA;AAAA,E,aA2BAD,U,WA3BA;AAAA,E,aAkCAC,Q,WAlCA;AAAA,E,aA2CAC,K,WA3CA;AAAA,E,aA0DAC,c,WA1DA;AAAA,E,aA+DAC,qB,WA/DA;AAAA,E,aAmEAC,mB,WAnEA;AAAA,E,aAuEAC,kB,WAvEA;AAAA,E,aA2EAC,uB,WA3EA;AAAA,E,aA+EAC,oB,WA/EA;AAAA,E,aAwFAC,Y,WAxFA;AAAA,E,aAiGAC,c,WAjGA;AAAA,E,aAqGAC,U,WArGA;AAAA,E,aAkH4Cd,M,WAlH5C;AAAA,E,aAuH2CA,M,WAvH3C;AAAA;AAAA","file":"ImageBase.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ImageBase.module.css"],"names":["host","loaded","transparentBackground","children","border","imgWithFilterContainer","img","imgKeepRatio","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","withObjectPosition","withFilter","imgHiddenAlt","fallback"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,Q,WAbA;AAAA,E,aAcAC,uB,WAdA;AAAA,E,aAkBAC,U,WAlBA;AAAA,E,aAmBAC,Q,WAnBA;AAAA,E,aA2BAD,U,WA3BA;AAAA,E,aAkCAC,Q,WAlCA;AAAA,E,aA2CAC,wB,WA3CA;AAAA,E,aA+CAC,K,WA/CA;AAAA,E,aAgDAD,wB,WAhDA;AAAA,E,aAsDAC,K,WAtDA;AAAA,E,aAkEAC,c,WAlEA;AAAA,E,aAuEAC,qB,WAvEA;AAAA,E,aA2EAC,mB,WA3EA;AAAA,E,aA+EAC,kB,WA/EA;AAAA,E,aAmFAC,uB,WAnFA;AAAA,E,aAuFAC,oB,WAvFA;AAAA,E,aAgGAC,Y,WAhGA;AAAA,E,aAyGAC,c,WAzGA;AAAA,E,aA6GAC,U,WA7GA;AAAA,E,aA0H4Cf,M,WA1H5C;AAAA,E,aA+H2CA,M,WA/H3C;AAAA;AAAA","file":"ImageBase.module.css.d.ts","sourceRoot":""}

package/src/components/ImageBase/ImageBase.tsx

@@ -118,8 +118,10 @@ export interface ImageBaseProps
    */
   elementTiming?: string;
   /**
-   * Пользовательское значения стиля filter
+   * Пользовательское значения стиля filter.
    * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).
+   *
+   * При передаче этого свойства `<img />` будет обёрнут в дополнительный контейнер.
    */
   filter?: React.CSSProperties['filter'];
   /**
@@ -337,6 +339,10 @@ export const ImageBase: React.FC<ImageBaseProps> & {
     [mouseOutHandlers, mouseOverHandlers, size],
   );
 
+  const imgSlot = hasSrc && (
+    <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />
+  );
+
   return (
     <ImageBaseContext.Provider value={contextValue}>
       <Clickable
@@ -351,7 +357,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
         onMouseOut={onMouseOut}
         {...restProps}
       >
-        {hasSrc && <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />}
+        {filter ? <div className={styles.imgWithFilterContainer}>{imgSlot}</div> : imgSlot}
         {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}
         {children && <div className={styles.children}>{children}</div>}
         {!noBorder && <div aria-hidden className={styles.border} />}

package/src/components/Input/Input.tsx

@@ -32,6 +32,7 @@ export interface InputProps
       | 'multiple'
       | 'name'
       | 'pattern'
+      | 'enterKeyHint'
       | 'placeholder'
       | 'readOnly'
       | 'required'
@@ -91,6 +92,7 @@ export const Input = ({
   multiple,
   name,
   pattern,
+  enterKeyHint,
   placeholder,
   readOnly,
   required,
@@ -136,6 +138,7 @@ export const Input = ({
       multiple,
       name,
       pattern,
+      enterKeyHint,
       placeholder,
       readOnly,
       required,

package/src/components/Search/Search.tsx

@@ -42,6 +42,7 @@ export interface SearchProps
       | 'minLength'
       | 'name'
       | 'pattern'
+      | 'enterKeyHint'
       | 'placeholder'
       | 'readOnly'
       | 'required'
@@ -146,7 +147,6 @@ export const Search = ({
   getRef,
 
   // input props
-  placeholder: placeholderProp = 'Поиск',
   autoComplete = 'off',
   autoCapitalize,
   autoCorrect,
@@ -156,6 +156,8 @@ export const Search = ({
   minLength,
   name,
   pattern,
+  placeholder: placeholderProp = 'Поиск',
+  enterKeyHint,
   readOnly,
   required,
   value,
@@ -212,6 +214,7 @@ export const Search = ({
       minLength,
       name,
       pattern,
+      enterKeyHint,
       readOnly,
       required,
       value,