@vkontakte/vkui 4.41.0 → 4.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.41.0",
+  "version": "4.42.1",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Button/Button.css

@@ -18,7 +18,8 @@
 }
 
 .Button--singleIcon {
-  min-width: var(--vkui--size_button_small_height--compact);
+  width: var(--vkui--size_button_small_height--compact);
+  min-width: initial;
 }
 
 .Button--stretched {

package/src/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,9 @@
 import * as React from "react";
-import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
+import {
+  ACTIVE_EFFECT_DELAY,
+  TappableProps,
+  Tappable,
+} from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { IOS, VKCOM } from "../../lib/platform";
 
@@ -30,7 +34,11 @@ export interface CheckboxProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
     HasRootRef<HTMLLabelElement>,
     HasRef<HTMLInputElement>,
-    AdaptivityProps {
+    AdaptivityProps,
+    Pick<
+      TappableProps,
+      "hoverMode" | "activeMode" | "hasHover" | "hasActive" | "focusVisibleMode"
+    > {
   description?: React.ReactNode;
   indeterminate?: boolean;
   defaultIndeterminate?: boolean;
@@ -51,6 +59,11 @@ export const Checkbox = ({
   indeterminate,
   defaultIndeterminate,
   sizeY,
+  hoverMode,
+  activeMode,
+  hasHover,
+  hasActive,
+  focusVisibleMode,
   onChange,
   ...restProps
 }: CheckboxProps) => {
@@ -115,6 +128,11 @@ export const Checkbox = ({
       disabled={restProps.disabled}
       activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}
       getRootRef={getRootRef}
+      hoverMode={hoverMode}
+      activeMode={activeMode}
+      hasHover={hasHover}
+      hasActive={hasActive}
+      focusVisibleMode={focusVisibleMode}
     >
       <VisuallyHiddenInput
         {...restProps}

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -362,49 +362,52 @@ export const ChipsSelect = <Option extends ChipOption>(
   };
 
   return (
-    <FormField
-      vkuiClass={classNames(
-        "ChipsSelect",
-        opened && "Select--open",
-        opened && (isPopperDirectionTop ? "Select--pop-up" : "Select--pop-down")
-      )}
-      getRootRef={rootRef}
-      style={style}
-      className={className}
-      disabled={disabled}
-      role="application"
-      aria-disabled={disabled}
-      aria-readonly={restProps.readOnly}
-      after={
-        <IconButton
-          vkuiClass="ChipsSelect__dropdown"
-          activeMode=""
-          hoverMode=""
-          // TODO: add label customization
-          aria-label={opened ? "Скрыть" : "Развернуть"}
-          onClick={toggleOpened}
-        >
-          <DropdownIcon vkuiClass="ChipsSelect__icon" opened={opened} />
-        </IconButton>
-      }
-      before={before}
-    >
-      <ChipsInputBase
-        {...restProps}
-        tabIndex={tabIndex}
-        value={selectedOptions}
-        inputValue={fieldValue}
-        getNewOptionData={getNewOptionData}
-        getOptionLabel={getOptionLabel}
-        getOptionValue={getOptionValue}
-        renderChip={renderChipWrapper}
-        onFocus={handleFocus}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        getRef={getRef}
+    <React.Fragment>
+      <FormField
+        vkuiClass={classNames(
+          "ChipsSelect",
+          opened && "Select--open",
+          opened &&
+            (isPopperDirectionTop ? "Select--pop-up" : "Select--pop-down")
+        )}
+        getRootRef={rootRef}
+        style={style}
+        className={className}
         disabled={disabled}
-        onInputChange={handleInputChange}
-      />
+        role="application"
+        aria-disabled={disabled}
+        aria-readonly={restProps.readOnly}
+        after={
+          <IconButton
+            vkuiClass="ChipsSelect__dropdown"
+            activeMode=""
+            hoverMode=""
+            // TODO: add label customization
+            aria-label={opened ? "Скрыть" : "Развернуть"}
+            onClick={toggleOpened}
+          >
+            <DropdownIcon vkuiClass="ChipsSelect__icon" opened={opened} />
+          </IconButton>
+        }
+        before={before}
+      >
+        <ChipsInputBase
+          {...restProps}
+          tabIndex={tabIndex}
+          value={selectedOptions}
+          inputValue={fieldValue}
+          getNewOptionData={getNewOptionData}
+          getOptionLabel={getOptionLabel}
+          getOptionValue={getOptionValue}
+          renderChip={renderChipWrapper}
+          onFocus={handleFocus}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          getRef={getRef}
+          disabled={disabled}
+          onInputChange={handleInputChange}
+        />
+      </FormField>
       {opened && (
         <CustomSelectDropdown
           targetRef={rootRef}
@@ -475,6 +478,6 @@ export const ChipsSelect = <Option extends ChipOption>(
           )}
         </CustomSelectDropdown>
       )}
-    </FormField>
+    </React.Fragment>
   );
 };

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -8,6 +8,7 @@ import {
   TrackerOptionsProps,
   useTrackerVisibility,
 } from "./useTrackerVisibility";
+import { stopPropagation } from "../../lib/utils";
 import "./CustomScrollView.css";
 
 export interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {
@@ -183,7 +184,11 @@ export const CustomScrollView = ({
 
   return (
     <div vkuiClass="CustomScrollView" className={className}>
-      <div vkuiClass="CustomScrollView__barY" ref={barY}>
+      <div
+        vkuiClass="CustomScrollView__barY"
+        ref={barY}
+        onClick={stopPropagation}
+      >
         <div
           vkuiClass={classNames(
             "CustomScrollView__trackerY",

package/src/components/CustomSelect/CustomSelect.tsx

@@ -242,7 +242,7 @@ function CustomSelectComponent(props: CustomSelectProps) {
   }, [props.value]);
 
   useIsomorphicLayoutEffect(() => {
-    if (nativeSelectValue !== undefined) {
+    if (options.some(({ value }) => nativeSelectValue === value)) {
       const event = new Event("change", { bubbles: true });
 
       selectElRef.current?.dispatchEvent(event);
@@ -709,6 +709,7 @@ function CustomSelectComponent(props: CustomSelectProps) {
           onFocus={onFocus}
           onBlur={onBlur}
           vkuiClass={openedClassNames}
+          before={before}
           after={icon}
           selectType={selectType}
         >

package/src/components/Dropdown/Dropdown.tsx

@@ -138,7 +138,10 @@ export const Dropdown = ({
     }
   };
 
-  useGlobalEventListener(document, "click", handleOutsideClick);
+  useGlobalEventListener(document, "click", handleOutsideClick, {
+    capture: true,
+    passive: true,
+  });
   const targetEnterListener = useEventListener("mouseenter", handleTargetEnter);
   const targetClickEvent = useEventListener("click", handleTargetClick);
   const targetLeaveListener = useEventListener("mouseleave", handleTargetLeave);

package/src/components/Search/Search.tsx

@@ -170,7 +170,7 @@ const SearchComponent = ({
             )}
           </div>
         </label>
-        <div vkuiClass="Search__after" onClick={onCancel}>
+        <div vkuiClass="Search__after">
           <div vkuiClass="Search__icons">
             {icon && (
               <Touch onStart={onIconClickStart} vkuiClass="Search__icon">
@@ -178,13 +178,19 @@ const SearchComponent = ({
               </Touch>
             )}
             {!!value && (
-              <Touch onStart={onIconCancelClickStart} vkuiClass="Search__icon">
+              <Touch
+                onStart={onIconCancelClickStart}
+                onClick={onCancel}
+                vkuiClass="Search__icon"
+              >
                 {platform === IOS ? <Icon16Clear /> : <Icon24Cancel />}
               </Touch>
             )}
           </div>
           {platform === IOS && after && (
-            <div vkuiClass="Search__after-in">{after}</div>
+            <div vkuiClass="Search__after-in" onClick={onCancel}>
+              {after}
+            </div>
           )}
         </div>
       </div>

package/src/components/Tooltip/Tooltip.tsx

@@ -305,6 +305,7 @@ export const Tooltip = ({
 
   const { document } = useDOM();
   useGlobalEventListener(document, "click", isShown && onClose, {
+    capture: true,
     passive: true,
   });
   // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()