@vkontakte/vkui 6.3.0 → 6.3.1

package/dist/vkui.js.tmp

@@ -13331,7 +13331,7 @@ var whileElementsMounted = function() {
     placement, placementProp = tmp === void 0 ? 'bottom' : tmp, middlewares = param.middlewares, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_closeAfterClick = param.closeAfterClick, closeAfterClick = _param_closeAfterClick === void 0 ? false : _param_closeAfterClick, _param_disabled = param.// disables
     disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_disableInteractive = param.disableInteractive, disableInteractive = _param_disableInteractive === void 0 ? false : _param_disableInteractive, _param_disableCloseOnClickOutside = param.disableCloseOnClickOutside, disableCloseOnClickOutside = _param_disableCloseOnClickOutside === void 0 ? false : _param_disableCloseOnClickOutside, _param_disableCloseOnEscKey = param.disableCloseOnEscKey, disableCloseOnEscKey = _param_disableCloseOnEscKey === void 0 ? false : _param_disableCloseOnEscKey, _param_defaultShown = param.// uncontrolled
     defaultShown, defaultShown = _param_defaultShown === void 0 ? false : _param_defaultShown, // controlled
-    shownProp = param.shown, onShownChangeProp = param.onShownChange;
+    shownProp = param.shown, onShownChangeProp = param.onShownChange, onShownChangedProp = param.onShownChanged;
     var memoizedValue = React.useMemo(function() {
         return shownProp !== undefined ? {
             shown: shownProp
@@ -13352,6 +13352,7 @@ var whileElementsMounted = function() {
             }
         })
     }), 2), shownLocalState = _useCustomEnsuredControl[0], setShownLocalState = _useCustomEnsuredControl[1];
+    var onShownChanged = useStableCallback(onShownChangedProp ? onShownChangedProp : noop);
     var _React_useState = useFloatingWithInteractions_sliced_to_array(React.useState(function() {
         return shownLocalState.shown;
     }), 2), shownFinalState = _React_useState[0], setShownFinalState = _React_useState[1];
