@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/CustomSelect/CustomSelect.tsx

@@ -5,6 +5,7 @@ import { classNames, debounce } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusWithin } from '../../hooks/useFocusWithin';
+import { useStateWithPrev } from '../../hooks/useStateWithPrev';
 import { callMultiple } from '../../lib/callMultiple';
 import { useDOM } from '../../lib/dom';
 import type { Placement } from '../../lib/floating';
@@ -140,6 +141,16 @@ const filter = <T extends CustomSelectOptionInterface>(
     : options;
 };
 
+type MousePosition = {
+  x: React.MouseEvent['clientX'];
+  y: React.MouseEvent['clientY'];
+};
+function isMousePositionChanged(event: React.MouseEvent, prevPosition: MousePosition) {
+  return (
+    Math.abs(prevPosition.x - event.clientX) >= 1 || Math.abs(prevPosition.y - event.clientY) >= 1
+  );
+}
+
 export interface CustomSelectOptionInterface {
   value: Exclude<SelectValue, null>;
   label: React.ReactElement | string;
@@ -309,39 +320,65 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);
   const selectElRef = useExternRef(getRef);
   const optionsWrapperRef = React.useRef<HTMLDivElement>(null);
+  const scrollPerformedRef = React.useRef(false);
 
   const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);
   const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
   const [inputValue, setInputValue] = React.useState('');
-  const [nativeSelectValue, setNativeSelectValue] = React.useState<NativeSelectValue>(() => {
-    if (props.value !== undefined) {
-      return remapFromSelectValueToNativeValue(props.value);
-    }
-    if (defaultValue !== undefined) {
-      return remapFromSelectValueToNativeValue(defaultValue);
-    }
-    return NOT_SELECTED.NATIVE;
-  });
+  const [[nativeSelectValue, prevNativeSelectValue], setNativeSelectValue] =
+    useStateWithPrev<NativeSelectValue>(() => {
+      if (props.value !== undefined) {
+        return remapFromSelectValueToNativeValue(props.value);
+      }
+      if (defaultValue !== undefined) {
+        return remapFromSelectValueToNativeValue(defaultValue);
+      }
+      return NOT_SELECTED.NATIVE;
+    });
 
   const [popperPlacement, setPopperPlacement] = React.useState<Placement>(popupDirection);
-  const [options, setOptions] = React.useState(optionsProp);
+
+  const options = React.useMemo(() => {
+    return filter(optionsProp, inputValue, filterFn);
+  }, [filterFn, inputValue, optionsProp]);
+
   const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number | undefined>(
-    findSelectedIndex(optionsProp, props.value ?? defaultValue ?? null),
+    findSelectedIndex(options, props.value ?? defaultValue ?? null),
   );
 
-  React.useEffect(() => {
-    setIsControlledOutside((oldIsControlled) => {
-      const newIsControlled = props.value !== undefined;
-      checkMixControlledAndUncontrolledState(oldIsControlled, newIsControlled);
-      return newIsControlled;
-    });
-    setNativeSelectValue((nativeSelectValue) => {
+  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;
+      });
+    },
+    [props.value],
+  );
+
+  React.useEffect(
+    function syncNativeSelectValueWithPropValue() {
       if (props.value !== undefined) {
-        return remapFromSelectValueToNativeValue(props.value);
+        setNativeSelectValue(remapFromSelectValueToNativeValue(props.value));
       }
-      return nativeSelectValue;
-    });
-  }, [props.value]);
+    },
+    [props.value, setNativeSelectValue],
+  );
 
   useIsomorphicLayoutEffect(() => {
     if (
@@ -411,10 +448,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         scrollToElement(index);
       }
 
-      // Это оптимизация, прежде всего, под `onMouseMove`
-      setFocusedOptionIndex((focusedOptionIndex) =>
-        focusedOptionIndex !== index ? index : focusedOptionIndex,
-      );
+      setFocusedOptionIndex(index);
     },
     [options, scrollToElement],
   );
@@ -426,18 +460,23 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     [options.length],
   );
 
