@vkontakte/vkui 7.1.3 → 7.2.0

package/dist/cssm/components/ContentCard/ContentCard.js

@@ -13,7 +13,7 @@ import styles from "./ContentCard.module.css";
  * @see https://vkcom.github.io/VKUI/#/ContentCard
  */ export const ContentCard = ({ overTitle, title, titleComponent = 'span', description, caption, // card props
 className, mode = 'shadow', style, getRootRef, // img props
-getRef, maxHeight, src, srcSet, alt = '', width, height, crossOrigin, decoding, loading, referrerPolicy, sizes, useMap, fetchPriority, hasHover = false, hasActive = false, Component = 'li', ...restProps })=>{
+getRef, maxHeight, src, srcSet, alt = '', width = '100%', height, crossOrigin, decoding, loading, referrerPolicy, sizes, useMap, fetchPriority, imageObjectFit, hasHover = false, hasActive = false, Component = 'li', ...restProps })=>{
     return /*#__PURE__*/ _jsx(Card, {
         mode: mode,
         getRootRef: getRootRef,
@@ -40,10 +40,11 @@ getRef, maxHeight, src, srcSet, alt = '', width, height, crossOrigin, decoding,
                     useMap: useMap,
                     ...getFetchPriorityProp(fetchPriority),
                     height: height,
+                    width: width,
                     style: {
-                        maxHeight
-                    },
-                    width: "100%"
+                        maxHeight,
+                        objectFit: imageObjectFit
+                    }
                 }),
                 /*#__PURE__*/ _jsxs("div", {
                     className: styles.body,

package/dist/cssm/components/ContentCard/ContentCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    HasComponent,\n    Omit<TappableProps, 'getRootRef' | 'crossOrigin' | 'title'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком\n   */\n  overTitle?: React.ReactNode;\n  /**\n   Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка\n   */\n  titleComponent?: React.ElementType;\n  /**\n   Текст\n   */\n  description?: React.ReactNode;\n  /**\n   Нижний текст\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения\n   */\n  maxHeight?: number;\n  mode?: CardProps['mode'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n  overTitle,\n  title,\n  titleComponent = 'span',\n  description,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width,\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  hasHover = false,\n  hasActive = false,\n  Component = 'li',\n  ...restProps\n}: ContentCardProps): React.ReactNode => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      Component={Component}\n      style={style}\n      className={classNames(restProps.disabled && styles.disabled, className)}\n    >\n      <Tappable\n        {...restProps}\n        hasHover={hasHover}\n        hasActive={hasActive}\n        className={styles.tappable}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            style={{ maxHeight }}\n            width=\"100%\"\n          />\n        )}\n        <div className={styles.body}>\n          {hasReactNode(overTitle) && (\n            <Caption\n              className={classNames(styles.text, styles.overTitle)}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {overTitle}\n            </Caption>\n          )}\n          {hasReactNode(title) && (\n            <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n              {title}\n            </Headline>\n          )}\n          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","hasHover","hasActive","Component","restProps","disabled","tappable","img","ref","div","body","text","weight","level","caps"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;AAmC9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;AACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;AACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAChB,GAAGC,WACc;IACjB,qBACE,KAAClC;QACCc,MAAMA;QACNE,YAAYA;QACZiB,WAAWA;QACXlB,OAAOA;QACPF,WAAWhB,WAAWqC,UAAUC,QAAQ,IAAI7B,OAAO6B,QAAQ,EAAEtB;kBAE7D,cAAA,MAACZ;YACE,GAAGiC,SAAS;YACbH,UAAUA;YACVC,WAAWA;YACXnB,WAAWP,OAAO8B,QAAQ;;gBAExBjB,CAAAA,OAAOC,MAAK,mBACZ,KAACiB;oBACCC,KAAKrB;oBACLJ,WAAWP,OAAO+B,GAAG;oBACrBlB,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG9B,qBAAqB+B,cAAc;oBACvCP,QAAQA;oBACRR,OAAO;wBAAEG;oBAAU;oBACnBI,OAAM;;8BAGV,MAACiB;oBAAI1B,WAAWP,OAAOkC,IAAI;;wBACxB1C,aAAaU,4BACZ,KAACN;4BACCW,WAAWhB,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOE,SAAS;4BACnDkC,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHpC;;wBAGJV,aAAaW,wBACZ,KAACL;4BAASS,WAAWP,OAAOmC,IAAI;4BAAEC,QAAO;4BAAIC,OAAM;4BAAIV,WAAWvB;sCAC/DD;;wBAGJX,aAAaa,8BAAgB,KAACN;4BAAKQ,WAAWP,OAAOmC,IAAI;sCAAG9B;;wBAC5Db,aAAac,0BACZ,KAACT;4BAASU,WAAWhB,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOM,OAAO;sCAAIA;;;;;;;AAM3E,EAAE"}
+{"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    HasComponent,\n    Omit<TappableProps, 'getRootRef' | 'crossOrigin' | 'title'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком\n   */\n  overTitle?: React.ReactNode;\n  /**\n   Заголовок\n   */\n  title?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка\n   */\n  titleComponent?: React.ElementType;\n  /**\n   Текст\n   */\n  description?: React.ReactNode;\n  /**\n   Нижний текст\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения\n   */\n  maxHeight?: number;\n  mode?: CardProps['mode'];\n  /**\n   * Пользовательское значения стиля `object-fit` для картинки\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n  overTitle,\n  title,\n  titleComponent = 'span',\n  description,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width = '100%',\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  imageObjectFit,\n  hasHover = false,\n  hasActive = false,\n  Component = 'li',\n  ...restProps\n}: ContentCardProps): React.ReactNode => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      Component={Component}\n      style={style}\n      className={classNames(restProps.disabled && styles.disabled, className)}\n    >\n      <Tappable\n        {...restProps}\n        hasHover={hasHover}\n        hasActive={hasActive}\n        className={styles.tappable}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles.img}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            width={width}\n            style={{ maxHeight, objectFit: imageObjectFit }}\n          />\n        )}\n        <div className={styles.body}>\n          {hasReactNode(overTitle) && (\n            <Caption\n              className={classNames(styles.text, styles.overTitle)}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {overTitle}\n            </Caption>\n          )}\n          {hasReactNode(title) && (\n            <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n              {title}\n            </Headline>\n          )}\n          {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","imageObjectFit","hasHover","hasActive","Component","restProps","disabled","tappable","img","ref","objectFit","div","body","text","weight","level","caps"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;AAwC9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;AACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;AACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAChB,GAAGC,WACc;IACjB,qBACE,KAACnC;QACCc,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWhB,WAAWsC,UAAUC,QAAQ,IAAI9B,OAAO8B,QAAQ,EAAEvB;kBAE7D,cAAA,MAACZ;YACE,GAAGkC,SAAS;YACbH,UAAUA;YACVC,WAAWA;YACXpB,WAAWP,OAAO+B,QAAQ;;gBAExBlB,CAAAA,OAAOC,MAAK,mBACZ,KAACkB;oBACCC,KAAKtB;oBACLJ,WAAWP,OAAOgC,GAAG;oBACrBnB,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG9B,qBAAqB+B,cAAc;oBACvCP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWsB,WAAWT;oBAAe;;8BAGlD,MAACU;oBAAI5B,WAAWP,OAAOoC,IAAI;;wBACxB5C,aAAaU,4BACZ,KAACN;4BACCW,WAAWhB,WAAWS,OAAOqC,IAAI,EAAErC,OAAOE,SAAS;4BACnDoC,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHtC;;wBAGJV,aAAaW,wBACZ,KAACL;4BAASS,WAAWP,OAAOqC,IAAI;4BAAEC,QAAO;4BAAIC,OAAM;4BAAIX,WAAWxB;sCAC/DD;;wBAGJX,aAAaa,8BAAgB,KAACN;4BAAKQ,WAAWP,OAAOqC,IAAI;sCAAGhC;;wBAC5Db,aAAac,0BACZ,KAACT;4BAASU,WAAWhB,WAAWS,OAAOqC,IAAI,EAAErC,OAAOM,OAAO;sCAAIA;;;;;;;AAM3E,EAAE"}

package/dist/cssm/components/ContentCard/ContentCard.module.css

@@ -8,20 +8,20 @@
 }
 
 .tappable {
-  border-radius: var(--vkui--size_card_border_radius--regular);
-  text-decoration: none;
-  color: var(--vkui--color_text_primary);
-  block-size: 100%;
   display: block;
+  block-size: 100%;
+  color: var(--vkui--color_text_primary);
+  text-decoration: none;
+  border-radius: var(--vkui--size_card_border_radius--regular);
 }
 
 .img {
-  object-fit: cover;
   display: block;
+  object-fit: cover;
   border-start-start-radius: var(--vkui--size_card_border_radius--regular);
   border-start-end-radius: var(--vkui--size_card_border_radius--regular);
-  border-end-end-radius: 0;
   border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .text:not(:last-child) {

package/dist/cssm/components/Counter/Counter.module.css

@@ -1,12 +1,12 @@
 .host {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-inline: 5px;
+  color: var(--vkui_internal--counter_foreground);
   text-align: center;
-  box-sizing: border-box;
   background: var(--vkui_internal--counter_background);
-  color: var(--vkui_internal--counter_foreground);
 
   --vkui_internal--counter_background: transparent;
   --vkui_internal--counter_foreground: var(--vkui--color_text_contrast);
@@ -94,14 +94,14 @@
 /*----------------------------------*/
 
 .sizeM {
-  block-size: 24px;
   min-inline-size: 24px;
+  block-size: 24px;
   border-radius: 12px;
 }
 
 .sizeS {
-  block-size: 18px;
   min-inline-size: 18px;
+  block-size: 18px;
   border-radius: 9px;
 }
 

package/dist/cssm/components/CustomScrollView/CustomScrollView.module.css

@@ -1,8 +1,8 @@
 .host {
   inline-size: 100%;
   block-size: 100%;
-  overflow-y: auto;
   overflow-x: hidden;
+  overflow-y: auto;
 }
 
 @supports (scrollbar-color: auto) {
@@ -39,9 +39,9 @@
   .host::-webkit-scrollbar-thumb,
   .host::-webkit-scrollbar-thumb {
     background-color: var(--vkui--color_icon_tertiary_alpha);
+    background-clip: padding-box, content-box;
     border: 3px solid transparent;
     border-radius: 6px;
-    background-clip: padding-box, content-box;
   }
 
   .host::-webkit-scrollbar-thumb:hover,

package/dist/cssm/components/CustomSelect/CustomSelect.js

@@ -5,6 +5,7 @@ import { classNames, debounce } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useFocusWithin } from "../../hooks/useFocusWithin.js";
+import { useStateWithPrev } from "../../hooks/useStateWithPrev.js";
 import { callMultiple } from "../../lib/callMultiple.js";
 import { useDOM } from "../../lib/dom.js";
 import { defaultFilterFn } from "../../lib/select.js";
@@ -77,6 +78,9 @@ function findSelectedIndex(options = [], value) {
 const filter = (options, inputValue, filterFn)=>{
     return typeof filterFn === 'function' ? options.filter((option)=>filterFn(inputValue, option)) : options;
 };
+function isMousePositionChanged(event, prevPosition) {
+    return Math.abs(prevPosition.x - event.clientX) >= 1 || Math.abs(prevPosition.y - event.clientY) >= 1;
+}
 /**
  * @see https://vkcom.github.io/VKUI/#/CustomSelect
  */ export function CustomSelect(props) {
@@ -91,10 +95,11 @@ const filter = (options, inputValue, filterFn)=>{
     const scrollBoxRef = React.useRef(null);
     const selectElRef = useExternRef(getRef);
     const optionsWrapperRef = React.useRef(null);
+    const scrollPerformedRef = React.useRef(false);
     const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
     const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
     const [inputValue, setInputValue] = React.useState('');
-    const [nativeSelectValue, setNativeSelectValue] = React.useState(()=>{
+    const [[nativeSelectValue, prevNativeSelectValue], setNativeSelectValue] = useStateWithPrev(()=>{
         if (props.value !== undefined) {
             return remapFromSelectValueToNativeValue(props.value);
         }
@@ -104,23 +109,42 @@ const filter = (options, inputValue, filterFn)=>{
         return NOT_SELECTED.NATIVE;
     });
     const [popperPlacement, setPopperPlacement] = React.useState(popupDirection);
-    const [options, setOptions] = React.useState(optionsProp);
-    const [selectedOptionIndex, setSelectedOptionIndex] = React.useState(findSelectedIndex(optionsProp, props.value ?? defaultValue ?? null));
-    React.useEffect(()=>{
+    const options = React.useMemo(()=>{
+        return filter(optionsProp, inputValue, filterFn);
+    }, [
+        filterFn,
+        inputValue,
+        optionsProp
+    ]);
+    const [selectedOptionIndex, setSelectedOptionIndex] = React.useState(findSelectedIndex(options, props.value ?? defaultValue ?? null));
+    React.useEffect(function updateOptionsIndexes() {
+        const value = props.value !== undefined ? props.value : remapFromNativeValueToSelectValue(nativeSelectValue);
+        const selectedIndex = findSelectedIndex(options, value);
+        setSelectedOptionIndex(selectedIndex);
+        setFocusedOptionIndex(selectedIndex);
+    }, [
+        props.value,
+        nativeSelectValue,
+        options,
+        filterFn
+    ]);
+    React.useEffect(function syncIsControlledState() {
         setIsControlledOutside((oldIsControlled)=>{
             const newIsControlled = props.value !== undefined;
             checkMixControlledAndUncontrolledState(oldIsControlled, newIsControlled);
             return newIsControlled;
         });
-        setNativeSelectValue((nativeSelectValue)=>{
-            if (props.value !== undefined) {
-                return remapFromSelectValueToNativeValue(props.value);
-            }
-            return nativeSelectValue;
-        });
     }, [
         props.value
     ]);
+    React.useEffect(function syncNativeSelectValueWithPropValue() {
+        if (props.value !== undefined) {
+            setNativeSelectValue(remapFromSelectValueToNativeValue(props.value));
+        }
+    }, [
+        props.value,
+        setNativeSelectValue
+    ]);
     useIsomorphicLayoutEffect(()=>{
         if (options.some(({ value })=>nativeSelectValue === value) || allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE) {
             const event = new Event('change', {
@@ -175,8 +199,7 @@ const filter = (options, inputValue, filterFn)=>{
         if (scrollTo) {
             scrollToElement(index);
         }
-        // Это оптимизация, прежде всего, под `onMouseMove`
-        setFocusedOptionIndex((focusedOptionIndex)=>focusedOptionIndex !== index ? index : focusedOptionIndex);
+        setFocusedOptionIndex(index);
     }, [
         options,
         scrollToElement
@@ -186,17 +209,24 @@ const filter = (options, inputValue, filterFn)=>{
     }, [
         options.length
     ]);
-    const setScrollBoxRef = React.useCallback((ref)=>{
-        scrollBoxRef.current = ref;
-        if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {
-            {
-                scrollToElement(selectedOptionIndex, true);
-            }
+    useIsomorphicLayoutEffect(()=>{
+        if (!opened) {
+            scrollPerformedRef.current = false;
+            return;
+        }
+        if (scrollPerformedRef.current) {
+            return;
+        }
+        const isIndexValid = selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex);
+        if (scrollBoxRef.current && isIndexValid) {
+            scrollPerformedRef.current = true;
+            scrollToElement(selectedOptionIndex, true);
         }
     }, [
-        isValidIndex,
+        opened,
+        selectedOptionIndex,
         scrollToElement,
-        selectedOptionIndex
+        isValidIndex
     ]);
     const [keyboardInput, setKeyboardInput] = React.useState('');
     const resetKeyboardInput = React.useCallback(()=>{
@@ -217,10 +247,7 @@ const filter = (options, inputValue, filterFn)=>{
         opened,
         resetFocusedOption
     ]);
-    /**
-   * Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.
-   *  Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.
-   */ const close = React.useCallback(()=>{
+    const close = React.useCallback(()=>{
         resetKeyboardInput();
         setInputValue('');
         setOpened(false);
@@ -248,7 +275,8 @@ const filter = (options, inputValue, filterFn)=>{
         selectElRef,
         isControlledOutside,
         props.value,
-        nativeSelectValue
+        nativeSelectValue,
+        setNativeSelectValue
     ]);
     const selectFocused = React.useCallback(()=>{
         if (focusedOptionIndex === undefined || !isValidIndex(focusedOptionIndex)) {
@@ -317,49 +345,41 @@ const filter = (options, inputValue, filterFn)=>{
         focusedOptionIndex,
         options
     ]);
-    React.useEffect(function updateOptionsAndSelectedOptionIndex() {
-        const value = props.value !== undefined ? props.value : remapFromNativeValueToSelectValue(nativeSelectValue);
-        const options = searchable && inputValue !== undefined ? filter(optionsProp, inputValue, filterFn) : optionsProp;
-        setOptions(options);
-        const selectedIndex = findSelectedIndex(options, value);
-        setSelectedOptionIndex(selectedIndex);
-        setFocusedOptionIndex(selectedIndex);
-    }, [
-        filterFn,
-        inputValue,
-        nativeSelectValue,
-        optionsProp,
-        defaultValue,
-        props.value,
-        searchable
-    ]);
     const onNativeSelectChange = (e)=>{
+        // для ситуаций, когда в опциях value это string а value/defaultValue это number
+        // и наоборот, приводим значение nativeSelectValue из стейта к строке.
+        // ведь nativeSelect всегда возвращает string в onChange, а пользователь
+        // может использовать number для опций
+        //
+        // native select всегда возвращает string в качестве value в onChange
+        // Когда селект контролируемый, то пользователь, в onChange может сохранить в свой стейт строку (например '3'), хотя
+        // в качестве value опции может использовать число (3),
+        // тогда строчное значение value ('3') из стейта пользователя
+        // будет передано в CustomSelect, и после синхронизации nativeSelectValue (3) и props.value ('3') и после клика на уже выбранную опцию (3),
+        // когда nativeSelectValue обновится на значение опции (число 3),
+        // сравнение nativeSelectValue (3) и prevNativeSelectValue ('3') может не сработать лишь из-за того, что они в разных типах.
+        const convertedNativeSelectValue = typeof nativeSelectValue === 'number' && (typeof props.value === 'string' || typeof prevNativeSelectValue === 'string') ? String(nativeSelectValue) : nativeSelectValue;
+        const isCalledWithSameControlledOptionValue = isControlledOutside && props.value === remapFromNativeValueToSelectValue(convertedNativeSelectValue);
+        const isNativeValueChanged = convertedNativeSelectValue !== prevNativeSelectValue && prevNativeSelectValue !== undefined;
+        const isTriggeredByClearButton = allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE;
+        const shouldCallOnChange = !isCalledWithSameControlledOptionValue && (isNativeValueChanged || isTriggeredByClearButton);
+        if (!shouldCallOnChange) {
+            return;
+        }
         const remappedNativeValue = remapFromNativeValueToSelectValue(e.currentTarget.value);
-        const newSelectedOptionIndex = findSelectedIndex(options, remappedNativeValue);
-        if (selectedOptionIndex !== newSelectedOptionIndex) {
-            if (!isControlledOutside) {
-                setSelectedOptionIndex(newSelectedOptionIndex);
-            }
-            if (e.target.value === NOT_SELECTED.NATIVE) {
-                e.target.value = '';
-            }
-            if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
-                e.currentTarget.value = '';
-            }
-            onChange?.(e, remappedNativeValue);
+        if (e.target.value === NOT_SELECTED.NATIVE) {
+            e.target.value = '';
+        }
+        if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
+            e.currentTarget.value = '';
         }
+        onChange?.(e, remappedNativeValue);
     };
     const onInputChange = React.useCallback((e)=>{
         onInputChangeProp && onInputChangeProp(e);
-        const options = filter(optionsProp, e.target.value, filterFn);
-        setOptions(options);
-        setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue));
         setInputValue(e.target.value);
     }, [
-        filterFn,
-        nativeSelectValue,
-        onInputChangeProp,
-        optionsProp
+        onInputChangeProp
     ]);
     const areOptionsShown = React.useCallback(()=>{
         return scrollBoxRef.current !== null;
@@ -432,19 +452,14 @@ const filter = (options, inputValue, filterFn)=>{
         options,
         selectOption
     ]);
-    const prevMousePositionRef = React.useRef({
+    const lastMousePositionRef = React.useRef({
         x: 0,
         y: 0
     });
     const focusOptionOnMouseMove = React.useCallback((e, index)=>{
-        const isMouseChangedPosition = Math.abs(prevMousePositionRef.current.x - e.clientX) >= 1 || Math.abs(prevMousePositionRef.current.y - e.clientY) >= 1;
-        if (isMouseChangedPosition) {
+        if (isMousePositionChanged(e, lastMousePositionRef.current)) {
             focusOptionByIndex(index, false);
         }
-        prevMousePositionRef.current = {
-            x: e.clientX,
-            y: e.clientY
-        };
     }, [
         focusOptionByIndex
     ]);
@@ -525,6 +540,7 @@ const filter = (options, inputValue, filterFn)=>{
         iconProp,
         restProps.disabled,
         clearButtonTestId,
+        setNativeSelectValue,
         selectInputRef
     ]);
     const icon = React.useMemo(()=>{
@@ -593,12 +609,32 @@ const filter = (options, inputValue, filterFn)=>{
         'aria-autocomplete': 'none'
     };
     const focusWithin = useFocusWithin(handleRootRef);
+    const resetOptionFocusOnMouseLeave = React.useCallback((event)=>{
+        // В Хроме eсли мышка пользователя находится над инпутом селекта,
+        // и он с клавиатуры открывает опции, причём одна из опций
+        // уже выбрана, то видно, как выбранная опция получает фокус,
+        // но потом сразу же его теряет.
+        // Связано это с тем, что в этот момент вызывается onMouseLeave, на который у нас
+        // завязан сброс состония фокуса у опции. По хорошему фокус должен оставаться.
+        // Нам не интересен вызов onMouseLeave если мышка при этом не двигалась.
+        if (isMousePositionChanged(event, lastMousePositionRef.current)) {
+            resetFocusedOption();
+        }
+    }, [
+        resetFocusedOption
+    ]);
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         style: style,
         ref: handleRootRef,
         onClick: passClickAndFocusToInputOnClick,
         onMouseDown: preventInputBlurWhenClickInsideFocusedSelectArea,
+        onMouseMove: function updateLastMousePosition(e) {
+            lastMousePositionRef.current = {
+                x: e.clientX,
+                y: e.clientY
+            };
+        },
         children: [
             focusWithin && selected && !opened && /*#__PURE__*/ _jsx(VisuallyHidden, {
                 "aria-live": "polite",
@@ -651,9 +687,9 @@ const filter = (options, inputValue, filterFn)=>{
             opened && /*#__PURE__*/ _jsx(CustomSelectDropdown, {
                 targetRef: containerRef,
                 placement: popperPlacement,
-                scrollBoxRef: setScrollBoxRef,
+                scrollBoxRef: scrollBoxRef,
                 onPlacementChange: setPopperPlacement,
-                onMouseLeave: resetFocusedOption,
+                onMouseLeave: resetOptionFocusOnMouseLeave,
                 fetching: fetching,
                 overscrollBehavior: overscrollBehavior,
                 offsetDistance: dropdownOffsetDistance,