@@ -13479,6 +13480,7 @@ var whileElementsMounted = function() {
         if (willBeHide) {
             setShownFinalState(false);
             setWillBeHide(false);
+            onShownChanged(false, shownLocalState.reason);
         }
     };
     var handleOnClose = React.useCallback(function() {
@@ -13537,6 +13539,7 @@ var whileElementsMounted = function() {
         }
         if (shownLocalState.shown) {
             setShownFinalState(true);
+            onShownChanged(true, shownLocalState.reason);
         } else if (hasCSSAnimation.current && !willBeHide) {
             setWillBeHide(true);
         } else {
@@ -13548,7 +13551,8 @@ var whileElementsMounted = function() {
     }, [
         shownLocalState,
         shownFinalState,
-        willBeHide
+        willBeHide,
+        onShownChanged
     ]);
     var referencePropsRef = React.useRef({});
     var floatingPropsRef = React.useRef({
@@ -27030,12 +27034,14 @@ function Cell_unsupported_iterable_to_array(o, minLen) {
     var simpleCellDisabled = draggable && !selectable || removable && !restProps.onClick || disabled;
     var hasActive = !simpleCellDisabled && !dragging;
     var cellClasses = classNames_classNames("vkuiCell", dragging && "vkuiCell--dragging", platform === 'ios' && "vkuiCell--ios", removable && "vkuiCell--removable", Component === 'label' && "vkuiCell--selectable", disabled && "vkuiCell--disabled");
-    var simpleCellProps = Cell_object_spread_props(Cell_object_spread({
+    var simpleCellProps = Cell_object_spread_props(Cell_object_spread(Cell_object_spread_props(Cell_object_spread({
         hasActive: hasActive,
         hasHover: hasActive && !removable
     }, restProps), {
-        className: "vkuiCell__content",
-        Component: Component,
+        className: "vkuiCell__content"
+    }), Component && {
+        Component: Component
+    }), {
         before: /*#__PURE__*/ react.createElement(react.Fragment, null, draggable && platform !== 'ios' && dragger, selectable && checkbox, before),
         after: /*#__PURE__*/ react.createElement(react.Fragment, null, draggable && platform === 'ios' && dragger, after)
     });
@@ -40494,6 +40500,7 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
     var handleRootRef = useExternRef(containerRef, getRootRef);
     var scrollBoxRef = React.useRef(null);
     var selectElRef = useExternRef(getRef);
+    var optionsWrapperRef = React.useRef(null);
     var _React_useState1 = CustomSelect_sliced_to_array(React.useState(-1), 2), focusedOptionIndex = _React_useState1[0], setFocusedOptionIndex = _React_useState1[1];
     var _React_useState2 = CustomSelect_sliced_to_array(React.useState(props.value !== undefined), 2), isControlledOutside = _React_useState2[0], setIsControlledOutside = _React_useState2[1];
     var _React_useState3 = CustomSelect_sliced_to_array(React.useState(''), 2), inputValue = _React_useState3[0], setInputValue = _React_useState3[1];
@@ -40547,7 +40554,8 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
     var scrollToElement = React.useCallback(function(index) {
         var center = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
         var dropdown = scrollBoxRef.current;
-        var item = dropdown && dropdown.firstElementChild ? dropdown.firstElementChild.children[index] : null;
+        var optionsWrapper = optionsWrapperRef.current;
+        var item = dropdown && optionsWrapper ? optionsWrapper.children[index] : null;
         if (!item || !dropdown) {
             return;
         }
@@ -40887,7 +40895,9 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
         popupAriaId
     ]);
     var resolvedContent = React.useMemo(function() {
-        var defaultDropdownContent = (options === null || options === void 0 ? void 0 : options.length) > 0 ? options.map(renderOption) : /*#__PURE__*/ React.createElement(Footnote, {
+        var defaultDropdownContent = (options === null || options === void 0 ? void 0 : options.length) > 0 ? /*#__PURE__*/ React.createElement("div", {
+            ref: optionsWrapperRef
+        }, options.map(renderOption)) : /*#__PURE__*/ React.createElement(Footnote, {
             className: "vkuiCustomSelect__empty"
         }, emptyText);
         if (typeof renderDropdown === 'function') {
@@ -46162,7 +46172,7 @@ function Popover_unsupported_iterable_to_array(o, minLen) {
     var // UsePopoverProps
     withArrow = _param.arrow, _param_arrowHeight = _param.arrowHeight, arrowHeight = _param_arrowHeight === void 0 ? DEFAULT_ARROW_HEIGHT : _param_arrowHeight, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? DEFAULT_ARROW_PADDING : _param_arrowPadding, tmp = _param.placement, expectedPlacement = tmp === void 0 ? 'bottom-start' : tmp, onPlacementChange = _param.onPlacementChange, _param_disableFlipMiddleware = _param.disableFlipMiddleware, disableFlipMiddleware = _param_disableFlipMiddleware === void 0 ? false : _param_disableFlipMiddleware, _param_trigger = _param.trigger, trigger = _param_trigger === void 0 ? 'click' : _param_trigger, content = _param.content, _param_hoverDelay = _param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 150 : _param_hoverDelay, closeAfterClick = _param.closeAfterClick, _param_offsetByMainAxis = _param.offsetByMainAxis, offsetByMainAxis = _param_offsetByMainAxis === void 0 ? 8 : _param_offsetByMainAxis, _param_offsetByCrossAxis = _param.offsetByCrossAxis, offsetByCrossAxis = _param_offsetByCrossAxis === void 0 ? 0 : _param_offsetByCrossAxis, sameWidth = _param.sameWidth, hideWhenReferenceHidden = _param.hideWhenReferenceHidden, disabled = _param.disabled, disableInteractive = _param.disableInteractive, disableCloseOnClickOutside = _param.disableCloseOnClickOutside, disableCloseOnEscKey = _param.disableCloseOnEscKey, _param_keepMounted = _param.keepMounted, keepMounted = _param_keepMounted === void 0 ? false : _param_keepMounted, customMiddlewares = _param.customMiddlewares, _param_defaultShown = _param.// uncontrolled
     defaultShown, defaultShown = _param_defaultShown === void 0 ? false : _param_defaultShown, // controlled
-    shownProp = _param.shown, onShownChange = _param.onShownChange, _param_usePortal = _param.// Для AppRootPortal
+    shownProp = _param.shown, onShownChange = _param.onShownChange, onShownChanged = _param.onShownChanged, _param_usePortal = _param.// Для AppRootPortal
     usePortal, usePortal = _param_usePortal === void 0 ? true : _param_usePortal, // Для FloatingArrow
     arrowProps = _param.arrowProps, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? DefaultIcon : _param_ArrowIcon, _param_autoFocus = _param.// FocusTrapProps
     autoFocus, autoFocus = _param_autoFocus === void 0 ? true : _param_autoFocus, _param_restoreFocus = _param.restoreFocus, restoreFocus = _param_restoreFocus === void 0 ? true : _param_restoreFocus, className = _param.className, children = _param.children, _param_noStyling = _param.noStyling, noStyling = _param_noStyling === void 0 ? false : _param_noStyling, _param_zIndex = _param.zIndex, zIndex = _param_zIndex === void 0 ? 'var(--vkui--z_index_popout)' : _param_zIndex, _param_role = _param.// a11y
@@ -46190,6 +46200,7 @@ function Popover_unsupported_iterable_to_array(o, minLen) {
         "defaultShown",
         "shown",
         "onShownChange",
+        "onShownChanged",
         "usePortal",
         "arrowProps",
         "ArrowIcon",
@@ -46227,7 +46238,8 @@ function Popover_unsupported_iterable_to_array(o, minLen) {
         disableCloseOnEscKey: disableCloseOnEscKey,
         defaultShown: defaultShown,
         shown: shownProp,
-        onShownChange: onShownChange
+        onShownChange: onShownChange,
+        onShownChanged: onShownChanged
     }), resolvedPlacement = _useFloatingWithInteractions.placement, shown = _useFloatingWithInteractions.shown, willBeHide = _useFloatingWithInteractions.willBeHide, refs = _useFloatingWithInteractions.refs, referenceProps = _useFloatingWithInteractions.referenceProps, floatingProps = _useFloatingWithInteractions.floatingProps, middlewareData = _useFloatingWithInteractions.middlewareData, onClose = _useFloatingWithInteractions.onClose, onRestoreFocus = _useFloatingWithInteractions.onRestoreFocus, onEscapeKeyDown = _useFloatingWithInteractions.onEscapeKeyDown;
     usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);
     var _usePatchChildren = Popover_sliced_to_array(usePatchChildren(children, injectAriaExpandedPropByRole(referenceProps, shown, role), refs.setReference), 2), child = _usePatchChildren[1];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.3.0",
+  "version": "6.3.1",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",

package/src/components/Cell/Cell.tsx

@@ -125,7 +125,11 @@ export const Cell: React.FC<CellProps> & {
     hasHover: hasActive && !removable,
     ...restProps,
     className: styles['Cell__content'],
-    Component: Component,
+    // чтобы свойство, если не определено, не присутствовало в
+    // restProps явно как {'Component': undefined} и ниже не переопределяло
+    // возможное значение commonProps.Component = 'a' при слиянии двух объектов, как
+    // {...commonProps, ...restProps}
+    ...(Component && { Component }),
     before: (
       <React.Fragment>
         {draggable && platform !== 'ios' && dragger}

package/src/components/CustomSelect/CustomSelect.tsx

@@ -282,6 +282,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const handleRootRef = useExternRef(containerRef, getRootRef);
   const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);
   const selectElRef = useExternRef(getRef);
+  const optionsWrapperRef = React.useRef<HTMLDivElement>(null);
 
   const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);
   const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
@@ -334,10 +335,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
   const scrollToElement = React.useCallback((index: number, center = false) => {
     const dropdown = scrollBoxRef.current;
+    const optionsWrapper = optionsWrapperRef.current;
     const item =
-      dropdown && dropdown.firstElementChild
-        ? (dropdown.firstElementChild.children[index] as HTMLElement)
-        : null;
+      dropdown && optionsWrapper ? (optionsWrapper.children[index] as HTMLElement) : null;
 
     if (!item || !dropdown) {
       return;
@@ -704,7 +704,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const resolvedContent = React.useMemo(() => {
     const defaultDropdownContent =
       options?.length > 0 ? (
-        options.map(renderOption)
+        <div ref={optionsWrapperRef}>{options.map(renderOption)}</div>
       ) : (
         <Footnote className={styles['CustomSelect__empty']}>{emptyText}</Footnote>
       );

package/src/components/ModalDismissButton/ModalDismissButton.module.css

@@ -7,7 +7,6 @@
   padding: 18px;
   box-sizing: border-box;
   color: var(--vkui--color_icon_contrast);
-  transition: opacity 0.15s ease-out;
 }
 
 .ModalDismissButton::before {
@@ -17,6 +16,7 @@
   background: var(--vkui--color_overlay_secondary);
   border-radius: 50%;
   position: absolute;
+  transition: background-color 0.15s ease-out;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- fixes icon misplacement on Safari in some cases */
@@ -25,9 +25,9 @@
 }
 
 .ModalDismissButton--hover::before {
-  opacity: var(--vkui--opacity_disable_accessibility);
+  background: var(--vkui--color_overlay_secondary--hover);
 }
 
 .ModalDismissButton--active::before {
-  opacity: var(--vkui--opacity_disable);
+  background: var(--vkui--color_overlay_secondary--active);
 }

package/src/components/Popover/Popover.tsx

@@ -62,6 +62,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'defaultShown'
   | 'shown'
   | 'onShownChange'
+  | 'onShownChanged'
   | 'usePortal'
   | 'sameWidth'
   | 'hideWhenReferenceHidden'
@@ -152,6 +153,7 @@ export const Popover = ({
   // controlled
   shown: shownProp,
   onShownChange,
+  onShownChanged,
 
   // Для AppRootPortal
   usePortal = true,
@@ -209,6 +211,7 @@ export const Popover = ({
     defaultShown,
     shown: shownProp,
     onShownChange,
+    onShownChanged,
   });
 
   usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);

package/src/lib/floating/useFloatingWithInteractions/types.ts

@@ -80,6 +80,10 @@ export interface UseFloatingWithInteractionsProps {
    * Вызывается при каждом изменении видимости всплывающего элемента.
    */
   onShownChange?: OnShownChange;
+  /**
+   * Вызывается при каждом изменении видимости всплывающего элемента, но после завершении анимации.
+   */
+  onShownChanged?: OnShownChange;
 }
 
 export type ReferenceProps<T = HTMLElement> = Omit<

package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { debounce } from '@vkontakte/vkjs';
+import { debounce, noop } from '@vkontakte/vkjs';
 import { getWindow, isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';
 import { useCustomEnsuredControl } from '../../../hooks/useEnsuredControl';
 import { useGlobalOnClickOutside } from '../../../hooks/useGlobalOnClickOutside';
@@ -49,6 +49,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
   // controlled
   shown: shownProp,
   onShownChange: onShownChangeProp,
+  onShownChanged: onShownChangedProp,
 }: UseFloatingWithInteractionsProps): UseFloatingWithInteractionsReturn<T> => {
   const memoizedValue = React.useMemo(
     () => (shownProp !== undefined ? { shown: shownProp } : undefined),
@@ -64,6 +65,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
       }
     }),
   });
+  const onShownChanged = useStableCallback(onShownChangedProp ? onShownChangedProp : noop);
   const [shownFinalState, setShownFinalState] = React.useState(() => shownLocalState.shown);
   const [willBeHide, setWillBeHide] = React.useState(false);
 
@@ -215,6 +217,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
     if (willBeHide) {
       setShownFinalState(false);
       setWillBeHide(false);
+      onShownChanged(false, shownLocalState.reason);
     }
   };
 
@@ -288,6 +291,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
 
       if (shownLocalState.shown) {
         setShownFinalState(true);
+        onShownChanged(true, shownLocalState.reason);
       } else if (hasCSSAnimation.current && !willBeHide) {
         setWillBeHide(true);
       } else {
@@ -298,7 +302,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
         clearTimeout(blurTimeoutRef.current);
       };
     },
-    [shownLocalState, shownFinalState, willBeHide],
+    [shownLocalState, shownFinalState, willBeHide, onShownChanged],
   );
 
   const referencePropsRef = React.useRef<ReferenceProps>({});