-  const setScrollBoxRef = React.useCallback(
-    (ref: HTMLDivElement | null) => {
-      scrollBoxRef.current = ref;
+  useIsomorphicLayoutEffect(() => {
+    if (!opened) {
+      scrollPerformedRef.current = false;
+      return;
+    }
 
-      if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {
-        {
-          scrollToElement(selectedOptionIndex, true);
-        }
-      }
-    },
-    [isValidIndex, scrollToElement, selectedOptionIndex],
-  );
+    if (scrollPerformedRef.current) {
+      return;
+    }
+
+    const isIndexValid = selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex);
+
+    if (scrollBoxRef.current && isIndexValid) {
+      scrollPerformedRef.current = true;
+      scrollToElement(selectedOptionIndex, true);
+    }
+  }, [opened, selectedOptionIndex, scrollToElement, isValidIndex]);
 
   const [keyboardInput, setKeyboardInput] = React.useState('');
   const resetKeyboardInput = React.useCallback(() => {
@@ -461,10 +500,6 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     [keyboardInput, opened, resetFocusedOption],
   );
 
-  /**
-   * Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.
-   *  Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.
-   */
   const close = React.useCallback(() => {
     resetKeyboardInput();
 
@@ -490,7 +525,15 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         selectElRef.current?.dispatchEvent(event);
       }
     },
-    [close, options, selectElRef, isControlledOutside, props.value, nativeSelectValue],
+    [
+      close,
+      options,
+      selectElRef,
+      isControlledOutside,
+      props.value,
+      nativeSelectValue,
+      setNativeSelectValue,
+    ],
   );
 
   const selectFocused = React.useCallback(() => {
@@ -548,55 +591,59 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     [focusOptionByIndex, 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: React.ChangeEventHandler<HTMLSelectElement> = (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.ChangeEventHandler<HTMLInputElement> = 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(() => {
@@ -679,21 +726,12 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     [options, selectOption],
   );
 
-  const prevMousePositionRef = React.useRef<{
-    x: React.MouseEvent['clientX'];
-    y: React.MouseEvent['clientY'];
-  }>({ x: 0, y: 0 });
+  const lastMousePositionRef = React.useRef<MousePosition>({ x: 0, y: 0 });
   const focusOptionOnMouseMove = React.useCallback(
     (e: React.MouseEvent<HTMLElement>, index: number) => {
-      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],
   );
@@ -723,6 +761,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
             // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.
             onMouseMove: (e) => focusOptionOnMouseMove(e, index),
             id: `${popupAriaId}-${option.value}`,
+            ...option,
           })}
         </React.Fragment>
       );
@@ -782,6 +821,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     iconProp,
     restProps.disabled,
     clearButtonTestId,
+    setNativeSelectValue,
     selectInputRef,
   ]);
 
@@ -867,6 +907,22 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
   const focusWithin = useFocusWithin(handleRootRef);
 
+  const resetOptionFocusOnMouseLeave = React.useCallback(
+    (event: React.MouseEvent) => {
+      // В Хроме eсли мышка пользователя находится над инпутом селекта,
+      // и он с клавиатуры открывает опции, причём одна из опций
+      // уже выбрана, то видно, как выбранная опция получает фокус,
+      // но потом сразу же его теряет.
+      // Связано это с тем, что в этот момент вызывается onMouseLeave, на который у нас
+      // завязан сброс состония фокуса у опции. По хорошему фокус должен оставаться.
+      // Нам не интересен вызов onMouseLeave если мышка при этом не двигалась.
+      if (isMousePositionChanged(event, lastMousePositionRef.current)) {
+        resetFocusedOption();
+      }
+    },
+    [resetFocusedOption],
+  );
+
   return (
     <div
       className={classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], className)}
@@ -874,6 +930,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       ref={handleRootRef}
       onClick={passClickAndFocusToInputOnClick}
       onMouseDown={preventInputBlurWhenClickInsideFocusedSelectArea}
+      onMouseMove={function updateLastMousePosition(e) {
+        lastMousePositionRef.current = { x: e.clientX, y: e.clientY };
+      }}
     >
       {focusWithin && selected && !opened && (
         <VisuallyHidden aria-live="polite">{selected.label}</VisuallyHidden>
@@ -903,6 +962,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         {selected?.label}
       </CustomSelectInput>
       <select
+        tabIndex={-1}
         ref={selectElRef}
         name={name}
         onChange={onNativeSelectChange}
@@ -926,9 +986,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         <CustomSelectDropdown
           targetRef={containerRef}
           placement={popperPlacement}
-          scrollBoxRef={setScrollBoxRef}
+          scrollBoxRef={scrollBoxRef}
           onPlacementChange={setPopperPlacement}
-          onMouseLeave={resetFocusedOption}
+          onMouseLeave={resetOptionFocusOnMouseLeave}
           fetching={fetching}
           overscrollBehavior={overscrollBehavior}
           offsetDistance={dropdownOffsetDistance}

package/src/components/CustomSelect/CustomSelectInput/CustomSelectInput.module.css

@@ -7,19 +7,19 @@
   inset-block-start: 0;
   inset-inline-start: 0;
   z-index: var(--vkui_internal--z_index_form_field_element);
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: var(--vkui--size_field_height--regular);
-  line-height: var(--vkui--size_field_height--regular);
+  padding-block: 0;
+  padding-inline: 12px;
   margin: 0;
+  line-height: var(--vkui--size_field_height--regular);
+  color: var(--vkui--color_text_primary);
+  appearance: none;
+  background: transparent;
   border: 0;
   border-radius: inherit;
-  box-sizing: border-box;
   box-shadow: none;
-  appearance: none;
-  color: var(--vkui--color_text_primary);
-  padding-block: 0;
-  padding-inline: 12px;
-  background: transparent;
 }
 
 .elCursorPointer {
@@ -46,12 +46,12 @@
 
 .container {
   z-index: var(--vkui_internal--z_index_form_field_element);
+  box-sizing: border-box;
   inline-size: 100%;
   max-block-size: 100%;
   padding-inline: 12px 0;
-  color: var(--vkui--color_text_primary);
-  box-sizing: border-box;
   overflow: hidden;
+  color: var(--vkui--color_text_primary);
   pointer-events: none;
 }
 
@@ -76,9 +76,9 @@
 .inputGroup {
   position: relative;
   display: flex;
-  align-self: stretch;
-  align-items: center;
   flex: 1;
+  align-items: center;
+  align-self: stretch;
   overflow: hidden;
 }
 
@@ -92,8 +92,8 @@
 
 .host:not(.multiline) .title {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .empty .title {

package/src/components/CustomSelectDropdown/CustomSelectDropdown.module.css

@@ -1,10 +1,10 @@
 .host {
+  box-sizing: border-box;
   overflow: hidden;
   background-color: var(--vkui--color_background_contrast_themed);
-  box-sizing: border-box;
   border: var(--vkui--size_border--regular) solid var(--vkui--color_field_border_alpha);
-  box-shadow: var(--vkui--elevation1);
   border-radius: 8px;
+  box-shadow: var(--vkui--elevation1);
 }
 
 .wide {

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -58,12 +58,14 @@ export const CustomSelectDropdown = ({
       )}
       usePortal={forcePortal}
       autoUpdateOnTargetResize
+      flipMiddlewareFallbackAxisSideDirection="none"
       {...restProps}
     >
       <CustomScrollView
         getRootRef={scrollBoxRef}
         className={noMaxHeight ? undefined : styles.inWithMaxHeight}
         overscrollBehavior={overscrollBehavior}
+        tabIndex={-1}
       >
         {fetching ? (
           <div className={styles.fetching}>

package/src/components/CustomSelectOption/CustomSelectOption.module.css

@@ -1,14 +1,14 @@
 .host {
-  inline-size: 100%;
-  display: flex;
-  align-items: center;
   position: relative;
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
   padding-block: 8px;
   padding-inline: 12px;
-  user-select: none;
-  cursor: pointer;
   color: var(--vkui--color_text_primary);
+  cursor: pointer;
+  user-select: none;
 }
 
 .hierarchy {
@@ -46,8 +46,8 @@
 
 .main {
   flex-grow: 1;
-  max-inline-size: 100%;
   min-inline-size: 0;
+  max-inline-size: 100%;
 }
 
 .children {
@@ -56,10 +56,10 @@
 }
 
 .after {
-  margin-inline-start: 8px;
-  flex-shrink: 0;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
+  margin-inline-start: 8px;
 }
 
 .description {

package/src/components/DateInput/DateInput.module.css

@@ -1,13 +1,46 @@
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  min-inline-size: inherit;
+  min-block-size: inherit;
+
+  --vkui_internal--DateInput_input_margin_inline_start: 10px;
+  --vkui_internal--DateInput_input_margin_inline_end: 14px;
+}
+
 .input {
+  z-index: var(--vkui_internal--z_index_form_field_element);
   display: block;
   flex-grow: 1;
   align-self: center;
-  margin-inline: 10px 14px;
-  z-index: var(--vkui_internal--z_index_form_field_element);
-  cursor: text;
+  margin-inline: var(--vkui_internal--DateInput_input_margin_inline_start)
+    var(--vkui_internal--DateInput_input_margin_inline_end);
+  font-variant-numeric: tabular-nums;
   white-space: nowrap;
+  cursor: text;
   user-select: text;
-  font-variant-numeric: tabular-nums;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.customValue {
+  position: absolute;
+  box-sizing: border-box;
+  align-self: center;
+  inline-size: calc(
+    100% - var(--vkui_internal--DateInput_input_margin_inline_start) -
+      var(--vkui_internal--DateInput_input_margin_inline_end)
+  );
+  margin-inline: var(--vkui_internal--DateInput_input_margin_inline_start)
+    var(--vkui_internal--DateInput_input_margin_inline_end);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
 }
 
 .inputTimeDivider {
@@ -21,6 +54,6 @@
 
 @media (--sizeY-compact) {
   .sizeYNone .input {
-    margin-inline-end: 22px;
+    --vkui_internal--DateInput_input_margin_inline_end: 22px;
   }
 }